:root {
    --bg: #f4f6f8;
    --card: #ffffff;
    --border: #d9dee3;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --text: #1f2937;
    --muted: #6b7280;
    --running: #16a34a;
    --stopped: #dc2626;
    --unknown: #9ca3af;
}

* { box-sizing: border-box; }

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

/* App shell: fixed-width left nav + fluid content area. */
.layout { display: flex; min-height: 100vh; }
.content { flex: 1; min-width: 0; }

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #111827;
    color: #cbd5e1;
    padding: 20px 12px;
    border-right: 1px solid #0b1220;
}
.sidebar-brand {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 6px 12px 18px;
    letter-spacing: .01em;
    text-align: center;
}
.sidebar-brand .sidebar-logo-img { margin: 2px auto 10px; }
.sidebar-brand .sidebar-sub {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #93c5fd;
    margin-top: 4px;
    letter-spacing: .02em;
}
.sidebar-brand .sidebar-ver {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 2px;
    letter-spacing: .04em;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group-title {
    margin: 8px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
}
.nav-link {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
}
.nav-link:hover { background: #1f2937; color: #fff; }
.nav-link.active { background: var(--primary); color: #fff; font-weight: 600; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 20px; margin: 0; }

/* Right-hand cluster of actions in the top bar. */
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.env-new-form { display: flex; align-items: center; gap: 6px; }
.env-new-form input { width: 150px; }

/* Inline environment/provider dropdown in the inventory table. */
.env-form { margin: 0; }
.env-select { padding: 4px 6px; font-size: 13px; min-width: 110px; }

/* Inline free-text edit cells in the inventory table. */
.field-form { margin: 0; }
.cell-input { padding: 4px 6px; font-size: 13px; width: 110px; }
.cell-wide { width: 200px; }
.cell-narrow { width: 64px; }
.import-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.import-label { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

/* "Add new environment…" toggle on the server form. */
.add-new-env { display: block; margin-top: 6px; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; font-size: 13px; }
.inline-check input { width: auto; margin: 0; }
#newEnvironment { margin-top: 6px; }

.flash {
    margin: 12px 24px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    transition: opacity .45s ease, transform .45s ease;
}
.flash-ok  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.flash-err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
/* Auto-dismiss fade-out (JS adds .flash-hide after a few seconds). */
.flash-hide { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* overflow-x:auto lets wide tables scroll sideways. We pin overflow-y to
   visible-equivalent (hidden, since content always fits) so the wrapper does
   NOT become a vertical scroll container — otherwise a browser/touchpad can
   trap the page's up/down scroll whenever the pointer is over the table
   (page scrolls fine over the sidebar but stalls over the table). */
.table-wrap { padding: 16px 24px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    font-size: 14px;
}
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: var(--primary); font-weight: 600; color: #ffffff; text-transform: uppercase; font-size: 12px; letter-spacing: .03em; }
/* Zebra striping: alternating white / light-blue rows. Set on the row so cells
   with their own colour (disk/CPU/status badges) still win over the stripe. */
tbody tr:nth-child(odd)  { background: #ffffff; }
tbody tr:nth-child(even) { background: #eff6ff; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #dbeafe; }
td.empty { text-align: center; color: var(--muted); padding: 32px; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.badge-running { background: var(--running); }
.badge-stopped { background: var(--stopped); }
.badge-unknown { background: var(--unknown); }
.badge-available { background: #2563eb; }
.badge-repair { background: #d97706; }

/* Add-asset form on the Assets dashboard */
/* Dashboard */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; padding: 16px 24px; }
.kpi-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff;
            border: 1px solid #e5e7eb; border-radius: 12px; text-decoration: none; color: inherit;
            transition: box-shadow .15s, transform .15s; }
.kpi-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.07); transform: translateY(-1px); }
.kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.kpi-number { font-size: 34px; font-weight: 700; line-height: 1.1; }
.kpi-sub { font-size: 12px; color: var(--muted); }
.kpi-alert { border-color: #f3c2c2; background: #fef6f6; }
.kpi-alert .kpi-number { color: var(--danger); }

.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; padding: 0 24px 16px; }
.dash-card { margin: 0; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; }

.stat-list { list-style: none; margin: 10px 0 0; padding: 0; }
.stat-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.stat-list li b { margin-left: auto; font-size: 15px; }
.stat-sub { margin-top: 12px; font-size: 13px; color: #374151; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-running { background: var(--running); }
.dot-stopped { background: var(--stopped); }
.dot-unknown { background: var(--unknown); }
.dot-available { background: #2563eb; }
.dot-repair { background: #d97706; }

.mini-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.mini-table th { text-align: left; padding: 6px 8px; }
.mini-table td { padding: 6px 8px; border-top: 1px solid #f0f0f0; }
.mini-table th.sno-col, .mini-table td.sno-col { width: 48px; text-align: center; white-space: nowrap; }
.mini-table td.sno-col { color: var(--muted); }
/* Serial-number column on the inventory list tables. */
/* S.No: keep the header text white like every other column header (only the
   data cells get the muted grey), so "S.No" matches the rest of the header row. */
th.sno-col, td.sno-col { width: 52px; text-align: center; white-space: nowrap; }
td.sno-col { color: var(--muted); }
/* Live "showing X of Y records" count above filtered/searchable tables. */
.table-count { font-size: 12px; color: var(--muted); font-weight: 500; }

/* ===== Pagination (table-tools.js): "Show N entries" + page navigation ===== */
.table-topbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; padding: 8px 24px 4px;
}
.table-pagesize { font-size: 12px; color: var(--muted); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.table-pagesize select {
    padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--card); color: var(--text); font-size: 12px; cursor: pointer;
}
.table-pager {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    padding: 10px 24px 16px; justify-content: flex-end;
}
.table-pager .page-btn { min-width: 34px; padding: 4px 8px; }
.table-pager .page-btn.page-active {
    background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600;
}
.table-pager .page-btn:disabled { opacity: .45; cursor: default; }
.table-pager .page-gap { padding: 0 4px; color: var(--muted); }

/* Bottom bar under the table: "Show N entries" (left) + page navigation (right). */
.table-bottombar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; padding: 10px 24px 16px;
}
.table-bottombar .table-pager { padding: 0; margin: 0; }
.table-bottombar .table-pagesize { margin: 0; }

/* Client-side table search box */
.table-search { padding: 7px 11px; font-size: 13px; border: 1px solid #d1d5db; border-radius: 8px; min-width: 240px; }
.table-search:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.table-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 24px 0; }

/* Action buttons (Add …, Terminal view, etc.) placed above the search box. */
.table-actions-bar { display: flex; align-items: center; gap: 8px; justify-content: flex-start;
                     flex-wrap: wrap; margin: 12px 24px 0; }
/* Compact sizing so the moved controls read as a light toolbar, not big buttons. */
.table-actions-bar .btn { padding: 4px 10px; font-size: 12px; }
.table-actions-bar .term-view-ctl { font-size: 12px; }
.table-actions-bar .term-view-ctl select { padding: 4px 7px; font-size: 12px; }
@media (max-width: 768px) {
    .table-actions-bar { margin-left: 12px; margin-right: 12px; }
}

/* Search bar placed just above the table. Aligned with the table's left padding
   (24px) so it lines up with S.No, with a modest gap below. */
.table-search-bar { margin: 8px 24px; }
/* When an Import/Export (.io-menu) row precedes it, lift the search box up onto
   that same row (search on the left, Import/Export on the right) instead of
   stacking on a second line — this removes the extra vertical gap above tables.
   fit-content keeps the bar only as wide as the input so it never overlays the
   right-aligned Import/Export button. */
/* position:relative + z-index lifts the search box ABOVE the Import/Export bar
   (.io-menu is position:relative and would otherwise paint over it, blocking
   clicks/typing). fit-content keeps it narrow so it never covers the button. */
.io-menu ~ .table-search-bar { margin-top: -34px; margin-bottom: 8px; width: fit-content;
                               position: relative; z-index: 2; }
/* When a status-filter banner (dashboard ?status= deep-link) sits between the
   Import/Export row and the search box, cancel the -34px lift — otherwise the
   search box rides UP over the banner and the two overlap. Keep the search box on
   its own line directly above the table instead. */
.status-filter-banner ~ .table-search-bar { margin-top: 8px; width: fit-content; }
@media (max-width: 768px) {
    .io-menu ~ .table-search-bar { margin-top: 8px; margin-left: 12px; margin-right: 12px; width: auto; }
}

.card-title { margin: 0 0 12px; font-size: 15px; }
.asset-add-form { margin: 16px 24px; }
.asset-add-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.asset-add-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.asset-add-grid input, .asset-add-grid select { padding: 6px 8px; }

.muted { color: var(--muted); font-size: 12px; }

.actions { display: flex; gap: 6px; align-items: center; }
.inline { display: inline; margin: 0; }

.btn {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
}
.btn:hover { background: #f3f4f6; }
.btn-small { padding: 4px 9px; font-size: 12px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-danger { color: var(--danger); border-color: #f3c2c2; }
.btn-danger:hover { background: #fef2f2; }
.btn-ssh { color: var(--primary); border-color: #bcd0f7; }
.btn-ssh:hover { background: #eff4fe; }

.ssh-auth-panel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ssh-result { font-size: 13px; }
.ssh-result.ok  { color: #065f46; font-weight: 600; }
.ssh-result.err { color: #991b1b; font-weight: 600; }

.checkbox { flex-direction: row; align-items: center; font-weight: 400; }
.checkbox span { display: flex; align-items: center; gap: 8px; }
.checkbox input { width: auto; }

.card {
    background: var(--card);
    margin: 24px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 8px;
    max-width: 900px;
}
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
label { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; gap: 6px; }
label.wide { grid-column: 1 / -1; }
input, select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
}
input:focus, select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.field-err { color: var(--danger); font-weight: 400; font-size: 12px; }

.form-actions { margin-top: 20px; display: flex; gap: 10px; }

footer { padding: 8px 24px 32px; }
a { color: var(--primary); }

/* ============================================================
   Mobile / responsive
   ============================================================ */
/* Wrapper is transparent to layout on desktop; hamburger/backdrop hidden. */
.sidebar-shell { display: contents; }
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

/* Let wide tables scroll smoothly on touch devices. */
.table-wrap { -webkit-overflow-scrolling: touch; }

@media (max-width: 860px) {
    /* Off-canvas sidebar toggled by the hamburger. */
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        position: fixed; top: 10px; left: 10px; z-index: 1100;
        width: 42px; height: 42px; border: 0; border-radius: 8px;
        background: #111827; color: #fff; font-size: 20px; cursor: pointer;
    }
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100%; width: 250px;
        z-index: 1090; transform: translateX(-100%); transition: transform .2s ease;
        overflow-y: auto;
    }
    body.nav-open .sidebar { transform: translateX(0); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
    body.nav-open .nav-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1080; background: rgba(0,0,0,.45);
    }

    .content { width: 100%; }

    /* Topbar stacks; leave room for the fixed hamburger. */
    .topbar { flex-wrap: wrap; gap: 8px; padding: 12px 14px 12px 62px; }
    .topbar h1 { font-size: 17px; }
    .topbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
    .table-search { min-width: 0; flex: 1 1 160px; }
    .env-new-form, .env-new-form input { width: auto; }

    /* Single-column forms and dashboards. */
    .grid { grid-template-columns: 1fr; }
    .kpi-row { grid-template-columns: 1fr 1fr; padding: 12px; gap: 12px; }
    .dash-cards { grid-template-columns: 1fr; padding: 0 12px 12px; }
    .kpi-number { font-size: 28px; }

    .card, .flash, .asset-add-form, .table-toolbar { margin-left: 12px; margin-right: 12px; }
    .table-wrap { padding: 12px; }
    .asset-add-grid { flex-direction: column; align-items: stretch; }
    .asset-add-grid label, .asset-add-grid input, .asset-add-grid select,
    .asset-add-grid button { width: 100%; }
    .import-form { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    .kpi-row { grid-template-columns: 1fr; }
    .topbar h1 { font-size: 16px; }
}

/* ============================================================
   Auth: login page + sidebar user footer
   ============================================================ */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
    background: radial-gradient(1100px 550px at 15% -10%, #1e40af 0%, rgba(30,64,175,0) 55%),
                radial-gradient(900px 500px at 110% 110%, #0ea5e9 0%, rgba(14,165,233,0) 50%),
                linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #334155 100%);
}
.login-card {
    width: 100%; max-width: 380px; background: #fff; border-radius: 18px;
    padding: 36px 32px 26px; box-shadow: 0 28px 70px rgba(0,0,0,.45);
    display: flex; flex-direction: column; gap: 13px;
    border-top: 4px solid var(--primary);
}
.login-logo {
    align-self: center; width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800; letter-spacing: .5px; color: #fff;
    background: linear-gradient(135deg, #3b82f6, #1e3a8a);
    box-shadow: 0 8px 22px rgba(37,99,235,.45); margin-bottom: 4px;
}
.login-logo span { font-size: 16px; vertical-align: sub; }
.login-logo-img { display: block; width: 150px; max-width: 60%; height: auto; margin: 2px auto 4px; }
.login-brand { font-size: 23px; font-weight: 700; color: #0f172a; text-align: center; }
.login-sub { margin: -6px 0 10px; text-align: center; font-size: 13px; }
.login-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #374151; }
.login-field input { padding: 11px 12px; border: 1px solid #d1d5db; border-radius: 9px; font-size: 14px; font-weight: 400; transition: border-color .12s, box-shadow .12s; }
.login-field input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.16); }
.login-btn { margin-top: 10px; padding: 12px; justify-content: center; font-size: 15px; font-weight: 600; border-radius: 10px; }
.login-foot { text-align: center; font-size: 11px; color: #9ca3af; margin: 14px 0 0; }

/* Username + role shown at the top-right (moved from the sidebar footer). */
.ta-user { display: inline-flex; align-items: baseline; gap: 6px; }
.ta-user b { font-size: 13px; color: var(--text); }
.ta-role { font-size: 11px; color: var(--muted); }

/* Sidebar footer: current user + sign out (pinned to the bottom). */
.sidebar { display: flex; flex-direction: column; }
.nav-footer { margin-top: auto; padding: 12px; border-top: 1px solid #1f2937;
              display: flex; flex-direction: column; gap: 8px; }
.nav-user { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.nav-user b { color: #fff; font-size: 14px; }
.nav-role { color: #6b7280; font-size: 11px; }
.nav-logout { background: #374151; color: #fff; border: 0; align-self: flex-start; }
.nav-logout:hover { background: #4b5563; }

.nav-account { font-size: 13px; padding: 6px 4px; }

/* ===== Column filter bar (table-tools.js) ===== */
.table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 24px 0;
}
.table-filter { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.table-filter > span {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}
.table-filter select {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    min-width: 130px;
}
.table-filter-reset { align-self: flex-end; }
tr.no-results td.empty { text-align: center; color: var(--muted); }

/* ===== In-header column filter row (table-tools.js) ===== */
tr.col-filter-row th.col-filter-cell {
    background: #f3f4f6;
    padding: 5px 8px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    vertical-align: middle;
    border-bottom: 2px solid var(--border);
}
.col-filter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 170px;
    box-sizing: border-box;
    padding: 3px 22px 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--card);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    /* small custom dropdown arrow so the icon stays compact & consistent */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%236b7280' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 8px 8px;
}
.col-filter:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
tr.col-filter-row .table-filter-reset {
    width: 100%;
    padding: 3px 8px;
    font-size: 12px;
}

/* ===== Row edit modal (row-edit.js) ===== */
body.rx-open { overflow: hidden; }
.rx-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(17, 24, 39, .55);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto;
}
.rx-overlay[hidden] { display: none; }
.rx-modal {
    background: var(--card);
    border-radius: 12px;
    width: 100%; max-width: 720px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 80px);
}
.rx-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.rx-head h2 { margin: 0; font-size: 18px; }
.rx-close {
    border: none; background: none; font-size: 26px; line-height: 1;
    cursor: pointer; color: var(--muted); padding: 0 4px;
}
.rx-close:hover { color: var(--text); }
.rx-body { padding: 20px; overflow-y: auto; }
.rx-frame { width: 100%; height: 68vh; border: 0; display: block; }
.rx-foot {
    display: flex; align-items: center; gap: 10px; justify-content: flex-end;
    padding: 14px 20px; border-top: 1px solid var(--border);
}
.rx-msg { margin-right: auto; color: var(--danger); font-size: 13px; }
.edit-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.edit-field > label {
    font-size: 12px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .03em;
}
.edit-field input, .edit-field select, .edit-field textarea {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; background: var(--card); color: var(--text); width: 100%;
}

/* Clickable PEM File cell */
a.pem-cell { cursor: pointer; text-decoration: none; }
a.pem-cell.muted:hover { text-decoration: underline; }

/* Dashboard tile / card category icons (Email Accounts feature). */
.kpi-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.card-icon { font-size: 16px; }

/* ---- White left navigation theme (override) ---- */
.sidebar { background: #ffffff; color: #475569; border-right: 1px solid #e6eaf3; }
.sidebar-brand { color: #0f172a; }
.nav-group-title { color: #94a3b8; }
.nav-link { color: #475569; border-radius: 10px; margin: 1px 4px; transition: background .12s, color .12s; }
.nav-link:hover { background: #eef4ff; color: #1e3a8a; }
.nav-link.active { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.32); }
.nav-footer { border-top: 1px solid #eef1f7; }
.nav-user b { color: #1e3a8a; }
.nav-role { color: #64748b; }
.nav-logout { background: #2563eb; color: #fff; }
.nav-logout:hover { background: #1d4ed8; }

/* Email Accounts "Forward to": show addresses 4 per row, then wrap to next line. */
.fwd-grid { display: grid; grid-template-columns: repeat(4, max-content); gap: 3px 8px; }
.fwd-chip { display: inline-block; font-size: 12px; white-space: nowrap;
            background: #eef2f7; color: #1e293b; border-radius: 4px; padding: 1px 7px; }
@media (max-width: 700px) { .fwd-grid { grid-template-columns: repeat(2, max-content); } }

/* Account controls (Change password + Sign out) moved to the top-right of the topbar. */
.topbar { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.topbar-actions { margin-left: auto; }
.topbar-account { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-actions ~ .topbar-account { margin-left: 12px; }

/* Global search box in the topbar (queries across every module). */
.global-search { position: relative; display: flex; align-items: center; }
.global-search .gs-ic { position: absolute; left: 11px; font-size: 13px; pointer-events: none; opacity: .7; }
.global-search input { width: 210px; max-width: 42vw; padding: 8px 12px 8px 32px; border-radius: 999px;
    border: 1px solid #dbe2ee; background: #f8fafc; color: #0f172a; font-size: 13px; outline: none;
    transition: width .15s, border-color .15s, box-shadow .15s; }
.global-search input::placeholder { color: #94a3b8; }
.global-search input:focus { width: 260px; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59,130,246,.16); background: #fff; }
[data-theme="dark"] .global-search input { background: #1f2430; border-color: #333b4d; color: #e5e9f0; }
[data-theme="dark"] .global-search input:focus { background: #161b26; border-color: #3b5a99; }
/* Desktop: the input is always shown, the mobile toggle button is hidden. */
.gs-toggle { display: none; }
@media (max-width: 820px) {
    /* Phones: the inline search was cramped (~150px, placeholder truncated). Collapse it
       to a tidy round 🔍 icon that expands to a full-width bar just below the topbar. */
    .gs-toggle { display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e2e8f0;
        background: #f8fafc; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
    [data-theme="dark"] .gs-toggle { background: #1f2430; border-color: #333b4d; }
    .global-search .gs-ic { display: none; }
    .global-search input { position: fixed; left: 12px; right: 12px; top: 60px;
        width: auto !important; max-width: none; display: none; z-index: 1200;
        height: 46px; padding: 0 16px; font-size: 15px; border-radius: 12px;
        box-shadow: 0 12px 30px rgba(15,23,42,.30); }
    .global-search.gs-open input { display: block; }
    .global-search.gs-open input:focus { width: auto !important; }
}
.ta-link { font-size: 13px; color: var(--primary); text-decoration: none; white-space: nowrap; }
.ta-link:hover { text-decoration: underline; }
.ta-logout { background: #374151; color: #fff; border: 0; border-radius: 6px;
             padding: 6px 11px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.ta-logout:hover { background: #4b5563; }

/* Top-right user menu (dropdown): name → role → Change password → Sign out. */
.user-menu { position: relative; }
.um-trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
              padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
              font-size: 13px; color: var(--text); white-space: nowrap; user-select: none; }
.um-trigger::-webkit-details-marker { display: none; }
.um-trigger:hover { border-color: var(--primary); }
.um-avatar { font-size: 15px; line-height: 1; }
.um-caret { font-size: 10px; color: var(--muted); }
details[open] .um-caret { transform: rotate(180deg); }
.um-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; z-index: 60;
            background: #fff; border: 1px solid var(--border); border-radius: 10px;
            box-shadow: 0 14px 36px rgba(0,0,0,.18); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.um-id { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 9px;
         border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.um-id b { font-size: 14px; color: var(--text); }
.um-role { font-size: 11px; color: var(--muted); }
.um-item { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 6px;
           font-size: 13px; color: var(--text); text-decoration: none; background: none; border: 0;
           cursor: pointer; white-space: nowrap; }
.um-item:hover { background: #f1f5f9; }
.um-item-form { margin: 0; }
.um-logout { color: var(--danger); }

/* Keep the top-right user menu pinned to the top (never wraps below the toolbar),
   and reserve space so wide toolbars don't slide under it. Widened to fit the
   theme toggle button that now sits left of the user menu (otherwise a wide
   toolbar like the dashboard "Download report" button slides under the toggle). */
.topbar { position: relative; padding-right: 196px; }
.topbar-account,
.topbar-actions ~ .topbar-account { position: absolute; top: 12px; right: 20px; margin: 0; }

@media (max-width: 860px) {
    .topbar { padding-right: 162px; }
    .topbar-account,
    .topbar-actions ~ .topbar-account { top: 10px; right: 12px; }
    .topbar-actions { width: 100%; }
    .um-panel { min-width: 180px; }
}
@media (max-width: 480px) {
    .topbar { padding-right: 112px; }
    .topbar-account,
    .topbar-actions ~ .topbar-account { top: 9px; right: 10px; }
    .um-trigger b { display: none; }        /* compact trigger (👤 ▾) on small phones */
    .um-trigger { padding: 6px 9px; }
}

/* Right-align the Import Excel toolbar (moved from left to right). */
.toolbar-right { justify-content: flex-end; }

/* Force the Import Excel form to the right as a tidy inline row (overrides .inline). */
.toolbar-right { justify-content: flex-end; }
.toolbar-right .import-form { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ============================================================
   Mobile: kill the phantom horizontal "empty" scroll
   ------------------------------------------------------------
   The base `th, td` rule sets white-space:nowrap, which the
   dashboard mini-tables inherit. With no scroll wrapper, a long
   cell (task title / hostname / "old → new" change) pushed the
   table — and the whole page — wider than the phone screen,
   producing an empty horizontal scroll. Guard globally and let
   the dashboard tables wrap / scroll inside their own card.
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 860px) {
    /* Long cell text wraps instead of forcing the page wider. */
    .mini-table th, .mini-table td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
    /* If a mini-table is still too wide, scroll it inside its card only. */
    .dash-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* KPI tiles and cards must never exceed the viewport width. */
    .kpi-tile, .dash-card { max-width: 100%; }
    /* Report form in the topbar: wrap tidily, full-width button. */
    .dash-report { flex-wrap: wrap; }
    .dash-report .import-label { flex: 1 1 auto; }
    .dash-report .btn-primary { flex: 1 1 100%; }
}

/* ===== Data-transfer toolbar: template / export / import (shared) ===== */
.data-toolbar { justify-content: flex-end; flex-wrap: wrap; }
.data-toolbar .import-form { margin-left: 0; }
.btn-template { border-color: #cbd5e1; color: var(--primary); }
.btn-export  { background: #0d9488; border-color: #0d9488; color: #fff; }
.btn-export:hover { background: #0f766e; }
.btn-pdf     { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-pdf:hover { background: #991b1b; }
.btn-import  { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.btn-import:hover { background: #6d28d9; }
.file-import { gap: 8px; }
.file-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
               overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.btn-file { border-color: #cbd5e1; cursor: pointer; }
.btn-file:hover { background: #f3f4f6; }
.file-name { font-size: 13px; color: var(--muted); max-width: 200px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Import / Export single-button dropdown (Assets page) ──────── */
.io-menu { position: relative; display: flex; justify-content: flex-end; margin: 16px 24px 0; }
.io-toggle { display: inline-flex; align-items: center; gap: 8px; }
.io-caret { font-size: 10px; line-height: 1; transition: transform .15s; }
.io-menu.open .io-caret { transform: rotate(180deg); }

.io-panel {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    width: 300px; max-width: calc(100vw - 32px);
    background: var(--card); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18);
    padding: 8px; display: flex; flex-direction: column;
}
.io-panel[hidden] { display: none; }
.io-heading {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); padding: 6px 10px 4px;
}
.io-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 7px;
    font-size: 13px; color: var(--text); text-decoration: none; cursor: pointer;
}
.io-item:hover { background: #f3f4f6; }
.io-ic { width: 18px; text-align: center; flex: none; }
.io-sep { height: 1px; background: var(--border); margin: 8px 6px; }

.io-import { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 2px; }
.io-file {
    display: flex; align-items: center; gap: 8px; margin: 0 8px;
    padding: 9px 11px; border: 1.5px dashed var(--border); border-radius: 8px;
    font-size: 13px; color: var(--muted); cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}
.io-file:hover { border-color: var(--primary); color: var(--text); background: #f5f8ff; }
.io-file.dragover { border-style: solid; border-color: var(--primary); background: #eff4fe; color: var(--text); }
.io-file.has-file { border-style: solid; border-color: #16a34a; background: #f0fdf4; color: #166534; }
.io-file .file-name { max-width: none; flex: 1 1 auto; font-weight: 500; color: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.io-submit { margin: 4px 8px 4px; justify-content: center; }

@media (max-width: 640px) {
    .io-menu { margin-left: 12px; margin-right: 12px; }
    .io-panel { width: 100%; }
}

/* ============================================================
   Dark mode
   A [data-theme="dark"] attribute on <html> (set by theme.js) flips these
   variables; everything built on var(--bg/card/border/text/muted) follows.
   The block below only re-paints the surfaces that use hard-coded light hexes.
   ============================================================ */
[data-theme="dark"] {
    --bg: #0f172a;      /* page background  (slate-900) */
    --card: #1e293b;    /* cards, topbar, table, modals (slate-800) */
    --border: #334155;  /* borders (slate-700) */
    --text: #e5e7eb;    /* body text (gray-200) */
    --muted: #94a3b8;   /* secondary text (slate-400) */
}
/* Table zebra striping + hover */
[data-theme="dark"] tbody tr:nth-child(odd)  { background: #1e293b; }
[data-theme="dark"] tbody tr:nth-child(even) { background: #172033; }
[data-theme="dark"] tr:hover td              { background: #273449; }
[data-theme="dark"] td.empty                 { color: var(--muted); }
[data-theme="dark"] .mini-table td           { border-top-color: #334155; }
/* Dashboard KPI tiles */
[data-theme="dark"] .kpi-tile   { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .kpi-alert  { background: #3a1d1d; border-color: #7f1d1d; }
/* Buttons + inputs */
[data-theme="dark"] .btn:hover        { background: #334155; }
[data-theme="dark"] .btn-danger:hover { background: #3a1d1d; }
[data-theme="dark"] .btn-ssh:hover    { background: #1e293b; }
[data-theme="dark"] .btn-file:hover,
[data-theme="dark"] .io-item:hover    { background: #334155; }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea          { background: #0f172a; color: var(--text); }
[data-theme="dark"] .table-search     { background: #0f172a; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .env-select,
[data-theme="dark"] .cell-input       { background: #0f172a; color: var(--text); }
/* Login card, account menu (button + panel), modals */
[data-theme="dark"] .login-card   { background: #1e293b; }
[data-theme="dark"] .um-trigger   { background: #1e293b; color: var(--text); }
[data-theme="dark"] .um-panel     { background: #1e293b; }
[data-theme="dark"] .um-item:hover { background: #334155; }
/* In-header column filter row */
[data-theme="dark"] tr.col-filter-row th.col-filter-cell { background: #172033; border-bottom-color: var(--border); }

/* ===== Dark / light toggle button (right of the topbar; fixed on login) ===== */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border-radius: 10px;
    border: 1px solid var(--border); background: var(--card); color: var(--text);
    font-size: 18px; line-height: 1; cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.theme-toggle:hover { background: #eef2f7; border-color: var(--primary); }
[data-theme="dark"] .theme-toggle:hover { background: #334155; }
.theme-toggle .theme-ico { pointer-events: none; }
/* Fixed variant used on the pre-login (login) screen. */
.theme-toggle-fixed {
    position: fixed; top: 18px; right: 18px; z-index: 1200;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* ============================================================
   Mobile polish (<=640px): wide tables keep their real row/column layout and
   scroll sideways; forms/popups/toolbars stack and fit the viewport.
   ============================================================ */
@media (max-width: 640px) {
    /* --- Tables keep their normal desktop row/column layout on phones and just
       scroll sideways inside their wrapper (browser-style view). The old
       "one card per row" mobile view hid the header row and broke the per-column
       filter/search boxes, so it has been removed. --- */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sno-col { color: var(--muted, #6b7280); }

    /* --- Popups / modals fit the screen and scroll inside. --- */
    .rx-modal, .pw-modal, .rx-overlay .rx-modal { max-width: 94vw !important; width: 94vw; }
    .rx-body, .pw-body { max-height: 70vh; overflow-y: auto; }

    /* --- Import/Export menu, search + toolbars go full width. --- */
    .io-menu, .io-panel { width: 100%; }
    .io-panel { left: 0; right: 0; }
    .table-search-bar, .table-search { width: 100%; min-width: 0; }
    .table-toolbar { flex-wrap: wrap; }
    .table-toolbar .btn { flex: 1 1 auto; text-align: center; }

    /* --- Share Path browser toolbar / long UNC paths. --- */
    .share-toolbar form { width: 100%; flex-wrap: wrap; }
    .share-toolbar form input[type=file] { flex: 1 1 100%; min-width: 0; }
    .share-toolbar .btn { flex: 1 1 auto; text-align: center; }
    .share-cell, .share-link, .share-meta { word-break: break-all; }
}

/* ============================================================
   Dark Mode — topbar toggle (left of the user menu) + full-app dark surfaces
   ============================================================ */
.topbar-account { display: flex; align-items: center; gap: 12px; }
/* Mobile back button — hidden on desktop, shown on phone widths (incl. the mobile app WebView). */
.mobile-back-btn { display: none; }
@media (max-width: 820px) {
    /* Floating back button pinned to the bottom-right corner (mobile app WebView). */
    .mobile-back-btn { display: inline-flex; align-items: center; gap: 4px;
        position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 1000; height: 46px; padding: 0 20px;
        border-radius: 23px; border: 1px solid #1d4ed8; background: #2563eb; color: #fff;
        font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
        box-shadow: 0 6px 18px rgba(15,23,42,.28);
        transition: background .12s, box-shadow .12s; }
    .mobile-back-btn:active { background: #1d4ed8; }
    [data-theme="dark"] .mobile-back-btn { background: #2563eb; border-color: #1e40af; color: #fff;
        box-shadow: 0 6px 18px rgba(0,0,0,.45); }
    /* Modules the mobile app hides for a lighter, phone-focused experience
       (e.g. Team Chat & Tickets). Desktop keeps them. */
    .mobile-hide { display: none !important; }
}
.topbar-theme { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e2e8f0; background: #f8fafc;
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; line-height: 1;
    transition: background .12s, border-color .12s; }
.topbar-theme:hover { background: #eef4ff; border-color: #bcd0f7; }
[data-theme="dark"] .topbar-theme { background: #141f38; border-color: #22304d; }
[data-theme="dark"] .topbar-theme:hover { background: #1c2b4a; border-color: #3b4d78; }

/* ============================================================
   Dark Mode — full-app dark surfaces
   ============================================================ */
.nav-footer { padding: 10px 6px 2px; margin-top: 8px; }
.dark-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: transparent; border: 0; cursor: pointer; padding: 9px 12px; border-radius: 10px; color: inherit; font: inherit; }
.dark-toggle:hover { background: #eef4ff; }
.dm-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.dm-switch { width: 42px; height: 22px; border-radius: 22px; background: #cbd5e1; position: relative; transition: background .18s; flex-shrink: 0; }
.dm-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .18s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
[data-theme="dark"] .dm-switch { background: linear-gradient(90deg,#2563eb,#7c3aed); }
[data-theme="dark"] .dm-knob { left: 22px; }
[data-theme="dark"] .dark-toggle:hover { background: #16233f; }

/* Sidebar (overrides the white nav theme) */
[data-theme="dark"] .sidebar { background: #0b1327; color: #c3d0ea; border-right-color: #1e293b; }
[data-theme="dark"] .sidebar-brand { color: #fff; }
[data-theme="dark"] .sidebar-logo-img { background: #fff; border-radius: 12px; padding: 8px 10px; }
/* New AJL Enterprise logo is dark artwork on transparent bg — on dark auth cards it
   would vanish, so sit it on a white chip (mirrors the sidebar dark-theme treatment). */
[data-theme="dark"] .login-logo-img { background: #fff; border-radius: 12px; padding: 8px 12px; }
[data-theme="dark"] .sidebar-brand .sidebar-sub { color: #7aa2ff; }
[data-theme="dark"] .nav-group-title { color: #64748b; }
[data-theme="dark"] .nav-link { color: #c3d0ea; }
[data-theme="dark"] .nav-link:hover { background: #16233f; color: #fff; }
[data-theme="dark"] .nav-link.active { background: var(--primary); color: #fff; }
[data-theme="dark"] .nav-footer { border-top-color: #1e293b; }

/* Content + topbar */
[data-theme="dark"] .content { background: #0b1120; }
[data-theme="dark"] .topbar { background: #0f172a; border-bottom-color: #1e293b; }
[data-theme="dark"] .topbar h1 { color: #e5e7eb; }

/* Dashboard surfaces */
[data-theme="dark"] .dash-head h1 { color: #f1f5f9; }
[data-theme="dark"] .dash-head .sub { color: #94a3b8; }
[data-theme="dark"] .dash-head .acts .btn2 { background: #141f38; color: #cbd5e1; border-color: #22304d; }
[data-theme="dark"] .dash-head .acts .btn2.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
[data-theme="dark"] .stat,
[data-theme="dark"] .panel { background: #141f38; border-color: #22304d; box-shadow: none; }
[data-theme="dark"] .stat .num,
[data-theme="dark"] .panel h3,
[data-theme="dark"] .ov-item b,
[data-theme="dark"] .hbar .l b,
[data-theme="dark"] .donut .inner b,
[data-theme="dark"] .svc .n { color: #f1f5f9; }
[data-theme="dark"] .stat .lbl { color: #94a3b8; }
[data-theme="dark"] .donut .inner { background: #141f38; }
[data-theme="dark"] .donut { background: conic-gradient(var(--primary) calc(var(--v,0)*1%), #22304d 0); }
[data-theme="dark"] .hbar .track { background: #22304d; }
[data-theme="dark"] .qa a,
[data-theme="dark"] .svc a { background: #0e1830; border-color: #22304d; color: #c3d0ea; }
[data-theme="dark"] .qa a:hover,
[data-theme="dark"] .svc a:hover { border-color: #3b4d78; }
[data-theme="dark"] .qa .qic,
[data-theme="dark"] .svc .sic { background: #1c2b4a; color: #7aa2ff; }
[data-theme="dark"] .svc .c { color: #94a3b8; }
[data-theme="dark"] .act .item { border-bottom-color: #22304d; }
[data-theme="dark"] .act .txt { color: #c3d0ea; }
[data-theme="dark"] .act .aic { background: #1c2b4a; }
[data-theme="dark"] .dash-foot { color: #64748b; }

/* Generic cards/modals on other pages */
[data-theme="dark"] .card { background: #141f38; }

/* ============================================================
   Dashboard "Customize my dashboard" picker (grouped toggle switches).
   Kept in the external stylesheet (not an inline <body> style) so it
   applies reliably in every browser/WebView.
   ============================================================ */
.cz-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:1000;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;}
.cz-overlay.cz-open{display:flex;}
.cz-card{background:#fff;border-radius:16px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(16,24,40,.28);padding:20px 22px;}
.cz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.cz-head h3{margin:0;font-size:18px;font-weight:800;color:#0f172a;}
.cz-sub{margin:4px 0 0;font-size:12.5px;color:#64748b;max-width:440px;line-height:1.5;}
.cz-sub b{color:#0f172a;}
.cz-x{border:0;background:#f1f5f9;color:#475569;border-radius:8px;width:30px;height:30px;font-size:15px;cursor:pointer;flex-shrink:0;}
.cz-tools{display:flex;gap:8px;margin:14px 0 4px;}
.cz-chip{border:1px solid #dbe2ee;background:#fff;color:#334155;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;}
.cz-chip:hover{border-color:#bcd0f7;color:var(--primary);}
.cz-scroll{max-height:52vh;overflow:auto;margin:6px -6px 0;padding:0 6px;}
.cz-sec{margin-top:14px;}
.cz-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;position:sticky;top:0;background:#fff;padding:4px 0;}
.cz-sec-title{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#94a3b8;}
.cz-sec-acts{display:flex;gap:4px;}
.cz-mini{border:0;background:#f1f5f9;color:#64748b;border-radius:6px;padding:2px 9px;font-size:11px;font-weight:700;cursor:pointer;}
.cz-mini:hover{background:#e2e8f0;color:var(--primary);}
.cz-row{display:flex;align-items:center;gap:12px;border:1px solid #eef2f9;border-radius:11px;padding:9px 13px;margin-bottom:7px;cursor:pointer;background:#fbfcfe;transition:border-color .12s,background .12s;}
.cz-row:hover{border-color:#bcd0f7;}
.cz-row.cz-on{background:#f2f7ff;border-color:#cfe0fb;}
.cz-ic{width:30px;height:30px;flex-shrink:0;border-radius:9px;background:#e8f0ff;display:flex;align-items:center;justify-content:center;font-size:15px;}
.cz-lbl{flex:1;font-size:13.5px;font-weight:600;color:#334155;}
.cz-sw{position:relative;width:42px;height:24px;flex-shrink:0;}
.cz-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.cz-track{position:absolute;inset:0;background:#cbd5e1;border-radius:999px;transition:background .15s;pointer-events:none;}
.cz-track::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(16,24,40,.3);transition:transform .15s;}
.cz-sw input:checked + .cz-track{background:#2563eb;background:var(--primary);}
.cz-sw input:checked + .cz-track::before{transform:translateX(18px);}
.cz-foot{display:flex;align-items:center;gap:10px;margin-top:16px;border-top:1px solid #f1f4f9;padding-top:14px;}
.cz-foot-spacer{flex:1;}
.cz-link{border:0;background:none;color:#64748b;font-weight:600;font-size:12.5px;cursor:pointer;padding:2px 0;text-decoration:underline;}
.cz-link:hover{color:var(--primary);}
@media(max-width:560px){ .cz-card{padding:16px;} }
[data-theme="dark"] .cz-card{background:#1a1f2b;}
[data-theme="dark"] .cz-head h3,[data-theme="dark"] .cz-sub b{color:#e5e9f0;}
[data-theme="dark"] .cz-x,[data-theme="dark"] .cz-mini{background:#2a3240;color:#cbd5e1;}
[data-theme="dark"] .cz-chip{background:#1f2430;border-color:#333b4d;color:#cdd3df;}
[data-theme="dark"] .cz-row{background:#1f2430;border-color:#333b4d;}
[data-theme="dark"] .cz-row.cz-on{background:#22314c;border-color:#3a557f;}
[data-theme="dark"] .cz-lbl{color:#cdd3df;}
[data-theme="dark"] .cz-sec-head{background:#1a1f2b;}
[data-theme="dark"] .cz-track{background:#3a4152;}

/* ============================================================
   Compact module picker (Settings ▸ Customize my dashboard) — v2.
   Small horizontal chips that wrap; tap to toggle. flex-direction is set
   explicitly because the global `label{flex-direction:column}` rule would
   otherwise stack each chip vertically.
   ============================================================ */
.mp-tools{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px;}
.mp-chipbtn{border:1px solid #dbe2ee;background:#fff;color:#334155;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;}
.mp-chipbtn:hover{border-color:#bcd0f7;color:#2563eb;}
.mp-sec{margin-top:14px;}
.mp-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.mp-sec-title{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;}
.mp-sec-acts{display:flex;gap:4px;}
.mp-mini{border:0;background:#f1f5f9;color:#64748b;border-radius:6px;padding:2px 9px;font-size:11px;font-weight:700;cursor:pointer;}
.mp-mini:hover{background:#e2e8f0;color:#2563eb;}
.mp-grid{display:flex;flex-wrap:wrap;gap:8px;}
.mp-chip{display:inline-flex;flex-direction:row;align-items:center;gap:7px;flex:0 0 auto;
    border:1.5px solid #dbe2ee;border-radius:999px;padding:7px 13px;margin:0;cursor:pointer;background:#fff;
    font-size:12.5px;font-weight:600;color:#475569;user-select:none;transition:background .12s,border-color .12s,color .12s;}
.mp-chip:hover{border-color:#bcd0f7;}
.mp-chip input{display:none;}
.mp-chip .mp-ico{font-size:14px;line-height:1;}
.mp-chip .mp-check{font-size:11px;font-weight:800;color:#cbd5e1;line-height:1;}
.mp-chip.mp-on{background:#2563eb;background:var(--primary);border-color:var(--primary);color:#fff;}
.mp-chip.mp-on .mp-check{color:#fff;}
[data-theme="dark"] .mp-chipbtn{background:#1f2430;border-color:#333b4d;color:#cdd3df;}
[data-theme="dark"] .mp-mini{background:#2a3240;color:#cbd5e1;}
[data-theme="dark"] .mp-chip{background:#1f2430;border-color:#333b4d;color:#cdd3df;}
[data-theme="dark"] .mp-chip .mp-check{color:#5b6478;}
[data-theme="dark"] .mp-chip.mp-on{background:var(--primary);border-color:var(--primary);color:#fff;}
[data-theme="dark"] .mp-chip.mp-on .mp-check{color:#fff;}

/* Extended account dropdown (Signed in as … + grouped items + Sign out) */
.um-panel{min-width:236px;}
.um-signed{font-size:11px;color:var(--muted);}
.um-id b{word-break:break-all;}
.um-sep{height:1px;background:#eef2f9;margin:6px 6px;}
[data-theme="dark"] .um-sep{background:#334155;}

/* ============================================================
   Collapsible accordion sections with a chevron arrow (Profile & Settings).
   ============================================================ */
.acc{background:#fff;border:1px solid #eceff5;border-radius:14px;margin-bottom:12px;box-shadow:0 1px 3px rgba(16,24,40,.04);overflow:hidden;}
.acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:16px 18px;cursor:pointer;text-align:left;font-family:inherit;}
.acc-head:hover{background:#fafbfe;}
.acc-t{display:flex;align-items:center;gap:11px;min-width:0;}
.acc-ic{font-size:19px;flex-shrink:0;}
.acc-tt{display:flex;flex-direction:column;min-width:0;}
.acc-tt b{font-size:14.5px;font-weight:800;color:#0f172a;}
.acc-tt small{font-weight:500;font-size:12px;color:#94a3b8;}
.acc-arrow{color:#94a3b8;transition:transform .18s ease;flex-shrink:0;}
.acc.open .acc-arrow{transform:rotate(180deg);}
.acc-body{display:none;padding:2px 18px 18px;border-top:1px solid #f1f4f9;}
.acc.open .acc-body{display:block;}
[data-theme="dark"] .acc{background:#1a1f2b;border-color:#333b4d;}
[data-theme="dark"] .acc-head:hover{background:#1f2632;}
[data-theme="dark"] .acc-tt b{color:#e5e9f0;}
[data-theme="dark"] .acc-body{border-color:#333b4d;}