/* =========================================================
   SignReach — Booking Portal styles
   Design language inherited from v4 budget planner.
   ========================================================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
}

/* ---- CSS custom properties (light mode) ---- */
:root {
    --ink: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --card: #ffffff;
    --brand: #5358e3a9;
    --brand-2: #721da3;
    --good: #166534;
    --bad: #dc2626;
    --warn: #b45309;
    --bg: #f5f7fb;
    --bg-2: #f8fafc;
    --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

    --status-pending: #b45309;
    --status-confirmed: #166534;
    --status-completed: #475569;
    --status-cancelled: #dc2626;
}

body[data-theme="dark"] {
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --border: #46526a;
    --card: #37404f;
    --bg: #2b3345;
    --bg-2: #323c4f;
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

/* ---- SignaVision signature theme ---- */
body[data-theme="signa"] {
    /* App variable mapping */
    --ink: #eeeef8;
    --muted: #b8b8d8;
    --border: #464664;
    --card: #393953;
    --brand: #7c5cff;
    --brand-2: #6340e0;
    --good: #3ddc97;
    --bad: #ff5c7a;
    --warn: #ffb020;
    --bg: #313144;
    --bg-2: #404060;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.30);
    --status-pending: #ffb020;
    --status-confirmed: #3ddc97;
    --status-completed: #b8b8d8;
    --status-cancelled: #ff5c7a;
    /* Native signature vars */
    --bg-main: #313144;
    --bg-panel: #393953;
    --bg-elevated: #404060;
    --bg-hover: #49496c;
    --text-primary: #eeeef8;
    --text-secondary: #b8b8d8;
    --text-muted: #8888b8;
    --accent-primary: #7c5cff;
    --accent-secondary: #00d4ff;
    --accent-success: #3ddc97;
    --accent-warning: #ffb020;
    --accent-danger: #ff5c7a;
    --border-subtle: #464664;
    --border-strong: #54547c;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.22);
    --shadow-glow: 0 0 10px rgba(124, 92, 255, 0.4);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
}

body[data-theme="signa"] .appbar {
    background: rgba(49, 49, 68, 0.92);
}

body[data-theme="signa"] .field-input:focus {
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.28);
}

body[data-theme="signa"] .status-pill.pending {
    background: rgba(255, 176, 32, 0.18);
}

body[data-theme="signa"] .status-pill.confirmed {
    background: rgba(61, 220, 151, 0.15);
}

body[data-theme="signa"] .status-pill.completed {
    background: rgba(166, 166, 197, 0.15);
}

body[data-theme="signa"] .status-pill.cancelled {
    background: rgba(255, 92, 122, 0.15);
}

body[data-theme="signa"] .lang-chip {
    background: rgba(124, 92, 255, 0.15);
    border-color: rgba(124, 92, 255, 0.35);
}

body[data-theme="signa"] .cert-chip {
    background: rgba(61, 220, 151, 0.15);
    color: #3ddc97;
    border-color: rgba(61, 220, 151, 0.30);
}

body[data-theme="signa"] .group-chip {
    background: rgba(61, 220, 151, 0.12);
    color: #3ddc97;
    border-color: rgba(61, 220, 151, 0.28);
}

body[data-theme="signa"] .btn-danger {
    background: rgba(255, 92, 122, 0.14);
    border-color: rgba(255, 92, 122, 0.35);
    color: #ff5c7a;
}

body[data-theme="signa"] .btn-ghost.active {
    background: rgba(124, 92, 255, 0.14);
    border-color: rgba(124, 92, 255, 0.55);
}

/* Scrollbar */
body[data-theme="signa"] ::-webkit-scrollbar-track {
    background: #1e1e2f;
}

body[data-theme="signa"] ::-webkit-scrollbar-thumb {
    background: #3c3c5a;
}

body[data-theme="signa"] ::-webkit-scrollbar-thumb:hover {
    background: #7c5cff;
}

/* Glow utility */
body[data-theme="signa"] .glow {
    box-shadow: 0 0 10px rgba(124, 92, 255, 0.4);
}

/* ---- Hover states — all interactive surfaces get purple tint ---- */

/* Buttons */
body[data-theme="signa"] .btn:hover,
body[data-theme="signa"] .btn-ghost:hover {
    background: rgba(124, 92, 255, 0.18);
    border-color: rgba(124, 92, 255, 0.5);
    box-shadow: 0 0 10px rgba(124, 92, 255, 0.35);
}

/* KPI cards */
body[data-theme="signa"] .kpi-card:hover {
    background: rgba(124, 92, 255, 0.1);
    border-color: rgba(124, 92, 255, 0.35);
    box-shadow: 0 0 14px rgba(124, 92, 255, 0.25);
}

/* Booking table rows */
body[data-theme="signa"] table.booking-table tbody tr:hover td,
body[data-theme="signa"] table.booking-table tbody tr.row-assigned:hover td,
body[data-theme="signa"] table.booking-table tbody tr.row-unassigned:hover td {
    background: rgba(124, 92, 255, 0.1);
}

/* Field inputs */
body[data-theme="signa"] .field-input:hover {
    border-color: rgba(124, 92, 255, 0.5);
}

/* Role / group filter pills */
body[data-theme="signa"] .role-pill:hover {
    background: rgba(124, 92, 255, 0.15);
    border-color: rgba(124, 92, 255, 0.45);
    color: #c4b0ff;
}

/* Profile tabs */
body[data-theme="signa"] .profile-tab-btn:hover {
    background: rgba(124, 92, 255, 0.15);
    color: #c4b0ff;
}

/* Identity chip / logout */
body[data-theme="signa"] .appbar-identity:hover,
body[data-theme="signa"] .identity-logout:hover {
    background: rgba(124, 92, 255, 0.15);
}

/* Row action buttons (delete group, etc.) */
body[data-theme="signa"] .row-action-btn:hover {
    background: rgba(255, 92, 122, 0.18);
    color: #ff5c7a;
}

/* Select / dropdown highlight — override browser blue */
body[data-theme="signa"] select.field-input {
    accent-color: #7c5cff;
    color-scheme: dark;
}

body[data-theme="signa"] select.field-input option {
    background: #2d2d44;
    color: #e6e6f0;
}

body[data-theme="signa"] select.field-input option:checked,
body[data-theme="signa"] select.field-input option:hover {
    background: #7c5cff;
    color: #ffffff;
}

/* ---- Time range slider (booking form) ---- */
.time-widget-wrap {
    padding: 0.25rem 0;
    overflow: visible;
}

/* Ensure loupe (tooltip) is not clipped by scroll container */
.bk-time-slider,
.bk-time-slider .noUi-base,
.bk-time-slider .noUi-origin {
    overflow: visible;
}

.bk-time-slider {
    margin: 0.75rem 0.5rem 0.25rem;
    height: 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    box-shadow: none;
}

