/**
 * ============================================================================
 * RELIANT SURVEYORS — OPS PORTAL THEME
 * Brand #0B2DBE on white · minimal, flat, high-contrast
 * ----------------------------------------------------------------------------
 * Loaded LAST in includes/header.php. Replaces valunxt-theme.css and overrides
 * style.css, modern-theme.css and reference-theme.css through the cascade.
 * The older files are kept only for structural/layout rules.
 * ============================================================================
 */

/* ---------------------------------------------------------------------------
 * 1 · DESIGN TOKENS
 * ------------------------------------------------------------------------- */
:root {
    /* Brand — #0B2DBE */
    --brand:       #0B2DBE;
    --brand-hover: #0924A0;
    --brand-press: #071C80;
    --brand-ink:   #061A72;
    --brand-50:    #F1F3FF;
    --brand-100:   #E2E7FF;
    --brand-200:   #C5CEFF;
    --brand-300:   #9CAAFF;
    --brand-ring:  rgba(11, 45, 190, .16);

    /* Logo red — used for destructive/critical so the UI stays on-brand */
    --logo-red:    #E31836;

    /* Ink */
    --ink:   #0C1222;
    --ink-2: #3B4559;
    --ink-3: #6A7488;
    --ink-4: #98A1B3;

    /* Surfaces */
    --bg:        #F6F7FB;
    --surface:   #FFFFFF;
    --surface-2: #FAFBFD;
    --line:      #E7EAF2;
    --line-2:    #F0F2F7;

    /* Semantic */
    --success: #0F9D58; --success-soft: #E7F6EE; --success-ink: #0A6B3C;
    --warning: #D97706; --warning-soft: #FEF3E2; --warning-ink: #92500A;
    --danger:  #E31836; --danger-soft:  #FDECEF; --danger-ink:  #A51025;
    --info:    #0B2DBE; --info-soft:    #F1F3FF; --info-ink:    #071C80;

    /* Radii — tight and even */
    --radius-sm: 7px;
    --radius:    9px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    /* Shadows — barely there */
    --shadow-xs: 0 1px 2px rgba(12, 18, 34, .04);
    --shadow-sm: 0 1px 3px rgba(12, 18, 34, .06);
    --shadow:    0 4px 12px rgba(12, 18, 34, .07);
    --shadow-lg: 0 12px 32px rgba(12, 18, 34, .10);

    --sidebar-width: 252px;
    --topbar-height: 66px;

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
    --transition-slow: 260ms cubic-bezier(.16, 1, .3, 1);
}

/* Remap every legacy token family so the older stylesheets inherit the rebrand */
:root {
    --primary-50:  var(--brand-50);
    --primary-100: var(--brand-100);
    --primary-200: var(--brand-200);
    --primary-300: var(--brand-300);
    --primary-400: #4560E0;
    --primary-500: var(--brand);
    --primary-600: var(--brand);
    --primary-700: var(--brand-hover);
    --primary-800: var(--brand-press);
    --primary-900: var(--brand-ink);

    --brand-primary:       var(--brand);
    --brand-primary-hover: var(--brand-hover);
    --brand-primary-light: var(--brand-50);

    --brand-navy-50:  var(--brand-50);   --brand-navy-100: var(--brand-100);
    --brand-navy-200: var(--brand-200);  --brand-navy-300: var(--brand-300);
    --brand-navy-400: #4560E0;           --brand-navy-500: var(--brand);
    --brand-navy-600: var(--brand);      --brand-navy-700: var(--brand-hover);
    --brand-navy-800: var(--brand-press);--brand-navy-900: var(--brand-ink);
    --brand-navy-950: #050F4F;

    --success-50: var(--success-soft); --success-100: var(--success-soft);
    --success-500: var(--success);     --success-600: var(--success-ink);
    --success-700: var(--success-ink); --success-light: var(--success-soft);
    --success-dark: var(--success-ink);
    --warning-50: var(--warning-soft); --warning-100: var(--warning-soft);
    --warning-500: var(--warning);     --warning-600: var(--warning-ink);
    --warning-light: var(--warning-soft); --warning-dark: var(--warning-ink);
    --danger-50: var(--danger-soft);   --danger-100: var(--danger-soft);
    --danger-500: var(--danger);       --danger-600: var(--danger-ink);
    --danger-light: var(--danger-soft);--danger-dark: var(--danger-ink);
    --info-50: var(--info-soft);       --info-100: var(--info-soft);
    --info-500: var(--info);           --info-600: var(--info-ink);
    --info-light: var(--info-soft);    --info-dark: var(--info-ink);

    --status-success: var(--success); --status-success-bg: var(--success-soft);
    --status-warning: var(--warning); --status-warning-bg: var(--warning-soft);
    --status-danger:  var(--danger);  --status-danger-bg:  var(--danger-soft);
    --status-info:    var(--info);    --status-info-bg:    var(--info-soft);

    --gray-25: #FCFCFE; --gray-50: #F7F8FB; --gray-100: var(--line-2);
    --gray-200: var(--line); --gray-300: #D6DAE6; --gray-400: var(--ink-4);
    --gray-500: var(--ink-3); --gray-600: var(--ink-2); --gray-700: #2A3346;
    --gray-800: #1A2133; --gray-900: var(--ink);

    --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3);
    --bg-primary: var(--surface); --bg-secondary: var(--bg); --bg-tertiary: var(--surface-2);
    --border-light: var(--line-2); --border-medium: var(--line); --border-dark: #D6DAE6;

    --sidebar-bg: var(--brand); --sidebar-bg-darker: var(--brand-hover);
    --sidebar-text: rgba(255,255,255,.84); --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255,255,255,.12); --sidebar-active: #ffffff;
    --sidebar-border: rgba(255,255,255,.14);

    --shadow-xs: 0 1px 2px rgba(12,18,34,.04);
    --shadow-md: var(--shadow); --shadow-xl: var(--shadow-lg);
    --shadow-2xl: var(--shadow-lg);
    --shadow-blue: 0 4px 14px rgba(11,45,190,.22);
    --shadow-blue-lg: 0 10px 28px rgba(11,45,190,.26);
    --shadow-brand: 0 4px 14px rgba(11,45,190,.22);
    --radius-md: var(--radius); --radius-2xl: var(--radius-xl); --radius-3xl: 22px;
}

