/*
 * ALCANCE PORTAL DESIGN SYSTEM V1
 * Shared visual foundation for Company Admin Hub and Agent Portal.
 * Brand source of truth: Alcance dark navy #202021.
 */

body.mp-portal-ui-v2 {
    --mp-pui-navy: #202021;
    --mp-pui-navy-hover: #062552;
    --mp-pui-orange: #F59A00;
    --mp-pui-orange-hover: #E98F00;
    --mp-pui-bg: #F7F9FC;
    --mp-pui-surface: #FFFFFF;
    --mp-pui-surface-soft: #FBFCFE;
    --mp-pui-text: #0B2347;
    --mp-pui-muted: #708097;
    --mp-pui-line: #E2E8F0;
    --mp-pui-blue: #1769E0;
    --mp-pui-green: #159455;
    --mp-pui-red: #D84242;
    --mp-pui-purple: #7948D8;
    --mp-pui-warning: #B86B00;
    --mp-pui-radius: 5px;
    --mp-pui-radius-round: 999px;
    --mp-pui-gap: 10px;
    --mp-pui-sidebar: 250px;
    --mp-pui-topbar: 74px;
    --mp-pui-content: 1600px;
    --mp-pui-transition: 160ms ease;

    margin: 0 !important;
    background: var(--mp-pui-bg) !important;
    color: var(--mp-pui-text);
    font-family: Inter, Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.mp-portal-ui-v2,
body.mp-portal-ui-v2 *,
body.mp-portal-ui-v2 *::before,
body.mp-portal-ui-v2 *::after {
    box-sizing: border-box;
}

body.mp-portal-ui-v2 a,
body.mp-portal-ui-v2 button,
body.mp-portal-ui-v2 input,
body.mp-portal-ui-v2 select,
body.mp-portal-ui-v2 textarea {
    font: inherit;
}

body.mp-portal-ui-v2 a,
body.mp-portal-ui-v2 button {
    transition:
        background-color var(--mp-pui-transition),
        border-color var(--mp-pui-transition),
        color var(--mp-pui-transition),
        opacity var(--mp-pui-transition);
}

/* Map both legacy portal token sets to the new source of truth. */
body.mp-portal-ui-admin {
    --ap-navy: var(--mp-pui-navy);
    --ap-navy-dark: var(--mp-pui-navy);
    --ap-orange: var(--mp-pui-orange);
    --ap-orange-dark: var(--mp-pui-orange-hover);
    --ap-blue: var(--mp-pui-blue);
    --ap-green: var(--mp-pui-green);
    --ap-red: var(--mp-pui-red);
    --ap-purple: var(--mp-pui-purple);
    --ap-ink: var(--mp-pui-text);
    --ap-muted: var(--mp-pui-muted);
    --ap-line: var(--mp-pui-line);
    --ap-soft: var(--mp-pui-bg);
}

body.mp-portal-ui-agent {
    --mp-ap-navy: var(--mp-pui-navy);
    --mp-ap-navy-2: var(--mp-pui-navy);
    --mp-ap-orange: var(--mp-pui-orange);
    --mp-ap-bg: var(--mp-pui-bg);
    --mp-ap-card: var(--mp-pui-surface);
    --mp-ap-text: var(--mp-pui-text);
    --mp-ap-muted: var(--mp-pui-muted);
    --mp-ap-line: var(--mp-pui-line);
    --mp-ap-success: var(--mp-pui-green);
    --mp-ap-warning: var(--mp-pui-warning);
    --mp-ap-danger: var(--mp-pui-red);
}

/* --------------------------------------------------------------------------
   UNIFIED APP SHELL
   -------------------------------------------------------------------------- */
body.mp-portal-ui-admin .mp-admin-shell,
body.mp-portal-ui-agent .mp-agent-portal {
    min-height: 100vh;
    grid-template-columns: var(--mp-pui-sidebar) minmax(0, 1fr) !important;
    background: var(--mp-pui-bg);
}

body.mp-portal-ui-admin .mp-admin-sidebar,
body.mp-portal-ui-agent .mp-agent-sidebar {
    width: var(--mp-pui-sidebar) !important;
    background: var(--mp-pui-navy) !important;
    color: #fff;
    box-shadow: none !important;
}

body.mp-portal-ui-agent .mp-agent-sidebar {
    padding: 20px 14px 18px !important;
}

body.mp-portal-ui-admin .mp-admin-brand,
body.mp-portal-ui-agent .mp-agent-sidebar-brand {
    min-height: 104px;
    padding: 14px 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

body.mp-portal-ui-admin .mp-admin-brand a,
body.mp-portal-ui-agent .mp-agent-sidebar-brand {
    color: #fff;
}

body.mp-portal-ui-admin .mp-admin-brand img,
body.mp-portal-ui-agent .mp-agent-sidebar-brand img {
    width: auto !important;
    max-width: 190px !important;
    height: 64px !important;
    max-height: 64px !important;
    object-fit: contain;
}

body.mp-portal-ui-admin .mp-admin-logo-mark,
body.mp-portal-ui-agent .mp-agent-brand-mark {
    border-color: var(--mp-pui-orange) !important;
    background: transparent !important;
    border-radius: var(--mp-pui-radius) !important;
}

body.mp-portal-ui-admin .mp-admin-nav,
body.mp-portal-ui-agent .mp-agent-nav {
    display: grid;
    gap: 4px !important;
    margin-top: 0 !important;
    padding: 14px 0 20px !important;
}

body.mp-portal-ui-admin .mp-admin-nav-link,
body.mp-portal-ui-agent .mp-agent-nav a,
body.mp-portal-ui-agent .mp-agent-nav > span {
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: var(--mp-pui-radius) !important;
    background: transparent;
    color: rgba(255, 255, 255, .78) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    text-decoration: none;
}

body.mp-portal-ui-admin .mp-admin-nav-link:hover,
body.mp-portal-ui-agent .mp-agent-nav a:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
}

body.mp-portal-ui-admin .mp-admin-nav-link.is-active,
body.mp-portal-ui-agent .mp-agent-nav a.is-active {
    border-left: 0 !important;
    background: var(--mp-pui-orange) !important;
    color: #fff !important;
}

body.mp-portal-ui-admin .mp-admin-nav-link b,
body.mp-portal-ui-agent .mp-agent-nav em {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: var(--mp-pui-radius-round) !important;
    background: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
    font-size: 9px !important;
    font-style: normal;
}

body.mp-portal-ui-admin .mp-admin-nav-link.is-active b,
body.mp-portal-ui-agent .mp-agent-nav a.is-active em {
    background: #fff !important;
    color: var(--mp-pui-orange-hover) !important;
}

body.mp-portal-ui-admin .mp-admin-sidebar-footer,
body.mp-portal-ui-agent .mp-agent-sidebar-footer {
    margin-top: auto;
    padding: 16px 12px !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    color: rgba(255, 255, 255, .58) !important;
}

body.mp-portal-ui-admin .mp-admin-main,
body.mp-portal-ui-agent .mp-agent-main {
    min-width: 0;
    background: var(--mp-pui-bg) !important;
}

/* --------------------------------------------------------------------------
   TOP BAR
   -------------------------------------------------------------------------- */
body.mp-portal-ui-admin .mp-admin-topbar,
body.mp-portal-ui-agent .mp-agent-topbar {
    min-height: var(--mp-pui-topbar) !important;
    padding: 0 24px !important;
    border-bottom: 1px solid var(--mp-pui-line) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: none !important;
}

body.mp-portal-ui-admin .mp-admin-topbar {
    position: sticky;
    top: 0;
}

body.mp-portal-ui-agent .mp-agent-topbar {
    position: sticky;
    z-index: 70;
    top: 0;
}

body.mp-portal-ui-admin .mp-admin-topbar-left strong,
body.mp-portal-ui-agent .mp-agent-topbar h1 {
    margin: 0 !important;
    color: var(--mp-pui-text) !important;
    font-size: 16px !important;
    line-height: 1.2;
}

body.mp-portal-ui-agent .mp-agent-topbar p,
body.mp-portal-ui-admin .mp-admin-topbar-left small {
    margin: 4px 0 0 !important;
    color: var(--mp-pui-muted) !important;
    font-size: 10px !important;
}

body.mp-portal-ui-admin .mp-admin-menu-toggle,
body.mp-portal-ui-agent .mp-agent-menu-toggle {
    width: 38px;
    height: 38px;
    border: 1px solid var(--mp-pui-line) !important;
    border-radius: var(--mp-pui-radius) !important;
    background: #fff !important;
    color: var(--mp-pui-text) !important;
    box-shadow: none !important;
}

body.mp-portal-ui-admin .mp-admin-top-icon,
body.mp-portal-ui-agent .mp-agent-topbar button,
body.mp-portal-ui-agent .mp-agent-topbar a {
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   CONTENT / TYPOGRAPHY
   -------------------------------------------------------------------------- */
body.mp-portal-ui-admin .mp-admin-content,
body.mp-portal-ui-agent .mp-agent-content {
    width: 100% !important;
    max-width: var(--mp-pui-content) !important;
    margin: 0 auto !important;
    padding: 22px 24px 36px !important;
}

body.mp-portal-ui-v2 h1,
body.mp-portal-ui-v2 h2,
body.mp-portal-ui-v2 h3,
body.mp-portal-ui-v2 h4 {
    color: var(--mp-pui-text);
    letter-spacing: -.015em;
}

body.mp-portal-ui-admin .mp-admin-welcome,
body.mp-portal-ui-admin .mp-admin-page-head {
    margin-bottom: 16px !important;
}

body.mp-portal-ui-admin .mp-admin-welcome h1,
body.mp-portal-ui-admin .mp-admin-page-head h1,
body.mp-portal-ui-agent .mp-agent-welcome-card h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
}

body.mp-portal-ui-admin .mp-admin-welcome p,
body.mp-portal-ui-admin .mp-admin-page-head p,
body.mp-portal-ui-agent .mp-agent-welcome-card p {
    color: var(--mp-pui-muted) !important;
    font-size: 11px !important;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   CARDS / PANELS / KPI
   -------------------------------------------------------------------------- */
body.mp-portal-ui-admin .mp-admin-panel,
body.mp-portal-ui-admin .mp-admin-kpi,
body.mp-portal-ui-agent .mp-agent-panel,
body.mp-portal-ui-agent .mp-agent-stat,
body.mp-portal-ui-agent .mp-agent-welcome-card,
body.mp-portal-ui-v2 .mp-company-quotes-head,
body.mp-portal-ui-v2 .mp-company-quote-metric,
body.mp-portal-ui-v2 .mp-company-quotes-toolbar,
body.mp-portal-ui-v2 .mp-company-quote-card,
body.mp-portal-ui-v2 .mp-company-quote-history-grid > * {
    border: 1px solid var(--mp-pui-line) !important;
    border-radius: var(--mp-pui-radius) !important;
    background: var(--mp-pui-surface) !important;
    box-shadow: none !important;
}

body.mp-portal-ui-agent .mp-agent-welcome-card {
    color: var(--mp-pui-text) !important;
}

body.mp-portal-ui-admin .mp-admin-kpis,
body.mp-portal-ui-agent .mp-agent-stats {
    gap: var(--mp-pui-gap) !important;
}

body.mp-portal-ui-admin .mp-admin-kpi {
    min-height: 104px !important;
    padding: 14px !important;
    border-top: 1px solid var(--mp-pui-line) !important;
}

body.mp-portal-ui-agent .mp-agent-stat {
    min-height: 104px;
    padding: 16px !important;
}

body.mp-portal-ui-admin .mp-admin-kpi-icon,
body.mp-portal-ui-agent .mp-agent-stat-icon,
body.mp-portal-ui-v2 .mp-pui-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 100% !important;
    background: #EEF5FF;
    color: var(--mp-pui-blue);
}

body.mp-portal-ui-admin .mp-admin-panel-head,
body.mp-portal-ui-agent .mp-agent-panel-head {
    margin-bottom: 0 !important;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mp-pui-line);
}

