*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --red:#DC2626;--red-dark:#991B1B;--red-deep:#7F1D1D;--red-light:#FEE2E2;
  --yellow:#FBBF24;--yellow-soft:#FEF3C7;
  --orange:#F97316;--orange-soft:#FFEDD5;
  --green:#059669;--green-soft:#D1FAE5;
  --blue:#2563EB;--blue-soft:#DBEAFE;
  --bg:#F5F5F4;--card:#FFFFFF;--border:#E7E5E4;--border-soft:#F5F5F4;
  --text:#1C1917;--text-mid:#57534E;--text-light:#A8A29E;
  --radius:8px;--radius-lg:10px;
  --sidebar-w:240px;--sidebar-collapsed-w:64px;--topbar-h:60px;
  --safe-pad:clamp(12px,2.5vw,24px);
}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font-family:inherit;font-size:inherit}
img{max-width:100%;display:block}
.hidden{display:none!important}
.text-mid{color:var(--text-mid)}
.text-light{color:var(--text-light)}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}
.w-full{width:100%}
.mono{font-family:'SF Mono',Consolas,monospace;font-size:12px;color:var(--text-mid);background:var(--border-soft);padding:2px 6px;border-radius:4px}

/* ============================================================
   CUSTOM TOOLTIP UNTUK TOMBOL AKSI
   ============================================================ */
.btn-icon-tooltip { position: relative; }
.btn-icon-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  background-color: #1C1917;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}
.btn-icon-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  border-width: 5px;
  border-style: solid;
  border-color: #1C1917 transparent transparent transparent;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}
