/* ============================================================================
   tenant-theme.css  —  Dynamic per-tenant primary colour overrides
   ----------------------------------------------------------------------------
   The tenant's PrimaryColor (chosen at tenant creation / Branding) is emitted
   by _Layout.cshtml as the CSS variable `--brand-primary`. Historically the
   primary button and every sidebar hover/active state were hard-coded to
   #005EB8 in style-dev.css, so changing a tenant's colour had no effect on
   them. This file re-points all of those accents at `var(--brand-primary)` so
   the whole application follows the selected brand colour automatically.

   Load order: this file is linked LAST in <head> (after style-dev.css) so it
   wins the cascade. No markup or DB changes are required — only the existing
   --brand-primary variable is consumed.
   ============================================================================ */

/* Default brand colour. _Layout.cshtml overrides --brand-primary at :root when
   the logged-in tenant has a PrimaryColor; this keeps the old blue for the
   login screen / no-tenant case and as a fallback if the variable is unset.
   --brand-primary-dark is the hover shade (computed where color-mix is
   supported; otherwise the listed fallback is used). */
:root {
    --brand-primary: #005EB8;
    /* Darker shades of the brand colour for hover / active / pressed states.
       Defaults match the old blue; overridden below from --brand-primary when
       the browser supports color-mix, so they always track the tenant colour. */
    --brand-primary-dark: #004a93;   /* generic hover (buttons etc.) */
    --brand-primary-hover: #00509e;  /* sidebar hover  */
    --brand-primary-active: #004080; /* sidebar active */
}

