/* ============================================================
   EBIConnect – Brand Design Tokens
   ============================================================ */
:root {
    /* Brand palette */
    --color-navy:       #131232;
    --color-cyan:       #2ECDDC;
    --color-silver:     #EEEEEE;
    --color-blue:       #024178;
    --color-mint:       #61EBA8;
    --color-charcoal:   #414042;
    /* Established danger/red - was already used as a repeated literal (#c0392b) for
       .kpi-card__trend--down, .user-popup-btn--logout, and OrderManagement/SalesRep.cshtml's
       Cancel icon button; tokenized here so every consumer can reference one source of truth
       instead of restating the hex. */
    --color-danger:     #c0392b;

    /* Derived alpha tokens */
    --color-cyan-04:    rgba(46, 205, 220, 0.04);
    --color-cyan-08:    rgba(46, 205, 220, 0.08);
    --color-cyan-10:    rgba(46, 205, 220, 0.10);
    --color-cyan-25:    rgba(46, 205, 220, 0.25);
    --color-cyan-30:    rgba(46, 205, 220, 0.30);
    --color-mint-15:    rgba(97, 235, 168, 0.15);
    --color-mint-30:    rgba(97, 235, 168, 0.30);
    --color-navy-06:    rgba(19, 18, 50, 0.06);
    --color-navy-10:    rgba(19, 18, 50, 0.10);
    --color-danger-25:  rgba(192, 57, 43, 0.25);
    --color-danger-50:  rgba(192, 57, 43, 0.5);
    --color-danger-60:  rgba(192, 57, 43, 0.6);

    /* Typography */
    --font-ui:          "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-article:     "Palatino Linotype", "Book Antiqua", Palatino, serif;

    /* Text hierarchy */
    --text-primary:     var(--color-navy);      /* Page titles, H1–H2 */
    --text-secondary:   var(--color-blue);      /* H3–H4, section headers */
    --text-body:        var(--color-charcoal);  /* Paragraphs, labels, nav */
    --text-muted:       #78909c;
    --text-subtle:      #b0bec5;

    /* Surfaces */
    --surface-bg:       var(--color-silver);
    --surface-card:     #ffffff;
    --surface-border:   rgba(0, 0, 0, 0.06);
    --shadow-card:      0 1px 8px rgba(0, 0, 0, 0.07);
}


/*  Reset / Base  */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-silver);
    font-family: var(--font-ui);
    color: var(--text-body);
}

h1, h2 {
    font-family: var(--font-ui);
    color: var(--text-primary);
}

h3, h4 {
    font-family: var(--font-ui);
    color: var(--text-secondary);
}

nav, button {
    font-family: var(--font-ui);
}

.article-content {
    font-family: var(--font-article);
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-body);
}

/* .dx-button-mode-contained .dx-icon {
    color: #61EBA8 !important
} */

/*  App shell  */
#app-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Top contact banner - navy strip above the header toolbar with phone, email
   and social links. Part of the #app-wrapper flex column, so #layout-body
   shrinks to fit rather than being overlapped. */
#top-banner {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    height: 32px;
    padding: 0 16px;
    background: var(--color-navy);
    border-bottom: 1px solid rgba(238, 238, 238, 0.12);
    font-family: var(--font-ui);
    font-size: 12px;
}

#top-banner .top-banner-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-silver);
    text-decoration: none;
}

#top-banner .top-banner-item i {
    color: var(--color-cyan);
}

#top-banner .top-banner-item:hover {
    color: var(--color-mint);
}

/* Cyan round social buttons with a navy glyph (shared by banner + footer). */
.social-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.social-links .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-cyan);
    color: var(--color-navy);
    font-size: 12px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.social-links .social-btn:hover {
    background: var(--color-mint);
    color: var(--color-navy);
}

.social-links--lg {
    gap: 12px;
    margin-top: 16px;
}

.social-links--lg .social-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

/* Footer's generic "#app-footer a" colors would otherwise win over the button glyph color. */
#app-footer .social-links .social-btn,
#app-footer .social-links .social-btn:hover {
    color: var(--color-navy);
}

@media (max-width: 767px) {
    /* Keep the banner to one line on phones: drop the email text, keep its icon link. */
    #top-banner {
        justify-content: space-between;
        gap: 12px;
    }

    #top-banner .top-banner-item--email span {
        display: none;
    }
}

/*  Header toolbar - flat Navy background with Cyan accent line  */
#header-toolbar {
    flex: 0 0 auto;
    background: var(--color-navy);
    color: var(--color-silver);
    border-bottom: 2px solid var(--color-cyan);
    height: 56px;
}

/* Override DevExtreme toolbar background/text inside our header */
#header-toolbar .dx-toolbar {
    padding: 0 8px;
    height: 100%;
}

#header-toolbar .dx-toolbar-before,
#header-toolbar .dx-toolbar-after {
    padding: 0;
}

#header-toolbar .dx-button {
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header-toolbar .dx-button .dx-icon {
    color: var(--color-silver);
    font-size: 22px;
}

.dx-toolbar .dx-toolbar-items-container {
    height: 100%;
    min-height: 26px !important;
    overflow: visible;
    margin-bottom: 5px;
}

/* Search page "Load" button – ebi-btn-primary style on DevExtreme Success type */
.dx-button-mode-contained.dx-button-success {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
}

.dx-button-mode-contained.dx-button-success .dx-button-text,
.dx-button-mode-contained.dx-button-success .dx-icon {
    color: #ffffff !important;
}

.dx-button-mode-contained.dx-button-success.dx-state-hover {
    background-color: var(--color-cyan) !important;
    border-color: var(--color-cyan) !important;
}

