:root{--bg:#f6f8fb;--card:#fff;--text:#172033;--muted:#697386;--line:#e6eaf0;--brand:#16a34a;--brand2:#0f766e;--danger:#dc2626;--warn:#d97706;--info:#2563eb}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.layout{display:flex;min-height:100vh}.sidebar{width:260px;background:#fff;border-right:1px solid var(--line);padding:18px;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:18px;margin-bottom:22px}.brand .logo{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;display:grid;place-items:center}.menu a{display:flex;gap:10px;align-items:center;padding:11px 12px;border-radius:12px;color:#374151;margin-bottom:6px}.menu a.active,.menu a:hover{background:#ecfdf5;color:#065f46}.main{flex:1;padding:22px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.userbox{font-size:13px;color:var(--muted);text-align:right}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 28px rgba(15,23,42,.04);margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.kpi{padding:16px}.kpi b{display:block;font-size:28px;margin-top:6px}.muted{color:var(--muted);font-size:13px}.btn{border:0;border-radius:12px;padding:10px 14px;background:#111827;color:#fff;cursor:pointer;font-weight:700;display:inline-block}.btn.green{background:var(--brand)}.btn.red{background:var(--danger)}.btn.blue{background:var(--info)}.btn.light{background:#eef2f7;color:#111827}.btn.sm{padding:7px 10px;font-size:12px}.form-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;outline:none}.input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #dcfce7}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}table{width:100%;border-collapse:collapse}th,td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:13px;text-align:left;white-space:nowrap;vertical-align:top}th{background:#f8fafc;font-size:12px;text-transform:uppercase;color:#475569}.badge{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:800}.badge.tepat,.badge.approved,.badge.normal{background:#dcfce7;color:#166534}.badge.telat,.badge.rejected,.badge.fraud_risk{background:#fee2e2;color:#991b1b}.badge.buka,.badge.submitted{background:#dbeafe;color:#1e40af}.badge.tutup,.badge.pending,.badge.warning{background:#fef3c7;color:#92400e}.badge.kosong,.badge.draft{background:#f3f4f6;color:#4b5563}.alert{padding:12px 14px;border-radius:12px;margin-bottom:14px}.alert.ok{background:#dcfce7;color:#166534}.alert.err{background:#fee2e2;color:#991b1b}.alert.warn{background:#fef3c7;color:#92400e}.login{min-height:100vh;display:grid;place-items:center;padding:20px}.login .box{width:100%;max-width:420px}.photo{height:54px;border-radius:8px;border:1px solid var(--line)}.actions{display:flex;gap:6px;flex-wrap:wrap}.small-note{font-size:12px;color:var(--muted);line-height:1.5}.pill{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;margin:3px;font-size:12px}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}.section-title h3{margin:0}@media(max-width:1000px){.layout{display:block}.sidebar{width:auto;height:auto;position:relative}.grid,.grid3,.form-row{grid-template-columns:1fr}.main{padding:14px}.topbar{display:block}.userbox{text-align:left;margin-top:8px}th,td{white-space:normal}.menu{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.menu a{margin:0}}

/* Popup modal + action buttons */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:flex-start;justify-content:center;padding:32px 14px;z-index:9999;overflow:auto}.modal-backdrop.show{display:flex}.modal-box{background:#fff;border-radius:22px;box-shadow:0 24px 80px rgba(15,23,42,.28);width:min(980px,100%);max-height:92vh;overflow:auto;border:1px solid var(--line);animation:modalIn .14s ease-out}.modal-sm{width:min(560px,100%)}.modal-lg{width:min(1180px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}.modal-head h3{margin:0}.modal-body{padding:18px}.modal-close{border:0;background:#f1f5f9;border-radius:12px;width:38px;height:38px;cursor:pointer;font-size:20px}.toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap}.btn.yellow{background:#d97706}.btn.outline{background:#fff;color:#111827;border:1px solid var(--line)}.btn.disabled{background:#e5e7eb;color:#6b7280;cursor:not-allowed}.detail-grid{display:grid;grid-template-columns:180px 1fr;gap:8px 14px}.detail-grid .k{color:var(--muted);font-size:12px}.detail-grid .v{font-weight:600;word-break:break-word}.row-click{cursor:pointer}.row-click:hover{background:#f8fafc}.danger-zone{border:1px solid #fecaca;background:#fff1f2;border-radius:14px;padding:12px}.photo-lg{max-width:100%;max-height:360px;border-radius:14px;border:1px solid var(--line)}@keyframes modalIn{from{transform:translateY(8px);opacity:.6}to{transform:none;opacity:1}}@media(max-width:700px){.modal-backdrop{padding:8px}.modal-box{border-radius:16px}.detail-grid{grid-template-columns:1fr}.actions .btn{width:100%;text-align:center}.toolbar{display:block}.toolbar .btn{margin-top:8px}}

/* Autocomplete filter + upload/template controls */
.filter-actions{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.upload-box{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:14px;padding:12px;margin-top:10px}.upload-box h4{margin:0 0 8px}.input[list]{background:#fff}.template-note{font-size:12px;color:var(--muted);margin-top:6px}.nowrap-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media(max-width:700px){.filter-actions .btn,.nowrap-actions .btn{width:100%;text-align:center}}


.btn.wa{background:#17a34a;color:#fff;border-color:#17a34a}
.btn.disabled{background:#e5e7eb;color:#9ca3af;border-color:#e5e7eb;cursor:not-allowed;pointer-events:none}
.wa-actions{display:flex;gap:6px;flex-wrap:wrap}
.field.wide{min-width:320px;flex:2}

/* NICESO CCTV logo, favicon, premium login, and mobile polish */
:root{--brand:#dc151c;--brand2:#8f0f15;--brand-soft:#fff1f2;--brand-line:#fecdd3;--bg:#f8fafc}
.brand-logo-img{width:44px;height:44px;border-radius:15px;object-fit:cover;background:#fff;border:1px solid #fee2e2;box-shadow:0 8px 20px rgba(220,21,28,.14)}
.app-brand{gap:12px}.app-brand .muted{font-weight:600}.menu a.active,.menu a:hover{background:var(--brand-soft);color:#991b1b}.input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(220,21,28,.14)}.btn.green{background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 20px rgba(220,21,28,.18)}.btn.green:hover{filter:brightness(.97)}
.login-page{min-height:100vh;background:radial-gradient(circle at 15% 15%,rgba(220,21,28,.13),transparent 30%),radial-gradient(circle at 85% 10%,rgba(15,23,42,.11),transparent 26%),linear-gradient(135deg,#fff 0%,#fff5f5 45%,#f8fafc 100%)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.72fr);align-items:center;gap:34px;padding:42px;max-width:1180px;margin:0 auto}.login-hero-card{border:1px solid rgba(255,255,255,.72);background:rgba(255,255,255,.62);backdrop-filter:blur(18px);border-radius:30px;padding:36px;box-shadow:0 28px 80px rgba(15,23,42,.12)}.login-hero-logo{width:min(520px,100%);display:block;margin:0 auto 22px}.login-hero-card h1{font-size:clamp(30px,4vw,54px);line-height:1.03;margin:0 0 16px;letter-spacing:-.04em;color:#111827}.login-hero-card p{max-width:620px;color:#475569;font-size:16px;line-height:1.7;margin:0}.login-points{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.login-points span{background:#fff;border:1px solid var(--brand-line);border-radius:999px;padding:9px 13px;color:#991b1b;font-weight:800;font-size:13px}.login-card{width:100%;max-width:440px;margin:0 auto;border-radius:28px;padding:26px;box-shadow:0 24px 80px rgba(15,23,42,.16);border:1px solid rgba(255,255,255,.84)}.login-card-head{text-align:center;margin-bottom:22px}.login-card-head .app-logo{width:230px;max-width:100%;height:auto;display:block;margin:0 auto 6px}.login-card-head h2{font-size:24px;margin:0 0 6px;letter-spacing:-.02em}.login-form{display:grid;gap:15px}.login-form .field label{font-weight:800;color:#334155}.login-form .input{height:48px;border-radius:14px;background:#fff}.login-submit{width:100%;height:50px;border-radius:15px;font-size:15px;margin-top:2px}.login-note{text-align:center;margin:2px 0 0}.topbar{background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:20px;padding:16px 18px;box-shadow:0 8px 30px rgba(15,23,42,.05)}.sidebar{box-shadow:8px 0 30px rgba(15,23,42,.03)}
@media(max-width:980px){.login-shell{grid-template-columns:1fr;padding:18px;gap:18px}.login-hero-card{padding:24px}.login-hero-card h1{text-align:center}.login-hero-card p{text-align:center}.login-points{justify-content:center}.login-card{max-width:100%;padding:22px}.login-hero-logo{max-width:360px}.sidebar{border-right:0;border-bottom:1px solid var(--line)}.brand-logo-img{width:40px;height:40px}.topbar{padding:14px}}
@media(max-width:560px){.login-shell{padding:12px}.login-hero-card{display:none}.login-page{background:linear-gradient(135deg,#fff,#fff1f2)}.login-card{border-radius:22px}.login-card-head .app-logo{width:210px}.menu{grid-template-columns:1fr}.menu a{padding:12px}.topbar h2{font-size:20px}.userbox{font-size:12px}.main{padding:12px}.card{border-radius:16px;padding:14px}}


/* Mobile compatibility upgrade: drawer menu, touch targets, responsive tables/cards */
.mobile-menu-btn,.sidebar-close,.mobile-overlay{display:none}
html{-webkit-text-size-adjust:100%}button,input,select,textarea{font:inherit}.btn,.menu a,button{touch-action:manipulation}.main{max-width:100%;overflow:hidden}.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.table-wrap table{min-width:760px}.modal-box{overscroll-behavior:contain}.input,select,textarea{min-height:42px}.btn{min-height:40px}.menu a{min-height:42px}.card{overflow:visible}.autocomplete-menu,.suggest-box,.suggestions{z-index:10050!important;max-height:260px;overflow:auto}
@media(max-width:900px){
  body{padding-top:56px}.mobile-menu-btn{display:inline-flex;align-items:center;gap:8px;position:fixed;left:12px;top:10px;z-index:10020;border:1px solid var(--line);background:#fff;color:#991b1b;border-radius:14px;padding:10px 13px;font-weight:900;box-shadow:0 8px 24px rgba(15,23,42,.12)}
  .layout{display:block;min-height:calc(100vh - 56px)}.sidebar{position:fixed;z-index:10030;top:0;left:0;width:min(86vw,320px);height:100vh;transform:translateX(-105%);transition:transform .2s ease;background:#fff;border-right:1px solid var(--line);border-bottom:0;box-shadow:24px 0 70px rgba(15,23,42,.22);padding:16px;overflow:auto}.sidebar-close{display:grid;place-items:center;margin-left:auto;width:38px;height:38px;border:0;border-radius:12px;background:#fee2e2;color:#991b1b;font-size:24px;font-weight:900}.mobile-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:10025}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-open .mobile-overlay{display:block}.sidebar-open{overflow:hidden}.brand{margin-bottom:14px}.menu{display:grid!important;grid-template-columns:1fr!important;gap:8px}.menu a{font-size:14px;padding:13px 14px}.main{padding:12px}.topbar{margin:0 0 12px;border-radius:16px}.topbar h2{font-size:20px}.grid,.grid3,.form-row{grid-template-columns:1fr!important;gap:10px}.section-title{align-items:flex-start;flex-direction:column}.section-title .actions,.actions,.filter-actions,.nowrap-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px}.actions .btn,.filter-actions .btn,.nowrap-actions .btn,.toolbar .btn{width:100%;text-align:center}.field.wide{min-width:0;width:100%}.modal-backdrop{padding:8px;align-items:flex-start}.modal-box{width:100%;max-height:calc(100vh - 16px);border-radius:18px}.modal-head{padding:12px 14px}.modal-body{padding:14px}.detail-grid{grid-template-columns:1fr}.login-shell{min-height:calc(100vh - 0px)}
}
@media(max-width:640px){
  .table-wrap{border:0;background:transparent;overflow:visible}.table-wrap table{min-width:0;width:100%;border-collapse:separate;border-spacing:0 10px}.table-wrap thead{display:none}.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%}.table-wrap tr{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.05);padding:8px;margin-bottom:10px}.table-wrap td{border-bottom:1px dashed #e5e7eb;white-space:normal;text-align:left;padding:9px 8px 9px 42%;min-height:38px;position:relative;word-break:break-word}.table-wrap td:last-child{border-bottom:0}.table-wrap td::before{content:attr(data-label);position:absolute;left:8px;top:9px;width:36%;font-size:11px;text-transform:uppercase;font-weight:900;color:#64748b;line-height:1.25}.table-wrap td .btn{margin:3px 0}.photo{width:100%;height:auto;max-height:160px;object-fit:cover}.login-card-head .app-logo{width:190px}.login-card{padding:18px}.card{padding:13px}.kpi b{font-size:23px}
}


/* Smooth loading overlay */
.app-loading-overlay{
  position:fixed;
  inset:0;
  z-index:200000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(248,250,252,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.app-loading-overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.app-loading-card{
  width:min(92vw,360px);
  border:1px solid rgba(226,232,240,.95);
  border-radius:28px;
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 80px rgba(15,23,42,.18);
  padding:26px 24px 22px;
  text-align:center;
  transform:translateY(10px) scale(.98);
  transition:transform .22s ease;
}
.app-loading-overlay.show .app-loading-card{transform:translateY(0) scale(1)}
.app-loading-logo-wrap{
  width:96px;
  height:96px;
  margin:0 auto 14px;
  border-radius:28px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#fff,#fee2e2);
  box-shadow:inset 0 0 0 1px rgba(220,21,28,.10),0 14px 34px rgba(220,21,28,.16);
  position:relative;
}
.app-loading-logo-wrap:before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:34px;
  border:3px solid rgba(220,21,28,.16);
  border-top-color:#dc151c;
  animation:appLoadSpin 1s linear infinite;
}
.app-loading-logo{
  width:74px;
  height:74px;
  object-fit:contain;
  border-radius:20px;
}
.app-loading-title{
  font-weight:900;
  letter-spacing:.08em;
  color:#b91c1c;
  font-size:16px;
  margin-top:4px;
}
.app-loading-text{
  color:#64748b;
  font-size:13px;
  margin:8px 0 16px;
}
.app-loading-bar{
  width:100%;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#fee2e2;
}
.app-loading-bar span{
  display:block;
  width:42%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#dc151c,#ef4444,#fca5a5);
  animation:appLoadBar 1.15s ease-in-out infinite;
}
.app-is-loading{cursor:progress}
@keyframes appLoadSpin{to{transform:rotate(360deg)}}
@keyframes appLoadBar{
  0%{transform:translateX(-120%)}
  50%{transform:translateX(80%)}
  100%{transform:translateX(260%)}
}
@media(max-width:640px){
  .app-loading-overlay{padding:16px}
  .app-loading-card{width:min(94vw,330px);border-radius:24px;padding:22px 18px 20px}
  .app-loading-logo-wrap{width:82px;height:82px;border-radius:24px}
  .app-loading-logo-wrap:before{border-radius:30px}
  .app-loading-logo{width:62px;height:62px}
}
@media (prefers-reduced-motion: reduce){
  .app-loading-logo-wrap:before,.app-loading-bar span{animation:none}
  .app-loading-overlay,.app-loading-card{transition:none}
}