/* ==========================================================================
   Status console — shared UI layer (index.php, admin.php)
   Loaded after the Tailwind CDN. Selectors are scoped under `.ui` so they
   outrank single-class Tailwind utilities, including ones set from JS.
   ========================================================================== */

:root {
    --canvas:  #0E1116;
    --surface: #151A21;
    --raised:  #1B212A;
    --sunken:  #11151B;
    --line:    #262D38;
    --line-2:  #333B47;
    --text:    #E6EAF0;
    --muted:   #8B95A5;
    --faint:   #6B7585;
    --ok:      #3FB27F;
    --warn:    #D9A441;
    --down:    #E5534B;
    --accent:  #4C8DF6;
    --radius:  6px;
    --topbar-h: 48px;
}

html { color-scheme: dark; scrollbar-color: var(--line-2) var(--canvas); }

.ui {
    background: var(--canvas);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}
.ui .font-mono, .ui code, .ui kbd { font-variant-numeric: tabular-nums; }

/* ---- Shape: one radius, no glow, no blur ------------------------------- */
.ui .rounded-2xl, .ui .rounded-xl, .ui .rounded-lg, .ui .rounded-md { border-radius: var(--radius); }
.ui .shadow-md, .ui .shadow-lg, .ui .shadow-xl, .ui .shadow-2xl { box-shadow: none; }
.ui [class*="shadow-[0_0"] { box-shadow: none !important; }
.ui .backdrop-blur-md { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- Surfaces: flatten translucent card fills -------------------------- */
.ui .bg-slate-900\/40, .ui .bg-slate-900\/50, .ui .bg-slate-900\/60, .ui .bg-slate-900\/80 { background-color: var(--surface); }
.ui .bg-slate-850\/40 { background-color: var(--surface); }
.ui .bg-slate-900 { background-color: var(--surface); }
.ui .bg-slate-950\/20, .ui .bg-slate-950\/30, .ui .bg-slate-950\/40 { background-color: var(--sunken); }

/* ---- Type -------------------------------------------------------------- */
.ui .text-\[8px\], .ui .text-\[9px\], .ui .text-\[10px\] { font-size: 11px; }
.ui .text-\[11px\] { font-size: 12px; }
.ui .uppercase { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ui .tracking-wider, .ui .tracking-tight { letter-spacing: 0; }
.ui .font-bold { font-weight: 600; }

/* ---- Motion: only a down status dot pulses ----------------------------- */
.ui .animate-pulse, .ui .animate-ping { animation: none; }
@keyframes dot-down { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ui [id*="status-dot"].animate-pulse { animation: dot-down 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .ui *, .ui *::before, .ui *::after { animation: none !important; transition: none !important; }
}

/* ---- Focus ------------------------------------------------------------- */
.ui :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ui input:focus-visible, .ui select:focus-visible, .ui textarea:focus-visible { outline-offset: 0; }

/* ---- Scrollbars -------------------------------------------------------- */
.ui ::-webkit-scrollbar { width: 10px; height: 10px; }
.ui ::-webkit-scrollbar-track { background: transparent; }
.ui ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 2px solid var(--canvas); }

/* ==========================================================================
   Top bar
   ========================================================================== */
.ui .topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.ui .topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    min-height: var(--topbar-h);
    display: flex; align-items: center; gap: 24px;
}
.ui .brand { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.ui .topbar-meta { font-size: 12px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui .topbar-spacer { flex: 1; }
.ui .topbar-actions { display: flex; align-items: center; gap: 8px; }

.ui .tabs { display: flex; align-self: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.ui .tabs::-webkit-scrollbar { display: none; }
.ui .tab {
    position: relative; padding: 0 12px; font-size: 13px; font-weight: 500;
    color: var(--muted); background: none; border: 0; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .15s;
}
.ui .tab:hover { color: var(--text); }
.ui .tab.is-active { color: var(--text); }
.ui .tab.is-active::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
    background: var(--accent); border-radius: 2px 2px 0 0;
}
.ui .tab.is-crit { color: #F0928C; }
.ui .tab.is-crit.is-active::after { background: var(--down); }
.ui .tab-count {
    min-width: 18px; padding: 0 5px; height: 18px; border-radius: 9px;
    background: var(--down); color: #fff; font-size: 11px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}
.ui .tab-count.hidden { display: none; }

.ui .btn {
    height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: var(--muted);
    background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius);
    cursor: pointer; transition: color .15s, background-color .15s, border-color .15s;
}
.ui .btn:hover { color: var(--text); background: var(--raised); }
.ui .btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.ui .btn-primary:hover { color: #fff; background: #3B78DB; border-color: #3B78DB; }

@media (max-width: 720px) {
    .ui .topbar-inner { flex-wrap: wrap; gap: 0 12px; padding: 8px 16px 0; }
    .ui .topbar-meta { display: none; }
    .ui .tabs { order: 3; width: 100%; height: 36px; margin: 0 -4px; }
    .ui .topbar-actions .btn-label { display: none; }
}

/* ==========================================================================
   Layout
   ========================================================================== */
.ui .max-w-5xl { max-width: 1200px; }
.ui main { padding-top: 20px; padding-bottom: 48px; gap: 16px; }

/* ---- Status strip (banners) ------------------------------------------- */
.ui .strip {
    display: flex; flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--line-2);
    border-radius: var(--radius);
}
.ui .strip[class*="border-emerald"] { border-left-color: var(--ok); }
.ui .strip[class*="border-rose"]    { border-left-color: var(--down); }
.ui .strip[class*="border-amber"]   { border-left-color: var(--warn); }
.ui .strip[class*="border-sky"]     { border-left-color: var(--accent); }
.ui .strip > .relative { display: flex; }
.ui .strip [id$="banner-ping"] { display: none; }
.ui .strip [id$="banner-icon-bg"], .ui .strip #critical-banner-icon, .ui .strip .strip-icon {
    width: 28px; height: 28px; border-radius: var(--radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.ui .strip svg { width: 16px; height: 16px; }
.ui .strip h2 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ui .strip p  { font-size: 13px; color: var(--muted); }
.ui .strip .space-y-0\.5 > * + *, .ui .strip .md\:space-y-1 > * + * { margin-top: 2px; }
/* icon chip: filled status colour, no glow */
.ui .strip [id$="banner-icon-bg"].bg-emerald-500 { background: rgba(63,178,127,.16); color: var(--ok); }
.ui .strip [id$="banner-icon-bg"].bg-rose-500    { background: rgba(229,83,75,.18);  color: var(--down); }
.ui .strip #critical-banner-icon { background: var(--raised); color: var(--muted); }
.ui .strip #critical-banner-icon.bg-rose-600    { background: rgba(229,83,75,.18); color: var(--down); }
.ui .strip #critical-banner-icon.bg-emerald-600 { background: rgba(63,178,127,.16); color: var(--ok); }

/* ---- KPI band: one bordered panel, divided cells ---------------------- */
.ui .kpis {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.ui .kpi { padding: 12px 16px; min-width: 0; }
.ui .kpi + .kpi { border-left: 1px solid var(--line); }
.ui .kpi-label { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.ui .kpi-value {
    margin-top: 2px; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--text);
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
}
.ui .kpi-value small { font-size: 12px; font-weight: 400; color: var(--muted); font-family: Inter, sans-serif; }
@media (max-width: 720px) {
    .ui .kpis { grid-template-columns: repeat(2, 1fr); }
    .ui .kpi:nth-child(3) { border-left: 0; }
    .ui .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---- Toolbar ----------------------------------------------------------- */
.ui .toolbar {
    position: sticky; top: calc(var(--topbar-h) + 1px); z-index: 40;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 8px 0; background: var(--canvas);
    border-bottom: 1px solid var(--line);
}
.ui .toolbar-search { position: relative; flex: 0 1 280px; min-width: 180px; }
.ui .toolbar-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--faint); pointer-events: none; }
.ui .toolbar-search input {
    width: 100%; height: 32px; padding: 0 28px 0 30px; font-size: 13px;
    color: var(--text); background: var(--surface);
    border: 1px solid var(--line-2); border-radius: var(--radius);
}
.ui .toolbar-search input::placeholder { color: var(--faint); }
.ui .toolbar-search input:focus { border-color: var(--accent); outline: none; }
.ui .toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.ui .seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.ui .seg > button {
    height: 30px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--muted);
    background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: color .15s, background-color .15s;
}
.ui .seg > button + button { border-left: 1px solid var(--line-2); }
.ui .seg > button:hover { color: var(--text); background: var(--surface); }
.ui .seg > button.is-active { color: var(--text); background: var(--raised); }
.ui .seg svg { width: 14px; height: 14px; }
.ui .icon-btn { width: 30px; padding: 0; justify-content: center; }
.ui .icon-btn svg { width: 14px; height: 14px; }

/* ---- Project sections -------------------------------------------------- */
.ui .project-toggle-btn { padding: 8px 0 10px; border-bottom: 1px solid var(--line); }
.ui .project-toggle-btn h2 { font-size: 15px; font-weight: 600; color: var(--text); }
.ui .project-toggle-btn:hover h2 { color: #fff; }
.ui .project-chevron { width: 16px; height: 16px; color: var(--faint); }
.ui [id^="project-maintenance"], .ui [id^="project-operational"], .ui [id^="project-outage"] {
    background: transparent; border: 0; padding: 0; border-radius: 0;
    font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.ui [id^="project-maintenance"] { color: var(--warn); }
.ui [id^="project-operational"] { color: var(--ok); }
.ui [id^="project-outage"]      { color: var(--down); }

/* ---- Status badge → dot + label --------------------------------------- */
.ui [id^="service-status-badge"], .ui [id^="table-status-badge"], .ui #modal-status-badge {
    background: transparent; border: 0; padding: 0; border-radius: 0;
    font-size: 12px; font-weight: 500; gap: 6px;
}
.ui [id*="status-dot"] { width: 8px; height: 8px; }

/* ---- Cards (grid view, server cards) ---------------------------------- */
.ui [data-service-id].rounded-2xl, .ui #server-cards-container > .rounded-2xl {
    background: var(--surface); border-color: var(--line); padding: 16px 18px;
}
.ui [data-service-id].rounded-2xl:hover, .ui #server-cards-container > .rounded-2xl:hover { border-color: var(--line-2); }
.ui .status-timeline-bar { background: var(--sunken); border-color: var(--line); }

/* ---- Dense table ------------------------------------------------------- */
.ui .project-table-container { background: var(--surface); border-color: var(--line); }
.ui .project-table-container table { font-size: 13px; }
.ui .project-table-container thead tr { background: var(--sunken); border-color: var(--line); }
.ui .project-table-container th { padding: 8px 16px; font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.ui .project-table-container td { padding: 9px 16px; vertical-align: middle; }
.ui .project-table-container tbody { --tw-divide-opacity: 1; }
.ui .project-table-container tbody > tr + tr { border-top: 1px solid var(--line); }
.ui .project-table-container tbody tr:hover { background: var(--raised); }
.ui .project-table-container td.font-bold { font-weight: 500; color: var(--text); }
.ui .project-table-container .col-num { text-align: right; font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.ui .row-action {
    height: 26px; padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--muted);
    background: transparent; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer;
}
.ui .row-action:hover { color: var(--text); background: var(--raised); }

/* ---- Chips that remain chips (expected status etc.) -------------------- */
.ui .bg-amber-500\/10.rounded { border-radius: 4px; }

/* ---- Filter chips ------------------------------------------------------ */
.ui .filter-pill { height: 30px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.ui .filter-pill:hover { color: var(--text); background: var(--surface); }
.ui .filter-pill.is-active { color: var(--text); background: var(--raised); border-color: var(--line-2); }

/* ---- Modal ------------------------------------------------------------- */
.ui #history-modal { background: rgba(8, 10, 14, .72); }
.ui #history-modal > div { border-color: var(--line-2); border-radius: 8px; padding: 20px 22px; }

/* ---- Time-range toggles in server cards -------------------------------- */
.ui .time-toggle-btn { height: 26px; font-weight: 500; border-radius: 4px; }
.ui .time-toggle-btn.bg-slate-700 { background: var(--raised); color: var(--text); }

/* ==========================================================================
   Admin
   ========================================================================== */
.ui .admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ui input[type="text"], .ui input[type="url"], .ui input[type="number"], .ui input[type="password"], .ui select, .ui textarea {
    background: var(--sunken); border: 1px solid var(--line-2); color: var(--text); border-radius: var(--radius);
}
.ui input:focus, .ui select:focus, .ui textarea:focus { border-color: var(--accent); }
.ui input::placeholder, .ui textarea::placeholder { color: var(--faint); }
.ui .notice { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; font-size: 13px; }
.ui .notice-title { font-weight: 600; color: var(--text); }
.ui .notice-body { color: var(--muted); font-size: 12px; margin-top: 2px; }
.ui .notice-ok   { border-left-color: var(--ok); }
.ui .notice-warn { border-left-color: var(--warn); }
.ui .notice-err  { border-left-color: var(--down); }

.ui .hidden { display: none; }

/* ---- Admin: tab strip (JS keys off the bg-blue-600 class, so style that) - */
.ui .admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.ui .admin-tabs > button {
    position: relative; padding: 10px 14px; font-size: 13px; font-weight: 500;
    color: var(--muted); background: none; border-radius: 0; cursor: pointer;
}
.ui .admin-tabs > button:hover { color: var(--text); }
.ui .admin-tabs > button.bg-blue-600 { color: var(--text); background: none; }
.ui .admin-tabs > button.bg-blue-600::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent);
}
.ui .tab-n { margin-left: 6px; font-size: 12px; color: var(--faint); font-weight: 400; font-variant-numeric: tabular-nums; }
.ui .add-row {
    width: 100%; margin-top: 12px; padding: 10px; font-size: 13px; font-weight: 500; color: var(--muted);
    background: transparent; border: 1px dashed var(--line-2); border-radius: var(--radius); cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}
.ui .add-row:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }
.ui .bg-slate-800\/40, .ui .bg-slate-800\/60, .ui .bg-slate-800\/70 { background-color: var(--surface); }
.ui .bg-blue-600 { background-color: var(--accent); }
.ui .hover\:bg-blue-500:hover { background-color: #3B78DB; }