/* =========================================================================
   سامانه حقوق و دستمزد — تامین کالا باختر
   توکن‌های رنگ و تایپوگرافی از ماکاپ اولیه گرفته شده‌اند تا هویت بصری یکسان بماند.
   ========================================================================= */

@font-face{
  font-family:'Vazirmatn';
  src:url("../fonts/Vazirmatn-Regular.cdc140628f11.woff2") format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url("../fonts/Vazirmatn-Medium.dd2193b32cbe.woff2") format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url("../fonts/Vazirmatn-Bold.7958481fe611.woff2") format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Vazirmatn';
  src:url("../fonts/Vazirmatn-ExtraBold.a0f99309cd35.woff2") format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  --red:#E2231A;
  --red-deep:#A81812;
  --red-soft:#F4B7B2;
  --paper:#F3EEE4;
  --paper-2:#FFFFFF;
  --ink:#1B1815;
  --muted:#8A8175;
  --line:rgba(27,24,21,0.11);
  --green:#3E8E5B;
  --green-soft:rgba(62,142,91,.13);
  --amber:#B57B14;
  --amber-soft:rgba(181,123,20,.14);
  --blue:#2F6B8F;
  --blue-soft:rgba(47,107,143,.13);
  --shadow:0 1px 2px rgba(27,24,21,.04), 0 8px 24px -12px rgba(27,24,21,.18);
  --radius:16px;
  --sidebar-w:264px;
}
[data-theme="dark"]{
  --paper:#161210;
  --paper-2:#1F1B18;
  --ink:#F1ECE3;
  --muted:#9C948A;
  --line:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  --red-soft:#4A1815;
  --green:#66B183;
  --green-soft:rgba(102,177,131,.15);
  --amber:#D9A94F;
  --amber-soft:rgba(217,169,79,.16);
  --blue:#6BA6C9;
  --blue-soft:rgba(107,166,201,.16);
}

*{box-sizing:border-box; margin:0; padding:0;}
/* تا قبل از راه‌اندازی Alpine، عناصر x-show پنهان بمانند */
[x-cloak]{display:none !important;}
textarea.input{resize:vertical; line-height:1.9;}
html{scroll-behavior:smooth;}
body{
  font-family:'Vazirmatn', Tahoma, sans-serif;
  background:var(--paper);
  color:var(--ink);
  transition:background .35s ease, color .35s ease;
  min-height:100vh;
  font-feature-settings:'ss01' on;
}
::selection{background:var(--red); color:#fff;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,select,textarea{font-family:inherit; color:inherit;}
.num{font-variant-numeric:tabular-nums;}

/* ===================================================== layout */
.app{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--paper-2);
  border-inline-start:1px solid var(--line);
  padding:28px 20px; display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:background .35s ease, transform .3s ease; z-index:40;
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding:0 6px 26px; margin-bottom:14px; border-bottom:1px solid var(--line);
}
.brand-mark{width:42px; height:42px; flex-shrink:0;}
.brand-mark svg,
.brand-mark img{width:100%; height:100%; display:block; object-fit:contain;}
.brand-text{line-height:1.35;}
.brand-text b{display:block; font-weight:800; font-size:15px; letter-spacing:-.2px;}
.brand-text span{display:block; font-size:11px; color:var(--muted); font-weight:500;}

.nav-label{font-size:11px; color:var(--muted); font-weight:700; padding:16px 12px 8px; letter-spacing:.3px;}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--ink); opacity:.72;
  transition:background .18s ease, opacity .18s ease;
}
.nav-item svg{width:18px; height:18px; flex-shrink:0; opacity:.85;}
.nav-item:hover{background:var(--paper); opacity:1;}
.nav-item.active{
  background:var(--red); color:#fff; opacity:1;
  box-shadow:0 6px 16px -6px rgba(226,35,26,.55);
}
.nav-item.active svg{opacity:1;}
.nav-item.active:hover{background:var(--red-deep);}
.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid var(--line);}
.user-chip{display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px;}
.user-chip .av{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg, var(--red), var(--red-deep));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px; flex-shrink:0;
}
.user-chip .meta b{display:block; font-size:12.5px; font-weight:700;}
.user-chip .meta span{display:block; font-size:11px; color:var(--muted);}
.logout-link{
  display:block; margin-top:8px; padding:8px 10px; border-radius:9px;
  font-size:12px; font-weight:600; color:var(--muted); text-align:center;
  border:1px solid var(--line);
}
.logout-link:hover{color:var(--red); border-color:var(--red);}

