/* ============================================================
[CSS-00] Base theme, layout, sidebar, tombol, tabel, modal dasar
File hasil pemisahan dari versi kerja.
Jangan ubah urutan build di build.py kecuali paham dependensinya.
============================================================ */
/* TUMARITIS v169 - stylesheet hasil pemisahan dari file v168. */
/* ===== Style block utama ===== */
:root{
--bg:#080b12;--card:#0e1220;--card2:#131828;
--line:rgba(120,140,255,.09);--line2:rgba(140,160,255,.16);
--text:#e8eeff;--muted:#8896c0;--dim:#4e5a7a;
--pri:#6c8fff;--pri2:#4a6ce0;--green:#20d47e;--red:#ff5577;
--orange:#f97316;--yellow:#fbbf24;--radius:14px;
--glow:rgba(108,143,255,.18);--glow2:rgba(32,212,126,.12);
--sidebar-bg:linear-gradient(180deg,#0c1020 0%,#090d18 100%);
--card-shadow:0 4px 24px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.04) inset;
--btn-shadow:0 2px 8px rgba(0,0,0,.35);
}
.light{
/* V173: light mode soft blue, tidak putih menyilaukan */
--bg:#d6eafa;--card:#e8f4fd;--card2:#dceefa;
--line:rgba(32,92,145,.11);--line2:rgba(32,92,145,.20);
--text:#15324a;--muted:#4f6b84;--dim:#7891a8;
--pri:#1788df;--pri2:#0d6fc1;--green:#149f72;--red:#d9435e;
--orange:#d96b18;--yellow:#b98808;
--glow:rgba(23,136,223,.16);--glow2:rgba(20,159,114,.11);
--sidebar-bg:linear-gradient(180deg,#d9ecfb 0%,#cfe4f5 100%);
--card-shadow:0 8px 24px rgba(42,95,145,.12),0 1px 0 rgba(255,255,255,.60) inset;
--btn-shadow:0 3px 10px rgba(42,95,145,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:13px;height:100vh;overflow:hidden;-webkit-transition:background .35s,color .35s;transition:background .35s,color .35s}
body{background:radial-gradient(ellipse at 20% 50%,rgba(108,143,255,.04),transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(32,212,126,.03),transparent 50%),var(--bg)}
body.light{background:
radial-gradient(circle at 12% 20%,rgba(255,255,255,.42),transparent 30%),
radial-gradient(circle at 88% 6%,rgba(80,178,255,.20),transparent 26%),
linear-gradient(135deg,#d1e8f8 0%,#e1f1fb 46%,#c8e3f6 100%)}
button,input,select,textarea{font-family:inherit}
.hidden{display:none!important}
/* Toggle Master Data dengan proteksi password */
.nav-label-row{display:flex;align-items:center;gap:8px;padding-right:8px}
.nav-label-row>span{flex:1;min-width:0}
.nav .nav-hide-btn{border:0;background:transparent;color:var(--dim);width:28px;min-width:28px;height:24px;padding:0;margin-left:auto;font-size:0;font-weight:900;line-height:1;display:inline-grid;place-items:center;cursor:pointer;transition:.18s;box-shadow:none;flex:0 0 28px;text-align:center;border-radius:8px}
.nav .nav-hide-btn:hover{color:var(--pri);background:rgba(108,143,255,.08)}
.nav .nav-hide-btn:focus-visible{outline:2px solid rgba(108,143,255,.45);outline-offset:2px}
.nav-arrow-btn .master-data-chevron{width:16px;height:16px;display:block;stroke:currentColor;fill:none;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
.nav-arrow-btn .master-data-chevron.is-right{transform:rotate(-90deg)}
.nav-arrow-btn .master-data-chevron.is-down{transform:rotate(0deg)}
.nav button.master-data-hidden{display:none!important}
.app{height:100vh;display:flex}
.login{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99;background:#04060e;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
.login-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.login:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at center,#000 0,transparent 68%);mask-image:radial-gradient(ellipse at center,#000 0,transparent 68%);pointer-events:none;z-index:0}
.login-card{position:relative;z-index:2;width:390px;max-width:100%;background:rgba(14,18,32,.88);border:1px solid rgba(108,143,255,.35);border-radius:28px;padding:32px;box-shadow:0 32px 100px rgba(0,0,0,.7),0 0 60px rgba(80,120,255,.18),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden}
.login-card:after{content:"";position:absolute;left:20%;right:20%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.login-logo{width:66px;height:66px;border-radius:23px;background:linear-gradient(135deg,rgba(79,124,255,.28),rgba(34,199,122,.13));display:grid;place-items:center;margin:0 auto 16px;border:1px solid rgba(255,255,255,.14);box-shadow:0 0 35px rgba(79,124,255,.22)}
.login-logo svg{width:32px;height:32px;stroke:#8fb0ff;fill:none;stroke-width:2}.login-logo img{width:100%;height:100%;object-fit:contain;border-radius:18px;padding:7px;background:rgba(255,255,255,.96)}.login h1{font-size:30px;margin-bottom:6px;letter-spacing:1.8px;text-align:center}.login-subtitle{text-align:center;color:#b9c3e5;font-weight:700;line-height:1.55;margin-bottom:24px}.login-note{margin:18px 0 0;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);color:#aeb9dc;font-size:11.5px;line-height:1.55;text-align:center}.login .field label{color:#aab6d8}.login .field input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);border-radius:15px;padding:12px 13px}.login .field input:focus{border-color:rgba(143,176,255,.9);box-shadow:0 0 0 4px rgba(79,124,255,.13)}.login .btn.pri{height:44px;border-radius:16px;background:linear-gradient(135deg,#4f7cff,#27c68a);border:0;box-shadow:0 14px 36px rgba(79,124,255,.28)}
.sidebar{width:250px;min-width:250px;background:var(--sidebar-bg);border-right:1px solid var(--line);display:flex;flex-direction:column;box-shadow:2px 0 20px rgba(0,0,0,.15)}
.sidebar.collapsed{width:72px;min-width:72px}.sidebar.collapsed .brand{justify-content:center;padding:14px 10px}.sidebar.collapsed .brand-main,.sidebar.collapsed .brand-theme,.sidebar.collapsed .nav-label,.sidebar.collapsed .sidebar-foot{display:none}.sidebar.collapsed .nav{padding:10px 8px}.sidebar.collapsed .nav button{justify-content:center;gap:0;padding:11px 0;font-size:0}.sidebar.collapsed .nav button svg{width:21px;height:21px}.sidebar.collapsed .brand-ic{width:44px;height:44px}.sidebar.collapsed~.main{flex:1}
.brand{padding:16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.brand-ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,rgba(108,143,255,.18),rgba(32,212,126,.08));display:grid;place-items:center;overflow:hidden;flex:0 0 auto;box-shadow:0 2px 10px rgba(108,143,255,.15)}
.brand-ic svg{width:22px;height:22px;stroke:var(--pri);fill:none;stroke-width:2}
.brand-ic img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.brand-main{min-width:0;flex:1}.brand-main h2{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-main span{font-size:11px;color:var(--muted)}
.brand-theme{margin-left:auto;flex:0 0 auto}.theme-switch{position:relative;display:inline-flex;align-items:center;width:56px;height:28px;border-radius:999px;background:linear-gradient(135deg,var(--card2),var(--bg));border:1px solid var(--line2);cursor:pointer;padding:2px;box-shadow:inset 0 2px 4px rgba(0,0,0,.2)}.theme-switch input{display:none}.theme-switch .theme-icons{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 7px;font-size:13px;pointer-events:none}.theme-switch .knob{width:22px;height:22px;background:linear-gradient(135deg,#fff,#dde4ff);border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35);-webkit-transition:-webkit-transform .22s ease;transition:transform .22s ease;z-index:1}.theme-switch input:checked~.knob{-webkit-transform:translateX(28px);transform:translateX(28px)}body.light .theme-switch{background:linear-gradient(135deg,#e8eeff,#f0f4ff)}
.nav{padding:10px;overflow:auto;flex:1}.nav-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;padding:10px 10px 6px}
.nav button{width:100%;border:0;background:transparent;color:var(--muted);display:flex;gap:9px;align-items:center;padding:10px 11px;border-radius:12px;cursor:pointer;text-align:left;font-size:13px}
.nav button:hover{background:rgba(108,143,255,.07);color:var(--text)}.nav button.on{background:linear-gradient(90deg,rgba(108,143,255,.18),rgba(108,143,255,.06));color:var(--pri);font-weight:700;-webkit-box-shadow:inset 2px 0 0 var(--pri);box-shadow:inset 2px 0 0 var(--pri)}
.nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.sidebar-foot{padding:12px;border-top:1px solid var(--line);display:grid;gap:8px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{height:64px;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:0 1px 0 var(--line),0 4px 20px rgba(0,0,0,.12)}
.top h1{font-size:16px}.top p{font-size:11px;color:var(--muted);margin-top:2px}.top-actions{display:flex;gap:8px;align-items:center}
.content{padding:18px;overflow:auto;flex:1}
.panel{display:none}.panel.show{display:block}
.btn{border:1px solid var(--line2);background:var(--card2);color:var(--text);padding:8px 12px;border-radius:12px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;-webkit-transition:all .18s;transition:all .18s;box-shadow:var(--btn-shadow)}
.btn:hover{border-color:var(--pri);box-shadow:0 4px 14px var(--glow)}.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}.btn.pri{background:linear-gradient(135deg,var(--pri),var(--pri2));border-color:transparent;color:#fff;box-shadow:0 4px 18px var(--glow)}.btn.pri:hover{background:linear-gradient(135deg,#7da0ff,var(--pri));box-shadow:0 6px 22px var(--glow)}.btn.red{color:var(--red);background:rgba(255,85,119,.07);border-color:rgba(255,85,119,.22)}.btn.green{color:var(--green);background:rgba(32,212,126,.07);border-color:rgba(32,212,126,.22)}.btn.sm{padding:5px 9px;font-size:11px}.btn:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.35);box-shadow:none!important}.btn:disabled:hover{border-color:var(--line2);box-shadow:none!important}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}#dashMainGrid.dashboard-single{grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--card-shadow);-webkit-transition:border-color .2s,box-shadow .2s;transition:border-color .2s,box-shadow .2s}
.stat{padding:18px}.stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.stat h3{font-size:28px;margin-top:6px}.stat small{color:var(--dim)}
.card-title{font-weight:700;font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}.card-title svg{width:17px;height:17px;stroke:var(--pri);fill:none;stroke-width:2}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}.field label{color:var(--muted);font-size:11px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line2);background:var(--card2);color:var(--text);border-radius:11px;padding:9px 11px;outline:none;font-size:12px;-webkit-transition:border-color .15s,box-shadow .15s;transition:border-color .15s,box-shadow .15s}.field textarea{min-height:86px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--glow)}
.table-wrap{overflow:auto;border-radius:var(--radius);border:1px solid var(--line)}table{width:100%;border-collapse:collapse;background:var(--card);font-size:12px}th{background:var(--card2);color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:10px}td{border-top:1px solid var(--line);padding:10px;vertical-align:top}tr:hover td{background:rgba(255,255,255,.025)}
.badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:700}.b-green{background:rgba(34,199,122,.12);color:var(--green)}.b-blue{background:rgba(79,124,255,.13);color:var(--pri)}.b-red{background:rgba(255,79,106,.12);color:var(--red)}.b-orange{background:rgba(249,115,22,.12);color:var(--orange)}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:9px 12px;margin-bottom:12px;-webkit-transition:border-color .15s,box-shadow .15s;transition:border-color .15s,box-shadow .15s}.search:focus-within{border-color:var(--pri);box-shadow:0 0 0 3px var(--glow)}.search input{border:0;background:transparent;color:var(--text);outline:0;flex:1}
.stepbar{display:flex;align-items:center;gap:9px;margin-bottom:14px}.step{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px}.step i{width:23px;height:23px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}.step.on{color:var(--pri);font-weight:700}.step.done{color:var(--green)}.step.on i{background:var(--pri);border-color:var(--pri);color:#fff}.step.done i{background:var(--green);border-color:var(--green);color:#fff}.line{flex:1;height:1px;background:var(--line)}
.tpl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tpl-card{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px;cursor:pointer;transition:.15s}.tpl-card:hover{border-color:var(--pri);transform:translateY(-1px);background:rgba(79,124,255,.08)}.tpl-card h3{font-size:14px;margin-bottom:5px}.tpl-card p{font-size:12px;color:var(--muted);line-height:1.5}
.autocomplete{position:relative}.drop{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--line2);border-radius:14px;overflow:hidden;z-index:20;box-shadow:0 20px 45px rgba(0,0,0,.35)}.drop.open{display:block}.drop-item{padding:11px 13px;display:flex;justify-content:space-between;gap:12px;cursor:pointer;border-bottom:1px solid var(--line)}.drop-item:hover{background:var(--card2)}.drop-item strong{display:block}.drop-item small{color:var(--muted)}
#dropWarga.open{position:static;margin-top:8px;max-height:430px;overflow:auto;box-shadow:none}
#dropWarga .drop-head{padding:10px 13px;background:var(--card2);border-bottom:1px solid var(--line);font-weight:800;color:var(--text);display:flex;justify-content:space-between;gap:12px}
#dropWarga .drop-head small{color:var(--muted);font-weight:500}
.surat-box{background:#f7f7f7;color:#000;border:1px solid #d0d0d0;border-radius:12px;overflow:auto;padding:18px}.f4-preview-wrap{background:#d8dce6;border:1px solid var(--line);border-radius:14px;padding:14px;overflow:auto;max-height:calc(100vh - 245px)}.f4-preview-scale{width:318px;height:499px;margin:0 auto;position:relative}.f4-preview-scale .surat{transform:scale(.40);transform-origin:top left;box-shadow:0 12px 36px rgba(0,0,0,.32);border:1px solid #ddd}.f4-label{font-size:11px;color:var(--muted);text-align:center;margin:0 0 8px}.surat{width:794px;min-height:1247px;margin:0 auto;background:#fff;padding:54px 72px 42px;font-family:Arial,Helvetica,sans-serif;font-size:12pt;line-height:1.35;color:#000;display:flex;flex-direction:column}.surat *{color:#000!important}.kop{text-align:center;margin-bottom:18px}.kop img{display:block;margin:0 auto 10px;width:86px;height:86px;object-fit:contain}.kop h1{font-size:14pt;text-transform:uppercase;line-height:1.2;font-weight:bold;letter-spacing:.2px}.judul{text-align:center;margin:18px 0 22px;line-height:1.15}.judul b{font-size:13pt;text-transform:uppercase;text-decoration:none}.nomor{font-size:12pt;text-align:center;margin-top:2px;font-weight:normal}.isi{flex:1}.isi:not(.template-clean-body) p{text-align:justify;margin:12px 0}.biodata{width:100%;border-collapse:collapse;margin:12px 0 4px}.biodata td{border:0;padding:1px 0;font-size:12pt;line-height:1.25;vertical-align:top}.biodata td:first-child{width:205px}.biodata td:nth-child(2){width:18px;text-align:center}.biodata.pemohon td:first-child{padding-left:10px;width:240px}.surat .usaha-bold{font-weight:bold;font-style:italic}.ttd{margin-top:42px;display:flex;justify-content:flex-end;text-align:center}.ttd-box{width:300px}.ttd-img{height:70px;object-fit:contain;margin:5px 0}.ttd-space{height:115px}.qr{width:72px;height:72px;border:1px solid #777;margin:5px auto;display:flex;align-items:center;justify-content:center;text-align:center;font-size:8pt;line-height:1.1;background:#fff!important;color:#000!important}.qr i,.qr span{display:none!important}.qr:after{content:'QR Validasi'}.qr small{font-size:7px}.surat-footer{text-align:center;font-size:11pt;line-height:1.25;margin-top:auto;padding-top:44px}.surat-footer .small{font-size:10.5pt}.detail-layout{display:grid;grid-template-columns:minmax(360px,430px) minmax(520px,1fr);gap:14px;align-items:start}.preview-side{position:sticky;top:0}.preview-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px;flex-wrap:wrap}.preview-side .surat-box{max-height:none;overflow:visible;padding:0;border:0;background:transparent}.preview-side .surat{margin:0;width:794px}
.f102{font-family:"Times New Roman",Times,serif;font-size:10.2pt;line-height:1.08;padding:18px 26px 22px;color:#000!important;background:#fff!important;border:none!important;outline:none!important;min-height:1160px}
.f102 *{color:#000!important;background:transparent!important;box-shadow:none!important}
.f102-head{position:relative;text-align:center;margin:9px 0 22px}
.f102-code{position:absolute;right:4px;top:-2px;border:2px solid #e11;box-shadow:none;color:#e11!important;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:9pt;padding:0 5px;line-height:1.15;background:#fff!important}
.f102-title{font-weight:800;font-size:17pt;text-transform:uppercase;letter-spacing:.2px;line-height:1.15;margin-top:10px}
.f102-subtitle{font-family:Arial,Helvetica,sans-serif;font-style:italic;font-size:8.4pt;margin-top:0}
.f102-data{width:100%;border-collapse:collapse;margin:4px 0 16px;font-family:"Times New Roman",Times,serif}
.f102-data td{border:0!important;padding:0 3px!important;font-size:10pt!important;line-height:1.22;vertical-align:top}
.f102-data .rom{width:24px}.f102-data .no{width:19px;text-align:right;padding-right:6px!important}.f102-data .label{width:232px;text-transform:uppercase}.f102-data .colon{width:10px;text-align:center}.f102-fill{border:1.2px solid #000!important;height:18px;padding:1px 6px!important;white-space:nowrap;background:#fff!important}
.f102-grid{width:100%;border-collapse:collapse;table-layout:fixed;margin:2px 0 14px;font-family:"Times New Roman",Times,serif}
.f102-grid td,.f102-grid th{border:1.2px solid #000!important;padding:2px 4px!important;font-size:9pt!important;line-height:1.05;vertical-align:top;background:#fff!important}
.f102-grid .secno{width:31px;text-align:center;font-weight:700}.f102-grid .subno{width:26px;text-align:center}.f102-grid .judul2{font-weight:800;text-transform:uppercase}.f102-grid .sub{font-weight:800;font-style:italic}.f102-grid .small{font-size:8pt!important;line-height:1.08}.f102-grid .attach{font-size:8pt!important;line-height:1.15;padding:8px 8px!important}
.f102-persyaratan{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px;font-family:"Times New Roman",Times,serif}
.f102-req{display:grid;grid-template-columns:17px 1fr;column-gap:5px;align-items:start;font-size:9pt;line-height:1.17;margin:1px 0}.f102-circle{width:12px;height:12px;border:1.2px solid #000;border-radius:50%;display:inline-block;margin-top:1px;background:#fff!important}
.f102-section-title{font-size:10pt;margin:9px 0 4px;display:flex;gap:18px}
.f102-date{text-align:right;margin:38px 66px 12px 0;font-size:10pt}.f102-sign{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin-top:0;font-size:10pt}.f102-sign-space{height:66px}.f102-dots{letter-spacing:.8px}
.buat-top-actions{display:flex;justify-content:flex-start;gap:8px;margin:0 0 12px;position:sticky;top:0;z-index:12;background:var(--bg);padding:6px 0 8px}.buat-top-actions .btn{box-shadow:0 6px 18px rgba(0,0,0,.16)}
.toolbar{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.notice{background:rgba(79,124,255,.12);border:1px solid rgba(79,124,255,.25);color:var(--pri);border-radius:13px;padding:11px 13px;line-height:1.5;margin-bottom:12px}.notice.green{background:rgba(34,199,122,.1);border-color:rgba(34,199,122,.25);color:var(--green)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--card2);border-radius:13px;padding:10px 12px;margin-bottom:10px}.toggle-row b{font-size:12px}.toggle-row small{display:block;color:var(--muted);margin-top:2px}.switch{position:relative;width:46px;height:24px;display:inline-block;flex:0 0 auto}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.18);border-radius:999px;transition:.18s}.slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s;box-shadow:0 2px 7px rgba(0,0,0,.25)}.switch input:checked+.slider{background:var(--pri)}.switch input:checked+.slider:before{transform:translateX(22px)}.mini-hint{font-size:11px;color:var(--muted);line-height:1.5;margin-top:-3px;margin-bottom:10px}
.logo-preview{width:84px;height:84px;object-fit:contain;background:#fff;border:1px solid var(--line2);border-radius:12px;padding:6px;margin-top:7px}.logo-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}.file-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:5px}
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:80;align-items:center;justify-content:center;padding:16px}.modal-bg.open{display:flex}.modal{background:var(--card);border:1px solid var(--line2);border-radius:20px;padding:18px;width:760px;max-width:100%;max-height:92vh;overflow:auto}.modal h2{font-size:16px;margin-bottom:12px}
.dashboard-bars{display:grid;gap:12px;margin-top:6px}.bar-row{display:grid;grid-template-columns:108px 1fr 42px;gap:10px;align-items:center}.bar-label{font-size:12px;color:var(--muted)}.bar-track{height:18px;background:var(--card2);border:1px solid var(--line2);border-radius:999px;overflow:hidden}.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pri),var(--green));min-width:6px;transition:.25s}.bar-fill.in{background:linear-gradient(90deg,var(--orange),var(--pri))}.bar-count{text-align:right;font-weight:800}.notif-list{display:grid;gap:8px}.notif-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--card2);border-radius:13px;padding:10px}.notif-item b{font-size:12px}.notif-item small{display:block;color:var(--muted);margin-top:3px;line-height:1.35}.notif-dot{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(249,115,22,.13);margin-top:5px;flex:0 0 auto}.notif-empty{color:var(--muted);line-height:1.6}.dashboard-mini{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.dashboard-mini .badge{font-size:11px}
.surat-arsip-layout{align-items:start}.surat-arsip-layout .table-wrap{max-height:calc(100vh - 275px);overflow:auto}.surat-arsip-layout .card{margin-bottom:0}
.print-only{display:none}
@media(max-width:1100px){.detail-layout{grid-template-columns:1fr}.preview-side{position:static}.f4-preview-wrap{max-height:none}.f4-preview-scale{width:318px;height:499px}.preview-side .surat{width:794px}}
@media(max-width:900px){.sidebar{position:fixed;z-index:50;inset:0 auto 0 0;transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.grid3,.grid4,.grid2,.tpl{grid-template-columns:1fr}.top{padding:0 12px}.content{padding:12px}.surat{width:100%;padding:30px 26px}.stepbar{overflow:auto}.login-card{padding:20px}}
@media print{body{background:#fff;overflow:visible}.app,.login,.modal-bg{display:none!important}.print-only{display:block}.surat{width:auto;min-height:auto;padding:0}.surat-box{border:0}.kop img{width:65px;height:65px}@page{size:210mm 330mm;margin:18mm 16mm}}
/* V174: Login modern elegan SASEAK — inspirasi split panel yang lebih premium */
.login-modern{
background:
radial-gradient(circle at 12% 20%,rgba(255,255,255,.9) 0 120px,transparent 122px),
radial-gradient(circle at 80% 8%,rgba(255,255,255,.52),transparent 24%),
linear-gradient(135deg,#d8e9f4 0%,#eaf2f8 45%,#d8edf8 100%)!important;
padding:28px!important;
}
.login-modern:after{
background:
radial-gradient(circle at 10% 85%,rgba(118,190,241,.16) 0 110px,transparent 112px),
linear-gradient(115deg,transparent 0 55%,rgba(255,255,255,.22) 55% 70%,transparent 70%)!important;
-webkit-mask-image:none!important;mask-image:none!important;opacity:1;
}
.login-modern .login-canvas{opacity:.08}
.login-modern-card{
width:min(1280px,96vw)!important;
min-height:760px;
display:grid!important;
grid-template-columns:1.18fr .96fr;
padding:0!important;
border-radius:36px!important;
overflow:hidden!important;
background:rgba(255,255,255,.78)!important;
border:1px solid rgba(255,255,255,.88)!important;
box-shadow:0 28px 80px rgba(31,64,102,.18),0 10px 30px rgba(0,0,0,.08)!important;
backdrop-filter:blur(10px);
}
.login-modern-card:after{display:none!important}
.login-hero-panel{
position:relative;
min-height:760px;
padding:42px 42px 38px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:
linear-gradient(180deg,rgba(234,245,252,.92) 0%,rgba(245,249,252,.88) 42%,rgba(236,246,252,.92) 100%),
radial-gradient(circle at 85% 22%,rgba(120,197,244,.22),transparent 26%),
linear-gradient(180deg,#edf6fb 0%,#f9fcfd 100%);
color:#183052;
}
.login-hero-top{display:flex;align-items:center;gap:18px;position:relative;z-index:2}
.login-logo-hero{
width:118px!important;height:118px!important;border-radius:28px!important;margin:0!important;
background:rgba(255,255,255,.98)!important;border:1px solid rgba(53,121,182,.08)!important;
box-shadow:0 18px 40px rgba(34,95,156,.12)!important;
}
.login-logo-hero svg{width:62px!important;height:62px!important;stroke:#0f66c8!important;stroke-width:2.1!important}
.login-logo-hero img{padding:10px!important;border-radius:24px!important;background:#fff!important}
.login-hero-brandtext{display:flex;flex-direction:column;gap:4px}
.login-hero-app{font-size:54px;line-height:1;font-weight:1000;letter-spacing:2px;color:#102e6d}
.login-hero-tag{font-size:14px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;color:#285d9b;position:relative;padding-left:54px}
.login-hero-tag:before,.login-hero-tag:after{content:"";position:absolute;left:0;top:50%;height:2px;border-radius:999px;background:linear-gradient(90deg,#2eaf44,#1b75d0)}
.login-hero-tag:before{width:42px;transform:translateY(-50%)}
.login-hero-copy{position:relative;z-index:2;max-width:520px;margin-top:22px}
.login-hero-overline{font-size:13px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#2eaf44;margin-bottom:16px}
.login-modern h1{margin:0!important;font-size:64px!important;line-height:1.13!important;letter-spacing:-1px!important;color:#14336f!important;text-align:left!important}
.login-modern h1 span{display:block;color:#1f7ed9!important}
.login-hero-copy p{margin:20px 0 0;color:#29415f;font-size:18px;line-height:1.65;max-width:480px}
.login-hero-scene{position:relative;flex:1;min-height:260px;margin:28px -42px 0;overflow:hidden;border-radius:0 0 0 36px;background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.08) 28%,rgba(239,222,175,.25) 62%,rgba(154,205,98,.18) 100%)}
.scene-sun{position:absolute;right:90px;top:48px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,224,160,.9) 0%,rgba(255,224,160,.32) 46%,transparent 68%);filter:blur(1px)}
.scene-hill{position:absolute;left:0;right:0;border-radius:50% 50% 0 0 / 100% 100% 0 0}
.scene-hill-1{bottom:118px;height:170px;background:linear-gradient(180deg,#cedec1,#bfcfb2);transform:translateX(-6%) scaleX(1.12)}
.scene-hill-2{bottom:62px;height:220px;background:linear-gradient(180deg,#bad39a,#95bc70);transform:translateX(12%) scaleX(1.04)}
.scene-hill-3{bottom:0;height:200px;background:linear-gradient(180deg,#8ec85c,#5fa63f)}
.scene-village{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);width:230px;height:72px;border-radius:18px 18px 12px 12px;background:linear-gradient(180deg,#e9d8bf,#d4b286);box-shadow:0 8px 18px rgba(94,73,41,.18)}
.scene-village:before{content:"";position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:122px;height:24px;background:#925c3a;clip-path:polygon(0 100%,12% 40%,50% 0,88% 40%,100% 100%)}
.scene-village:after{content:"";position:absolute;left:50%;top:-64px;transform:translateX(-50%);width:4px;height:56px;background:#777}
.login-benefits{
position:absolute;left:30px;right:30px;bottom:26px;z-index:3;
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 20px;border-radius:22px;
background:linear-gradient(135deg,rgba(38,65,32,.72),rgba(64,84,28,.76));backdrop-filter:blur(10px);
box-shadow:0 18px 40px rgba(25,43,21,.26);color:#fff;
}
.benefit-item{display:flex;align-items:flex-start;gap:12px}
.benefit-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:#2068cb;font-size:22px;flex:0 0 auto;box-shadow:0 8px 15px rgba(0,0,0,.12)}
.benefit-item b{display:block;font-size:16px;margin-bottom:4px;color:#fff}
.benefit-item small{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.92)}
.login-form-panel{
position:relative;padding:54px 56px 34px;display:flex;flex-direction:column;justify-content:center;
background:linear-gradient(180deg,#fdfefe 0%,#fbfcfd 100%);
}
.login-form-panel:before{content:"";position:absolute;left:-42px;top:0;bottom:0;width:70px;background:radial-gradient(circle at 0 18px,#d8e5ef 0 18px,transparent 19px);background-size:70px 40px;opacity:.85}
.login-form-panel:after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:96px;background:linear-gradient(180deg,transparent 0%,rgba(223,244,252,.22) 18%,rgba(197,234,247,.85) 100%);clip-path:polygon(0 100%,0 62%,8% 70%,16% 52%,26% 72%,38% 48%,50% 70%,63% 50%,76% 68%,88% 44%,100% 68%,100% 100%)}
.login-form-logo{display:flex;justify-content:center;margin-bottom:16px;position:relative;z-index:1}
.login-logo-round{width:140px!important;height:140px!important;border-radius:50%!important;margin:0!important;background:#fff!important;border:1px solid #edf0f4!important;box-shadow:0 18px 40px rgba(21,54,90,.10)!important}
.login-logo-round svg{width:74px!important;height:74px!important;stroke:#0f66c8!important;stroke-width:2.1!important}
.login-logo-round img{padding:16px!important;border-radius:50%!important;background:#fff!important}
.login-form-head{margin-bottom:28px;text-align:center;position:relative;z-index:1}
.login-form-head b{display:block;color:#172a56;font-size:28px;letter-spacing:-.4px}
.login-form-head small{display:block;color:#63728b;font-size:15px;line-height:1.6;margin-top:10px;max-width:360px;margin-left:auto;margin-right:auto}
.login-modern .login-field{margin-bottom:18px!important;position:relative;z-index:1}
.login-modern .login-field label{color:#6f7c91!important;font-weight:800!important;font-size:12px!important;letter-spacing:.2px;text-transform:none!important;margin-bottom:7px}
.login-input-shell{display:flex;align-items:center;gap:10px;height:64px;padding:0 16px;border:1px solid #d7dfe8;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(28,54,86,.03)}
.login-input-shell:focus-within{border-color:#4ca0e7;box-shadow:0 0 0 4px rgba(76,160,231,.11),0 12px 24px rgba(28,54,86,.05)}
.login-input-ic{font-size:20px;opacity:.72;flex:0 0 auto}
.login-modern .field input,
.login-modern .field select{height:100%;flex:1;border:0!important;background:transparent!important;color:#25344d!important;border-radius:0!important;padding:0!important;box-shadow:none!important;font-size:16px!important}
.login-modern .field input::placeholder{color:#98a3b3}
.login-eye{border:0;background:transparent;color:#7d8aa1;font-size:19px;cursor:pointer;padding:0 2px;flex:0 0 auto}
.login-options-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 20px;position:relative;z-index:1}
.login-check{display:inline-flex;align-items:center;gap:10px;color:#4e5d73;font-size:15px;cursor:pointer}
.login-check input{width:20px;height:20px;border-radius:6px;accent-color:#2eaf44}
.login-link-btn{border:0;background:transparent;color:#2078d8;font-size:14px;font-weight:700;cursor:pointer}
.login-submit{width:100%!important;justify-content:center!important;height:58px!important;border-radius:16px!important;margin:2px 0 18px!important;background:linear-gradient(90deg,#47ba2e,#1475d8)!important;box-shadow:0 18px 30px rgba(28,116,210,.18)!important;font-weight:900!important;font-size:17px!important;position:relative;z-index:1}
.login-divider{display:flex;align-items:center;gap:16px;color:#8d97a8;font-size:13px;margin:8px 0 18px;position:relative;z-index:1}
.login-divider:before,.login-divider:after{content:"";height:1px;flex:1;background:#d8dee8}
.login-google-btn{height:58px;border-radius:16px;border:1px solid #d6dee7;background:#fff;color:#354761;font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:1;box-shadow:0 10px 22px rgba(28,54,86,.03)}
.login-google-btn:before{content:"G";display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #e5e7eb;color:#ea4335;font-weight:1000;box-shadow:0 3px 8px rgba(0,0,0,.05)}
.login-modern .login-note{color:#66738b!important;background:#f4f8fb!important;border:1px solid #e0e9f0!important;border-radius:14px!important;margin-top:18px!important;position:relative;z-index:1}
.login-form-footer{position:relative;z-index:1;text-align:center;margin-top:18px;color:#5a687f;font-size:14px;font-weight:700}
@media(max-width:980px){
.login-modern{padding:18px!important;align-items:flex-start!important;overflow:auto!important}
.login-modern-card{grid-template-columns:1fr!important;min-height:auto!important;margin:auto 0!important}
.login-hero-panel{min-height:auto!important;padding:32px 24px 150px!important}
.login-hero-app{font-size:42px!important}
.login-modern h1{font-size:44px!important}
.login-hero-copy p{font-size:16px!important}
.login-hero-scene{min-height:220px;margin:26px -24px 0!important}
.login-benefits{left:18px;right:18px;bottom:18px;grid-template-columns:1fr!important}
.login-form-panel{padding:34px 24px 28px!important}
.login-form-panel:before{display:none}
.login-logo-round{width:120px!important;height:120px!important}
}
@media(max-width:640px){
.login-modern-card{border-radius:24px!important}
.login-logo-hero{width:92px!important;height:92px!important}
.login-logo-hero svg{width:48px!important;height:48px!important}
.login-hero-app{font-size:34px!important}
.login-hero-tag{font-size:11px!important;padding-left:42px!important}
.login-hero-tag:before{width:32px!important}
.login-modern h1{font-size:36px!important}
.login-input-shell{height:58px!important}
.login-submit,.login-google-btn{height:54px!important;font-size:15px!important}
}
/* V173: Soft Blue Light Mode - lebih adem untuk dipakai lama */
body.light .top{
background:linear-gradient(180deg,#e8f4fd 0%,#dceefa 100%)!important;
border-bottom-color:rgba(32,92,145,.13)!important;
box-shadow:0 10px 26px rgba(42,95,145,.08)!important;
}
body.light .sidebar{
background:var(--sidebar-bg)!important;
border-right-color:rgba(32,92,145,.12)!important;
box-shadow:3px 0 20px rgba(42,95,145,.08)!important;
}
body.light .brand{border-bottom-color:rgba(32,92,145,.12)!important}
body.light .brand-ic{background:linear-gradient(135deg,#f2fbff,#cde9fb)!important;box-shadow:0 8px 18px rgba(23,136,223,.14)!important}
body.light .brand-ic img{background:#f7fcff!important}
body.light .card,
body.light .modal,
body.light .tpl-card,
body.light .request-card,
body.light .applicant-history-row,
body.light .applicant-summary .mini-stat,
body.light .applicant-mobile-actions .app-action{
background:linear-gradient(180deg,#eaf6ff 0%,#dff0fb 100%)!important;
border-color:rgba(32,92,145,.12)!important;
}
body.light .card:hover{border-color:rgba(23,136,223,.26)!important;box-shadow:0 12px 30px rgba(42,95,145,.16)!important}
body.light .btn{
background:linear-gradient(180deg,#e3f3fd 0%,#d3e9f9 100%)!important;
border-color:rgba(32,92,145,.18)!important;
color:#173850!important;
}
body.light .btn.pri{background:linear-gradient(135deg,#1788df,#0d6fc1)!important;color:#fff!important;border-color:transparent!important}
body.light .btn.green{color:#0f8c64!important;background:rgba(20,159,114,.09)!important;border-color:rgba(20,159,114,.22)!important}
body.light .btn.red{color:#c83b55!important;background:rgba(217,67,94,.08)!important;border-color:rgba(217,67,94,.20)!important}
body.light .field input,
body.light .field select,
body.light .field textarea,
body.light .search{
background:#eaf6ff!important;
border-color:rgba(32,92,145,.16)!important;
color:#15324a!important;
}
body.light .field input:focus,
body.light .field select:focus,
body.light .field textarea:focus,
body.light .search:focus-within{
border-color:#1788df!important;
box-shadow:0 0 0 4px rgba(23,136,223,.12)!important;
}
body.light .table-wrap{border-color:rgba(32,92,145,.13)!important}
body.light table{background:#e6f3fc!important}
body.light th{background:linear-gradient(180deg,#d7ebfa,#cfe5f6)!important;color:#51708b!important}
body.light td{border-top-color:rgba(32,92,145,.11)!important}
body.light tr:hover td{background:rgba(23,136,223,.07)!important}
body.light .nav button{color:#54718a!important}
body.light .nav button:hover{background:rgba(23,136,223,.08)!important;color:#173850!important}
body.light .nav button.on{
background:linear-gradient(90deg,rgba(23,136,223,.18),rgba(23,136,223,.06))!important;
color:#0d6fc1!important;
}
body.light .drop{background:#eaf6ff!important;border-color:rgba(32,92,145,.16)!important;box-shadow:0 22px 44px rgba(42,95,145,.18)!important}
body.light .drop-item:hover{background:#dceefa!important}
body.light .notice{background:rgba(23,136,223,.10)!important;border-color:rgba(23,136,223,.20)!important;color:#0d6fc1!important}
body.light .toggle-row{background:#e3f3fd!important;border-color:rgba(32,92,145,.14)!important}
body.light .content{background:transparent!important}
body.light .theme-switch{background:linear-gradient(135deg,#cfe5f6,#eaf6ff)!important;border-color:rgba(32,92,145,.20)!important}
body.light ::-webkit-scrollbar-thumb{background:rgba(32,92,145,.24)!important}
/* ============================================================
V179: Tema Light/Dark stabil dari v178, diterapkan ke basis v174
Hanya CSS tema, tidak mengubah fitur/logic/menu.
============================================================ */
/* LIGHT MODE SOFT BLUE - tidak terlalu putih */
body.light{
--bg:#eef5fb!important;
--card:#f8fbff!important;
--card2:#edf6fc!important;
--line:rgba(42,95,145,.10)!important;
--line2:rgba(42,95,145,.18)!important;
--text:#173052!important;
--muted:#5d7190!important;
--dim:#8294ad!important;
--pri:#167bd8!important;
--pri2:#0f63bd!important;
--green:#2faa4a!important;
--red:#df4d62!important;
--orange:#e7842a!important;
--yellow:#e6ad18!important;
--sidebar-bg:linear-gradient(180deg,#f7fbff 0%,#edf6fc 100%)!important;
background:
radial-gradient(circle at 18% 4%,rgba(81,174,255,.08),transparent 26%),
radial-gradient(circle at 82% 0%,rgba(80,190,84,.06),transparent 22%),
#eef5fb!important;
}
body.light .top{
background:linear-gradient(180deg,#f7fbff 0%,#eaf5fc 100%)!important;
border-bottom-color:rgba(42,95,145,.14)!important;
box-shadow:0 10px 26px rgba(42,95,145,.08)!important;
}
body.light .sidebar{
background:var(--sidebar-bg)!important;
border-right-color:rgba(42,95,145,.14)!important;
box-shadow:3px 0 20px rgba(42,95,145,.08)!important;
}
body.light .brand{
border-bottom-color:rgba(42,95,145,.12)!important;
}
body.light .brand-ic{
background:linear-gradient(135deg,#f7fbff,#d8efff)!important;
box-shadow:0 8px 18px rgba(23,136,223,.14)!important;
}
body.light .card,
body.light .modal,
body.light .table-wrap,
body.light .search{
background:#f8fbff!important;
border-color:rgba(42,95,145,.13)!important;
box-shadow:0 12px 28px rgba(42,95,145,.07)!important;
}
body.light .card-title,
body.light .top h1,
body.light .brand-main h2{
color:#173052!important;
}
body.light .top p,
body.light .brand-main span,
body.light .field label{
color:#5d7190!important;
}
body.light .field input,
body.light .field select,
body.light .field textarea{
background:#edf6fc!important;
color:#173052!important;
border-color:rgba(42,95,145,.18)!important;
}
body.light .field input:focus,
body.light .field select:focus,
body.light .field textarea:focus{
border-color:#167bd8!important;
box-shadow:0 0 0 4px rgba(22,123,216,.12)!important;
}
body.light table{
background:#f8fbff!important;
}
body.light th{
background:linear-gradient(180deg,#edf6fc,#e4f1fa)!important;
color:#607592!important;
}
body.light td{
border-color:rgba(42,95,145,.10)!important;
color:#263c5e!important;
}
body.light tr:hover td{
background:#eef7ff!important;
}
body.light .btn{
background:#f3f9ff!important;
color:#24405f!important;
border-color:rgba(42,95,145,.18)!important;
}
body.light .btn.pri{
background:linear-gradient(135deg,#167bd8,#0f63bd)!important;
color:#fff!important;
border-color:transparent!important;
}
body.light .btn.green{
background:rgba(47,170,74,.10)!important;
color:#258c3d!important;
border-color:rgba(47,170,74,.22)!important;
}
body.light .btn.red{
background:rgba(223,77,98,.10)!important;
color:#c83f54!important;
border-color:rgba(223,77,98,.22)!important;
}
/* DARK MODE KONTRAS */
body:not(.light){
--bg:#07111f!important;
--card:#0f1b2d!important;
--card2:#15243a!important;
--line:rgba(150,180,220,.10)!important;
--line2:rgba(160,190,230,.18)!important;
--text:#eaf2ff!important;
--muted:#a8b8d4!important;
--dim:#7184a5!important;
--pri:#60a5fa!important;
--pri2:#2563eb!important;
--green:#7ee787!important;
--red:#ff9aa7!important;
--orange:#ffb86b!important;
--yellow:#ffd166!important;
background:
radial-gradient(circle at 18% 4%,rgba(37,99,235,.13),transparent 26%),
radial-gradient(circle at 82% 0%,rgba(34,197,94,.08),transparent 24%),
#07111f!important;
color:#eaf2ff!important;
}
body:not(.light) .app,
body:not(.light) .main,
body:not(.light) .content{
background:
radial-gradient(circle at 18% 4%,rgba(37,99,235,.13),transparent 26%),
radial-gradient(circle at 82% 0%,rgba(34,197,94,.08),transparent 24%),
#07111f!important;
color:#eaf2ff!important;
}
body:not(.light) .sidebar,
body:not(.light) .top{
background:linear-gradient(180deg,#0f1b2d 0%,#0b1627 100%)!important;
border-color:rgba(160,190,230,.16)!important;
color:#eaf2ff!important;
box-shadow:0 10px 30px rgba(0,0,0,.28)!important;
}
body:not(.light) .brand{
border-color:rgba(160,190,230,.14)!important;
}
body:not(.light) .brand-main h2,
body:not(.light) .top h1,
body:not(.light) #pageTitle{
color:#f2f7ff!important;
}
body:not(.light) .brand-main span,
body:not(.light) .top p,
body:not(.light) #pageSub{
color:#a8b8d4!important;
}
body:not(.light) .brand-ic{
background:linear-gradient(135deg,#172840,#203a5f)!important;
box-shadow:0 10px 22px rgba(0,0,0,.24)!important;
}
body:not(.light) .brand-ic img{
background:#0f1b2d!important;
}
/* Menu dark */
body:not(.light) .nav-label{
color:#7f93b3!important;
}
body:not(.light) .nav button{
background:transparent!important;
color:#c6d4ec!important;
border-color:transparent!important;
}
body:not(.light) .nav button:hover{
background:#15243a!important;
color:#ffffff!important;
border-color:rgba(160,190,230,.18)!important;
}
body:not(.light) .nav button.on{
background:linear-gradient(90deg,#16a34a 0%,#2563eb 100%)!important;
color:#ffffff!important;
border-color:transparent!important;
box-shadow:0 14px 28px rgba(37,99,235,.24)!important;
}
/* Card dan panel dark */
body:not(.light) .card,
body:not(.light) .modal,
body:not(.light) .table-wrap,
body:not(.light) .search,
body:not(.light) .toggle-row,
body:not(.light) .f102-panel,
body:not(.light) .request-card,
body:not(.light) .admin-notif-section,
body:not(.light) .admin-report-card,
body:not(.light) .applicant-history-row,
body:not(.light) .applicant-summary .mini-stat,
body:not(.light) .applicant-mobile-actions .app-action{
background:#0f1b2d!important;
border-color:rgba(160,190,230,.16)!important;
color:#eaf2ff!important;
box-shadow:0 14px 30px rgba(0,0,0,.28)!important;
}
body:not(.light) .card-title,
body:not(.light) .modal h2,
body:not(.light) .stat h3,
body:not(.light) .request-card b,
body:not(.light) .admin-report-card b,
body:not(.light) .notif-item b,
body:not(.light) .applicant-history-row b{
color:#f2f7ff!important;
}
body:not(.light) .stat span,
body:not(.light) .stat small,
body:not(.light) .request-card small,
body:not(.light) .admin-report-card small,
body:not(.light) .notif-item small,
body:not(.light) .applicant-history-row small{
color:#a8b8d4!important;
}
/* Form dark */
body:not(.light) .field label{
color:#b9c7df!important;
}
body:not(.light) .field input,
body:not(.light) .field select,
body:not(.light) .field textarea{
background:#15243a!important;
color:#f2f7ff!important;
border-color:rgba(160,190,230,.22)!important;
box-shadow:none!important;
}
body:not(.light) .field input::placeholder,
body:not(.light) .field textarea::placeholder,
body:not(.light) .search input::placeholder{
color:#7f93b3!important;
}
body:not(.light) .field input:focus,
body:not(.light) .field select:focus,
body:not(.light) .field textarea:focus{
background:#172840!important;
border-color:#60a5fa!important;
box-shadow:0 0 0 4px rgba(96,165,250,.14)!important;
}
body:not(.light) select option{
background:#15243a!important;
color:#f2f7ff!important;
}
body:not(.light) .search input{
color:#f2f7ff!important;
}
/* Button dark */
body:not(.light) .btn{
background:#15243a!important;
color:#eaf2ff!important;
border-color:rgba(160,190,230,.20)!important;
}
body:not(.light) .btn:hover{
background:#1a2d48!important;
border-color:rgba(125,183,255,.42)!important;
}
body:not(.light) .btn.pri{
background:linear-gradient(90deg,#16a34a 0%,#2563eb 100%)!important;
color:#ffffff!important;
border-color:transparent!important;
}
body:not(.light) .btn.green{
background:rgba(34,197,94,.13)!important;
color:#7ee787!important;
border-color:rgba(34,197,94,.25)!important;
}
body:not(.light) .btn.red{
background:rgba(248,113,113,.13)!important;
color:#ff9aa7!important;
border-color:rgba(248,113,113,.26)!important;
}
/* Tabel dark */
body:not(.light) .table-wrap{
background:#0f1b2d!important;
border-color:rgba(160,190,230,.16)!important;
}
body:not(.light) .table-wrap table,
body:not(.light) table{
background:#0f1b2d!important;
}
body:not(.light) th{
background:#15243a!important;
color:#b9c7df!important;
border-color:rgba(160,190,230,.16)!important;
}
body:not(.light) td{
background:#0f1b2d!important;
color:#eaf2ff!important;
border-color:rgba(160,190,230,.10)!important;
}
body:not(.light) tr:hover td{
background:#172840!important;
}
/* Template/dropdown/notice dark */
body:not(.light) .tpl-card{
background:#0f1b2d!important;
border-color:rgba(160,190,230,.16)!important;
}
body:not(.light) .tpl-card h3{
color:#f2f7ff!important;
}
body:not(.light) .tpl-card p{
color:#a8b8d4!important;
}
body:not(.light) .drop{
background:#0f1b2d!important;
border-color:rgba(160,190,230,.20)!important;
}
body:not(.light) .drop-item{
color:#eaf2ff!important;
border-color:rgba(160,190,230,.12)!important;
}
body:not(.light) .drop-item:hover{
background:#172840!important;
}
body:not(.light) .notice{
background:rgba(96,165,250,.12)!important;
color:#b9d8ff!important;
border-color:rgba(96,165,250,.24)!important;
}
body:not(.light) .notice.green{
background:rgba(34,197,94,.12)!important;
color:#a7f3d0!important;
border-color:rgba(34,197,94,.24)!important;
}
/* Preview surat tetap putih agar dokumen jelas */
body:not(.light) .surat,
body:not(.light) #surat,
body:not(.light) #suratPreview,
body:not(.light) #printDoc .surat,
body:not(.light) .print-only .surat{
background:#ffffff!important;
color:#000000!important;
}
body:not(.light) .surat *,
body:not(.light) #surat *,
body:not(.light) #suratPreview *,
body:not(.light) #printDoc .surat *{
color:#000000!important;
}
body:not(.light) .surat-box,
body:not(.light) .f4-preview-wrap,
body:not(.light) .template-preview-wrap,
body:not(.light) .kop-preview-f4-wrap,
body:not(.light) .cetak-preview-wrap{
background:#0b1627!important;
border-color:rgba(160,190,230,.16)!important;
}
/* Editor Word tetap putih agar format surat terlihat */
body:not(.light) .word-editor{
background:#ffffff!important;
color:#111111!important;
}
body:not(.light) .word-editor *{
color:#111111!important;
}
/* V180: Fix tampilan F-1.02 / Surat Pengantar KTP di dark mode
Jangan biarkan rule global tabel dark masuk ke preview surat */
body:not(.light) .surat table,
body:not(.light) #surat table,
body:not(.light) #suratPreview table,
body:not(.light) #printDoc .surat table,
body:not(.light) .print-only .surat table{
background:#fff!important;
border-collapse:collapse!important;
}
body:not(.light) .surat tr:hover td,
body:not(.light) #surat tr:hover td,
body:not(.light) #suratPreview tr:hover td,
body:not(.light) #printDoc .surat tr:hover td,
body:not(.light) .print-only .surat tr:hover td{
background:#fff!important;
}
body:not(.light) .surat td,
body:not(.light) .surat th,
body:not(.light) #surat td,
body:not(.light) #surat th,
body:not(.light) #suratPreview td,
body:not(.light) #suratPreview th,
body:not(.light) #printDoc .surat td,
body:not(.light) #printDoc .surat th,
body:not(.light) .print-only .surat td,
body:not(.light) .print-only .surat th{
background:#fff!important;
background-color:#fff!important;
color:#000!important;
border-color:#000!important;
box-shadow:none!important;
}
body:not(.light) .surat .f102,
body:not(.light) #surat .f102,
body:not(.light) #suratPreview .f102,
body:not(.light) #printDoc .f102,
body:not(.light) .print-only .f102{
background:#fff!important;
color:#000!important;
}
body:not(.light) .surat .f102 *,
body:not(.light) #surat .f102 *,
body:not(.light) #suratPreview .f102 *,
body:not(.light) #printDoc .f102 *,
body:not(.light) .print-only .f102 *{
color:#000!important;
}
body:not(.light) .surat .f102-grid,
body:not(.light) .surat .f102-grid td,
body:not(.light) .surat .f102-grid th,
body:not(.light) .surat .f102-fill,
body:not(.light) #surat .f102-grid,
body:not(.light) #surat .f102-grid td,
body:not(.light) #surat .f102-grid th,
body:not(.light) #surat .f102-fill,
body:not(.light) #suratPreview .f102-grid,
body:not(.light) #suratPreview .f102-grid td,
body:not(.light) #suratPreview .f102-grid th,
body:not(.light) #suratPreview .f102-fill,
body:not(.light) #printDoc .f102-grid,
body:not(.light) #printDoc .f102-grid td,
body:not(.light) #printDoc .f102-grid th,
body:not(.light) #printDoc .f102-fill,
body:not(.light) .print-only .f102-grid,
body:not(.light) .print-only .f102-grid td,
body:not(.light) .print-only .f102-grid th,
body:not(.light) .print-only .f102-fill{
background:#fff!important;
background-color:#fff!important;
color:#000!important;
border:1.2px solid #000!important;
border-color:#000!important;
}
body:not(.light) .surat .f102-data,
body:not(.light) #surat .f102-data,
body:not(.light) #suratPreview .f102-data,
body:not(.light) #printDoc .f102-data,
body:not(.light) .print-only .f102-data{
background:#fff!important;
}
body:not(.light) .surat .f102-data td,
body:not(.light) #surat .f102-data td,
body:not(.light) #suratPreview .f102-data td,
body:not(.light) #printDoc .f102-data td,
body:not(.light) .print-only .f102-data td{
border:0!important;
background:#fff!important;
color:#000!important;
}
body:not(.light) .surat .f102-fill,
body:not(.light) #surat .f102-fill,
body:not(.light) #suratPreview .f102-fill,
body:not(.light) #printDoc .f102-fill,
body:not(.light) .print-only .f102-fill{
border:1.2px solid #000!important;
background:#fff!important;
color:#000!important;
}
body:not(.light) .surat .f102-choice.on,
body:not(.light) #surat .f102-choice.on,
body:not(.light) #suratPreview .f102-choice.on,
body:not(.light) #printDoc .f102-choice.on,
body:not(.light) .print-only .f102-choice.on,
body:not(.light) .surat .f102-dot,
body:not(.light) #surat .f102-dot,
body:not(.light) #suratPreview .f102-dot,
body:not(.light) #printDoc .f102-dot,
body:not(.light) .print-only .f102-dot{
background:#fff!important;
color:#000!important;
border-color:#000!important;
}
/* V181: Login form tetap warna light mode pada dark mode + informasi login dihapus */
body:not(.light) .login-modern .login-form-panel{
background:linear-gradient(180deg,#fdfefe 0%,#fbfcfd 100%)!important;
color:#172a56!important;
}
body:not(.light) .login-modern .login-form-head b{
color:#172a56!important;
}
body:not(.light) .login-modern .login-form-head small{
color:#63728b!important;
}
body:not(.light) .login-modern .login-field label{
color:#6f7c91!important;
}
body:not(.light) .login-modern .login-input-shell{
background:#ffffff!important;
border:1px solid #d7dfe8!important;
color:#25344d!important;
box-shadow:0 8px 22px rgba(28,54,86,.03)!important;
}
body:not(.light) .login-modern .login-input-shell:focus-within{
border-color:#4ca0e7!important;
box-shadow:0 0 0 4px rgba(76,160,231,.11),0 12px 24px rgba(28,54,86,.05)!important;
}
body:not(.light) .login-modern .login-input-shell input,
body:not(.light) .login-modern .login-input-shell select,
body:not(.light) .login-modern .field input,
body:not(.light) .login-modern .field select{
background:transparent!important;
color:#25344d!important;
border:0!important;
box-shadow:none!important;
}
body:not(.light) .login-modern .login-input-shell input::placeholder{
color:#98a3b3!important;
}
body:not(.light) .login-modern .login-input-ic,
body:not(.light) .login-modern .login-eye{
color:#7d8aa1!important;
opacity:.9!important;
}
body:not(.light) .login-modern select option{
background:#ffffff!important;
color:#25344d!important;
}
body:not(.light) .login-modern .login-check,
body:not(.light) .login-modern .login-check span{
color:#4e5d73!important;
}
body:not(.light) .login-modern .login-link-btn{
color:#2078d8!important;
}
body:not(.light) .login-modern .login-form-footer{
color:#5a687f!important;
}
.login-modern .login-divider,
.login-modern .login-google-btn,
.login-modern .login-note{
display:none!important;
}
/* V182: Hapus pembatas bulatan tengah login + footer 2026 */
.login-form-panel:before,
.login-modern .login-form-panel:before{
display:none!important;
content:none!important;
background:none!important;
}
.login-form-panel{
border-left:1px solid rgba(225,234,244,.75)!important;
}
@media(max-width:980px){
.login-form-panel{
border-left:0!important;
border-top:1px solid rgba(225,234,244,.75)!important;
}
}
/* V185: Menu Buat Surat kategori + logo/icon + template terkunci */
#tplCards{
display:block!important;
}
.tpl-category{
margin:0 0 18px;
}
.tpl-category-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:12px;
margin:0 0 10px;
padding:0 2px;
}
.tpl-category-head h3{
margin:0;
color:#173052;
font-size:16px;
font-weight:950;
letter-spacing:-.15px;
}
.tpl-category-head small{
color:#6b7d97;
font-size:12px;
font-weight:750;
}
.tpl-category-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.tpl-catalog-card{
position:relative;
display:flex!important;
align-items:flex-start;
gap:13px;
min-height:118px;
padding:16px!important;
border-radius:20px!important;
background:
radial-gradient(circle at 94% 10%,rgba(22,123,216,.08),transparent 28%),
#fbfdff!important;
border:1px solid #e2ebf4!important;
box-shadow:0 10px 24px rgba(17,60,110,.045)!important;
cursor:pointer;
transition:.18s ease;
overflow:hidden;
}
.tpl-catalog-card:hover{
transform:translateY(-2px);
border-color:#a9cff1!important;
box-shadow:0 16px 30px rgba(17,60,110,.075)!important;
}
.tpl-catalog-card.locked{
cursor:not-allowed;
opacity:.78;
background:
radial-gradient(circle at 94% 10%,rgba(135,148,166,.07),transparent 28%),
#f7f9fc!important;
}
.tpl-catalog-card.locked:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,transparent,rgba(255,255,255,.35));
pointer-events:none;
}
.tpl-icon{
width:48px;
height:48px;
border-radius:16px;
display:grid;
place-items:center;
flex:0 0 auto;
color:#2563eb;
background:rgba(37,99,235,.09);
border:1px solid rgba(37,99,235,.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}
.tpl-icon svg{
width:25px;
height:25px;
display:block;
stroke:currentColor;
fill:none;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.tpl-catalog-card.locked .tpl-icon{
color:#7b8798;
background:#edf1f6;
}
.tpl-main{
min-width:0;
flex:1;
}
.tpl-row{
display:flex;
justify-content:flex-start;
margin-bottom:7px;
}
.tpl-status{
display:inline-flex;
align-items:center;
border-radius:999px;
padding:4px 8px;
font-size:10px;
font-weight:900;
letter-spacing:.25px;
}
.tpl-status.ready{
background:rgba(47,170,74,.12);
color:#258c3d;
border:1px solid rgba(47,170,74,.20);
}
.tpl-status.locked{
background:rgba(116,128,145,.12);
color:#69798d;
border:1px solid rgba(116,128,145,.20);
}
.tpl-catalog-card h3{
margin:0!important;
color:#1d3558!important;
font-size:14.5px!important;
line-height:1.25!important;
font-weight:950!important;
}
.tpl-catalog-card p{
margin:7px 0 0!important;
color:#667b99!important;
font-size:12px!important;
line-height:1.42!important;
}
.tpl-catalog-card.locked h3{
color:#526173!important;
}
.tpl-catalog-card.locked p{
color:#8794a6!important;
}
/* Dark mode kategori surat */
body:not(.light) .tpl-category-head h3{
color:#f2f7ff!important;
}
body:not(.light) .tpl-category-head small{
color:#a8b8d4!important;
}
body:not(.light) .tpl-catalog-card{
background:
radial-gradient(circle at 94% 10%,rgba(96,165,250,.10),transparent 28%),
#0f1b2d!important;
border-color:rgba(160,190,230,.16)!important;
box-shadow:0 14px 30px rgba(0,0,0,.24)!important;
}
body:not(.light) .tpl-catalog-card:hover{
border-color:rgba(125,183,255,.35)!important;
}
body:not(.light) .tpl-catalog-card.locked{
background:#101a2a!important;
opacity:.72;
}
body:not(.light) .tpl-catalog-card.locked:after{
background:linear-gradient(135deg,transparent,rgba(0,0,0,.16));
}
body:not(.light) .tpl-icon{
color:#7cb6ff!important;
background:rgba(124,182,255,.12)!important;
border-color:rgba(124,182,255,.20)!important;
}
body:not(.light) .tpl-catalog-card.locked .tpl-icon{
color:#8da0bd!important;
background:#15243a!important;
border-color:rgba(160,190,230,.18)!important;
}
body:not(.light) .tpl-catalog-card h3{
color:#f2f7ff!important;
}
body:not(.light) .tpl-catalog-card p{
color:#a8b8d4!important;
}
body:not(.light) .tpl-catalog-card.locked h3{
color:#aab8cf!important;
}
body:not(.light) .tpl-catalog-card.locked p{
color:#7184a5!important;
}
body:not(.light) .tpl-status.ready{
background:rgba(34,197,94,.13)!important;
color:#7ee787!important;
border-color:rgba(34,197,94,.24)!important;
}
body:not(.light) .tpl-status.locked{
background:rgba(148,163,184,.12)!important;
color:#a8b8d4!important;
border-color:rgba(148,163,184,.20)!important;
}
@media(max-width:1100px){
.tpl-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.tpl-category-grid{grid-template-columns:1fr}
.tpl-category-head{align-items:flex-start;flex-direction:column;gap:2px}
}
/* V186: Buat Surat compact - hanya logo dan judul surat */
.tpl-category-compact{
margin-bottom:16px!important;
}
.tpl-category-compact .tpl-category-head{
margin-bottom:8px!important;
}
.tpl-compact-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:10px!important;
}
.tpl-compact-card{
min-height:94px!important;
padding:12px 10px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
text-align:center!important;
border-radius:18px!important;
}
.tpl-compact-card .tpl-icon{
width:42px!important;
height:42px!important;
border-radius:14px!important;
}
.tpl-compact-card .tpl-icon svg{
width:23px!important;
height:23px!important;
}
.tpl-compact-card h3{
margin:0!important;
font-size:12.5px!important;
line-height:1.25!important;
font-weight:950!important;
color:#1d3558!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
.tpl-compact-card.locked{
opacity:.55!important;
filter:grayscale(.18);
}
.tpl-compact-card.locked:before{
content:'';
position:absolute;
top:7px;
right:8px;
width:20px;
height:20px;
display:block;
border-radius:999px;
background:rgba(255,255,255,.86);
border:1px solid rgba(116,128,145,.22);
z-index:2;
}
.tpl-compact-card.locked:after{
content:'';
position:absolute;
inset:auto!important;
left:auto!important;
bottom:auto!important;
top:12px;
right:13px;
width:8px;
height:6px;
background:transparent!important;
border:1.6px solid #7b8798;
border-radius:2px;
pointer-events:none;
z-index:3;
}
.tpl-compact-card.locked .tpl-icon:after{
content:'';
position:absolute;
top:9px;
right:15px;
width:4px;
height:5px;
border:1.6px solid #7b8798;
border-bottom:0;
border-radius:5px 5px 0 0;
z-index:3;
}
.tpl-compact-card p,
.tpl-compact-card .tpl-row,
.tpl-compact-card .tpl-status{
display:none!important;
}
body:not(.light) .tpl-compact-card h3{
color:#f2f7ff!important;
}
body:not(.light) .tpl-compact-card.locked:before{
background:#15243a!important;
border-color:rgba(160,190,230,.20)!important;
}
body:not(.light) .tpl-compact-card.locked:after,
body:not(.light) .tpl-compact-card.locked .tpl-icon:after{
border-color:#8da0bd!important;
}
@media(max-width:1200px){
.tpl-compact-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:900px){
.tpl-compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:620px){
.tpl-compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.tpl-compact-card{min-height:88px!important}
}
/* V187: Buat Surat - auto masuk detail setelah pilih penduduk + cetak sederhana */
#step4 .toolbar{
justify-content:flex-end!important;
gap:10px!important;
}
#step4 .toolbar .btn{
min-width:112px;
}
.stepbar .step span{
white-space:nowrap;
}
@media(max-width:760px){
.stepbar .step span{
font-size:11px;
}
}
/* V188: Dashboard statistik desa lengkap */
.stat-grid,
.home-stats,
#homeStats{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:14px!important;
}
.stat{
min-height:104px!important;
border-radius:22px!important;
background:linear-gradient(135deg,#fbfdff,#eef7ff)!important;
border:1px solid rgba(42,95,145,.13)!important;
box-shadow:0 12px 28px rgba(17,60,110,.055)!important;
padding:18px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
gap:6px!important;
}
.stat b{
font-size:30px!important;
line-height:1!important;
color:#173052!important;
font-weight:950!important;
}
.stat span{
font-size:13px!important;
color:#63728b!important;
font-weight:850!important;
}
body:not(.light) .stat{
background:#0f1b2d!important;
border-color:rgba(160,190,230,.16)!important;
box-shadow:0 14px 30px rgba(0,0,0,.28)!important;
}
body:not(.light) .stat b{
color:#f2f7ff!important;
}
body:not(.light) .stat span{
color:#a8b8d4!important;
}
@media(max-width:1050px){
.stat-grid,.home-stats,#homeStats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
.stat-grid,.home-stats,#homeStats{grid-template-columns:1fr!important}
}
/* V190: Buat Surat - garis kategori full width berwarna sampai ujung */
#tplCards .tpl-category-compact{
position:relative;
padding:16px 0 20px!important;
margin:0 0 8px!important;
border-top:0!important;
}
#tplCards .tpl-category-compact:first-child{
padding-top:0!important;
}
#tplCards .tpl-category-compact .tpl-category-head{
position:relative;
margin-bottom:14px!important;
padding-bottom:12px!important;
border-bottom:0!important;
}
#tplCards .tpl-category-compact .tpl-category-head:before{
content:'';
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#3b82f6,#22c55e,#f59e0b);
position:absolute;
left:0;
right:0;
width:auto;
bottom:0;
}
#tplCards .tpl-category-compact + .tpl-category-compact{
margin-top:14px!important;
padding-top:18px!important;
}
#tplCards .tpl-category-compact + .tpl-category-compact:after{
content:'';
position:absolute;
left:0;
right:0;
top:0;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,#3b82f6,#22c55e,#f59e0b);
}
body:not(.light) #tplCards .tpl-category-compact .tpl-category-head:before,
body:not(.light) #tplCards .tpl-category-compact + .tpl-category-compact:after{
background:linear-gradient(90deg,#6c8fff,#20d47e,#fbbf24);
}
@media(max-width:680px){
#tplCards .tpl-category-compact{
padding:14px 0 18px!important;
}
#tplCards .tpl-category-compact + .tpl-category-compact{
padding-top:16px!important;
}
#tplCards .tpl-category-compact .tpl-category-head{
margin-bottom:12px!important;
}
}
/* V191: Buat Surat - hilangkan sisa badge gembok yang muncul seperti kotak bergeser */
.tpl-compact-card.locked:before,
.tpl-compact-card.locked:after,
.tpl-compact-card.locked .tpl-icon:after{
content:none!important;
display:none!important;
border:0!important;
background:none!important;
box-shadow:none!important;
}
.tpl-compact-card.locked .tpl-icon{
overflow:hidden!important;
}
/* V189: Loading cloud dipindah ke area form login agar tidak muncul splash SASEAK Siap */
.login-data-loader{
position:relative;z-index:1;display:flex;align-items:flex-start;gap:12px;
margin:0 0 16px;padding:13px 14px;border-radius:16px;
background:#f5f9fd;border:1px solid #dce7f2;box-shadow:0 10px 24px rgba(28,54,86,.06);
color:#24344d;-webkit-transition:opacity .35s ease;transition:opacity .35s ease;
}
.login-data-spinner{
width:26px;height:26px;border-radius:50%;border:3px solid #d9e8f7;border-top-color:#1679d8;
-webkit-animation:loginDataSpin .85s linear infinite;animation:loginDataSpin .85s linear infinite;flex:0 0 auto;margin-top:2px;
}
.login-data-info{flex:1;min-width:0}.login-data-info b{display:block;font-size:13px;color:#172a56;margin-bottom:3px}.login-data-info small{display:block;font-size:11.5px;line-height:1.4;color:#63728b}.login-data-progress{height:4px;margin-top:9px;border-radius:999px;overflow:hidden;background:#e2edf7}.login-data-progress span{display:block;width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,#47ba2e,#1475d8);-webkit-transition:width .35s ease;transition:width .35s ease}.login-offline-action{display:none;margin-top:10px}.login-offline-action button{width:100%;border:0;border-radius:12px;padding:9px 12px;background:linear-gradient(90deg,#47ba2e,#1475d8);color:#fff;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 10px 20px rgba(28,116,210,.16)}.login-offline-action small{margin-top:6px;text-align:center;color:#7a8798}
@-webkit-keyframes loginDataSpin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes loginDataSpin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@media(max-width:900px){.login-data-loader{margin-bottom:14px}}
/* ============================================================
[CSS-10] Kop surat, F-1.02, editor template, preview
File hasil pemisahan dari versi kerja.
Jangan ubah urutan build di build.py kecuali paham dependensinya.
============================================================ */
/* V5: dua kop surat berbeda */
.kop.kop-kades{text-align:center;margin-bottom:18px;padding-bottom:9px;border-bottom:none}
.kop.kop-kades img{display:block;margin:0 auto 8px;width:76px;height:76px;object-fit:contain}
.kop.kop-sek{position:relative;text-align:center;border-bottom:4px double #000;padding:0 0 8px 86px;margin-bottom:16px;min-height:86px}
.kop.kop-sek img{position:absolute;left:0;top:0;width:74px;height:74px;object-fit:contain;margin:0}
.kop.kop-sek h1{font-size:12pt;text-transform:uppercase;line-height:1.18;font-weight:bold;letter-spacing:.2px;margin:0}.kop.kop-sek h1.desa-besar{font-size:18pt}
.kop.kop-sek p{font-size:9.5pt;line-height:1.25;margin:4px 0 0}
/* V15: Nomor KK + kontrol F-1.02 */
.f102-panel{border:1px solid var(--line);background:var(--card2);border-radius:13px;padding:12px;margin:10px 0}.f102-panel-title{font-weight:800;margin-bottom:8px;color:var(--text)}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-top:4px}.check-item{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}.check-item input{width:auto!important}.f102-choice.on{display:inline-block;border:1.8px solid #000;border-radius:999px;padding:0 7px;font-weight:bold;line-height:1.15}.f102-dot{width:12px;height:12px;border:1.2px solid #000;border-radius:50%;display:inline-block;margin-top:1px;background:#fff!important}.f102-dot.on{background:#fff!important;box-shadow:none!important;position:relative;border:1.8px solid #000}.f102-dot.on:after{content:"✓";position:absolute;left:1px;top:-5px;font-size:13px;font-weight:bold;color:#000!important;background:transparent!important}.f102-req .f102-dot.on+span{font-weight:bold}.file-link{color:var(--pri);font-weight:700;text-decoration:none}.file-link:hover{text-decoration:underline}
/* V36: paksa area surat bersih dari fill hitam/abu di Detail, Preview, Cetak, dan HTML download */
.surat, .print-only .surat, #surat, #suratPreview, #printDoc .surat{background:#fff!important;background-color:#fff!important;}
.surat *{background-image:none!important;box-shadow:none!important;}
.surat table, .surat tbody, .surat thead, .surat tr, .surat td, .surat th, .surat div, .surat p, .surat span, .surat b, .surat small{background-color:transparent!important;}
.surat .f102, .surat .f102-data, .surat .f102-grid, .surat .f102-grid td, .surat .f102-grid th, .surat .f102-fill, .surat .f102-code, .surat .qr{background:#fff!important;background-color:#fff!important;}
.surat [style*="background"], .surat [style*="background-color"]{background:transparent!important;background-color:transparent!important;background-image:none!important;}
.surat .f102-fill[style*="background"], .surat td[style*="background"], .surat th[style*="background"]{background:#fff!important;background-color:#fff!important;}
@media print{.surat, .print-only .surat, #printDoc .surat{background:#fff!important;background-color:#fff!important}.surat *{background-image:none!important;box-shadow:none!important}.surat table,.surat tr,.surat td,.surat th,.surat div,.surat p,.surat span,.surat b,.surat small{background-color:transparent!important}.surat .f102,.surat .f102-grid td,.surat .f102-grid th,.surat .f102-fill,.surat .f102-code,.surat .qr{background:#fff!important;background-color:#fff!important}}
/* V38: editor template surat mirip Office Word + preview */
.modal.template-modal{width:1180px}
.template-editor-layout{display:grid;grid-template-columns:minmax(420px,1fr) 390px;gap:14px;align-items:start}
.word-editor-card{border:1px solid var(--line);background:var(--card2);border-radius:14px;padding:10px}
.word-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:7px;border:1px solid var(--line);background:var(--card);border-radius:12px;margin-bottom:10px;position:sticky;top:0;z-index:2}
.word-toolbar .btn{padding:6px 9px;font-size:11px;border-radius:9px}
.word-editor{min-height:355px;max-height:56vh;overflow:auto;background:#fff;color:#111;border:1px solid #d6d6d6;border-radius:10px;padding:32px 38px;font-family:Arial,Helvetica,sans-serif;font-size:12pt;line-height:1.45;outline:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
.word-editor:focus{border-color:var(--pri);box-shadow:0 0 0 4px rgba(79,124,255,.14)}
.word-editor *{color:#111!important}
.word-editor p{margin:10px 0}.template-clean-body{padding-top:18px}.template-clean-body p{margin:10px 0}.word-editor table{background:#fff;color:#111}.word-editor td,.word-editor th{color:#111;border:1px solid #999;padding:6px}
.word-tab{display:inline-block;width:42px;min-width:42px;height:1px;vertical-align:baseline}.word-spaces{white-space:pre}.word-editor,.template-live-word-body{tab-size:8;white-space:normal}.word-editor p,.template-live-word-body p{white-space:normal}.word-editor table,.template-live-word-body table{border-collapse:collapse}.template-live-word-body td,.template-live-word-body th{vertical-align:top}.template-live-word-body .word-tab,.word-editor .word-tab{display:inline-block;width:42px;min-width:42px}.template-live-word-body span[style*='mso-tab-count'],.word-editor span[style*='mso-tab-count']{display:inline-block;min-width:42px}
.word-form-table{width:auto!important;border-collapse:collapse!important;margin:6px 0 6px 36pt!important;table-layout:fixed!important;font-family:Arial,Helvetica,sans-serif;font-size:12pt;line-height:1.28}.word-form-table td{border:0!important;padding:1px 0!important;vertical-align:top!important;background:transparent!important}.word-form-table .wf-label{width:155px!important;white-space:nowrap!important}.word-form-table .wf-colon{width:14px!important;text-align:center!important}.word-form-table .wf-value{width:360px!important}.word-form-table p{margin:0!important;text-indent:0!important;text-align:left!important}.template-live-word-body .word-form-table,.template-clean-body .word-form-table{margin-left:36pt!important}.word-editor .word-form-table{margin-left:36pt!important}
.template-clean-body p,.template-live-word-body p{ text-indent:0!important; text-align:inherit; }
.template-clean-body p[style*='text-align'],.template-live-word-body p[style*='text-align']{ text-align:unset; }
.template-clean-body table p,.template-live-word-body table p{margin:0!important;text-indent:0!important}.template-clean-body .word-table td,.template-live-word-body .word-table td{border:0!important}
.template-preview-card{position:sticky;top:0}.template-preview-wrap{background:#d8dce6;border:1px solid var(--line);border-radius:14px;padding:12px;overflow:auto;max-height:70vh}.template-preview-scale{width:318px;height:499px;margin:auto;position:relative}.template-preview-scale .surat{transform:scale(.40);transform-origin:top left;border:1px solid #ddd;box-shadow:0 12px 36px rgba(0,0,0,.32)}
.template-token-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.template-token-row button{font-size:10.5px;padding:5px 8px}
@media(max-width:1000px){.template-editor-layout{grid-template-columns:1fr}.template-preview-card{position:static}.modal.template-modal{width:760px}}
/* V57 Kop Surat Manager - garis tebal Word 3D style */
.kop-manager-preview{background:#fff;border:1px solid #ddd;border-radius:12px;padding:14px;color:#000}
.kop-manager-preview *{color:#000!important}
.kop-line-double{border-top:2.2px solid #000;border-bottom:5.2px solid #000;height:9px;margin-top:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.kop-line-single{border-bottom:3.2px solid #000;margin-top:8px}
.kop-line-none{border-bottom:none}
.kop-editor-layout{display:grid;grid-template-columns:minmax(380px,1fr) minmax(380px,1fr);gap:14px;align-items:start}
.kop-editor-layout>.card{min-width:0}
.kop-preview-f4-wrap{background:#d8dce6;border:1px solid var(--line);border-radius:14px;padding:12px;overflow:auto;max-height:calc(100vh - 230px)}
.kop-preview-scale{width:318px;height:499px;margin:0 auto;position:relative}
.kop-preview-paper{width:794px;min-height:1247px;margin:0 auto;background:#fff;color:#000;border:1px solid #ddd;border-radius:0;padding:54px 72px 42px;box-shadow:0 12px 35px rgba(0,0,0,.22);font-family:Arial,Helvetica,sans-serif;transform:scale(.40);transform-origin:top left}
.kop-live-preview{font-family:Arial,Helvetica,sans-serif;color:#000!important}.kop-live-preview *{color:#000!important}.kop.kop-sek{border-bottom:none!important}.kop.kop-kades{border-bottom:none!important}
.kop-preview-content{font-family:Arial,Helvetica,sans-serif;font-size:12pt;line-height:1.45;color:#000!important;margin-top:22px;min-height:170px}.kop-preview-content *{color:#000!important}
.kop-edit-form.hidden{display:none!important}
.kop-custom{position:relative;text-align:center;margin-bottom:16px;min-height:86px}.kop-custom h1{font-size:12pt;text-transform:uppercase;line-height:1.18;font-weight:bold;letter-spacing:.2px;margin:0}.kop-custom h1.desa-besar{font-size:18pt}.kop-custom p{font-size:9.5pt;line-height:1.25;margin:4px 0 0}.kop-custom .custom-logo{object-fit:contain}.kop-custom.logo-top{padding-left:0;text-align:center}.kop-custom.logo-top .custom-logo{display:block;margin:0 auto 8px}.kop-custom.logo-left{padding-left:92px;text-align:center}.kop-custom.logo-left .custom-logo{position:absolute;left:0;top:0}.kop-custom.logo-right{padding-right:92px;text-align:center}.kop-custom.logo-right .custom-logo{position:absolute;right:0;top:0}.kop-custom.logo-none .custom-logo{display:none}
.custom-logo-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.custom-logo-row img{width:74px;height:74px;object-fit:contain;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:5px}
@media(max-width:1000px){.kop-editor-layout{grid-template-columns:1fr}.kop-preview-f4-wrap{max-height:none}}
/* V59: garis kop dibuat full sampai bawah area logo */
.kop.kop-sek .kop-line-double,.kop.kop-sek .kop-line-single,.kop.kop-sek .kop-line-none{margin-left:-86px;width:calc(100% + 86px)}
.kop-custom.logo-left .kop-line-double,.kop-custom.logo-left .kop-line-single,.kop-custom.logo-left .kop-line-none{margin-left:-92px;width:calc(100% + 92px)}
.kop-custom.logo-right .kop-line-double,.kop-custom.logo-right .kop-line-single,.kop-custom.logo-right .kop-line-none{margin-right:-92px;width:calc(100% + 92px)}
.kop-custom.logo-top .kop-line-double,.kop-custom.logo-top .kop-line-single,.kop-custom.logo-top .kop-line-none,.kop-custom.logo-none .kop-line-double,.kop-custom.logo-none .kop-line-single,.kop-custom.logo-none .kop-line-none{width:100%}
/* V60: rapatkan jarak kop dengan judul surat */
.surat .kop{margin-bottom:6px!important;}
.surat .kop.kop-sek,.surat .kop.kop-custom,.surat .kop.kop-kades{margin-bottom:6px!important;}
.surat .judul{margin:6px 0 14px!important;line-height:1.12!important;}
.surat .nomor{margin-top:1px!important;}
.kop-preview-content{margin-top:8px!important;}
.kop-preview-content div:first-child{margin-bottom:4px!important;}
/* V61: format isi surat resmi dengan tab/indent paragraf seperti Word */
.surat .isi:not(.template-clean-body) p:not(.no-indent){text-align:justify!important;text-indent:42px!important;margin:8px 0!important;}
.surat .isi > p:first-child{margin-top:6px!important;}
.surat .ttd p,.surat-footer p,.surat .judul p,.surat .nomor p{text-indent:0!important;text-align:center!important;}
.surat .biodata p,.surat table p{text-indent:0!important;text-align:left!important;}
.surat .biodata{margin:8px 0 4px!important;}
.surat .judul{margin:10px 0 14px!important;}
/* V62: pertahankan format asli import Word/DOCX */
.surat .template-clean-body{display:block;flex:1}
.surat .template-clean-body table{border-collapse:collapse}
.surat .template-clean-body td,.surat .template-clean-body th{vertical-align:top}
.word-tab{display:inline-block;width:42px}
/* V190: Template Surat fullscreen + pengaturan field khusus per template */
#modalTemplate{padding:14px;align-items:stretch;justify-content:center}
#modalTemplate .modal.template-modal{width:calc(100vw - 28px);height:calc(100vh - 28px);max-width:none;max-height:none;overflow:auto;display:flex;flex-direction:column;border-radius:18px;padding:16px}
#modalTemplate .template-editor-layout{grid-template-columns:minmax(620px,1fr) minmax(360px,440px);gap:14px;align-items:start;flex:1;min-height:0}
#modalTemplate .template-editor-main{display:flex;flex-direction:column;min-height:0}
#modalTemplate .word-editor-card{display:flex;flex-direction:column;min-height:0;flex:1}
#modalTemplate .word-editor{min-height:430px;max-height:none;flex:1}
#modalTemplate .template-preview-card{height:100%;min-height:0;display:flex;flex-direction:column}
#modalTemplate .template-preview-wrap{max-height:none;flex:1;min-height:0}
.template-settings-card,.template-runtime-fields{border:1px solid var(--line);background:linear-gradient(135deg,var(--card2),rgba(108,143,255,.06));border-radius:14px;padding:10px;margin:10px 0}
.template-settings-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.template-settings-head b{display:block;color:var(--text);font-size:13px}.template-settings-head small{display:block;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.4}
.template-field-list{display:grid;gap:8px}.template-field-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,.8fr) auto auto;gap:8px;align-items:end;border:1px solid var(--line2);background:var(--card);border-radius:12px;padding:8px}.template-field-row .field{margin:0}.template-field-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.template-field-row .btn{white-space:nowrap}
.template-runtime-fields.hidden{display:none!important}.template-runtime-fields-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.template-runtime-fields-title b{font-size:13px}.template-runtime-fields-title small{color:var(--muted);font-size:11px}.template-runtime-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}.template-runtime-grid .field{margin:0}
@media(max-width:1100px){#modalTemplate .template-editor-layout{grid-template-columns:1fr}#modalTemplate .modal.template-modal{width:100vw;height:100vh;border-radius:0;padding:12px}#modalTemplate{padding:0}.template-field-row{grid-template-columns:1fr}.template-runtime-grid{grid-template-columns:1fr}}
/* ============================================================
[CSS-20] Preserve format Word, footer F4, tanda tangan, F-1.02
File hasil pemisahan dari versi kerja.
Jangan ubah urutan build di build.py kecuali paham dependensinya.
============================================================ */
/* V68: pertahankan format asli Word/HTML import
Jangan paksa semua tabel import menjadi full-width, jangan paksa padding/margin/paragraf tabel.
Word menyimpan posisi tabel di inline style seperti margin-left dan width:122.05pt;
CSS aplikasi harus mengalah dari style Word agar output tidak acak. */
.surat .template-clean-body table:not(.biodata):not(.word-form-table),
.surat .template-live-word-body table:not(.biodata):not(.word-form-table),
.word-editor table:not(.word-form-table){
border-collapse:collapse;
table-layout:auto;
background:transparent!important;
}
.surat .template-clean-body table.MsoTableGrid,
.surat .template-live-word-body table.MsoTableGrid,
.word-editor table.MsoTableGrid,
.surat .template-clean-body table.word-original-table,
.surat .template-live-word-body table.word-original-table,
.word-editor table.word-original-table{
width:auto!important;
max-width:100%;
}
.surat .template-clean-body table:not(.biodata):not(.word-form-table) td,
.surat .template-clean-body table:not(.biodata):not(.word-form-table) th,
.surat .template-live-word-body table:not(.biodata):not(.word-form-table) td,
.surat .template-live-word-body table:not(.biodata):not(.word-form-table) th,
.word-editor table:not(.word-form-table) td,
.word-editor table:not(.word-form-table) th{
background:transparent!important;
vertical-align:top;
}
/* Hilangkan border UI aplikasi pada tabel import Word, tapi biarkan style inline Word tetap jalan. */
.surat .template-clean-body table.MsoTableGrid td,
.surat .template-clean-body table.MsoTableGrid th,
.surat .template-live-word-body table.MsoTableGrid td,
.surat .template-live-word-body table.MsoTableGrid th,
.word-editor table.MsoTableGrid td,
.word-editor table.MsoTableGrid th{
border-top:0!important;
}
.word-editor table.MsoTableGrid td,
.word-editor table.MsoTableGrid th{border-color:transparent!important}
.surat .template-clean-body p[align=right],.surat .template-clean-body div[align=right],.surat .template-clean-body td[align=right],.surat .template-clean-body th[align=right],.surat .template-live-word-body p[align=right],.surat .template-live-word-body div[align=right],.surat .template-live-word-body td[align=right],.surat .template-live-word-body th[align=right],.word-editor p[align=right],.word-editor div[align=right],.word-editor td[align=right],.word-editor th[align=right]{text-align:right!important}
.surat .template-clean-body p[align=center],.surat .template-clean-body div[align=center],.surat .template-clean-body td[align=center],.surat .template-clean-body th[align=center],.surat .template-live-word-body p[align=center],.surat .template-live-word-body div[align=center],.surat .template-live-word-body td[align=center],.surat .template-live-word-body th[align=center],.word-editor p[align=center],.word-editor div[align=center],.word-editor td[align=center],.word-editor th[align=center]{text-align:center!important}
.surat .template-clean-body p[style*="text-align:right"],.surat .template-clean-body div[style*="text-align:right"],.surat .template-clean-body td[style*="text-align:right"],.surat .template-clean-body th[style*="text-align:right"],.surat .template-live-word-body p[style*="text-align:right"],.surat .template-live-word-body div[style*="text-align:right"],.surat .template-live-word-body td[style*="text-align:right"],.surat .template-live-word-body th[style*="text-align:right"],.word-editor p[style*="text-align:right"],.word-editor div[style*="text-align:right"],.word-editor td[style*="text-align:right"],.word-editor th[style*="text-align:right"]{text-align:right!important}
.surat .template-clean-body p[style*="text-align:center"],.surat .template-clean-body div[style*="text-align:center"],.surat .template-clean-body td[style*="text-align:center"],.surat .template-clean-body th[style*="text-align:center"],.surat .template-live-word-body p[style*="text-align:center"],.surat .template-live-word-body div[style*="text-align:center"],.surat .template-live-word-body td[style*="text-align:center"],.surat .template-live-word-body th[style*="text-align:center"],.word-editor p[style*="text-align:center"],.word-editor div[style*="text-align:center"],.word-editor td[style*="text-align:center"],.word-editor th[style*="text-align:center"]{text-align:center!important}
.surat .template-clean-body p[style*="text-align:justify"],.surat .template-live-word-body p[style*="text-align:justify"],.word-editor p[style*="text-align:justify"]{text-align:justify!important}
/* V71: perbaikan mapping cetak template Word */
.template-clean-body table{border-collapse:collapse!important;table-layout:auto!important;max-width:100%!important}
.template-clean-body table td,.template-clean-body table th{background:transparent!important;vertical-align:top!important}
.template-clean-body table[border="0"] td,.template-clean-body table[border="0"] th{border:none!important}
@media print{.template-clean-body table{border-collapse:collapse!important;table-layout:auto!important;max-width:100%!important}.template-clean-body table[border="0"] td,.template-clean-body table[border="0"] th{border:none!important}}
/* V72: Footer/alamat desa selalu berada di bawah kertas F4 */
.surat{
height:1247px!important;
min-height:1247px!important;
display:flex!important;
flex-direction:column!important;
}
.surat>.isi,
.surat>#tumaritis-template-body,
.surat>.template-clean-body,
#surat>.isi,
#suratPreview>.isi,
#printDoc .surat>.isi{
flex:1 1 auto!important;
min-height:0!important;
}
.surat>.surat-footer,
#surat>.surat-footer,
#suratPreview>.surat-footer,
#printDoc .surat>.surat-footer{
margin-top:auto!important;
flex:0 0 auto!important;
padding-top:18px!important;
}
.surat-footer{
break-inside:avoid!important;
page-break-inside:avoid!important;
}
@media print{
.print-only{display:block!important;}
.print-only .surat,
#printDoc .surat{
width:auto!important;
height:calc(330mm - 36mm)!important;
min-height:calc(330mm - 36mm)!important;
padding:0!important;
margin:0 auto!important;
display:flex!important;
flex-direction:column!important;
box-sizing:border-box!important;
}
#printDoc .surat>.isi,
#printDoc .surat>#tumaritis-template-body,
#printDoc .surat>.template-clean-body{
flex:1 1 auto!important;
min-height:0!important;
}
#printDoc .surat>.surat-footer{
margin-top:auto!important;
padding-top:12px!important;
}
}
/* V76: Mode Word Preserve - JANGAN paksa font/size/line-height.
Semua mengikuti style asli dari file Word yang diimport. */
.template-clean-body.word-preserve-body,
.template-live-word-body.word-preserve-body{
padding-top:0!important;
}
.surat .template-clean-body.word-preserve-body p,
.surat .template-live-word-body.word-preserve-body p{
margin:revert!important;
text-indent:revert!important;
text-align:revert!important;
}
.surat .template-clean-body.word-preserve-body table,
.surat .template-live-word-body.word-preserve-body table{
max-width:none!important;
table-layout:auto!important;
}
.surat .template-clean-body.word-preserve-body table p,
.surat .template-live-word-body.word-preserve-body table p{
margin:revert!important;
text-indent:revert!important;
text-align:revert!important;
}
.surat .template-clean-body.word-preserve-body td,
.surat .template-clean-body.word-preserve-body th,
.surat .template-live-word-body.word-preserve-body td,
.surat .template-live-word-body.word-preserve-body th{
padding:revert!important;
border:revert!important;
vertical-align:revert!important;
}
/* MsoNormal sengaja tidak di-override agar style Word asli tetap utuh. */
@media print{
.template-clean-body.word-preserve-body table,
.template-live-word-body.word-preserve-body table{max-width:none!important;table-layout:auto!important}
.template-clean-body.word-preserve-body p,
.template-live-word-body.word-preserve-body p{margin:revert!important;text-indent:revert!important;text-align:revert!important}
}
/* V75: data otomatis tidak diberi style sendiri; font mengikuti style asli dari Word/import. */
/* V76: nonaktifkan gaya bantu lama yang bisa mengubah tabel/font import Word. */
.word-preserve-body .word-form-table{font-family:inherit!important;font-size:inherit!important;line-height:inherit!important}
.word-preserve-body table,
.word-preserve-body td,
.word-preserve-body th,
.word-preserve-body p,
.word-preserve-body span{font-family:inherit}
/* V88: center hanya untuk teks jabatan di blok tanda tangan bawah, tidak menyentuh isi atas/template Word */
.surat .ttd .ttd-box .ttd-an-center{
display:inline-block!important;
width:100%!important;
text-align:center!important;
line-height:1.35!important;
}
.surat .ttd .ttd-box .ttd-an-center span{
display:block!important;
width:100%!important;
text-align:center!important;
}
/* V92: QR barcode muncul saat switch ON pada Kepala Desa, termasuk template Word import */
.tumaritis-auto-barcode{display:flex!important;align-items:center!important;justify-content:center!important;margin:5px auto!important;}
.tumaritis-auto-barcode-note{text-align:center!important;}
/* V105: Format baru Surat Pengantar KTP/F-1.02 mengikuti PDF resmi: tanpa border luar halaman */
.surat .f102,#surat .f102,#suratPreview .f102,#printDoc .f102{border:none!important;outline:none!important;box-shadow:none!important;}
.f102{border:none!important;outline:none!important;}
.f102::before,.f102::after{display:none!important;content:none!important;}
.f102 .f102-grid{border:1.2px solid #000!important;}
.f102 .f102-data{border:0!important;}
.f102 .f102-fill{border:1.2px solid #000!important;}
@media print{.f102{border:none!important;outline:none!important;box-shadow:none!important}.print-only .surat{border:0!important}}
/* ============================================================
[CSS-30] Theme tambahan, print bersih, preview cetak
File hasil pemisahan dari versi kerja.
Jangan ubah urutan build di build.py kecuali paham dependensinya.
============================================================ */
/* ── V96: Elegant Theme Extras ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}
.card,.sidebar,.top,.btn,.field input,.field select,.field textarea,.search{-webkit-transition:background .3s,border-color .3s,box-shadow .3s,color .2s;transition:background .3s,border-color .3s,box-shadow .3s,color .2s}
.tpl-card{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:16px;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;box-shadow:var(--card-shadow)}
.tpl-card:hover{border-color:var(--pri);-webkit-transform:translateY(-2px);transform:translateY(-2px);background:rgba(108,143,255,.06);box-shadow:0 8px 28px var(--glow)}
.b-green{background:rgba(32,212,126,.11);color:var(--green);border:1px solid rgba(32,212,126,.18)}
.b-blue{background:rgba(108,143,255,.11);color:var(--pri);border:1px solid rgba(108,143,255,.18)}
.b-red{background:rgba(255,85,119,.11);color:var(--red);border:1px solid rgba(255,85,119,.18)}
.b-orange{background:rgba(249,115,22,.11);color:var(--orange);border:1px solid rgba(249,115,22,.18)}
tr:hover td{background:rgba(108,143,255,.04)}
.modal-bg{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal{box-shadow:0 28px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
body.light .modal{box-shadow:0 16px 60px rgba(60,80,180,.14),inset 0 1px 0 rgba(255,255,255,.9)}
th{background:linear-gradient(180deg,var(--card2),rgba(0,0,0,.02))}
body.light th{background:linear-gradient(180deg,#f0f3fc,#eaeffa)}
.drop-item:hover{background:rgba(108,143,255,.07)}
.login-logo{background:linear-gradient(135deg,rgba(108,143,255,.32),rgba(32,212,126,.15));box-shadow:0 0 40px rgba(108,143,255,.3),0 0 80px rgba(108,143,255,.1)}
/* V99: Cetak bersih tanpa header/footer browser (tanggal, judul, URL, nomor halaman) */
/* V101: Preview nomor surat dihapus, kode bidang memakai dropdown */
@page{
size:210mm 330mm;
margin:0!important;
}
@media print{
html,body{
width:210mm!important;
min-height:330mm!important;
margin:0!important;
padding:0!important;
background:#fff!important;
overflow:visible!important;
}
body *{visibility:hidden!important;}
.print-only,.print-only *{visibility:visible!important;}
.print-only{
display:block!important;
position:absolute!important;
inset:0!important;
width:210mm!important;
min-height:330mm!important;
margin:0!important;
padding:0!important;
background:#fff!important;
}
#printDoc{
display:block!important;
width:210mm!important;
min-height:330mm!important;
margin:0!important;
padding:18mm 16mm!important;
box-sizing:border-box!important;
background:#fff!important;
}
#printDoc .surat,
.print-only .surat{
width:178mm!important;
height:294mm!important;
min-height:294mm!important;
margin:0!important;
padding:0!important;
border:0!important;
box-shadow:none!important;
background:#fff!important;
display:flex!important;
flex-direction:column!important;
box-sizing:border-box!important;
}
.app,.login,.modal-bg,.sidebar,.top,.content{display:none!important;}
}
/* V102: kunci aksi edit/export/import untuk template format khusus */
.btn.disabled,.btn:disabled{opacity:.45!important;cursor:not-allowed!important;filter:grayscale(.35);box-shadow:none!important;pointer-events:none!important}
.btn.disabled:hover,.btn:disabled:hover{border-color:var(--line2)!important;box-shadow:none!important;transform:none!important}
/* V104: template format khusus ditandai 1 blok warna kecil, tanpa teks tambahan */
.tpl-special-name{
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
color:var(--text)!important;
font-weight:800!important;
}
.tpl-special-name:before{
content:"";
width:10px;
height:22px;
border-radius:7px;
background:linear-gradient(180deg,var(--orange),var(--yellow));
box-shadow:0 0 0 3px rgba(249,115,22,.12);
flex:0 0 auto;
}
/* V106: Step 4 preview cetak dibuat kontras agar kertas dan area samping tidak keliru */
#step4 .toolbar{
position:sticky;
top:0;
z-index:14;
background:var(--bg);
padding:6px 0 10px;
}
.cetak-preview-wrap{
background:
linear-gradient(135deg,rgba(108,143,255,.18),rgba(0,0,0,.18)),
repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 10px,rgba(255,255,255,.015) 10px 20px),
#1b2235;
border:1px solid var(--line2);
border-radius:18px;
padding:24px;
overflow:auto;
min-height:calc(100vh - 175px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 16px 45px rgba(0,0,0,.22);
}
body.light .cetak-preview-wrap{
background:
linear-gradient(135deg,rgba(66,103,232,.16),rgba(120,135,180,.18)),
repeating-linear-gradient(45deg,rgba(40,60,120,.08) 0 10px,rgba(40,60,120,.025) 10px 20px),
#d5dbea;
}
.cetak-preview-label{
color:#dfe7ff;
text-align:center;
font-size:11px;
font-weight:800;
letter-spacing:.7px;
margin-bottom:14px;
text-transform:uppercase;
}
body.light .cetak-preview-label{color:#425075}
.cetak-paper-frame{
width:max-content;
margin:0 auto;
background:#fefefe;
border:2px solid #ffffff;
border-radius:8px;
padding:14px 14px 18px;
box-shadow:0 22px 65px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.12);
}
.cetak-paper-label{
color:#111!important;
background:#fff7d6!important;
border:1px solid #efd36b;
border-radius:8px;
text-align:center;
font-size:11px;
font-weight:800;
padding:7px 10px;
margin:0 auto 12px;
font-family:Arial,Helvetica,sans-serif;
}
.cetak-paper-frame .surat{
border:1px solid #c9ceda!important;
box-shadow:none!important;
}
@media(max-width:900px){
.cetak-preview-wrap{padding:14px;min-height:auto}
.cetak-paper-frame{padding:10px}
}
@media print{
.cetak-preview-wrap,.cetak-paper-frame{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
.cetak-preview-label,.cetak-paper-label{display:none!important}
}
.check-item input:disabled{opacity:.55}
/* ============================================================
[CSS-40] Dashboard pemohon, laporan, aduan, notifikasi admin
File hasil pemisahan dari versi kerja.
Jangan ubah urutan build di build.py kecuali paham dependensinya.
============================================================ */
/* V110: alur permintaan surat untuk Operator RT / Publik */
.request-card{border:1px solid var(--line);background:var(--card2);border-radius:14px;padding:12px;margin-bottom:10px}
.request-card b{font-size:12px}
.request-card small{display:block;color:var(--muted);line-height:1.45;margin-top:4px}
.request-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;align-items:center}
.request-status{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800}
.rs-wait{background:rgba(249,115,22,.12);color:var(--orange);border:1px solid rgba(249,115,22,.25)}
.rs-process{background:rgba(108,143,255,.12);color:var(--pri);border:1px solid rgba(108,143,255,.25)}
.rs-done{background:rgba(32,212,126,.12);color:var(--green);border:1px solid rgba(32,212,126,.25)}
.applicant-nik-hint{font-size:11px;color:var(--muted);line-height:1.5;margin:-4px 0 9px}
/* V111: dua jenis dashboard berdasarkan role */
.dashboard-role-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;background:rgba(108,143,255,.11);color:var(--pri);border:1px solid rgba(108,143,255,.22);margin-bottom:10px}
.dashboard-role-badge.applicant{background:rgba(32,212,126,.10);color:var(--green);border-color:rgba(32,212,126,.22)}
.applicant-empty-action{margin-top:10px}
/* V113: Dashboard pemohon 5 status + selesai manual */
#dashStatGrid.applicant-stats{grid-template-columns:repeat(5,1fr)}
.request-status.rs-reject{background:rgba(255,85,119,.12);color:var(--red);border:1px solid rgba(255,85,119,.22)}
@media(max-width:1100px){#dashStatGrid.applicant-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){#dashStatGrid.applicant-stats{grid-template-columns:1fr}}
/* V122: tombol pemohon simple — icon satu warna + label bawah */
.applicant-mobile-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.applicant-mobile-actions .app-action{min-height:86px;border:1px solid var(--line2);background:var(--card);color:var(--text);border-radius:18px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;box-shadow:var(--card-shadow);transition:.18s;padding:12px 8px;text-align:center}
.applicant-mobile-actions .app-action:hover{border-color:var(--pri);transform:translateY(-1px);box-shadow:0 8px 24px var(--glow)}
.applicant-mobile-actions .app-action .ico{font-size:27px;line-height:1;display:block;filter:grayscale(1)}
.applicant-mobile-actions .app-action .lbl{font-size:11px;font-weight:900;letter-spacing:.45px;text-transform:uppercase;line-height:1.2;color:var(--text)}
.applicant-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.applicant-summary .mini-stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px;text-align:center;box-shadow:var(--card-shadow)}
.applicant-summary .mini-stat span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.applicant-summary .mini-stat b{display:block;font-size:24px;margin-top:4px}
.applicant-history-simple{display:grid;gap:8px}
.applicant-history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 12px}
.applicant-history-row b{font-size:13px}.applicant-history-row small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
@media(max-width:700px){.applicant-mobile-actions{grid-template-columns:repeat(3,1fr);gap:7px}.applicant-mobile-actions .app-action{min-height:78px;border-radius:15px;padding:10px 4px}.applicant-mobile-actions .app-action .ico{font-size:24px}.applicant-mobile-actions .app-action .lbl{font-size:9.5px}.applicant-summary{grid-template-columns:repeat(3,1fr);gap:7px}.applicant-summary .mini-stat{padding:10px 6px}.applicant-summary .mini-stat b{font-size:20px}#p-dash .grid2{grid-template-columns:1fr}#p-dash .card{padding:12px;margin-bottom:10px}.applicant-history-row{padding:10px}}
/* V120: notifikasi pengelola dibagi 3 */
.admin-notif-grid{display:grid;gap:12px}
.admin-notif-section{border:1px solid var(--line);background:var(--card2);border-radius:15px;padding:12px}
.admin-notif-title{font-weight:900;font-size:12px;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.admin-notif-title span{display:inline-flex;padding:2px 8px;border-radius:999px;background:rgba(108,143,255,.12);color:var(--pri);font-size:10px}
.admin-report-card{border:1px solid var(--line);background:var(--card);border-radius:13px;padding:10px;margin-bottom:8px}
.admin-report-card b{font-size:12px}
.admin-report-card small{display:block;color:var(--muted);line-height:1.45;margin-top:4px}
.admin-report-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
/* V118: tombol tambah/hapus operator */
.user-ops{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}.user-custom-badge{display:inline-flex;padding:2px 7px;border-radius:999px;background:rgba(108,143,255,.12);color:var(--pri);font-size:10px;font-weight:800;margin-top:4px}
/* V116: detail operator pemohon dan keterangan pengajuan */
.applicant-extra-box{border:1px solid var(--line);background:var(--card2);border-radius:14px;padding:12px;margin:10px 0 12px}
.applicant-extra-box.hidden{display:none!important}
.request-info{margin-top:8px;padding:8px 10px;border-radius:12px;background:rgba(108,143,255,.06);border:1px solid rgba(108,143,255,.13)}
.request-info b{font-size:11px}
.request-info span{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:3px}
/* V123b: form laporan/aduan dari dashboard pemohon + tombol Home */
.service-form-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:120;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(5px)}
.service-form-modal.open{display:flex}
.service-form-card{width:430px;max-width:100%;background:var(--card);border:1px solid var(--line2);border-radius:20px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.service-form-card h2{font-size:16px;margin-bottom:12px}
.service-form-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:10px}
body.applicant-mode .sidebar{display:none!important}
body.applicant-mode .main{width:100%;flex:1}
body.applicant-mode .top-actions .btn{font-weight:800}
@media(max-width:700px){.service-form-card{border-radius:18px;padding:14px}.service-form-actions .btn{flex:1;justify-content:center}}
/* V130: tombol logout khusus dashboard Operator RT */
.applicant-mobile-actions .app-logout-action{border-color:rgba(255,85,119,.28)!important;background:rgba(255,85,119,.08)!important;color:var(--red)!important}
.applicant-mobile-actions .app-logout-action .lbl{color:var(--red)!important}
@media(max-width:700px){.applicant-mobile-actions{grid-template-columns:repeat(2,1fr)!important}.applicant-mobile-actions .app-action{min-height:74px}}
/* V131: logout Operator RT dipindah ke samping tombol Home */
#topLogoutBtn{font-weight:800}
@media(max-width:700px){#topLogoutBtn{padding:5px 8px;font-size:11px}}
/* ============================================================
[CSS-50] Fix tabel template Word/SKTM dan tanda tangan
File hasil pemisahan dari versi kerja.
Jangan ubah urutan build di build.py kecuali paham dependensinya.
============================================================ */
/* V132: Fix preview template Word - tabel tidak terlihat kebanyakan enter
Masalah terjadi karena paragraf bawaan Word di dalam
mewarisi margin/line-height besar saat preview.
Override ini hanya berlaku di isi template/import Word, bukan di editor umum atau surat bawaan. */
.surat .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) td p,
.surat .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) th p,
.surat .template-live-word-body table:not(.biodata):not(.tumaritis-signature-table) td p,
.surat .template-live-word-body table:not(.biodata):not(.tumaritis-signature-table) th p,
#printDoc .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) td p,
#printDoc .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) th p{
margin-top:0!important;
margin-bottom:0!important;
padding-top:0!important;
padding-bottom:0!important;
line-height:1.15!important;
min-height:0!important;
}
.surat .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) td,
.surat .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) th,
.surat .template-live-word-body table:not(.biodata):not(.tumaritis-signature-table) td,
.surat .template-live-word-body table:not(.biodata):not(.tumaritis-signature-table) th,
#printDoc .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) td,
#printDoc .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) th{
line-height:1.15!important;
height:auto!important;
vertical-align:top!important;
}
.surat .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) td p:empty,
.surat .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) th p:empty,
.surat .template-live-word-body table:not(.biodata):not(.tumaritis-signature-table) td p:empty,
.surat .template-live-word-body table:not(.biodata):not(.tumaritis-signature-table) th p:empty,
#printDoc .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) td p:empty,
#printDoc .template-clean-body table:not(.biodata):not(.tumaritis-signature-table) th p:empty{
display:none!important;
}
/* V133: Tabel tanda tangan tidak ikut dipadatkan.
Patch enter berlebih hanya untuk tabel isi/data bagian atas. */
.surat .template-clean-body table.tumaritis-signature-table p,
.surat .template-live-word-body table.tumaritis-signature-table p,
#printDoc .template-clean-body table.tumaritis-signature-table p{
margin:revert!important;
padding:revert!important;
line-height:revert!important;
}
.surat .template-clean-body table.tumaritis-signature-table td,
.surat .template-clean-body table.tumaritis-signature-table th,
.surat .template-live-word-body table.tumaritis-signature-table td,
.surat .template-live-word-body table.tumaritis-signature-table th,
#printDoc .template-clean-body table.tumaritis-signature-table td,
#printDoc .template-clean-body table.tumaritis-signature-table th{
line-height:revert!important;
vertical-align:revert!important;
}
/* V136: rapikan tabel Surat Kematian/Word import hanya bagian data atas; area tanda tangan tetap aman */
.surat .template-clean-body table tr.tumaritis-upper-data-row td p,
.surat .template-clean-body table tr.tumaritis-upper-data-row th p,
.surat .template-live-word-body table tr.tumaritis-upper-data-row td p,
.surat .template-live-word-body table tr.tumaritis-upper-data-row th p,
#printDoc .template-clean-body table tr.tumaritis-upper-data-row td p,
#printDoc .template-clean-body table tr.tumaritis-upper-data-row th p{
margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;line-height:1.15!important;min-height:0!important;
}
.surat .template-clean-body table tr.tumaritis-upper-data-row td,
.surat .template-clean-body table tr.tumaritis-upper-data-row th,
.surat .template-live-word-body table tr.tumaritis-upper-data-row td,
.surat .template-live-word-body table tr.tumaritis-upper-data-row th,
#printDoc .template-clean-body table tr.tumaritis-upper-data-row td,
#printDoc .template-clean-body table tr.tumaritis-upper-data-row th{line-height:1.15!important;vertical-align:top!important;height:auto!important;}
/* V144: fix import/edit template surat: modal edit tetap muncul dan SKTM tersinkron */
/* V145: gambar tanda tangan otomatis di template Word import */
.template-clean-body .tumaritis-ttd-auto-img{ text-align:center!important; margin:2pt 0!important; text-indent:0!important; }
.template-clean-body .tumaritis-ttd-auto-img .ttd-img,
.template-clean-body .tumaritis-ttd-auto-img img.ttd-img{ height:70px!important; max-height:70px!important; width:auto!important; object-fit:contain!important; display:inline-block!important; margin:0 auto!important; }
/* V148: SKTM memakai blok tanda tangan sistem yang sama seperti Surat Keterangan Usaha */
.surat>.ttd{flex:0 0 auto!important;margin-top:28px!important;}
.surat>.ttd .ttd-box p{margin:0 0 4px!important;text-indent:0!important;text-align:center!important;}
/* ============================================================
[CSS-60] Rapatkan tabel atas dan biodata surat
File hasil pemisahan dari versi kerja.
Jangan ubah urutan build di build.py kecuali paham dependensinya.
============================================================ */
/* ===== Style block: tumaritis-v140-fix-enter-tabel-atas ===== */
/* V140: rapatkan enter berlebih di tabel isi/template atas.
Fokus: tabel biodata/identitas dalam body surat hasil import Word.
Tidak menyentuh blok tanda tangan bawah aplikasi (.ttd). */
.surat .isi table:not(.ttd table) p,
.surat .template-clean-body table:not(.ttd table) p,
.surat .template-live-word-body table:not(.ttd table) p,
#surat .template-clean-body table:not(.ttd table) p,
#suratPreview .template-clean-body table:not(.ttd table) p,
#printDoc .template-clean-body table:not(.ttd table) p{
margin-top:0!important;
margin-bottom:0!important;
padding-top:0!important;
padding-bottom:0!important;
text-indent:0!important;
line-height:1.15!important;
min-height:0!important;
}
.surat .isi table:not(.ttd table) td,
.surat .template-clean-body table:not(.ttd table) td,
.surat .template-live-word-body table:not(.ttd table) td,
#surat .template-clean-body table:not(.ttd table) td,
#suratPreview .template-clean-body table:not(.ttd table) td,
#printDoc .template-clean-body table:not(.ttd table) td{
padding-top:0!important;
padding-bottom:0!important;
line-height:1.15!important;
vertical-align:top!important;
}
/* Khusus tabel data otomatis/biodata agar Agama -> Alamat dan Nama Kades -> Jabatan rapat */
.surat .biodata td,
#surat .biodata td,
#suratPreview .biodata td,
#printDoc .biodata td,
.surat table.word-form-table td,
#surat table.word-form-table td,
#suratPreview table.word-form-table td,
#printDoc table.word-form-table td{
padding-top:0!important;
padding-bottom:0!important;
line-height:1.15!important;
}
.surat .biodata p,
#surat .biodata p,
#suratPreview .biodata p,
#printDoc .biodata p,
.surat table.word-form-table p,
#surat table.word-form-table p,
#suratPreview table.word-form-table p,
#printDoc table.word-form-table p{
margin:0!important;
padding:0!important;
line-height:1.15!important;
text-indent:0!important;
}
/* Jaga blok tanda tangan bawah tetap mengikuti posisi lama */
.surat .ttd,
.surat .ttd *,
#surat .ttd,
#surat .ttd *,
#suratPreview .ttd,
#suratPreview .ttd *,
#printDoc .ttd,
#printDoc .ttd *{
/* intentionally left without spacing override */
}
/* V192: Light mode lebih berwarna, tetap modern dan minimalis */
body.light{
--bg:#eef6ff!important;
--card:#ffffff!important;
--card2:#f4f9ff!important;
--line:rgba(74,101,140,.12)!important;
--line2:rgba(74,101,140,.18)!important;
--text:#182b4d!important;
--muted:#627391!important;
--dim:#8b9ab0!important;
--pri:#2563eb!important;
--pri2:#7c3aed!important;
--green:#16a34a!important;
--red:#e11d48!important;
--orange:#f97316!important;
--yellow:#eab308!important;
--glow:rgba(37,99,235,.15)!important;
--glow2:rgba(22,163,74,.12)!important;
--sidebar-bg:
radial-gradient(circle at 20% 0%,rgba(37,99,235,.14),transparent 28%),
radial-gradient(circle at 100% 16%,rgba(124,58,237,.12),transparent 30%),
linear-gradient(180deg,#ffffff 0%,#f0f7ff 100%)!important;
--card-shadow:0 14px 34px rgba(31,64,112,.08),0 1px 0 rgba(255,255,255,.95) inset!important;
--btn-shadow:0 8px 18px rgba(31,64,112,.08)!important;
background:
radial-gradient(circle at 10% 0%,rgba(37,99,235,.12),transparent 30%),
radial-gradient(circle at 88% 4%,rgba(124,58,237,.10),transparent 26%),
radial-gradient(circle at 74% 88%,rgba(22,163,74,.09),transparent 30%),
linear-gradient(135deg,#f8fbff 0%,#eef6ff 45%,#f6f3ff 100%)!important;
}
body.light .app,
body.light .main,
body.light .content{
background:transparent!important;
}
body.light .top{
background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(239,247,255,.90))!important;
border-bottom-color:rgba(37,99,235,.12)!important;
box-shadow:0 12px 30px rgba(31,64,112,.08)!important;
backdrop-filter:blur(14px);
}
body.light .sidebar{
background:var(--sidebar-bg)!important;
border-right-color:rgba(37,99,235,.12)!important;
box-shadow:8px 0 30px rgba(31,64,112,.07)!important;
}
body.light .brand{
border-bottom-color:rgba(37,99,235,.11)!important;
}
body.light .brand-ic{
background:linear-gradient(135deg,#e0f2fe,#ede9fe 58%,#dcfce7)!important;
box-shadow:0 12px 24px rgba(37,99,235,.14)!important;
}
body.light .card,
body.light .modal,
body.light .table-wrap,
body.light .search,
body.light .toggle-row,
body.light .tpl-card,
body.light .request-card,
body.light .admin-notif-section,
body.light .admin-report-card,
body.light .applicant-history-row,
body.light .applicant-summary .mini-stat,
body.light .applicant-mobile-actions .app-action{
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,250,255,.96))!important;
border-color:rgba(74,101,140,.13)!important;
box-shadow:var(--card-shadow)!important;
}
body.light .card:hover,
body.light .tpl-card:hover,
body.light .applicant-mobile-actions .app-action:hover{
border-color:rgba(37,99,235,.28)!important;
box-shadow:0 18px 38px rgba(37,99,235,.12)!important;
transform:translateY(-1px);
}
body.light .card-title svg,
body.light .brand-ic svg{
stroke:#2563eb!important;
}
body.light .nav-label{
color:#8a6bb8!important;
font-weight:900!important;
}
body.light .nav button{
color:#526783!important;
}
body.light .nav button:hover{
background:linear-gradient(90deg,rgba(37,99,235,.10),rgba(124,58,237,.07))!important;
color:#1d355f!important;
}
body.light .nav button.on{
background:linear-gradient(90deg,rgba(37,99,235,.18),rgba(124,58,237,.12))!important;
color:#1d4ed8!important;
box-shadow:inset 3px 0 0 #2563eb,0 8px 18px rgba(37,99,235,.10)!important;
}
body.light .btn{
background:linear-gradient(180deg,#ffffff,#f2f7ff)!important;
color:#223b62!important;
border-color:rgba(74,101,140,.18)!important;
box-shadow:var(--btn-shadow)!important;
}
body.light .btn:hover{
border-color:rgba(37,99,235,.32)!important;
box-shadow:0 10px 22px rgba(37,99,235,.13)!important;
}
body.light .btn.pri{
background:linear-gradient(135deg,#2563eb,#7c3aed)!important;
color:#fff!important;
border-color:transparent!important;
}
body.light .btn.green{
background:linear-gradient(135deg,rgba(22,163,74,.13),rgba(20,184,166,.10))!important;
color:#128246!important;
border-color:rgba(22,163,74,.25)!important;
}
body.light .btn.red{
background:linear-gradient(135deg,rgba(225,29,72,.12),rgba(249,115,22,.08))!important;
color:#be123c!important;
border-color:rgba(225,29,72,.24)!important;
}
body.light .field input,
body.light .field select,
body.light .field textarea,
body.light .search{
background:#f8fbff!important;
border-color:rgba(74,101,140,.16)!important;
color:#182b4d!important;
}
body.light .field input:focus,
body.light .field select:focus,
body.light .field textarea:focus,
body.light .search:focus-within{
border-color:#2563eb!important;
box-shadow:0 0 0 4px rgba(37,99,235,.12)!important;
}
body.light th{
background:linear-gradient(180deg,#eef6ff,#f4f1ff)!important;
color:#546780!important;
}
body.light tr:hover td{
background:rgba(37,99,235,.055)!important;
}
body.light .stat{
border:1px solid rgba(74,101,140,.12)!important;
box-shadow:0 14px 30px rgba(31,64,112,.08)!important;
position:relative;
overflow:hidden;
}
body.light .stat:before{
content:'';
position:absolute;
inset:0 auto 0 0;
width:5px;
border-radius:22px 0 0 22px;
background:#2563eb;
}
body.light .stat:nth-child(4n+1){background:linear-gradient(135deg,#eff6ff,#ffffff)!important}
body.light .stat:nth-child(4n+1):before{background:#2563eb}
body.light .stat:nth-child(4n+2){background:linear-gradient(135deg,#f0fdf4,#ffffff)!important}
body.light .stat:nth-child(4n+2):before{background:#16a34a}
body.light .stat:nth-child(4n+3){background:linear-gradient(135deg,#fff7ed,#ffffff)!important}
body.light .stat:nth-child(4n+3):before{background:#f97316}
body.light .stat:nth-child(4n+4){background:linear-gradient(135deg,#f5f3ff,#ffffff)!important}
body.light .stat:nth-child(4n+4):before{background:#7c3aed}
body.light .stat b,
body.light .stat h3{
color:#172554!important;
}
body.light .stat span,
body.light .stat small{
color:#5f6f89!important;
}
body.light .badge.b-blue,
body.light .b-blue{
background:rgba(37,99,235,.12)!important;color:#1d4ed8!important;
}
body.light .badge.b-green,
body.light .b-green{
background:rgba(22,163,74,.12)!important;color:#15803d!important;
}
body.light .badge.b-orange,
body.light .b-orange{
background:rgba(249,115,22,.13)!important;color:#c2410c!important;
}
body.light .badge.b-red,
body.light .b-red{
background:rgba(225,29,72,.12)!important;color:#be123c!important;
}
body.light .notice{
background:linear-gradient(90deg,rgba(37,99,235,.10),rgba(124,58,237,.07))!important;
border-color:rgba(37,99,235,.18)!important;
color:#1d4ed8!important;
}
body.light .notice.green{
background:linear-gradient(90deg,rgba(22,163,74,.11),rgba(20,184,166,.08))!important;
border-color:rgba(22,163,74,.20)!important;
color:#15803d!important;
}
body.light .drop{
background:#ffffff!important;
border-color:rgba(74,101,140,.16)!important;
box-shadow:0 22px 44px rgba(31,64,112,.14)!important;
}
body.light .drop-item:hover{
background:#f0f7ff!important;
}
body.light .tpl-category-compact .tpl-category-head:before,
body.light #tplCards .tpl-category-compact + .tpl-category-compact:after{
background:linear-gradient(90deg,#2563eb,#7c3aed,#16a34a,#f97316)!important;
}
body.light .tpl-icon svg{
stroke:#2563eb!important;
}
body.light ::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,rgba(37,99,235,.34),rgba(124,58,237,.28))!important;
}
/* V190: Data Penduduk lengkap + Data Keluarga */
.penduduk-summary{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.penduduk-summary span{background:var(--card);border:1px solid var(--line2);border-radius:999px;padding:7px 11px;font-size:11px;color:var(--muted)}
.penduduk-full-table table{min-width:1900px}
.keluarga-table table{min-width:860px}
.family-members{display:grid;gap:4px;min-width:300px}
.family-members small{color:var(--muted)}
.form-section-title{margin:12px 0 8px;padding:8px 10px;border-radius:10px;background:var(--card2);border:1px solid var(--line2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.modal-wide{max-width:min(960px,96vw);max-height:92vh;overflow:auto}
.penduduk-modal textarea{min-height:70px}
body.light .penduduk-summary span{background:rgba(255,255,255,.72);border-color:rgba(32,92,145,.13)}
/* V191: Data Penduduk ringkas, detail penuh saat nama diklik */
.penduduk-compact-table table{min-width:900px!important}
.penduduk-compact-table th:first-child,.penduduk-compact-table td:first-child{min-width:240px}
.link-name{border:0;background:transparent;color:var(--text);padding:0;text-align:left;cursor:pointer;font:inherit;line-height:1.35}
.link-name b{color:inherit;text-decoration:none}
.link-name:hover b{text-decoration:underline;color:var(--pri)}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.detail-sub{font-size:12px;color:var(--muted);margin-top:-5px}
.penduduk-detail-body{display:grid;gap:12px}
.penduduk-detail-section{border:1px solid var(--line2);border-radius:16px;padding:10px;background:var(--card2)}
.penduduk-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.penduduk-detail-item{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:9px 10px;min-height:56px}
.penduduk-detail-item small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.35px;margin-bottom:4px}
.penduduk-detail-item b{font-size:13px;line-height:1.35;word-break:break-word}
.muted{color:var(--muted);font-weight:600}
body.light .penduduk-detail-section{background:rgba(248,252,255,.78)}
body.light .penduduk-detail-item{background:rgba(255,255,255,.86)}
.family-detail-list{display:grid;gap:8px}
.family-detail-member{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(220px,1fr);gap:8px;align-items:start;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:10px}
.family-detail-member b{display:block;font-size:13px;margin-bottom:3px}
.family-detail-member small{display:block;color:var(--muted);line-height:1.35}
.family-detail-meta{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.family-detail-meta span{font-size:11px;color:var(--muted);background:var(--card2);border:1px solid var(--line2);border-radius:999px;padding:5px 8px}
body.light .family-detail-member{background:rgba(255,255,255,.86)}
body.light .family-detail-meta span{background:rgba(248,252,255,.88)}
@media(max-width:720px){.family-detail-member{grid-template-columns:1fr}.family-detail-meta{justify-content:flex-start}.keluarga-table table{min-width:760px!important}}
@media(max-width:720px){.penduduk-detail-grid{grid-template-columns:1fr}.penduduk-compact-table table{min-width:760px!important}.detail-head{align-items:stretch;flex-direction:column}}
|