.dx-button-mode-contained.dx-button-success.dx-state-hover .dx-button-text,
.dx-button-mode-contained.dx-button-success.dx-state-hover .dx-icon {
    color: var(--color-navy) !important;
}

.toolbar-brand {
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 8px;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.toolbar-brand:hover {
    text-decoration: none;
    color: var(--color-cyan);
}

/* Drawer + content row */
#layout-body {
    background: var(--color-silver);
    flex: 1 1 auto;
    display: flex;
    overflow: hidden;
    position: relative;
}

#navigation-drawer {
    width: 100%;
    height: 100%;
}

/* DevExtreme drawer wrapper fills the row */
#navigation-drawer .dx-drawer {
    height: 100%;
}

#navigation-drawer .dx-drawer-wrapper {
    height: 100%;
}

#navigation-drawer .dx-drawer-content {
    height: 100%;
    overflow-y: auto;
}

.dx-toolbar-label > div {
    overflow: inherit !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 -5px;
    padding: 0 5px;
}

/*  Side navigation panel  */
.side-nav-panel {
    width: 280px;
    height: 100%;
    background-color: #fff !important;
    color: var(--text-body) !important;
    overflow-x: hidden;
    overflow-y: auto;
    background-image: linear-gradient(to bottom, #fff, var(--color-cyan-04));
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / Edge */
}

.side-nav-panel::-webkit-scrollbar {
    display: none;                /* Chrome / Safari / Edge Chromium */
}

.dx-treeview-item {
    gap: 0;
    padding: 4px 6px;
    margin: 0;
}

.side-nav-panel .dx-treeview-item {
    border: none;
    color: var(--text-body);
    padding: 0;
    width: 100%;
}

.side-nav-panel .dx-treeview-item-content {
    padding: 0;
    width: 100%;
    display: block;
}

.side-nav-panel .dx-treeview-node.dx-treeview-node-is-leaf > .dx-treeview-toggle-item-visibility {
    display: none;
}

/*  Tree structure: vertical connecting lines  */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container {
    border-left: 1px solid var(--color-cyan-25);
    margin-left: 5px;
}

/*  Level 2 items (direct children of root nodes)  */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container > .dx-treeview-node > .dx-treeview-item .nav-list-item {
    height: 40px;
    padding-left: 8px;
}

/*  Level 3+ items (leaves)  */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node-container > .dx-treeview-node > .dx-treeview-item .nav-list-item {
    height: 34px;
    padding-left: 8px;
}

/*  Hide the icon column at level 2+ (no icons on child nodes) */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node .nav-item-icon-wrap {
    display: none;
}

/* Fill full width when icon column is hidden */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node .nav-list-item {
    width: 100%;
}

/*  Mid-level parent nodes: flex layout so toggle appears after text */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node:not(.dx-treeview-node-is-leaf) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}

.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node:not(.dx-treeview-node-is-leaf) > .dx-treeview-item {
    flex: 1;
    order: 1;
}

.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node:not(.dx-treeview-node-is-leaf) > .dx-treeview-toggle-item-visibility {
    order: 2;
}

/* Children container must span full width on its own row */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node:not(.dx-treeview-node-is-leaf) > .dx-treeview-node-container {
    order: 3;
    width: 100%;
}

/*  Text weight by level  */
.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container > .dx-treeview-node > .dx-treeview-item .nav-item-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
}

.side-nav-panel .dx-treeview-node-container .dx-treeview-node-container
.dx-treeview-node-container > .dx-treeview-node > .dx-treeview-item .nav-item-text {
    font-size: 13px;
    font-weight: 400;
    color: #546e7a;
}

/* Hover: Navy tint (brand-aligned) */
.side-nav-panel .dx-treeview-node:hover > .dx-treeview-item,
.side-nav-panel .dx-treeview-node.dx-state-hover > .dx-treeview-item {
    background-color: var(--color-navy-06);
}

/* Selected: Cyan wash + Cyan left border accent */
.side-nav-panel .dx-treeview-node.dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item,
.side-nav-panel .dx-treeview-node.dx-treeview-item-without-checkbox.dx-state-selected.dx-state-focused > .dx-treeview-item,
.side-nav-panel .dx-treeview-node.dx-treeview-item-without-checkbox.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
    background-color: var(--color-cyan-30) !important;
    color: var(--color-navy) !important;
    border-left: 3px solid var(--color-cyan);
}

/* Active icon tint on selected nav item */
.side-nav-panel .dx-treeview-node.dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item .nav-item-icon-wrap .dx-icon {
    color: var(--color-cyan) !important;
}

.nav-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    height: 50px;
    padding-right: 5px;
    cursor: pointer;
    overflow: hidden;
    color: var(--text-primary);
    width: 100%;
}

.nav-item-icon-wrap {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item-icon-wrap .dx-icon {
    font-size: 20px !important;
    color: var(--color-navy);
}

/* Ensure FontAwesome icons in the sidebar nav use FA font (overrides dx-icon font-family) */
.nav-item-icon-wrap .dx-icon.fa-solid,
.nav-item-icon-wrap .dx-icon.fa-regular,
.nav-item-icon-wrap .dx-icon.fa-brands {
    font-family: 'Font Awesome 7 Free' !important;
}

.nav-item-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

/*  Toggle icon (chevron) – Cyan accent  */
.side-nav-panel .dx-treeview-toggle-item-visibility {
    font: 18px/1 DXIcons;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: var(--color-cyan);
}

.side-nav-panel .dx-treeview-toggle-item-visibility::before {
    content: "\f04e"; /* chevron-right: collapsed */
}


/*.side-nav-panel .dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened::before { 
    content: "\f001";*/ /* chevron-down: expanded */
/*}*/
/* this feature is removing the toggle itme when collapsed */


#drawer-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#main-content {
    flex: 1;
    padding: 8px 8px;
    border-left: 1.5px solid rgba(0, 0, 0, 0.08);
    min-height: 85vh;
}

