/* =====================================================================
   elegant.css — لایه صیقل نهایی «دیزاین زیبای سازمانی» (v4)
   سامانه مدیریت پرسنل — کاملاً آفلاین
   بارگذاری: بعد از compact.css در header.php
   ساختار:
     [1] هویت صفحه و هدرها       [2] فیلتر-بار واحد
     [3] کارت بخش و بخش‌بندی     [4] جدول شیک
     [5] آمار مینیمال             [6] empty-state و pagination
     [7] لاگ‌ها / خط زمان رویداد
     [8] پنل کاربری               [9] جزئیات ظریف سراسری
    [10] ریسپانسیو
   ===================================================================== */

/* ── [1] هویت صفحه — سربرگ یکسان همه صفحات ────────────────────────── */
.page-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-unified, 12px);
  padding: 14px 18px;
  box-shadow: var(--shadow-xs);
}
.page-title{
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px;
}
.page-title > .icon{
  width: 26px; height: 26px; padding: 5px;
  border-radius: 8px;
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-primary-sm);
  font-size: 14px;
}
.page-subtitle{ margin-top: 2px; }
.muted-count{
  background: var(--gray-100);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 11.5px;
}

/* ── [2] فیلتر-بار واحد — الگوی یکسان همه فرم‌های فیلتر ───────────── */
.filter-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-unified, 12px);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
.filter-bar .field-label{ font-size: 11px; color: var(--gray-500); font-weight: 600; }
.filter-bar .input{ min-height: 38px; }
.filter-bar .btn{ min-height: 38px; }
/* عرض‌های inline قدیمی را خنثی می‌کند تا ریتم برقرار شود */
.filter-bar [style*="width:"]{ width: auto !important; min-width: 150px; flex: 1 1 160px; }

/* ── [3] کارت بخش — هدر کارت یکسان با نوار آبی ظریف ───────────────── */
.card{ position: relative; }
.card > h3, .card .section-title{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--gray-700);
}
.card > h3::before, .card .section-title::before{
  content: '';
  width: 4px; height: 15px;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  flex-shrink: 0;
}


/* ── [3-ب] هدر بخش‌بندی (section-head) — برای بخش‌های سه‌گانه/چندبخشی ── */
.section-head{
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: var(--sect-bg, var(--surface-muted));
  border-bottom: 1px solid var(--border-color);
}
.section-head .icon{ color: var(--sect-fg, var(--gray-500)); flex-shrink: 0; }
.section-head h4{ margin: 0; font-size: 12.5px; font-weight: 700; color: var(--sect-fg, var(--gray-700)); }

/* ── [4] جدول شیک — خطوط افقی نازک، هدر تمیز ──────────────────────── */
.table thead th{
  border-bottom: 2px solid var(--color-primary-100);
  color: var(--gray-600);
  font-size: 10.5px;
  letter-spacing: .05em;
  background: transparent;
}
.table tbody td{ border-bottom: 1px solid var(--gray-100); }
.table tbody tr:last-child td{ border-bottom: none; }
.table tbody tr:hover{ background: var(--color-primary-50); }
.table-wrap{ box-shadow: var(--shadow-xs); }

/* اکشن‌های درون جدول: دکمه‌های نرم کوچک */
.link-action{
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
}
.link-action:hover{ text-decoration: none; filter: brightness(.96); }
.link-primary{ background: var(--color-primary-50); color: var(--color-primary-700); }
.link-success{ background: var(--success-50); color: var(--success-700); }
.link-danger{ background: var(--danger-50); color: var(--danger-700); }

/* ── [5] آمار مینیمال — کاشی سبک با آیکون مربعی گرد ───────────────── */
.stat-card{ box-shadow: var(--shadow-xs); }
.stat-card:hover{ transform: translateY(-2px); }
.stat-card .tile-ico{
  width: 38px; height: 38px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stat-color, var(--color-primary)) 22%, transparent);
}
.stat-card .text-3xl{ letter-spacing: -.02em; }

/* ── [6] empty-state و pagination زیبا ────────────────────────────── */
.empty-state{
  padding: var(--sp-8) var(--sp-5);
}
.empty-state .icon{
  width: 54px; height: 54px;
  padding: 14px;
  border-radius: 18px;
  background: var(--gray-100);
  color: var(--gray-400);
  margin-bottom: var(--sp-4);
}
.empty-state p{ color: var(--gray-500); }
.page-btn{
  border-radius: 9px;
  min-width: 32px;
  font-weight: 600;
  font-size: 12.5px;
}
.page-btn.active{
  background: var(--gradient-primary);
  border-color: transparent;
  box-shadow: var(--shadow-primary-sm);
}

