*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7fb;color:#1f2937}.login-body{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.login-wrap{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.login-card{width:100%;max-width:420px;background:#fff;padding:26px;border-radius:20px;box-shadow:0 15px 40px rgba(37,99,235,.15)}.footer-note{font-size:12px;color:#6b7280;margin-top:12px;line-height:1.5}.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}.sidebar{background:#111827;color:#fff;padding:24px 18px}.brand{font-size:22px;font-weight:700;margin-bottom:8px}.brand-sub{font-size:13px;color:#cbd5e1;margin-bottom:28px}.menu a{display:block;text-decoration:none;margin-bottom:10px;padding:14px 16px;border-radius:12px;color:#e5e7eb;font-size:14px;font-weight:600}.menu a.active,.menu a:hover{background:#2563eb;color:#fff}.role-box{margin-top:28px;background:#1f2937;padding:14px;border-radius:14px;font-size:13px;line-height:1.5}.main{padding:24px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border-radius:18px;padding:18px 22px;box-shadow:0 8px 24px rgba(0,0,0,.06);margin-bottom:22px;flex-wrap:wrap}.topbar h1{margin:0 0 6px;font-size:26px}.topbar p{margin:0;color:#6b7280;font-size:14px}.topbar-actions,.inline-flex,.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.input,.select,.textarea{width:100%;padding:11px 12px;border:1px solid #d1d5db;border-radius:10px;background:#fff;font-family:inherit}.textarea{min-height:90px}.file-input{max-width:220px;padding:8px;border:1px solid #d1d5db;border-radius:10px;background:#fff}.btn{display:inline-block;border:0;background:#2563eb;color:#fff;padding:11px 16px;border-radius:10px;cursor:pointer;font-weight:600;text-decoration:none}.btn.secondary{background:#0f172a}.btn.gray{background:#64748b}.btn.red{background:#dc2626}.btn.green{background:#16a34a}.btn.small{padding:8px 12px;font-size:12px}.full-btn{width:100%;margin-top:18px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.card,.panel{background:#fff;border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(0,0,0,.05)}.panel{margin-bottom:18px}.panel-soft{background:#f8fafc}.stat-title{color:#6b7280;font-size:14px;margin-bottom:10px}.stat-value{font-size:24px;font-weight:700;color:#111827}.panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.panel-title{margin:0;font-size:20px}.panel-sub{margin:4px 0 0;color:#6b7280;font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{border-bottom:1px solid #e5e7eb;padding:12px 10px;text-align:left;vertical-align:top}th{background:#f8fafc;font-size:13px;color:#475569}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-group label{display:block;margin-bottom:6px;font-size:13px;font-weight:700}.full{grid-column:1/-1}.tag{display:inline-block;background:#dbeafe;color:#1d4ed8;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}.muted{color:#6b7280}.alert{padding:12px 14px;border-radius:12px;margin-bottom:16px}.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}.mobile-top{display:none;align-items:center;gap:10px;padding:14px;background:#111827;color:#fff;position:sticky;top:0;z-index:20}.menu-toggle{border:0;background:#2563eb;color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer}.inline{display:inline}.product-preview{background:#fff;border:1px solid #d1d5db;border-radius:10px;padding:12px;line-height:1.7}.product-preview b{display:inline-block;min-width:110px}@media (max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}.app{grid-template-columns:1fr}.mobile-top{display:flex}.sidebar{position:fixed;top:0;left:-280px;width:260px;height:100vh;z-index:30;transition:left .25s ease}.sidebar.open{left:0}.main{padding:14px}.topbar h1{font-size:22px}}@media (max-width:640px){.grid-4,.form-grid{grid-template-columns:1fr}.file-input{max-width:100%}}
.hint-box{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;padding:12px 14px;border-radius:12px;margin-bottom:16px}

