/* =====================================================================
   v2 — aplikasi input: token grafik, header, form, pekerjaan, project,
   dashboard, admin, navigasi bawah. Warna grafik divalidasi (CVD) per mode.
   ===================================================================== */
:root{--ch-noc:#16904D;--ch-ts:#1E68C8;--ch-hd:#DB6606;--ch-am:#7448C4;--ch-fin:#C99C00;--ch-hr:#9C5A1C;
  --danger:#B42318;--danger-soft:#FDE8E6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ch-noc:#22995B;--ch-ts:#2E78D9;--ch-hd:#D9781F;--ch-am:#7A5BD6;--ch-fin:#AD8C05;--ch-hr:#8A4F1C;--danger:#F08A80;--danger-soft:#3A1714}}
:root[data-theme="dark"]{--ch-noc:#22995B;--ch-ts:#2E78D9;--ch-hd:#D9781F;--ch-am:#7A5BD6;--ch-fin:#AD8C05;--ch-hr:#8A4F1C;--danger:#F08A80;--danger-soft:#3A1714}

/* header & logo INTINet */
.topbar-in{gap:10px 14px}
.logo{height:30px;width:auto;display:block;flex:none}
.brand{gap:12px}
.brand .brand-text{border-left:1px solid var(--line);padding-left:12px}
.login-brand{gap:14px}
.login-brand .logo{height:40px}
.login-brand .brand-text{border-left:1px solid var(--line);padding-left:14px}
.topsearch{position:relative;flex:1 1 160px;max-width:300px;min-width:0}
.tabs .tab{padding:6px 10px}
@media (max-width:1200px){.who-text{display:none}}
.topsearch .input{width:100%}
.gs-results{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:40;max-height:60vh;overflow:auto;padding:4px}
.gs-group{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.gs-item{display:grid;grid-template-columns:10px minmax(0,1fr);gap:8px;width:100%;text-align:left;border:0;background:none;padding:7px 10px;border-radius:7px;cursor:pointer;font:inherit;color:var(--fg)}
.gs-item:hover,.gs-item:focus-visible{background:var(--surface-2)}
.gs-item .dot{margin-top:5px}
.gs-item b{font-size:13px;font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-item small{color:var(--muted);font-size:11.5px}
.btn-new{flex:none}
.who{position:relative;margin-left:0}
/* notifikasi (lonceng) di header */
.notif{position:relative;margin-left:auto}
.notif-btn{display:grid;place-items:center;position:relative;width:36px;height:36px;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;cursor:pointer;padding:0;color:var(--fg);flex:none}
.notif-btn:hover,.notif-btn[aria-expanded="true"]{border-color:var(--fg);background:var(--surface-2)}
.notif-badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#c62828;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px var(--surface)}
.notif-menu{position:absolute;right:0;top:calc(100% + 6px);width:min(400px,calc(100vw - 32px));max-height:min(72vh,600px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:45;display:flex;flex-direction:column;overflow:hidden}
.nm-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
.nm-h b{font-size:13.5px}
.nm-perm{padding:8px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.nm-list{overflow:auto;display:flex;flex-direction:column;min-height:60px}
.nm-item{text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:10px 12px 10px 26px;cursor:pointer;font:inherit;color:var(--fg);display:flex;flex-direction:column;gap:2px;position:relative}
.nm-item:last-child{border-bottom:0}
.nm-item:hover{background:var(--surface-2)}
.nm-item.unread{background:var(--accent-soft)}
.nm-item.unread::before{content:"";position:absolute;left:11px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.nm-item b{font-size:13px}
.nm-item span{font-size:12px;color:var(--muted)}
.nm-item small{font-size:11px;color:var(--muted)}
.nm-empty{padding:18px 12px;text-align:center;margin:0}
/* avatar berfoto: gambar memenuhi lingkaran, cincin warna divisi di luar */
.avatar{overflow:hidden}
.avatar.has-foto{box-shadow:0 0 0 2px var(--dc,var(--muted));background:var(--surface-2)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.pf-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pf-foto{width:72px;height:72px;font-size:22px}
.pf-act{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.pf-act .hint{flex-basis:100%}
.who-btn{display:flex;align-items:center;gap:10px;border:0;background:none;cursor:pointer;padding:2px 6px 2px 2px;border-radius:9px;min-width:0}
.who-btn:hover{background:var(--surface-2)}
.who-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:220px;z-index:45;padding:6px;display:flex;flex-direction:column}
.who-menu .wm-h{padding:8px 10px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:12px;color:var(--muted)}
.who-menu .wm-h b{display:block;color:var(--fg);font-size:13px}
.who-menu button{text-align:left;border:0;background:none;padding:8px 10px;border-radius:7px;cursor:pointer;font:inherit;color:var(--fg)}
.who-menu button:hover{background:var(--surface-2)}

/* util */
.muted{color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filterbar .input{flex:1 1 180px;max-width:320px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.danger{background:var(--danger-soft);color:var(--danger)}
.btn-sm{padding:3px 9px;font-size:12px}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.btn-ghost{border-color:transparent;background:transparent}
.prio-Tinggi{color:var(--warn);font-weight:700}
.prio-Kritis{color:var(--danger);font-weight:700}
.warnbox{padding:10px 14px;background:var(--warn-soft);color:var(--warn);border-radius:10px;font-size:13px;font-weight:600}
.okbox{padding:10px 14px;background:var(--ok-soft);color:var(--ok);border-radius:10px;font-size:13px;font-weight:600}
.side-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.side .select{width:100%}
.ev.clickable{cursor:pointer}
.ev.clickable:hover h4{text-decoration:underline;text-underline-offset:2px}
.ev-meta .badge{font-size:10.5px}

/* modal & form */
.dialog{display:flex;flex-direction:column;max-height:calc(100vh - 32px)}
.dialog.lg{width:min(900px,100%)}
.dlg-h{flex:none}
.dlg-h p#modal-sub:empty{display:none}
.dlg-b{padding:4px 20px 14px;display:flex;flex-direction:column;gap:14px;overflow:auto;min-height:0}
.dlg-f{flex:none;gap:8px;flex-wrap:wrap;align-items:center}
.dlg-f .spacer{flex:1}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.form .full{grid-column:1 / -1}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld .lbl{font-size:10.5px}
.fld .input,.fld .select{width:100%}
textarea.input{min-height:84px;resize:vertical;line-height:1.45}
.fld .hint{font-size:11.5px;color:var(--muted)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;padding-top:4px}
.check input{width:16px;height:16px}
.kv-detail{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 18px;margin:0}
.kv-detail dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kv-detail dd{margin:2px 0 0;font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.detail-text{font-size:13.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.subh{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.subh .spacer{flex:1}
.formerr{color:var(--danger);font-size:12.5px;font-weight:600}

/* tindak lanjut (thread) & lampiran */
.thread{display:flex;flex-direction:column;gap:10px}
.msg{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.msg .avatar{width:28px;height:28px;font-size:11px}
.msg-b{background:var(--surface-2);border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg-h{font-size:11.5px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.msg-h b{color:var(--fg)}
.msg-st{font-size:11px;font-weight:700;color:var(--accent)}
.att{display:flex;flex-wrap:wrap;gap:6px}
.att .a{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:4px 8px 4px 10px;font-size:12px;background:var(--surface)}
.att .a a{color:var(--accent);text-decoration:none;font-weight:600;overflow-wrap:anywhere}
.att .a small{color:var(--muted)}
.att .a button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px;font-size:14px;line-height:1}
.att .a button:hover{color:var(--danger)}
.upl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.upl input[type=file]{font-size:12px;max-width:260px}

/* pekerjaan */
.klist{display:flex;flex-direction:column}
.krow{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:3px 10px;padding:10px 14px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;text-align:left;width:100%;font:inherit;color:var(--fg)}
.krow:last-child{border-bottom:0}
.krow:hover{background:var(--surface-2)}
.krow .dot{margin-top:5px}
.krow .kt{font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.krow .ks{grid-column:2;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 10px}
.krow .kr{grid-row:1 / span 2;grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.ksec{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;align-items:start}

/* project */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.pcard{text-align:left;padding:14px 16px;display:flex;flex-direction:column;gap:8px;cursor:pointer;font:inherit;color:var(--fg);border:1px solid var(--line);background:var(--surface);border-radius:12px;min-width:0}
.pcard:hover{border-color:var(--line-strong)}
.pcard h4{font-size:14px;font-weight:700}
.pcard .pc-sub{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 10px}
.prog{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--dc,var(--accent));border-radius:999px;transition:width .3s}
.prog-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.prog-row .prog{flex:1;min-width:60px}
.prog-row b{font-family:var(--f-mono);color:var(--fg);min-width:4ch;text-align:right}
.ps{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap}
.ps-Berjalan{background:var(--accent-soft);color:var(--accent)}
.ps-Perencanaan{background:var(--surface-2);color:var(--fg)}
.ps-Ditunda{background:var(--warn-soft);color:var(--warn)}
.ps-Selesai{background:var(--ok-soft);color:var(--ok)}
.ps-Dibatalkan{background:var(--surface-2);color:var(--muted);text-decoration:line-through}
.tahap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tahap li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:9px}
.tahap .num{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;font-weight:600;background:var(--surface-2);color:var(--muted)}
.tahap li.Selesai .num{background:var(--ok-soft);color:var(--ok)}
.tahap li.Proses .num{background:var(--accent-soft);color:var(--accent)}
.tahap li.Selesai .tn{color:var(--muted);text-decoration:line-through}
.tahap .tn{font-size:13px;font-weight:600}
.tahap .tm{font-size:11.5px;color:var(--muted)}
.tahap .ta{display:flex;gap:4px;align-items:center}
.tahap .ta .select{padding:3px 6px;font-size:12px}

/* dashboard */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.kpi b{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi span{font-size:12px;color:var(--muted)}
.kpi small{font-size:11.5px;color:var(--muted)}
.kpi small.up,.kpi .up{color:var(--warn)}
.kpi small.down{color:var(--ok)}
.kpi.alert b{color:var(--warn)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.dgrid .wide{grid-column:1 / -1}
.chart{position:relative;padding:4px 10px 8px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--muted);font-size:10.5px;font-family:var(--f-sans)}
.chart .lbl{fill:var(--fg);font-size:10.5px;font-weight:600;font-family:var(--f-mono)}
.chart path.bar{cursor:pointer}
.chart path.bar:hover{opacity:.85}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;padding:6px 16px 4px;color:var(--fg);align-items:center}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px;background:var(--lc)}
.tip{position:absolute;pointer-events:none;background:var(--fg);color:var(--bg);font-size:12px;padding:6px 10px;border-radius:8px;box-shadow:var(--shadow);transform:translate(-50%,calc(-100% - 10px));white-space:nowrap;z-index:5}
.tip b{display:block}
.hbars{display:flex;flex-direction:column;gap:6px;padding:8px 16px 12px}
.hbar{display:grid;grid-template-columns:minmax(0,1.2fr) 2fr auto;gap:6px 10px;align-items:center;font-size:12.5px;min-width:0}
.hbar .hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .bar{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden;position:relative}
.hbar .bar i{display:block;height:100%;background:var(--bc,var(--accent));border-radius:999px;min-width:2px}
.hbar .v{font-family:var(--f-mono);font-size:12px;min-width:3ch;text-align:right}
.panel-h .btn{margin-left:auto}
.dash-list{list-style:none;margin:0;padding:0}
.dash-list li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:2px 10px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:13px;align-items:start}
.dash-list li:last-child{border-bottom:0}
.dash-list li .dot{margin-top:5px}
.dash-list li small{grid-column:2;color:var(--muted);font-size:11.5px}
.dash-list li .r{grid-row:1 / span 2;grid-column:3;font-size:11.5px;color:var(--muted);text-align:right;white-space:nowrap}
.dash-list li.clickable{cursor:pointer}
.dash-list li.clickable:hover{background:var(--surface-2)}
.tbl-toggle{font-size:12px}
.chart-table{display:none;padding:0 16px 12px}
.chart-table.show{display:block}
.chart-table table{font-size:12px}

/* admin */
.subtabs{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:9px;overflow-x:auto;max-width:100%;align-self:flex-start}
.tbl-wrap .btn-sm{margin-right:4px}
td .cs,td .ps{display:inline-block}
.tag-no{color:var(--muted);font-size:11.5px}

/* menu hamburger (ponsel): drawer samping ala Android, menggeser dari kiri */
.hamb{display:flex;width:36px;height:36px;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;flex:none}
.tabs{display:none} /* navigasi utama kini di drawer, desktop maupun ponsel */
.hamb span{display:block;width:16px;height:2px;background:var(--fg);border-radius:2px}
.hamb[aria-expanded="true"]{background:var(--surface-2)}
/* Header (topbar) tetap selebar layar dan tidak bergeser; drawer & latar gelap mulai tepat di bawahnya (--topbar-h diisi JS dari tinggi topbar). */
.drawer-scrim{position:fixed;inset:calc(env(safe-area-inset-top,0px) + var(--topbar-h,58px)) 0 0 0;background:var(--scrim);z-index:49;opacity:0;pointer-events:none;transition:opacity .2s}
.drawer-scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--topbar-h,58px));bottom:0;left:0;width:min(64vw,320px);background:var(--surface);z-index:50;transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none}
.drawer-h{padding:18px 16px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.btn-ico{display:none;width:36px;height:36px;border:1px solid var(--line-strong);background:var(--surface);border-radius:9px;cursor:pointer;place-items:center;padding:0;flex:none;color:var(--fg)}
.btn-ico:hover{border-color:var(--fg)}
.sp-results{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.sp-results .gs-item{padding:10px 12px}
.sp-results .gs-item b{white-space:normal}
.drawer-h .du{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);min-width:0}
.drawer-h .du span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.drawer-h .du b{display:block;color:var(--fg);font-size:13.5px}
.drawer-nav{display:flex;flex-direction:column;padding:8px;gap:2px;overflow:auto}
.drawer-nav button{text-align:left;border:0;background:none;padding:12px;border-radius:9px;font:inherit;font-size:14.5px;font-weight:600;color:var(--fg);cursor:pointer}
.drawer-nav button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.drawer-nav .dsep{height:1px;background:var(--line);margin:6px 4px}
.drawer-f{margin-top:auto;padding:12px 16px;font-size:11.5px;color:var(--muted);border-top:1px solid var(--line)}
body.drawer-open{overflow:hidden}
/* Desktop: drawer menjadi panel samping tetap; tombol hamburger melipat/membukanya. */
@media (min-width:861px){
  .drawer{width:236px;transform:none;box-shadow:none;border-right:1px solid var(--line);z-index:29} /* di bawah topbar (30) karena mulai di bawah header */
  .drawer-scrim{display:none}
  body.nav-collapsed .drawer{transform:translateX(-100%)}
  /* Hanya main#main yang bergeser (header tetap selebar layar); login.php memakai stylesheet ini juga dan main.login-wrap tidak boleh ikut bergeser. */
  main#main{padding-left:236px;transition:padding-left .22s ease}
  body.nav-collapsed main#main{padding-left:0}
  .drawer-h{padding:16px 16px 12px}
  .drawer-nav button{font-size:14px;padding:11px 12px}
}
@media (prefers-reduced-motion:reduce){.drawer,.drawer-scrim{transition:none}}
@media (max-width:860px){
  .hamb{display:flex}
  .topbar .brand-text{display:none}
  .brand{gap:0}
  .tabs{display:none}
  .topsearch{display:none}
  .btn-ico{display:grid;margin-left:auto}
  .notif{margin-left:0}
  .notif-menu{position:fixed;left:16px;right:16px;top:calc(env(safe-area-inset-top,0px) + var(--topbar-h,58px) + 6px);width:auto;max-height:calc(100vh - var(--topbar-h,58px) - 40px)}
  .who{margin-left:0}
  main#main{padding-bottom:24px}
  .btn-new{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:36;border-radius:999px;padding:12px 18px;box-shadow:var(--shadow)}
  .form{grid-template-columns:minmax(0,1fr)}
  .dgrid{grid-template-columns:minmax(0,1fr)}
  .ksec{grid-template-columns:minmax(0,1fr)}
  .who-text{display:none}
  .pa{grid-template-columns:minmax(0,1fr)}
}

/* ===== galeri foto, lightbox, laporan & rekap (port Laporan TS, gaya CRM) ===== */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:8px}
.gal-item{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;min-width:0}
.gal-img{display:block;width:100%;aspect-ratio:4/3;background:var(--surface-2);border:0;padding:0;cursor:zoom-in;overflow:hidden}
.gal-img img{width:100%;height:100%;object-fit:cover;display:block}
.gal-item figcaption{padding:6px 8px;font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px;min-width:0}
.gal-kode{font-family:var(--f-mono);font-size:10.5px;color:var(--accent);font-weight:600}
.gal-ket{color:var(--fg);overflow-wrap:anywhere}
.gal-act{display:flex;gap:8px}
.gal-act .del{color:var(--danger)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:70;display:grid;place-items:center;padding:16px;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:90vh;border-radius:10px;box-shadow:var(--shadow);cursor:default}
.lightbox .lb-close{position:absolute;top:14px;right:14px}
.upl-2{align-items:center}
.pa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lap-table td small{display:block;color:var(--muted);font-size:11.5px}
.lap-table tr.clickable{cursor:pointer}
.lap-table tr.clickable:hover td{background:var(--surface-2)}
.panel-f{display:flex;gap:8px;align-items:center;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;flex-wrap:wrap}
.rekap-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed;min-width:900px}
.rekap-table th{background:var(--fg);color:var(--bg);font-weight:700;text-align:left;padding:9px 12px;font-size:11.5px;text-transform:none;letter-spacing:0;border-bottom:0}
.rekap-table th:nth-child(1){width:9%}.rekap-table th:nth-child(2){width:15%}.rekap-table th:nth-child(3){width:19%}.rekap-table th:nth-child(4){width:10%}.rekap-table th:nth-child(5){width:10%}.rekap-table th:nth-child(6){width:24%}.rekap-table th:nth-child(7){width:13%}
.rekap-table td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4;font-size:12.5px}
.rekap-table tbody tr:nth-child(even) td{background:var(--surface-2)}
.rekap-table tr.clickable{cursor:pointer}
.rekap-table td.c-date{text-align:right;white-space:nowrap;color:var(--muted)}
.rekap-table td.c-status{text-align:center;white-space:nowrap}
.rk-pill{display:inline-block;padding:1px 9px;border-radius:6px;font-weight:700;font-size:11px;border:1px solid transparent;white-space:nowrap}
.rk-done{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.rk-pending{background:var(--danger-soft);color:var(--danger);border-color:var(--danger)}
.rk-progress{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.rk-other{background:var(--surface-2);color:var(--muted);border-color:var(--line-strong)}
.check.full{grid-column:1 / -1}

/* Daftar pelanggan (data induk) & kepala Tiket pelanggan */
.sec-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.panel-h .count{font-size:12px;color:var(--muted);font-weight:500;margin-left:6px}
.dir-row{cursor:pointer}
.dir-row:hover td{background:var(--surface-2)}
.dir-row td small{display:block;color:var(--muted);font-size:11.5px;font-weight:400}
.dir-row .open{color:var(--warn);font-weight:700}
.p-sum{font-size:13px;color:var(--muted);margin-top:4px}

/* Tiket pelanggan: tabel jumlah tiket per divisi (mode daftar) dan mode detail satu kolom */
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.tk th.dv{white-space:normal;line-height:1.25;text-align:center;max-width:96px}
.tk th.dv .dot{display:inline-block;margin-right:5px;vertical-align:middle}
.tk td.dv{text-align:center;font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.tk td.dv.has{cursor:pointer}
.tk td.dv.has:hover{background:var(--accent-soft)}
.tk small.tk-open{color:var(--warn);font-weight:600}
.tk tr.tk-grp td{background:var(--surface-2);padding:7px 14px;font-size:12px;font-weight:600;color:var(--muted)}
.tk tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
.tk-bar{display:flex;align-items:center;gap:10px}
/* Tiket pelanggan di ponsel: kartu per pelanggan + chip per divisi (tanpa gulir kanan-kiri); desktop tetap tabel */
.tk-cards{display:none;flex-direction:column;gap:8px;padding:10px 12px 12px}
.tk-cgrp{font-size:12px;font-weight:600;color:var(--muted);padding:6px 2px 0}
.tk-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.tk-ch{display:flex;align-items:flex-start;gap:10px}
.tk-cn{flex:1;min-width:0}
.tk-cn b{display:block;font-size:14px}
.tk-cn small{display:block;color:var(--muted);font-size:12px}
.tk-chips{display:flex;flex-wrap:wrap;gap:6px}
.tk-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-strong);background:var(--surface-2);border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;color:var(--fg);cursor:pointer;line-height:1.3}
.tk-chip .dot{width:8px;height:8px}
.tk-chip b{font-family:var(--f-mono);font-size:12.5px}
.tk-chip em{font-style:normal;color:var(--warn);font-weight:600;font-size:11px}
.tk-chip.static{cursor:default}
.tk-chip:not(.static):hover{background:var(--accent-soft);border-color:var(--accent)}
.tk-ctotal{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 2px 0;margin-top:4px;border-top:2px solid var(--line);font-weight:700;font-size:13px}
.tk-ctotal .tk-open{font-style:normal}
@media (max-width:860px){#tk-tbl table.tk{display:none}.tk-cards{display:flex}#tk-tbl{overflow:visible}}
#tiket-detail{grid-template-columns:minmax(0,1fr)}

/* Layanan pelanggan: tombol expand di Daftar pelanggan, daftar layanan per perusahaan, dialog profil */
.exp-btn{width:26px;height:26px;border:1px solid var(--line);background:var(--surface);border-radius:7px;cursor:pointer;font-size:12px;line-height:1;color:var(--muted);padding:0}
.exp-btn:hover,.exp-btn[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
td.exp,th.exp{width:34px;padding-right:0}
tr.dir-sub td{background:var(--surface-2);padding:10px 14px 12px}
.lay{display:flex;flex-direction:column;gap:8px}
.lay-grp-h{display:flex;gap:8px;align-items:baseline;font-size:12.5px;margin-bottom:2px}
.lay-grp-h .muted{font-size:11.5px}
.lay-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0 6px 12px;border-left:2px solid var(--line);font-size:13px}
.lay-row .lay-n{min-width:160px}
.lay-row .lay-m{color:var(--muted);font-size:12px;flex:1 1 200px}
.lay-row .lay-act{margin-left:auto;display:flex;gap:4px}
.lay-foot{padding-top:2px}
.lay-empty{font-size:12.5px}
.pf-h{font-size:13px;font-weight:800;margin:16px 0 8px}
.tk-open{color:var(--warn);font-weight:600}

/* pil tahap layanan: PO (masih purchase order) & Berlangganan; Calon (pelanggan) */
.cs-PO{background:var(--surface-2);color:var(--c-am);box-shadow:inset 0 0 0 1px var(--c-am)}
.cs-Berlangganan{background:var(--ok-soft);color:var(--ok)}
.cs-Calon{background:var(--surface-2);color:var(--fg)}
.lay-n small{display:inline;margin-left:6px;font-size:11.5px;color:var(--muted)}

/* logo MyCRM di samping wordmark INTINet (topbar & login) */
.logo-app{height:34px;width:34px;display:block;flex:none;border-radius:8px}
.brand .brand-text{display:flex;flex-direction:row;align-items:center}
.login-brand .brand-text{flex-direction:row;align-items:center;gap:10px}
.login-brand .logo-app{height:42px;width:42px;border-radius:10px}
.dir-row td small .cs{font-size:10px;padding:0 6px;margin-right:4px;display:inline-block;margin-top:3px}

/* Laporan › Kendala berulang: rincian catatan per judul */
.kd-det{margin-top:4px;font-size:12px;color:var(--muted)}
.kd-det summary{cursor:pointer;color:var(--accent);font-weight:600}
.kd-det ul{margin:6px 0 0;padding-left:14px;display:flex;flex-direction:column;gap:3px}
.kd-det .linkbtn{font-size:11.5px}
td .open{color:var(--warn);font-weight:700}