/*
 * Project overrides on top of the Thunder AI theme.
 * Mainly dark-mode polish: our Blade pages use hard-coded light Bootstrap
 * utilities (bg-white headers, table-light heads) that must follow the theme
 * surface colour when dark mode is active.
 */
[data-bs-theme="dark"] .card-header.bg-white,
[data-bs-theme="dark"] .card-footer.bg-white,
[data-bs-theme="dark"] .modal-content .bg-white {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] thead.table-light th {
    --bs-table-bg: var(--bs-card-bg);
    --bs-table-color: var(--bs-body-color);
    color: var(--bs-body-color);
}

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

/* Initials avatar in the employee table keeps its primary fill in both modes. */
.avatar.bg-primary { color: #fff !important; }

/* Auth separator: "──── text ────" with a line on each side. */
.text-divider {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 1rem;
}
.text-divider::before,
.text-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: rgba(128, 128, 128, .4);
}

/* Plan-limit upgrade notice (Employees page) — soft branded tint rather
   than a stock warning-yellow alert, since this is a "nudge to upgrade"
   notice, not an error. */
.upgrade-notice-card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 8%, transparent), color-mix(in srgb, var(--bs-primary) 3%, transparent));
    border: 1px solid color-mix(in srgb, var(--bs-primary) 18%, transparent) !important;
}
.upgrade-notice-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--bs-primary) 15%, transparent);
    color: var(--bs-primary);
    font-size: 1.15rem;
}
@media (max-width: 575.98px) {
    .upgrade-notice-card .card-body { text-align: center; justify-content: center; }
    .upgrade-notice-card .btn { width: 100%; }
}

/* ==========================================================================
   Premium design-system layer
   --------------------------------------------------------------------------
   Everything below is a pure visual pass on top of the existing Thunder AI
   theme + Bootstrap. Nothing here changes markup structure, routes, or
   behaviour — every admin page extends admin.layouts.app and pulls in
   Bootstrap utility classes, so token + component refinements made once
   here reach all ~40 screens automatically. Kept in `!important`-light,
   additive rules that respect whichever `--bs-primary` skin is active
   (see common.js theme-color switcher) rather than hardcoding a new brand
   colour.
   ========================================================================== */

:root {
    /* Neutral scale — calmer, less saturated than Bootstrap's stock greys,
       closer to the Linear/Vercel/Stripe "cool slate" family. */
    --surface-0: #ffffff;
    --surface-1: #f8f9fb;
    --surface-2: #f1f3f6;
    --border-subtle: #e7e9ee;
    --border-default: #dde1e8;
    --text-strong: #14161a;
    --text-default: #3c4149;
    --text-muted: #6b7280;

    /* Elevation — soft, layered shadows instead of Bootstrap's harsh default. */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .04);

    /* Motion — fast and consistent, never sluggish. */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
}

[data-bs-theme="dark"] {
    --surface-0: var(--bs-body-bg);
    --surface-1: color-mix(in srgb, var(--bs-body-bg) 92%, white 8%);
    --surface-2: color-mix(in srgb, var(--bs-body-bg) 85%, white 15%);
    --border-subtle: color-mix(in srgb, var(--bs-body-color) 12%, transparent);
    --border-default: color-mix(in srgb, var(--bs-body-color) 18%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -- Typography ------------------------------------------------------- */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-default);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.page-name { letter-spacing: -0.01em; }

small, .small { letter-spacing: 0; }

.text-muted { color: var(--text-muted) !important; }

/* -- Focus & accessibility -------------------------------------------- */

a, button, .btn, .form-control, .form-select, .form-check-input,
.dropdown-toggle, .nav-link, [tabindex] {
    outline-color: var(--bs-primary);
}
a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible,
.nav-link:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* -- Buttons ------------------------------------------------------------ */

.btn {
    font-weight: 600;
    letter-spacing: 0;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                filter var(--dur-fast) var(--ease-out);
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: scale(0.97); }
.btn-primary, .btn-success, .btn-danger {
    box-shadow: var(--shadow-xs);
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover {
    box-shadow: var(--shadow-sm);
}
.btn.disabled, .btn:disabled { transform: none; filter: none; }

/* -- Cards ---------------------------------------------------------------
   Existing pages already use `border-0 shadow-sm` liberally (Plan Limits,
   Billing, Organization Profile) — refine what that resolves to instead of
   changing every blade file's classes. */

.card {
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow var(--dur-base) var(--ease-out);
}
.card.shadow-sm { box-shadow: var(--shadow-sm) !important; }
a.card:hover, .card[role="button"]:hover, .card-hover:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px);
}

