/* FILE: app/ui/static/style.css */

/* IRANSansX — طبق CLAUDE.md فونت رسمی پروژه. فایل‌ها از طریق mount اختصاصی
   main.py (`/fonts` -> app/ui/fonts) سرو می‌شوند (نه از زیرمسیر /static). */
@font-face{
  font-family:'IRANSansX';
  src:url('/fonts/IRANSansX-Light.ttf') format('truetype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
/* رفع شد (2026-09-03): فایل قبلی app/ui/fonts/IRANSansX-Regular.ttf عملاً
   gzip بود (خراب، error در document.fonts)، به‌همین‌خاطر وزن 400 قبلاً هیچ
   @font-face معتبری نداشت و مرورگر به نزدیک‌ترین وزن موجود (Light=300) بازمی‌گشت.
   حالا با فایل Regular واقعی (امضادار، از تنظیمات رسمی فونت ویندوز) جایگزین شد. */
@font-face{
  font-family:'IRANSansX';
  src:url('/fonts/IRANSansX-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IRANSansX';
  src:url('/fonts/IRANSansX-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
/* @font-face «IRANSansX FaNum» (فونت اعداد فارسی مرکزی) اینجا قبلاً تعریف شده
   بود ولی هیچ‌جای پروژه هیچ selector ای از این نام مصرف نمی‌کرد (grep کامل
   روی همه‌ی template/css ها تأیید کرد) -- @font-face کاملاً مرده، حذف شد
   (2026-09-03). صفحاتی که واقعاً به فونت اعداد فارسی نیاز دارند (چاپ‌ها) از
   خانواده‌ی جداگانه‌ی 'IRANSansXFaNum' (بدون فاصله) در print_invoice.css/
   editor-canvas.css استفاده می‌کنند -- دست‌نخورده ماند. */

:root{
  --bg:#0b1220;           /* پس‌زمینه تیره مخملی */
  --panel:#131a2a;        /* پانل‌ها */
  --panel-2:#162137;      /* پانل تیره‌تر */
  --text:#e8e8f0;         /* متن اصلی */
  --muted:#9fb0c9;        /* متن فرعی */
  --border:#24304a;       /* خط جداکننده */

  /* از لوگو */
  --brand:#04A24C;        /* سبز برند */
  --brand-600:#078a42;
  --charcoal:#2b2f32;     /* خاکستری/مشکی مربعی‌های لوگو */
  --accent:#f4b13e;       /* طلایی سر کابل */

  /* حالت روشنِ خاکستریِ نزدیک به سلیقه‌ت */
  --paper:#f3f4f6;
  --ink:#111827;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'IRANSansX', Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
/* مرورگرها به‌صورت پیش‌فرض font-family بدنه را به input/select/textarea/button
   ارث نمی‌دهند (UA stylesheet فونت کنترل native سیستم را می‌دهد) -- بدون این
   قانون، رفع override بالا (base.html) فقط متن ساده‌ی صفحات را IRANSansX
   می‌کرد، نه فرم‌ها (که بخش زیادی از صفحات داخلی پرکاربرد -- proforma_form,
   customer_form, stock_movement_form -- هستند). کشف‌شده حین یکسان‌سازی
   customers_list.html (که قبلاً همین ارث‌بری را به‌صورت محلی/تکراری تعریف
   کرده بود). */
input, select, textarea, button{
  font-family: inherit;
}

/* RTL toggle */
body.rtl{direction:rtl}
body.rtl .tc-layout{grid-template-columns:280px 1fr}
.tc-header{
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #0d1526, #0a1020);
}
.tc-header .inner{
  max-width:1200px;margin:auto;padding:14px 20px;display:flex;align-items:center;gap:16px
}
.tc-header .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.tc-header .brand img{height:42px;width:42px}
.tc-header .title{font-weight:700;letter-spacing:.3px}
.tc-header .top-right{margin-inline-start:auto;color:var(--muted)}
.tc-header a{color:var(--text);opacity:.9}
.tc-header a:hover{opacity:1}

/* Layout */
.tc-layout{
  max-width:1200px;margin:24px auto;display:grid;grid-template-columns:1fr;gap:16px;padding:0 16px;
}
@media (min-width:960px){.tc-layout{grid-template-columns:280px 1fr}}

.sidebar{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;padding:14px
}
.nav-title{font-weight:700;color:var(--muted);margin:4px 8px 10px}

/* Button System */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);cursor:pointer;
  text-decoration:none;user-select:none;transition:.15s ease;
  font-weight:600;min-height:40px;
}
.btn:hover{transform:translateY(-1px);border-color:#2f3d5e}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--brand);border-color:transparent;color:#07110b}
.btn.primary:hover{background:var(--brand-600)}
.btn.ghost{background:transparent}
.btn.nav{width:100%;justify-content:flex-start}
.btn.small{padding:6px 10px;min-height:32px}

/* Inputs */
.input{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);outline:none;transition:.12s;
}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:#345082;box-shadow:0 0 0 3px #34508240}

/* Cards / tables */
.card{
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;margin:14px 0;box-shadow:0 4px 12px rgba(0,0,0,.12);color:var(--text)
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:start;color:var(--text)}
.table th{color:var(--muted);font-weight:700}
.badge{padding:3px 8px;border-radius:999px;background:#1a243a;border:1px solid var(--border);color:var(--muted);font-size:.85rem}

.footer{margin-top:24px;color:var(--muted);font-size:.9rem}

/* Light “paper” sections (فرم‌ها) */
.paper{
  background:var(--paper);color:var(--ink)
}
.paper .input{background:white;color:var(--ink);border-color:#d1d5db}
.paper .btn{background:#111827;color:white;border-color:#111827}
.paper .btn.primary{background:var(--brand);color:#07110b;border-color:var(--brand)}


/* === Fix: headings contrast on dark theme === */
.title, h1, h2, h3 {
  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
  opacity: 1 !important;     /* اگه جایی opacity به ارث رسیده */
}

/* تیترهای فرعی داخل عنوان */
.title .muted { color: var(--muted); }

/* هدر کارت‌ها (card-header که توی template داری) */
.card > .card-header {
  color: var(--text);
  font-weight: 700;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  margin: -16px -16px 12px;
  padding: 12px 16px;
  border-radius: 16px 16px 0 0;
  opacity: 1 !important;
}

/* سرستون‌های جدول کمی ملایم ولی خوانا */
.table thead th { color: var(--muted); font-weight: 700; opacity: 1 !important; }

/* لینک‌ها روی پس‌زمینه تیره، آبی پیش‌فرض مرورگر نباشند */
a { color: var(--text); }
a.muted { color: var(--muted); }

/* --- Cards: تعریف پایه به بالای فایل (.card اصلی، var-based) منتقل شد --- */
.card a{
  color: var(--text);
}

.card table th,
.card table td{
  color: var(--text);
}
.card .card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
  color: #e5e7eb;
}
.card .card-subtle {
  color:#94a3b8; font-size: 12px; margin-top: 6px;
}

/* فرم‌ها و ورودی‌ها داخل کارت */
.card input[type=text],
.card input[type=number],
.card select,
.card textarea {
  background:#0b1220; color:#e5e7eb;
  border:1px solid #334155; border-radius:8px;
  padding:8px 10px; width:100%;
}
.card .row { display:flex; gap:10px; flex-wrap:wrap; }
.card .col { flex:1 1 220px; }

/* دکمه‌ها: تعریف پایه‌ی .btn دوگانه/متناقض بود -- تعریف بالای فایل
   (var-based: primary/ghost/nav/small) نگه داشته شد و این نسخه‌ی هاردکد حذف شد. */
.btn.secondary { border-color:#475569; background:#1f2937; }

/* جدول داخل کارت */
.table-lite { width:100%; border-collapse:collapse; }
.table-lite th, .table-lite td { padding:8px 10px; border-bottom:1px solid #1f2937; }
.table-lite th { color:#94a3b8; font-weight:700; background:#0b1220; }
.table-lite td { color:#e5e7eb; }


/* --- Bidi helpers: fix Persian + numbers order --- */
.tc-rtl { direction: rtl; unicode-bidi: isolate; }
/* display:inline-block عمداً حذف شد -- این کلاس الان اولین بار روی چند فایل
   (customers_list/proforma_profile/customer_contacts_manage و ...) هم روی
   <td>/<th> و هم <span>/<div> اعمال می‌شود؛ inline-block روی <td> چیدمان
   جدول را می‌شکند. unicode-bidi:isolate-override به‌تنهایی برای ایزوله کردن
   جهت متن/عدد کافی است، صرف‌نظر از display طبیعی خودِ عنصر. */
.tc-ltr { direction: ltr; unicode-bidi: isolate-override; }