/* =====================================================================
 * kantor.css — tampilan Sistem Kantor
 * Tema dipilih lewat <body data-theme="...">:
 *   oren   → mengikuti applytojapan (krem-oranye, Zen Maru Gothic)
 *   nippon → merah-putih Jepang (hinomaru, sumi, Shippori Mincho)
 * ===================================================================== */
:root{
  --bg:#F7F7F5; --card:#fff; --ink:#1E2430; --muted:#667085; --line:#E4E7EC; --soft:#F2F4F7;
  --pri:#2563A8; --pri2:#1D4F86; --pri-ink:#fff; --accent:#2563A8; --accent-ink:#fff;
  --ok:#1E7A4F; --okbg:#E5F4EC; --warn:#9A5B0C; --warnbg:#FFF3E0; --bad:#B42318; --badbg:#FDECEA;
  --c-in:#2563A8; --c-out:#BC002D;
  --r:12px; --rs:9px; --btnr:9px; --sh:0 1px 2px rgba(16,24,40,.05),0 2px 10px rgba(16,24,40,.05);
  --display:system-ui,sans-serif; --body:system-ui,sans-serif; --mincho:"Shippori Mincho","Noto Serif JP","Yu Mincho",serif;
  color-scheme:light;
}
/* ---------- tema applytojapan (oren) ---------- */
body[data-theme=oren]{
  --bg:#FFF6EA; --card:#FFFFFF; --ink:#3B2410; --muted:#7D6048; --line:#EBD9C3; --soft:#FFF1E0;
  --pri:#E8822A; --pri2:#B4570F; --pri-ink:#2A1608; --accent:#B4570F; --accent-ink:#fff;
  --ok:#2E8452; --okbg:#E3F3E8; --warn:#9A5B0C; --warnbg:#FFF0D9; --bad:#C2452D; --badbg:#FBE4DD;
  --c-in:#3E7CB8; --c-out:#D9731F;
  --r:20px; --rs:12px; --btnr:999px; --sh:0 4px 0 #FDE7CF;
  --display:"Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
}
/* ---------- tema mode demo (netral, beda dari tema kantor asli) ---------- */
body[data-theme=demo]{
  --bg:#F3F6F6; --card:#FFFFFF; --ink:#16302F; --muted:#5B6F6E; --line:#D9E3E2; --soft:#EAF2F1;
  --pri:#0F766E; --pri2:#0B5C56; --pri-ink:#fff; --accent:#0B5C56; --accent-ink:#fff;
  --ok:#1E7A4F; --okbg:#E5F4EC; --warn:#9A5B0C; --warnbg:#FFF3E0; --bad:#B42318; --badbg:#FDECEA;
  --c-in:#2a78d6; --c-out:#eb6834;
  --r:14px; --rs:10px; --btnr:10px; --sh:0 1px 2px rgba(16,40,40,.06),0 4px 14px rgba(16,40,40,.06);
  --display:"Segoe UI","Hiragino Sans","Noto Sans JP",system-ui,sans-serif; --body:"Segoe UI","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
}
body[data-theme=demo] .brand-mark{border-radius:12px;background:linear-gradient(135deg,#0F766E,#14B8A6)}
/* ---------- tema merah-putih Jepang (nippon) ---------- */
body[data-theme=nippon]{
  --bg:#FAF8F5; --card:#FFFFFF; --ink:#1C1A1A; --muted:#6B6460; --line:#E8E1DA; --soft:#F6F1EC;
  --pri:#BC002D; --pri2:#94001F; --pri-ink:#fff; --accent:#1C1A1A; --accent-ink:#fff;
  --ok:#2F6B3F; --okbg:#E6F0E8; --warn:#8A5A00; --warnbg:#FBF0DA; --bad:#BC002D; --badbg:#FBE6EA;
  --c-in:#2563A8; --c-out:#BC002D;
  --r:6px; --rs:4px; --btnr:4px; --sh:0 1px 0 rgba(28,26,26,.06),0 6px 18px -10px rgba(28,26,26,.18);
  --display:"Shippori Mincho","Noto Serif JP",serif;
  --body:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);max-width:100%;overflow-x:hidden}
body.noscroll{overflow:hidden}
.hidden{display:none!important}
a{color:var(--pri2)}
h1,h2,h3,h4{margin:0;line-height:1.25;font-family:var(--display)}
h2{font-size:1.4rem}h3{font-size:1.05rem;margin:0 0 10px}h4{margin:14px 0 6px}
code{background:var(--soft);padding:1px 5px;border-radius:4px;font-size:.85em}
.muted{color:var(--muted)}.small{font-size:.84rem}
.err{color:var(--bad);font-size:.9rem;min-height:1.2em}
label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin:10px 0 4px}
input,select,textarea{width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--rs);padding:9px 11px;margin-top:4px}
textarea{resize:vertical;min-height:64px}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--pri) 30%,transparent);border-color:var(--pri)}
input[readonly]{background:var(--soft)}
label.inline{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:600}
label.inline input,label.inline select{width:auto;margin:0}
label.check{display:inline-flex;align-items:center;gap:8px;font-weight:500;margin:8px 14px 4px 0}
label.check input{width:auto;margin:0}
.btn{font:inherit;font-weight:700;font-size:.9rem;border:1px solid transparent;border-radius:var(--btnr);padding:9px 16px;cursor:pointer;background:var(--soft);color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;line-height:1.2}
.btn:hover{filter:brightness(.96)}
.btn.primary{background:var(--pri);color:var(--pri-ink)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.danger{background:var(--badbg);color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:.8rem}
.btn.wide{width:100%;justify-content:center;margin-top:14px}
.btn.big{padding:16px;font-size:1.05rem}
.btn[disabled]{opacity:.55;cursor:wait}
body[data-theme=oren] .btn.primary{box-shadow:0 3px 0 var(--pri2)}
.link{background:none;border:0;padding:0;font:inherit;color:var(--pri2);cursor:pointer;text-decoration:underline;font-size:.85rem}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--pri);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}
.loading{padding:30px;text-align:center;color:var(--muted)}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-card{background:var(--card);border-radius:calc(var(--r) + 4px);box-shadow:var(--sh);padding:28px;width:100%;max-width:400px;position:relative;overflow:hidden}
.login-card h1{font-size:1.45rem;margin:14px 0 4px}
.demo{background:var(--soft);border-radius:var(--rs);padding:10px 12px;margin-top:14px;font-size:.84rem}
.demo .btn{margin:3px 2px 0 0}
body[data-theme=nippon] .login{background:radial-gradient(circle at 50% 18%,rgba(188,0,45,.08) 0 120px,transparent 121px),var(--bg)}
body[data-theme=nippon] .login-card{border-top:4px solid var(--pri)}