.btn-icon-tooltip:hover::after,
.btn-icon-tooltip:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#printArea{display:none;}
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  @page { size: portrait; margin: 10mm; }
  #printArea { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background-color: #fff; padding: 0; margin: 0; font-family: 'Poppins', sans-serif; color: #2c3e50; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #printArea .invoice-card { max-width: 100%; margin: 0 auto; background: #ffffff; padding: 15px 20px; border-radius: 12px; position: relative; overflow: hidden; }
  #printArea .top-accent { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #d32f2f 0%, #ff9800 50%, #d32f2f 100%); }
  #printArea .header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px dashed #f0cfcf; margin-bottom: 12px; }
  #printArea .company-brand { display: flex; align-items: center; gap: 10px; }
  #printArea .logo-img { height: 45px; width: auto; object-fit: contain; }
  #printArea .company-details h2 { color: #d32f2f; font-size: 16px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }
  #printArea .slogan-tag { display: inline-block; background-color: #fff3e0; color: #e65100; font-size: 8px; font-weight: 700; padding: 1px 8px; border-radius: 8px; margin-bottom: 2px; font-style: italic; }
  #printArea .company-details p { font-size: 9px; color: #666; line-height: 1.2; margin: 0; }
  #printArea .invoice-badge { text-align: right; }
  #printArea .invoice-badge h1 { font-size: 24px; font-weight: 800; color: #d32f2f; letter-spacing: 1px; line-height: 1; margin: 0; }
  #printArea .status-pill { display: inline-block; background: #e8f5e9; color: #2e7d32; font-weight: 700; font-size: 9px; padding: 2px 8px; border-radius: 10px; margin-top: 4px; }
  #printArea .status-pill.unpaid { background: #fff3e0; color: #e65100; }
  #printArea .status-pill.partial { background: #e3f2fd; color: #1565c0; }
  #printArea .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
  #printArea .info-box { background-color: #fff8f8; padding: 10px 12px; border-radius: 8px; border: 1px solid #ffe5e5; }
  #printArea .info-box.yellow-bg { background-color: #fffde7; border-color: #fff9c4; }
  #printArea .box-title { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #d32f2f; letter-spacing: 0.8px; margin-bottom: 4px; }
  #printArea .customer-name { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
  #printArea .meta-list { list-style: none; font-size: 10px; padding: 0; margin: 0; }
  #printArea .meta-list li { display: flex; justify-content: space-between; margin-bottom: 2px; }
  #printArea .meta-list li span:first-child { color: #777; }
  #printArea .meta-list li span:last-child { font-weight: 600; color: #2c3e50; }
  #printArea .table-container { border-radius: 8px; overflow: hidden; border: 1px solid #f0d0d0; margin-bottom: 12px; }
  #printArea .items-table { width: 100%; border-collapse: collapse; }
  #printArea .items-table th { background-color: #d32f2f; color: #ffffff; font-size: 10px; font-weight: 700; text-align: left; padding: 6px 8px; text-transform: uppercase; letter-spacing: 0.5px; }
  #printArea .items-table td { padding: 6px 8px; font-size: 10px; border-bottom: 1px solid #fce8e8; background-color: #ffffff; }
  #printArea .items-table td small { font-size: 8px; }
  #printArea .items-table tbody tr:nth-child(even) td { background-color: #fffcfc; }
  #printArea .items-table tbody tr:last-child td { border-bottom: none; }
  #printArea .text-center { text-align: center; }
  #printArea .text-right { text-align: right; }
  #printArea .bottom-section { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 10px; align-items: start; }
  #printArea .payment-card { background-color: #f9f9f9; border-radius: 8px; padding: 10px; border: 1.5px dashed #ccc; font-size: 10px; }
  #printArea .payment-card h4 { color: #d32f2f; font-size: 11px; margin: 0 0 4px 0; display: flex; align-items: center; gap: 4px; }
  #printArea .payment-card p { margin: 0 0 2px 0; }
  #printArea .summary-card { background-color: #fff8f8; border-radius: 8px; padding: 10px; border: 1px solid #ffe0e0; }
  #printArea .summary-row { display: flex; justify-content: space-between; font-size: 10px; margin-bottom: 4px; color: #555; }
  #printArea .summary-row.discount { color: #d32f2f; font-weight: 600; }
  #printArea .summary-row.total { border-top: 2px dashed #d32f2f; padding-top: 6px; margin-top: 6px; font-size: 12px; font-weight: 800; color: #d32f2f; }
  #printArea .summary-row.balance { font-weight: 700; color: #2e7d32; background: #e8f5e9; padding: 4px 8px; border-radius: 4px; margin-top: 4px; margin-bottom: 0; }
  #printArea .footer { margin-top: 15px; text-align: center; font-size: 9px; color: #888; padding-top: 8px; border-top: 1px solid #eee; }
  #printArea .footer span { color: #d32f2f; font-weight: 700; }
}

