/*
 * HIVE Time design system
 * Light theme by default; dark theme via <html data-bs-theme="dark">
 * (set by includes/head_assets.php from the viewer's preference).
 * Brand red is an accent only. No gradients, glows or decorative motion.
 */

/* ---------- Tokens ---------- */
:root,
[data-bs-theme="light"] {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #fafbfc;
    --surface-hover: #f0f2f5;
    --surface-active: #e9ecf1;
    --border: #e1e4ea;
    --border-strong: #cdd2da;

    --text: #16191f;
    --text-2: #3d4350;
    --text-3: #69707d;
    --text-inverse: #ffffff;

    --brand: #e31937;
    --ink: #16191f;
    --ink-hover: #2b3039;
    --link: #1f5fbf;
    --focus: rgba(31, 95, 191, 0.35);

    --success: #1a7f4b;
    --warning: #9a5b07;
    --danger: #c0262d;
    --info: #1f6fa8;
    --success-bg: #e8f5ee;
    --warning-bg: #fdf3e2;
    --danger-bg: #fcebec;
    --info-bg: #e7f1f9;

    /* Muted categorical palette (shift templates, time-off types) */
    --cat-success: #3f8f5f;
    --cat-warning: #c08a1e;
    --cat-purple: #6a65b8;
    --cat-info: #3a7fb5;
    --cat-danger: #b8505a;
    --cat-secondary: #7b8494;
    --cat-primary: #4a6fc4;

    --r-sm: 4px;
    --r: 6px;
    --r-lg: 8px;
    --r-xl: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.18);
    --ease: 120ms ease;

    /* Legacy variable names still referenced by page styles */
    --primary-bg: var(--bg);
    --secondary-bg: var(--surface-2);
    --card-bg: var(--surface);
    --border-color: var(--border);
    --text-primary: var(--text);
    --text-secondary: var(--text-3);
    --accent-red: var(--danger);
    --accent-red-hover: var(--danger);
    --accent-green: var(--success);
    --accent-blue: var(--link);
    --accent-yellow: var(--warning);
    --border-radius: var(--r-lg);
    --transition: background-color var(--ease), border-color var(--ease), color var(--ease);
    --user-color: var(--cat-primary);
}

[data-bs-theme="dark"] {
    --bg: #0f1115;
    --surface: #16191e;
    --surface-2: #1b1f25;
    --surface-hover: #22272e;
    --surface-active: #2a3038;
    --border: #2a2f37;
    --border-strong: #363c46;

    --text: #e7e9ed;
    --text-2: #b4bac4;
    --text-3: #8a919c;
    --text-inverse: #16191f;

    --ink: #e7e9ed;
    --ink-hover: #ffffff;
    --link: #6ea2ff;
    --focus: rgba(110, 162, 255, 0.4);

    --success: #4cb782;
    --warning: #d9a440;
    --danger: #f06a6f;
    --info: #5aa7e0;
    --success-bg: rgba(76, 183, 130, 0.14);
    --warning-bg: rgba(217, 164, 64, 0.14);
    --danger-bg: rgba(240, 106, 111, 0.14);
    --info-bg: rgba(90, 167, 224, 0.14);

    --cat-success: #4f9e6f;
    --cat-warning: #c99a3a;
    --cat-purple: #8580cc;
    --cat-info: #4f93c6;
    --cat-danger: #c9666f;
    --cat-secondary: #8a93a3;
    --cat-primary: #6585d4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
}