.bk-time-slider .noUi-connect {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.bk-time-slider .noUi-handle {
    height: 20px;
    width: 20px;
    border-radius: 999px;
    background: #fff;
    border: 2px solid var(--brand);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
    cursor: grab;
    right: -10px;
    top: -6px;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.bk-time-slider .noUi-handle:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.30);
}

.bk-time-slider .noUi-handle.noUi-active {
    cursor: grabbing;
    transform: scale(1.12);
    box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.18), 0 4px 12px rgba(79, 70, 229, 0.30);
}

.bk-time-slider .noUi-handle:before,
.bk-time-slider .noUi-handle:after {
    display: none;
}

body[data-theme="dark"] .bk-time-slider .noUi-handle {
    background: var(--card);
    border-color: #818cf8;
}

.time-display {
    margin-top: 0.35rem;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
}

/* ---- Time-range loupe (water-drop magnifier on hover/scroll) ---- */
.time-loupe {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 64px;
    height: 80px;
    transform: translate(-50%, 4px) scale(0.55);
    transform-origin: 50% 100%;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 200ms ease,
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 5;
}

.bk-time-slider:hover .time-loupe,
.bk-time-slider.noui-dragging .time-loupe,
.bk-time-slider .noUi-handle.noUi-active .time-loupe,
.time-loupe.flashing {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
}

.time-loupe-shape {
    position: absolute;
    inset: 0;
    filter: url(#time-range-goo);
}

.time-loupe-shape::before {
    /* the bubble / lens */
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(228, 229, 255, 0.78) 38%,
            rgba(99, 90, 234, 0.55) 100%);
    box-shadow:
        inset 0 4px 9px rgba(255, 255, 255, 0.85),
        inset 0 -5px 11px rgba(67, 56, 202, 0.32),
        inset 0 0 0 1px rgba(99, 90, 234, 0.18);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.time-loupe-shape::after {
    /* the tail droplet — close enough to the bubble that the goo filter fuses them */
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(160, 150, 250, 0.92);
    box-shadow:
        inset 0 -2px 4px rgba(67, 56, 202, 0.32),
        inset 0 2px 3px rgba(255, 255, 255, 0.55);
}

.time-loupe-readout {
    position: absolute;
    top: 0;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    color: var(--brand-2);
    font-weight: 800;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

/* Pulse the bubble on each scroll-tick */
.time-loupe.flashing .time-loupe-shape::before {
    animation: loupe-pulse 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes loupe-pulse {
    0% {
        transform: translateX(-50%) scale(1);
    }

    35% {
        transform: translateX(-50%) scale(1.10);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

body[data-theme="dark"] .time-loupe-shape::before {
    background: radial-gradient(circle at 32% 28%,
            rgba(232, 232, 255, 0.94) 0%,
            rgba(167, 165, 236, 0.70) 42%,
            rgba(99, 90, 234, 0.65) 100%);
    box-shadow:
        inset 0 4px 9px rgba(232, 232, 255, 0.55),
        inset 0 -5px 11px rgba(45, 35, 140, 0.55),
        inset 0 0 0 1px rgba(167, 165, 236, 0.30);
}

body[data-theme="dark"] .time-loupe-readout {
    color: #1e1b4b;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ---- Appbar ---- */
.appbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

body[data-theme="dark"] .appbar {
    background: rgba(43, 51, 69, 0.90);
}

.appbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 1.25rem;
}

/* ---- Interpreter bookings bar (row 2) ---- */
.appbar-interp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 1.25rem 0.45rem;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.02);
}

body[data-theme="dark"] .appbar-interp-row {
    background: rgba(255, 255, 255, 0.03);
}

/* Pill action buttons in the interpreter header bar */
.interp-bar-pill {
    padding: 0.18rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.interp-bar-pill:hover {
    background: var(--bg-2);
    border-color: rgba(79, 70, 229, 0.4);
}

.inbox-unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53e3e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}

.interp-bar-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 0.25rem;
}

.interp-tab-group {
    display: flex;
    gap: 0.25rem;
}

.interp-tab {
    padding: 0.18rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.interp-tab:hover {
    background: var(--bg-2);
    border-color: rgba(79, 70, 229, 0.4);
}

.interp-tab.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.appbrand-title {
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.appbrand-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.05rem;
}

.appbar-right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

/* Identity chip in appbar */
.appbar-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.45rem 0.2rem 0.25rem;
    margin-left: 0.35rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.appbar-identity:hover {
    border-color: rgba(79, 70, 229, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.identity-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
}

.identity-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    min-width: 0;
    max-width: 140px;
}

.identity-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.identity-role {
    font-size: 0.66rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.identity-logout {
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--muted);
    border: none;
    background: transparent;
}

.identity-logout:hover {
    color: var(--bad);
    background: rgba(220, 38, 38, 0.08);
    transform: none;
    box-shadow: none;
}

@media (max-width: 720px) {
    .identity-meta {
        display: none;
    }
}

/* ---- Buttons ---- */
.btn {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: none;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition:
        background 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease;
}

.btn:hover {
    background: var(--brand-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35);
}

.btn-small {
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border);
    box-shadow: none;
}

.btn-ghost:hover {
    background: var(--bg-2);
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
}

.btn-ghost:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-ghost:focus-visible {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25);
}

.btn-ghost.active {
    background: rgba(79, 70, 229, 0.10);
    border-color: rgba(79, 70, 229, 0.55);
}

body[data-theme="dark"] .btn-ghost.active {
    background: rgba(129, 140, 248, 0.12);
    border-color: rgba(129, 140, 248, 0.6);
}

.btn-danger {
    background: #fef2f2;
    color: var(--bad);
    border: 1px solid #fecaca;
}

.btn-danger:hover {
    background: #fee2e2;
}


/* ---- Drawer overlay ---- */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

body.drawer-open .drawer-overlay {
    opacity: 1;
    pointer-events: auto;
}

body.drawer-open {
    overflow: hidden;
}

/* ---- Drawer ---- */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(480px, calc(100vw - 2rem));
    background: var(--card);
    color: var(--ink);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 75;
    transform: translateX(108%);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.drawer.drawer-left {
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--border);
    transform: translateX(-108%);
}

.drawer.open {
    transform: translateX(0);
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.drawer-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.drawer-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.drawer-section {
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

.drawer-section:last-child {
    border-bottom: none;
}

/* ---- Form fields ---- */
.panel-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 0.65rem;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    margin-bottom: 0.75rem;
}

.field-label {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--ink);
}

.field-input {
    width: 100%;
    padding: 0.42rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--bg-2);
    color: var(--ink);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.field-input:hover {
    border-color: #cbd5e1;
}

.field-input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--card);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18);
}

body[data-theme="dark"] .field-input:focus {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.25);
}

textarea.field-input {
    resize: vertical;
}

.field-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.field-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.65rem;
}

