/* =============================================================
   Travel Accounting System — style.css
   نسخه بازنویسی‌شده: موبایل‌فرست، کارت‌محور، تمیز
   ============================================================= */

/* ── ۱. فونت ─────────────────────────────────────────────── */
/* فونت: استفاده از فونت‌های سیستمی برای سرعت بیشتر و حذف base64 */

/* ── ۲. متغیرها ───────────────────────────────────────────── */
:root {
  --bg:          #f0f2f5;
  --surface:     #ffffff;
  --surface-2:   #f8fafc;
  --border:      #e4e7ec;
  --border-2:    #d0d5dd;

  --text:        #101828;
  --text-2:      #344054;
  --text-3:      #667085;
  --text-inv:    #ffffff;

  --primary:     #111827;
  --primary-h:   #1f2937;
  --accent:      #2563eb;
  --accent-light:#eff6ff;
  --accent-border:#bfdbfe;

  --ok:          #027a48;
  --ok-bg:       #ecfdf3;
  --ok-border:   #a6f4c5;
  --warn:        #b54708;
  --warn-bg:     #fffaeb;
  --warn-border: #fedf89;
  --danger:      #b42318;
  --danger-bg:   #fef3f2;
  --danger-border:#fecdca;
  --info:        #1d4ed8;
  --info-bg:     #eff6ff;
  --info-border: #bfdbfe;

  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   18px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  --shadow-sm:   0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06);
  --shadow:      0 4px 16px rgba(16,24,40,.08), 0 1px 4px rgba(16,24,40,.05);
  --shadow-lg:   0 12px 40px rgba(16,24,40,.14), 0 4px 12px rgba(16,24,40,.06);
  --shadow-modal:0 24px 80px rgba(16,24,40,.28);

  --topbar-h:    56px;
  --sidebar-w:   260px;

  --transition:  .18s ease;
}

