/* ==========================================================================
   DIWALI FESTIVE THEME — HRMS
   --------------------------------------------------------------------------
   Presentation only. Re-skins the existing Skote / Bootstrap 5 markup;
   it adds no DOM, no JavaScript and changes no behaviour.

   Loaded by:   resources/views/partials/diwali-theme.blade.php
   Graphics:    public/assets/images/diwali/*.svg
   Scope:       <body class="diwali-theme"> (inert when this file is not loaded)

   TO DISABLE:  set $diwaliThemeEnabled = false in the partial above,
                or simply delete this file (the partial checks it exists).

   Specificity strategy
   - Layout chrome (header / nav / page) uses `body.diwali-theme …` so it can
     beat Skote's `body[data-topbar=dark] …` attribute selectors.
   - Component skins use `:where(.diwali-theme) …` which adds zero
     specificity: they win ties against the base framework (this file loads
     last) but still yield to existing state rules such as .is-invalid,
     .bg-* utilities, .border-0, etc.

   Sections
    1. Design tokens + Bootstrap/Skote variable bridge
    2. Page canvas
    3. Header (topbar) + diya trio
    4. Horizontal navigation
    5. Page titles & headings
    6. Cards & panels
    7. Dashboard specifics (welcome, attendance widget, stats)
    8. Buttons
    9. Forms, select2, date pickers
   10. Tables & DataTables & pagination
   11. Tabs, dropdowns, modals, alerts, misc
   12. Footer
   13. Edge decorations (lanterns, corner diyas)
   14. Auth & error pages
   15. Animations
   16. Responsive
   17. Happy Diwali greeting, fireworks, string lights
   18. Reduced motion
   ========================================================================== */


/* 1. DESIGN TOKENS ======================================================== */

body.diwali-theme {
    /* Festive palette */
    --dw-maroon-900: #4a0b12;
    --dw-maroon-800: #6b0f1a;
    --dw-maroon-700: #8b1a1a;
    --dw-red-600: #b3261e;
    --dw-saffron-700: #b83a0b;
    --dw-saffron-600: #d9480f;
    --dw-saffron-500: #ea6a12;
    --dw-amber-500: #f59e0b;
    --dw-gold-500: #d4a24c;
    --dw-gold-400: #e9c46a;
    --dw-gold-300: #f6d98b;
    --dw-gold-200: #fbe9bf;
    --dw-ivory-50: #fffdf8;
    --dw-ivory-100: #fff8ec;
    --dw-cream-200: #fdf0d9;
    --dw-cream-300: #fbe6c4;
    --dw-ink: #47362f;
    --dw-ink-heading: #4a1f17;
    --dw-ink-muted: #85675b;
    --dw-border: #f0dcb4;
    --dw-border-strong: #dcc08f;

    --dw-radius: 14px;
    --dw-radius-sm: 10px;
    --dw-shadow: 0 6px 18px rgba(139, 26, 26, .07), 0 1px 3px rgba(139, 26, 26, .06);
    --dw-shadow-hover: 0 12px 28px rgba(139, 26, 26, .12), 0 0 0 1px rgba(233, 196, 106, .55);
    --dw-focus-ring: 0 0 0 .2rem rgba(234, 106, 18, .28);
    --dw-ease: cubic-bezier(.22, .61, .36, 1);

    --dw-gold-line: linear-gradient(90deg, transparent, var(--dw-gold-400) 20%, var(--dw-amber-500) 50%, var(--dw-gold-400) 80%, transparent);
    --dw-bead-line: radial-gradient(circle, var(--dw-saffron-500) 1.3px, transparent 1.9px);
    --dw-sparkles:
        radial-gradient(rgba(255, 224, 150, .55) 1px, transparent 1.6px) 0 0 / 46px 46px,
        radial-gradient(rgba(255, 244, 214, .35) 1px, transparent 1.6px) 23px 17px / 61px 37px;

    /* Graphics (swapped for static versions under reduced motion) */
    --dw-diya: url("../images/diwali/diya.svg");
    --dw-diya-alt: url("../images/diwali/diya-alt.svg");
    --dw-lantern: url("../images/diwali/lantern.svg");
    --dw-mandala: url("../images/diwali/mandala.svg");
    --dw-mandala-faint: url("../images/diwali/mandala-faint.svg");
    --dw-lotus: url("../images/diwali/lotus.svg");
    --dw-marigold: url("../images/diwali/marigold.svg");
    --dw-garland: url("../images/diwali/header-garland.svg");

    /* Bootstrap 5.3 / Skote variable bridge */
    --bs-primary: #d9480f;
    --bs-primary-rgb: 217, 72, 15;
    --bs-primary-bg-subtle: #fde7d3;
    --bs-primary-border-subtle: #f7c3a0;
    --bs-primary-text-emphasis: #7a2a0a;
    --bs-light: #fcf4e6;
    --bs-light-rgb: 252, 244, 230;
    --bs-link-color: #b83a0b;
    --bs-link-color-rgb: 184, 58, 11;
    --bs-link-hover-color: #8b1a1a;
    --bs-link-hover-color-rgb: 139, 26, 26;
    --bs-body-color: var(--dw-ink);
    --bs-heading-color: var(--dw-ink-heading);
    --bs-secondary-color: var(--dw-ink-muted);
    --bs-border-color: var(--dw-border);
    --bs-tertiary-bg: #fdf4e4;
    --bs-secondary-bg: var(--dw-ivory-50);
    --bs-header-dark-bg: var(--dw-maroon-800);
    --bs-header-dark-item-color: #fde9c2;
    --bs-topnav-bg: var(--dw-ivory-50);
    --bs-menu-item-color: #5b3a2e;
    --bs-menu-item-active-color: var(--dw-saffron-600);
    --bs-footer-bg: #fff4e0;
    --bs-footer-color: #7a4a35;
}


/* 2. PAGE CANVAS ========================================================== */

body.diwali-theme {
    background-color: var(--dw-ivory-100);
    background-image:
        var(--dw-mandala-faint),
        var(--dw-mandala-faint),
        radial-gradient(1100px 480px at 50% -8%, rgba(255, 196, 92, .20), transparent 70%),
        radial-gradient(700px 520px at 0% 100%, rgba(234, 106, 18, .06), transparent 70%),
        radial-gradient(700px 520px at 100% 100%, rgba(234, 106, 18, .06), transparent 70%),
        linear-gradient(180deg, #fff9ef 0%, #fdf1dc 100%);
    background-repeat: no-repeat;
    background-position: -170px 150px, calc(100% + 170px) 62%, 0 0, 0 0, 0 0, 0 0;
    background-size: 440px, 440px, auto, auto, auto, auto;
    background-attachment: fixed;
}

body.diwali-theme ::selection {
    background: rgba(245, 158, 11, .28);
}


/* 3. HEADER / TOPBAR ====================================================== */

body.diwali-theme #page-topbar {
    background-color: var(--dw-maroon-800);
    background:
        var(--dw-sparkles),
        radial-gradient(ellipse 45% 160% at 50% 0%, rgba(214, 64, 40, .55), transparent 70%),
        linear-gradient(90deg, #4f0a13 0%, #7d1419 28%, #9a2117 50%, #7d1419 72%, #4f0a13 100%);
    border-bottom: 2px solid var(--dw-gold-400);
    box-shadow: 0 4px 18px rgba(74, 11, 18, .30);
}

/* Gold garland swoosh behind the centre diyas */
body.diwali-theme #page-topbar::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 0;
    width: min(640px, 44vw);
    height: 100%;
    transform: translateX(-50%);
    background: var(--dw-garland) center bottom / 100% 100% no-repeat;
    pointer-events: none;
}

