/* =====================================================================
 * 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 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}