/* ===========================================================
   ARKA — Sales Dashboard (Dark Theme)
   Design tokens — پالت رسمی شرکت آرکا:
   --ink        #0C3748   سرمه‌ای تیره (پس‌زمینه‌ی پایه)
   --ink-2      #123F52   سطح پنل
   --ink-3      #17495D   سطح برجسته / حالت هاور
   --line       #1E5468   خطوط جداکننده و بوردر
   --paper      #FFFFF4   کرم روشن (رنگ متن روی پس‌زمینه‌ی تیره)
   --paper-dim  #9FB8C7   متن ثانویه (آبی-خاکستری کم‌رنگ)
   --clay       #4C7FC0   آبی اصلی — لهجه‌ی اصلی برند
   --clay-dim   #35619A
   --teal       #A6865F   قهوه‌ای طلایی — لهجه‌ی ثانویه برند
   --gold       #BFA073   طلایی روشن (جزئیات، به‌صورت محدود)
   Type:
   Display : "Space Grotesk" — geometric, architectural drafting feel
   Body    : "IRANSansX" / "Peyda" fallback — clean Persian UI face
   Mono    : "JetBrains Mono" — for figures / invoice numbers
   =========================================================== */


@font-face {
    font-family: 'Peyda';
    src: url('/PeydaWeb.ttf') format('truetype');
    font-display: swap;
}
:root{
  --ink:#0C3748;
  --ink-2:#123F52;
  --ink-3:#17495D;
  --ink-4:#1C5468;
  --line:#1E5468;
  --line-soft:#163F4F;
  --paper:#FFFFF4;
  --paper-dim:#9FB8C7;
  --paper-faint:#6E8998;
  --clay:#4C7FC0;
  --clay-soft:#7DA1D4;
  --clay-dim:#35619A;
  --teal:#A6865F;
  --teal-soft:#C1A47F;
  --gold:#BFA073;
  --red:#C0392B;
  --gray-neutral:#D9D9D9;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;

  --shadow-1: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-2: 0 1px 0 rgba(0,0,0,.5), 0 18px 40px -12px rgba(0,0,0,.6);

  --font-display:'Space Grotesk','Peyda',sans-serif;
  --font-body:'Peyda','Space Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

::selection{ background:var(--clay); color:var(--ink); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--paper-faint); }

/* ============ AMBIENT BACKGROUND ============ */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.35;
  mask-image: radial-gradient(circle at 20% 0%, black, transparent 75%);
}
.bg-blueprint{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 85% -10%, rgba(76,127,192,.16), transparent 45%),
    radial-gradient(circle at 0% 60%, rgba(166,134,95,.12), transparent 50%);
}

/* ============ LAYOUT SHELL ============ */
.app{
  position:relative; z-index:1;
  display:flex;
  min-height:100vh;
}

/* ============ SIDEBAR ============ */
.sidebar{
  width:278px;
  flex-shrink:0;
  background:linear-gradient(180deg, var(--ink-2), var(--ink));
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  height:100vh;
  position:sticky;
  top:0;
  transition:margin-right .35s cubic-bezier(.4,0,.2,1);
}
.sidebar.closed{ margin-right:-278px; }

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:26px 22px 22px;
  border-bottom:1px solid var(--line-soft);
}
.brand-mark{
  width:42px; height:42px;
  border-radius:11px;
  background:linear-gradient(155deg, var(--teal), var(--teal-soft));
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 6px 16px -4px rgba(76,127,192,.5);
}
.brand-icon{ width:24px; height:24px; color:var(--ink); }
.brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.2px; }
.brand-sub{ font-size:11.5px; color:var(--paper-faint); margin-top:2px; }

