/*
 * style.css — single bundled stylesheet for the whole app.
 *
 * Layout (search the file with these markers):
 *   1.  CSS variables + dark-mode override
 *   2.  Login page
 *   3.  Forms, inputs, buttons
 *   4.  Header, navigation, hamburger
 *   5.  Module wrappers, tables, alerts, status badges
 *   6.  PTO inline progress bar
 *   7.  Sortable table headers
 *   8.  Notification bell + dropdown
 *   9.  Admin tabs
 *  10.  Help (?) button + modal
 *  11.  Busy overlay (form submits)
 *  12.  Responsive breakpoints (1024 / 768 / 380 px)
 *
 * Cache busted via ?v=N in <link rel="stylesheet"> — bump after changes.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --primary-color:    #2563eb;
    --primary-hover:    #1d4ed8;
    --primary-soft:     #dbeafe;
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #6366f1 50%, #8b5cf6 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    --gradient-danger:  linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    --secondary-color:  #64748b;
    --success-color:    #16a34a;
    --danger-color:     #dc2626;
    --warning-color:    #d97706;
    --light-color:      #f8fafc;
    --dark-color:       #0f172a;
    --text-color:       #0f172a;
    --text-muted:       #64748b;
    --bg-color:         #f1f5f9;
    --card-bg:          #ffffff;
    --border-color:     #e2e8f0;
    --shadow-sm:        0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow:           0 4px 14px rgba(15, 23, 42, 0.06);
    --shadow-lg:        0 20px 40px -12px rgba(15, 23, 42, 0.18);
    --border-radius:    10px;
    --border-radius-lg: 16px;
    --transition:       150ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    --primary-color:    #60a5fa;
    --primary-hover:    #3b82f6;
    --primary-soft:     #1e3a8a;
    --secondary-color:  #94a3b8;
    --success-color:    #4ade80;
    --danger-color:     #f87171;
    --warning-color:    #fbbf24;
    --light-color:      #1e293b;
    --dark-color:       #f8fafc;
    --text-color:       #e2e8f0;
    --text-muted:       #94a3b8;
    --bg-color:         #0b1220;
    --card-bg:          #111827;
    --border-color:     #1f2937;
    --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow:           0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg:        0 20px 40px -12px rgba(0, 0, 0, 0.6);
}

body {
    font-family: 'Inter', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- Login page --- */
body.login-page {
    background:
        radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.12), transparent 40%),
        radial-gradient(circle at 90% 90%, rgba(139, 92, 246, 0.12), transparent 40%),
        var(--bg-color);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-wrapper {
    max-width: 420px;
    width: 90%;
    padding: 44px 38px 36px;
    margin: 0;
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border-top: 4px solid transparent;
    background-image: linear-gradient(var(--card-bg), var(--card-bg)),
                      var(--gradient-primary);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: relative;
}
.login-wrapper h2 {
    text-align: center;
    color: var(--text-color);
    margin: 0 0 6px 0;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.5px;
}
.login-wrapper p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: center;
    margin-bottom: 28px;
}
.login-divider {
    position: relative;
    text-align: center;
    margin: 24px 0;
    color: var(--text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 38%;
    height: 1px;
    background: var(--border-color);
}
.login-divider::before { left: 0; }
.login-divider::after  { right: 0; }
.login-divider span    { background: var(--card-bg); padding: 0 10px; position: relative; z-index: 1; }

/* --- Univerzální formulářové prvky --- */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="search"],
.form-group input[type="time"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 15px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,123,255,0.15);
}

.invalid-feedback {
    color: var(--danger-color);
    font-size: 13px;
    margin-top: 5px;
}
.form-group input.is-invalid {
    border-color: var(--danger-color);
}

/* --- Buttons ---
   All variants share .btn for height/padding so Cancel/Save/etc. line up
   regardless of which colour modifier is applied. The min-height anchors
   the visual height even when soft variants drop the gradient/shadow. */
.btn {
    padding: 11px 20px;
    min-height: 42px;
    background-image: var(--gradient-primary);
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 600;
    width: 100%;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255,255,255,0.1) inset;
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    letter-spacing: 0.1px;
    line-height: 1.2;
}
.btn:hover {
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
    filter: brightness(1.05);
}
.btn:active { transform: translateY(0); filter: brightness(0.97); }
.btn-danger    { background-image: var(--gradient-danger);    background-color: var(--danger-color); }
.btn-danger:hover    { box-shadow: 0 6px 16px rgba(220, 38, 38, 0.25); }
.btn-success   { background-image: var(--gradient-success);   background-color: var(--success-color); }
.btn-success:hover   { box-shadow: 0 6px 16px rgba(22, 163, 74, 0.25); }
.btn-secondary { background-image: none;                       background-color: var(--secondary-color); }
.btn-secondary:hover { background-color: #475569; box-shadow: 0 6px 16px rgba(100, 116, 139, 0.25); }

/* iOS-style toggle switch — drop-in replacement for plain checkboxes in
   settings forms. Wrap a checkbox in <label class="toggle-switch"> and
   add a sibling <span class="toggle-switch-slider"></span>. Submission
   semantics are unchanged: when checked, the named value is POSTed. */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    vertical-align: middle;
}
.toggle-switch input {
    opacity: 0;
    width: 0; height: 0;
    position: absolute;
}
.toggle-switch-slider {
    position: absolute; cursor: pointer;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background-color .25s, box-shadow .25s;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.toggle-switch-slider::before {
    content: "";
    position: absolute;
    height: 22px; width: 22px;
    left: 2px; top: 2px;
    background: white;
    border-radius: 50%;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .15s;
    box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 0 0 0.5px rgba(0,0,0,.05);
}
.toggle-switch input:checked + .toggle-switch-slider {
    background: #34c759;          /* iOS green */
}
.toggle-switch input:checked + .toggle-switch-slider::before {
    transform: translateX(18px);
}
.toggle-switch input:focus-visible + .toggle-switch-slider {
    box-shadow: 0 0 0 3px rgba(52,199,89,.25);
}
.toggle-switch input:disabled + .toggle-switch-slider { opacity: .5; cursor: not-allowed; }

/* Convenience layout: <label> + description on the left, switch on the
   right, optional separator between rows. */
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row-text { min-width: 0; flex: 1; }
.toggle-row-label {
    display: block;
    font-weight: 600; font-size: 14px;
    color: var(--dark-color);
}
.toggle-row-help {
    display: block;
    color: var(--text-muted);
    font-size: 12.5px;
    margin-top: 2px;
}
/* Compact inline toggle (smaller, sits inline with text, e.g. in modal forms) */
.toggle-inline {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: normal; font-size: 14px;
    cursor: pointer;
}

/* "Soft" button variants — tinted background + dark coloured text instead of
   solid loud fills. Used for inline row actions (Edit / Delete) where the
   gradient/solid versions feel too heavy-handed in dense tables. */
.btn-soft {
    background-image: none;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    box-shadow: none;
    font-weight: 600;
}
.btn-soft:hover {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    color: var(--primary-color);
    box-shadow: none;
    filter: none;
    transform: none;
}
.btn-soft-danger {
    background-image: none;
    background: color-mix(in srgb, var(--danger-color) 9%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 22%, transparent);
    box-shadow: none;
    font-weight: 600;
}
.btn-soft-danger:hover {
    background: color-mix(in srgb, var(--danger-color) 16%, transparent);
    color: var(--danger-color);
    box-shadow: none;
    filter: none;
    transform: none;
}

/* Neutral cancel — used for "Cancel" actions (PTO cancel, modal close, dialog
   cancel) so they don't visually compete with destructive Reject buttons.
   Reject keeps .btn-soft-danger; Cancel switches to .btn-cancel. */
.btn-cancel {
    background-image: none;
    background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    color: var(--secondary-color);
    border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent);
    box-shadow: none;
    font-weight: 600;
}
.btn-cancel:hover {
    background: color-mix(in srgb, var(--secondary-color) 22%, transparent);
    color: var(--secondary-color);
    box-shadow: none;
    filter: none;
    transform: none;
}
[data-theme="dark"] .btn-cancel {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.35);
}
[data-theme="dark"] .btn-cancel:hover {
    color: #f1f5f9;
}

.btn-small {
    padding: 7px 14px;
    min-height: 32px;
    font-size: 14px;
    width: auto;
}
.btn-link {
    background: none;
    border: none;
    color: var(--primary-color);
    text-decoration: underline;
    padding: 0;
    width: auto;
    font-size: 14px;
}

/* --- Main app --- */
.header {
    background-color: var(--card-bg);
    /* Horizontal padding matches the .container math so the brand on the
       left lines up with the content below (page heading, form, etc).
       max(16px, ...) keeps a reasonable gutter on narrow viewports. */
    padding: 0 max(16px, calc((100vw - 1640px) / 2 + 16px));
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(8px);
    box-shadow: var(--shadow-sm);
}
.header h1 {
    margin: 0;
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -0.5px;
}
/* 015.jpg — bump the brand logo so it carries the header instead of
   getting lost. 48px sits inside the 70px desktop header with ~11px
   breathing room top + bottom. Mobile drops to 40px so the logo
   doesn't dominate the collapsed bar. */
.header-logo {
    height: 48px;
    width: auto;
    max-width: 220px;
    display: block;
}
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    transition: var(--transition);
    font-size: 16px;
}
.theme-toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: rotate(20deg);
}
.user-info {
    font-size: 15px;
    color: var(--text-muted);
}
.user-info strong {
    color: var(--text-color);
    margin: 0 5px;
}
.user-info a.btn-danger {
    margin-left: 20px;
    width: auto;
    padding: 8px 14px;
}

/* Main page container — uniform width across the whole app so every page
   has the same horizontal alignment as the wallchart (which needs ~1340px+
   to fit a 31-day month without scrolling). The min() keeps it from
   spilling off narrow viewports. */
.container {
    max-width: min(1640px, calc(100vw - 32px));
    margin: 24px auto;
    padding: 0 16px;
}

.module-wrapper {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: 30px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition), transform var(--transition);
}
.module-wrapper:hover {
    box-shadow: var(--shadow-lg);
}
.module-wrapper h2 {
    margin: 0 0 25px 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
    color: var(--dark-color);
    display: flex;
    align-items: center;
}
.module-wrapper h2 .emoji {
    margin-right: 12px;
    font-size: 24px;
}
.module-wrapper h3 {
    color: var(--dark-color);
    font-size: 18px;
    font-weight: 600;
    margin: 30px 0 15px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* --- Statistiky --- */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Dashboard: My PTO Overview — 2-column on wide screens (stats left, chart
   right), stacks vertically below 1100px so cards stay readable. */
.my-pto-overview {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}
.my-pto-overview .my-pto-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.my-pto-overview .my-pto-chart {
    position: relative;
    height: 280px;
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 16px;
    display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1100px) {
    .my-pto-overview { grid-template-columns: 1fr; }
    .my-pto-overview .my-pto-stats {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    .my-pto-overview .my-pto-chart { max-width: 420px; margin: 0 auto; }
}
.stat-card {
    background: var(--card-bg);
    padding: 22px 24px;
    border-radius: var(--border-radius-lg);
    text-align: left;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background-image: var(--gradient-primary);
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.stat-card h4 {
    margin: 0 0 8px 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.stat-card .value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: -0.5px;
}
.stat-card.stat-remaining::before { background-image: var(--gradient-primary); }
.stat-card.stat-approved::before  { background-image: var(--gradient-success); }
.stat-card.stat-pending::before   { background-image: var(--gradient-warning); }
.stat-card.stat-remaining .value { color: var(--primary-color); }
.stat-card.stat-approved  .value { color: var(--success-color); }
.stat-card.stat-pending   .value { color: var(--warning-color); }

/* --- Formuláře v aplikaci ---
   Cards match the dashboard width (full container). Forms INSIDE the cards
   fill the available width using a responsive grid — auto-fit gives 4-5
   columns on a wide screen, 2 on a tablet, 1 on a phone. Long fields
   (textarea, date range) span full width via data-fullwidth="true". */
.pto-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 30px;
    align-items: flex-start;
}
.pto-form .form-group[data-fullwidth="true"] {
    grid-column: 1 / -1;
}
/* Cap individual short inputs so they don't stretch ridiculously wide on a
   1600px-card. Date / time / number / select are the obvious offenders. */
.pto-form .form-group input[type="date"],
.pto-form .form-group input[type="time"],
.pto-form .form-group input[type="number"],
.pto-form .form-group select {
    max-width: 360px;
}
.pto-form .form-group input[type="text"],
.pto-form .form-group input[type="tel"],
.pto-form .form-group input[type="email"],
.pto-form .form-group input[type="password"] {
    max-width: 480px;
}

/* My Team / My Requests — sub-tabs + filter bar styling. */
.my-team-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 18px;
}
.my-team-tab {
    padding: 10px 18px;
    font-size: 14px; font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition);
}
.my-team-tab:hover {
    color: var(--primary-color);
    background: var(--primary-soft);
    border-radius: 6px 6px 0 0;
}
.my-team-tab.is-active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.my-team-filter {
    display: flex; gap: 12px; flex-wrap: wrap;
    align-items: end;
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.my-team-filter .form-group { margin: 0; }
.my-team-filter .form-group label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); margin-bottom: 4px;
}
.my-team-filter input,
.my-team-filter select {
    padding: 7px 10px; font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 140px;
    /* Force consistent height across <input type="date"> and <select> —
       browsers (Chrome especially) render them slightly different by
       default. line-height + height + box-sizing nail it. */
    height: 36px;
    line-height: 1.2;
    box-sizing: border-box;
    background: var(--card-bg);
    color: var(--text-color);
    font-family: inherit;
}
.my-team-filter input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: .6; cursor: pointer;
}
.my-team-filter .btn-small { height: 36px; }