/* Footer – Navy background, Cyan top accent, Silver text */
.app-footer,
#app-footer {
    flex-shrink: 0;
    color: rgba(238, 238, 238, 0.75); /* Silver at 75% */
    border-top: 2px solid var(--color-cyan);
    padding: 28px 32px 16px;
    text-align: justify-all;
    border-left: 1.5px solid rgba(0, 0, 0, 0.08);
    background-color: var(--color-navy);
    font-family: var(--font-ui);
}

.app-footer a,
#app-footer a {
    color: var(--color-cyan);
    text-decoration: none;
}

.app-footer a:hover,
#app-footer a:hover {
    color: var(--color-mint);
}

/* Footer columns: Quick Links on the left, Connect pinned to the right edge
   (mirrors the public EBI site footer layout). */
#app-footer .footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 20px;
}

#app-footer .footer-col {
    display: flex;
    flex-direction: column;
    min-width: 180px;
}

#app-footer .footer-heading {
    color: var(--color-cyan);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

#app-footer .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

#app-footer .footer-links li + li {
    margin-top: 8px;
}

#app-footer .footer-links a {
    color: var(--color-silver);
    font-size: 13px;
}

#app-footer .footer-contact-label {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

#app-footer .footer-contact-label--spaced {
    margin-top: 14px;
}

#app-footer .footer-contact-link {
    color: var(--color-silver);
    font-size: 13px;
    text-decoration: underline;
    margin-bottom: 6px;
}

#app-footer .footer-links a:hover,
#app-footer .footer-contact-link:hover {
    color: var(--color-mint);
}

#app-footer .footer-bottom {
    border-top: 1px solid rgba(238, 238, 238, 0.15);
    padding-top: 12px;
    font-size: 12px;
}

#app-footer .footer-disclaimer {
    font-size: 9px;
    color: rgba(238, 238, 238, 0.5);
    margin-top: 4px;
}

@media (max-width: 767px) {
    #app-footer {
        padding: 20px 16px 12px;
    }

    #app-footer .footer-inner {
        flex-direction: column;
        gap: 20px;
    }
}

.text-muted-italic {
    font-style: italic;
    color: #808080;
}

.form-avatar {
    height: 46px;
    width: 46px;
    margin-right: 10px;
    border: 1px solid #d2d3d5;
    border-radius: 50%;
    background-image: url('images/petersmith.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 25px;
    font-weight: 300;
    padding: 3px;
}


.user-avatar-btn {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background-color: var(--color-cyan);/* #33b0cf;*/
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.5px;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
        }

        .user-popup-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 16px 12px;
            gap: 6px;
        }

        .user-popup-avatar {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--color-cyan);/* #33b0cf;*/
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .user-popup-name {
            font-size: 15px;
            font-weight: 600;
            text-align: center;
        }

        .user-popup-territory {
            font-size: 15px;
            font-weight: 500;
            text-align: center;
        }

        /* Territory name under the code; names can be long, so wrap instead of widening the popup. */
        .user-popup-territory-name {
            font-size: 12px;
            color: var(--text-muted);
            text-align: center;
            line-height: 1.3;
            overflow-wrap: anywhere;
            margin-top: -4px;
        }


        .user-popup-email {
            font-size: 12px;
            color: #6c757d;
            text-align: center;
            margin-bottom: 8px;
        }

        .user-popup-divider {
            width: 100%;
            border: none;
            border-top: 1px solid #dee2e6;
            margin: 8px 0 0;
        }

        .user-popup-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            padding: 4px 0 8px;
        }

        .user-popup-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 9px 16px;
            border-radius: 8px;
            font-family: var(--font-ui);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            border: none;
            transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
            letter-spacing: 0.2px;
        }

        .user-popup-btn:active {
            transform: scale(0.98);
        }

        .user-popup-btn--profile,
        .user-popup-btn--password {
            background: var(--color-cyan-10);
            color: var(--color-blue);
            border: 1.5px solid var(--color-cyan-25);
        }

        .user-popup-btn--profile:hover,
        .user-popup-btn--password:hover {
            background: var(--color-cyan-25);
            box-shadow: 0 2px 8px var(--color-cyan-25);
        }

        .user-popup-btn--logout {
            background: rgba(220, 53, 69, 0.07);
            color: #c0392b;
            border: 1.5px solid rgba(220, 53, 69, 0.2);
        }

        .user-popup-btn--logout:hover {
            background: rgba(220, 53, 69, 0.14);
            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
        }

/* ============================================================
   Button Color System
   ============================================================ */

