/* App shell layout + theming via data-th-scheme + data-bs-theme. */

:root {
    --th-sidebar-width: 270px;
    /* Defaults */
    --th-topbar-bg: var(--bs-body-bg);
    --th-sidebar-bg: var(--bs-body-bg);
    --th-sidebar-border: var(--bs-border-color);
    --th-nav-active-bg: rgba(var(--bs-primary-rgb), .12);
    --th-nav-active-color: var(--bs-primary);
}

/* -----------------------------
   Scheme presets (10)
------------------------------ */

/* 1) Classic */
html[data-th-scheme="classic"][data-bs-theme="light"],
html[data-th-scheme="classic"][data-bs-theme="dark"] {
}

/* 2) GlobalCom Neon */
html[data-th-scheme="globalcom"][data-bs-theme="light"] {
    --bs-primary: #6a5cff;
    --bs-primary-rgb: 106, 92, 255;
    --th-topbar-bg: linear-gradient(90deg, #ff2db2 0%, #8a3ffc 45%, #2d5bff 100%);
    --th-sidebar-bg: linear-gradient(180deg, #fde8f6 0%, #f3f5ff 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="globalcom"][data-bs-theme="dark"] {
    --bs-primary: #7b6dff;
    --bs-primary-rgb: 123, 109, 255;
    --th-topbar-bg: linear-gradient(90deg, #ff2db2 0%, #8a3ffc 45%, #2d5bff 100%);
    --th-sidebar-bg: linear-gradient(180deg, #141124 0%, #0b1226 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
    --th-nav-active-bg: rgba(123, 109, 255, .18);
    --th-nav-active-color: #b7b0ff;
}

/* 3) Ocean Breeze */
html[data-th-scheme="ocean"][data-bs-theme="light"] {
    --bs-primary: #0077ff;
    --bs-primary-rgb: 0, 119, 255;
    --th-topbar-bg: linear-gradient(90deg, #00c2ff 0%, #0077ff 55%, #00ffd5 100%);
    --th-sidebar-bg: linear-gradient(180deg, #e8fbff 0%, #f4fbff 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="ocean"][data-bs-theme="dark"] {
    --bs-primary: #3aa0ff;
    --bs-primary-rgb: 58, 160, 255;
    --th-topbar-bg: linear-gradient(90deg, #00c2ff 0%, #0077ff 55%, #00ffd5 100%);
    --th-sidebar-bg: linear-gradient(180deg, #07121d 0%, #061a22 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

/* 4) Emerald Mint */
html[data-th-scheme="emerald"][data-bs-theme="light"] {
    --bs-primary: #12b981;
    --bs-primary-rgb: 18, 185, 129;
    --th-topbar-bg: linear-gradient(90deg, #00f5a0 0%, #12b981 50%, #2dd4bf 100%);
    --th-sidebar-bg: linear-gradient(180deg, #eafff6 0%, #f6fffb 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="emerald"][data-bs-theme="dark"] {
    --bs-primary: #34d399;
    --bs-primary-rgb: 52, 211, 153;
    --th-topbar-bg: linear-gradient(90deg, #00f5a0 0%, #12b981 50%, #2dd4bf 100%);
    --th-sidebar-bg: linear-gradient(180deg, #081b14 0%, #061a18 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

/* 5) Sunset Pop */
html[data-th-scheme="sunset"][data-bs-theme="light"] {
    --bs-primary: #ff5a5f;
    --bs-primary-rgb: 255, 90, 95;
    --th-topbar-bg: linear-gradient(90deg, #ff3d6e 0%, #ff8a00 55%, #ffd166 100%);
    --th-sidebar-bg: linear-gradient(180deg, #fff1f3 0%, #fff8ee 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="sunset"][data-bs-theme="dark"] {
    --bs-primary: #ff6b6f;
    --bs-primary-rgb: 255, 107, 111;
    --th-topbar-bg: linear-gradient(90deg, #ff3d6e 0%, #ff8a00 55%, #ffd166 100%);
    --th-sidebar-bg: linear-gradient(180deg, #1a0b12 0%, #1a1207 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

/* 6) Royal Grape */
html[data-th-scheme="grape"][data-bs-theme="light"] {
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --th-topbar-bg: linear-gradient(90deg, #ff4ecd 0%, #7c3aed 55%, #3b82f6 100%);
    --th-sidebar-bg: linear-gradient(180deg, #f4edff 0%, #f7f6ff 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="grape"][data-bs-theme="dark"] {
    --bs-primary: #9b6bff;
    --bs-primary-rgb: 155, 107, 255;
    --th-topbar-bg: linear-gradient(90deg, #ff4ecd 0%, #7c3aed 55%, #3b82f6 100%);
    --th-sidebar-bg: linear-gradient(180deg, #120a1f 0%, #0a1020 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

/* 7) Copper Clay */
html[data-th-scheme="copper"][data-bs-theme="light"] {
    --bs-primary: #b45309;
    --bs-primary-rgb: 180, 83, 9;
    --th-topbar-bg: linear-gradient(90deg, #ff6a3d 0%, #b45309 55%, #f59e0b 100%);
    --th-sidebar-bg: linear-gradient(180deg, #fff3ea 0%, #fffaf3 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="copper"][data-bs-theme="dark"] {
    --bs-primary: #f59e0b;
    --bs-primary-rgb: 245, 158, 11;
    --th-topbar-bg: linear-gradient(90deg, #ff6a3d 0%, #b45309 55%, #f59e0b 100%);
    --th-sidebar-bg: linear-gradient(180deg, #1a0f09 0%, #141006 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

/* 8) Forest Night */
html[data-th-scheme="forest"][data-bs-theme="light"] {
    --bs-primary: #166534;
    --bs-primary-rgb: 22, 101, 52;
    --th-topbar-bg: linear-gradient(90deg, #22c55e 0%, #166534 55%, #0ea5e9 100%);
    --th-sidebar-bg: linear-gradient(180deg, #ecfff2 0%, #f6fffb 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="forest"][data-bs-theme="dark"] {
    --bs-primary: #22c55e;
    --bs-primary-rgb: 34, 197, 94;
    --th-topbar-bg: linear-gradient(90deg, #22c55e 0%, #166534 55%, #0ea5e9 100%);
    --th-sidebar-bg: linear-gradient(180deg, #07140b 0%, #06131a 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

/* 9) Slate Ice */
html[data-th-scheme="slate"][data-bs-theme="light"] {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --th-topbar-bg: linear-gradient(90deg, #0ea5e9 0%, #2563eb 55%, #64748b 100%);
    --th-sidebar-bg: linear-gradient(180deg, #eef4ff 0%, #f7f9ff 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="slate"][data-bs-theme="dark"] {
    --bs-primary: #60a5fa;
    --bs-primary-rgb: 96, 165, 250;
    --th-topbar-bg: linear-gradient(90deg, #0ea5e9 0%, #2563eb 55%, #64748b 100%);
    --th-sidebar-bg: linear-gradient(180deg, #0b1220 0%, #0a1320 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

/* 10) Rose Quartz */
html[data-th-scheme="rose"][data-bs-theme="light"] {
    --bs-primary: #db2777;
    --bs-primary-rgb: 219, 39, 119;
    --th-topbar-bg: linear-gradient(90deg, #ff2db2 0%, #db2777 55%, #fb7185 100%);
    --th-sidebar-bg: linear-gradient(180deg, #ffe8f3 0%, #fff5f8 100%);
    --th-sidebar-border: rgba(0,0,0,.08);
}

html[data-th-scheme="rose"][data-bs-theme="dark"] {
    --bs-primary: #fb7185;
    --bs-primary-rgb: 251, 113, 133;
    --th-topbar-bg: linear-gradient(90deg, #ff2db2 0%, #db2777 55%, #fb7185 100%);
    --th-sidebar-bg: linear-gradient(180deg, #1a0b12 0%, #14070c 100%);
    --th-sidebar-border: rgba(255,255,255,.10);
}

html[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] input[type="date"],
html[data-bs-theme="dark"] input[type="time"],
html[data-bs-theme="dark"] input[type="datetime-local"],
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    color-scheme: dark;
}

html[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .85;
}

/* -----------------------------
   Base layout
------------------------------ */

html, body {
    height: 100%;
}

.th-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.th-topbar {
    background: var(--th-topbar-bg);
    position: sticky;
    top: 0;
    z-index: 1035;
}

.th-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* Sidebar (desktop) */
.th-sidebar {
    width: var(--th-sidebar-width);
    flex: 0 0 var(--th-sidebar-width);
    border-right: 1px solid var(--th-sidebar-border);
    background: var(--th-sidebar-bg);
}

@media (max-width: 991.98px) {
    .th-sidebar {
        display: none;
    }
}

.th-sidebar-inner {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
}

.th-sidebar-nav {
    flex: 1 1 auto;
}

.th-sidebar-footer {
    flex: 0 0 auto;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Main content */
.th-main {
    flex: 1;
    min-width: 0;
}

.th-content {
    padding: 1rem;
}

/* Sidebar nav links */
.th-nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border-radius: .5rem;
    text-decoration: none;
    color: var(--bs-body-color);
}

    .th-nav-link:hover {
        background: var(--bs-tertiary-bg);
        color: var(--bs-body-color);
    }

    .th-nav-link.active {
        background: var(--th-nav-active-bg);
        color: var(--th-nav-active-color);
        font-weight: 600;
    }

    .th-nav-link.disabled {
        opacity: .55;
        pointer-events: none;
    }

.th-nav-spaced {
    margin-top: .35rem;
}

.th-nav-utility {
    margin-top: .75rem;
    font-size: .85rem;
    opacity: .85;
}

/* Footer */
.th-footer {
    padding: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.th-clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.th-sidebar-footer .fw-semibold {
    font-size: 0.9rem;
}

.th-logo {
    height: var(--th-logo-height, 40px) !important;
    max-height: var(--th-logo-height, 40px) !important;
    width: auto !important;
    max-width: 240px;
    object-fit: contain;
}

.navbar img.th-logo {
    vertical-align: middle;
}

.th-topbar {
    min-height: 56px;
}

/* -----------------------------
   Collapsible sidebar groups
   (Fix: reset button appearance so it doesn't look like a broken dropdown)
------------------------------ */

.th-nav-group-toggle {
    /* HARD RESET: kill default button styling */
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    /* actual desired layout */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .625rem !important;
    margin: 1rem 0 .25rem 0 !important;
    border-radius: .5rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font: inherit;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
}

    .th-nav-group-toggle:hover {
        background: var(--bs-tertiary-bg) !important;
    }

    .th-nav-group-toggle:focus {
        outline: none;
        box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .20);
    }

    .th-nav-group-toggle .th-nav-caret {
        font-size: .85rem;
        opacity: .85;
        transition: transform .15s ease-in-out;
    }

    .th-nav-group-toggle:not(.collapsed) .th-nav-caret {
        transform: rotate(180deg);
    }

.th-nav-group-items {
    margin: .25rem 0 .5rem 0;
}

.th-nav-sub {
    padding-left: 1.25rem;
    font-size: .95rem;
}

.th-nav-section-item {
    font-size: .8rem;
    font-weight: 600;
}


.th-nav-subgroup-toggle {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .625rem .45rem 1rem;
    margin: .15rem 0;
    border-radius: .5rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    text-align: left;
}

    .th-nav-subgroup-toggle:hover {
        background: var(--bs-tertiary-bg);
    }

    .th-nav-subgroup-toggle:focus {
        outline: none;
        box-shadow: 0 0 0 .18rem rgba(var(--bs-primary-rgb), .18);
    }

    .th-nav-subgroup-toggle .th-nav-caret {
        font-size: .8rem;
        opacity: .85;
        transition: transform .15s ease-in-out;
    }

    .th-nav-subgroup-toggle:not(.collapsed) .th-nav-caret {
        transform: rotate(180deg);
    }

.th-nav-subgroup-items {
    margin: .125rem 0 .5rem .35rem;
    padding-left: .55rem;
    border-left: 1px solid rgba(var(--bs-primary-rgb), .16);
}

.th-nav-sublevel {
    padding-left: 1rem;
    font-size: .95rem;
}

.th-attendance-state {
    min-width: 210px;
    padding: .55rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
}

.th-announcement-ticker {
    overflow: hidden;
    border: 1px solid rgba(var(--bs-primary-rgb), .28);
    border-radius: .5rem;
    background: rgba(var(--bs-primary-rgb), .10);
}

.th-announcement-ticker-global {
    position: fixed;
    top: 56px;
    left: var(--th-sidebar-width);
    right: 0;
    z-index: 1020;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
}

.th-announcement-track {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    min-width: 100%;
    white-space: nowrap;
    padding: .55rem 0;
    animation: th-announcement-scroll 32s linear infinite;
}

.th-announcement-ticker-global .th-announcement-track {
    padding: .35rem 0;
    pointer-events: auto;
}

.th-announcement-ticker:hover .th-announcement-track,
.th-announcement-ticker:focus-within .th-announcement-track {
    animation-play-state: paused;
}

.th-announcement-item {
    display: inline-flex;
    align-items: center;
    color: var(--bs-body-color);
}

.th-announcement-item::before {
    content: "Announcement";
    margin: 0 .75rem 0 1rem;
    padding: .15rem .45rem;
    border-radius: .35rem;
    background: var(--bs-primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.th-announcement-item a {
    color: var(--bs-link-color);
    font-weight: 600;
}

@keyframes th-announcement-scroll {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

@media (max-width: 991.98px) {
    .th-announcement-ticker-global {
        left: 0;
    }
}

.th-employee-photo-panel {
    display: flex;
    align-items: center;
}

.th-employee-record-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.th-employee-photo-wrap {
    position: relative;
    display: inline-flex;
}

.th-employee-photo {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-tertiary-bg);
}

.th-employee-photo-wrap-terminated::before,
.th-employee-photo-wrap-terminated::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 138%;
    height: 9px;
    border-radius: 999px;
    background: rgba(220, 53, 69, .9);
    transform-origin: center;
    pointer-events: none;
}

.th-employee-photo-wrap-terminated::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.th-employee-photo-wrap-terminated::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}


/* Dashboard */
.th-dashboard-filters { min-width: min(100%, 820px); }
.th-kpi-card { border-radius: 1rem; }
.th-kpi-label { font-size: .85rem; color: var(--bs-secondary-color); margin-bottom: .35rem; }
.th-kpi-value { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; line-height: 1; }
.th-bar-row { margin-bottom: 1rem; }
.th-bar-track {
    width: 100%;
    height: .7rem;
    background: rgba(var(--bs-primary-rgb), .10);
    border-radius: 999px;
    overflow: hidden;
}
.th-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .75), rgba(var(--bs-primary-rgb), 1));
    border-radius: 999px;
}
.th-bar-fill-accent {
    background: linear-gradient(90deg, rgba(255, 107, 111, .65), rgba(255, 107, 111, 1));
}
.th-bar-fill-success {
    background: linear-gradient(90deg, rgba(16, 185, 129, .65), rgba(16, 185, 129, 1));
}
.th-bar-fill-warning {
    background: linear-gradient(90deg, rgba(245, 158, 11, .65), rgba(245, 158, 11, 1));
}

.th-footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .35rem;
}

.th-legal-page {
    max-width: 980px;
    margin: 0 auto;
}

.th-legal-hero {
    padding: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-tertiary-bg);
    margin-bottom: 1.5rem;
}

.th-legal-hero h1 {
    margin: 0;
    font-weight: 800;
}

.th-legal-content {
    padding: 2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 1rem;
    background: var(--bs-body-bg);
}

.th-legal-content h2 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-size: 1.35rem;
    font-weight: 750;
}

.th-legal-content h3 {
    margin-top: 1.25rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.th-legal-template {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
}