/* --------------------------------------------------------------------------
   FORMS
   -------------------------------------------------------------------------- */
body.mp-portal-ui-v2 input[type="text"],
body.mp-portal-ui-v2 input[type="email"],
body.mp-portal-ui-v2 input[type="search"],
body.mp-portal-ui-v2 input[type="tel"],
body.mp-portal-ui-v2 input[type="number"],
body.mp-portal-ui-v2 input[type="date"],
body.mp-portal-ui-v2 input[type="password"],
body.mp-portal-ui-v2 select,
body.mp-portal-ui-v2 textarea {
    border: 1px solid var(--mp-pui-line) !important;
    border-radius: var(--mp-pui-radius) !important;
    background: #fff !important;
    color: var(--mp-pui-text) !important;
    box-shadow: none !important;
    outline: 0;
}

body.mp-portal-ui-v2 input[type="text"],
body.mp-portal-ui-v2 input[type="email"],
body.mp-portal-ui-v2 input[type="search"],
body.mp-portal-ui-v2 input[type="tel"],
body.mp-portal-ui-v2 input[type="number"],
body.mp-portal-ui-v2 input[type="date"],
body.mp-portal-ui-v2 input[type="password"],
body.mp-portal-ui-v2 select {
    min-height: 42px;
    padding: 0 12px;
}