/* ---------------------------------------------------------------------------
 * 2 · BASE
 * ------------------------------------------------------------------------- */
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: var(--bg) !important;
    color: var(--ink) !important;
    font-size: 14px;
    line-height: 1.55;
    letter-spacing: -0.006em;
    min-height: 100vh;
}
body::before { display: none !important; content: none !important; }

h1, h2, h3, h4, h5, h6 {
    font-weight: 650;
    letter-spacing: -0.021em;
    color: var(--ink);
}
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.0625rem; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
::selection { background: var(--brand-100); color: var(--brand-ink); }

.text-muted  { color: var(--ink-3) !important; }
.text-success{ color: var(--success-ink) !important; }
.text-danger { color: var(--danger-ink) !important; }
.text-warning{ color: var(--warning-ink) !important; }
.text-primary{ color: var(--brand) !important; }
.font-bold, .font-semibold { letter-spacing: -0.012em; }

/* Focus visibility */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: #CBD2E0 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #CBD2E0; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #AEB7C9; background-clip: content-box; }

/* ---------------------------------------------------------------------------
 * 3 · ICONS — Phosphor regular, uniform optical size
 * ------------------------------------------------------------------------- */
i[class*="ph-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    vertical-align: -0.18em;
    flex-shrink: 0;
}
.btn i[class*="ph-"]        { font-size: 16px; }
.btn-sm i[class*="ph-"]     { font-size: 15px; }
.badge i[class*="ph-"]      { font-size: 13px; }
.nav-item i[class*="ph-"]   { font-size: 19px; }
.card-title i[class*="ph-"] { font-size: 18px; color: var(--brand); }
.stat-icon i[class*="ph-"]  { font-size: 20px; }
.topbar-btn i[class*="ph-"] { font-size: 19px; }

/* ---------------------------------------------------------------------------
 * 4 · LAYOUT
 * ------------------------------------------------------------------------- */
.app-container { background: var(--bg); }
.main-content  { margin-left: var(--sidebar-width) !important; background: transparent; }
.content       { background: transparent; padding: 24px 28px 40px !important; } /* uncapped: the topbar is full-width, so a capped column left a dead right gutter */

/* ---------------------------------------------------------------------------
 * 5 · SIDEBAR — solid brand blue, white logo panel, white active pill
 * ------------------------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-width) !important;
    background: var(--brand) !important;
    border-right: none !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.85) !important;
    display: flex; flex-direction: column;
}

.sidebar-header {
    padding: 16px 16px 14px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    display: flex; align-items: center; gap: 10px;
    min-height: auto;
}
/* The lockup carries its own red/navy, so it sits on a white panel to stay legible */
.sidebar-logo-img {
    display: block;
    width: 70%;            /* the owner asked for the lockup about 30% smaller */
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    background: #fff;
    padding: 6px 7px;
    border-radius: var(--radius-sm);
}
.sidebar-logo, .sidebar-brand { display: none !important; }