.nav{
  flex:1;
  overflow-y:auto;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.nav-group{ display:flex; flex-direction:column; gap:3px; }
.nav-group-label{
  font-size:11px;
  color:var(--paper-faint);
  letter-spacing:.6px;
  padding:0 12px 8px;
  text-transform:uppercase;
  font-family:var(--font-display);
}

.nav-item, .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--paper-dim);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    transition: background .15s ease, color .15s ease;
    background: none;
    border: none;
    width: 100%;
    text-align: right;
    font-family: var(--font-body);
}

    .nav-item:hover, .nav-link:hover {
        background: var(--ink-3);
        color: var(--paper);
    }

    
    /*.nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  color:var(--paper-dim);
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
  position:relative;
  transition:background .15s ease, color .15s ease;
  background:none;
  border:none;
  width:100%;
  text-align:right;
  font-family:var(--font-body);
}*/
    .nav-item:hover {
        background: var(--ink-3);
        color: var(--paper);
    }

    .nav-item.has-children.open {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 10px 12px;
        border-radius: var(--radius-sm);
        color: var(--paper-dim);
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
        position: relative;
        transition: background .15s ease, color .15s ease;
        background: none;
        border: none;
        width: 100%;
        text-align: right;
        font-family: var(--font-body);
        flex-direction: column;
    }

    .nav-ic {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        display: inline-block;
        position: relative;
    }
.nav-ic::before, .nav-ic::after{ content:''; position:absolute; }

/* icon shapes via simple geometric CSS (no external icon font dependency) */
.nav-ic[data-ic="plus"]{ } 
.nav-ic[data-ic="plus"]::before{ width:14px; height:2px; background:currentColor; top:8px; left:2px; border-radius:1px;}
.nav-ic[data-ic="plus"]::after{ width:2px; height:14px; background:currentColor; top:2px; left:8px; border-radius:1px;}

.nav-ic[data-ic="draft"]{ border:1.6px solid currentColor; border-radius:3px; }
.nav-ic[data-ic="draft"]::before{ width:9px; height:1.4px; background:currentColor; top:5px; left:4px; }
.nav-ic[data-ic="draft"]::after{ width:9px; height:1.4px; background:currentColor; top:9px; left:4px; }

.nav-ic[data-ic="official"]{ border:1.6px solid currentColor; border-radius:50%; }
.nav-ic[data-ic="official"]::before{ width:5px; height:8px; border-bottom:1.6px solid currentColor; border-left:1.6px solid currentColor; transform:rotate(-45deg); top:4px; left:5px; }

.nav-ic[data-ic="unofficial"]{ border:1.6px dashed currentColor; border-radius:50%; }

.nav-ic[data-ic="cash"]{ border:1.6px solid currentColor; border-radius:5px; }
.nav-ic[data-ic="cash"]::before{ width:5px; height:5px; border:1.6px solid currentColor; border-radius:50%; top:5px; left:5.5px; }

.nav-ic[data-ic="card"]{ border:1.6px solid currentColor; border-radius:4px; }
.nav-ic[data-ic="card"]::before{ width:18px; height:4px; background:currentColor; top:5px; left:-1.6px; }

.nav-ic[data-ic="chart"]::before{ width:2px; height:8px; background:currentColor; bottom:0; left:2px; }
.nav-ic[data-ic="chart"]::after{ width:2px; height:13px; background:currentColor; bottom:0; left:8px; box-shadow:6px -5px 0 currentColor; }

.nav-ic[data-ic="users"]{ border:1.6px solid currentColor; border-radius:50%; width:9px; height:9px; top:1px; left:1px; }
.nav-ic[data-ic="users"]::before{ width:9px; height:9px; border:1.6px solid currentColor; border-radius:50%; top:1px; left:7px; }

.nav-ic[data-ic="settings"]{ border:1.6px solid currentColor; border-radius:50%; }
.nav-ic[data-ic="settings"]::before{ width:6px; height:6px; border:1.6px solid currentColor; border-radius:50%; top:4px; left:4.3px; background:var(--ink-2); }

.nav-text{ flex:1; }
.nav-badge{
  background:var(--clay); color:var(--ink);
  font-size:11px; font-weight:700;
  padding:2px 7px; border-radius:20px;
  font-family:var(--font-mono);
}
.nav-caret{
  width:7px; height:7px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  transition:transform .2s ease;
  opacity:.6;
}
.nav-item.has-children.open .nav-caret{ transform:rotate(225deg); }

.nav-children{
  display:flex; flex-direction:column;
  padding:4px 0 6px 12px;
  margin-right:21px;
  border-right:1px solid var(--line-soft);
  gap:1px;
  overflow:hidden;
}
.nav-item.has-children:not(.open) .nav-children{ display:none; }