body.mp-portal-ui-v2 textarea {
    min-height: 96px;
    padding: 12px;
    resize: vertical;
}

body.mp-portal-ui-v2 input:focus,
body.mp-portal-ui-v2 select:focus,
body.mp-portal-ui-v2 textarea:focus {
    border-color: #9DBBE8 !important;
    box-shadow: 0 0 0 2px rgba(23, 105, 224, .08) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
body.mp-portal-ui-v2 button,
body.mp-portal-ui-v2 .button,
body.mp-portal-ui-v2 [class*="-button"],
body.mp-portal-ui-v2 [class*="-view"],
body.mp-portal-ui-v2 [class*="-filter"] {
    border-radius: var(--mp-pui-radius) !important;
    box-shadow: none !important;
}

body.mp-portal-ui-v2 .mp-pui-button-primary,
body.mp-portal-ui-v2 .mp-company-quotes-filter,
body.mp-portal-ui-v2 .mp-company-quote-view,
body.mp-portal-ui-v2 .mp-agent-primary,
body.mp-portal-ui-v2 .mp-admin-primary {
    border: 1px solid var(--mp-pui-orange) !important;
    background: var(--mp-pui-orange) !important;
    color: #fff !important;
    text-decoration: none;
}

body.mp-portal-ui-v2 .mp-pui-button-primary:hover,
body.mp-portal-ui-v2 .mp-company-quotes-filter:hover,
body.mp-portal-ui-v2 .mp-company-quote-view:hover {
    border-color: var(--mp-pui-orange-hover) !important;
    background: var(--mp-pui-orange-hover) !important;
}

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */
body.mp-portal-ui-admin .mp-admin-table-wrap,
body.mp-portal-ui-agent .mp-agent-table-wrap,
body.mp-portal-ui-v2 .mp-company-quotes-table-wrap {
    border: 1px solid var(--mp-pui-line) !important;
    border-radius: var(--mp-pui-radius) !important;
    background: #fff;
    box-shadow: none !important;
}

body.mp-portal-ui-admin .mp-admin-table,
body.mp-portal-ui-agent .mp-agent-table,
body.mp-portal-ui-v2 .mp-company-quotes-table {
    border-collapse: collapse !important;
    background: #fff;
}

body.mp-portal-ui-admin .mp-admin-table th,
body.mp-portal-ui-agent .mp-agent-table th,
body.mp-portal-ui-v2 .mp-company-quotes-table th {
    background: #FAFBFD !important;
    color: #53647D !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body.mp-portal-ui-admin .mp-admin-table th,
body.mp-portal-ui-admin .mp-admin-table td,
body.mp-portal-ui-agent .mp-agent-table th,
body.mp-portal-ui-agent .mp-agent-table td,
body.mp-portal-ui-v2 .mp-company-quotes-table th,
body.mp-portal-ui-v2 .mp-company-quotes-table td {
    border-color: var(--mp-pui-line) !important;
}

body.mp-portal-ui-v2 .mp-company-quotes-table tbody tr:hover,
body.mp-portal-ui-admin .mp-admin-table tbody tr:hover,
body.mp-portal-ui-agent .mp-agent-table tbody tr:hover {
    background: #FBFCFF !important;
}

/* --------------------------------------------------------------------------
   STATUS CHIPS
   -------------------------------------------------------------------------- */
body.mp-portal-ui-v2 .mp-company-status,
body.mp-portal-ui-v2 .mp-agent-table-status,
body.mp-portal-ui-v2 .mp-admin-status,
body.mp-portal-ui-v2 .mp-pui-chip {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 0 !important;
    border-radius: var(--mp-pui-radius-round) !important;
    background: #EEF3F8;
    color: #455C78;
    font-size: 9px !important;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

body.mp-portal-ui-v2 .is-green,
body.mp-portal-ui-v2 .is-success {
    background: #EAF8F0 !important;
    color: #118248 !important;
}

body.mp-portal-ui-v2 .is-orange,
body.mp-portal-ui-v2 .is-warning {
    background: #FFF4DF !important;
    color: #A96200 !important;
}

body.mp-portal-ui-v2 .is-blue {
    background: #EAF3FF !important;
    color: #1760C4 !important;
}

body.mp-portal-ui-v2 .is-purple {
    background: #F2ECFF !important;
    color: #6C3AC0 !important;
}

body.mp-portal-ui-v2 .is-red,
body.mp-portal-ui-v2 .is-danger {
    background: #FFF0F0 !important;
    color: #C63838 !important;
}

/* --------------------------------------------------------------------------
   QUOTE WORKSPACE ALIGNMENT WITH THE NEW SYSTEM
   -------------------------------------------------------------------------- */
body.mp-portal-ui-v2 .mp-company-quotes {
    display: grid;
    gap: var(--mp-pui-gap);
}

body.mp-portal-ui-v2 .mp-company-quotes-head {
    padding: 20px !important;
}

body.mp-portal-ui-v2 .mp-company-quotes-head h2 {
    margin: 4px 0 4px !important;
    font-size: 24px !important;
}

body.mp-portal-ui-v2 .mp-company-quote-metrics {
    gap: var(--mp-pui-gap) !important;
}

body.mp-portal-ui-v2 .mp-company-quote-metric {
    min-height: 112px !important;
    padding: 16px !important;
}

body.mp-portal-ui-v2 .mp-company-quotes-toolbar {
    gap: var(--mp-pui-gap) !important;
    padding: 14px !important;
}

body.mp-portal-ui-v2 .mp-company-quote-detail {
    display: grid;
    gap: var(--mp-pui-gap) !important;
}

body.mp-portal-ui-v2 .mp-company-quote-detail-head {
    border: 1px solid var(--mp-pui-line) !important;
    border-top: 3px solid var(--mp-pui-orange) !important;
    border-radius: var(--mp-pui-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
}

body.mp-portal-ui-v2 .mp-company-quote-detail-grid,
body.mp-portal-ui-v2 .mp-company-quote-history-grid {
    gap: var(--mp-pui-gap) !important;
}

/* Visa documents must not visually dominate the global quote workspace. */
body.mp-portal-ui-v2 .mp-admin-section-quotes .mp-admin-panel,
body.mp-portal-ui-v2.mp-admin-section-quotes .mp-admin-panel {
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   FUTURE PAGE COMPONENTS — shared contract for upcoming dashboard rebuild PRs
   -------------------------------------------------------------------------- */
.mp-pui-page {
    display: grid;
    gap: var(--mp-pui-gap);
}

.mp-pui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--mp-pui-line);
    border-radius: var(--mp-pui-radius);
    background: var(--mp-pui-surface);
}

.mp-pui-page-header h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.mp-pui-page-header p {
    margin: 5px 0 0;
    color: var(--mp-pui-muted);
    font-size: 11px;
}

.mp-pui-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--mp-pui-gap);
}

.mp-pui-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--mp-pui-line);
    border-radius: var(--mp-pui-radius);
    background: var(--mp-pui-surface);
    box-shadow: none;
}

