/*
 * Komponen dashboard. Tata letak responsif memakai container query pada .dash,
 * sehingga komponen yang sama juga rapi di dalam dialog.
 */
.dash { container-type: inline-size; container-name: dash; }
.stack-y { display: flex; flex-direction: column; gap: var(--sp-6); }

/* ---------- Panel & judul bagian ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.panel__title { font-size: var(--fs-base); font-weight: 600; }
.panel__note { font-size: var(--fs-base); color: var(--muted); }
.panel__body { padding: var(--sp-4); }
.panel__body--flush { padding: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.section-head h3 { font-size: var(--fs-base); font-weight: 600; color: var(--muted); }

.split { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@container dash (min-width: 56rem) {
    .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

/* ---------- KPI: satu angka utama (hero), tiga angka pendukung ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.kpis > :first-child, .kpis > :last-child { grid-column: 1 / -1; }
@container dash (min-width: 40rem) {
    .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpis > :last-child { grid-column: auto; }
}
@container dash (min-width: 60rem) {
    .kpis { grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr)); }
    .kpis > :first-child { grid-column: auto; }
}
.kpi {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5); background: var(--surface); text-align: left; cursor: pointer;
    border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kpi:hover, .kpi:active { border-color: var(--line-control); }
.kpi:focus-visible { outline-offset: 2px; }
.kpi__label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.kpi__row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--sp-3); margin-top: var(--sp-1); }
.kpi__value { font-size: var(--fs-kpi); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi__of { font-size: var(--fs-base); color: var(--muted); }
.kpi__value--alert { color: var(--tso-ink); }
.kpi__sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); min-height: 1.4rem; font-size: var(--fs-xs); color: var(--muted); }
.kpi__go { position: absolute; top: var(--sp-4); right: var(--sp-4); font-size: .8rem; color: var(--line-strong); transition: color var(--dur), transform var(--dur); }
.kpi:hover .kpi__go { color: var(--muted); transform: translateX(2px); }
.kpi__bar { width: 100%; margin-top: var(--sp-3); }

.kpis--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis--even > :first-child, .kpis--even > :last-child { grid-column: auto; }
@container dash (min-width: 48rem) {
    .kpis--even { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.kpi--static { cursor: default; }
.kpi--static:hover { border-color: var(--line); }
.kpi--alert.kpi--static:hover { border-color: var(--tso); }

.kpi--hero { padding-top: var(--sp-5); padding-bottom: var(--sp-5); }
.kpi--hero .kpi__value { font-size: var(--fs-hero); letter-spacing: -.04em; }
.kpi--hero .kpi__of { font-size: var(--fs-lg); }
.kpi--hero .kpi__sub { margin-top: var(--sp-1); }
/* Warna hanya dibelanjakan pada arti: tile gangguan menyala saat ada unit TSO. */
.kpi--alert { background: var(--tso-soft); border-color: var(--tso); }
.kpi--alert .kpi__label, .kpi--alert .kpi__sub { color: var(--tso-ink); }

/* ---------- Rincian per site: papan, satu baris per site ---------- */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.panel--sites { container-type: inline-size; container-name: sites; }
.site-list > li { padding: var(--sp-4); border-top: 1px solid var(--line); }
.site-list > li:first-child { border-top: 0; }
.site__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.site__name { font-size: var(--fs-base); font-weight: 600; }
.site__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.site__metrics dt { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }
.site__metrics dd { font-size: var(--fs-lg); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.3; }
.site__metrics dd.is-alert { color: var(--tso-ink); }
.stackbar { display: flex; gap: 2px; height: .625rem; overflow: hidden; background: var(--line); border-radius: var(--r-sm); }
.stackbar i { display: block; height: 100%; min-width: 0; }
.stackbar .s-ok { background: var(--ok); }
.stackbar .s-to { background: var(--to); }
.stackbar .s-tso { background: var(--tso); }
.stackbar .s-unk { background: var(--unk); }
.site__warn { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-base); color: var(--to-ink); }
.site__empty { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-base); color: var(--muted); }
.site__empty small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); }

/* ---------- Daftar gangguan ---------- */
.issue-list > li { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.issue-list > li:first-child { border-top: 0; }
.issue__top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.issue__site { font-size: var(--fs-base); color: var(--muted); }
.issue__top .chip { margin-left: auto; }
.issue__note { margin-top: var(--sp-1); font-size: var(--fs-base); }

/* ---------- Tabel (menjadi kartu bila wadah sempit) ---------- */
.table-wrap { container-type: inline-size; container-name: tbl; }
.table { width: 100%; border-collapse: collapse; }
.table th {
    text-align: left; font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
    padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--subtle);
}
.table td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); vertical-align: top; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr:hover { background: var(--bg); }
.cell-empty { color: var(--muted); }
.cell-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.table-note { padding: var(--sp-3) var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; border-bottom: 1px solid var(--line); font-size: var(--fs-base); color: var(--muted); }
@container tbl (max-width: 34rem) {
    .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table tr { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
    .table tbody tr:first-child { border-top: 0; }
    .table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-1) 0; border: 0; }
    .table td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--muted); padding-top: .1rem; }
    /* Kolom pertama (unit atau tanggal) menjadi judul kartu: tanpa label, satu baris dengan keterangan kecilnya. */
    .table td:first-child { display: block; padding-bottom: var(--sp-2); }
    .table td:first-child::before { display: none; }
    .table td:first-child .cell-stack { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); }
}

