@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════════════════
   CSS Variables — Light (default)
═══════════════════════════════════════════════════════════════════════════════*/
:root {
    --sidebar-w:        250px;
    --sidebar-mini-w:   64px;
    --sidebar-bg:       #1a1d2e;
    --sidebar-text:     #a8b0c8;
    --sidebar-hover:    rgba(255,255,255,.06);
    --sidebar-active:   #4f46e5;
    --sidebar-divider:  rgba(255,255,255,.08);
    --topbar-h:         60px;
    --accent:           #4f46e5;
    --accent-light:     #6366f1;
    --base-font:        15px;
    --transition:       .22s ease;

    /* Light theme tokens */
    --body-bg:          #f4f6fb;
    --card-bg:          #ffffff;
    --card-border:      #e2e8f0;
    --text-primary:     #2d3748;
    --text-muted:       #6c757d;
    --table-header-bg:  #f8f9fa;
    --input-bg:         #ffffff;
    --input-border:     #dee2e6;
    --topbar-bg:        #ffffff;
    --topbar-border:    #e2e8f0;
    --divider:          #e9ecef;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Dark Theme — Bootstrap 5.3 native variables + our custom tokens
   Bootstrap handles components automatically via data-bs-theme="dark".
   We only need to override our CUSTOM components here.
═══════════════════════════════════════════════════════════════════════════════*/
[data-theme="dark"] {
    /* ── Our custom layout tokens ─────────────────────────────────── */
    --body-bg:         #0f1117;
    --card-bg:         #1c1f2e;
    --card-border:     #2d3148;
    --text-primary:    #e2e8f0;
    --text-muted:      #8892a4;
    --table-header-bg: #252839;
    --input-bg:        #252839;
    --input-border:    #3a3f5c;
    --topbar-bg:       #16192a;
    --topbar-border:   #2d3148;
    --divider:         #2d3148;
    --sidebar-bg:      #0d0f1c;
    --sidebar-text:    #8892a4;
    --sidebar-divider: rgba(255,255,255,.05);

    /* ── Bootstrap 5.3 CSS variables override ─────────────────────── */
    /* These make ALL Bootstrap components (table, form, modal etc.) work correctly */
    --bs-body-color:              #e2e8f0;
    --bs-body-bg:                 #0f1117;
    --bs-secondary-color:         #8892a4;
    --bs-secondary-bg:            #1c1f2e;
    --bs-tertiary-color:          #6c7a94;
    --bs-tertiary-bg:             #252839;
    --bs-emphasis-color:          #f8f9fa;
    --bs-border-color:            #2d3148;
    --bs-border-color-translucent: rgba(255,255,255,.1);
    --bs-heading-color:           #e2e8f0;
    --bs-link-color:              #818cf8;
    --bs-link-hover-color:        #a5b4fc;
    --bs-code-color:              #a5b4fc;
    --bs-highlight-bg:            #3d2d00;
    /* Table */
    --bs-table-color:             #e2e8f0;
    --bs-table-bg:                transparent;
    --bs-table-border-color:      #2d3148;
    --bs-table-striped-bg:        rgba(255,255,255,.04);
    --bs-table-hover-bg:          rgba(255,255,255,.06);
    --bs-table-active-bg:         rgba(255,255,255,.1);
    /* Form */
    --bs-form-control-bg:         #252839;
    --bs-form-select-bg:          #252839;
    /* Card */
    --bs-card-bg:                 #1c1f2e;
    --bs-card-border-color:       #2d3148;
    --bs-card-cap-bg:             #252839;
    /* Modal */
    --bs-modal-bg:                #1c1f2e;
    --bs-modal-border-color:      #2d3148;
    --bs-modal-header-border-color: #2d3148;
    --bs-modal-footer-border-color: #2d3148;
    /* Dropdown */
    --bs-dropdown-bg:             #1c1f2e;
    --bs-dropdown-border-color:   #2d3148;
    --bs-dropdown-link-color:     #e2e8f0;
    --bs-dropdown-link-hover-bg:  #252839;
    /* Nav/Tabs */
    --bs-nav-tabs-border-color:   #2d3148;
    --bs-nav-tabs-link-active-bg: #1c1f2e;
    --bs-nav-tabs-link-active-border-color: #2d3148 #2d3148 #1c1f2e;
    /* Input group */
    --bs-input-group-addon-bg:    #252839;
    --bs-input-group-addon-border-color: #3a3f5c;
    /* Pagination */
    --bs-pagination-bg:           #1c1f2e;
    --bs-pagination-border-color: #2d3148;
    --bs-pagination-color:        #e2e8f0;
    --bs-pagination-hover-bg:     #252839;
    --bs-pagination-hover-color:  #e2e8f0;
    --bs-pagination-disabled-bg:  #1c1f2e;
    --bs-pagination-disabled-color: #6c7a94;
    /* Tooltip/Popover */
    --bs-tooltip-bg:              #252839;
    --bs-tooltip-color:           #e2e8f0;

    color-scheme: dark;
}

/* ── Custom component dark overrides (not covered by Bootstrap) ──────────── */
[data-theme="dark"] body             { background: var(--body-bg); color: var(--text-primary); }
[data-theme="dark"] .table-dark th  { background: #0d0f1c !important; }
[data-theme="dark"] code            { background: #252839; color: #a5b4fc; border-radius: 4px; padding: 1px 4px; }

/* Theme toggle button visibility */
[data-theme="dark"]  .icon-light { display: none; }
[data-theme="light"] .icon-dark  { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════
   Font Size
═══════════════════════════════════════════════════════════════════════════════*/
[data-font="small"]  body { font-size: 13px; }
[data-font="normal"] body { font-size: 15px; }
[data-font="large"]  body { font-size: 17px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Density
═══════════════════════════════════════════════════════════════════════════════*/
[data-density="compact"]     .page-body { padding: 12px !important; }
[data-density="compact"]     .table td,
[data-density="compact"]     .table th  { padding: .25rem .5rem !important; }
[data-density="comfortable"] .page-body { padding: 28px !important; }
[data-density="comfortable"] .table td,
[data-density="comfortable"] .table th  { padding: .75rem 1rem !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   Base
═══════════════════════════════════════════════════════════════════════════════*/
* { box-sizing: border-box; }

body {
    font-family: 'Sarabun', sans-serif;
    background: var(--body-bg);
    color: var(--text-primary);
    min-height: 100vh;
    font-size: var(--base-font, 15px);
    transition: background var(--transition), color var(--transition);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Sidebar
═══════════════════════════════════════════════════════════════════════════════*/
.sidebar {
    width: var(--sidebar-w);
    min-height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    transition: width var(--transition);
    z-index: 200;
}

.sidebar-brand {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid var(--sidebar-divider);
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    overflow: hidden;
}
.sidebar-brand .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-divider { border-color: var(--sidebar-divider) !important; margin: 4px 8px; }

.sidebar .nav-link {
    color: var(--sidebar-text);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    transition: all var(--transition);
    margin-bottom: 2px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
.sidebar .nav-link i { flex-shrink: 0; }
.sidebar .nav-link:hover  { background: var(--sidebar-hover); color: #fff; }
.sidebar .nav-link.active { background: var(--sidebar-active); color: #fff; }
.sidebar .nav-label       { transition: opacity var(--transition), width var(--transition); overflow: hidden; }

.sidebar-footer {
    border-top: 1px solid var(--sidebar-divider);
    flex-shrink: 0;
}

.user-info {
    display: flex;
    align-items: center;
    color: #fff;
    gap: 10px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
}
.user-info .bi { font-size: 1.6rem; color: var(--sidebar-text); flex-shrink: 0; }

.theme-toggle-btn {
    background: var(--sidebar-hover);
    color: var(--sidebar-text);
    border: 1px solid var(--sidebar-divider);
    font-size: 13px;
    transition: all var(--transition);
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.theme-toggle-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Mini sidebar ────────────────────────────────────────────────────────────*/
.sidebar-mini {
    width: var(--sidebar-mini-w) !important;
}
.sidebar-mini .nav-label,
.sidebar-mini .sidebar-brand span,
.sidebar-mini .user-info > div { opacity: 0; width: 0; }
.sidebar-mini .sidebar-brand { justify-content: center; }
.sidebar-mini .nav-link { justify-content: center; padding: 10px 0; }
.sidebar-mini .user-info { justify-content: center; }
.sidebar-mini .theme-toggle-btn .nav-label { display: none; }

/* ── Mobile sidebar ──────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        transition: transform var(--transition);
        z-index: 1050;
        box-shadow: 4px 0 20px rgba(0,0,0,.3);
    }
    .sidebar.sidebar-mobile-open { transform: translateX(0); }
    .sidebar-hidden { transform: translateX(-100%); }
    .main-content { width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Main Content
═══════════════════════════════════════════════════════════════════════════════*/
.main-content { min-width: 0; overflow-x: auto; }

.topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background var(--transition);
}

.page-body { min-height: calc(100vh - var(--topbar-h) - 20px); }

/* ══════════════════════════════════════════════════════════════════════════════
   Cards
═══════════════════════════════════════════════════════════════════════════════*/
.stat-card, .table-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    transition: background var(--transition), border-color var(--transition), box-shadow .2s;
}

.stat-card {
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.stat-card .icon { width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem; }
.stat-card .value { font-size:2rem;font-weight:700;line-height:1; }
.stat-card .label { font-size:13px;color:var(--text-muted);margin-top:4px; }

.table-card {
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden;
}
.table-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--card-bg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Tables
═══════════════════════════════════════════════════════════════════════════════*/
.table { color: var(--text-primary); }
.table th { font-weight:600;font-size:13px;white-space:nowrap;color:var(--text-primary); }
.table td { font-size:14px;vertical-align:middle; }
.table-dark th { background: #1a1d2e !important; color: #f1f5f9 !important; }
[data-theme="dark"] .table-dark th { background: #0d0f1c !important; }

.report-table th { background:#1a1d2e;color:#fff;font-size:12px;text-align:center; }
[data-theme="dark"] .report-table th { background:#0d0f1c; }
.report-table td { font-size:13px;text-align:center; }
.report-table td:nth-child(2), .report-table td:nth-child(3) { text-align:left; }

.badge-late   { background:#fff3cd;color:#664d03; }
.badge-absent { background:#f8d7da;color:#842029; }
.badge-leave  { background:#cff4fc;color:#055160; }
[data-theme="dark"] .badge-late   { background:#3d2d00;color:#fcd34d; }
[data-theme="dark"] .badge-absent { background:#3d0f0f;color:#fca5a5; }
[data-theme="dark"] .badge-leave  { background:#0c2d3d;color:#7dd3fc; }

/* ══════════════════════════════════════════════════════════════════════════════
   Login
═══════════════════════════════════════════════════════════════════════════════*/
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1d2e 0%, #2d3561 100%);
}
.login-card {
    background: #fff;
    border-radius: 20px;
    padding: 48px 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
[data-theme="dark"] .login-card { background: #1c1f2e; color: #e2e8f0; }
.login-logo { font-size:3rem;color:var(--accent);margin-bottom:8px; }
.login-page-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 8px 16px;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.55);
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(4px);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Status colors
═══════════════════════════════════════════════════════════════════════════════*/
.status-work    { color:#198754; }
.status-leave   { color:#0d6efd; }
.status-holiday { color:#6f42c1; }
.status-absent  { color:#dc3545; }
.status-weekend { color:var(--text-muted); }

/* ══════════════════════════════════════════════════════════════════════════════
   Settings page
═══════════════════════════════════════════════════════════════════════════════*/
.theme-option { transition: border-color .2s; }
.color-dot    { transition: border-color .2s, transform .2s; }
.color-dot:hover { transform: scale(1.15); }

/* ══════════════════════════════════════════════════════════════════════════════
   Progress
═══════════════════════════════════════════════════════════════════════════════*/
.progress { height:6px; background: var(--divider); }

/* ══════════════════════════════════════════════════════════════════════════════
   Print
═══════════════════════════════════════════════════════════════════════════════*/
@media print {
    .sidebar, .topbar, .no-print { display: none !important; }
    .main-content { margin:0 !important; }
    .page-body    { padding:0 !important; }
    .table-card   { box-shadow:none !important; border:none !important; }
    body { font-size:11px; color:#000 !important; background:#fff !important; }
    .report-table th { background:#343a40 !important; color:#fff !important;
                       -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Misc utilities
═══════════════════════════════════════════════════════════════════════════════*/
.cursor-pointer { cursor:pointer; }
.progress { height:6px; }

/* ── DataTables dark mode ─────────────────────────────────────────────────── */
/* DataTables doesn't use Bootstrap's CSS vars, so we patch it manually */
[data-theme="dark"] .dataTables_wrapper { color: var(--text-primary); }
[data-theme="dark"] .dataTables_filter label,
[data-theme="dark"] .dataTables_length label,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_paginate { color: var(--text-primary) !important; }
[data-theme="dark"] .dataTables_filter input,
[data-theme="dark"] .dataTables_length select {
    color: var(--text-primary) !important;
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}
/* Pagination — Bootstrap's --bs-pagination-* vars handle this, but force for DataTables */
[data-theme="dark"] .dataTables_paginate .page-link {
    background: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}
[data-theme="dark"] .dataTables_paginate .page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
[data-theme="dark"] .dataTables_paginate .page-item.disabled .page-link {
    background: var(--card-bg);
    color: var(--text-muted);
}

/* ── Badge & report fixes ─────────────────────────────────────────────────── */
/* Bootstrap dark mode makes .bg-light dark automatically, but report badges need fine-tuning */
[data-theme="dark"] .badge-late   { background: #3d2d00; color: #fcd34d; }
[data-theme="dark"] .badge-absent { background: #3d0f0f; color: #fca5a5; }
[data-theme="dark"] .badge-leave  { background: #0c2d3d; color: #7dd3fc; }

/* ── Custom card/topbar ───────────────────────────────────────────────────── */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .table-card,
[data-theme="dark"] .table-card-header { background: var(--card-bg); border-color: var(--card-border); }
[data-theme="dark"] .topbar           { background: var(--topbar-bg); border-color: var(--topbar-border); }
[data-theme="dark"] .page-body        { background: var(--body-bg); }

/* ── TABLE: Force readable text in dark mode ──────────────────────────────── */
/*
 * ROOT CAUSE: Bootstrap 5.3 sets table-light → --bs-table-color: #212529 (black)
 * and table-dark → --bs-table-color: #fff, but our dark card background (#1c1f2e)
 * makes black text invisible. We override ALL table text universally.
 */
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--text-primary) !important;
    border-color: var(--card-border) !important;
}

/* thead variants: give them a distinct but readable background */
[data-theme="dark"] thead.table-light th,
[data-theme="dark"] thead.table-light td {
    background-color: var(--table-header-bg) !important;  /* #252839 */
    color: #e2e8f0 !important;
}

[data-theme="dark"] thead.table-dark th,
[data-theme="dark"] thead.table-dark td {
    background-color: #1a1d2e !important;
    color: #f1f5f9 !important;
}

/* Keep table-dark class on regular rows readable */
[data-theme="dark"] .table-dark td,
[data-theme="dark"] .table-dark th {
    background-color: #1a1d2e !important;
    color: #f1f5f9 !important;
    border-color: #0d0f1c !important;
}

/* Hover row — subtle highlight, text must stay light */
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,.05) !important;
    color: var(--text-primary) !important;
}

/* Striped rows */
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255,.03) !important;
    color: var(--text-primary) !important;
}

/* Report table special header (hardcoded dark in light mode) */
[data-theme="dark"] .report-table th {
    background-color: #1a1d2e !important;
    color: #f1f5f9 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Notification Bell
═══════════════════════════════════════════════════════════════════════════════*/
.notif-bell-btn {
    background: none;
    border: none;
    color: var(--text-primary);
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: background .15s, color .15s;
    line-height: 1;
}
.notif-bell-btn:hover,
.notif-bell-btn:focus {
    background: var(--sidebar-hover);
    color: var(--accent);
    box-shadow: none;
}
.notif-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    display: block;
    animation: notif-pulse 2.5s infinite;
}
@keyframes notif-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
    50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.notif-dropdown {
    min-width: 360px;
    max-width: 420px;
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg) !important;
}
.notif-item {
    border-bottom: 1px solid var(--divider);
    cursor: default;
    transition: background .1s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover      { background: var(--sidebar-hover); }
.notif-item.notif-unread {
    background: rgba(79,70,229,.06);
    border-left: 3px solid var(--accent);
}
.notif-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    color: #fff;
    opacity: .9;
}
[data-theme="dark"] .notif-dropdown {
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Employee Avatars
═══════════════════════════════════════════════════════════════════════════════*/
.emp-avatar-xs {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.emp-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.emp-avatar-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--card-border);
    flex-shrink: 0;
}
.emp-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--table-header-bg);
    color: var(--text-muted);
}
.emp-avatar-photo.emp-avatar-placeholder {
    background: var(--table-header-bg);
    border: 2px dashed var(--card-border);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Fix table contextual row colors in dark mode
   In dark mode our override forces light text (--text-primary) but Bootstrap's
   table-danger/warning still gives a LIGHT pink/yellow background from light-mode
   CSS variables when data-bs-theme isn't synced. We force dark backgrounds here.
═══════════════════════════════════════════════════════════════════════════════*/
[data-theme="dark"] tr.table-danger > td,
[data-theme="dark"] tr.table-danger > th {
    background-color: rgba(220, 53, 69, 0.22) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] tr.table-warning > td,
[data-theme="dark"] tr.table-warning > th {
    background-color: rgba(255, 193, 7, 0.13) !important;
    color: #fde68a !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Announcement Banner
═══════════════════════════════════════════════════════════════════════════════*/
.ann-banner {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Footer Bar
═══════════════════════════════════════════════════════════════════════════════*/
.app-footer {
    background: transparent;
    border-color: var(--divider) !important;
    font-size: 12px;
}
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }

/* ══════════════════════════════════════════════════════════════════════════════
   PWA & Cross-Device Enhancements
   ─ Safe area insets for iPhone notch / Dynamic Island
   ─ Standalone mode (installed PWA)
   ─ Touch UX improvements
   ─ iOS input zoom prevention
═══════════════════════════════════════════════════════════════════════════════*/

/* Safe area: sidebar & topbar respect notch/home indicator */
.sidebar      { padding-bottom: env(safe-area-inset-bottom, 0px); }
.topbar       { padding-left:  max(0px, env(safe-area-inset-left));
                padding-right: max(0px, env(safe-area-inset-right)); }
.main-content { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

/* When running as installed PWA */
@media (display-mode: standalone), (display-mode: fullscreen) {
    .topbar {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    }
    .sidebar { padding-top: env(safe-area-inset-top, 0px); }
    .pwa-hide { display: none !important; }
}

/* ── iOS: prevent auto-zoom on input focus (triggers when font-size < 16px) ─ */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], input[type="time"],
    input[type="search"], input[type="tel"], select, textarea {
        font-size: max(16px, var(--base-font)) !important;
    }
}

/* ── Touch UX: minimum 44×44px tap targets (WCAG 2.5.5) ─────────────────── */
@media (pointer: coarse) {
    .btn-sm        { min-height: 40px; padding-top: .4rem; padding-bottom: .4rem; }
    .nav-link,
    .dropdown-item { min-height: 44px; display: flex; align-items: center; }
    .form-check-input { width: 1.1em; height: 1.1em; }
    .btn.py-0 { min-height: 34px; }
}

/* ── Tables: smooth horizontal scroll on touch ───────────────────────────── */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ── Bulk action bar: respect iPhone home indicator ──────────────────────── */
[id^="bulkBar"] {
    bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
}

/* ── Small screen tweaks (< 576px) ──────────────────────────────────────── */
@media (max-width: 576px) {
    .table-card-header { flex-wrap: wrap; gap: .5rem; }
    .table-card-header .d-flex { flex-wrap: wrap; }
    .modal-dialog { margin: .5rem; }
    .topbar-title {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Offline banner (shown by JS when navigator.onLine = false) ──────────── */
.offline-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #ef4444;
    color: #fff;
    text-align: center;
    font-size: .82rem;
    padding: .35rem 1rem;
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform .3s ease;
    padding-top: max(.35rem, env(safe-area-inset-top));
}
.offline-banner.show { transform: translateY(0); }

html { scroll-behavior: smooth; }
body { overscroll-behavior-y: contain; }