.main{flex:1; min-width:0; padding:26px 32px 60px;}

.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; gap:16px; flex-wrap:wrap;}
.topbar h1{font-size:21px; font-weight:800; letter-spacing:-.3px;}
.topbar .sub{font-size:12.5px; color:var(--muted); font-weight:500; margin-top:4px;}
.topbar-actions{display:flex; align-items:center; gap:10px;}

.period-select{
  display:flex; align-items:center; gap:8px;
  background:var(--paper-2); border:1px solid var(--line);
  padding:8px 14px; border-radius:11px; font-size:12.5px; font-weight:600;
  box-shadow:var(--shadow);
}
.period-select svg{width:15px; height:15px; color:var(--muted);}
.theme-toggle{
  width:42px; height:42px; border-radius:12px;
  background:var(--paper-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.theme-toggle svg{width:18px; height:18px; position:absolute; transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;}
.icon-sun{opacity:1; transform:rotate(0deg) scale(1);}
.icon-moon{opacity:0; transform:rotate(-60deg) scale(.5);}
[data-theme="dark"] .icon-sun{opacity:0; transform:rotate(60deg) scale(.5);}
[data-theme="dark"] .icon-moon{opacity:1; transform:rotate(0deg) scale(1);}

/* ===================================================== status card */
.status-card{
  position:relative;
  background:linear-gradient(120deg, var(--red) 0%, var(--red-deep) 100%);
  color:#fff; border-radius:20px; padding:26px 28px; margin-bottom:24px;
  overflow:hidden; box-shadow:0 16px 34px -18px rgba(168,24,18,.65);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.status-card::before{
  content:""; position:absolute; inset-inline-start:-40px; top:-70px;
  width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07);
}
.status-card::after{
  content:""; position:absolute; top:0; inset-inline-end:0;
  width:0; height:0; border-style:solid;
  border-width:0 0 64px 64px;
  border-color:transparent transparent rgba(0,0,0,.16) transparent;
}
.status-left{position:relative; z-index:1;}
.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.18); padding:5px 12px;
  border-radius:100px; font-size:11.5px; font-weight:700; margin-bottom:10px;
}
.status-badge .dot{width:6px; height:6px; border-radius:50%; background:#FFD9B0; box-shadow:0 0 0 3px rgba(255,217,176,.28);}
.status-card h2{font-size:19px; font-weight:800; margin-bottom:4px;}
.status-card p{font-size:12.5px; opacity:.86; font-weight:500;}
.status-right{position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap;}

/* ===================================================== buttons */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 20px; border-radius:11px; font-size:13px; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
}
.btn:active{transform:scale(.97);}
.btn svg{width:15px; height:15px;}
.btn-light{background:#fff; color:var(--red-deep);}
.btn-light:hover{box-shadow:0 8px 18px -8px rgba(0,0,0,.35);}
.btn-ghost{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35);}
.btn-ghost:hover{background:rgba(255,255,255,.22);}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{box-shadow:0 8px 18px -8px rgba(226,35,26,.6);}
.btn-outline{background:var(--paper-2); border:1px solid var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--red); color:var(--red);}
.btn-sm{padding:7px 13px; font-size:12px; border-radius:9px;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}

