/* ==========================================================================
   Notive Studios Hub · hub.css
   Hanya gaya khusus Hub. Semua warna/jarak/radius dari /ui/tokens.css;
   tombol, input, tabel, dialog, status dari /ui/*.css.
   Personality Hub: Command Center — tenang, editorial, keputusan dulu.
   ========================================================================== */

/* ---------- tata letak halaman lama (dipakai halaman admin & formulir) ---------- */
.grid{display:grid;gap:var(--n-space-4);align-items:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mb{margin-bottom:var(--n-space-4)} .mt{margin-top:var(--n-space-4)}
@media (max-width:1100px){.g3{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.g2,.g4{grid-template-columns:minmax(0,1fr)}}

/* kartu = objek berdiri sendiri (formulir dengan tombol simpan, server, kartu unduhan) */
.kartu{background:var(--n-surface);border-radius:var(--n-radius-md);padding:var(--n-space-4) var(--n-space-5);box-shadow:var(--n-shadow-1);min-width:0}
.kh{display:flex;align-items:center;gap:10px;margin-bottom:var(--n-space-3);flex-wrap:wrap}
.kh h3,.kartu>h3{font-size:15px;font-weight:650}
.kh .sp{flex:1}
.kh .ket{font-size:var(--n-fs-meta);color:var(--n-text-2)}
a.ket{text-decoration:none}
.toolbar{display:flex;gap:var(--n-space-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--n-space-4)}
.toolbar .sp{flex:1}

/* angka ringkas (halaman detail): baris fakta tanpa kartu */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--n-space-5) var(--n-space-6);margin-bottom:var(--n-space-6);padding:var(--n-space-4) 0;border-top:1px solid var(--n-line);border-bottom:1px solid var(--n-line)}
.kpi{min-width:0}
.kpi .l{font-size:var(--n-fs-meta);color:var(--n-text-2)}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.03em;margin-top:2px;line-height:1.2;font-variant-numeric:tabular-nums}
.kpi .d{font-size:var(--n-fs-meta);margin-top:2px;color:var(--n-text-2)}

/* tab di dalam halaman = segmented */
.tabs{display:inline-flex;gap:2px;padding:3px;border-radius:var(--n-radius-md);background:var(--n-fill);max-width:100%;overflow-x:auto;margin-bottom:var(--n-space-5);scrollbar-width:none}
.tabs button{border:0;background:none;min-height:32px;padding:0 14px;border-radius:10px;color:var(--n-text-2);font-weight:500;cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--n-text)}
.tabs button.on{background:var(--n-surface);color:var(--n-text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.16)}
html[data-theme="dark"] .tabs button.on{background:#2C2C2F}
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--n-radius-md);background:var(--n-fill)}
.seg button{border:0;background:transparent;min-height:calc(var(--n-control-h) - 6px);padding:0 12px;border-radius:10px;cursor:pointer;color:var(--n-text-2);font-weight:500;font-size:13px;white-space:nowrap}
.seg button:hover{color:var(--n-text)}
.seg button.on{background:var(--n-surface);color:var(--n-text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.16)}
html[data-theme="dark"] .seg button.on{background:#2C2C2F}

/* daftar baris */
.daftar{display:flex;flex-direction:column}
.baris{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--n-line);color:inherit;text-decoration:none;min-width:0}
.baris:first-child{border-top:0}
a.baris:hover{background:var(--n-hover)}
.baris .t1{flex:1;min-width:0}
.baris .t1 b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.baris .t1 span{font-size:var(--n-fs-meta);color:var(--n-text-2)}

/* catatan */
.peringatan{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;margin-bottom:var(--n-space-4);border-radius:var(--n-radius-md);background:var(--n-surface-2);font-size:14px;color:var(--n-text)}
.peringatan::before{content:"";width:3px;align-self:stretch;border-radius:2px;background:var(--n-attention);flex:none}
.catatan-info{background:var(--n-surface-2);border-radius:var(--n-radius-md);padding:12px 14px;font-size:14px;color:var(--n-text-2)}
.catatan-info b{color:var(--n-text)}
.catatan-info ol,.catatan-info ul{margin:6px 0 0;padding-left:20px}
.catatan-info code,.mono-box{background:var(--n-fill);border-radius:var(--n-radius-sm);padding:1px 6px;font-family:var(--n-font-mono);font-size:12.5px;color:var(--n-text)}
.mono-box{display:block;padding:10px 12px;white-space:pre-wrap;word-break:break-all;margin-top:6px;border-radius:var(--n-radius-md)}