/* Time-clock weekly table — visual flags for overnight shifts and anomalies
   (shift > 16 h almost always = forgotten check-out). */
.tc-row-overnight {
    background: rgba(99, 102, 241, .06);
}
.tc-row-anomaly {
    background: rgba(239, 68, 68, .08);
    border-left: 3px solid var(--danger-color);
}
.tc-next-day {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    background: rgba(99, 102, 241, .15);
    color: #4338ca;
    padding: 1px 5px; border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    cursor: help;
}
.tc-overnight-badge { font-size: 12px; opacity: .8; cursor: help; }
.tc-anomaly-badge {
    color: var(--danger-color); font-weight: 700;
    cursor: help;
}

/* The .module-wrapper-form / -narrow classes used to centre+narrow the
   whole card. Reverted — cards now share the dashboard's full width for
   visual consistency across pages. The classes stay as harmless aliases so
   pages already using them keep rendering without code changes. */
.module-wrapper-form,
.module-wrapper-narrow { /* same as default .module-wrapper */ }
.date-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.pto-form .btn {
    width: auto;
    grid-column: 1 / -1;
    padding: 12px 25px;
    /* Anchor to the left of the row so the submit button doesn't stretch
       across a 1500px-wide card. */
    justify-self: start;
}

/* --- Tabulky --- */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.styled-table thead tr {
    background-color: var(--light-color);
    text-align: left;
}
.styled-table th {
    padding: 14px 16px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 2px solid var(--border-color);
}
.styled-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    color: var(--text-color);
}
.styled-table tbody tr:hover {
    background-color: #fcfcfc;
}
.styled-table td .btn-small {
    margin-right: 5px;
}

/* Status Badges */
.status-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 12px;
    text-transform: capitalize;
    display: inline-block;
}
.status-badge.status-pending { background-color: #fff8e1; color: #E8A800; border: 1px solid #ffecb3; }
.status-badge.status-approved { background-color: #e8f5e9; color: var(--success-color); border: 1px solid #c8e6c9; }
.status-badge.status-rejected { background-color: #ffebee; color: var(--danger-color); border: 1px solid #ffcdd2; }

.action-form { display: flex; gap: 5px; }

/* --- Kalendář --- */
#calendar {
    max-width: 100%;
}
/* Upravíme barvy kalendáře */
.fc-event {
    border: none !important;
    font-weight: 500;
}
.fc-daygrid-event {
    padding: 3px 6px;
    border-radius: 4px;
}
.fc-day-today {
    background-color: var(--light-color) !important;
}

/* --- Notifikace --- */
.alert {
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: 15px;
    font-weight: 500;
}
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* --- Sekce reportů a správy --- */
.management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.report-filters {
    display: flex;
    gap: 15px;
    align-items: center;
}
.report-filters .form-group {
    margin-bottom: 0;
}
.report-filters label {
    margin-bottom: 0;
    margin-right: 5px;
    font-weight: 500;
}
.report-filters select {
    padding: 10px;
}
.report-filters .btn {
    width: auto;
}
/* Add to end of style.css */
.main-nav { display: flex; gap: 25px; }
.main-nav a { 
    text-decoration: none; 
    color: var(--text-muted); 
    font-weight: 500; 
    font-size: 16px;
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}
.main-nav a:hover, .main-nav a.active { 
    color: var(--primary-color); 
    border-bottom-color: var(--primary-color);
}

/* Zvýraznění víkendů v kalendáři (zešedivění) */
.fc-day-sat, .fc-day-sun {
    background-color: #f5f5f5;
}

/* Zvýraznění svátků (pozadí události) */
.fc-event.event-holiday {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

/* --- Reports section --- */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
.report-card {
    background: var(--light-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 22px;
    /* Flex column so the submit button can be pushed to the bottom of the
       card via margin-top:auto. Result: every "Generate PDF" button lines
       up at the same vertical position across the whole reports grid,
       regardless of how many fields each form has. */
    display: flex;
    flex-direction: column;
}
.report-card h3 {
    margin: 0 0 6px 0;
    border: none;
    padding: 0;
    color: var(--primary-color);
    font-size: 17px;
}
.report-card .report-card-desc {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 16px 0;
    line-height: 1.4;
}
.report-card-form {
    display: flex;
    flex-direction: column;
    flex: 1;                  /* fills the remaining card height */
}
.report-card-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.report-card-form .form-group {
    margin: 0;
}
.report-card-form .form-group label {
    font-size: 12px;
    margin-bottom: 4px;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.report-card-form .form-group input,
.report-card-form .form-group select {
    padding: 8px 10px;
    font-size: 14px;
}
/* Push the submit button (last child) to the bottom of the form/card. */
.report-card-form > button[type="submit"],
.report-card-form > .btn {
    margin-top: auto;
    align-self: flex-start;
}
.report-card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;        /* line action-card buttons up with form-card buttons */
}
.report-card-actions .btn {
    width: 100%;
}

/* --- Color picker --- */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.color-picker-row input[type="color"] {
    width: 56px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    background: transparent;
}
.color-picker-hint {
    color: var(--text-muted);
    font-size: 13px;
}

/* --- Calendar event styling --- */
.fc-event.pto-pending {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0.18) 4px,
        transparent 4px,
        transparent 8px
    );
    border-style: dashed !important;
    border-width: 1.5px !important;
}
.fc-event.pto-approved {
    border-style: solid !important;
}
.fc-event {
    cursor: pointer;
}

/* --- Request detail modal --- */
.rmodal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}
.rmodal.open {
    display: block;
}
.rmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.rmodal-card {
    position: relative;
    margin: 5vh auto;
    max-width: 540px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    padding: 28px 32px;
    animation: rmodalIn 0.18s ease-out;
}
@keyframes rmodalIn {
    from { transform: translateY(10px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.rmodal-close {
    position: absolute;
    right: 14px;
    top: 10px;
    background: transparent;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 10px;
}
.rmodal-close:hover { color: var(--text-color); }
.rmodal-loading,
.rmodal-error {
    padding: 30px 0;
    text-align: center;
    color: var(--text-muted);
}
.rmodal-error { color: var(--danger-color); }
.rmodal-title {
    margin: 0;
    font-size: 22px;
    color: var(--dark-color);
}
.rmodal-sub {
    margin: 4px 0 18px;
    color: var(--text-muted);
    font-size: 14px;
}
.rmodal-status-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.rmodal-hours {
    font-weight: 600;
    color: var(--dark-color);
    font-size: 15px;
}
.rmodal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.rmodal-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    font-size: 14px;
}
.rmodal-row label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding-top: 2px;
}
.rmodal-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
}
.rmodal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}
.rmodal-actions .btn {
    width: auto;
    padding: 10px 18px;
}
.rmodal-note {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--light-color);
    padding: 12px 14px;
    border-radius: 6px;
    margin: 10px 0 0;
}

/* --- User table: toolbar, filters, color chip, inline PTO --- */
.management-actions {
    display: flex;
    gap: 10px;
}
.user-table-toolbar {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.user-table-search,
.user-table-filter {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}
.user-table-search:focus,
.user-table-filter:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}
.user-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-color-chip {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.pto-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}
.pto-inline-bar {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.pto-inline-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #6366f1);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.pto-inline-label {
    font-size: 13px;
    white-space: nowrap;
    color: var(--text-muted);
}
.pto-inline-label strong { color: var(--text-color); }

/* Sortable table headers */
.sortable-table th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 24px;
}
.sortable-table th[data-sort]::after {
    content: '⇅';
    position: absolute;
    right: 8px;
    color: var(--border-color);
    font-size: 11px;
}
.sortable-table th.sorted-asc::after  { content: '▲'; color: var(--primary-color); }
.sortable-table th.sorted-desc::after { content: '▼'; color: var(--primary-color); }
/* ===== Notification bell ====================================================== */
.notification-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.bell-button {
    background: transparent;
    border: 1px solid var(--border-color);
    cursor: pointer;
    padding: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: var(--text-color);
    transition: var(--transition);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}
.bell-button:hover {
    background: var(--primary-soft);
    border-color: var(--primary-color);
}
.bell-badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--danger-color); color: #fff;
    border: 2px solid var(--card-bg);
    border-radius: 9px;
    font-size: 10px; font-weight: 700; line-height: 14px;
    text-align: center;
    display: none;          /* hidden by default; JS toggles .has-badge */
}
.notification-bell.has-badge .bell-badge { display: inline-block; }

/* Dropdown — hidden by default. JS adds .is-open to show. */
.bell-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-height: 480px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
}
.bell-dropdown.is-open { display: flex; }