/* Three glowing diyas — flames flicker inside the SVG (SMIL) */
body.diwali-theme #page-topbar::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 1px;
    width: 196px;
    height: 66px;
    transform: translateX(-50%);
    background:
        var(--dw-diya-alt) left bottom / 56px 56px no-repeat,
        var(--dw-diya) center bottom / 70px 70px no-repeat,
        var(--dw-diya-alt) right bottom / 56px 56px no-repeat;
    filter: drop-shadow(0 0 10px rgba(255, 190, 80, .35));
    pointer-events: none;
}

/* Twinkling sparkle layer (positioned against #page-topbar) */
body.diwali-theme #page-topbar .navbar-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(rgba(255, 236, 180, .9) 1px, transparent 1.8px) 11px 9px / 97px 53px,
        radial-gradient(rgba(255, 236, 180, .7) 1px, transparent 1.8px) 57px 31px / 131px 61px;
    opacity: .35;
    animation: dw-twinkle 4.5s ease-in-out infinite;
    pointer-events: none;
}

body.diwali-theme #page-topbar .header-item {
    color: var(--bs-header-dark-item-color);
    transition: background-color .25s var(--dw-ease), color .25s var(--dw-ease);
}

body.diwali-theme #page-topbar .header-item:hover,
body.diwali-theme #page-topbar .header-item:focus-visible {
    color: var(--dw-gold-300);
    background-color: rgba(255, 224, 150, .10);
}

body.diwali-theme #page-topbar .noti-icon i {
    color: var(--dw-gold-300);
    text-shadow: 0 0 10px rgba(255, 200, 90, .35);
}

/* Header dropdowns (notifications / profile) */
body.diwali-theme #page-topbar .dropdown-menu {
    border-top: 3px solid var(--dw-amber-500);
}


/* 4. HORIZONTAL NAVIGATION ================================================ */

body.diwali-theme .topnav {
    background-color: var(--dw-ivory-50);
    background-image:
        var(--dw-bead-line),
        linear-gradient(180deg, #fffaf1 0%, #fff3e0 100%);
    background-size: 12px 6px, 100% 100%;
    background-position: 0 100%, 0 0;
    background-repeat: repeat-x, no-repeat;
    box-shadow: 0 8px 18px rgba(139, 26, 26, .06);
}

body.diwali-theme .topnav .navbar-nav .nav-link {
    color: var(--bs-menu-item-color);
    font-weight: 500;
    transition: color .25s var(--dw-ease), background-color .25s var(--dw-ease);
}

body.diwali-theme .topnav .navbar-nav .nav-link i {
    color: var(--dw-maroon-700);
    transition: color .25s var(--dw-ease);
}

body.diwali-theme .topnav .navbar-nav .nav-link:hover,
body.diwali-theme .topnav .navbar-nav .nav-link:focus-visible,
body.diwali-theme .topnav .navbar-nav .nav-link:hover i {
    color: var(--dw-saffron-600);
}

body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link.active,
body.diwali-theme .topnav .navbar-nav > .dropdown.active > .nav-link,
body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link.active i,
body.diwali-theme .topnav .navbar-nav > .dropdown.active > .nav-link i {
    color: var(--dw-saffron-600) !important;
}

body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link.active,
body.diwali-theme .topnav .navbar-nav > .dropdown.active > .nav-link {
    font-weight: 600;
    background: linear-gradient(180deg, transparent 30%, rgba(245, 158, 11, .10));
}

body.diwali-theme .topnav .dropdown-item {
    transition: color .2s var(--dw-ease), background-color .2s var(--dw-ease);
}

body.diwali-theme .topnav .dropdown-item i {
    color: var(--dw-saffron-600);
}

body.diwali-theme .topnav .navbar-nav .dropdown-item:hover,
body.diwali-theme .topnav .navbar-nav .dropdown-item.active {
    color: var(--dw-maroon-700);
}


/* 5. PAGE TITLES & HEADINGS =============================================== */

body.diwali-theme .page-title-box h4 {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--dw-maroon-800);
    letter-spacing: .03em;
}

body.diwali-theme .page-title-box h4::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 18px;
    background: var(--dw-lotus) center / contain no-repeat;
}

:where(.diwali-theme) .card-title {
    color: var(--dw-ink-heading);
    font-weight: 600;
}

/* Small marigold accent after card titles (inline, never wraps alone) */
:where(.diwali-theme) .card-title::after {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: .45rem;
    vertical-align: -2px;
    background: var(--dw-marigold) center / contain no-repeat;
}

:where(.diwali-theme) .text-primary-emphasis {
    color: var(--dw-maroon-700) !important;
}


/* 6. CARDS & PANELS ======================================================= */

:where(.diwali-theme) .card {
    --bs-card-bg: var(--dw-ivory-50);
    --bs-card-border-radius: var(--dw-radius);
    --bs-card-inner-border-radius: calc(var(--dw-radius) - 1px);
    --bs-card-cap-bg: #fdf3e2;
    border: 1px solid var(--dw-border);
    box-shadow: var(--dw-shadow);
    transition: box-shadow .35s var(--dw-ease), border-color .35s var(--dw-ease);
}

/* No transform on hover: several cards contain Bootstrap modals, and a
   transformed ancestor would break their fixed positioning. */
:where(.diwali-theme) .card:hover {
    box-shadow: var(--dw-shadow-hover);
    border-color: var(--dw-gold-400);
}

/* Nested / embedded panels stay calm */
:where(.diwali-theme) .card .card,
:where(.diwali-theme) .card.shadow-none,
:where(.diwali-theme) .modal .card {
    box-shadow: none;
}

:where(.diwali-theme) .card .card:hover,
:where(.diwali-theme) .modal .card:hover {
    box-shadow: 0 4px 12px rgba(139, 26, 26, .06);
}

