/* ═══════════════════════════════════════════════════════════════════════════════
 *  EL MATAJER — RESPONSIVE STYLESHEET  v2
 *  Layout + component breakpoints. No base definitions here.
 *
 *  Breakpoints (max-width):
 *    1920px+  →  cap via min-width rule at bottom
 *    1400px   →  XL desktops
 *    1200px   →  LG desktops
 *    992px    →  Tablets landscape / medium (sidebar becomes drawer)
 *    768px    →  Tablets portrait
 *    576px    →  Mobile
 *    360px    →  Ultra-small
 *
 *  Rules:
 *  – Logical properties only (margin-inline, padding-inline, inset-inline)
 *  – No fixed pixel widths on layout containers
 *  – No !important unless overriding a third-party rule
 *  – No component definitions — overrides only
 * ═══════════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────────
 * ≤1400px  XL desktops
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {

  /* Page horizontal padding tightens */
  .page-content { padding-inline: var(--space-5, 20px); }

  /* Grids lose one column */
  .grid-4 { grid-template-columns: repeat(3, 1fr); }

  /* POS side panel */
  .righ-side { width: 33%; }
  .pos-menu  { overflow-y: auto; overflow-x: hidden; height: 65vh; padding: 0 10px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ≤1200px  LG desktops
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {

  /* Grids */
  .grid-3           { grid-template-columns: repeat(2, 1fr); }
  .grid-4           { grid-template-columns: repeat(2, 1fr); }
  .grid-2-1,
  .grid-3-1,
  .grid-1-2         { grid-template-columns: 1fr; }

  /* POS */
  .main-product     { margin-inline-start: 125px; }

  /* Sidebar legacy classes (no-op in new system — kept for compat) */
  .sidebar-lg { display: none; }
  .sidebar-md { display: block; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ≤992px  Tablets landscape — sidebar becomes off-canvas drawer
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 992px) {

  /* ── Layout: sidebar drawer, main fills full width ── */
  .main-content,
  .main-content-rtl {
    margin-inline-start: 0 !important;
    margin-inline-end:   0 !important;
    width:               100% !important;
  }

  /*
   * Direction-scoped overrides — same specificity (0,2,0) as
   * html[dir] rules in style.css so these win over them at ≤992px.
   * style.css only resets at ≤991px; this closes the 1px gap and
   * ensures the logical-property reset above is never outranked.
   */
  html[dir="ltr"] .main-content,
  html[dir="ltr"] .main-content-rtl,
  html[dir="ltr"] .content-body {
    margin-left:  0 !important;
    margin-right: 0 !important;
    width:        100% !important;
  }
  html[dir="rtl"] .main-content,
  html[dir="rtl"] .main-content-rtl,
  html[dir="rtl"] .content-body {
    margin-right: 0 !important;
    margin-left:  0 !important;
    width:        100% !important;
  }

  /* Page content top spacing (topbar is sticky, no longer eats layout space) */
  .page-content { padding: var(--space-4, 16px); padding-bottom: var(--space-16, 64px); }

  /* ── Topbar: full width on mobile (margin reset) ── */
  .page-topbar {
    margin-inline-start: 10px !important;
    margin-inline-end:   10px !important;
  }

  /* ── Grids ── */
  .grid-2           { grid-template-columns: 1fr; }
  .grid-2-1,
  .grid-1-2         { grid-template-columns: 1fr; }
  .grid-auto        { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  /* ── Action bars — stack vertically ── */
  .action-bar       { flex-direction: column; align-items: stretch; }
  .action-bar-start,
  .action-bar-end   { width: 100%; }
  .action-bar-end   { justify-content: flex-end; }

  /* ── Page headers ── */
  .page-header         { flex-direction: column; align-items: flex-start; }
  .page-header-actions { width: 100%; }

  /* ── Filter bar ── */
  .filter-bar              { gap: var(--space-2, 8px); }
  .filter-bar .filter-group { flex-wrap: wrap; }

  /* ── Tables: enable horizontal scroll ── */
  .table-responsive { overflow-x: auto; }
  .table thead th,
  .table tbody td   { padding: 10px 12px; }

  /* ── POS ── */
  .sidebar-lg { display: none; }
  .pos-menu   { overflow: auto !important; overflow-x: hidden !important; height: 63vh !important; }
  #cartview .card .desktop-card-body { overflow-y: auto; overflow-x: hidden; height: 92vh; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ≤768px  Tablets portrait
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Layout ── */
  .main-content,
  .main-content-rtl {
    margin-inline-start: 0 !important;
    margin-inline-end:   0 !important;   /* was missing — fixes RTL margin bleed-in */
    width:               100% !important;
  }
  html[dir="ltr"] .main-content,
  html[dir="ltr"] .main-content-rtl,
  html[dir="ltr"] .content-body {
    margin-left:  0 !important;
    margin-right: 0 !important;
    width:        100% !important;
  }
  html[dir="rtl"] .main-content,
  html[dir="rtl"] .main-content-rtl,
  html[dir="rtl"] .content-body {
    margin-right: 0 !important;
    margin-left:  0 !important;
    width:        100% !important;
  }

  /* ── Grids ── */
  .grid-stats  { grid-template-columns: repeat(2, 1fr); }
  .grid-3      { grid-template-columns: 1fr; }
  .stats-grid  { grid-template-columns: repeat(2, 1fr); }

  /* ── KPI cards compact ── */
  .kpi-card  { padding: var(--space-4, 16px); }
  .kpi-value { font-size: 22px; }

  /* ── Typography ── */
  .page-title       { font-size: 17px; }
  .dash-section-title { font-size: 14px; }

  /* ── Toolbar stacks ── */
  .data-table-toolbar { flex-direction: column; align-items: stretch; }

  /* ── Forms single col ── */
  .form-group-row { grid-template-columns: 1fr; }

  /* ── POS ── */
  .sidebares {
    top: 62px;
    inset-inline-start: 0;
    width: 100%;
    border-inline-end: none;
    border-block-end: 1px solid var(--border-color);
    padding: 10px !important;
  }
  .main-product {
    margin-block-start: 130px;
    margin-inline-start: 0;
  }
  .logo-size { height: 35px; }
  .sidebr-box { width: 100px; height: 100px; margin: 0; }
  .imgs { height: 160px; }

  /* ── Auth ── */
  .card-box { margin-block: 20px; }
  .login-forgot-padding,
  .register-padding { padding: 32px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ≤576px  Mobile
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {

  /* ── Layout ── */
  .main-content,
  .main-content-rtl {
    margin-inline-start: 0 !important;
    margin-inline-end:   0 !important;
    width:               100% !important;
  }
  html[dir="ltr"] .main-content,
  html[dir="ltr"] .main-content-rtl,
  html[dir="ltr"] .content-body {
    margin-left:  0 !important;
    margin-right: 0 !important;
    width:        100% !important;
  }
  html[dir="rtl"] .main-content,
  html[dir="rtl"] .main-content-rtl,
  html[dir="rtl"] .content-body {
    margin-right: 0 !important;
    margin-left:  0 !important;
    width:        100% !important;
  }

  /* ── Page padding ── */
  .page-content {
    padding:        var(--space-3, 12px);
    padding-bottom: calc(var(--space-16, 64px) + var(--space-4, 16px));
  }

  /* ── Grids ── */
  .grid-stats   { grid-template-columns: 1fr; }
  .grid-auto    { grid-template-columns: 1fr; }
  .grid-auto-sm { grid-template-columns: repeat(2, 1fr); }
  .stats-grid   { grid-template-columns: 1fr; }

  /* ── KPI cards ── */
  .kpi-card { gap: var(--space-3, 12px); }
  .kpi-icon  { width: 40px; height: 40px; font-size: 16px; }
  .kpi-value { font-size: 20px; }

  /* ── Cards ── */
  .card-body    { padding: 16px; }
  .card-header,
  .card-footer  { padding: 12px 16px; }
  .stat-card    { padding: 16px; }
  .stat-card .stat-value { font-size: 22px; }

  /* ── Tables ── */
  .table thead th { font-size: 10px; padding: 8px 10px; }
  .table tbody td { font-size: 13px; padding: 8px 10px; }

  /* ── Modals ── */
  .modal-dialog   { margin: 4px; max-height: calc(100vh - 8px); }
  .modal-content  { border-radius: 16px; max-height: calc(100vh - 8px); display: flex; flex-direction: column; }
  .modal-body     { overflow-y: auto; flex: 1; padding: 16px; }
  .modal-header,
  .modal-footer   { padding: 14px 16px; }

  /* ── Topbar ── */
  .page-topbar { min-height: 56px; height: auto !important; }

  /* ── Dropdowns ── */
  .dropdown-menu { min-width: 90vw; max-width: 95vw; }

  /* ── Forms ── */
  .form-control,
  .form-select   { font-size: 16px; } /* prevent iOS zoom */

  /* ── Buttons ── */
  .btn-block-mobile { width: 100%; }
  .action-bar-end .btn { width: 100%; justify-content: center; }

  /* ── Empty state ── */
  .empty-state      { padding: var(--space-10, 40px) var(--space-4, 16px); }
  .empty-state-icon { width: 56px; height: 56px; font-size: 22px; }

  /* ── Inline forms ── */
  .form-group-inline      { flex-direction: column; align-items: stretch; }
  .form-group-inline .form-label { min-width: unset; }

  /* ── Data table footer ── */
  .data-table-footer { flex-direction: column; align-items: flex-start; }

  /* ── Cards row ── */
  .cards-row > * { flex: 1 1 100%; }

  /* ── Layout helpers ── */
  .sidebar-lg { display: none; }

  /* ── POS ── */
  .card-body .search-button { padding: 10px 15px; }
  .card-body .pos-card-input { padding: 0 12px; }
  .btn-search { width: 30px; }
  .offcanvas  { width: 95% !important; }
  .total-pay1 { width: 100%; }
  .sidebares {
    top: 62px;
    inset-inline-start: 0;
    width: 100%;
    border-inline-end: none;
    border-block-end: 1px solid var(--border-color) !important;
    padding: 10px !important;
  }
  .imgs    { height: 140px; }
  .pos-header img { width: 125px; }
  audio    { width: 100%; }

  /* ── Auth ── */
  .card-box { margin-block: 15px; }
  .login-forgot-padding,
  .register-padding { padding: 32px; }

  /* ── Theme ── */
  .bg-new { background: conic-gradient(from 45deg, var(--bs-secondary), var(--bs-primary)); }
  .offcanvas-body .card-title { font-size: 16px; }
  .theme-label-name { font-size: 14px; }
  .theme-label { padding: 2px 20px; inset-inline-end: -44px; }
  .paln-img { display: none; }
  .subtitle { line-height: 20px; font-size: 14px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * ≤360px  Ultra-small
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .page-content { padding: var(--space-2, 8px); }
  .card-body    { padding: 12px; }
  .btn          { padding: 6px 12px; font-size: 12px; }
  .page-title   { font-size: 15px; }
  .kpi-value    { font-size: 18px; }
  .action-bar   { padding: var(--space-2, 8px); gap: var(--space-2, 8px); }
  .table td, .table th { max-width: 120px; font-size: 11px; padding: 6px 8px; }
  .grid-auto-sm { grid-template-columns: 1fr; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Landscape phones (height-constrained)
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .sidebar       { padding-block: 8px; }
  .page-topbar   { height: 52px !important; min-height: 52px; }
  .kpi-card      { padding: var(--space-3, 12px); min-height: 0; }
  .kpi-value     { font-size: 1.25rem; }
  .modal-dialog  { margin: 4px auto; }
  .modal-body    { max-height: 60vh; overflow-y: auto; }
  .dash-hero     { min-height: 160px; }
  .dash-hero-visual { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Short viewports (modal height protection)
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-height: 600px) {
  .modal-body { max-height: 55vh; overflow-y: auto; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Wide screens ≥1920px  — cap content, prevent over-stretching
 * ───────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────────
 * High-DPI / Retina — pixel sharpness only, no layout changes
 * ───────────────────────────────────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .sidebar { border-inline-end-width: 0.5px; }
  .card    { border-width: 0.5px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Sidebar overlay — full viewport on mobile
 * Visibility is controlled via display:none/block in style.css master fix.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar-overlay {
    position:   fixed;
    inset:      0;
    width:      100vw;
    height:     100vh;
    background: rgba(0, 0, 0, .52);
    z-index:    1049;
    display:    none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  body.sidebar-open .sidebar-overlay {
    display: block;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
 * Grid overflow guards
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .grid-auto > *,
  .grid-auto-sm > * { max-width: 100%; }
}