/* Primary: Blue fill – main actions */
.ebi-btn-primary {
    background-color: var(--color-blue);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-family: var(--font-ui);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ebi-btn-primary:hover {
    background-color: #035090;
}

/* Secondary: Cyan fill – secondary / filter actions */
.ebi-btn-secondary {
    background-color: var(--color-cyan);
    color: var(--color-navy);
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-family: var(--font-ui);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ebi-btn-secondary:hover {
    background-color: #20b8c6;
}

/* Success: Mint fill – save / confirm actions */
.ebi-btn-success {
    background-color: var(--color-mint);
    color: var(--color-charcoal);
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-family: var(--font-ui);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ebi-btn-success:hover {
    background-color: #4dd695;
}


/* ============================================================
   Status / Badge System  (Mint = positive, Cyan = active)
   ============================================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Mint: active / positive outcomes */
.status-badge--active,
.status-badge--cleared,
.status-badge--complete {
    background-color: var(--color-mint-15);
    color: #1a7a50;
    border: 1px solid rgba(97, 235, 168, 0.5);
}

/* Cyan: in-progress / interactive */
.status-badge--inprogress,
.status-badge--open {
    background-color: var(--color-cyan-10);
    color: #0a6b77;
    border: 1px solid var(--color-cyan-25);
}

/* Navy: informational / pending */
.status-badge--pending,
.status-badge--hold {
    background-color: rgba(19, 18, 50, 0.08);
    color: var(--color-navy);
    border: 1px solid rgba(19, 18, 50, 0.2);
}

/* Blue: primary state */
.status-badge--primary {
    background-color: rgba(2, 65, 120, 0.08);
    color: var(--color-blue);
    border: 1px solid rgba(2, 65, 120, 0.2);
}


/* ============================================================
   Patient Search page
   ============================================================ */

/* --- Autocomplete dropdown --- */
.autocomplete-item {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    grid-gap: 8px;
    align-items: center;
    padding: 4px 8px;
}

.autocomplete-col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.autocomplete-col-id {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.autocomplete-header {
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #546e7a;
    padding: 6px 8px 5px;
    border-bottom: 1px solid #dee2e6;
    top: 0;
    background: var(--color-cyan-08);
    z-index: 1;
}

/* --- Shared card shell --- */
.search-card {
    background: var(--surface-card);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    border-top: 3px solid var(--color-cyan);
    overflow: hidden;
}

.search-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px;
    border-bottom: 1px solid var(--surface-border);
    background: var(--color-cyan-04);
}

.search-card-header .card-icon {
    font-size: 15px;
    color: var(--color-cyan);
    width: 18px;
    text-align: center;
}

.search-card-header .card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.01em;
}

.search-card-header .card-subtitle {
    font-size: 11.5px;
    color: var(--text-muted);
    font-style: italic;
    margin-left: auto;
}

.search-card-body {
    padding: 8px 12px 10px;
}

.search-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-blue);
    margin-bottom: 12px;
}

/* --- Search form row --- */
.search-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.search-form-smcol {
    flex: 0 0 auto;
    max-width: 28px;
    min-width: 16px;
}

.search-form-col {
    flex: 1 1 200px;
    max-width: 280px;
    min-width: 160px;
}

.search-form-col-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
}

/* Compact variant of .search-form-col — used for the name-search fields, which sit
   alongside the (larger) Patient Number field in the same row. */
.search-form-col-compact {
    flex: 0 1 140px;
    max-width: 140px;
    min-width: 110px;
}

/* Small inline "OR" separator between the two search options in the same row. */
.search-form-divider {
    flex: 0 0 auto;
    align-self: center;
    font-style: italic;
    color: #546e7a;
    padding: 0 4px;
}

/* Shrinks a DevExtreme button (e.g. via .CssClass("btn-compact")) to match the
   smaller name-search fields it sits next to. */
.btn-compact.dx-button {
    height: 28px;
}
.btn-compact.dx-button .dx-button-content {
    padding: 2px 8px;
    font-size: 12px;
}

.search-form-col label {
    display: block;
    font-size: 13px;
    color: #546e7a;
    margin-bottom: 4px;
}

/* --- No-results empty state --- */
.no-results-state {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
}

.no-results-state .no-results-icon {
    font-size: 26px;
    color: var(--text-subtle);
    margin-bottom: 10px;
}

.no-results-state p {
    margin: 0;
    font-size: 13.5px;
}

/* --- dxCardView info section content ---
   Restyled to match WholesaleOrderDetail.cshtml's plain enterprise record look
   (label-over-value, uppercase muted label, normal-weight navy value) instead
   of the old label-left/value-right compact row. Card chrome (border/radius/
   shadow) is applied directly to this template's own root element rather than
   DevExtreme's internal card wrapper, since this is the element cardTemplate
   actually controls. */
.info-card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-top: 3px solid var(--color-cyan);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px 5px;
    /* Same gradient as WholesaleOrderDetail.cshtml's .who-page-header, reused here for visual
       consistency across both views. The .ebi-card--primary/success/info modifiers below still
       override this for their own (unrelated) card system, same as before this change. */
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
}

.info-card-header i {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 7px;
    background: var(--color-cyan);
    /* Solid cyan is light/bright - navy reads far better inside it than white would. */
    color: var(--color-navy);
}

.info-card-header-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
}

/* 3-column grid - cards are full-width now (one per row), so 3 evenly-sized columns shorten the
   taller cards (Additional Details' 11 fields, Insurance's up to 18 per tier) without feeling
   cramped. Every field's value lines up under the same column boundary as the field above/below
   it. Spacing between fields comes entirely from row-gap/column-gap (no per-row border) so an
   uneven field count's final, short row never ends up mismatched against its neighbor above. */
.info-card-fields {
    flex: 1;
    padding: 10px 14px 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 14px;
}

@media (max-width: 1000px) {
    .info-card-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .info-card-fields {
        grid-template-columns: 1fr;
    }
}

/* Subheading between grouped fields (e.g. Insurance's Provider/Insured/Additional groups) -
   skipped entirely for cards whose fields have no "group" property. Spans both columns so it
   reads as a section break, not a field squeezed into one column. */
.info-card-subgroup-label {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-top: 6px;
}

.info-card-subgroup-label:first-child {
    margin-top: 0;
}

.info-card-field-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.info-card-field-value {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-primary);
    word-break: break-word;
}

