/* Design Tokens – all global values live here */
:root {
    /* ── Layout ──────────────────────────────────────────────────── */
    --header-height:    60px;
    --footer-height:    30px;
    --sidebar-width:    380px;
    --content-padding:  .25rem;

    /* Bounding box for the header logo. Client-uploaded logos arrive at any
       size, so both axes are capped and the image scales down to fit. */
    --nav-logo-max-height: calc(var(--header-height) - 28px);
    --nav-logo-max-width:  140px;

    /* Plate behind logo + environment label, so the two read as one box.
       Alpha 0.15 = ~85% transparent: the header blue shows through as a frosted
       tint. Raise the alpha for a more solid plate.
       Keep the tint LIGHT — client logo artwork is typically dark, and a dark
       plate swallows it. The label is dark for the same reason: white text on
       the frosted plate only reaches 3.5:1, under the 4.5:1 AA floor. */
    --nav-logo-box-bg:     rgba(255, 255, 255, 0.35);
    --nav-env-label-color: #14213d;

    /* ── Brand Colours ───────────────────────────────────────────── */
    --base-background:          #eae1d0; /* #4e73cb  #06381d;*/
    --base-background-dark:     #e6d5b8;
    --base-constrast:           #06381d;
    --base-constrast-light:     #0e733c;

    /* ── Page / body background ──────────────────────────────────── */
    --page-bg:                  white; /*#4e73cb;*/
    --page-title-bg:            white;
    --page-title-text:          var(--base-constrast);

    /* ── Footer ──────────────────────────────────────────────────── */
    --footer-bg:                var(--base-constrast); /*rgba(0, 0, 0, 0.15);*/
    --footer-text:              white; /*rgba(0, 0, 0, 0.80);*/
    --footer-link-color:        rgba(0, 0, 0, 0.80);
    --footer-link-hover-color:  #ffffff;
    --menu-word-color:          white;
    --color-accent:             #6366f1;
    --color-accent-dark:        #4f52c9;
    --color-menu-bg:            #eae1d0;
    --color-border:             #dee2e6;
    --color-bg-light:           #f8fafc;
    --color-bg-hover:           #bfc5c9;
    --color-btn-primary:        #0066cc;
    --color-btn-primary-hover:  #0052a3;

    /* ── Typography ──────────────────────────────────────────────── */
    --font-size-base: 0.8125rem; /* 13px – body/form default   */
    --font-size-sm:   0.75rem;   /* 12px – labels, filter text */
    --font-size-xs:   0.6875rem; /* 11px – table cells, xsm-txt */

    /* ── Form Controls ───────────────────────────────────────────── */
    --input-height-sm:     calc(var(--font-size-base) * 1.5 + 0.5rem + 2px);
    --input-padding-sm:    0.25rem 0.5rem;
    --label-color:         #495057;
    --input-color:         #5a5a8e;
    --input-border:        #ced4da;
    --input-focus-border:  #86b7fe;
    --input-focus-shadow:  0 0 0 3px rgba(13, 110, 253, 0.25);
    --select2-font-size:   var(--font-size-base);
    --select2-line-height: 1.5;

    /* ── Form Layout ─────────────────────────────────────────────── */
    --form-row-gap:       0px;   /* normal spacing between rows     */
    --form-row-gap-error: 24px;   /* extra room when error shows     */
    --form-error-size:    11px;   /* compact error text font size    */

    /* ── Spacing Scale ───────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;

    /* ── Border Radius ───────────────────────────────────────────── */
    --border-radius-sm: 4px;
    --border-radius:    8px;

    /* ── Shadows ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);

    /* ── Transitions ─────────────────────────────────────────────── */
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ── Z-Index Stack ───────────────────────────────────────────── */
    --z-base:     1;
    --z-nav:      10;
    --z-modal-bg: 1030;
    --z-overlay:  1040;

    /* ── Nav Menu (derived from base blue theme) ─────────────────── */
    --nav-header-bg:           #f8fafc; 
    --nav-header-border:       rgba(255,255,255,0.12);
    --nav-header-color:        var(--base-constrast);  /*#ffffff;*/
/*    --nav-header-shadow:       0 2px 8px rgba(0,0,0,0.20);*/

    --nav-toggle-color:        var(--base-constrast); /*#ffffff;*/
    --nav-toggle-hover-color:  var(--base-constrast); /*#ffffff;*/
    --nav-toggle-bg:           var(--base-background);
    --nav-toggle-border:       var(--base-constrast); /*rgba(255,255,255,0.28);*/
    --nav-toggle-hover-bg:     var(--base-background);

    /* Quick-access strip: the frosted container plus the chips inside it. */
    --nav-quick-wrapper-bg:     var(--base-background);
    --nav-quick-wrapper-border: var(--base-constrast);
    --nav-quick-color:         var(--base-constrast);
    --nav-quick-hover-color:   var(--base-constrast);
    --nav-quick-hover-bg:      rgba(255,255,255,0.4);
    --nav-quick-active-color:  #ffffff;
    --nav-quick-active-border: #ffffff;
    --nav-quick-active-bg:     var(--base-constrast);

    --nav-user-color:          #ffffff;
    --nav-user-hover-bg:       rgba(255,255,255,0.12);

    /* Profile avatar — filled when signed in, muted grey when not. */
    --nav-avatar-auth-bg:      #FA8075;
    --nav-avatar-auth-color:   #ffffff;
    --nav-avatar-unauth-bg:    #bfbfbf;
    --nav-avatar-unauth-color: #ffffff;

    --nav-drawer-header-bg:    var(--nav-header-bg);
    --nav-drawer-header-color: #06381d;
    --nav-drawer-header-border: rgba(255,255,255,0.12);
    --nav-drawer-close-color:  rgba(255,255,255,0.80);
    --nav-drawer-close-hover:  white;
    --nav-drawer-body-bg:      #f8fafc;
    --nav-drawer-mask:         rgba(0,0,0,0.35);

    --nav-group-title-bg:      var(--base-background-dark);
    --nav-group-title-color:   var(--base-constrast);
    --nav-group-title-border:  var(--base-background-dark);

    --nav-item-color:          #374151;
    --nav-item-hover-bg:       #dbe4f7;
    --nav-item-hover-color:    #3b5298;
    --nav-item-selected-bg:    #c7d4f0;
    --nav-item-selected-color: #3b5298;
    --nav-item-selected-bar:   #4e73cb;

    /* Sub-header ("Mall & Lease", "General") carries the theme accent, one step
       lighter than the section header above it so the hierarchy still reads.
       Kept off the brand #4e73cb — that only reaches 4.3:1 on the drawer body,
       just under the 4.5:1 AA floor for 13px text. */
    --nav-sub-title-color:     var(--base-constrast);
    --nav-sub-arrow-color:     #9ca3af;
    --nav-sub-bg:              #eef2fb;

    --nav-link-icon-color:     var(--base-constrast);

    --nav-focus-ring:          #4e73cb;
    --nav-star-color:          #9ca3af;
    --nav-star-active-color:   #e8a33d;
    --nav-star-hover-bg:       rgba(232,163,61,0.12);
    --nav-scroll-thumb:        #cbd5e1;
    --nav-scroll-thumb-hover:  #94a3b8;

    /* ── Mega-menu geometry (theme-agnostic — no per-theme overrides) ──
       One indent ladder drives every level of the drawer menu:
         section header text = gutter + row-pad + icon-gutter
         level-1 row text     = that + indent
         level-2 row text     = that + indent × 2
       Change a token here and all three levels stay in step. */
/*    --nav-drawer-max-width: 1320px;*/
    --nav-gutter:            6px;   /* row pill inset from the column edge  */
    --nav-row-pad:          10px;   /* row pill inner left padding          */
    --nav-indent:           20px;   /* one step down the hierarchy          */
    --nav-icon-gutter:      24px;   /* space reserved for the leading icon  */
    --nav-item-height:      34px;
    --nav-item-radius:       6px;

    /* Type ladder — each level steps DOWN from its parent, so a child is never
       set at or above its parent's size. Keep these strictly descending. */
    --nav-title-size:       13px;   /* section header  (level 0) */
    --nav-item-size:        13px;   /* rows            (level 1) */
    --nav-subitem-size:     12px;   /* nested rows     (level 2) */

    /* ── SSRS report cards (classic theme) ─────────────────── */
    --ssrs-card-header-bg:    #4e73cb;
    --ssrs-card-header-color: #ffffff;
    --ssrs-card-bg:           #ffffff;
    --ssrs-card-border:       rgba(78,115,203,0.22);
    --ssrs-card-body-color:   #374151;
    --ssrs-card-hover-shadow: rgba(78,115,203,0.22);

    /* ── Buttons — THE global interactive fill ───────────────
       Single source of truth for every action button in the app. The per-area
       families below and in theme-variables.css (--ff-*, --mc-*, --tbl-*)
       derive from these rather than restating a hex, so retinting a theme's
       buttons means overriding --btn-primary-bg / --btn-primary-hover-bg once.

       Not to be confused with --btn-accent-* (theme-variables.css), which is
       the deliberately different ALTERNATE accent behind the opt-in
       .btn-theme-accent class — e.g. coral on huddle8. */
    --btn-primary-bg:           var(--base-constrast-light);
    --btn-primary-hover-bg:     var(--base-background);
    --btn-primary-color:        #ffffff;
    --btn-primary-shadow:       0 1px 4px rgba(78,115,203,0.28);
    --btn-primary-hover-shadow: 0 2px 6px rgba(78,115,203,0.35);
    --btn-default-bg:           #ffffff;
    --btn-default-border:       #d0d9ee;
    --btn-default-hover:        var(--btn-primary-bg);

    /* Destructive actions — delete, remove, discard. */
    --btn-danger-bg:            #dc2626;
    --btn-danger-hover-bg:      #991b1b;
    --btn-danger-color:         #ffffff;

    /* Soft tints. Icon-only buttons in table rows invert on hover: the solid
       fill drops to this tint and the glyph takes the *-soft-color. */
    --btn-primary-soft:         #dbe4f7;
    --btn-primary-soft-color:   var(--btn-primary-hover-bg);
    --btn-danger-soft:          #fee2e2;
    --btn-danger-soft-color:    var(--btn-danger-hover-bg);

    /* ── Disabled state (classic theme) ──────────────────────
       Overridden per theme in theme-variables.css. */
    --disabled-text:     rgba(0,0,0,0.25);
    --disabled-bg:       rgba(0,0,0,0.04);

    /* ── AntDesign Card surfaces (classic theme) ─────────────
       Shared by every themed <Card>: content-area cards, the sales monitor
       summary cards, barcode receipt. Overridden per theme in
       theme-variables.css; a surface that needs a different tint (e.g. the
       translucent dashboard card on dark) re-points these on its own scope
       rather than restating the rules. */
    --card-bg:           #ffffff;
    --card-border:       #d0d9ee;
    --card-head-bg:      #e6f4ff;
    --card-head-border:  #d0d9ee;
    --card-head-color:   #3b5298;
    --card-body-color:   #374151;

    /* ── Filter form sider + titled card groups (classic theme) ──
       Consumed by ant-filter-form-huddle8.css and ant-drawer-huddle8.css.
       They live here rather than in either sheet because both consume them
       and _Layout.cshtml can toggle those sheets independently. Overridden
       per theme in theme-variables.css; these values are the classic set. */
    --ff-sider-bg:                 #ffffff;
    --ff-sider-border:             #e8edf6;
    --ff-text:                     #374151;
    --ff-muted:                    #9ca3af;
    --ff-card-titled-head:         var(--base-constrast-light);   /* tinted header for named groups */
    --ff-card-title-color:         white;
    --ff-card-border:              var(--base-constrast-light);
    --ff-input-bg:                 #ffffff;
    --ff-input-border:             #d9d9d9;
    --ff-input-hover:              #7c9adb;
    --ff-input-focus:              #4e73cb;
    --ff-input-focus-ring:         rgba(78,115,203,0.15);
    /* Buttons + checkbox derive from the global fill — see --btn-primary-* */
    --ff-cb-checked-bg:            var(--btn-primary-bg);
    --ff-accent:                   var(--btn-primary-bg);
    --ff-btn-primary-bg:           var(--btn-primary-bg);
    --ff-btn-primary-hover:        var(--btn-primary-hover-bg);
    --ff-btn-shadow:               var(--btn-primary-shadow);
    --ff-btn-primary-hover-shadow: var(--btn-primary-hover-shadow);
    --ff-btn-default-hover:        var(--btn-default-hover);
    --ff-toggle-hover-bg:          rgba(78,115,203,0.08);

    /* ── Resubmission counters (Sales Submission Monitor) ────
       Each counter row is a link into ResubmissionApproval, so it needs a
       resting affordance rather than a hover-only one. Accent derives from the
       global fill; only dark overrides it (theme-variables.css) because the
       global indigo is too dark against the dark card. */
    --resub-accent:                var(--btn-primary-bg);
    --resub-border:                #d9d9d9;
    --resub-hover-bg:              rgba(78,115,203,0.08);
}