:where(.diwali-theme) .card-header:not([class*="bg-"]) {
    background-image: linear-gradient(180deg, #fff8ec, #fdf0da);
}

:where(.diwali-theme) .card-header {
    border-bottom: 1px solid var(--dw-border);
}

:where(.diwali-theme) .card-footer {
    background-color: #fffaf1;
    border-top: 1px solid var(--dw-border);
}

:where(.diwali-theme) .list-group {
    --bs-list-group-bg: var(--dw-ivory-50);
    --bs-list-group-border-color: var(--dw-border);
    --bs-list-group-action-hover-bg: #fdf3e2;
    --bs-list-group-active-bg: var(--dw-saffron-600);
    --bs-list-group-active-border-color: var(--dw-saffron-600);
}

:where(.diwali-theme) .progress {
    --bs-progress-bg: #f8e8cc;
    border-radius: 999px;
}

/* Only bars with no colour utility get the festive gradient,
   so success/danger/warning bars keep their meaning. */
:where(.diwali-theme) .progress-bar:not([class*="bg-"]) {
    background: linear-gradient(90deg, var(--dw-saffron-600), var(--dw-amber-500));
}

:where(.diwali-theme) .progress-bar.bg-primary {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 214, 120, .45));
}


/* 7. DASHBOARD SPECIFICS ================================================== */

/* 7a. Employee welcome banner */
:where(.diwali-theme) .card.bg-gradient-primary {
    background:
        var(--dw-mandala) right -60px center / 260px no-repeat,
        radial-gradient(500px 220px at 100% 100%, rgba(245, 158, 11, .16), transparent 70%),
        linear-gradient(100deg, #fffbf3 0%, #fff4e2 60%, #fde9c8 100%);
    border-color: var(--dw-gold-300);
}

:where(.diwali-theme) .card.bg-gradient-primary h3 {
    color: var(--dw-ink-heading);
    font-weight: 600;
}

body.diwali-theme .card.bg-gradient-primary .avatar-title {
    background: linear-gradient(135deg, var(--dw-amber-500), var(--dw-saffron-600)) !important;
    color: #fff !important;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 6px 18px rgba(217, 72, 15, .35);
    font-weight: 600;
}

:where(.diwali-theme) .card.bg-gradient-primary img.rounded-circle {
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--dw-gold-400);
}

/* 7b. Attendance widget header strip */
body.diwali-theme .card > .bg-soft-primary.bg-gradient:first-child {
    background:
        var(--dw-sparkles),
        linear-gradient(90deg, #5a0c15 0%, #8b1a1a 35%, #9e2318 50%, #8b1a1a 65%, #5a0c15 100%) !important;
    border-bottom: 2px solid var(--dw-gold-400);
}

body.diwali-theme .card > .bg-soft-primary.bg-gradient:first-child .text-primary {
    color: #fff1d0 !important;
}

body.diwali-theme .card > .bg-soft-primary.bg-gradient:first-child i {
    color: var(--dw-gold-300);
}

body.diwali-theme .card > .bg-soft-primary.bg-gradient:first-child h5::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: .5rem;
    vertical-align: -2px;
    background: var(--dw-marigold) center / contain no-repeat;
}

body.diwali-theme .card.border-0:has(> .bg-soft-primary.bg-gradient:first-child) {
    border: 1px solid var(--dw-gold-400) !important;
}

/* Timer panels */
:where(.diwali-theme) .card:has(#live_work_timer) {
    background:
        var(--dw-mandala) left -40px top -40px / 120px no-repeat,
        linear-gradient(180deg, #fffaf2, #fdf0da);
    border: 1px solid var(--dw-gold-300) !important;
}

:where(.diwali-theme) #live_work_timer,
:where(.diwali-theme) #live_break_timer,
:where(.diwali-theme) #total_break_display {
    font-variant-numeric: tabular-nums;
}

:where(.diwali-theme) #live_work_timer {
    text-shadow: 0 2px 10px rgba(217, 72, 15, .18);
}

:where(.diwali-theme) #break_summary_panel > .card {
    border: 1px solid var(--dw-border) !important;
}

/* Main punch buttons: festive glow, actions untouched */
body.diwali-theme #action_buttons .btn {
    border: 1px solid rgba(246, 217, 139, .7);
    letter-spacing: .04em;
    font-weight: 600;
}

body.diwali-theme #action_buttons #btn_start {
    background-image: linear-gradient(180deg, #22a559, #15803d);
    animation: dw-start-glow 2.8s ease-in-out infinite;
}

/* 7c. Statistic cards (Admin + Employee dashboards) */
:where(.diwali-theme) .stats-card {
    border: 1px solid var(--dw-border);
    border-radius: var(--dw-radius);
    overflow: hidden;
}

:where(.diwali-theme) .stats-card::after {
    content: "";
    position: absolute;
    right: -26px;
    bottom: -26px;
    width: 110px;
    height: 110px;
    background: var(--dw-mandala) center / contain no-repeat;
    opacity: .75;
    pointer-events: none;
}

:where(.diwali-theme) .stats-card .card-body {
    position: relative;
    z-index: 1;
}

