/* =====================================================================
   שכבת ה-UI של ביכורים (גרסת CSS רגיל)
   מיובאת ממערכת bik-catering-system (src/app/globals.css, פלטת clarity-slate).
   נטענת אחרי css/styles.css ודורסת רק את ה"מעטפת": צבעים, כפתורים, שדות,
   טבלאות, סטטוסים, ניווט. קלפי המדבקות והדפסה נשארים כפי שהם.
   כללים: docs/UI_GUIDELINES.md
   ===================================================================== */

:root {
  --surface: #ffffff; /* דף / כרטיס */
  --surface-muted: #f8fafc; /* רקע העמוד, כותרות טבלה */
  --surface-sunken: #f1f5f9; /* בלוקים מקוננים */
  --surface-hover: #f1f5f9;
  --surface-active: #e2e8f0;

  --fg: #0f172a;
  --fg-muted: #475569;
  --fg-subtle: #94a3b8;
  --fg-on-accent: #ffffff;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;

  --edge: #e2e8f0;
  --edge-strong: #cbd5e1;
  --focus: #93c5fd;

  --success: #16a34a;
  --success-soft: #f0fdf4;
  --success-edge: #bbf7d0;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --warning-edge: #fde68a;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-edge: #fecaca;
  --info: #2563eb;
  --info-soft: #eff6ff;
  --info-edge: #bfdbfe;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --font: "Heebo", Arial, Helvetica, sans-serif;
}