.nav-sublink{
  display:flex; align-items:center; gap:9px;
  padding:8px 12px;
  font-size:13.2px;
  color:var(--paper-dim);
  text-decoration:none;
  border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.nav-sublink .dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--paper-faint);
  flex-shrink:0;
  transition:background .15s ease, transform .15s ease;
}
.nav-sublink:hover{ background:var(--ink-3); color:var(--paper); }
.nav-sublink.active{ color:var(--clay-soft); }
.nav-sublink.active .dot{ background:var(--clay); transform:scale(1.3); }

.sidebar-foot{
  padding:16px;
  border-top:1px solid var(--line-soft);
}
.user-card{
  display:flex; align-items:center; gap:10px;
  padding:8px;
  border-radius:var(--radius-sm);
}
.avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(155deg, var(--teal), var(--teal-soft));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  flex-shrink:0;
}
.user-meta{ display:flex; flex-direction:column; flex:1; line-height:1.3; }
.user-name{ font-size:13px; font-weight:600; }
.user-role{ font-size:11px; color:var(--paper-faint); }

/* ============ ICON BUTTON GENERIC ============ */
.icon-btn{
  width:34px; height:34px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--ink-3);
  color:var(--paper-dim);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  position:relative;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
  flex-shrink:0;
}
.icon-btn:hover{ background:var(--ink-4); color:var(--paper); border-color:var(--paper-faint); }
.icon-btn.ghost{ background:transparent; }

[data-ic="logout"]{ width:15px; height:15px; position:relative; display:inline-block; }
[data-ic="logout"]::before{ content:''; position:absolute; width:9px; height:9px; border:1.6px solid currentColor; border-right:none; border-radius:3px 0 0 3px; top:3px; left:1px; }
[data-ic="logout"]::after{ content:''; position:absolute; width:6px; height:1.6px; background:currentColor; top:7px; left:6px; }

[data-ic="bell"]{ width:15px; height:15px; position:relative; display:inline-block; }
[data-ic="bell"]::before{ content:''; position:absolute; width:11px; height:9px; border:1.6px solid currentColor; border-bottom:none; border-radius:9px 9px 0 0; top:2px; left:2px; }
[data-ic="bell"]::after{ content:''; position:absolute; width:13px; height:1.6px; background:currentColor; top:11px; left:1px; }
.ping{
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--clay);
  box-shadow:0 0 0 2px var(--ink-2);
}

/* ============ MAIN ============ */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  display:flex; align-items:center; gap:18px;
  padding:18px 32px;
  border-bottom:1px solid var(--line);
  position:sticky; top:0;
  background:rgba(12,55,73,.85);
  backdrop-filter:blur(14px);
  z-index:5;
}
.burger{
  display:none;
  width:36px; height:36px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--ink-3);
  flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  cursor:pointer;
  flex-shrink:0;
}
.burger span{ width:16px; height:1.6px; background:var(--paper-dim); border-radius:2px; }

.topbar-title h1{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  margin:0;
  letter-spacing:.1px;
}
.crumb{
  display:flex; gap:6px; align-items:center;
  font-size:12px; color:var(--paper-faint);
  margin-top:4px;
}
.crumb .sep{ color:var(--line); }
.crumb-active{ color:var(--clay-soft); }

.topbar-actions{
  margin-right:auto;
  display:flex; align-items:center; gap:12px;
}

.search-box{
  display:flex; align-items:center; gap:9px;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:11px;
  padding:9px 14px;
  width:300px;
  transition:border-color .15s ease;
}
.search-box:hover, .search-box:focus-within{ border-color:var(--paper-faint); }
.search-ic{ width:14px; height:14px; border:1.6px solid var(--paper-faint); border-radius:50%; position:relative; flex-shrink:0; }
.search-ic::after{ content:''; position:absolute; width:6px; height:1.6px; background:var(--paper-faint); bottom:-3px; left:11px; transform:rotate(45deg); }
.search-box input{
  background:none; border:none; outline:none;
  color:var(--paper); font-family:var(--font-body);
  font-size:13px; flex:1;
}
.search-box input::placeholder{ color:var(--paper-faint); }
.search-box kbd{
  font-family:var(--font-mono);
  font-size:10.5px; color:var(--paper-faint);
  border:1px solid var(--line);
  padding:2px 6px; border-radius:5px;
}