/* -- Badges & alerts — soft "tinted" style instead of solid saturated
   fills, the pattern used by Linear/Stripe/GitHub for status pills. ---- */

.badge {
    font-weight: 600;
    letter-spacing: .01em;
    padding: .4em .7em;
}
.badge.text-bg-primary { background-color: color-mix(in srgb, var(--bs-primary) 14%, transparent) !important; color: var(--bs-primary) !important; }
.badge.text-bg-success { background-color: color-mix(in srgb, var(--bs-success) 14%, transparent) !important; color: var(--bs-success) !important; }
.badge.text-bg-warning { background-color: color-mix(in srgb, var(--bs-warning) 22%, transparent) !important; color: #8a5a00 !important; }
.badge.text-bg-danger  { background-color: color-mix(in srgb, var(--bs-danger) 14%, transparent) !important; color: var(--bs-danger) !important; }
.badge.text-bg-secondary { background-color: var(--surface-2) !important; color: var(--text-muted) !important; }

.alert {
    border: 1px solid transparent;
    box-shadow: var(--shadow-xs);
}

/* -- Tables --------------------------------------------------------------
   Applies to every admin list page (Employees, Departments, Attendance,
   Plan Limits, etc.) since they all reuse `.table`. */

.table > thead {
    background: var(--surface-1);
}
.table > thead th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.table > tbody > tr {
    transition: background-color var(--dur-fast) var(--ease-out);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--surface-1);
}
.table > :not(caption) > * > * { padding-top: .75rem; padding-bottom: .75rem; }

/* Clickable table rows (e.g. Organizations list) — `.cursor-pointer` was
   referenced in markup but never actually defined, so rows never showed a
   pointer cursor despite being clickable via onclick navigation. */
.cursor-pointer { cursor: pointer; }
.cursor-pointer:hover .fw-semibold { color: var(--bs-primary); }

/* -- Forms ------------------------------------------------------------ */

.form-control, .form-select {
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.form-control:focus, .form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 18%, transparent);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-danger) 18%, transparent);
}
.form-label { font-weight: 600; font-size: .875rem; color: var(--text-default); }
.form-text { color: var(--text-muted); }

/* -- Dropdown menus ------------------------------------------------------ */

.dropdown-menu {
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-lg) !important;
    animation: dropdown-in var(--dur-base) var(--ease-out);
}
@keyframes dropdown-in {
    /* Opacity-only: Popper already controls this element's `transform` for
       positioning, so animating transform here fights it and causes a
       visible jerk/snap right as the animation finishes. */
    from { opacity: 0; }
    to   { opacity: 1; }
}
.dropdown-item {
    transition: background-color var(--dur-fast) var(--ease-out);
    border-radius: .5rem;
}

/* -- Modals ------------------------------------------------------------ */

.modal-content { box-shadow: var(--shadow-lg); border: none; }
.modal.fade .modal-dialog { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }

/* -- Sidebar -------------------------------------------------------------
   Smoother active/hover states than the stock theme, without touching the
   collapse/toggle JS behaviour. */

/* -- Sidebar width: +10% over the theme's stock 245px -------------------- */
:root {
    --sidebar-width: 270px;
}
.left-sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
}
.content-area {
    min-width: calc(100% - var(--sidebar-width));
}