:where(.diwali-theme) .stats-card:has(.bg-soft-success) { background: linear-gradient(135deg, #effaf2 0%, var(--dw-ivory-50) 70%); }
:where(.diwali-theme) .stats-card:has(.bg-soft-warning) { background: linear-gradient(135deg, #fff4e0 0%, var(--dw-ivory-50) 70%); }
:where(.diwali-theme) .stats-card:has(.bg-soft-info)    { background: linear-gradient(135deg, #edf5ff 0%, var(--dw-ivory-50) 70%); }
:where(.diwali-theme) .stats-card:has(.bg-soft-primary) { background: linear-gradient(135deg, #f3f0ff 0%, var(--dw-ivory-50) 70%); }
:where(.diwali-theme) .stats-card:has(.bg-soft-danger)  { background: linear-gradient(135deg, #fff0ee 0%, var(--dw-ivory-50) 70%); }

:where(.diwali-theme) .stats-icon {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .75), 0 6px 14px rgba(139, 26, 26, .10);
}

:where(.diwali-theme) .stats-card h5 {
    color: var(--dw-ink-heading);
    font-weight: 700;
}


/* 8. BUTTONS ============================================================== */

:where(.diwali-theme) .btn {
    transition: color .2s var(--dw-ease), background-color .2s var(--dw-ease),
                border-color .2s var(--dw-ease), box-shadow .25s var(--dw-ease);
}

:where(.diwali-theme) .btn-primary {
    --bs-btn-bg: #d9480f;
    --bs-btn-border-color: #c43f0c;
    --bs-btn-hover-bg: #b83a0b;
    --bs-btn-hover-border-color: #a33309;
    --bs-btn-active-bg: #a33309;
    --bs-btn-active-border-color: #8f2c07;
    --bs-btn-disabled-bg: #e2875c;
    --bs-btn-disabled-border-color: #e2875c;
    --bs-btn-focus-shadow-rgb: 234, 106, 18;
}

:where(.diwali-theme) .btn-success {
    --bs-btn-bg: #15803d;
    --bs-btn-border-color: #13753a;
    --bs-btn-hover-bg: #126b34;
    --bs-btn-hover-border-color: #10602f;
    --bs-btn-active-bg: #10602f;
    --bs-btn-active-border-color: #0e552a;
    --bs-btn-disabled-bg: #5aa877;
    --bs-btn-disabled-border-color: #5aa877;
}

:where(.diwali-theme) .btn-danger {
    --bs-btn-bg: #c62828;
    --bs-btn-border-color: #b52424;
    --bs-btn-hover-bg: #a92121;
    --bs-btn-hover-border-color: #9a1e1e;
    --bs-btn-active-bg: #9a1e1e;
    --bs-btn-active-border-color: #8b1a1a;
    --bs-btn-disabled-bg: #dc7a7a;
    --bs-btn-disabled-border-color: #dc7a7a;
}

:where(.diwali-theme) .btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: #d97706;
    --bs-btn-border-color: #c96d05;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b86504;
    --bs-btn-hover-border-color: #a85c04;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #a85c04;
    --bs-btn-active-border-color: #985303;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #e8a85a;
    --bs-btn-disabled-border-color: #e8a85a;
}

/* Soft sheen + warm shadow on solid buttons (colour meaning unchanged) */
:where(.diwali-theme) :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .06));
    box-shadow: 0 2px 6px rgba(139, 26, 26, .16);
}

:where(.diwali-theme) :is(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info):hover {
    box-shadow: 0 6px 16px rgba(139, 26, 26, .22);
}

:where(.diwali-theme) .btn-light {
    --bs-btn-color: var(--dw-maroon-800);
    --bs-btn-bg: #fdf3e2;
    --bs-btn-border-color: #efd9b0;
    --bs-btn-hover-color: var(--dw-maroon-800);
    --bs-btn-hover-bg: #fae6c4;
    --bs-btn-hover-border-color: #e9c98f;
    --bs-btn-active-color: var(--dw-maroon-800);
    --bs-btn-active-bg: #f7dcae;
    --bs-btn-active-border-color: #e3bd7b;
}

:where(.diwali-theme) .btn-outline-primary {
    --bs-btn-color: var(--dw-saffron-600);
    --bs-btn-border-color: var(--dw-saffron-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dw-saffron-600);
    --bs-btn-hover-border-color: var(--dw-saffron-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dw-saffron-700);
    --bs-btn-active-border-color: var(--dw-saffron-700);
    --bs-btn-focus-shadow-rgb: 234, 106, 18;
}

:where(.diwali-theme) .btn-soft-primary {
    color: var(--dw-saffron-700);
    background-color: rgba(217, 72, 15, .08);
    border: 1px solid rgba(217, 72, 15, .18);
    font-weight: 500;
}

:where(.diwali-theme) .btn-soft-primary:hover,
:where(.diwali-theme) .btn-soft-primary:focus,
:where(.diwali-theme) .btn-soft-primary:active {
    color: #fff;
    background-color: var(--dw-saffron-600);
    border-color: var(--dw-saffron-600);
}

/* Visible keyboard focus everywhere */
:where(.diwali-theme) :is(a, .btn, .nav-link, .dropdown-item, .page-link, .form-check-input):focus-visible {
    outline: 2px solid var(--dw-saffron-600);
    outline-offset: 2px;
}


/* 9. FORMS ================================================================ */

:where(.diwali-theme) .form-label,
:where(.diwali-theme) .col-form-label {
    color: var(--dw-ink-heading);
    font-weight: 500;
}

/* :where() keeps these at single-class weight so .is-invalid / .is-valid
   and .was-validated states keep their red/green borders. */
:where(.diwali-theme) :where(.form-control, .form-select) {
    background-color: #fffefb;
    border-color: var(--dw-border-strong);
    transition: border-color .2s var(--dw-ease), box-shadow .2s var(--dw-ease);
}

:where(.diwali-theme) :where(.form-control, .form-select):focus {
    border-color: var(--dw-saffron-500);
    box-shadow: var(--dw-focus-ring);
}

:where(.diwali-theme) .form-control:disabled,
:where(.diwali-theme) .form-select:disabled,
:where(.diwali-theme) .form-control[readonly] {
    background-color: #f8efe0;
}

:where(.diwali-theme) .input-group-text {
    background-color: #fcefd8;
    border-color: var(--dw-border-strong);
    color: var(--dw-maroon-700);
}

:where(.diwali-theme) .form-check-input:checked {
    background-color: var(--dw-saffron-600);
    border-color: var(--dw-saffron-600);
}

:where(.diwali-theme) .form-check-input:focus {
    border-color: var(--dw-saffron-500);
    box-shadow: var(--dw-focus-ring);
}

/* Master layout forces a blue focus ring with !important; re-tint it. */
body.diwali-theme .dataTables_length select:focus,
body.diwali-theme .dataTables_length .form-select:focus,
body.diwali-theme span.select2-container--default.select2-container--focus .select2-selection--single,
body.diwali-theme span.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--dw-saffron-500) !important;
    box-shadow: var(--dw-focus-ring) !important;
}

/* Select2 */
:where(.diwali-theme) .select2-container--default .select2-selection--single,
:where(.diwali-theme) .select2-container--default .select2-selection--multiple {
    background-color: #fffefb;
    border-color: var(--dw-border-strong);
}

body.diwali-theme .select2-container--default .select2-results__option--highlighted[aria-selected],
body.diwali-theme .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--dw-saffron-600);
    color: #fff;
}

body.diwali-theme .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #fdf0dc;
    border-color: var(--dw-border-strong);
    color: var(--dw-maroon-800);
}

:where(.diwali-theme) .select2-dropdown {
    border-color: var(--dw-border-strong);
    background-color: var(--dw-ivory-50);
}

/* bootstrap-datepicker (popup is appended to <body>) */
body.diwali-theme .datepicker.dropdown-menu {
    border-top: 3px solid var(--dw-amber-500);
}

body.diwali-theme .datepicker table tr td.active,
body.diwali-theme .datepicker table tr td span.active {
    background-color: var(--dw-saffron-600) !important;
    background-image: none !important;
    border-color: var(--dw-saffron-700) !important;
    color: #fff !important;
    text-shadow: none;
}

body.diwali-theme .datepicker table tr td.today {
    background-color: #fde7c4;
    background-image: none;
    color: var(--dw-maroon-800);
}

body.diwali-theme .datepicker table tr td.day:hover,
body.diwali-theme .datepicker table tr td span:hover {
    background-color: #fdf0dc;
}