.divider-v{ width:1px; height:24px; background:var(--line); }

.btn-primary{
  display:flex; align-items:center; gap:8px;
  background:var(--clay);
  color:var(--ink);
  border:none;
  border-radius:11px;
  padding:10px 18px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:13.5px;
  cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(76,127,192,.55);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary:hover{ background:var(--clay-soft); transform:translateY(-1px); }
.btn-primary:active{ transform:translateY(0); }
[data-ic="plus-sm"]{ width:11px; height:11px; position:relative; display:inline-block; }
[data-ic="plus-sm"]::before{ content:''; position:absolute; width:11px; height:2px; background:currentColor; top:4.5px; border-radius:1px; }
[data-ic="plus-sm"]::after{ content:''; position:absolute; width:2px; height:11px; background:currentColor; left:4.5px; border-radius:1px; }

/* ============ CONTENT ============ */
.content{
  padding:28px 32px 48px;
  display:flex; flex-direction:column; gap:24px;
  max-width:100%;
  min-width:0;
  overflow-x:hidden; /* هر عنصر عریض داخل صفحه، کل صفحه و منو را عریض نکند؛ خودش داخل خودش اسکرول شود */
}
.main{ max-width:100%; overflow-x:hidden; }
.topbar{ max-width:100%; min-width:0; }

/* ---- KPI ROW ---- */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.kpi-card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px 20px 18px;
  position:relative;
  overflow:hidden;
}
.kpi-card.kpi-clay{
  background:linear-gradient(160deg, rgba(76,127,192,.16), var(--ink-2) 60%);
  border-color:rgba(76,127,192,.35);
}
.kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.kpi-label{ font-size:12.5px; color:var(--paper-dim); }
.kpi-ic{ width:16px; height:16px; opacity:.7; color:var(--clay-soft); display:inline-block; position:relative; }
.kpi-card .kpi-ic[data-ic="draft"]{ border:1.6px solid currentColor; border-radius:3px; }
.kpi-card .kpi-ic[data-ic="official"]{ border:1.6px solid currentColor; border-radius:50%; }
.kpi-card .kpi-ic[data-ic="warn"]{ width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:14px solid currentColor; opacity:.55; }
.kpi-card .kpi-ic[data-ic="cash"]{ border:1.6px solid currentColor; border-radius:5px; }
.kpi-card .kpi-ic[data-ic="cash"]::before{ content:''; position:absolute; width:5px; height:5px; border:1.6px solid currentColor; border-radius:50%; top:5px; left:5.5px; }

.kpi-value{
  font-family:var(--font-display);
  font-size:25px; font-weight:700;
  letter-spacing:.2px;
}
.kpi-value small{ font-size:12px; font-weight:500; color:var(--paper-faint); margin-right:4px; }

.kpi-foot{
  display:flex; align-items:center; gap:6px;
  font-size:12px; margin-top:12px;
  color:var(--paper-faint);
}
.kpi-foot.up{ color:var(--teal-soft); }
.kpi-foot.down{ color:var(--red); }
[data-ic="up"]{ width:9px; height:9px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(-45deg); display:inline-block; }
[data-ic="down"]{ width:9px; height:9px; border-bottom:1.6px solid currentColor; border-left:1.6px solid currentColor; transform:rotate(-45deg); display:inline-block; }
[data-ic="clock"]{ width:11px; height:11px; border:1.6px solid currentColor; border-radius:50%; position:relative; display:inline-block; }
[data-ic="clock"]::before{ content:''; position:absolute; width:1.4px; height:4px; background:currentColor; top:1.5px; left:4.3px; }

/* ---- TWO COLUMN GRID ---- */
.grid-2{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:22px;
  align-items:start;
}
.col-main, .col-side{ display:flex; flex-direction:column; gap:22px; }

.panel{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 24px;
}
.panel-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:18px;
  gap:14px;
  flex-wrap:wrap;
}
.panel-head h2{
  font-family:var(--font-display);
  font-size:15.5px; font-weight:600; margin:0 0 4px;
}
.panel-head p{ font-size:12.5px; color:var(--paper-faint); margin:0; }
.link-more{ font-size:12.5px; color:var(--clay-soft); text-decoration:none; white-space:nowrap; padding-top:2px; }
.link-more:hover{ text-decoration:underline; }