.info-card-field-value.empty {
    color: var(--text-subtle);
    font-style: italic;
}

/* Order Overview's "go to related card" fields (_OrderInfoPanel.cshtml's buildFieldsFragment,
   fields carrying a scrollTarget) - an arrow-icon button sits beside the label/value stack
   instead of the field filling the whole grid cell on its own. */
.info-card-field-row--linked {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.info-card-field-text {
    flex: 1;
    min-width: 0;
}

.info-card-field-goto {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    padding: 0;
    border: 1.5px solid var(--color-cyan);
    border-radius: 50%;
    background: var(--color-cyan-10);
    color: var(--color-blue);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.info-card-field-goto:hover {
    background: var(--color-cyan);
    color: #ffffff;
    transform: translateX(2px);
}

/* --- Tab content stubs --- */
.tab-stub {
    padding: 22px 20px;
    color: var(--text-muted);
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-stub i {
    font-size: 15px;
    color: var(--text-subtle);
}

/* --- dxTabPanel scrollable tab strip --- */
#patientTabPanel .dx-tabs-wrapper {
    flex-wrap: nowrap !important;
    white-space: nowrap;
}

#patientTabPanel .dx-tab {
    flex-shrink: 0;
}

/* --- Insurance tabs: stretch Primary/Secondary/Tertiary to fill the full width evenly ---
   Opposite of #patientTabPanel above (which has many tabs and needs horizontal scroll instead) -
   with exactly 3 known tabs here, each should grow to an equal 1/3 share rather than sitting
   left-aligned at its own content width.
   flex-grow alone wasn't enough: the real dxTabPanel tab element carries both .dx-tab and
   .dx-tabpanel-tab, and the active theme (dx.greenmist.compact.ebi.css) caps the latter at
   `.dx-tabpanel-tabs .dx-tabs.dx-tabs-horizontal .dx-tabpanel-tab { max-width: 140px }` - a
   3-class selector, lower specificity than this ID-scoped one, but it sets a DIFFERENT property
   (max-width) that this rule wasn't overriding, so each tab still hit that 140px ceiling and
   stopped growing regardless of flex-grow, leaving the rest of the strip empty (exactly what the
   screenshot showed). Overriding max-width here removes that ceiling. */
#insuranceTabPanel .dx-tab {
    flex: 1 1 0%;
    max-width: none;
    text-align: center;
    justify-content: center;
}

#patientTabPanel .dx-tabs-scrollable {
    overflow: hidden;
}

/* --- Medical History inner tab: propagate height so content can scroll --- */
#patientTabPanel .dx-tabpanel-container,
#patientTabPanel .dx-multiview-item,
#patientTabPanel .dx-multiview-item-content {
    height: 100%;
}


/* ============================================================
   Semantic Card Variants
   ============================================================ */

/* Default (unchanged .search-card = Cyan top border) */

/* Primary: Blue top border */
.ebi-card--primary {
    border-top-color: var(--color-blue) !important;
}

.ebi-card--primary .search-card-header,
.ebi-card--primary .info-card-header {
    background: rgba(2, 65, 120, 0.04);
}

.ebi-card--primary .card-icon,
.ebi-card--primary .info-card-header i {
    color: var(--color-blue);
}

/* Accent: Cyan top border (default, no override needed) */

/* Success: Mint top border */
.ebi-card--success {
    border-top-color: var(--color-mint) !important;
}

.ebi-card--success .search-card-header,
.ebi-card--success .info-card-header {
    background: var(--color-mint-15);
}

.ebi-card--success .card-icon,
.ebi-card--success .info-card-header i {
    color: #1a7a50;
}

/* Info: Navy top border */
.ebi-card--info {
    border-top-color: var(--color-navy) !important;
}

.ebi-card--info .search-card-header,
.ebi-card--info .info-card-header {
    background: rgba(19, 18, 50, 0.04);
}

.ebi-card--info .card-icon,
.ebi-card--info .info-card-header i {
    color: var(--color-navy);
}


/* ============================================================
   Dashboard KPI Cards
   ============================================================ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 15px;
}

.kpi-card {
    background: var(--surface-card);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
    padding: 10px 20px 8px;
    display: flex;
    flex-direction: column;
    /* gap: 6px; */
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kpi-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.11), 0 0 0 1px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

/* Decorative background circle */
.kpi-card::after {
    content: '';
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
}

.kpi-card--blue::after  { background: var(--color-blue); }
.kpi-card--cyan::after  { background: var(--color-cyan); }
.kpi-card--mint::after  { background: var(--color-mint); }
.kpi-card--amber::after { background: #f59e0b; }

.kpi-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.kpi-card__label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    line-height: 1.4;
    padding-top: 2px;
}

.kpi-card__icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-cyan);
    color: var(--color-silver);
}

.kpi-card__icon-wrap .dx-icon {
    font-size: 19px;
}

.kpi-card--blue .kpi-card__icon-wrap {
    background: var(--color-blue);
    color: #fff;
}
.kpi-card--cyan .kpi-card__icon-wrap {
    background: var(--color-cyan);
    color: var(--color-navy);
}
.kpi-card--mint .kpi-card__icon-wrap {
    background: var(--color-mint);
    color: var(--color-navy);
}
.kpi-card--amber .kpi-card__icon-wrap {
    background: #f59e0b;
    color: #fff;
}

.kpi-card__value {
    font-size: 34px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.5px;
}

.kpi-card__trend {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2px;
}