/* ---------- Bootstrap variable mapping ---------- */
:root,
[data-bs-theme] {
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-emphasis-color: var(--text);
    --bs-secondary-color: var(--text-3);
    --bs-tertiary-color: var(--text-3);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--r);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-border-radius-xl: var(--r-xl);
    --bs-link-color: var(--link);
    --bs-link-color-rgb: 31, 95, 191;
    --bs-link-hover-color: var(--link);
    --bs-heading-color: var(--text);
    --bs-focus-ring-color: var(--focus);
    --bs-box-shadow: var(--shadow);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow-lg: var(--shadow-lg);
}
:root,
[data-bs-theme="light"] {
    --bs-primary-rgb: 22, 25, 31;
    --bs-success-rgb: 26, 127, 75;
    --bs-warning-rgb: 192, 138, 30;
    --bs-danger-rgb: 192, 38, 45;
    --bs-info-rgb: 31, 111, 168;
    --bs-secondary-rgb: 105, 112, 125;
    --bs-dark-rgb: 22, 25, 31;
    --bs-light-rgb: 245, 246, 248;
}
[data-bs-theme="dark"] {
    --bs-primary-rgb: 231, 233, 237;
    --bs-success-rgb: 76, 183, 130;
    --bs-warning-rgb: 217, 164, 64;
    --bs-danger-rgb: 240, 106, 111;
    --bs-info-rgb: 90, 167, 224;
    --bs-secondary-rgb: 138, 145, 156;
    --bs-dark-rgb: 42, 48, 56;
    --bs-light-rgb: 34, 39, 46;
    --bs-link-color-rgb: 110, 162, 255;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.3rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: 0.95rem; }
h6, .h6 { font-size: 0.875rem; }

p, small {
    color: inherit;
}

strong {
    color: inherit;
    font-weight: 600;
}

.font-monospace,
code {
    font-family: var(--font-mono);
}

/* Tabular numerals for times, counts and tables */
.table,
.tabular-nums,
.stat-value,
time {
    font-variant-numeric: tabular-nums;
}

a {
    color: var(--link);
}

.container-fluid {
    margin: 0 auto;
    max-width: 2200px;
}

/* ---------- Cards ---------- */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--r-lg);
    --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--text);
    --bs-card-color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: none;
    color: var(--text);
}

.card-header {
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.card-footer {
    border-top: 1px solid var(--border);
}

.card-body {
    padding: 1.25rem;
}

.card-title {
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--r);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--focus);
    box-shadow: none;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover,
.btn:focus {
    transform: none;
}
.btn-sm {
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-border-radius: var(--r-sm);
}

.btn-primary,
.btn-primary-solid {
    --bs-btn-color: var(--text-inverse);
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: var(--text-inverse);
    --bs-btn-hover-bg: var(--ink-hover);
    --bs-btn-hover-border-color: var(--ink-hover);
    --bs-btn-active-color: var(--text-inverse);
    --bs-btn-active-bg: var(--ink-hover);
    --bs-btn-active-border-color: var(--ink-hover);
    --bs-btn-disabled-bg: var(--ink);
    --bs-btn-disabled-border-color: var(--ink);
    --bs-btn-disabled-color: var(--text-inverse);
}

.btn-secondary,
.btn-light,
.btn-light-solid,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-primary,
.btn-outline-info {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--surface-hover);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--surface-active);
    --bs-btn-active-border-color: var(--border-strong);
    --bs-btn-disabled-color: var(--text-3);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-success,
.btn-success-solid {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--success);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-bg: var(--success);
    --bs-btn-active-border-color: var(--success);
}
.btn-success:hover,
.btn-success-solid:hover {
    filter: brightness(0.94);
}

.btn-danger,
.btn-danger-solid {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger);
    --bs-btn-active-border-color: var(--danger);
}
.btn-danger:hover,
.btn-danger-solid:hover {
    filter: brightness(0.94);
}

.btn-warning,
.btn-warning-solid,
.btn-info,
.btn-info-solid {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--surface-hover);
    --bs-btn-hover-border-color: var(--border-strong);
    --bs-btn-active-bg: var(--surface-active);
    --bs-btn-active-color: var(--text);
}