.seg-control{
  display:flex; background:var(--ink-3); border-radius:9px; padding:3px;
  flex-shrink:0;
}
.seg{
  border:none; background:none; color:var(--paper-faint);
  font-size:12px; padding:6px 13px; border-radius:7px; cursor:pointer;
  font-family:var(--font-body);
  transition:background .15s ease, color .15s ease;
}
.seg.active{ background:var(--ink-4); color:var(--paper); }

/* ---- CHART ---- */
.chart-wrap{ position:relative; }
.chart-svg{ width:100%; height:220px; overflow:visible; }
.grid-lines line{ stroke:var(--line-soft); stroke-width:1; }
.line-clay{ stroke:var(--clay); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.line-teal{ stroke:var(--teal-soft); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.dots-clay circle{ fill:var(--ink-2); stroke:var(--clay); stroke-width:2; }
.dot-end{ fill:var(--clay); }

.chart-x{
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--paper-faint);
  margin-top:8px;
  padding:0 2px;
}
.legend{ display:flex; gap:20px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.legend-item{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--paper-dim); }
.dot-clay, .dot-teal{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-clay{ background:var(--clay); }
.dot-teal{ background:var(--teal-soft); }

/* ---- TABLE ---- */
.table-wrap{ overflow-x:auto; }
.data-table{ width:100%; border-collapse:collapse; min-width:640px; }
.data-table th{
  text-align:right;
  font-size:11.5px;
  color:var(--paper-faint);
  font-weight:500;
  padding:0 10px 12px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.data-table td{
  padding:13px 10px;
  font-size:13px;
  border-bottom:1px solid var(--line-soft);
  white-space:nowrap;
}
.data-table tbody tr{ transition:background .15s ease; }
.data-table tbody tr:hover{ background:var(--ink-3); }
.data-table tbody tr:last-child td{ border-bottom:none; }
.mono{ font-family:var(--font-mono); color:var(--paper-dim); font-size:12.5px; }

.cell-user{ display:flex; align-items:center; gap:9px; }
.mini-avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--ink-4);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; color:var(--paper-dim);
  flex-shrink:0;
}

.tag{
  display:inline-flex; align-items:center;
  font-size:11.5px; padding:4px 10px;
  border-radius:20px; font-weight:600;
}
.tag-official{ background:rgba(166,134,95,.18); color:var(--teal-soft); }
.tag-unofficial{ background:rgba(217,217,217,.22); color:var(--paper-dim); }
.tag-draft{ background:rgba(159,184,199,.14); color:var(--paper-dim); }

.status{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; }
.status::before{ content:''; width:6px; height:6px; border-radius:50%; }
.status-paid::before{ background:var(--teal-soft); }
.status-paid{ color:var(--teal-soft); }
.status-pending::before{ background:var(--gray-neutral); }
.status-pending{ color:var(--gray-neutral); }
.status-overdue::before{ background:var(--red); }
.status-overdue{ color:var(--red); }

.row-btn{
  background:none; border:none; color:var(--paper-faint);
  font-size:16px; cursor:pointer; padding:4px 8px; border-radius:6px;
}
.row-btn:hover{ background:var(--ink-3); color:var(--paper); }

/* ---- QUICK ACTIONS ---- */
.muted-sm{ font-size:12.5px; color:var(--paper-faint); margin:0 0 16px; }
.qa-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qa-item{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:var(--ink-3);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px 10px;
  cursor:pointer;
  font-size:12.5px;
  font-family:var(--font-body);
  color:var(--paper-dim);
  transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.qa-item:hover{ transform:translateY(-2px); color:var(--paper); border-color:var(--paper-faint); }
.qa-ic{ width:22px; height:22px; position:relative; display:inline-block; }
.qa-1 .qa-ic{ border:2px solid var(--clay-soft); border-radius:5px; }
.qa-1:hover .qa-ic{ background:rgba(76,127,192,.12); }
.qa-2 .qa-ic{ border:2px solid var(--teal-soft); border-radius:50%; }
.qa-2:hover .qa-ic{ background:rgba(166,134,95,.14); }
.qa-3 .qa-ic{ border:2px dashed var(--gray-neutral); border-radius:50%; }
.qa-3:hover .qa-ic{ background:rgba(217,217,217,.16); }
.qa-4 .qa-ic{ border:2px solid var(--paper-dim); border-radius:6px; }
.qa-4:hover .qa-ic{ background:rgba(159,184,199,.1); }

/* ---- PRODUCT LIST ---- */
.product-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.product-list li{ display:flex; align-items:center; gap:12px; }
.product-rank{
  font-family:var(--font-mono);
  font-size:11px; color:var(--paper-faint);
  width:20px; flex-shrink:0;
}
.product-info{ flex:1; display:flex; flex-direction:column; gap:6px; }
.product-name{ font-size:13px; }
.bar-track{ height:5px; border-radius:6px; background:var(--ink-4); overflow:hidden; }
.bar-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg, var(--clay-dim), var(--clay)); }
.product-pct{ font-family:var(--font-mono); font-size:12px; color:var(--paper-dim); flex-shrink:0; }

