/*
 * Druto Onboarding Brand UI 2.5
 * --------------------------------------------------------------------------
 * Purpose: a compatibility layer for this project's mixed Tailwind, DaisyUI,
 * Bootstrap/AdminLTE and custom modern-dashboard styling without editing core.
 *
 * Brand language:
 *   Deep Navy  #021444   Primary Navy #071E4A   Navy Blue #07265C
 *   Gold       #FCBC14   Warm Canvas  #FFFDF7   Pale Gold #FFF9E8
 *
 * Semantic success / warning / danger colors are intentionally preserved.
 */

:root {
    --dh-navy-950: #021444;
    --dh-navy-900: #071E4A;
    --dh-navy-850: #062253;
    --dh-navy-800: #07265C;
    --dh-blue-700: #0A377A;

    --dh-gold-400: #FFD65A;
    --dh-gold-500: #FCBC14;
    --dh-gold-600: #ECAF0C;
    --dh-gold-700: #C88C00;

    --dh-canvas: #FFFDF7;
    --dh-canvas-2: #F9FAFC;
    --dh-card: #FFFFFF;
    --dh-card-warm: #FFFEF9;
    --dh-gold-soft: #FFF9E8;
    --dh-gold-soft-2: #FFF4CE;
    --dh-border: #ECE8DE;
    --dh-border-gold: #F0E4BD;

    --dh-text: #071E4A;
    --dh-text-body: #18243A;
    --dh-muted: #6B7891;
    --dh-muted-2: #8B96A8;

    --dh-success: #168A5B;
    --dh-danger: #C93C45;
    --dh-warning: #C78600;

    --dh-radius-sm: 10px;
    --dh-radius: 14px;
    --dh-radius-lg: 18px;
    --dh-radius-xl: 24px;

    --dh-shadow-xs: 0 2px 10px rgba(7, 30, 74, .045);
    --dh-shadow-sm: 0 8px 22px rgba(7, 30, 74, .065);
    --dh-shadow: 0 14px 36px rgba(7, 30, 74, .085);
    --dh-shadow-lg: 0 18px 42px rgba(2, 20, 68, .12);

    --dh-focus: 0 0 0 3px rgba(252, 188, 20, .18);
    --dh-transition: 130ms ease;
}

/* ========================================================================== 
   01. Application canvas / typography
   ========================================================================== */
html,
body {
    background: var(--dh-canvas) !important;
}

body {
    color: var(--dh-text-body);
}

body.tw-bg-gray-100,
main.tw-bg-gray-100,
.content-wrapper,
.right-side {
    background: var(--dh-canvas) !important;
}

#scrollable-container {
    background:
        radial-gradient(circle at 94% 3%, rgba(252, 188, 20, .045), transparent 22%),
        radial-gradient(circle at 7% 92%, rgba(7, 38, 92, .024), transparent 24%),
        linear-gradient(180deg, #FFFDF8 0%, #FAFBFD 54%, #FFFDF8 100%) !important;
}

.content-header {
    padding-top: 18px;
}

.content-header h1,
.content-header h1.tw-text-black,
.content-header h1[class*="tw-text-"],
.page-header,
h1, h2, h3, h4 {
    color: var(--dh-text);
}

.content-header h1 {
    letter-spacing: -.022em;
}

.text-muted,
.help-block,
small.text-muted {
    color: var(--dh-muted) !important;
}

a {
    color: var(--dh-blue-700);
}

a:hover,
a:focus {
    color: var(--dh-navy-900);
}

::selection {
    color: var(--dh-navy-950);
    background: rgba(252, 188, 20, .42);
}

/* ========================================================================== 
   02. Main header: replace business theme blue/cyan inline variables
   ========================================================================== */
.mhead {
    --t1: var(--dh-navy-950) !important;
    --t2: var(--dh-navy-800) !important;
    border-bottom: 1px solid rgba(252, 188, 20, .28) !important;
    background:
        radial-gradient(circle at 84% 10%, rgba(252, 188, 20, .24), transparent 25%),
        radial-gradient(circle at 43% -80%, rgba(255, 255, 255, .12), transparent 48%),
        linear-gradient(112deg, var(--dh-navy-950) 0%, var(--dh-navy-900) 57%, var(--dh-navy-800) 100%) !important;
    box-shadow: 0 10px 28px rgba(2, 20, 68, .18) !important;
}

.mhead::after {
    background:
        radial-gradient(circle at 16% 14%, rgba(255, 255, 255, .13), transparent 48%),
        radial-gradient(circle at 82% 18%, rgba(252, 188, 20, .12), transparent 42%),
        radial-gradient(circle at 58% 92%, rgba(255, 255, 255, .06), transparent 48%) !important;
    opacity: .9;
}