.field-badge {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--bg-2);
    border: 1px solid var(--border);
    color: var(--brand);
    min-width: 3rem;
    text-align: center;
}

.muted-text {
    color: var(--muted);
    font-weight: 400;
}

.req {
    color: var(--bad);
}

/* Availability preview inside form */
.avail-preview {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.avail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px dashed var(--border);
}

.avail-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.avail-dot.free {
    background: #22c55e;
}

.avail-dot.busy {
    background: var(--bad);
}

.form-error {
    background: #fef2f2;
    color: var(--bad);
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

/* ---- Toast ---- */
.toast-root {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    pointer-events: all;
    min-width: 260px;
    max-width: 380px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 0.7rem 0.9rem;
    animation: toast-in 200ms ease;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.toast-title {
    font-weight: 700;
    font-size: 0.88rem;
}

.toast-msg {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* ---- KPI bar ---- */
.kpi-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.kpi-card {
    flex: 1 1 130px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
    border-color: #cbd5e1;
}

body[data-theme="dark"] .kpi-card:hover {
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
    border-color: #5a6680;
}

.kpi-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.kpi-warn {
    color: var(--warn);
}

.kpi-good {
    color: var(--good);
}

.kpi-muted {
    color: var(--muted);
}

.kpi-brand {
    color: var(--brand);
}

/* ---- Week schedule strip ---- */
.week-strip {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    padding: 0.55rem 0.75rem 0.75rem;
    margin-bottom: 1.5rem;
}

.week-strip-nav {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.week-strip-range {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
    flex: 1;
    text-align: center;
}

.week-nav-btn {
    padding: 0.1rem 0.55rem;
    font-size: 1rem;
    line-height: 1;
}

.week-search-wrap {
    position: relative;
}

.week-search-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    top: 100%;
    right: 0;
}

.week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

/* top border on second row of the 2-week view */
.week-day-col.week-row2 {
    border-top: 1px solid var(--border);
    padding-top: 0.35rem;
}

.week-day-month {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.7;
    margin-top: 1px;
}

.week-day-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.week-day-head {
    text-align: center;
    padding: 0.2rem 0.25rem;
    border-radius: var(--radius);
    background: var(--bg-2);
}

.week-day-head.is-today {
    background: var(--brand);
    color: #fff;
}

.week-day-name {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

.week-day-num {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

.week-day-head.is-today .week-day-name,
.week-day-head.is-today .week-day-num {
    opacity: 1;
    color: #fff;
}

.week-bk-chip {
    display: flex;
    align-items: center;
    font-size: 0.68rem;
    line-height: 1.25;
    padding: 0.18rem 0.35rem;
    border-radius: 4px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--brand);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(79, 70, 229, 0.2);
    transition: background 120ms;
}

.week-chip-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.week-chip-icon {
    flex-shrink: 0;
    margin-left: 0.2rem;
    line-height: 1;
}

.week-bk-chip:hover {
    background: rgba(79, 70, 229, 0.2);
}

.week-bk-chip.status-confirmed {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-color: rgba(16, 185, 129, 0.25);
}

.week-bk-chip.status-confirmed:hover {
    background: rgba(16, 185, 129, 0.2);
}

.week-bk-chip.status-completed {
    background: var(--bg-2);
    color: var(--muted);
    border-color: var(--border);
}

.week-bk-chip.status-cancelled {
    background: rgba(239, 68, 68, 0.07);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.2);
    text-decoration: line-through;
    opacity: 0.6;
}

.week-bk-chip.status-pending,
.week-bk-chip.status-pending_assignment {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.25);
}

.week-bk-chip.status-pending:hover,
.week-bk-chip.status-pending_assignment:hover {
    background: rgba(245, 158, 11, 0.2);
}

/* Earning pills in interpreter Rate Service tab */
.earning-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.3rem 0.55rem;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #065f46;
    font-size: 0.75rem;
    line-height: 1.3;
}

.earning-pill .ep-amount {
    font-weight: 700;
    font-size: 0.85rem;
}

.earning-pill .ep-label {
    color: #059669;
    font-size: 0.7rem;
}

.week-day-empty {
    font-size: 0.68rem;
    color: var(--muted);
    text-align: center;
    padding: 0.3rem 0;
    opacity: 0.5;
}

/* ---- Virtual meeting (booking form + detail) ---- */
.virtual-toggle-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}