/* ===================================================== kpi */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
.kpi{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:19px 20px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px); animation:rise .5s ease forwards;
}
.kpi:nth-child(1){animation-delay:.02s;}
.kpi:nth-child(2){animation-delay:.08s;}
.kpi:nth-child(3){animation-delay:.14s;}
.kpi:nth-child(4){animation-delay:.2s;}
@keyframes rise{ to{opacity:1; transform:translateY(0);} }
.kpi-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.kpi-icon{
  width:34px; height:34px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--red-soft); color:var(--red-deep);
}
[data-theme="dark"] .kpi-icon{color:var(--red);}
.kpi-icon svg{width:17px; height:17px;}
.kpi-trend{font-size:11px; font-weight:700; color:var(--green); display:flex; align-items:center; gap:3px;}
.kpi-trend.down{color:var(--red);}
.kpi-label{font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px;}
.kpi-value{font-size:23px; font-weight:800; letter-spacing:-.3px; font-variant-numeric:tabular-nums;}
.kpi-value small{font-size:12px; font-weight:600; color:var(--muted);}

/* ===================================================== panels */
.grid-2{display:grid; grid-template-columns:1.65fr 1fr; gap:16px; align-items:start;}
.grid-2-even{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
.panel{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  margin-bottom:16px;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap;
}
.panel-head h3{font-size:14.5px; font-weight:800;}
.panel-head span.hint{font-size:11.5px; color:var(--muted); font-weight:600;}
.panel-body{padding:20px;}
.link-btn{font-size:12px; font-weight:700; color:var(--red);}

/* ===================================================== tables */
.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse;}
thead th{
  text-align:right; font-size:11px; color:var(--muted); font-weight:700;
  padding:12px 20px; border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{padding:13px 20px; font-size:12.8px; font-weight:600; border-bottom:1px solid var(--line);}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .15s ease;}
tbody tr:hover{background:var(--paper);}
tfoot td{padding:13px 20px; font-size:12.8px; font-weight:800; border-top:2px solid var(--line); background:var(--paper);}
.cell-name{display:flex; align-items:center; gap:10px;}
.cell-name .av{
  width:30px; height:30px; border-radius:9px; flex-shrink:0;
  background:var(--paper); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11.5px; border:1px solid var(--line);
}
.cell-name b{font-size:12.8px; font-weight:700; display:block;}
.cell-name small{font-size:11px; color:var(--muted); font-weight:500;}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px; white-space:nowrap;}
.badge .dot{width:5px; height:5px; border-radius:50%; background:currentColor;}
.badge.ok{background:var(--green-soft); color:var(--green);}
.badge.wait{background:rgba(226,35,26,.1); color:var(--red);}
.badge.info{background:var(--blue-soft); color:var(--blue);}
.badge.lock{background:var(--amber-soft); color:var(--amber);}
.badge.muted{background:rgba(138,129,117,.14); color:var(--muted);}

/* ===================================================== components panel */
.comp-list{padding:6px 10px 14px;}
.comp-item{display:flex; align-items:center; justify-content:space-between; padding:12px 10px; border-radius:11px; transition:background .15s ease; gap:10px;}
.comp-item:hover{background:var(--paper);}
.comp-item-l{display:flex; align-items:center; gap:11px; min-width:0;}
.comp-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
.comp-item b{font-size:12.6px; font-weight:700; display:block;}
.comp-item small{font-size:10.8px; color:var(--muted); font-weight:600;}
.add-comp{
  margin:8px 10px 4px; padding:12px; border-radius:11px;
  border:1.5px dashed var(--line); text-align:center;
  font-size:12px; font-weight:700; color:var(--muted);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color .15s ease, color .15s ease;
}
.add-comp:hover{border-color:var(--red); color:var(--red);}

/* ===================================================== forms */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:700; margin-bottom:8px;}
.input, select.input{
  width:100%; padding:12px 14px; border-radius:11px;
  border:1px solid var(--line); background:var(--paper-2);
  font-size:13.5px; font-weight:600; transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(226,35,26,.12);}
.search-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.search-bar .input{flex:1; min-width:220px;}
.input-cell{
  width:72px; padding:6px 8px; border-radius:8px; text-align:center;
  border:1px solid transparent; background:transparent;
  font-size:12.6px; font-weight:700; font-variant-numeric:tabular-nums;
  transition:border-color .15s ease, background .15s ease;
}
.input-cell:hover{border-color:var(--line); background:var(--paper);}
.input-cell:focus{outline:none; border-color:var(--red); background:var(--paper-2); box-shadow:0 0 0 3px rgba(226,35,26,.1);}
.input-cell[readonly]{opacity:.55; cursor:not-allowed;}