/* ── ۳. ریست و پایه ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.7;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

/* ── ۴. تایپوگرافی ────────────────────────────────────────── */
h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--text); }
h2 { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
h4 { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
p  { margin: 0 0 12px; }

.muted       { color: var(--text-3); }
.muted-light { color: #94a3b8; font-size: 12px; }
.small       { font-size: 12px; }
.small-note  { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.ok          { color: var(--ok); }
.bad         { color: var(--danger); }
.center      { text-align: center; }
.ltr-inline  { direction: ltr; display: inline-block; }

/* ── ۵. لینک‌ها ───────────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.danger-link { color: var(--danger); text-decoration: none; font-weight: 700; }

/* ── ۶. لایه‌بندی اصلی ────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--primary);
  color: var(--text-inv);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.topbar a { color: var(--text-inv); }
.topbar b  { font-size: 15px; }

.layout {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
}

/* ── ۷. سایدبار ───────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface-2);
  border-left: 1px solid var(--border);
  padding: 16px 12px;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  flex-shrink: 0;
}

/* اسکرول‌بار ظریف */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--radius-pill); }

/* ── ۸. منوی برنامه ───────────────────────────────────────── */
.menu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--primary), #1e3a5f);
  color: var(--text-inv);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.menu-logo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px;
  flex-shrink: 0;
}
.menu-brand b   { display: block; font-size: 13px; line-height: 1.8; }
.menu-brand span{ display: block; font-size: 11px; color: #94a3b8; }

.app-menu { display: grid; gap: 6px; }

.menu-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.menu-group[open] { box-shadow: var(--shadow-sm); }

.menu-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.menu-group > summary::-webkit-details-marker { display: none; }
.menu-group > summary::after {
  content: '+';
  margin-right: auto;
  width: 20px; height: 20px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
}
.menu-group[open] > summary::after { content: '−'; }

.menu-group-icon {
  width: 24px; height: 24px;
  border-radius: 8px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}

.menu-items { padding: 4px 8px 8px; display: grid; gap: 2px; }

.sidebar .menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid transparent;
  transition: all var(--transition);
  margin: 0;
}
.sidebar .menu-link:hover {
  background: var(--surface-2);
  border-color: var(--border);
  text-decoration: none;
}
.sidebar .menu-link.active {
  background: var(--primary);
  color: var(--text-inv);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.menu-icon {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.menu-link.active .menu-icon { background: rgba(255,255,255,.15); }

/* ── ۹. محتوای اصلی ───────────────────────────────────────── */
.content {
  flex: 1;
  padding: 20px;
  min-width: 0;
}

.wrap {
  max-width: 1100px;
  margin: 28px auto;
  padding: 0 16px;
}

/* ── ۱۰. کارت ────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.soft-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px 0;
}

/* ── ۱۱. دکمه‌ها ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--primary);
  color: var(--text-inv);
  border: 1px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  min-height: 38px;
}
.btn:hover { background: var(--primary-h); text-decoration: none; }

.btn.secondary {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border-2);
}
.btn.secondary:hover { background: var(--surface-2); border-color: var(--text-3); }

.btn.danger {
  background: #dc2626;
  color: var(--text-inv);
  border-color: #dc2626;
}
.btn.danger:hover { background: #b91c1c; }

.btn.accent {
  background: var(--accent);
  border-color: var(--accent);
}
.btn.accent:hover { background: #1d4ed8; }

.big-btn {
  width: 100%;
  padding: 13px;
  font-size: 15px;
  border-radius: var(--radius);
  margin-top: 12px;
}

.icon-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  transition: all var(--transition);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--border-2); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: var(--danger-bg); border-color: var(--danger-border); }

/* ── ۱۲. فرم‌ها ───────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 2px; }

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  margin: 4px 0 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

/* چک‌باکس و رادیو - ظاهر طبیعی مرورگر حفظ شود */
input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  margin: 0 0 0 6px;
  vertical-align: middle;
  cursor: pointer;
  accent-color: var(--accent, #2563eb);
  appearance: auto;
  -webkit-appearance: auto;
  flex-shrink: 0;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
textarea { min-height: 80px; resize: vertical; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667085' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 32px; }

.jalali-date, .money-input {
  direction: ltr;
  text-align: left;
  font-family: var(--font-main);
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  font-weight: 600;
}
.inline-check input { width: auto; margin: 0; }

/* ── ۱۳. گریدها ───────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.grid.two   { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── ۱۴. جدول ────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 13px;
}
th {
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
  text-align: right;
  font-weight: 700;
  color: var(--text-3);
  font-size: 12px;
  background: var(--surface-2);
  white-space: nowrap;
}
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  vertical-align: middle;
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--surface-2); }
.sales-table td, .sales-table th { vertical-align: top; }
.sales-table input, .sales-table select { margin-bottom: 0; }
.sales-table input, .sales-table select { min-width: 110px; }
.sales-table .wide { min-width: 200px; }

/* ── ۱۵. بج و تگ ──────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── ۱۶. آلرت ────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 13px;
}
.alert.success { background: var(--ok-bg);    color: var(--ok);     border: 1px solid var(--ok-border); }
.alert.error   { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.alert.warning { background: var(--warn-bg);   color: var(--warn);   border: 1px solid var(--warn-border); }
.alert.info    { background: var(--info-bg);   color: var(--info);   border: 1px solid var(--info-border); }

/* ── ۱۷. آمار (stat cards) ───────────────────────────────── */
.stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.stat span { display: block; color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.stat b    { font-size: 20px; display: block; color: var(--text); line-height: 1.4; }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.stat-card span { display: block; color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.stat-card b    { display: block; font-size: 18px; color: var(--text); }

.stat-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--transition), box-shadow var(--transition);
}
.stat-link:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

.stats-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.summary-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }

.summary-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.summary-card b { display: block; font-size: 18px; margin-top: 6px; }

.summary-box {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 12px 0;
}

/* ── ۱۸. داشبورد ──────────────────────────────────────────── */
.dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.notice-list { display: flex; flex-direction: column; gap: 8px; }
.notice {
  display: block;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 11px 14px;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  transition: all var(--transition);
}
.notice:hover { text-decoration: none; opacity: .85; }
.notice.warning { background: var(--warn-bg);   border-color: var(--warn-border);   color: var(--warn); }
.notice.danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.notice.info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }
.notice.ok      { background: var(--ok-bg);      border-color: var(--ok-border);      color: var(--ok); }

.mini-table { display: flex; flex-direction: column; gap: 0; }
.mini-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.mini-row:last-child { border-bottom: 0; }
.mini-row span { color: var(--text-2); }
.mini-row b    { white-space: nowrap; }

/* ── ۱۹. صفحه سر ─────────────────────────────────────────── */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

/* ── ۲۰. فیلتر ───────────────────────────────────────────── */
.filter-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-row label { min-width: 170px; flex: 1; }

/* ── ۲۱. اکشن‌ها ──────────────────────────────────────────── */
.actions      { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions  { white-space: nowrap; }

/* ── ۲۲. مودال ───────────────────────────────────────────── */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(16,24,40,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.is-open { display: flex !important; }

body.modal-open { overflow: hidden; }

.modal-box {
  position: relative;
  z-index: 9001;
  width: min(640px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  padding: 20px;
}
.modal-box input, .modal-box select { background: var(--surface); }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.modal-head h3 { margin: 0; }
.modal-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-3);
  line-height: 1;
  padding: 4px;
}
.modal-close:hover { color: var(--text); }

/* ── ۲۳. تقویم جلالی ─────────────────────────────────────── */
.jcal-box {
  position: absolute;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  width: 272px;
  display: none;
  direction: rtl;
}
.jcal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jcal-head button, .jcal-foot button {
  border: 0;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition);
}
.jcal-head button:hover, .jcal-foot button:hover { background: var(--border); }
.jcal-week, .jcal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.jcal-week span { font-size: 11px; color: var(--text-3); padding: 4px 0; }
.jcal-days button {
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 7px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all var(--transition);
}
.jcal-days button:hover { background: var(--accent-light); color: var(--accent); }
.jcal-foot { margin-top: 8px; text-align: left; }

/* ── ۲۴. سرچ‌سلکت ────────────────────────────────────────── */
.search-select-wrap   { position: relative; }
.search-select-input  { width: 100%; box-sizing: border-box; }
.search-select-list {
  display: none;
  position: absolute;
  z-index: 9998;
  right: 0; left: 0;
  top: calc(100% + 4px);
  max-height: 220px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.search-select-list div { padding: 9px 12px; cursor: pointer; font-size: 13px; transition: background var(--transition); }
.search-select-list div:hover { background: var(--surface-2); }

/* ── ۲۵. منوی ناوبری قدیمی (hidden) ─────────────────────── */
.nav { display: none; }

/* ── ۲۶. ورود ────────────────────────────────────────────── */
.login-box { max-width: 420px; margin: 60px auto; }

/* ── ۲۷. گزارش‌ها ─────────────────────────────────────────── */
.report-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.report-link {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  background: var(--surface-2);
  color: var(--text);
  transition: all var(--transition);
}
.report-link:hover { background: var(--surface); border-color: var(--border-2); text-decoration: none; box-shadow: var(--shadow-sm); }
.report-link b    { display: block; margin-bottom: 5px; font-size: 14px; }
.report-link span { display: block; color: var(--text-3); font-size: 12px; line-height: 1.7; }

/* ── ۲۸. تراز آزمایشی ────────────────────────────────────── */
.tb-card { overflow: hidden; }
.tb-head, .tb-total, .tb-node > summary, .tb-leaf {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(100px, 1fr));
  gap: 8px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.tb-head  { font-weight: 800; background: var(--surface-2); color: var(--text-3); border-radius: var(--radius) var(--radius) 0 0; font-size: 12px; }
.tb-total { font-weight: 900; background: var(--surface-2); border-top: 2px solid var(--border); border-bottom: 0; }
.tb-node  { border: 0; margin: 0; }
.tb-node > summary { cursor: pointer; list-style: none; user-select: none; }
.tb-node > summary::-webkit-details-marker { display: none; }
.tb-node > summary .tb-title::before {
  content: '+';
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 7px;
  background: var(--accent-light);
  margin-left: 8px;
  color: var(--accent);
  font-weight: 900;
}
.tb-node[open] > summary .tb-title::before { content: '−'; }
.tb-title em {
  font-style: normal; font-size: 12px;
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 2px 8px; margin-right: 6px;
}
.tb-level-group > summary { background: var(--surface); }
.tb-level-kol   > summary { background: #fbfdff; }
.tb-level-moein > summary { background: var(--surface); }
.tb-level-tafsil, .tb-leaf.tb-level-tafsil { color: var(--text-2); background: #fcfcfd; }
.tb-leaf span:not(.tb-title),
.tb-node > summary span:not(.tb-title),
.tb-head span:not(:first-child),
.tb-total span:not(:first-child) { text-align: left; direction: ltr; }

/* ── ۲۹. فرم فروش ─────────────────────────────────────────── */
.sales-form .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 10px;
}
.sales-form .section-title h3 { margin: 0; }

/* ── ۳۰. section-title عمومی ────────────────────────────── */
.section-title {
  font-weight: 800;
  margin: 18px 0 8px;
  border-right: 4px solid var(--accent);
  padding-right: 10px;
  color: var(--text);
  font-size: 14px;
}

/* ── ۳۱. پیل ─────────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 13px;
}

/* ── ۳۲. تب‌ها ────────────────────────────────────────────── */
.tabs, .quick-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.mini-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.mini-tab.active, .mini-tab:hover { background: var(--primary); color: var(--text-inv); border-color: var(--primary); }

/* ── ۳۳. فرم‌های ردیفی ────────────────────────────────────── */
.inline-form {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.inline-form input { margin: 0; }
.inline-form .btn  { white-space: nowrap; }

.align-end { align-items: flex-end; }

/* ── ۳۴. فرم موبایل فروش (smart/mobile sale) ───────────── */
.mobile-sale-page  { max-width: 980px; margin: 0 auto; }
.mobile-sale-form  { background: transparent; border: 0; box-shadow: none; padding: 0; }

.sale-step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
}
.step-badge {
  position: absolute;
  top: -11px; right: 16px;
  background: var(--primary);
  color: var(--text-inv);
  border-radius: var(--radius-pill);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}
.step-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-box {
  margin-top: 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  padding: 14px;
}
.quick-box h4 { margin: 0 0 10px; }
.quick-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quick-form button { grid-column: 1 / -1; }

.component-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

.mobile-cards-list { display: grid; gap: 10px; margin-top: 12px; }
.mobile-line-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.line-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.line-total-row {
  margin-top: 8px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px;
  display: flex; justify-content: space-between;
  font-size: 13px;
}

.sale-summary-mobile {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.sale-summary-mobile div {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.sale-summary-mobile span { color: var(--text-3); font-size: 12px; }
.sale-summary-mobile b    { font-size: 15px; color: var(--text); }
.sale-summary-mobile small { color: var(--text-3); }
.submit-mobile { height: 100%; min-height: 54px; }

/* ── ۳۵. نوع فروش grid ───────────────────────────────────── */
.smart-sale-page .sale-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.smart-sale-page .sale-type-option {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--surface);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: all var(--transition);
}
.smart-sale-page .sale-type-option input  { display: none; }
.smart-sale-page .sale-type-option span   { font-weight: 800; font-size: 14px; }
.smart-sale-page .sale-type-option small  { color: var(--text-3); font-size: 12px; }
.smart-sale-page .sale-type-option.active {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: 0 4px 16px rgba(37,99,235,.12);
}
.smart-sale-page .flight-panel h4  { margin: 8px 0 12px; }
.smart-sale-page .sale-section { animation: fadeIn .15s ease-in; }

@keyframes fadeIn { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── ۳۶. نگهداری پیگیری ──────────────────────────────────── */
.followup-card { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.switch-line { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; }
.check-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 8px; font-weight: 600; cursor: pointer; }
.hint-box { background: var(--surface-2); border: 1px dashed var(--border-2); border-radius: var(--radius-sm); padding: 12px; color: var(--text-3); font-size: 13px; }
.row.between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.row.wrap    { flex-wrap: wrap; }
.small-cell  { max-width: 260px; font-size: 12px; }

/* ── ۳۷. نقش‌ها / دسترسی ────────────────────────────────── */
.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.check-card {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--surface);
}
.check-card input { display: inline-block; }
.check-card span  { font-weight: 700; }
.check-card small { color: var(--text-3); direction: ltr; text-align: left; font-size: 12px; }

/* ── ۳۸. اتاق هتل (room plan builder) ───────────────────── */
.room-plan-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.room-plan-actions {
  display: flex; gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.all-days { font-weight: 700; display: block; margin-bottom: 10px; }

/* ── ۳۹. چارتر ────────────────────────────────────────────── */
.charter-first-box  { border: 1px solid var(--info-border); background: var(--info-bg); border-radius: var(--radius); padding: 14px; margin: 10px 0 14px; }
.charter-pick.big   { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--accent-border); border-radius: var(--radius-sm); padding: 12px; cursor: pointer; }
.charter-pick.big input   { width: 20px; height: 20px; accent-color: var(--accent); }
.charter-select-box { margin-top: 12px; background: var(--surface); border-radius: var(--radius-sm); padding: 12px; border: 1px dashed var(--accent-border); }
.charter-summary    { margin-top: 10px; line-height: 1.9; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; font-size: 13px; }

/* ── ۴۰. لاگ ─────────────────────────────────────────────── */
.log-json {
  direction: ltr; text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  max-height: 340px;
  overflow: auto;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
}
details summary { cursor: pointer; font-weight: 700; margin: 8px 0; }

/* ── ۴۱. ابزارک‌های ریز ────────────────────────────────────── */
#clientErrorBox { margin: 12px 0; line-height: 1.9; }
.align-end      { align-items: flex-end; }
.full-mobile    { width: auto; }
.dashboard-panels { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.sticky-mobile-head { align-items: flex-start; gap: 12px; }
.quick-actions .card .btn { margin-top: 8px; margin-left: 6px; }
.search-box  { border-color: var(--border-2); background: var(--surface); }

/* ── ۴۲. ریسپانسیو ────────────────────────────────────────── */
@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 800px) {
  :root { --sidebar-w: auto; }

  .layout  { display: block; }

  .sidebar {
    width: auto;
    height: auto;
    position: relative;
    top: 0;
    border-left: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }

  .menu-items { grid-template-columns: 1fr 1fr; }
  .sidebar .menu-link { min-height: 40px; font-size: 12px; }

  .content { padding: 14px; }
  .topbar  { padding: 0 12px; }

  .grid { grid-template-columns: 1fr 1fr; }
  .grid.two { grid-template-columns: 1fr; }

  .inline-form { display: block; }
  .inline-form .btn { width: 100%; margin-top: 6px; }

  .filter-row { display: block; }
  .filter-row label { display: block; margin-bottom: 10px; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-card b { font-size: 15px; }

  .dashboard-hero { align-items: stretch; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; text-align: center; }

  .smart-sale-page .sale-type-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-form { grid-template-columns: 1fr; }
  .mobile-grid { grid-template-columns: 1fr; }
  .component-buttons { grid-template-columns: 1fr 1fr; }
  .component-buttons .btn { width: 100%; padding: 10px 8px; }
  .sale-summary-mobile { grid-template-columns: 1fr 1fr; }
  .sale-summary-mobile div { padding: 8px; }
  .submit-mobile { grid-column: 1 / -1; width: 100%; min-height: 50px; }
  .full-mobile { width: 100%; justify-content: center; }

  .mini-row { align-items: flex-start; flex-direction: column; }

  .tb-head { display: none; }
  .tb-node > summary, .tb-leaf, .tb-total { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; }
  .tb-title { grid-column: 1 / -1; }
  .tb-node > summary span:not(.tb-title),
  .tb-leaf span:not(.tb-title),
  .tb-total span:not(:first-child) { font-size: 12px; background: var(--surface-2); border-radius: var(--radius-sm); padding: 6px; }
  .tb-node > summary span:nth-child(2)::before,
  .tb-leaf span:nth-child(2)::before,
  .tb-total span:nth-child(2)::before { content: 'بدهکار: '; direction: rtl; }
  .tb-node > summary span:nth-child(3)::before,
  .tb-leaf span:nth-child(3)::before,
  .tb-total span:nth-child(3)::before { content: 'بستانکار: '; direction: rtl; }
  .tb-node > summary span:nth-child(4)::before,
  .tb-leaf span:nth-child(4)::before,
  .tb-total span:nth-child(4)::before { content: 'مانده بدهکار: '; direction: rtl; }
  .tb-node > summary span:nth-child(5)::before,
  .tb-leaf span:nth-child(5)::before,
  .tb-total span:nth-child(5)::before { content: 'مانده بستانکار: '; direction: rtl; }

  .report-links  { grid-template-columns: 1fr; }
  .small-cell    { max-width: none; }
  .perm-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 13px; }
  .content { padding: 10px; }
  .card { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .sale-step-card input,
  .sale-step-card select,
  .sale-step-card textarea { min-height: 44px; font-size: 15px; }
  .btn { min-height: 40px; }
  .page-head .btn { white-space: nowrap; }
  .grid { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .quick-tabs .btn { flex: 1; text-align: center; }
  .charter-pick.big { font-size: 13px; }
  .charter-summary  { font-size: 12px; }
  .smart-sale-page .sale-type-option { padding: 12px; }
  .component-buttons { grid-template-columns: 1fr; }
  .sale-summary-mobile b { font-size: 14px; }
}

@media (max-width: 430px) {
  .menu-items { grid-template-columns: 1fr; }
  .sale-summary-mobile small { font-size: 11px; }
}

/* ── ۴۳. sidebar desktop پهن‌تر ────────────────────────────── */
@media (min-width: 801px) {
  .sidebar  { width: var(--sidebar-w); padding: 16px; overflow-y: auto; }
  .content  { max-width: 1200px; }
  .app-menu { padding-bottom: 20px; }
}

/* v47 hardened inline action buttons */
.link-button{background:none;border:0;color:#2563eb;cursor:pointer;padding:0 4px;font:inherit;text-decoration:underline;display:inline}
.link-button:hover{color:#1d4ed8}
.danger-text{color:#dc2626!important}
form[style*="display:inline"]{margin:0}

/* Accounting health badges */
.badge.success { background:#ecfdf5; color:#047857; border-color:#bbf7d0; }
.badge.warning { background:#fffbeb; color:#b45309; border-color:#fde68a; }
.badge.danger { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.badge.info { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.check-inline { display:flex; align-items:center; gap:8px; min-height:44px; }
.check-inline input { width:auto; margin:0; }
.health-check-card .table-wrap table td { vertical-align:top; }

/* Finance dashboard - v61.11 */
.finance-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 12px 0; }
.finance-kpi small { display:block; color:var(--text-3); margin-top:6px; font-size:12px; font-weight:500; }
.finance-dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items:start; margin-top:12px; }
.finance-panel-important { border-color: var(--accent-border); }
.text-danger { color: var(--danger) !important; }
@media (max-width: 600px) {
  .finance-kpi-grid, .finance-dashboard-grid { grid-template-columns: 1fr; }
}

/* Financial statements - v61.12 */
.report-page-head { align-items:flex-start; gap:12px; }
.report-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.report-summary-grid { margin:12px 0; }
.financial-statement-grid { align-items:start; }
.financial-report-card .report-meta, .report-meta { color:var(--text-3); font-size:12px; margin:4px 0 12px; }
.financial-report-card h2, .financial-report-card h3 { margin-top:0; }
.pl-head, .pl-total { grid-template-columns: 1.7fr .7fr .7fr .8fr; }
.bs-head, .bs-total, .balance-sheet-card .tb-node > summary, .balance-sheet-card .tb-leaf { grid-template-columns: 1.8fr .8fr; }
.statement-equation { display:flex; flex-wrap:wrap; align-items:center; gap:10px; line-height:2; }
.statement-equation b { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; }
.financial-result-card { border-color:var(--accent-border); }
.calculated-row { background:var(--surface-2); border-style:dashed; }
.journal-book-entry { border:1px solid var(--border); border-radius:var(--radius); margin:12px 0; overflow:hidden; background:var(--surface); }
.journal-book-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 14px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.journal-book-head span { display:block; color:var(--text-3); font-size:12px; margin-top:4px; }
.journal-book-sums { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.journal-book-sums span { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 8px; color:var(--text); }
.journal-book-desc { padding:10px 14px; color:var(--text-2); border-bottom:1px solid var(--border); }
.print-toolbar { border-style:dashed; }
@media (max-width:800px) {
  .report-actions { width:100%; justify-content:stretch; }
  .report-actions .btn { flex:1; text-align:center; }
  .pl-head { display:none; }
  .pl-total, .bs-total, .balance-sheet-card .tb-node > summary, .balance-sheet-card .tb-leaf { grid-template-columns:1fr 1fr; }
  .journal-book-head { flex-direction:column; }
  .journal-book-sums { justify-content:flex-start; }
}
@media print {
  .topbar, .sidebar, .no-print, .report-actions, .logout-link, .version-pill { display:none !important; }
  .layout { display:block !important; }
  .content { max-width:none !important; padding:0 !important; }
  .card { box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; }
  body { background:#fff !important; color:#000 !important; }
  a { color:#000 !important; text-decoration:none !important; }
  .tb-node > summary, .tb-leaf, .tb-total { break-inside:avoid; }
}