:root {
  --brand: #1b3a63;
  --brand-dark: #05070c;
  --brand-light: #e8ecf3;
  --accent: #c9962c;
  --bg: #f4f6f5;
  --card-bg: #ffffff;
  --border: #e2e6e4;
  --text: #202623;
  --text-muted: #6b746f;
  --red: #c0392b;
  --green: #1a7a4c;
  --radius: 10px;
  --sidebar-w: 250px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Vazirmatn', 'IRANSans', Tahoma, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.ic { width: 19px; height: 19px; flex-shrink: 0; }

/* --- Shell layout --- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  background: var(--brand-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  z-index: 30;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.brand-logo { width: 38px; height: 38px; }
.brand-title { font-weight: 800; font-size: 16px; }
.brand-sub { font-size: 11px; color: rgba(255,255,255,0.65); }
.nav { flex: 1; overflow-y: auto; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,0.85); font-size: 14px; }
.nav-link:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.nav-link.active { background: var(--accent); color: #26210b; font-weight: 700; }
.sidebar-footer { padding: 14px; border-top: 1px solid rgba(255,255,255,0.12); }
.user-chip { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #26210b; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.user-name { font-size: 13px; font-weight: 700; }
.user-role { font-size: 11px; color: rgba(255,255,255,0.6); }
.logout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,0.08); border: none; color: #fff; padding: 9px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 13px; }
.logout-btn:hover { background: rgba(255,255,255,0.16); }

.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; align-items: center; gap: 12px; background: var(--card-bg); padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.menu-toggle { background: none; border: none; font-size: 20px; cursor: pointer; }
.topbar-title { font-weight: 700; }
.content { padding: 26px 30px 60px; max-width: 1200px; width: 100%; margin: 0 auto; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 25; }

/* --- Auth pages --- */
.auth-body { background: linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%); min-height: 100vh; }
.auth-main { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card { background: #fff; border-radius: 16px; padding: 36px 32px; width: 100%; max-width: 380px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.auth-logo { width: 56px; height: 56px; margin-bottom: 12px; }
.auth-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--brand-dark); }
.auth-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 20px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; text-align: right; }
.auth-form label { font-size: 13px; color: var(--text-muted); margin-bottom: -4px; }
.auth-form input { padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; }

/* --- Page structure --- */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.page-head h1 { font-size: 21px; margin: 0; }
.head-actions { display: flex; gap: 10px; }
.section-title { font-size: 16px; margin: 26px 0 12px; }

.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card h3 { margin-top: 0; font-size: 15px; }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.tab { padding: 8px 16px; border-radius: 8px 8px 0 0; color: var(--text-muted); font-size: 14px; }
.tab.active { background: var(--card-bg); border: 1px solid var(--border); border-bottom-color: var(--card-bg); color: var(--brand); font-weight: 700; margin-bottom: -1px; }

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; border: 1px solid transparent; font-family: inherit; font-size: 14px; cursor: pointer; font-weight: 600; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); text-decoration: none; }
.btn-secondary { background: var(--accent); color: #2a2409; }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: #f0f2f1; text-decoration: none; }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 6px 12px; font-size: 12px; }

/* --- Tables ---
   نکته مهم: روی سلول‌های جدول overflow-wrap:anywhere نمی‌گذاریم؛ چون وقتی جدول ستون‌های زیاد دارد و صفحه باریک است (موبایل)،
   مرورگر برای جا‌دادن متن در ستون باریک، حتی وسط کلمه‌های فارسی را حرف‌به‌حرف می‌شکند (خیلی بدخوان می‌شود).
   راه‌حل درست برای جدول‌های عریض این است که سلول‌ها با white-space:nowrap در عرض طبیعی خودشان بمانند
   و کل جدول داخل یک container با overflow-x:auto اسکرول افقی بخورد (نه اینکه متن داخل سلول بشکند). */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 11px 10px; text-align: right; border-bottom: 1px solid var(--border); font-size: 13.5px; white-space: nowrap; }