/* ===================================================== messages */
.messages{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.msg{
  padding:12px 16px; border-radius:12px; font-size:13px; font-weight:600;
  border-inline-start:3px solid var(--muted); background:var(--paper-2); box-shadow:var(--shadow);
}
.msg.success{border-inline-start-color:var(--green); color:var(--green);}
.msg.error{border-inline-start-color:var(--red); color:var(--red);}
.msg.info{border-inline-start-color:var(--blue); color:var(--blue);}
.msg.warning{border-inline-start-color:var(--amber); color:var(--amber);}

/* ===================================================== payslip */
.slip-head{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; padding:20px; border-bottom:1px solid var(--line);}
.slip-meta b{display:block; font-size:11px; color:var(--muted); font-weight:600; margin-bottom:5px;}
.slip-meta span{font-size:13.5px; font-weight:700;}
.slip-total{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px; background:var(--paper); flex-wrap:wrap;
}
.slip-total .label{font-size:13px; font-weight:700; color:var(--muted);}
.slip-total .value{font-size:22px; font-weight:800; font-variant-numeric:tabular-nums;}
.explain{font-size:11px; color:var(--muted); font-weight:500; margin-top:3px; line-height:1.7;}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border-radius:12px; overflow:hidden; margin-bottom:16px;}
.stat{background:var(--paper-2); padding:15px 16px;}
.stat b{display:block; font-size:11px; color:var(--muted); font-weight:600; margin-bottom:6px;}
.stat span{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums;}