/* flatpickr */
body.diwali-theme .flatpickr-day.selected,
body.diwali-theme .flatpickr-day.selected:hover,
body.diwali-theme .flatpickr-day.startRange,
body.diwali-theme .flatpickr-day.endRange {
    background: var(--dw-saffron-600);
    border-color: var(--dw-saffron-600);
}

body.diwali-theme .flatpickr-day.today {
    border-color: var(--dw-amber-500);
}


/* 10. TABLES ============================================================== */

:where(.diwali-theme) .table {
    --bs-table-bg: transparent;
    --bs-table-border-color: #f1e2c6;
    --bs-table-hover-bg: rgba(245, 158, 11, .07);
    --bs-table-striped-bg: rgba(253, 240, 217, .45);
    --bs-table-active-bg: rgba(245, 158, 11, .10);
}

:where(.diwali-theme) .table-light {
    --bs-table-color: var(--dw-maroon-800);
    --bs-table-bg: #fbefd9;
    --bs-table-border-color: #efd7ab;
    --bs-table-striped-bg: #f8e7ca;
    --bs-table-hover-bg: #f6e2c0;
}

:where(.diwali-theme) .table > thead th {
    font-weight: 600;
    letter-spacing: .01em;
    border-bottom: 2px solid var(--dw-gold-300);
}

:where(.diwali-theme) .table > tbody > tr {
    transition: background-color .2s var(--dw-ease);
}

/* DataTables chrome */
:where(.diwali-theme) .dataTables_wrapper .dataTables_info {
    color: var(--dw-ink-muted);
}

:where(.diwali-theme) table.dataTable > tbody > tr.child span.dtr-title {
    color: var(--dw-ink-heading) !important;
}

/* Pagination (Bootstrap + DataTables) */
:where(.diwali-theme) .pagination {
    --bs-pagination-color: var(--dw-maroon-700);
    --bs-pagination-bg: var(--dw-ivory-50);
    --bs-pagination-border-color: var(--dw-border);
    --bs-pagination-hover-color: var(--dw-maroon-800);
    --bs-pagination-hover-bg: #fdf0dc;
    --bs-pagination-hover-border-color: var(--dw-border-strong);
    --bs-pagination-focus-color: var(--dw-maroon-800);
    --bs-pagination-focus-bg: #fdf0dc;
    --bs-pagination-focus-box-shadow: var(--dw-focus-ring);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--dw-saffron-600);
    --bs-pagination-active-border-color: var(--dw-saffron-600);
    --bs-pagination-disabled-bg: #fbf4e8;
    --bs-pagination-disabled-border-color: var(--dw-border);
}


/* 11. TABS, DROPDOWNS, MODALS, ALERTS, MISC ============================== */

:where(.diwali-theme) .nav-tabs {
    --bs-nav-tabs-border-color: var(--dw-border);
    --bs-nav-tabs-link-hover-border-color: var(--dw-border) var(--dw-border) var(--dw-border);
    --bs-nav-tabs-link-active-color: var(--dw-saffron-600);
    --bs-nav-tabs-link-active-bg: var(--dw-ivory-50);
    --bs-nav-tabs-link-active-border-color: var(--dw-border) var(--dw-border) var(--dw-ivory-50);
    --bs-nav-link-color: var(--dw-maroon-700);
    --bs-nav-link-hover-color: var(--dw-saffron-600);
}

:where(.diwali-theme) .nav-pills {
    --bs-nav-pills-link-active-bg: var(--dw-saffron-600);
    --bs-nav-link-color: var(--dw-maroon-700);
    --bs-nav-link-hover-color: var(--dw-saffron-600);
}

/* Skote's underlined custom tabs */
:where(.diwali-theme) .nav-tabs-custom .nav-item .nav-link::after {
    background: linear-gradient(90deg, var(--dw-gold-400), var(--dw-saffron-600), var(--dw-gold-400));
}

:where(.diwali-theme) .nav-tabs-custom .nav-item .nav-link.active {
    color: var(--dw-saffron-600);
}

/* Profile wizard step bubble (employee.css) */
:where(.diwali-theme) .nav-tabs .nav-link.active .step-number {
    background-color: var(--dw-saffron-600);
}

:where(.diwali-theme) .dropdown-menu {
    --bs-dropdown-bg: var(--dw-ivory-50);
    --bs-dropdown-border-color: var(--dw-border);
    --bs-dropdown-divider-bg: var(--dw-border);
    --bs-dropdown-link-color: var(--dw-ink);
    --bs-dropdown-link-hover-color: var(--dw-maroon-700);
    --bs-dropdown-link-hover-bg: #fdf0dc;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--dw-saffron-600);
    box-shadow: 0 14px 32px rgba(74, 11, 18, .14);
}

/* Modals */
:where(.diwali-theme) .modal {
    --bs-modal-bg: var(--dw-ivory-50);
    --bs-modal-border-color: var(--dw-gold-300);
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 15px;
    --bs-modal-header-border-color: var(--dw-border);
    --bs-modal-footer-border-color: var(--dw-border);
}

:where(.diwali-theme) .modal-content {
    border: 1px solid var(--dw-gold-300);
    box-shadow: 0 24px 60px rgba(74, 11, 18, .28);
}

