: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;
  }
}