.btn-outline-success {
    --bs-btn-color: var(--success);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--success);
    --bs-btn-hover-bg: var(--success-bg);
    --bs-btn-hover-border-color: var(--success);
    --bs-btn-active-bg: var(--success-bg);
    --bs-btn-active-color: var(--success);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-hover-bg: var(--danger-bg);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-bg: var(--danger-bg);
    --bs-btn-active-color: var(--danger);
}
.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: var(--warning);
    --bs-btn-hover-bg: var(--warning-bg);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-bg: var(--warning-bg);
    --bs-btn-active-color: var(--warning);
}
.btn-link {
    --bs-btn-color: var(--link);
    --bs-btn-hover-color: var(--link);
}
.btn-close-white {
    filter: none;
}
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    color: var(--text);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    box-shadow: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-select {
    padding-right: 2.25rem; /* room for the dropdown arrow */
}
.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    border-color: var(--link);
    box-shadow: 0 0 0 3px var(--focus);
    color: var(--text);
}
.form-control::placeholder {
    color: var(--text-3);
}
.form-label {
    color: var(--text-2);
    font-weight: 500;
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
}
.form-text {
    color: var(--text-3);
}
.form-check-input {
    border-color: var(--border-strong);
}
.form-check-input:checked {
    background-color: var(--ink);
    border-color: var(--ink);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text-3);
    cursor: not-allowed;
}
.input-group-text {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text-3);
}

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-hover-color: var(--text);
    --bs-table-active-bg: var(--surface-active);
    margin-bottom: 0;
}
.table > thead th,
.table > thead td {
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    border-bottom: 1px solid var(--border);
}

/* ---------- Badges & alerts ---------- */
.badge {
    font-weight: 500;
    font-size: 0.75rem;
    border-radius: var(--r-sm);
    padding: 0.3em 0.55em;
    text-shadow: none;
}
.alert {
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
}
.alert-success { background: var(--success-bg); border-color: transparent; color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: transparent; color: var(--warning); }
.alert-danger  { background: var(--danger-bg);  border-color: transparent; color: var(--danger); }
.alert-info    { background: var(--info-bg);    border-color: transparent; color: var(--info); }
.alert-secondary,
.alert-light,
.alert-dark    { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }

/* ---------- Dropdowns, modals, list groups, nav ---------- */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--text);
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-link-color: var(--text);
    --bs-dropdown-link-hover-bg: var(--surface-hover);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-dropdown-link-active-bg: var(--surface-active);
    --bs-dropdown-link-active-color: var(--text);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    font-size: 0.875rem;
}
.modal {
    --bs-modal-bg: var(--surface);
    --bs-modal-color: var(--text);
    --bs-modal-border-color: var(--border);
    --bs-modal-border-radius: var(--r-xl);
    --bs-modal-box-shadow: var(--shadow-lg);
    --bs-modal-header-border-color: var(--border);
    --bs-modal-footer-border-color: var(--border);
}
.modal-header .modal-title {
    font-size: 1rem;
    font-weight: 600;
}
.list-group {
    --bs-list-group-bg: var(--surface);
    --bs-list-group-color: var(--text);
    --bs-list-group-border-color: var(--border);
    --bs-list-group-action-hover-bg: var(--surface-hover);
    --bs-list-group-action-hover-color: var(--text);
    --bs-list-group-active-bg: var(--surface-active);
    --bs-list-group-active-color: var(--text);
    --bs-list-group-active-border-color: var(--border);
}
.nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    --bs-nav-tabs-link-active-bg: var(--surface);
    --bs-nav-tabs-link-active-color: var(--text);
    --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface);
    --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) var(--border);
}
.nav-link {
    color: var(--text-3);
}
.nav-link:hover,
.nav-link:focus {
    color: var(--text);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--surface-active);
    --bs-nav-pills-link-active-color: var(--text);
}
.progress {
    --bs-progress-bg: var(--surface-active);
    --bs-progress-border-radius: 999px;
    height: 0.5rem;
}
.progress-bar {
    text-shadow: none;
}
.tooltip {
    --bs-tooltip-bg: var(--ink);
    --bs-tooltip-color: var(--text-inverse);
}
.toast {
    --bs-toast-bg: var(--surface);
    --bs-toast-border-color: var(--border);
    --bs-toast-header-bg: var(--surface-2);
    --bs-toast-header-color: var(--text);
}
.pagination {
    --bs-pagination-bg: var(--surface);
    --bs-pagination-color: var(--text);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-bg: var(--surface-hover);
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-active-bg: var(--ink);
    --bs-pagination-active-border-color: var(--ink);
    --bs-pagination-active-color: var(--text-inverse);
}

