/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root {
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bg: #f4f4f8;
    --bg-card: rgba(255, 255, 255, 0.78);
    --frost-border: 1px solid rgba(255, 255, 255, 0.82);
    --frost-blur: blur(22px) saturate(160%);
    --frost-shadow: 0 8px 32px rgba(100, 100, 130, 0.13), inset 0 1px 0 rgba(255, 255, 255, 1);
    --nav-bg: #f4f4f8;
    --nav-text: #4b5563;
    --nav-text-active: #111827;
    --nav-hover: #e9e9ef;
    --sidebar-bg: #ffffff;
    --sidebar-border: #f0f0f4;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --accent: #111827;
    --accent-light: #f3f4f6;
    --success: #22c55e;
    --success-bg: #f0fdf4;
    --danger: #ef4444;
    --danger-bg: #fef2f2;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --info: #3b82f6;
    --border: #e5e7eb;
    --border-focus: #111827;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
    --radius: 16px;
    --radius-sm: 8px;
    --radius-pill: 50px;
    --nav-height: 132px;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 76px;
    --transition: 0.15s ease;
}

/* ─── Reset & Base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    background: linear-gradient(160deg, #dddde8 0%, #f4f4f8 55%, #ebebf2 100%);
    background-attachment: fixed;
    min-height: 100%;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    background: transparent;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; }

:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus { outline: none; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ─── App Shell ─────────────────────────────────────────────────────────── */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main {
    flex: 1;
    padding: 32px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding-top: calc(var(--nav-height) + 32px);
}

/* ─── Navbar ────────────────────────────────────────────────────────────── */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: transparent;
    display: flex;
    align-items: center;
    padding: 14px 32px 0 32px;
    gap: 24px;
    z-index: 100;
    border-bottom: none;
    box-shadow: none;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
}

.navbar-brand-stacked {
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.navbar-logo-img {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* ─── App Logo Component ────────────────────────────────────────────────── */
.app-logo {
    display: inline-block;
    height: 48px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

.app-logo-lg { height: 130px; }
.app-logo-stacked { height: 72px; }
.app-logo-centered { display: block; margin-left: auto; margin-right: auto; }

.navbar-badge {
    background: #f3f4f6;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.navbar-end {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
    justify-content: flex-end;
    margin-left: auto;
}

/* ─── Admin Shell ───────────────────────────────────────────────────────── */
/* Black frame wraps the viewport. Sidebar + main are direct flex children
   with an 8px gap between them — main is a rounded card surrounded by black
   on all four sides (8px shell padding + 8px flex gap = the visible black
   border). Sidebar has no rounding; it merges with the shell's black on its
   own three sides. */
.admin-shell {
    /* Locked to the viewport height so .admin-main has a definite height and
       its overflow-y: auto kicks in. min-height would let the shell grow with
       its children's intrinsic height, which would put the scroll bar on
       <body> instead of inside .admin-main. */
    height: 100vh;
    background: #0a0a0a;
    padding: 8px;
    display: flex;
    gap: 8px;
    box-sizing: border-box;
}

.admin-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
    color: #ffffff;
    overflow: hidden;
    transition: width 0.22s ease;
}

/* Collapsed state — toggled by the sidebar's pin button, persisted in
   localStorage. Width shrinks to the icon-only column; labels and section
   titles disappear; the small logo replaces the full one. */
.admin-sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}
.admin-sidebar.collapsed .sidebar-link-text,
.admin-sidebar.collapsed .sidebar-section-title {
    display: none;
}
.admin-sidebar.collapsed .sidebar-link,
.admin-sidebar.collapsed .sidebar-logout,
.admin-sidebar.collapsed .sidebar-pin {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
.admin-sidebar.collapsed .sidebar-logo-full { display: none; }
.admin-sidebar.collapsed .sidebar-logo-small { display: block; height: 50px; }
.admin-sidebar.collapsed .sidebar-pin-icon { transform: rotate(180deg); }

/* Two logos stacked on top of each other; only the full logo is shown now
   that the sidebar has a fixed wide layout. The small one stays in the markup
   but hidden — easy to bring back if we ever add a collapse toggle. */
.sidebar-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    object-fit: contain;
}

.sidebar-logo-small { display: none; }
.sidebar-logo-full  { height: 84px; opacity: 1; }

.admin-sidebar .sidebar-link-text,
.admin-sidebar .sidebar-section-title {
    white-space: nowrap;
}

.sidebar-header {
    position: relative;
    min-height: 100px;
    /* No bottom border — it visually competed with the logo. */
}

.sidebar-role-badge {
    display: inline-block;
    margin-top: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 10px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 12px 12px;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-footer {
    padding: 12px 12px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-pin,
.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    font-family: inherit;
    text-align: left;
}

.sidebar-pin { margin-bottom: 4px; }
.sidebar-pin:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.sidebar-pin-icon { transition: transform 0.22s ease; }

.sidebar-logout:hover { background: rgba(255, 80, 80, 0.12); color: #ff8a8a; }

.admin-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    /* Bottom padding leaves room for the fixed VersionBadge so content
       scrolled all the way down isn't hidden behind it. */
    padding: 40px 32px 96px;
    background: var(--bg);
    border-radius: 20px;
    position: relative;
}

/* Anchored top-right inside .admin-main — appears beside every page header
   without each page having to render its own copy. */
.admin-header-actions {
    position: absolute;
    top: 32px;
    right: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}

/* Always-visible chips that sit to the left of the search/notification
   buttons in the admin header. Two flavours: environment (Dev / Prod)
   and system state (paused / running). Each carries a coloured dot +
   a short label so the admin can see at a glance which mode the app
   is in. */
.admin-header-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    height: 30px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid transparent;
    user-select: none;
}

.admin-header-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Environment variants — match the Settings page's pill palette. */
.admin-header-chip-env-dev {
    background: #fef3c7;
    color: #b45309;
    border-color: #fde68a;
}

.admin-header-chip-env-production {
    background: #dcfce7;
    color: #15803d;
    border-color: #bbf7d0;
}

/* System-state variants — green when running, red when paused. The
   paused dot pulses so the chip reads as "something to look at". */
.admin-header-chip-state-running {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.admin-header-chip-state-paused {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

.admin-header-chip-state-paused .admin-header-chip-dot {
    animation: admin-chip-pulse 1.6s ease-in-out infinite;
}

/* Role chip — identifies the signed-in user's role at a glance. Master
   Admin uses a violet (premium / privileged feel) deliberately distinct
   from every other chip on this row: env uses gold/green, state uses
   green/red, Admin uses blue. Violet stays out of all those hue lanes so
   "you are Master Admin" reads instantly without colliding with the
   Dev-env gold chip next to it. */
.admin-header-chip-role-master {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #ddd6fe;
}
.admin-header-chip-role-admin {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

@keyframes admin-chip-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}

@media (max-width: 768px) {
    /* On phone/small-tablet, drop the label text to save space; the
       coloured dot still carries the at-a-glance signal. */
    .admin-header-chip-text { display: none; }
    .admin-header-chip { padding: 0 8px; }
}

.admin-header-action {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
    padding: 0;
}

.admin-header-action:hover {
    background: #f7f7fb;
    border-color: rgba(0, 0, 0, 0.14);
}

.admin-header-action:active { transform: scale(0.96); }

.admin-header-action svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ─── Sidebar Nav ───────────────────────────────────────────────────────── */
.sidebar-section { margin-bottom: 24px; }

.sidebar-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 8px;
    margin-bottom: 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13.5px;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
    margin-bottom: 2px;
}

.sidebar-link:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; }
.sidebar-link.active { background: rgba(255, 255, 255, 0.10); color: #ffffff; font-weight: 600; }

.sidebar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    font-weight: 600;
    border: 1.5px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    line-height: 1;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.btn-primary:hover { background: #333; border-color: #333; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-outline-light {
    background: transparent;
    color: rgba(255,255,255,0.75);
    border-color: rgba(255,255,255,0.2);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.4); }

.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}
.btn-outline:hover { background: var(--accent-light); color: var(--text-primary); border-color: var(--border); }

.btn-sm { padding: 6px 14px; font-size: 12.5px; }
.btn-block { width: 100%; margin-top: 8px; padding: 12px; }

.btn-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    backdrop-filter: var(--frost-blur);
    -webkit-backdrop-filter: var(--frost-blur);
    border-radius: var(--radius);
    border: var(--frost-border);
    box-shadow: var(--frost-shadow);
    padding: 24px;
}

/* ─── Forms ─────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.required { color: var(--danger); }

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
}

.form-control:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(17,24,39,0.08);
}

.form-control::placeholder { color: var(--text-muted); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-section {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 20px;
}

.form-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.form-check-group { margin: 4px 0 8px; }

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.form-check-input {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.form-check-label { font-size: 14px; font-weight: 500; }

.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; display: block; }

/* ─── Alerts ────────────────────────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    margin-bottom: 16px;
    font-weight: 500;
}

.alert-danger { background: var(--danger-bg); color: #dc2626; border: 1px solid #fecaca; }
.alert-success { background: var(--success-bg); color: #16a34a; border: 1px solid #bbf7d0; }
.alert-warning { background: var(--warning-bg); color: #d97706; border: 1px solid #fde68a; }

/* ─── Page Header ───────────────────────────────────────────────────────── */
.page-header {
    margin-bottom: 32px;
    /* Reserve space on the right for the AdminHeaderActions buttons (44px each
       + 8px gap + 16px buffer). Title and subtitle stay clear of them. */
    padding-right: 112px;
}

.page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

/* ─── Data Table ────────────────────────────────────────────────────────── */
.data-table-wrapper {
    background: var(--bg-card);
    backdrop-filter: var(--frost-blur);
    -webkit-backdrop-filter: var(--frost-blur);
    border: var(--frost-border);
    border-radius: 16px;
    box-shadow: var(--frost-shadow);
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.35);
}

.data-table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--text-primary);
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255,255,255,0.3); }