.login-screen{position:fixed;inset:0;display:flex;align-items:stretch;justify-content:center;padding:24px;z-index:9000;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(135deg,#7F1D1D 0%,#991B1B 50%,#450A0A 100%)}
.login-screen.hidden{display:none}
.login-wrapper{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:20px;max-width:1080px;width:100%;margin:auto;overflow:hidden;box-shadow:0 32px 64px rgba(0,0,0,0.4);min-height:560px}
.login-brand{background:linear-gradient(160deg,#DC2626 0%,#991B1B 55%,#7F1D1D 100%);color:#fff;padding:48px 40px;position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.login-brand::before{content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(251,191,36,0.25) 0%,transparent 70%);border-radius:50%}
.login-brand::after{content:'';position:absolute;bottom:-100px;left:-60px;width:260px;height:260px;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);border-radius:50%}
.login-brand-content{position:relative;z-index:1}
.login-brand-logo{width:120px;height:120px;background:#fff;border-radius:24px;padding:12px;box-shadow:0 16px 32px rgba(0,0,0,0.25);display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.login-brand-logo img{width:100%;height:100%;object-fit:contain}
.login-brand-logo i{font-size:56px;color:var(--red)}
.login-brand h1{font-size:32px;font-weight:800;letter-spacing:-0.8px;line-height:1.1;margin-bottom:8px}
.login-brand h1 span{display:block;font-size:20px;font-weight:600;color:#FCD34D;letter-spacing:0;margin-top:4px}
.login-brand p.tagline{font-size:15px;color:#FEE2E2;font-style:italic;font-weight:500;margin-bottom:24px}
.login-brand-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.login-brand-badges span{background:rgba(255,255,255,0.15);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,0.25);padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:6px}
.login-brand-badges span i{color:#FCD34D;font-size:11px}
.login-brand-footer{position:relative;z-index:1;font-size:11px;color:rgba(255,255,255,0.7);font-weight:500;line-height:1.6}
.login-brand-footer strong{color:#FCD34D;font-weight:700}
.login-form-panel{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.login-form-panel .form-title{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-0.4px;margin-bottom:6px}
.login-form-panel .form-sub{font-size:13px;color:var(--text-light);margin-bottom:28px}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.role-card{background:#fff;border:2px solid var(--border);border-radius:12px;padding:16px 12px;cursor:pointer;text-align:center;transition:all 0.15s;position:relative}
.role-card:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 6px 16px rgba(220,38,38,0.12)}
.role-card.selected{border-color:var(--red);background:var(--red-light);box-shadow:0 6px 16px rgba(220,38,38,0.18)}
.role-card.selected::after{content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;top:6px;right:6px;width:18px;height:18px;background:var(--red);color:#fff;border-radius:50%;font-size:9px;display:flex;align-items:center;justify-content:center}
.role-icon{width:44px;height:44px;margin:0 auto 10px;background:linear-gradient(135deg,#DC2626 0%,#991B1B 100%);border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.role-card h3{font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.2}
.role-card p{font-size:10px;color:var(--text-light);line-height:1.3}
.login-form-fields{border-top:1px solid var(--border);padding-top:20px}
.password-wrapper{position:relative;margin-bottom:12px}
.password-wrapper input{width:100%;padding:13px 46px 13px 15px;border:1px solid var(--border);border-radius:9px;background:#fff;font-size:16px;color:var(--text);transition:all 0.12s}
.password-wrapper input::-ms-reveal,.password-wrapper input::-ms-clear{display:none}
.password-wrapper input::-webkit-credentials-auto-fill-button,.password-wrapper input::-webkit-contacts-auto-fill-button{display:none!important;visibility:hidden;pointer-events:none;position:absolute;right:0}
.password-wrapper input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-light)}
.password-wrapper input:disabled{background:var(--border-soft);cursor:not-allowed}
.password-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-light);cursor:pointer;padding:10px 12px;border-radius:6px;min-width:40px;min-height:40px}
.password-toggle:hover{background:var(--border-soft);color:var(--text)}
.login-btn{width:100%;padding:13px;background:var(--red);color:#fff;border:none;border-radius:9px;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.12s;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 12px rgba(220,38,38,0.25);min-height:48px}
.login-btn:hover:not(:disabled){background:var(--red-dark);box-shadow:0 6px 16px rgba(220,38,38,0.35)}
.login-btn:disabled{opacity:0.4;cursor:not-allowed;box-shadow:none}
.login-error{display:none;align-items:center;gap:8px;background:var(--red-light);color:#991B1B;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500;margin-top:12px}
.login-error.show{display:flex}
.login-hint{text-align:center;font-size:11px;color:var(--text-light);margin-top:16px}

.app-shell{display:none;min-height:100vh;min-height:100dvh;width:100%}
.app-shell.active{display:flex}
.sidebar{width:var(--sidebar-w);background:linear-gradient(180deg,#991B1B 0%,#7F1D1D 100%);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;transition:width 0.2s ease,transform 0.25s ease;z-index:100}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.2);border-radius:2px}
.brand{padding:16px;border-bottom:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-logo-img{width:42px;height:42px;border-radius:8px;object-fit:contain;background:#fff;padding:2px;flex-shrink:0}
.brand-info{min-width:0}
.brand-info h1{font-size:13px;font-weight:700;color:#fff;letter-spacing:-0.2px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-info span{font-size:10px;color:#FCD34D;font-weight:500;letter-spacing:0.3px;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.nav{padding:12px 8px;flex:1}
.nav-section{margin-bottom:16px}
.nav-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.8px;padding:4px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;color:rgba(255,255,255,0.75);text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;margin-bottom:1px;transition:all 0.12s;border:none;background:transparent;width:100%;text-align:left;min-height:38px}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-item.active{background:#fff;color:var(--red-deep);font-weight:600}
.nav-item i{width:16px;font-size:13px;text-align:center;flex-shrink:0}
.nav-item>span:not(.badge-count),.nav-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-item .badge-count{margin-left:auto;background:#FBBF24;color:#7F1D1D;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;flex-shrink:0}
.sidebar.collapsed {width: 0;min-width: 0;padding: 0;overflow: hidden;border-right: none;}
.sidebar.collapsed .brand,.sidebar.collapsed .nav {opacity: 0;pointer-events: none;}
.sidebar-overlay{position:fixed;inset:0;background:rgba(28,25,23,0.55);z-index:290;display:none;opacity:0;transition:opacity 0.2s}
.sidebar-overlay.show{display:block;opacity:1}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh;min-height:100dvh}

.topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 clamp(12px,2.5vw,24px);height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:100;flex-shrink:0}
.topbar>div:first-child{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.topbar-title{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-sub{font-size:11px;color:var(--text-light);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#065F46;background:#D1FAE5;padding:4px 10px;border-radius:20px;white-space:nowrap}
.status-pill::before{content:'';width:6px;height:6px;background:#059669;border-radius:50%;flex-shrink:0}
.status-pill.error{background:var(--red-light);color:#991B1B}
.status-pill.error::before{background:var(--red)}
.icon-btn{width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:8px;color:var(--text-mid);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:all 0.12s;position:relative;flex-shrink:0}
.icon-btn:hover{background:var(--border-soft);color:var(--text)}
.icon-btn .notif-dot{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;min-width:16px;text-align:center}
.user-chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border:1px solid var(--border);border-radius:24px;background:#fff;flex-shrink:0}
.user-avatar{width:28px;height:28px;background:linear-gradient(135deg,#DC2626 0%,#991B1B 100%);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.user-name{font-size:12px;font-weight:600;color:var(--text);line-height:1.1;white-space:nowrap}
.user-role{font-size:10px;color:var(--text-light);font-weight:500;white-space:nowrap}
.sidebar-toggle-btn{width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:8px;color:var(--text-mid);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:13px;transition:all 0.12s;flex-shrink:0}
.sidebar-toggle-btn:hover{background:var(--border-soft);color:var(--text)}

.content{padding:var(--safe-pad);flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-width:0}
.view-section{display:none}
.view-section.active{display:block;animation:fadeIn 0.2s}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.page-header{margin-bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px}
.page-title{font-size:clamp(17px,3vw,20px);font-weight:700;color:var(--text);letter-spacing:-0.3px;margin-bottom:2px}
.page-desc{font-size:12px;color:var(--text-mid)}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;border:1px solid var(--border);background:#fff;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.12s;text-decoration:none;white-space:nowrap;min-height:36px}
.btn:hover{background:var(--border-soft);border-color:var(--text-light)}
.btn i{font-size:12px}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 1px 2px rgba(220,38,38,0.2)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-success{background:var(--green);border-color:var(--green);color:#fff}
.btn-success:hover{background:#047857}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff}
.btn-danger:hover{background:var(--red-dark)}
.btn-secondary{background:#fff;border-color:var(--border);color:var(--text)}
.btn-secondary:hover{background:var(--border-soft)}
.btn-yellow{background:var(--yellow);border-color:var(--yellow);color:#7F1D1D}
.btn-yellow:hover{background:#F59E0B}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-mid)}
.btn-ghost:hover{background:var(--border-soft);color:var(--text)}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:6px;min-height:30px}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;position:relative;overflow:hidden;min-width:0}
.stat.primary{background:linear-gradient(135deg,#DC2626 0%,#991B1B 100%);border-color:var(--red-dark);color:#fff}
.stat.primary .stat-label,.stat.primary .stat-value{color:#fff}
.stat.primary .stat-label{opacity:0.85}
.stat-label{font-size:11px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.stat-label i{font-size:11px}
.stat-value{font-size:clamp(18px,2.5vw,22px);font-weight:700;color:var(--text);letter-spacing:-0.5px;line-height:1.15;word-break:break-word}
.stat-icon{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--yellow-soft);color:var(--orange)}
.stat.primary .stat-icon{background:rgba(255,255,255,0.2);color:#fff}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;min-width:0}
.card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card-title{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;min-width:0}
.card-title i{color:var(--red);font-size:13px}
.card-body{padding:16px 18px;min-width:0}
.card-actions{display:flex;gap:6px;flex-wrap:wrap}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.table-wrap::-webkit-scrollbar{height:6px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.table{width:100%;border-collapse:collapse;min-width:520px}
.table th{text-align:left;font-size:10.5px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.6px;padding:10px 14px;background:#FAFAF9;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:10px 14px;border-bottom:1px solid var(--border-soft);font-size:13px;color:var(--text);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:#FAFAF9}
.table td strong{font-weight:600}

.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-success{background:var(--green-soft);color:#065F46}
.badge-warning{background:var(--yellow-soft);color:#92400E}
.badge-danger{background:var(--red-light);color:#991B1B}
.badge-blue{background:var(--blue-soft);color:#1E40AF}
.badge-gray{background:var(--border-soft);color:var(--text-mid)}
.badge-dot::before{content:'';width:6px;height:6px;background:currentColor;border-radius:50%}

.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin-bottom:12px}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--text-mid);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.4px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:7px;background:#fff;font-size:16px;color:var(--text);transition:all 0.12s;min-height:42px}
.form-group textarea{min-height:auto;font-size:14px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-light)}
.form-group input[readonly]{background:var(--border-soft);cursor:not-allowed}

.tabs-inner{display:flex;gap:4px;flex-wrap:nowrap;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs-inner::-webkit-scrollbar{display:none}
.tab-btn{padding:9px 14px;border-radius:7px 7px 0 0;border:1px solid transparent;border-bottom:none;background:transparent;font-weight:600;font-size:12.5px;color:var(--text-mid);cursor:pointer;transition:all 0.12s;margin-bottom:-1px;white-space:nowrap;flex-shrink:0}
.tab-btn:hover{color:var(--text);background:var(--border-soft)}
.tab-btn.active{background:#fff;color:var(--red);border-color:var(--border);border-bottom:1px solid #fff}

.pos-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pos-item{background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 10px;cursor:pointer;text-align:center;min-height:80px;display:flex;flex-direction:column;justify-content:center;transition:all 0.12s}
.pos-item:hover{border-color:var(--red);transform:translateY(-1px);box-shadow:0 4px 8px rgba(220,38,38,0.08)}
.pos-item.out-of-stock{opacity:0.4;cursor:not-allowed;pointer-events:none}
.pos-item-name{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.25;margin-bottom:4px}
.pos-item-price{font-size:13px;font-weight:700;color:var(--red)}
.pos-item-stock{font-size:10px;color:var(--text-light);font-weight:500;margin-top:3px}
.pos-cart{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;position:sticky;top:calc(var(--topbar-h) + 16px);max-height:calc(100vh - var(--topbar-h) - 32px);display:flex;flex-direction:column}
.pos-cart-items{min-height:120px;max-height:280px;overflow-y:auto;padding-right:4px;margin-bottom:12px}
.pos-line{display:flex;align-items:center;justify-content:space-between;background:#FAFAF9;padding:8px 10px;border-radius:7px;margin-bottom:6px;border:1px solid var(--border);gap:8px}
.pos-line-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.pos-line-name{font-size:12px;font-weight:600;color:var(--text);line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.pos-line-price{font-size:10px;color:var(--text-light);font-weight:500}
.pos-line-actions{display:flex;align-items:center;gap:3px;flex-shrink:0}
.qty-input{width:60px;padding:8px 8px;border:1px solid var(--border);border-radius:6px;font-size:15px;font-weight:700;text-align:center;color:var(--text);background:#fff;transition:all 0.12s}
.qty-input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-light)}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input[type=number]{-moz-appearance:textfield;appearance:textfield}
.remove-btn{background:transparent;border:none;color:var(--text-light);font-size:13px;cursor:pointer;padding:8px 10px;border-radius:6px;min-width:36px;min-height:36px}
.remove-btn:hover{background:var(--red-light);color:var(--red)}
.empty-cart{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-light);font-weight:500;gap:6px;padding:32px 0;font-size:12px;text-align:center}
.empty-cart i{font-size:28px;color:var(--border)}
.pos-summary{border-top:1px solid var(--border);padding-top:12px;margin-top:auto}
.summary-row{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px;color:var(--text-mid);font-weight:500;gap:8px}
.summary-total{font-size:16px;font-weight:700;color:var(--text);margin-top:6px;padding-top:8px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:8px}
.pay-btn{width:100%;background:var(--red);border:none;padding:12px;border-radius:8px;font-weight:600;font-size:14px;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;margin-top:10px;transition:all 0.12s;min-height:48px}
.pay-btn:hover:not(:disabled){background:var(--red-dark)}
.pay-btn:disabled{background:var(--border);color:var(--text-light);cursor:not-allowed}

.batch-card,.recipe-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:10px;transition:all 0.12s;min-width:0}
.batch-card{border-left:4px solid var(--text-light)}
.batch-card:hover,.recipe-card:hover{box-shadow:0 1px 3px rgba(0,0,0,0.08)}
.batch-card.status-dalam-proses{border-left-color:var(--yellow)}
.batch-card.status-selesai{border-left-color:var(--green)}
.batch-header,.recipe-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.batch-title,.recipe-name{font-weight:600;font-size:13px;display:flex;align-items:center;gap:6px;min-width:0;word-break:break-word}
.batch-meta,.recipe-meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:11.5px;color:var(--text-light);font-weight:500;margin-bottom:8px}
.batch-meta span,.recipe-meta span{display:inline-flex;align-items:center;gap:4px}
.batch-meta span i,.recipe-meta span i{color:var(--text-light)}
.recipe-desc{font-size:12px;color:var(--text-mid);margin-bottom:8px;line-height:1.4}

.progress-bar{height:6px;background:var(--border-soft);border-radius:3px;overflow:hidden;width:100%;margin-top:6px}
.progress-fill{height:100%;background:var(--red);border-radius:3px;transition:width 0.3s}
.chart-container{position:relative;height:clamp(200px,45vw,260px);width:100%}

.excel-bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center;background:var(--yellow-soft);padding:12px 14px;border-radius:9px;border:1px solid var(--yellow)}
.excel-bar label{font-size:12px;font-weight:700;color:#92400E}
.excel-bar input[type="month"]{padding:6px 10px;border-radius:6px;border:1px solid var(--border);font-weight:600;font-size:12px;background:#fff}

.view-only-banner{background:var(--blue-soft);border:1px solid var(--blue);border-radius:9px;padding:12px 16px;margin-bottom:16px;display:flex;gap:10px;align-items:flex-start}
.view-only-banner i{color:var(--blue);font-size:16px;flex-shrink:0;margin-top:2px}
.view-only-banner strong{color:#1E40AF;font-size:13px;font-weight:700;display:block;margin-bottom:2px}
.view-only-banner p{font-size:12px;color:#1E40AF;opacity:0.85}
.alert-box{background:var(--yellow-soft);border:1px solid var(--yellow);border-radius:8px;padding:12px 16px;margin-bottom:10px}
.alert-box.danger{background:var(--red-light);border-color:#FCA5A5}
.alert-box.info{background:var(--blue-soft);border-color:#93C5FD}
.alert-title{font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.alert-title i{font-size:12px;flex-shrink:0}
.alert-list{list-style:none;padding-left:16px;margin:0}
.alert-list li{font-size:12px;margin-bottom:4px;color:var(--text-mid)}
.alert-list li strong{color:var(--text)}

.modal-overlay{position:fixed;inset:0;background:rgba(28,25,23,0.5);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:8000;padding:20px;-webkit-overflow-scrolling:touch}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:12px;padding:24px;max-width:500px;width:100%;max-height:90vh;max-height:90dvh;overflow-y:auto;box-shadow:0 24px 48px rgba(0,0,0,0.2);-webkit-overflow-scrolling:touch}
.modal-wide{max-width:800px}
.modal-header{text-align:center;margin-bottom:20px}
.modal-icon{width:56px;height:56px;margin:0 auto 12px;background:var(--red-light);color:var(--red);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px}
.modal-title{font-size:clamp(15px,3vw,17px);font-weight:700;color:var(--text);margin-bottom:4px}
.modal-sub{font-size:12px;color:var(--text-light);word-break:break-word}
.receipt-line{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;color:var(--text-mid);gap:12px;align-items:baseline}
.receipt-line span:first-child{flex-shrink:0}
.receipt-line strong{color:var(--text);text-align:right;word-break:break-word}
.receipt-divider{border-top:1px dashed var(--border);margin:10px 0}
.receipt-total{font-size:15px;font-weight:700;color:var(--red);padding-top:8px;margin-top:8px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px}

.toast-message{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px) scale(0.95);background:#1C1917;color:#fff;padding:12px 20px;border-radius:10px;font-weight:500;font-size:13px;box-shadow:0 12px 24px rgba(0,0,0,0.2);opacity:0;transition:all 0.25s;pointer-events:none;z-index:9500;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast-message.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast-message i{color:var(--yellow);font-size:14px;flex-shrink:0}

.footer-note{text-align:center;padding:20px;font-size:11px;color:var(--text-light);font-weight:500}
.footer-note i{color:var(--red);margin:0 3px}

.content::-webkit-scrollbar,.pos-cart-items::-webkit-scrollbar,.modal::-webkit-scrollbar{width:6px;height:6px}
.content::-webkit-scrollbar-thumb,.pos-cart-items::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ============================================================
   OPTIMASI TAMPILAN MOBILE & TABLET (FIX TOTAL)
   ============================================================ */

/* 1. Penyesuaian Tablet & iPad */
@media(max-width:1024px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);transform:translateX(-100%);height:100vh;height:100dvh;z-index:300;box-shadow:8px 0 24px rgba(0,0,0,0.15)}
  .sidebar.open{transform:translateX(0)}
  .sidebar.collapsed{width:var(--sidebar-w)}
  .main{margin-left:0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .user-name,.user-role{display:none}
  .user-chip{padding:4px}
  .table{min-width: 600px;}
}

/* 2. Layar HP / Mobile (Lebar < 900px) */
@media(max-width:900px){
  /* FIX LAYAR LOGIN: Paksa jadi atas-bawah, bukan kiri-kanan */
  .login-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }
  .login-brand {
    padding: 30px 20px !important;
    flex: none !important;
  }
  .login-form-panel {
    padding: 30px 20px !important;
    flex: 1 !important;
  }
  
  /* FIX LAYOUT PRODUKSI DLL: Paksa jadi 1 kolom atas-bawah */
  .two-col, .pos-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .two-col > div, .pos-layout > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* FIX FORM: Agar tidak terpotong */
  .form-group input, .form-group select, .form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Mencegah zoom otomatis di iPhone */
    padding: 12px !important;
  }
  
  /* Tabel dibuat bisa digeser ke samping */
  .table-wrap { width: 100%; overflow-x: auto; }
  .table { min-width: 600px; }
  
  /* Sembunyikan status sheets agar header lega */
  .status-pill { display: none !important; }
  .topbar-title { font-size: 14px; }
  
  /* Modal jadi muncul dari bawah */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal { 
    max-width: 100% !important; 
    border-radius: 20px 20px 0 0 !important; 
    max-height: 90vh !important; 
    padding: 20px !important;
  }
}

/* 3. Layar HP Sangat Kecil / Fix Login Tanpa Scroll (Lebar < 480px) */
@media(max-width:480px){
  /* Kunci tinggi layar agar pas 100% (tanpa scroll) */
  .login-screen { padding: 0 !important; overflow: hidden !important; }
  
  .login-wrapper { 
    height: 100dvh !important; 
    min-height: 100dvh !important; 
    max-height: 100dvh !important;
    border-radius: 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    overflow: hidden !important;
  }

  /* Rampingkan Bagian Merah (Brand) */
  .login-brand { padding: 16px 20px !important; flex: 0 0 auto !important; }
  .login-brand-logo { width: 60px !important; height: 60px !important; margin-bottom: 8px !important; padding: 4px !important; border-radius: 12px !important; }
  .login-brand-logo i { font-size: 28px !important; }
  .login-brand h1 { font-size: 20px !important; margin-bottom: 2px !important; }
  .login-brand h1 span { font-size: 13px !important; }
  .login-brand p.tagline { font-size: 11px !important; margin-bottom: 8px !important; }
  .login-brand-badges, .login-brand-footer { display: none !important; }

  /* Rampingkan Bagian Putih (Form) */
  .login-form-panel { padding: 16px 20px 24px !important; flex: 1 !important; justify-content: flex-start !important; overflow-y: auto !important; }
  .login-form-panel .form-title { font-size: 18px !important; margin-bottom: 2px !important; }
  .login-form-panel .form-sub { font-size: 12px !important; margin-bottom: 12px !important; }

  /* Perkecil Kotak Peran */
  .role-grid { gap: 8px !important; margin-bottom: 16px !important; }
  .role-card { padding: 10px 6px !important; border-radius: 8px !important; }
  .role-icon { width: 32px !important; height: 32px !important; font-size: 14px !important; margin-bottom: 4px !important; border-radius: 8px !important; }
  .role-card h3 { font-size: 12px !important; margin-bottom: 0 !important; }
  .role-card p { display: none !important; }
  .role-card.selected::after { width: 14px !important; height: 14px !important; font-size: 8px !important; }

  /* Rampingkan Input Password & Tombol */
  .login-form-fields { padding-top: 12px !important; }
  .password-wrapper { margin-bottom: 8px !important; }
  .password-wrapper input { padding: 10px 40px 10px 12px !important; min-height: 40px !important; font-size: 14px !important; }
  .password-toggle { min-height: 32px !important; padding: 6px 10px !important; }
  .login-btn { min-height: 40px !important; padding: 10px !important; font-size: 14px !important; }
  .login-hint { margin-top: 8px !important; font-size: 10px !important; }

  /* Statistik & Grid Lainnya */
  .stats-grid { grid-template-columns: 1fr !important; }
  .pos-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .role-grid { grid-template-columns: 1fr !important; }
  .role-card { display: flex !important; text-align: left !important; gap: 12px !important; align-items: center !important; }
  .role-icon { margin: 0 !important; flex-shrink: 0 !important; }
  .btn { padding: 8px 12px !important; font-size: 12.5px !important; }
  .batch-card { padding: 12px !important; }
}

/* 4. Efek sentuhan di perangkat layar sentuh */
@media(hover:none){
  .nav-item:hover,.pos-item:hover,.btn:hover{transform:none}
  .batch-card:hover,.recipe-card:hover{box-shadow:none}
  .btn:active, .pos-item:active { transform: scale(0.96); }
}