.sidebar-nav { padding: 12px 10px; flex: 1; overflow-y: auto; }

.nav-section-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .1em !important;
    color: rgba(255,255,255,.52) !important;
    padding: 16px 10px 6px !important;
}
.nav-divider { height: 1px; background: rgba(255,255,255,.14) !important; margin: 8px 10px; border: none; }

.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px !important;
    margin: 1px 0;
    border-radius: var(--radius) !important;
    color: rgba(255,255,255,.84) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    position: relative;
    transition: background var(--transition), color var(--transition);
}
.nav-item i { color: rgba(255,255,255,.74) !important; transition: color var(--transition); }
.nav-item:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.nav-item:hover i { color: #fff !important; }

.nav-item.active {
    background: #fff !important;
    color: var(--brand) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.nav-item.active i { color: var(--brand) !important; }

.nav-badge {
    margin-left: auto;
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: var(--radius-full);
    min-width: 18px; text-align: center; line-height: 1.5;
}
.nav-item.active .nav-badge { background: var(--brand) !important; color: #fff !important; }
.nav-badge.live {
    background: #23C27B !important; color: #04371F !important;
    animation: rs-pulse 2s infinite;
}
@keyframes rs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(35,194,123,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(35,194,123,0); }
    100% { box-shadow: 0 0 0 0 rgba(35,194,123,0); }
}

/* Sidebar footer */
.sidebar-footer {
    padding: 12px !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    background: transparent !important;
}
.sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: var(--radius);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.14);
}
.sidebar-user-name { color: #fff !important; font-weight: 600; font-size: 13px; }
.sidebar-user-role {
    color: rgba(255,255,255,.6) !important;
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.sidebar-avatar {
    background: #fff !important; color: var(--brand) !important;
    font-weight: 700; border-radius: var(--radius-sm) !important;
    display: flex; align-items: center; justify-content: center;
}
.sidebar-signout {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 8px; padding: 9px; border-radius: var(--radius);
    color: rgba(255,255,255,.88) !important;
    font-weight: 600; font-size: 12.5px;
    border: 1px solid rgba(255,255,255,.20);
    background: transparent;
    transition: var(--transition);
}
.sidebar-signout:hover {
    background: rgba(255,255,255,.16) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.32) !important;
}

/* Team-presence widget lives inside the blue sidebar — restyle it for that ground */
.presence-sidebar { border-top: 1px solid rgba(255,255,255,.14) !important; margin-top: 8px; padding-top: 10px; }
.presence-sidebar-header { padding: 4px 10px 6px !important; }
.presence-sidebar-title {
    color: rgba(255,255,255,.52) !important;
    font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .1em !important;
}
.presence-sidebar-count {
    background: rgba(255,255,255,.22) !important; color: #fff !important;
    border-radius: var(--radius-full) !important; font-weight: 700;
}
.presence-sidebar-item {
    background: transparent !important;
    border-radius: var(--radius) !important;
    padding: 7px 10px !important;
    transition: background var(--transition);
}
.presence-sidebar-item:hover { background: rgba(255,255,255,.12) !important; }
.presence-sidebar-name { color: #fff !important; font-weight: 600 !important; font-size: 12.5px !important; }
.presence-sidebar-task { color: rgba(255,255,255,.62) !important; font-size: 11px !important; }
.presence-sidebar-time { color: rgba(255,255,255,.62) !important; font-size: 11px !important; font-variant-numeric: tabular-nums; }
.presence-sidebar-status { border: 2px solid var(--brand) !important; }
.presence-sidebar-empty { color: rgba(255,255,255,.5) !important; font-size: 11.5px !important; }
.presence-sidebar-empty i { color: rgba(255,255,255,.35) !important; }
.presence-sidebar-expand a { color: rgba(255,255,255,.8) !important; font-weight: 600; border-radius: var(--radius) !important; }
.presence-sidebar-expand a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.presence-sidebar-live { background: #23C27B !important; }

/* ---------------------------------------------------------------------------
 * 6 · TOPBAR
 * ------------------------------------------------------------------------- */
.topbar {
    background: rgba(255,255,255,.88) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
    height: var(--topbar-height);
    position: sticky; top: 0; z-index: 40;
    padding: 0 28px !important;
}
.topbar-greeting { color: var(--ink) !important; font-weight: 650; font-size: 1rem; letter-spacing: -0.02em; }
.topbar-greeting span { color: var(--brand); }
.topbar-date { color: var(--ink-3) !important; font-size: 12.5px; }

/* One field, not a box in a box: the global input rule (border, fill, padding) is
   undone inside the wrapper, which draws the border and focus ring itself. Focusing
   the field opens the command palette, so the wrapper also shows the shortcut. */
.topbar-search {
    gap: 8px;
    height: 38px;
    padding: 0 7px 0 12px;
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    cursor: text;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.topbar-search:hover { border-color: #D6DAE6 !important; }
.topbar-search:focus-within {
    width: 280px;   /* modern-theme.css widens it to 320px and shoves the topbar */
    background: #fff !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.topbar-search i { color: var(--ink-4) !important; font-size: 17px; }
.topbar-search input[type="text"] {
    flex: 1; min-width: 0; height: 100%;
    padding: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    font-size: 13px !important; color: var(--ink) !important;
}
.topbar-search input[type="text"]:focus { border: 0 !important; box-shadow: none !important; }
.topbar-search input::placeholder { color: var(--ink-4); }
.topbar-search::after {
    content: "Ctrl K"; flex-shrink: 0;
    padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: #fff;
    font-size: 10.5px; font-weight: 600; line-height: 1.5; color: var(--ink-3);
}

.topbar-btn {
    position: relative;
    background: transparent !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    color: var(--ink-2) !important;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.topbar-btn:hover {
    background: var(--brand-50) !important;
    color: var(--brand) !important;
    border-color: var(--brand-200) !important;
    transform: none;   /* modern-theme.css lifts it 2px */
}
/* Help-requests trigger from includes/help-notifications.php, whose own later <style>
   draws a grey pill — the same 38px outline control as the bell instead */
.help-notif-button {
    height: 38px;
    padding: 0 12px !important;
    gap: 7px !important;
    background: transparent !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    color: var(--ink-2) !important;
    font-family: inherit; font-size: 13px; font-weight: 600;
    transition: var(--transition) !important;
}
.help-notif-button:hover {
    background: var(--brand-50) !important;
    color: var(--brand) !important;
    border-color: var(--brand-200) !important;
}
.help-notif-button.has-urgent {
    background: var(--danger-soft) !important;
    color: var(--danger-ink) !important;
    border-color: #F8CDD5 !important;
}
.notification-dot {
    position: absolute; top: 7px; right: 7px;
    background: var(--danger) !important;
    box-shadow: 0 0 0 2px #fff;
    width: 8px; height: 8px; border: 0; border-radius: 50%;
    animation: none;
}
/* Same 38px as the search field and the bell; !important beats the avatar's inline 36px */
.topbar-user {
    background: transparent; border: 1px solid var(--line);
    border-radius: var(--radius); height: 38px; padding: 0 11px 0 4px;
    display: flex; align-items: center; gap: 8px;
}
.topbar-user-name { color: var(--ink) !important; font-weight: 600; font-size: 13px; }
.topbar-user-avatar {
    width: 28px !important; height: 28px !important;
    min-width: 28px !important; min-height: 28px !important;
    max-width: 28px !important; max-height: 28px !important;
    background: var(--brand) !important;
    color: #fff !important; font-weight: 700; font-size: 11px;
    border-radius: 7px !important;
    display: flex; align-items: center; justify-content: center;
}

/* Notifications dropdown */
.notifications-dropdown, .help-notif-dropdown {
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    background: var(--surface) !important;
    overflow: hidden;
}
.notifications-header { border-bottom: 1px solid var(--line-2) !important; padding: 13px 16px !important; }
.notifications-title { font-weight: 650 !important; color: var(--ink) !important; }
.notification-item { border-bottom: 1px solid var(--line-2) !important; padding: 12px 16px !important; transition: var(--transition); }
.notification-item:hover { background: var(--surface-2) !important; }
.notification-item.unread { background: transparent !important; }
.notification-icon {
    width: 34px; height: 34px; border-radius: var(--radius-sm) !important;
    background: var(--brand-50) !important; color: var(--brand) !important;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.notification-icon.review  { background: var(--warning-soft) !important; color: var(--warning-ink) !important; }
.notification-icon.success { background: var(--success-soft) !important; color: var(--success-ink) !important; }
.notification-text { color: var(--ink) !important; font-weight: 550; font-size: 13px; }
.notification-time { color: var(--ink-4) !important; font-size: 11.5px; }

/* ---------------------------------------------------------------------------
 * 7 · CARDS
 * ------------------------------------------------------------------------- */
.card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow-sm) !important; }
.card-header {
    border-bottom: 1px solid var(--line-2) !important;
    background: transparent !important;
    padding: 14px 18px !important;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card-title {
    font-weight: 650 !important; color: var(--ink) !important;
    letter-spacing: -0.015em; font-size: 14px !important;
    display: inline-flex; align-items: center; gap: 8px;
}
.card-body { padding: 18px !important; }
.card-body.p-0 { padding: 0 !important; }
.card-footer { border-top: 1px solid var(--line-2) !important; padding: 13px 18px !important; background: transparent !important; }

/* Stat cards — flat, no gradient bar */
.stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 14px !important;
    margin-bottom: 22px;
}
.stat-card, .stat-card-pro {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
    padding: 16px 17px !important;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    position: relative; overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.stat-card::before, .stat-card-pro::before { display: none !important; }
.stat-card:hover, .stat-card-pro:hover {
    border-color: var(--brand-200) !important;
    box-shadow: var(--shadow-sm) !important;
}
.stat-value {
    color: var(--ink) !important;
    font-weight: 680 !important;
    font-size: 1.6rem !important;
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.stat-label {
    color: var(--ink-3) !important;
    text-transform: uppercase; letter-spacing: .07em;
    font-size: 10.5px !important; font-weight: 650 !important;
    margin-bottom: 5px;
}
.stat-meta { color: var(--ink-3) !important; font-size: 11.5px; margin-top: 5px; }
.stat-meta.positive { color: var(--success-ink) !important; }
.stat-icon, .stat-icon-pro {
    width: 38px; height: 38px; min-width: 38px;
    border-radius: var(--radius) !important;
    background: var(--brand-50) !important;
    color: var(--brand) !important;
    display: flex; align-items: center; justify-content: center;
}
.stat-card.success .stat-icon, .stat-icon.success { background: var(--success-soft) !important; color: var(--success-ink) !important; }
.stat-card.warning .stat-icon, .stat-icon.warning { background: var(--warning-soft) !important; color: var(--warning-ink) !important; }
.stat-card.danger  .stat-icon, .stat-icon.danger  { background: var(--danger-soft)  !important; color: var(--danger-ink)  !important; }
.stat-card.info    .stat-icon, .stat-icon.info    { background: var(--brand-50) !important; color: var(--brand) !important; }
.stat-icon.primary { background: var(--brand-50) !important; color: var(--brand) !important; }

/* Pages that stack icon / value / label vertically (Alerts) keep their block layout */
.stat-card:has(.stat-card-icon) { display: block !important; }
.stat-card::after { display: none !important; }
.stat-card-icon {
    width: 40px !important; height: 40px !important;
    border-radius: var(--radius) !important; margin-bottom: 12px !important;
    display: flex !important; align-items: center; justify-content: center;
}
.stat-card-icon i { color: #fff !important; font-size: 20px; }
.stat-card-icon.blue   { background: var(--brand) !important; }
.stat-card-icon.green  { background: var(--success) !important; }
.stat-card-icon.orange { background: var(--warning) !important; }
.stat-card-icon.purple { background: #6D4AE0 !important; }
.stat-card-value {
    color: var(--ink) !important; font-weight: 680 !important;
    letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.stat-card-label { color: var(--ink-3) !important; font-size: 12px !important; }
.att-daily-stat-icon i { font-size: 20px; }

/* ---------------------------------------------------------------------------
 * 8 · BUTTONS — flat, no gradients
 * ------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 9px 15px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid transparent;
    letter-spacing: -0.008em;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    box-shadow: none !important;
    line-height: 1.4;
}
.btn:active { transform: translateY(.5px); }

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

.btn-secondary {
    background: var(--surface) !important; color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}
.btn-secondary:hover { background: var(--surface-2) !important; border-color: #D6DAE6 !important; }

.btn-success { background: var(--success) !important; color: #fff !important; border-color: var(--success) !important; }
.btn-success:hover { background: var(--success-ink) !important; border-color: var(--success-ink) !important; }
.btn-danger  { background: var(--danger) !important; color: #fff !important; border-color: var(--danger) !important; }
.btn-danger:hover { background: var(--danger-ink) !important; border-color: var(--danger-ink) !important; }
.btn-warning { background: var(--warning) !important; color: #fff !important; border-color: var(--warning) !important; }
.btn-warning:hover { background: var(--warning-ink) !important; border-color: var(--warning-ink) !important; }

.btn-outline, .btn-outline-primary {
    background: transparent !important; color: var(--brand) !important;
    border: 1px solid var(--brand-200) !important;
}
.btn-outline:hover, .btn-outline-primary:hover {
    background: var(--brand-50) !important; color: var(--brand-hover) !important;
    border-color: var(--brand) !important;
}
.btn-ghost { background: transparent !important; color: var(--ink-2) !important; border-color: transparent !important; }
.btn-ghost:hover { background: var(--line-2) !important; color: var(--ink) !important; }

.btn-sm { padding: 6px 11px !important; font-size: 12px !important; border-radius: var(--radius-sm) !important; }
.btn-lg { padding: 12px 20px !important; font-size: 14px !important; }
.btn-xl { padding: 15px 26px !important; font-size: 15px !important; border-radius: var(--radius-lg) !important; }
.btn-block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ---------------------------------------------------------------------------
 * 9 · BADGES
 * ------------------------------------------------------------------------- */
.badge, .status-badge, .priority-badge {
    border-radius: var(--radius-full) !important;
    font-size: 10.5px !important; font-weight: 650 !important;
    text-transform: uppercase; letter-spacing: .045em;
    padding: 3px 9px !important;
    display: inline-flex; align-items: center; gap: 4px;
    line-height: 1.6;
    border: none;
}
.badge-primary   { background: var(--brand-50) !important;    color: var(--brand) !important; }
.badge-success   { background: var(--success-soft) !important; color: var(--success-ink) !important; }
.badge-warning   { background: var(--warning-soft) !important; color: var(--warning-ink) !important; }
.badge-danger    { background: var(--danger-soft) !important;  color: var(--danger-ink) !important; }
.badge-info      { background: var(--brand-50) !important;     color: var(--brand) !important; }
.badge-secondary { background: var(--line-2) !important;       color: var(--ink-2) !important; }

/* Full reset: style.css/modern-theme.css still add a green glow, a pulse and a white ::before dot
   (invisible on the soft green) whose empty box dragged the badge below the text baseline */
.live-badge {
    display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
    background: var(--success-soft); color: var(--success-ink);
    font-size: 9.5px; font-weight: 700; letter-spacing: .08em; line-height: 1;
    padding: 4px 7px 4px 6px; border-radius: var(--radius-full); text-transform: uppercase;
    box-shadow: none; animation: none;
}
.live-badge::before {
    content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
    animation: rs-breathe 2.4s var(--ease-in-out) infinite;
}

/* Status dots */
.team-status-dot {
    width: 9px; height: 9px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
}
.team-status-dot.working  { background: var(--success); }
.team-status-dot.on_break { background: var(--warning); }
.team-status-dot.finished { background: var(--brand); }
.team-status-dot.absent   { background: var(--danger); }

/* ---------------------------------------------------------------------------
 * 10 · TABLES
 * ------------------------------------------------------------------------- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table thead th {
    background: var(--surface-2) !important;
    color: var(--ink-3) !important;
    text-transform: uppercase;
    font-size: 10.5px !important;
    letter-spacing: .07em; font-weight: 700 !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 11px 15px !important;
    text-align: left;
    white-space: nowrap;
}
.table tbody td {
    padding: 12px 15px !important;
    border-bottom: 1px solid var(--line-2) !important;
    color: var(--ink-2) !important;
    font-size: 13px;
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--surface-2) !important; }
.table .text-right { text-align: right; }

/* ---------------------------------------------------------------------------
 * 11 · FORMS
 * ------------------------------------------------------------------------- */
.form-label {
    font-size: 12.5px; font-weight: 600; color: var(--ink-2);
    margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.form-control, .form-input, .form-select, .form-textarea, select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="month"], input[type="number"], input[type="search"] {
    width: 100%;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    color: var(--ink) !important;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-input:focus, .form-select:focus, .form-textarea:focus,
select:focus, textarea:focus, input:focus {
    outline: none !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-ring) !important;
}
.form-control::placeholder, textarea::placeholder { color: var(--ink-4); }
.form-group { margin-bottom: 16px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; }

/* ---------------------------------------------------------------------------
 * 12 · MODALS
 * ------------------------------------------------------------------------- */
.modal-overlay {
    background: rgba(12, 18, 34, .42) !important;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--line-2) !important;
    padding: 17px 22px !important;
    display: flex; align-items: center; justify-content: space-between;
}
.modal-title { font-weight: 650 !important; font-size: 1.0625rem !important; color: var(--ink) !important; letter-spacing: -0.02em; }
.modal-body { padding: 22px !important; }
.modal-footer {
    border-top: 1px solid var(--line-2) !important;
    padding: 15px 22px !important;
    display: flex; justify-content: flex-end; gap: 9px;
    background: var(--surface-2) !important;
}
.modal-close {
    background: transparent; border: none; color: var(--ink-3);
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition);
}
.modal-close:hover { background: var(--line-2); color: var(--ink); }

/* ---------------------------------------------------------------------------
 * 13 · ALERTS
 * ------------------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-lg) !important;
    padding: 13px 16px !important;
    border: 1px solid transparent !important;
    font-size: 13.5px;
    display: flex; align-items: flex-start; gap: 10px;
}
.alert-success { background: var(--success-soft) !important; color: var(--success-ink) !important; border-color: #C7E9D6 !important; }
.alert-warning { background: var(--warning-soft) !important; color: var(--warning-ink) !important; border-color: #FAE0B8 !important; }
.alert-danger  { background: var(--danger-soft) !important;  color: var(--danger-ink) !important;  border-color: #F8CDD5 !important; }
.alert-info    { background: var(--brand-50) !important;     color: var(--brand-ink) !important;   border-color: var(--brand-100) !important; }

/* ---------------------------------------------------------------------------
 * 14 · AVATARS
 * ------------------------------------------------------------------------- */
.avatar {
    width: 34px; height: 34px;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    color: var(--brand);
    font-weight: 700; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
    text-transform: uppercase; letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 38px; height: 38px; font-size: 13px; }
.avatar-lg { width: 46px; height: 46px; font-size: 15px; }

/* ---------------------------------------------------------------------------
 * 15 · APP-SPECIFIC BLOCKS
 * ------------------------------------------------------------------------- */

/* Policy banner (attendance rules) */
.policy-banner {
    border: 1px solid #F8CDD5 !important;
    border-left: 3px solid var(--danger) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--danger-soft) !important;
    padding: 15px 18px !important;
    display: flex; gap: 13px; align-items: flex-start;
    margin-bottom: 20px;
}
.policy-banner h3 { color: var(--danger-ink) !important; font-size: 14.5px !important; margin: 0 0 5px !important; font-weight: 650; }
.policy-banner p  { color: #7E1526 !important; margin: 0 0 3px !important; line-height: 1.55; font-size: 13px; }
.policy-banner .policy-pill {
    display: inline-block; margin-top: 8px; padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--danger); color: #fff;
    font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
}
.policy-banner .stat-icon { background: rgba(227,24,54,.12) !important; color: var(--danger) !important; }

/* Workday card */
.workday-card {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xs) !important;
    padding: 30px 26px !important;
    text-align: center;
    margin-bottom: 22px;
}
.workday-card.working  { border-top: 3px solid var(--success) !important; }
.workday-card.on-break { border-top: 3px solid var(--warning) !important; }
.workday-card.finished { border-top: 3px solid var(--brand) !important; }
.workday-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    padding: 5px 13px; border-radius: var(--radius-full);
    margin-bottom: 16px;
}
.workday-status.working  { background: var(--success-soft); color: var(--success-ink); }
.workday-status.on_break { background: var(--warning-soft); color: var(--warning-ink); }
.workday-status.finished { background: var(--brand-50); color: var(--brand); }
.workday-timer {
    font-size: 3.1rem; font-weight: 700;
    letter-spacing: -0.045em; color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.workday-timer span { color: var(--ink-4); margin: 0 1px; }
.workday-info { color: var(--ink-3); font-size: 13px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.workday-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* Check-in flow */
.checkin-container { max-width: 660px; margin: 0 auto; }
.checkin-header { text-align: center; margin-bottom: 26px; }
.checkin-header h1 { font-size: 1.55rem; margin-bottom: 6px; }
.checkin-header p { color: var(--ink-3); }
.checkin-step {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); margin-bottom: 13px; overflow: hidden;
    transition: border-color var(--transition);
}
.checkin-step.completed { border-color: var(--success); }
.checkin-step.completed .checkin-step-number { background: var(--success) !important; color: #fff !important; }
.checkin-step-header { display: flex; align-items: center; gap: 13px; padding: 15px 17px; }
.checkin-step-number {
    width: 27px; height: 27px; border-radius: 50%;
    background: var(--brand-50); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12.5px; flex-shrink: 0;
}
.checkin-step-title { font-weight: 650; color: var(--ink); font-size: 14px; }
.checkin-step-desc { color: var(--ink-3); font-size: 12.5px; }
.checkin-step-content { padding: 0 17px 17px; }
.checkin-camera {
    position: relative; width: 100%; aspect-ratio: 4/3;
    background: var(--surface-2); border: 1px dashed var(--line);
    border-radius: var(--radius-lg); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.checkin-camera video, .checkin-camera-preview { width: 100%; height: 100%; object-fit: cover; }
.checkin-camera-preview { display: none; }
.checkin-camera-preview.show { display: block; }
.checkin-camera-placeholder { text-align: center; color: var(--ink-4); }
.late-step { border-color: var(--warning) !important; }
.late-step .checkin-step-number { background: var(--warning-soft) !important; color: var(--warning-ink) !important; }

/* End-of-day report sections */
.eod-section {
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 14px 16px; margin-bottom: 12px; background: var(--surface);
}
.eod-section.required-ot { border-color: #FAE0B8; background: var(--warning-soft); }
.eod-section .eod-title { font-weight: 650; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); }
.eod-section .eod-help { color: var(--ink-3); font-size: 12.5px; margin-bottom: 9px; line-height: 1.5; }
.eod-count { font-size: 11.5px; color: var(--ink-4); margin-top: 5px; text-align: right; font-variant-numeric: tabular-nums; }
.eod-count.ok { color: var(--success-ink); font-weight: 600; }

/* Team cards */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.team-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 14px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.team-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-xs); }
.team-card-header { display: flex; align-items: center; gap: 11px; }
.team-name { font-weight: 650; color: var(--ink); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.team-dept { color: var(--ink-3); font-size: 11.5px; }
.team-task { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--ink-2); }
.team-task-label { color: var(--ink-4); font-weight: 600; }

/* Attendance heat-map cells */
.hm-cell {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 26px; border-radius: 5px;
    font-size: 10px; font-weight: 650; text-decoration: none;
    transition: transform var(--transition);
}
.hm-cell:hover { transform: scale(1.12); z-index: 5; }
.hm-full    { background: var(--success-soft); color: var(--success-ink); }
.hm-partial { background: var(--warning-soft); color: var(--warning-ink); }
.hm-short   { background: #FEF3E2; color: var(--warning-ink); }
.hm-missed  { background: var(--danger-soft); color: var(--danger-ink); }
.hm-active  { background: var(--brand-50); color: var(--brand); }
.hm-holiday { background: var(--line-2); color: var(--ink-4); }
.hm-absent  { color: var(--danger) !important; font-size: .5rem; font-weight: 700; text-transform: uppercase; }

/* Command Center */
.cc-stat {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-top: 3px solid var(--accent, var(--brand)) !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 16px !important;
}
.cc-stat .v { font-size: 1.6rem !important; font-weight: 680 !important; letter-spacing: -0.03em; color: var(--ink); }
.cc-stat .l { font-size: 10.5px !important; color: var(--ink-3) !important; letter-spacing: .07em; font-weight: 650; }
.cc-panel {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xs) !important;
}
.cc-panel-h { border-bottom: 1px solid var(--line-2) !important; font-weight: 650 !important; padding: 14px 18px !important; font-size: 14px; }
.cc-tab {
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    border-radius: var(--radius-full) !important;
    padding: 7px 15px !important;
    font-weight: 600 !important; font-size: 13px;
    color: var(--ink-2) !important;
    transition: var(--transition);
}
.cc-tab:hover { background: var(--surface-2) !important; border-color: #D6DAE6 !important; }
.cc-tab.active { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
.pill {
    display: inline-block; padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pill.working  { background: var(--success-soft); color: var(--success-ink); }
.pill.on_break { background: var(--warning-soft); color: var(--warning-ink); }
.pill.finished { background: var(--brand-50); color: var(--brand); }
.pill.offline  { background: var(--line-2); color: var(--ink-3); }
.pill.late, .pill.ot { background: var(--danger-soft); color: var(--danger-ink); }
.al { border-radius: var(--radius) !important; font-size: 13px !important; padding: 10px 13px !important; }
.live-dot { background: var(--success) !important; }

/* Empty states */
.text-center.p-6 i[class*="ph-"] { color: var(--ink-4); opacity: .55; }

/* ---------------------------------------------------------------------------
 * 16 · LOGIN PAGE — styled by assets/css/login.css, loaded only by login.php
 * ------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * 17 · UTILITIES & RESPONSIVE
 * ------------------------------------------------------------------------- */
.d-flex { display: flex; } .align-center { align-items: center; } .align-start { align-items: flex-start; }
.justify-between { justify-content: space-between; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
/* .row/.col keep style.css's flexbox model untouched — its col widths are
   calc()-ed against that file's 28px gutter, so overriding the gap here would
   leave the columns slightly short. */
.spin { animation: rs-spin 1s linear infinite; }
@keyframes rs-spin { to { transform: rotate(360deg); } }

@media (max-width: 1180px) {
    .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { flex: 0 0 100% !important; }
}
@media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); transition: transform var(--transition-slow); z-index: 200; }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg) !important; }
    .main-content { margin-left: 0 !important; }
    .content { padding: 18px 16px 32px !important; }
    .topbar { padding: 0 16px !important; }
}

@media print {
    .sidebar, .topbar, .btn, .workday-actions { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
}