/* Quote workspace presentation over the existing portal components and API workflows. */
.portal-shell {
    --ds-navigation-width: 112px;
    --ds-navy: #003366;
    --ds-bg: #eff4f9;
    --ds-paper: #fff;
    --ds-line: #d7e2ed;
    --ds-soft: #e4edf6;
    --ds-ink: #16304a;
    --ds-muted: #61758a;
    --ds-stage: #e7eef5;
    --font-heading: 'Segoe UI', Arial, sans-serif;
    --font-body: 'Segoe UI', Arial, sans-serif;
    background: var(--ds-bg);
    color: var(--ds-ink);
    font-family: var(--font-body);
}
.portal-shell.theme-dark {
    --ds-navy: #a8cff6;
    --ds-bg: #101a27;
    --ds-paper: #192637;
    --ds-line: #304357;
    --ds-soft: #22364c;
    --ds-ink: #e3edf8;
    --ds-muted: #a4b7ca;
    --ds-stage: #203146;
}
.portal-shell .ds-appbar {
    background: var(--ds-paper) !important;
    color: var(--ds-navy);
    border-bottom: 1px solid var(--ds-line);
    backdrop-filter: none;
}
.portal-shell .ds-appbar .mud-toolbar { gap: 8px; }
.portal-shell .ds-appbar .mud-typography,
.portal-shell .ds-appbar .mud-icon-button { color: var(--ds-navy) !important; }
.portal-shell .appbar-title { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.portal-shell .appbar-logo { height: 30px; width: auto; }
.portal-shell .appbar-linx-logo { display: block; width: 112px; height: 32px; object-fit: contain; flex-shrink: 0; }
.portal-shell .ds-navigation { background: var(--ds-paper); border-right: 1px solid var(--ds-line); }
.portal-shell .ds-navigation .mud-drawer-content { padding: 15px 0; }
.portal-shell .ds-nav .mud-nav-link {
    margin: 4px 7px;
    padding: 12px 6px;
    width: calc(100% - 14px);
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--ds-muted);
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
}
.portal-shell .ds-nav .mud-nav-link-text { width: 100%; margin-left: 0; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.portal-shell .ds-nav .mud-nav-link-icon { margin-right: 0; color: inherit; }
.portal-shell .ds-nav .guest-enquiry-nav-link .mud-nav-link-text { width: 100%; margin: 0; }
.portal-shell .guest-enquiry-nav-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.portal-shell .guest-enquiry-nav-icon { display: flex; align-items: center; justify-content: center; position: relative; width: 32px; height: 32px; flex-shrink: 0; }
.portal-shell .guest-enquiry-nav-label { display: block; max-width: 80px; text-align: center; line-height: 1.4; }
.portal-shell .guest-enquiry-nav-count { position: absolute; top: -5px; right: -10px; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid var(--ds-paper); border-radius: 12px; background: var(--ds-navy); color: var(--ds-paper); font-size: 10px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.portal-shell .ds-nav .guest-enquiry-nav-link.active .guest-enquiry-nav-count,
.portal-shell .ds-nav .guest-enquiry-nav-link:hover .guest-enquiry-nav-count { border-color: var(--ds-soft); }
.portal-shell .ds-nav .mud-nav-link:hover { padding-left: 6px; background: var(--ds-soft); }
.portal-shell .ds-nav .mud-nav-link.active { color: var(--ds-navy); background: var(--ds-soft); border-color: var(--ds-line); }
.portal-shell .ds-nav .mud-nav-link-expand-icon { position: absolute; right: 4px; top: 14px; }
.portal-shell .ds-nav .mud-nav-group .mud-nav-link { padding: 10px 3px; min-height: 42px; }
.portal-shell .ds-nav .nav-section-label { padding: 12px 4px 4px; font-size: 9px; letter-spacing: .05em; text-align: center; opacity: 1; color: var(--ds-muted); }
.portal-shell .ds-nav .admin-badge { display: block; width: fit-content; margin: 5px auto 0 !important; }
.portal-shell .nav-brand-bar { display: none; }
.portal-shell .ds-page-workspace { padding: 26px 30px 40px !important; }
.portal-shell .ds-page-content { min-width: 0; }
.portal-shell .mud-main-content { background: var(--ds-bg); }
.portal-shell .ds-skip-link { position: fixed; top: -70px; left: 16px; z-index: 25000; padding: 12px 16px; background: var(--ds-paper); color: var(--ds-navy); border: 2px solid var(--ds-navy); border-radius: 8px; }
.portal-shell .ds-skip-link:focus { top: 12px; }
.portal-shell :focus-visible { outline: 2px solid var(--ds-navy); outline-offset: 3px; }
.portal-shell .ds-page-content:focus { outline: none; }
.portal-page { min-width: 0; color: var(--ds-ink); }
.portal-page > .mud-container { padding: 0; margin-top: 0 !important; }
.portal-page .mud-typography-h4 { font-size: 30px; font-weight: 500; letter-spacing: -.035em; line-height: 1.25; }
.portal-page .mud-typography-h6 { font-size: 17px; font-weight: 500; }
.portal-page .mud-paper { background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: 12px; box-shadow: none; }
.portal-page .mud-button { text-transform: none; font-weight: 500; border-radius: 7px; min-height: 38px; }
.portal-page .mud-chip { border-radius: 5px; }
.portal-page .mud-table-container { max-width: 100%; overflow-x: auto; }
.portal-page .mud-table { background: var(--ds-paper); }
.portal-page .mud-tabs-panels { padding: 20px; }
.portal-page .mud-tabs-toolbar { border-bottom: 1px solid var(--ds-line); background: var(--ds-paper); }
.portal-page .mud-tab { text-transform: none; }
.ds-eyebrow { color: var(--ds-muted); text-transform: uppercase; font-size: 10px; font-weight: 500; letter-spacing: .09em; margin-bottom: 8px; }
.ds-page-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.ds-page-heading h1 { color: var(--ds-ink); font-size: 30px; font-weight: 500; letter-spacing: -.035em; margin: 0; }
.ds-page-heading p { color: var(--ds-muted); font-size: 13px; margin: 8px 0 0; }
.ds-home-page .hero-banner,
.ds-home-page .landing-hero { color: var(--ds-ink); background: transparent; border: 0; padding: 0 0 12px !important; box-shadow: none; }
.ds-home-page .hero-banner::before,
.ds-home-page .hero-banner::after,
.ds-home-page .landing-hero::before,
.ds-home-page .landing-hero::after { display: none; }
.ds-home-page .hero-title,
.ds-home-page .landing-title { font-weight: 500; color: var(--ds-ink); }
.ds-home-page .hero-subtitle { color: var(--ds-muted); font-size: 14px; }
.ds-home-page .hero-cta { background: var(--ds-navy); color: var(--ds-paper); box-shadow: none; border-radius: 7px; }
.ds-home-page .stat-card { border: 1px solid var(--ds-line); border-top: 1px solid var(--ds-line); border-radius: 12px; box-shadow: none; }
.ds-home-page .stat-value { color: var(--ds-ink); font-size: 30px; font-weight: 500; }
.ds-home-page .stat-label { color: var(--ds-muted); text-transform: none; font-size: 12px; letter-spacing: 0; }
.ds-home-page .stat-icon { color: var(--ds-navy); opacity: .35; }
.ds-home-page .quick-action-card { align-items: flex-start !important; text-align: left !important; height: 100%; }
.ds-quick-action-link { display: block; height: 100%; color: inherit; text-decoration: none; border-radius: 12px; }
.ds-quick-action-link:focus-visible .quick-action-card { border-color: var(--ds-navy); }
.ds-home-page .quick-action-card:hover,
.ds-home-page .feature-card:hover { transform: none; box-shadow: none; border-color: var(--ds-navy); }
.ds-home-page .feature-card { height: 100%; }
.ds-home-page .quick-action-card:focus-visible { border-color: var(--ds-navy); }
.ds-home-page .stat-card::before,
.ds-home-page .stat-card::after { display: none; }
/* Use the existing parts controls, configuration choices, quantities and cart state. */
.ds-parts-page .lx { padding: 0; background: transparent; color: var(--ds-ink); --lx-panel: var(--ds-stage); --lx-border: var(--ds-line); --lx-card: var(--ds-paper); --lx-card-border: var(--ds-line); --lx-muted: var(--ds-muted); --lx-blue: var(--ds-navy); --lx-soft-border: var(--ds-line); --lx-desc: var(--ds-muted); }
.ds-parts-page .lx-search-header { padding: 0 0 24px; background: transparent; border: 0; }
.ds-parts-page .lx-search-header > div:first-child { gap: 14px; flex-wrap: wrap; }
.ds-parts-page .lx-title { font-size: 30px; font-weight: 500; letter-spacing: -.035em; color: var(--ds-ink); }
.ds-parts-page .lx-search-row { margin-top: 20px; padding: 18px; background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: 12px; gap: 12px; }
.ds-parts-page .lx-input,
.ds-parts-page .lx-combo,
.ds-parts-page .lx-select select { background: var(--ds-paper); color: var(--ds-ink); border-color: var(--ds-line); border-radius: 7px; min-height: 38px; max-width: 100%; }
.ds-parts-page .lx-btn { background: var(--ds-paper); color: var(--ds-navy); border-color: var(--ds-line); font-weight: 500; border-radius: 7px; }
.ds-parts-page .lx-btn:hover:not(:disabled) { background: var(--ds-soft); }
.ds-parts-page .lx-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.ds-parts-page .lx-card { background: var(--ds-paper); border-color: var(--ds-line); border-radius: 12px; padding: 18px; }
.ds-parts-page .lx-card-img { background: var(--ds-stage); border-radius: 8px; }
.ds-parts-page .lx-card:hover { background: var(--ds-paper); border-color: var(--ds-navy); }
.ds-parts-page .lx-panel,
.ds-parts-page .lx-detail-card { background: var(--ds-paper); color: var(--ds-ink); border: 1px solid var(--ds-line); box-shadow: none; border-radius: 12px; }
.ds-parts-page .lx-detail-img { background: var(--ds-stage); }
.ds-parts-page .lx-form-title { font-size: 15px; font-weight: 500; }
.ds-parts-page .lx-pn,
.ds-parts-page .lx-price { font-weight: 500; overflow-wrap: anywhere; }
.ds-parts-page .lx-cart-item { gap: 16px; min-width: 0; }
.ds-parts-page .lx-cart-item > div { min-width: 0; }
.ds-parts-page .lx-cart-meta { overflow-wrap: anywhere; }
.ds-parts-page .lx-cart-right { flex-wrap: wrap; }
.ds-parts-page .lx-qty input,
.ds-parts-page .lx-qty button { background: var(--ds-paper); color: var(--ds-ink); border-color: var(--ds-line); }
/* Authentication keeps the original Auth0, validation, invitation and approval flows. */
.ds-account-page { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr); max-width: 1020px; margin: 14px auto 0; border: 1px solid var(--ds-line); border-radius: 14px; overflow: hidden; background: var(--ds-paper); }
.ds-account-story { padding: 44px 36px 30px; background: var(--ds-stage); min-width: 0; }
.ds-account-story h2 { font-size: 31px; font-weight: 500; letter-spacing: -.035em; line-height: 1.25; max-width: 310px; margin: 18px 0 16px; }
.ds-account-story p { font-size: 14px; color: var(--ds-muted); line-height: 1.65; max-width: 320px; }
.ds-account-elevation { display: block; width: min(100%, 280px); height: auto; color: var(--ds-navy); margin: 38px auto 0; }
.ds-account-photo { display: block; width: 100%; height: 260px; object-fit: cover; object-position: 52% center; margin-top: 32px; border-radius: 10px; }
.ds-account-page > .mud-container { max-width: none; margin: 0 !important; padding: 12px !important; }
.ds-account-page .mud-paper { border: 0; border-radius: 0; }
.ds-account-page .mud-typography-h4 { font-size: 27px; }
.ds-account-page .mud-stack-row,
.ds-profile-page .mud-stack-row { flex-wrap: wrap; }
.ds-about-card { padding: 26px; }
.ds-about-card p { color: var(--ds-muted); line-height: 1.7; margin: 12px 0 20px; }
.ds-quotes-page .mud-stack-row { flex-wrap: wrap; }
.ds-quotes-page .mud-select { min-width: 180px; }
.ds-history-filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 16px; }
/* Wizard layout and controls remain intact, including the engineering choices. */
.portal-shell .wiz-overlay {
    --bg: var(--ds-bg); --bg-raised: var(--ds-paper); --bg-panel: var(--ds-paper);
    --line: var(--ds-line); --line-soft: var(--ds-line); --canvas-bg: var(--ds-stage);
    --accent: var(--ds-navy); --fg: var(--ds-ink); --fg-3: var(--ds-muted);
    --font-sans: 'Segoe UI', Arial, sans-serif;
    background: var(--ds-bg);
}
.portal-shell .wiz-top,
.portal-shell .wiz-side-r { background: var(--ds-paper); }
.portal-shell .wiz-overlay .panel { border-radius: 12px; }
.portal-shell .wiz-overlay .step-head h2 { font-weight: 500; }
@media (max-width: 959px) {
    /* MudDrawer uses this width for sizing, its closing offset and content margins. */
    .portal-shell { --ds-navigation-width: min(264px, calc(100vw - 48px)); }
    .portal-shell .ds-nav .mud-nav-link { flex-direction: row; gap: 12px; justify-content: flex-start; font-size: 13px; padding: 12px 16px; min-height: 44px; text-align: left; }
    .portal-shell .ds-nav .mud-nav-link-text { width: auto; text-align: left; }
    .portal-shell .ds-nav .mud-nav-link:hover { padding-left: 16px; }
    .portal-shell .guest-enquiry-nav-content { flex-direction: row; justify-content: flex-start; gap: 16px; }
    .portal-shell .guest-enquiry-nav-label { max-width: none; text-align: left; }
    .portal-shell .ds-nav .mud-nav-group .mud-nav-link { padding: 10px 16px; }
    .portal-shell .ds-nav .nav-section-label { text-align: left; padding-left: 24px; }
    .portal-shell .ds-nav .admin-badge { display: inline-flex; margin: 0 0 0 6px !important; }
    .portal-shell .ds-page-workspace { padding: 22px 20px 32px !important; }
    .ds-account-story { padding: 36px 24px; }
}
@media (max-width: 650px) {
    .portal-shell .ds-appbar .mud-toolbar { gap: 1px; padding: 0 6px !important; }
    .portal-shell .appbar-title { font-size: 12px; margin-left: 3px !important; }
    .portal-shell .appbar-linx-logo { width: 84px; height: 24px; margin-left: 3px !important; }
    .portal-shell .appbar-logo { max-width: 76px; height: 24px !important; margin-right: 1px; }
    .portal-shell .ds-page-workspace { padding: 20px 16px 28px !important; }
    .portal-page .mud-typography-h4,
    .ds-parts-page .lx-title,
    .ds-page-heading h1 { font-size: 27px; }
    .portal-page .mud-tabs-panels { padding: 14px; }
    .portal-page .mud-paper.pa-6,
    .portal-page .mud-paper.pa-8 { padding: 20px !important; }
    .ds-account-page { grid-template-columns: 1fr; margin: 0; }
    .ds-account-story { padding: 24px; border-bottom: 1px solid var(--ds-line); }
    .ds-account-story h2 { font-size: 24px; max-width: none; margin: 12px 0; }
    .ds-account-story p { max-width: none; }
    .ds-account-elevation { display: none; }
    .ds-account-photo { height: 160px; margin-top: 20px; }
    .ds-parts-page .lx-grid { grid-template-columns: 1fr; }
    .ds-parts-page .lx-search-row { padding: 14px; }
    .ds-parts-page .lx-search-input,
    .ds-parts-page .lx-search-combo { min-width: 0; flex: 1 1 100%; width: 100%; }
    .ds-parts-page .lx-detail-card { grid-template-columns: 1fr; padding: 18px; }
    .ds-parts-page .lx-cart-grid { grid-template-columns: 1fr; }
    .ds-parts-page .lx-cart-item { grid-template-columns: 64px minmax(0, 1fr); }
    .ds-parts-page .lx-cart-thumb { width: 64px; height: 64px; }
    .ds-parts-page .lx-cart-right { grid-column: 1 / -1; justify-content: space-between; gap: 12px; }
    .ds-parts-page .lx-atc-row { flex-wrap: wrap; }
    .ds-history-filters { grid-template-columns: 1fr; }
    .ds-home-page .hero-banner .mud-grid-item:last-child { justify-content: flex-start !important; }
    .ds-about-card { padding: 20px; }
    .ds-parts-page input,
    .ds-parts-page select,
    .portal-page .mud-input-slot { font-size: 16px; }
}
@media (pointer: coarse) {
    .portal-page button,
    .portal-page select,
    .portal-shell .wiz-overlay .btn,
    .portal-shell .ds-appbar .mud-icon-button { min-height: 44px; }
    .ds-parts-page .lx-qty button,
    .ds-parts-page .lx-cart-remove { min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-shell .page-transition,
    .portal-page .slide-up,
    .portal-page .scale-in,
    .portal-page .fade-in { animation: none; }
}