.bell-dropdown-header, .bell-dropdown-footer {
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--text-color);
}
.bell-dropdown-header { border-bottom: 1px solid var(--border-color); }
.bell-dropdown-footer {
    border-top: 1px solid var(--border-color);
    background: var(--bg-color);
    font-weight: 400;
    font-size: 13px;
}
.bell-list {
    list-style: none;
    padding: 0; margin: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 60px;
}
.bell-list .bell-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}
.bell-item { border-bottom: 1px solid var(--border-color); }
.bell-item:last-child { border-bottom: none; }
.bell-item a, .bell-item span {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
    transition: var(--transition);
}
.bell-item a:hover, .bell-item span:hover { background: var(--primary-soft); }
.bell-item-unread a, .bell-item-unread span {
    background: var(--primary-soft);
    border-left: 3px solid var(--primary-color);
}
.bell-body { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bell-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

[data-theme="dark"] .bell-button {
    border-color: rgba(255,255,255,0.12);
    color: var(--text-color);
}
[data-theme="dark"] .bell-button:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .bell-item-unread a, [data-theme="dark"] .bell-item-unread span {
    background: rgba(37,99,235,0.18);
}

/* Status badge for cancelled */
.status-cancelled { background: #cbd5e1; color: #1e293b; }

/* ===== Header layout (overrides + flex) ====================================== */
.header { gap: 16px; flex-wrap: nowrap; }
.header-brand { flex: 0 0 auto; }
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.user-info > .user-meta { white-space: nowrap; }
.user-info > .user-meta strong { margin-left: 4px; }

/* Override the older user-info margin so flex gap controls spacing instead */
.user-info a.btn-danger { margin-left: 0; }
.theme-toggle { margin-right: 0; }

/* Hamburger toggle — hidden on desktop, shown on small screens */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 38px; height: 38px;
    cursor: pointer;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.nav-toggle span {
    display: block;
    width: 18px; height: 2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ===== Responsive breakpoints ================================================ */

/* Tablets and below: tighter padding, hide the "Signed in as ..." text */
@media (max-width: 1024px) {
    .header { padding: 0 20px; gap: 10px; }
    .container { padding: 0 12px; margin: 18px auto; }
    .user-info > .user-meta,
    .user-info > .user-meta-action { display: none; }
}

/* Phones: collapse navigation behind a hamburger; bell dropdown becomes full-width */
@media (max-width: 768px) {
    .header {
        height: auto;
        min-height: 60px;
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .header h1 { font-size: 19px; }
    .header-logo { height: 40px; max-width: 160px; }
    .nav-toggle { display: inline-flex; order: 2; }
    .user-info { order: 3; margin-left: auto; }

    .main-nav {
        order: 4;
        flex-basis: 100%;
        display: none;
        flex-direction: column;
        gap: 0;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
        margin-top: 4px;
    }
    .main-nav.is-open { display: flex; }
    .main-nav a {
        padding: 12px 8px;
        border-radius: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .main-nav a:last-child { border-bottom: none; }

    /* Bell dropdown — anchored to viewport, not the bell, so it doesn't overflow */
    .bell-dropdown {
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100vh - 80px);
    }

    /* Modules use less padding on phones */
    .module-wrapper { padding: 18px 14px; border-radius: 12px; }
    .module-wrapper h2 { font-size: 17px; margin-bottom: 18px; padding-bottom: 10px; }
    .stats-container { grid-template-columns: 1fr 1fr !important; }

    /* Tables — let them scroll horizontally instead of mangling content */
    .styled-table { font-size: 13px; }
    .module-wrapper > .styled-table,
    .module-wrapper > form > .styled-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reports grid: single column */
    .reports-grid { grid-template-columns: 1fr !important; }

    /* PTO form: single column */
    .pto-form { grid-template-columns: 1fr !important; }
    .form-row { flex-direction: column; }

    /* Login wrapper a bit narrower */
    .login-wrapper { padding: 24px 18px; }
}

/* Very narrow phones (≤ 380px) */
@media (max-width: 380px) {
    .header h1 { font-size: 17px; }
    .user-info { gap: 6px; }
    .btn-small { padding: 6px 10px; font-size: 12px; }
    .module-wrapper { padding: 14px 10px; }
    .stats-container { grid-template-columns: 1fr !important; }
}

/* ===== Busy overlay (shown during form submits) ============================ */
.busy-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.busy-overlay[hidden] { display: none !important; }
.busy-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    padding: 22px 28px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 280px;
    max-width: 90vw;
}
.busy-spinner {
    width: 38px; height: 38px;
    border: 4px solid var(--primary-soft);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: busy-spin 0.9s linear infinite;
    flex: 0 0 auto;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
.busy-title {
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 2px;
}
.busy-subtitle {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== Form sections (used by user_edit.php and modals) ===================== */
.form-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 22px 26px;
    margin-bottom: 18px;
}
.form-section-title {
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 600;
    color: var(--dark-color);
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-section-title .form-section-icon {
    font-size: 20px;
}
.form-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 18px;
    align-items: start;
}
.form-section-grid .full {
    grid-column: 1 / -1;
}
/* Inside the grid every form-group is laid out as a vertical stack with the
   label always pinned to the top — keeps inputs aligned baseline-to-baseline
   across columns even when one label wraps to two lines. */
.form-section-grid .form-group {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.form-section-grid .form-group > label {
    min-height: 18px;
    margin-bottom: 6px;
    line-height: 1.2;
}
/* Normalise every input/select/textarea inside a modal grid so they have
   the same height. Without this <input type="date"> renders ~2 px taller
   than <select> in Chromium and the row looks crooked. */
.form-section-grid .form-group input,
.form-section-grid .form-group select,
.form-section-grid .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.2;
}
.form-section-grid .form-group input:not([type="checkbox"]):not([type="color"]):not([type="file"]),
.form-section-grid .form-group select {
    height: 42px;
}
.form-section-grid .form-group textarea {
    min-height: 80px;
    resize: vertical;
}
/* Sub-grid (e.g. From / To time pair inside the OT modal) — inherit same
   sizing so the inner inputs match the rest. */
.form-section-grid .form-group > div > input {
    height: 42px;
    width: 100%;
    box-sizing: border-box;
}
.form-section .form-group { margin: 0; }
.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--border-color);
}
.form-actions .btn { width: auto; }
/* Always render Cancel + Save with the same min-height in the action bar
   regardless of which colour modifier they carry. (A11) */
.form-actions .btn { min-height: 42px; }

/* Supporting documents inside the request detail modal (A3). Header with
   paperclip + count, list of one chip per file with a download button. */
.rmodal-docs {
    margin-top: 18px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--primary-color) 5%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.rmodal-docs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-color);
}
.rmodal-docs-icon { font-size: 16px; }
.rmodal-docs-count {
    background: var(--primary-color);
    color: white;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 11.5px;
    font-weight: 700;
}
.rmodal-docs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rmodal-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.rmodal-doc-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--text-color);
}
.rmodal-doc-size {
    color: var(--text-muted);
    font-size: 12.5px;
    flex-shrink: 0;
}
[data-theme="dark"] .rmodal-docs { background: rgba(96,165,250,0.08); }

/* B3 — late upload + "request more" forms inside the rmodal docs section. */
.rmodal-docs-empty {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}
.rmodal-docs-policy {
    background: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 4px;
}
.rmodal-docs-policy.is-optional {
    background: color-mix(in srgb, var(--secondary-color) 15%, transparent);
    color: var(--secondary-color);
}
.rmodal-docs-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.rmodal-docs-form {
    margin-top: 12px;
    padding: 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.rmodal-docs-form[hidden] { display: none; }
.rmodal-docs-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}
.rmodal-doc-req-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
}
.rmodal-doc-req-label textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    resize: vertical;
}

/* Inline paperclip badge with click-to-open popover listing each file as a
   direct download link. Used in my_pto / my_team / Edit Employee history.
   Wrapper is position:relative so the popover anchors right under the badge. */
.docs-badge {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
}
.docs-badge-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 9px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition);
}
.docs-badge-trigger:hover {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
}
.docs-badge.is-open .docs-badge-trigger {
    background: color-mix(in srgb, var(--primary-color) 28%, transparent);
}
.docs-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 240px;
    max-width: 360px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    display: none;
}
.docs-badge.is-open .docs-popover { display: block; }
.docs-popover-header {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 6px 10px 4px;
}
.docs-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-color);
    font-size: 13px;
    transition: background-color var(--transition);
}
.docs-popover-item:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--text-color);
}
.docs-popover-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.docs-popover-size {
    color: var(--text-muted);
    font-size: 11.5px;
    flex-shrink: 0;
}

/* ============================================================================
   Modern drag-and-drop file uploader (.dropzone)
   Replaces plain <input type="file"> in PTO request forms. Click anywhere on
   the zone to browse, drop files in to attach, click ✕ on a chip to remove.
   The hidden <input> stays in sync via DataTransfer so normal form submit
   sends the files unchanged.
   ============================================================================ */
.dropzone {
    display: block;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    background: color-mix(in srgb, var(--primary-color) 3%, transparent);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
    text-align: center;
    position: relative;
}
.dropzone:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
}
.dropzone.is-dragover {
    border-color: var(--primary-color);
    border-style: solid;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    transform: scale(1.01);
}
.dropzone-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
}
.dropzone-icon {
    width: 40px; height: 40px;
    color: var(--primary-color);
    margin-bottom: 4px;
}
.dropzone-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
}
.dropzone-title em {
    color: var(--primary-color);
    font-style: normal;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dropzone-meta {
    font-size: 12.5px;
    color: var(--text-muted);
}
.dropzone-files {
    list-style: none;
    margin: 14px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.dropzone-files:empty { display: none; }
.dropzone-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.dropzone-file-icon {
    flex-shrink: 0;
    color: var(--primary-color);
}
.dropzone-file-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.dropzone-file-size {
    color: var(--text-muted);
    font-size: 12px;
}
.dropzone-file-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    padding: 0;
    font-size: 14px;
    line-height: 1;
}
.dropzone-file-remove:hover {
    background: color-mix(in srgb, var(--danger-color) 15%, transparent);
    color: var(--danger-color);
}
.dropzone.is-required:not(.has-files) {
    border-color: var(--danger-color);
}
.dropzone.is-required:not(.has-files) .dropzone-meta::before {
    content: '★ Required — ';
    color: var(--danger-color);
    font-weight: 600;
}
[data-theme="dark"] .dropzone {
    background: rgba(255,255,255,0.02);
}
[data-theme="dark"] .dropzone:hover {
    background: rgba(96,165,250,0.06);
}
[data-theme="dark"] .dropzone.is-dragover {
    background: rgba(96,165,250,0.12);
}
[data-theme="dark"] .dropzone-file {
    background: rgba(255,255,255,0.04);
}

/* A14 — Wallchart multi-cell range banner. Sits at the bottom-right of the
   viewport while a date range is selected, offering a one-click jump into
   the New PTO Request flow with the dates pre-filled. */
.wc-range-banner {
    position: fixed;
    right: 24px;
    bottom: 24px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 12px 16px;
    display: none;
    align-items: center;
    gap: 12px;
    z-index: 100;
    max-width: calc(100vw - 48px);
}
.wc-range-banner.is-visible { display: inline-flex; }
.wc-range-banner-text { font-size: 14px; color: var(--text-color); }
.wc-range-banner-meta { color: var(--text-muted); font-size: 12.5px; margin-left: 4px; }

/* Emergency contact section — five inputs on one row at desktop widths,
   stacking gracefully below 900px. Email gets a wider track since the
   string is usually longest. */
.emergency-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.1fr 1.6fr;
    gap: 12px 16px;
    align-items: end;
}
.emergency-contact-row .form-group { margin: 0; min-width: 0; }
.emergency-contact-row input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
}
@media (max-width: 1100px) {
    .emergency-contact-row { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) {
    .emergency-contact-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
    .emergency-contact-row { grid-template-columns: 1fr; }
}

/* A13 — Employee history section in user_edit.php (tabbed PTO / OT / Hours). */
.employee-history { margin-top: 28px; }
.employee-history-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
    overflow-x: auto;
}
.emphist-tab {
    background: none;
    border: 0;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
    white-space: nowrap;
}
.emphist-tab:hover { color: var(--text-color); }
.emphist-tab.is-active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.emphist-count {
    display: inline-block;
    background: var(--border-color);
    color: var(--text-muted);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    margin-left: 5px;
    font-weight: 600;
}
.emphist-tab.is-active .emphist-count {
    background: var(--primary-color);
    color: white;
}
.employee-history-pane { display: none; }
.employee-history-pane.is-active { display: block; }

/* A16: User avatar dropdown in the header. Replaces the "Signed in as +
   Change password + Sign out" trio with a single click target. */
.user-menu {
    position: relative;
}
.user-menu-trigger {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: box-shadow var(--transition);
    display: inline-block;
    line-height: 0;
}
.user-menu-trigger:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent); }
.user-menu-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-color);
}
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 200;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.user-menu.is-open .user-menu-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.user-menu-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}
.user-menu-name { font-weight: 600; font-size: 14px; color: var(--text-color); }
.user-menu-role { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.user-menu-item {
    display: block;
    padding: 10px 16px;
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
    transition: background-color var(--transition);
}
.user-menu-item:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--text-color);
}
.user-menu-item-danger { color: var(--danger-color); }
.user-menu-item-danger:hover {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
}
.user-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* B16 — ESIGN/UETA consent gate. Full-screen blocking overlay shown on
   first login; the user can't reach the rest of the app until they
   accept (or sign out). */
