/* ═══════════════════════════════════════════════════════════════════
   DELMON OPERATION SYSTEM — Responsive Design
   Additive layer: never overwrites existing rules, only supplements.
   Breakpoints:
     XL  ≥ 1400px  — large desktop / wide monitor
     LG  1100–1399px — laptop / regular desktop
     MD   769–1099px — tablet landscape / small laptop
     SM   481–768px  — tablet portrait / large phone
     XS   ≤ 480px   — phone
═══════════════════════════════════════════════════════════════════ */

/* ─── BASE: fluid type scale using clamp() ─── */
:root {
  --title-size:    clamp(18px, 2.2vw, 28px);
  --subtitle-size: clamp(12px, 1.2vw, 15px);
  --label-size:    clamp(11px, 1vw, 13px);
  --data-size:     clamp(13px, 1.3vw, 16px);
  --num-lg-size:   clamp(22px, 3vw, 36px);
  --num-md-size:   clamp(18px, 2.4vw, 28px);
  --num-sm-size:   clamp(14px, 1.6vw, 20px);
}

/* ─── Global: ensure ALL tables scroll horizontally ─── */
.table-wrap,
.table-scroll,
[class*="-table-wrap"],
[class*="-scroll"] {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Global: prevent body overflow on all sizes ─── */
html, body { max-width: 100%; }
img, video, svg { max-width: 100%; }

/* ─── Page titles: fluid sizing ─── */
.page-title   { font-size: var(--title-size); }
.page-sub     { font-size: var(--label-size); }
.card-title   { font-size: var(--label-size); }
.section-title { font-size: clamp(13px, 1.4vw, 16px); }

/* ─── KPI / stat numbers: fluid ─── */
.stat-value,
.kpi-value,
[class*="-kpi-value"],
[class*="-stat-value"]   { font-size: var(--num-lg-size); }

.stat-label,
.kpi-label,
[class*="-kpi-label"],
[class*="-stat-label"]   { font-size: var(--label-size); }

/* ─── Buttons: ensure minimum touch target 44px ─── */
.btn {
  min-height: 36px;
  font-size: clamp(11px, 1.1vw, 13px);
}

/* ─── Inputs: fluid ─── */
input, select, textarea {
  font-size: clamp(13px, 1.2vw, 14px);
}

/* ════════════════════════════════════════
   XL — ≥ 1400px: wide desktop
════════════════════════════════════════ */
@media (min-width: 1400px) {
  .main {
    padding: 40px 56px 70px;
  }
  .sidebar {
    width: 264px;
  }
  .main {
    width: calc(100% - 264px);
  }
  .stats       { grid-template-columns: repeat(4, 1fr); }
  .kpi-grid    { grid-template-columns: repeat(4, 1fr); }
  .fg3         { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════
   LG — 1100–1399px: laptop / desktop
════════════════════════════════════════ */
@media (max-width: 1399px) and (min-width: 1100px) {
  .main {
    padding: 32px 36px 56px;
  }
  .sidebar { width: 230px; }
  .main    { width: calc(100% - 230px); }
  .stats       { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid    { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════
   MD — 769–1099px: tablet landscape / small laptop
════════════════════════════════════════ */
@media (max-width: 1099px) and (min-width: 769px) {
  .main {
    padding: 24px 22px 48px;
  }
  .sidebar { width: 210px; }
  .main    { width: calc(100% - 210px); }

  /* Stack header row on smaller laptops */
  .page-header-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Card adjustments */
  .card { padding: 18px 20px; }

  /* Grids: 2 columns max */
  .fg3         { grid-template-columns: repeat(2, 1fr) !important; }
  .stats       { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid    { grid-template-columns: repeat(2, 1fr); }
  .sm-grid     { grid-template-columns: repeat(3, 1fr); }

  /* Tables */
  th, td { font-size: 11.5px !important; padding: 9px 10px !important; }
  th     { font-size: 10px !important; }

  /* Buttons in rows wrap */
  .btn-row        { flex-wrap: wrap; }
  .btn-row .btn   { flex: 1 1 120px; }

  /* Inputs */
  input, select, textarea { font-size: 13px; }
}

/* ════════════════════════════════════════
   SM — 481–768px: tablet portrait / large phone
════════════════════════════════════════ */
@media (max-width: 768px) and (min-width: 481px) {
  .main {
    padding: 70px 16px 32px;
    width: 100%;
    overflow-x: hidden;
  }

  /* Page header */
  .page-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  .page-header-row > *:last-child {
    width: 100%;
  }
  .page-header-row .btn-row,
  .page-header-row .actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .page-header-row .btn { flex: 1 1 auto; min-width: 100px; }

  .page-header { margin-bottom: 18px; }
  .card        { padding: 16px 18px; margin-bottom: 14px; }
  .card-title  { margin-bottom: 14px; }

  /* All grids → single column */
  .fg, .fg3, .stats, .kpi-grid, .summary-panel { grid-template-columns: 1fr !important; }
  .sm-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Tables */
  table { font-size: 12px !important; }
  th    { font-size: 10px !important; padding: 7px 8px !important; }
  td    { font-size: 12px !important; padding: 9px 8px !important; }

  /* Inputs: prevent zoom on iOS (must be ≥16px) */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  .btn { min-height: 44px; font-size: 13px; }
  .btn-sm { min-height: 38px; font-size: 12px; }

  /* Buttons in btn-row become full-width */
  .btn-row { flex-direction: column; gap: 8px; }
  .btn-row .btn { width: 100%; }
}

/* ════════════════════════════════════════
   XS — ≤ 480px: phone
════════════════════════════════════════ */
@media (max-width: 480px) {
  .main {
    padding: 62px 12px 28px;
    width: 100%;
    overflow-x: hidden;
  }

  .page-title  { font-size: clamp(17px, 5vw, 22px); }
  .page-sub    { font-size: 11px; }
  .page-header { margin-bottom: 14px; }
  .page-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }
  .page-header-row > * { width: 100%; }

  .card        { padding: 14px 14px; margin-bottom: 12px; border-radius: 12px; }
  .card-title  { font-size: 12px; margin-bottom: 12px; }

  /* All grids → single column */
  .fg, .fg3, .stats, .kpi-grid,
  .summary-panel, .sm-grid { grid-template-columns: 1fr !important; }

  /* Stat cards: horizontal layout on small phone */
  .stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
  }
  .stat-value    { font-size: 26px; }
  .stat-label    { font-size: 11px; }
  .stat-icon     { font-size: 22px; flex-shrink: 0; }

  /* Tables */
  table { font-size: 11px !important; }
  th    { font-size: 9.5px !important; padding: 6px 7px !important; }
  td    { font-size: 11px !important;  padding: 8px 7px !important; }

  /* Inputs */
  input, select, textarea {
    font-size: 16px !important;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .btn    { min-height: 46px; font-size: 14px; padding: 10px 16px; }
  .btn-sm { min-height: 40px; font-size: 12px; }

  .btn-row {
    flex-direction: column;
    gap: 8px;
  }
  .btn-row .btn { width: 100%; justify-content: center; }

  /* Section titles */
  .section-title { font-size: 13px; }

  /* Modal/dialog improvements */
  [class*="-modal"],
  [class*="-dialog"] {
    margin: 8px;
    max-width: calc(100vw - 16px);
    border-radius: 16px;
  }

  /* Badge / tag sizes */
  .badge, [class*="-badge"] { font-size: 10px; padding: 3px 7px; }
}

/* ═══════════════════════════════════════════════════════
   PAGE-SPECIFIC RESPONSIVE IMPROVEMENTS
═══════════════════════════════════════════════════════ */

/* ── Fresh PICKLIST ── */
@media (max-width: 1099px) {
  .freezer-pick-route-tabs {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  .freezer-pick-route-tabs {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .freezer-pick-route-tab span { font-size: 17px !important; }
  .freezer-pick-route-tab strong { font-size: 11px !important; }
  .freezer-pick-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .freezer-pick-actions .btn { flex: 1 1 auto; min-width: 100px; }
}
@media (max-width: 480px) {
  .freezer-pick-route-tabs {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }
}

/* ── Sales distribution table: always horizontally scrollable ── */
.sales-dist-table-wrap,
.sd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  position: relative;
}
@media (max-width: 1099px) {
  .sales-dist-table { min-width: 1200px !important; }
  .sales-dist-toolbar { flex-wrap: wrap; gap: 8px; }
  .sales-dist-meta    { flex-wrap: wrap; gap: 8px; }
}

/* ── DL1 / RTN1 entry pages ── */
@media (max-width: 768px) {
  [class*="-entry-form"] {
    grid-template-columns: 1fr !important;
  }
  [class*="-entry-header"] {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  [class*="-entry-actions"] { width: 100%; }
  [class*="-entry-actions"] .btn { flex: 1; }
}

/* ── Online orders / internal sales paste pages ── */
@media (max-width: 768px) {
  .online-internal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .online-internal-placeholder { padding: 24px 16px; min-height: 220px; }
  .online-lines-tabs {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .online-lines-tabs {
    grid-template-columns: 1fr !important;
  }
}

/* ── Inventory / جرد ── */
@media (max-width: 768px) {
  [class*="inv-"] {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ── KPI dashboard ── */
@media (max-width: 1099px) {
  .kpi-dashboard-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .kpi-dashboard-grid { grid-template-columns: 1fr !important; }
}

/* ── Reception / قائمة المخازن ── */
@media (max-width: 768px) {
  .reception-tabs,
  [class*="-tabs"] {
    flex-wrap: wrap;
    gap: 6px;
  }
  .reception-tabs .tab,
  [class*="-tabs"] .tab {
    flex: 1 1 auto;
    min-width: 80px;
    text-align: center;
  }
}

/* ── Compare / مقارنة ── */
@media (max-width: 1099px) {
  [class*="compare-"] { flex-wrap: wrap; }
  [class*="compare-grid"] { grid-template-columns: 1fr !important; }
}

/* ── Production pages ── */
@media (max-width: 768px) {
  [class*="prod-"] .btn-row { flex-direction: column; }
  [class*="prod-"] .btn-row .btn { width: 100%; }
  [class*="farm-grid"] { grid-template-columns: 1fr !important; }
}

/* ── Route orders / Sales route ── */
@media (max-width: 768px) {
  .route-orders-head { flex-direction: column; gap: 10px; }
  .route-orders-head-actions { width: 100%; }
  .route-orders-head-actions .btn { flex: 1; }
  .route-orders-kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .route-orders-cards { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .route-orders-kpis { grid-template-columns: 1fr 1fr !important; }
}

/* ── Frozen warehouse / مخازن المجمد ── */
@media (max-width: 768px) {
  .fwh-filters { flex-direction: column; gap: 8px; }
  .fwh-filters select,
  .fwh-filters input { width: 100%; }
  .fz-analytics-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .fz-analytics-grid { grid-template-columns: 1fr !important; }
  .fz-panel-grid     { grid-template-columns: 1fr !important; }
}

/* ── Frozen orders ── */
@media (max-width: 768px) {
  .fso-stats       { grid-template-columns: repeat(2, 1fr) !important; }
  .fso-filter-grid { grid-template-columns: 1fr !important; }
  .fso-tabs        { flex-wrap: wrap; gap: 6px; }
  .frozen-sales-orders-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fso-header-actions { width: 100%; }
  .fso-header-actions .btn { flex: 1; }
}
@media (max-width: 480px) {
  .fso-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ── Dynamic transfer ── */
@media (max-width: 768px) {
  .dynamic-transfer-grid { grid-template-columns: 1fr !important; }
  .dynamic-transfer-copy-card { position: static !important; }
  .dynamic-transfer-meta { grid-template-columns: 1fr 1fr !important; }
  .dynamic-transfer-actions .btn { flex: 1; }
}

/* ── Sales permanent page ── */
@media (max-width: 768px) {
  [class*="permanent-"] .table-wrap { overflow-x: auto; }
  [class*="permanent-header"]  { flex-direction: column; gap: 10px; }
  [class*="permanent-actions"] { width: 100%; }
  [class*="permanent-actions"] .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY IMPROVEMENTS: clearer numbers & data
═══════════════════════════════════════════════════════ */

/* Large display numbers (KPI, totals) */
.stat-value,
.kpi-value,
.freezer-pick-route-tab span,
[class*="-total-value"],
[class*="-count-value"] {
  font-family: var(--f-serif), var(--f-mono), monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Table numbers */
td[data-type="number"],
td.qty,
td.amount,
td.total,
[class*="-qty"],
[class*="-amount"],
[class*="-total"] {
  font-family: var(--f-mono), monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Ensure long Arabic text doesn't cause layout breaks */
.page-sub,
.nav-label,
.card-title,
td {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR STYLING (improves UX when content overflows)
═══════════════════════════════════════════════════════ */
.table-wrap::-webkit-scrollbar,
[class*="-scroll"]::-webkit-scrollbar,
.main::-webkit-scrollbar {
  height: 5px;
  width: 5px;
}
.table-wrap::-webkit-scrollbar-track,
[class*="-scroll"]::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb,
[class*="-scroll"]::-webkit-scrollbar-thumb {
  background: var(--hair-3);
  border-radius: 99px;
}
.table-wrap::-webkit-scrollbar-thumb:hover,
[class*="-scroll"]::-webkit-scrollbar-thumb:hover {
  background: var(--ink-4);
}

/* ═══════════════════════════════════════════════════════
   PRINT: ensure crisp output
═══════════════════════════════════════════════════════ */
@media print {
  .main { padding: 0 !important; width: 100% !important; }
  .btn, .btn-row, .mobile-toggle { display: none !important; }
  .table-wrap { overflow: visible !important; }
  table { font-size: 10px !important; }
  .page-title { font-size: 16px !important; }
}