/* ========================================================================== SIMGA — Sistem Informasi Manajemen Gudang & Material Jaringan Gaya: SaaS enterprise — sidebar gelap, header ringkas, padat data visual. Terorganisir: 1) token 2) reset 3) shell 4) komponen 5) tabel 6) form 7) grafik 8) halaman khusus 9) responsif ========================================================================== */ /* ============================ 1. TOKEN ============================ */ :root{ /* Warna inti */ --brand:#4f46e5; --brand-2:#7c3aed; --brand-3:#6366f1; --brand-soft:#eef0ff; --brand-line:#c7cbfb; --ok:#059669; --ok-soft:#e7f7f0; --ok-line:#b6e5d3; --warn:#c2740a; --warn-soft:#fdf4e3; --warn-line:#f0dcae; --err:#dc2626; --err-soft:#fdecec; --err-line:#f6c9c9; --info:#2563eb; --info-soft:#eaf1fe; --info-line:#c6d8fb; --violet:#7c3aed; --sky:#0284c7; --teal:#0d9488; --amber:#d97706; --rose:#e11d48; /* Netral */ --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b; --ink-4:#94a3b8; --bg:#f5f6fa; --surf:#ffffff; --line:#e7eaf1; --line-2:#f1f3f8; --nav:#0b1220; --nav-2:#121a2b; --nav-3:#1c2637; --nav-ink:#9fb0c9; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --sh-1:0 1px 2px rgba(15,23,42,.05); --sh-2:0 4px 16px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --sh-3:0 18px 50px rgba(15,23,42,.16); --sidebar-w:258px; --sidebar-mini:74px; --topbar-h:62px; --fs:13.5px; } /* ============================ 2. RESET ============================ */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font:var(--fs)/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; } a{color:var(--brand); text-decoration:none} a:hover{text-decoration:none; color:var(--brand-2)} h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em} .muted{color:var(--ink-3)} .small{font-size:11.5px}.xs{font-size:10.5px} /* Teks berkode (jalur folder, kode dokumen, nomor seri) boleh dipatahkan di tengah kata bila tidak muat — jalur panjang seperti «/home/.../.simga-secure/backups» pada kaki kartu Backups dulu melebarkan halaman 14px pada layar 390px. Sel tabel `.tbl td.mono` tetap satu baris (nowrap membuat aturan ini tidak berpengaruh di sana). */ .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;min-width:0} .right{text-align:right}.ctr{text-align:center}.nowrap{white-space:nowrap} .text-err{color:var(--err);font-weight:600} .text-ok{color:var(--ok);font-weight:600} .text-warn{color:var(--warn);font-weight:600} .strong{font-weight:650} .hr{border:none;border-top:1px solid var(--line-2);margin:14px 0} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* Ikon SVG */ svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;vertical-align:-3px} svg.i.lg{width:19px;height:19px} svg.i.sm{width:13px;height:13px} svg.i.xl{width:26px;height:26px;stroke-width:1.5} /* ============================ 3. SHELL ============================ */ .app{display:flex;min-height:100vh} .sidebar{ width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--nav);color:var(--nav-ink); display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden; transition:width .18s ease, flex-basis .18s ease;z-index:40; } .side-scroll{overflow-y:auto;overflow-x:hidden;flex:1;padding-bottom:10px} .side-scroll::-webkit-scrollbar{width:8px} .side-scroll::-webkit-scrollbar-thumb{background:#243044;border-radius:8px} .brand{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;border-bottom:1px solid var(--nav-3)} /* Logo dari pengaturan (bisa berukuran/berasio apa pun) — dibatasi kotaknya dengan max-width & max-height sehingga gambar selalu menyusut proporsional: tidak gepeng, tidak terpotong. */ .logo-img{display:block;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px;box-sizing:border-box} .brand .kop-logo-mini{max-width:64px;max-height:34px;width:auto;height:auto;flex:0 0 auto;border-radius:9px;border-color:rgba(255,255,255,.22);padding:1px} .print-head .kop-logo{max-width:210px;max-height:var(--logo-h,52px);width:auto;height:auto;border:none;border-radius:6px;padding:0} .kop-pratinjau .kop-logo{max-width:150px;max-height:46px;width:auto;height:auto;border:none;padding:0} .login-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px} .login-brand .kop-logo{max-width:170px;max-height:52px;width:auto;height:auto;background:#fff;border:0;border-radius:10px;padding:4px} .brand .logo{ width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 36px; background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font-weight:700;font-size:13px; box-shadow:0 6px 18px rgba(79,70,229,.45);letter-spacing:.02em; } .brand-txt{display:flex;flex-direction:column;line-height:1.2;overflow:hidden} .brand-txt strong{color:#fff;font-size:13.5px;white-space:nowrap} .brand-txt span{font-size:10px;color:#7d8ea8;text-transform:uppercase;letter-spacing:.11em;white-space:nowrap} .nav{padding:10px 0 6px} .nav-label{ padding:14px 16px 6px;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#5b6b85;font-weight:650; border-top:1px solid var(--nav-3);margin-top:6px; } .nav-group:first-child .nav-label{border-top:none;margin-top:0;padding-top:6px} .nav-item{ display:flex;align-items:flex-start;gap:11px;padding:9px 16px;color:var(--nav-ink);font-size:12.8px; border-left:3px solid transparent;position:relative; } .nav-item svg.i{margin-top:1.5px} .nav-item:hover{background:var(--nav-2);color:#eaf0fb} .nav-item.active{background:linear-gradient(90deg,rgba(79,70,229,.24),rgba(79,70,229,0));color:#fff;border-left-color:var(--brand-3);font-weight:600} /* Label menu panjang dibungkus maksimal 2 baris penuh (bukan dipotong "…" di tengah kata) supaya pengguna tahu persis nama menu yang dibuka. */ .nav-item .txt{ min-width:0;line-height:1.32;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow-wrap:anywhere; } .nav-item .pill{ margin-left:auto;background:var(--err);color:#fff;border-radius:20px;padding:1px 7px;font-size:10px;font-weight:700; } .nav-item .pill.soft{background:#2b3purple} .side-foot{padding:12px 16px;border-top:1px solid var(--nav-3);display:flex;align-items:center;gap:10px} .side-user{display:flex;align-items:center;gap:10px;overflow:hidden;flex:1} .avatar{ width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:11.5px; background:linear-gradient(135deg,#334155,#1e293b);color:#fff;flex:0 0 32px;text-transform:uppercase; } .avatar.brand{background:linear-gradient(135deg,var(--brand),var(--brand-2))} .avatar.lg{width:44px;height:44px;flex:0 0 44px;font-size:15px;border-radius:12px} .side-user b{color:#e6edf8;font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .side-user span{font-size:10.5px;color:#7d8ea8;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .main{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{ height:var(--topbar-h);background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px; position:sticky;top:0;z-index:30; } .icon-btn{ width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink-2); display:grid;place-items:center;cursor:pointer;padding:0; } .icon-btn:hover{background:#f7f8fc;border-color:#d7dce8;color:var(--ink)} /* Remah (breadcrumb) BOLEH MEMBUNGKUS: halaman dengan 4 bagian remah pernah melebarkan halaman 76 px pada layar 390 px karena remah tidak dapat pindah baris (ditemukan pada halaman tambah pembayaran PO). Membungkus lebih baik daripada memotong/meluberkan halaman. */ .crumb{display:flex;flex-wrap:wrap;gap:7px 7px;align-items:center;row-gap:2px;font-size:12.5px;color:var(--ink-3);min-width:0} .crumb a{color:var(--ink-2)} .crumb .sep{color:var(--ink-4)} .crumb .cur{color:var(--ink);font-weight:600} .top-search{ margin-left:auto;display:flex;align-items:center;gap:8px;background:#f3f5fa;border:1px solid var(--line); border-radius:10px;padding:7px 11px;min-width:280px;color:var(--ink-3);cursor:pointer;font-size:12.5px; } .top-search:hover{background:#eef1f8} .top-search kbd{ margin-left:auto;font-family:inherit;font-size:10.5px;background:#fff;border:1px solid var(--line); border-radius:6px;padding:1px 5px;color:var(--ink-3) } .top-right{display:flex;align-items:center;gap:8px} .ctx{ background:var(--brand-soft);color:var(--brand);border:1px solid var(--brand-line);border-radius:20px; padding:5px 12px;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:6px;max-width:260px; } .ctx span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bell{position:relative;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff; display:grid;place-items:center;color:var(--ink-2);cursor:pointer} .bell:hover{background:#f7f8fc} .bell i{ position:absolute;top:-5px;right:-5px;background:var(--err);color:#fff;font-style:normal;font-size:10px; border-radius:20px;padding:0 5px;font-weight:700;border:2px solid #fff;line-height:15px;min-width:19px;text-align:center } .menu-toggle{display:grid} .dropdown{position:relative} .dropdown > .panel{ position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:var(--sh-3);min-width:320px;max-width:420px;z-index:60;overflow:hidden;display:none; } .dropdown.open > .panel{display:block} .dropdown .panel-head{padding:12px 14px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:8px;font-weight:650;font-size:12.5px} .dropdown .panel-foot{padding:9px 14px;border-top:1px solid var(--line-2);text-align:center;background:#fbfcfe} .dropdown .panel-body{max-height:380px;overflow:auto} .dd-item{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line-2);color:inherit} .dd-item:hover{background:#f8fafc} .dd-item .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 30px;background:var(--brand-soft);color:var(--brand)} .dd-item.c .ico{background:var(--err-soft);color:var(--err)} .dd-item.w .ico{background:var(--warn-soft);color:var(--warn)} .dd-item .b{flex:1;min-width:0} .dd-item .t{font-weight:600;font-size:12.5px;overflow-wrap:anywhere} .dd-item .m{font-size:11px;color:var(--ink-3);overflow-wrap:anywhere} .content{padding:22px 24px 34px;flex:1;max-width:1680px;width:100%} .page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap} .page-head h1{font-size:21px;letter-spacing:-.02em} .page-head .sub{color:var(--ink-3);font-size:12.5px;margin-top:3px} .page-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .foot{padding:14px 24px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3);background:#fff} /* ============================ 4. KOMPONEN ============================ */ .card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:18px} .card-head{display:flex;align-items:center;gap:10px 12px;padding:13px 16px;border-bottom:1px solid var(--line-2);min-height:52px;flex-wrap:wrap} .card-head h2{font-size:13.5px;display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto;flex-wrap:wrap} .card-head h2 svg.i{color:var(--brand);flex:0 0 auto} .card-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-weight:400} .card-act{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0;row-gap:8px} .card-act .btn,.card-act .chip,.card-act .badge{max-width:100%} .card-body{padding:16px} .card-body.tight{padding:0} .card-body.pad-sm{padding:11px} .card-foot{padding:11px 16px;border-top:1px solid var(--line-2);background:#fbfcfe;display:flex;align-items:center;gap:10px} .grid{display:grid;gap:18px} .grid>*{min-width:0} /* Grid BERSARANG (mis. blok kartu di dalam badan kartu lain) tidak boleh menghimpit kolom sampai ratusan piksel — akibatnya isi kartu tumpah menimpa kartu sebelahnya. Grid bersarang selalu menyesuaikan lebar dan menurun sendiri jumlah kolomnya. */ .grid .grid{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))} .g6{grid-template-columns:repeat(6,minmax(0,1fr))} .g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)} .g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} .g-3-1{grid-template-columns:minmax(0,3fr) minmax(0,1fr)} .split{display:flex;gap:18px;flex-wrap:wrap} .split>*{flex:1;min-width:300px} /* KPI */ .kpi{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:15px 16px; display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;box-shadow:var(--sh-1); } .kpi .top{display:flex;align-items:center;gap:9px} .kpi .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)} .kpi .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:650} .kpi .val{font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.2} .kpi .val small{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0} .kpi .sub{font-size:11.5px;color:var(--ink-3);overflow-wrap:anywhere} /* Lencana penjelasan pada kartu KPI boleh membungkus (bukan dipotong) bila teksnya panjang. */ .kpi .badge{white-space:normal;text-align:left;max-width:100%;line-height:1.35} .kpi:has(.spark){padding-bottom:26px} .kpi .spark{position:absolute;right:12px;bottom:10px;opacity:.5;pointer-events:none} .kpi.b-ok .ico{background:var(--ok-soft);color:var(--ok)} .kpi.b-warn .ico{background:var(--warn-soft);color:var(--warn)} .kpi.b-err .ico{background:var(--err-soft);color:var(--err)} .kpi.b-info .ico{background:var(--info-soft);color:var(--info)} .kpi.b-violet .ico{background:#f3ecfe;color:var(--violet)} .kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand);opacity:.85} .kpi.b-ok::after{background:var(--ok)}.kpi.b-warn::after{background:var(--warn)} .kpi.b-err::after{background:var(--err)}.kpi.b-info::after{background:var(--info)} .kpi.b-violet::after{background:var(--violet)} .delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:650;border-radius:20px;padding:1px 7px} .delta.up{background:var(--ok-soft);color:var(--ok)} .delta.down{background:var(--err-soft);color:var(--err)} .delta.flat{background:#f1f3f8;color:var(--ink-3)} /* Badge & chip */ .badge{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:20px;font-size:10.8px;font-weight:650;letter-spacing:.01em;white-space:nowrap;border:1px solid transparent} .b-g{background:#f1f3f8;color:var(--ink-2);border-color:var(--line)} .b-b{background:var(--info-soft);color:var(--info);border-color:var(--info-line)} .b-h{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)} .b-y{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)} .b-r{background:var(--err-soft);color:var(--err);border-color:var(--err-line)} .b-v{background:#f3ecfe;color:var(--violet);border-color:#ddd0fb} .b-o{background:#fdf0e3;color:#c2410c;border-color:#f5d9bd} .chip{display:inline-flex;align-items:center;gap:6px;background:#f6f7fb;border:1px solid var(--line);border-radius:9px;padding:4px 9px;font-size:11.5px;color:var(--ink-2);max-width:100%;overflow-wrap:anywhere} .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-4);flex:0 0 7px} .dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.err{background:var(--err)}.dot.info{background:var(--info)} .dot.pulse{box-shadow:0 0 0 0 rgba(220,38,38,.6);animation:pulse 1.8s infinite} @keyframes pulse{70%{box-shadow:0 0 0 8px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}} /* Tombol */ .btn{ display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #d9dfea;color:var(--ink); padding:7.5px 13px;border-radius:10px;font-size:12.8px;font-weight:600;cursor:pointer;line-height:1.2; transition:background .12s,border-color .12s,box-shadow .12s;white-space:nowrap; } .btn:hover{background:#f7f8fc;border-color:#c9d2e2} .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.28)} .btn-primary:hover{filter:brightness(1.06);background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff} .btn-ok{background:var(--ok);border-color:var(--ok);color:#fff} .btn-ok:hover{background:#047857;color:#fff} .btn-warn{background:var(--warn);border-color:var(--warn);color:#fff} .btn-warn:hover{background:#a35f07;color:#fff} .btn-danger{background:#fff;border-color:var(--err-line);color:var(--err)} .btn-danger:hover{background:var(--err-soft)} .btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)} .btn-ghost:hover{background:#f1f3f8} .btn-sm{padding:5px 10px;font-size:12px;border-radius:8px} .btn-sm svg.i{width:13px;height:13px} .btn-lg{padding:10px 16px;font-size:13.5px} .btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed} .btn-group{display:inline-flex} .btn-group .btn{border-radius:0} .btn-group .btn:first-child{border-radius:10px 0 0 10px} .btn-group .btn:last-child{border-radius:0 10px 10px 0;border-left:none} /* Segmented control (gaya tab pil) — boleh digeser mendatar bila pilnya banyak, supaya tidak melebarkan halaman di layar ponsel. */ .segmented{display:inline-flex;background:#f3f5fa;border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px; max-width:100%;overflow-x:auto;scrollbar-width:thin} .segmented a{padding:5px 11px;border-radius:8px;font-size:12px;font-weight:600;color:var(--ink-2)} .segmented a.active{background:#fff;color:var(--brand);box-shadow:var(--sh-1)} .segmented a:hover{color:var(--ink)} /* Tab garis (kompatibel halaman lama) */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap;overflow-x:auto} .tab{padding:9px 14px;font-size:12.8px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:6px} .tab:hover{color:var(--ink)} .tab.active{color:var(--brand);border-bottom-color:var(--brand)} /* Alert */ .alert{padding:11px 14px;border-radius:11px;margin-bottom:14px;font-size:12.8px;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start} .alert svg.i{margin-top:2px} .a-ok{background:var(--ok-soft);color:#065f46;border-color:var(--ok-line)} .a-err{background:var(--err-soft);color:#991b1b;border-color:var(--err-line)} .a-warn{background:var(--warn-soft);color:#92400e;border-color:var(--warn-line)} .a-info{background:var(--info-soft);color:#1e40af;border-color:var(--info-line)} /* Toast (pemberitahuan mengapung) */ .toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:9px;max-width:400px} .toast{ display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand); border-radius:12px;padding:11px 13px;box-shadow:var(--sh-3);animation:toastIn .22s ease;font-size:12.8px; } .toast.ok{border-left-color:var(--ok)}.toast.err{border-left-color:var(--err)} .toast.warn{border-left-color:var(--warn)}.toast.info{border-left-color:var(--info)} .toast .x{margin-left:auto;cursor:pointer;color:var(--ink-4);background:none;border:none;padding:0;font-size:15px;line-height:1} @keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}} /* Modal */ .modal-back{position:fixed;inset:0;background:rgba(15,23,42,.42);backdrop-filter:blur(2px);z-index:150;display:none;place-items:center;padding:24px} .modal-back.open{display:grid} .modal{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-3);width:min(560px,100%);overflow:hidden;animation:toastIn .18s ease} .modal-head{padding:15px 18px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px;font-weight:650} .modal-body{padding:18px;max-height:70vh;overflow:auto} .modal-foot{padding:13px 18px;border-top:1px solid var(--line-2);display:flex;gap:9px;justify-content:flex-end;background:#fbfcfe} /* Command palette */ #cmdk{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);z-index:180;display:none;padding-top:12vh} #cmdk.open{display:block} .cmdk{width:min(680px,94vw);margin:0 auto;background:#fff;border-radius:18px;box-shadow:var(--sh-3);overflow:hidden} .cmdk-input{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-2)} .cmdk-input input{border:none;outline:none;font-size:15px;flex:1;font-family:inherit;background:none} .cmdk-list{max-height:52vh;overflow:auto;padding:7px} .cmdk-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:var(--ink)} .cmdk-item.sel,.cmdk-item:hover{background:var(--brand-soft);color:var(--brand)} .cmdk-item .k{margin-left:auto;font-size:10.5px;color:var(--ink-4)} .cmdk-sec{padding:9px 12px 4px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);font-weight:650} /* Timeline */ .timeline{position:relative;padding-left:26px} .timeline:before{content:"";position:absolute;left:8px;top:5px;bottom:5px;width:2px;background:var(--line)} .tl-item{position:relative;padding:0 0 16px} .tl-item:last-child{padding-bottom:0} .tl-item:before{content:"";position:absolute;left:-22px;top:4px;width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--brand-3)} .tl-item.ok:before{border-color:var(--ok)} .tl-item.warn:before{border-color:var(--warn)} .tl-item.err:before{border-color:var(--err)} .tl-item.mute:before{border-color:var(--ink-4)} .tl-head{font-weight:600;font-size:12.8px;overflow-wrap:anywhere} .tl-meta{font-size:11px;color:var(--ink-3);overflow-wrap:anywhere} .tl-body{font-size:12.5px;color:var(--ink-2);margin-top:3px;overflow-wrap:anywhere} /* Stepper dokumen (kompatibel lama) */ .steps{display:flex;flex-wrap:wrap;gap:6px} .step{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#f5f7fb;color:var(--ink-3);font-size:12px;border-radius:10px} .step .n{width:20px;height:20px;border-radius:50%;background:#dfe4ee;color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700} .step.done{background:var(--ok-soft);color:var(--ok);font-weight:600} .step.done .n{background:var(--ok)} .step.now{background:var(--brand-soft);color:var(--brand);font-weight:700} .step.now .n{background:var(--brand)} .step.bad{background:var(--err-soft);color:var(--err);font-weight:600} .step.bad .n{background:var(--err)} /* Notifikasi item (halaman notifikasi) */ .notif{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-2)} .notif:last-child{border-bottom:none} .notif:hover{background:#fbfcfe} .notif .ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 32px} .notif.s-critical .ico{background:var(--err-soft);color:var(--err)} .notif.s-warning .ico{background:var(--warn-soft);color:var(--warn)} .notif.s-info .ico{background:var(--info-soft);color:var(--info)} .notif .judul{font-weight:640;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .notif .body{flex:1;min-width:0} .notif .meta{font-size:11px;color:var(--ink-3);margin-top:3px} .notif .act{margin-left:auto;display:flex;gap:6px;align-items:flex-start} .notif.resolved{opacity:.6} /* Meta list (dl) */ .dl{display:grid;grid-template-columns:170px 1fr;gap:7px 16px;font-size:12.8px} .dl dt{color:var(--ink-3);font-weight:600;overflow-wrap:anywhere} .dl dd{margin:0;overflow-wrap:anywhere} .code{background:#0b1220;color:#dbe4f3;padding:12px;border-radius:10px;font-size:11.5px;overflow:auto;white-space:pre-wrap} .empty{text-align:center;color:var(--ink-3);padding:30px;font-size:12.5px} .pager{display:flex;align-items:center;gap:8px;padding:12px 16px;flex-wrap:wrap;border-top:1px solid var(--line-2)} .pages{margin-left:auto;display:flex;gap:5px} /* Bar progres */ .bar{height:7px;border-radius:5px;background:#eef1f7;overflow:hidden;min-width:70px} .bar>i{display:block;height:100%;background:var(--brand);border-radius:5px} .bar.warn>i{background:var(--warn)}.bar.err>i{background:var(--err)}.bar.ok>i{background:var(--ok)} .bar.thick{height:10px} /* ============================ 5. TABEL ============================ */ .tbl-wrap{overflow-x:auto;border-radius:0;-webkit-overflow-scrolling:touch} /* Wadah yang bisa digeser mendatar diberi bilah gulir tipis yang terlihat, supaya pengguna tahu masih ada kolom di sebelah kanan (dulu tidak terlihat sehingga tabel tampak "terpotong"). */ .tbl-wrap,.card-body.tight,.item-wrap,.segmented{scrollbar-width:thin;scrollbar-color:#c3cbdb transparent} .tbl-wrap::-webkit-scrollbar,.card-body.tight::-webkit-scrollbar,.item-wrap::-webkit-scrollbar{height:9px} .tbl-wrap::-webkit-scrollbar-thumb,.card-body.tight::-webkit-scrollbar-thumb,.item-wrap::-webkit-scrollbar-thumb{ background:#c3cbdb;border-radius:6px; } .tbl-wrap::-webkit-scrollbar-track,.card-body.tight::-webkit-scrollbar-track,.item-wrap::-webkit-scrollbar-track{background:transparent} /* Badan kartu tanpa padding (tempat tabel lebar) ikut bisa digeser mendatar, sehingga tabel yang jumlah kolomnya banyak TIDAK lagi melebarkan seluruh halaman (dulu halaman jadi harus digeser ke kanan dan tulisan tampak bertumpuk dengan kolom sebelahnya). */ .card-body.tight{overflow-x:auto} .tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.8px;line-height:1.45} .tbl th{ background:#f8f9fc;text-align:left;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#5c6b83; padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:var(--topbar-h);z-index:2;font-weight:700; } /* Tabel di dalam wadah bergulir (mis. .tbl-wrap / .scroll) menempel pada wadahnya, bukan halaman. */ .tbl-wrap .tbl th,.scroll .tbl th,.item-wrap .tbl th,.card-body.tight .tbl th{top:0} .tbl th.sortable{cursor:pointer;user-select:none} .tbl th.sortable:hover{color:var(--brand)} .tbl td{padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top;overflow-wrap:anywhere} .tbl td .xs,.tbl td .small{margin-top:1px} .tbl td.nowrap,.tbl td.nowrap *{white-space:nowrap} .tbl tbody tr:nth-child(even){background:#fcfdff} .tbl tbody tr:hover{background:#f6f7fd} .tbl tbody tr:last-child td{border-bottom:none} .tbl .num{text-align:right;font-variant-numeric:tabular-nums} /* Angka tidak boleh terbelah menjadi dua baris ("12.725" / ".000") — kolom angka selalu utuh; bila tabel kepanjangan, wadahnya yang digeser mendatar, bukan angkanya yang dipotong. */ .tbl td.num,.tbl td .num,.tbl td .badge,.tbl td .btn,.tbl td .chip,.tbl td .delta{white-space:nowrap} .tbl .ctr{text-align:center} .tbl tfoot td{background:#f8f9fc;font-weight:700;border-top:1px solid var(--line)} .tbl-sm th{padding:8px 10px} .tbl-sm td{padding:7.5px 10px;font-size:12.2px} .scroll{overflow:auto;max-height:70vh} .tbl a{font-weight:600} /* Beberapa lencana dalam satu sel tidak boleh menempel satu sama lain. */ .tbl td .badge{margin:1px 4px 1px 0} .tbl td .badge:last-child{margin-right:0} .tbl td .btn{margin:1px 0} /* Kode/identitas (mono) tetap satu baris agar nomor dokumen tidak terbelah di tengah. */ .tbl td.mono,.tbl td .mono{white-space:nowrap} .tbl td.mono.wrap,.tbl td .mono.wrap{white-space:normal} /* Kolom pertama tetap terlihat saat tabel digeser mendatar, sehingga pengguna selalu tahu baris mana yang sedang dibaca (kode dokumen / nama barang tetap di layar). */ .tbl-wrap .tbl th:first-child,.tbl-wrap .tbl td:first-child, .scroll .tbl th:first-child,.scroll .tbl td:first-child, .card-body.tight .tbl th:first-child,.card-body.tight .tbl td:first-child, .item-wrap .tbl th:first-child,.item-wrap .tbl td:first-child{ position:sticky;left:0;background:#fff;box-shadow:1px 0 0 var(--line-2); } .tbl thead th:first-child{background:#f8f9fc;z-index:3} .tbl tbody tr:nth-child(even) td:first-child{background:#fcfdff} .tbl tbody tr:hover td:first-child{background:#f6f7fd} .tbl tbody tr.on td:first-child{background:#eef0ff} .tbl tfoot td:first-child{background:#f8f9fc} /* Tabel kecil (di dalam kartu ringkasan) tidak perlu kolom menempel. */ .tbl-sm th:first-child,.tbl-sm td:first-child{position:static;box-shadow:none} /* Editor baris dokumen */ .item-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:auto} .item-wrap .tbl th{background:#f4f6fb} .item-foot{padding:10px 12px;background:#fbfcfe;border-top:1px solid var(--line-2)} .num-in{text-align:right;font-variant-numeric:tabular-nums} .sn-box{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.45} .sn-cell select{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px} /* ============================ 6. FORM ============================ */ label.f{display:block;font-size:11.5px;font-weight:650;color:var(--ink-2);margin-bottom:5px} input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],input[type=tel], input[type=search],input[type=time],select,textarea{ width:100%;padding:8px 11px;border:1px solid #d9dfea;border-radius:10px;font:inherit;font-size:12.8px; background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-3);box-shadow:0 0 0 3.5px rgba(99,102,241,.13)} input[readonly],select[disabled],input[disabled]{background:#f6f7fb;color:var(--ink-2)} textarea{min-height:74px;resize:vertical} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px} .frm{display:grid;gap:14px} /* Sama seperti .grid: butir grid tidak boleh melebar mengikuti isinya, sebab isi lebar (tabel item, kolom pencarian) akan meluber keluar kartu dan terpotong — dulu terjadi pada formulir permintaan. */ .frm>*{min-width:0} .frm .f2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .frm .f3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .frm .f2>*,.frm .f3>*{min-width:0} .frm-actions{display:flex;gap:9px;padding-top:8px;align-items:center;flex-wrap:wrap} .req::after{content:" *";color:var(--err)} .inline-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap} .inline-form>div{min-width:150px} .filterbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line-2);background:#fbfcfe} .filterbar>div{min-width:160px} .filterbar .spacer{margin-left:auto} /* Panel filter dapat dilipat (diisi oleh assets/app.js) — dipakai halaman dengan banyak kriteria agar bagian atas halaman tidak penuh kontrol. Filter yang sedang aktif otomatis terbuka. */ .filterbar.filter-lipat:not(.filter-open)>div:not(.spacer){display:none} .filterbar .filter-toggle{align-self:center;flex:0 0 auto;margin-right:2px} .filterbar .filter-toggle.is-active{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)} .filterbar.filter-lipat:not(.filter-open)::after{ content:"Semua kriteria dipakai — buka untuk menyaring";font-size:11.5px;color:var(--ink-3);align-self:center; } .checkbox{display:flex;align-items:center;gap:8px;font-size:12.8px;cursor:pointer} .checkbox input{width:auto;accent-color:var(--brand)} .switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer} .switch input{position:absolute;opacity:0} .switch .track{width:38px;height:21px;border-radius:20px;background:#d7dce8;transition:.15s;position:relative} .switch .track:after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s;box-shadow:var(--sh-1)} .switch input:checked + .track{background:var(--brand)} .switch input:checked + .track:after{transform:translateX(17px)} /* ============================ 7. GRAFIK ============================ */ .chart{width:100%;height:auto;display:block;overflow:visible} .chart text{font-size:10.5px;fill:var(--ink-3);font-family:inherit} .chart .grid-line{stroke:var(--line-2);stroke-width:1} .chart .axis{stroke:var(--line);stroke-width:1} .chart .lbl{fill:var(--ink-3)} .chart .val{fill:var(--ink)} .chart .ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .chart .pt{stroke:#fff;stroke-width:1.6} .chart .bar-r{transition:opacity .12s} .chart .bar-r:hover{opacity:.82} .chart .s1{stroke:var(--brand);fill:var(--brand)} .chart .s2{stroke:var(--violet);fill:var(--violet)} .chart .s3{stroke:var(--ok);fill:var(--ok)} .chart .s4{stroke:var(--amber);fill:var(--amber)} .chart .s5{stroke:var(--sky);fill:var(--sky)} .chart .s6{stroke:var(--rose);fill:var(--rose)} .chart .s7{stroke:var(--teal);fill:var(--teal)} .chart .area1{fill:url(#gradS1)} .chart-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-2);padding:2px 16px 12px} .chart-legend span{display:inline-flex;align-items:center;gap:6px} .chart-legend i{width:9px;height:9px;border-radius:3px;display:inline-block} .chart-box{padding:6px 10px 0} .spark{display:block} /* ============================ 8. HALAMAN KHUSUS ============================ */ /* Login */ .login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px; background:radial-gradient(1100px 620px at 12% -10%,rgba(79,70,229,.55),transparent 60%), radial-gradient(900px 520px at 100% 110%,rgba(124,58,237,.45),transparent 60%), linear-gradient(140deg,#070b16,#101a2e 55%,#1b1235)} .login-card{width:100%;max-width:1000px;display:grid;grid-template-columns:1.02fr .98fr;background:#fff; border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 80px rgba(2,6,23,.55)} /* KUNCI: tanpa min-width:0, kolom grid tidak dapat menyusut di bawah lebar isinya sehingga isi yang lebar (tabel formulir) meluber keluar kartu dan TERPOTONG oleh overflow:hidden — sebabnya tabel input pada halaman formulir permintaan terlihat terpotong di garis tepi. Aturan yang sama wajib ada pada .grid (lihat catatan di bagian atas berkas). */ .login-card>*{min-width:0} /* Kartu lebar untuk langkah formulir/pemantauan (tabel input banyak kolom). */ .login-card.lebar{max-width:1240px} .login-left{padding:34px 36px;color:#dfe6f5;background:linear-gradient(155deg,#0a1020,#1b2450 55%,#3b1f6e)} .login-left h1{color:#fff;font-size:22px;margin-bottom:8px;letter-spacing:-.02em} .login-left p{color:#b9c4dd;font-size:12.8px;line-height:1.7} .login-left ul{margin:16px 0 0;padding:0;list-style:none;font-size:12.5px;color:#c8d2e8} .login-left li{margin-bottom:8px;display:flex;gap:9px;align-items:flex-start} .login-left li svg{color:#8b9bff;margin-top:2px} .login-right{padding:32px 34px} .login-right h2{font-size:17px} .demo-box{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fbfcfe;font-size:11.5px} .demo-box b{display:block;margin-bottom:6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)} .demo-box table{width:100%;font-size:11.5px} .demo-box td{padding:2.5px 0} /* Cetak */ .printable{background:#fff;max-width:940px;margin:0 auto;padding:26px} /* Pratinjau cetak: seluruh isi dokumen dibungkus wadah yang bisa digeser mendatar di layar sempit, sehingga tabel dokumen tidak melebarkan halaman. Hasil cetak tidak terpengaruh. */ .print-scroll{min-width:0} @media screen{ .print-scroll{overflow-x:auto} .print-head{flex-wrap:wrap} .print-title{min-width:0} } @media print{.print-scroll{overflow:visible}} .print-head{display:flex;justify-content:space-between;gap:24px;border-bottom:3px double var(--ink);padding-bottom:14px;margin-bottom:18px} /* Pratinjau kop di halaman pengaturan — memakai aturan yang sama dengan kop cetak. */ .kop-pratinjau{background:#fff;border:1px dashed var(--line);border-radius:10px;padding:14px;margin-top:6px} .kop-pratinjau .co{display:flex;gap:13px;align-items:flex-start;border-bottom:3px double var(--ink);padding-bottom:12px} .kop-pratinjau h1{font-size:16px;line-height:1.25} .kop-pratinjau .addr{font-size:11.5px;color:var(--ink-2);line-height:1.6;overflow-wrap:anywhere} .kop-pratinjau .mono-logo{width:52px;height:52px} .print-head .co{display:flex;gap:13px;align-items:flex-start} .print-head .mono-logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px} .print-head h1{font-size:17px} .print-head .addr{font-size:11.5px;color:var(--ink-2);line-height:1.6} .print-title{text-align:right;min-width:220px} .print-title h2{font-size:15px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px} .print-title div{font-size:11.5px;color:var(--ink-2)} .print-title .doc-code{font-family:ui-monospace,Menlo,monospace;font-weight:700;color:var(--ink)} .sign{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;text-align:center;font-size:12px} .sign div{border-top:1px solid var(--ink);padding-top:6px} .no-print{margin-top:26px;display:flex;gap:9px;justify-content:center} /* QR kaki lembar cetak: kecil, di tepi kanan bawah dokumen, tetap dapat dipindai kamera ponsel. (Barcode/QR di kop sudah DIHAPUS atas permintaan pemilik — kop hanya logo, nama, alamat, nomor.) */ .print-foot-qr{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:20px; padding-top:10px;border-top:1px solid var(--line-2);page-break-inside:avoid} .print-foot-qr .qr-kotak{flex:0 0 auto;line-height:0} .print-foot-qr .qr-kotak svg.qr{width:74px;height:74px} .print-foot-qr .qr-ket{max-width:290px;font-size:10.5px;color:var(--ink-3);line-height:1.45} .print-foot-qr .qr-ket b{display:block;font-size:11px;color:var(--ink-2);margin-bottom:2px} .print-foot-note{margin-top:14px;font-size:10.5px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:8px;display:flex;justify-content:space-between} @media print{ .no-print,.sidebar,.topbar,.foot{display:none!important} body{background:#fff} .printable{max-width:none;padding:0} .card{box-shadow:none;border-color:#cbd5e1} .main{display:block} } /* ============================ Lembar cetak yang RAPIH ============================ Permintaan pemilik: «buat tampilan tercetak nya seperti PO aplikasi altura/servicedesk biar terlihat rapih tidak berantakan». Komponen di bawah ini dipakai lembar cetak (print_po.php dst.) agar hasil cetaknya seperti dokumen perusahaan: kotak info berlabel, tabel bergaris dengan kepala huruf kapital, blok nilai yang rata kanan, kotak keterangan, dan blok tanda tangan berjarak. */ .print-meta{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:12px} .print-meta th,.print-meta td{border:1px solid var(--line);padding:6px 9px;vertical-align:top;text-align:left} .print-meta th{background:#f4f6fb;font-weight:600;color:var(--ink-2);width:19%;white-space:nowrap} .print-meta td{width:31%} .print-meta .mono{font-family:ui-monospace,Menlo,monospace;font-weight:700} .tbl-print{width:100%;border-collapse:collapse;margin-bottom:14px;font-size:12px} .tbl-print th,.tbl-print td{border:1px solid var(--line);padding:6px 9px;vertical-align:top} .tbl-print thead th{background:#eef2f9;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;text-align:center;color:var(--ink-2)} .tbl-print td.num{text-align:right;white-space:nowrap} .tbl-print td.ctr{text-align:center} .tbl-print tbody tr:nth-child(even) td{background:#fbfcfe} .tbl-print tfoot th{background:#eef2f9;font-size:11.5px;text-align:right} .tbl-print tfoot th.ket{text-align:left} .tbl-print tfoot tr.total th{font-size:12.5px} .tbl-print .spes{display:block;color:var(--ink-3);font-size:11px;margin-top:2px;white-space:pre-wrap} .print-sec,.sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--ink-2); margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)} .sec-title:first-child{margin-top:0} .print-box{border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:11.5px;margin-bottom:12px;background:#fcfdff} .print-box.rapat{margin-bottom:8px} .print-box ul{margin:4px 0 0 16px} .print-notes{font-size:11px;color:var(--ink-2);margin:6px 0 0;line-height:1.55} .sign-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px;text-align:center;font-size:11.5px} .sign-grid3 .sign-cell{display:flex;flex-direction:column;gap:4px;min-width:0} .sign-grid3 .peran{color:var(--ink-2)} .sign-grid3 .line{border-bottom:1px solid var(--ink);height:64px;position:relative;display:grid;place-items:end center} .sign-grid3 b{font-size:12px} .sign-grid3 small{color:var(--ink-3)} /* Gambar cap & tanda tangan BERTUMPUK pada satu tempat TEPAT DI ATAS garis tanda tangan: cap di belakang (lebih tembus pandang) dan tanda tangan di atasnya, keduanya duduk pada garis. Wadahnya melebar penuh satu kolom (bukan menyusut selebar gambarnya) supaya isian «lebar %» pada pengaturan benar-benar dihitung terhadap lebar kolom tanda tangan. */ .sign-gambar{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr); place-items:end center;width:100%;height:100%;pointer-events:none} .sign-gambar .sign-cap,.sign-gambar .sign-ttd{grid-area:1/1;max-width:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply} .sign-gambar .sign-cap{z-index:0;opacity:.88} .sign-gambar .sign-ttd{z-index:1} .sign-cap,.sign-ttd{max-width:100%;width:auto;height:auto;object-fit:contain} /* Ruang tanda tangan pada lembar cetak lama (mis. gate pass, SPK, surat jalan): gambar cap/ttd ditaruh di ruang kosong DI ATAS garis tanda tangan tanpa menggeser tata letaknya. */ .ttd-ruang{min-height:62px;display:flex;align-items:flex-end;justify-content:center} .ttd-ruang .sign-gambar{height:auto;width:100%;min-width:0} @media print{ .tbl-print,.print-meta{page-break-inside:auto} .tbl-print tr,.print-meta tr,.sign-grid3,.print-box{page-break-inside:avoid} .tbl-print thead{display:table-header-group} /* Cap & tanda tangan: pastikan tumpukan + latar tembusnya ikut tercetak (jangan dibuang printer). */ .sign-gambar .sign-cap,.sign-gambar .sign-ttd{mix-blend-mode:multiply;-webkit-print-color-adjust:exact;print-color-adjust:exact} .sign-cap{opacity:.9} } @media(max-width:620px){ .sign-grid3{grid-template-columns:1fr;gap:22px} .print-meta th,.print-meta td{width:auto} } /* Label aset (lembar cetak stiker) */ /* Barcode/QR tidak boleh melebarkan halaman: selalu menyusut mengikuti lebar wadahnya. */ svg.barcode,svg.qr{max-width:100%;height:auto} .label-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .asset-label{border:1.4px dashed #94a3b8;border-radius:10px;padding:9px 10px;background:#fff;page-break-inside:avoid;min-width:0;overflow:hidden} .asset-label .al-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px} /* Nomor seri pada label tidak boleh dipotong "…" — dibungkus penuh agar tetap terbaca & terpindai. */ .asset-label .sn{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:11.5px;margin:3px 0;overflow-wrap:anywhere;line-height:1.25} .asset-label svg.barcode{max-width:100%;height:auto} .asset-label svg.qr{max-width:68px;height:auto} .asset-label .nm{font-size:11px;line-height:1.35;min-height:28px} .asset-label .meta{font-size:9.5px;color:var(--ink-3)} @media print{.label-sheet{grid-template-columns:repeat(3,1fr)}.asset-label{border-color:#64748b}} /* Scan cepat */ .scan-box{display:grid;place-items:center;padding:34px 20px;border:2px dashed var(--brand-line);border-radius:var(--r-lg);background:linear-gradient(180deg,#fbfbff,#f5f6ff)} .scan-input{max-width:520px;width:100%;text-align:center;font-size:19px;font-family:ui-monospace,Menlo,monospace; padding:14px;border-radius:12px;letter-spacing:.06em} /* Pemindaian lewat kamera ponsel (scan.js) — bingkai kamera + konfirmasi sebelum membuka data. */ .kamera-box{display:grid;place-items:center;gap:12px;padding:18px;border:2px dashed var(--brand-line);border-radius:var(--r-lg);background:linear-gradient(180deg,#fbfbff,#f5f6ff)} .kamera-video{position:relative;width:100%;max-width:440px;margin:0 auto;border-radius:14px;overflow:hidden;background:#0b1220;line-height:0} .kamera-video video{width:100%;height:auto;max-height:58vh;display:block;object-fit:cover} .kamera-target{position:absolute;inset:13%;border:2px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 0 0 9999px rgba(11,18,32,.3);pointer-events:none} .kamera-hasil{display:grid;gap:8px;justify-items:center;width:100%;max-width:560px;padding:14px;border:1px solid var(--brand-line);border-radius:var(--r);background:#fff} .kamera-kode{font-weight:700;font-size:15px;text-align:center;overflow-wrap:anywhere} .scan-input:focus{box-shadow:0 0 0 5px rgba(99,102,241,.16)} /* Peta sebaran (grid kotak) */ .heat{display:grid;gap:3px} .heat i{aspect-ratio:1;border-radius:3px;background:#eef1f7;display:block} .heat i.l1{background:#dfe3fb}.heat i.l2{background:#c3c8f8}.heat i.l3{background:#9ba1f2} .heat i.l4{background:#6f76e9}.heat i.l5{background:var(--brand)} .heat-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)} /* Matrix hak akses */ .matrix td.ctr{font-weight:650} .matrix .yes{color:var(--ok)} .matrix .no{color:#cbd5e1} /* ============================ 9. RESPONSIF ============================ */ @media(max-width:1400px){ .g6{grid-template-columns:repeat(3,minmax(0,1fr))} .g5{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:1180px){ .g4,.g5,.g6{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g-2-1,.g-1-2,.g-3-1{grid-template-columns:1fr} .login-card{grid-template-columns:1fr} .login-left{display:none} .top-search{min-width:180px} } @media(max-width:900px){ .sidebar{position:fixed;left:calc(-1 * var(--sidebar-w));transition:left .2s ease;height:100vh;box-shadow:0 0 60px rgba(2,6,23,.4)} .sidebar.open{left:0} .g2,.g3,.g4,.g5,.g6{grid-template-columns:1fr} .frm .f2,.frm .f3{grid-template-columns:1fr} .dl{grid-template-columns:1fr;gap:2px} .dl dt{margin-top:8px} .content{padding:16px} .top-search{display:none} .ctx{display:none} .label-sheet{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .label-sheet{grid-template-columns:1fr} .page-head h1{font-size:18px} .kpi .val{font-size:20px} } /* Kotak pencarian pada daftar pilihan (select) — dibuat otomatis oleh assets/app.js bagian 9 untuk setiap