.data-table-actions { text-align: right; white-space: nowrap; }
.data-table-actions > .btn-icon-action + .btn-icon-action { margin-left: 6px; }

/* Square icon button used in table action columns. Sized to fit a row without
   bulking it up; outline by default, color-shifts on hover. */
.btn-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: #ffffff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
    flex-shrink: 0;
}
.btn-icon-action svg { width: 16px; height: 16px; display: block; }
.btn-icon-action:hover {
    border-color: rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.02);
}
.btn-icon-action:active { transform: translateY(1px); }
.btn-icon-action:disabled { opacity: 0.5; cursor: not-allowed; }

.data-placeholder {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
}

/* ─── Settings Cards ────────────────────────────────────────────────────── */
.settings-grid {
    display: grid;
    gap: 16px;
    max-width: 720px;
}

.settings-card {
    background: var(--bg-card);
    backdrop-filter: var(--frost-blur);
    -webkit-backdrop-filter: var(--frost-blur);
    border: var(--frost-border);
    border-radius: 16px;
    box-shadow: var(--frost-shadow);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.settings-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.settings-card-content { flex: 1; }
.settings-card-content h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.settings-card-content p { font-size: 13px; color: var(--text-secondary); margin: 0; }

/* Sections */
.settings-section { margin-bottom: 32px; max-width: 720px; }
.settings-section:last-child { margin-bottom: 0; }

/* Two-column shell for the Admin → Ρυθμίσεις page. Left column: API
   configuration (env + keys + per-API logging). Right column: system /
   admin actions. Collapses to a single column when there isn't room. */
.settings-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.settings-column { min-width: 0; }

.settings-layout .settings-section { max-width: none; }
.settings-layout .settings-column > .settings-section:last-child { margin-bottom: 0; }

@media (max-width: 1199px) {
    .settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .settings-layout .settings-section { max-width: 720px; }
}

/* API-keys tab strip — used only inside the "Κλειδιά API" section to flip
   between the Claude and Google Maps configuration panes. The surrounding
   .settings-section keeps its existing styling. */
.api-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    margin: 8px 0 14px;
    width: fit-content;
}

.api-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.api-tab:hover { color: var(--text-primary, #111); }

.api-tab.active {
    background: #ffffff;
    color: var(--text-primary, #111);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.api-tab-pane { padding-top: 18px; }
.api-tab-blurb { margin: 0 0 16px; }

.api-tab-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
    display: flex;
    justify-content: flex-end;
}

.btn-link-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background var(--transition), color var(--transition);
}

.btn-link-action:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.btn-link-action svg {
    width: 16px;
    height: 16px;
}

.api-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.api-usage-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    border-radius: 12px;
    background: #f7f7f73b;
    border: 1px solid #f3f3f3;
}

.api-usage-card-current {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1d4ed8;
    color: #ffffff;
}

.api-usage-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: capitalize;
}

.api-usage-card-current .api-usage-card-label {
    color: rgba(255, 255, 255, 0.85);
}

.api-usage-card-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.api-usage-card-current .api-usage-card-value {
    color: #ffffff;
}

.api-usage-card-tag {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.18);
    padding: 2px 8px;
    border-radius: 999px;
    align-self: flex-start;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

@media (max-width: 560px) {
    .api-usage-grid {
        grid-template-columns: 1fr;
    }
}

.settings-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.settings-section-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

/* Form-style settings card (single-column, with form fields inside) */
.settings-card-form {
    display: block;
    padding: 24px;
}

.settings-card-form .form-group { margin-bottom: 18px; }
.settings-card-form .form-group:last-of-type { margin-bottom: 24px; }

.settings-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Environment toggle (segmented control) */
.env-toggle {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
}

.env-toggle-option {
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.env-toggle-option:hover:not(.active):not(:disabled) {
    color: var(--text-primary, #111);
}

.env-toggle-option.active {
    background: #ffffff;
    color: var(--text-primary, #111);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.env-toggle-option:disabled { cursor: not-allowed; opacity: 0.6; }

/* Effective URL preview */
.env-effective {
    padding: 10px 14px;
    background: #f3f4f6;
    border-radius: 10px;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 13px;
    color: var(--text-primary, #111);
    word-break: break-all;
}

/* ─── Περιβάλλον εφαρμογής (App Environment) card ─────────────────────────
   Sits at the top of the left settings column (normal max-width). Shows
   the *saved* env as a coloured pill — that pill never moves on click,
   only on a successful save. Below it, the two endpoint URLs are
   clickable boxes (selection diverges from the saved value while the
   user picks; converges back on save). */
.env-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
}

.env-card-state-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.env-card-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.env-pick-hint {
    margin: 0;
    font-size: 13px;
}

.env-current-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.env-current-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
    animation: env-pulse 2.2s ease-in-out infinite;
}

@keyframes env-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

.env-current-pill-dev {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.env-current-pill-production {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.env-endpoint-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 700px) {
    .env-endpoint-grid { grid-template-columns: 1fr; }
}

/* Each box is a real button now: click anywhere on it to pick that env.
   `.selected` = the user's pending pick (visual only).
   `.saved`    = the currently committed env (drives the "Ενεργό" tag). */
.env-endpoint-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #eef0f3;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.env-endpoint-card:hover:not(:disabled):not(.selected) {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
}

.env-endpoint-card.selected {
    background: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 1px 2px rgba(37, 99, 235, 0.06), 0 6px 18px rgba(37, 99, 235, 0.08);
}

.env-endpoint-card:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.env-endpoint-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.env-endpoint-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #111);
}

.env-endpoint-card-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}

/* "Ενεργό" tag uses the env-specific palette so its colour matches the
   header pill at a glance. */
.env-endpoint-card.saved .env-endpoint-card-tag-saved {
    color: #15803d;
    background: #dcfce7;
}

.env-endpoint-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.env-endpoint-card-url {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 12.5px;
    color: var(--text-primary, #111);
    word-break: break-all;
    line-height: 1.3;
}

/* ─── Progress Bar ──────────────────────────────────────────────────────── */
.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 50px;
    overflow: hidden;
    margin-top: 20px;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #374151 0%, var(--success) 100%);
    transition: width 0.25s ease;
    border-radius: 50px;
}

.progress-bar-indeterminate {
    background: linear-gradient(90deg,
        rgba(55,65,81,0.15) 0%,
        #374151 40%,
        var(--success) 60%,
        rgba(34,197,94,0.15) 100%);
    background-size: 200% 100%;
    animation: progressIndeterminate 1.4s ease-in-out infinite;
}

@keyframes progressIndeterminate {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ─── Status Pill ───────────────────────────────────────────────────────── */
.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 3px 10px;
    border-radius: 50px;
    border: 1px solid transparent;
}

.status-pill-active { background: var(--success-bg); color: var(--success); border-color: rgba(34,197,94,0.25); }
.status-pill-inactive { background: rgba(0,0,0,0.04); color: var(--text-muted); border-color: rgba(0,0,0,0.08); }

/* ─── Pagination ────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ─── Dialog Form (solid white, self-contained) ─────────────────────────── */
.dialog-form {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
    text-align: left;
    width: 90%;
    max-width: 620px;
    max-height: calc(100vh - 32px);
    padding: 32px 36px 32px;
    animation: dialogSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Scroll on the dialog itself (not the body) so absolute descendants
       like the address-suggestions dropdown can float over content below. */
    overflow-y: auto;
}

.dialog-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.dialog-form h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-align: left;
}

.dialog-close {
    background: none;
    border: none;
    padding: 4px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
    flex-shrink: 0;
}
.dialog-close svg { width: 20px; height: 20px; }
.dialog-close:hover { color: var(--text-primary); }
.dialog-close:disabled { opacity: 0.4; cursor: not-allowed; }

.dialog-form-body {
    margin-top: 28px;
}

/* Wide variant for edit dialog with users table */
.dialog-form-wide { max-width: 820px; }
.dialog-form-narrow { max-width: 460px; }

.confirm-dialog-message {
    margin: 0 0 18px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.confirm-dialog-actions {
    margin-top: 8px;
}

/* Dialog inner section — separates the business form from the users block */
.dialog-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dialog-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.dialog-section-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.1px;
}

.btn-icon-sm {
    width: 32px;
    height: 32px;
}
.btn-icon-sm svg { width: 16px; height: 16px; }

/* Inline form inside dialog for adding a user */
.inline-form {
    background: rgba(0, 0, 0, 0.025);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.inline-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}

.inline-form-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Light qualifier next to a label — e.g. "Κωδικός — άδειο = χωρίς αλλαγή" */
.form-label-note {
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

/* Input + inline action buttons (Show/Hide, Copy, etc.) sitting on a single
   row. Buttons are slim, white, with a subtle border that picks up the
   form-control's focus state visually. */
.input-with-actions {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.input-with-actions .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.input-action-btn {
    flex: 0 0 auto;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    white-space: nowrap;
}

.input-action-btn:hover:not(:disabled) {
    background: #f7f7fb;
    border-color: rgba(0, 0, 0, 0.2);
}

.input-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-cancel-small,
.btn-success-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    line-height: 1;
}

.btn-cancel-small {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.12);
}
.btn-cancel-small:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-primary); }
.btn-cancel-small:disabled { opacity: 0.5; cursor: not-allowed; }

/* Destructive secondary action — used in the connection-string dialog's
   "delete & restart" flow. Outlined so it doesn't compete visually with the
   primary "save & restart" button. */