.terms-gate {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(15, 23, 42, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(2px);
}
.terms-gate-card {
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    max-width: 760px;
    width: 100%;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.terms-gate-card h2 {
    margin: 0;
    padding: 22px 28px 6px;
    font-size: 19px;
    color: var(--text-color);
}
.terms-gate-sub {
    margin: 0;
    padding: 0 28px 14px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.terms-gate-body {
    padding: 0 28px 14px;
    overflow-y: auto;
    flex: 1;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-color);
}
.terms-gate-body h3 {
    color: var(--primary-color);
    font-size: 14px;
    margin: 18px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.terms-gate-body ul { padding-left: 22px; margin: 6px 0 12px; }
.terms-gate-body li { margin-bottom: 6px; }
.terms-gate-body p  { margin: 8px 0; }
.terms-gate-footer {
    padding: 18px 28px 22px;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
}
.terms-gate-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-color);
    cursor: pointer;
    margin-bottom: 14px;
}
.terms-gate-confirm input { margin-top: 2px; flex-shrink: 0; }
.terms-gate-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.terms-gate-fingerprint {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
}
[data-theme="dark"] .terms-gate { background: rgba(0, 0, 0, 0.78); }

/* B5 — utility class for the List/Hierarchy view toggle (works alongside
   any existing inline display: rules on the same element). */
.is-view-hidden { display: none !important; }

/* B5 — User Management view toggle (List / Hierarchy). */
.user-view-toggle {
    display: inline-flex;
    gap: 4px;
    background: color-mix(in srgb, var(--secondary-color) 8%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 14px;
}
.user-view-btn {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    transition: background-color var(--transition), color var(--transition);
}
.user-view-btn:hover { color: var(--text-color); }
.user-view-btn.is-active {
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
}

/* B5 — Top-down org-chart diagram. Outer .org-tree wraps a fixed-height
   viewport with drag-to-pan, and a transform-scaled canvas inside it that
   actually renders the tree. A floating toolbar in the top-right offers
   zoom in/out, Fit-to-view, and Reset. Classic CSS connector pattern
   inside: nested <ul>, each <li> draws its own ::before/::after segment. */
.org-tree {
    position: relative;
    height: clamp(420px, calc(100vh - 280px), 900px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-muted) 30%, transparent) 1px, transparent 1px),
        var(--card-bg);
    background-size: 22px 22px;
    overflow: hidden;
    --org-conn: var(--border-color);
}
.org-tree-viewport {
    position: absolute;
    inset: 0;
    overflow: auto;
    cursor: grab;
}
.org-tree-viewport.is-grabbing {
    cursor: grabbing;
    user-select: none;
}
.org-tree-canvas {
    display: inline-block;
    padding: 36px 32px 32px;
    transform-origin: 0 0;
    transition: transform 120ms ease;
    text-align: center;
    min-width: 100%;
}

/* Floating toolbar — sits in the top-right corner of the viewport. */
.org-tree-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(15,23,42,.10);
}
.org-tree-btn {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    color: var(--text-color);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition);
    padding: 0;
}
.org-tree-btn-text {
    width: auto;
    padding: 0 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.org-tree-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-color);
}
.org-tree-btn-text:hover { color: var(--primary-color); }
.org-tree-zoom-label {
    min-width: 48px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.org-tree-divider {
    width: 1px;
    height: 18px;
    background: var(--border-color);
    margin: 0 4px;
}
.org-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    position: relative;
}
.org-tree-canvas > ul {
    /* Top-most row: no padding-top so the root sits flush with the toolbar. */
    padding-top: 4px;
}
.org-tree ul ul {
    /* Each nested level pads to make room for the connectors above. */
    padding-top: 24px;
}
.org-tree li {
    list-style: none;
    position: relative;
    padding: 24px 8px 0;
    flex: 0 0 auto;
}
/* Two halves of the horizontal connector that joins siblings. */
.org-tree li::before,
.org-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    height: 24px;
    width: 50%;
    border-top: 2px solid var(--org-conn);
}
.org-tree li::before { right: 50%; }
.org-tree li::after  { left:  50%; border-left: 2px solid var(--org-conn); }
/* Single child — drop the horizontal stub, leave the vertical line. */
.org-tree li:only-child::before,
.org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 24px; }
/* First and last children — chop the outer half of the connector so the
   horizontal beam doesn't extend past the row. */
.org-tree li:first-child::before,
.org-tree li:last-child::after  { border: 0 none; }
.org-tree li:last-child::before {
    border-right: 2px solid var(--org-conn);
    border-radius: 0 6px 0 0;
}
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
/* Vertical line going DOWN from a parent to its children's row. */
.org-tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    height: 24px;
    border-left: 2px solid var(--org-conn);
}
/* Roots row — no upward connector. */
.org-tree-canvas > ul > li::before,
.org-tree-canvas > ul > li::after { display: none; }
.org-tree-canvas > ul > li { padding-top: 0; }

/* Org-chart card in the classic team-structure style: a coloured circular
   avatar that floats above a rectangular text-box. Border + name colour
   shift per hierarchy level (root → blue, then green, orange, teal —
   matches the reference deck). Pencil button in the top-right toggles the
   inline "Reports to" picker. */
.org-node {
    display: inline-block;
    position: relative;
    padding-top: 30px;        /* room for the floating avatar above the card */
    text-align: left;          /* the inline-block default leaves things wonky in centered parents */
}

/* Manager-loop warning banner shown under the tree if any user's chain
   loops back to itself. */
.org-cycle-warning {
    margin: 14px auto 0;
    padding: 8px 14px;
    background: color-mix(in srgb, var(--warning-color) 14%, transparent);
    color: var(--warning-color);
    border: 1px solid color-mix(in srgb, var(--warning-color) 35%, transparent);
    border-radius: 8px;
    font-size: 13px;
    max-width: 720px;
    text-align: center;
}
.org-avatar-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    /* White ring so the avatar reads cleanly against any background. */
    background: var(--card-bg);
    padding: 3px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(15,23,42,.12);
}
.org-card {
    position: relative;
    width: 180px;
    padding: 36px 12px 12px;  /* top padding accommodates the avatar overhang */
    background: var(--card-bg);
    border: 2px solid var(--org-c, #94a3b8);
    border-radius: 6px;
    text-align: center;
    transition: box-shadow var(--transition), transform var(--transition);
}
.org-card:hover {
    box-shadow: 0 8px 22px rgba(15,23,42,.14);
    transform: translateY(-1px);
}
.org-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.org-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--org-c, var(--text-color));
    line-height: 1.25;
    overflow-wrap: anywhere;
    margin-bottom: 2px;
}
.org-role {
    font-style: italic;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.3;
    text-transform: capitalize;
}
.org-reports-pill {
    display: inline-block;
    margin-top: 8px;
    padding: 1px 9px;
    background: color-mix(in srgb, var(--org-c, var(--primary-color)) 14%, transparent);
    color: var(--org-c, var(--primary-color));
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Per-level colour scheme. --org-c is the variable each card paints with —
   border, name colour, reports-pill all derive from it. */
.org-card.org-level-0 { --org-c: #2563eb; }   /* blue   — managing director */
.org-card.org-level-1 { --org-c: #16a34a; }   /* green  — VP / second tier */
.org-card.org-level-2 { --org-c: #ea7c2c; }   /* orange — manager / third tier */
.org-card.org-level-3 { --org-c: #0ea5e9; }   /* teal   — leads / leaves */

/* Pencil button — top-right corner, subtle. */
.org-card-edit {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: 0;
    padding: 4px;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), opacity var(--transition);
    opacity: 0.55;
    z-index: 3;
}
.org-card:hover .org-card-edit { opacity: 1; }
.org-card-edit:hover {
    background: color-mix(in srgb, var(--org-c, var(--primary-color)) 14%, transparent);
    color: var(--org-c, var(--primary-color));
}

/* Inline manager picker. Centered below the card, separate flow so the
   tree connectors aren't disrupted. */
.org-mgr-form {
    margin: 8px auto 0;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.org-mgr-form[hidden] { display: none; }
.org-mgr-label {
    font-size: 11.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.org-mgr-select {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    min-width: 200px;
    max-width: 240px;
}
.org-mgr-form > .btn { width: auto; align-self: stretch; min-height: 32px; }

/* People list — name + avatar are the entire click target for editing
   the user (A7). Replaces the explicit "Edit" button column. */
.user-name-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    padding: 4px;
    transition: background-color var(--transition);
}
.user-name-link:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: inherit;
}
.user-name-link:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Absence type flag grid — two-column layout where each row is a toggle-row
   (label left, iOS toggle right). Uses .toggle-row from the shared toggle
   styles above so it matches the rest of the admin UI. (A19) */
.lt-flags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 0;
}
.lt-flags-grid .toggle-row {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 0;
}
.lt-flags-grid .toggle-row:last-child,
.lt-flags-grid .toggle-row:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}
@media (max-width: 600px) {
    .lt-flags-grid { grid-template-columns: 1fr; }
}

/* Helper styles for the absence type modal alignment cleanup (A19). */
.form-hint {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12.5px;
}
.icon-picker-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.icon-picker-input-row .icon-picker-input {
    flex: 1;
    min-width: 0;
    height: 42px;
}
.form-group-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: center;
    padding: 10px 14px;
    background: color-mix(in srgb, var(--secondary-color) 6%, transparent);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.form-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.form-flag input[type="checkbox"] {
    margin: 0;
    width: 16px; height: 16px;
    flex-shrink: 0;
}
[data-theme="dark"] .form-group-flags {
    background: rgba(255,255,255,0.03);
}

/* Two-column layout for stacking form sections side-by-side on wide screens.
   Used by user_edit.php so Identity+Job and Contact+Address sit horizontally. */
.form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
.form-row-2col > .form-section { margin-bottom: 0; }
@media (max-width: 900px) {
    .form-row-2col { grid-template-columns: 1fr; gap: 0; }
    .form-row-2col > .form-section { margin-bottom: 18px; }
}

/* ===== Generic modal (used by Absences add/edit dialogs) ==================== */
.modal {
    position: fixed; inset: 0; z-index: 1000; display: none;
}
.modal.open { display: block; }
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.modal-card {
    position: relative;
    margin: 4vh auto;
    max-width: 640px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    padding: 24px 28px;
    animation: rmodalIn 0.18s ease-out;
}
.modal-card-wide { max-width: 880px; }
.modal-close {
    position: absolute; right: 14px; top: 10px;
    background: transparent; border: none;
    font-size: 28px; line-height: 1;
    color: var(--text-muted); cursor: pointer;
    padding: 4px 10px;
}
.modal-close:hover { color: var(--text-color); }
.modal-title {
    margin: 0 0 18px 0;
    padding-right: 36px;
    font-size: 20px;
    color: var(--dark-color);
}

/* Company Settings — "Add" forms below the dept / custom-holiday tables.
   Single row: input grows, button auto-width, both same height as the
   Edit / Delete buttons in the table above. */
.company-add-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.company-add-form input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 7px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    height: 32px;
    box-sizing: border-box;
}
.company-add-form .btn-small {
    height: 32px;
    white-space: nowrap;
}

/* Holiday-year preview row — label + small numeric input + Show + Reset
   buttons sit on a single tidy row above the holiday table. */
.holiday-year-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.holiday-year-form label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 0;
}
.holiday-year-form input[type="number"] {
    width: 90px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 13px;
    height: 32px;
    box-sizing: border-box;
}
.holiday-year-form .btn-small { height: 32px; }

/* Per-row Edit / Delete actions — right-aligned and consistent across both
   the Absence Types and PTO Accrual Rules tables. */
.table-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    white-space: nowrap;
    justify-content: flex-end;
}
.table-actions .btn-small {
    padding: 6px 12px;
    font-size: 13px;
    width: auto;
}
/* Apply right-alignment to every cell in the actions column (header + body)
   so the buttons align with the column's right edge. */
.styled-table th.col-actions,
.styled-table td.col-actions {
    text-align: right;
    white-space: nowrap;
}

/* ===== Avatar component (used everywhere employee photos appear) =========== */
.avatar {
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    object-fit: cover;
    background: #94a3b8;
    color: white;
    font-weight: 600;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.3),
                0 1px 3px rgba(0,0,0,.1);
}
.avatar-fallback { letter-spacing: .02em; }

/* Photo upload section in user_edit.php — legacy, kept for back-compat. */
.photo-section { padding: 18px 22px; }
.photo-section-row {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.photo-section-avatar {
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.5),
                0 4px 12px rgba(0,0,0,.12);
}
.photo-section-meta { flex: 1; min-width: 240px; }

/* Modern Edit-Employee topbar — large avatar with FB/iOS-style camera-pencil
   overlay on the avatar itself, plus an iOS toggle for active status pinned
   to the right. The avatar IS the upload button — no clunky file input. */
