/* ==========================================================
   Glances — Modern Light Theme (IslamicFT)
   Drop-in replacement for /custom/light.css
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
    color-scheme: light !important;

    --bg:          #f1f5f9;
    --surface:     #ffffff;
    --surface-2:   #f8fafc;
    --border:      #e2e8f0;
    --border-soft: #eef2f6;
    --text:        #0f172a;
    --text-2:      #475569;
    --muted:       #94a3b8;
    --accent:      #0d9488;   /* teal */
    --accent-soft: #ccfbf1;

    --ok:        #16a34a;
    --ok-bg:     #dcfce7;
    --careful:   #2563eb;
    --careful-bg:#dbeafe;
    --warning:   #d97706;
    --warning-bg:#fef3c7;
    --critical:  #dc2626;
    --critical-bg:#fee2e2;

    --radius: 12px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);

    --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Base ---------- */
html, body, #app {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font-mono) !important;
    font-size: 12.5px !important;
    -webkit-font-smoothing: antialiased;
}

#app > main {
    max-width: 1680px;
    margin: 0 auto;
    padding: 16px 20px 32px;
}

/* Reset Bootstrap/Glances table colouring */
table, thead, tbody, tr, td, th {
    background-color: transparent !important;
    color: var(--text-2) !important;
    border-color: var(--border-soft) !important;
    box-shadow: none !important;
}
.table { margin-bottom: 0 !important; --bs-table-bg: transparent !important; }
.table > :not(caption) > * > * { padding: 2px 6px !important; }

th, .title {
    color: var(--text) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
}

/* ---------- Header ---------- */
.header, .header-small {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 18px;
    margin-bottom: 14px;
    font-family: var(--font-ui) !important;
    font-size: 13px;
}
.header .title, .header-small .title {
    font-size: 15px;
    font-weight: 700 !important;
    color: var(--accent) !important;
    margin-right: 10px;
    letter-spacing: -.01em;
}
.header span, .header-small span { color: var(--text-2) !important; }
#uptime span, #now span {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* ---------- Top stat cards ---------- */
.top {
    gap: 14px;
    margin-bottom: 14px;
    align-items: stretch;
}
.top > div { flex: 1 1 auto; min-width: 0; }
.top .table-responsive { overflow: visible; }
.top table { width: 100%; }
#quicklook { min-width: 240px; }
#quicklook td.progress { width: 100%; }
#quicklook td:last-child { white-space: nowrap; padding-left: 10px !important; }
.top > div:empty { display: none; }

.top .plugin,
.bottom .plugin {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    height: 100%;
}
.top .plugin { min-height: 100%; }

/* Quicklook */
#quicklook > .d-flex:first-child {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
#quicklook .frequency { color: var(--muted) !important; font-weight: 400; }

/* Progress bars */
.progress, td.progress {
    background: var(--border-soft) !important;
    border-radius: 999px !important;
    height: 8px !important;
    padding: 0 !important;
    overflow: hidden;
    vertical-align: middle !important;
    margin-top: 6px;
}
.progress-bar {
    border-radius: 999px !important;
    height: 8px !important;
    line-height: 8px !important;
    font-size: 0 !important;
    transition: width .4s ease;
    background-color: var(--ok) !important;
}
.progress-bar-ok       { background: linear-gradient(90deg, #22c55e, #16a34a) !important; }
.progress-bar-careful  { background: linear-gradient(90deg, #60a5fa, #2563eb) !important; }
.progress-bar-warning  { background: linear-gradient(90deg, #fbbf24, #d97706) !important; }
.progress-bar-critical { background: linear-gradient(90deg, #f87171, #dc2626) !important; }
progress { background-color: var(--border-soft) !important; }

/* ---------- Bottom layout ---------- */
.bottom.container-fluid { padding: 0 !important; }
.bottom > .row { --bs-gutter-x: 14px; margin: 0 !important; gap: 0; }
.bottom > .row > div { padding: 0 !important; }
.bottom > .row > div.col-3 { padding-right: 14px !important; }

.sidebar-min .plugin + .plugin { margin-top: 14px; }
.bottom .plugin { height: auto; }

/* Section headings inside sidebar tables */
#network th, #diskio th, #fs th, #ports th,
#sensors th, #raid th, #wifi th, #folders th, #irq th, #containers th {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted) !important;
    border-bottom: 1px solid var(--border) !important;
    padding-bottom: 6px !important;
}

/* ---------- Process count line ---------- */
#processcount {
    padding: 10px 14px !important;
    font-family: var(--font-ui);
    color: var(--text-2);
}
#processcount .title { color: var(--text) !important; }

/* ---------- Process list ---------- */
#processlist { padding: 4px 6px !important; overflow: hidden; }
#processlist-table { max-height: none; }
#processlist thead th, #processlist thead td {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface) !important;
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 6px !important;
    cursor: pointer;
    white-space: nowrap;
}
#processlist thead .sort {
    color: var(--accent) !important;
    text-decoration: none !important;
}
#processlist thead .sort::after { content: " ▾"; }

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent !important;
    background-color: var(--surface-2) !important;
}
#processlist tbody tr { transition: background-color .12s; }
#processlist tbody tr:hover > * {
    background-color: #ecfdf5 !important;
}
#processlist tbody td {
    padding: 3px 6px !important;
    border: 0 !important;
    white-space: nowrap;
}

/* ---------- Status colours ---------- */
.ok, .ok_log         { color: var(--ok) !important; }
.careful, .careful_log { color: var(--careful) !important; }
.warning, .warning_log { color: var(--warning) !important; }
.critical, .critical_log { color: var(--critical) !important; }
.default             { color: var(--text-2) !important; }
.nice                { color: #7c3aed !important; }
.info                { color: var(--careful) !important; }

/* "_log" = headline / alert-tracked value → soft pill instead of solid block */
.ok_log, .careful_log, .warning_log, .critical_log,
td.ok_log, td.careful_log, td.warning_log, td.critical_log {
    background-color: transparent !important;
    font-weight: 600;
}
.ok_log > span, .careful_log > span, .warning_log > span, .critical_log > span {
    display: inline-block;
    border-radius: 6px;
    padding: 0 7px;
}
.ok_log > span       { background: var(--ok-bg); }
.careful_log > span  { background: var(--careful-bg); }
.warning_log > span  { background: var(--warning-bg); }
.critical_log > span { background: var(--critical-bg); }

/* ---------- Alerts ---------- */
#alerts {
    margin-top: 14px;
    background: var(--surface) !important;
    border: 1px solid var(--border);
    border-left: 4px solid var(--ok);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 16px !important;
    font-family: var(--font-ui);
    color: var(--text-2);
}
#alerts .warning, #alerts .warning_log { color: var(--warning) !important; }
#alerts .critical, #alerts .critical_log { color: var(--critical) !important; }

/* ---------- Links & misc ---------- */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.margin-bottom { margin-bottom: 0 !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    #app > main { padding: 10px; }
    .top { flex-wrap: wrap; }
    .top > div { flex: 1 1 45%; }
}
@media (max-width: 575px) {
    .top > div { flex: 1 1 100%; }
}