.btn-danger-outline {
    background: #ffffff;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-danger-outline:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}
.btn-danger-outline:disabled { opacity: 0.5; cursor: not-allowed; }

/* Soft-delete "danger zone" row at the bottom of edit dialogs (company,
   company user). Visually separated from the save button by a divider so
   it's clearly NOT another primary action. Text on the left explains the
   consequence; the outlined red button on the right is the trigger. */
.danger-zone {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.danger-zone-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.danger-zone-title {
    font-size: 13px;
    font-weight: 700;
    color: #b91c1c;
    letter-spacing: 0.2px;
}
.danger-zone-subtitle {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    line-height: 1.45;
}
.danger-zone .btn-danger-outline {
    flex-shrink: 0;
}
@media (max-width: 520px) {
    .danger-zone { flex-direction: column; align-items: stretch; gap: 10px; }
    .danger-zone .btn-danger-outline { align-self: flex-start; }
}

.conn-edit-reset {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.conn-edit-reset-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}

.btn-success-small {
    background: linear-gradient(90deg, #26a269 0%, #3ecf72 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 2px 8px rgba(38, 162, 105, 0.22);
}
.btn-success-small:hover { filter: brightness(1.05); }
.btn-success-small:disabled { opacity: 0.6; cursor: not-allowed; }

/* Mini table inside dialog */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

.mini-table thead th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.mini-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

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

.mini-placeholder {
    padding: 18px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Big rectangular primary action — gradient fill */
.btn-save-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px 24px;
    margin-top: 28px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(90deg, #26a269 0%, #3ecf72 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: filter var(--transition), transform var(--transition);
    font-family: inherit;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(38, 162, 105, 0.25);
}
.btn-save-primary:hover { filter: brightness(1.05); }
.btn-save-primary:active { transform: translateY(1px); }
.btn-save-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* Destructive variant — same shape, red gradient. */
.btn-save-primary.btn-save-danger {
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 100%);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}

/* ─── Table Toolbar (search + sort + add) ───────────────────────────────── */
.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.table-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.btn-icon-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #ffffff;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
    flex-shrink: 0;
    padding: 0;
}

.btn-icon-primary svg { width: 20px; height: 20px; display: block; }
.btn-icon-primary:hover { background: #333; transform: scale(1.05); }
.btn-icon-primary:active { transform: scale(0.95); }

.table-toolbar-search {
    position: relative;
    flex: 1;
    max-width: 420px;
}

.table-toolbar-search .form-control {
    padding-left: 40px;
}

.table-toolbar-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.table-toolbar-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-toolbar-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.table-toolbar-sort .form-control {
    padding: 8px 14px;
    width: auto;
    min-width: 180px;
}

/* ─── Filter trigger / active chip ──────────────────────────────────────── */
/* Inactive — looks like a control, click to open the picker. */
.filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    min-width: 180px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition);
}
.filter-trigger:hover { border-color: rgba(0, 0, 0, 0.25); color: var(--text-primary); }
.filter-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Active — shows the selected company with an inline clear button. */
.filter-chip {
    display: inline-flex;
    align-items: stretch;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: #eff6ff;
    overflow: hidden;
    max-width: 320px;
}
.filter-chip-body {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: transparent;
    border: none;
    color: #1e40af;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 0;
}
.filter-chip-body:hover { background: rgba(37, 99, 235, 0.08); }
.filter-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filter-chip-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(37, 99, 235, 0.25);
    color: #1e40af;
    cursor: pointer;
    transition: background var(--transition);
}
.filter-chip-clear:hover { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
.filter-chip-clear svg { width: 14px; height: 14px; }

/* ─── Company stats dialog ──────────────────────────────────────────────── */
.company-stats-online {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    margin-bottom: 22px;
    border-radius: 16px;
    color: #ffffff;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #5d4ed8 0%, #3a2eaa 100%);
    box-shadow: 0 1px 3px rgba(58, 46, 170, 0.25), 0 12px 32px rgba(58, 46, 170, 0.30);
}

.company-stats-online-pulse {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.16);
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.company-stats-online-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    backdrop-filter: blur(8px);
}
.company-stats-online-icon svg { width: 24px; height: 24px; }