.kpi-card__trend--up      { color: #1a7a50; }
.kpi-card__trend--down    { color: #c0392b; }
.kpi-card__trend--neutral { color: var(--text-muted); }



#submissions-grid{
    height: 73vh;
    overflow: auto;
}

.dx-datagrid-search-panel {
    margin: 0 0 0 0px;
}

.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    border-color: rgba(65, 64, 66, 0.3);
    background-color: #f5f5f5;
}

/* DevExtreme buttons that should match the 8px rounded corners of the
   .ql-header__back header buttons used elsewhere (e.g. Onboarding "New OnBoarding");
   the DevExtreme compact theme default radius (2px) is much squarer.
   .btn-create-order: OrderList.cshtml. .btn-rounded: generic opt-in (Patient/Search.cshtml). */
.btn-create-order.dx-button,
.btn-rounded.dx-button {
    border-radius: 8px;
}

/* Create Order button – force icon white regardless of theme colour */
.btn-create-order .dx-icon {
    color: #ffffff !important;
}

/* Save & Exit button (CreateOrder.cshtml) – outlined-button theme default (charcoal)
   is barely visible against the dark .co-topbar gradient; force it to match the
   button's own white text instead. */
#btn-save-exit .dx-icon {
    color: var(--color-silver) !important;
}

/* Collapsed drawer: hide text labels and expand chevrons, show icons only */
/*.dx-drawer-shrink:not(.dx-drawer-opened) .nav-item-text {
    display: none;
}
*/
/*.dx-drawer-shrink:not(.dx-drawer-opened) .dx-treeview-toggle-item-visibility {
    display: none !important;
}*/

/* Keep FAB labels readable in collapsed (icon-only) drawer state */
/*.dx-drawer-shrink:not(.dx-drawer-opened) .dx-fa-button-label {
    display: none;
}*/

.dx-fa-button .dx-overlay-content .dx-fa-button-label-wrapper .dx-fa-button-label {
    background-color: var(--color-cyan);
    color: #ffffff;
    white-space: nowrap;
    border-radius: 4px;
    padding: 5px 10px;
    margin-right: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .16);
    font-size: 14px;
}

.dx-fa-button .dx-overlay-content .dx-fa-button-icon {
    box-shadow: 0 6px 12px rgba(0, 0, 0, .2);
    background-color: var(--color-cyan); /* fallback; overridden per-item by .sda-idx-N rules */
    border-radius: 50%;
    position: relative;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure FontAwesome icons in speed-dial action buttons use FA font (overrides dx-icon font-family) */
.dx-fa-button .dx-overlay-content .dx-fa-button-icon .dx-icon.fa-solid,
.dx-fa-button .dx-overlay-content .dx-fa-button-icon .dx-icon.fa-regular,
.dx-fa-button .dx-overlay-content .dx-fa-button-icon .dx-icon.fa-brands {
    font-family: 'Font Awesome 7 Free' !important;
    font-size: 18px;
    line-height: 1;
}

/*
.dx-fa-button.dx-fa-button-main .dx-overlay-shader {
    background-color: rgba(245, 245, 245, .5);
}
*/

.dx-step-label, .dx-step-optional-mark {
    text-overflow: ellipsis;
    white-space: normal;
    text-align: center;
}

.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content .dx-fa-button-icon, .dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content .dx-fa-button-icon-close {
    padding: 10px 10px 10px 10px;
}

/* Quick Links FAB main toggle button: collapsed to an icon-only circle by default,
   expands into the full labeled pill (matching the theme's normal with-label layout)
   on hover/focus. Clicking still opens the speed dial as before - this only changes
   the resting/hover appearance. Note: the theme puts the pill background/radius on
   .dx-overlay-content itself (not the icon), so both the container shape and the
   icon padding have to be collapsed/restored alongside the label width. */
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content {
    border-radius: 50%;
    transition: border-radius 0.2s ease;
}

.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content .dx-fa-button-label-wrapper {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}

.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content .dx-fa-button-label-wrapper .dx-fa-button-label {
    margin-right: 0;
    transition: margin-right 0.25s ease;
}

.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content:hover,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content.dx-state-hover,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content.dx-state-focused,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label.quick-links-fab-open .dx-overlay-content {
    border-radius: 17px;
}

.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content:hover .dx-fa-button-label-wrapper,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content.dx-state-hover .dx-fa-button-label-wrapper,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content.dx-state-focused .dx-fa-button-label-wrapper,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label.quick-links-fab-open .dx-overlay-content .dx-fa-button-label-wrapper {
    max-width: 200px;
    opacity: 1;
    pointer-events: auto;
}

.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content:hover .dx-fa-button-label-wrapper .dx-fa-button-label,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content.dx-state-hover .dx-fa-button-label-wrapper .dx-fa-button-label,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label.quick-links-fab-open .dx-overlay-content .dx-fa-button-label-wrapper .dx-fa-button-label,
.dx-fa-button.dx-fa-button-main.dx-fa-button-with-label .dx-overlay-content.dx-state-focused .dx-fa-button-label-wrapper .dx-fa-button-label {
    margin-right: 10px;
}

/* "Back to top" floating button (_OrderInfoPanel.cshtml) - fixed bottom-right. The Quick Links
   FAB above sits bottom-left (position.at 'left bottom'), so the two never overlap. */
.scroll-to-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--color-blue);
    color: #ffffff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    z-index: 1000;
    transition: background 0.15s ease;
}

.scroll-to-top-btn:hover {
    background: var(--color-navy);
}


/* ============================================================
   Create Order – View Styles
   ============================================================ */

/* ── Layout ── */
#create-order-container {
    max-width: 100%;
}