.employee-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    flex-wrap: wrap;
}
.employee-topbar-left {
    display: flex; align-items: center; gap: 16px;
    min-width: 0;
}
.employee-topbar-meta { min-width: 0; }
.employee-topbar-name {
    font-size: 20px; font-weight: 700;
    color: var(--dark-color); line-height: 1.2;
}
.employee-topbar-sub {
    font-size: 14px; color: var(--text-muted);
    margin-top: 2px;
}
.employee-topbar-status {
    flex: 0 0 auto;
    min-width: 240px;
}
.avatar-edit-form { margin: 0; }
.avatar-edit {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    transition: transform .15s ease;
}
.avatar-edit:hover { transform: scale(1.03); }
.avatar-edit-img {
    width: 88px !important; height: 88px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.18),
                inset 0 0 0 3px rgba(255,255,255,.4);
}
.avatar-edit-overlay {
    position: absolute;
    right: 0; bottom: 0;
    width: 30px; height: 30px;
    background: var(--primary-color);
    color: white;
    border: 3px solid var(--card-bg);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: transform .15s ease, background .15s ease;
}
.avatar-edit:hover .avatar-edit-overlay {
    background: color-mix(in srgb, var(--primary-color) 85%, black);
    transform: scale(1.08);
}
.avatar-edit-file {
    position: absolute; opacity: 0; pointer-events: none;
    width: 0; height: 0;
}

@media (max-width: 700px) {
    .employee-topbar { flex-direction: column; align-items: stretch; }
    .employee-topbar-status { min-width: 0; }
}

/* ===== Team Wallchart ======================================================
   Modern grid: column 0 is a sticky employee strip, every other cell is one
   user × one day. Smooth hover, leave-type icons inside cells, per-row stats. */
.wallchart-module .management-header { margin-bottom: 18px; }

.wallchart-nav-pills {
    display: inline-flex; gap: 4px;
    background: var(--card-bg);
    padding: 4px; border-radius: 999px;
    border: 1px solid var(--border-color);
}
.wc-pill {
    padding: 7px 14px;
    border-radius: 999px;
    background: transparent; border: none;
    color: var(--text-color);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}
.wc-pill:hover { background: var(--primary-soft); color: var(--primary-color); }
.wc-pill-primary {
    background: var(--primary-color); color: white;
}
.wc-pill-primary:hover { background: var(--primary-color); color: white; opacity: .9; }

.wallchart-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    background: var(--card-bg);
    padding: 14px 18px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.wc-toolbar-left  { display: flex; align-items: baseline; gap: 12px; }
.wc-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-range-label  { font-size: 18px; font-weight: 700; color: var(--dark-color); }
.wc-employee-count {
    font-size: 12px; color: var(--text-muted);
    padding: 3px 10px; border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-color);
    font-weight: 600;
}
.wc-search {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px; font-size: 13px;
    min-width: 220px;
}
.wc-search:focus, .wc-select:focus, .wc-range-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.wc-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px; font-size: 13px;
    background: var(--card-bg);
    cursor: pointer;
}
.wc-range-form {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--border-color); border-radius: 8px;
}
.wc-range-form input[type="date"] {
    border: none; background: transparent;
    font-size: 13px; padding: 4px;
}