@supports (background: color-mix(in srgb, red, blue)) {
    :root {
        --brand-primary-dark: color-mix(in srgb, var(--brand-primary) 86%, #000);
        --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 82%, #000);
        --brand-primary-active: color-mix(in srgb, var(--brand-primary) 68%, #000);
    }
}

/* ── Primary button (custom_button primary_button) ────────────────────────── */
.custom_button.primary_button {
    color: #fff;
}

.custom_button.primary_button::after {
    background: var(--brand-primary) !important;
}

/* Keep the existing dark overlay on hover, but tint it toward the brand colour
   so hover stays on-theme instead of a flat grey/blue. */
.custom_button.primary_button::before {
    background: linear-gradient(87.69deg,
            color-mix(in srgb, var(--brand-primary) 55%, #000) 2.06%,
            color-mix(in srgb, var(--brand-primary) 35%, #000) 86.71%) !important;
}

#btn_save_diary:disabled,
#btn_save_diary[disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

/* ── Secondary button hover & active ──────────────────────────────────────── */
.custom_button.secondary_button:hover {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.period-btn.active,
.email-tabs .tab-btn.active {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* ── Sidebar: hover & active (top-level items AND submenu items) ───────────────
   The real markup (_Sidebar.cshtml) styles every menu link as `a.nav-item`,
   and Style.css drives hover/active entirely through two CSS variables:
       .nav-item:hover  { background: var(--sidebar-hover);  }
       .nav-item.active { background: var(--sidebar-active); }
   The active class is applied to BOTH the selected link and its parent
   (see the JS at the bottom of _Sidebar.cshtml), and sub-items are also
   `a.nav-item`, so redefining these two variables recolours hover, the
   selected tab, and the open parent — all in one place.

   The sidebar background IS --brand-primary (set in _Layout.cshtml), so we use
   DARKER SHADES of the same brand colour: same hue as the tenant colour, just
   dark enough to stand out against the sidebar. */
:root {
    --sidebar-hover: var(--brand-primary-hover) !important;
    --sidebar-active: var(--brand-primary-active) !important;
}

/* Ensure text stays white on hover/active regardless of brand colour. */
.sidebar-nav .nav-item:hover,
.sidebar-nav .nav-item:hover .nav-link-name,
.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item.active .nav-link-name {
    color: #fff !important;
}

/* The icon chip + active indicator bar default to a fixed indigo (--accent-light)
   which clashes on a brand-coloured sidebar — make them a translucent white so
   they read cleanly on ANY tenant colour. */
.sidebar-nav .nav-item:hover .nav-icon,
.sidebar-nav .nav-item.active .nav-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.sidebar-nav .nav-item.active::before {
    background: #fff !important;
}

/* ── Other primary-colour accents so the whole app stays on-theme ─────────── */
/* Breadcrumb links */
.page-head .page-breadcrumb li a {
    color: var(--brand-primary) !important;
}

/* ── DataTables paging (unified system-wide design) ───────────────────────── */
/* Layout & alignment of the DataTables footer (info on left, paging on right) */
div.dt-container div.dt-layout-row:last-child,
.listing-section .table-main .dt-container div.dt-layout-row:last-child {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 8px 0 0 0 !important;
    padding: 4px 0 !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-start {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 auto !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-end {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell .dt-info {
    font-family: "DM Sans", sans-serif !important;
    font-size: 12px !important;
    color: rgba(29, 30, 49, 0.6) !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 4px !important;
}

div.dt-container div.dt-layout-row div.dt-layout-cell .dt-paging nav {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

/* Base button styling: 30x30px, rounded 5px, soft light-blue background, brand color text */
div.dt-container .dt-paging .dt-paging-button,
div.dt-container .dt-paging nav button.dt-paging-button,
.dt-paging nav button.dt-paging-button,
.dt-paging nav .dt-paging-button,
.dataTables_paginate .paginate_button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.15s linear !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    background: #F3F8FD !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    font-family: "DM Sans", sans-serif !important;
    color: var(--brand-primary, #005EB8) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 18px !important;
    text-align: center !important;
    padding: 0 4px !important;
    margin: 0 2px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Inactive button text color explicitly follows brand-primary */
div.dt-container .dt-paging .dt-paging-button:not(.current):not(.disabled),
div.dt-container .dt-paging nav button.dt-paging-button:not(.current):not(.disabled),
.dt-paging nav button.dt-paging-button:not(.current):not(.disabled),
.dt-paging nav .dt-paging-button:not(.current):not(.disabled),
.dataTables_paginate .paginate_button:not(.current):not(.disabled) {
    color: var(--brand-primary, #005EB8) !important;
    background: #F3F8FD !important;
    border-color: transparent !important;
}

/* Disabled paging buttons */
div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:hover,
div.dt-container .dt-paging .dt-paging-button.disabled:active,
div.dt-container .dt-paging nav button.dt-paging-button.disabled,
div.dt-container .dt-paging nav button.dt-paging-button.disabled:hover,
.listing-section .dt-paging nav .dt-paging-button.disabled,
.listing-section .table-main .dt-layout-row .dt-layout-cell .dt-paging nav button.dt-paging-button.disabled,
.dt-paging nav button.dt-paging-button.disabled {
    cursor: not-allowed !important;
    color: rgba(29, 30, 49, 0.4) !important;
    background: #F3F8FD !important;
    border-color: transparent !important;
    opacity: 0.6 !important;
}

/* Active / current page: brand primary background with WHITE text so it never clashes with brand color */
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
div.dt-container .dt-paging nav button.dt-paging-button.current,
div.dt-container .dt-paging nav button.dt-paging-button.current:hover,
.main-wrapper .dt-paging nav .dt-paging-button.current,
.main-wrapper .listing-section .dt-paging nav .dt-paging-button.current,
.listing-section .dt-paging nav .dt-paging-button.current,
.listing-section .dt-paging nav button.dt-paging-button.current,
.listing-section .table-main .dt-layout-row .dt-layout-cell .dt-paging nav button.dt-paging-button.current,
.listing-order-table-wrap .dt-paging nav .dt-paging-button.current,
.listing-order-table-wrap .dt-paging nav button.dt-paging-button.current,
.table-main .dt-paging nav .dt-paging-button.current,
.dt-paging nav button.dt-paging-button.current,
.dt-paging nav .dt-paging-button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current,
div.dt-paging nav button.dt-paging-button.current,
div.dt-paging nav .dt-paging-button.current,
button.dt-paging-button.current,
.dt-paging-button.current,
.pagination .page-item.active .page-link {
    background: var(--brand-primary, #005EB8) !important;
    border-color: var(--brand-primary, #005EB8) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Hover on current page */
div.dt-container .dt-paging .dt-paging-button.current:hover,
div.dt-container .dt-paging nav button.dt-paging-button.current:hover,
.main-wrapper .dt-paging nav .dt-paging-button.current:hover,
.main-wrapper .listing-section .dt-paging nav .dt-paging-button.current:hover,
.listing-section .dt-paging nav .dt-paging-button.current:hover,
.listing-section .table-main .dt-layout-row .dt-layout-cell .dt-paging nav button.dt-paging-button.current:hover,
.dt-paging nav button.dt-paging-button.current:hover,
.dt-paging nav .dt-paging-button.current:hover,
button.dt-paging-button.current:hover,
.dt-paging-button.current:hover {
    background: var(--brand-primary-dark, var(--brand-primary, #004a93)) !important;
    border-color: var(--brand-primary-dark, var(--brand-primary, #004a93)) !important;
    color: #fff !important;
}

/* Hover on non-disabled, non-current page buttons: brand primary hover background with white text */
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current),
div.dt-container .dt-paging nav button.dt-paging-button:hover:not(.disabled):not(.current),
.listing-section .dt-paging nav .dt-paging-button:hover:not(.disabled):not(.current),
.listing-section .table-main .dt-layout-row .dt-layout-cell .dt-paging nav button.dt-paging-button:hover:not(.disabled):not(.current),
.listing-order-table-wrap .dt-paging nav button.dt-paging-button:hover:not(.disabled):not(.current),
.dt-paging nav button.dt-paging-button:hover:not(.disabled):not(.current),
.dt-paging nav .dt-paging-button:hover:not(.disabled):not(.current),
.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--brand-primary-hover, var(--brand-primary, #00509e)) !important;
    border-color: var(--brand-primary-hover, var(--brand-primary, #00509e)) !important;
    color: #fff !important;
}

/* Dashboard sales-tab active pill */
.dashboard-section .sales-line-chart .sales-chart .sales-tab nav .nav-tabs .nav-link.active {
    background: var(--brand-primary) !important;
}

/* Generic .btn-primary helper + "View All" link */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

.view-all-btn {
    background-color: var(--brand-primary) !important;
}

.view-all-btn:hover {
    background-color: var(--brand-primary-dark) !important;
}

/* ── Document folder panel active item ────────────────────────────────────── */
/* The active folder chip uses a hardcoded blue tint in the page CSS.
   Override here so it always tracks the tenant brand colour. */
.doc-folder-item.active {
    background: color-mix(in srgb, var(--brand-primary) 14%, transparent) !important;
    color: var(--brand-primary) !important;
}

@supports not (background: color-mix(in srgb, red, blue)) {
    .doc-folder-item.active {
        background: rgba(0, 94, 184, 0.12) !important;
        color: var(--brand-primary) !important;
    }
}

/* Save button (defined in Style.css with var(--accent)) */
.btn-save {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.btn-save:hover {
    background: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}

/* ── Page Loader (pageloader-wrap) ──────────────────────────────────────────
   Dynamically styled with var(--brand-primary) so it seamlessly follows the
   tenant brand color on page load, refresh, and AJAX requests. */
.pageloader-wrap {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(4px) !important;
}

.pageloader-wrap:before {
    content: '' !important;
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    border: 4px solid color-mix(in srgb, var(--brand-primary, var(--accent, #005EB8)) 20%, transparent) !important;
    border-top-color: var(--brand-primary, var(--accent, #005EB8)) !important;
    border-right-color: var(--brand-primary, var(--accent, #005EB8)) !important;
    animation: global-brand-spin 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite !important;
    box-shadow: 0 0 15px color-mix(in srgb, var(--brand-primary, var(--accent, #005EB8)) 25%, transparent) !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

@keyframes global-brand-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* FontAwesome spinners / loading icons inherit brand color */
.fa-spinner, .fa-spin, .fa-sync-alt.fa-spin {
    color: var(--brand-primary, var(--accent, #005EB8)) !important;
}

/* ── Hide DataTables inner processing overlay across all grids ─────────────── */
.dt-processing, div.dataTables_processing {
    display: none !important;
}

/* ── Draft count badges (Users & Claims) ── */
.draft-count-badge,
#draft-count-badge {
    background-color: var(--brand-primary, #005EB8) !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25em 0.55em;
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
}

/* Contrast when the parent secondary_button is hovered */
.custom_button.secondary_button:hover .draft-count-badge,
.custom_button.secondary_button:hover #draft-count-badge {
    background-color: #ffffff !important;
    color: var(--brand-primary, #1D1E31) !important;
}

/* ── Fixed Bottom Form Action Bar (All Add/Edit & Details pages - same as Claim/User) ── */
.sticky-action-bar,
.form-action-bar:not(.tab-action-bar) {
    position: fixed !important;
    bottom: 0 !important;
    left: var(--sidebar-width, 250px) !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 28px !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    border-top: 1px solid var(--border, #e5e7eb) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transition: left 0.25s ease !important;
}

.sidebar-hide .sticky-action-bar,
.sidebar-hide .form-action-bar:not(.tab-action-bar) {
    left: var(--sidebar-hide-width, 65px) !important;
}

@media (max-width: 991px) {
    .sticky-action-bar,
    .form-action-bar:not(.tab-action-bar) {
        left: 0 !important;
    }
}

/* Right button group container inside action bar */
.form-action-bar:not(.tab-action-bar) > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important;
}

/* Cancel / secondary button styling across all .form-action-bar */
.form-action-bar:not(.tab-action-bar) .btn.btn-light,
.form-action-bar:not(.tab-action-bar) .btn.btn-secondary,
.form-action-bar:not(.tab-action-bar) .custom_button.secondary_button {
    border-radius: 50rem !important;
    font-size: 14px !important;
    padding: 6px 20px !important;
    min-height: 38px !important;
    min-width: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #1D1E31 !important;
    background-color: transparent !important;
    border: 1px solid #1D1E31 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
}

.form-action-bar:not(.tab-action-bar) .btn.btn-light:hover,
.form-action-bar:not(.tab-action-bar) .btn.btn-secondary:hover,
.form-action-bar:not(.tab-action-bar) .custom_button.secondary_button:hover {
    color: #fff !important;
    background-color: var(--brand-primary, #005EB8) !important;
    border-color: var(--brand-primary, #005EB8) !important;
}

/* Primary Save / Update button styling across all .form-action-bar */
.form-action-bar:not(.tab-action-bar) .btn-save,
.form-action-bar:not(.tab-action-bar) .custom_button.primary_button {
    border-radius: 50rem !important;
    font-size: 14px !important;
    padding: 6px 24px !important;
    min-height: 38px !important;
    min-width: 100px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    background: var(--brand-primary, #005EB8) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease-in-out !important;
}

.form-action-bar:not(.tab-action-bar) .btn-save:hover,
.form-action-bar:not(.tab-action-bar) .custom_button.primary_button:hover {
    background: var(--brand-primary-dark, #004a93) !important;
    box-shadow: 0 4px 14px rgba(0, 94, 184, 0.35) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Ensure form and detail content is not obscured by the fixed bottom action bar */
#userForm,
#frmProfile,
#frmMyProfile,
.user-details-content-wrap,
.detail-container.commondetails-page-cls,
form:has(.form-action-bar),
form:has(.sticky-action-bar),
.page-content:has(.form-action-bar),
.page-content:has(.sticky-action-bar),
.form-section:has(.form-action-bar) {
    padding-bottom: 85px !important;
}

/* Fallback margin for form sections to guarantee space above sticky bar */
form .form-section:last-of-type {
    margin-bottom: 22px !important;
}

/* Prevent double bottom padding when both .page-content and inner form match :has() */
.page-content:has(form .form-action-bar),
.page-content:has(form .sticky-action-bar) {
    padding-bottom: 0 !important;
}

/* Static exception for inner tabs (e.g. Project Details tabs or Config tabs) */
.tab-pane .form-action-bar:not(.sticky-action-bar),
.tab-content .form-action-bar:not(.sticky-action-bar),
.form-action-bar.tab-action-bar {
    position: static !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--border, #e5e7eb) !important;
}