.mp-pui-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.7fr) repeat(4, minmax(150px, .7fr)) auto;
    gap: var(--mp-pui-gap);
    padding: 14px;
    border: 1px solid var(--mp-pui-line);
    border-radius: var(--mp-pui-radius);
    background: var(--mp-pui-surface);
}

.mp-pui-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mp-pui-line);
    border-radius: var(--mp-pui-radius);
    background: #fff;
}

.mp-pui-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
}

.mp-pui-table th,
.mp-pui-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--mp-pui-line);
    text-align: left;
}

.mp-pui-table th {
    background: #FAFBFD;
    color: #53647D;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    body.mp-portal-ui-v2 {
        --mp-pui-sidebar: 220px;
    }

    .mp-pui-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mp-pui-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    body.mp-portal-ui-admin .mp-admin-shell,
    body.mp-portal-ui-agent .mp-agent-portal {
        display: block !important;
    }

    body.mp-portal-ui-admin .mp-admin-sidebar,
    body.mp-portal-ui-agent .mp-agent-sidebar {
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
    }

    body.mp-portal-ui-admin .mp-admin-main,
    body.mp-portal-ui-agent .mp-agent-main {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.mp-portal-ui-admin .mp-admin-topbar,
    body.mp-portal-ui-agent .mp-agent-topbar {
        min-height: 64px !important;
        padding: 0 14px !important;
    }

    body.mp-portal-ui-admin .mp-admin-content,
    body.mp-portal-ui-agent .mp-agent-content {
        padding: 14px !important;
    }

    .mp-pui-kpi-grid,
    .mp-pui-toolbar {
        grid-template-columns: 1fr;
    }
}