/* --- Phone-first shell (RTL)
   Layer/area: UI
   Related up:   public/index.html
   Related down: none
   Safety: no customer data in CSS
   Pitfall: keep 44px taps and 16px inputs (iOS zoom). Same layout on desktop — no sidebar.
*/

:root {
  --bg: #f5f0eb;
  --ink: #1c1917;
  --muted: #57534e;
  --line: #d6d3d1;
  --card: #fffdfb;
  --primary: #1c1917;
  --on-primary: #fafaf9;
  --pending: #c2410c;
  --approved: #15803d;
  --cancelled: #b91c1c;
  --tap: 44px;
  --pad: 16px;
  --phone: 430px;
  --tabbar: calc(56px + env(safe-area-inset-bottom, 0px));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #e7e5e4;
  color: var(--ink);
  font-family: "Segoe UI", "David", "Arial Hebrew", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  justify-content: center;
}

.phone-shell {
  width: 100%;
  max-width: var(--phone);
  min-height: 100dvh;
  min-height: 100svh;
  background: var(--bg);
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--pad)
    calc(var(--tabbar) + 12px);
  padding-inline: max(var(--pad), env(safe-area-inset-right, 0px))
    max(var(--pad), env(safe-area-inset-left, 0px));
}

.phone-shell.app {
  padding-bottom: calc(var(--tabbar) + 16px);
}

.site-title,
.topbar-title {
  font-size: 1.25rem;
  margin: 0 0 16px;
  font-weight: 700;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.topbar-title {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}

input,
textarea,
button,
.chip,
.tab,
.file-btn {
  font: inherit;
  font-size: 16px;
  touch-action: manipulation;
}

input,
textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}

textarea {
  min-height: 72px;
  resize: vertical;
}

.btn,
.file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--primary);
  cursor: pointer;
  text-align: center;
}

.btn.primary {
  background: var(--primary);
  color: var(--on-primary);
  width: 100%;
}

.btn.ghost,
.file-btn {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn.back {
  width: auto;
  align-self: flex-start;
  margin-bottom: 8px;
}

.file-btn {
  position: relative;
}

.error {
  color: var(--cancelled);
  margin: 0;
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.search-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.chips {
  display: flex;
  gap: 8px;
}

.chip,
.tab {
  flex: 1;
  min-height: var(--tap);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}

.chip.active,
.tab.active {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.order-card {
  display: block;
  width: 100%;
  text-align: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  min-height: var(--tap);
}

.order-card .hall {
  font-weight: 700;
  font-size: 1.05rem;
}

.order-card .meta {
  color: var(--muted);
  margin-top: 4px;
}

.badge {
  display: inline-block;
  font-weight: 700;
  margin-bottom: 6px;
}

.badge.pending {
  color: var(--pending);
}
.badge.approved {
  color: var(--approved);
}
.badge.cancelled {
  color: var(--cancelled);
}

.empty {
  color: var(--muted);
  padding: 20px 4px;
}

.status-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-row legend {
  padding: 0 6px;
  font-weight: 700;
}

.status-opt {
  flex: 1 1 30%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 8px;
  font-weight: 700;
}

.status-opt.pending {
  color: var(--pending);
}
.status-opt.approved {
  color: var(--approved);
}
.status-opt.cancelled {
  color: var(--cancelled);
}

.status-opt:has(input:checked) {
  outline: 2px solid currentColor;
}

.order-form {
  padding-bottom: 8px;
}

.tabs {
  position: fixed;
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
  max-width: var(--phone);
  display: flex;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border-top: 1px solid var(--line);
  z-index: 20;
}

.date-head {
  font-weight: 700;
  margin: 8px 0 4px;
  color: var(--muted);
}

[hidden] {
  display: none !important;
}