/* Only neutral headers are re-skinned; coloured (bg-*) headers keep meaning. */
:where(.diwali-theme) .modal-header:not([class*="bg-"]) {
    background-color: #fdf2df;
    background-image:
        var(--dw-bead-line),
        linear-gradient(180deg, #fff8ec, #fcecd2);
    background-size: 12px 6px, 100% 100%;
    background-position: 0 100%, 0 0;
    background-repeat: repeat-x, no-repeat;
}

:where(.diwali-theme) .modal-title {
    color: var(--dw-maroon-800);
    font-weight: 600;
}

:where(.diwali-theme) .modal-footer {
    background-color: #fffaf1;
}

/* Master layout paints its own backdrop on .modal.show — warm it slightly */
body.diwali-theme .modal.show {
    background: rgba(43, 8, 12, .52) !important;
}

/* SweetAlert2 surface (button colours are set in JS and left alone) */
:where(.diwali-theme) .swal2-popup {
    border: 1px solid var(--dw-gold-300);
    border-radius: 18px;
    background: var(--dw-ivory-50);
}

:where(.diwali-theme) .swal2-title {
    color: var(--dw-maroon-800);
}

:where(.diwali-theme) .alert {
    border-radius: var(--dw-radius-sm);
}

:where(.diwali-theme) .badge {
    letter-spacing: .02em;
}

:where(.diwali-theme) .avatar-title.bg-primary,
:where(.diwali-theme) .avatar-title.bg-soft-primary {
    box-shadow: 0 4px 12px rgba(217, 72, 15, .28);
}

:where(.diwali-theme) hr {
    border-color: var(--dw-border);
    opacity: 1;
}

/* FullCalendar (calendar page) */
:where(.diwali-theme) .fc {
    --fc-border-color: #f1e2c6;
    --fc-button-bg-color: var(--dw-maroon-700);
    --fc-button-border-color: var(--dw-maroon-700);
    --fc-button-hover-bg-color: var(--dw-maroon-800);
    --fc-button-hover-border-color: var(--dw-maroon-800);
    --fc-button-active-bg-color: var(--dw-saffron-600);
    --fc-button-active-border-color: var(--dw-saffron-600);
    --fc-today-bg-color: rgba(245, 158, 11, .12);
    --fc-neutral-bg-color: #fdf3e2;
    --fc-page-bg-color: var(--dw-ivory-50);
}

:where(.diwali-theme) .fc .fc-col-header-cell {
    background-color: #fbefd9;
}

:where(.diwali-theme) .fc .fc-toolbar-title {
    color: var(--dw-maroon-800);
}


/* 12. FOOTER ============================================================== */

body.diwali-theme .footer {
    background-color: var(--bs-footer-bg);
    background-image:
        var(--dw-bead-line),
        linear-gradient(180deg, #fff6e6, #fdebcc);
    background-size: 12px 6px, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: repeat-x, no-repeat;
    border-top: 1px solid var(--dw-gold-300);
    color: var(--bs-footer-color);
}


/* 13. EDGE DECORATIONS ===================================================== */
/* Fixed, click-through, and only shown where the page has side gutters
   (see §16). Lanterns sit behind content; corner diyas sit in the empty
   gutters above the footer. */

body.diwali-theme::before,
body.diwali-theme::after {
    content: "";
    position: fixed;
    top: 0;
    z-index: -1;
    width: 44px;
    height: 148px;
    background: var(--dw-lantern) center top / contain no-repeat;
    filter: drop-shadow(0 6px 14px rgba(234, 106, 18, .35));
    transform-origin: 50% 0;
    pointer-events: none;
    display: none;
}

body.diwali-theme::before {
    left: max(10px, calc(3.75vw - 22px));
    animation: dw-swing 6s ease-in-out infinite alternate;
}

body.diwali-theme::after {
    right: max(10px, calc(3.75vw - 22px));
    animation: dw-swing 7.2s ease-in-out -2s infinite alternate;
}

/* Master layout: hang lanterns just below the fixed header + nav */
body.diwali-theme[data-layout="horizontal"]::before,
body.diwali-theme[data-layout="horizontal"]::after {
    top: 124px;
}

/* Corner diyas with marigolds */
body.diwali-theme #layout-wrapper::before,
body.diwali-theme #layout-wrapper::after,
body.diwali-theme .account-pages::before,
body.diwali-theme .account-pages::after,
body.diwali-theme .error-page::before,
body.diwali-theme .error-page::after {
    content: "";
    position: fixed;
    bottom: 4px;
    z-index: 1;
    width: 112px;
    height: 96px;
    background:
        var(--dw-marigold) 0 100% / 30px no-repeat,
        var(--dw-marigold) 20px 100% / 24px no-repeat,
        var(--dw-marigold) 100% 100% / 30px no-repeat,
        var(--dw-marigold) calc(100% - 20px) 100% / 24px no-repeat,
        var(--dw-diya) 50% 0 / 84px 84px no-repeat;
    filter: drop-shadow(0 0 14px rgba(255, 170, 60, .35));
    pointer-events: none;
    display: none;
}

body.diwali-theme #layout-wrapper::before,
body.diwali-theme .account-pages::before,
body.diwali-theme .error-page::before {
    left: max(4px, calc(3.75vw - 56px));
}

body.diwali-theme #layout-wrapper::after,
body.diwali-theme .account-pages::after,
body.diwali-theme .error-page::after {
    right: max(4px, calc(3.75vw - 56px));
}

/* Gentle entrance for page content. Uses fill-mode "backwards" so no
   transform remains after the animation (keeps nested modals working). */
:where(.diwali-theme) .page-content > .container-fluid > .row {
    animation: dw-fade-up .55s var(--dw-ease) backwards;
}

:where(.diwali-theme) .page-content > .container-fluid > .row:nth-child(2) { animation-delay: .05s; }
:where(.diwali-theme) .page-content > .container-fluid > .row:nth-child(3) { animation-delay: .10s; }
:where(.diwali-theme) .page-content > .container-fluid > .row:nth-child(n+4) { animation-delay: .15s; }


/* 14. AUTH & ERROR PAGES =================================================== */

:where(.diwali-theme) .account-pages .card {
    border: 1px solid var(--dw-gold-300);
    box-shadow: 0 18px 44px rgba(139, 26, 26, .14);
}

/* Festive top edge on the auth card */
:where(.diwali-theme) .account-pages .card::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--dw-maroon-700), var(--dw-saffron-600), var(--dw-amber-500), var(--dw-saffron-600), var(--dw-maroon-700));
}