.virtual-platform-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.platform-btn {
    padding: 0.2rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-2);
    color: var(--ink);
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.platform-btn:hover,
.platform-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.virtual-badge {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.virtual-badge.virtual {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.virtual-badge.in-person {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

/* ---- Filter bar ---- */
.filter-bar {
    display: flex;
    gap: 0.65rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 110px;
}

.filter-label {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

/* ---- Booking table ---- */
.table-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

table.booking-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

table.booking-table thead th {
    padding: 0.55rem 0.75rem;
    text-align: left;
    background: var(--bg-2);
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

table.booking-table tbody td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    transition: background 140ms ease;
}

table.booking-table tbody tr {
    transition: box-shadow 140ms ease;
}

table.booking-table tbody tr:last-child td {
    border-bottom: none;
}

table.booking-table tbody tr:hover td {
    background: var(--bg-2);
}

table.booking-table tbody tr:hover {
    box-shadow: inset 3px 0 0 var(--brand);
}

/* Row tint: coverage at-a-glance — green = interpreter assigned, orange = unassigned */
table.booking-table tbody tr.row-assigned td {
    background: rgba(34, 197, 94, 0.08);
}

table.booking-table tbody tr.row-unassigned td {
    background: rgba(251, 146, 60, 0.10);
}

table.booking-table tbody tr.row-assigned:hover td {
    background: rgba(34, 197, 94, 0.15);
}

table.booking-table tbody tr.row-unassigned:hover td {
    background: rgba(251, 146, 60, 0.17);
}

table.booking-table tbody tr.row-assigned:hover {
    box-shadow: inset 3px 0 0 #16a34a;
}

table.booking-table tbody tr.row-unassigned:hover {
    box-shadow: inset 3px 0 0 #ea580c;
}

body[data-theme="dark"] table.booking-table tbody tr.row-assigned td {
    background: rgba(34, 197, 94, 0.14);
}

body[data-theme="dark"] table.booking-table tbody tr.row-unassigned td {
    background: rgba(251, 146, 60, 0.18);
}

body[data-theme="dark"] table.booking-table tbody tr.row-assigned:hover td {
    background: rgba(34, 197, 94, 0.22);
}

body[data-theme="dark"] table.booking-table tbody tr.row-unassigned:hover td {
    background: rgba(251, 146, 60, 0.26);
}

.empty-row {
    padding: 2rem 1rem !important;
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

/* Status pill */
.status-pill {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill.pending {
    background: #fef3c7;
    color: var(--warn);
}

.status-pill.confirmed {
    background: #d1fae5;
    color: var(--good);
}

.status-pill.completed {
    background: #f1f5f9;
    color: var(--muted);
}

.status-pill.cancelled {
    background: #fef2f2;
    color: var(--bad);
}

.status-pill::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    background: currentColor;
}

.status-pill.pending::before {
    animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.78);
    }
}

/* Row action buttons */
.row-action-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 700;
}

.row-action-btn:hover {
    background: var(--bg-2);
    color: var(--ink);
}

.row-accept-btn {
    background: rgba(34, 197, 94, 0.12);
    color: var(--good, #22c55e);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.row-accept-btn:hover {
    background: rgba(34, 197, 94, 0.22);
    color: var(--good, #22c55e);
}

.row-accept-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---- Availability widget ---- */
/* ---- Inline booking detail panel (slides down below table) ---- */
.bk-detail-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 220ms ease;
}

.bk-detail-panel.bk-detail-open {
    max-height: 800px;
    opacity: 1;
}

.bk-detail-inner {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    padding: 1rem 1.25rem 1.625rem;
    margin-top: 0.25rem;
}

.bk-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.bk-detail-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ink);
}

.bk-detail-title code {
    font-size: 0.8rem;
    color: var(--brand);
    background: rgba(79, 70, 229, 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.bk-detail-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Highlight the selected row */
#booking-tbody tr.bk-row-active td {
    background: rgba(79, 70, 229, 0.08);
}

body[data-theme="signa"] .bk-detail-title code {
    background: rgba(124, 92, 255, 0.15);
    color: #7c5cff;
}

body[data-theme="signa"] #booking-tbody tr.bk-row-active td {
    background: rgba(124, 92, 255, 0.1);
}

.avail-widget {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}

.avail-controls {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.avail-controls .field-group {
    min-width: 120px;
    flex: 1 1 120px;
}

.avail-results {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.avail-card {
    flex: 1 1 200px;
    max-width: 280px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.avail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.avail-card.free {
    border-left: 4px solid #22c55e;
}

.avail-card.busy {
    border-left: 4px solid var(--bad);
    opacity: 0.65;
}

.avail-card-name {
    font-weight: 800;
    font-size: 0.9rem;
}

.avail-card-langs {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.12rem;
}

.avail-card-rate {
    font-size: 0.78rem;
    margin-top: 0.3rem;
    font-weight: 700;
    color: var(--brand);
}

.avail-card-certs {
    font-size: 0.73rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* ---- Interpreter cards in drawer ---- */
.interp-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.9rem 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    position: relative;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

/* Top-right handshake icon on each interpreter card */
.interp-hs-corner {
    position: absolute;
    top: 0.45rem;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 150ms, background 150ms;
}

.interp-hs-corner:hover {
    opacity: 1;
    background: rgba(79, 70, 229, 0.1);
}

.interp-hs-corner:disabled {
    cursor: default;
    opacity: 0.35;
}

.interp-card:hover {
    transform: translateY(-1px);
    border-color: rgba(79, 70, 229, 0.45);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.interp-card-name {
    font-weight: 800;
    font-size: 0.95rem;
}

.interp-card-bio {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

.interp-card-langs {
    margin-top: 0.4rem;
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* Roster section header label */
.drawer-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.15rem 0 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.6rem;
}

/* Handshake status badges on interpreter cards */
.team-member-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.team-invited-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Team member rows in the lower table */
.interp-team-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
}

.interp-team-name {
    font-weight: 700;
    flex: 1;
}

.interp-team-langs {
    font-size: 0.75rem;
    color: var(--muted);
}

.lang-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(79, 70, 229, 0.1);
    color: var(--brand);
    border: 1px solid rgba(79, 70, 229, 0.25);
}

/* Team badges in booking tables */
.team-badge {
    display: inline-block;
    padding: 0.1rem 0.48rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.team-badge.confirmed-team {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.team-badge.needs-team {
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.team-badge.tentative-team {
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.team-badge.solo-team {
    background: transparent;
    border: none;
    font-size: 0.92rem;
    padding: 0;
}

/* Team notice below duration badge */
.team-notice {
    margin-top: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.4rem;
    font-size: 0.79rem;
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Detail panel team interpreter slots */
.bk-team-slots {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.2rem;
}

.team-slot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.team-slot-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.team-slot-pending {
    color: var(--muted);
    font-style: italic;
}

.team-slot-tentative {
    font-size: 0.72rem;
    color: #4338ca;
    font-style: italic;
}

.cert-chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    background: #d1fae5;
    color: #166534;
    border: 1px solid #a7f3d0;
}

.interp-card-avail {
    margin-top: 0.55rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.interp-card-actions {
    margin-top: 0.6rem;
}

/* ---- Inbox table ---- */
.inbox-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.inbox-table thead th {
    padding: 0.55rem 0.75rem;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
    background: var(--bg-2);
}

.inbox-col-dot {
    width: 1.5rem;
}

.inbox-col-from {
    width: 30%;
}

.inbox-col-subject {
    width: auto;
}

.inbox-col-date {
    width: 7rem;
    white-space: nowrap;
}

.inbox-row {
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 120ms ease;
}

.inbox-row:hover,
.inbox-row-active {
    background: var(--bg-2);
}

.inbox-row td {
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    color: var(--muted);
}

.inbox-unread td {
    color: var(--ink);
    font-weight: 600;
}

.inbox-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

/* Expand detail row slides down */
.inbox-detail-row {
    border-bottom: 1px solid var(--border);
}

.inbox-detail-cell {
    padding: 0;
    overflow: hidden;
}

.inbox-detail-inner {
    padding: 0.9rem 1.25rem 1rem 2rem;
    background: var(--card);
    border-left: 3px solid var(--brand);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    animation: inbox-slide-down 180ms ease;
}

@keyframes inbox-slide-down {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.inbox-detail-meta {
    font-size: 0.75rem;
    color: var(--muted);
}

.inbox-detail-body {
    font-size: 0.875rem;
    color: var(--ink);
    white-space: pre-wrap;
    line-height: 1.6;
}

/* Booking summary inside an actionable inbox message */
.inbox-booking-card {
    font-size: 0.85rem;
    color: var(--ink);
    line-height: 1.5;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-2);
}

/* ---- Message modal ---- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1200;
}

.modal-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1201;
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
    width: min(480px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--ink);
}

.modal-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--card);
}

.modal-foot {
    padding: 0.75rem 1.25rem 1rem;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    background: var(--bg-2);
    border-radius: 0 0 0.75rem 0.75rem;
}

.msg-body-input {
    resize: none;
    overflow-y: hidden;
    min-height: calc(1.5em + 0.84rem + 2px);
    /* 1 line: line-height + top+bottom padding + border */
    line-height: 1.5;
    transition: height 100ms ease;
}

/* ---- Server snapshot panel ---- */
.server-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.3rem;
}

.server-row input {
    flex: 1 1 auto;
}

/* ---- Meta footnote ---- */
.meta-footnote {
    font-size: 0.78rem;
    color: var(--muted);
}

/* ---- Loading ---- */
.loading-pill {
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    font-style: italic;
}

/* ---- Main layout ---- */
.main-content {
    max-width: 1360px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* ---- Dark mode overrides for status pills ---- */
body[data-theme="dark"] .status-pill.pending {
    background: rgba(180, 83, 9, 0.18);
}

body[data-theme="dark"] .status-pill.confirmed {
    background: rgba(22, 101, 52, 0.18);
}

body[data-theme="dark"] .status-pill.completed {
    background: rgba(71, 85, 105, 0.25);
}

body[data-theme="dark"] .status-pill.cancelled {
    background: rgba(220, 38, 38, 0.18);
}

body[data-theme="dark"] .avail-card.free {
    border-left-color: #16a34a;
}

body[data-theme="dark"] .lang-chip {
    background: rgba(129, 140, 248, 0.12);
    border-color: rgba(129, 140, 248, 0.3);
}

body[data-theme="dark"] .cert-chip {
    background: rgba(22, 101, 52, 0.2);
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.25);
}

body[data-theme="dark"] .btn-danger {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(220, 38, 38, 0.35);
}

/* ---- Users & Groups drawer ---- */

.users-filterbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-pills {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Dynamic group filter pills — same look as role pills but tinted */
.group-filter-pills {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding-top: 0.15rem;
    border-top: 1px dashed var(--border);
    margin-top: 0.1rem;
}

.group-filter-pill {
    font-size: 0.74rem !important;
    padding: 0.2rem 0.6rem !important;
}

.group-filter-pill .group-pill-count {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    background: rgba(79, 70, 229, 0.12);
    color: var(--brand);
    border-radius: 999px;
    padding: 0 0.35rem;
    margin-left: 0.25rem;
}

.group-filter-pill.active .group-pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

body[data-theme="signa"] .group-filter-pill .group-pill-count {
    background: rgba(124, 92, 255, 0.18);
    color: #7c5cff;
}

.role-pill {
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--ink);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.role-pill:hover {
    transform: translateY(-1px);
}

.role-pill.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.users-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* New-user / new-group forms */
.users-new-form,
.groups-new-form {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.85rem;
    animation: rise-in 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.role-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.55rem 0 0.65rem;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink);
    cursor: pointer;
}

.check-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand);
}

.nu-interpreter-fields {
    margin-bottom: 0.55rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
}

/* Group chip picker (in new-user form) */
.groups-chip-picker {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.35rem 0;
}

.group-pick-chip {
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 140ms ease;
}

.group-pick-chip:hover {
    color: var(--ink);
    border-color: #cbd5e1;
}

.group-pick-chip.on {
    background: rgba(79, 70, 229, 0.12);
    color: var(--brand);
    border-color: rgba(79, 70, 229, 0.55);
}

/* User card */
.user-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 200ms ease;
}

.user-card:hover {
    transform: translateY(-1px);
    border-color: rgba(79, 70, 229, 0.45);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}

.user-card-inactive {
    opacity: 0.55;
}

.user-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.user-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.user-card-ident {
    flex: 1;
    min-width: 0;
}

.user-card-name {
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-username {
    font-weight: 500;
    color: var(--muted);
    font-size: 0.78rem;
}

.user-card-email {
    font-size: 0.76rem;
    color: var(--muted);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-tags {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.user-card-meta {
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.user-card-meta strong {
    color: var(--brand);
    font-weight: 700;
}

/* Role chips */
.role-chip {
    display: inline-block;
    padding: 0.13rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.role-chip.role-interpreter {
    background: rgba(79, 70, 229, 0.12);
    color: var(--brand);
    border-color: rgba(79, 70, 229, 0.30);
}

.role-chip.role-staff {
    background: rgba(180, 83, 9, 0.13);
    color: var(--warn);
    border-color: rgba(180, 83, 9, 0.32);
}

.role-chip.role-super {
    background: rgba(220, 38, 38, 0.10);
    color: var(--bad);
    border-color: rgba(220, 38, 38, 0.30);
}

.role-chip.role-client {
    background: var(--bg-2);
    color: var(--muted);
    border-color: var(--border);
}

/* Group chips (read-only display in user cards / groups list) */
.group-chip {
    display: inline-block;
    padding: 0.13rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(34, 197, 94, 0.10);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, 0.30);
}

body[data-theme="dark"] .group-chip {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
}

/* Active toggle switch */
.active-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.active-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.active-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--border);
    border-radius: 999px;
    transition: background 180ms ease;
}

.active-switch-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

.active-switch input:checked+.active-switch-slider {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.active-switch input:checked+.active-switch-slider::before {
    transform: translateX(16px);
}

.active-switch input:focus-visible+.active-switch-slider {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.30);
}

/* Badge shown on the current user's own card instead of the toggle */
.active-switch-self {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand);
    background: rgba(79, 70, 229, 0.1);
    border: 1px solid rgba(79, 70, 229, 0.25);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    flex-shrink: 0;
    cursor: default;
    user-select: none;
}

body[data-theme="signa"] .active-switch-self {
    color: #7c5cff;
    background: rgba(124, 92, 255, 0.12);
    border-color: rgba(124, 92, 255, 0.3);
}

/* Auth-token UI: form input + Generate button, and the read-only row on user cards */
.pwd-with-gen {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}

.pwd-with-gen .field-input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
}

.pwd-with-gen .btn-small {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: stretch;
}

.token-row {
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
}

.token-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: 0.62rem;
    color: var(--muted);
    flex-shrink: 0;
}

.token-mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.74rem;
    background: var(--bg-2);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.18rem 0.45rem;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    cursor: text;
    user-select: all;
    transition: background 140ms ease;
}

.token-mono.revealed {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.30);
    color: var(--brand-2);
}

body[data-theme="dark"] .token-mono.revealed {
    background: rgba(129, 140, 248, 0.14);
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, 0.35);
}

.token-action {
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.18rem 0.4rem;
}

.token-rotate {
    color: var(--warn);
}

.token-rotate:hover {
    background: rgba(180, 83, 9, 0.10);
    color: var(--warn);
}

/* Groups list (in groups section) */
.groups-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.group-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 150ms, background 150ms;
}