/* ===================================================== misc */
.empty{padding:44px 20px; text-align:center; color:var(--muted); font-size:13px; font-weight:600;}
.pager{display:flex; align-items:center; justify-content:center; gap:8px; padding:16px;}
.pager a, .pager span{
  padding:6px 12px; border-radius:9px; font-size:12px; font-weight:700;
  border:1px solid var(--line); color:var(--muted);
}
.pager a:hover{border-color:var(--red); color:var(--red);}
.pager .current{background:var(--red); color:#fff; border-color:var(--red);}
.note-box{
  border-inline-start:3px solid var(--red); background:rgba(226,35,26,.06);
  border-radius:0 11px 11px 0; padding:13px 16px; font-size:12.5px;
  color:var(--muted); font-weight:600; line-height:1.85; margin-bottom:16px;
}
.note-box b{color:var(--ink);}
.saved-flash{animation:flash 1.1s ease;}
@keyframes flash{ 0%{background:var(--green-soft);} 100%{background:transparent;} }
.htmx-request .spinner{display:inline-block;}
.spinner{display:none; width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--red); border-radius:50%; animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================================================== auth pages */
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr;}
.auth-art{
  background:linear-gradient(140deg, var(--red) 0%, var(--red-deep) 100%);
  color:#fff; padding:56px 52px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.auth-art::before{content:""; position:absolute; inset-inline-start:-70px; bottom:-90px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.07);}
.auth-art h1{font-size:29px; font-weight:800; line-height:1.5; max-width:15ch; position:relative;}
.auth-art p{font-size:13.5px; opacity:.85; margin-top:14px; max-width:34ch; position:relative; line-height:1.9;}
.auth-form{display:flex; align-items:center; justify-content:center; padding:40px 32px; background:var(--paper);}
.auth-card{width:100%; max-width:380px;}
.auth-card h2{font-size:21px; font-weight:800; margin-bottom:6px;}
.auth-card .lead{font-size:13px; color:var(--muted); margin-bottom:26px;}
.demo-hint{
  margin-top:20px; padding:13px 15px; border-radius:11px;
  background:var(--paper-2); border:1px dashed var(--line);
  font-size:11.5px; color:var(--muted); font-weight:600; line-height:2;
}
.demo-hint code{
  font-family:Consolas, monospace; direction:ltr; display:inline-block;
  background:var(--paper); padding:1px 6px; border-radius:5px; color:var(--ink);
}

/* ===================================================== responsive */
.menu-btn{display:none; width:40px; height:40px; border-radius:10px; background:var(--paper-2); border:1px solid var(--line); align-items:center; justify-content:center;}
.menu-btn svg{width:18px; height:18px;}
.overlay{display:none;}

@media (max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2, .grid-2-even{grid-template-columns:1fr;}
}

@media (max-width:980px){
  .main{padding:22px 20px 50px;}
  .status-card{padding:22px;}
  .status-card h2{font-size:17px;}
  .status-right{width:100%;}
  .status-right .btn, .status-right form{flex:1;}
  .status-right form .btn{width:100%; justify-content:center;}
}

@media (max-width:860px){
  .auth-wrap{grid-template-columns:1fr; min-height:100dvh;}
  .auth-art{
    display:flex; padding:26px 22px; min-height:auto;
    flex-direction:row; align-items:center; gap:14px;
  }
  .auth-art h1, .auth-art p, .auth-art > div:last-child{display:none;}
  .auth-art .brand{margin:0;}
  .auth-form{padding:26px 20px 44px;}
}

/* ---- گوشی: جدول‌ها به کارت تبدیل می‌شوند ----
   جدول‌های این سامانه تا ده ستون دارند و اسکرول افقی روی گوشی عملاً
   ناخوانا است. هر ردیف به یک کارت تبدیل می‌شود و عنوان هر خانه از
   data-label می‌آید. */
@media (max-width:760px){
  .sidebar{
    position:fixed; inset-inline-start:0; top:0; transform:translateX(-102%);
    width:min(84vw, 300px);
  }
  [dir="rtl"] .sidebar{transform:translateX(102%);}
  .sidebar.open{transform:translateX(0) !important;}
  .menu-btn{display:flex;}
  .overlay.show{display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:30;}

  .main{padding:16px 14px 60px;}
  .topbar{margin-bottom:18px; gap:12px;}
  .topbar h1{font-size:18px;}
  .topbar-actions{width:100%; justify-content:space-between;}
  .period-select{flex:1;}

  .kpi-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .kpi{padding:15px 14px;}
  .kpi-value{font-size:19px;}
  .kpi-label{font-size:11px;}

  .status-card{padding:20px 18px; border-radius:16px;}
  .status-card::after{display:none;}

  .panel-head{padding:15px 16px;}
  .panel-body{padding:16px;}

  .search-bar{gap:8px;}
  .search-bar .input{min-width:0; width:100%;}
  .search-bar .btn{flex:1; justify-content:center;}

  /* جدول → کارت */
  .table-wrap{overflow:visible;}
  table, thead, tbody, tr, td{display:block; width:100%;}
  thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  tbody tr{
    border:1px solid var(--line); border-radius:12px;
    margin:0 0 10px; padding:6px 0; background:var(--paper-2);
  }
  tbody tr:hover{background:var(--paper-2);}
  tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    border-bottom:1px dashed var(--line); padding:9px 14px; text-align:start;
  }
  tbody td:last-child{border-bottom:none;}
  tbody td::before{
    content:attr(data-label);
    font-size:11px; font-weight:700; color:var(--muted);
    flex-shrink:0;
  }
  tbody td:not([data-label])::before{content:none;}
  tbody td .cell-name{flex:1;}
  tfoot{display:block;}
  tfoot tr{display:block; border:1px solid var(--line); border-radius:12px; background:var(--paper);}
  tfoot td{display:flex; justify-content:space-between; border:none; padding:9px 14px;}

  .input-cell{width:100% !important; max-width:130px; text-align:center;}

  .stat-row{grid-template-columns:1fr 1fr;}
  .pager{flex-wrap:wrap;}
  .slip-head{grid-template-columns:1fr 1fr;}
  .slip-total{flex-direction:column; align-items:flex-start; gap:6px;}
  .slip-total .value{font-size:19px;}
  .comp-list{padding:6px 6px 12px;}
  .q{grid-template-columns:1fr;}
}

@media (max-width:420px){
  .kpi-grid, .stat-row{grid-template-columns:1fr;}
  .slip-head{grid-template-columns:1fr;}
  .btn{padding:10px 16px; font-size:12.5px;}
}