@media screen {
  /* ----- מעטפת הדף ----- */
  body {
    background: var(--surface-muted);
    color: var(--fg);
    font-family: var(--font);
    padding: 16px;
  }
  .container {
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 20px 24px;
  }

  /* ----- ניווט: קו תחתון לעמוד הפעיל, בלי רקע ----- */
  .main-nav {
    background: transparent;
    border-bottom: 1px solid var(--edge);
    border-radius: 0;
    padding: 0;
    gap: 4px;
    justify-content: flex-start;
    margin-bottom: 16px;
    overflow-x: auto;
    overflow-y: hidden; /* בלי זה נוצר פס גלילה אנכי בגלל ה-margin-bottom של הקישורים */
    flex-wrap: nowrap;
  }
  .nav-link {
    background: transparent;
    color: var(--fg-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 10px 12px;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .nav-link:hover {
    background: transparent;
    color: var(--fg);
    border-bottom-color: var(--edge-strong);
    transform: none;
    box-shadow: none;
  }
  .nav-link.active {
    background: transparent;
    color: var(--accent);
    border-color: transparent;
    border-bottom-color: var(--accent);
    font-weight: 600;
  }

  /* ----- כותרות ----- */
  h1 {
    color: var(--fg);
    text-align: start;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
  }
  h2 {
    color: var(--fg);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  h3 {
    color: var(--fg);
    font-size: 1rem;
    font-weight: 600;
  }

  /* ----- סרגל סינון / פעולות -----
     הסרגל הזה הוא נקודת ההתחלה של הדף (תאריך → סניף → משיכה), לכן הוא
     היחיד עם רקע צבוע, שדות גדולים וכפתור ראשי גדול. ----- */
  .controls,
  .report-controls {
    background: var(--surface-muted);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    gap: 14px;
    align-items: flex-end;
  }
  /* רק סרגל הפתיחה של דף הבית צבוע; שורות הפעולה בתוך הלשוניות נשארות שקטות */
  .controls {
    background: var(--accent-soft);
    border-color: var(--info-edge);
  }
  .control-group {
    gap: 4px;
  }
  .control-group label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--fg);
  }
  .controls input[type="date"],
  .controls select,
  .report-controls input[type="date"],
  .report-controls select {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 1.0625rem;
    font-weight: 500;
    border: 2px solid var(--edge-strong);
    background: var(--surface);
  }
  .controls .btn,
  .report-controls .btn {
    min-height: 44px;
    padding: 8px 22px;
    font-size: 1rem;
    font-weight: 600;
  }
  .top-actions {
    gap: 8px;
  }

  /* ----- שדות ----- */
  input[type="date"],
  input[type="text"],
  input[type="search"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--fg);
    font-size: 0.875rem;
    font-family: inherit;
  }
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
  }
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ----- כפתורים: ראשי אחד, השאר משניים ----- */
  .btn,
  .settings-btn,
  .modal-close,
  .tab-btn {
    font-family: inherit;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    background: var(--accent);
    color: var(--fg-on-accent);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .btn:hover:not(:disabled) {
    background: var(--accent-hover);
    transform: none;
    box-shadow: none;
  }
  .btn:active:not(:disabled) {
    transform: translateY(0.5px);
  }
  .btn:disabled {
    background: var(--surface-active);
    color: var(--fg-subtle);
    border-color: transparent;
  }
  /* משני: תכלת עדין עם טקסט כחול, כדי שיהיה ברור שזה כפתור בלי להתחרות בראשי */
  .btn.download,
  .btn.secondary,
  .btn.settings-btn,
  .settings-btn {
    /* !important: styles.css paints .settings-btn purple with !important */
    background: var(--accent-soft) !important;
    color: var(--accent);
    border-color: #bfdbfe;
  }
  .btn.download:hover:not(:disabled),
  .btn.secondary:hover:not(:disabled),
  .settings-btn:hover:not(:disabled) {
    background: #dbeafe !important;
    color: var(--accent-hover);
    border-color: #93c5fd;
  }
  .btn.download:disabled,
  .btn.secondary:disabled {
    background: var(--surface-active) !important;
    color: var(--fg-subtle);
    border-color: transparent;
  }
  .btn.danger {
    background: var(--danger);
    color: var(--fg-on-accent);
  }
  .btn.danger:hover:not(:disabled) {
    background: #b91c1c;
  }

  /* ----- הודעות סטטוס: אייקון + טקסט, לא צבע לבד ----- */
  .status {
    text-align: start;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 8px 12px;
    margin: 12px 0;
    border: 1px solid var(--edge);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--fg);
  }
  .status.loading {
    background: var(--info-soft);
    border-color: var(--info-edge);
    color: var(--fg);
  }
  .status.success {
    background: var(--success-soft);
    border-color: var(--success-edge);
    color: var(--fg);
  }
  .status.error {
    background: var(--danger-soft);
    border-color: var(--danger-edge);
    color: var(--fg);
  }
  .status:empty {
    display: none;
  }

  /* ----- אריחי סיכום ----- */
  .stats {
    background: transparent;
    padding: 0;
    gap: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .stat-item {
    min-width: 7rem;
    padding: 6px 12px;
    text-align: start;
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: var(--radius-md);
  }
  .stat-label {
    font-size: 0.75rem;
    color: var(--fg-muted);
  }
  .stat-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
  }

  /* ----- טבלאות: כותרת שקטה, קווים דקים, מספרים מיושרים ----- */
  table {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    margin-top: 12px;
  }
  th,
  td {
    border: 0;
    border-bottom: 1px solid var(--edge);
    padding: 6px 12px;
  }
  th {
    background: var(--surface-muted);
    color: var(--fg-muted);
    font-weight: 600;
    padding: 8px 12px !important;
  }
  th .header-text {
    color: var(--fg-muted);
  }
  th input.column-filter {
    min-height: 30px;
    padding: 3px 8px;
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-sm);
  }
  th input.column-filter:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
  }
  tr:nth-child(even) {
    background: transparent;
  }
  tbody tr:hover {
    background: var(--surface-hover);
  }
  .table-container {
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    margin-top: 12px;
  }
  .table-container table {
    margin-top: 0;
  }
  /* DataTables */
  table.dataTable thead th,
  table.dataTable thead td,
  table.dataTable.no-footer {
    border-bottom: 1px solid var(--edge);
  }
  table.dataTable tbody tr {
    background: transparent;
  }
  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent) !important;
  }

  /* ----- לשוניות ----- */
  .tabs {
    border-bottom: 1px solid var(--edge);
    gap: 4px;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }
  .tab-btn {
    background: transparent;
    color: var(--fg-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    box-shadow: none;
    font-weight: 500;
    padding: 10px 12px;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .tab-btn:hover {
    background: transparent;
    color: var(--fg);
    border-bottom-color: var(--edge-strong);
    transform: none;
    box-shadow: none;
  }
  .tab-btn.active {
    background: transparent;
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
    box-shadow: none;
  }

  /* ----- חלונות קופצים ----- */
  .modal-content {
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.2);
  }
  .modal-header {
    border-bottom: 1px solid var(--edge);
  }
  .modal-header h2 {
    color: var(--fg);
  }
  .modal-close {
    min-height: 36px;
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--edge-strong);
    border-radius: var(--radius-md);
    font-weight: 500;
  }
  .modal-close:hover {
    background: var(--surface-hover);
  }
  .modal-item {
    background: var(--surface-muted);
    border-radius: var(--radius-md);
    border-right: 0;
    border-inline-start: 3px solid var(--accent);
  }
  .modal-item strong {
    color: var(--fg);
  }
  .modal-item span {
    color: var(--fg-muted);
  }
  .clickable-item:hover {
    background-color: var(--accent-soft) !important;
  }

  /* ----- הגדרות ----- */
  .settings-section {
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .settings-section h3 {
    color: var(--fg);
  }
  .setting-row {
    border-bottom: 1px solid var(--edge);
  }

  /* ----- תגים / כלי עזר קטנים ----- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--edge);
    background: var(--surface-muted);
    color: var(--fg-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .badge.success {
    background: var(--success-soft);
    border-color: var(--success-edge);
    color: var(--success);
  }
  .badge.warning {
    background: var(--warning-soft);
    border-color: var(--warning-edge);
    color: var(--warning);
  }
  .badge.danger {
    background: var(--danger-soft);
    border-color: var(--danger-edge);
    color: var(--danger);
  }
  .badge.info {
    background: var(--info-soft);
    border-color: var(--info-edge);
    color: var(--info);
  }
  .num {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .muted {
    color: var(--fg-muted);
  }

  /* ----- טאבלט/טלפון: styles.css מערים את הניווט והלשוניות לעמודה;
     כאן הם נשארים שורה אחת עם גלילה אופקית ----- */
  @media (max-width: 768px) {
    .main-nav {
      flex-direction: row;
      gap: 4px;
      padding: 0;
    }
    .nav-link {
      width: auto;
      text-align: start;
      padding: 12px 10px;
      font-size: 0.9375rem;
    }
    .tabs {
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 4px;
      margin: 12px 0;
    }
    .tab-btn {
      white-space: nowrap;
      width: auto;
    }
    .btn {
      width: auto;
      margin-top: 0;
    }
    .controls .btn {
      width: 100%;
    }
    .stats {
      flex-direction: row;
      padding: 0;
    }
  }

  /* ----- טלפון: יעדי מגע 44px, פחות ריפוד ----- */
  @media (max-width: 639px) {
    body {
      padding: 8px;
    }
    .container {
      padding: 12px;
      border-radius: var(--radius-md);
    }
    .btn,
    .modal-close,
    input[type="date"],
    input[type="text"],
    input[type="search"],
    input[type="number"],
    select {
      min-height: 44px;
    }
    .controls,
    .report-controls {
      padding: 8px;
      gap: 8px;
    }
    h1 {
      font-size: 1.25rem;
    }
  }

  /* ----- תפריט "הגדרות" בקצה הניווט (דף הבית) ----- */
  .nav-settings {
    position: relative;
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  .nav-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9375rem;
  }
  .nav-settings-btn.open {
    color: var(--fg);
    border-bottom-color: var(--edge-strong);
  }
  .nav-caret {
    font-size: 0.75em;
    color: var(--fg-subtle);
  }
  .nav-menu {
    position: fixed; /* המיקום נקבע ב-nav.js (הניווט הוא מיכל גלילה) */
    z-index: 50;
    min-width: 12rem;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
  }
  .nav-menu[hidden] {
    display: none;
  }
  .nav-menu-item {
    display: block;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--fg);
    font: inherit;
    font-size: 0.9375rem;
    text-align: start;
    cursor: pointer;
  }
  .nav-menu-item:hover {
    background: var(--surface-hover);
  }


  /* ----- הטבלה הכללית: עמוד מלא, בלי חלון גלילה פנימי ----- */
  #tabGeneral .table-container,
  #tableContainer {
    max-height: none;
    overflow-y: visible !important;
    overflow-x: auto !important;
  }


  /* ----- שורות פעולה בחלונות: מיושרות להתחלה, קו עדין ----- */
  .settings-actions {
    justify-content: flex-start;
    gap: 8px;
    border-top: 1px solid var(--edge);
  }
  .labels-actions {
    align-items: center;
    gap: 8px;
  }


  /* ----- טקסט לפי סטטוס (הודעות שנוצרות מ-JS) ----- */
  .text-success { color: var(--success); }
  .text-warning { color: var(--warning); }
  .text-danger { color: var(--danger); }
  .status small { font-size: 0.8125rem; }

  /* ----- מצב ריק / רמז / שגיאה בתוך לשונית ----- */
  .empty-state {
    margin: 12px 0;
    padding: 32px 16px;
    text-align: center;
    color: var(--fg-muted);
    border: 1px dashed var(--edge-strong);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
  }
  .empty-state.compact { padding: 16px; }
  .empty-state.hint { color: var(--fg); background: var(--surface-muted); border-style: solid; border-color: var(--edge); }
  .empty-state.error { color: var(--danger); background: var(--danger-soft); border-style: solid; border-color: var(--danger-edge); }

  /* ----- כותרות דוחות שמוצגים במסך ----- */
  .report-title {
    text-align: start;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg);
    margin: 8px 0 12px;
  }
  .report-alert {
    margin: 12px 0 0;
    padding: 8px 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--danger);
    background: var(--danger-soft);
    border: 1px solid var(--danger-edge);
    border-radius: var(--radius-md);
    text-align: start;
  }

  /* ----- סיכום מנות (הלשונית הראשונה אחרי משיכה) ----- */
  .summary-report { display: flex; flex-direction: column; gap: 16px; padding: 4px 0; }
  .summary-cards { display: flex; flex-wrap: wrap; gap: 8px; }
  .summary-card {
    flex: 1 1 10rem;
    min-width: 9rem;
    padding: 12px 14px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
  }
  .summary-card-title { font-size: 0.8125rem; color: var(--fg-muted); }
  .summary-card-value { font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--fg-muted); }
  /* שני המספרים הראשיים (הזמנות, מנות) גדולים ובולטים; ללא אלרגן משני */
  .summary-card.primary { flex: 2 1 14rem; background: var(--accent-soft); border-color: #bfdbfe; }
  .summary-card.primary .summary-card-title { font-size: 0.9375rem; color: var(--fg); font-weight: 500; }
  .summary-card.primary .summary-card-value { font-size: 2.5rem; font-weight: 700; color: var(--accent); }
  #fetchStats[hidden] { display: none; }
  .summary-card.warn { background: var(--warning-soft); border-color: var(--warning-edge); }
  .summary-card.warn .summary-card-value { color: var(--warning); }
  .summary-blocks { display: flex; flex-wrap: wrap; gap: 12px; }
  .summary-block {
    flex: 1 1 18rem;
    min-width: 16rem;
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
  }
  .summary-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--edge);
  }
  .summary-block-head h3 { margin: 0; font-size: 1rem; }
  .summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid var(--edge);
    font-size: 0.9375rem;
  }
  .summary-row:last-child { border-bottom: 0; }
  .summary-row .num { font-weight: 600; }
  .summary-row.primary { font-weight: 600; }
  .summary-row.primary .num { font-size: 1.25rem; color: var(--accent); }
  .summary-row.warn .num { color: var(--warning); }


  /* ----- דוחות אריזה (חם / קר / מארזים / תצוגה טבלאית) במסך בלבד -----
     ה-HTML נבנה ב-app.js עם צבעים קשיחים בתוך style="", לכן כאן !important.
     בתוך @media screen, כך שהדפסה ו-PDF לא משתנים. ----- */
  /* כותרת טבלה: תכלת עם טקסט כחול (כמו הכפתורים המשניים), מודגשת */
  #traysContainer h3,
  #summaryContainer h3,
  #tabularViewContainer h3 {
    background: var(--accent-soft) !important;
    border: 1px solid #bfdbfe !important;
    border-bottom: 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--accent) !important;
    text-align: start !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    padding: 10px 14px !important;
  }
  #traysContainer h2,
  #summaryContainer h2 {
    background: transparent !important;
    border: 0 !important;
    color: var(--fg) !important;
    text-align: start !important;
    font-size: 1.25rem !important;
    padding: 0 !important;
    margin: 12px 0 8px !important;
  }
  #traysContainer table,
  #summaryContainer table,
  #tabularViewContainer table {
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    margin-top: 0;
  }
  /* תת-כותרות (שמות העמודות): כהות ומודגשות, עם קו תחתון חזק */
  #traysContainer th,
  #summaryContainer th,
  #tabularViewContainer th {
    background: #dbeafe !important; /* כחול בהיר, צעד אחד כהה יותר מכותרת הטבלה */
    border: 0 !important;
    border-bottom: 2px solid #93c5fd !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    padding: 9px 10px !important;
  }
  #traysContainer td,
  #summaryContainer td,
  #tabularViewContainer td {
    border: 0 !important;
    border-bottom: 1px solid var(--edge) !important;
    padding: 6px 10px !important;
    font-size: 0.875rem !important;
  }
  #traysContainer tr:last-child td,
  #summaryContainer tr:last-child td,
  #tabularViewContainer tr:last-child td {
    border-bottom: 0 !important;
  }
  /* תאי סיכום (היו צהובים) → הדגשה בתכלת; תת-שורות ירוקות/צהובות → אפור/צהבהב עדינים */
  #traysContainer td[style*="FFE082"],
  #tabularViewContainer td[style*="FFE082"],
  #traysContainer th[style*="FFD54F"],
  #tabularViewContainer th[style*="FFD54F"] {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
  }
  #traysContainer td[style*="c8e6c9"],
  #traysContainer td[style*="e8f5e9"],
  #tabularViewContainer td[style*="c8e6c9"],
  #tabularViewContainer td[style*="e8f5e9"] {
    background: var(--surface-muted) !important;
  }
  #traysContainer td[style*="fff9c4"],
  #traysContainer td[style*="fffde7"],
  #tabularViewContainer td[style*="fff9c4"],
  #tabularViewContainer td[style*="fffde7"] {
    background: var(--warning-soft) !important;
  }
  /* "ללא שיוך" (היה אדום מלא) → אזהרה שקטה */
  #traysContainer th[style*="ffcdd2"] {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
  }
  #traysContainer td[style*="fff5f5"],
  #traysContainer td[style*="ffcdd2"] {
    background: var(--danger-soft) !important;
  }
  #traysContainer .clickable-item:hover,
  #summaryContainer .clickable-item:hover {
    background-color: var(--surface-hover) !important;
  }


  /* ----- דוח ייצור חם (production-report.html), מסך בלבד -----
     ל-<style> של הדף יש עדיפות מקור, לכן הסלקטורים כאן ספציפיים יותר. ----- */
  .container .date-range-info {
    background: var(--accent-soft);
    color: var(--fg);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    font-size: 0.9375rem;
    text-align: start;
  }
  .container .date-range-info strong { color: var(--accent); font-size: 1rem; }
  .container .actions-bar {
    background: var(--surface-muted);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    gap: 10px;
    align-items: flex-end;
  }
  .container .branch-filter { flex-direction: column; align-items: flex-start; gap: 4px; }
  .container .branch-filter label { font-weight: 500; font-size: 0.875rem; color: var(--fg-muted); }
  .container .branch-filter select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--edge-strong); border-radius: var(--radius-md); font-size: 0.875rem; min-width: 10rem; }
  .container .day-table-container { margin-bottom: 24px; }
  .container .day-title {
    background: var(--accent);
    color: var(--fg-on-accent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 14px;
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: start;
  }
  .container .section-title,
  .container .section-title.gastronorm {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid #bfdbfe;
    border-bottom: 0;
    padding: 8px 14px;
    margin-top: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-align: start;
  }
  .container .report-table { border: 1px solid var(--edge); font-size: 0.875rem; }
  .container .report-table th,
  .container .report-table td { border: 0; border-bottom: 1px solid var(--edge); padding: 7px 10px; }
  .container .report-table th,
  .container .report-table th.product-col {
    background: #dbeafe;
    color: #1e3a8a;
    border-bottom: 2px solid #93c5fd;
    font-weight: 700;
    font-size: 0.875rem;
  }
  .container .report-table td { background: var(--surface); }
  .container .report-table td.product-name { background: var(--surface-muted); color: var(--fg); font-weight: 600; }
  .container .report-table td.product-name:hover { background: var(--surface-hover); color: var(--accent); }
  .container .report-table td.total-row { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
  .container .report-table tbody tr:hover td:not(.product-name):not(.total-row) { background: var(--surface-hover); }
  .container .summary-cards { gap: 8px; }
  .container .summary-cards .summary-card,
  .container .summary-cards .summary-card.hot,
  .container .summary-cards .summary-card.gastronorm {
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
  }
  .container .summary-cards .summary-card h3 { color: var(--fg-muted); font-size: 0.8125rem; font-weight: 500; opacity: 1; }
  .container .summary-cards .summary-card .value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
  .container .summary-cards .summary-card.hot .value { color: var(--warning); }
  body .modal-overlay .modal-content { border-radius: var(--radius-lg); border: 1px solid var(--edge); box-shadow: 0 10px 30px rgb(15 23 42 / 0.2); }
  body .modal-overlay .modal-header { background: var(--surface-muted); color: var(--fg); border-bottom: 1px solid var(--edge); padding: 12px 16px; }
  body .modal-overlay .modal-header h2 { color: var(--fg); font-size: 1.0625rem; }
  body .modal-overlay .modal-close { background: var(--surface); color: var(--fg); border: 1px solid var(--edge-strong); border-radius: var(--radius-md); min-height: 36px; }
  body .modal-overlay .modal-close:hover { background: var(--surface-hover); }
  body .modal-overlay .modal-item { border-bottom: 1px solid var(--edge); }
  body .modal-overlay .modal-item strong { color: var(--fg); }
  body .modal-overlay .modal-item span { color: var(--fg-muted); }


  /* ----- תפריטים שבועיים (menu.html), מסך בלבד ----- */
  .container .page-head { padding: 12px 0 4px; }
  .container .page-head h1 { margin: 0 0 2px; }
  .container .page-head p { margin: 0; font-size: 0.9375rem; }
  .container .controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; text-align: start; }
  .container .menu-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  .container .week-selector { min-height: 36px; padding: 6px 10px; border: 1px solid var(--edge-strong); border-radius: var(--radius-md); font-size: 0.875rem; margin: 0 6px; }
  .container .content { padding: 16px 0 0; }
  .container .week-title {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid #bfdbfe;
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 8px 14px;
    font-size: 1rem;
    font-weight: 700;
    text-align: start;
  }
  .container .week-table { border: 1px solid var(--edge); font-size: 0.875rem; }
  .container .week-table th,
  .container .week-table td { border: 0; border-bottom: 1px solid var(--edge); border-inline-start: 1px solid var(--edge); padding: 8px; }
  .container .week-table th { background: #dbeafe; color: #1e3a8a; border-bottom: 2px solid #93c5fd; font-weight: 700; }
  .container .week-table td.menu-name { background: var(--surface-muted); color: var(--fg); font-weight: 600; }
  .container .menu-item { font-size: 0.8125rem; border-bottom: 1px dotted var(--edge-strong); }
  .container .no-items { color: var(--fg-subtle); }
  .container .loading { padding: 32px 16px; text-align: center; color: var(--fg-muted); border: 1px dashed var(--edge-strong); border-radius: var(--radius-lg); }
  /* בורר תפריטים */
  .container .menu-filter-btn.btn { font-size: 0.875rem; }
  .container .menu-dropdown {
    inset-inline-end: 0;
    right: auto;
    border: 1px solid var(--edge);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
    text-align: start;
  }
  .container .menu-dropdown-header { background: var(--surface-muted); color: var(--fg); border-bottom: 1px solid var(--edge); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .container .menu-dropdown-item { border-bottom: 1px solid var(--edge); min-height: 40px; }
  .container .menu-dropdown-item:hover { background: var(--surface-hover); }
  .container .menu-count-badge { background: var(--accent); color: var(--fg-on-accent); }


  /* ----- דוח ייצור (לשונית) ודוח אלרגנים, מסך בלבד -----
     ה-HTML נבנה ב-app.js עם צבעים כתומים/ירוקים בתוך style="", לכן !important.
     ההדפסה נפתחת בחלון נפרד עם ה-HTML המקורי ולא מושפעת. ----- */
  #productionReportContainer h2,
  #allergensContainer h2 {
    background: transparent !important;
    border: 0 !important;
    color: var(--fg) !important;
    text-align: start !important;
    font-size: 1.25rem !important;
    padding: 0 !important;
    margin: 12px 0 8px !important;
  }
  #productionReportContainer h3,
  #allergensContainer h3 {
    background: var(--accent-soft) !important;
    border: 1px solid #bfdbfe !important;
    border-bottom: 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--accent) !important;
    text-align: start !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    margin: 12px 0 0 !important;
  }
  #productionReportContainer table,
  #allergensContainer table {
    border: 1px solid var(--edge) !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
    margin-top: 0;
  }
  #productionReportContainer th,
  #allergensContainer th {
    background: #dbeafe !important;
    border: 0 !important;
    border-bottom: 2px solid #93c5fd !important;
    color: #1e3a8a !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    padding: 8px 10px !important;
  }
  #productionReportContainer td,
  #allergensContainer td {
    border: 0 !important;
    border-bottom: 1px solid var(--edge) !important;
    padding: 6px 10px !important;
    font-size: 0.875rem !important;
    background: var(--surface);
  }
  #productionReportContainer tr:last-child td,
  #allergensContainer tr:last-child td {
    border-bottom: 0 !important;
  }
  #productionReportContainer td[style*="cursor:pointer"]:hover,
  #allergensContainer td[style*="cursor:pointer"]:hover {
    background: var(--surface-hover) !important;
    color: var(--accent);
  }
  /* תיבות בדוח אלרגנים (מסגרות כתומות/כחולות) → מסגרת רגילה */
  #allergensContainer div[style*="border:2px solid"],
  #allergensContainer div[style*="border: 2px solid"],
  #allergensContainer div[style*="border:1px solid"] {
    border-color: var(--edge) !important;
    border-radius: var(--radius-lg);
  }
  #allergensContainer div[style*="background:#"] {
    background: var(--surface) !important;
  }
  #allergensContainer .empty-state {
    background: transparent !important;
  }


  /* ----- חיפוש מוסד (search-labels.html), מסך בלבד -----
     סרגל החיפוש הוא נקודת ההתחלה של הדף, כמו סרגל התאריך בדף הבית. ----- */
  .container .search-section.controls {
    background: var(--accent-soft);
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
  }
  .container .search-section .control-group { display: flex; flex-direction: column; gap: 4px; }
  .container .search-section .search-field { flex: 1 1 14rem; }
  .container .search-section label { font-weight: 600; font-size: 0.9375rem; color: var(--fg); }
  .container .search-section .search-input,
  .container .search-section input[type="date"] {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 1.0625rem;
    border: 2px solid var(--edge-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .container .search-section .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15); }
  .container .search-section .search-btn.btn {
    width: auto;
    min-height: 44px;
    padding: 8px 22px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
  }
  .container .search-section .search-btn.btn:hover:not(:disabled) { transform: none; box-shadow: none; }
  .container .results-info {
    background: var(--info-soft);
    border: 1px solid var(--info-edge);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 0.875rem;
    margin-bottom: 16px;
  }
  @media (max-width: 768px) {
    /* styles.css הופך את .controls לעמודה; בלי flex-basis כדי שלא ייווצרו רווחי גובה */
    .container .search-section .control-group,
    .container .search-section .search-field { flex: 0 0 auto; width: 100%; }
    .container .search-section .search-btn.btn { width: 100%; }
  }

}