.mhead-wrap {
    padding-top: 9px !important;
    padding-bottom: 10px !important;
}

.mbtn {
    border-color: rgba(255, 255, 255, .17) !important;
    background: rgba(255, 255, 255, .105) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(2, 20, 68, .15) !important;
    transition: transform var(--dh-transition), background var(--dh-transition), border-color var(--dh-transition), box-shadow var(--dh-transition) !important;
}

.mbtn:hover,
.mbtn:focus,
details[open] > .mbtn {
    color: #fff !important;
    border-color: rgba(252, 188, 20, .44) !important;
    background: rgba(252, 188, 20, .15) !important;
    box-shadow: 0 8px 22px rgba(2, 20, 68, .20) !important;
}

.mbtn-solid {
    color: var(--dh-navy-950) !important;
    border-color: rgba(255, 255, 255, .82) !important;
    background: linear-gradient(135deg, #FFFFFF, #FFF8E5) !important;
}

.mbtn-solid:hover,
.mbtn-solid:focus {
    color: var(--dh-navy-950) !important;
    border-color: var(--dh-gold-400) !important;
    background: linear-gradient(135deg, #FFFFFF, #FFF0BF) !important;
}

.mmenu,
.mhead .dropdown-menu,
.mhead .popover {
    border: 1px solid var(--dh-border-gold) !important;
    border-radius: 15px !important;
    background: linear-gradient(180deg, #FFFFFF, #FFFEF9) !important;
    box-shadow: var(--dh-shadow-lg) !important;
}

.mmenu a,
.mhead .dropdown-menu > li > a {
    color: var(--dh-text-body) !important;
}

.mmenu a:hover,
.mmenu a:focus,
.mhead .dropdown-menu > li > a:hover,
.mhead .dropdown-menu > li > a:focus {
    color: var(--dh-navy-950) !important;
    background: var(--dh-gold-soft) !important;
}

.mmenu a svg,
.mhead .dropdown-menu i {
    color: var(--dh-navy-800);
}

/* ========================================================================== 
   02.5 App viewport contract — two native scroll regions, no wheel JS
   ========================================================================== */
.thetop {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.thetop > main {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden;
}

.thetop > .side-bar,
.thetop > aside.side-bar {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#scrollable-container {
    min-height: 0 !important;
}

/* ========================================================================== 
   03. Sidebar — native presenter, no jQuery dropdown animation contract
   ========================================================================== */
.side-bar,
.main-sidebar {
    background: linear-gradient(180deg, var(--dh-navy-950) 0%, var(--dh-navy-900) 72%, var(--dh-navy-800) 100%) !important;
    border-right: 0 !important;
    box-shadow: 5px 0 18px rgba(2, 20, 68, .08);
}

/* Business-name strip from the existing sidebar Blade. */
.side-bar > a:first-of-type,
.side-bar > a[class*="tw-bg-"][class*="-800"] {
    background: linear-gradient(118deg, var(--dh-navy-900), var(--dh-navy-800)) !important;
    border-right-color: transparent !important;
    border-bottom: 1px solid rgba(252, 188, 20, .28) !important;
    box-shadow: none !important;
}

.side-bar-heading {
    color: #FFFFFF !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
}

.dh-side-nav {
    flex: 1 1 0%;
    min-height: 0;
    height: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding: 12px;
    border-right: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(252, 188, 20, .22) transparent;
}

.dh-side-nav::-webkit-scrollbar { width: 5px; }
.dh-side-nav::-webkit-scrollbar-track { background: transparent; }
.dh-side-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(252, 188, 20, .20);
}

.dh-nav-item,
.dh-subnav-item {
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}

.dh-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    width: 100%;
    margin: 2px 0;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, .82) !important;
    background: transparent !important;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    text-align: left;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease !important;
}

.dh-nav-item:hover,
.dh-nav-item:focus-visible {
    color: #FFFFFF !important;
    background: rgba(252, 188, 20, .10) !important;
    border-color: rgba(252, 188, 20, .08) !important;
    outline: none;
}

.dh-nav-item.is-active,
.dh-nav-group.is-active > .dh-nav-summary {
    color: var(--dh-navy-950) !important;
    background: linear-gradient(135deg, #FFE17A, var(--dh-gold-500)) !important;
    border-color: rgba(255, 224, 112, .75) !important;
    box-shadow: none !important;
}

.dh-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    color: currentColor;
}

.dh-nav-icon > svg,
.dh-nav-icon > i {
    width: 20px !important;
    height: 20px !important;
    color: currentColor !important;
    flex: 0 0 auto;
}

.dh-nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dh-nav-group,
.dh-subgroup {
    margin: 0;
    padding: 0;
}

.dh-nav-summary,
.dh-subnav-summary {
    list-style: none;
}

.dh-nav-summary::-webkit-details-marker,
.dh-subnav-summary::-webkit-details-marker {
    display: none;
}

.dh-nav-chevron {
    width: 15px;
    height: 15px;
    margin-left: auto;
    flex: 0 0 auto;
    opacity: .62;
    transition: transform 120ms ease;
}

.dh-nav-group[open] > .dh-nav-summary .dh-nav-chevron,
.dh-subgroup[open] > .dh-subnav-summary .dh-nav-chevron {
    transform: rotate(90deg);
}

.dh-subnav {
    display: grid;
    gap: 2px;
    margin: 5px 0 8px 20px;
    padding: 3px 0 3px 11px;
    border-left: 1px solid rgba(252, 188, 20, .28);
}

.dh-subnav-nested {
    margin-left: 14px;
}

.dh-subnav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, .68) !important;
    background: transparent !important;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    transition: background-color 110ms ease, color 110ms ease !important;
}