.company-stats-online-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.company-stats-online-value {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.company-stats-online-label {
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.company-stats-online-hint {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
}

.company-stats-tabs {
    margin-bottom: 14px;
}

.company-stats-section-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.company-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.company-stats-chart-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.company-stats-api-usage {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.company-stats-api-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.company-stats-api-block:last-child {
    margin-bottom: 0;
}

.company-stats-api-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.company-stats-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.company-stats-chart-wrap { height: 220px; }

.company-stats-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--cell-accent, #cbd5e1);
}
.company-stats-cell-blue  { --cell-accent: #2563eb; }
.company-stats-cell-green { --cell-accent: #16a34a; }
.company-stats-cell-red   { --cell-accent: #dc2626; }
.company-stats-cell-amber { --cell-accent: #d97706; }

.company-stats-cell-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.company-stats-cell-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .company-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Connection info (admin settings) ──────────────────────────────────── */
.conn-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    margin-bottom: 16px;
}
.conn-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}
.conn-label { color: var(--text-muted); }
.conn-value { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; }

.conn-string {
    margin: 0;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

/* ─── Scheduled tasks (admin) ───────────────────────────────────────────── */
.tasks-table .tasks-col-interval { width: 140px; white-space: nowrap; }
.tasks-table .tasks-col-time     { width: 200px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tasks-table .tasks-col-status   { width: 180px; }

.tasks-cell-name {
    font-weight: 600;
    color: var(--text-primary);
}
.tasks-cell-desc {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}
.tasks-cell-relative {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* History dialog body */
.task-history-hint {
    margin: 0 0 14px;
    color: var(--text-muted);
    font-size: 13px;
}

.task-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.task-history-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-history-item-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.task-history-item-time {
    color: var(--text-secondary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.task-history-item-duration {
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

.task-history-item-summary {
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.5;
}

.task-history-item-error {
    margin: 4px 0 0;
    padding: 10px 12px;
    background: #fee2e2;
    border-radius: 8px;
    color: #991b1b;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* ─── Result count meta line (shown above table) ────────────────────────── */
.results-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.results-meta-primary { color: var(--text-secondary); font-weight: 500; }
.results-meta-secondary { color: var(--text-muted); }
.results-meta-separator { color: var(--text-muted); opacity: 0.5; }

/* ─── Company picker dialog ─────────────────────────────────────────────── */
.company-picker-dialog { max-width: 520px; }

.company-picker-search {
    position: relative;
    margin-bottom: 16px;
}
.company-picker-search .form-control { padding-left: 40px; }
.company-picker-search .table-toolbar-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.company-picker-list {
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #fafafa;
}

.company-picker-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition);
}
.company-picker-item:last-child { border-bottom: none; }
.company-picker-item:hover { background: rgba(37, 99, 235, 0.06); }
.company-picker-item-name { font-weight: 500; }
.company-picker-item-tin {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.company-picker-empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ─── Form Toggle ───────────────────────────────────────────────────────── */
.form-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.form-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.form-toggle-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 50px;
    background: rgba(0,0,0,0.12);
    transition: background var(--transition);
    flex-shrink: 0;
}

.form-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform var(--transition);
}

.form-toggle input:checked ~ .form-toggle-track { background: var(--success); }
.form-toggle input:checked ~ .form-toggle-track .form-toggle-thumb { transform: translateX(18px); }

.form-toggle-label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.page-title {
    font-size: 44px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.8px;
    line-height: 1.1;
}

.page-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ─── Placeholder ───────────────────────────────────────────────────────── */
.content-placeholder { display: grid; gap: 20px; }

.placeholder-card {
    background: var(--bg-card);
    backdrop-filter: var(--frost-blur);
    -webkit-backdrop-filter: var(--frost-blur);
    border: 2px dashed rgba(200, 200, 210, 0.7);
    border-radius: var(--radius);
    padding: 48px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
}

.placeholder-text { color: var(--text-muted); font-size: 15px; }

/* ─── Address Autocomplete ──────────────────────────────────────────────── */
/* ── Address dummy field (RegisterTransferDialog) ─────────────────────────
   Looks like a regular form input but is actually a button. Click opens a
   full-screen address picker; we deliberately avoid an inline autocomplete
   dropdown because it caused layout-shift / scrollbar flicker inside the
   dialog. */
.address-dummy {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #ffffff;
    font-size: 14px;
    color: var(--text-primary, #111);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    text-align: left;
    min-height: 42px;
}
.address-dummy:hover { background: #f9fafb; border-color: rgba(0, 0, 0, 0.22); }
.address-dummy:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.address-dummy-placeholder {
    flex: 1;
    color: var(--text-muted, #9ca3af);
}
.address-dummy-value {
    flex: 1;
    color: var(--text-primary, #111);
    font-weight: 500;
    word-break: break-word;
}
.address-dummy-chevron {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--text-muted, #9ca3af);
}

/* ── Full-screen address picker ─────────────────────────────────────────── */
.address-picker {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 1100;                /* above dialog-overlay (1000) */
    display: flex;
    flex-direction: column;
    animation: address-picker-in 0.18s ease-out both;
}

@keyframes address-picker-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.address-picker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 12px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    flex: 0 0 auto;
}

.address-picker-back,
.address-picker-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--text-primary, #111);
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background var(--transition);
}
.address-picker-back:hover,
.address-picker-clear:hover { background: rgba(0, 0, 0, 0.06); }
.address-picker-back svg,
.address-picker-clear svg { width: 22px; height: 22px; }

.address-picker-search {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;       /* 16px stops iOS auto-zoom on focus */
    padding: 8px 4px;
    background: transparent;
    color: var(--text-primary, #111);
    min-width: 0;
}

.address-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 12px;
}

.address-picker-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 24px;
    color: var(--text-secondary, #6b7280);
    font-size: 14px;
    text-align: center;
}
.address-picker-status-empty {
    color: var(--text-muted, #9ca3af);
}

.address-picker-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--text-primary, #111);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.address-picker-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px 18px;
    border: none;
    background: transparent;
    font-size: 14.5px;
    color: var(--text-primary, #111);
    cursor: pointer;
    transition: background var(--transition);
}
.address-picker-result:hover,
.address-picker-result:focus-visible { background: #f3f4f6; outline: none; }
.address-picker-result + .address-picker-result {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.address-picker-result-pin {
    display: inline-flex;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #2563eb;
    margin-top: 2px;
}
.address-picker-result-pin svg { width: 100%; height: 100%; }

.address-picker-result-text {
    flex: 1;
    line-height: 1.4;
    word-break: break-word;
}

/* On larger screens centre the picker as a card instead of full bleed —
   matches the desktop look-and-feel of the rest of the public app. */
@media (min-width: 1024px) {
    .address-picker {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(560px, calc(100vw - 32px));
        height: min(640px, calc(100vh - 64px));
        border-radius: 24px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
        overflow: hidden;
    }
    @keyframes address-picker-in {
        from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
        to   { opacity: 1; transform: translate(-50%, -50%); }
    }
}

.coords-hint {
    color: #16a34a !important;
    font-weight: 500;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.form-label-row .form-label { margin-bottom: 0; }

/* Narrow viewports: stack the inline action below the label so it can't overflow. */
@media (max-width: 480px) {
    .form-label-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

.btn-link-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.25);
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    line-height: 1;
    white-space: nowrap;
}

.btn-link-add:hover {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.4);
}

.btn-link-add:active { transform: scale(0.97); }

.btn-link-add:disabled {
    color: var(--text-muted, #9ca3af);
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
    cursor: not-allowed;
}

.form-hint-error { color: #dc2626 !important; }

/* ─── Auto-update banner (admin home) ───────────────────────────────────── */
.update-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.update-banner-success {
    background: #dcfce7;
    color: #166534;
    border-color: rgba(22, 163, 74, 0.22);
}

.update-banner-warn {
    background: #fef3c7;
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.28);
}

.update-banner-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}
.update-banner-icon svg { width: 22px; height: 22px; }

.update-banner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13.5px;
}
.update-banner-body strong { font-weight: 700; font-size: 14px; }
.update-banner-body span { opacity: 0.85; }

.update-banner-link {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.update-banner-link:hover { background: rgba(255, 255, 255, 0.5); }

.update-banner-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.update-banner-close:hover { opacity: 1; }
.update-banner-close svg { width: 18px; height: 18px; }

/* ─── Delivery-note status pill (Options page) ──────────────────────────── */
.status-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 8px 0 18px;
}

.status-strip-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.status-pill-loading {
    background: #eff6ff;
    color: #1e40af;
    border-color: rgba(37, 99, 235, 0.18);
}

.status-pill-spinner {
    width: 12px; height: 12px;
    border: 2px solid rgba(37, 99, 235, 0.25);
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: status-spin 0.7s linear infinite;
}
@keyframes status-spin { to { transform: rotate(360deg); } }

.status-pill-registered { background: #eff6ff; color: #1e40af; border-color: rgba(37, 99, 235, 0.20); }
.status-pill-intransit  { background: #fef3c7; color: #92400e; border-color: rgba(217, 119, 6, 0.25); }
.status-pill-completed  { background: #dcfce7; color: #166534; border-color: rgba(22, 163, 74, 0.22); }
.status-pill-failed     { background: #fee2e2; color: #991b1b; border-color: rgba(220, 38, 38, 0.22); }
.status-pill-cancelled  { background: #f3f4f6; color: #4b5563; border-color: rgba(0, 0, 0, 0.10); }

.status-pill-retry {
    background: transparent;
    border: 1px solid rgba(220, 38, 38, 0.30);
    color: #991b1b;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 6px;
}
.status-pill-retry:hover { background: rgba(220, 38, 38, 0.08); }

/* ─── Logs Page ─────────────────────────────────────────────────────────── */
.logs-table { table-layout: fixed; width: 100%; }

.logs-col-time { width: 170px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-secondary, #6b7280); }
.logs-col-level { width: 110px; }
.logs-col-action { width: 240px; }
.logs-col-message {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logs-row { cursor: pointer; }
.logs-row:hover { background: rgba(0, 0, 0, 0.02); }

.level-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.level-info {
    background: #dbeafe;
    color: #1d4ed8;
}

.level-warning {
    background: #fef3c7;
    color: #92400e;
}

.level-error {
    background: #fee2e2;
    color: #b91c1c;
}

.log-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 18px;
}

.log-detail-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.log-detail-cell-wide { grid-column: span 2; }

.log-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.log-detail-value {
    font-size: 14px;
    color: var(--text-primary, #111);
    word-break: break-word;
}

.log-detail-message {
    padding: 10px 14px;
    background: #f3f4f6;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary, #111);
    word-break: break-word;
}

.log-detail-pre {
    margin: 0;
    padding: 14px 16px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 12.5px;
    line-height: 1.65;
    max-height: 360px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .logs-col-action { width: auto; }
    .logs-col-time { width: 130px; font-size: 12px; }
    .log-detail-grid { grid-template-columns: 1fr; }
    .log-detail-cell-wide { grid-column: span 1; }
}

/* ─── Register Transfer success view ────────────────────────────────────── */
.register-success {
    padding: 36px 28px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: register-success-in 0.35s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.register-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.register-success-icon svg { width: 32px; height: 32px; }

.register-success h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-primary, #111);
}

.register-success p {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin: 0 0 20px;
}

.register-success-mark {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 24px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.register-success-mark-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.register-success-mark-value {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
}

.register-success-ok { min-width: 140px; }

@keyframes register-success-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* ─── Update Dialog ─────────────────────────────────────────────────────── */
.update-section {
    margin-bottom: 24px;
}

.update-section:last-child { margin-bottom: 0; }

.update-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0 0 12px;
}

.update-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.update-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.update-summary-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.update-summary-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #111);
}

.status-running {
    color: #16a34a;
}

.status-running::before {
    content: "●";
    margin-right: 6px;
    color: #16a34a;
    animation: status-pulse 2s ease-in-out infinite;
}

.status-paused {
    color: #d97706;
}

.status-paused::before {
    content: "●";
    margin-right: 6px;
    color: #d97706;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.btn-pause {
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    background: #111827;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn-pause:hover { background: #1f2937; }
.btn-pause:active { transform: scale(0.99); }
.btn-pause:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-pause-active {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.btn-pause-active:hover { background: #fde68a; }

.update-version-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
}

.update-version-row > div { flex: 1; }

.update-version-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.update-version-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin-top: 2px;
}

.update-version-arrow {
    font-size: 18px;
    color: var(--text-muted, #9ca3af);
    flex: 0 0 auto !important;
}

.update-run-btn { width: 100%; }

.update-uptodate {
    color: #16a34a;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    padding: 12px 16px;
    background: #dcfce7;
    border-radius: 10px;
    text-align: center;
}

.update-log {
    margin-top: 16px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 12.5px;
    line-height: 1.7;
    max-height: 240px;
    overflow-y: auto;
}

.update-log-line { white-space: pre-wrap; }

/* ─── Maintenance Page ──────────────────────────────────────────────────── */
.maintenance-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(160deg, #f4f4f8 0%, #ebebf2 100%);
}

.maintenance-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 56px 48px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    animation: maintenance-in 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.maintenance-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fef3c7;
    color: #d97706;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.maintenance-icon svg { width: 32px; height: 32px; }

.maintenance-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary, #111);
}

.maintenance-message {
    color: var(--text-secondary, #6b7280);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 28px;
}

.maintenance-refresh {
    min-width: 160px;
}

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

/* ─── Metrics panel (groups cards + filter into one section) ────────────── */
.metrics-panel {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
}

.metrics-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.metrics-panel-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.metrics-panel-subtitle {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.metrics-legend {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    color: var(--text-secondary);
}
.metrics-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.metrics-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.metrics-chart-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
}
.metrics-chart-wrap .apexcharts-canvas {
    width: 100% !important;
    max-width: 100%;
}
/* Make sure the panel itself clips anything that escapes the wrap. */
.metrics-row > .metrics-panel { overflow: hidden; }

/* Side-by-side: chart panel (65%) + online users card (~35%) ───────────── */
.metrics-row {
    display: grid;
    grid-template-columns: 65% 1fr;
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}
.metrics-row > .metrics-panel { margin-bottom: 0; }

@media (max-width: 900px) {
    .metrics-row { grid-template-columns: 1fr; }
}

/* ─── Online users card (gradient, hero-style) ──────────────────────────── */
.online-users-card {
    position: relative;
    border-radius: 20px;
    padding: 28px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #5d4ed8 0%, #3a2eaa 100%);
    box-shadow: 0 1px 3px rgba(58, 46, 170, 0.25), 0 12px 32px rgba(58, 46, 170, 0.30);
}

.online-users-pulse {
    position: absolute;
    top: 18px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.16);
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}
.online-users-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: onlinePulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes onlinePulse {
    0%   { box-shadow: 0 0 0 0   rgba(52, 211, 153, 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);   }
    100% { box-shadow: 0 0 0 0   rgba(52, 211, 153, 0);   }
}

.online-users-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 8px;
    backdrop-filter: blur(8px);
}
.online-users-icon svg { width: 24px; height: 24px; }

.online-users-value {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    margin-top: auto;
}

.online-users-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-top: 2px;
}

.online-users-hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
}

/* ─── Metrics window picker (segmented control) ─────────────────────────── */
.metrics-window-picker {
    display: inline-flex;
    align-items: stretch;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px;
    gap: 2px;
}
.metrics-window-option {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background var(--transition), color var(--transition);
}
.metrics-window-option:hover { color: var(--text-primary); }
.metrics-window-option.active {
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ─── Metrics range selector (page-level Today / 7d / 3m) ─────────────── */
.metrics-range-bar {
    display: flex;
    justify-content: flex-start;
    margin: -8px 0 16px;
}

.metrics-range-picker {
    display: inline-flex;
    align-items: stretch;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px;
    gap: 2px;
}
.metrics-range-option {
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 9px;
    transition: background var(--transition), color var(--transition);
}
.metrics-range-option:hover { color: var(--text-primary); }
.metrics-range-option.active {
    background: #ffffff;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ─── Admin home metrics layout ─────────────────────────────────────────
   Two independent columns. Each column manages its own stacking (counters
   row + chart on the left; AADE breakdown + Top Companies on the right) so
   the right column's tall lists don't force the left column's counter cards
   to stretch to match. align-items: start on the outer grid is what
   decouples the heights. */
.home-metrics-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 8px;
}

.home-metrics-left,
.home-metrics-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.home-counters-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 1024px) {
    .home-metrics-layout {
        grid-template-columns: 1fr;
    }
}

/* ─── Counter cards (3 on top of the home) ─────────────────────────────
   Compact card: small uppercase label, big bold value, subtle icon pill in
   the top-right corner. Inspired by the reference dashboard image — minimal
   chrome, dense, no wasted vertical space. */
.metric-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform var(--transition), box-shadow var(--transition);
}
.metric-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
}
.metric-card-clickable {
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.metric-card-clickable:hover {
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.12), 0 10px 28px rgba(220, 38, 38, 0.10);
}
.metric-card-clickable:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}
.metric-card-label {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.metric-card-value {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary, #111);
    line-height: 1.05;
}
.metric-card-icon-tile {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.metric-card-icon-tile svg { width: 15px; height: 15px; }
.metric-card-icon-blue  { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; }
.metric-card-icon-green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #16a34a; }
.metric-card-icon-red   { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; }

/* ─── Breakdown card (AADE breakdown + Top companies share this) ──────── */
.breakdown-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}
.breakdown-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.breakdown-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.breakdown-card-icon svg { width: 16px; height: 16px; }
.breakdown-card-icon-green  { background: linear-gradient(135deg, #dcfce7, #86efac); color: #15803d; }
.breakdown-card-icon-purple {
    background: linear-gradient(135deg, #ede9fe, #c4b5fd);
    color: #7c3aed;
}
.breakdown-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #111);
}
.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.breakdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: #f7f7f73b;
    border: 1px solid #f3f3f3;
    min-width: 0;
    transition: background var(--transition);
}
.breakdown-row:hover { background: rgba(0, 0, 0, 0.04); }
.breakdown-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.breakdown-row-name {
    font-size: 13.5px;
    color: var(--text-primary, #111);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.breakdown-row-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #111);
    flex: 0 0 auto;
}
/* Top Companies rank badge + #1 gradient highlight (reference image's
   Tesla Motors row). */
.breakdown-row-ranked .breakdown-rank {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary, #6b7280);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.breakdown-row-top {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.02));
    border: 1px solid rgba(124, 58, 237, 0.18);
}
.breakdown-row-top:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.04));
}
.breakdown-row-top .breakdown-rank {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
}
.breakdown-row-top .breakdown-row-name { font-weight: 600; }
.breakdown-row-top .breakdown-row-value { color: #6d28d9; }

.breakdown-empty {
    font-size: 13px;
    color: var(--text-muted, #9ca3af);
    padding: 16px 0;
    text-align: center;
}


/* ─── Chart panel ─────────────────────────────────────────────────────── */
.chart-panel {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 20px 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.chart-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.chart-panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #111);
}
.chart-panel-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}
.chart-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}
.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chart-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.chart-panel-body {
    min-height: 240px;
}

/* ─── Sidebar online-users widget ──────────────────────────────────────
   Lives in .sidebar-footer just above the collapse/logout buttons. Keeps
   the gradient + icon style from the old home-page card but fits inside a
   sidebar row. Adapts to collapsed state: just the icon + a pulse dot. */
.sidebar-online {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(16, 185, 129, 0.22);
    color: #d1fae5;
    margin-bottom: 8px;
    position: relative;
    min-width: 0;
}
.sidebar-online-pulse {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.25);
    animation: sidebar-online-pulse 1.4s ease-in-out infinite;
}
@keyframes sidebar-online-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.55; }
}
.sidebar-online-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.25);
    color: #d1fae5;
}
.sidebar-online-icon svg { width: 16px; height: 16px; }
.sidebar-online-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}
.sidebar-online-value {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}
.sidebar-online-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Collapsed sidebar — only the icon + pulse dot is shown. */
.admin-sidebar.collapsed .sidebar-online {
    justify-content: center;
    padding: 10px 6px;
}
.admin-sidebar.collapsed .sidebar-online-text { display: none; }
.admin-sidebar.collapsed .sidebar-online-pulse {
    top: 6px;
    right: 6px;
}

/* ─── Stat Cards ────────────────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.stat-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 18px 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.05);
    transition: transform var(--transition), box-shadow var(--transition);
}
.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.10);
}

.stat-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stat-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
}

.stat-card-value {
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary, #111);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon svg { width: 22px; height: 22px; }

.stat-card-icon-blue  { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.stat-card-icon-red   { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #b91c1c; }
.stat-card-icon-green { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #15803d; }
.stat-card-icon-amber { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #b45309; }

/* ─── Chart Cards ───────────────────────────────────────────────────────── */
.chart-row {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 16px;
    margin-top: 16px;
}

.chart-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    min-width: 0;
}

.chart-card-header { margin-bottom: 12px; }

.chart-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 0 0 2px;
}

.chart-card-subtitle {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
}

.bar-chart-wrap {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: 1fr auto;
    gap: 6px 10px;
}

.bar-chart-y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    text-align: right;
    padding: 2px 0;
}

.bar-chart-plot { position: relative; min-width: 0; }

.bar-chart {
    width: 100%;
    height: 220px;
    display: block;
}

.bar-chart-x-axis {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    padding-top: 4px;
}

.bar-chart-bar {
    transform-origin: center bottom;
    animation: bar-grow 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.bar-chart-line {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: line-draw 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.35s both;
}

@keyframes bar-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes line-draw {
    to { stroke-dashoffset: 0; }
}

.pie-wrapper {
    display: flex;
    align-items: center;
    gap: 18px;
}

.pie-chart {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
    transform-origin: center;
    animation: pie-in 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

@keyframes pie-in {
    from { transform: rotate(-120deg) scale(0.6); opacity: 0; }
    to   { transform: rotate(0deg) scale(1); opacity: 1; }
}

.pie-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.pie-legend li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}

.pie-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.pie-legend-label { color: var(--text-primary, #111); }

.pie-legend-value {
    font-weight: 700;
    color: var(--text-primary, #111);
}

@media (max-width: 1024px) {
    .chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
}

/* ─── Splash / Loading ──────────────────────────────────────────────────── */
.splash {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(160deg, #dddde8 0%, #f4f4f8 55%, #ebebf2 100%);
    flex-direction: column;
    gap: 20px;
}


.splash-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(0,0,0,0.1);
    border-top-color: #374151;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ─── Login Split Layout ────────────────────────────────────────────────── */
/* Outer shell: full-viewport background image, centers the floating card. */
.login-split-shell {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 48px;
    background-image: url('/images/loginimage2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* The floating card itself: a fixed aspect ratio, capped at an absolute
   desktop ceiling AND at a height-derived width so max-height never silently
   overrides aspect-ratio. That collision used to break the layout on shorter
   laptop viewports (e.g. 1280×720): the card grew wider than 1.55 × its
   height, the inner square image stopped covering the left container, and
   the dark card background bled out behind the right panel's rounded
   corners. The min() cap pins the width to whichever is smaller — the
   absolute ceiling or 1.55 × available viewport height — so aspect-ratio is
   always honored and no dark sliver shows. */
.login-split {
    display: flex;
    width: 100%;
    max-width: min(clamp(1050px, 68vw, 1320px), calc((100vh - 40px) * 1.55));
    aspect-ratio: 1.55 / 1;
    max-height: calc(100vh - 40px);
    border-radius: 40px;
    overflow: hidden;
    background: #1a1614;
    box-shadow:
        0 40px 90px -20px rgba(60, 40, 20, 0.32),
        0 18px 40px -12px rgba(0, 0, 0, 0.16),
        0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

/* Left: image half — the container is 60% so the white panel can overlap by
   10% without exposing the card background. The image inside is rendered
   wider than the container (130%) and shifted left so:
     • Its content lands at the centre of the *visible* dark region (0-50%
       of the card), not at the centre of the wider container.
     • Its right edge still extends past the visible boundary, so the area
       behind the white panel's rounded left corners shows the image's edge
       (a continuation of the dark gradient) rather than a flat black sliver. */
.login-split-image {
    flex: 0 0 60%;
    min-width: 0;
    overflow: hidden;
    background: #1a1614;
    position: relative;
}

.login-split-image img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12%;
    /* Match the image's NATIVE aspect ratio (1920×1920 = 1:1) so it renders
       at full height with zero top/bottom cropping. The horizontal `left`
       value stays free to tune — 0% would centre the image in the wider
       container, negative values shift content into the visible 50% region. */
    height: 100%;
    aspect-ratio: 1 / 1;
    width: auto;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Right: form panel — exactly 50% wide, but pulled left by 10% via negative
   margin so it visually sits on top of the dark side (the visible split is
   50/50 because the dark side actually extends to 60%). Big left-corner
   rounding + heavy left-side shadow give the "lifted card" effect from the
   reference. The right corners get clipped to the outer card's 40px shape
   by overflow:hidden, so all four visible corners agree. */
.login-split-panel {
    flex: 0 0 50%;
    min-width: 0;
    margin-left: -10%;
    display: flex;
    flex-direction: column;
    padding: 32px 48px;
    overflow-y: auto;
    background: #ffffff;
    border-top-left-radius: 64px;
    border-bottom-left-radius: 64px;
    box-shadow:
        -32px 0 64px -8px rgba(0, 0, 0, 0.30),
        -10px 0 20px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
}

.login-split-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-split-form {
    width: 100%;
    max-width: 380px;
}

.login-split-logo {
    text-align: center;
    margin-bottom: 24px;
}

/* Override the default 130px desktop logo specifically inside the login
   card — the global size is too tall once the card height is also bound
   by the viewport, and it pushes the form against the footer (scrollbar). */
.login-split-logo .app-logo-lg { height: 96px; }

.login-split-title {
    font-size: 38px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.8px;
    line-height: 1.15;
    margin-bottom: 10px;
    text-align: center;
}

.login-split-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 40px;
    line-height: 1.5;
    text-align: center;
}

.login-split-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 0;
    gap: 16px;
}

.login-split-copyright {
    font-size: 12px;
    color: var(--text-muted);
}

.login-split-brand-logos {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-split-brand-logos img {
    height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
}

.login-split .form-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

.login-split .form-control {
    border-radius: 50px;
    padding: 13px 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px);
}

.login-split .form-control:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
    outline: none;
}

.login-split .btn-primary {
    border-radius: 50px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    margin-top: 8px;
}

/* ─── No Database Page ──────────────────────────────────────────────────── */
.no-db-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.no-db-card {
    background: var(--bg-card);
    backdrop-filter: var(--frost-blur);
    -webkit-backdrop-filter: var(--frost-blur);
    border: var(--frost-border);
    border-radius: 20px;
    padding: 56px 48px;
    max-width: 560px;
    width: 100%;
    text-align: center;
    box-shadow: var(--frost-shadow);
}

.no-db-icon {
    font-size: 48px;
    color: var(--warning);
    margin-bottom: 20px;
    display: block;
}

.no-db-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
}

.no-db-message {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
}

.no-db-sub {
    font-size: 13px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 8px;
}

/* ─── Setup Page ────────────────────────────────────────────────────────── */
.setup-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 24px 40px;
}

.setup-card {
    background: var(--bg-card);
    backdrop-filter: var(--frost-blur);
    -webkit-backdrop-filter: var(--frost-blur);
    border: var(--frost-border);
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    max-width: 680px;
    box-shadow: var(--frost-shadow);
}

.setup-header { text-align: center; margin-bottom: 32px; }

.setup-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.setup-logo-img { height: 56px; width: auto; object-fit: contain; }

.setup-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 8px;
}

.setup-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Three-mode picker at the top of the Setup page (Create / Attach server /
   Connection string). Same shape as the public-side .public-tabs but
   stretched to fill the card width and a touch larger for desktop use. */
.setup-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    margin: 12px 0 22px;
}

.setup-mode-tab {
    border: none;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.setup-mode-tab:hover { color: var(--text-primary, #111); }

.setup-mode-tab.active {
    background: #ffffff;
    color: var(--text-primary, #111);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.setup-success {
    text-align: center;
    padding: 24px;
}

.success-icon {
    width: 56px; height: 56px;
    background: var(--success-bg);
    color: var(--success);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.setup-note {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--warning-bg);
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 20px;
}

.setup-form { margin-top: 8px; }

/* ─── Not Found ─────────────────────────────────────────────────────────── */
.not-found {
    text-align: center;
    padding: 80px 24px;
}

.not-found h1 { font-size: 80px; font-weight: 800; color: var(--border); margin-bottom: 12px; }
.not-found p { color: var(--text-secondary); font-size: 16px; }

/* ─── User Avatar ───────────────────────────────────────────────────────── */
.user-avatar-chip {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #374151 0%, #6b7280 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    letter-spacing: 0.5px;
}

.user-avatar-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ─── Success Dialog ────────────────────────────────────────────────────── */
.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.dialog-card {
    background: var(--bg-card);
    backdrop-filter: var(--frost-blur);
    -webkit-backdrop-filter: var(--frost-blur);
    border: var(--frost-border);
    box-shadow: var(--frost-shadow);
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 460px;
    width: 90%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    text-align: center;
    animation: dialogSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dialog-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.dialog-card h2 {
    font-size: 21px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.dialog-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
}

.dialog-note {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    margin-bottom: 28px !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dialogSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Version Badge ─────────────────────────────────────────────────────── */
.version-badge {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 6px 10px;
    background: #ffffff;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 50;
}

.version-badge-logo {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

.version-badge-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* ─── Notifications / Snackbars ─────────────────────────────────────────── */
.notif-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    pointer-events: none;
}

.notif {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
    border-left: 4px solid;
    animation: notifSlideIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: all;
}

.notif-success { border-left-color: var(--success); }
.notif-error   { border-left-color: var(--danger); }
.notif-warning { border-left-color: var(--warning); }
.notif-info    { border-left-color: var(--info); }

.notif-icon {
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notif-success .notif-icon { background: var(--success-bg); color: var(--success); }
.notif-error   .notif-icon { background: var(--danger-bg);  color: var(--danger); }
.notif-warning .notif-icon { background: var(--warning-bg); color: var(--warning); }
.notif-info    .notif-icon { background: #eff6ff;            color: var(--info); }

.notif-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-type-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.notif-success .notif-type-label { color: var(--success); }
.notif-error   .notif-type-label { color: var(--danger); }
.notif-warning .notif-type-label { color: var(--warning); }
.notif-info    .notif-type-label { color: var(--info); }

.notif-message {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-primary);
}

.notif-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    transition: color var(--transition);
}
.notif-close:hover { color: var(--text-primary); }

@keyframes notifSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* Mobile: fixed 360px width spills outside the viewport on small phones
   (notch + edge insets). Anchor to both edges with a small symmetric inset
   instead, so it spans the screen with safe-area padding on iOS. */
@media (max-width: 600px) {
    .notif-container {
        left: 12px;
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom, 12px));
        width: auto;
    }
    .notif {
        padding: 12px 14px;
        border-radius: 12px;
        gap: 10px;
    }
    .notif-message { font-size: 13px; }
    .notif-type-label { font-size: 10.5px; }
}
@keyframes notifSlideUp {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 600px) {
    .notif { animation: notifSlideUp 0.28s cubic-bezier(0.34,1.56,0.64,1); }
}

/* ─── Blazor Error UI ───────────────────────────────────────────────────── */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13px;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    font-size: 16px;
}

/* ─── Public Area ───────────────────────────────────────────────────────── */
.public-shell {
    /* `100vh` on iOS Safari includes the URL bar — so when the bar is showing
       the element is taller than the visible viewport. `100dvh` ("dynamic
       viewport height") matches what's actually visible right now (URL bar
       shown OR collapsed). We keep 100vh as a fallback for older browsers. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: #efefee;
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 32px 24px 16px;
    gap: 16px;
}

.public-header-logo { display: flex; align-items: center; }
.public-header-logo .app-logo { height: 76px; }

/* Desktop-only logo variant inside the authenticated header — hidden by default
   so it doesn't affect mobile layout. The ≥1024px breakpoint reveals it. */
.public-header-logo-desktop { display: none; }

.public-header-end {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.public-header-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.public-header-heading-name {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0;
    color: var(--text-primary, #111);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-header-heading-role {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin: 2px 0 0;
}

.public-header-user { position: relative; flex-shrink: 0; }

.public-user-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: var(--text-primary, #111);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.public-user-btn:hover {
    background: #f3f4f6;
    border-color: rgba(0, 0, 0, 0.14);
}

.public-user-btn svg { width: 22px; height: 22px; }

/* User account dialog (opened from the avatar button) */
.user-info-dialog {
    max-width: 440px;
}

.user-info-body {
    display: flex;
    flex-direction: column;
}

.user-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    min-width: 0;
}

.user-info-row:last-of-type { border-bottom: none; }

.user-info-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-secondary, #6b7280);
}

.user-info-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary, #111);
    word-break: break-word;
}

.user-info-logout {
    margin-top: 24px;
    border: none;
    background: #111827;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
    width: 100%;
}

.user-info-logout:hover { background: #1f2937; }

@media (max-width: 480px) {
    .user-info-dialog { padding: 24px 22px; }
    .user-info-row { padding: 12px 0; }
    .user-info-value { font-size: 14px; }
}

.public-main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 24px 32px;
}

/* Phone-only: force the page to ALWAYS be taller than the visible viewport
   so the background image consistently covers the whole layout and the
   footer logo sits below the fold. The main area becomes at least one
   viewport tall on its own; the footer below adds substantial breathing
   room so reaching the bottom feels intentional rather than abrupt. This
   removes the need for `:has(.scan-launcher)` locks, viewport-fit
   compression, and similar mobile-only hacks — every page just scrolls. */
@media (max-width: 767.98px) {
    .public-main {
        min-height: 100vh;
        min-height: 100dvh;
    }
    .public-footer-badge {
        margin-top: 80px;
    }
}

.public-footer-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 16px 16px 28px;
}

.public-footer-badge .app-logo {
    height: 64px;
}

/* ─── Scan Launcher (Public Home) ───────────────────────────────────────── */
.scan-launcher {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 16px 16px;
    animation: scan-launcher-in 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.scan-launcher-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0;
    color: var(--text-primary, #111);
}

.scan-launcher-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin: 8px 0 36px;
}

.scan-launcher-btn {
    width: 200px;
    height: 200px;
    border: none;
    border-radius: 36px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s cubic-bezier(0.22, 0.8, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.22, 0.8, 0.3, 1);
    position: relative;
}

.scan-launcher-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.25);
    animation: scan-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

.scan-launcher-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.scan-launcher-btn:active { transform: translateY(0) scale(0.98); }

.scan-launcher-btn svg { width: 84px; height: 84px; }

@keyframes scan-launcher-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes scan-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.30); }
    70%  { box-shadow: 0 0 0 24px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ─── QR Camera Overlay ─────────────────────────────────────────────────── */
.qr-overlay {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: qr-overlay-in 0.25s ease-out both;
}

.qr-overlay-frame {
    position: relative;
    width: min(100%, 420px);
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.qr-overlay-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qr-overlay-reticle {
    position: absolute;
    inset: 14%;
    border-radius: 20px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.85);
}

.qr-overlay-reticle::before,
.qr-overlay-reticle::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 3px solid #ffffff;
}

.qr-overlay-reticle::before {
    top: -3px; left: -3px;
    border-right: none; border-bottom: none;
    border-top-left-radius: 8px;
}

.qr-overlay-reticle::after {
    bottom: -3px; right: -3px;
    border-left: none; border-top: none;
    border-bottom-right-radius: 8px;
}

.qr-overlay-caption {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin-top: 24px;
    letter-spacing: 0.2px;
}

.qr-overlay-cancel {
    margin-top: 24px;
    padding: 12px 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.qr-overlay-cancel:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Row that holds the cancel button. */
.qr-overlay-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qr-overlay-actions .qr-overlay-cancel { margin-top: 0; }

/* Zoom toggle — pill-shaped segmented control sitting between the QR frame
   and the bottom action row. Two states (Μέτριο / Κοντινό); the active one
   is filled white, the other is a transparent pill on the dim overlay.
   Hidden when the device doesn't expose a zoom range (desktop webcams). */
.qr-overlay-zoom {
    display: inline-flex;
    gap: 0;
    margin-top: 18px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.qr-overlay-zoom-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 22px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    font-family: inherit;
}
.qr-overlay-zoom-btn:hover:not(.active) {
    color: #ffffff;
}
.qr-overlay-zoom-btn.active {
    background: #ffffff;
    color: #111827;
}

@keyframes qr-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Desktop / tablet QR overlay — instead of going edge-to-edge (which works
   on phones), inset it from the viewport and round the corners so it sits
   as a panel on top of the desktop background image, matching the rest of
   the desktop chrome. Phone breakpoint sits at 768px. */
@media (min-width: 768px) {
    .qr-overlay {
        top: 24px;
        right: 24px;
        bottom: 24px;
        left: 24px;
        border-radius: 28px;
        overflow: hidden;
    }
}

.home-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 32px 0 10px;
}

.scan-success {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #dcfce7;
    color: #15803d;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(22, 163, 74, 0.2);
    font-size: 14px;
    font-weight: 600;
    margin-top: 18px;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.1), 0 4px 12px rgba(22, 163, 74, 0.08);
    animation: scan-success-in 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.scan-success-icon { display: inline-flex; color: #16a34a; }
.scan-success-icon svg { width: 18px; height: 18px; }

@keyframes scan-success-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Scan info card (Options page) ─────────────────────────────────────
   Replaces the old scan-success banner + status strip with a single white
   card showing status / customer / delivery address — three labelled rows.
   Mirrors the home tile aesthetic so the page reads as one coherent design. */
.scan-info-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 18px;
    margin: 10px 0 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: scan-success-in 0.4s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.scan-info-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

.scan-info-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scan-info-value {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
    word-break: break-word;
}

/* Full page loader — shown on Options.razor while the document scan is in
   flight. Centered in the public-main area; sized so the spinner + text feel
   prominent but not overwhelming. */
.page-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    text-align: center;
    min-height: 320px;
    animation: scan-success-in 0.3s ease-out both;
}

.page-loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--text-primary, #111);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.page-loader-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #111);
    margin: 8px 0 0;
    letter-spacing: -0.2px;
}

.page-loader-subtitle {
    font-size: 14px;
    color: var(--text-secondary, #6b7280);
    margin: 0;
    max-width: 340px;
    line-height: 1.5;
}

/* On the phone authenticated layout the bg image is dark behind the loader,
   so flip the colours to white-on-translucent. */
@media (max-width: 767.98px) {
    .public-shell-authed .page-loader-spinner {
        border-color: rgba(255, 255, 255, 0.2);
        border-top-color: #ffffff;
    }
    .public-shell-authed .page-loader-title { color: #ffffff; }
    .public-shell-authed .page-loader-subtitle { color: rgba(255, 255, 255, 0.85); }
}

/* Whole-card loading state — replaces the three rows while the scan +
   AADE status fetch are running. Reuses the global @keyframes spin. */
.scan-info-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
    color: var(--text-secondary, #6b7280);
}

.scan-info-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--text-primary, #111);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.scan-info-loading-text {
    font-size: 13px;
    font-weight: 500;
}

.qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 6px;
}

.qr-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.qr-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.qr-action:active { transform: translateY(0); }

.qr-action svg { width: 16px; height: 16px; }

.qr-action-pdf {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

.qr-action-pdf:hover { background: #1f2937; }

.home-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.home-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 18px 16px;
    border: none;
    border-radius: 18px;
    text-align: left;
    cursor: pointer;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition), box-shadow var(--transition);
}

.home-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1); }
.home-tile:active { transform: translateY(0); }