/* Header logo column matches the sidebar width so the divider below it
   lines up with the sidebar/content boundary instead of floating loose. */
.header .logo .brand-link {
    width: var(--sidebar-width);
    box-sizing: border-box;
}

.left-sidebar .nav-sidebar .nav-item::before {
    display: none; /* remove decorative tree-connector lines for a flatter, more professional look */
}
.left-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    white-space: nowrap;
    padding: .65rem .85rem;
    margin: .2rem 0;
    border-radius: .6rem;
    color: var(--text-default);
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all var(--dur-base) var(--ease-out);
}
.left-sidebar .nav-link i {
    transition: all var(--dur-base) var(--ease-out);
    flex-shrink: 0;
}
.left-sidebar .nav-link:hover {
    background-color: var(--surface-1);
    color: var(--bs-primary);
    padding-left: 1rem;
    border-left-color: var(--bs-primary);
}
.left-sidebar .nav-link:hover i {
    transform: translateX(2px);
}
.left-sidebar .nav-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}
.left-sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #0d5fd1 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-left-color: rgba(255, 255, 255, 0.4);
    padding-left: 0.85rem;
}
.left-sidebar .nav-link.active i {
    color: #fff;
    font-weight: 700;
}

/* -- Header / profile dropdown ------------------------------------------ */

.header { box-shadow: var(--shadow-xs); }

/* Organization section in header */
.header .logo .border-start {
    border-left: 2px solid var(--border-subtle) !important;
    padding-left: 1.2rem !important;
    margin-left: 0.75rem !important;
    transition: all var(--dur-base) var(--ease-out);
}

.header .logo .border-start:hover {
    border-left-color: var(--bs-primary) !important;
}

.header .logo .border-start span {
    font-weight: 500;
    color: var(--text-default);
    transition: color var(--dur-base) var(--ease-out);
}

.header .logo .border-start:hover span {
    color: var(--bs-primary);
}

.header .logo .border-start img {
    transition: box-shadow var(--dur-base) var(--ease-out);
}

.header .logo .border-start:hover img {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary) 15%, transparent);
}

.profile-dropdown img { transition: box-shadow var(--dur-fast) var(--ease-out); }
.profile-dropdown:hover img { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-primary) 20%, transparent); }

/* -- Billing: "Available upgrade" cards --------------------------------- */

.upgrade-option-card {
    border-color: var(--border-subtle);
    transition: box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}
.upgrade-option-card:hover {
    border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--border-subtle));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.upgrade-option-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    color: var(--bs-primary);
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
}

/* -- Layout: fixed header/sidebar, content-area scrolls independently ----
   Header, the impersonation banner, and the breadcrumbs bar stay put;
   only .content-area scrolls. The sidebar gets its own independent
   scroll too (sticky within the remaining height) so a long nav list
   doesn't push the page around.

   Desktop only (>=992px) — mobile's sidebar is a separate off-canvas
   overlay (see responsive.css, position:fixed there already), which is
   already independent of page scroll and is left untouched here. */

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#header,
.impersonation-banner,
.page-breadcrumbs {
    flex-shrink: 0;
}

.content-wrapper {
    flex: 1 1 auto;
    min-height: 0; /* let this flex item shrink below its content size so overflow can actually kick in */
    overflow: hidden;
}

.content-area {
    height: 100%;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .left-sidebar {
        position: sticky;
        top: 0;
        height: 100%;
        overflow-y: auto;
    }
}

/* -- Skeleton loader primitive --------------------------------------------
   Reusable shimmer block: <div class="skeleton" style="width:120px;height:1rem"></div>
   Not yet wired into every async fetch — dropped in here so it's available
   to adopt page-by-page without another CSS pass. */