/* ---------- brand ---------- */
.brand-mark{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:var(--rs);background:var(--pri);color:var(--pri-ink);font-weight:800;letter-spacing:.5px;font-family:var(--display);overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:contain;background:#fff}
.brand-mark.sm{width:36px;height:36px;font-size:.78rem}
body[data-theme=nippon] .brand-mark{border-radius:50%;background:var(--pri)}
body[data-theme=nippon] .brand-mark.logo-img{border-radius:6px;background:#fff;border:1px solid var(--line)}

/* ---------- header ---------- */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
body[data-theme=nippon] .top{border-top:4px solid var(--pri)}
.top-in{max-width:1220px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;min-width:0}.logo b{font-family:var(--display);font-size:1.05rem}.logo small{display:block;color:var(--muted);font-size:.78rem}
.me{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.88rem}
.role{background:var(--soft);border-radius:99px;padding:2px 10px;font-size:.75rem;font-weight:700;color:var(--pri2)}
.tabs{max-width:1220px;margin:0 auto;padding:0 10px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{font:inherit;font-size:.9rem;font-weight:700;color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:10px 12px;cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--pri)}
.badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--pri);color:var(--pri-ink);font-size:.72rem}
main{max-width:1220px;margin:0 auto;padding:18px 16px 70px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:4px 0 16px}.head p{margin:4px 0 0;max-width:720px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.actions.top{margin-top:0}
.actions select{width:auto;margin:0}
.actions.sticky{position:sticky;bottom:-18px;background:var(--card);padding:12px 0 4px;border-top:1px solid var(--line)}
.foot{max-width:1220px;margin:0 auto;padding:18px 16px 40px;text-align:center;color:var(--muted);font-size:.82rem}
.foot a{color:inherit;font-weight:700}
.powered{display:inline-flex;align-items:center;gap:8px}
body[data-theme=nippon] .powered::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pri)}