/* ---------- Bridge: legacy dark-only classes become theme surfaces ---------- */
/* Pages were written for a permanent dark UI (bg-dark / text-light / table-dark
   everywhere). These rules make those classes follow the active theme until each
   page is cleaned up. */
body.bg-dark {
    background: var(--bg) !important;
    color: var(--text) !important;
}
.card.bg-dark,
.card.bg-secondary,
.card-dark,
.modal-content.bg-dark,
.modal-content.bg-secondary,
.list-group-item.bg-dark,
.list-group-item.bg-secondary,
.dropdown-menu-dark,
.offcanvas.bg-dark,
.accordion-item.bg-dark,
.accordion-button.bg-dark,
.card-header.bg-dark,
.card-footer.bg-dark,
.card-header.bg-secondary,
.card-footer.bg-secondary {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
.form-control.bg-dark,
.form-select.bg-dark,
.form-control.bg-secondary,
.form-select.bg-secondary,
.input-group-text.bg-dark,
textarea.bg-dark {
    background-color: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border-strong) !important;
}
.table-dark {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: var(--surface-hover);
    --bs-table-hover-color: var(--text);
    --bs-table-active-bg: var(--surface-active);
    --bs-table-active-color: var(--text);
    color: var(--text);
}
.text-light,
.text-white:not(.badge):not(.btn) {
    color: var(--text) !important;
}
.badge.text-light,
.badge.text-white,
.btn.text-white {
    color: #fff !important;
}
.badge.bg-light.text-dark,
.badge.bg-white.text-dark {
    color: var(--text) !important;
}
.text-muted,
.text-secondary {
    color: var(--text-3) !important;
}
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger) !important; }
.text-info    { color: var(--info) !important; }
.text-primary { color: var(--text) !important; }
.border-secondary,
.border-dark {
    border-color: var(--border) !important;
}
.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text);
}
hr {
    border-color: var(--border);
    opacity: 1;
}

/* ---------- App components ---------- */
/* Page header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-header h1,
.page-title {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0;
}
.page-subtitle {
    color: var(--text-3);
    margin: 0.125rem 0 0;
}

/* Stat tiles */
.stat-label {
    color: var(--text-3);
    font-size: 0.75rem;
    font-weight: 500;
}
.stat-value {
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

/* Segmented control (used for view toggles) */
.seg-toggle {
    display: inline-flex;
    padding: 2px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    gap: 2px;
}
.seg-toggle > .btn,
.seg-toggle > a,
.seg-toggle > button {
    border: 0;
    background: transparent;
    color: var(--text-3);
    padding: 0.3rem 0.75rem;
    border-radius: var(--r-sm);
    font-weight: 500;
}
.seg-toggle > .active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

/* Avatars: flat color, initials */
.avatar,
.avatar-circle,
.profile-avatar-large-circle,
.nav-avatar-circle,
.schedule-avatar-circle {
    border-radius: 50%;
    background: var(--user-color, var(--cat-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.profile-avatar-large,
.profile-avatar-large-circle {
    width: 96px;
    height: 96px;
    font-size: 2rem;
}
.profile-avatar-large {
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}
.nav-avatar,
.nav-avatar-circle {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
    border-radius: 50%;
    object-fit: cover;
}
.profile-photo,
.schedule-avatar-photo,
.profile-avatar-large,
.profile-avatar-large-circle,
.schedule-avatar-circle,
.avatar-circle {
    margin-left: auto;
    margin-right: auto;
}

/* Shift chips (schedule): muted fill + colored left edge */
.shift-chip {
    --chip: var(--cat-secondary);
    background: color-mix(in srgb, var(--chip) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--chip) 28%, var(--surface));
    border-left: 3px solid var(--chip);
    border-radius: var(--r-sm);
    color: var(--text);
}
.shift-chip[data-color="success"]   { --chip: var(--cat-success); }
.shift-chip[data-color="warning"]   { --chip: var(--cat-warning); }
.shift-chip[data-color="purple"]    { --chip: var(--cat-purple); }
.shift-chip[data-color="info"]      { --chip: var(--cat-info); }
.shift-chip[data-color="danger"]    { --chip: var(--cat-danger); }
.shift-chip[data-color="secondary"] { --chip: var(--cat-secondary); }
.shift-chip[data-color="primary"]   { --chip: var(--cat-primary); }
.shift-chip.on-call {
    background-image: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--chip) 10%, transparent) 6px 12px);
}