.wallchart-legend {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-items: center;
    margin-bottom: 16px;
}
.wc-legend-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-color);
    padding: 4px 10px; border-radius: 999px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.wc-swatch {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 3px;
}
.wc-swatch-pending {
    background: repeating-linear-gradient(
        45deg, var(--c, #4f46e5) 0 4px, rgba(255,255,255,.6) 4px 8px);
    border: 1px solid var(--c, #4f46e5);
}
.wc-swatch-holiday {
    background: rgba(244,114,182,.25); border: 1px solid rgba(244,114,182,.5);
}
.wc-swatch-weekend {
    background: rgba(0,0,0,.05); border: 1px solid var(--border-color);
}
.wc-badge {
    display: inline-block;
    font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 4px;
    color: white; line-height: 1.2;
}
.wc-badge-h  { background: #0ea5e9; }
.wc-badge-ot { background: #f59e0b; }

.wc-empty {
    text-align: center; padding: 60px 20px;
    color: var(--text-muted);
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    border: 1px dashed var(--border-color);
}
.wc-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .6; }

.wallchart-scroll {
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}
.wallchart {
    display: grid;
    /* Employee strip is fixed; day columns are fluid (1fr each) but never
       narrower than 28px. With the wallchart container using nearly the full
       viewport (see .wallchart-page-wide below), 31 days fit comfortably on
       a typical 1366px+ screen with no horizontal scrollbar. */
    grid-template-columns: 200px repeat(var(--day-count, 30), minmax(28px, 1fr));
    grid-auto-rows: 72px;
    min-width: 100%;
    user-select: none;
}

/* Top-left corner cell + day headers */
.wallchart-corner {
    position: sticky; left: 0; top: 0; z-index: 4;
    background: var(--card-bg);
    border-bottom: 2px solid var(--border-color);
    border-right: 2px solid var(--border-color);
    display: flex; align-items: center;
    padding: 0 16px;
    font-size: 12px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
    grid-row: 1; grid-column: 1;
    height: 60px;
}
.wallchart-day-head {
    grid-row: 1;
    border-bottom: 2px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    background: var(--card-bg);
    text-align: center;
    padding: 8px 2px;
    font-size: 11px;
    color: var(--text-muted);
    position: sticky; top: 0; z-index: 2;
    height: 60px;
    box-sizing: border-box;
    overflow: hidden;
    transition: background .15s;
}
.wallchart-day-head .wc-dow { font-weight: 600; color: var(--text-muted); font-size: 10px; text-transform: uppercase; }
.wallchart-day-head .wc-dom { font-weight: 700; color: var(--dark-color); font-size: 15px; line-height: 1.1; }
.wallchart-day-head .wc-mon {
    font-size: 9px; color: var(--primary-color); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    margin-top: 1px;
}
.wallchart-day-head.is-weekend { background: rgba(0,0,0,.025); }

/* "Today" highlight is rendered as a continuous, faint vertical band that
   runs through the whole column rather than a thick outline on every cell.
   The band is just a soft primary-color wash applied identically to the
   day-head AND every cell in that column; subtle 1px side-edges in the
   primary color tie the column together without being loud. */
.wallchart-day-head.is-today,
.wallchart-cell.is-today {
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    box-shadow:
        inset  1px 0 0 color-mix(in srgb, var(--primary-color) 35%, transparent),
        inset -1px 0 0 color-mix(in srgb, var(--primary-color) 35%, transparent);
}
/* Tint the labels in the primary colour so the user can spot "today" at a
   glance without it shouting. The continuous side-edges already do most of
   the work — the type just confirms which day it is. */
.wallchart-day-head.is-today .wc-dow,
.wallchart-day-head.is-today .wc-mon { color: var(--primary-color); }
.wallchart-day-head.is-today .wc-dom {
    color: var(--primary-color);
    font-weight: 800;
}

/* Sticky employee column — modernized */
.wallchart-employee {
    position: sticky; left: 0; z-index: 3;
    background: var(--card-bg);
    border-right: 2px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px;
    height: 72px; box-sizing: border-box;
    grid-column: 1;
    transition: background .15s;
}
.wallchart-employee:hover { background: color-mix(in srgb, var(--primary-color) 4%, var(--card-bg)); }
.wc-avatar {
    width: 36px; height: 36px;
    font-size: 12px;
}
.wc-employee-meta { min-width: 0; flex: 1; }
/* Name is the click target → opens the employee-detail modal. */
.wc-employee-name {
    font-weight: 600; font-size: 13.5px; color: var(--dark-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
    cursor: pointer;
}
.wc-employee-name:hover { color: var(--primary-color); text-decoration: underline; }
/* Non-clickable name (employee viewing a coworker — they don't have permission
   to see the full profile, so the name is plain text instead of a link). */
.wc-employee-name-static {
    cursor: default;
}
.wc-employee-name-static:hover {
    color: var(--dark-color);
    text-decoration: none;
}
.wc-employee-sub {
    font-size: 11px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}
.wc-employee-stats .wc-stat { font-size: 10px; padding: 0 5px; }
.wc-employee-stats { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.wc-stat {
    font-size: 10.5px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-color);
    line-height: 1.5;
}
.wc-stat-ot { background: rgba(245,158,11,.15); color: #b45309; }

/* Day cells — softer + smoother */
.wallchart-cell {
    position: relative;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background .12s, transform .12s;
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
.wallchart-cell:hover {
    background: var(--primary-soft);
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    z-index: 1;
}
.wallchart-cell.is-weekend  { background: rgba(15,23,42,.025); }
.wallchart-cell.is-holiday  { background: rgba(244,114,182,.16); }
/* Small "H" pill that appears in holiday cells (when not covered by PTO).
   Pink to match the .is-holiday wash; ½ suffix when it's a half-day. */
.wc-holiday-mark {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 16px; padding: 0 4px;
    background: rgba(244, 114, 182, .8);
    color: white;
    font-size: 10px; font-weight: 700;
    border-radius: 4px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
/* (today highlight is defined together with the day-head above so the
    column reads as one continuous band) */

/* Approved PTO — solid fill with the leave-type color. PTO color wins over
   the today wash; the side-edges from .is-today still mark the column. */
.wallchart-cell.has-pto {
    background: var(--pto-color, #4f46e5);
    color: white;
}
.wallchart-cell.is-today.has-pto {
    /* Re-apply today's side-edges on top of the PTO fill so the column
       continuity isn't broken by an opaque PTO block. */
    box-shadow:
        inset  1px 0 0 color-mix(in srgb, var(--primary-color) 50%, transparent),
        inset -1px 0 0 color-mix(in srgb, var(--primary-color) 50%, transparent);
}
/* Pending PTO — striped fill */
.wallchart-cell.has-pto.pto-pending {
    background: repeating-linear-gradient(
        45deg,
        var(--pto-color, #4f46e5) 0 5px,
        color-mix(in srgb, var(--pto-color, #4f46e5) 30%, white) 5px 10px);
    border: 1px solid var(--pto-color, #4f46e5);
    color: var(--dark-color);
}
.wallchart-cell.has-pto .wc-badge { background: rgba(255,255,255,.92); color: #111; }

/* A1: when a PTO request lands on a non-working day (weekend OR a company
   holiday) it doesn't consume any hours — calculateWorkingDays() already
   excludes both. Render the PTO fill semi-transparent so the underlying
   weekend / holiday context still reads through, and keep the H marker on
   holidays so it's instantly clear that day was already off. */
.wallchart-cell.is-weekend.has-pto,
.wallchart-cell.is-holiday.has-pto {
    opacity: 0.45;
}
/* A14 — drag-select shouldn't kick off the browser's native text selection
   on the wallchart grid. Cells stay clickable; user-select disabled on
   every cell except the masked-row ones (those don't drag-select). */
.wallchart-cell:not(.wc-cell-masked) {
    user-select: none;
    -webkit-user-select: none;
}
.wallchart-cell.is-holiday.has-pto .wc-holiday-mark { opacity: 1; }

/* Leave-type icon centered in PTO cells */
.wc-pto-icon {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* Hours / OT badges sit small in the corners */
.wallchart-cell .wc-badge {
    position: absolute;
    bottom: 3px;
    font-size: 8px; padding: 0 3px;
}
.wallchart-cell .wc-badge-h  { left: 3px; }
.wallchart-cell .wc-badge-ot { right: 3px; }

/* Mobile fallback — sticks to a fixed 32px so 31 days still scrolls cleanly. */
@media (max-width: 900px) {
    .wallchart { grid-template-columns: 170px repeat(var(--day-count, 30), 32px); }
    .wallchart-employee { padding: 0 10px; gap: 8px; }
    .wc-avatar { width: 34px; height: 34px; font-size: 12px; }
    .wc-employee-name { font-size: 13px; }
    .wc-employee-sub  { font-size: 11px; }
    .wallchart-toolbar { flex-direction: column; align-items: stretch; }
    .wc-search { min-width: 0; flex: 1; }
}

/* Legacy alias — kept so old links/templates keep working. The default
   .container width now matches what the wallchart needs, so no override
   is required. Safe to delete in a future cleanup. */
.wallchart-page-wide.container { /* same as default */ }

/* Embedded wallchart (used inside the dashboard iframe) — drop the outer
   container padding and module-wrapper chrome so the chart fills the
   iframe edge to edge. */
body.wallchart-embedded {
    margin: 0;
    background: transparent;
}
body.wallchart-embedded .container { margin: 0; padding: 8px; max-width: none; }
body.wallchart-embedded .wallchart-module {
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 8px;
}
body.wallchart-embedded .wallchart-toolbar {
    padding: 8px 10px;
    margin-bottom: 8px;
}
body.wallchart-embedded .wallchart-legend { margin-bottom: 8px; }

/* Icon picker — SVG grid + emoji grid inside Absence Type modals */
.icon-picker-tabs {
    display: flex; flex-direction: column; gap: 8px;
}
.icon-picker-tabs > strong {
    font-size: 11px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
    font-weight: 700;
}
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
    padding: 10px;
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    max-width: 540px;
}
.icon-pick {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center; justify-content: center;
    color: var(--text-color);
    aspect-ratio: 1 / 1;
}
.icon-pick svg { width: 22px; height: 22px; }
.icon-pick:hover {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37,99,235,.15);
}
.icon-pick.is-selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(37,99,235,.3);
}
.icon-picker-preview {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--primary-color);
    font-size: 22px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}
.icon-picker-preview svg { width: 28px; height: 28px; }

/* Generic icon styling — used everywhere the catalogue renders */
.leave-icon { display: inline-block; vertical-align: middle; }
.leave-icon-emoji { display: inline-block; vertical-align: middle; }

/* Leave-type chip in the PTO request modal — shows what kind of absence
   this is at a glance, with the SVG icon, code, and tag pills. */
.lt-chip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin: 4px 0 18px 0;
    background: color-mix(in srgb, var(--lt-color, #4f46e5) 8%, var(--card-bg));
    border-left: 4px solid var(--lt-color, #4f46e5);
    border-radius: 10px;
}
.lt-chip-icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: var(--lt-color, #4f46e5);
    color: white;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--lt-color, #4f46e5) 35%, transparent);
}
.lt-chip-icon svg { width: 24px; height: 24px; }
.lt-chip-name {
    font-size: 17px; font-weight: 700;
    color: var(--dark-color);
    line-height: 1.2;
}
.lt-chip-meta {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 6px;
    align-items: center;
}
.lt-chip-code {
    font-size: 11px;
    background: var(--bg-color, #f1f5f9);
    color: var(--text-muted);
    padding: 2px 7px; border-radius: 4px;
    font-family: ui-monospace, monospace;
}
.lt-tag {
    font-size: 11px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    background: var(--bg-color, #f1f5f9);
    color: var(--text-muted);
}
.lt-tag-paid   { background: rgba(16,185,129,.12); color: #047857; }
.lt-tag-unpaid { background: rgba(107,114,128,.15); color: #374151; }

.rmodal-position {
    font-size: 14px; color: var(--text-muted);
    font-weight: 400; margin-left: 4px;
}

/* Day-detail modal: quick-action button row + inline forms (request PTO,
   add overtime). The forms are hidden by default and revealed by tapping
   their action button. */
.day-detail-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: 12px 0;
}
.day-detail-actions .btn { width: auto; }
.day-detail-form {
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.day-detail-form h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: var(--dark-color);
}
.day-detail-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.day-detail-form-grid label {
    display: flex; flex-direction: column;
    font-size: 12px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
    gap: 4px;
}
.day-detail-form-grid label.full { grid-column: 1 / -1; }
.day-detail-form-grid input,
.day-detail-form-grid select {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    text-transform: none;
    color: var(--dark-color);
}
.day-detail-form-actions {
    display: flex; justify-content: flex-end; gap: 8px;
    margin-top: 10px;
}

/* Coworker cells in the dashboard wallchart for plain employees — generic
   "out" pill, no leave-type colour or icon (privacy). */
.wallchart-cell.pto-masked {
    background: repeating-linear-gradient(
        45deg, #94a3b8 0 4px, rgba(255,255,255,.55) 4px 8px) !important;
    border: 1px solid #94a3b8;
    color: transparent;
}
.wallchart-cell.wc-cell-own {
    /* Subtle own-row highlight so the user knows their row is interactive. */
    /* Background tint applied via the row container instead — see below. */
}
/* Shift-click range selection — highlights cells the user has multi-selected
   on their own row before opening the Request PTO form. */
.wallchart-cell.wc-cell-selected {
    box-shadow: inset 0 0 0 2px var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
}
.wallchart-employee[data-row-uid].is-own-row {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--card-bg));
    border-left: 3px solid var(--primary-color);
}

/* Birthday + work-anniversary celebration markers — sit in the top-right
   corner of the cell so they don't fight with the bottom h/OT badges.
   Soft pastel tones (rose / amber) so they read as a friendly accent, not
   a warning. Each marker is its own small chip with a subtle background. */
.wc-celeb {
    position: absolute;
    top: 3px; right: 3px;
    display: inline-flex; align-items: center;
    gap: 3px;
    line-height: 1;
}
.wc-celeb-bday,
.wc-celeb-anniv {
    display: inline-flex; align-items: center;
    border-radius: 4px;
    padding: 1px 4px;
    line-height: 1.4;
    font-weight: 600;
    backdrop-filter: blur(2px);
}
/* Birthday — rose tint with rose icon */
.wc-celeb-bday {
    background: rgba(244, 114, 182, .18);
    color: #be185d;
}
.wc-celeb-bday svg { display: block; }
/* Work anniversary — amber tint with year count */
.wc-celeb-anniv {
    background: rgba(245, 158, 11, .15);
    color: #92400e;
    font-size: 10px;
}
.wc-celeb-anniv-suffix {
    font-size: 8px; opacity: .7; margin-left: 1px;
}
/* On PTO cells (coloured fill) the chips need a frostier background. */
.wallchart-cell.has-pto .wc-celeb-bday {
    background: rgba(255,255,255,.88); color: #be185d;
}
.wallchart-cell.has-pto .wc-celeb-anniv {
    background: rgba(255,255,255,.88); color: #92400e;
}

/* Wallchart cell icon — needs to inherit white on solid PTO cells, dark on
   striped pending cells. */
.wallchart-cell.has-pto .wc-pto-icon { color: white; }
.wallchart-cell.has-pto.pto-pending .wc-pto-icon { color: var(--pto-color, #4f46e5); }
.wc-pto-icon svg {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* ===== Employee detail modal (opened by clicking a name in the wallchart) === */
.emp-modal-header {
    display: flex; align-items: center; gap: 16px;
    padding: 4px 0 18px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
}
.emp-modal-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.4),
                0 4px 12px rgba(0,0,0,.12);
}
.emp-modal-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 22px;
}
.emp-modal-headtext { min-width: 0; flex: 1; }
.emp-modal-headtext .rmodal-title { font-size: 22px; }
.emp-modal-sub {
    font-size: 14px; color: var(--text-muted);
    margin-top: 4px;
}
.emp-modal-tags {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 8px;
}
.emp-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}
.emp-modal-section {
    background: var(--bg-color, #f8fafc);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 16px;
}
.emp-modal-section-wide { grid-column: 1 / -1; }
.emp-modal-section-title {
    margin: 0 0 12px 0;
    font-size: 12px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.emp-modal-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    font-size: 13px;
    padding: 4px 0;
}
.emp-modal-row label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding-top: 2px;
}
.emp-modal-row a { color: var(--primary-color); text-decoration: none; }
.emp-modal-row a:hover { text-decoration: underline; }

.emp-modal-pto-bar {
    height: 8px; border-radius: 999px;
    background: rgba(0,0,0,.08);
    overflow: hidden;
    margin-bottom: 6px;
}
.emp-modal-pto-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 70%, white));
    border-radius: inherit;
    transition: width .3s;
}
.emp-modal-pto-numbers {
    display: flex; gap: 8px; align-items: baseline;
    margin-bottom: 12px;
    font-size: 13px;
}
.emp-modal-pto-numbers .muted { color: var(--text-muted); font-size: 12px; }
.emp-modal-pto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.emp-modal-pto-grid > div {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
}
.emp-modal-pto-grid label {
    display: block;
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 2px;
}
.emp-modal-pto-grid strong { font-size: 14px; }

@media (max-width: 700px) {
    .emp-modal-grid { grid-template-columns: 1fr; }
    .emp-modal-pto-grid { grid-template-columns: 1fr 1fr; }
    .emp-modal-row { grid-template-columns: 100px 1fr; }
}

/* ===== Admin tabs ============================================================ */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
    background: var(--card-bg);
    padding: 8px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 70px;
    z-index: 30;
}
.admin-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 9px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
    white-space: nowrap;
}
.admin-tab-btn:hover {
    background: var(--primary-soft);
    color: var(--primary-color);
}
.admin-tab-btn.is-active {
    background-image: var(--gradient-primary);
    background-color: var(--primary-color);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

/* Sections hidden until their tab is selected */
.module-wrapper[hidden] { display: none !important; }

@media (max-width: 768px) {
    .admin-tabs {
        position: static;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .admin-tab-btn { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }
}

/* ===== Help (?) button + modal =============================================== */
.help-button {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    transition: var(--transition);
}
.help-button:hover { color: var(--primary-color); border-color: var(--primary-color); background: var(--primary-soft); }

.help-modal {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.help-modal[hidden] { display: none !important; }
.help-card {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 820px;
    max-height: 88vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.help-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color);
    background-image: var(--gradient-primary);
    color: white;
}
.help-card-header h2 { margin: 0; font-size: 18px; font-weight: 700; }
.help-close {
    background: rgba(255,255,255,0.18);
    border: none; color: white;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 22px; line-height: 1; cursor: pointer;
    transition: var(--transition);
}
.help-close:hover { background: rgba(255,255,255,0.32); }
.help-tabs {
    display: flex; gap: 4px;
    padding: 10px 14px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}
.help-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    transition: var(--transition);
}
.help-tab-btn:hover { background: var(--card-bg); color: var(--text-color); }
.help-tab-btn.is-active { background: var(--primary-color); color: white; }
.help-body {
    overflow-y: auto;
    padding: 24px 28px 30px;
    flex: 1;
}
.help-section { display: none; }
.help-section.is-active { display: block; }
.help-section h3 {
    margin: 18px 0 8px;
    color: var(--primary-color);
    font-size: 15px;
}
.help-section h3:first-child { margin-top: 0; }
.help-section ol, .help-section ul {
    padding-left: 22px;
    line-height: 1.7;
    font-size: 14px;
}
.help-section li { margin-bottom: 4px; }
.help-section code {
    background: var(--bg-color);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
}

@media (max-width: 600px) {
    .help-card-header h2 { font-size: 16px; }
    .help-body { padding: 16px 18px 24px; }
}

/* ============================================================================
   DARK MODE CONTRAST FIXES (A6)
   The base styles use hardcoded light-mode pastels for badges, alerts, form
   inputs, etc. In dark mode those pastels stayed bright but the text colour
   often clashed (dark text on dark accent, faint borders, etc). The block
   below targets every spot known to render poorly in dark mode and rewrites
   them with token-based, theme-aware colours.
   ============================================================================ */
[data-theme="dark"] .status-badge.status-pending {
    background-color: rgba(251, 191, 36, 0.15);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.35);
}
[data-theme="dark"] .status-badge.status-approved {
    background-color: rgba(74, 222, 128, 0.14);
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.35);
}
[data-theme="dark"] .status-badge.status-rejected {
    background-color: rgba(248, 113, 113, 0.15);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.35);
}
[data-theme="dark"] .status-cancelled {
    background: rgba(148, 163, 184, 0.18);
    color: #e2e8f0;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(74, 222, 128, 0.10);
    color: #bbf7d0;
    border-color: rgba(74, 222, 128, 0.32);
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(248, 113, 113, 0.10);
    color: #fecaca;
    border-color: rgba(248, 113, 113, 0.32);
}

/* Form inputs default to browser white in dark mode — pin them to the card
   tokens so dark-on-dark blue/purple modal forms don't light up the whole row. */
[data-theme="dark"] .form-group input[type="text"],
[data-theme="dark"] .form-group input[type="password"],
[data-theme="dark"] .form-group input[type="number"],
[data-theme="dark"] .form-group input[type="date"],
[data-theme="dark"] .form-group input[type="email"],
[data-theme="dark"] .form-group input[type="tel"],
[data-theme="dark"] .form-group input[type="search"],
[data-theme="dark"] .form-group input[type="time"],
[data-theme="dark"] .form-group input[type="url"],
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] input.input-small,
[data-theme="dark"] select.input-small {
    background-color: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder { color: var(--text-muted); }

/* date/time picker icons render black-on-white by default — invert in dark. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.85);
}

/* Tables: striped row + header bg used hardcoded grays. */
[data-theme="dark"] .styled-table thead { background-color: rgba(255,255,255,0.04); }
[data-theme="dark"] .styled-table tbody tr:nth-child(even) { background-color: rgba(255,255,255,0.02); }
[data-theme="dark"] .styled-table tbody tr:hover { background-color: rgba(255,255,255,0.05); }

/* Generic "card-like" white surfaces inside the app body. */
[data-theme="dark"] .module-wrapper,
[data-theme="dark"] .card,
[data-theme="dark"] .panel { background-color: var(--card-bg); color: var(--text-color); }

/* Modals: background is var(--card-bg) already in most cases, but legacy
   modals used #fff. Catch them with a generic override. */
[data-theme="dark"] .modal-content { background-color: var(--card-bg); color: var(--text-color); }

/* btn-soft-danger text colour was tuned for white background — slightly
   darker in light mode than the dark-mode --danger-color. Brighten it. */
[data-theme="dark"] .btn-soft-danger { color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
[data-theme="dark"] .btn-soft-danger:hover { color: #fecaca; }

/* Soft "Approve" button (inline style override in my_team.php) — make sure
   the green is readable on the dark page bg. */
[data-theme="dark"] .table-actions .btn-soft[style*="047857"] {
    color: #6ee7b7 !important;
    background: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* ============================================================
 * B4 — Centered "auth card" used by change_password.php and
 * other single-task forms. Wrap centers the card in the
 * available container; card is a polished surface ~480px wide.
 * ============================================================ */
.auth-card-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px 60px;
    min-height: calc(100vh - 200px);
}
.auth-card {
    width: 100%;
    max-width: 480px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 36px 32px 28px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    text-align: center;
}
.auth-card-icon {
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(59, 130, 246, 0.18));
    font-size: 28px;
}
.auth-card-title {
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--text-color);
}
.auth-card-sub {
    color: var(--text-muted);
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
}
.auth-card-form { text-align: left; }
.auth-card-form .form-group { margin-bottom: 14px; }
.auth-card-form .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-color);
}
.auth-card-form .form-group small {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}
.auth-card-form input[type="password"],
.auth-card-form input[type="text"],
.auth-card-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
}
.auth-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}
.auth-card-actions .btn {
    flex: 1;
    width: auto;
}
.auth-card .alert { margin-bottom: 18px; text-align: left; }

[data-theme="dark"] .auth-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .auth-card-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(59, 130, 246, 0.25));
}

/* ============================================================
 * B5 — Audit timeline (UPS-style vertical line of events).
 * Lives inside the request detail modal — kept self-contained
 * so the same component can be reused elsewhere later.
 * ============================================================ */
.rmodal-timeline-section {
    margin-top: 18px;
    padding: 14px 16px 12px;
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
[data-theme="dark"] .rmodal-timeline-section {
    background: rgba(255, 255, 255, 0.02);
    border-color: #374151;
}
.audit-timeline {
    list-style: none;
    margin: 12px 0 0;
    padding: 0 0 0 8px;
    position: relative;
}
.audit-timeline-step {
    position: relative;
    padding: 0 0 18px 30px;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.4;
}
.audit-timeline-step::before {
    /* The vertical green line behind every step. The .is-last step
       trims it so the line stops at the final dot (mirrors 006.jpg). */
    content: "";
    position: absolute;
    left: 11px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: #16a34a;  /* green like UPS tracking */
    border-radius: 2px;
    opacity: 0.7;
}
.audit-timeline-step.is-last::before { display: none; }
.audit-timeline-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #16a34a;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
    z-index: 1;
}
.audit-timeline-step.audit-kind-rejected .audit-timeline-dot,
.audit-timeline-step.audit-kind-cancelled .audit-timeline-dot {
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
}
.audit-timeline-step.audit-kind-docs_requested .audit-timeline-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.audit-timeline-step.audit-kind-created .audit-timeline-dot {
    background: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18);
}
.audit-timeline-step.audit-kind-other .audit-timeline-dot {
    background: var(--text-muted);
    box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.18);
}
.audit-timeline-body {
    padding: 1px 0 0;
}
.audit-timeline-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.audit-timeline-detail {
    color: var(--text-muted);
    margin-top: 2px;
    font-style: italic;
}
.audit-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}
.audit-timeline-actor { font-weight: 500; }
.audit-timeline-when { font-variant-numeric: tabular-nums; }
[data-theme="dark"] .audit-timeline-step::before { opacity: 0.55; }