.group-row:hover {
    border-color: var(--brand);
    background: rgba(79, 70, 229, 0.06);
}

.group-row.group-row-active {
    border-color: var(--brand);
    background: rgba(79, 70, 229, 0.12);
}

body[data-theme="signa"] .group-row:hover,
body[data-theme="signa"] .group-row.group-row-active {
    border-color: #7c5cff;
    background: rgba(124, 92, 255, 0.14);
}

.group-row-count {
    flex: 1;
    font-size: 0.76rem;
    color: var(--muted);
}

/* ---- Loading: skeleton shimmer ---- */
.loading-pill {
    position: relative;
    overflow: hidden;
}

.loading-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(79, 70, 229, 0.07) 50%,
            transparent 100%);
    transform: translateX(-100%);
    animation: shimmer 1.6s ease-in-out infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* ---- Page entrance: KPI cards stagger in ---- */
.kpi-card {
    animation: rise-in 360ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

.kpi-bar .kpi-card:nth-child(1) {
    animation-delay: 0ms;
}

.kpi-bar .kpi-card:nth-child(2) {
    animation-delay: 50ms;
}

.kpi-bar .kpi-card:nth-child(3) {
    animation-delay: 100ms;
}

.kpi-bar .kpi-card:nth-child(4) {
    animation-delay: 150ms;
}

.kpi-bar .kpi-card:nth-child(5) {
    animation-delay: 200ms;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   Login page (/login/)
   ========================================================= */

body.login-page {
    background:
        radial-gradient(circle at 20% 0%, rgba(99, 90, 234, 0.18) 0%, transparent 45%),
        radial-gradient(circle at 80% 100%, rgba(34, 197, 94, 0.12) 0%, transparent 50%),
        var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}

.login-main {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

.login-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10);
    animation: rise-in 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

body[data-theme="dark"] .login-card {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.40);
}

.login-brand {
    text-align: center;
    margin-bottom: 1.6rem;
}

.login-brand-mark {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.login-brand-title {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.login-brand-sub {
    font-size: 0.86rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* Screen transitions */
.login-screen {
    animation: rise-in 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.login-screen-head {
    margin-bottom: 1rem;
}

.login-screen-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.015em;
}

.login-screen-sub {
    font-size: 0.84rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.field-hint {
    font-size: 0.74rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

.field-hint code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    background: var(--bg-2);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.78rem;
}

.login-phone-input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.04em;
    padding: 0.6rem 0.75rem;
}

.login-submit-btn {
    width: 100%;
    padding: 0.7rem 1.1rem;
    font-size: 0.95rem;
    margin-top: 0.25rem;
    position: relative;
}

.login-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.login-submit-spinner {
    letter-spacing: 0.4em;
    font-weight: 900;
    animation: dotty 900ms linear infinite;
}

@keyframes dotty {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.login-link {
    border: none;
    background: transparent;
    color: var(--brand);
    font-weight: 700;
    font-size: inherit;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.login-link:disabled {
    color: var(--muted);
    cursor: not-allowed;
    text-decoration: none;
}

.login-link:hover:not(:disabled) {
    color: var(--brand-2);
}

/* OTP input row */
.otp-inputs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.45rem;
    margin: 0.25rem 0 0.5rem;
}

.otp-digit {
    width: 100%;
    aspect-ratio: 1 / 1;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 800;
    background: var(--bg-2);
    color: var(--ink);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, transform 140ms ease;
    caret-color: var(--brand);
}

.otp-digit:focus {
    outline: none;
    background: var(--card);
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.20);
    transform: translateY(-1px);
}

body[data-theme="dark"] .otp-digit:focus {
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.30);
}

/* Filled state — soft brand tint so the user can scan visually */
.otp-digit:not(:placeholder-shown):not(:focus) {
    background: rgba(79, 70, 229, 0.06);
    border-color: rgba(79, 70, 229, 0.45);
}

/* Resend row */
.login-resend {
    margin-top: 0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.login-resend strong {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* Done screen */
.login-done {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}

.login-done-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(22, 197, 94, 0.30);
    animation: done-pop 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes done-pop {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }

    60% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.login-foot {
    text-align: center;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.login-foot-link {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
}

.login-foot-link:hover {
    text-decoration: underline;
}

/* ---- Reduced motion: respect user preference ---- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0ms !important;
    }

    .drawer {
        transition: none;
    }

    .drawer-overlay {
        transition: none;
    }

    .status-pill.pending::before {
        animation: none;
    }

    .loading-pill::after {
        animation: none;
        display: none;
    }
}

/* =========================================================
   Profile drawer
   ========================================================= */

/* Identity chip: make it feel interactive */
#profile-drawer-toggle {
    cursor: pointer;
}

#profile-drawer-toggle:focus-visible {
    outline: 2px solid rgba(79, 70, 229, 0.55);
    outline-offset: 2px;
}

/* Large avatar in profile hero */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 0 1rem;
}

.profile-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.30);
}

.profile-hero-meta {
    min-width: 0;
}

.profile-hero-name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.profile-hero-role {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand);
    margin-top: 0.1rem;
}