/* ---------- Team hierarchy (team view pages) ---------- */
.hierarchy-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
}
.hierarchy-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}
.hierarchy-line {
    width: 1px;
    height: 30px;
    background-color: var(--border-strong);
}
.hierarchy-level:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background: var(--border-strong);
}
.hierarchy-level .team-members-grid {
    position: relative;
    margin-top: 20px;
}
.hierarchy-level .team-members-grid::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background-color: var(--border-strong);
}
.hierarchy-level .team-members-grid:has(.user-card:nth-child(n+3))::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 20%;
    right: 20%;
    height: 1px;
    background-color: var(--border-strong);
}
.user-card {
    padding: 14px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text);
    min-width: 220px;
    text-align: center;
}
.user-card.clickable {
    cursor: pointer;
    transition: border-color var(--ease), background-color var(--ease);
}
.user-card.clickable:hover {
    border-color: var(--border-strong);
    background-color: var(--surface-hover);
}
.user-card.vp,
.user-card.vp-direct { border-top: 3px solid var(--cat-warning); }
.user-card.manager   { border-top: 3px solid var(--cat-info); }
.user-card.team-lead { border-top: 3px solid var(--cat-success); }
.user-card.tech      { border-top: 3px solid var(--cat-primary); }
.user-card-icon {
    margin-right: 10px;
}
.team-members-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding-top: 20px;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
    .card-body {
        padding: 1rem;
    }
    .container-fluid {
        padding: 0.5rem;
    }
}

/* ---------- Additions requested by page restyles ---------- */
/* Dark mode: Bootstrap draws a white tick, so a light fill would hide it */
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--link);
    border-color: var(--link);
}
.seg-toggle > a {
    text-decoration: none;
}

/* Type label with a colored dot (time-off types and similar categories) */
.type-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    white-space: nowrap;
}
.type-tag::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--tag, var(--cat-secondary));
    flex-shrink: 0;
}
.type-tag[data-type="PTO"]             { --tag: var(--cat-success); }
.type-tag[data-type="sick_leave"]      { --tag: var(--cat-warning); }
.type-tag[data-type="called_out"]      { --tag: var(--cat-danger); }
.type-tag[data-type="other"]           { --tag: var(--cat-purple); }
.type-tag[data-type="emergency_leave"] { --tag: var(--cat-info); }
.type-tag[data-type="bereavement"]     { --tag: var(--cat-secondary); }

/* Dark theme: solid action buttons need deeper fills for white text (>= 4.5:1) */
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .btn-danger-solid {
    --bs-btn-bg: #b3262d;
    --bs-btn-border-color: #b3262d;
    --bs-btn-hover-bg: #9e2027;
    --bs-btn-hover-border-color: #9e2027;
    --bs-btn-active-bg: #9e2027;
    --bs-btn-active-border-color: #9e2027;
}
[data-bs-theme="dark"] .btn-success,
[data-bs-theme="dark"] .btn-success-solid {
    --bs-btn-bg: #1d7a4b;
    --bs-btn-border-color: #1d7a4b;
    --bs-btn-hover-bg: #186a41;
    --bs-btn-hover-border-color: #186a41;
    --bs-btn-active-bg: #186a41;
    --bs-btn-active-border-color: #186a41;
}