/* Hotel Desk — styling for the legacy dialogs that run inside Desk
 * (transaction editor, payment wizard, WhatsApp, invoice, transfer, guest
 * profile, merge, confirm). Their markup comes from the legacy engine; every
 * rule is scoped to .modal-bg so nothing leaks into Desk's own screens. */

.modal-bg {
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh var(--space-4) var(--space-4); overflow-y: auto;
  background: var(--overlay);
}
.modal-bg .modal {
  width: 100%; max-width: 760px; margin: 0 auto;
  background: var(--bg-surface); color: var(--text-body);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}
.modal-bg .modal-header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.modal-bg .modal-header h2 { margin: 0; font-size: var(--font-lg); font-weight: 600; color: var(--text-strong); }
.modal-bg .modal-header > :first-child { flex: 1; }
.modal-bg .x {
  width: 28px; height: 28px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px;
}
.modal-bg .x:hover { background: var(--bg-hover); color: var(--text-strong); }

.modal-bg label { display: block; margin-bottom: 4px; font-size: var(--font-sm); color: var(--text-muted); font-weight: 400; }
.modal-bg input:not([type=checkbox]):not([type=radio]),
.modal-bg select, .modal-bg textarea {
  width: 100%; min-height: var(--control-h); padding: 4px var(--space-2);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--control-bg); color: var(--text-strong); font: inherit;
}
.modal-bg textarea { min-height: 64px; resize: vertical; }
.modal-bg input:focus, .modal-bg select:focus, .modal-bg textarea:focus {
  outline: none; background: var(--bg-surface); border-color: var(--gray-400); box-shadow: var(--focus-ring);
}
.modal-bg input[readonly] { background: transparent; border-color: var(--border); color: var(--text-muted); }
.modal-bg input[type=checkbox], .modal-bg input[type=radio] { accent-color: var(--primary); width: auto; }
.modal-bg select[size] { min-height: 160px; }

.modal-bg .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.modal-bg .form-grid .full { grid-column: 1 / -1; }
.modal-bg .form-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; align-items: center;
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border);
}

.modal-bg .btn, #row-menu-el button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h); padding: 0 12px; border: 0; border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--text-strong); font: 500 var(--font-base) var(--font-sans);
  cursor: pointer; white-space: nowrap;
}
.modal-bg .btn:hover { background: var(--bg-active); }
.modal-bg .btn.primary { background: var(--primary); color: var(--text-inverse); }
.modal-bg .btn.primary:hover { background: var(--primary-hover); }
.modal-bg .btn.danger { background: var(--red-50); color: var(--red-700); }
.modal-bg .btn.sm { height: 24px; padding: 0 8px; font-size: var(--font-sm); }
.modal-bg .btn[disabled] { opacity: .55; cursor: not-allowed; }

.modal-bg .small-muted, .modal-bg .meta { color: var(--text-muted); font-size: var(--font-sm); }
.modal-bg .section-title { margin: var(--space-4) 0 var(--space-2); font-weight: 600; color: var(--text-strong); }
.modal-bg .link { color: var(--link); cursor: pointer; }
.modal-bg .link:hover { text-decoration: underline; }
.modal-bg .num { font-variant-numeric: tabular-nums; }
.modal-bg .money.pos { color: var(--red-700); }
.modal-bg .money.neg { color: var(--green-700); }
.modal-bg .money.zero { color: var(--text-muted); }
.modal-bg .mb10 { margin-bottom: 10px; } .modal-bg .mt10 { margin-top: 10px; } .modal-bg .mt16 { margin-top: 16px; }
.modal-bg .ml8 { margin-inline-start: 8px; }
.modal-bg .spacer { flex: 1; }
.modal-bg .flex-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modal-bg .toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.modal-bg .empty { padding: var(--space-5); text-align: center; color: var(--text-muted); }
.modal-bg details summary { cursor: pointer; }

.modal-bg .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }
.modal-bg .grid { display: grid; gap: var(--space-3); }
.modal-bg .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-bg .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal-bg .grid-4 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.modal-bg .kpi .label { font-size: var(--font-sm); color: var(--text-muted); }
.modal-bg .kpi .value { font-size: var(--font-lg); font-weight: 600; color: var(--text-strong); }
.modal-bg .kpi .sub { font-size: var(--font-sm); color: var(--text-muted); }