:where(.diwali-theme) .account-pages .bg-primary-subtle {
    background-image:
        var(--dw-mandala),
        linear-gradient(120deg, #fff1da 0%, #fde0b6 100%);
    background-repeat: no-repeat;
    background-position: -50px -60px, 0 0;
    background-size: 200px, 100% 100%;
}

body.diwali-theme .account-pages .bg-primary-subtle .text-primary {
    color: var(--dw-maroon-800) !important;
}

body.diwali-theme .account-pages .bg-primary-subtle p {
    color: #6a3b2c;
}

:where(.diwali-theme) .account-pages .profile-user-wid .avatar-title {
    box-shadow: 0 0 0 3px var(--dw-gold-300), 0 6px 16px rgba(217, 72, 15, .22);
}

/* 403 / 404 */
body.diwali-theme .error-code {
    background: linear-gradient(180deg, var(--dw-saffron-600), var(--dw-maroon-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

body.diwali-theme .error-code i,
body.diwali-theme .error-code span {
    -webkit-text-fill-color: var(--dw-amber-500);
}

:where(.diwali-theme) .error-title {
    color: var(--dw-maroon-800);
}

:where(.diwali-theme) .error-text {
    color: var(--dw-ink-muted);
}

:where(.diwali-theme) .btn-back {
    background-color: var(--dw-saffron-600);
    border-color: var(--dw-saffron-600);
    color: #fff;
}

:where(.diwali-theme) .btn-back:hover,
:where(.diwali-theme) .btn-back:focus {
    background-color: var(--dw-saffron-700);
    border-color: var(--dw-saffron-700);
    color: #fff;
}

/* Laravel "minimal" error layout (500, 503, 419, …) */
body.diwali-theme.antialiased .bg-gray-100,
body.diwali-theme.antialiased .dark\:bg-gray-900 {
    background-color: transparent;
}

body.diwali-theme.antialiased .text-gray-700,
body.diwali-theme.antialiased .dark\:text-gray-300 {
    color: var(--dw-maroon-800);
}

body.diwali-theme.antialiased .border-gray-400 {
    border-color: var(--dw-gold-500);
}


/* 15. ANIMATIONS ========================================================== */

@keyframes dw-twinkle {
    0%, 100% { opacity: .25; }
    50%      { opacity: .7; }
}

@keyframes dw-swing {
    from { transform: rotate(-2.5deg); }
    to   { transform: rotate(2.5deg); }
}

@keyframes dw-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes dw-start-glow {
    0%, 100% { box-shadow: 0 4px 14px rgba(21, 128, 61, .30), 0 0 0 0 rgba(246, 217, 139, 0); }
    50%      { box-shadow: 0 6px 22px rgba(21, 128, 61, .42), 0 0 0 6px rgba(246, 217, 139, .35); }
}


/* 16. RESPONSIVE ========================================================== */

/* Header diyas need the free centre of the topbar */
@media (max-width: 991.98px) {
    body.diwali-theme #page-topbar::before,
    body.diwali-theme #page-topbar::after {
        display: none;
    }

    /* Collapsed mobile menu: left accent instead of underline */
    body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link.active,
    body.diwali-theme .topnav .navbar-nav > .dropdown.active > .nav-link {
        box-shadow: inset 3px 0 0 var(--dw-saffron-600);
    }

    body.diwali-theme {
        background-attachment: scroll;
        background-size: 280px, 280px, auto, auto, auto, auto;
        background-position: -140px 140px, calc(100% + 140px) 70%, 0 0, 0 0, 0 0, 0 0;
    }
}

@media (min-width: 992px) {
    /* Underline indicator for the active / hovered top-level link */
    body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link::before {
        content: "";
        position: absolute;
        left: 1.3rem;
        right: 1.3rem;
        bottom: 9px;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--dw-gold-400), var(--dw-saffron-500), var(--dw-gold-400));
        box-shadow: 0 0 8px rgba(234, 106, 18, .45);
        transform: scaleX(0);
        transition: transform .3s var(--dw-ease);
        pointer-events: none;
    }

    body.diwali-theme .topnav .navbar-nav > .nav-item:first-of-type > .nav-link::before {
        left: 0;
    }

    body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link:hover::before {
        transform: scaleX(.55);
    }

    body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link.active::before,
    body.diwali-theme .topnav .navbar-nav > .dropdown.active > .nav-link::before {
        transform: scaleX(1);
    }

    body.diwali-theme .topnav .dropdown-menu {
        border-top: 3px solid var(--dw-amber-500);
    }
}

/* Welcome banner diya — only where there is room beside the content */
@media (min-width: 1200px) {
    :where(.diwali-theme) .card.bg-gradient-primary > .card-body {
        padding-right: 150px;
    }

    :where(.diwali-theme) .card.bg-gradient-primary::after {
        content: "";
        position: absolute;
        right: 14px;
        bottom: 4px;
        width: 116px;
        height: 100px;
        background:
            var(--dw-marigold) 0 100% / 28px no-repeat,
            var(--dw-marigold) 18px 100% / 22px no-repeat,
            var(--dw-marigold) 100% 100% / 28px no-repeat,
            var(--dw-diya) 50% 0 / 88px 88px no-repeat;
        filter: drop-shadow(0 0 14px rgba(255, 170, 60, .35));
        pointer-events: none;
    }
}

/* Edge lanterns + corner diyas need real side gutters
   (content spans 85% of the viewport, so each gutter is 7.5vw) */
@media (min-width: 1400px) {
    body.diwali-theme::before,
    body.diwali-theme::after,
    body.diwali-theme .error-page::before,
    body.diwali-theme .error-page::after {
        display: block;
    }
}

@media (min-width: 1600px) {
    body.diwali-theme #layout-wrapper::before,
    body.diwali-theme #layout-wrapper::after {
        display: block;
    }
}

/* Auth pages have wide gutters around a narrow card */
@media (min-width: 992px) {
    body.diwali-theme:has(.account-pages)::before,
    body.diwali-theme:has(.account-pages)::after,
    body.diwali-theme .account-pages::before,
    body.diwali-theme .account-pages::after {
        display: block;
    }
}

@media (max-width: 575.98px) {
    body.diwali-theme .page-title-box h4::before {
        width: 20px;
        height: 14px;
    }

    :where(.diwali-theme) .stats-card::after {
        width: 80px;
        height: 80px;
    }
}


/* 17. HAPPY DIWALI GREETING, FIREWORKS & LIGHTS ========================== */
/* Everything here is a pseudo-element: no markup, click-through, and either
   behind all content (z-index -1 / -2) or inside empty gutters. */

body.diwali-theme {
    --dw-firework-gold: url("../images/diwali/firework-gold.svg");
    --dw-firework-red: url("../images/diwali/firework-red.svg");
    --dw-firework-amber: url("../images/diwali/firework-amber.svg");
    --dw-firework-header: url("../images/diwali/firework-header.svg");
    --dw-lights: url("../images/diwali/lights.svg");
    --dw-greeting: url("../images/diwali/greeting.svg");
    --dw-greeting-compact: url("../images/diwali/greeting-compact.svg");
    --dw-tagline: url("../images/diwali/greeting-tagline.svg");
    --dw-sparkle-field: url("../images/diwali/sparkle-field.svg");

    /* Background fireworks, placed mostly in gutters and gaps */
    --dw-fireworks-field:
        var(--dw-firework-gold) 2% 34% / 150px 150px no-repeat,
        var(--dw-firework-red) 98% 24% / 160px 160px no-repeat,
        var(--dw-firework-amber) 1% 80% / 120px 120px no-repeat,
        var(--dw-firework-gold) 99% 72% / 130px 130px no-repeat,
        var(--dw-firework-amber) 33% 16% / 110px 110px no-repeat,
        var(--dw-firework-red) 67% 14% / 120px 120px no-repeat;
}

/* 17a. Background fireworks + floating sparkles (behind everything) */
body.diwali-theme .main-content::before,
body.diwali-theme .account-pages > .container::after,
body.diwali-theme .error-page .error-title::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--dw-fireworks-field);
    opacity: .85;
    pointer-events: none;
    display: none;
}

body.diwali-theme .main-content::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: calc(100vh + 400px);
    z-index: -2;
    background: var(--dw-sparkle-field) 0 0 / 400px 400px repeat;
    opacity: .5;
    animation: dw-drift 26s linear infinite;
    pointer-events: none;
    display: none;
}

@keyframes dw-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(-400px); }
}

@media (min-width: 768px) {
    body.diwali-theme .main-content::before,
    body.diwali-theme .main-content::after,
    body.diwali-theme .account-pages > .container::after,
    body.diwali-theme .error-page .error-title::after {
        display: block;
    }
}

/* 17b. Header: bursts either side of the diyas + string lights in corners */
@media (min-width: 992px) {
    body.diwali-theme #page-topbar::before {
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        background: var(--dw-garland) center bottom / min(640px, 44vw) 100% no-repeat;
    }
}