.profile-hero-joined {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* Tab bar */
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
}

.profile-tab-btn {
    padding: 0.45rem 0.85rem;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 140ms ease, border-color 140ms ease;
}

.profile-tab-btn:hover {
    color: var(--ink);
}

.profile-tab-btn.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

/* Booking mini-list in profile */
.profile-bk-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-bk-item {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.83rem;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.profile-bk-item:hover {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.profile-bk-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.profile-bk-item-name {
    font-weight: 700;
}

.profile-bk-item-meta {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: 0.25rem;
}

/* Availability slot list in profile */
.avail-slot-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ── Weekly recurring schedule day rows ─────────────────── */
.avail-day-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.avail-day-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-2);
    overflow: visible;
    transition: border-color 140ms ease;
}

.avail-day-row:has(.avail-day-check:checked) {
    border-color: rgba(79, 70, 229, 0.4);
    background: var(--card);
}

.avail-day-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    user-select: none;
}

.avail-day-check {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand);
    flex-shrink: 0;
}

.avail-day-name {
    font-size: 0.85rem;
    font-weight: 700;
}

.avail-day-slider-wrap {
    padding: 0.1rem 0.8rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.avail-day-slider-wrap .time-widget-wrap {
    overflow: visible;
}

.avail-day-actions {
    display: flex;
    gap: 0.5rem;
}

/* ─────────────────────────────────────────────────────────── */

.avail-slot-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
    transition: border-color 140ms ease;
}

.avail-slot-row:not(.is-booked):hover {
    border-color: rgba(79, 70, 229, 0.35);
}

.avail-slot-row.is-booked {
    opacity: 0.65;
}

.avail-slot-date {
    font-weight: 700;
    flex: 0 0 90px;
    font-variant-numeric: tabular-nums;
}

.avail-slot-time {
    font-variant-numeric: tabular-nums;
    color: var(--brand);
    font-weight: 700;
    flex: 1;
}

.avail-slot-del {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    flex-shrink: 0;
    transition: background 140ms ease, color 140ms ease;
}

.avail-slot-del:hover {
    background: #fef2f2;
    color: var(--bad);
}