.dh-subnav-item:hover,
.dh-subnav-item:focus-visible {
    color: #FFFFFF !important;
    background: rgba(252, 188, 20, .075) !important;
    outline: none;
}

.dh-subnav-item.is-active,
.dh-subgroup.is-active > .dh-subnav-summary {
    color: var(--dh-gold-400) !important;
    background: rgba(252, 188, 20, .11) !important;
    font-weight: 800;
}

.dh-nav-divider {
    height: 1px;
    margin: 9px 8px;
    background: rgba(255, 255, 255, .08);
}

.dh-nav-header {
    margin: 12px 10px 5px;
    color: rgba(255, 255, 255, .42);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ========================================================================== 
   04. Dashboard hero and dashboard surfaces
   ========================================================================== */
.mdash {
    --t1: var(--dh-navy-900) !important;
    --t2: var(--dh-gold-500) !important;
    --md-bg: transparent !important;
    --md-card: #FFFFFF !important;
    --md-text: var(--dh-text) !important;
    --md-muted: var(--dh-muted) !important;
    --md-border: rgba(7, 30, 74, .075) !important;
    --md-shadow: 0 16px 38px rgba(7, 30, 74, .095) !important;
    --md-shadow-sm: 0 8px 22px rgba(7, 30, 74, .065) !important;
}

.mdash-hero {
    border: 1px solid rgba(252, 188, 20, .18) !important;
    background:
        radial-gradient(circle at 88% 25%, rgba(255, 231, 146, .26), transparent 28%),
        linear-gradient(112deg, var(--dh-navy-900) 0%, #18345C 43%, #A67B20 79%, var(--dh-gold-500) 100%) !important;
    box-shadow: 0 18px 42px rgba(7, 30, 74, .13) !important;
}

.kpi,
.mdash .panel {
    border-color: rgba(7, 30, 74, .075) !important;
    background: linear-gradient(155deg, #FFFFFF 0%, #FFFFFF 73%, #FFFCF2 100%) !important;
}

.kpi:hover,
.mdash .panel:hover {
    border-color: rgba(252, 188, 20, .22) !important;
}

.mdash .panel-header {
    border-bottom-color: var(--dh-border) !important;
    background: linear-gradient(90deg, #FFFFFF, #FFFEF7) !important;
}

/* ========================================================================== 
   05. Reusable cards / filters / widgets / panels
   ========================================================================== */
.box,
.card,
.panel,
.well,
[class*="tw-bg-white"][class*="tw-ring-gray-200"] {
    border-color: var(--dh-border) !important;
}

.box,
.card,
.panel,
[class*="tw-bg-white"][class*="tw-ring-gray-200"] {
    background: linear-gradient(155deg, var(--dh-card) 0%, var(--dh-card) 78%, var(--dh-card-warm) 100%) !important;
    box-shadow: var(--dh-shadow-xs) !important;
}

.content [class*="tw-bg-white"][class*="tw-ring-gray-200"]:hover {
    border-color: var(--dh-border-gold) !important;
    box-shadow: var(--dh-shadow-sm) !important;
}

.box.box-primary,
.box-primary {
    border-top-color: var(--dh-gold-500) !important;
}

.box-header,
.box-header.with-border,
.panel-heading {
    border-bottom-color: var(--dh-border) !important;
}

.box-header .box-title,
.panel-title,
.card-title {
    color: var(--dh-text) !important;
    font-weight: 800;
}

/* Filter component */
.content [class*="tw-bg-white"][class*="tw-ring-gray-200"] > .box-header {
    border-bottom-color: rgba(240, 228, 189, .72) !important;
}

.content [class*="tw-bg-white"][class*="tw-ring-gray-200"] > .box-header .box-title > a {
    color: var(--dh-navy-900) !important;
    text-decoration: none;
}

.content [class*="tw-bg-white"][class*="tw-ring-gray-200"] > .box-header .fa-filter,
.content [class*="tw-bg-white"][class*="tw-ring-gray-200"] > .box-header svg {
    color: var(--dh-gold-600) !important;
}

/* ========================================================================== 
   06. Forms, Select2, input groups, date/time controls
   ========================================================================== */
.form-group label,
.control-label {
    color: #17243A;
    font-weight: 700;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: #D9DCE2 !important;
    background-color: #FFFFFF !important;
    color: var(--dh-text-body) !important;
    box-shadow: none !important;
    transition: border-color var(--dh-transition), box-shadow var(--dh-transition), background var(--dh-transition) !important;
}

.form-control:hover,
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover,
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: #C9C6BA !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--dh-gold-500) !important;
    box-shadow: var(--dh-focus) !important;
    outline: none !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #F7F7F5 !important;
    color: #667085 !important;
}

.input-group-addon,
.input-group-btn > .btn-default {
    color: var(--dh-navy-900) !important;
    border-color: #DDD9CE !important;
    background: linear-gradient(180deg, #FFFDF8, #FFF7E1) !important;
}

.input-group-addon i,
.input-group-addon svg {
    color: var(--dh-navy-800) !important;
}

.select2-dropdown {
    border-color: var(--dh-border-gold) !important;
    border-radius: 11px !important;
    background: #FFFFFF !important;
    box-shadow: 0 16px 36px rgba(7, 30, 74, .12) !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--dh-navy-950) !important;
    background: var(--dh-gold-soft-2) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    color: var(--dh-navy-900) !important;
    background: #F5F6F8 !important;
}

.daterangepicker,
.datepicker,
.bootstrap-timepicker-widget,
.ui-datepicker {
    border-color: var(--dh-border-gold) !important;
    border-radius: 13px !important;
    box-shadow: var(--dh-shadow) !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover,
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    color: #FFFFFF !important;
    background: var(--dh-navy-900) !important;
    border-color: var(--dh-navy-900) !important;
}

.daterangepicker td.in-range {
    background: var(--dh-gold-soft) !important;
}

/* ========================================================================== 
   07. Buttons: bridge Bootstrap + DaisyUI + hard-coded Tailwind gradients
   ========================================================================== */
.btn-primary,
.tw-dw-btn-primary:not(.tw-dw-btn-outline),
button[class*="tw-from-indigo-"][class*="tw-to-blue-"],
a[class*="tw-from-indigo-"][class*="tw-to-blue-"],
button[class*="tw-from-blue-"][class*="tw-to-indigo-"],
a[class*="tw-from-blue-"][class*="tw-to-indigo-"] {
    color: #FFFFFF !important;
    border-color: var(--dh-navy-900) !important;
    background-color: var(--dh-navy-900) !important;
    background-image: linear-gradient(135deg, var(--dh-navy-900) 0%, var(--dh-blue-700) 100%) !important;
    box-shadow: 0 7px 16px rgba(7, 30, 74, .13) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.tw-dw-btn-primary:not(.tw-dw-btn-outline):hover,
.tw-dw-btn-primary:not(.tw-dw-btn-outline):focus,
button[class*="tw-from-indigo-"][class*="tw-to-blue-"]:hover,
a[class*="tw-from-indigo-"][class*="tw-to-blue-"]:hover,
button[class*="tw-from-blue-"][class*="tw-to-indigo-"]:hover,
a[class*="tw-from-blue-"][class*="tw-to-indigo-"]:hover {
    color: #FFFFFF !important;
    border-color: var(--dh-navy-950) !important;
    background-color: var(--dh-navy-950) !important;
    background-image: linear-gradient(135deg, var(--dh-navy-950), var(--dh-navy-800)) !important;
    box-shadow: 0 9px 20px rgba(2, 20, 68, .18) !important;
}

.tw-dw-btn-outline.tw-dw-btn-primary,
.btn-outline-primary {
    color: var(--dh-navy-900) !important;
    border-color: rgba(7, 30, 74, .34) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tw-dw-btn-outline.tw-dw-btn-primary:hover,
.btn-outline-primary:hover {
    color: var(--dh-navy-950) !important;
    border-color: var(--dh-gold-500) !important;
    background: var(--dh-gold-soft) !important;
}

.btn-default,
.tw-dw-btn-ghost {
    border-color: #DDD9CE !important;
}

.btn-default:hover,
.btn-default:focus {
    color: var(--dh-navy-900) !important;
    border-color: var(--dh-border-gold) !important;
    background: var(--dh-gold-soft) !important;
}

/* Legacy primary utility colors, only brand-oriented classes */
.label-primary,
.bg-blue,
.bg-light-blue {
    background-color: var(--dh-navy-900) !important;
}

.text-primary,
.tw-text-primary-700 {
    color: var(--dh-blue-700) !important;
}

/* ========================================================================== 
   08. Tabs, Settings side-tabs, pills and pagination
   ========================================================================== */
.nav-tabs {
    border-bottom-color: var(--dh-border) !important;
}

.nav-tabs > li > a {
    color: var(--dh-muted) !important;
    border-radius: 10px 10px 0 0 !important;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: var(--dh-navy-900) !important;
    border-color: transparent !important;
    background: var(--dh-gold-soft) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--dh-navy-900) !important;
    border-color: var(--dh-border) var(--dh-border) #fff !important;
    background: #FFFFFF !important;
    box-shadow: inset 0 3px 0 var(--dh-gold-500) !important;
}

/* Business Settings' independent pos-tab-menu */
div.pos-tab-menu div.list-group {
    overflow: hidden;
    border: 1px solid var(--dh-border) !important;
    border-radius: 14px !important;
    background: #FFFFFF;
    box-shadow: var(--dh-shadow-xs);
}

div.pos-tab-menu div.list-group > a {
    position: relative;
    color: #4C5668 !important;
    border-color: var(--dh-border) !important;
    background: linear-gradient(90deg, #FFFFFF, #FFFEFA) !important;
    font-weight: 700;
    transition: color var(--dh-transition), background var(--dh-transition), padding var(--dh-transition) !important;
}

div.pos-tab-menu div.list-group > a:hover,
div.pos-tab-menu div.list-group > a:focus {
    color: var(--dh-navy-900) !important;
    background: linear-gradient(90deg, var(--dh-gold-soft), #FFFFFF) !important;
    padding-left: 20px;
}

div.pos-tab-menu div.list-group > a .glyphicon,
div.pos-tab-menu div.list-group > a .fa {
    color: #65718A !important;
}

div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active:hover,
div.pos-tab-menu div.list-group > a.active:focus {
    color: #FFFFFF !important;
    border-color: var(--dh-navy-900) !important;
    background: linear-gradient(135deg, var(--dh-navy-950), var(--dh-navy-800)) !important;
    box-shadow: inset 4px 0 0 var(--dh-gold-500) !important;
}

div.pos-tab-menu div.list-group > a.active::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--dh-gold-500);
}

div.pos-tab-menu div.list-group > a.active .glyphicon,
div.pos-tab-menu div.list-group > a.active .fa {
    color: var(--dh-gold-400) !important;
    background: transparent !important;
}

div.pos-tab > div.pos-tab-content {
    color: var(--dh-text-body);
}

.pagination > li > a,
.pagination > li > span {
    color: var(--dh-navy-900) !important;
    border-color: #E0DED7 !important;
    background: #FFFFFF !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    color: var(--dh-navy-950) !important;
    border-color: var(--dh-border-gold) !important;
    background: var(--dh-gold-soft) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    color: #FFFFFF !important;
    border-color: var(--dh-navy-900) !important;
    background: var(--dh-navy-900) !important;
}

/* ========================================================================== 
   09. Tables / DataTables / export controls
   ========================================================================== */
.table,
table.dataTable {
    color: var(--dh-text-body);
}

.table > thead > tr > th,
table.dataTable > thead > tr > th {
    color: var(--dh-navy-950) !important;
    border-color: #E7E1D1 !important;
    background: linear-gradient(180deg, #FFFBEF, #FFF5D9) !important;
    font-weight: 800 !important;
}

.table > tbody > tr > td,
.table > tfoot > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > th,
table.dataTable tbody td {
    border-color: #ECE9E1 !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: #FFFEFA !important;
}

.table-hover > tbody > tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: var(--dh-gold-soft) !important;
}

.table > tfoot > tr,
table.dataTable tfoot tr {
    color: var(--dh-navy-950);
    background: #FFF8E8 !important;
}

.table-responsive {
    scrollbar-color: #A6A39B #ECEAE4;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper input,
.dataTables_wrapper select {
    border-color: #D8D8D3 !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--dh-gold-500) !important;
    box-shadow: var(--dh-focus) !important;
    outline: 0 !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons button,
.dt-button {
    color: var(--dh-navy-900) !important;
    border: 1px solid rgba(7, 30, 74, .28) !important;
    border-radius: 9px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons button:hover,
.dt-button:hover {
    color: var(--dh-navy-950) !important;
    border-color: var(--dh-gold-500) !important;
    background: var(--dh-gold-soft) !important;
}

/* DataTables responsive + icon keeps meaning but uses brand for expand */
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before,
table.dataTable.dtr-column > tbody > tr > td.control::before,
table.dataTable.dtr-column > tbody > tr > th.control::before {
    background-color: var(--dh-navy-900) !important;
}

/* ========================================================================== 
   10. Modals: registration-quality warm surface
   ========================================================================== */
.modal-backdrop.in,
.modal-backdrop.show {
    opacity: .62 !important;
    background-color: var(--dh-navy-950) !important;
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--dh-border-gold) !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 28px 80px rgba(2, 20, 68, .26) !important;
}

.modal-header {
    min-height: 58px;
    border-bottom: 1px solid var(--dh-border-gold) !important;
    background:
        radial-gradient(circle at 94% -30%, rgba(252, 188, 20, .19), transparent 38%),
        linear-gradient(135deg, #FFFFFF 0%, #FFFDF7 55%, #FFF7DF 100%) !important;
}

.modal-header .modal-title,
.modal-header h4,
.modal-header h3 {
    color: var(--dh-navy-900) !important;
    font-weight: 800;
    letter-spacing: -.012em;
}

.modal-header .close {
    color: var(--dh-navy-900) !important;
    text-shadow: none !important;
    opacity: .58;
}

.modal-header .close:hover,
.modal-header .close:focus {
    color: var(--dh-gold-700) !important;
    opacity: 1;
}

.modal-body {
    background:
        radial-gradient(circle at 100% 0%, rgba(252, 188, 20, .035), transparent 27%),
        #FFFFFF !important;
}

.modal-footer {
    border-top: 1px solid var(--dh-border) !important;
    background: linear-gradient(180deg, #FFFEFA, #FFFDF7) !important;
}

.modal .input-group-addon {
    background: linear-gradient(180deg, #FFFDF8, #FFF5D6) !important;
}

/* ========================================================================== 
   11. Dropdowns, popovers, tooltips, notifications
   ========================================================================== */
.dropdown-menu,
.popover {
    border-color: var(--dh-border-gold) !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    box-shadow: var(--dh-shadow) !important;
}

.dropdown-menu > li > a {
    color: var(--dh-text-body) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.notification-li:hover {
    color: var(--dh-navy-900) !important;
    background: var(--dh-gold-soft) !important;
}

.notification-li.unread {
    background: #FFF9E9 !important;
}

.popover-title {
    color: var(--dh-navy-900) !important;
    border-bottom-color: var(--dh-border) !important;
    background: var(--dh-gold-soft) !important;
}

.tooltip-inner {
    background-color: var(--dh-navy-950) !important;
}

/* ========================================================================== 
   12. Alerts / progress / badges - do NOT flatten semantic colors
   ========================================================================== */
.alert-info {
    color: #0B4872 !important;
    border-color: #C9E3F4 !important;
    background-color: #EFF8FF !important;
}

.progress {
    background-color: #ECEAE4 !important;
    box-shadow: none !important;
}

.progress-bar-primary,
.progress-bar-info {
    background-color: var(--dh-navy-800) !important;
}

/* ========================================================================== 
   13. Auth/login surfaces (registration has its own dedicated section below)
   ========================================================================== */
.login-box-body,
.register-box-body,
.auth-box,
.auth-card {
    border: 1px solid var(--dh-border-gold) !important;
    border-radius: 18px !important;
    background: linear-gradient(155deg, #FFFFFF, #FFFEF8) !important;
    box-shadow: var(--dh-shadow) !important;
}

/* ========================================================================== 
   14. Responsive refinement
   ========================================================================== */
@media (max-width: 1023px) {
    .mhead {
        box-shadow: 0 8px 22px rgba(2, 20, 68, .16) !important;
    }

    .content-header {
        padding-top: 14px;
    }

    .modal-content {
        border-radius: 15px !important;
    }
}

@media (max-width: 767px) {
    #scrollable-container {
        background: linear-gradient(180deg, #FFFDF8, #FAFBFD) !important;
    }

    .content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .mhead-right {
        gap: 7px !important;
    }

    .mbtn {
        border-radius: 11px !important;
    }
}

/* ========================================================================== 
   15. Focus accessibility
   ========================================================================== */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 3px solid rgba(252, 188, 20, .55) !important;
    outline-offset: 2px;
}

/* ========================================================================== 
   16. Print protection - accounting/receipt print remains clean
   ========================================================================== */
@media print {
    html,
    body,
    main,
    #scrollable-container,
    .content-wrapper,
    .right-side,
    .invoice,
    .print_section {
        color: #000 !important;
        background: #FFFFFF !important;
        box-shadow: none !important;
    }

    .table > thead > tr > th,
    table.dataTable > thead > tr > th,
    .table > tfoot > tr,
    table.dataTable tfoot tr {
        color: #000 !important;
        background: #FFFFFF !important;
        border-color: #BFBFBF !important;
    }

    .box,
    .card,
    .panel,
    .modal-content,
    [class*="tw-bg-white"][class*="tw-ring-gray-200"] {
        box-shadow: none !important;
    }
}

/* ========================================================================== 
   19. Sidebar icon repair + light render containment
   ========================================================================== */
.dh-side-nav {
    overscroll-behavior-y: auto;
    touch-action: pan-y;
}

.dh-nav-icon {
    flex: 0 0 20px;
    overflow: visible;
    line-height: 0;
}

.dh-nav-icon > svg,
.dh-nav-icon > i,
.dh-nav-icon .dh-fallback-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    color: currentColor !important;
    stroke: currentColor;
    fill: none;
}

.dh-nav-icon > i {
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: center;
}

/* Header notification button uses the runtime business theme color in core. */
.mhead .notifications-menu > .dropdown-toggle,
.mhead #show_unread_notifications {
    color: #FFFFFF !important;
    background: rgba(252, 188, 20, .14) !important;
    border: 1px solid rgba(252, 188, 20, .34) !important;
    box-shadow: none !important;
}

.mhead .notifications-menu > .dropdown-toggle:hover,
.mhead .notifications-menu.open > .dropdown-toggle,
.mhead #show_unread_notifications:hover {
    color: var(--dh-navy-950) !important;
    background: linear-gradient(135deg, #FFE17A, var(--dh-gold-500)) !important;
    border-color: rgba(255, 225, 122, .72) !important;
}


/* ========================================================================== 
   20. Branding settings page (route-only, no sidebar menu entry)
   ========================================================================== */
.side-bar.small-view-side-active {
    display: flex !important;
    flex-direction: column;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
}

.side-bar.small-view-side-active .dh-side-nav {
    flex: 1 1 0%;
    height: 0;
    min-height: 0;
    overflow-y: auto !important;
}

/* ========================================================================== 
   21. Mobile application shell — reuse core sidebar + core collapse control
   ========================================================================== */
@media (max-width: 1023px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .thetop {
        width: 100%;
        max-width: 100vw;
        position: relative;
    }

    .thetop > main {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    /* The application's existing sidebar becomes off-canvas on mobile.
       No cloned sidebar and no module-generated navigation button are used. */
    .thetop > .side-bar,
    .thetop > aside.side-bar {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        z-index: 1001 !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: min(86vw, 300px) !important;
        max-width: 300px !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0 !important;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(-102%, 0, 0);
        transition: transform 150ms cubic-bezier(.2,.8,.2,1), visibility 150ms linear;
        box-shadow: 16px 0 36px rgba(2, 20, 68, .20) !important;
        will-change: transform;
    }

    html[dir="rtl"] .thetop > .side-bar,
    html[dir="rtl"] .thetop > aside.side-bar {
        left: auto !important;
        right: 0 !important;
        transform: translate3d(102%, 0, 0);
        box-shadow: -16px 0 36px rgba(2, 20, 68, .20) !important;
    }

    .thetop > .side-bar.small-view-side-active,
    .thetop > aside.side-bar.small-view-side-active,
    html[dir="rtl"] .thetop > .side-bar.small-view-side-active,
    html[dir="rtl"] .thetop > aside.side-bar.small-view-side-active {
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) !important;
    }

    .side-bar > a:first-of-type,
    .side-bar > a[class*="tw-bg-"][class*="-800"] {
        min-height: 60px;
        padding-inline: 18px !important;
    }

    .dh-side-nav {
        flex: 1 1 0% !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 10px 10px 18px;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Reuse the header's original .side-bar-collapse button on mobile.
       Tailwind hides it below lg; this single CSS rule only exposes the same
       existing button and existing SVG — nothing new is inserted. */
    .mhead .side-bar-collapse {
        display: inline-flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 9px !important;
        border-radius: 12px !important;
    }

    .overlay.dh-mobile-overlay-visible {
        display: block !important;
        z-index: 1000 !important;
        background: rgba(2, 13, 40, .52) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Mobile header becomes one compact swipeable action rail. This also
       overrides the subscription alert's nowrap sizing rules safely. */
    .mhead {
        width: 100%;
        max-width: 100vw;
        box-shadow: 0 7px 18px rgba(2, 20, 68, .15) !important;
    }

    .mhead::after {
        display: none !important;
    }

    .mhead .mhead-wrap {
        width: 100%;
        max-width: 100vw;
        padding: 8px 9px !important;
        overflow: hidden;
    }

    .mhead .mhead-row {
        width: 100%;
        max-width: 100%;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
    }

    .mhead .mhead-left {
        flex: 0 0 auto !important;
        min-width: auto !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    .mhead .mhead-right {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding: 1px 1px 2px;
    }

    .mhead .mhead-right::-webkit-scrollbar {
        display: none;
    }

    .mhead .mhead-right > * {
        flex: 0 0 auto !important;
    }

    .mhead .mbtn {
        min-height: 40px;
        border-radius: 12px !important;
        padding: 8px 9px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Dashboard spacing and tap targets tuned for phones without adding new
       JavaScript or expensive visual filters. */
    .mdash {
        padding: 12px 10px 24px !important;
    }

    .mdash .mdash-container {
        width: 100%;
        max-width: 100%;
    }

    .mdash-hero {
        padding: 18px !important;
        border-radius: 19px !important;
        box-shadow: 0 10px 26px rgba(7,30,74,.12) !important;
    }

    .mdash-hero::after {
        opacity: .48;
    }

    .mdash-title {
        font-size: clamp(22px, 7vw, 29px) !important;
        line-height: 1.15;
    }

    .mdash-sub {
        line-height: 1.55;
    }

    .mdash-actions {
        width: 100%;
    }

    .mdash-actions .mdash-btn,
    .mdash-actions .mdash-pill {
        max-width: 100%;
    }

    .mdash-kpis,
    .md-panels {
        gap: 10px !important;
        margin-top: 11px !important;
    }

    .kpi {
        padding: 13px !important;
        border-radius: 15px !important;
        box-shadow: 0 5px 16px rgba(7,30,74,.06) !important;
    }

    .kpi:hover {
        transform: none !important;
        box-shadow: 0 5px 16px rgba(7,30,74,.06) !important;
    }

    .panel,
    .box,
    .card {
        max-width: 100%;
    }
}

@media (max-width: 479px) {
    .thetop > .side-bar,
    .thetop > aside.side-bar {
        width: min(90vw, 288px) !important;
    }

    .mhead .mhead-wrap {
        padding: 7px 7px !important;
    }

    .mhead .mbtn {
        min-height: 38px;
        height: 38px !important;
        border-radius: 11px !important;
    }

    .mdash {
        padding: 10px 8px 22px !important;
    }

    .mdash-hero {
        padding: 16px !important;
    }

    .kpi-left {
        gap: 10px !important;
    }

    .kpi-ico {
        width: 42px !important;
        height: 42px !important;
        flex-basis: 42px !important;
    }
}

/* ========================================================================== 
   22. Phone header cleanup — keep core controls, hide only low-priority tools
   ========================================================================== */
@media (max-width: 767px) {
    /* Quick (+) dropdown from the core header: hide on phones only. */
    .mhead .mhead-right > details.tw-relative.tw-inline-block.tw-text-left:first-of-type {
        display: none !important;
    }

    /* Core calculator is intended to be md+; core .mbtn display can otherwise
       win the cascade, so enforce the responsive intent on phones. */
    .mhead #btnCalculator {
        display: none !important;
    }
}

/* ========================================================================== 
   23. Mobile header dropdown interaction fix
   --------------------------------------------------------------------------
   The notification dropdown (Bootstrap) and profile menu (<details>) already
   exist in the core header. v2.6.x made the action rail horizontally scrollable
   and clipped vertical overflow, which meant the controls still received taps
   but their menus were painted outside a clipped ancestor and looked "dead".
   With the low-priority Quick + Calculator controls hidden on phones, the
   remaining controls fit without a scroll container, so keep the native core
   dropdowns and simply restore visible overflow.
   ========================================================================== */
@media (max-width: 767px) {
    .mhead,
    .mhead .mhead-wrap,
    .mhead .mhead-row,
    .mhead .mhead-right {
        overflow: visible !important;
    }

    .mhead .mhead-right {
        position: relative !important;
        max-width: none !important;
        scrollbar-width: auto;
        overscroll-behavior-x: auto;
    }

    /* Keep both existing interactive menus above dashboard content. */
    .mhead .notifications-menu,
    .mhead .mhead-right > details:last-of-type {
        position: relative !important;
        z-index: 1120 !important;
    }

    .mhead .notifications-menu .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        width: min(20rem, calc(100vw - 18px)) !important;
        max-width: calc(100vw - 18px) !important;
        height: auto !important;
        max-height: calc(100dvh - 74px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 1130 !important;
    }

    .mhead .mhead-right > details:last-of-type .mmenu {
        right: 0 !important;
        left: auto !important;
        width: min(220px, calc(100vw - 18px)) !important;
        max-width: calc(100vw - 18px) !important;
        z-index: 1130 !important;
    }
}