/* ورودی‌ها روی iOS زیر ۱۶px باعث زوم خودکار می‌شوند */
@media (max-width:760px){
  .input, select.input, textarea.input{font-size:16px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important;}
}
:focus-visible{outline:2px solid var(--red); outline-offset:2px; border-radius:6px;}

/* ===================================================== print */
@media print{
  .sidebar, .topbar-actions, .menu-btn, .no-print, .messages{display:none !important;}
  body{background:#fff;}
  .main{padding:0;}
  .panel{box-shadow:none; border:1px solid #ccc;}
  @page{size:A4; margin:14mm;}
}

/* ===================================================== تقویم جلالی */
.jdate-panel{
  position:absolute; z-index:200; width:266px;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 12px 34px -10px rgba(27,24,21,.32);
  padding:12px; font-size:12.5px;
}
.jdate-head{display:flex; align-items:center; gap:8px; margin-bottom:10px;}
.jdate-head > button{
  width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); font-size:16px; line-height:1; color:var(--ink); flex-shrink:0;
}
.jdate-head > button:hover{border-color:var(--red); color:var(--red);}
.jdate-title{display:flex; gap:6px; flex:1;}
.jdate-title select, .jdate-title input{
  font-family:inherit; font-size:12.5px; font-weight:700; padding:5px 7px;
  border-radius:8px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink);
}
.jdate-title select{flex:1;}
.jdate-title input{width:62px; text-align:center; font-variant-numeric:tabular-nums;}
.jdate-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.jdate-dow{
  text-align:center; font-size:10.5px; font-weight:700; color:var(--muted);
  padding:4px 0 6px;
}
.jdate-day{
  height:30px; border-radius:8px; border:1px solid transparent; background:none;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.jdate-day:hover{background:var(--paper); border-color:var(--line);}
.jdate-day.today{border-color:var(--red); color:var(--red); font-weight:800;}
.jdate-day.selected{background:var(--red); color:#fff; border-color:var(--red); font-weight:800;}
.jdate-foot{
  display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
}
.jdate-foot button{
  flex:1; padding:6px; border-radius:8px; border:1px solid var(--line);
  background:var(--paper); font-family:inherit; font-size:11.5px; font-weight:700; color:var(--ink);
}
.jdate-foot button:hover{border-color:var(--red); color:var(--red);}
input.jdate{font-variant-numeric:tabular-nums;}

/* ===================================================== صفحهٔ کوچک (کارگزینی)
   سامانهٔ کارگزینی برای رایانه است. زیر ۹۰۰ پیکسل، به‌جای فشرده کردنِ جدول‌های
   ده‌ها‌ستونی، صریح می‌گوییم روی رایانه باز شود. با CSS نمایش داده می‌شود تا
   پیش از بارگذاری اسکریپت‌ها هم کار کند. پرتال پرسنل قالب جدا دارد و این
   پیام آن‌جا نمی‌آید. */
.small-screen{display:none;}
@media (max-width:900px){
  .small-screen{
    display:flex; position:fixed; inset:0; z-index:9999;
    align-items:center; justify-content:center; padding:24px;
    background:var(--paper); overflow-y:auto;
  }
  .small-screen-box{
    max-width:420px; width:100%; text-align:center;
    background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px 26px; box-shadow:var(--shadow);
  }
  .small-screen-box h2{font-size:19px; margin:0 0 12px;}
  .small-screen-box p{font-size:13px; line-height:2; color:var(--muted); margin:0 0 12px;}
  .small-screen-box p.hint{font-size:12px;}
  .small-screen-box .brand-mark{width:52px; height:52px;}
  .small-screen-actions{
    display:flex; gap:10px; flex-direction:column; margin-top:20px;
  }
}
@media print{.small-screen{display:none !important;}}

/* ================================================================== زبانه‌ها
   تودرتویی سامانه فقط یک لایه است و همان یک لایه دیده می‌شود: نوار زبانه زیر
   عنوان صفحه، به‌جای شش ورودی جدا در منوی کناری که هر کدام دوباره می‌پرسیدند
   «کدام دوره؟». */
.tabbar{
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:18px;
  border-bottom:1px solid var(--line); padding-bottom:0;
}
.tabbar .tab{
  padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tabbar .tab:hover{color:var(--ink);}
.tabbar .tab.active{color:var(--red); border-bottom-color:var(--red);}

/* کارت‌های صفحهٔ تنظیمات */
.setting-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px;}
.setting-card{
  display:block; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);
}
.setting-card:hover{border-color:var(--red);}
.setting-card b{display:block; font-size:15px; margin-bottom:6px;}
.setting-card p{font-size:12.5px; line-height:1.9; color:var(--muted); margin:0 0 10px;}

/* ---------------------------------------------------------------- تأیید حذف
   جایگزین confirm() مرورگر. دلیلش فقط ظاهر نیست: پنجرهٔ مرورگر نه فارسی است،
   نه راست‌به‌چپ، نه می‌تواند بگوید «چه چیزی» حذف می‌شود و «چه اتفاقی» می‌افتد —
   و روی موبایل نام دامنه را بالای پیام می‌چسباند.  */
.confirm-back{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(27,24,21,.5); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px;
}
.confirm-back.show{display:flex;}
.confirm-box{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); width:min(430px,100%); padding:26px 24px 20px;
  animation:confirm-in .14s ease-out;
}
@keyframes confirm-in{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1;}}
.confirm-box h3{margin:0 0 8px; font-size:16.5px; font-weight:800; color:var(--ink);}
.confirm-box p{margin:0; font-size:13.5px; line-height:1.85; color:var(--muted);}
.confirm-icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  margin-bottom:14px; background:var(--red-soft); color:var(--red-deep);
}
.confirm-icon svg{width:21px; height:21px;}
.confirm-box.is-safe .confirm-icon{background:var(--blue-soft); color:var(--blue);}
.confirm-actions{display:flex; gap:10px; margin-top:22px;}
.confirm-actions .btn{flex:1; justify-content:center;}
.btn-danger{background:var(--red); color:#fff; border:1px solid var(--red);}
.btn-danger:hover{background:var(--red-deep); border-color:var(--red-deep);}

/* --------------------------------------------------- جابجایی نرم بین صفحات
   نوار باریک بالای صفحه، جای بارگذاری دوبارهٔ کل صفحه. دو مرحله دارد: تا ۹۰٪
   آرام جلو می‌رود (چون نمی‌دانیم پاسخ کِی می‌رسد) و با رسیدن پاسخ سریع پر
   می‌شود. اگر پاسخ زیر ۱۵۰ میلی‌ثانیه بیاید، عملاً دیده نمی‌شود و صفحه
   چشمک نمی‌زند.  */
.nav-progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:70;
  block-size:2.5px; inline-size:0; opacity:0;
  background:linear-gradient(90deg, var(--red), var(--red-deep));
}
.nav-progress.run{
  opacity:1; inline-size:90%;
  transition:inline-size 9s cubic-bezier(.1,.85,.3,1), opacity .1s linear .15s;
}
.nav-progress.finish{
  inline-size:100%; opacity:0;
  transition:inline-size .16s ease-out, opacity .22s ease-out .12s;
}

