/* app.css — کامپوننت‌های سفارشی روی Tailwind
   رنگ برند: آبی مستریار (از لوگو). همه‌ی رنگ‌ها متغیر CSS (آماده برای دارک‌مود). */

:root{
  /* رنگ برند — آبی لوگوی مستریار */
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --brand-soft:#dbeafe;
  --brand-ring:rgba(37,99,235,.15);

  /* متن */
  --text:#0f172a;
  --text-soft:#475569;
  --text-mute:#94a3b8;
  --text-faint:#cbd5e1;

  /* پس‌زمینه و مرز */
  --bg:#f8fafc;
  --surface:#fff;
  --border:#e2e8f0;
  --border-soft:#f1f5f9;

  /* شعاع گوشه — کمتر و حرفه‌ای‌تر (درخواست کاربر) */
  --r-btn:8px;
  --r-input:8px;
  --r-card:12px;
  --r-badge:6px;
}

*{ font-family:'Vazirmatn', system-ui, sans-serif; }
body{ -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--text); }

/* ───── کارت ───── */
.card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-card);
  box-shadow:0 1px 3px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.08);
}

/* ───── دکمه ───── */
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.1rem; border-radius:var(--r-btn); font-size:.88rem;
  font-weight:500; cursor:pointer; transition:all .18s ease; border:none;
  text-decoration:none;
}
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.btn-ghost{ background:var(--border-soft); color:#334155; }
.btn-ghost:hover{ background:var(--border); }
.btn-danger{ background:#fee2e2; color:#b91c1c; }
.btn-danger:hover{ background:#fecaca; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* ───── ورودی ───── */
.input{
  width:100%; padding:.6rem .85rem; border:1px solid var(--border);
  border-radius:var(--r-input); font-size:.9rem; background:var(--surface);
  transition:border .15s, box-shadow .15s; color:var(--text);
}
.input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
label.lbl{ display:block; font-size:.82rem; color:var(--text-soft); margin-bottom:.35rem; }

/* ───── بج ───── */
.badge{ display:inline-block; padding:.2rem .6rem; border-radius:var(--r-badge); font-size:.72rem; font-weight:600; }
.badge-green{ background:#dcfce7; color:#166534; }
.badge-gray { background:var(--border-soft); color:var(--text-soft); }
.badge-red  { background:#fee2e2; color:#991b1b; }
.badge-amber{ background:#fef3c7; color:#92400e; }
.badge-blue { background:var(--brand-soft); color:var(--brand-dark); }
.badge-purple{ background:#ede9fe; color:#6d28d9; }

/* ───── ناوبری ───── */
.nav-link{
  display:flex; align-items:center; gap:.55rem;
  padding:.6rem .9rem; border-radius:var(--r-input); font-size:.9rem;
  color:var(--text-soft); transition:all .18s; text-decoration:none;
}
.nav-link:hover{ background:var(--border-soft); color:var(--text); }
.nav-link.active{ background:var(--brand-soft); color:var(--brand-dark); }

/* ───── سایدبار و تاپ‌بار ───── */
.sidebar{
  width:240px; flex-shrink:0; background:var(--surface); border-left:1px solid var(--border-soft);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.topbar{
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  background:var(--surface); border-bottom:1px solid var(--border-soft); position:sticky; top:0; z-index:10;
}
@media (max-width:768px){
  .sidebar{ position:fixed; right:0; z-index:40; transform:translateX(100%); transition:transform .25s; }
  .sidebar.open{ transform:translateX(0); }
}

/* پشت‌زمینه‌ی تیره وقتی منوی موبایل باز است (برای بستن با کلیک بیرون) */
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:35;
}
.sidebar-overlay.show{ display:block; }

/* ───── جدول ───── */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{ text-align:right; font-size:.78rem; color:var(--text-mute); font-weight:600; padding:.7rem .6rem; border-bottom:1px solid var(--border-soft); }
.tbl td{ padding:.7rem .6rem; border-bottom:1px solid var(--border-soft); font-size:.88rem; }
.tbl tr:hover td{ background:#fafafa; }

/* ───── Toast ───── */
#toast-wrap{ position:fixed; bottom:1rem; left:1rem; z-index:60; display:flex; flex-direction:column; gap:.5rem; }
.toast{
  background:var(--text); color:#fff; padding:.7rem 1rem; border-radius:var(--r-input);
  font-size:.85rem; box-shadow:0 8px 24px -8px rgba(0,0,0,.3); animation:slideUp .25s ease;
  min-width:220px;
}
.toast.ok{ background:#065f46; }
.toast.err{ background:#991b1b; }

/* ───── Modal ───── */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:1rem; animation:fadeIn .18s ease;
}
.modal-box{
  background:var(--surface); border-radius:var(--r-card); padding:1.5rem; max-width:420px; width:100%;
  box-shadow:0 20px 60px -15px rgba(15,23,42,.3); animation:slideUp .25s ease;
}

/* ───── حالت‌ها ───── */
.empty-state{ text-align:center; padding:3rem 1rem; color:var(--text-mute); }
.spinner{ width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .6s linear infinite; }

@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ───── مربع‌های کد OTP ───── */
.otp-box{
  width:48px; height:56px; font-size:1.4rem; font-weight:700;
  border:1px solid var(--border); border-radius:var(--r-input); background:var(--surface);
  color:var(--text); transition:border .15s, box-shadow .15s;
  direction:ltr; padding:0 !important; text-align:center !important; line-height:normal;
}
.otp-box:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); }
.otp-box.filled{ border-color:var(--brand); }
@media (max-width:380px){ .otp-box{ width:42px; height:50px; font-size:1.2rem; } }

/* ───── نتایج سرچ همکار (staff picker) ───── */
.staff-results{
  position:absolute; top:100%; right:0; left:0; z-index:20; margin-top:4px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-input);
  box-shadow:0 8px 24px -8px rgba(15,23,42,.15); max-height:240px; overflow-y:auto;
}
.staff-result-item{
  padding:.55rem .8rem; font-size:.85rem; cursor:pointer; transition:background .12s;
  display:flex; align-items:center; justify-content:space-between;
}
.staff-result-item:hover{ background:var(--brand-soft); }
.staff-result-empty{ padding:.55rem .8rem; font-size:.8rem; color:var(--text-mute); }
.staff-role-tag{
  font-size:.68rem; background:var(--border-soft); color:var(--text-soft);
  padding:.1rem .4rem; border-radius:var(--r-badge); margin-right:.3rem;
}

/* ───── آکاردئون سایدبار (تنظیمات) ───── */
.nav-accordion-head{
  display:flex; align-items:center; gap:.55rem; cursor:pointer;
  background:none; border:none; font-family:inherit;
}
.nav-accordion-arrow{ transition:transform .2s; color:var(--text-mute); }
.nav-accordion.open .nav-accordion-arrow{ transform:rotate(180deg); }
.nav-accordion-body{
  display:none; padding:.25rem 0 .25rem 0; margin-top:.15rem;
}
.nav-accordion.open .nav-accordion-body{ display:block; }
.nav-sublink{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem .5rem 2rem; border-radius:var(--r-input); font-size:.84rem;
  color:var(--text-mute); transition:all .15s; text-decoration:none;
}
.nav-sublink:hover{ background:var(--border-soft); color:var(--text); }
.nav-sublink.active{ background:var(--brand-soft); color:var(--brand-dark); font-weight:500; }

/* ───── ستون امکانات جدول فاکتور ───── */
.act-wrap{ display:flex; align-items:center; gap:.15rem; position:relative; }
.act-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:var(--r-btn); border:none; background:none;
  color:var(--text-soft); cursor:pointer; transition:all .15s; text-decoration:none;
}
.act-icon:hover{ background:var(--brand-soft); color:var(--brand-dark); }
.act-menu-wrap{ position:relative; }
.act-menu{
  position:absolute; left:0; top:100%; margin-top:4px; z-index:30;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:0 8px 24px -8px rgba(15,23,42,.18); min-width:185px; padding:.3rem; overflow:hidden;
}
.act-menu-item{
  display:flex; align-items:center; gap:.55rem; width:100%;
  padding:.5rem .65rem; border-radius:var(--r-input); border:none; background:none;
  font-family:inherit; font-size:.82rem; color:var(--text-soft); cursor:pointer; text-decoration:none;
  transition:background .12s; text-align:right;
}
.act-menu-item:hover{ background:var(--border-soft); color:var(--text); }
.act-menu-item.danger{ color:#b91c1c; }
.act-menu-item.danger:hover{ background:#fee2e2; }
.act-menu-sep{ height:1px; background:var(--border-soft); margin:.3rem 0; }

/* آیکون حذف در امکانات (قرمز در hover) */
.act-icon.danger-icon:hover{ background:#fee2e2; color:#b91c1c; }

/* ───── بدنه‌ی مشترک فاکتور (نمایش پنل و عمومی) ───── */
.inv-doc { font-size: .9rem; }
.inv-parties {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden;
}
.inv-party { display: flex; }
.inv-party + .inv-party { border-right: 1px solid var(--border); }
.inv-party-tag {
  background: var(--bg); color: var(--text-mute); font-size: .7rem; font-weight: 600;
  padding: .5rem .35rem; writing-mode: vertical-rl; text-align: center;
  display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--border-soft);
}
.inv-party-body { padding: .75rem .9rem; flex: 1; }
.inv-line { color: var(--text-soft); font-size: .8rem; margin-bottom: .3rem; line-height: 1.7; }
.inv-meta { display: flex; flex-direction: column; gap: .15rem; color: var(--text-mute); font-size: .78rem; }
.inv-subhead {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  margin-top: .9rem; font-size: .82rem; color: var(--text-soft);
}
.inv-k { color: var(--text-mute); }
.inv-table { width: 100%; border-collapse: collapse; }
.inv-table th {
  background: var(--bg); color: var(--text-mute); font-size: .76rem; font-weight: 600;
  padding: .55rem .6rem; text-align: right; border-bottom: 1px solid var(--border);
}
.inv-table td { padding: .6rem; border-bottom: 1px solid var(--border-soft); }
.inv-mute { color: var(--text-mute); }
.inv-summary {
  margin-top: 1rem; margin-right: auto; width: 100%; max-width: 280px;
  display: flex; flex-direction: column; gap: .5rem; font-size: .85rem;
}
.inv-sum-row { display: flex; justify-content: space-between; color: var(--text-soft); }
.inv-sum-total {
  font-weight: 700; font-size: 1rem; color: var(--text);
  border-top: 1px solid var(--border); padding-top: .55rem; margin-top: .15rem;
}
@media (max-width: 640px) {
  .inv-parties { grid-template-columns: 1fr; }
  .inv-party + .inv-party { border-right: none; border-top: 1px solid var(--border); }
  .inv-summary { max-width: 100%; }
}

/* ───── جدول فاکتور در موبایل: تبدیل به کارت ───── */
@media (max-width: 600px) {
  .inv-table thead { display: none; }
  .inv-table, .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: 100%; }
  .inv-table tr {
    border: 1px solid var(--border); border-radius: var(--r-card);
    padding: .7rem .85rem; margin-bottom: .6rem; background: var(--surface);
  }
  .inv-table td { border: none !important; padding: .25rem 0; }
  .inv-row-num { display: none !important; }           /* شماره ردیف در موبایل لازم نیست */
  .inv-cell-title {
    font-size: .95rem; font-weight: 700; padding-bottom: .5rem !important;
    margin-bottom: .4rem; border-bottom: 1px solid var(--border-soft) !important;
    text-align: right !important;
  }
  /* بقیه سلول‌ها: برچسب راست، مقدار چپ */
  .inv-table td[data-label]:not(.inv-cell-title) {
    display: flex; justify-content: space-between; align-items: center;
    text-align: left; direction: rtl;
  }
  .inv-table td[data-label]:not(.inv-cell-title)::before {
    content: attr(data-label); color: var(--text-mute); font-size: .8rem;
    font-weight: 500;
  }
}