:root{
  --tosca:#0f9f94;--tosca-dark:#055f5b;--tosca-soft:#e8fffb;--ink:#17202a;--muted:#64748b;--bg:#f4fbfa;--card:#ffffff;--line:#dbeafe;--danger:#dc2626;--warning:#f59e0b;--success:#16a34a;
}
*{box-sizing:border-box} body{margin:0;background:linear-gradient(135deg,#f4fbfa 0%,#eefaf8 45%,#f8fafc 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-size:14px}.app-shell{min-height:100vh;display:flex}.sidebar{width:286px;background:rgba(255,255,255,.94);border-right:1px solid rgba(20,184,166,.18);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto;box-shadow:8px 0 28px rgba(15,118,110,.06)}.brand{display:flex;gap:12px;align-items:center;padding:10px 10px 18px}.brand-mark{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,var(--tosca),#5eead4);color:white;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(20,184,166,.22)}.brand b{display:block;font-size:17px}.brand small{color:var(--muted)}.menu{display:flex;flex-direction:column;gap:5px}.menu a{display:flex;gap:11px;align-items:center;color:#334155;text-decoration:none;padding:10px 12px;border-radius:14px;font-weight:700}.menu a i{width:20px;text-align:center;color:#0f766e}.menu a:hover,.menu a.active{background:linear-gradient(135deg,#ccfbf1,#f0fdfa);color:#0f766e;box-shadow:0 8px 18px rgba(20,184,166,.1)}.menu-title{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#94a3b8;font-weight:900;margin:16px 12px 7px}.main{flex:1;min-width:0}.topbar{position:sticky;top:0;z-index:5;background:rgba(244,251,250,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(20,184,166,.16);display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 28px}.topbar h1{font-size:24px;margin:0;font-weight:900}.top-subtitle{color:var(--muted);font-weight:600}.top-actions{display:flex;gap:10px;align-items:center}.content{padding:26px 28px 42px}.btn{border-radius:12px;font-weight:800}.btn-primary{background:linear-gradient(135deg,var(--tosca),#0d9488);border:none;box-shadow:0 10px 22px rgba(20,184,166,.22)}.btn-outline-primary{border-color:rgba(20,184,166,.5);color:#0f766e}.btn-outline-primary:hover{background:#0f766e;border-color:#0f766e}.panel{background:var(--card);border:1px solid rgba(20,184,166,.14);border-radius:22px;padding:18px;box-shadow:0 14px 34px rgba(15,118,110,.07)}.panel-title{font-weight:900;font-size:16px;margin-bottom:13px;display:flex;align-items:center;gap:8px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.kpi-card{position:relative;overflow:hidden;background:white;border:1px solid rgba(20,184,166,.14);border-radius:22px;padding:17px;box-shadow:0 14px 34px rgba(15,118,110,.07)}.kpi-card:after{content:"";position:absolute;right:-28px;top:-28px;width:90px;height:90px;border-radius:50%;background:rgba(20,184,166,.12)}.kpi-icon{width:42px;height:42px;border-radius:14px;background:var(--tosca-soft);color:#0f766e;display:flex;align-items:center;justify-content:center;font-size:18px}.kpi-title{color:var(--muted);font-weight:800;margin-top:12px}.kpi-value{font-size:28px;font-weight:950;line-height:1}.table{margin-bottom:0}.table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:#f8fffe;border-bottom:1px solid #dff5f2}.table td,.table th{vertical-align:middle}.table-hover tbody tr:hover{background:#f9fffd}.badge-soft{display:inline-flex;padding:6px 10px;border-radius:999px;background:#ecfeff;color:#0f766e;font-weight:900;border:1px solid #ccfbf1}.badge-danger-soft{background:#fef2f2;color:#b91c1c;border-color:#fecaca}.badge-warning-soft{background:#fffbeb;color:#b45309;border-color:#fde68a}.badge-success-soft{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}.progress{height:12px;border-radius:999px;background:#e2e8f0}.progress-bar{border-radius:999px;background:linear-gradient(90deg,#2dd4bf,#0f766e)}.progress-label{font-size:12px;font-weight:950;color:#0f766e}.wrap-80{white-space:pre-wrap;word-break:break-word;max-width:520px}.activity-card{border-left:5px solid var(--tosca);background:#fbfffe;border-radius:15px;padding:12px 14px;margin-bottom:10px;border-top:1px solid #e2f5f1;border-right:1px solid #e2f5f1;border-bottom:1px solid #e2f5f1}.activity-meta{font-weight:900;color:#0f766e}.activity-date{font-weight:950;color:var(--danger);display:block;margin:3px 0}.activity-desc{font-weight:950;color:#111827}.form-control,.form-select{border-radius:12px;border-color:#dbeafe}.form-control:focus,.form-select:focus{border-color:#14b8a6;box-shadow:0 0 0 .2rem rgba(20,184,166,.14)}.quick-actions{display:flex;gap:6px;flex-wrap:wrap}.quick-actions .btn{padding:6px 10px}.chart-box{height:280px}.summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.summary-item{background:linear-gradient(135deg,#ffffff,#f0fdfa);border:1px solid rgba(20,184,166,.14);border-radius:18px;padding:15px}.summary-item b{font-size:22px}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ccfbf1,#ffffff,#ecfeff)}.login-card{width:100%;max-width:430px;background:white;border-radius:26px;padding:28px;box-shadow:0 25px 70px rgba(15,118,110,.18);border:1px solid rgba(20,184,166,.16)}@media(max-width:1100px){.sidebar{width:82px}.brand div:not(.brand-mark),.menu span,.menu-title{display:none}.menu a{justify-content:center}.topbar{padding:16px}.content{padding:18px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.summary-strip{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.app-shell{display:block}.sidebar{position:relative;width:100%;height:auto}.menu{flex-direction:row;overflow:auto}.menu a{min-width:60px}.main{width:100%}.topbar{position:relative;display:block}.top-actions{margin-top:12px}.kpi-grid,.summary-strip{grid-template-columns:1fr}.content{padding:14px}.panel{padding:14px}}
/* SLA, bulanan, dan chart size fix */
.chart-panel{overflow:hidden}.chart-wrap{position:relative;height:260px;max-height:260px;width:100%;overflow:hidden}.chart-wrap.chart-wide{height:300px;max-height:300px}.chart-wrap canvas{display:block!important;width:100%!important;height:100%!important;max-height:100%!important}.summary-strip-2{grid-template-columns:repeat(2,minmax(0,1fr))}.fw-black{font-weight:950}.table small{font-weight:700}.badge-warning-soft{background:#fffbeb;color:#b45309;border-color:#fde68a}.quick-actions form{display:inline-flex}@media(max-width:700px){.chart-wrap,.chart-wrap.chart-wide{height:240px;max-height:240px}.summary-strip-2{grid-template-columns:1fr}}


/* Branding ETIKET Holding Aumkes PCM Sepanjang */
.brand-aumkes{
  justify-content:flex-start;
  padding:8px 8px 18px;
  min-height:78px;
}
.brand-full-logo{
  width:100%;
  max-width:238px;
  height:auto;
  max-height:70px;
  object-fit:contain;
  object-position:left center;
  display:block;
}
.sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#fbfffe 45%,#f0fdfa 100%);
}
.topbar{
  background:rgba(255,255,255,.88);
}
.topbar h1,
.panel-title,
.fw-black{
  color:#12222b;
}
.login-card-branded{
  max-width:470px;
}
.login-brand-logo{
  width:100%;
  max-width:340px;
  height:auto;
  max-height:92px;
  object-fit:contain;
}
.public-brand-bar{
  position:fixed;
  top:18px;
  left:22px;
  z-index:2;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(15,159,148,.14);
  box-shadow:0 12px 32px rgba(15,118,110,.08);
  border-radius:18px;
  padding:8px 12px;
}
.public-brand-bar img{
  width:250px;
  max-width:42vw;
  height:auto;
  display:block;
}
@media(max-width:1100px){
  .sidebar{width:96px}
  .brand-aumkes{justify-content:center;min-height:auto;padding:10px 0 14px}
  .brand-full-logo{
    content:url('/images/etiket-emblem.png');
    width:54px;
    height:54px;
    max-height:54px;
    object-fit:contain;
  }
}
@media(max-width:700px){
  .brand-full-logo{
    content:url('/images/etiket-brand-horizontal.png');
    width:220px;
    height:auto;
    max-height:62px;
  }
  .public-brand-bar{
    position:relative;
    top:auto;
    left:auto;
    width:max-content;
    max-width:calc(100% - 24px);
    margin:12px auto 0;
  }
  .public-brand-bar img{
    max-width:260px;
    width:70vw;
  }
}

/* Pagination fix: kecilkan tombol kanan/kiri dan pakai gaya Bootstrap compact */
.pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin:14px 0 0;
}
.pagination .page-item{margin:0!important}
.pagination .page-link{
  min-width:34px;
  height:34px;
  padding:6px 10px;
  border-radius:10px!important;
  border:1px solid rgba(15,159,148,.20);
  color:#0f766e;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,118,110,.05);
}
.pagination .page-link:hover{
  color:#075e59;
  background:#ecfdf5;
  border-color:rgba(15,159,148,.45);
}
.pagination .page-item.active .page-link{
  color:#fff;
  background:linear-gradient(135deg,var(--tosca),#0d9488);
  border-color:#0d9488;
  box-shadow:0 8px 18px rgba(20,184,166,.20);
}
.pagination .page-item.disabled .page-link{
  color:#94a3b8;
  background:#f8fafc;
  border-color:#e2e8f0;
  box-shadow:none;
}
.pagination svg,
nav[role="navigation"] svg,
nav[aria-label="Pagination Navigation"] svg{
  width:16px!important;
  height:16px!important;
  max-width:16px!important;
  max-height:16px!important;
  display:block!important;
}
nav[role="navigation"] .relative,
nav[aria-label="Pagination Navigation"] .relative{
  position:relative!important;
}
/* Laravel default Tailwind pagination fallback: jangan sampai icon panah melebar */
nav[role="navigation"] a,
nav[role="navigation"] span{
  line-height:1.2;
}
nav[role="navigation"] .w-5,
nav[role="navigation"] .h-5{
  width:16px!important;
  height:16px!important;
}
@media(max-width:700px){
  .pagination{justify-content:center;gap:5px}
  .pagination .page-link{min-width:32px;height:32px;padding:5px 8px}
}

/* Checklist klasifikasi dan milestone progress */
.classification-form-wrap{
  border:1px solid rgba(20,184,166,.16);
  background:linear-gradient(135deg,#ffffff,#f0fdfa);
  border-radius:22px;
  padding:16px;
}
.classification-form-empty{
  border:1px dashed rgba(15,118,110,.35);
  background:#f8fffe;
  color:#0f766e;
  font-weight:900;
  border-radius:16px;
  padding:16px;
}
.classification-form-block{animation:fadeUpEtiket .2s ease both}
@keyframes fadeUpEtiket{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.classification-form-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px 12px;
  background:#fff;
  border:1px solid rgba(20,184,166,.13);
  border-radius:18px;
  margin-bottom:14px;
}
.classification-section{
  background:#fff;
  border:1px solid rgba(20,184,166,.13);
  border-radius:18px;
  padding:14px;
  margin-top:12px;
}
.section-mini-title{
  color:#0f766e;
  font-weight:950;
  font-size:14px;
  margin-bottom:10px;
}
.checklist-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.checklist-pill{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #dbeafe;
  background:#fbfffe;
  border-radius:13px;
  padding:9px 11px;
  font-weight:800;
  font-size:13px;
}
.checklist-pill input{accent-color:#0f766e}
.classification-detail{
  border:1px solid rgba(20,184,166,.16);
  background:linear-gradient(135deg,#ffffff,#f8fffe);
  border-radius:20px;
  padding:15px;
}
.form-detail-section{margin-top:12px}
.form-detail-section-title{
  font-weight:950;
  color:#0f766e;
  margin-bottom:8px;
  padding-bottom:6px;
  border-bottom:1px dashed #ccfbf1;
}
.form-detail-item{
  height:100%;
  background:#fff;
  border:1px solid rgba(20,184,166,.14);
  border-radius:14px;
  padding:10px 12px;
}
.form-detail-item small{
  display:block;
  color:#64748b;
  font-weight:900;
  margin-bottom:4px;
}
.form-detail-item b{
  display:block;
  color:#111827;
  white-space:pre-wrap;
  word-break:break-word;
}
.milestone-box{
  background:linear-gradient(135deg,#ffffff,#f0fdfa);
  border:1px solid rgba(20,184,166,.15);
  border-radius:20px;
  padding:15px;
}
.milestone-track{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:10px;
}
.milestone-item{
  position:relative;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:76px;
}
.milestone-item.done{
  border-color:#99f6e4;
  background:#ecfdf5;
}
.milestone-item.active{
  border-color:#fde68a;
  background:#fffbeb;
}
.milestone-dot{
  min-width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e2e8f0;
  color:#334155;
  font-weight:950;
  font-size:12px;
}
.milestone-item.done .milestone-dot{background:#0f766e;color:#fff}
.milestone-item.active .milestone-dot{background:#f59e0b;color:#fff}
.milestone-content b{display:block;font-weight:950;color:#111827;line-height:1.15}
.milestone-content small{display:block;color:#64748b;font-weight:900;margin-top:5px}
@media(max-width:700px){
  .checklist-grid{grid-template-columns:1fr}
  .classification-form-header{display:block}
  .milestone-track{grid-template-columns:1fr}
}

/* Status final, bukti penyelesaian, dan dark mode */
.status-badge-final{
  background:#f0fdf4;
  color:#15803d;
  border-color:#bbf7d0;
}
.completion-proof-box{
  border:1px solid rgba(20,184,166,.18);
  background:linear-gradient(135deg,#ffffff,#ecfdf5);
  border-radius:18px;
  padding:14px;
}
.closing-checklist-box{
  border:1px solid rgba(20,184,166,.18);
  background:linear-gradient(135deg,#ffffff,#f0fdfa);
  border-radius:18px;
  padding:14px;
}
.proof-verify-icon{
  width:72px;
  height:72px;
  border-radius:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(135deg,#0f9f94,#16a34a);
  box-shadow:0 16px 34px rgba(15,118,110,.20);
  font-size:32px;
}

html[data-theme="dark"]{
  --tosca:#2dd4bf;
  --tosca-dark:#14b8a6;
  --tosca-soft:#123a38;
  --ink:#e5f7f5;
  --muted:#9fb8b5;
  --bg:#071a1a;
  --card:#0f2424;
  --line:#1e3a3a;
}
html[data-theme="dark"] body{
  background:linear-gradient(135deg,#061616 0%,#0b2020 45%,#0f172a 100%);
  color:var(--ink);
}
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .summary-item,
html[data-theme="dark"] .classification-form-wrap,
html[data-theme="dark"] .classification-section,
html[data-theme="dark"] .classification-form-header,
html[data-theme="dark"] .classification-detail,
html[data-theme="dark"] .form-detail-item,
html[data-theme="dark"] .milestone-box,
html[data-theme="dark"] .milestone-item,
html[data-theme="dark"] .completion-proof-box,
html[data-theme="dark"] .closing-checklist-box,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .public-brand-bar{
  background:#0f2424!important;
  border-color:#1f4d49!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .menu a,
html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .fw-black,
html[data-theme="dark"] .activity-desc,
html[data-theme="dark"] .form-detail-item b,
html[data-theme="dark"] .milestone-content b{
  color:#e5f7f5!important;
}
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .top-subtitle,
html[data-theme="dark"] small{
  color:#9fb8b5!important;
}
html[data-theme="dark"] .table,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table th{
  color:#e5f7f5;
  border-color:#1f4d49;
}
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-hover tbody tr:hover{
  background:#132f2e!important;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .page-link{
  background:#071a1a;
  color:#e5f7f5;
  border-color:#1f4d49;
}
html[data-theme="dark"] .form-control::placeholder{color:#78928f}
html[data-theme="dark"] .badge-soft{
  background:#123a38;
  color:#99f6e4;
  border-color:#1f766d;
}
html[data-theme="dark"] .badge-danger-soft{background:#3b1111;color:#fecaca;border-color:#7f1d1d}
html[data-theme="dark"] .badge-warning-soft{background:#3b2a0a;color:#fde68a;border-color:#92400e}
html[data-theme="dark"] .badge-success-soft{background:#10351f;color:#bbf7d0;border-color:#166534}
html[data-theme="dark"] .checklist-pill{
  background:#071a1a;
  border-color:#1f4d49;
  color:#e5f7f5;
}
html[data-theme="dark"] .btn-light{
  background:#132f2e;
  color:#e5f7f5;
  border-color:#1f4d49;
}
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert-danger{
  background:#132f2e;
  color:#e5f7f5;
  border-color:#1f4d49;
}


/* ===== Mobile navigation repair + dark mode refinement (2026-05-24) ===== */
.topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.topbar-title-wrap{
  min-width:0;
}
.topbar-title-wrap h1{
  line-height:1.1;
}
.mobile-menu-toggle,
.mobile-menu-close{
  appearance:none;
  border:1px solid rgba(15,159,148,.18);
  background:#ffffff;
  color:#0f766e;
  border-radius:14px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(15,118,110,.08);
}
.mobile-menu-toggle:hover,
.mobile-menu-close:hover{
  background:#f0fdfa;
  border-color:rgba(15,159,148,.36);
}
.mobile-menu-toggle{display:none;flex:0 0 auto}
.sidebar-mobile-head{display:none}
.mobile-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,8,23,.46);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:all .22s ease;
  z-index:1039;
}
.mobile-backdrop.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
body.mobile-menu-open{
  overflow:hidden;
}

/* perapian dark/light umum */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item,
.accordion-button,
.input-group-text,
.nav-tabs .nav-link,
.breadcrumb,
pre,
code:not(.hljs){
  border-radius:14px;
}
.table-responsive{border-radius:18px}
textarea.form-control{min-height:110px}
.form-check-input{cursor:pointer}
.btn,.form-control,.form-select,.input-group-text,.dropdown-menu,.modal-content,.card,.list-group-item,.accordion-item{
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.sidebar::-webkit-scrollbar{width:10px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(15,159,148,.22);border-radius:999px}

/* tablet/mobile offcanvas sidebar */
@media(max-width:900px){
  .app-shell{display:block}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    width:302px;
    max-width:86vw;
    height:100dvh;
    z-index:1040;
    transform:translateX(-104%);
    transition:transform .24s ease, box-shadow .24s ease;
    overflow-y:auto;
    border-right:1px solid rgba(20,184,166,.18);
    padding:12px 12px 22px;
  }
  .sidebar.is-open{
    transform:translateX(0);
    box-shadow:18px 0 42px rgba(2,8,23,.18);
  }
  .sidebar-mobile-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:4px 4px 10px;
    margin-bottom:6px;
    border-bottom:1px solid rgba(20,184,166,.12);
  }
  .sidebar-mobile-title{
    display:flex;
    align-items:center;
    font-weight:900;
    color:#1f2937;
    font-size:14px;
  }
  .brand-aumkes{
    justify-content:flex-start;
    min-height:auto;
    padding:12px 6px 16px;
  }
  .brand-full-logo{
    content:url('/images/etiket-brand-horizontal.png');
    width:220px;
    max-width:100%;
    height:auto;
    max-height:60px;
  }
  .menu{
    display:flex;
    flex-direction:column;
    gap:6px;
    overflow:visible;
  }
  .menu-title,
  .brand div:not(.brand-mark),
  .menu span{
    display:block;
  }
  .menu a{
    justify-content:flex-start;
    min-width:0;
  }
  .main{width:100%}
  .topbar{
    position:sticky;
    top:0;
    padding:14px 16px;
  }
  .topbar-left{
    align-items:flex-start;
    gap:10px;
  }
  .topbar h1{
    font-size:20px;
  }
  .topbar .top-subtitle{
    display:block;
    font-size:12px;
    line-height:1.35;
    margin-top:4px;
  }
  .top-actions{
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .content{
    padding:16px;
  }
  .mobile-menu-toggle{display:inline-flex}
}

@media(max-width:640px){
  .topbar{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .topbar-left{
    width:100%;
  }
  .top-actions{
    width:100%;
    justify-content:space-between;
  }
  .top-actions .btn,
  .top-actions form,
  .top-actions form .btn{
    flex:1 1 auto;
  }
  .top-actions .btn .btn-text,
  .top-actions form .btn .btn-text{
    white-space:nowrap;
  }
}

/* dark mode lebih menyeluruh */
html[data-theme="dark"]{
  color-scheme:dark;
}
html[data-theme="dark"] .sidebar{
  background:linear-gradient(180deg,#0b2020 0%,#0d2625 48%,#0f2d2b 100%)!important;
}
html[data-theme="dark"] .topbar{
  background:rgba(8,24,24,.92)!important;
}
html[data-theme="dark"] .menu-title,
html[data-theme="dark"] .sidebar-mobile-title{
  color:#8fb6b1!important;
}
html[data-theme="dark"] .menu a{
  color:#d7f5f1!important;
}
html[data-theme="dark"] .menu a i{
  color:#5eead4!important;
}
html[data-theme="dark"] .menu a:hover,
html[data-theme="dark"] .menu a.active{
  background:linear-gradient(135deg,rgba(45,212,191,.16),rgba(20,184,166,.10))!important;
  color:#eafffb!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .mobile-menu-toggle,
html[data-theme="dark"] .mobile-menu-close,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark{
  background:#132f2e!important;
  color:#e5f7f5!important;
  border-color:#1f4d49!important;
}
html[data-theme="dark"] .btn-outline-primary{
  color:#8ff3e2;
  border-color:#2aa896;
}
html[data-theme="dark"] .btn-outline-primary:hover{
  background:#134e4a;
  color:#eafffb;
  border-color:#2aa896;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .accordion-item,
html[data-theme="dark"] .accordion-button,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light{
  background:#0f2424!important;
  color:#e5f7f5!important;
  border-color:#1f4d49!important;
}
html[data-theme="dark"] .accordion-button:not(.collapsed){
  background:#12302f!important;
  color:#e5f7f5!important;
  box-shadow:none!important;
}
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] label,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .col-form-label,
html[data-theme="dark"] .form-check-label,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .breadcrumb-item,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body{
  color:#d7f5f1!important;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus,
html[data-theme="dark"] .list-group-item:hover{
  background:#132f2e!important;
  color:#ecfffd!important;
}
html[data-theme="dark"] .nav-tabs,
html[data-theme="dark"] .nav-tabs .nav-link,
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] hr{
  border-color:#1f4d49!important;
}
html[data-theme="dark"] .nav-tabs .nav-link.active{
  background:#12302f!important;
  border-color:#1f4d49!important;
  color:#eafffb!important;
}
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] .table-hover tbody tr:hover,
html[data-theme="dark"] .classification-form-empty{
  background:#12302f!important;
}
html[data-theme="dark"] .progress{
  background:#12302f!important;
}
html[data-theme="dark"] .pagination .page-item.active .page-link,
html[data-theme="dark"] .progress-bar,
html[data-theme="dark"] .btn-primary{
  background:linear-gradient(135deg,#14b8a6,#0f766e)!important;
  border-color:#0f766e!important;
}
html[data-theme="dark"] .page-link:hover{
  background:#12302f!important;
  color:#ecfffd!important;
}
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-light{
  background:#132f2e!important;
  color:#e5f7f5!important;
  border-color:#1f4d49!important;
}
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .top-subtitle,
html[data-theme="dark"] small,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .breadcrumb-item.active{
  color:#92b4b0!important;
}
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg{
  box-shadow:none!important;
}
html[data-theme="dark"] .mobile-backdrop{
  background:rgba(0,0,0,.58);
}

/* perapian mobile ekstra kecil */
@media(max-width:480px){
  .sidebar{width:286px;max-width:88vw}
  .topbar{padding:12px 14px}
  .mobile-menu-toggle,
  .mobile-menu-close{width:42px;height:42px;border-radius:12px}
  .topbar h1{font-size:18px}
  .top-actions{gap:8px}
  .top-actions .btn,
  .top-actions form .btn{padding:8px 10px;font-size:13px}
}

/* ===== Master TTD user + PDF proof refinement (2026-05-24) ===== */
.signature-pad-wrap{
  width:100%;
  max-width:760px;
  min-height:204px;
  border:2px dashed rgba(15,159,148,.28);
  border-radius:20px;
  background:linear-gradient(135deg,#ffffff,#fbfffe);
  padding:10px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  contain:layout paint;
}
.signature-pad{
  width:100%;
  max-width:720px;
  height:180px;
  max-height:180px;
  display:block;
  flex:0 0 auto;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,159,148,.10);
  cursor:crosshair;
  touch-action:none;
  user-select:none;
}
.signature-preview-box{
  border:1px solid rgba(20,184,166,.18);
  background:#fff;
  border-radius:20px;
  padding:18px;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.signature-preview-img{
  max-width:100%;
  max-height:130px;
  object-fit:contain;
}
.public-theme-toggle{
  position:fixed;
  top:18px;
  right:22px;
  z-index:4;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(15,159,148,.18);
  background:#fff;
  color:#0f766e;
  box-shadow:0 12px 32px rgba(15,118,110,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.public-theme-toggle:hover{background:#f0fdfa}
.sla-supervisor-note{
  border:1px solid rgba(20,184,166,.18);
  background:linear-gradient(135deg,#f0fdfa,#ffffff);
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  color:#0f766e;
}
html[data-theme="dark"] .signature-pad-wrap,
html[data-theme="dark"] .signature-preview-box,
html[data-theme="dark"] .sla-supervisor-note{
  background:#0f2424!important;
  border-color:#1f4d49!important;
  color:#d7f5f1!important;
}
html[data-theme="dark"] .signature-pad{
  background:#f8fafc!important;
  border-color:#1f4d49!important;
}
html[data-theme="dark"] .public-theme-toggle{
  background:#132f2e!important;
  color:#e5f7f5!important;
  border-color:#1f4d49!important;
  box-shadow:none!important;
}
@media(max-width:700px){
  .public-theme-toggle{top:12px;right:12px;width:40px;height:40px;border-radius:12px}
  .signature-pad-wrap{min-height:174px;max-width:100%;padding:8px}
  .signature-pad{height:150px;max-height:150px}
}