/* ---------- State: kosong, error, baik ---------- */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); }
/* Ikon polos berwarna arti, tanpa lingkaran/kotak berlatar di atas judul. */
.state__icon { font-size: 1.75rem; line-height: 1; color: var(--muted); margin-bottom: var(--sp-1); }
.state--good .state__icon { color: var(--ok-ink); }
.state--error .state__icon { color: var(--tso-ink); }
.state h3 { font-size: var(--fs-base); font-weight: 600; text-wrap: balance; }
.state p { max-width: 28rem; color: var(--muted); text-wrap: pretty; }
.state--compact { padding: var(--sp-6) var(--sp-4); }

.alert {
    display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5);
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--subtle);
}
.alert > i { font-size: 1.1rem; margin-top: 2px; }
.alert__body { flex: 1 1 14rem; min-width: 0; }
.alert__body strong { font-weight: 600; }
.alert--danger { background: var(--tso-soft); border-color: var(--tso); color: var(--tso-ink); }
.alert--danger .btn { border-color: var(--tso); color: var(--tso-ink); background: transparent; }
.alert--info { background: var(--accent-soft); border-color: transparent; color: var(--ink); }
.alert--info > i { color: var(--accent); }
.alert--tight { margin-bottom: var(--sp-3); }

/* ---------- Skeleton ---------- */
/* Denyut opacity saja (tanpa gradien, tanpa animasi properti tata letak); dimatikan oleh prefers-reduced-motion. */
.skel { display: block; border-radius: var(--r-sm); background: var(--line); animation: skel-pulse 1.4s ease-in-out infinite; }
.skel--sm { height: .75rem; width: 45%; }
.skel--lg { height: 2rem; width: 35%; margin: var(--sp-2) 0; }
.skel--bar { height: .5rem; width: 100%; }
.skel--row { height: 3.5rem; width: 100%; }
.is-refreshing { opacity: .55; transition: opacity var(--dur); pointer-events: none; }
@keyframes skel-pulse { 50% { opacity: .45; } }

/* ---------- Pemberitahuan (lonceng) ---------- */
.notif-badge {
    position: absolute; top: 3px; right: 2px; min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
    border-radius: var(--r-pill); background: var(--tso); color: #fff; font-size: .65rem; font-weight: 600; line-height: 1.05rem; text-align: center;
}
.notif-head { padding: var(--sp-3) var(--sp-4); font-weight: 600; border-bottom: 1px solid var(--line); }
.notif-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); }
.notif-item > i { color: var(--to-ink); font-size: 1.1rem; margin-top: 2px; }
.notif-item--info > i { color: var(--accent); }
.notif-item ul { margin-top: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); }
.notif-item li { overflow-wrap: anywhere; }
.notif-empty { padding: var(--sp-5) var(--sp-4); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); }
.notif-empty i { color: var(--ok); }
.notif-item + .notif-item { border-top: 1px solid var(--line); }

/* ---------- Dialog rincian ---------- */
.dialog { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(40rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); }
.dialog::backdrop { background: var(--overlay); }
.dialog__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line); }
.dialog__title { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -.01em; text-wrap: balance; }
.dialog__sub { margin-top: var(--sp-1); font-size: var(--fs-base); color: var(--muted); }
.dialog__body { overflow: auto; padding: 0; overscroll-behavior: contain; }
.dialog__foot { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.pick-list > li + li { border-top: 1px solid var(--line); }
.pick { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: none; border: 0; text-align: left; cursor: pointer; font-weight: 500; }
button.pick:hover, button.pick:active { background: var(--subtle); }
button.pick:focus-visible { outline-offset: -3px; }
.pick--off { color: var(--muted); cursor: default; font-weight: 400; }
.pick__n { color: var(--muted); font-weight: 400; white-space: nowrap; }
.role-tag { font-size: var(--fs-xs); color: var(--muted); margin-left: var(--sp-1); }

/* ---------- Halaman masuk ---------- */
.auth { display: grid; place-items: center; min-height: 100dvh; padding: var(--sp-4); }
.auth__card { width: 100%; max-width: 24rem; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--accent); }
.auth__brand svg { width: 1.75rem; height: 1.75rem; }
.auth__card h1 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; }

/* Wadah sempit (HP): metrik site 2x2, chip tidak melebar di tabel-kartu */
@container sites (max-width: 30rem) {
    .site__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-3); }
}
@container tbl (max-width: 34rem) {
    .table td > .chip { justify-self: start; }
}
/* Wadah lebar (panel site, bukan seluruh halaman): tiap site satu baris papan (nama | komposisi | empat angka). */
@container sites (min-width: 44rem) {
    .site-list > li.site { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(8rem, 1fr) 22rem; column-gap: var(--sp-5); align-items: center; }
    .site-list > li.site .site__head { margin: 0; }
    .site-list > li.site .site__metrics { margin: 0; }
    .site-list > li.site .site__warn { grid-column: 1 / -1; }
}

/* Sentuh: baris pilihan mendapat tinggi ketuk 44px; kartu KPI sudah lebih besar. */
@media (pointer: coarse) {
    .pick { min-height: 2.75rem; }
}