/* sim.ordra.my — token diambil terus dari ordra includes/dk_theme.php.
   JANGAN tulis hex baru di sini; guna token supaya gelap/cerah kekal sepadan. */
:root {
    --bg:            #0A0908;
    --bg-raised:     #131312;
    --bg-card:       #1A1917;
    --bg-card-hover: #25241F;
    --border:        rgba(255,255,255,0.06);
    --border-hover:  rgba(255,255,255,0.12);
    --text:          #FAFAF9;
    --text-secondary:#B8B8B8;
    --text-muted:    #8B8B8B;
    --accent:        #D97706;
    --accent-hover:  #F59E0B;
    --accent-glow:   rgba(217,119,6,0.28);
    --accent-subtle: rgba(217,119,6,0.12);
    --green:         #65A30D;
    --green-subtle:  rgba(101,163,13,0.12);
    --red:           #DC2626;
    --red-subtle:    rgba(220,38,38,0.12);
    --amber:         #EAB308;
    --amber-subtle:  rgba(234,179,8,0.12);
    --blue:          #0EA5E9;
    --blue-subtle:   rgba(14,165,233,0.12);
    --radius:        10px;
    --radius-lg:     12px;
    --ease:          cubic-bezier(0.4,0,0.2,1);
    --row-hover:     rgba(255,255,255,0.025);
    color-scheme: dark;
}
[data-theme="light"] {
    --bg:            #f5f5f7;
    --bg-raised:     #ffffff;
    --bg-card:       #ffffff;
    --bg-card-hover: #fafafa;
    --border:        rgba(228,228,231,0.85);
    --border-hover:  rgba(212,212,216,1);
    --text:          #0a0a0a;
    --text-secondary:#52525b;
    --text-muted:    #71717a;
    --accent:        #D97706;
    --accent-hover:  #B45309;
    --accent-glow:   rgba(217,119,6,0.18);
    --accent-subtle: rgba(217,119,6,0.10);
    --green:         #10b981;
    --green-subtle:  rgba(16,185,129,0.08);
    --red:           #ef4444;
    --red-subtle:    rgba(239,68,68,0.08);
    --amber:         #f59e0b;
    --amber-subtle:  rgba(245,158,11,0.08);
    --blue:          #3b82f6;
    --blue-subtle:   rgba(59,130,246,0.08);
    --row-hover:     rgba(0,0,0,0.025);
    color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }

/* ---------------------------------------------------------------- chrome */
.top {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1rem; background: var(--bg-raised);
    border-bottom: 1px solid var(--border);
}
.brand { font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; }
.brand span { color: var(--accent); }
.top .spacer { flex: 1; }
.iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius);
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); cursor: pointer; font-size: .95rem;
    transition: all .2s var(--ease);
}
.iconbtn:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--border-hover); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 1rem 1rem 4rem; }

