:root{
  --bg:#0a0f1c;
  --bg-2:#0d1426;
  --surface:#111a2e;
  --surface-2:#16213a;
  --surface-3:#1b2846;
  --border:#22304f;
  --border-2:#2c3d62;
  --text:#e5ebf5;
  --muted:#8c9ab5;
  --primary:#14b8a6;
  --primary-dark:#0d9488;
  --primary-soft:rgba(20,184,166,.13);
  --accent:#f59e0b;
  --danger:#f43f5e;
  --success:#22c55e;
  --warning:#f59e0b;
  --info:#3b82f6;
  --violet:#8b5cf6;
  --sidebar:#070b16;
  --sidebar-2:#0c1324;
  --sidebar-text:#aeb9cf;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5);
  --radius:14px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Vazirmatn',Tahoma,system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 100% -10%,rgba(20,184,166,.08),transparent 60%),
             radial-gradient(900px 500px at 0% 110%,rgba(59,130,246,.07),transparent 60%),var(--bg);
  background-attachment:fixed;
  color:var(--text);font-size:14.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#24324f;border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ===== Layout ===== */
.app{display:flex;min-height:100vh}
.sidebar{
  width:260px;background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color:var(--sidebar-text);display:flex;flex-direction:column;
  position:fixed;top:0;right:0;bottom:0;z-index:50;border-left:1px solid #141d33;
}
.brand{display:flex;align-items:center;gap:12px;padding:22px;border-bottom:1px solid rgba(255,255,255,.05)}
.brand-logo{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--primary),#3b82f6);display:grid;place-items:center;box-shadow:0 6px 18px rgba(20,184,166,.35)}
.brand-logo svg{width:26px;height:26px;fill:#fff}
.brand-text h1{font-size:18px;color:#fff;font-weight:800}
.brand-text p{font-size:11.5px;color:#7b88a3;margin-top:1px}
.nav{padding:14px 12px;flex:1;overflow-y:auto}
.nav-label{font-size:11px;color:#56637d;padding:14px 12px 8px;letter-spacing:.5px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:4px;border-radius:11px;cursor:pointer;color:var(--sidebar-text);transition:all .2s;font-size:14.5px;font-weight:500;border:1px solid transparent;user-select:none}
.nav-item svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,.04);color:#fff}
.nav-item.active{background:linear-gradient(90deg,rgba(20,184,166,.2),rgba(20,184,166,.04));color:#fff;border-color:rgba(20,184,166,.3);box-shadow:inset -3px 0 0 var(--primary)}
.nav-item .badge{margin-right:auto;background:var(--accent);color:#1e293b;font-size:11px;font-weight:800;padding:1px 8px;border-radius:20px}
.sidebar-footer{padding:16px 18px;border-top:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:12px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0}
.sidebar-footer .info{flex:1;min-width:0}
.sidebar-footer .name{color:#fff;font-size:13.5px;font-weight:600}
.sidebar-footer .role{color:#7b88a3;font-size:11.5px;display:flex;align-items:center;gap:6px}
.sidebar-footer .role::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--success)}

.main{flex:1;margin-right:260px;display:flex;flex-direction:column;min-height:100vh;min-width:0}
.topbar{background:rgba(10,15,28,.75);padding:14px 30px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30;backdrop-filter:blur(10px)}
.topbar-title h2{font-size:19px;font-weight:800}
.topbar-title p{font-size:12.5px;color:var(--muted)}
.topbar-spacer{flex:1}
.topbar-date{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;padding:8px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.topbar-date svg{width:16px;height:16px;fill:var(--primary)}
.search-box{position:relative;width:280px}
.search-box input{width:100%;padding:9px 38px 9px 14px;border:1px solid var(--border);border-radius:10px;font-size:13.5px;background:var(--surface);color:var(--text);transition:all .2s}
.search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.search-box svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:var(--muted)}
.icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;cursor:pointer;position:relative;transition:all .2s;color:var(--muted)}
.icon-btn:hover{border-color:var(--border-2);color:var(--text)}
.icon-btn svg{width:18px;height:18px;fill:currentColor}
.icon-btn .count{position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;padding:0 4px;background:var(--danger);border-radius:9px;color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.menu-btn{display:none}

.content{padding:26px 30px;flex:1}
.page{display:none;animation:fade .3s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== Stats ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px}
.stat-card{background:linear-gradient(160deg,var(--surface-2),var(--surface));border-radius:var(--radius);padding:20px;border:1px solid var(--border);position:relative;overflow:hidden;transition:all .25s;cursor:pointer}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-2)}
.stat-top{display:flex;align-items:center;gap:14px}
.stat-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.stat-icon svg{width:26px;height:26px;fill:#fff}
.stat-info{flex:1}
.stat-info .num{font-size:28px;font-weight:900;line-height:1.2}
.stat-info .lbl{font-size:13px;color:var(--muted)}
.stat-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.06);margin-top:16px;overflow:hidden}
.stat-bar span{display:block;height:100%;border-radius:5px;transition:width .8s ease}
.c-info .stat-icon{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 0 0 6px rgba(59,130,246,.12)}
.c-info .stat-bar span{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.c-success .stat-icon{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 0 0 6px rgba(34,197,94,.12)}
.c-success .stat-bar span{background:linear-gradient(90deg,#22c55e,#4ade80)}
.c-warning .stat-icon{background:linear-gradient(135deg,#f59e0b,#ea580c);box-shadow:0 0 0 6px rgba(245,158,11,.12)}
.c-warning .stat-bar span{background:linear-gradient(90deg,#f59e0b,#fb923c)}
.c-violet .stat-icon{background:linear-gradient(135deg,#8b5cf6,#6d28d9);box-shadow:0 0 0 6px rgba(139,92,246,.12)}
.c-violet .stat-bar span{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}

/* ===== Card ===== */
.card{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);overflow:hidden}
.card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-head h3{font-size:15.5px;font-weight:800;flex:1}
.head-icon{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;flex-shrink:0}
.head-icon svg{width:18px;height:18px;fill:currentColor}
.card-body{padding:20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-dash{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:20px}
.mb{margin-bottom:20px}

/* ===== Forms ===== */
.form-section{margin-bottom:22px}
.form-section-title{font-size:13px;font-weight:800;color:var(--primary);margin-bottom:14px;padding-bottom:8px;border-bottom:2px dashed var(--border);display:flex;align-items:center;gap:8px}
.form-section-title svg{width:15px;height:15px;fill:currentColor}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-field.full{grid-column:1/-1}
.form-field label{font-size:12.5px;font-weight:600;color:#c5cfe0}
.form-field label .req{color:var(--danger);margin-right:3px}
.form-field .hint{font-size:11.5px;color:var(--muted)}
.input,.form-field input,.form-field select,.form-field textarea{padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:13.5px;background:var(--bg-2);color:var(--text);transition:all .2s;width:100%}
.form-field textarea{resize:vertical;min-height:80px}
.form-field input::placeholder,.form-field textarea::placeholder{color:#5b6884}
.input:focus,.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
input[dir=ltr]{text-align:left}
.checkbox-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:var(--bg-2);padding:12px;border-radius:10px;border:1px dashed var(--border)}
.checkbox-item{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:background .2s;font-size:13px}
.checkbox-item:hover{background:var(--surface-2)}
.checkbox-item input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;user-select:none}
.switch input{appearance:none;width:40px;height:22px;border-radius:22px;background:#2a3757;position:relative;cursor:pointer;transition:.2s;flex-shrink:0}
.switch input::after{content:'';position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked{background:var(--primary)}
.switch input:checked::after{right:21px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding-top:16px;border-top:1px solid var(--border);margin-top:8px;flex-wrap:wrap}
.form-actions .switch{margin-left:auto}
.form-actions .rec-opts{margin-left:auto;display:flex;gap:18px;flex-wrap:wrap}
.form-actions .rec-opts .switch{margin-left:0}

.btn{padding:10px 20px;border-radius:10px;border:none;cursor:pointer;font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;white-space:nowrap;color:var(--text)}
.btn svg{width:16px;height:16px;fill:currentColor}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 6px 16px rgba(20,184,166,.25)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 22px rgba(20,184,166,.35)}
.btn-blue{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.btn-ghost{background:var(--surface-3)}
.btn-ghost:hover{background:#22325a}
.btn-outline{background:transparent;border:1px solid var(--border-2)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{background:rgba(244,63,94,.12);color:#fb7185;border:1px solid rgba(244,63,94,.3)}
.btn-danger:hover{background:rgba(244,63,94,.2)}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px}
.btn-sm svg{width:14px;height:14px}

/* ===== Table ===== */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:right;padding:12px 14px;background:var(--surface-2);color:var(--muted);font-weight:700;font-size:12px;border-bottom:1px solid var(--border);white-space:nowrap}
tbody td{padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
tbody tr{transition:background .15s;cursor:pointer}
tbody tr:hover{background:rgba(255,255,255,.025)}
tbody tr:last-child td{border-bottom:none}
.cell-user{display:flex;align-items:center;gap:10px}
.cell-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#14b8a6,#3b82f6);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex-shrink:0}
.code-pill{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--primary);background:var(--primary-soft);padding:3px 9px;border-radius:7px;letter-spacing:1px;direction:ltr;display:inline-block}
.muted{color:var(--muted)}
.ltr{direction:ltr;unicode-bidi:embed}
.row-actions{display:flex;gap:6px}

.badge-status{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700;border:1px solid transparent}
.badge-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.st-received{background:rgba(59,130,246,.13);color:#60a5fa;border-color:rgba(59,130,246,.25)}
.st-repairing{background:rgba(139,92,246,.13);color:#a78bfa;border-color:rgba(139,92,246,.25)}
.st-waiting_part{background:rgba(245,158,11,.13);color:#fbbf24;border-color:rgba(245,158,11,.25)}
.st-ready{background:rgba(34,197,94,.13);color:#4ade80;border-color:rgba(34,197,94,.25)}
.st-delivered{background:rgba(148,163,184,.12);color:#a3b0c6;border-color:rgba(148,163,184,.22)}
.st-returned{background:rgba(244,63,94,.12);color:#fb7185;border-color:rgba(244,63,94,.25)}

/* ===== Timeline ===== */
.timeline{position:relative;padding-right:24px}
.timeline::before{content:'';position:absolute;top:6px;bottom:6px;right:7px;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:16px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{content:'';position:absolute;right:-22px;top:8px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--tl,var(--primary))}
.timeline-card{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:11px 14px}
.timeline-card .meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:4px;flex-wrap:wrap}
.timeline-card .tag{background:var(--primary-soft);color:var(--primary);padding:1px 8px;border-radius:6px;font-weight:700}
.timeline-card .msg{font-size:13px;line-height:1.8;white-space:pre-line}
.timeline-card .msg b{color:var(--primary)}

.events{display:flex;flex-direction:column;gap:8px}
.event{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:10px;background:var(--bg-2);border:1px solid var(--border);cursor:pointer;transition:border-color .2s}
.event:hover{border-color:var(--border-2)}
.event .dot{width:10px;height:10px;border-radius:50%;margin-top:7px;flex-shrink:0;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.event .txt{flex:1;font-size:13px}
.event .txt b{font-weight:700}
.event .when{font-size:11.5px;color:var(--muted);white-space:nowrap}

.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.chip{padding:7px 15px;border-radius:20px;border:1px solid var(--border);background:var(--surface);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted);transition:all .2s;user-select:none}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.empty-state{text-align:center;padding:44px 20px;color:var(--muted)}
.empty-state svg{width:56px;height:56px;fill:#2a3757;margin-bottom:10px}

/* chart */
.chart{display:flex;gap:10px;align-items:flex-end;height:170px;padding-top:12px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.chart .bar{width:100%;max-width:46px;background:linear-gradient(180deg,#14b8a6,rgba(20,184,166,.25));border-radius:8px 8px 3px 3px;min-height:4px;position:relative;transition:height .8s ease}
.chart .bar.cur{background:linear-gradient(180deg,#f59e0b,rgba(245,158,11,.25))}
.chart .bar span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;color:var(--text)}
.chart .lbl{font-size:11px;color:var(--muted)}

.status-dist{display:flex;flex-direction:column;gap:12px}
.status-dist .r{display:flex;align-items:center;gap:10px;font-size:13px}
.status-dist .r .l{width:110px}
.status-dist .r .b{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden}
.status-dist .r .b span{display:block;height:100%;border-radius:8px}
.status-dist .r .n{width:34px;text-align:left;font-weight:700}

/* ===== Modal ===== */
.modal-bg{position:fixed;inset:0;background:rgba(3,6,14,.72);backdrop-filter:blur(4px);z-index:100;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-bg.open{display:flex;animation:fade .2s}
.modal{background:var(--surface);border:1px solid var(--border-2);border-radius:16px;width:100%;max-width:980px;box-shadow:var(--shadow-lg)}
.modal.sm{max-width:480px}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.modal-head h3{flex:1;font-size:16px;font-weight:800}
.modal-body{padding:22px}
.close-x{background:none;border:none;color:var(--muted);cursor:pointer;width:34px;height:34px;border-radius:9px;display:grid;place-items:center}
.close-x:hover{background:var(--surface-3);color:var(--text)}
.close-x svg{width:20px;height:20px;fill:currentColor}

.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kv div{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0}
.kv .k{font-size:11.5px;color:var(--muted)}
.kv .v{font-size:13.5px;font-weight:600;word-break:break-word}
.kv .full{grid-column:1/-1}

.stepper{display:flex;align-items:flex-start;margin:6px 0 4px}
.stepper .s{flex:1;text-align:center;position:relative;font-size:12px;color:var(--muted)}
.stepper .s::before{content:'';position:absolute;top:15px;left:50%;width:100%;height:3px;background:var(--border);z-index:0}
.stepper .s:first-child::before{display:none}
.stepper .s .c{width:32px;height:32px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;background:var(--bg-2);border:2px solid var(--border);position:relative;z-index:1;font-weight:800;font-size:13px}
.stepper .s.done{color:var(--text)}
.stepper .s.done .c{background:var(--primary);border-color:var(--primary);color:#fff}
.stepper .s.done::before{background:var(--primary)}
.stepper .s.cur .c{box-shadow:0 0 0 5px var(--primary-soft)}
.stepper .s.warn .c{background:var(--warning);border-color:var(--warning)}

.status-actions{display:flex;gap:8px;flex-wrap:wrap}
.status-actions .btn{flex:1;min-width:120px}

.note{padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.9;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.22);color:#bfd3f8}
.note.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25);color:#f7d9a0}
.note code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;font-family:ui-monospace,Consolas,monospace;direction:ltr;display:inline-block}
.pattern-box{background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px;white-space:pre-line;line-height:1.9;position:relative}
.pattern-box .copy{position:absolute;top:8px;left:8px}

.support{background:linear-gradient(160deg,#13233f,#0f1a30);text-align:center;padding:26px 20px}
.support svg{width:54px;height:54px;fill:var(--primary)}
.support h4{font-size:17px;margin:8px 0 2px}
.support p{color:var(--muted);font-size:13px;margin-bottom:14px}
.support .phone{display:inline-flex;gap:10px;align-items:center;background:#05080f;padding:10px 22px;border-radius:14px;font-size:19px;font-weight:800;direction:ltr;border:1px solid var(--border)}

/* reminders (simple list like the template) */
.rem-list{display:flex;flex-direction:column;gap:12px}
.rem{border-radius:12px;padding:14px;border:1px solid;cursor:pointer;transition:transform .15s}
.rem:hover{transform:translateY(-1px)}
.rem .top{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.rem .tag{color:#fff;padding:2px 10px;border-radius:6px;font-size:11px;font-weight:800}
.rem strong{font-size:13.5px;flex:1}
.rem p{font-size:12.5px;line-height:1.9}
.rem .acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.rem.urgent{background:rgba(244,63,94,.08);border-color:rgba(244,63,94,.28)}
.rem.urgent .tag{background:var(--danger)}
.rem.urgent p{color:#fda4af}
.rem.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.28)}
.rem.warn .tag{background:var(--warning);color:#1e293b}
.rem.warn p{color:#fcd9a0}
.rem.info{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.28)}
.rem.info .tag{background:var(--info)}
.rem.info p{color:#bfd3f8}
.rem.ok{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.28)}
.rem.ok .tag{background:var(--success)}
.rem.ok p{color:#bbf7d0}

.rem-table tbody td{padding:9px 14px;font-size:13px}
.rtag{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:800;white-space:nowrap}
.rtag.urgent{background:rgba(244,63,94,.15);color:#fb7185}
.rtag.warn{background:rgba(245,158,11,.15);color:#fbbf24}
.rtag.info{background:rgba(59,130,246,.15);color:#60a5fa}
.rtag.ok{background:rgba(34,197,94,.15);color:#4ade80}

/* search filters */
.search-grid{display:grid;grid-template-columns:1fr 2fr .8fr 1fr .7fr auto;gap:14px;align-items:end}
@media(max-width:1100px){.search-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.search-grid{grid-template-columns:1fr 1fr}}

/* part purchases */
.grid-parts{display:grid;grid-template-columns:1fr;gap:20px}
.pay-toggle span{white-space:nowrap}
.pay-toggle{display:flex;gap:6px}
.pay-toggle label{flex:1;cursor:pointer}
.pay-toggle input{display:none}
.pay-toggle span{display:block;text-align:center;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--bg-2);font-size:13px;font-weight:700;color:var(--muted);transition:all .2s}
.pay-toggle input:checked+span{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.4);color:#4ade80}
.pay-toggle label:last-child input:checked+span{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.4);color:#fbbf24}
.part-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.part-sum div{background:var(--bg-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.part-sum span{display:block;font-size:11.5px;color:var(--muted)}
.part-sum b{font-size:16px;font-weight:900}
.part-sum .ok b{color:#4ade80}
.part-sum .warn b{color:#fbbf24}
.pill-btn{cursor:pointer;border:none;font-family:inherit}
/* list editors in settings */
.list-ed .chips{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;padding:10px;background:var(--bg-2);border:1px dashed var(--border);border-radius:10px;margin-bottom:8px}
.list-ed .chips span{display:inline-flex;align-items:center;gap:6px;background:var(--surface-3);border:1px solid var(--border-2);padding:3px 6px 3px 10px;border-radius:8px;font-size:12.5px}
.list-ed .chips button{background:none;border:none;color:#fb7185;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.list-ed .add{display:flex;gap:6px}
.list-ed .add input{flex:1}
@media(max-width:640px){.part-sum{grid-template-columns:1fr 1fr}}

/* toast */
#toasts{position:fixed;bottom:22px;left:22px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--surface-3);border:1px solid var(--border-2);border-right:4px solid var(--success);padding:12px 18px;border-radius:10px;box-shadow:var(--shadow-lg);font-size:13.5px;max-width:380px;transition:all .4s;white-space:pre-line}
.toast.err{border-right-color:var(--danger)}
.toast.warn{border-right-color:var(--warning)}
.toast.hide{opacity:0;transform:translateY(10px)}

.overlay{display:none}

@media(max-width:1200px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .grid-dash{grid-template-columns:1fr}
  .checkbox-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:960px){
  .sidebar{transform:translateX(100%);transition:transform .3s}
  .sidebar.open{transform:translateX(0)}
  .overlay.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
  .main{margin-right:0}
  .search-box,.topbar-date{display:none}
  .menu-btn{display:grid}
  .grid-2,.form-grid,.form-grid-4{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .stats-grid,.grid-2,.form-grid,.form-grid-2,.form-grid-4,.kv{grid-template-columns:1fr}
  .checkbox-grid{grid-template-columns:1fr 1fr}
  .content{padding:16px}
  .topbar{padding:12px 16px}
  .stepper .s span{display:none}
  .modal-bg{padding:12px}
}

/* ===== Print receipt ===== */
#print-area{display:none}
/* printed documents must not inherit the dark panel's table styles */
#print-area table,#print-area tr,#print-area td{white-space:normal;cursor:default}
#print-area tbody tr:hover{background:none}
#print-area .lbl-t td{border:none;padding:1px 0;vertical-align:top}
@media print{
  body{background:#fff !important;color:#000}
  .app,.modal-bg,#toasts{display:none !important}
  #print-area{display:block}
}