:root{
  --bg:#f3f6fb;
  --card:#ffffff;
  --line:#d8e0ea;
  --text:#172033;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-dark:#1e3a8a;
  --success-bg:#ecfdf5;
  --success:#047857;
  --danger-bg:#fef2f2;
  --danger:#b91c1c;
  --shadow:0 14px 34px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.45}
a{text-decoration:none;color:var(--primary)}
a:hover{opacity:.9}
img{max-width:100%}

.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;padding:24px 18px;background:linear-gradient(180deg,#0f172a,#1e293b);color:#fff;overflow-y:auto;z-index:20}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:24px}
.brand img{width:54px;height:54px;border-radius:14px;background:#fff;padding:4px}
.brand small{display:block;color:#cbd5e1}
.nav-links a{display:block;color:#e5e7eb;padding:12px 14px;border-radius:12px;margin:6px 0;font-weight:500}
.nav-links a:hover{background:rgba(255,255,255,.08)}
.content{margin-left:260px;padding:28px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.mobile-menu-btn{display:none;position:fixed;top:12px;right:12px;z-index:40;border:none;background:#0f172a;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow)}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.compact-card{padding:16px 18px}
.inner-card{margin-top:18px;background:#fbfdff}
.form-card{max-width:1020px}
.wide-form-card{max-width:1200px}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.simple-header{margin-bottom:12px}
.page-header h2,.page-header h3{margin:0 0 4px}
.muted-text{color:var(--muted)}
.pill,.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;background:#dbeafe;color:#1d4ed8}
.status-badge.ok{background:#dcfce7;color:#166534}
.status-badge.muted{background:#eef2f7;color:#64748b}
.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.full{grid-column:1/-1}
.stat h3{margin:0;font-size:34px}
.stat p{margin:8px 0 0;color:var(--muted)}

.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.form-group label{font-weight:600}
.check{flex-direction:row;align-items:center;gap:10px;margin-top:30px}
.form-control,.table-input{width:100%;padding:12px 14px;border:1px solid #c8d2df;border-radius:12px;background:#fff;font:inherit;color:var(--text)}
.form-control:focus,.table-input:focus{outline:none;border-color:#86aef8;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer;font-weight:600}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-block{display:flex;width:100%}
.form-actions,.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.actions.wrap{flex-wrap:wrap}
.action-end{display:flex;align-items:end}

.alert{padding:14px 16px;border-radius:14px;margin-bottom:18px;border:1px solid transparent}
.alert-danger{background:var(--danger-bg);color:var(--danger);border-color:#fecaca}
.alert-success{background:var(--success-bg);color:var(--success);border-color:#a7f3d0}
.text-danger{color:var(--danger);font-size:13px}
.hint{margin-top:14px;color:var(--muted);font-size:13px}

.toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;margin-bottom:18px}
.toolbar-wide{grid-template-columns:minmax(0,1fr) 220px auto auto}
.table-responsive{width:100%;overflow-x:auto}
.table{width:100%;border-collapse:collapse;min-width:760px}
.table th,.table td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.table th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#475569;background:#f8fbff}
.table-input{padding:8px 10px;max-width:100px}

.totals-box{margin-left:auto;max-width:340px;display:grid;gap:10px}
.totals-box>div{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.totals-box .grand-total{background:#eff6ff;border-color:#bfdbfe}
.mtop{margin-top:18px}
.clean-list{margin:0;padding-left:18px}

.login-page{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#dbeafe,#f8fafc)}
.login-box{width:min(92vw,430px);background:#fff;border-radius:24px;padding:30px;box-shadow:0 18px 40px rgba(15,23,42,.12);text-align:center}
.login-logo{width:78px;height:78px;margin:0 auto 10px;display:block;border-radius:16px}

@media (max-width: 1100px){
  .grid.three{grid-template-columns:1fr}
  .toolbar-wide{grid-template-columns:minmax(0,1fr) 1fr auto auto}
}
@media (max-width: 960px){
  .mobile-menu-btn{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .2s ease;width:260px}
  body.nav-open .sidebar{transform:translateX(0)}
  .content{margin-left:0;padding:72px 16px 20px}
  .grid.two,.grid.three,.toolbar,.toolbar-wide{grid-template-columns:1fr}
  .page-header,.topbar{flex-direction:column;align-items:flex-start}
  .action-end{align-items:stretch}
}
@media (max-width: 700px){
  .card{padding:16px}
  .table{min-width:0;border-collapse:separate;border-spacing:0 10px;background:transparent}
  .table thead{display:none}
  .table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 12px;margin-bottom:10px;box-shadow:0 8px 18px rgba(15,23,42,.04)}
  .table td{border:none;padding:8px 0;text-align:left}
  .table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:#64748b;margin-bottom:2px;text-transform:uppercase;letter-spacing:.04em}
  .totals-box{max-width:none}
}


.searchable-select{position:relative}
.searchable-input{padding-right:40px}
.searchable-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:280px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 32px rgba(15,23,42,.12);z-index:30}
.searchable-dropdown.open{display:block}
.searchable-option{display:flex;width:100%;border:none;background:#fff;padding:12px 14px;text-align:left;cursor:pointer;flex-direction:column;gap:3px}
.searchable-option span{color:var(--muted);font-size:13px}
.searchable-option:hover{background:#f8fbff}
.searchable-option.empty{cursor:default;color:var(--muted)}
.quick-access-card .actions{margin-top:16px}