.table th { color: var(--text-muted); font-weight: 600; font-size: 12.5px; }
.table tbody tr:hover { background: #fafcfb; }
.empty-cell { text-align: center; color: var(--text-muted); padding: 30px 0 !important; }
.row-actions { display: flex; gap: 10px; white-space: nowrap; }
.link-btn { font-size: 12.5px; }
.link-btn.danger { color: var(--red); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; }

/* --- Badges --- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11.5px; font-weight: 700; }
.badge-blue { background: #e3edf8; color: #2b6ca3; }
.badge-amber { background: #fbf0dd; color: #a86c14; }
.badge-green { background: #e2f5ea; color: var(--green); }

/* --- Forms --- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row-full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.form-grid label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; width: 100%;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
.form-actions { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 6px; }

/* --- Detail / stats --- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.kv span { color: var(--text-muted); flex-shrink: 0; }
.kv b { overflow-wrap: anywhere; word-break: break-word; text-align: left; }
.kv.total { font-size: 15px; border-bottom: none; padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--border); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-amber { color: #a86c14; }
.text-muted { color: var(--text-muted); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
/* min-width:0 لازم است چون آیتم‌های گرید به‌طور پیش‌فرض min-width:auto دارند و اجازه نمی‌دهند عدد بلند (مثلاً مبالغ میلیاردی) کوچک‌تر از عرض طبیعی‌اش نمایش داده شود، در نتیجه از کادر بیرون می‌زند */
.stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; min-width: 0; overflow: hidden; }
.stat-label { font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.stat-value { font-size: 21px; font-weight: 800; color: var(--brand-dark); overflow-wrap: anywhere; word-break: break-word; }
.stat-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.stat-link { font-size: 12px; }

.quick-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.quick-link { background: var(--brand-light); color: var(--brand-dark); padding: 10px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 700; }
.quick-link:hover { background: #d9ede2; text-decoration: none; }

.report-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }

/* --- Calc box (live pricing preview) --- */
.calc-box { background: var(--brand-light); border: 1px dashed var(--brand); border-radius: 8px; padding: 14px 18px; font-size: 13.5px; }
.calc-box .kv { border-bottom: 1px dashed rgba(15,76,58,0.2); }

/* --- AI chat --- */
.ai-chat-log { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; padding: 4px 2px; }
.ai-msg { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.8; max-width: 85%; white-space: pre-wrap; }
.ai-msg-user { background: var(--brand-light); align-self: flex-end; color: var(--brand-dark); }
.ai-msg-assistant { background: #f2f3f5; align-self: flex-start; color: #2b2f33; }
.ai-chat-input-row { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
.ai-chat-input-row textarea { flex: 1; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; }

/* --- اسکن QR بارنامه --- */
.waybill-scan-box { grid-column: 1 / -1; background: #f7f9fb; border-radius: 8px; padding: 12px; margin: 4px 0; text-align: center; }

/* --- Charts --- */
.chart-svg { width: 100%; height: auto; }
.chart-grid { stroke: #e5e9e7; stroke-width: 1; }
.chart-axis { font-size: 10px; fill: #8a938e; }
.chart-label { font-size: 10.5px; fill: #6b746f; }
.chart-value { font-size: 10.5px; fill: #333; font-weight: 700; }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.legend { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* --- Invoice items --- */
.invoice-item-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.invoice-item-row input { padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; }

/* --- Alerts --- */
.alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.alert-danger { background: #fdecea; color: var(--red); }
.alert-success { background: #e2f5ea; color: var(--green); }
.alert-info { background: var(--brand-light); color: var(--brand-dark); }

/* --- Import (Excel/CSV) --- */
.import-box { border: 2px dashed var(--border); border-radius: 10px; padding: 24px; text-align: center; background: var(--brand-light); }
.import-box input[type=file] { margin: 12px auto; display: block; }
.import-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.import-table td, .import-table th { font-size: 12.5px; }
.row-ok { color: var(--green); font-weight: 700; }
.row-err { color: var(--red); font-weight: 700; }
.import-err-list { margin: 0; padding-inline-start: 18px; font-size: 12px; color: var(--red); }

/* --- Print / invoice sheet --- */
.print-body { background: #fff; }
.invoice-sheet { max-width: 800px; margin: 30px auto; padding: 30px; border: 1px solid var(--border); border-radius: 10px; }
.invoice-header { display: flex; justify-content: space-between; border-bottom: 2px solid var(--brand); padding-bottom: 16px; margin-bottom: 16px; }
.invoice-header h1 { font-size: 18px; margin: 0 0 4px; color: var(--brand-dark); }
.invoice-header div { font-size: 12.5px; color: var(--text-muted); }
.invoice-meta { text-align: left; }
.invoice-meta h2 { margin: 0 0 6px; font-size: 16px; }
.invoice-customer { margin-bottom: 14px; font-size: 14px; }
.invoice-table { margin-bottom: 16px; }
.invoice-totals { max-width: 340px; margin-inline-start: auto; }
.invoice-notes { margin-top: 16px; font-size: 13px; color: var(--text-muted); border-top: 1px dashed var(--border); padding-top: 10px; }
.invoice-sign-row { display: flex; justify-content: space-between; margin-top: 60px; font-size: 13px; color: var(--text-muted); }
@media print {
  .no-print, .shell aside, .topbar { display: none !important; }
  body { background: #fff; }
  .invoice-sheet { border: none; margin: 0; max-width: 100%; }
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .sidebar { position: fixed; right: 0; top: 0; transform: translateX(100%); transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .topbar { display: flex; }
  .content { padding: 18px 14px 50px; }
  .form-grid, .detail-grid, .report-grid { grid-template-columns: 1fr; }
  .sidebar-backdrop.show { display: block; }
  .invoice-item-row { grid-template-columns: 1fr; }
}