/* =========================================================================
 * Internal Bookings — UI styles (Phase E)
 * Self-contained — all selectors prefixed `.ib-` to avoid clashing with the
 * host app's CSS. Removable along with the rest of the module.
 *
 * 2026-05-29 Batch 5.8 — theme cleanup. Chrome colours (surfaces, text,
 * borders, accent buttons, focus, diff) now derive from the active app theme
 * tokens (--bg / --card-bg / --section-bg / --text / --hint / --border /
 * --btn / --btn-text / --btn-rgb / --danger / --success / --warning) so the
 * whole module follows the user's chosen theme instead of a fixed light
 * palette. Self-contained semantic status chips (pills, info banner,
 * cancelled stamp, fallback toast) keep their fixed colours intentionally —
 * they read correctly on every theme. No JS / behaviour change.
 * ======================================================================= */

.ib-host {
  position: fixed;
  inset: 0;
  background: var(--bg);
  color: var(--text);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  direction: rtl;
}

.ib-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.ib-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ib-btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--section-bg);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.12s ease, filter 0.12s ease;
}
.ib-btn:active { transform: scale(.98); }
.ib-btn:hover  { background: var(--border); }

.ib-btn--primary {
  background: var(--btn);
  color: var(--btn-text);
  border-color: var(--btn);
}
.ib-btn--primary:hover { filter: brightness(0.94); background: var(--btn); }
.ib-btn--primary:disabled { opacity: 0.55; cursor: wait; }

.ib-btn--ghost  { background: transparent; border-color: transparent; }
.ib-btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.ib-btn--danger:hover { filter: brightness(0.92); }

.ib-loading,
.ib-empty {
  text-align: center;
  padding: 24px;
  color: var(--hint);
  font-size: 14px;
}

/* List rows */
.ib-list { display: flex; flex-direction: column; gap: 6px; }
.ib-row {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: right;
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ib-row:hover { background: var(--section-bg); }
.ib-row--cancelled { opacity: 0.6; }
.ib-row-main { flex: 1; min-width: 0; }
.ib-row-name {
  font-size: 14px;
  margin-bottom: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.ib-row-sub  { font-size: 12px; color: var(--hint); }
.ib-row-arrow { color: var(--hint); font-size: 18px; padding-inline-start: 8px; }

/* Pills — self-contained semantic status chips (readable on every theme) */
.ib-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.ib-pill--ok      { background: #dcfce7; color: #166534; }
.ib-pill--err     { background: #fee2e2; color: #b91c1c; }
.ib-pill--pending { background: #fef3c7; color: #92400e; }
.ib-pill--muted   { background: #e5e7eb; color: #4b5563; }

/* Form */
.ib-form { display: flex; flex-direction: column; gap: 8px; }
.ib-form h2 { margin: 4px 0; font-size: 18px; }
.ib-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.ib-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 12px;
  margin-bottom: 4px;
}
.ib-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.ib-input:focus {
  outline: none;
  border-color: var(--btn);
  box-shadow: 0 0 0 2px rgba(var(--btn-rgb), 0.25);
}
.ib-row-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.ib-row-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--hint);
}

.ib-room-row {
  border: 1px solid var(--border);
  background: var(--section-bg);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}
.ib-room-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 6px;
}
.ib-x {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--danger);
  font-size: 18px;
  cursor: pointer;
  padding: 0 6px;
}

.ib-grand-total {
  margin-top: 12px;
  padding: 10px;
  background: var(--section-bg);
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

.ib-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  justify-content: flex-end;
}

/* Detail */
.ib-detail h2 { margin: 8px 0; }
.ib-detail-meta {
  background: var(--section-bg);
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ib-room-card {
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 6px;
}
.ib-room-card-title { font-weight: 600; margin-bottom: 4px; }
.ib-cancelled-stamp {
  text-align: center;
  padding: 12px;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 8px;
}

/* Toast (fallback if host doesn't provide) — fixed dark notification chip */
.ib-toast {
  position: fixed;
  bottom: 24px;
  inset-inline: 16px;
  padding: 12px 16px;
  background: #111827;
  color: #fff;
  border-radius: 8px;
  z-index: 2000;
  text-align: center;
  font-size: 14px;
  animation: ibFadeIn 0.18s ease-out;
}
@keyframes ibFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Edit flow (Batch 4) — additive only ─────────────────────────────────── */
.ib-edit { display: flex; flex-direction: column; gap: 12px; }
.ib-edit-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ib-edit-field > span { color: var(--text); font-weight: 600; }
.ib-edit-readonly {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px;
  background: var(--section-bg); color: var(--hint); font-size: 13px; line-height: 1.7;
}
.ib-edit-ro-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.ib-edit-note { color: var(--hint); font-size: 13px; padding: 6px 0; }
.ib-diff { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ib-diff-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px;
  align-items: center; padding: 8px 10px; border-radius: 8px;
  background: var(--section-bg); font-size: 14px;
}
.ib-diff-field { font-weight: 600; color: var(--text); }
.ib-diff-before { color: var(--danger); text-decoration: line-through; }
.ib-diff-arrow  { color: var(--hint); }
.ib-diff-after  { color: var(--success); font-weight: 600; }
.ib-amount-confirm {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  font-size: 14px; color: var(--warning);
}

/* ── Inline remarks modal (Batch 5.6) — adopt the active app theme ─────────
 * The inline editor (app.js #ib-inline-host) reuses the host app's shared
 * `.modal-*` chrome, whose dark adaptation is driven by
 * `@media (prefers-color-scheme: dark)` in style.css (OS-level). Scoping these
 * overrides by the host ID makes them WIN over that media rule (ID specificity
 * beats a bare class), so the inline modal follows the USER'S theme in every
 * OS mode. The shared finance modals are untouched. */
#ib-inline-host .modal-card {
  background: var(--card-bg);
  color: var(--text);
}
#ib-inline-host .modal-header,
#ib-inline-host .modal-footer {
  border-color: var(--border);
}
#ib-inline-host .modal-close {
  background: var(--section-bg);
  color: var(--text);
}
#ib-inline-host .modal-close:hover {
  background: var(--border);
}

