/* ═══════════════════════════════════════════════════════════
   FONT FIT — تنظیم دقیق فونت‌ها و جدول‌ها برای موبایل
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ═══════════ پایه — کوچک‌تر ═══════════ */
  html {
    font-size: 13px !important;
  }

  body {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
    -webkit-text-size-adjust: 100% !important;
  }

  /* جلوگیری از overflow افقی */
  .app, .main, .container, .dash-container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ═══════════ تیترها — خیلی کوچک‌تر ═══════════ */
  h1 { font-size: 15px !important; line-height: 1.35 !important; }
  h2 { font-size: 13.5px !important; line-height: 1.4 !important; }
  h3 { font-size: 12.5px !important; line-height: 1.4 !important; }
  h4, h5, h6 { font-size: 12px !important; line-height: 1.4 !important; }

  p, span, div, a, li, td, th, label, strong {
    font-size: 12.5px !important;
    line-height: 1.65 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     جدول‌ها — یک ردیف افقی با اسکرول
     ═══════════════════════════════════════════════════════════ */

  /* پوشش جدول برای اسکرول افقی */
  .tbl-wrap,
  .table-scroll,
  .card > .tbl,
  .card > table.tbl {
    /* اینجا فقط خود جدول را تنظیم می‌کنیم */
  }

  /* ظرف جدول برای اسکرول افقی */
  .card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* خود جدول */
  .tbl {
    display: table !important;
    width: 100% !important;
    min-width: 480px !important;   /* حداقل عرض برای خوانایی */
    font-size: 11px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* در دسکتاپ و ریزتر از این، اسکرول نمی‌شود */
  .tbl thead {
    display: table-header-group !important;
  }

  .tbl tbody {
    display: table-row-group !important;
  }

  .tbl tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  .tbl tr::before {
    display: none !important;
  }

  .tbl th {
    display: table-cell !important;
    padding: 8px 6px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, rgba(20,74,138,.85), rgba(10,46,90,.9)) !important;
    color: #ffc947 !important;
    border-bottom: 1px solid rgba(240,165,0,.4) !important;
    text-align: right !important;
    vertical-align: middle !important;
    line-height: 1.3 !important;
    min-width: 55px !important;
  }

  .tbl td {
    display: table-cell !important;
    padding: 7px 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
    text-align: right !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    line-height: 1.35 !important;
    color: #e8eef6 !important;
    min-height: auto !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .tbl td::before {
    display: none !important;
    content: none !important;
  }

  .tbl tr:hover td {
    background: rgba(240,165,0,.08) !important;
  }

  /* badge ها کوچک */
  .tbl .badge,
  .tbl .shift-badge {
    font-size: 9.5px !important;
    padding: 2px 6px !important;
    min-height: auto !important;
    line-height: 1.4 !important;
    border-radius: 5px !important;
  }

  /* نام دانش‌آموز در جدول */
  .tbl td b,
  .tbl td strong {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #fff !important;
  }

  /* ═══════════════════════════════════════════════════════════
     کارت‌ها — فشرده‌تر
     ═══════════════════════════════════════════════════════════ */

  .card {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 10px !important;
  }

  .card h2 {
    font-size: 13px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    gap: 6px !important;
  }

  .card h2::before {
    width: 3px !important;
    height: 14px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     کارت‌های آماری — کوچک‌تر
     ═══════════════════════════════════════════════════════════ */

  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .stat-card-pro {
    padding: 10px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    min-height: 72px !important;
  }

  .stat-label {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    margin-bottom: 3px !important;
  }

  .stat-value {
    font-size: 17px !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }

  .stat-trend {
    font-size: 9px !important;
  }

  .stat-bg-icon {
    font-size: 50px !important;
  }

  .stat-card .label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  .stat-card .value {
    font-size: 20px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     Hero — کوچک‌تر
     ═══════════════════════════════════════════════════════════ */

  .dash-hero-pro {
    padding: 14px 14px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }

  .hero-icon-pulse {
    width: 42px !important;
    height: 42px !important;
    font-size: 20px !important;
    border-radius: 11px !important;
  }

  .hero-title {
    font-size: 14px !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
  }

  .hero-sub {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .hero-live {
    padding: 5px 10px !important;
    font-size: 10px !important;
  }

  .hero-live .live-dot {
    width: 7px !important;
    height: 7px !important;
  }

  .hero-left { gap: 10px !important; }

  /* ═══════════════════════════════════════════════════════════
     فیلتر چیپی — کوچک‌تر
     ═══════════════════════════════════════════════════════════ */

  .filter-pro-card {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }

  .filter-row { gap: 10px !important; }

  .filter-group {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .filter-label {
    font-size: 11px !important;
    min-width: auto !important;
    font-weight: 800 !important;
  }

  .chips {
    gap: 5px !important;
    padding-bottom: 4px !important;
  }

  .chip {
    padding: 6px 11px !important;
    font-size: 10.5px !important;
    min-height: 30px !important;
    font-weight: 700 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     کارت‌های معلم/درس
     ═══════════════════════════════════════════════════════════ */

  .teacher-card-pro {
    padding: 12px !important;
    border-radius: 13px !important;
    margin-bottom: 10px !important;
  }

  .teacher-head-pro {
    gap: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
  }

  .teacher-avatar-pro {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
    border-radius: 11px !important;
  }

  .teacher-name-pro {
    font-size: 12.5px !important;
    margin-bottom: 3px !important;
  }

  .teacher-meta-pro {
    font-size: 10.5px !important;
    gap: 8px !important;
  }

  .shift-pill {
    padding: 4px 9px !important;
    font-size: 10px !important;
    min-height: 24px !important;
  }

  .teacher-courses {
    gap: 8px !important;
  }

  .course-pill {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .course-name {
    font-size: 11.5px !important;
  }

  .course-class {
    font-size: 10.5px !important;
    margin-bottom: 6px !important;
  }

  .mini-tag {
    font-size: 9px !important;
    padding: 2px 6px !important;
    min-height: 20px !important;
  }

  .course-students {
    font-size: 10px !important;
  }

  .enter-btn {
    padding: 7px 14px !important;
    font-size: 11px !important;
    min-height: 32px !important;
  }

  /* mini stats داخل کارت درس */
  .mini-stats-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  .mini-stat {
    padding: 8px 5px !important;
    border-radius: 9px !important;
    min-height: 60px !important;
  }

  .ms-icon { font-size: 14px !important; margin-bottom: 2px !important; }
  .ms-value { font-size: 14px !important; }
  .ms-label { font-size: 9px !important; margin-top: 2px !important; }

  .progress-label, .progress-value { font-size: 10px !important; }
  .progress-bar-pro { height: 6px !important; }
  .progress-row { gap: 8px !important; padding-top: 8px !important; }

  /* ═══════════════════════════════════════════════════════════
     Side Card
     ═══════════════════════════════════════════════════════════ */

  .side-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .side-head {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .side-head h3 { font-size: 12px !important; }

  .live-badge {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }

  /* Timeline */
  .timeline {
    max-height: 260px !important;
    gap: 7px !important;
  }

  .timeline-item {
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 9px !important;
  }

  .timeline-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  .timeline-title { font-size: 11px !important; margin-bottom: 2px !important; }
  .timeline-sub { font-size: 10px !important; margin-bottom: 4px !important; }
  .timeline-meta { font-size: 9px !important; gap: 6px !important; }

  .score-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     Top Classes
     ═══════════════════════════════════════════════════════════ */

  .top-class-item {
    padding: 8px 10px !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    border-radius: 10px !important;
  }

  .top-rank { font-size: 15px !important; width: 24px !important; }
  .top-name { font-size: 11px !important; margin-bottom: 3px !important; }
  .top-rate { font-size: 11.5px !important; min-width: 40px !important; }
  .top-bar-bg { height: 4px !important; }

  /* ═══════════════════════════════════════════════════════════
     Quick Grid
     ═══════════════════════════════════════════════════════════ */

  .quick-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .quick-mini {
    padding: 10px 6px !important;
    gap: 3px !important;
    border-radius: 10px !important;
    min-height: 62px !important;
  }

  .qm-icon { font-size: 18px !important; }
  .qm-text { font-size: 10px !important; }

  /* ═══════════════════════════════════════════════════════════
     نمودارها
     ═══════════════════════════════════════════════════════════ */

  .chart-card-pro {
    padding: 12px !important;
    border-radius: 12px !important;
    min-height: 230px !important;
  }

  .chart-head {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .chart-head h3 { font-size: 11.5px !important; }

  .chart-badge {
    font-size: 9px !important;
    padding: 3px 8px !important;
  }

  .chart-card-pro canvas { max-height: 180px !important; }

  /* ═══════════════════════════════════════════════════════════
     فرم‌ها — کوچک‌تر ولی هنوز لمس‌پذیر
     ═══════════════════════════════════════════════════════════ */

  label {
    font-size: 11.5px !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
  }

  input, select, textarea {
    padding: 9px 11px !important;
    font-size: 16px !important;  /* جلوگیری از zoom iOS */
    min-height: 40px !important;
    border-radius: 9px !important;
    margin-top: 4px !important;
  }

  button, .btn {
    padding: 9px 14px !important;
    font-size: 12px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
    font-weight: 800 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     Tabs
     ═══════════════════════════════════════════════════════════ */

  .tabs {
    padding: 4px !important;
    gap: 3px !important;
    border-radius: 10px !important;
  }

  .tab {
    padding: 7px 12px !important;
    font-size: 11px !important;
    min-height: 34px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
  }

  /* ═══════════════════════════════════════════════════════════
     حضور و غیاب
     ═══════════════════════════════════════════════════════════ */

  .att-grid { gap: 6px !important; }

  .att-row {
    flex-direction: row !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .att-row .name {
    font-size: 11.5px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: right !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .att-row .btns {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: auto !important;
  }

  .att-btn {
    padding: 5px 7px !important;
    font-size: 9.5px !important;
    min-height: 30px !important;
    border-radius: 7px !important;
    font-weight: 700 !important;
  }

  /* Grade Row */
  .grade-row {
    flex-direction: row !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .grade-row span {
    font-size: 11.5px !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-align: right !important;
    flex: 1 !important;
  }

  .grade-row input {
    width: 70px !important;
    text-align: center !important;
    font-size: 14px !important;
    padding: 6px 8px !important;
    min-height: 34px !important;
  }

  /* ═══════════════════════════════════════════════════════════
     Sidebar
     ═══════════════════════════════════════════════════════════ */

  .sidebar {
    width: 240px !important;
    max-width: 78vw !important;
    padding: 14px 12px !important;
  }

  .sidebar .logo {
    font-size: 13px !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    gap: 8px !important;
  }

  .sidebar .logo-emoji {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
    border-radius: 9px !important;
  }

  .sidebar nav a {
    padding: 9px 12px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    border-radius: 9px !important;
    gap: 8px !important;
    font-weight: 700 !important;
  }

  .sidebar .user-mini {
    padding: 9px 10px !important;
    font-size: 11px !important;
    gap: 8px !important;
  }

  .sidebar .avatar {
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
  }

  .logout-btn, .switch-user {
    min-height: 40px !important;
    padding: 9px 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
  }

  .logout-box { margin-top: 10px !important; padding-top: 10px !important; }

  /* ═══════════════════════════════════════════════════════════
     Topbar
     ═══════════════════════════════════════════════════════════ */

  .topbar {
    margin-bottom: 12px !important;
    padding-bottom: 10px !important;
    gap: 8px !important;
  }

  .topbar h1 { font-size: 13.5px !important; }

  .topbar .actions { gap: 6px !important; }
  .topbar .actions .btn {
    font-size: 11px !important;
    padding: 7px 11px !important;
    min-height: 34px !important;
  }

  .main { padding: 12px 10px !important; }

  /* ═══════════════════════════════════════════════════════════
     صفحه ورود
     ═══════════════════════════════════════════════════════════ */

  .login-card {
    padding: 22px 16px !important;
    border-radius: 16px !important;
  }

  .login-card .brand-emoji {
    width: 52px !important;
    height: 52px !important;
    font-size: 22px !important;
  }

  .login-card h2 {
    font-size: 15px !important;
    margin: 8px 0 3px !important;
  }

  .login-card p.sub {
    font-size: 11px !important;
    margin-bottom: 16px !important;
  }

  .login-card label {
    font-size: 11px !important;
    margin-bottom: 10px !important;
  }

  .login-card button {
    padding: 11px !important;
    font-size: 13px !important;
    min-height: 42px !important;
  }

  .login-foot { font-size: 10.5px !important; margin-top: 14px !important; }

  /* ═══════════════════════════════════════════════════════════
     Grid عمومی
     ═══════════════════════════════════════════════════════════ */

  .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* دو ستونه برای کارت‌های کوچک */
  .quick-grid { grid-template-columns: repeat(2, 1fr) !important; }

  .two-col { grid-template-columns: 1fr !important; gap: 10px !important; }
  .col-main, .col-side { gap: 10px !important; }

  /* section head */
  .section-head { padding: 0 3px 6px !important; }
  .section-head h2 { font-size: 13px !important; }
  .section-head h2::before { height: 15px !important; width: 3px !important; }
  .count-badge {
    font-size: 10px !important;
    padding: 3px 9px !important;
  }

  /* کارت‌های خروجی */
  .exp-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .exp-card { padding: 14px !important; border-radius: 12px !important; gap: 6px !important; }
  .exp-card .ec-ico { font-size: 22px !important; }
  .exp-card h3 { font-size: 12.5px !important; }
  .exp-card p { font-size: 11px !important; line-height: 1.5 !important; }
  .exp-card .ec-sub { padding-top: 8px !important; font-size: 10.5px !important; gap: 6px !important; }

  /* ═══════════════════════════════════════════════════════════
     صفحه ی سایت اصلی (اگر در موبایل باز شد)
     ═══════════════════════════════════════════════════════════ */

  .logo-badge {
    width: 58px !important;
    height: 58px !important;
    margin-bottom: 10px !important;
  }

  .logo-badge i { font-size: 1.6rem !important; }

  .header { margin-bottom: 14px !important; }

  .header h1 {
    font-size: 15px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header .subtitle {
    font-size: 10.5px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .prof-tag {
    padding: 6px 10px !important;
    font-size: 10.5px !important;
    gap: 5px !important;
  }

  .prof-tag i { font-size: 0.9em !important; }

  .card-title { font-size: 12.5px !important; }
  .card-desc { font-size: 10.5px !important; line-height: 1.5 !important; }
  .card-icon { width: 42px !important; height: 42px !important; font-size: 1.1rem !important; }
  .card { padding: 12px 14px !important; gap: 12px !important; }
  .card-badge { font-size: 9.5px !important; padding: 2px 7px !important; }

  .footer p { font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════
   موبایل خیلی کوچک (< 380px)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  html { font-size: 12.5px !important; }

  .stat-value { font-size: 16px !important; }
  .tbl { min-width: 420px !important; }
  .tbl th { font-size: 10px !important; padding: 6px 4px !important; }
  .tbl td { font-size: 10.5px !important; padding: 6px 4px !important; }
  .att-btn { font-size: 9px !important; padding: 5px 5px !important; min-height: 28px !important; }
  .att-row { padding: 7px 8px !important; }
  .att-row .name { font-size: 11px !important; }
}

/* ═══════════════════════════════════════════════════════════
   تبلت (601 - 900px) — بین حالت
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 601px) and (max-width: 900px) {
  html { font-size: 14px !important; }
  body { font-size: 13.5px !important; }
  .stats-row { grid-template-columns: repeat(3, 1fr) !important; }
  .grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tbl { min-width: 100% !important; font-size: 12px !important; }
  .tbl th { font-size: 11.5px !important; padding: 9px 8px !important; }
  .tbl td { font-size: 12px !important; padding: 8px 8px !important; }
}

/* ═══════════════════════════════════════════════════════════
   استایل اسکرول‌بار نازک برای جدول‌ها در موبایل
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .card::-webkit-scrollbar {
    height: 3px;
  }
  .card::-webkit-scrollbar-thumb {
    background: rgba(240, 165, 0, 0.5);
    border-radius: 3px;
  }
  .card::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
  }
}