.modal-bg .alert {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--bg-subtle); margin-bottom: var(--space-2);
}
.modal-bg .alert.warn { background: var(--yellow-50); color: var(--text-body); }
.modal-bg .alert.error { background: var(--red-50); color: var(--text-body); }
.modal-bg .alert .t { font-weight: 600; color: var(--text-strong); margin-bottom: 2px; }
.modal-bg .hint { font-size: var(--font-sm); margin-top: 4px; border-radius: var(--radius-sm); }

.modal-bg .tag, .modal-bg .pill {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: var(--radius-full); font-size: var(--font-xs); font-weight: 500;
  background: var(--bg-subtle); color: var(--text-muted);
}
.modal-bg .table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.modal-bg table { width: 100%; border-collapse: collapse; }
.modal-bg th { position: sticky; top: 0; background: var(--bg-subtle); font-size: var(--font-sm); font-weight: 500; color: var(--text-muted); text-align: start; padding: 6px 10px; white-space: nowrap; }
.modal-bg td { padding: 6px 10px; border-top: 1px solid var(--border); vertical-align: top; }
.modal-bg .total-row td { font-weight: 600; background: var(--bg-subtle); }
.modal-bg pre { background: var(--bg-subtle) !important; color: var(--text-body); }

.modal-bg .tabs { display: flex; gap: 4px; background: var(--bg-subtle); padding: 3px; border-radius: var(--radius-sm); margin-bottom: var(--space-3); width: fit-content; }
.modal-bg .tab { padding: 4px 12px; border-radius: 5px; cursor: pointer; color: var(--text-muted); }
.modal-bg .tab.active { background: var(--bg-surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }

/* Row "⋮" menu from the legacy engine (positioned inline by the engine). */
#row-menu-el { background: var(--bg-surface) !important; border: 0 !important; box-shadow: var(--shadow-lg) !important; padding: 4px; border-radius: var(--radius-md) !important; }
#row-menu-el button { display: flex !important; width: 100%; justify-content: flex-start; background: transparent !important; border: 0 !important; height: 32px; }
#row-menu-el button:hover { background: var(--bg-hover) !important; }

/* Phones: the legacy dialogs go full-screen, with the title and the action
 * bar pinned so Save is always reachable above the keyboard. */
@media (max-width: 760px) {
  .modal-bg { padding: 0; z-index: 85; }
  .modal-bg .modal {
    min-height: 100dvh; border-radius: 0; box-shadow: none;
    padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
  .modal-bg .modal-header {
    position: sticky; top: 0; z-index: 2; margin: 0 calc(-1 * var(--space-4)) var(--space-3);
    padding: calc(var(--space-3) + env(safe-area-inset-top, 0px)) var(--space-4) var(--space-3);
    background: var(--bg-surface); border-bottom: 1px solid var(--border);
  }
  .modal-bg .x { width: 44px; height: 44px; font-size: 18px; }
  .modal-bg .form-grid, .modal-bg .grid-2, .modal-bg .grid-3, .modal-bg .grid3 { grid-template-columns: 1fr; }
  .modal-bg .modal * { min-width: 0; }
  .modal-bg .form-grid .full[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .modal-bg input:not([type=checkbox]):not([type=radio]), .modal-bg select { min-height: 44px; font-size: 16px; }
  .modal-bg textarea { font-size: 16px; }
  .modal-bg input[type=checkbox], .modal-bg input[type=radio] { width: 20px; height: 20px; }
  .modal-bg label:has(input[type=checkbox]), .modal-bg label:has(input[type=radio]) { min-height: 40px; display: flex; align-items: center; gap: 8px; }
  .modal-bg .btn { min-height: 44px; }
  .modal-bg .btn.sm { height: 40px; min-height: 40px; padding: 0 12px; }
  .modal-bg .form-actions {
    position: sticky; bottom: 0; z-index: 2; margin: var(--space-4) calc(-1 * var(--space-4)) 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-surface); border-top: 1px solid var(--border);
  }
  .modal-bg .form-actions .btn { flex: 1 1 auto; }
  .modal-bg .table-wrap { max-width: 100%; }
  /* Row menu: a bottom sheet instead of a popup near the finger. */
  #row-menu-el {
    position: fixed !important; inset-inline: 8px !important; left: 8px !important; right: 8px !important;
    top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; min-width: 0 !important;
    border-radius: 14px !important; padding: 6px;
  }
  #row-menu-el button { height: 48px !important; font-size: 15px !important; }
}
@media print {
  .navbar, .sidebar, .page-actions, .list-filters, .list-footer, .no-print { display: none !important; }
  .main { padding: 0 !important; }
}