.skeleton {
    display: block;
    border-radius: .4rem;
    background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 37%, var(--surface-1) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* -- Empty states ----------------------------------------------------------
   Utility classes for a consistent "nothing here yet" layout: icon circle +
   message + CTA. Opt-in per page (see admin.plan-limits.index for a usage
   note) — not auto-applied so existing empty-state markup isn't touched
   sight-unseen. */

.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state-icon {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-1);
    color: var(--text-muted);
    font-size: 1.5rem;
}
.empty-state-title { font-weight: 700; color: var(--text-strong); margin-bottom: .25rem; }
.empty-state-body { color: var(--text-muted); max-width: 32rem; margin: 0 auto 1.25rem; }

/* -- Monthly Attendance Matrix -------------------------------------------
   Every employee × every day of the month. Sticky employee column so it
   stays visible while scrolling horizontally through a full month. Kept
   to plain table markup (no per-cell JS) since a large roster × 31 days
   is already hundreds of cells — anything heavier per cell would hurt
   render performance. */

.attendance-matrix-wrapper {
    overflow-x: auto;
    border-top: 1px solid var(--border-subtle);
}
.attendance-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8rem;
    width: max-content;
}
.attendance-matrix th,
.attendance-matrix td {
    padding: .45rem .4rem;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-subtle);
}
.attendance-matrix thead th {
    background: var(--surface-1);
    font-weight: 600;
    color: var(--text-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    position: sticky;
    top: 0;
    z-index: 1;
}
.attendance-matrix .att-emp-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--surface-0);
    text-align: left;
    min-width: 180px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 1px 0 0 var(--border-subtle);
}
.attendance-matrix thead .att-emp-col {
    z-index: 3;
    background: var(--surface-1);
}
.attendance-matrix .att-day-col { min-width: 38px; }
.attendance-matrix .att-summary-col { min-width: 64px; }
.attendance-matrix .att-today { background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }
.attendance-matrix .att-weekend:not(.att-today) { background: var(--surface-1); }
.attendance-matrix tbody tr:hover td:not(.att-emp-col) { background: var(--surface-1); }
.attendance-matrix tbody tr:hover td.att-emp-col { background: var(--surface-1); }

/* Collapsed weekend block: consecutive Sat/Sun day-columns merge into one
   cell (colspan across the run's dates, rowspan down every employee row)
   with a centered vertical "Weekend" label, instead of repeating the word
   in every row × every weekend column. */
.attendance-matrix .att-weekend-block {
    background: var(--surface-1);
    border-left: 1px dashed var(--border-subtle);
    border-right: 1px dashed var(--border-subtle);
    vertical-align: middle;
}
.attendance-matrix tbody tr:hover td.att-weekend-block { background: var(--surface-1); }
.att-weekend-label {
    writing-mode: sideways-lr;
    text-orientation: mixed;
    display: inline-block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.att-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 .25rem;
    border-radius: .4rem;
    font-size: .66rem;
    font-weight: 700;
}
.att-present { background: color-mix(in srgb, var(--bs-success) 18%, transparent); color: var(--bs-success); }
.att-late { background: color-mix(in srgb, var(--bs-warning) 26%, transparent); color: #8a5a00; }
.att-halfday { background: color-mix(in srgb, #0dcaf0 22%, transparent); color: #087990; }
.att-working { background: color-mix(in srgb, var(--bs-primary) 18%, transparent); color: var(--bs-primary); }
.att-pending-review { background: color-mix(in srgb, var(--bs-danger) 26%, transparent); color: var(--bs-danger); }
.att-leave { background: color-mix(in srgb, #6f42c1 18%, transparent); color: #6f42c1; }
.att-holiday { background: color-mix(in srgb, var(--bs-primary) 16%, transparent); color: var(--bs-primary); }
.att-absent { background: color-mix(in srgb, var(--bs-danger) 16%, transparent); color: var(--bs-danger); }
.att-shortfall { background: color-mix(in srgb, var(--bs-warning) 18%, transparent); color: #8a5a00; }