/* ---------- panels ---------- */
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px;margin-bottom:14px;min-width:0}
body[data-theme=nippon] .panel{border:1px solid var(--line)}
body[data-theme=oren] .panel{border:2px solid var(--line)}
.panel.narrow{max-width:520px}
.panel.warnp{border-left:4px solid var(--warn)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px}
.grid4{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 10px}
.span2{grid-column:span 2}
.grid-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:0}
.grid-dash .panel{margin-bottom:14px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters input[type=search]{flex:1 1 220px;margin:0;width:auto}
.filters select{flex:0 1 200px;margin:0;width:auto}
.seg{display:inline-flex;background:var(--soft);border-radius:var(--btnr);padding:3px;margin-bottom:12px;gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-weight:700;font-size:.86rem;border:0;background:none;padding:6px 14px;border-radius:var(--btnr);cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.stat{background:var(--card);border-radius:var(--rs);box-shadow:var(--sh);padding:8px 14px;font-size:.82rem;color:var(--muted)}
.stat b{display:block;font-size:1.1rem;color:var(--ink)}
.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 12px}
.calc>div{background:var(--soft);border-radius:var(--rs);padding:10px 12px;border-left:4px solid var(--line)}
.calc>div.in{border-left-color:var(--c-in)}.calc>div.out{border-left-color:var(--c-out)}.calc>div.n{border-left-color:var(--ink)}
.calc small{display:block;color:var(--muted);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.calc b{font-size:1.12rem;font-variant-numeric:tabular-nums}
.note{background:var(--warnbg);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:var(--rs);padding:10px 12px;font-size:.88rem;margin:10px 0}
.note.bad{background:var(--badbg);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.empty{background:var(--card);border-radius:var(--r);padding:34px;text-align:center;color:var(--muted);box-shadow:var(--sh)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);border-bottom:1px solid var(--line);padding:8px;white-space:nowrap}
.tbl td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top}
.tbl tfoot td{border-bottom:0;border-top:2px solid var(--line)}
.tbl.click tbody tr{cursor:pointer}.tbl.click tbody tr:hover{background:var(--soft)}
.r{text-align:right;font-variant-numeric:tabular-nums}.c{text-align:center}.nowrap{white-space:nowrap}
td.neg,.tbl td.bad{color:var(--bad)}
.tbl td.bar{width:30%}.tbl td.bar span{display:block;height:8px;border-radius:4px;background:var(--pri);min-width:2px}
.mini{width:100%;font-size:.86rem;border-collapse:collapse}.mini td{padding:4px 0;border-bottom:1px dashed var(--line)}
.kv{border-collapse:collapse;width:100%;font-size:.9rem;margin-bottom:10px}.kv td{padding:5px 8px 5px 0;vertical-align:top}.kv td:first-child{color:var(--muted);width:130px;white-space:nowrap}
.chip{display:inline-block;background:var(--soft);border-radius:99px;padding:2px 9px;font-size:.74rem;font-weight:700;color:var(--ink);white-space:nowrap}
.chip.ok{background:var(--okbg);color:var(--ok)}.chip.warn{background:var(--warnbg);color:var(--warn)}.chip.bad{background:var(--badbg);color:var(--bad)}
.track{display:flex;flex-wrap:wrap;gap:3px;align-items:center;font-size:.74rem}.track i{color:var(--muted);font-style:normal}
.tstep{border:1px solid var(--line);border-radius:99px;padding:1px 8px;color:var(--muted);white-space:nowrap}
.tstep.ok{border-color:var(--ok);color:var(--ok);background:var(--okbg)}.tstep.bad{border-color:var(--bad);color:var(--bad);background:var(--badbg)}
.tl{margin:0;padding-left:18px}.tl li{margin:4px 0}.tl li.ok::marker{color:var(--ok)}.tl li.bad::marker{color:var(--bad)}

/* ---------- beranda ---------- */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.qbtn{font:inherit;border:1px solid var(--line);background:var(--soft);border-radius:var(--rs);padding:12px 6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:1.4rem}
.qbtn span{font-size:.8rem;font-weight:700}
.qbtn:hover{border-color:var(--pri)}
.mrow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);cursor:pointer;font-size:.9rem}
.mrow:last-child{border-bottom:0}
.inbox{display:flex;flex-direction:column;gap:8px}
.ibx{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--rs);cursor:pointer;flex-wrap:wrap}
.ibx:hover{border-color:var(--pri);background:var(--soft)}
.ibx-r{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tag{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:1px 7px;border-radius:4px;margin-right:6px;background:var(--soft);color:var(--pri2)}
.tag.reimburse{background:var(--okbg);color:var(--ok)}.tag.izin{background:var(--warnbg);color:var(--warn)}

/* ---------- absensi ---------- */
.absen-card{text-align:center}
.clock{font-family:var(--display);font-size:3.2rem;font-weight:800;letter-spacing:1px;line-height:1.1;font-variant-numeric:tabular-nums}
body[data-theme=nippon] .clock{color:var(--pri)}
.cam{margin:12px 0}.cam video{width:100%;max-width:320px;border-radius:var(--rs);transform:scaleX(-1);display:block;margin:0 auto 8px;background:#000}

/* ---------- forms: rows ---------- */
.irows{display:flex;flex-direction:column;gap:6px}
.irow{display:grid;grid-template-columns:2fr 1.2fr 70px 130px 110px 30px;gap:6px;align-items:center}
.irows.rb .irow{grid-template-columns:140px 2fr 70px 130px 110px 30px}
#fCash .irow{grid-template-columns:2fr 70px 140px 120px 30px}
.irow input{margin:0}
.irow .itot{text-align:right;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.irow .rm{background:none;border:0;color:var(--bad);cursor:pointer;font-size:1rem}
.gtot{text-align:right;margin:10px 0 0;font-size:1.05rem}.gtot b{font-size:1.25rem}
.drop{position:relative;border:2px dashed var(--line);border-radius:var(--rs);padding:14px;text-align:center;color:var(--muted);background:var(--soft);font-size:.9rem}
.drop.over{border-color:var(--pri)}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.filelist{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:.84rem}
.filelist div{display:flex;justify-content:space-between;gap:8px;background:var(--soft);border-radius:6px;padding:4px 8px;overflow-wrap:anywhere}
.filelist button{background:none;border:0;color:var(--bad);cursor:pointer}
.roles{display:flex;flex-wrap:wrap}
.decide{background:var(--soft);border-radius:var(--rs);padding:4px 12px 12px;margin-top:12px}
.row{display:flex;gap:6px;align-items:center}.row input{margin:0}
.preview-img{max-width:100%;border-radius:var(--rs);display:block;margin:8px auto}

/* ---------- surat ---------- */
.tpl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:14px}
.tplbtn{font:inherit;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;display:flex;gap:10px;align-items:center;box-shadow:var(--sh)}
.tplbtn span{font-size:1.5rem}.tplbtn:hover{border-color:var(--pri)}
.editor{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px;align-items:start}
.ed-form{max-height:70vh;overflow:auto;padding-right:6px}
.ed-prev{background:#E9E6E2;border-radius:var(--rs);padding:16px;max-height:70vh;overflow:auto}
.paper{background:#fff;width:100%;max-width:794px;margin:0 auto;padding:40px 46px;box-shadow:0 2px 12px rgba(0,0,0,.12);outline:none;color:#111}
.paper:focus{box-shadow:0 0 0 2px var(--pri),0 2px 12px rgba(0,0,0,.12)}

/* ---------- modal ---------- */
#modal{position:fixed;inset:0;background:rgba(20,16,14,.45);z-index:50;display:none;align-items:flex-start;justify-content:center;padding:4vh 12px;overflow:auto}
#modal.on{display:flex}
.mbox{background:var(--card);border-radius:var(--r);width:100%;max-width:560px;padding:20px 22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.mbox.wide{max-width:900px}.mbox.xl{max-width:1240px}
.mbox h3{padding-right:30px}
.mclose{position:absolute;top:10px;right:10px;border:0;background:var(--soft);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(30px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:var(--btnr);font-size:.9rem;opacity:0;transition:.25s;z-index:60;max-width:92vw;pointer-events:none}
#toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- chart ---------- */
.chart{position:relative;margin-bottom:10px}
.chart svg{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:11px;font-family:var(--body)}
.chart path{stroke:var(--card);stroke-width:1}
.chart path.proj{fill-opacity:.4!important}
.chart path:hover{fill-opacity:.8}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-bottom:4px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legend i.projkey{background:repeating-linear-gradient(45deg,var(--muted) 0 2px,transparent 2px 5px);opacity:.6}
.tip{position:absolute;background:var(--ink);color:#fff;font-size:.8rem;padding:5px 9px;border-radius:6px;pointer-events:none;white-space:nowrap;z-index:2}

/* =================== DOKUMEN (pratinjau & cetak) =================== */
#print{display:none}
.doc{font-family:"Calibri","Carlito","Segoe UI",Arial,sans-serif;color:#111;font-size:11pt;line-height:1.45}
.doc-letter,.doc-mou,.doc-report{font-family:"Times New Roman","Liberation Serif",serif;font-size:12pt;line-height:1.5}
.doc-mou{font-family:"Times New Roman","Liberation Serif",serif;font-size:10.5pt}
.doc .jp,.doc [lang=ja]{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","Shippori Mincho",serif}
.doc p{margin:0 0 6px}.doc .j{text-align:justify}.doc .ctr{text-align:center}.doc .u{text-decoration:underline}
.doc h1{font-family:inherit;font-size:16pt;letter-spacing:.5px}
.doc h3{font-family:inherit;font-size:12.5pt;margin:8px 0 4px}
.doc h4{font-family:inherit;font-size:11pt;margin:12px 0 4px;text-align:center}
.doc-logo{height:44px;width:auto}
.doc-wordmark{font-weight:800;font-size:15pt;color:#A3243B;letter-spacing:.5px}
.kop{display:flex;gap:14px;align-items:center;justify-content:center;border-bottom:3px double #111;padding-bottom:8px;margin-bottom:16px;text-align:center}
.kop img{height:62px}.kop h2{font-family:inherit;font-size:16pt;margin:0;letter-spacing:1px}.kop p{margin:0;font-size:10pt}
.doc .meta{border-collapse:collapse;margin:0 0 12px}.doc .meta td{padding:0 8px 0 0;vertical-align:top}.doc .meta.in{margin-left:28px}
.doc .to{margin:14px 0}
.ttd{margin:24px 0 0 auto;width:260px;text-align:center}.ttd p{margin:0}
.ttd-space{height:70px}.ttd-name{font-weight:700;text-decoration:underline}
.doc table.list{border-collapse:collapse;margin:6px 0 10px 28px}.doc table.list td,.doc table.list th{border:1px solid #444;padding:3px 10px;font-size:11pt}
.doc ol.sub,.doc ol.parties{margin:0 0 8px;padding-left:22px;text-align:justify}
.mou-sig{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;text-align:center;page-break-inside:avoid}
.mou-sig.id{margin-top:26px}
.bi{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bi .en,.bi .jp{min-width:0}
.bi .li{display:flex;gap:6px;text-align:justify}.bi .li span{flex:0 0 18px}
.doc .pt{border-collapse:collapse;font-size:inherit;margin:4px 0 8px}.doc .pt td{padding:1px 6px 1px 0;vertical-align:top}.doc .pt td:first-child{white-space:nowrap}
/* formulir (FR / PV / BBM) */
.doc-form{padding:4px}
.df-head{display:flex;align-items:center;gap:18px;margin-bottom:10px}.df-head h1{flex:1;text-align:center;margin-right:60px}
.df-meta{display:flex;justify-content:space-between;gap:20px;font-size:10.5pt}.df-meta p{margin:0 0 2px}
.df-purpose{margin:8px 0 6px}
.df-table{width:100%;border-collapse:collapse;margin:4px 0}
.df-table th{background:#F2D3C2;border:1px solid #333;padding:4px 6px;font-size:10pt}
.df-table td{border-left:1px solid #333;border-right:1px solid #333;padding:4px 6px;font-size:10.5pt;vertical-align:top}
.df-table tbody tr:last-child td{border-bottom:1px solid #333}
.df-table tr.blank td{height:22px}
.df-table tfoot td{border:1px solid #333}
.df-table.bbm th{background:#A3243B;color:#fff}.df-table.bbm .net{background:#EBCDB4}
.df-total{display:flex;justify-content:flex-end;gap:18px;align-items:baseline;margin:6px 0}.df-total span{min-width:160px;border-bottom:3px double #333;text-align:right;font-weight:700}
.df-appr{margin-top:12px}.df-att,.df-status{font-size:9.5pt;color:#555}
.doc .kv{font-size:10.5pt;width:auto;margin:0 0 8px}.doc .kv td{padding:1px 10px 1px 0}.doc .kv td:first-child{color:#111;font-weight:700;width:auto}
.doc .kv.big{font-size:11.5pt}
.sigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:6px}
.sigs.two{grid-template-columns:1fr 1fr;margin-top:18px}.sigs.one{grid-template-columns:200px;justify-content:end}
.sig{text-align:center}.sig-space{height:58px;display:grid;place-items:center}
.sig-stamp{border:2px solid #1E7A4F;color:#1E7A4F;font-weight:800;font-size:9pt;padding:2px 8px;border-radius:4px;transform:rotate(-6deg);line-height:1.1}
.sig-stamp.no{border-color:#B42318;color:#B42318}
.sig-name{border-bottom:1px solid #333;min-height:18px;font-size:10pt}.sig-label{font-weight:700;font-size:10pt}
.pv-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:8px}.pv-bottom .cb{margin-right:12px;white-space:nowrap}
.doc .tot{border-collapse:collapse}.doc .tot td{padding:2px 0 2px 16px;text-align:right}
.bbm-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px}.bbm-org{display:flex;gap:10px;align-items:flex-start}.bbm-org small{display:block;font-size:8.5pt}
.bbm-title{text-align:right}.bbm-title h1{color:#A3243B;font-size:15pt}.bbm-title p{margin:0}
.doc-report .calc>div{background:#f4f4f4}

/* ---------- print ---------- */
@media print{
  body.printing>*:not(#print){display:none!important}
  body.printing #print{display:block}
  body.printing{background:#fff}
  .doc .bi,.doc .panel,.doc tr{page-break-inside:avoid}
  .doc-report .panel{box-shadow:none;border:1px solid #ccc}
  .doc-report .chart .tip{display:none}
  .df-table th,.df-table.bbm .net,.calc>div{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- responsif ---------- */
@media (max-width:900px){
  .editor{grid-template-columns:1fr}.ed-form,.ed-prev{max-height:none}
  .paper{padding:22px}
}
@media (max-width:720px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}.span2{grid-column:auto}
  .grid4{grid-template-columns:repeat(3,1fr)}
  .irow,.irows.rb .irow,#fCash .irow{grid-template-columns:1fr 1fr;background:var(--soft);padding:8px;border-radius:var(--rs)}
  .irow [data-k=desc]{grid-column:span 2}
  .head{align-items:flex-start}
  .clock{font-size:2.6rem}
  .ibx-r{align-items:flex-start;text-align:left}
  .mbox{padding:18px 14px}
  .bi{grid-template-columns:1fr}
  .tbl{font-size:.82rem}
  .filters select,.filters label.inline{flex:1 1 140px}
}

/* ===================== HR: urgensi, tanda tangan, dokumen Jepang ===================== */
.urg{display:inline-block;font-size:.68rem;font-weight:800;padding:1px 7px;border-radius:4px;margin-right:6px;border:1px solid var(--line);color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.urg.u-tinggi{border-color:var(--warn);color:var(--warn);background:var(--warnbg)}
.urg.u-mendesak{border-color:var(--bad);color:#fff;background:var(--bad)}
.urg.u-rendah{opacity:.75}
.ibx.late{border-left:4px solid var(--bad)}
.bad{color:var(--bad)}
.metabox{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0;padding:8px 10px;background:var(--soft);border-radius:var(--rs)}
.trans{background:#F4F7FB;border:1px solid #D6E2F0;border-radius:var(--rs);padding:8px 12px;margin:8px 0;font-size:.9rem}
.trans div{margin-top:3px}
.tag.lembur{background:#EEF2FF;color:#3730A3}.tag.resign{background:var(--badbg);color:var(--bad)}.tag.kontrak{background:var(--okbg);color:var(--ok)}
.sigpad{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:560/180;background:#fff;border:1px dashed var(--line);border-radius:var(--rs);touch-action:none;cursor:crosshair}
.sig-img{display:block;height:64px;max-width:220px;margin:4px auto;object-fit:contain}
.docprev{background:#E9E6E2;border-radius:var(--rs);padding:12px;max-height:60vh;overflow:auto}
.docprev .doc{background:#fff;padding:28px 34px;max-width:794px;margin:0 auto;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.editor.one{grid-template-columns:1fr}
.linkpage{max-width:680px;margin:30px auto;padding:0 16px}
.mailprev{border:1px solid var(--line);border-radius:var(--rs);padding:10px;max-height:60vh;overflow:auto;background:#fff}
.tbl.jad input{margin:0;padding:5px 7px}.tbl.jad td{vertical-align:middle}
details summary{cursor:pointer;font-weight:700;margin:12px 0 4px;color:var(--pri2)}
.doc ol.alpha{list-style:lower-alpha;padding-left:22px;margin:2px 0}
.doc .sub-h{font-weight:700;margin:6px 0 2px}
.doc .r{text-align:right}
.doc table.list.bp{width:100%;margin:0 0 12px}.doc table.list.bp th{text-align:left;background:#eee}.doc table.list.bp td{font-size:10pt}
.doc-contract{font-size:11.5pt}.doc-contract h4{margin-top:14px}
/* 退職願 — tulisan vertikal */
.doc-tate{font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP","Noto Serif CJK JP","Shippori Mincho",serif;font-feature-settings:"vert" 1;color:#111;display:flex;justify-content:center}
.tate{writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:mixed;height:240mm;font-size:13pt;line-height:2.1;letter-spacing:.08em;padding:10mm 6mm}
.tate .t-title{font-size:20pt;letter-spacing:.6em;margin:0 0 0 18mm;font-family:inherit}
.tate .t-watashi{margin:0 0 0 4mm;text-align:end}
.tate .t-body{margin:0 0 0 3mm;text-indent:1em}
.tate .t-date{margin:10mm 0 0 8mm;padding-top:12mm}
.tate .t-sign{margin:0 0 0 10mm;text-align:end;display:flex;flex-direction:column;align-items:flex-end}
.tate .t-sign p{margin:0}.tate .t-name{margin-top:6mm!important}
.tate .tate-sig{writing-mode:horizontal-tb;transform:rotate(90deg);height:44px;margin:14mm 0 0}
.tate .t-to{margin:0 0 0 0;padding-top:0}
@media (max-width:720px){.tate{height:auto;min-height:150mm;font-size:11pt}.docprev .doc{padding:16px}}

/* =====================================================================
 * TAMPILAN v2 — layout sidebar, hero, login dua panel, cap hanko
 * ===================================================================== */
body[data-theme=nippon]{--bg:#F3F2EF;--line:#E3DFD9;--soft:#F7F5F2;--muted:#76706B;--sumi:#1D1B1A;--shu:#BC002D;--display:"Shippori Mincho B1","Shippori Mincho","Noto Serif JP","Noto Serif CJK JP",serif}
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--line);z-index:30}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.side-brand b{display:block;font-family:var(--display);font-size:1.08rem;line-height:1.2}
.side-brand small{display:block;color:var(--muted);font-size:.76rem;line-height:1.3}
.nav{flex:1;overflow-y:auto;padding:4px 10px 10px;scrollbar-width:thin}
.nav-group{margin-bottom:10px}
.nav-h{margin:10px 10px 4px;font-size:.74rem;font-weight:700;color:var(--muted);letter-spacing:.02em}
.nav button{display:flex;align-items:center;gap:11px;width:100%;font:inherit;font-size:.92rem;font-weight:600;color:var(--ink);background:none;border:0;border-radius:var(--rs);padding:8px 10px;cursor:pointer;text-align:left;position:relative}
.nav button svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.nav button:hover{background:var(--soft)}
.nav button.on{background:color-mix(in srgb,var(--pri) 9%,transparent);color:var(--pri2)}
.nav button.on svg{color:var(--pri)}
.nav button:focus-visible,.btn:focus-visible,.qbtn:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.nav .badge{margin-left:auto}
.side-user{display:grid;grid-template-columns:38px 1fr;gap:4px 10px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--sumi,var(--ink));color:#fff;font-weight:700;font-size:.85rem}
.who{min-width:0}.who b{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .role{display:inline-block;margin-top:2px}
.side-actions{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.credit{margin:0;padding:8px 16px 14px;font-size:.72rem;color:var(--muted);line-height:1.5}
.credit a{color:inherit;font-weight:700}
.mainwrap{min-width:0;display:flex;flex-direction:column}
.mainwrap main{width:100%;max-width:1180px;margin:0 auto;padding:26px 28px 60px;flex:1}
.mtop{display:none}
.scrim{display:none}
.menu-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--card);border-radius:var(--rs);display:grid;place-content:center;gap:4px;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:282px;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.18)}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(20,16,14,.35);z-index:25}
  .mtop{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);padding:10px 16px}
  .mtop b{font-family:var(--display)}
  .mainwrap main{padding:18px 16px 50px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* ---------- hero beranda ---------- */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:26px 30px;margin-bottom:18px}
.hero-date{display:grid;justify-items:start;line-height:1.1;padding-right:26px;border-right:1px solid var(--line);position:relative;z-index:1}
.hero-date .d{font-family:var(--display);font-size:3.6rem;font-weight:800;line-height:1}
.hero-date .m{font-weight:700;margin-top:6px}
.hero-date .w,.hero-date .j{color:var(--muted);font-size:.84rem;margin-top:3px}
.hero-main{position:relative;z-index:1;max-width:620px}
.hero-main h2{font-size:1.7rem;margin-bottom:6px}
.hero-main p{margin:0}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media (max-width:640px){.hero{grid-template-columns:1fr;gap:14px;padding:20px}.hero-date{grid-auto-flow:column;align-items:baseline;gap:10px;border-right:0;padding:0}.hero-date .d{font-size:2.4rem}.hero-date .j{display:none}}

/* ---------- login dua panel ---------- */
.login{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,1fr);min-height:100vh;padding:0;place-items:stretch}
.login-art{position:relative;overflow:hidden}
.login-side{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 18px}
.login-card{max-width:400px;width:100%}
.art{height:100%;padding:56px 54px;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.art h2{font-size:2.1rem;line-height:1.2;max-width:15em;margin-bottom:18px;position:relative;z-index:1}
.art-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:30em;position:relative;z-index:1}
.art-list li{padding-left:22px;position:relative;line-height:1.45}
.art-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:currentColor;opacity:.75}
@media (max-width:860px){.login{grid-template-columns:1fr}.login-art{display:none}}

/* ---------- NIPPON: cap hanko, hinomaru, shoji ---------- */
body[data-theme=nippon] .side{background:#fff linear-gradient(90deg,transparent calc(100% - 1px),var(--line) 0)}
body[data-theme=nippon] .nav button.on{background:#FBEFF1;color:var(--shu)}
body[data-theme=nippon] .nav button.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--shu)}
body[data-theme=nippon] .brand-mark{background:var(--shu);border-radius:50%;font-family:var(--display)}
body[data-theme=nippon] .panel{border:1px solid var(--line);box-shadow:none;border-radius:8px}
body[data-theme=nippon] h2,body[data-theme=nippon] h3{font-weight:700;letter-spacing:.01em}
body[data-theme=nippon] .hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--shu);right:-70px;top:50%;transform:translateY(-50%)}
body[data-theme=nippon] .hero::before{content:"";position:absolute;right:0;top:0;bottom:0;width:340px;background:repeating-linear-gradient(90deg,transparent 0 55px,rgba(29,27,26,.06) 55px 56px),repeating-linear-gradient(0deg,transparent 0 55px,rgba(29,27,26,.06) 55px 56px)}
@media (max-width:900px){body[data-theme=nippon] .hero::after{width:96px;height:96px;right:-34px;top:-34px;transform:none}body[data-theme=nippon] .hero::before{display:none}}
/* cap hanko: merah = disetujui (seperti cap di dokumen Jepang); ditolak = tinta sumi */
body[data-theme=nippon] .chip.ok{background:transparent;color:var(--shu);border:1.5px solid var(--shu);border-radius:4px;font-family:var(--display);padding:1px 8px}
body[data-theme=nippon] .chip.bad{background:var(--sumi);color:#fff}
body[data-theme=nippon] .tstep.ok{background:transparent;color:var(--shu);border:1.5px solid var(--shu);border-radius:3px;font-family:var(--display);font-weight:700;transform:rotate(-2deg)}
body[data-theme=nippon] .tstep.bad{background:var(--sumi);color:#fff;border-color:var(--sumi)}
body[data-theme=nippon] .tl li.ok::marker{color:var(--shu)}
body[data-theme=nippon] .urg.u-mendesak{background:var(--shu);border-color:var(--shu)}
body[data-theme=nippon] .avatar{background:var(--sumi)}
body[data-theme=nippon] .login{background:var(--bg)}
body[data-theme=nippon] .login-card{border-top:0;box-shadow:none;border:1px solid var(--line)}
.art-nippon{background:#fff;color:var(--sumi);border-right:1px solid var(--line)}
.art-nippon .hinomaru{position:absolute;width:min(46vw,560px);aspect-ratio:1;border-radius:50%;background:var(--shu);left:-14%;top:-18%}
.art-nippon::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(29,27,26,.07) 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(29,27,26,.07) 79px 80px);pointer-events:none}
.art-tate{position:absolute;right:46px;top:52px;writing-mode:vertical-rl;font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:.18em;margin:0;z-index:1}
.art-nippon h2{font-family:var(--display)}
.art-nippon .art-list li::before{background:var(--shu);opacity:1}
body[data-theme=nippon] .foot .powered::before{background:var(--shu)}

/* ---------- OREN (applytojapan): stiker, garis harimau, kucing ---------- */
body[data-theme=oren] .side{background:#fff;border-right:2px solid var(--line)}
body[data-theme=oren] .nav button{border-radius:999px}
body[data-theme=oren] .nav button.on{background:var(--pri);color:var(--pri-ink);box-shadow:0 3px 0 var(--pri2)}
body[data-theme=oren] .nav button.on svg{color:var(--pri-ink)}
body[data-theme=oren] .avatar{background:var(--pri);color:var(--pri-ink)}
body[data-theme=oren] .hero{background:var(--pri);border:0;color:var(--pri-ink);box-shadow:0 6px 0 var(--pri2)}
body[data-theme=oren] .hero::after{content:"";position:absolute;right:-30px;top:-20px;bottom:-20px;width:300px;background:repeating-linear-gradient(115deg,transparent 0 26px,rgba(201,101,28,.55) 26px 40px);border-radius:40% 0 0 40%}
body[data-theme=oren] .hero-date{border-right-color:rgba(42,22,8,.2)}
body[data-theme=oren] .hero-date .w,body[data-theme=oren] .hero-date .j{color:rgba(42,22,8,.7)}
body[data-theme=oren] .hero .btn.primary{background:#fff;color:var(--pri2);box-shadow:0 3px 0 rgba(42,22,8,.25)}
body[data-theme=oren] .hero .btn:not(.primary){background:rgba(255,255,255,.35)}
.art-oren{background:var(--pri);color:var(--pri-ink);overflow:hidden}
.art-oren::before{content:"";position:absolute;inset:-10% -20% 40% 30%;background:repeating-linear-gradient(115deg,transparent 0 34px,rgba(201,101,28,.5) 34px 52px);border-radius:0 0 0 50%}
.art-oren h2{font-family:var(--display);font-weight:900}
body[data-theme=oren] .login{background:var(--bg)}

.qbtn svg{width:24px;height:24px;fill:none;stroke:var(--pri);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qbtn{font-size:1rem}

/* ===== v3: cabang, foto profil, reimburse pintar, celah dokumen, KPI ===== */
.ava{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--pri);color:var(--pri-ink);font-weight:800;font-size:.72rem;overflow:hidden;flex:0 0 auto;vertical-align:middle;margin-right:7px}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.sm{width:22px;height:22px;font-size:.6rem;margin-right:6px}.ava.md{width:44px;height:44px;font-size:.9rem}.ava.xl{width:86px;height:86px;font-size:1.6rem;margin:0}
#meAvatar.has-img{padding:0;overflow:hidden}#meAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.profhead{display:flex;gap:16px;align-items:center;margin-bottom:10px}.profhead h3{margin:0}
.avaup{position:relative;cursor:pointer;display:inline-block;border-radius:50%}.avaup span{position:absolute;right:-2px;bottom:-2px;background:var(--card);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh);font-size:.9rem}
.trline{color:var(--muted);font-size:.85em;border-left:3px solid var(--pri);padding-left:6px;margin-top:3px}
.fhead{font-weight:800;margin:14px 0 4px;padding-top:8px;border-top:1px dashed var(--line);color:var(--pri2)}
/* reimburse */
.upslot{display:flex;flex-direction:column;gap:6px}
.upbtn{border:2px dashed var(--line);border-radius:var(--r);background:var(--soft) center/cover no-repeat;min-height:118px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;text-align:left;cursor:pointer;color:var(--ink);font:inherit;position:relative;overflow:hidden}
.upbtn small{color:var(--muted)}
.upslot.filled .upbtn{border-style:solid;border-color:var(--pri)}.upslot.filled .upbtn b,.upslot.filled .upbtn small{background:rgba(255,255,255,.88);padding:1px 6px;border-radius:4px;width:fit-content}
.upinfo{font-size:.82rem}.upinfo .warn{color:var(--warn)}
fieldset.nota{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:12px 0}fieldset.nota legend{font-weight:800;padding:0 6px}
.irow.rbi{grid-template-columns:1fr 70px 130px 110px 30px}
.grid3.adj label{font-size:.8rem}
.cekbox{border-radius:var(--rs);padding:10px 12px;margin:10px 0;background:var(--soft);font-size:.88rem}
.cekbox.ok{background:var(--okbg)}.cekbox.warn{background:var(--warnbg)}.cekbox.bad{background:var(--badbg)}
.cekbox ul{margin:6px 0 0;padding-left:4px;list-style:none}.cekbox li{margin:3px 0}
.cekbox li.ok{color:var(--ok)}.cekbox li.warn{color:var(--warn)}.cekbox li.bad{color:var(--bad);font-weight:700}.cekbox li.info{color:var(--muted)}
/* celah dokumen */
.celah{background:#FFE3E3;color:#B42318;border-bottom:2px solid #B42318;padding:0 3px;border-radius:2px;font-weight:700}
.celah.flash{outline:3px solid #B42318;outline-offset:2px}
.celahbar{position:sticky;top:0;z-index:2;padding:7px 10px;border-radius:var(--rs);margin-bottom:8px;font-size:.85rem}
.celahbar.bad{background:var(--badbg);color:var(--bad)}.celahbar.ok{background:var(--okbg);color:var(--ok)}
.trdoc{display:block;color:#475467;font-size:.92em;margin-top:2px;border-left:2px solid #98A2B3;padding-left:6px}
@media print{.celah{background:none;color:inherit;border-bottom:1px dotted #999}.celahbar{display:none}}
/* cabang */
.cabgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:10px}
.cabcard{border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:6px}
.cablogo{height:64px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:var(--rs)}.cablogo img{max-height:56px;max-width:90%}
.logoup{display:grid;grid-template-columns:160px 1fr;gap:12px;align-items:center;margin:8px 0}
.kop img{max-height:70px}
/* KPI */
.kpied .kpirow{display:grid;grid-template-columns:1.3fr 1.4fr 90px 70px 30px;gap:6px;margin-bottom:6px}
.integ{border-radius:var(--rs);padding:10px 14px;margin-bottom:12px;font-size:.9rem}.integ.ok{background:var(--okbg);color:var(--ok)}.integ.bad{background:var(--badbg);color:var(--bad)}
.kpigrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.kpicard{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;min-width:0}
.kpihead{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:8px}
.ring{--deg:0deg;width:68px;height:68px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(closest-side,var(--card) 76%,transparent 78%),conic-gradient(var(--rc) var(--deg),var(--soft) 0)}
.ring b{font-size:1.25rem;line-height:1}.ring small{font-size:.6rem;color:var(--muted)}
.ring.ok{--rc:#2F6B3F}.ring.mid{--rc:#B54708}.ring.low{--rc:#B42318}.ring.none{background:var(--soft)}
.kpitbl td,.kpitbl th{font-size:.82rem}
.kbar{position:relative;height:18px;background:var(--soft);border-radius:99px;overflow:hidden;min-width:90px}
.kbar span{position:absolute;inset:0 auto 0 0;border-radius:99px}.kbar.ok span{background:#B7E0C2}.kbar.mid span{background:#FCD9A8}.kbar.low span{background:#F9C3BE}
.kbar em{position:relative;font-style:normal;font-size:.72rem;font-weight:800;padding-left:7px;line-height:18px}
pre.code{background:#101828;color:#E4E7EC;padding:12px;border-radius:var(--rs);overflow:auto;font-size:.78rem;white-space:pre-wrap}
@media (max-width:640px){.irow.rbi{grid-template-columns:1fr 60px 1fr 30px}.irow.rbi .itot{display:none}.kpied .kpirow{grid-template-columns:1fr 1fr}.logoup{grid-template-columns:1fr}.kpigrid{grid-template-columns:1fr}}
.guide-page>h3{margin:24px 0 12px}.guide-callout,.guide-note{padding:16px 18px;border:1px solid var(--line);border-left:4px solid var(--pri);border-radius:var(--rs);background:var(--card);margin:14px 0 20px}.guide-callout p{margin:8px 0 0}.guide-matrix{min-width:900px}.guide-matrix td{vertical-align:top}.guide-flow{margin:0;padding-left:22px;min-width:190px}.guide-flow li{padding:2px 0 7px}.guide-flow li span{display:block;color:var(--muted);font-size:.78rem}.guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.guide-card{border:1px solid var(--line);background:var(--card);border-radius:var(--rs);padding:0 14px}.guide-card summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0}.guide-card summary::-webkit-details-marker{display:none}.guide-card summary small{display:block;color:var(--muted);margin-top:2px}.guide-card[open] .guide-plus{transform:rotate(45deg)}.guide-card ol{margin:0;padding:0 0 14px 22px}.guide-card li{padding:3px 0}.guide-plus{transition:transform .15s;color:var(--pri)}@media(max-width:760px){.guide-list{grid-template-columns:1fr}}

/* Staff chat */
.chat-layout{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:14px;align-items:stretch}.chat-list{max-height:72vh;overflow:auto}.chat-select{width:100%;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px;color:var(--ink);cursor:pointer}.chat-select small{color:var(--muted)}.chat-select.on{background:var(--soft);color:var(--pri)}.chat-select .badge{position:absolute;right:10px;top:12px}.chat-room{min-height:62vh;display:flex;flex-direction:column}.chat-head{border-bottom:1px solid var(--line);padding-bottom:8px}.chat-head h3,.chat-head p{margin:0}.chat-messages{flex:1;min-height:280px;max-height:55vh;overflow:auto;padding:12px 2px;display:flex;flex-direction:column;gap:9px}.chat-message{align-self:flex-start;max-width:min(82%,680px);border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:8px 12px}.chat-message.own{align-self:flex-end;background:color-mix(in srgb,var(--pri) 12%,var(--card));border-color:color-mix(in srgb,var(--pri) 28%,var(--line))}.chat-message b{font-size:.8rem}.chat-message small{color:var(--muted);margin-left:8px;font-size:.7rem}.chat-message p{margin:4px 0 0;white-space:normal;overflow-wrap:anywhere}.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;border-top:1px solid var(--line);padding-top:10px}.chat-form textarea{margin:0}.chat-people{max-height:45vh;overflow:auto;border:1px solid var(--line);border-radius:var(--rs);padding:8px 12px}.chat-people .check{padding:5px 0}.chat-people input{width:auto;margin-right:6px}
body[data-theme-mode=dark]{--bg:#151719;--card:#202327;--ink:#eceef0;--muted:#adb2b8;--line:#3a3f45;--soft:#2a2e33;--pri-ink:#fff;--okbg:#183528;--warnbg:#3c301d;--badbg:#402426;--sh:0 2px 12px rgba(0,0,0,.28);color-scheme:dark}
body[data-theme-mode=dark] input,body[data-theme-mode=dark] select,body[data-theme-mode=dark] textarea{background:#25292e;color:var(--ink)}body[data-theme-mode=dark] .side,body[data-theme-mode=dark] .mtop{background:var(--card)}body[data-theme=nippon][data-theme-mode=dark] .side,body[data-theme=oren][data-theme-mode=dark] .side{background:var(--card)}body[data-theme-mode=dark] .login-card{background:var(--card);color:var(--ink)}body[data-theme-mode=dark] .nav button.on{background:color-mix(in srgb,var(--pri) 22%,var(--card));color:var(--ink)}body[data-theme-mode=dark] .demo{background:var(--soft)}
body[data-theme-mode=gray]{--bg:#e7e8e9;--card:#f5f5f5;--ink:#292b2d;--muted:#606468;--line:#c9cbcd;--soft:#e2e3e4;--pri:#62676b;--pri2:#45494c;--accent:#45494c;--c-in:#59666f;--c-out:#737373;--sh:0 1px 3px rgba(0,0,0,.08);color-scheme:light}body[data-theme=oren][data-theme-mode=gray],body[data-theme=nippon][data-theme-mode=gray],body[data-theme=demo][data-theme-mode=gray]{--pri:#62676b;--pri2:#45494c;--accent:#45494c}body[data-theme-mode=gray] .side,body[data-theme-mode=gray] .mtop{background:var(--card)}
@media(max-width:760px){.chat-layout{grid-template-columns:1fr}.chat-list{max-height:240px}.chat-room{min-height:52vh}.chat-messages{max-height:42vh}}

/* Demo CTA di halaman login */
.demo-cta{margin:14px 0 0;display:grid;gap:4px;text-align:center}.demo-cta .btn{border:1px dashed var(--line)}
/* Email per topik */
.em-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}.em-filter input{max-width:280px;margin:0}
.em-kat{display:flex;flex-wrap:wrap;gap:6px}.em-kat .chip{border:1px solid var(--line);cursor:pointer;font:inherit;font-size:.74rem;font-weight:700}.em-kat .chip.on{background:var(--pri);color:var(--pri-ink);border-color:var(--pri)}
.em-item small.cup{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted)}
.em-item .em-meta{font-size:.72rem;color:var(--muted)}
.kat{display:inline-block;font-size:.68rem;font-weight:800;padding:1px 7px;border-radius:99px;margin:2px 0;background:var(--soft);color:var(--ink)}
.kat.k0{background:#E7F0FB;color:#1D4F86}.kat.k1{background:#FBEFF1;color:#94001F}.kat.k2{background:#EEF6EF;color:#2F6B3F}.kat.k3{background:#FFF3D6;color:#7A4B00}.kat.k4{background:#F1ECFA;color:#5B3D99}.kat.k5{background:#E9F5F6;color:#1F6670}.kat.k6{background:#EFEFEF;color:#444}
body[data-theme-mode=dark] .kat{filter:brightness(.85) saturate(.9)}
.conn{display:inline-flex;align-items:center;gap:4px;font-size:.8rem;font-weight:700;padding:6px 10px;border-radius:99px;background:var(--soft)}.conn.ok{color:#2F6B3F}
.note-panel{padding:10px 14px;font-size:.9rem}.note-panel.bad{border-left:4px solid #BC002D}
.em-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.em-tools{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}.em-tools select{width:auto;margin:0;padding:6px 8px}
.pp{display:inline-block;font-size:.72rem;padding:1px 8px;border-radius:99px;border:1px solid var(--line);margin:2px 2px 0 0}.pp.staf{background:var(--soft)}
.em-msg{max-width:min(92%,760px)}.em-from{display:flex;gap:8px;align-items:baseline}.em-subj{font-size:.78rem;font-weight:700;color:var(--pri2);margin-top:2px}.em-badges{margin-top:4px}
.em-msg details{margin-top:6px;font-size:.88rem}.em-msg details summary{cursor:pointer;color:var(--muted);font-size:.78rem}.em-msg details.tr{border-left:3px solid var(--line);padding-left:8px}
.em-act{margin-top:4px;text-align:right}.em-act .link{font-size:.72rem;color:var(--muted)}
.em-reply{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}.em-reply textarea{min-height:80px}
.kode{font-size:1.8rem;font-weight:900;letter-spacing:4px;text-align:center;background:var(--soft);border-radius:10px;padding:10px;margin:8px 0 2px;font-family:ui-monospace,Menlo,monospace}
.steps{padding-left:20px}.steps li{margin:4px 0}
.pt-list{max-height:55vh;overflow:auto;border:1px solid var(--line);border-radius:var(--rs);margin-top:8px}
@media(max-width:760px){.em-msg{max-width:100%}.em-filter input{max-width:none;width:100%}}

/* tombol lihat password */
input::-ms-reveal,input::-ms-clear{display:none}
.pw-wrap{position:relative;display:block}.pw-wrap input{padding-right:44px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);margin-top:-2px;border:0;background:transparent;cursor:pointer;font-size:1rem;opacity:.55;padding:4px 6px;line-height:1}.pw-eye:hover,.pw-eye.on{opacity:1}

/* Slip gaji */
.slip-paper{background:#fff;color:#111;padding:22px 26px;border-radius:6px;max-height:70vh;overflow:auto}
.slip{font-family:Arial,sans-serif;font-size:12.5px;color:#111}.slip h3{margin:10px 0 12px;line-height:1.3}.slip h3 small{font-size:12px;font-weight:400;color:#444}
.slip-kop{display:flex;gap:14px;align-items:center;border-bottom:3px double #333;padding-bottom:8px}.slip-kop img{height:54px}.slip-kop h2{margin:0;font-size:17px}.slip-kop p{margin:1px 0;font-size:11px;color:#333}
.slip-id{width:100%;border-collapse:collapse;margin-bottom:10px}.slip-id td{padding:2px 6px 2px 0;vertical-align:top}.slip-id td:nth-child(odd){color:#555;white-space:nowrap;width:1%}
.slip-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.slip-cols h4{margin:6px 0;font-size:12px;background:#f1eded;padding:4px 8px;border-left:4px solid #903C3A}
.slip-t{width:100%;border-collapse:collapse}.slip-t td{padding:3px 6px;border-bottom:1px dotted #ccc}.slip-t td.r{text-align:right;white-space:nowrap}.slip-t tr.tot td{border-top:1px solid #333;border-bottom:0}
.slip-thp{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:10px 12px;background:#903C3A;color:#fff;border-radius:4px;font-weight:700}.slip-thp b{font-size:16px}
.slip-terb{margin:4px 0 8px;color:#333}.slip-info{font-size:11px;color:#333;border:1px solid #ddd;border-radius:4px;padding:6px 10px}.slip-info ul{margin:4px 0 0 16px;padding:0}.slip-info li{margin:2px 0}
.slip-ttd{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin-top:14px}.slip-ttd p{margin:2px 0}.slip-ttd .ttd-space{height:56px}.slip-foot{font-size:10px;color:#666;margin-top:10px;border-top:1px solid #ddd;padding-top:6px}
.gj-row{grid-template-columns:2fr 1fr auto}.nowrap{white-space:nowrap}
@media(max-width:700px){.slip-cols,.slip-ttd{grid-template-columns:1fr}}

/* Budget & kandidat */
.bg-warn{background:var(--warnbg);border:1px solid color-mix(in srgb,#b45309 35%,transparent);border-left:4px solid #b45309;border-radius:var(--rs);padding:8px 12px;margin:8px 0;font-size:.88rem}.bg-warn ul{margin:4px 0 0 18px;padding:0}.bg-warn li{margin:2px 0}
.bg-ok{color:#2F6B3F;font-weight:700;font-size:.88rem;margin:6px 0}
.bg-fields{margin-top:4px}
.bg-bar{display:inline-block;width:110px;height:8px;border-radius:99px;background:var(--soft);overflow:hidden;vertical-align:middle;margin-right:6px}.bg-bar span{display:block;height:100%;background:#2F6B3F}.bg-bar.warn span{background:#b45309}.bg-bar.bad span{background:#BC002D}
.bg-tbl input{width:130px;margin:0;padding:5px 8px;text-align:right}.bg-tbl input.bg-note{width:160px;text-align:left}.bg-tbl tr.lewat td{background:color-mix(in srgb,#BC002D 6%,transparent)}.bg-use{white-space:nowrap}
.tahap{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);font-size:.75rem;margin-right:3px;color:var(--muted)}.tahap.ok{background:#2F6B3F;border-color:#2F6B3F;color:#fff}.tahap.part{border-color:#b45309;color:#b45309}
td .ok,.small.ok{color:#2F6B3F}td .bad,.r.bad,b.bad{color:#BC002D}

/* ===== label dua bahasa (laporan) & fingerprint ===== */
.bi{display:inline-flex;flex-direction:column;line-height:1.2;gap:1px}.bi .bi-id{font-size:.78em;font-weight:500;opacity:.75}
h2.bi .bi-id{font-size:.62em;font-weight:600;color:var(--pri);opacity:1}h3 .bi .bi-id,th .bi .bi-id{font-size:.74em}
small.bi{display:flex}.calc small.bi .bi-id{font-size:.92em}
.chart-box{overflow-x:auto}.chart-box svg{max-width:100%;height:auto;display:block;border-radius:8px}
.grid-fp{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:12px}@media(max-width:900px){.grid-fp{grid-template-columns:1fr}}
.fp-legend{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:.84rem}.fp-legend li{display:flex;gap:8px;align-items:center}.fp-legend i{width:12px;height:12px;border-radius:3px;flex:none}
.fp-steps{margin:4px 0 12px 18px;padding:0;font-size:.88rem;line-height:1.55}.fp-prev{margin-top:10px}.fp-cek{margin-top:10px}.fp-cek .chip{margin:2px}
.fp-apply{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:6px 0 8px}
.warn-t{color:#9a6700;font-weight:700}.ok-t{color:#067647;font-weight:700}.bad-t{color:#b42318;font-weight:700}
.tbl tr.fp-warn td{background:color-mix(in srgb,#fab219 10%,transparent)}.tbl tr.fp-bad td{background:color-mix(in srgb,#d03b3b 9%,transparent)}
.head2{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:6px}.head2 h3{margin:0}
.fp-f{flex-wrap:wrap}.fp-f small{opacity:.7;margin-left:3px}
.chk{display:flex;gap:8px;align-items:center;font-size:.88rem;margin:6px 0}.chk input{width:auto}
.fp-sum th,.fp-det th{vertical-align:bottom}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px}
body[data-theme=demo] .slip-cols h4{border-left-color:#0F766E;background:#eaf2f1}body[data-theme=demo] .slip-thp{background:#0F766E}
.tbl td.r{white-space:nowrap}