/* ── [7] لاگ‌ها — فهرست رویداد خوانا ──────────────────────────────── */
.log-list{ display: flex; flex-direction: column; gap: 6px; }
.log-item{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-unified, 12px);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.log-item:hover{ border-color: var(--color-primary-100); background: var(--color-primary-50); }
.log-item .log-ico{
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray-100); color: var(--gray-500);
  font-size: 13px;
}
.log-item.is-danger .log-ico{ background: var(--danger-50); color: var(--danger-600); }
.log-item.is-success .log-ico{ background: var(--success-50); color: var(--success-600); }
.log-item .log-title{ font-size: 12.5px; font-weight: 600; color: var(--gray-700); }
.log-item .log-meta{ font-size: 11px; color: var(--gray-400); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── [8] پنل کاربری — هم‌خانواده با ادمین ─────────────────────────── */
.user-topbar{
  background: var(--gradient-sidebar);
  padding: 12px var(--sp-6);
}
.user-hero{
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-unified, 12px);
  box-shadow: var(--shadow-xs);
}

/* ── [9] جزئیات ظریف سراسری ───────────────────────────────────────── */
/* alert نرم‌تر */
.alert{
  border-radius: var(--radius-unified, 12px);
  border-width: 1px;
  box-shadow: var(--shadow-xs);
  font-size: 13px;
}
/* badge با گوشه کمتر و وزن بیشتر */
.badge{ border-radius: 8px; font-weight: 600; }
/* input فشردگی بهتر */
.input{ transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.input:focus{ border-color: var(--color-accent); }
/* دکمه اصلی سایه آبی مودرن */
.btn-primary{
  background: var(--gradient-primary);
  border-color: transparent;
}
.btn-primary:hover{ box-shadow: var(--shadow-primary-md); }
/* اسکرول‌بار هماهنگ با تم */
::-webkit-scrollbar-thumb{ background: var(--gray-200); }
/* انتخاب متن به رنگ برند */
::selection{ background: var(--color-primary-100); }

/* ورود نرم عناصر اصلی هر صفحه */
.app-main > .page-head,
.app-main > .filter-bar{ animation: fadeInUp .3s var(--ease) both; }

/* ── [10] ریسپانسیو ───────────────────────────────────────────────── */
@media (max-width: 640px){
  .page-title{ font-size: 15.5px; }
  .page-title > .icon{ width: 30px; height: 30px; padding: 7px; }
  .filter-bar [style*="width:"]{ flex-basis: 100%; }
}

/* ── [11] فشردگی فرم‌ها (v5) — رفع «فیلد بزرگ با محتوای کم» ────────── */
/* فرم‌های چندستونه: گرید فشرده با فاصله کم */
.grid.gap-4{ gap: 10px 12px; }
.grid.gap-3{ gap: 8px 10px; }

/* input: ارتفاع منطقی (44px برای موبایل لازم نیست در دسکتاپ) */
@media (min-width: 641px){
  .input, .glass-input, select.input, textarea.input{ min-height: 38px; }
  .field-label{ font-size: 11.5px; }
}

/* input بر اساس محتوایش کوچک شود: کلاس‌های کمکی عرض منطقی */
.input-w-code{ max-width: 160px; }      /* کدهای عددی (کد مدرسه، کد پرسنلی) */
.input-w-phone{ max-width: 180px; }     /* شماره تماس */
.input-w-date{ max-width: 150px; }      /* تاریخ */
.input-w-num{ max-width: 110px; text-align: center; }
.input[readonly]{ background: var(--surface-muted); cursor: not-allowed; }

/* ردیف‌های فرم فشرده: فاصله عمودی کم بین ردیف‌ها */
.form-rows{ display: flex; flex-direction: column; gap: 10px; }

/* ── [12] کاشی‌های آمار: ۴+۴ در دو ردیف فشرده، اندازه کوچک‌تر ─────── */
/* قبلاً tile-ico 38px بود؛ حالا 30px و کاشی تک‌خطی واقعی */
.stat-card{ padding: 9px 14px; gap: 9px; }
.stat-card .tile-ico{ width: 30px; height: 30px; border-radius: 9px; }
.stat-card .tile-ico .icon{ width: 15px; height: 15px; }
.stat-card .text-3xl{ font-size: 17.5px; }
.stat-card .text-gray-500{ font-size: 11px; }

/* گرید داشبورد: ۴ ستونه حتی در تبلت (کاشی‌ها کوچک‌اند) */
@media (min-width: 768px){
  .stat-grid-8{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* ── [13] hr و جداکننده‌ها ظریف‌تر ─────────────────────────────────── */
hr{ border: none; border-top: 1px dashed var(--gray-200); margin: 12px 0; }

/* ── [14] utility های gap دو محوره (استفاده‌شده در ویوها) ──────────── */
.gap-x-3{ column-gap: 12px; }
.gap-y-2{ row-gap: 8px; }
.gap-x-2{ column-gap: 8px; }
.gap-y-1{ row-gap: 4px; }

/* ── [15] هم‌اندازگی فیلدها در یک ردیف (v6) ────────────────────────── */
/* همه input/textarea/select در یک ردیف فرم یک ارتفاع بگیرند */
.form-grid > div > .input,
.form-grid > div > textarea.input{ min-height: 40px; height: 40px; }
.form-grid > div > textarea.input{ height: auto; min-height: 40px; }
/* آیتم‌های readonly هم همان ارتفاع */
.form-grid > div > .input[readonly]{ min-height: 40px; height: 40px; }

/* textarea های تک‌خط فرم بازدید: ارتفاع برابر input */
textarea.input{ line-height: 1.6; }

/* گرید بازدیدهای قبلی: همان الگوی فشرده form-grid */
.prev-grid{
  display: grid;
  grid-template-columns: minmax(0,2fr) 170px 130px;
  gap: 10px 12px;
}

/* ردیف‌های فرم پویا (بازدیدکننده): ارتفاع یکسان */
.visitor-row .input{ min-height: 36px; }

/* جدول‌های فرم پویا (پیگیری/غایبین): سلول‌ها یکدست ۳۶px */
#followup-table .input, #absent-table .input{
  min-height: 36px;
  padding-top: 6px; padding-bottom: 6px;
}
#followup-table textarea.input, #absent-table textarea.input{
  min-height: 36px; height: 36px; resize: none;
}
#followup-table td, #absent-table td{ vertical-align: middle; }

/* ── [16] هم‌اندازگی ارتفاع آیکون و متن در سربرگ بخش‌ها (v6) ───────── */
/* page-title: قاب آیکون با متن هم‌ارتفاع */
.page-title{ line-height: 34px; }
.page-title > .icon{ vertical-align: middle; }
/* h3 کارت: نوار آبی با متن هم‌تراز */
.card > h3, .card .section-title{ line-height: 20px; }
.card > h3::before, .card .section-title::before{ height: 14px; align-self: center; }

/* badge-dot ها هم‌تراز متن */
.badge-dot{ display: inline-block; vertical-align: middle; }

/* کاشی آمار: برچسب و عدد چپ‌چین کنار آیکون؛ ارتفاع یکسان همه کاشی‌ها */
.stat-card{ min-height: 52px; }
.stat-card .min-w-0{ display: flex; flex-direction: column; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════
   v7 — بازطراحی حرفه‌ای (Professional Redesign)
   الهام از: Linear, Stripe, Vercel, Tailwind UI
   ══════════════════════════════════════════════════════════════════════ */

/* ── [17] فرم‌های بدون grid → دو ستونه خودکار ─────────────────────── */
/* هر card-pad حاوی فرم: فیلدهای mb-4 به grid دو‌ستونه تبدیل شوند */
.card-pad form > .mb-4 + .mb-4 + .mb-4{
  /* CSS Hint: اگر 3+ فیلد پشت‌هم هست، grid بهتر است */
}

/* فرم‌های CRUD: gap فشرده */
.crud-form .mb-4{ margin-bottom: 10px !important; }
.crud-form .mb-3{ margin-bottom: 8px !important; }

/* ── [18] ریتم یکپارچه کارت‌ها (Consistent Card Rhythm) ──────────── */
/* همه کارت‌ها: پدینگ ۱۶px + شعاع ۱۲px + سایه xs */
.card, .stat-card, .glass-card, .filter-bar{
  border-radius: var(--radius-unified, 12px);
}
.card-pad{ padding: 16px; }

/* ── [19] آیکون بج section-head داخل فرم: ۲۴px (Linear-style) ────── */
h3.flex .icon, h3 .icon{
  width: 17px; height: 17px;
  flex-shrink: 0;
}

/* ── [20] جدول: ستون اکشن باریک‌تر ──────────────────────────────── */
.table td:last-child{ white-space: nowrap; }
.table .link-action + .link-action{ margin-inline-start: 4px; }

/* ── [21] Glassmorphism ملایم برای filter-bar (Vercel-style) ─────── */
.filter-bar{
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── [22] انیمیشن‌های میکرو (Micro-interactions) ────────────────── */
/* کاشی آمار: ورود با تأخیر */
.stat-card{ animation: fadeInUp .35s var(--ease) both; }
.stat-card:nth-child(1){ animation-delay: 0s; }
.stat-card:nth-child(2){ animation-delay: .04s; }
.stat-card:nth-child(3){ animation-delay: .08s; }
.stat-card:nth-child(4){ animation-delay: .12s; }
.stat-card:nth-child(5){ animation-delay: .16s; }
.stat-card:nth-child(6){ animation-delay: .20s; }
.stat-card:nth-child(7){ animation-delay: .24s; }
.stat-card:nth-child(8){ animation-delay: .28s; }

/* کارت‌ها: ورود نرم */
.card{ animation: fadeInUp .3s var(--ease) both; }
.crud-layout > :nth-child(1) .card{ animation-delay: .05s; }
.crud-layout > :nth-child(2) .card{ animation-delay: .12s; }

/* جدول ردیف‌ها: hover ملایم با حرکت */
.table tbody tr{ transition: background var(--t-fast), transform var(--t-fast); }
.table tbody tr:hover{ background: var(--color-primary-50); }

/* دکمه‌ها: ripple effect ساده */
.btn{ position: relative; overflow: hidden; }
.btn::after{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,.25), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.btn:active::after{ opacity: 1; transition: none; }

/* input focus: خط پایین آبی به جای حاشیه (Linear-style) */
.input:focus{
  border-color: var(--color-accent);
  box-shadow: 0 2px 0 0 var(--color-primary) inset, var(--shadow-focus);
}

/* ── [23] ریسپانسیو حرفه‌ای (5 breakpoint) ────────────────────────── */
/* Mobile: 320-480px */
@media (max-width: 480px){
  .page-title{ font-size: 14px; gap: 6px; }
  .page-title > .icon{ width: 28px; height: 28px; padding: 6px; }
  .stat-card{ padding: 8px 10px; gap: 6px; }
  .stat-card .tile-ico{ width: 24px; height: 24px; }
  .stat-card .text-3xl{ font-size: 15px; }
  .stat-card .text-gray-500{ font-size: 10px; }
  .filter-bar{ padding: 10px; gap: 8px; }
  .table{ font-size: 11.5px; }
  .table thead th{ font-size: 9.5px; padding: 6px 7px; }
  .table tbody td{ padding: 6px 7px; }
  .btn-sm{ min-height: 32px; font-size: 11.5px; }
}

/* Tablet portrait: 768px */
@media (min-width: 481px) and (max-width: 768px){
  .stat-grid-8{ grid-template-columns: repeat(2, 1fr) !important; }
}

/* Tablet landscape: 1024px */
@media (min-width: 769px) and (max-width: 1024px){
  .stat-grid-8{ grid-template-columns: repeat(4, 1fr) !important; }
  .crud-layout{ grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* Laptop: 1366px — default layout, no override needed */

/* Desktop: 1920px+ — wider margins */
@media (min-width: 1920px){
  .app-main{ max-width: 1600px; margin-inline: auto; padding: var(--sp-6) var(--sp-8); }
  .stat-card .tile-ico{ width: 34px; height: 34px; }
  .table{ font-size: 14px; }
}

/* ── [24] keyboard navigation بهتر (A11y) ──────────────────────────── */
.sidebar-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: -2px;
}
.stat-card:focus-within{ box-shadow: var(--shadow-focus); }
.table tbody tr:focus-within{ background: var(--color-primary-50); outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ── [25] selection & print ────────────────────────────────────────── */
@media print{
  .sidebar, .glass-sidebar, .sidebar-toggle, .sidebar-backdrop,
  .side-panel, .side-backdrop, .focus-close{ display: none !important; }
  .app-main{ padding: 0; }
  .card{ box-shadow: none; border: 1px solid #ddd; }
  .stat-card{ break-inside: avoid; }
  .table{ font-size: 11px; }
}