/* ---------- sel channel & gambar ---------- */
.chcell{display:flex;align-items:center;gap:10px;min-width:200px}
.chcell img,.chcell .ph{width:30px;height:30px;border-radius:50%;flex:none;background:var(--n-surface-3);object-fit:cover}
.chcell .chcell-t{min-width:0}
.chcell b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.chcell span{font-size:12px;color:var(--n-text-2)}
.chcell a{color:inherit;text-decoration:none}
.vthumb{width:72px;height:40px;border-radius:var(--n-radius-sm);object-fit:cover;background:var(--n-surface-3);flex:none;display:inline-block}
.av{border-radius:50%;flex:none;object-fit:cover;background:var(--n-surface-3);display:inline-block}
.av26{width:26px;height:26px}.av28{width:28px;height:28px}.av32{width:32px;height:32px}
.tagw{display:flex;gap:6px;flex-wrap:wrap}
.cell-sub{display:block;font-size:12px;color:var(--n-text-2);font-weight:400}

/* ---------- alert (kotak masuk) ---------- */
.al{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--n-line);align-items:flex-start}
.al:first-child{border-top:0}
.al .ik{width:4px;align-self:stretch;border-radius:2px;flex:none;background:var(--n-text-3)}
.al.kritis .ik{background:var(--n-critical)} .al.peringatan .ik{background:var(--n-attention)} .al.info .ik{background:var(--n-info)} .al.peluang .ik{background:var(--n-insight)}
.al .t1{flex:1;min-width:0} .al b{font-weight:650} .al p{margin:2px 0 0;color:var(--n-text-2);font-size:14px}
.al .m{font-size:12px;color:var(--n-text-3);margin-top:3px}
.al.ack{opacity:.6}
.al a{text-decoration:none}

/* ---------- kanban & kalender planner ---------- */
.kanban{display:flex;gap:var(--n-space-4);overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.kol{flex:0 0 272px;background:var(--n-surface-2);border-radius:var(--n-radius-md);display:flex;flex-direction:column;max-height:calc(100vh - 220px);transition:box-shadow var(--n-dur-fast)}
.kol .kolh{padding:12px 14px 6px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.kol .kolh .n{margin-left:auto;font-size:12px;color:var(--n-text-2)}
.kol .kolb{padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:60px}
.kol.over{box-shadow:inset 0 0 0 2px var(--n-chart)}
.kpl{background:var(--n-surface);border-radius:var(--n-radius-md);padding:10px 12px;cursor:grab;font-size:14px;box-shadow:var(--n-shadow-1);transition:box-shadow var(--n-dur-fast)}
.kpl:hover{box-shadow:0 0 0 1px var(--n-line-2),var(--n-shadow-1)}
.kpl:focus-visible{outline-offset:0}
.kpl b{display:block;font-weight:600;margin-bottom:6px;line-height:1.35}
.kpl .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--n-text-2)}
.kpl.telat{box-shadow:inset 3px 0 0 var(--n-critical),var(--n-shadow-1)}
.kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-radius:var(--n-radius-md);overflow:hidden;background:var(--n-surface);box-shadow:var(--n-shadow-1)}
.kal .kh2{padding:10px 6px 6px;font-size:12px;font-weight:600;color:var(--n-text-2);text-align:center}
.kal .hr{min-height:108px;border-top:1px solid var(--n-line);border-left:1px solid var(--n-line);padding:6px;font-size:12px}
.kal .hr:nth-child(7n+1){border-left:0}
.kal .hr .tg{font-weight:600;color:var(--n-text-2);margin-bottom:4px;display:inline-block;min-width:22px;padding:0 5px;border-radius:var(--n-radius-sm);text-align:center}
.kal .hr.ini .tg{color:var(--n-on-accent);background:var(--n-accent)}
.kal .hr.luar{background:var(--n-surface-2)}
.kal .hr.luar .tg{color:var(--n-text-3)}
.kal .ev{display:block;background:var(--n-fill);box-shadow:inset 3px 0 0 var(--n-text-3);border-radius:var(--n-radius-sm);padding:2px 6px 2px 8px;margin-bottom:3px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--n-text)}
.kal .ev.live{box-shadow:inset 3px 0 0 var(--n-live)} .kal .ev.short{box-shadow:inset 3px 0 0 var(--n-info)} .kal .ev.video{box-shadow:inset 3px 0 0 var(--n-chart)}
@media (max-width:720px){.kal .hr{min-height:70px;padding:4px}.kal .ev{font-size:10.5px;padding:1px 4px}}