/* محتوای تازه به‌جای پریدن، آرام می‌نشیند */
@keyframes page-in{from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:none;}}
.main{animation:page-in .19s ease-out;}

/* در حال آمدنِ صفحهٔ بعد، محتوای فعلی کمی محو می‌شود تا کاربر بداند
   کلیکش گرفته شده — ولی همان‌جا می‌ماند و صفحه سفید نمی‌شود */
.main.htmx-request{opacity:.55; transition:opacity .12s ease-out;}

@media (prefers-reduced-motion: reduce){
  .main{animation:none;}
  .nav-progress{transition:none;}
}

/* امضای سازنده — گوشهٔ پایین سایدبار، عمداً کم‌رنگ */
.made-by{
  margin-block-start:14px; padding-block-start:12px;
  border-block-start:1px solid var(--line);
  text-align:center; line-height:1.7;
}
.made-by span{display:block; font-size:11.5px; font-weight:700; color:var(--muted);}
.made-by small{display:block; font-size:10px; color:var(--muted); opacity:.72;}

/* جدول دوستونیِ گردش پول — دو روایت کنار هم، نه یک فهرست بلند */
.money-flow td:nth-child(2){border-inline-end:2px solid var(--line);}
.money-flow .total-row{font-weight:800; border-top:2px solid var(--line);}
.money-flow small.hint{display:block; font-weight:500; font-size:11px; margin-top:2px;}