/* ── Step panel card ── */
.co-step-panel {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    padding: 16px 16px;
    box-shadow: var(--shadow-card);
    height: 55vh;
    overflow: auto;
    scroll-behavior:auto;
    scrollbar-gutter: stable; /* not supported on Safari — layout shift may occur */
}
.co-step-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.co-step-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-cyan-10);
    color: var(--color-cyan);
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.co-step-badge.dx-icon {
    background-position: 50% 50%;
    font-size: 36px;
}

.co-step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-navy);
    display: flex;
    align-items: center;
    gap: 8px;
}
.co-step-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}
.co-optional-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--color-silver);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Product cards ── */
 .co-product-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid #e5e7ea;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-user-select: none;
    user-select: none;
}
.co-product-card:hover {
    border-color: var(--color-cyan);
    background: var(--color-cyan-04);
}
.co-product-card.selected {
    border-color: var(--color-cyan);
    background: var(--color-cyan-08);
} 
 .co-product-radio {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 2px solid #ccc;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
} 
.co-product-radio::after {
    content: '';
    position: absolute;
    opacity: 0;
    top: 1px; left: 5px;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    transition: opacity 0.15s;
}
.co-product-card.selected .co-product-radio {
    border-color: var(--color-cyan);
    background: var(--color-cyan);
}
.co-product-card.selected .co-product-radio::after { opacity: 1; }
.co-product-icon {
    width: 42px; height: 42px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.co-product-title { font-size: 13px; font-weight: 600; color: var(--color-navy); }
.co-product-sub   { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* ── DevExtreme overrides ── */

/* dxForm group captions → brand navy */
#create-order-container .dx-fieldset-header {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--color-navy);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-cyan-25);
    padding-bottom: 6px;
    margin-bottom: 14px;
}

/* dxForm field labels → charcoal */
#create-order-container .dx-field-item-label-text {
    color: var(--color-charcoal);
    font-size: 12px;
    font-weight: 600;
}

/* dxTextBox / dxSelectBox / dxDateBox focus ring → cyan */
#create-order-container .dx-texteditor.dx-state-focused {
    border-color: var(--color-cyan) !important;
    box-shadow: 0 0 0 3px var(--color-cyan-10);
}

/* dxTabPanel tabs (Medical History + Diagnosis) */
#medical-history-tabs .dx-tab,
#diagnosis-tabs .dx-tab {
    color: var(--color-charcoal);
    font-size: 13px;
    font-weight: 500;
}
#medical-history-tabs .dx-tab.dx-tab-selected,
#diagnosis-tabs .dx-tab.dx-tab-selected {
    color: var(--color-navy);
    font-weight: 700;
    border-bottom: 2px solid var(--color-cyan);
}

/* dxCheckBox checked → checkmark symbol (no fill) */
.dx-checkbox-checked .dx-checkbox-icon {
    background-color: transparent;
    border-color: var(--color-navy);
}
.dx-checkbox-checked .dx-checkbox-icon::before {
    color: var(--color-cyan);
}

/* dxStepper active step indicator */
.dx-stepper .dx-step-indicator.dx-step-indicator-current {
    background-color: var(--color-cyan) !important;
    border-color: var(--color-cyan) !important;
    color: var(--color-silver) !important;
    font-weight: 700;
}
.dx-stepper .dx-step-indicator.dx-step-indicator-completed {
    background-color: var(--color-cyan) !important;
    border-color: var(--color-charcoal) !important;
}
.dx-stepper .dx-step-label.dx-step-label-current {
    color: var(--color-navy);
    font-weight: 700;
}
.dx-stepper .dx-step-connector {
    background-color: var(--color-cyan-25);
}
.dx-stepper .dx-step-connector.dx-step-connector-completed {
    background-color: var(--color-navy);
}

.dx-step-indicator {
    z-index: 0;
    width: 32px;
    height: 32px;
    transition-duration: .2s;
    background-color: #d3d3d3;
    border-color: #d3d3d3;
    box-shadow: 0 0 0 8px #f5f5f5;
    color: #28484f;
    font-size: 32px;
}

.dx-step-content .dx-icon {
    width: 24px;
    height: 24px;
    background-position: 0 0;
    background-size: 24px 24px;
    padding: 0;
    font-size: 20px;
    text-align: center;
    line-height: 24px;
}

.dx-datagrid-header-panel .dx-toolbar {
     margin-bottom: 0px !important;
}

/* ── dxStepper layout ── */
.dx-stepper {
    display: flex;
    align-items: flex-start;
    padding: 14px 12px 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    overflow-x: auto;
}
.dx-step {
    flex: 1;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 0 2px;
    -webkit-user-select: none;
    user-select: none;
}
.dx-step:hover .dx-step-indicator:not(.dx-step-indicator-current):not(.dx-step-indicator-completed) {
    background-color: var(--color-cyan-25) !important;
    border-color: var(--color-cyan) !important;
}
.dx-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.dx-step-connector {
    flex: 0 1 40px;
    min-width: 8px;
    height: 2px;
    background-color: var(--color-cyan-25);
    align-self: flex-start;
    margin-top: 16px; /* vertically centre with the 32px indicator */
}
.dx-step-indicator {
    border-radius: 50% !important;
    border: 2px solid #d3d3d3;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    cursor: pointer;
}
.dx-step-label {
    text-align: center;
    padding: 0 2px;
    width: 100%;
}
.dx-step-name {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}
.dx-step-label-current .dx-step-name {
    color: var(--color-navy);
    font-weight: 700;
}
.dx-step-desc {
    display: none;
}