/* ---------- server (objek: kartu sah) ---------- */
.srv{display:flex;flex-direction:column;gap:12px}
.srv .stat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.srv .stat span{display:block;font-size:12px;color:var(--n-text-2);font-weight:500}
.srv .stat b{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums}
.srv .stat .bar-h{margin-top:6px}
@media (max-width:860px){.srv .stat{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- detail channel ---------- */
.hdr-ch{display:flex;gap:16px;align-items:center;margin-bottom:var(--n-space-5);flex-wrap:wrap}
.hdr-ch>img,.hdr-ch>.ph{width:60px;height:60px;border-radius:50%;background:var(--n-surface-3);flex:none}
.hdr-ch h2{font-size:26px;font-weight:700;letter-spacing:-.03em}
.hdr-ch .hdr-t{flex:1;min-width:240px}
.hdr-ch .hdr-links{margin-top:6px;font-size:12.5px;color:var(--n-text-2)}

/* bilah pilihan massal (melayang = kaca) */
.sel-bar{position:sticky;bottom:16px;margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:var(--n-radius-md);
  background:var(--n-glass-strong);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 0 0 1.5px var(--n-chart),var(--n-shadow-float);z-index:5}
@media (max-width:860px){.sel-bar{bottom:84px}}

/* ---------- Ringkasan (Command Center) ----------
   Hierarki: kesimpulan (34px) → judul bagian (17px) → isi 14px → meta 12.5px.
   Tidak ada kartu untuk bagian; kartu hanya untuk objek (server, kartu planner). */
.hub-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--n-space-6);flex-wrap:wrap;padding-top:var(--n-space-2)}
.hub-hero .n-conclusion{max-width:26ch}
.hub-hero .n-conclusion.is-critical::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--n-critical);margin-right:12px;vertical-align:4px}
.hub-hero .n-eyebrow{margin-bottom:6px}
.hub-hero .hub-status{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-size:var(--n-fs-meta);color:var(--n-text-2)}
.hub-hero .hub-status .n-row{gap:16px}
@media (max-width:700px){.hub-hero .hub-status{align-items:flex-start}}
.hub-pulse{display:flex;gap:var(--n-space-6);flex-wrap:wrap;margin-top:var(--n-space-4);font-size:14px;color:var(--n-text-2)}
.hub-pulse b{color:var(--n-text);font-weight:650;font-variant-numeric:tabular-nums}
.hub-pulse .live b{color:var(--n-live)}
.hub-chart-wrap{padding-top:var(--n-space-2)}
.hub-ac-pop{width:400px;max-width:calc(100vw - 24px)}
.hub-ac .n-attention{padding:0 10px}
.hub-ac .n-empty{padding:18px 10px}
.hub-ops-time{font-size:var(--n-fs-meta);color:var(--n-text-2);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:84px}
.hub-ops-time b{display:block;color:var(--n-text);font-size:14px}
.hub-ctx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--n-space-6)}
.hub-ctx .hub-ctx-k{font-size:var(--n-fs-micro);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--n-text-3);margin-bottom:6px}
.hub-ctx .hub-ctx-v{font-size:17px;font-weight:650}
.hub-ctx .hub-ctx-s{font-size:var(--n-fs-meta);color:var(--n-text-2);margin-top:2px}
@media (max-width:900px){.hub-ctx{grid-template-columns:minmax(0,1fr)}}
.hub-suggest{margin-top:var(--n-space-5)}
.hub-sync{font-size:var(--n-fs-micro);color:var(--n-text-3)}
.hub-watch .n-item-end{min-width:56px}

