/* ============================================================
   K3 HVAC — Responsive & RTL Layer (Phase 12)
   ============================================================
   Mobile-first responsive design + RTL fixes
   Breakpoints:
     - mobile:  ≤ 768px
     - tablet:  769px - 1024px
     - desktop: > 1024px
   ============================================================ */

/* ------------------------------------------------------------
   1. SCROLL LOCK لما الـ sidebar drawer مفتوح
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  body.sidebar-open { overflow: hidden; }
}

/* Backdrop شفاف وراء الـ sidebar drawer */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 49;
  animation: fadeIn 0.15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1024px) {
  body.sidebar-open .sidebar-backdrop { display: block; }
}

/* ------------------------------------------------------------
   2. TABLET BREAKPOINT (≤ 1024px) — Sidebar يصير drawer
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
  .app-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas: "topbar" "main" !important;
  }
  html[dir="rtl"] .app-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas: "topbar" "main" !important;
  }
  .sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 0; bottom: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.25s ease-out;
    z-index: 50;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }
  html[dir="rtl"] .sidebar {
    transform: translateX(100%);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  }
  .sidebar.is-open { transform: translateX(0) !important; }
  .menu-toggle { display: inline-flex !important; }
  .main { padding: var(--sp-4); }
}

/* ------------------------------------------------------------
   3. MOBILE BREAKPOINT (≤ 768px) — تكييف عميق
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* === Topbar === */
  .topbar {
    padding: 0 var(--sp-3) !important;
    gap: var(--sp-2) !important;
    height: 56px !important;
  }
  .topbar-title {
    font-size: 16px !important;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-search { display: none !important; }
  .topbar-actions { gap: 6px !important; }

  /* User chip — أصغر بدون النص */
  .user-chip { padding: 4px !important; }
  .user-info { display: none !important; }
  .user-avatar { width: 32px !important; height: 32px !important; font-size: 11px !important; }

  /* Language switcher — أزرار أصغر */
  .lang-switch button {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* Bell صغّرها شوية */
  .bell-btn { width: 36px !important; height: 36px !important; }

  /* === Main padding أقل === */
  .main { padding: var(--sp-3) !important; }

  /* === Page header — وش وقفة عمودية === */
  .page-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: var(--sp-3) !important;
    margin-bottom: var(--sp-3) !important;
  }
  .page-title { font-size: 20px !important; }
  .page-subtitle { font-size: 13px !important; }
  .page-actions {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .page-actions .btn {
    flex: 1;
    min-width: 0;
    font-size: 13px !important;
  }

  /* === KPI grid: عمود واحد === */
  .kpi-grid { grid-template-columns: 1fr !important; gap: var(--sp-2) !important; }
  .kpi { padding: 12px 14px !important; }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 11px !important; }

  /* === Forms: كل شيء عمود واحد === */
  .form-row,
  .form-row.col-2,
  .form-row.col-3,
  .form-row.col-4 {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3) !important;
  }

  /* === Tables: scroll أفقي + smaller padding === */
  .data-table {
    font-size: 12px !important;
  }
  .data-table th, .data-table td {
    padding: 8px 6px !important;
  }
  /* Wrap table in scroll container — لو الـ html ما يفعّل، الـ card يلف */
  .card { overflow-x: auto; }

  /* === Modals: full-screen على الموبايل === */
  .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    inset: 0 !important;
  }
  .modal-overlay { padding: 0 !important; }
  .modal-header { padding: 12px 16px !important; font-size: 14px !important; }
  .modal-body { padding: 16px !important; max-height: calc(100vh - 120px) !important; }
  .modal-footer {
    padding: 10px 16px !important;
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .modal-footer .btn {
    flex: 1;
    min-width: 0;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  /* === Dashboard grids: عمود واحد === */
  .dash-grid { grid-template-columns: 1fr !important; }

  /* === Cards: padding أقل === */
  .card-header { padding: 10px 12px !important; }
  .card-body { padding: 12px !important; }
  .card-title { font-size: 14px !important; }

  /* === Tabs: قابلة للف + scroll === */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--sp-3));
    padding-inline: var(--sp-3);
    scrollbar-width: thin;
  }
  .tab {
    flex-shrink: 0;
    padding: 8px 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* === Settings layout === */
  .settings-layout { grid-template-columns: 1fr !important; }
  .settings-nav {
    position: relative !important;
    top: 0 !important;
    margin-bottom: var(--sp-3);
  }

  /* === Reports layout === */
  .reports-layout { grid-template-columns: 1fr !important; }
  .reports-sidebar {
    position: relative !important;
    top: 0 !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--sp-3));
    padding-inline: var(--sp-3);
  }
  .report-item { flex-shrink: 0; }

  /* === Dashboard widgets === */
  .stat-card { padding: 14px !important; }
  .stat-icon { width: 40px !important; height: 40px !important; }
  .stat-value { font-size: 22px !important; }

  /* === Login screen === */
  .login-card {
    margin: var(--sp-4) !important;
    padding: var(--sp-5) var(--sp-4) !important;
  }
  .login-title { font-size: 22px !important; }

  /* === Detail grids === */
  .detail-grid { grid-template-columns: 1fr !important; }

  /* === Charts: أصغر === */
  .chart-svg { max-height: 200px !important; }
  .hbar-row {
    grid-template-columns: 100px 1fr 90px !important;
    font-size: 11px !important;
    gap: 6px !important;
  }
  .hbar-label { font-size: 11px !important; }

  /* === Empty states === */
  .empty-state { padding: 24px 12px !important; }
  .empty-title { font-size: 14px !important; }

  /* === MR form chips === */
  .mr-checks {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mr-rating-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .mr-eq-table { min-width: 720px !important; }

  /* === Store voucher items === */
  .sv-detail-meta { grid-template-columns: 1fr !important; }

  /* === RTL adjustments للموبايل === */
  html[dir="rtl"] .tabs,
  html[dir="rtl"] .reports-sidebar {
    margin-inline: calc(-1 * var(--sp-3));
    padding-inline: var(--sp-3);
  }
}