/* خطای زیر هر ورودی فرم — پیش از این هر قالب استایلش را inline تکرار می‌کرد */
.field-error{color:var(--red); font-size:11.5px; margin-top:5px; font-weight:600;}

/* ------------------------------------------------------- دفترچه فرمول‌ها
   سه ستون کنار هم: قلم، آنچه موتور می‌کند، و فرمول اکسل. متن‌ها بلندند پس
   سطرها از بالا تراز می‌شوند نه از وسط. */
.formula-book td{vertical-align:top; padding-block:12px;}
.formula-book td small{display:block; font-size:11px; color:var(--muted); margin-top:3px;}
.formula-book .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; direction:ltr; text-align:start;}
.rule-doc{font-size:12.5px; line-height:1.95; white-space:pre-wrap;}
.rule-sample{
  margin-top:8px; padding:8px 10px; border-radius:8px;
  background:var(--paper); border:1px solid var(--line); font-size:11.5px; line-height:1.8;
}
.rule-sample span{display:block; color:var(--muted); margin-top:3px;}
.rule-sample.muted-note{color:var(--muted); background:transparent;}
.excel-formula{
  margin:4px 0 8px; padding:8px 10px; border-radius:8px; overflow-x:auto;
  background:var(--paper); border:1px solid var(--line);
  font-size:11.5px; line-height:1.7; white-space:pre-wrap; word-break:break-all;
}


/* --- سوییچ شعبه ------------------------------------------------------------
   فقط وقتی رندر می‌شود که بیش از یک شعبه باشد (شرطش در قالب است).

   ساختارش عمداً مثل `.user-chip` است — نشان + دو خط متن — چون هر دو یک کار
   می‌کنند: می‌گویند «الان در چه بافتی هستی». ناوبری نیست، پس شکل `.nav-item`
   را نمی‌گیرد و با آن اشتباه نمی‌شود.

   رنگ‌ها همه از توکن‌ها می‌آیند، پس تم تیره خودبه‌خود درست می‌شود. */
.branch-switch{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; padding:8px 10px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.branch-switch:hover{border-color:rgba(226,35,26,.35);}
/* فوکوسِ صفحه‌کلید روی خودِ کادر دیده می‌شود، نه فقط روی select — وگرنه
   کسی که با Tab می‌گردد نمی‌فهمد کجاست. */
.branch-switch:focus-within{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(226,35,26,.14);
}

.branch-mark{
  width:30px; height:30px; flex-shrink:0; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); border:1px solid var(--line); color:var(--red);
}
.branch-mark svg{width:16px; height:16px;}

.branch-meta{display:flex; flex-direction:column; min-width:0; flex:1;}
.branch-meta label{
  font-size:10.5px; color:var(--muted); font-weight:600;
  letter-spacing:.2px; cursor:pointer;
}

/* ظاهر پیش‌فرضِ select در هر مرورگر فرق می‌کند و فلشش در RTL سمت غلط
   می‌افتد؛ برداشته شد و فلشِ خودمان گذاشته شد. */
.branch-meta select{
  appearance:none; -webkit-appearance:none;
  width:100%; max-width:100%; min-width:0;
  background:transparent; border:0; padding:0; margin:0;
  font:inherit; font-size:13px; font-weight:700; color:var(--ink);
  line-height:1.5; cursor:pointer; outline:none;
  text-overflow:ellipsis;
}
.branch-meta select option{
  color:var(--ink); background:var(--paper-2); font-weight:600;
}

.branch-chev{
  width:15px; height:15px; flex-shrink:0; color:var(--muted);
  transition:color .18s ease, transform .18s ease;
}
.branch-switch:hover .branch-chev{color:var(--red); transform:translateY(1px);}