@media (min-width: 1400px) {
    body.diwali-theme #page-topbar::before {
        background:
            var(--dw-lights) left -24px top -6px / calc(7.5vw + 70px) 44px no-repeat,
            var(--dw-lights) right -24px top -6px / calc(7.5vw + 70px) 44px no-repeat,
            var(--dw-firework-header) calc(50% - min(23vw, 380px)) 50% / 170px 100px no-repeat,
            var(--dw-firework-header) calc(50% + min(23vw, 380px)) 50% / 170px 100px no-repeat,
            var(--dw-garland) center bottom / min(640px, 44vw) 100% no-repeat;
    }

    /* Three lanterns per side hanging from the very top, in the empty gutters */
    body.diwali-theme[data-layout="horizontal"]::before,
    body.diwali-theme[data-layout="horizontal"]::after {
        top: 0;
        z-index: 1003;
        width: calc(7.5vw - 12px);
        height: 270px;
        background:
            linear-gradient(#c99a3e, #c99a3e) 50% 0 / 1.5px 120px no-repeat,
            var(--dw-lantern) 50% 92px / 46px auto no-repeat,
            linear-gradient(#c99a3e, #c99a3e) 14px 0 / 1px 40px no-repeat,
            var(--dw-lantern) 0 16px / 30px auto no-repeat,
            linear-gradient(#c99a3e, #c99a3e) right 14px top 0 / 1px 190px no-repeat,
            var(--dw-lantern) right 0 top 164px / 28px auto no-repeat;
    }

    body.diwali-theme[data-layout="horizontal"]::before { left: 4px; }
    body.diwali-theme[data-layout="horizontal"]::after  { right: 4px; }
}

/* 17c. Employee welcome card: greeting in the free space of the welcome column */
@media (min-width: 1400px) {
    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8 {
        position: relative;
    }

    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8 > * {
        position: relative;
        z-index: 1;
    }

    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 50%;
        height: 136px;
        margin-top: -68px;
        right: 0;
        width: 46%;
        background: var(--dw-greeting-compact) center / contain no-repeat;
        pointer-events: none;
    }

    /* Keep the name and designation beside the greeting, never under it:
       long text wraps onto more lines instead of running into it */
    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8 > .d-flex {
        max-width: 53%;
    }

    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8 > .d-flex > div:last-child {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (min-width: 1600px) {
    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8::after {
        width: 48%;
        background: var(--dw-greeting) left center / auto 88% no-repeat;
    }

    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8 > .d-flex {
        max-width: 51%;
    }
}

@media (min-width: 1800px) {
    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8::after {
        width: 56%;
        background:
            var(--dw-greeting) left center / auto 74% no-repeat,
            var(--dw-tagline) right center / auto 70% no-repeat;
    }

    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8 > .d-flex {
        max-width: 44%;
    }
}

@media (min-width: 1900px) {
    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8::after {
        width: 59%;
        background:
            var(--dw-greeting) left center / auto 78% no-repeat,
            var(--dw-tagline) right center / auto 82% no-repeat;
    }

    :where(.diwali-theme) .card.bg-gradient-primary .col-md-8 > .d-flex {
        max-width: 41%;
    }
}

/* 17d. Every other page: compact greeting at the right of a title row
   that holds only the heading (rows with filters/buttons are skipped). */
@media (min-width: 768px) {
    body.diwali-theme .page-title-box:not(:has(> * + *)) {
        position: relative;
    }

    body.diwali-theme .page-title-box:not(:has(> * + *))::after {
        content: "";
        position: absolute;
        z-index: -1;
        right: 0;
        top: 50%;
        width: 220px;
        height: 52px;
        transform: translateY(-62%);
        background: var(--dw-greeting-compact) right center / contain no-repeat;
        pointer-events: none;
    }
}

@media (min-width: 1200px) {
    body.diwali-theme .page-title-box:not(:has(> * + *))::after {
        width: 270px;
        height: 64px;
    }
}

/* Phones and small tablets: one-line greeting under the page title */
@media (max-width: 767.98px) {
    body.diwali-theme .page-title-box {
        flex-wrap: wrap;
    }

    body.diwali-theme .page-title-box::after {
        content: "";
        display: block;
        flex-basis: 100%;
        height: 34px;
        margin-top: 4px;
        background: var(--dw-greeting-compact) left center / contain no-repeat;
        pointer-events: none;
    }
}

/* The employee dashboard already shows the large greeting in its welcome card */
@media (min-width: 1400px) {
    body.diwali-theme .page-content:has(.card.bg-gradient-primary) .page-title-box::after {
        display: none;
    }
}

/* 17e. Login / register / lock screen: greeting above the card */
@media (min-width: 576px) and (min-height: 640px) {
    body.diwali-theme .account-pages > .container::before {
        content: "";
        position: absolute;
        top: 4px;
        left: 50%;
        width: 240px;
        height: 90px;
        transform: translateX(-50%);
        background: var(--dw-greeting) center / contain no-repeat;
        pointer-events: none;
    }
}

/* 17f. 403 / 404: greeting above the error code */
@media (min-height: 700px) {
    body.diwali-theme .error-page .error-code {
        position: relative;
    }

    body.diwali-theme .error-page .error-code::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        width: 270px;
        height: 100px;
        margin-bottom: 6px;
        transform: translateX(-50%);
        background: var(--dw-greeting) center / contain no-repeat;
        pointer-events: none;
    }
}


/* 18. REDUCED MOTION ====================================================== */

@media (prefers-reduced-motion: reduce) {
    body.diwali-theme {
        --dw-diya: url("../images/diwali/diya-static.svg");
        --dw-diya-alt: url("../images/diwali/diya-static.svg");
        --dw-firework-gold: url("../images/diwali/firework-static.svg");
        --dw-firework-red: url("../images/diwali/firework-static.svg");
        --dw-firework-amber: url("../images/diwali/firework-static.svg");
        --dw-firework-header: url("../images/diwali/firework-header-static.svg");
        --dw-lights: url("../images/diwali/lights-static.svg");
        --dw-greeting: url("../images/diwali/greeting-static.svg");
        --dw-greeting-compact: url("../images/diwali/greeting-compact-static.svg");
    }

    body.diwali-theme::before,
    body.diwali-theme::after,
    body.diwali-theme .main-content::after,
    body.diwali-theme #page-topbar .navbar-header::before,
    body.diwali-theme #action_buttons #btn_start,
    :where(.diwali-theme) .page-content > .container-fluid > .row {
        animation: none !important;
    }

    body.diwali-theme .topnav .navbar-nav > .nav-item > .nav-link::before,
    :where(.diwali-theme) .card,
    :where(.diwali-theme) .btn {
        transition: none !important;
    }
}