.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.page-link{display:inline-block;padding:8px 12px;border-radius:10px;background:#e2e8f0;color:#0f172a;text-decoration:none;font-weight:700}.page-link.active{background:#2563eb;color:#fff}

.chart-wrap{overflow:auto}.chart-bars{display:flex;align-items:flex-end;gap:12px;min-height:240px;padding:12px 4px}.bar-col{display:flex;flex-direction:column;align-items:center;min-width:72px}.bar{width:42px;border-radius:10px 10px 0 0;background:#2563eb}.bar-label{margin-top:8px;font-size:12px;color:#475569}.bar-value{font-size:11px;color:#0f172a;margin-bottom:8px;text-align:center}.inline{display:inline-block;margin-right:6px}

.stock-alert-panel{background:#fff7ed}.alert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.stock-card{background:#fff;border:1px solid #fed7aa;border-radius:12px;padding:12px}.stock-badge{display:inline-block;background:#dc2626;color:#fff;padding:2px 8px;border-radius:999px;font-weight:700}.bar-profit{background:#16a34a}

.dark-mode{background:#0f172a;color:#e5e7eb}
.dark-mode .mobile-top,.dark-mode .sidebar{background:#020617}
.dark-mode .card,.dark-mode .panel,.dark-mode .topbar,.dark-mode .login-card{background:#111827;color:#e5e7eb;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.dark-mode .panel-soft{background:#1f2937}
.dark-mode .input,.dark-mode .select,.dark-mode .textarea,.dark-mode .file-input{background:#0f172a;color:#e5e7eb;border-color:#334155}
.dark-mode .muted,.dark-mode .panel-sub,.dark-mode .stat-title,.dark-mode .topbar p,.dark-mode .footer-note{color:#94a3b8}
.dark-mode table th{background:#1e293b;color:#cbd5e1}
.dark-mode th,.dark-mode td{border-bottom-color:#334155}
.dark-mode .product-preview,.dark-mode .stock-card{background:#0f172a;border-color:#475569;color:#e5e7eb}
.dark-mode .page-link{background:#334155;color:#e5e7eb}
.dark-mode .tag{background:#1e3a8a;color:#dbeafe}
.dark-mode .hint-box{background:#3f2b13;color:#fed7aa;border-color:#ea580c}

.restore-note{font-size:12px;color:#64748b}

.hero-panel{display:grid;grid-template-columns:1.5fr .8fr;gap:18px;background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;border-radius:24px;padding:24px;margin-bottom:20px;box-shadow:0 20px 40px rgba(29,78,216,.18)}
.hero-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85;margin-bottom:8px}
.hero-panel h2{margin:0 0 10px;font-size:30px;line-height:1.15}
.hero-panel p{margin:0;color:#dbeafe;max-width:720px}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-badge{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:12px;font-weight:700}
.hero-metrics{display:grid;grid-template-columns:1fr;gap:12px}
.mini-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px}
.mini-stat-label{font-size:13px;color:#cbd5e1}
.mini-stat-value{font-size:30px;font-weight:800;margin-top:10px}
.finance-panel{background:linear-gradient(180deg,#ffffff,#f8fbff)}
.finance-chart-wrap{padding-top:8px}
.finance-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:#475569}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px}
.legend-income{background:#2563eb}
.legend-expense{background:#f97316}
.legend-profit{background:#16a34a}
.finance-chart{display:flex;align-items:flex-end;gap:18px;overflow:auto;padding:20px 6px 8px;min-height:260px;border-top:1px solid #e2e8f0}
.finance-group{display:flex;flex-direction:column;align-items:center;min-width:86px}
.finance-bars{display:flex;align-items:flex-end;gap:7px;height:200px}
.finance-bar{width:18px;border-radius:10px 10px 0 0;box-shadow:0 8px 16px rgba(15,23,42,.12)}
.finance-bar.income{background:#2563eb}
.finance-bar.expense{background:#f97316}
.finance-bar.profit{background:#16a34a}
.finance-label{margin-top:10px;font-size:12px;color:#475569;font-weight:700}
.elevated-table table{background:#fff;border-radius:14px;overflow:hidden}
.elevated-table th{position:sticky;top:0}
.dark-mode .hero-panel{background:linear-gradient(135deg,#020617,#1e3a8a)}
.dark-mode .hero-panel p{color:#cbd5e1}
.dark-mode .mini-stat{background:rgba(255,255,255,.05)}
.dark-mode .finance-panel{background:linear-gradient(180deg,#111827,#0f172a)}
.dark-mode .finance-chart{border-top-color:#334155}
.dark-mode .finance-legend,.dark-mode .finance-label{color:#cbd5e1}
@media (max-width:1024px){
  .hero-panel{grid-template-columns:1fr}
  .hero-panel h2{font-size:24px}
}

.best-product-panel{background:linear-gradient(180deg,#fff,#f8fbff)}
.best-product-list{display:grid;gap:12px}
.best-product-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 10px 24px rgba(15,23,42,.06)}
.best-rank{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.best-info{flex:1}
.best-name{font-weight:800;font-size:15px;color:#0f172a}
.best-meta{font-size:12px;color:#64748b;margin-top:4px}
.best-qty{min-width:54px;text-align:center;padding:8px 10px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-weight:800}
.best-product-item.rank-1 .best-rank{background:linear-gradient(135deg,#f59e0b,#f97316)}
.best-product-item.rank-2 .best-rank{background:linear-gradient(135deg,#64748b,#334155)}
.best-product-item.rank-3 .best-rank{background:linear-gradient(135deg,#a16207,#ca8a04)}
.dark-mode .best-product-panel{background:linear-gradient(180deg,#111827,#0f172a)}
.dark-mode .best-product-item{background:#0f172a;border-color:#334155}
.dark-mode .best-name{color:#e5e7eb}
.dark-mode .best-meta{color:#94a3b8}
.dark-mode .best-qty{background:#1e3a8a;color:#dbeafe}

.hero-logo-wrap{margin-bottom:14px}.hero-logo{max-width:120px;max-height:64px;object-fit:contain;background:#fff;border-radius:14px;padding:8px;box-shadow:0 8px 18px rgba(15,23,42,.15)}
.best-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.best-progress{width:100%;height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin-top:10px}
.best-progress-bar{height:100%;border-radius:999px}
.best-progress-bar.rank-1{background:linear-gradient(90deg,#f59e0b,#f97316)}
.best-progress-bar.rank-2{background:linear-gradient(90deg,#64748b,#334155)}
.best-progress-bar.rank-3{background:linear-gradient(90deg,#ca8a04,#a16207)}
.best-progress-bar.rank-4{background:linear-gradient(90deg,#2563eb,#1d4ed8)}
.best-progress-bar.rank-5{background:linear-gradient(90deg,#16a34a,#15803d)}
.best-product-item.rank-4 .best-rank{background:linear-gradient(135deg,#2563eb,#1d4ed8)}
.best-product-item.rank-5 .best-rank{background:linear-gradient(135deg,#16a34a,#15803d)}
.dark-mode .hero-logo{background:#fff}
.dark-mode .best-progress{background:#334155}

.soft-sep{border:0;border-top:1px solid #e5e7eb;margin:16px 0}
.logo-preview-box{margin-top:14px;padding:14px;border:1px dashed #cbd5e1;border-radius:16px;background:#fff}
.settings-logo-preview{max-width:180px;max-height:90px;object-fit:contain;margin-top:8px}
.dark-mode .logo-preview-box{background:#0f172a;border-color:#334155}

.sidebar-actions{margin-top:14px}
.sidebar-logout-btn{display:block;text-decoration:none;text-align:center;padding:14px 16px;border-radius:16px;background:#dc2626;color:#fff;font-weight:800}
.dashboard-header-clean{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border-radius:20px;padding:18px 20px;margin-bottom:20px;box-shadow:0 8px 24px rgba(15,23,42,.06);flex-wrap:wrap}
.dashboard-header-left{display:flex;align-items:center;gap:14px}
.dashboard-logo-clean{width:58px;height:58px;object-fit:contain;border-radius:14px;background:#fff;padding:6px;box-shadow:0 4px 12px rgba(15,23,42,.08)}
.dashboard-header-left h2{margin:0;font-size:24px;color:#0f172a}
.dashboard-header-left p{margin:4px 0 0;color:#64748b}
.dashboard-header-right{display:flex;gap:10px;flex-wrap:wrap}
.dashboard-chip{padding:10px 14px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-weight:700;font-size:13px}
.dashboard-chip.warning{background:#ffedd5;color:#c2410c}
.hero-panel,.hero-copy,.hero-badges,.hero-metrics{display:none !important}
.panel-sub:empty{display:none}
.dark-mode .dashboard-header-clean{background:#111827}
.dark-mode .dashboard-header-left h2{color:#e5e7eb}
.dark-mode .dashboard-header-left p{color:#94a3b8}

.service-grid{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:18px}
.service-form-panel{position:sticky;top:18px}
.service-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 16px}
.service-preview div{padding:14px 16px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.service-preview span{display:block;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.08em}
.service-preview strong{display:block;margin-top:8px;font-size:22px;color:#0f172a}
.service-summary-panel{background:transparent;box-shadow:none;border:none;padding:0}
.service-filter-panel{margin-top:16px}
@media (max-width:1200px){
  .service-grid{grid-template-columns:1fr}
  .service-form-panel{position:static}
}
.dark-mode .service-preview div{background:#0f172a;border-color:#1e293b}
.dark-mode .service-preview span{color:#94a3b8}
.dark-mode .service-preview strong{color:#e5e7eb}

.service-report-strip{margin-bottom:16px}
.service-report-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.service-report-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:14px 16px;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.service-report-top{display:flex;align-items:center;gap:10px}
.service-report-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;background:#f8fafc}
.service-report-name{font-weight:800;color:#0f172a}
.service-report-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.service-report-stats span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#64748b}
.service-report-stats strong{display:block;margin-top:6px;font-size:16px;color:#0f172a}
.service-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-weight:800;font-size:12px}
.service-badge-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:rgba(255,255,255,.5)}
.service-badge.transfer,.service-report-card.transfer{background:#eff6ff;border-color:#bfdbfe}
.service-badge.transfer{color:#1d4ed8}
.service-badge.tarik,.service-report-card.tarik{background:#fff7ed;border-color:#fed7aa}
.service-badge.tarik{color:#c2410c}
.service-badge.setor,.service-report-card.setor{background:#f0fdf4;border-color:#bbf7d0}
.service-badge.setor{color:#15803d}
.service-badge.ewallet,.service-report-card.ewallet{background:#faf5ff;border-color:#e9d5ff}
.service-badge.ewallet{color:#7e22ce}
.service-badge.admin,.service-report-card.admin{background:#f8fafc;border-color:#cbd5e1}
.service-badge.admin{color:#334155}
.service-badge.default,.service-report-card.default{background:#f8fafc;border-color:#e2e8f0;color:#334155}
.service-report-table-panel{margin-top:16px}
@media (max-width:1200px){
  .service-report-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .service-report-cards{grid-template-columns:1fr}
}
.dark-mode .service-report-card{background:#0f172a;border-color:#1e293b}
.dark-mode .service-report-name,.dark-mode .service-report-stats strong{color:#e5e7eb}
.dark-mode .service-report-stats span{color:#94a3b8}
.dark-mode .service-report-icon{background:#111827}
.dark-mode .service-badge.transfer,.dark-mode .service-report-card.transfer{background:#082f49;border-color:#0ea5e9}
.dark-mode .service-badge.tarik,.dark-mode .service-report-card.tarik{background:#431407;border-color:#ea580c}
.dark-mode .service-badge.setor,.dark-mode .service-report-card.setor{background:#052e16;border-color:#16a34a}
.dark-mode .service-badge.ewallet,.dark-mode .service-report-card.ewallet{background:#3b0764;border-color:#a855f7}
.dark-mode .service-badge.admin,.dark-mode .service-report-card.admin{background:#111827;border-color:#475569}

.service-separate-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.service-kpi{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:14px 16px;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.service-kpi span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:800}
.service-kpi strong{display:block;margin-top:8px;font-size:24px;color:#0f172a}
.service-kpi.success{background:#f0fdf4;border-color:#bbf7d0}
.service-kpi.success strong{color:#15803d}
.service-daily-chart-panel{margin-top:16px}
.service-daily-chart{display:flex;align-items:flex-end;gap:14px;overflow:auto;padding:18px 6px 6px;min-height:220px}
.service-daily-col{display:flex;flex-direction:column;align-items:center;min-width:72px}
.service-daily-value{font-size:11px;color:#0f172a;margin-bottom:8px;text-align:center}
.service-daily-bar{width:34px;background:linear-gradient(180deg,#2563eb,#1d4ed8);border-radius:10px 10px 0 0;box-shadow:0 8px 16px rgba(37,99,235,.15)}
.service-daily-label{margin-top:8px;font-size:12px;color:#64748b;font-weight:700}
@media (max-width:900px){
  .service-separate-strip{grid-template-columns:1fr}
}
.dark-mode .service-kpi{background:#0f172a;border-color:#1e293b}
.dark-mode .service-kpi span,.dark-mode .service-daily-label{color:#94a3b8}
.dark-mode .service-kpi strong,.dark-mode .service-daily-value{color:#e5e7eb}
.dark-mode .service-kpi.success{background:#052e16;border-color:#166534}

.split-business-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.split-business-card{border-radius:22px;padding:18px 20px;color:#fff;box-shadow:0 12px 28px rgba(15,23,42,.08)}
.split-business-card.produk{background:linear-gradient(135deg,#1d4ed8,#2563eb)}
.split-business-card.jasa{background:linear-gradient(135deg,#15803d,#16a34a)}
.split-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.85);font-weight:800}
.split-amount{font-size:28px;font-weight:900;line-height:1.1;margin-top:8px}
.split-meta{margin-top:8px;font-size:13px;color:rgba(255,255,255,.88)}
.owner-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;margin-top:18px}
.owner-mix-chart{display:flex;align-items:flex-end;gap:18px;overflow:auto;padding:16px 6px 6px;min-height:240px}
.owner-mix-col{display:flex;flex-direction:column;align-items:center;min-width:82px}
.owner-mix-bars{display:flex;align-items:flex-end;gap:8px;height:190px}
.owner-mix-bar{width:18px;border-radius:10px 10px 0 0}
.owner-mix-bar.produk{background:#2563eb}
.owner-mix-bar.jasa{background:#16a34a}
.owner-mix-label{margin-top:10px;font-size:12px;color:#64748b;font-weight:700}
.owner-ranking-list{display:grid;gap:10px}
.owner-rank-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid #e2e8f0}
.owner-rank-item.jasa{background:#f0fdf4;border-color:#bbf7d0}
.owner-rank-no{width:38px;height:38px;border-radius:12px;background:#eef2ff;color:#1d4ed8;display:flex;align-items:center;justify-content:center;font-weight:900}
.owner-rank-info{flex:1;display:flex;flex-direction:column}
.owner-rank-info strong{color:#0f172a}
.owner-rank-info span{font-size:12px;color:#64748b;margin-top:4px}
.owner-rank-value{font-weight:800;color:#0f172a}
@media (max-width:1100px){
  .owner-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .split-business-strip{grid-template-columns:1fr}
}
.dark-mode .owner-rank-item{background:#0f172a;border-color:#1e293b}
.dark-mode .owner-rank-item.jasa{background:#052e16;border-color:#166534}
.dark-mode .owner-rank-info strong,.dark-mode .owner-rank-value{color:#e5e7eb}
.dark-mode .owner-rank-info span,.dark-mode .owner-mix-label{color:#94a3b8}
.dark-mode .owner-rank-no{background:#1e293b;color:#93c5fd}

.owner-filter-panel{margin:16px 0 18px}

/* UX responsive patch */
.sidebar-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:.2s ease;z-index:40}
.sidebar-overlay.show{opacity:1;pointer-events:auto}
.sidebar-close-btn{display:none;margin-left:auto;width:38px;height:38px;border:none;border-radius:12px;background:#e2e8f0;color:#0f172a;font-size:24px;line-height:1;cursor:pointer}
.cashier-helper-box,.service-helper-box{margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-weight:600;font-size:13px}
.table-wrap{overflow:auto}
table{min-width:820px}
.input,.select,.textarea,.file-input{width:100%;box-sizing:border-box}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-group.full{grid-column:1/-1}
.pos-grid,.service-grid{align-items:start}
.mobile-top{display:none;position:sticky;top:0;z-index:30;align-items:center;gap:12px;padding:12px 14px;background:#fff;border-bottom:1px solid #e2e8f0}
.mobile-top-title{font-weight:800;color:#0f172a}
.menu-toggle{width:42px;height:42px;border:none;border-radius:12px;background:#0f172a;color:#fff;font-size:20px;cursor:pointer}
body.sidebar-open{overflow:hidden}
@media (max-width:1024px){
  .mobile-top{display:flex}
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-105%);transition:.22s ease;z-index:50;width:290px;max-width:88vw;overflow:auto}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close-btn{display:inline-flex;align-items:center;justify-content:center}
  .main{padding-top:12px}
  .form-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-header-clean,.topbar,.panel,.card{border-radius:18px}
  .cashier-action-row{display:grid;grid-template-columns:1fr}
  .cashier-submit-btn,.cashier-reset-btn{width:100%}
}
@media (max-width:640px){
  .grid-4{grid-template-columns:1fr}
  .service-preview{grid-template-columns:1fr}
  .pos-summary-box,.service-summary-panel .pos-summary-box{padding:18px}
  .cashier-display-screen{font-size:28px}
  .stat-value,.split-amount{font-size:26px}
}
.dark-mode .mobile-top{background:#020617;border-bottom-color:#1e293b}
.dark-mode .sidebar-close-btn{background:#1e293b;color:#e5e7eb}
.dark-mode .cashier-helper-box,.dark-mode .service-helper-box{background:#082f49;border-color:#0ea5e9;color:#bae6fd}


.live-search-results{
  display:none;
  margin-top:8px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.live-search-item{
  width:100%;
  border:none;
  background:#fff;
  padding:10px 12px;
  text-align:left;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  border-bottom:1px solid #e2e8f0;
}
.live-search-item:last-child{border-bottom:none}
.live-search-item:hover{background:#eff6ff}
.live-search-id{
  font-weight:800;
  color:#1d4ed8;
  font-size:12px;
}
.live-search-name{
  color:#0f172a;
  font-size:13px;
  margin-top:2px;
}
.live-search-empty{
  padding:10px 12px;
  color:#64748b;
  font-size:13px;
}
.dark-mode .live-search-results{
  background:#0f172a;
  border-color:#334155;
}
.dark-mode .live-search-item{
  background:#0f172a;
  border-bottom-color:#334155;
}
.dark-mode .live-search-item:hover{
  background:#111827;
}
.dark-mode .live-search-id{color:#93c5fd}
.dark-mode .live-search-name{color:#e5e7eb}
.dark-mode .live-search-empty{color:#94a3b8}

.recent-sales-panel,.recent-service-panel{margin-bottom:16px}
.fee-table-wrap{margin-top:8px}
.fee-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.fee-table th{background:#0f172a;color:#fff;padding:8px;text-align:left}
.fee-table td{padding:6px 8px;border-bottom:1px solid #e2e8f0}
.fee-table tr:nth-child(even) td{background:#f8fafc}
.dark-mode .fee-table th{background:#1e293b}
.dark-mode .fee-table td{border-color:#334155}
.dark-mode .fee-table tr:nth-child(even) td{background:#111827}

.clickable-history-row{cursor:pointer;transition:.15s ease}
.clickable-history-row:hover td{background:#eff6ff !important}
.recent-highlight-row td{background:#dcfce7 !important;font-weight:700}
.duplicate-warning-box{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#fef2f2;border:1px solid #fca5a5;color:#b91c1c;font-weight:700}
.dark-mode .clickable-history-row:hover td{background:#111827 !important}
.dark-mode .recent-highlight-row td{background:#14532d !important;color:#e5e7eb}
.dark-mode .duplicate-warning-box{background:#450a0a;border-color:#ef4444;color:#fecaca}


/* FINAL CLEAN MODERN UI PATCH */
:root{
  --ui-bg:#f6f8fc;
  --ui-card:#ffffff;
  --ui-card-soft:#f8fafc;
  --ui-border:#e2e8f0;
  --ui-text:#0f172a;
  --ui-muted:#64748b;
  --ui-primary:#2563eb;
  --ui-primary-soft:#eff6ff;
  --ui-success:#16a34a;
  --ui-warning:#f59e0b;
  --ui-danger:#dc2626;
  --ui-shadow:0 10px 24px rgba(15,23,42,.06);
  --ui-radius:18px;
}

html,body{
  background:var(--ui-bg);
  color:var(--ui-text);
}

body{
  line-height:1.45;
}

.main{
  padding:20px;
}

.topbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);
  border:1px solid var(--ui-border);
  border-radius:22px;
  padding:18px 20px;
  box-shadow:var(--ui-shadow);
}

.topbar h1{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.03em;
  margin:0 0 6px;
}

.topbar p{
  color:var(--ui-muted);
  margin:0;
}

.sidebar{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border-right:1px solid var(--ui-border);
}

.brand{
  font-size:24px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ui-text);
}

.brand-sub{
  color:var(--ui-muted);
}

.menu a{
  border-radius:14px;
  padding:14px 15px;
  font-weight:800;
  color:#334155;
  transition:.16s ease;
}

.menu a:hover,
.menu a.active{
  background:var(--ui-primary-soft);
  color:var(--ui-primary);
}

.role-box{
  background:#fff;
  border:1px solid var(--ui-border);
  border-radius:16px;
  color:#475569;
}

.sidebar-logout-btn{
  border-radius:14px;
  font-weight:800;
}

.panel,
.card,
.login-card{
  background:var(--ui-card);
  border:1px solid var(--ui-border);
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow);
}

.panel{
  padding:16px;
}

.panel-soft{
  background:var(--ui-card-soft);
}

.panel-title,
.panel h4{
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--ui-text);
}

.panel-sub,
.muted,
.footer-note{
  color:var(--ui-muted);
}

.grid-4{
  gap:16px;
}

.grid-4 .card{
  position:relative;
  overflow:hidden;
  padding:18px;
}

.grid-4 .card::after{
  content:"";
  position:absolute;
  right:-20px;
  bottom:-25px;
  width:90px;
  height:90px;
  border-radius:999px;
  background:rgba(37,99,235,.06);
}

.grid-4 .card:nth-child(2)::after{background:rgba(22,163,74,.08)}
.grid-4 .card:nth-child(3)::after{background:rgba(245,158,11,.10)}
.grid-4 .card:nth-child(4)::after{background:rgba(15,23,42,.05)}

.stat-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ui-muted);
  font-weight:800;
}

.stat-value{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ui-text);
}

.dashboard-header-clean,
.dashboard-header-clean.launch-ready{
  background:#fff;
  border:1px solid var(--ui-border);
  border-radius:22px;
  box-shadow:var(--ui-shadow);
  padding:18px 20px;
}

.dashboard-header-left h2{
  margin:0;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.03em;
}

.dashboard-header-left p{
  margin:4px 0 0;
  color:var(--ui-muted);
  font-weight:600;
}

.dashboard-logo-clean,
.hero-logo,
.settings-logo-preview{
  border-radius:16px;
  object-fit:contain;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
}

.dashboard-chip{
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:var(--ui-primary-soft);
  color:var(--ui-primary);
  font-weight:800;
}

.dashboard-chip.warning{
  background:#fff7ed;
  color:#c2410c;
}

.split-business-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:16px;
}

.split-business-card{
  color:#fff;
  border-radius:20px;
  padding:18px 20px;
  box-shadow:0 16px 30px rgba(15,23,42,.08);
}

.split-business-card.produk{
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
}

.split-business-card.jasa{
  background:linear-gradient(135deg,#15803d,#16a34a);
}

.split-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.9);
  font-weight:800;
}

.split-amount{
  font-size:28px;
  font-weight:900;
  margin-top:8px;
}

.split-meta{
  margin-top:8px;
  color:rgba(255,255,255,.88);
  font-size:13px;
}

.input,.select,.textarea,.file-input{
  width:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #dbe3ee;
  border-radius:14px;
  padding:12px 14px;
  color:var(--ui-text);
  font-size:14px;
}

.input:focus,.select:focus,.textarea:focus,.file-input:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.form-group.full{
  grid-column:1/-1;
}

.form-group label{
  color:var(--ui-muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:800;
}

.btn{
  border-radius:14px;
  font-weight:800;
  padding:11px 15px;
  box-shadow:none;
}

.btn.gray{background:#e2e8f0;color:#0f172a}
.btn.secondary{background:#0f172a}
.btn.green{background:#16a34a}
.btn.red{background:#dc2626}
.btn.small{border-radius:12px;padding:8px 10px}

.cashier-submit-btn{
  font-size:15px;
  font-weight:900;
}

.cashier-action-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cashier-helper-box,
.service-helper-box,
.pos-tip{
  background:#eff6ff;
  border:1px solid #bfdbfe;
  color:#1d4ed8;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  margin-bottom:14px;
}

.product-preview,
.logo-preview-box,
.stock-card,
.best-product-item,
.owner-rank-item,
.service-report-card{
  border-radius:16px;
}

.product-preview{
  border:1px solid #dbe7ff;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
}

.table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid var(--ui-border);
  border-radius:16px;
  background:#fff;
}

table{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

th{
  background:#f8fafc;
  color:#475569;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

th,td{
  padding:12px 10px;
  border-bottom:1px solid var(--ui-border);
}

tr:last-child td{
  border-bottom:none;
}

tbody tr:hover td{
  background:#fafcff;
}

.fee-table{
  min-width:520px;
}

.pos-grid,
.service-grid{
  display:grid;
  grid-template-columns:minmax(320px,420px) 1fr;
  gap:18px;
  align-items:start;
}

.pos-form-panel,
.service-form-panel{
  position:sticky;
  top:18px;
}

.pos-summary-box{
  border-radius:22px;
  padding:22px;
  background:linear-gradient(135deg,#0f172a,#1d4ed8);
  color:#fff;
  box-shadow:0 18px 36px rgba(29,78,216,.16);
}

.cashier-display-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#cbd5e1;
  font-weight:800;
}

.cashier-display-screen{
  background:#020617;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:18px 16px;
  margin-top:10px;
  text-align:right;
  font-size:34px;
  font-weight:900;
  color:#86efac;
  letter-spacing:-.03em;
}

.cashier-sub-display{
  margin-top:12px;
  color:#dbeafe;
  font-size:13px;
}

.pagination{
  justify-content:flex-end;
}

.page-link{
  min-width:40px;
  text-align:center;
  border-radius:12px;
}

.sidebar-overlay{
  z-index:40;
}

.mobile-top{
  display:none;
  position:sticky;
  top:0;
  z-index:30;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:#fff;
  border-bottom:1px solid var(--ui-border);
}

.mobile-top-title{
  font-weight:900;
  color:var(--ui-text);
}

.menu-toggle{
  width:42px;
  height:42px;
  border:none;
  border-radius:12px;
  background:#0f172a;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

@media (max-width:1024px){
  .mobile-top{display:flex}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:290px;
    max-width:88vw;
    transform:translateX(-105%);
    transition:.22s ease;
    z-index:50;
    overflow:auto;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-close-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
  }
  .main{padding:14px}
  .form-grid{grid-template-columns:1fr}
  .pos-grid,.service-grid{grid-template-columns:1fr}
  .pos-form-panel,.service-form-panel{position:static}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cashier-action-row{display:grid;grid-template-columns:1fr}
  .cashier-action-row .btn{width:100%}
  table{min-width:680px}
}

@media (max-width:640px){
  .grid-4{grid-template-columns:1fr}
  .split-business-strip{grid-template-columns:1fr}
  .service-preview{grid-template-columns:1fr}
  .cashier-display-screen{font-size:28px}
  .topbar h1{font-size:24px}
  .dashboard-header-left h2{font-size:24px}
  .stat-value,.split-amount{font-size:26px}
  .panel,.card,.topbar,.dashboard-header-clean{border-radius:18px}
  table{min-width:620px}
}

/* dark mode */
.dark-mode,
.dark-mode body{
  background:#020617;
  color:#e5e7eb;
}

.dark-mode .sidebar{
  background:linear-gradient(180deg,#020617,#081120);
  border-right-color:#1e293b;
}

.dark-mode .brand,
.dark-mode .dashboard-header-left h2,
.dark-mode .panel-title,
.dark-mode .panel h4,
.dark-mode .stat-value{
  color:#e5e7eb;
}

.dark-mode .brand-sub,
.dark-mode .panel-sub,
.dark-mode .muted,
.dark-mode .footer-note,
.dark-mode .dashboard-header-left p,
.dark-mode .form-group label,
.dark-mode .stat-title{
  color:#94a3b8;
}

.dark-mode .topbar,
.dark-mode .dashboard-header-clean,
.dark-mode .card,
.dark-mode .panel,
.dark-mode .login-card,
.dark-mode .table-wrap,
.dark-mode .mobile-top{
  background:#0f172a;
  border-color:#1e293b;
  box-shadow:none;
}

.dark-mode .menu a{color:#cbd5e1}
.dark-mode .menu a:hover,
.dark-mode .menu a.active{
  background:#1e293b;
  color:#93c5fd;
}

.dark-mode .role-box{
  background:#111827;
  border-color:#1e293b;
  color:#cbd5e1;
}

.dark-mode .input,
.dark-mode .select,
.dark-mode .textarea,
.dark-mode .file-input{
  background:#0f172a;
  border-color:#334155;
  color:#e5e7eb;
}

.dark-mode th{
  background:#111827;
  color:#cbd5e1;
}

.dark-mode th,
.dark-mode td{
  border-bottom-color:#334155;
}

.dark-mode tbody tr:hover td{
  background:#111827;
}

.dark-mode .btn.gray{
  background:#1e293b;
  color:#e5e7eb;
}

.dark-mode .menu-toggle{
  background:#1e293b;
}

.dark-mode .cashier-helper-box,
.dark-mode .service-helper-box,
.dark-mode .pos-tip{
  background:#082f49;
  border-color:#0ea5e9;
  color:#bae6fd;
}

/* Premium login */
.login-page{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(22,163,74,.16), transparent 26%),
    linear-gradient(180deg,#f8fbff,#eef4ff);
}
.login-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:28px;
  padding:28px;
}
.login-hero{
  padding:28px;
}
.login-hero-badge{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:#dbeafe;
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.login-hero h1{
  margin:16px 0 10px;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-.04em;
  color:#0f172a;
}
.login-hero p{
  margin:0;
  max-width:620px;
  font-size:16px;
  color:#475569;
}
.login-hero-points{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.login-hero-points span{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  font-weight:800;
  color:#334155;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.login-card{
  max-width:460px;
  width:100%;
  margin-left:auto;
  padding:26px;
  border-radius:24px;
}
.login-card h2{
  font-size:28px;
  font-weight:900;
  letter-spacing:-.03em;
  margin-bottom:6px;
}
.login-card p{
  color:#64748b;
}
.login-card .btn{
  width:100%;
  padding:14px 16px;
  font-size:15px;
}
@media (max-width:980px){
  .login-shell{
    grid-template-columns:1fr;
    padding:18px;
  }
  .login-hero{
    padding:8px 4px;
  }
  .login-hero h1{
    font-size:32px;
  }
  .login-card{
    margin:0 auto;
  }
}
@media (max-width:640px){
  .login-hero h1{
    font-size:28px;
  }
  .login-hero p{
    font-size:14px;
  }
}

/* Professional receipt */
.receipt{
  border:1px dashed #cbd5e1;
  border-radius:6px;
  padding:10px 10px 12px;
}
.line.double{
  border-top:2px double #000;
  margin:8px 0;
}
.receipt .big{
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
}
.receipt .small{
  font-size:11px;
  line-height:1.4;
}
.receipt table{
  min-width:0;
  width:100%;
  font-size:12px;
}
.receipt td{
  padding:3px 0;
  border:none;
}
.receipt .center{
  text-align:center;
}
@media print{
  body{
    background:#fff !important;
  }
  .receipt{
    border:none;
    box-shadow:none;
  }
}

/* POLISH JASA + TRANSAKSI + LOGIN */
.login-page{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.20), transparent 26%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.16), transparent 22%),
    linear-gradient(180deg,#f8fbff,#eef4ff);
}
.login-shell{gap:32px}
.login-card{
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 20px 45px rgba(15,23,42,.10);
}
.login-card .btn{
  box-shadow:0 12px 24px rgba(37,99,235,.18);
}
.pos-form-panel,
.service-form-panel{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid #e2e8f0;
}
.pos-form-panel h4,
.service-form-panel h4{
  font-size:22px;
}
.cashier-helper-box,
.service-helper-box,
.pos-tip{
  border-radius:16px;
  padding:14px 16px;
}
.product-preview{
  border:1px solid #dbeafe;
  background:linear-gradient(180deg,#ffffff,#f5f9ff);
  box-shadow:0 12px 26px rgba(15,23,42,.05);
}
.live-search-results{
  border-radius:16px;
  box-shadow:0 18px 32px rgba(15,23,42,.10);
}
.cashier-submit-btn{
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  box-shadow:0 14px 28px rgba(22,163,74,.20);
}
.cashier-reset-btn{
  background:linear-gradient(135deg,#e2e8f0,#cbd5e1) !important;
}
.pos-summary-box{
  position:relative;
  overflow:hidden;
}
.pos-summary-box::after{
  content:"";
  position:absolute;
  right:-18px;
  top:-18px;
  width:110px;
  height:110px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.cashier-display-screen{
  box-shadow:inset 0 0 18px rgba(0,0,0,.35), 0 10px 24px rgba(2,6,23,.14);
}

.recent-sales-panel,
.recent-service-panel{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:1px solid #e2e8f0;
}
.recent-sales-panel h4::before{content:"🧾 "; margin-right:6px}
.recent-service-panel h4::before{content:"⚡ "; margin-right:6px}

.service-quick-amounts{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}
.service-quick-amounts .btn{
  border-radius:14px;
  font-weight:900;
  padding:12px 8px;
  background:linear-gradient(135deg,#eff6ff,#dbeafe);
  color:#1d4ed8;
  border:1px solid #bfdbfe;
}
.fee-range-box{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid #dbeafe;
  border-radius:20px;
  padding:16px;
  box-shadow:0 12px 26px rgba(15,23,42,.05);
}
.fee-range-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#1d4ed8;
  margin-bottom:10px;
}
.fee-range-title::before{content:"💸"}
.fee-table-wrap{
  border:1px solid #dbeafe;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.fee-table th{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  color:#fff;
  padding:10px;
}
.fee-table td{padding:8px 10px}
.service-preview div{
  border-radius:18px;
  border:1px solid #dbeafe;
  background:linear-gradient(180deg,#ffffff,#f5f9ff);
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.service-preview strong{font-size:24px}
.duplicate-warning-box,
.service-range-warning{
  border-radius:16px;
  padding:13px 15px;
  box-shadow:0 8px 18px rgba(239,68,68,.08);
}
.clickable-history-row td{transition:.16s ease}
.clickable-history-row:hover td{transform:translateX(2px)}
.recent-highlight-row td{box-shadow:inset 4px 0 0 #16a34a}
.table-wrap{box-shadow:0 10px 22px rgba(15,23,42,.04)}

@media (max-width:1100px){
  .service-quick-amounts{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .service-quick-amounts{grid-template-columns:repeat(2,1fr)}
  .pos-form-panel h4,
  .service-form-panel h4{font-size:20px}
  .service-preview strong{font-size:22px}
}

/* dark mode polish */
.dark-mode .login-page{
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.20), transparent 24%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.12), transparent 22%),
    linear-gradient(180deg,#020617,#081120);
}
.dark-mode .login-card{
  background:#0f172a;
  border-color:#1e293b;
  box-shadow:none;
}
.dark-mode .pos-form-panel,
.dark-mode .service-form-panel,
.dark-mode .recent-sales-panel,
.dark-mode .recent-service-panel{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#1e293b;
}
.dark-mode .product-preview,
.dark-mode .fee-range-box,
.dark-mode .service-preview div{
  background:linear-gradient(180deg,#0f172a,#111827);
  border-color:#334155;
  box-shadow:none;
}
.dark-mode .fee-range-title{color:#93c5fd}
.dark-mode .fee-table-wrap{border-color:#334155}
.dark-mode .fee-table th{background:linear-gradient(135deg,#111827,#1f2937)}
.dark-mode .service-quick-amounts .btn{
  background:linear-gradient(135deg,#111827,#1e293b);
  color:#93c5fd;
  border-color:#334155;
}
.dark-mode .recent-highlight-row td{box-shadow:inset 4px 0 0 #22c55e}

/* Service micro interactions */
.fee-range-box{position:relative;overflow:hidden}
.fee-range-box::after{
  content:"";
  position:absolute;
  right:-24px;top:-24px;
  width:110px;height:110px;border-radius:999px;
  background:rgba(37,99,235,.06);
}
.fee-table tbody tr{transition:.18s ease}
.fee-table tbody tr.fee-row-active td{
  background:#dbeafe !important;
  color:#1d4ed8;
  font-weight:900;
  box-shadow:inset 4px 0 0 #2563eb;
}
.pulse-total{animation:pulseTotal .28s ease}
@keyframes pulseTotal{
  0%{transform:scale(1)}
  45%{transform:scale(1.05)}
  100%{transform:scale(1)}
}
.service-quick-amounts .btn{
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 18px rgba(37,99,235,.12);
}
.service-quick-amounts .btn::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 60%);
  pointer-events:none;
}
.service-quick-amounts .btn:hover{transform:translateY(-2px) scale(1.01)}
.service-quick-amounts .btn:active{transform:translateY(0) scale(.99)}
.dark-mode .fee-range-box::after{background:rgba(59,130,246,.08)}
.dark-mode .fee-table tbody tr.fee-row-active td{
  background:#082f49 !important;
  color:#bae6fd;
  box-shadow:inset 4px 0 0 #0ea5e9;
}

/* FINAL SERVICE LAYOUT */
.service-grid{
  display:grid !important;
  grid-template-columns:minmax(360px,430px) minmax(0,1fr) !important;
  gap:20px !important;
  align-items:start !important;
}
.service-form-panel{
  position:sticky;
  top:18px;
  z-index:2;
}
.service-summary-panel{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
}
.service-summary-panel > .pos-summary-box,
.service-summary-panel > .panel,
.service-summary-panel > .recent-service-panel{
  width:100%;
}
.fee-range-box{
  order:2;
}
.recent-service-panel{
  order:3;
}
.service-filter-panel{
  order:1;
}
.service-form-panel .form-grid{
  grid-template-columns:1fr 1fr;
}
.service-form-panel .form-group.full{
  grid-column:1 / -1;
}
.service-quick-amounts{
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
}
.fee-table-wrap{
  max-height:420px;
  overflow:auto;
}
.fee-table th{
  position:sticky;
  top:0;
  z-index:1;
}
.service-summary-panel .table-wrap{
  background:#fff;
}
@media (max-width:1100px){
  .service-grid{
    grid-template-columns:1fr !important;
  }
  .service-form-panel{
    position:static;
  }
  .service-form-panel .form-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:768px){
  .service-quick-amounts{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  }
}
@media (max-width:520px){
  .service-quick-amounts{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }
}
.dark-mode .service-summary-panel .table-wrap{
  background:#0f172a;
}

/* Dark mode persistence + jasa spacing refinement */
.service-summary-panel{
  gap:18px !important;
}
.fee-range-box{
  margin-top:8px !important;
  order:2 !important;
}
.service-filter-panel{
  order:1 !important;
  margin-top:0 !important;
}
.recent-service-panel{
  order:4 !important;
  margin-top:0 !important;
}
.service-quick-amounts{
  order:3 !important;
  margin-top:12px !important;
  margin-bottom:0 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;
}
.service-quick-amounts .btn{
  width:100%;
  min-height:46px;
}
.fee-table-wrap{
  margin-top:10px !important;
}
.fee-table td,
.fee-table th{
  padding:10px 12px !important;
}
.service-form-panel .service-preview{
  margin-top:16px !important;
}
.service-form-panel .fee-range-box{
  margin-top:16px !important;
}
.service-form-panel .duplicate-warning-box,
.service-form-panel .service-range-warning{
  margin-top:12px !important;
  margin-bottom:0 !important;
}
.service-form-panel .service-preview div{
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (max-width:1100px){
  .service-quick-amounts{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media (max-width:520px){
  .service-quick-amounts{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* harden dark mode colors so all panels stay dark */
.dark-mode,
.dark-mode html,
.dark-mode body{
  background:#020617 !important;
  color:#e5e7eb !important;
}
.dark-mode .main,
.dark-mode .content,
.dark-mode .app{
  background:transparent !important;
}
.dark-mode .panel,
.dark-mode .card,
.dark-mode .topbar,
.dark-mode .dashboard-header-clean,
.dark-mode .dashboard-header-clean.launch-ready,
.dark-mode .table-wrap,
.dark-mode .mobile-top,
.dark-mode .login-card,
.dark-mode .pos-form-panel,
.dark-mode .service-form-panel,
.dark-mode .recent-sales-panel,
.dark-mode .recent-service-panel,
.dark-mode .service-filter-panel,
.dark-mode .fee-range-box{
  background:#0f172a !important;
  color:#e5e7eb !important;
  border-color:#1e293b !important;
}
.dark-mode .service-summary-panel{
  background:transparent !important;
}
.dark-mode .fee-table-wrap{
  background:#0f172a !important;
  border-color:#334155 !important;
}
.dark-mode .fee-table td,
.dark-mode .fee-table th{
  border-color:#334155 !important;
}
.dark-mode .service-quick-amounts .btn{
  background:linear-gradient(135deg,#111827,#1e293b) !important;
  color:#93c5fd !important;
  border-color:#334155 !important;
}
.dark-mode .input,
.dark-mode .select,
.dark-mode .textarea,
.dark-mode .file-input{
  background:#0f172a !important;
  color:#e5e7eb !important;
  border-color:#334155 !important;
}
.dark-mode .table-wrap tbody tr:hover td{
  background:#111827 !important;
}

/* FINAL JASA PREMIUM POLISH */
.service-form-panel{
  border-radius:22px !important;
  box-shadow:0 18px 34px rgba(15,23,42,.08) !important;
}
.service-form-panel h4{
  display:flex;
  align-items:center;
  gap:10px;
}
.service-form-panel h4::before{
  content:"⚡";
}
.service-summary-panel .pos-summary-box{
  background:linear-gradient(135deg,#0f172a,#2563eb) !important;
  border-radius:22px !important;
}
.service-summary-panel .pos-summary-box .cashier-display-screen{
  border-radius:20px !important;
}
.fee-range-box{
  border-radius:22px !important;
}
.fee-range-title{
  font-size:14px !important;
  font-weight:900 !important;
}
.fee-table tbody tr td:first-child{
  font-weight:800;
}
.fee-table tbody tr.fee-row-active td{
  transform:scale(1.01);
}
.service-preview{
  gap:16px !important;
}
.service-preview div{
  position:relative;
  overflow:hidden;
}
.service-preview div::after{
  content:"";
  position:absolute;
  right:-18px;
  bottom:-18px;
  width:74px;
  height:74px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
}
.service-preview strong{
  letter-spacing:-.02em;
}
.service-quick-amounts .btn{
  min-height:52px !important;
  font-size:14px !important;
  font-weight:900 !important;
}
.service-quick-amounts .btn:nth-child(1){background:linear-gradient(135deg,#eff6ff,#dbeafe) !important}
.service-quick-amounts .btn:nth-child(2){background:linear-gradient(135deg,#ecfeff,#cffafe) !important}
.service-quick-amounts .btn:nth-child(3){background:linear-gradient(135deg,#f0fdf4,#dcfce7) !important}
.service-quick-amounts .btn:nth-child(4){background:linear-gradient(135deg,#fff7ed,#ffedd5) !important}
.service-quick-amounts .btn:nth-child(5){background:linear-gradient(135deg,#fdf4ff,#f5d0fe) !important}
.service-range-warning,
.duplicate-warning-box{
  font-size:13px !important;
}
.recent-service-panel{
  border-radius:22px !important;
}
.recent-service-panel h4{
  display:flex;
  align-items:center;
  gap:10px;
}
.recent-service-panel h4::before{
  content:"🕘";
}
.clickable-history-row td:first-child{
  font-weight:700;
}
@media (max-width:640px){
  .service-summary-panel .pos-summary-box{
    padding:18px !important;
  }
  .service-quick-amounts .btn{
    min-height:48px !important;
    font-size:13px !important;
  }
}
/* dark mode premium polish */
.dark-mode .service-form-panel,
.dark-mode .recent-service-panel,
.dark-mode .fee-range-box{
  box-shadow:none !important;
}
.dark-mode .service-preview div::after{
  background:rgba(59,130,246,.08);
}


/* ===== LAPORAN SPACING FINAL FIX ===== */

.report-section,
.owner-report,
.report-container {
  margin-bottom: 22px;
}

.report-section .panel,
.owner-report .panel {
  margin-bottom: 18px;
}

.table-wrap {
  margin-top: 14px;
  margin-bottom: 22px;
}

.panel h4,
.panel-title {
  margin-bottom: 12px;
}

.filter-box,
.report-filter,
.owner-filter {
  margin-bottom: 18px;
}

.report-grid {
  gap: 18px;
}

.panel {
  padding: 18px;
}

.table-wrap table {
  margin-top: 6px;
}

@media (max-width: 768px) {
  .table-wrap {
    margin-bottom: 24px;
  }

  .report-section {
    margin-bottom: 26px;
  }
}

/* ===== THEME REFRESH + DATETIME UX ===== */
:root{
  --bg:#f3f6fb;
  --surface:#ffffff;
  --surface-soft:#f8fbff;
  --surface-muted:#eef4ff;
  --text:#0f172a;
  --text-soft:#475569;
  --border:#d7e3f4;
  --primary:#2563eb;
  --primary-strong:#1d4ed8;
  --shadow:0 18px 38px rgba(15,23,42,.08);
}
html,body{
  font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--text);
}
body{
  transition:background .25s ease,color .25s ease;
}
.sidebar,
.topbar,
.card,
.panel,
.table-wrap,
.login-card,
.product-preview,
.stock-card,
.dashboard-header-clean,
.service-preview div,
.fee-range-box,
.role-box,
.logo-preview-box{
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.sidebar{
  background:linear-gradient(180deg,#0f172a,#172554);
}
.brand,
.topbar h1,
.panel-title,
.dashboard-header-left h2,
.stat-value,
.service-preview strong{
  letter-spacing:-.02em;
}
.brand{font-weight:800}
.brand-sub,
.panel-sub,
.topbar p,
.muted,
.footer-note,
.field-help{
  color:var(--text-soft);
}
.menu a{
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
}
.menu a.active,
.menu a:hover{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  box-shadow:0 12px 24px rgba(37,99,235,.25);
}
.topbar,
.card,
.panel,
.product-preview,
.table-wrap,
.dashboard-header-clean,
.service-preview div,
.fee-range-box{
  background:var(--surface);
}
.panel-soft,
.finance-panel,
.best-product-panel,
.service-filter-panel,
.service-summary-panel .pos-summary-box{
  background:var(--surface-soft);
}
.input,.select,.textarea,.file-input{
  min-height:48px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  font-size:14px;
}
.input:focus,.select:focus,.textarea:focus,.file-input:focus{
  outline:none;
  border-color:#93c5fd;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.btn{
  border-radius:14px;
  font-weight:700;
  box-shadow:0 10px 20px rgba(37,99,235,.18);
}
.btn.gray,
.btn.secondary{
  box-shadow:none;
}
.theme-toggle{
  min-width:148px;
}
.theme-toggle.is-dark{
  background:#f8fafc !important;
  color:#0f172a !important;
}
.theme-toggle:not(.is-dark){
  background:#0f172a !important;
  color:#e2e8f0 !important;
}
.field-help{
  font-size:12px;
  margin-top:8px;
}
.product-search-group{
  position:relative;
}
.live-search-results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:none;
  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:18px;
  padding:8px;
  z-index:30;
  box-shadow:0 20px 42px rgba(2,6,23,.45);
}
.live-search-item{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:left;
  padding:12px 14px;
  background:transparent;
  border:0;
  border-radius:14px;
  cursor:pointer;
}
.live-search-item:hover,
.live-search-item:focus,
.live-search-item.is-active{
  background:rgba(37,99,235,.14);
}
.live-search-id{
  color:#bfdbfe;
  font-weight:800;
}
.live-search-name{
  color:#f8fafc;
  font-weight:600;
}
.live-search-meta,
.live-search-empty{
  color:#94a3b8;
  font-size:12px;
}
.datetime-field{
  display:grid;
  gap:10px;
}
.datetime-input{
  appearance:none;
}
.datetime-input::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.9;
}
.datetime-quick-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.datetime-quick-actions .btn{
  padding:8px 12px;
  border-radius:12px;
}
.sidebar-overlay{
  display:none;
}
.sidebar-overlay.open{
  display:block;
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.45);
  z-index:24;
}

/* cleaner dark mode and easy return to normal */
.dark-mode,
.dark-mode html,
.dark-mode body{
  --bg:#020617;
  --surface:#0f172a;
  --surface-soft:#111c34;
  --surface-muted:#13213f;
  --text:#e5eefb;
  --text-soft:#9db0ca;
  --border:#223556;
  --shadow:0 20px 42px rgba(0,0,0,.32);
  background:var(--bg) !important;
  color:var(--text) !important;
}
.dark-mode .app,
.dark-mode .main{
  background:transparent !important;
}
.dark-mode .sidebar{
  background:linear-gradient(180deg,#020617,#0f172a 40%,#172554);
}
.dark-mode .menu a{
  background:rgba(148,163,184,.06);
  border-color:rgba(148,163,184,.08);
}
.dark-mode .topbar,
.dark-mode .card,
.dark-mode .panel,
.dark-mode .table-wrap,
.dark-mode .login-card,
.dark-mode .product-preview,
.dark-mode .stock-card,
.dark-mode .dashboard-header-clean,
.dark-mode .service-preview div,
.dark-mode .fee-range-box,
.dark-mode .role-box,
.dark-mode .logo-preview-box{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow) !important;
}
.dark-mode .panel-soft,
.dark-mode .finance-panel,
.dark-mode .best-product-panel,
.dark-mode .service-filter-panel,
.dark-mode .service-summary-panel .pos-summary-box,
.dark-mode .table-wrap table,
.dark-mode .fee-table-wrap{
  background:var(--surface-soft) !important;
  color:var(--text) !important;
}
.dark-mode .input,
.dark-mode .select,
.dark-mode .textarea,
.dark-mode .file-input,
.dark-mode .datetime-input{
  background:#091224 !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
.dark-mode .input::placeholder,
.dark-mode .textarea::placeholder{
  color:#6f86a6;
}
.dark-mode .topbar p,
.dark-mode .panel-sub,
.dark-mode .muted,
.dark-mode .footer-note,
.dark-mode .field-help,
.dark-mode .dashboard-header-left p,
.dark-mode .service-preview span,
.dark-mode .service-fee-note,
.dark-mode .live-search-meta,
.dark-mode .live-search-empty{
  color:var(--text-soft) !important;
}
.dark-mode th,
.dark-mode td,
.dark-mode .fee-table td,
.dark-mode .fee-table th{
  border-color:var(--border) !important;
}
.dark-mode th,
.dark-mode table th{
  background:#13213f !important;
  color:#dbeafe !important;
}
.dark-mode .table-wrap tbody tr:hover td,
.dark-mode .clickable-history-row:hover td{
  background:#0b1326 !important;
}
.dark-mode .tag,
.dark-mode .dashboard-chip,
.dark-mode .best-qty{
  background:#1d4ed8 !important;
  color:#eff6ff !important;
}
.dark-mode .dashboard-chip.warning{
  background:#7c2d12 !important;
  color:#ffedd5 !important;
}
.dark-mode .btn.gray{
  background:#1e293b !important;
  color:#e2e8f0 !important;
}
.dark-mode .btn.secondary{
  background:#172554 !important;
  color:#dbeafe !important;
}
.dark-mode .theme-toggle.is-dark{
  background:#f8fafc !important;
  color:#0f172a !important;
}
.dark-mode .datetime-input::-webkit-calendar-picker-indicator{
  filter:invert(1);
}
@media (max-width:768px){
  .topbar-actions{width:100%}
  .theme-toggle{flex:1 1 160px}
  .datetime-quick-actions .btn{flex:1 1 120px}
}


/* ===== final theme/table/date fixes ===== */
.table-wrap,
.table-wrap table,
.table-wrap tbody,
.table-wrap tr,
.table-wrap td{
  background:var(--surface);
  color:var(--text);
}
.table-wrap tbody tr:nth-child(even) td{
  background:#fbfdff;
}
.elevated-table table{
  background:var(--surface);
}
.dark-mode .table-wrap,
.dark-mode .table-wrap table,
.dark-mode .table-wrap tbody,
.dark-mode .table-wrap tr,
.dark-mode .table-wrap td,
.dark-mode .elevated-table table{
  background:#0f172a !important;
  color:var(--text) !important;
}
.dark-mode .table-wrap tbody tr:nth-child(even) td{
  background:#111c34 !important;
}
.dark-mode .table-wrap tbody tr:hover td,
.dark-mode .elevated-table tbody tr:hover td,
.dark-mode .clickable-history-row:hover td{
  background:#172554 !important;
}
.dark-mode .table-wrap tbody tr.recent-highlight-row td{
  background:#1e3a8a !important;
}
.dark-mode .page-link{
  background:#1e293b !important;
  color:#e5eefb !important;
  border:1px solid var(--border);
}
.dark-mode .page-link.active{
  background:#2563eb !important;
  color:#fff !important;
}
html.dark-mode,
html.dark-mode body,
body.dark-mode{
  background:var(--bg) !important;
}
.datetime-input{
  cursor:pointer;
}
.datetime-input::-webkit-datetime-edit-fields-wrapper{
  padding:2px 0;
}

/* FIX: clearer light mode + stable transaction search */
body:not(.dark-mode){
  --ui-bg:#f4f7fb;
  --ui-card:#ffffff;
  --ui-card-soft:#f8fafc;
  --ui-border:#dbe4f0;
  --ui-text:#0f172a;
  --ui-muted:#475569;
}
body:not(.dark-mode) .sidebar{
  background:linear-gradient(180deg,#0f172a,#172554);
  border-right:1px solid rgba(148,163,184,.18);
}
body:not(.dark-mode) .brand,
body:not(.dark-mode) .brand-sub,
body:not(.dark-mode) .role-box,
body:not(.dark-mode) .role-box b{
  color:#e5eefc;
}
body:not(.dark-mode) .menu a{
  color:#dbeafe;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(148,163,184,.12);
}
body:not(.dark-mode) .menu a:hover,
body:not(.dark-mode) .menu a.active{
  background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#ffffff;
  border-color:transparent;
  box-shadow:0 10px 22px rgba(37,99,235,.3);
}
body:not(.dark-mode) .role-box{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(148,163,184,.16);
}
body:not(.dark-mode) .sidebar-logout-btn{
  background:#ef4444;
  color:#fff;
}
body:not(.dark-mode) .table-wrap table,
body:not(.dark-mode) .elevated-table table{
  background:#ffffff;
}
body:not(.dark-mode) tbody tr:nth-child(even) td{
  background:#fbfdff;
}
body:not(.dark-mode) tbody tr:hover td{
  background:#f1f5f9;
}
body:not(.dark-mode) .live-search-results{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  left:0 !important;
  right:0 !important;
  z-index:30 !important;
}
.live-search-meta{
  color:#64748b;
  font-size:12px;
  margin-top:3px;
}
.dark-mode .live-search-meta{color:#94a3b8}
.product-search-group{position:relative}
.datetime-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.datetime-quick-actions{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:640px){
  .datetime-field{grid-template-columns:1fr}
}

/* ===== all menu theme cleanup ===== */
:root{
  --row-even:#f8fbff;
  --row-hover:#edf4ff;
  --scroll-track:#dbe7f6;
  --scroll-thumb:#94a3b8;
}

.table-wrap,
.elevated-table,
.fee-table-wrap,
.service-summary-panel,
.service-filter-panel,
.recent-service-panel,
.recent-sales-panel,
.pos-form-panel,
.service-form-panel,
.panel-soft,
.role-box,
.product-preview,
.stock-card,
.logo-preview-box{
  overflow:hidden;
}

.table-wrap,
.fee-table-wrap{
  border-radius:18px;
}

.table-wrap table,
.elevated-table table,
.fee-table{
  background:transparent !important;
}

.table-wrap thead th,
.elevated-table thead th,
.fee-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface-soft) !important;
  color:var(--text) !important;
}

.table-wrap tbody td,
.elevated-table tbody td,
.fee-table tbody td{
  background:transparent !important;
  color:var(--text) !important;
}

.table-wrap tbody tr:nth-child(even) td,
.elevated-table tbody tr:nth-child(even) td,
.fee-table tbody tr:nth-child(even) td{
  background:var(--row-even) !important;
}

.table-wrap tbody tr:hover td,
.elevated-table tbody tr:hover td,
.fee-table tbody tr:hover td,
.clickable-history-row:hover td{
  background:var(--row-hover) !important;
}

.table-wrap tbody tr > td[colspan],
.elevated-table tbody tr > td[colspan],
.fee-table tbody tr > td[colspan]{
  background:transparent !important;
}

.table-wrap::-webkit-scrollbar,
.fee-table-wrap::-webkit-scrollbar{
  height:12px;
  width:12px;
}
.table-wrap::-webkit-scrollbar-track,
.fee-table-wrap::-webkit-scrollbar-track{
  background:var(--scroll-track);
  border-radius:999px;
}
.table-wrap::-webkit-scrollbar-thumb,
.fee-table-wrap::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:999px;
  border:2px solid var(--scroll-track);
}

body:not(.dark-mode) .sidebar{
  background:linear-gradient(180deg,#081225,#10244b 55%,#17346a);
}
body:not(.dark-mode) .menu a,
body:not(.dark-mode) .brand,
body:not(.dark-mode) .brand-sub,
body:not(.dark-mode) .role-box,
body:not(.dark-mode) .role-box b{
  color:#f8fbff !important;
}
body:not(.dark-mode) .menu a{
  background:rgba(255,255,255,.045);
  border-color:rgba(191,219,254,.16);
}
body:not(.dark-mode) .menu a:not(.active):hover{
  background:rgba(59,130,246,.2);
}
body:not(.dark-mode) .role-box{
  background:rgba(15,23,42,.28);
}
body:not(.dark-mode) .panel-sub,
body:not(.dark-mode) .muted,
body:not(.dark-mode) .footer-note,
body:not(.dark-mode) .field-help,
body:not(.dark-mode) .service-fee-note,
body:not(.dark-mode) .service-preview span,
body:not(.dark-mode) .cashier-sub-display,
body:not(.dark-mode) .stat-title{
  color:#52637a !important;
}
body:not(.dark-mode) .btn.gray{
  background:#e2e8f0;
  color:#0f172a;
}
body:not(.dark-mode) .btn.secondary{
  background:#1e293b;
  color:#f8fafc;
}

.dark-mode{
  --row-even:#0f1b31;
  --row-hover:#172554;
  --scroll-track:#0b1326;
  --scroll-thumb:#334155;
}
.dark-mode .table-wrap,
.dark-mode .elevated-table,
.dark-mode .fee-table-wrap,
.dark-mode .service-summary-panel,
.dark-mode .service-filter-panel,
.dark-mode .recent-service-panel,
.dark-mode .recent-sales-panel,
.dark-mode .pos-form-panel,
.dark-mode .service-form-panel,
.dark-mode .panel-soft,
.dark-mode .role-box,
.dark-mode .product-preview,
.dark-mode .stock-card,
.dark-mode .logo-preview-box{
  background:var(--surface) !important;
  border-color:var(--border) !important;
}
.dark-mode .table-wrap,
.dark-mode .fee-table-wrap{
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.06);
}
.dark-mode .table-wrap table,
.dark-mode .elevated-table table,
.dark-mode .fee-table,
.dark-mode .fee-table tbody,
.dark-mode .fee-table thead,
.dark-mode .table-wrap tbody,
.dark-mode .table-wrap thead{
  background:transparent !important;
}
.dark-mode .table-wrap thead th,
.dark-mode .elevated-table thead th,
.dark-mode .fee-table thead th{
  background:#13213f !important;
  color:#dbeafe !important;
}
.dark-mode .table-wrap tbody td,
.dark-mode .elevated-table tbody td,
.dark-mode .fee-table tbody td{
  color:#e5eefb !important;
}
.dark-mode .table-wrap tbody tr:nth-child(even) td,
.dark-mode .elevated-table tbody tr:nth-child(even) td,
.dark-mode .fee-table tbody tr:nth-child(even) td{
  background:var(--row-even) !important;
}
.dark-mode .table-wrap tbody tr:hover td,
.dark-mode .elevated-table tbody tr:hover td,
.dark-mode .fee-table tbody tr:hover td,
.dark-mode .clickable-history-row:hover td{
  background:var(--row-hover) !important;
}
.dark-mode .table-wrap::-webkit-scrollbar-track,
.dark-mode .fee-table-wrap::-webkit-scrollbar-track{
  background:var(--scroll-track);
}
.dark-mode .table-wrap::-webkit-scrollbar-thumb,
.dark-mode .fee-table-wrap::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-color:var(--scroll-track);
}
.dark-mode .service-fee-note,
.dark-mode .panel-sub,
.dark-mode .muted,
.dark-mode .field-help,
.dark-mode .cashier-sub-display,
.dark-mode .service-preview span,
.dark-mode .stat-title{
  color:#9db0ca !important;
}
.dark-mode .service-preview strong,
.dark-mode .cashier-display-screen,
.dark-mode .panel-title,
.dark-mode .stat-value{
  color:#f8fbff !important;
}
.dark-mode .btn.gray{
  background:#1e293b !important;
  color:#e5eefb !important;
  border:1px solid #334155;
}
.dark-mode .btn.secondary{
  background:#172554 !important;
  color:#dbeafe !important;
  border:1px solid #2563eb;
}

@media (max-width: 900px){
  .service-grid,
  .owner-grid,
  .dashboard-split-grid,
  .grid-4{
    grid-template-columns:1fr !important;
  }
  .table-wrap,
  .fee-table-wrap{
    max-width:100%;
  }
}

/* ===== FINAL GLOBAL TABLE + THEME PATCH ===== */
:root{
  --row-odd:#ffffff;
  --row-even:#f8fbff;
  --row-hover:#eef4ff;
  --table-head:#1e2f4d;
  --table-head-text:#f8fbff;
  --table-border:#d8e3f2;
  --scroll-track:#e5edf8;
  --scroll-thumb:#94a3b8;
}

body:not(.dark-mode){
  --bg:#f3f6fb;
  --surface:#ffffff;
  --surface-soft:#f8fbff;
  --surface-muted:#eef4ff;
  --text:#0f172a;
  --text-soft:#475569;
  --border:#d7e3f4;
}

/* Normal mode sidebar readability */
body:not(.dark-mode) .sidebar{
  background:linear-gradient(180deg,#081225 0%,#10244b 54%,#17346a 100%) !important;
}
body:not(.dark-mode) .brand,
body:not(.dark-mode) .brand-sub,
body:not(.dark-mode) .menu a,
body:not(.dark-mode) .role-box,
body:not(.dark-mode) .role-box b,
body:not(.dark-mode) .role-box strong{
  color:#f8fbff !important;
}
body:not(.dark-mode) .menu a{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(191,219,254,.14) !important;
}
body:not(.dark-mode) .menu a:hover,
body:not(.dark-mode) .menu a.active{
  background:linear-gradient(135deg,#2563eb,#3b82f6) !important;
  color:#ffffff !important;
  box-shadow:0 12px 28px rgba(37,99,235,.28);
}
body:not(.dark-mode) .role-box{
  background:rgba(15,23,42,.34) !important;
  border:1px solid rgba(191,219,254,.12) !important;
}

/* Global table surface cleanup for all menus */
.table-wrap,
.elevated-table,
.fee-table-wrap{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  overflow:auto !important;
  box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
}

.table-wrap table,
.elevated-table table,
.fee-table,
.table-wrap thead,
.table-wrap tbody,
.elevated-table thead,
.elevated-table tbody,
.fee-table thead,
.fee-table tbody{
  background:transparent !important;
  color:var(--text) !important;
}

.table-wrap thead th,
.elevated-table thead th,
.fee-table thead th,
.table-wrap table thead th,
.elevated-table table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--table-head) !important;
  color:var(--table-head-text) !important;
  border-bottom:1px solid var(--table-border) !important;
}

.table-wrap tbody tr,
.elevated-table tbody tr,
.fee-table tbody tr{
  background:transparent !important;
}

.table-wrap tbody td,
.elevated-table tbody td,
.fee-table tbody td,
.table-wrap table tbody td,
.elevated-table table tbody td{
  background:var(--row-odd) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--table-border) !important;
}

.table-wrap tbody tr:nth-child(even) td,
.elevated-table tbody tr:nth-child(even) td,
.fee-table tbody tr:nth-child(even) td{
  background:var(--row-even) !important;
}

.table-wrap tbody tr:hover td,
.elevated-table tbody tr:hover td,
.fee-table tbody tr:hover td,
.clickable-history-row:hover td{
  background:var(--row-hover) !important;
}

.table-wrap tbody tr > td[colspan],
.elevated-table tbody tr > td[colspan],
.fee-table tbody tr > td[colspan]{
  background:var(--row-odd) !important;
  color:var(--text-soft) !important;
}

.pagination .page-link{
  border:1px solid var(--border);
}

.table-wrap::-webkit-scrollbar,
.fee-table-wrap::-webkit-scrollbar{
  height:12px;
  width:12px;
}
.table-wrap::-webkit-scrollbar-track,
.fee-table-wrap::-webkit-scrollbar-track{
  background:var(--scroll-track) !important;
  border-radius:999px;
}
.table-wrap::-webkit-scrollbar-thumb,
.fee-table-wrap::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb) !important;
  border:2px solid var(--scroll-track) !important;
  border-radius:999px;
}

/* Dark mode hard overrides */
.dark-mode{
  --bg:#020617;
  --surface:#0f172a;
  --surface-soft:#111c34;
  --surface-muted:#13213f;
  --text:#e5eefb;
  --text-soft:#9db0ca;
  --border:#223556;
  --row-odd:#0f172a;
  --row-even:#111c34;
  --row-hover:#172554;
  --table-head:#13213f;
  --table-head-text:#dbeafe;
  --table-border:#2a3d60;
  --scroll-track:#091224;
  --scroll-thumb:#334155;
}

.dark-mode .table-wrap,
.dark-mode .elevated-table,
.dark-mode .fee-table-wrap,
.dark-mode .service-summary-panel,
.dark-mode .service-filter-panel,
.dark-mode .recent-service-panel,
.dark-mode .recent-sales-panel,
.dark-mode .panel,
.dark-mode .card,
.dark-mode .panel-soft,
.dark-mode .product-preview,
.dark-mode .role-box{
  background:var(--surface) !important;
  border-color:var(--border) !important;
}

.dark-mode .table-wrap table,
.dark-mode .elevated-table table,
.dark-mode .fee-table,
.dark-mode .table-wrap thead,
.dark-mode .table-wrap tbody,
.dark-mode .elevated-table thead,
.dark-mode .elevated-table tbody,
.dark-mode .fee-table thead,
.dark-mode .fee-table tbody,
.dark-mode .table-wrap tr,
.dark-mode .elevated-table tr,
.dark-mode .fee-table tr{
  background:transparent !important;
  color:var(--text) !important;
}

.dark-mode .table-wrap tbody td,
.dark-mode .elevated-table tbody td,
.dark-mode .fee-table tbody td,
.dark-mode .table-wrap table tbody td,
.dark-mode .elevated-table table tbody td,
.dark-mode td{
  background:var(--row-odd) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--table-border) !important;
}

.dark-mode .table-wrap tbody tr:nth-child(even) td,
.dark-mode .elevated-table tbody tr:nth-child(even) td,
.dark-mode .fee-table tbody tr:nth-child(even) td{
  background:var(--row-even) !important;
}

.dark-mode .table-wrap tbody tr:hover td,
.dark-mode .elevated-table tbody tr:hover td,
.dark-mode .fee-table tbody tr:hover td,
.dark-mode .clickable-history-row:hover td,
.dark-mode .table-wrap tbody tr.recent-highlight-row td{
  background:var(--row-hover) !important;
  color:var(--text) !important;
}

.dark-mode .table-wrap tbody tr > td[colspan],
.dark-mode .elevated-table tbody tr > td[colspan],
.dark-mode .fee-table tbody tr > td[colspan]{
  background:var(--row-odd) !important;
  color:var(--text-soft) !important;
}

.dark-mode .table-wrap thead th,
.dark-mode .elevated-table thead th,
.dark-mode .fee-table thead th,
.dark-mode table thead th,
.dark-mode table th{
  background:var(--table-head) !important;
  color:var(--table-head-text) !important;
  border-bottom:1px solid var(--table-border) !important;
}

.dark-mode .pagination .page-link{
  background:#1e293b !important;
  color:#e5eefb !important;
  border-color:#334155 !important;
}
.dark-mode .pagination .page-link.active{
  background:#2563eb !important;
  color:#ffffff !important;
  border-color:#2563eb !important;
}


/* ===== UI refinement patch: all menus, no feature changes ===== */
.main,
.panel,
.card,
.topbar,
.table-wrap,
.fee-table-wrap,
.product-preview,
.service-form-panel,
.service-summary-panel,
.service-filter-panel,
.recent-service-panel,
.recent-sales-panel{
  max-width:100%;
}

.main{min-width:0;}
.panel,.card,.topbar{overflow:hidden;}

.form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.table-wrap,
.elevated-table,
.fee-table-wrap{
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.table-wrap table,
.elevated-table table,
.fee-table{
  min-width:760px;
}

.service-grid,
.pos-grid{
  display:grid;
  grid-template-columns:minmax(0,430px) minmax(0,1fr);
  gap:18px;
  align-items:start;
}

.service-form-panel,
.pos-form-panel{
  min-width:0;
}

.service-summary-panel{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.service-form-panel .form-grid,
.pos-form-panel .form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.service-form-panel .form-group.full,
.pos-form-panel .form-group.full{
  grid-column:1 / -1;
}

.service-quick-amounts{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.service-quick-amounts .btn{
  width:100%;
  min-height:48px;
  white-space:nowrap;
}

.cashier-action-row,
.topbar-actions,
.toolbar,
.inline-flex{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.cashier-action-row .btn{
  min-width:160px;
}

td .btn,
td form.inline{
  margin:2px 6px 2px 0;
}

td:last-child{
  white-space:nowrap;
}

.datetime-input{
  min-height:48px;
}

.service-form-panel .datetime-quick-actions,
.service-form-panel button[onclick*="setServiceNow"],
.service-form-panel button[onclick*="setToday"]{
  display:none !important;
}

@media (max-width:1200px){
  .service-grid,
  .pos-grid,
  .hero-panel,
  .dashboard-split-grid,
  .owner-grid,
  .grid-4{
    grid-template-columns:1fr !important;
  }

  .service-form-panel,
  .pos-form-panel{
    position:static !important;
  }
}

@media (max-width:768px){
  .main{padding:12px;}
  .panel,.card,.topbar{padding:16px; border-radius:16px;}
  .form-grid,
  .service-form-panel .form-grid,
  .pos-form-panel .form-grid{
    grid-template-columns:1fr !important;
  }
  .cashier-action-row .btn,
  .topbar-actions .btn,
  .topbar-actions .file-input,
  .topbar-actions a,
  .topbar-actions button,
  .toolbar .btn{
    width:100%;
  }
  .service-quick-amounts{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .table-wrap table,
  .elevated-table table,
  .fee-table{
    min-width:640px;
  }
  .sidebar{width:280px;max-width:82vw;}
}

@media (max-width:480px){
  .service-quick-amounts{
    grid-template-columns:1fr 1fr !important;
  }
  .pagination{gap:6px;}
  .page-link{padding:8px 10px; min-width:36px; text-align:center;}
  .topbar h1{font-size:20px;}
}