/* ---- TIMELINE ---- */
.timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; position:relative; }
.timeline li{ display:flex; gap:12px; align-items:flex-start; position:relative; }
.timeline li:not(:last-child)::before{
  content:'';
  position:absolute; right:3.5px; top:14px; bottom:-16px;
  width:1px; background:var(--line);
}
.tl-dot{ width:8px; height:8px; border-radius:50%; margin-top:4px; flex-shrink:0; position:relative; z-index:1; }
.tl-paid{ background:var(--teal-soft); }
.tl-draft{ background:var(--paper-dim); }
.tl-warn{ background:var(--red); }
.timeline p{ font-size:12.8px; margin:0; color:var(--paper-dim); line-height:1.6; }
.timeline p b{ color:var(--paper); font-weight:600; }
.tl-time{ font-size:11px; color:var(--paper-faint); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px){
  .grid-2{ grid-template-columns:1fr; }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 880px){
  .sidebar{ position:fixed; right:0; top:0; z-index:50; box-shadow:var(--shadow-2); margin-right:0; }
  .sidebar.closed{ margin-right:-278px; }
  .burger{ display:flex; }
  .topbar{ padding:16px 18px; }
  .content{ padding:20px 18px 40px; }
  .search-box{ display:none; }
  .kpi-row{ grid-template-columns:1fr 1fr; gap:12px; }
  .topbar-title h1{ font-size:17px; }
  .panel{ padding:18px 18px; }
  .panel-head{ align-items:flex-start; }
  .seg-control{ flex-wrap:wrap; }
}

@media (max-width: 560px){
  .kpi-row{ grid-template-columns:1fr; }
  .qa-grid{ grid-template-columns:1fr 1fr; }
  .btn-primary span:last-child{ display:none; }
  .btn-primary{ padding:10px; }

  .content{ padding:16px 14px 32px; }
  .panel{ padding:16px 14px; }
  .panel-head h2{ font-size:14.5px; }
  .panel-head p{ font-size:11.5px; }
  .panel-head .seg-control{ width:100%; justify-content:space-between; }
  .panel-head .seg{ flex:1; text-align:center; padding:6px 8px; }
  .link-more{ font-size:12px; }

  .kpi-card{ padding:16px 16px 14px; }
  .kpi-value{ font-size:21px; }
  .kpi-label{ font-size:11.5px; }

  .chart-svg{ height:180px; }
  .chart-x{ font-size:9.5px; }
  .legend{ gap:14px; flex-wrap:wrap; }

  .data-table{ min-width:520px; }
  .data-table th, .data-table td{ font-size:12px; padding:10px 8px; }

  .grid-2, .col-main, .col-side{ gap:16px; }
}

@media (max-width: 400px){
  .qa-grid{ grid-template-columns:1fr; }
  .kpi-value{ font-size:19px; }
  .kpi-value small{ display:block; margin-right:0; margin-top:2px; }
  .mini-avatar{ width:22px; height:22px; font-size:9px; }
  .data-table{ min-width:460px; }
}

/* فرم بازه‌ی دلخواه در پنل مدیریت روی موبایل زیر هم قرار بگیرد */
@media (max-width: 640px){
  #admCustomRange{ flex-direction:column; align-items:stretch !important; }
  #admCustomRange label{ display:flex; justify-content:space-between; align-items:center; }
  #admCustomRange input[type="date"]{ flex:1; margin-inline-start:10px !important; }
  #admCustomRange button{ width:100%; }
}