.avail-slot-del[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

body[data-theme="dark"] .avail-slot-del:hover {
    background: rgba(220, 38, 38, 0.15);
}

/* =========================================================
   Server-rendered drawer helpers
   The Users & Groups drawer is rendered by Django, so state
   that the legacy build toggled from JavaScript is expressed
   here in markup + CSS instead.
   ========================================================= */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Group chip picker: a real checkbox inside the chip label, so the
   "on" state is the checkbox's own state — nothing scripts it. */
.group-pick-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.group-pick-chip input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.group-pick-chip:has(input[type="checkbox"]:checked) {
    background: rgba(79, 70, 229, 0.12);
    color: var(--brand);
    border-color: rgba(79, 70, 229, 0.55);
}

.group-pick-chip:has(input[type="checkbox"]:focus-visible) {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Django messages framework output inside a drawer */
.message {
    margin: 0 0 0.4rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--ink);
}

.message-success {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.30);
    color: #166534;
}

.message-error {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.30);
    color: var(--bad);
}

body[data-theme="dark"] .message-success {
    color: #4ade80;
}

/* Group filter pills / groups list are links, not buttons */
.group-filter-pill,
.group-row .btn {
    text-decoration: none;
}

/* Interpreter-only fields follow the Interpreter checkbox. The legacy
   build toggled `hidden` from JavaScript; the state is the checkbox's,
   so CSS reads it directly and no script is involved. */
#users-new-form:not(:has(#nu-is-interpreter:checked)) #nu-interpreter-fields {
    display: none;
}

/* Active switch + Edit action on a user card. The switch sits in the
   card head opposite the identity; actions sit under the meta row. */
.user-card-head .user-card-switch,
.user-card-head .active-switch-self {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.user-card-actions {
    margin-top: 0.55rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.user-card-actions .btn {
    text-decoration: none;
}

/* An inactive account's switch reads as off at a glance */
.user-card-inactive .user-card-name {
    text-decoration: line-through;
}

/* Inline editor sits inside the card, not floating above it */
#user-edit-form {
    margin-top: 0.7rem;
    margin-bottom: 0;
}

#user-edit-form .panel-title {
    margin-bottom: 0.5rem;
}

/* =========================================================
   Top drawer — booking detail
   The side drawers slide in on X; this one drops from the
   top so a wide booking record has the full page width.
   ========================================================= */

.drawer.drawer-top {
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: 85vh;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 14px 14px;
    transform: translateY(-102%);
}

/* Beats `.drawer.open`, which translates on X. */
.drawer.drawer-top.open {
    transform: translateY(0);
}

.drawer-top .drawer-head,
.drawer-top .drawer-body {
    max-width: 1100px;
    width: 100%;
    margin-inline: auto;
}

/* Booking detail laid out across the width the top drawer gives us */
.bk-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.bk-detail-fact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.bk-detail-fact-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.bk-detail-fact-value {
    font-size: 0.9rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.bk-team-slots {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.bk-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Rows open the detail drawer */
table.booking-table tbody tr[data-drawer-open] {
    cursor: pointer;
}

table.booking-table tbody tr[data-drawer-open]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

table.booking-table tbody td a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

/* The week "jump to date" control is a real form now (the arrows are
   links), so it needs to lay out inline rather than be hidden the way
   the legacy JS-driven input was. */
.week-strip-nav .week-search-wrap {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.week-strip-nav .week-search-wrap .field-input {
    margin: 0;
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
}

.week-strip-nav a.btn {
    text-decoration: none;
}

/* Week-strip chips are links now (they open the booking drawer), so
   they must not pick up default link decoration, and they need a
   visible keyboard focus ring. */
a.week-bk-chip {
    text-decoration: none;
}

a.week-bk-chip:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* Booking detail head: status pill and the corner Cancel action. */
.bk-detail-head-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.bk-detail-head-right a.btn {
    text-decoration: none;
}

/* Close-out cost breakdown */
.closeout-lines {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.closeout-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.2rem 0;
}

.closeout-line span {
    color: var(--muted);
}

.closeout-line.closeout-total {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.45rem;
    font-size: 0.95rem;
}

.closeout-line.closeout-total span {
    color: var(--ink);
    font-weight: 700;
}

.closeout-line.closeout-total strong {
    color: var(--brand);
}

/* "Needs closing out" flag on a past booking row */
table.booking-table tbody tr.row-needs-closeout td {
    background: rgba(245, 158, 11, 0.10);
}

table.booking-table tbody tr.row-needs-closeout:hover td {
    background: rgba(245, 158, 11, 0.18);
}

table.booking-table tbody tr.row-needs-closeout:hover {
    box-shadow: inset 3px 0 0 #b45309;
}

/* =========================================================
   Invoice sheet — one per interpreter per booking
   ========================================================= */

.invoice-actions {
    margin-bottom: 0.75rem;
}

.invoice-actions .btn {
    text-decoration: none;
}

.invoice-sheet {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.75rem 1.75rem;
    max-width: 860px;
}

.invoice-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}

.invoice-brand {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.invoice-meta {
    text-align: right;
    min-width: 0;
}

.invoice-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand);
}

/* A UUIDv7 is long — let it wrap rather than blow out the page. */
.invoice-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.invoice-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
    padding: 1.1rem 0;
}

table.invoice-table {
    margin-top: 0.5rem;
}

table.invoice-table td,
table.invoice-table th {
    text-align: left;
}

table.invoice-table td:last-child,
table.invoice-table th:last-child {
    text-align: right;
}

table.invoice-table tfoot td {
    padding: 0.45rem 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
}

table.invoice-table tfoot tr.invoice-total-row td {
    border-top: 2px solid var(--border);
    color: var(--ink);
    font-size: 1rem;
}

table.invoice-table tfoot tr.invoice-total-row td strong {
    color: var(--brand);
}

.invoice-notes {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
}

.invoice-notes p {
    margin: 0.3rem 0 0;
    font-size: 0.88rem;
}

.invoice-foot {
    margin-top: 1.25rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
}

.invoice-foot p {
    margin: 0 0 0.3rem;
}

@media print {

    .appbar,
    .invoice-actions,
    .drawer,
    .drawer-overlay {
        display: none !important;
    }

    .invoice-sheet {
        border: none;
        padding: 0;
        max-width: none;
    }
}

/* The brand in the top-left corner is the way home. It is an anchor
   now, so it must not pick up link styling. */
a.appbrand {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius, 10px);
    padding: 0.15rem 0.35rem;
    margin-left: -0.35rem;
    transition: background 150ms ease, transform 150ms ease;
}

a.appbrand:hover {
    background: rgba(79, 70, 229, 0.08);
}

a.appbrand:hover .appbrand-title {
    color: var(--brand);
}

a.appbrand:active {
    transform: translateY(1px);
}

a.appbrand:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Payer statement — mark-paid control inside the table */
.payable-pay-form {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.payable-pay-form .field-input {
    margin: 0;
    padding: 0.2rem 0.4rem;
    font-size: 0.76rem;
    width: 7rem;
}

#payable-table tfoot td {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
}

#payable-table tfoot tr:last-child td {
    border-top: 2px solid var(--border);
    color: var(--ink);
}