/* ------------------------------------------------------------
   4. SMALL MOBILE (≤ 480px) — تشديد إضافي
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .topbar { padding: 0 8px !important; }
  .topbar-title { font-size: 14px !important; }

  .page-title { font-size: 18px !important; }
  .kpi-value { font-size: 20px !important; }

  /* أضيق زرار في الـ topbar */
  .lang-switch button { padding: 3px 6px !important; }

  /* بعض الكروت في صفحات معينة */
  .alert-card { padding: 8px !important; }
}

/* ------------------------------------------------------------
   5. RTL FIXES — إصلاحات منطقية للعربية
   ------------------------------------------------------------ */

/* أيقونات الأزرار في RTL — لازم تنعكس في الـ margin */
html[dir="rtl"] .btn svg {
  margin-inline-end: 0;
  margin-inline-start: 0;
}
html[dir="rtl"] .btn > svg:first-child {
  margin-inline-end: 6px;
  margin-inline-start: 0;
}

/* جداول في RTL — الـ scroll يبدأ من اليمين */
html[dir="rtl"] .table-scroll,
html[dir="rtl"] .card { direction: rtl; }
html[dir="rtl"] .data-table { text-align: start; }

/* badges + المسافة بين النص والنقطة */
html[dir="rtl"] .badge { padding-inline: 8px; }

/* progress cells in RTL */
html[dir="rtl"] .progress-cell { justify-content: flex-start; }

/* numeric cells في RTL يبقوا right-aligned (numeric direction LTR) */
.num, .text-mono {
  direction: ltr;
  text-align: end;
  unicode-bidi: isolate;
}
html[dir="rtl"] .num,
html[dir="rtl"] .text-mono {
  text-align: end;
}

/* === Modal close button في RTL === */
html[dir="rtl"] .modal-close {
  right: auto;
  left: 12px;
}

/* === Sidebar arrow icon في RTL لما يكون collapsible === */
html[dir="rtl"] .nav-item svg.chevron {
  transform: scaleX(-1);
}

/* ------------------------------------------------------------
   6. TABLET-SPECIFIC (769px - 1024px) — تحسينات خاصة
   ------------------------------------------------------------ */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Topbar search visible لكن أقصر */
  .topbar-search input { max-width: 200px; }

  /* User info ظاهر */
  .user-info { display: block !important; }

  /* KPIs على عمودين */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Forms على عمودين max */
  .form-row.col-3,
  .form-row.col-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Modal بحجم متوسط */
  .modal {
    width: 90vw !important;
    max-width: 700px !important;
  }
  .modal[data-size="xl"] { max-width: 90vw !important; }

  /* Reports sidebar أضيق */
  .reports-layout { grid-template-columns: 200px 1fr !important; }
}

/* ------------------------------------------------------------
   7. TOUCH-FRIENDLY (touch devices) — أزرار أكبر
   ------------------------------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* أزرار الـ ghost في الجداول لازم تكون 36px على الأقل لـ tap target */
  .data-table .btn-ghost.btn-sm,
  .data-table .btn-sm {
    min-width: 36px;
    min-height: 36px;
  }
  /* Form inputs أكبر */
  input, select, textarea, .input, .select {
    font-size: 16px !important; /* بيمنع iOS من الـ zoom */
  }
  .input-sm, .select.input-sm {
    font-size: 14px !important;
  }
}

/* ------------------------------------------------------------
   8. PRINT — يبقى كما هو على كل الأحجام
   ------------------------------------------------------------ */
@media print {
  .sidebar, .topbar, .menu-toggle, .sidebar-backdrop {
    display: none !important;
  }
  .app-shell {
    grid-template-columns: 1fr !important;
    grid-template-areas: "main" !important;
  }
  .main { padding: 0 !important; }
}