.home-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: #f1f5f9;
    color: #111827;
}

.home-tile-icon-blue { background: #dbeafe; color: #2563eb; }
.home-tile-icon-green { background: #dcfce7; color: #16a34a; }
.home-tile-icon-red { background: #fee2e2; color: #dc2626; }
.home-tile-icon-amber { background: #fef3c7; color: #d97706; }

.home-tile-icon svg { width: 20px; height: 20px; }

.home-tile-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.home-tile-subtitle {
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7280;
    line-height: 1.3;
}

/* On mobile, the entire Ενέργειες section sits inside a white card and the
   tile row scrolls horizontally so cramped phones don't squish the buttons. */
@media (max-width: 640px) {
    .actions-panel {
        background: #ffffff;
        border-radius: 18px;
        padding: 18px 20px 20px;
        margin-top: 14px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .actions-panel .home-section-title { margin-top: 0; }

    /* Beat the .public-shell-authed white-text override (same specificity
       elsewhere) so the heading stays readable on the white panel. */
    .public-shell-authed .actions-panel .home-section-title {
        color: var(--text-primary, #111);
    }

    /* Two-column grid that fits inside the panel's padding. Replaces the
       earlier horizontal-scroll carousel — tiles now shrink to share row
       width 50/50 instead of overflowing. min-width: 0 lets each grid cell
       shrink below its content's intrinsic width when needed. */
    .actions-panel .home-tile-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .actions-panel .home-tile {
        width: auto;
        min-width: 0;
        padding: 16px 14px;
        background: #f8fafc;
        box-shadow: none;
        border: 1px solid #eef0f3;
    }
    .actions-panel .home-tile-title,
    .actions-panel .home-tile-subtitle {
        /* Long Greek titles like "Επιβεβαίωση παράδοσης" should wrap inside
           the narrow tile rather than push the tile wider than its column. */
        white-space: normal;
        word-break: break-word;
    }
    .actions-panel .home-tile:hover {
        transform: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }
}

/* Αποστολέας / Παραλήπτης tab switcher on the Options page.
   "Segmented control" pattern — two button-shaped tabs sit inside a
   slightly-recessed track. The active one rises out of the track with a
   raised white pill + soft shadow; the inactive one stays flat in the
   track. Depth contrast = obvious which is selected, and the inactive one
   still reads as something you can press. */

.public-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    margin: 12px 0;
    /* Inset shadow on the container reads as a depression in the page —
       sells the "track" metaphor and visually anchors the buttons inside it. */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.public-tab {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    color: #6b7280;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                box-shadow var(--transition), transform var(--transition);
}
.public-tab:not(.active):hover {
    color: #1f2937;
    background: rgba(255, 255, 255, 0.55);
}
.public-tab:not(.active):active {
    /* Tiny press-down feedback on tap — feels physical. */
    transform: translateY(0.5px);
}
.public-tab.active {
    background: #ffffff;
    color: #111827;
    /* Outer shadow = the white pill is raised above the track. The 1px
       border on the inside (via box-shadow inset) keeps the edge crisp on
       light page backgrounds. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10),
                0 2px 8px rgba(0, 0, 0, 0.06),
                inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* Downward-pointing arrow under the active tab. Sits between the segmented
   control and the panel and visually says "this tab's content is here".
   Mirrors the .public-tabs flex layout so the active arrow lines up with
   the active tab's centre, regardless of viewport width. */
.public-tab-arrow-row {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    /* Top margin: small gap from the tabs. Bottom margin: generous gap
       before the panel so the arrow visibly "points at" the panel. */
    margin: 8px 0 16px;
    pointer-events: none;
}
.public-tab-arrow {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    color: #1f2937;
}
.public-tab-arrow svg {
    width: 26px;
    height: 14px;
    opacity: 0;
    /* Smooth swap when the user taps the other tab. */
    transition: opacity 0.18s ease;
}
.public-tab-arrow.active svg {
    opacity: 1;
}

.public-tab-panel {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 18px 22px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
}


@media (max-width: 480px) {
    .public-header { padding: 28px 16px 12px; }
    .public-main { padding: 4px 16px 24px; }
    .public-header-heading-role { font-size: 13px; }
    .public-footer-badge { padding: 12px 16px 22px; }
    .public-footer-badge .app-logo { height: 56px; }
}

/* ─── Authenticated background (all viewports) ─────────────────────────────
   Same bluish photo across mobile and desktop. The image alone here — no
   overlay or text-color overrides — so the desktop layout remains exactly as
   it was. Mobile additions live in the (max-width: 1023.98px) block below. */
.public-shell-authed {
    background: url('../images/desktop_background.png') center/cover no-repeat fixed;
    background-color: #4b6fa5; /* fallback if image fails to load */
}

/* Phone-only (under the tablet/desktop breakpoint of 768px): the photo
   shows directly behind page content with no white panel. Tablets (≥ 768px)
   use the desktop "white hovering panel" treatment below for visual
   consistency. */
@media (max-width: 767.98px) {

    /* Header */
    .public-shell-authed .public-header-heading-name { color: #ffffff; }
    .public-shell-authed .public-header-heading-role { color: rgba(255, 255, 255, 0.85); }

    /* Frosted avatar button */
    .public-shell-authed .public-user-btn {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.45);
        color: #ffffff;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    .public-shell-authed .public-user-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.6);
    }

    /* Page content sitting directly on the photo: default to white text, plus
       explicit overrides for elements that hardcode a dark color. Tiles, pills,
       cards etc. set their own bg + color and stay readable as-is. */
    .public-shell-authed .public-main { color: #ffffff; }
    .public-shell-authed .home-section-title { color: #ffffff; }
    .public-shell-authed .status-strip-label { color: rgba(255, 255, 255, 0.75); }
    .public-shell-authed .page-title { color: #ffffff; }
    .public-shell-authed .page-subtitle { color: rgba(255, 255, 255, 0.85); }
    .public-shell-authed .scan-launcher-title { color: #ffffff; }
    .public-shell-authed .scan-launcher-subtitle { color: rgba(255, 255, 255, 0.85); }

}

/* ─── Tablet + Desktop authenticated layout (≥768px) ───────────────────
   Replaces the phone in-flow layout with a centered hovering content panel,
   a white logo on the left, and white user info on the right. Phone rules
   above (max-width: 767.98px) already cover the bg + white text. */
@media (min-width: 768px) {
    /* Compact vertical padding — the logo PNG already includes its own
       internal whitespace, so the heavy 28/24 padding made the header read as
       too much empty space, especially on shorter laptop screens. */
    .public-shell-authed .public-header { padding: 4px 40px; }

    .public-shell-authed .public-header-logo-desktop { display: flex; }
    .public-shell-authed .public-header-logo-desktop .app-logo { height: 88px; }

    /* End-group hugs content and sits on the right */
    .public-shell-authed .public-header-end {
        flex: 0 1 auto;
        justify-content: flex-end;
    }

    .public-shell-authed .public-header-heading {
        flex: 0 1 auto;
        text-align: right;
    }

    .public-shell-authed .public-header-heading-name {
        color: #ffffff;
        font-size: 17px;
    }

    .public-shell-authed .public-header-heading-role { display: none; }

    /* Avatar stays a light pill but gains a frosted edge on the bluish bg */
    .public-shell-authed .public-user-btn {
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(255, 255, 255, 0.45);
    }

    .public-shell-authed .public-user-btn:hover {
        background: #ffffff;
        border-color: rgba(255, 255, 255, 0.7);
    }

    /* Hovering content panel — always fits within the viewport on desktop.
       Short content: panel hugs its content, vertically centered via margin:auto.
       Long content: panel hits its max-height and content scrolls *inside* the
       panel (overflow-y: auto + min-height: 0 — the latter is required for a
       flex item to shrink below its natural size and reveal the scrollbar). */
    .public-shell-authed .public-main {
        flex: 0 1 auto;
        max-width: 980px;
        width: calc(100% - 64px);
        /* The header is ~96px (88px logo + 4+4 padding); leaving 200px total
           keeps the panel inside the viewport on shorter laptop screens and
           reserves vertical room for a future footer. */
        max-height: calc(100vh - 200px);
        min-height: 0;
        overflow-y: auto;
        /* Small fixed top margin (close to the header) + auto bottom margin
           (absorbs leftover space). Symmetric `margin: auto` was distributing
           ~52px above the panel, which read as too much empty space below
           the header. Bottom slack stays for a possible footer. */
        margin: 16px auto auto;
        padding: 40px 48px;
        background: rgba(255, 255, 255, 0.96);
        border-radius: 28px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
        /* NOTE: do NOT add backdrop-filter / filter / transform here.
           Any of those make this element a containing block for descendants
           with position: fixed — which means .dialog-overlay would be clipped
           to the panel instead of covering the viewport. The 96% opaque
           background already reads as "frosted enough" without the blur. */

        /* Firefox: thin scrollbar with subtle thumb */
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
    }

    /* Webkit (Chrome / Edge / Safari): a slim rounded thumb on a transparent
       track. The track margin keeps the thumb away from the panel's rounded
       corners so the scrollbar never visually clashes with them. */
    .public-shell-authed .public-main::-webkit-scrollbar { width: 8px; }
    .public-shell-authed .public-main::-webkit-scrollbar-track {
        background: transparent;
        margin: 28px 0;
    }
    .public-shell-authed .public-main::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.22);
        border-radius: 8px;
    }
    .public-shell-authed .public-main::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.36);
    }

    /* No bottom badge on desktop — the white logo in the header carries the brand */
    .public-shell-authed .public-footer-badge { display: none; }
}

/* ─── Keyframes ─────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
    /* Mobile login: drop the desktop "two-panel hovering card" model
       entirely. The image half is hidden, and the form half stops trying
       to look like the right side of a split — it becomes a single
       full-width card sitting on top of the same blurry shell background
       the desktop uses (cropped to portrait by background-size: cover). */
    .login-split-shell {
        padding: 16px;
    }
    .login-split {
        flex-direction: column;
        aspect-ratio: auto;
        max-width: none;
        max-height: none;
        width: 100%;
        background: transparent;
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
    }
    .login-split-image { display: none; }
    .login-split-panel {
        /* Reset every desktop-only trick that assumed a side-by-side layout. */
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        margin-left: 0;
        padding: 32px 24px;
        border-radius: 24px;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    }
    .login-split-body { flex: 0 0 auto; align-items: flex-start; padding-top: 8px; }
    .login-split-form { max-width: 100%; }
    .login-split-logo { margin-bottom: 20px; }
    .login-split-logo .app-logo-lg { height: 72px; }
    .login-split-footer { flex-wrap: wrap; justify-content: center; text-align: center; }
}

@media (max-width: 768px) {
    .app-main { padding: 16px; padding-top: calc(var(--nav-height) + 16px); }
    .admin-sidebar { display: none; }
    .admin-main { padding: 16px; border-radius: 0; overflow-y: visible; }
    .admin-shell { padding: 0; gap: 0; height: auto; min-height: 100vh; }
    .form-row { grid-template-columns: 1fr; }
    .setup-card { padding: 24px; }
    .navbar { padding: 0 16px; }
    .home-tile-grid { gap: 12px; }
    .home-tile { min-height: 0; padding: 18px; border-radius: 18px; }
    .home-tile-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }
    .home-tile-icon svg { width: 16px; height: 16px; }
    .home-tile-title { font-size: 16px; }
    .home-tile-subtitle { font-size: 12px; }
}

@media (max-width: 480px) {
    .page-title { font-size: 32px; }
    .no-db-card { padding: 32px 24px; }
    .login-split-panel { padding: 24px 20px; }
    .login-split-title { font-size: 30px; }

    .qr-actions { flex-wrap: nowrap; gap: 8px; }
    .qr-action {
        padding: 8px 14px;
        font-size: 12.5px;
        gap: 6px;
        flex: 0 1 auto;
        min-width: 0;
    }
    .qr-action span { white-space: nowrap; }
    .qr-action svg { width: 14px; height: 14px; }
}

/* ─── Control Panel (roles + permissions matrix) ────────────────────────── */
.control-panel-grid {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.control-panel-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.control-panel-card-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--text-primary, #111);
}

.data-table-compact th,
.data-table-compact td {
    padding: 8px 12px;
    font-size: 13px;
}

.role-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid transparent;
}
.role-pill-master {
    background: #ede9fe;
    color: #6d28d9;
    border-color: #ddd6fe;
}
.role-pill-admin {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}
.role-pill-registered {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}
.role-pill-other {
    background: #fae8ff;
    color: #6b21a8;
    border-color: #e9d5ff;
}

.badge-muted {
    background: #f1f5f9;
    color: #475569;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.permission-group { margin-top: 14px; }
.permission-group-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}

.permission-matrix th.permission-matrix-role {
    text-align: center;
    white-space: nowrap;
}

.permission-matrix-cell {
    text-align: center;
    vertical-align: middle;
}
.permission-matrix-cell svg {
    width: 16px;
    height: 16px;
}
.permission-matrix-cell.yes { color: #15803d; }
.permission-matrix-cell.no { color: #cbd5e1; }

.permission-cell-name {
    font-weight: 600;
    color: var(--text-primary, #111);
}
.permission-cell-key {
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 11.5px;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}
.permission-cell-desc {
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    margin-top: 4px;
}

/* No-permission page — shown when an authenticated user lacks the route's
   required claim, or after a server-side 403 redirects to /forbidden. */
.no-permission {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.no-permission-card {
    max-width: 480px;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
}
.no-permission-icon {
    width: 56px;
    height: 56px;
    color: #dc2626;
    margin: 0 auto 16px;
    display: block;
}
.no-permission-title {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px;
}
.no-permission-text {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 24px;
}
.no-permission-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* About page — version / build info + rendered CHANGELOG. */
.about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.about-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.about-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 4px;
}
.about-stat-value {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}
.about-changelog {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px 28px;
}
.about-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px;
}
.about-section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.about-section-row .about-section-title {
    margin: 0;
}
.about-changelog-dialog {
    max-height: 70vh;
    overflow-y: auto;
}
.about-quote {
    margin: 12px 0;
    padding: 10px 14px;
    background: #f9fafb;
    border-left: 3px solid #d1d5db;
    color: #4b5563;
    font-size: 13.5px;
    line-height: 1.55;
}
.about-h2 {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 24px 0 12px;
}
.about-h3 {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin: 20px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e7eb;
}
.about-h4 {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 14px 0 6px;
    text-transform: none;
}
.about-p {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
    margin: 0 0 10px;
}
.about-ul {
    margin: 0 0 12px;
    padding-left: 20px;
    color: #374151;
    font-size: 14px;
    line-height: 1.6;
}
.about-ul li {
    margin-bottom: 4px;
}
.about-changelog hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 18px 0;
}
.about-changelog code {
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #111827;
}

/* Administrators page — list of Master Admin / Admin users. Master rows get
   a subtle gold tint and a shield icon next to the name; Admin rows are
   plain. Edit action is replaced by a lock affordance on Master rows. */
.admin-row-master > td {
    background: #f5f3ff;
}
.admin-row-master > td:first-child {
    border-left: 3px solid #8b5cf6;
}
.admin-cell-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.admin-cell-shield {
    width: 14px;
    height: 14px;
    color: #6d28d9;
    flex-shrink: 0;
}
.admin-action-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #9ca3af;
    cursor: not-allowed;
}
.admin-action-locked svg {
    width: 16px;
    height: 16px;
}

/* Password-actions row — icon-only buttons under the two password inputs.
   Replaces the older "inline buttons stuffed alongside the input" pattern
   which crushed the input width on narrow dialogs. Applies wherever a
   user is created or edited (Businesses → company users, Administrators). */
.password-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 12px;
}
.password-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.password-action-btn:hover:not(:disabled) {
    background: #e5e7eb;
    color: #111827;
}
.password-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.password-action-btn svg {
    width: 16px;
    height: 16px;
}
.password-action-btn.is-active {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}