/* ----------------------------------------------------------------- hero */
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%), var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.25rem; margin-bottom: 1rem;
}
.hero::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--accent);
}
.hero.is-critical::before { background: var(--red); }
.hero.is-warn::before     { background: var(--amber); }
.hero.is-ok::before       { background: var(--green); }
.hero-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-muted); margin-bottom: .5rem;
}
.hero-main { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.hero-days { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.hero-unit { font-size: .95rem; color: var(--text-secondary); }
.hero-sub { margin-top: .55rem; color: var(--text-secondary); font-size: .88rem; }
.hero-sub b { color: var(--text); font-weight: 700; }

/* ---------------------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.stat {
    background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%), var(--bg-card);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem .9rem;
}
.stat-k { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.stat-v { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-top: .3rem; }
.stat-v.sm { font-size: 1.15rem; }

/* -------------------------------------------------------------- section */
.sec-head {
    display: flex; align-items: center; gap: .6rem;
    margin: 1.5rem 0 .7rem;
}
.sec-head h2 { font-size: .95rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.sec-head .count {
    font-size: .7rem; font-weight: 700; color: var(--text-muted);
    background: var(--bg-card); border: 1px solid var(--border);
    padding: .1rem .45rem; border-radius: 99px;
}
.sec-head .spacer { flex: 1; }

/* ----------------------------------------------------------------- list */
.card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
}
table.list { width: 100%; border-collapse: collapse; }
table.list th {
    text-align: left; padding: .55rem .9rem; font-size: .64rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.list td { padding: .7rem .9rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
table.list tbody tr { transition: background .15s var(--ease); }
table.list tbody tr:hover { background: var(--row-hover); }
.ph { font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sub { color: var(--text-muted); font-size: .76rem; margin-top: .12rem; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.is-stopped { opacity: .5; }

/* ----------------------------------------------------------------- pill */
.pill {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .7rem; font-weight: 700; white-space: nowrap;
    padding: .2rem .5rem; border-radius: 99px;
    border: 1px solid transparent;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.pill.ok       { color: var(--green); background: var(--green-subtle); }
.pill.warn     { color: var(--amber); background: var(--amber-subtle); }
.pill.critical,
.pill.dead     { color: var(--red);   background: var(--red-subtle); }
.pill.unknown,
.pill.nograce  { color: var(--blue);  background: var(--blue-subtle); }
.pill.stopped  { color: var(--text-muted); background: var(--row-hover); }

/* ----------------------------------------------------------------- btns */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    font: inherit; font-size: .8rem; font-weight: 600;
    padding: .42rem .8rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-card-hover);
    color: var(--text-secondary); cursor: pointer;
    transition: all .2s var(--ease); white-space: nowrap;
}
.btn:hover { color: var(--text); border-color: var(--border-hover); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-sm { font-size: .74rem; padding: .3rem .6rem; }
.btn-ghost { background: transparent; }
.row-actions { display: flex; gap: .4rem; justify-content: flex-end; }

/* ---------------------------------------------------------------- modal */
.modal {
    position: fixed; inset: 0; z-index: 60; display: none;
    align-items: center; justify-content: center; padding: 1rem;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
}
.modal.open { display: flex; }
.modal-box {
    width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto;
    background: var(--bg-raised); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 1.15rem;
}
.modal-box h3 { margin: 0 0 .2rem; font-size: 1rem; }
.modal-box .hint { color: var(--text-muted); font-size: .78rem; margin: 0 0 1rem; }
label.f { display: block; margin-bottom: .8rem; }
label.f .k {
    display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-muted); margin-bottom: .3rem;
}
input.i, select.i {
    width: 100%; font: inherit; font-size: 16px; /* 16px elak iOS zoom masa fokus */
    padding: .55rem .65rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
input.i:focus, select.i:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; }
.learn {
    font-size: .78rem; border-radius: var(--radius); padding: .55rem .65rem;
    background: var(--accent-subtle); border: 1px solid var(--accent-glow);
    color: var(--text-secondary); margin-bottom: .8rem;
}
.learn b { color: var(--text); }
.learn.none { background: var(--blue-subtle); border-color: transparent; }

/* ---------------------------------------------------------------- login */
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-box { width: 100%; max-width: 320px; text-align: center; }
.login-box .brand { font-size: 1.6rem; margin-bottom: .3rem; }
.login-box p { color: var(--text-muted); font-size: .82rem; margin: 0 0 1.4rem; }
.pin-in {
    width: 100%; font-size: 1.6rem; letter-spacing: .4em; text-align: center;
    font-variant-numeric: tabular-nums;
    padding: .7rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
}
.pin-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.err { color: var(--red); font-size: .8rem; margin-top: .8rem; }
.flash {
    padding: .6rem .8rem; border-radius: var(--radius); font-size: .83rem;
    background: var(--green-subtle); color: var(--green); margin-bottom: 1rem;
    border: 1px solid transparent;
}
.flash.bad { background: var(--red-subtle); color: var(--red); }
.empty { padding: 1.6rem .9rem; text-align: center; color: var(--text-muted); font-size: .85rem; }

/* --------------------------------------------------------------- mobile */
.m-only { display: none; }
@media (max-width: 760px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
    .hero-days { font-size: 2.2rem; }
    .d-only { display: none !important; }
    .m-only { display: block; }

    /* Jadual jadi kad — lajur sempit pada telefon buat nombor terpotong. */
    table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
    table.list thead { display: none; }
    /* padding-right beri ruang tetap untuk pil status yang melayang di sudut. */
    table.list tr { position: relative; padding: .85rem .9rem; padding-right: 5.75rem; border-bottom: 1px solid var(--border); }
    table.list tr:last-child { border-bottom: 0; }
    table.list td { border: 0; padding: 0; }
    /* width:auto WAJIB — td di atas dapat width:100%, dan sel mutlak yang selebar
       baris akan letak pilnya di kiri, bertindih dengan nombor telefon. */
    table.list td.c-status { position: absolute; top: .85rem; right: .9rem; width: auto; }
    table.list td.c-act { padding-right: 0; }
    table.list td.c-act { margin-top: .6rem; }
    .row-actions { justify-content: flex-start; }
    .kv { display: flex; justify-content: space-between; font-size: .78rem; color: var(--text-muted); }
    .kv b { color: var(--text-secondary); font-weight: 600; }
}