/* ── Base action button ──────────────────────────────────────────────────────
   Gives every <Button Type="Primary"> the global fill, including surfaces no
   themed sheet covers (content-area buttons in classic, modals, popups). Kept
   at single-class specificity and free of !important so the per-area sheets
   (filter form, table, drawer) still override it where they intend to. */
.ant-btn-primary {
    background-color: var(--btn-primary-bg);
    border-color:     var(--btn-primary-bg);
    color:            var(--btn-primary-color);
}

.ant-btn-primary:hover:not(:disabled),
.ant-btn-primary:focus:not(:disabled) {
    background-color: var(--btn-primary-hover-bg);
    border-color:     var(--btn-primary-hover-bg);
    color:            var(--btn-primary-color);
}

/* ── Plus / Minus button icons ───────────────────────────────────────────────
   AntDesign renders these two icons with shape-rendering: optimizespeed, which
   turns off anti-aliasing. At the small button size each bar is under 1px
   thick, so a bar that falls between pixel rows is not painted at all and the
   plus shows as a lone vertical line or vanishes. Same selector as the AntD
   rule; it wins by loading later. */
.ant-btn .anticon.anticon-plus > svg,
.ant-btn .anticon.anticon-minus > svg {
    shape-rendering: auto;
}

.btn-excel {
    background: #217346 !important;
    border-color: #217346 !important;
    color: #ffffff !important;
}