/* .dx-overlay-wrapper .dx-overlay-shader {
    z-index: 1500;
    position: fixed;
    left: 0px;
    top: 0px;
    transform: translate(0px, 0px);
    transition: all;
    overflow: visible;
}

.dx-overlay-wrapper .dx-popup-wrapper .dx-overlay-shader {
    z-index: 1500;
    position: fixed;
    left: 0px;
    top: 0px;
    transform: translate(0px, 0px);
    transition: all;
    overflow: visible; 
}*/

/* ── Brand-aligned dialog (DevExpress.ui.dialog.alert / confirm) ─────── */
.dx-dialog .dx-popup-title {
    background: var(--color-navy) !important;
    color:      #ffffff !important;
    border-bottom: 2px solid var(--color-cyan) !important;
    border-radius: 6px 6px 0 0 !important;
}
.dx-dialog .dx-popup-title .dx-toolbar-label,
.dx-dialog .dx-popup-title .dx-toolbar-item-content {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.dx-dialog .dx-popup-content {
    background: #ffffff !important;
    color: var(--color-navy) !important;
}
.dx-dialog .dx-popup-bottom {
    background: #f5f6fa !important;
    border-top: 1px solid rgba(19,18,50,0.08) !important;
    border-radius: 0 0 6px 6px !important;
}
.dx-dialog .dx-dialog-button .dx-button-content {
    background: var(--color-cyan) !important;
    color:      var(--color-navy) !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    border: none !important;
}
.dx-dialog .dx-dialog-button .dx-button-content:hover {
    background: var(--color-navy) !important;
    color:      var(--color-cyan) !important;
}
.dx-dialog .dx-overlay-content {
    border-radius: 6px !important;
    box-shadow: 0 8px 28px rgba(19,18,50,0.22) !important;
    border: 1.5px solid var(--color-cyan) !important;
}

/* ── Brand-aligned toast notifications ───────────────────────────────── */
/* DevExtreme sets background-color on the type class (.dx-toast-warning etc.)
   and leaves .dx-toast-content transparent — so we override the type class. */

/* Every toast type uses the navy background with white text; the theme's per-type
   icon (white glyph image) still tells info/success/warning/error apart.
   The cyan border keeps the toast visible when it lands over the navy footer. */
.dx-toast-info,
.dx-toast-success,
.dx-toast-warning,
.dx-toast-error {
    background-color: var(--color-navy) !important;
    border: 2px solid var(--color-cyan) !important;
}

.dx-toast-info .dx-toast-content,
.dx-toast-success .dx-toast-content,
.dx-toast-warning .dx-toast-content,
.dx-toast-error .dx-toast-content {
    color: #ffffff !important;
}

/* shared: tighter shadow */
.dx-toast-content {
    box-shadow: 0 4px 14px rgba(19,18,50,0.22) !important;
}

.dx-license-trigger{
    display: none !important;
}

.dx-toast-message {
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* ── Shared plain card grid (PDF / thumbnail tiles) ── */
.pr-plain-card-grid a {
    text-decoration: none;
    color: inherit;
}

.pr-plain-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 16px 0;
}

.pr-plain-card {
    min-width: 0;
    background: var(--surface-card);
    border-radius: 12px;
    box-shadow: 0 4px 24px var(--color-navy-10);
    border-top: 4px solid var(--color-cyan);
    overflow: hidden;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pr-plain-card a {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

.pr-plain-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(19, 18, 50, 0.16);
}

.pr-plain-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    background: #f8f9fb;
    display: block;
    flex-shrink: 0;
    transition: transform 0.32s ease;
}

.pr-plain-card:hover img {
    transform: scale(1.05);
}

.pr-plain-card-img-wrap {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pr-plain-card-title {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--color-cyan-04);
    border-bottom: 1px solid var(--color-cyan-25);
}

.pr-plain-card-unit {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pr-card-unit-label {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--color-cyan-04);
    border-top: 4px solid var(--color-cyan);
    border-bottom: 1px solid var(--color-cyan-25);
    border-radius: 10px 10px 0 0;
    text-align: center;
    box-shadow: 0 -4px 16px var(--color-navy-10);
}

.pr-plain-card-unit > .pr-plain-card {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: 100%;
}

@media (max-width: 960px) {
    .pr-plain-card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .pr-plain-card-grid { grid-template-columns: 1fr; }
}

/* ── Quick-Links page header (flat Navy, no gradient) ── */
.ql-header {
    background: #131232;
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 4px;
    border-bottom: 4px solid #2ECDDC;
    box-shadow: 0 8px 32px rgba(19,18,50,0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-family: 'Inter', system-ui, sans-serif;
}

.ql-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ql-header__title {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.ql-header__sub {
    font-size: 12px;
    color: rgba(46, 205, 220, 0.75);
    font-weight: 400;
    margin: 0;
}

/* OrderType eyebrow above _OrderInfoPanel.cshtml's .ql-header__title - matches
   WholesaleOrderDetail.cshtml's .who-header-eyebrow (same role: small caption above a title on
   a dark header). Kept as its own class rather than reusing .ql-header__sub above (shared across
   24+ other views) or .who-header-eyebrow itself (a different file's local style block). */
.order-type-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7dd3fc;
    margin-bottom: 4px;
}

.ql-header__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s;
    flex-shrink: 0;
}

.ql-header__back:hover {
    background: rgba(255,255,255,0.20);
}

/* Order status pill (_OrderInfoPanel.cshtml's #orderInfoPanelActions) - same translucent-white-
   on-dark-header treatment as .ql-header__back above, for visual consistency on the same header. */
.order-status-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    padding: 5px 14px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ql-header__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2ECDDC;
    color: #131232;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 16px rgba(46,205,220,0.30);
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.18s;
    text-decoration: none;
}

.ql-header__action:hover {
    background: #1cbcca;
    color: #131232;
}