:root{
  --bg: #F1F5F1;
  --surface: #FFFFFF;
  --surface-2: #EEF2EC;
  --border: #DCE4DD;
  --border-strong: #C4D0C5;
  --text: #17261E;
  --text-muted: #64756A;
  --text-dim: #97A599;
  --teal: #0F6E56;
  --teal-dark: #0B5A46;
  --teal-light: #17886B;
  --teal-bg: #E2F1EA;
  --copper: #A8763A;
  --copper-bg: #F6EEDD;
  --store: #2E5AA8;
  --store-bg: #E8EFF9;
  --company: #7A3F73;
  --company-bg: #F3E7F1;
  --danger: #B84B32;
  --danger-bg: #FBEBE5;
  --shadow-sm: 0 1px 2px rgba(23,38,30,0.04);
  --shadow-md: 0 8px 20px -6px rgba(23,38,30,0.12);
  --shadow-lg: 0 20px 45px -12px rgba(11,90,70,0.35);
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background: radial-gradient(circle at 100% 0%, rgba(15,110,86,0.06), transparent 45%), var(--bg);
  color: var(--text);
  font-family:'Vazirmatn', sans-serif;
  min-height:100vh;
  padding: 28px 16px 90px;
}
.wrap{ max-width: 1160px; margin:0 auto; }