#payable-table tfoot strong {
    color: var(--brand);
}

/* =========================================================
   New Booking — requestor switch
   Either an account already on the platform or someone new.
   The radio's own state drives it, so no script is involved;
   Django still decides which fields are required.
   ========================================================= */

#booking-form:has(#bk-client-mode_0:checked) .bk-client-new,
#booking-form:has(#bk-client-mode_1:checked) .bk-client-existing {
    display: none;
}

#bk-requestor .role-toggles {
    margin-top: 0;
}

/* Platform and meeting link belong to a virtual meeting, so they
   follow the checkbox. Its own state drives this — nothing scripts
   it — and BookingForm.clean() discards both when the box is clear,
   so what is hidden is never what gets saved. */
#booking-form:not(:has(#bk-virtual:checked)) #bk-virtual-options {
    display: none;
}

/* Alternative times belong to a flexible booking, so they follow the
   checkbox — its own state drives this, nothing scripts it. */
#booking-form:not(:has(#bk-flexible:checked)) #bk-alternatives {
    display: none;
}

.bk-alternatives {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
}

.bk-alternative-row {
    margin-bottom: 0.35rem;
}

/* Times offered on a flexible booking, in the detail drawer */
#bk-detail-alternatives .team-slot {
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

#bk-detail-alternatives form {
    margin-left: auto;
}

/* Mailbox flag in the appbar */
#mailbox-link .inbox-unread-badge {
    position: static;
    display: inline-block;
    margin-left: 0.25rem;
}

/* Send message on a roster card */
.interp-card-actions .interp-msg-btn {
    text-decoration: none;
}

.interp-tab-group a.interp-tab {
    text-decoration: none;
}

/* Message buttons on a booking */
#bk-detail-contacts .bk-msg-btn {
    text-decoration: none;
}

/* =========================================================
   Message thread
   ========================================================= */

.msg-thread {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1rem 0;
}

.msg-bubble {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    background: var(--bg-2);
    max-width: 85%;
}

.msg-bubble.msg-mine {
    margin-left: auto;
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.3);
}

.msg-meta {
    font-size: 0.74rem;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.msg-body {
    font-size: 0.88rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
/* The account holder in the appbar opens their own profile. It is an
   anchor now; the sign-out form sits beside it rather than inside,
   because a form inside an anchor is not valid HTML. */
.appbar-identity .identity-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius, 10px);
    padding: 0.15rem 0.35rem;
    transition: background 150ms ease;
}

.appbar-identity .identity-link:hover {
    background: rgba(79, 70, 229, 0.08);
}

.appbar-identity .identity-link:hover .identity-name {
    color: var(--brand);
}

.appbar-identity .identity-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.appbar-identity .identity-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Team badges carry a figure each: 👤 solo, 👥 team. The wording is
   kept for screen readers and hover rather than dropped. */
.team-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
}

.team-badge-note {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Theme toggle sits inline in the appbar */
.theme-form {
    display: inline-flex;
}

/* Reading language, beside the theme toggle. One button per
   language, the current one held down. */
.lang-form {
    display: inline-flex;
    gap: 0.125rem;
}

.lang-select {
    font-size: 0.78rem;
    padding: 0.2rem 0.4rem;
    width: auto;
    max-width: 9rem;
}

.lang-go {
    font-size: 0.72rem;
    padding-inline: 0.45rem;
}

/* ---- Availability: my own windows ---- */
.avail-add-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.avail-add-form .field-group {
    min-width: 120px;
    flex: 1 1 120px;
}

.avail-add-form .av-kind-field {
    flex: 1 1 100%;
}

.avail-add-form .av-kind-field ul,
.avail-add-form .av-kind-field li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.avail-add-form .av-kind-field ul {
    display: flex;
    gap: 0.9rem;
}

/*
    Which field applies is decided by the switch itself — a weekly
    slot has no date and a one-off has no weekday. No script needed
    to keep the form honest; the form's own clean() has the last word.
*/
.avail-add-form:has(
    input[name="kind"][value="weekly"]:checked
) .av-date-field {
    display: none;
}

.avail-add-form:has(
    input[name="kind"][value="one-off"]:checked
) .av-weekday-field {
    display: none;
}

#profile-avail-list .group-row form {
    margin: 0;
}

.av-open-booking {
    text-decoration: none;
    color: inherit;
}

.av-open-booking:hover {
    border-color: var(--brand);
}

#av-results {
    margin-top: 1rem;
}

.avail-card .interp-card-actions {
    margin-top: 0.45rem;
}

/* ---- Calendar delivery preference ---- */
.calendar-format-field ul,
.calendar-format-field li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendar-format-field ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.calendar-format-field label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
}

/* ---- Appbar groups: Work and Office ----
   <details> opens and closes them by itself, so nothing in script
   decides what is on screen. `name` makes the pair an accordion —
   opening one closes the other — which is what keeps a narrow screen
   from filling up with menus. */
.navgroup {
    position: relative;
}

.navgroup-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}

/* The disclosure triangle, in both engines. */
.navgroup-summary::-webkit-details-marker {
    display: none;
}

.navgroup-summary::marker {
    content: "";
}

.navgroup[open] > .navgroup-summary {
    background: var(--bg-2);
    border-color: var(--brand);
}

.navgroup-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 60;
    min-width: 15rem;
    padding: 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

body[data-theme="dark"] .navgroup-menu,
body[data-theme="signa"] .navgroup-menu {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.navgroup-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 0.5rem 0.6rem 0.2rem;
}

.navgroup-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.navgroup-item:hover,
.navgroup-item:focus-visible {
    background: var(--bg-2);
    color: var(--brand);
    outline: none;
}

.navgroup-item .pending-badge {
    margin-left: auto;
    position: static;
}

@media (max-width: 720px) {
    /* On a phone the bar stacks: the brand keeps its own line, and
       the controls wrap under it as icons — two short rows rather
       than one row running off the side. Labels that only repeat
       what the icon already says are dropped, and the menus open as
       full width sheets rather than cards pinned to a button. */
    .appbrand-sub {
        display: none;
    }

    .appbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 0.55rem 0.75rem;
    }

    .appbar-right {
        gap: 0.3rem;
        row-gap: 0.35rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Icon-sized once the words are gone, so two rows are enough. */
    .appbar-right .btn-small,
    .navgroup-summary {
        padding: 0.4rem 0.6rem;
    }

    .nav-label {
        display: none;
    }

    /* Static, so the sheet below hangs off the bar itself and not
       off whichever button happened to open it — a button on the
       second row would otherwise drop its menu halfway down. */
    .navgroup {
        position: static;
    }

    .navgroup-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        min-width: 0;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 0 0 14px 14px;
        border-left: none;
        border-right: none;
    }

    .navgroup-item {
        padding: 0.7rem 0.75rem;
        font-size: 0.95rem;
    }
}