/* ============================================================
   ریسپانسیو سراسری موبایل — روی همهٔ صفحات اعمال می‌شود
   (چون این فایل در Site.master بارگذاری می‌شود)
   ============================================================ */
html, body{ max-width:100%; overflow-x:hidden; }
img, svg, video, canvas{ max-width:100%; height:auto; }

@media (max-width: 900px){
  /* هر جدولی بدون در نظر گرفتن کلاس، اگر سرریز شد قابل اسکرول افقی شود */
  table{ max-width:100%; }
  table:not(.data-table):not(.no-scroll){
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }

  /* گرید‌های چندستونهٔ فرم‌ها یک‌ستونه شوند (وقتی به‌صورت inline تعریف شده باشند) */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }

  /* ردیف‌های فرم/تولبار/فیلتر که با flex ساخته شده‌اند زیر هم بیفتند */
  .order-form-row, .form-row, .filter-row, .filters-row, .toolbar-row,
  .actions-row, .btns-row, .search-row, .cheque-row-grid,
  [class$="-row"]{
    flex-wrap:wrap !important;
    row-gap:10px;
  }
  .order-form-row > *, .form-row > *, .filter-row > *, .filters-row > *{
    flex:1 1 220px !important;
    min-width:0 !important;
  }

  /* ورودی‌ها و انتخاب‌گرها تمام‌عرض شوند مگر آن‌که صراحتاً کوچک تعریف شده باشند */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
  select, textarea{
    max-width:100%;
  }

  .content{ padding:16px 14px 32px !important; }
  .panel{ padding:16px 14px !important; }
  .auth-body{ padding:22px 18px 26px !important; }
  .auth-head{ padding:28px 20px 22px !important; }
}

@media (max-width: 480px){
  .content{ padding:12px 10px 28px !important; }
  .panel{ padding:12px 10px !important; }
  h1{ font-size:19px; }
  h2{ font-size:16px; }
  .btn, .btn-primary, .btn-secondary, button[class*="btn"]{
    padding-left:12px; padding-right:12px;
  }
}

/* ============ ACCESSIBILITY ============ */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--clay-soft);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   یکنواخت‌سازی ظاهر <select> های ساده (غیر بوت‌استرپ) در کل سایت
   ------------------------------------------------------------
   خیلی از صفحات (ثبت سفارش، رانندگان، تنظیمات دسته‌بندی، کارت‌های
   بانکی، تنظیمات باربری، ثبت محصول و ...) از کلاس‌های محلی خودشان
   مثل order-select یا wh-input روی <select> استفاده می‌کنند که فقط
   رنگ/پدینگ را ست می‌کنند و به فلش پیش‌فرض مرورگر دست نمی‌زنند؛ روی
   موبایل (خصوصاً در صفحات راست‌به‌چپ) این فلش پیش‌فرض گاهی جابه‌جا،
   بریده یا ناهماهنگ با بقیه‌ی طراحی نمایش داده می‌شود.
   این‌جا یک فلش سفارشی و هماهنگ با تم (روشن/تیره) جایگزین آن می‌شود؛
   select.form-select (که استایل بوت‌استرپ خودش را دارد) از این قانون
   مستثنی است تا با آن تداخل نکند.
   ============================================================ */
select:not(.form-select){
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 14px center !important;
  background-size: 11px 7px !important;
  padding-left: 36px !important;
}
select:not(.form-select)::-ms-expand{ display:none; }

@media (max-width: 480px){
  select:not(.form-select){
    background-position: left 12px center !important;
    padding-left: 32px !important;
  }
}

/* ============================================================
   فشرده‌سازی کارت‌های order-card (صفحهٔ ثبت سفارش) روی موبایل
   این کلاس داخل NewOrder.aspx تعریف شده ولی چون این فایل در
   Site.master بارگذاری می‌شود، این override اینجا هم اثر می‌گذارد.
   ============================================================ */
@media (max-width: 640px){
  .order-card{ padding:16px 14px !important; }
  .order-card .section-title{ font-size:14.5px; }
  .item-entry-box{ padding:14px !important; }
}
@media (max-width: 400px){
  .order-card{ padding:14px 10px !important; }
}