/* login */
.login-gate{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background: radial-gradient(circle at 20% 15%, #12816A 0%, transparent 45%), linear-gradient(135deg, var(--teal-dark), #0A2E25 85%);
}
.login-card{ background:#fff; border-radius:24px; padding:38px 34px; width:min(340px,92vw); text-align:center; box-shadow: var(--shadow-lg); }
.login-card .brand-mark{ margin:0 auto 16px; }
.login-card h2{ font-size:19px; font-weight:800; margin-bottom:6px; }
.login-card p{ font-size:12.5px; color:var(--text-muted); margin-bottom:22px; }
.pin-boxes{ display:flex; gap:10px; justify-content:center; direction:ltr; }
.pin-box{
  width:50px; height:58px; text-align:center; font-size:24px; font-weight:800;
  border-radius:13px; border:1.5px solid var(--border); background: var(--surface-2);
  color: var(--text); outline:none; font-family:inherit; transition: all .15s;
}
.pin-box:focus{ border-color: var(--teal); background:#fff; box-shadow: 0 0 0 3px var(--teal-bg); }
.login-err{ font-size:12.5px; color: var(--danger); margin-top:16px; min-height:16px; font-weight:600; }

header.top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px; margin-bottom:24px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand-mark{
  width:48px; height:48px; border-radius:14px;
  background: linear-gradient(150deg, var(--teal-light), var(--teal-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex-shrink:0;
  box-shadow: var(--shadow-md);
}
.brand h1{ font-size:22px; font-weight:800; letter-spacing:-.2px; }
.brand p{ font-size:12px; color:var(--text-muted); margin-top:3px; }

.metrics{ display:flex; gap:12px; flex-wrap:wrap; }
.metric{ background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 18px 11px 22px; min-width:132px; box-shadow: var(--shadow-sm); position:relative; overflow:hidden; }
.metric::before{ content:''; position:absolute; top:0; bottom:0; right:0; width:4px; background: var(--teal); }
.metric.gold::before{ background: var(--copper); }
.metric .lbl{ font-size:10.5px; color:var(--text-muted); }
.metric .num{ font-size:17px; font-weight:800; margin-top:3px; font-variant-numeric: tabular-nums; }
.metric.gold .num{ color: var(--copper); }
.metric.teal .num{ color: var(--teal); }

.layout{ display:flex; gap:22px; align-items:flex-start; }
.sidebar{ width:212px; flex-shrink:0; background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:14px; position:sticky; top:20px; box-shadow: var(--shadow-sm); }
.nav-item{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:11px; margin-bottom:6px; font-size:13.5px; font-weight:700; color:var(--text-muted); cursor:pointer; transition: all .15s; border-right:3px solid transparent; text-decoration:none; }
.nav-item:last-child{ margin-bottom:0; }
.nav-item svg{ width:17px; height:17px; flex-shrink:0; stroke: currentColor; }
.nav-item:hover{ background: var(--surface-2); color:var(--text); }
.nav-item.active{ background: var(--teal-bg); color: var(--teal); border-right-color: var(--teal); }
.nav-item .count{ margin-right:auto; background:var(--danger); color:#fff; font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:20px; }

.main{ flex:1; min-width:0; }

.card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px 26px 24px; margin-bottom:24px; box-shadow: var(--shadow-sm); }
.card:last-child{ margin-bottom:0; }
.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px; flex-wrap:wrap; }
.card-head h2{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:9px; }
.card-head h2::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--teal); }
.card-head .actions{ display:flex; gap:8px; }

.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field.span2{ grid-column: span 2; }
.field.span3{ grid-column: span 3; }
.field label{ font-size:12px; color:var(--text-muted); font-weight:500; }
input, select, textarea{
  background: var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:11px 13px;
  font-family:inherit; font-size:14px; color:var(--text); outline:none; transition: border-color .15s, background .15s;
  width:100%; font-variant-numeric: tabular-nums;
}
input::placeholder, textarea::placeholder{ color: var(--text-dim); }
input:focus, select:focus, textarea:focus{ border-color: var(--teal); background:#fff; }
input[readonly]{ cursor:pointer; background: var(--surface-2); }

.toggle-group{ display:flex; gap:10px; }
.toggle-chip{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; border:1.5px solid var(--border); border-radius:9px; padding:11px; font-size:13.5px; font-weight:600; color:var(--text-muted); cursor:pointer; user-select:none; transition: all .15s; background: var(--surface-2); }
.toggle-chip .tick{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:10px; color:transparent; background:#fff; flex-shrink:0; transition: all .15s; }
.toggle-chip.active[data-kind="store"]{ border-color: var(--store); color: var(--store); background: var(--store-bg); }
.toggle-chip.active[data-kind="store"] .tick{ background: var(--store); border-color: var(--store); color:#fff; }
.toggle-chip.active[data-kind="company"]{ border-color: var(--company); color: var(--company); background: var(--company-bg); }
.toggle-chip.active[data-kind="company"] .tick{ background: var(--company); border-color: var(--company); color:#fff; }
.toggle-chip.active[data-kind="percent"]{ border-color: var(--teal); color: var(--teal); background: var(--teal-bg); }
.toggle-chip.active[data-kind="percent"] .tick{ background: var(--teal); border-color: var(--teal); color:#fff; }
.toggle-chip.active[data-kind="amount"]{ border-color: var(--copper); color: var(--copper); background: var(--copper-bg); }
.toggle-chip.active[data-kind="amount"] .tick{ background: var(--copper); border-color: var(--copper); color:#fff; }
.toggle-chip.active[data-kind="installed"]{ border-color: var(--teal); color: var(--teal); background: var(--teal-bg); }
.toggle-chip.active[data-kind="installed"] .tick{ background: var(--teal); border-color: var(--teal); color:#fff; }
.toggle-chip.active[data-kind="pending"]{ border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.toggle-chip.active[data-kind="pending"] .tick{ background: var(--danger); border-color: var(--danger); color:#fff; }

button{ font-family:inherit; cursor:pointer; border:none; }
.btn{ padding:12px 22px; border-radius:10px; font-size:14px; font-weight:700; background: var(--teal); color:#fff; transition: filter .15s, transform .1s, box-shadow .15s; box-shadow: 0 4px 12px -4px rgba(15,110,86,0.5); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.btn:hover{ filter:brightness(1.07); }
.btn:active{ transform: scale(.98); }
.btn.ghost{ background:transparent; border:1.5px solid var(--border); color:var(--text); box-shadow:none; }
.btn.ghost:hover{ background: var(--surface-2); }
.btn.small{ padding:8px 14px; font-size:12.5px; border-radius:8px; }
.btn.danger{ background: transparent; border:1.5px solid var(--danger); color:var(--danger); box-shadow:none; }
.btn.danger:hover{ background: var(--danger-bg); }

.form-actions{ display:flex; justify-content:flex-end; margin-top:18px; }
.err-msg{ font-size:12.5px; color:var(--danger); margin-top:10px; min-height:15px; }

.flash{ padding:12px 16px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:18px; }
.flash.ok{ background: var(--teal-bg); color: var(--teal); }
.flash.err{ background: var(--danger-bg); color: var(--danger); }

.empty{ text-align:center; padding:44px 20px; color:var(--text-muted); border:1.5px dashed var(--border); border-radius:14px; font-size:13.5px; line-height:1.9; }
.empty b{ display:block; color:var(--text); font-size:14.5px; margin-bottom:5px; font-weight:700; }

.product-row{ display:flex; align-items:center; gap:14px; padding:13px 4px; border-bottom:1px dashed var(--border); flex-wrap:wrap; transition: background .15s; }
.product-row:hover{ background: var(--surface-2); border-radius:10px; }
.product-row:last-child{ border-bottom:none; }
.product-row .p-name{ flex:1; min-width:120px; font-size:14.5px; font-weight:700; }
.product-row .p-price{ font-size:13px; color: var(--copper); font-weight:700; font-variant-numeric: tabular-nums; }
.product-row .p-comm{ font-size:12px; color:var(--teal); font-weight:700; background:var(--teal-bg); padding:3px 9px; border-radius:20px; }
.product-row .p-sub{ font-size:12.5px; color:var(--text-muted); }

.badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.badge.store{ background: var(--store-bg); color: var(--store); }
.badge.company{ background: var(--company-bg); color: var(--company); }
.badge.installed{ background: var(--teal-bg); color: var(--teal); }
.badge.pending{ background: var(--danger-bg); color: var(--danger); }
.badge.progress{ background: var(--copper-bg); color: var(--copper); }

.ticket{ display:flex; align-items:stretch; gap:0; border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden; background: var(--surface); transition: box-shadow .15s; }
.ticket:hover{ box-shadow: var(--shadow-sm); }
.ticket:last-child{ margin-bottom:0; }
.ticket-main{ flex:1; padding:16px 18px; min-width:0; }
.ticket-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.ticket-product{ font-size:15px; font-weight:800; }
.ticket-rows{ display:flex; flex-wrap:wrap; gap:6px 20px; font-size:12.5px; color:var(--text-muted); }
.ticket-rows span b{ color:var(--text); font-weight:600; }

.ticket-stub{ width:170px; flex-shrink:0; background: var(--surface-2); border-right:1.5px dashed var(--border-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:14px 10px; position:relative; }
.ticket-stub .stub-lbl{ font-size:10.5px; color:var(--text-muted); }
.ticket-stub .stub-num{ font-size:16px; font-weight:800; color: var(--copper); font-variant-numeric: tabular-nums; }
.ticket-stub .stub-qty{ font-size:11px; color:var(--text-muted); font-variant-numeric: tabular-nums; }
.ticket-stub .stub-comm{ font-size:11px; color:var(--danger); font-variant-numeric: tabular-nums; }
.ticket-stub .stub-net{ font-size:11.5px; color:var(--teal); font-weight:700; font-variant-numeric: tabular-nums; }
.ticket-stub .stamp{ position:absolute; top:8px; left:8px; font-size:9px; color: var(--teal); border:1px solid var(--teal); border-radius:5px; padding:1px 5px; transform: rotate(-8deg); font-weight:700; opacity:.75; }
.pc-source{ font-size:10px; color:var(--text-dim); }

.report-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:14px; }
.report-card{ border:1px solid var(--border); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:9px; background: var(--surface-2); transition: transform .15s, box-shadow .15s; }
.report-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.report-card .rp-name{ font-size:14.5px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.report-card .rp-stats{ display:flex; gap:16px; font-size:12px; color:var(--text-muted); }
.report-card .rp-stats b{ color:var(--text); font-size:14px; display:block; font-variant-numeric: tabular-nums; }
.report-card .rp-revenue{ font-size:13px; color: var(--copper); font-weight:700; font-variant-numeric: tabular-nums; }
.report-card .rp-comm{ font-size:12px; color: var(--danger); font-weight:700; font-variant-numeric: tabular-nums; }
.report-card .rp-net{ font-size:12.5px; color: var(--teal); font-weight:800; font-variant-numeric: tabular-nums; }

.breakdown-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; background: var(--surface); font-size:12px; margin-bottom:6px; }
.breakdown-row:last-child{ margin-bottom:0; }
.breakdown-row .bd-num{ color: var(--copper); font-weight:700; font-variant-numeric: tabular-nums; }

.subtabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.subtab{ padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:700; border:1.5px solid var(--border); color:var(--text-muted); cursor:pointer; background:var(--surface-2); transition: all .15s; text-decoration:none; }
.subtab.active{ background: var(--teal); color:#fff; border-color:var(--teal); }

.search-bar{ display:flex; gap:10px; margin-bottom:16px; }
.search-bar input{ flex:1; }

.modal-overlay{ position:fixed; inset:0; background: rgba(23,38,30,0.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; backdrop-filter: blur(2px); }
.modal-overlay.hidden{ display:none; }
.modal{ background:#fff; border-radius:18px; padding:22px; width:100%; max-width:460px; max-height:85vh; overflow-y:auto; box-shadow: var(--shadow-lg); }
.modal.wide{ max-width:580px; }
.modal.narrow{ max-width:320px; padding:0 0 20px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-head h3{ font-size:16.5px; font-weight:800; }
.close-x{ background:none; color:var(--text-muted); font-size:18px; padding:4px 8px; border-radius:8px; cursor:pointer; border:none; font-family:inherit; }
.close-x:hover{ background: var(--surface-2); color:var(--text); }
.modal .field{ margin-bottom:14px; }
.modal-foot{ display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }

.pc-row{ display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px dashed var(--border); flex-wrap:wrap; }
.pc-row:last-child{ border-bottom:none; }
.pc-row .badge{ min-width:130px; }
.pc-row select{ width:auto; flex:1; min-width:110px; padding:8px 10px; font-size:12.5px; }
.pc-row input{ width:auto; flex:1; min-width:90px; padding:8px 10px; font-size:12.5px; }

.cal-head{ display:flex; align-items:center; justify-content:space-between; background: linear-gradient(135deg, var(--teal-light), var(--teal-dark)); padding:18px 20px; border-radius:18px 18px 0 0; margin-bottom:16px; }
.cal-head .cal-title{ font-size:15px; font-weight:800; color:#fff; }
.cal-nav{ width:30px; height:30px; border-radius:50%; background: rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; transition: background .15s; }
.cal-nav:hover{ background: rgba(255,255,255,0.32); }
.cal-nav::before{ content:''; width:7px; height:7px; border-top:2px solid #fff; border-right:2px solid #fff; border-radius:1px; }
.cal-nav.prev::before{ transform: rotate(-135deg); margin-right:-2px; }
.cal-nav.next::before{ transform: rotate(45deg); margin-left:-2px; }
.cal-body{ padding:0 20px; }
.cal-weekdays{ display:grid; grid-template-columns: repeat(7,1fr); margin-bottom:6px; }
.cal-weekdays span{ text-align:center; font-size:11px; color:var(--text-muted); font-weight:600; padding:4px 0; }
.cal-days{ display:grid; grid-template-columns: repeat(7,1fr); grid-auto-rows: 34px; gap:4px; }
.cal-day{ display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:13px; cursor:pointer; font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface-2); line-height:1; transition: all .12s; }
.cal-day:hover{ background: var(--teal-bg); color:var(--teal); }
.cal-day.today{ box-shadow: inset 0 0 0 1.5px var(--teal); font-weight:700; }
.cal-day.selected{ background: var(--teal); color:#fff; font-weight:700; box-shadow: 0 4px 10px -2px rgba(15,110,86,0.5); }
.cal-foot{ display:flex; justify-content:space-between; gap:10px; margin-top:16px; padding:0 20px; }
.cal-foot .btn{ flex:1; }

.status-line{ text-align:center; font-size:12px; color:var(--text-dim); margin-top:24px; }

@media (max-width:860px){
  .layout{ flex-direction:column; }
  .sidebar{ width:100%; position:static; display:flex; gap:8px; padding:8px; overflow-x:auto; }
  .nav-item{ margin-bottom:0; white-space:nowrap; border-right:none; border-bottom:3px solid transparent; }
  .nav-item.active{ border-right:none; border-bottom-color: var(--teal); }
}
@media (max-width:640px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .field.span2, .field.span3{ grid-column: span 2; }
  .ticket{ flex-direction:column; }
  .ticket-stub{ border-right:none; border-top:1.5px dashed var(--border-strong); flex-direction:row; width:100%; justify-content:space-between; padding:12px 18px; flex-wrap:wrap; }
  .metric{ flex:1; }
  .modal.narrow{ max-width:92vw; }
  .pin-box{ width:44px; height:52px; font-size:20px; }
}