.btn-excel:hover:not(:disabled) {
    background: #1a5c38 !important;
    border-color: #1a5c38 !important;
    color: #ffffff !important;
}

.base-settings {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: none;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--page-bg);
/*    transition: background 0.25s ease;*/
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Main content container */
.main-content {
    position: fixed;
    top: var(--header-height);
    bottom: var(--footer-height);
    padding: 0 2rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    z-index: var(--z-base);
}

    .main-content .content-container {
        padding: 0px 10px ;
        color: #06381d !important;
    }


.main-content-nopadding {
    position: relative;
    top: var(--header-height);
    bottom: var(--footer-height);
    height: calc(100vh - var(--header-height) - var(--footer-height));
    padding: 0 !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    z-index: var(--z-base);
}

    .banner_img {
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;

    }

.banner-content {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}


/* Layout for .logo-section lives in main-menu.css, alongside the label it wraps. */

/* Logo image — capped on both axes, with auto sizing on both so the browser
   scales the image down by its own aspect ratio instead of distorting it. */
.nav-logo {
    max-height: var(--nav-logo-max-height);
    max-width:  var(--nav-logo-max-width);
    height:     auto;
    width:      auto;
    object-fit: contain;
}

.loading {
    position: relative;
    height: 100%;
}

/* Image containment */
.main-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    padding: 40px;
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--footer-height);
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    background: var(--footer-bg);
    transition: background 0.2s ease, color 0.2s ease;
}

.footer-content {
    width: 98%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 var(--content-padding);
    margin: 0 auto;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-link {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color var(--transition-base);
}

    .footer-link:hover {
        color: var(--footer-link-hover-color);
    }

.copyright {
    color: var(--footer-text);
    font-size: 0.875rem;
}

.main-container-full {
    height: calc(100vh - var(--header-height) - var(--footer-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    background: var(--page-title-bg);
    transition: background 0.25s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    :root {
        --content-padding: 4px;

        --nav-logo-max-height: calc(var(--header-height) - 20px);
        --nav-logo-max-width:  130px;
    }
}


/* ── AntDesign Form Overrides ────────────────────────────────────── */
.ant-form-item {
    margin-bottom: var(--form-row-gap) !important;
}

.ant-form-item-has-error {
    margin-bottom: var(--form-row-gap-error) !important;
}

.ant-form-item-explain-error {
    white-space: nowrap;
    font-size: var(--form-error-size);
    margin-top: 2px;
}

.field-error {
    color: #ff4d4f;
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.3;
}