/* ============================================================
 * B8 — "Acting as: <Company>" pill for global_admin impersonation.
 * Sits next to the brand h1 in the header and posts a tiny form
 * to stop_impersonating, returning to the cross-tenant view.
 * ============================================================ */
.acting-as-pill {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 12px;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    vertical-align: middle;
}
.acting-as-pill:hover {
    background: rgba(245, 158, 11, 0.28);
    color: #92400e;
}
[data-theme="dark"] .acting-as-pill {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}
[data-theme="dark"] .acting-as-pill:hover { color: #fde68a; }

/* ============================================================
 * B3-revised — Granular module access grid in global_admin_company.
 * One toggle row per module, grouped by category.
 *
 * B3-2: alignment overhaul. Every row is the same height (62px), the
 * emoji column is fixed-width so titles line up, and the toggle is
 * vertically centred regardless of how many help-text lines a row has.
 * Group heads get a "X / Y on" pill so admins can see a category's
 * coverage at a glance.
 * ============================================================ */
.module-group { margin-bottom: 18px; }
.module-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px 6px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 10px;
    font-size: 13px;
}
.module-group-title small { color: var(--text-muted); }
.module-group-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--primary-soft, var(--brand-color-soft, #dbeafe));
    color: var(--primary-color, var(--brand-color, #2563eb));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
}
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
}
.module-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    min-height: 62px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.module-row:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
}
.module-row.is-on { border-left: 3px solid var(--primary-color); padding-left: 12px; }
.module-row-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    min-width: 0;
    font-size: 13px;
}
.module-row-emoji {
    flex: 0 0 24px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
}
.module-row-text { min-width: 0; flex: 1; }
.module-row-text strong { display: block; margin-bottom: 2px; }
.module-row-text small {
    display: block;
    color: var(--text-muted);
    line-height: 1.35;
}
.module-row .toggle-switch { flex: 0 0 auto; }

/* Tenant limits — three number inputs in a tidy responsive grid that
   matches the module-grid breakpoint so the two sections feel like
   parts of the same form. */
.tenant-limits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 18px;
    margin-top: 6px;
}
.tenant-limits-grid .form-group { margin-bottom: 0; }
.tenant-limits-grid input[type="number"] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   F1 — AI chat assistant widget (floating bottom-right).

   Two layers: a permanently-visible bubble button, and a panel that slides
   up from the bubble when the user clicks it. The panel is anchored to the
   bubble (right:0, bottom:76px) so the bubble's pulse ring keeps drawing
   attention while the panel is open. Z-index 9999 — sits above the busy
   overlay so the user can dismiss it from inside a long PDF render.
   --------------------------------------------------------------------------- */

.ai-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    font-size: 14px;
}

.ai-widget-bubble {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ai-widget-bubble:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 24px rgba(79, 70, 229, 0.55);
}
.ai-widget-bubble:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
.ai-widget-bubble-icon {
    font-size: 28px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}
.ai-widget-bubble-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(124, 58, 237, 0.35);
    animation: aiBubblePulse 2.4s ease-out infinite;
    pointer-events: none;
}
.ai-widget.is-open .ai-widget-bubble-pulse { animation: none; opacity: 0; }
@keyframes aiBubblePulse {
    0%   { transform: scale(0.95); opacity: 0.8; }
    70%  { transform: scale(1.25); opacity: 0;   }
    100% { transform: scale(1.25); opacity: 0;   }
}

/* `display: flex` below would override the implicit `display: none` that
   the `hidden` HTML attribute carries, so the panel would render visible
   even when JS thinks it's closed. Force the hidden case to win. */
.ai-widget-panel[hidden],
.ai-widget-prompts-list[hidden] { display: none !important; }

.ai-widget-panel {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    transform-origin: bottom right;
    animation: aiPanelIn 0.18s ease-out;
}
@keyframes aiPanelIn {
    from { transform: scale(0.92) translateY(8px); opacity: 0; }
    to   { transform: scale(1)    translateY(0);   opacity: 1; }
}

.ai-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
}
.ai-widget-title { display: flex; align-items: center; gap: 10px; }
.ai-widget-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.ai-widget-title strong { display: block; font-size: 14px; font-weight: 600; }
.ai-widget-title small  { display: block; font-size: 11px; opacity: 0.8; }
.ai-widget-header-actions { display: flex; gap: 4px; }
.ai-widget-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.ai-widget-icon-btn:hover { background: rgba(255, 255, 255, 0.32); }