/* login */
.hub-login{display:grid;place-items:center;min-height:100vh;padding:20px}
.hub-login .box{width:100%;max-width:380px}
.hub-login .lg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:24px}
.hub-login .lg img{width:60px;height:60px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.hub-login .lg b{font-size:22px;font-weight:700;display:block;letter-spacing:-.025em}
.hub-login .lg span{font-size:14px;color:var(--n-text-2)}
.hub-login form{padding:24px}
.hub-login .fld{margin-bottom:14px}
.hub-login .err{color:var(--n-critical);font-size:13px;min-height:20px;margin:4px 0 10px}
.hub-login .btn.pri{width:100%;min-height:44px}
.hub-login .foot{font-size:12px;color:var(--n-text-3);text-align:center;margin-top:18px}

/* ---------- tambahan Notive OS (2027) ---------- */
.n-user-t{flex:1;min-width:0}
.hub-dash{gap:var(--n-space-8)}
.hub-sub{font-size:var(--n-fs-micro);font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--n-text-3);margin:var(--n-space-2) 0 var(--n-space-1)}
.hub-sub.mt{margin-top:var(--n-space-4)}
.hub-sync{font-size:var(--n-fs-micro);color:var(--n-text-3);margin-top:calc(var(--n-space-4) * -1)}
.hub-chart-wrap{margin-top:var(--n-space-5)}
.hub-ops .n-item{align-items:flex-start}
.hub-market .n-fact-v{font-size:18px}
.hub-market .n-fact-l{margin-bottom:4px}
.hub-facts{padding:var(--n-space-4) 0;border-top:1px solid var(--n-line);border-bottom:1px solid var(--n-line)}
.hub-ctx .hub-ctx-saran{font-size:15px;line-height:1.4}
.hub-ctx-saran+.hub-ctx-s{margin-bottom:var(--n-space-3)}
.hub-crit{color:var(--n-critical);font-weight:600}
.hub-warn{color:var(--n-attention);font-weight:600}
.hub-err{font-size:var(--n-fs-micro);color:var(--n-critical)}
.hub-search{flex:1 1 240px;max-width:340px}
.hub-filter-reset{display:flex;align-items:flex-end}
.hub-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--n-space-4)}
.hub-chcard{display:flex;flex-direction:column;gap:var(--n-space-3);color:inherit}
.hub-chcard-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--n-space-2)}
.hub-chcard-facts .n-fact-v{font-size:17px}
.n-insight-of{font-size:.55em;font-weight:600;color:var(--n-text-3);letter-spacing:0}
.n-trend.warn{color:var(--n-attention)}
.n-item-more{font-size:var(--n-fs-meta);color:var(--n-text-2)}
.hdr-ch .hdr-meta{margin-top:6px;gap:10px}
.hub-measure{max-width:72ch}
.hub-meter{width:120px;min-width:80px;flex:none}
.hub-inline{display:inline-flex;margin-left:8px}
.hub-alerts{display:flex;flex-direction:column}
.hub-alertgrp.is-quiet{opacity:.75}
.hub-servers{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:var(--n-space-4)}
@media (max-width:420px){.hub-servers{grid-template-columns:minmax(0,1fr)}}
.srv.is-down{box-shadow:inset 3px 0 0 var(--n-critical),var(--n-shadow-1)}
.hub-bulan{min-width:150px;text-align:center}
.kpl-meta{margin-top:4px}
.kpl.drag{opacity:.5}
.kal .ev{width:100%;border:0;text-align:left;font:inherit;font-size:12px}
.kal .ev:focus-visible{outline-offset:0}
.hub-ce-add{margin-top:6px}
.hub-ce-add .inp{flex:1;min-width:160px}
.hub-hasil{margin:6px 0 0;padding-left:18px;max-height:220px;overflow:auto}
.hub-hasil li.skip{color:var(--n-text-2)}
.hub-niche-tarif{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:600px){.hub-niche-tarif{grid-template-columns:minmax(0,1fr)}}
.hub-niche-row{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.hub-niche-row span{flex:1;min-width:0}
.hub-niche-row .inp{width:110px;flex:none}
.hub-wrap{white-space:normal!important}
.hub-narrow{max-width:820px}
.hub-narrow-s{max-width:200px}
.hub-narrow-l{max-width:1000px}
.hub-readonly{opacity:.8;display:flex;align-items:center}
.full-row{grid-column:1/-1}
.hub-steps{line-height:1.9}
.hub-secret{display:inline-block;font-size:14px;letter-spacing:.12em}
.hub-otp{width:140px;font-size:16px!important;letter-spacing:.2em}
.hub-full{width:100%;margin-bottom:6px}
.hub-scroll-list{max-height:240px;overflow:auto;border-radius:var(--n-radius-md);box-shadow:inset 0 0 0 1px var(--n-line-2);padding:4px 10px}
.hub-chk{gap:6px}
.hub-chk input{width:15px;height:15px}
.n-state[data-state=plain]{color:var(--n-text-2);font-weight:500}
.n-state[data-state=plain]::before{display:none}

/* HP: Ringkasan & Channel lebih ringkas — monitor, cek, tindak */
@media (max-width:860px){
  .hub-dash{gap:var(--n-space-7)}
  .hub-hero .n-hero-side{display:none}
  .hub-pulse{gap:var(--n-space-2) var(--n-space-4);font-size:13px}
  .hub-search{max-width:none}
  .hub-chlist #vw,.hub-chlist #kolCh{display:none}
  .hdr-ch>img,.hdr-ch>.ph{width:44px;height:44px}
  .hdr-ch h2{font-size:21px}
  .hub-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}