/* ── Unified booking edit modal (Batch 5.9) — layout only, no colours ─────── */
.ib-be-section { margin-bottom: 14px; }
/* Read-only / not-yet-editable fields render as disabled inputs. */
.ib-input:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Edit-history section (Batch 5.15) — layout + theme vars only ─────────
 * Lives inside the unified booking-edit modal, after "הערות". Collapsed by
 * default; lazy-loads via handleEditHistoryToggle. All colours derive from
 * the active app theme tokens — no hardcoded palette. The semantic states
 * (loading / empty / error) reuse the same `--hint` token already in use
 * for the modal's read-only rows. */
.ib-edit-history {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--section-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
}
.ib-edit-history > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
  list-style: none;
  color: var(--text);
}
.ib-edit-history > summary::-webkit-details-marker { display: none; }
.ib-edit-history > summary::before {
  content: '▸';
  display: inline-block;
  margin-inline-end: 6px;
  color: var(--hint);
  transition: transform 0.12s ease;
}
.ib-edit-history[open] > summary::before { transform: rotate(90deg); }

.ib-edit-history-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.ib-edit-history-row {
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ib-edit-history-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--hint);
}
.ib-edit-history-date { font-weight: 600; color: var(--text); }
.ib-edit-history-user { font-weight: 500; }
.ib-edit-history-outcome { margin-inline-start: auto; }

.ib-edit-history-changes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.ib-edit-history-change {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
}
.ib-edit-history-label { font-weight: 600; color: var(--text); }
.ib-edit-history-before { color: var(--danger); text-decoration: line-through; }
.ib-edit-history-arrow  { color: var(--hint); }
.ib-edit-history-after  { color: var(--success); font-weight: 600; }
.ib-edit-history-summary { color: var(--hint); }

.ib-edit-history-loading,
.ib-edit-history-empty,
.ib-edit-history-error {
  padding: 10px 4px;
  color: var(--hint);
  font-size: 13px;
}