.ai-widget-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color-soft, #f8fafc);
}
.ai-widget-chip {
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ai-widget-chip:hover {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}

.ai-widget-prompts {
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-color-soft, #f8fafc);
    font-size: 12px;
}
.ai-widget-prompts-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted, #64748b);
}
.ai-widget-link {
    background: none;
    border: none;
    color: #4f46e5;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.ai-widget-prompts-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 180px;
    overflow-y: auto;
}
.ai-widget-prompts-list em { color: var(--text-muted, #64748b); font-style: normal; }
.ai-widget-prompt-btn {
    text-align: left;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-color, #0f172a);
    cursor: pointer;
}
.ai-widget-prompt-btn:hover {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.06);
}
.ai-widget-prompt-btn small { display: block; color: var(--text-muted, #64748b); font-size: 11px; margin-top: 2px; }

.ai-widget-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-widget-msg {
    max-width: 85%;
    padding: 9px 12px;
    border-radius: 14px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.ai-widget-msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.ai-widget-msg-assistant {
    align-self: flex-start;
    background: var(--bg-color-soft, #f1f5f9);
    color: var(--text-color, #0f172a);
    border-bottom-left-radius: 4px;
}
.ai-widget-msg-system {
    align-self: center;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-style: italic;
    text-align: center;
    max-width: 100%;
}
.ai-widget-msg-tool {
    align-self: flex-start;
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border-bottom-left-radius: 4px;
}
.ai-widget-msg-error {
    align-self: stretch;
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    font-size: 12px;
    border-radius: 8px;
}
.ai-widget-msg table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
}
.ai-widget-msg th,
.ai-widget-msg td {
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
.ai-widget-msg th { background: var(--bg-color-soft, #f1f5f9); font-weight: 600; }
.ai-widget-msg-link {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    background: #4f46e5;
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    font-size: 12px;
}
.ai-widget-msg-link:hover { background: #4338ca; }

.ai-widget-input {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--card-bg, #fff);
}
.ai-widget-input textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    max-height: 110px;
    background: var(--card-bg, #fff);
    color: var(--text-color, #0f172a);
}
.ai-widget-input textarea:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.ai-widget-send {
    width: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.12s ease;
}
.ai-widget-send:hover    { transform: translateY(-1px); }
.ai-widget-send:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.ai-widget-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ai-widget-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted, #64748b);
    animation: aiTyping 1.2s infinite;
}
.ai-widget-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-widget-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-3px); }
}

@media (max-width: 480px) {
    .ai-widget { right: 16px; bottom: 16px; }
    .ai-widget-panel {
        width: calc(100vw - 32px);
        height: calc(100vh - 110px);
        right: -8px;
    }
}

[data-theme="dark"] .ai-widget-panel { background: #0f172a; color: #e2e8f0; border-color: #1e293b; }
[data-theme="dark"] .ai-widget-quick,
[data-theme="dark"] .ai-widget-prompts { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .ai-widget-chip,
[data-theme="dark"] .ai-widget-prompt-btn { background: #0f172a; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .ai-widget-msg-assistant { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .ai-widget-msg-tool { background: rgba(34, 197, 94, 0.16); color: #86efac; }
[data-theme="dark"] .ai-widget-input { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .ai-widget-input textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; }

/* ---------------------------------------------------------------------------
   F1.8 — dark-mode contrast fixes for modals and the AI chat-log viewer.

   The original employee / request modals were authored before dark mode
   existed: `.rmodal-card` is hardcoded `background: #fff`, and the inner
   `.emp-modal-section` falls back to `#f8fafc` when its CSS var is missing.
   In dark mode this collides with text painted in `--dark-color` (which
   flips to near-white) — title invisible on white card. Force the card +
   sections to use the dark palette so text reads cleanly.
   --------------------------------------------------------------------------- */
[data-theme="dark"] .rmodal-card {
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .rmodal-card .rmodal-title,
[data-theme="dark"] .rmodal-card .rmodal-hours { color: var(--text-color); }
[data-theme="dark"] .rmodal-card .rmodal-input {
    background: #1e293b;
    color: var(--text-color);
    border-color: var(--border-color);
}
[data-theme="dark"] .rmodal-note {
    background: #1e293b;
    color: var(--text-muted);
}
[data-theme="dark"] .emp-modal-section {
    background: #1e293b;
    border-color: var(--border-color);
}
[data-theme="dark"] .emp-modal-pto-grid > div {
    background: #0f172a;
    border-color: var(--border-color);
}

/* AI Chat Log detail — system_prompt, tool result, and the rounded body
   wrappers are all rendered inside a `<pre>` whose default browser style
   is white. Override the wrapping rows + their <pre> so the JSON / plain
   text reads in dark mode. */
[data-theme="dark"] .ai-log-row {
    background: var(--card-bg);
    color: var(--text-color);
}
[data-theme="dark"] .ai-log-row.ai-log-role-system {
    background: #1e293b;
}
[data-theme="dark"] .ai-log-row.is-error { background: rgba(239, 68, 68, 0.12); }
[data-theme="dark"] .ai-log-row-args pre,
[data-theme="dark"] .ai-log-row-body pre {
    background: #0f172a;
    color: var(--text-color);
    border-color: var(--border-color);
}
[data-theme="dark"] .ai-log-row-kind {
    background: rgba(124, 58, 237, 0.18);
    color: #c4b5fd;
}

/* Status pill body — the light-mode pills set their own pale bg + dark
   border. In dark mode those pales become unreadable against the dark
   card. Tighten contrast by upgrading the bg + text to a saturated
   colour pair. */
[data-theme="dark"] .status-badge.status-approved {
    background-color: rgba(22, 163, 74, 0.20); color: #86efac; border-color: rgba(22, 163, 74, 0.45);
}
[data-theme="dark"] .status-badge.status-pending {
    background-color: rgba(245, 158, 11, 0.20); color: #fcd34d; border-color: rgba(245, 158, 11, 0.45);
}
[data-theme="dark"] .status-badge.status-rejected {
    background-color: rgba(239, 68, 68, 0.20);  color: #fca5a5; border-color: rgba(239, 68, 68, 0.45);
}

/* Header logo — keep fully transparent regardless of theme so the
   uploaded brand asset shows on its own merits (its colors are how it
   "stands out"). White-background JPGs are auto-converted to transparent
   PNG on upload (convertJpgLogoToTransparentPng); admin can always
   re-upload a transparent PNG if a JPG can't be cleanly stripped. */
.header-logo { background: transparent; }
[data-theme="dark"] .header-logo { background: transparent; padding: 0; box-shadow: none; }

/* User-table search/filter inputs were also stuck on `background: #fff`. */
[data-theme="dark"] .user-table-search,
[data-theme="dark"] .user-table-filter {
    background: #1e293b;
    color: var(--text-color);
    border-color: var(--border-color);
}

/* ---------------------------------------------------------------------------
   F1.9 — KB importer panel. Wraps a <details> + <form> with theme-aware
   surfaces so the same markup looks right in light and dark mode (the
   previous inline styles fell back to a hardcoded #f8fafc which broke
   dark mode).
   --------------------------------------------------------------------------- */
.kb-importer { margin-bottom: 18px; }
.kb-importer-summary {
    cursor: pointer;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    font-weight: 600;
    color: var(--text-color);
    list-style: none;
    transition: border-color var(--transition), background-color var(--transition);
}
.kb-importer-summary::-webkit-details-marker { display: none; }
.kb-importer-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}
.kb-importer[open] .kb-importer-summary::before { transform: rotate(90deg); }
.kb-importer-summary:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 5%, var(--card-bg));
}
.kb-importer-form {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
}
[data-theme="dark"] .kb-importer-summary {
    background: #1e293b;
    border-color: var(--border-color);
    color: var(--text-color);
}
[data-theme="dark"] .kb-importer-summary:hover {
    background: rgba(79, 70, 229, 0.16);
    border-color: var(--primary-color);
}
[data-theme="dark"] .kb-importer-form {
    background: #1e293b;
    border-color: var(--border-color);
}

/* ---------------------------------------------------------------------------
   F1.10 — Wallchart + native widgets in dark mode.

   Three problems the user spotted in 031.jpg:

   1. Weekend cells were tinted with `rgba(0,0,0,.025)` — barely visible on
      a light theme, completely invisible on dark. Override with a lighter
      tint that actually contrasts against the dark page bg.
   2. `.wc-search`, `.wc-select`, and the date inputs in `.wc-range-form`
      had no explicit color/background, so the browser drew them with the
      OS default light palette — black text on washed-out gray, unreadable
      against the dark wallchart toolbar. Force the theme palette.
   3. The native `<input type="date">` popup calendar opens in the OS
      default light theme even when the page is dark. `color-scheme: dark`
      on the root tells the browser to render every native widget
      (calendar popup, scrollbars, file-input button) in its dark variant.
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;
}

/* Weekend tint that reads on dark — light-on-dark instead of dark-on-light. */
[data-theme="dark"] .wallchart-day-head.is-weekend { background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .wallchart-cell.is-weekend     { background: rgba(255, 255, 255, 0.035); }

/* Wallchart toolbar inputs — search box, departments select, date range. */
[data-theme="dark"] .wc-search,
[data-theme="dark"] .wc-select,
[data-theme="dark"] .wc-range-form {
    background: #1e293b;
    color: var(--text-color);
    border-color: var(--border-color);
}
[data-theme="dark"] .wc-search::placeholder { color: var(--text-muted); }
[data-theme="dark"] .wc-select option {
    background: #1e293b;
    color: var(--text-color);
}
[data-theme="dark"] .wc-range-form input[type="date"] {
    color: var(--text-color);
    background: transparent;
}
[data-theme="dark"] .wc-range-form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(0.85);
    opacity: 0.7;
}

/* ===========================================================================
   PWA — iPhone notch + home bar safe-area.
   ===========================================================================
   Modern iPhones (X and later) have a notch / Dynamic Island at the top and
   a home-bar at the bottom; viewport-fit=cover (set in header.php) makes the
   page extend under those, and env(safe-area-inset-*) tells us how much to
   pad. Padding goes on the OUTER chrome (header bar, fixed bottom widget)
   so content scrolls naturally between them.
   =========================================================================== */
@supports (padding: max(0px)) {
    .header {
        padding-top:    max(15px, env(safe-area-inset-top));
        padding-left:   max(20px, env(safe-area-inset-left));
        padding-right:  max(20px, env(safe-area-inset-right));
    }
    .container {
        padding-left:  max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    /* AI chat bubble sits bottom-right; lift it above the home bar so
       the home gesture indicator doesn't collide with the bubble. */
    .ai-widget {
        right:  max(24px, env(safe-area-inset-right));
        bottom: max(24px, env(safe-area-inset-bottom));
    }
    /* Same idea for the panel. The panel anchors to the bubble so the
       bubble's safe-area shift carries through; only need to ensure the
       panel doesn't run off the bottom on landscape iPhone (where the
       home bar is on the right). */
    .ai-widget-panel {
        max-height: calc(100vh - 120px - env(safe-area-inset-bottom));
    }
}

/* ===========================================================================
   Mobile responsiveness — last-mile fixes for narrow phones.
   ===========================================================================
   Most of the layout already responds via the existing @media queries; this
   block tightens what was leaking on iPhone:
     • header nav on phones already collapses; pad inside the safe area
     • tables that didn't already have overflow-x guard get one (so a wide
       admin table can't push the whole page sideways instead of scrolling
       inside its own container)
     • tap targets are ≥ 44×44 (Apple HIG) so buttons don't feel fiddly
   =========================================================================== */
@media (max-width: 600px) {
    .styled-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .management-actions { flex-wrap: wrap; }
    .management-actions .btn { flex: 1 1 auto; min-width: 0; }

    /* Touch-target floor — small "Edit / Open" buttons inside a busy
       table become unhittable on a phone. 44×44 is the Apple HIG floor;
       we hit 40 with 6+6 padding + 14px text + line-height. Close enough. */
    .btn.btn-small,
    .table-actions .btn,
    .ai-log-row .btn { min-height: 36px; }
    .nav-toggle, .bell-button, .help-button, .theme-toggle, .user-menu-trigger {
        min-width: 40px; min-height: 40px;
    }

    /* AI widget — fill the screen on phones (already had a 480px rule but
       it left a gutter; switch to true full-bleed minus safe-area). */
    .ai-widget-panel {
        width:  calc(100vw - 16px);
        height: calc(100vh - 96px);
        right:  -8px;
    }
}

/* iOS Safari sometimes paints a tappable area's grey "highlight" overlay
   on every interactive element — disable it for our buttons + cards so
   the design stays clean. */
button, a, .btn, .ai-widget-chip, .ai-widget-action-btn, .ai-widget-prompt-btn {
    -webkit-tap-highlight-color: rgba(79, 70, 229, 0.18);
}

/* On iOS, native form-control text is inflated to "auto" font-size when
   we set anything below 16px on a focused input — the page then zooms.
   Force inputs to ≥ 16px on small viewports so iOS won't auto-zoom. */
@media (max-width: 600px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="number"], input[type="date"],
    input[type="time"], textarea, select {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------------
   F1.6 — Long-content guard for AI tables (chat log, stats, anomaly).
   `styled-table` defaults to `table-layout: auto`, which lets a single long
   token (an email, a URL, an ID, the assistant snippet) push the column
   wider than the page. The chat-log list especially suffered: a 200-char
   prompt would blow past every other column. Force a fixed layout, give
   each column a sensible cap, and break long tokens.
   --------------------------------------------------------------------------- */
.styled-table.ai-fixed { table-layout: fixed; }
.styled-table.ai-fixed td,
.styled-table.ai-fixed th {
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}
.styled-table.ai-fixed td code {
    white-space: pre-wrap;
    word-break: break-all;
}

/* Employee profile modal — long usernames / emails were pushing the cell
   width past the modal. Anything inside an emp-modal-row label/value
   wraps now. */
.emp-modal-row label,
.emp-modal-row > div {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.emp-modal-row a { word-break: break-all; }

/* Inline action card the chat widget renders when the AI proposes an
   approve/reject (F1.6). Sits below the assistant message it belongs to. */
.ai-widget-action-card {
    align-self: stretch;
    border: 1px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 4px;
    font-size: 13px;
}
.ai-widget-action-card-title {
    font-weight: 600;
    color: #b45309;
    margin-bottom: 6px;
    font-size: 13px;
}
.ai-widget-action-card-body {
    color: var(--text-color, #0f172a);
    white-space: pre-wrap;
    word-break: break-word;
}
.ai-widget-action-card-buttons {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.ai-widget-action-btn {
    flex: 1;
    padding: 6px 10px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ai-widget-action-btn-confirm { background: #16a34a; color: #fff; }
.ai-widget-action-btn-confirm:hover { background: #15803d; }
.ai-widget-action-btn-cancel  { background: #e5e7eb; color: #374151; }
.ai-widget-action-btn-cancel:hover { background: #d1d5db; }
.ai-widget-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
[data-theme="dark"] .ai-widget-action-card {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.6);
}
[data-theme="dark"] .ai-widget-action-card-title { color: #fbbf24; }
[data-theme="dark"] .ai-widget-action-btn-cancel { background: #374151; color: #e5e7eb; }
[data-theme="dark"] .ai-widget-action-btn-cancel:hover { background: #4b5563; }