/* KUKU OS Master Backoffice Design System — Vercel Off-White Light (Default) & Dark Mode */
:root {
  --bg-dark: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --primary: #0284C7;
  --primary-hover: #0369A1;
  --accent-gold: #D97706;
  --accent-green: #059669;
  --accent-red: #DC2626;
  --accent-cyan: #0284C7;
  --text-main: #0F172A;
  --text-muted: #64748B;
  --border-color: #E2E8F0;
  --font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
}

body.dark-theme {
  --bg-dark: #090D16;
  --bg-card: #161C26;
  --bg-sidebar: #0F172A;
  --primary: #38BDF8;
  --primary-hover: #0284C7;
  --accent-gold: #F59E0B;
  --accent-green: #10B981;
  --accent-red: #EF4444;
  --accent-cyan: #38BDF8;
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --border-color: #2E384D;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-family);
  height: 100vh;
  overflow: hidden;
}

.app-layout {
  display: flex;
  height: 100vh;
}

/* SIDEBAR */
.sidebar {
  width: 270px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.logo-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.badge-domain {
  font-size: 10px;
  background: #1E1B4B;
  color: #A5B4FC;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #6366F1;
  vertical-align: middle;
}

.brand-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(79, 70, 229, 0.1) 100%);
  border-color: var(--primary);
  color: #FFFFFF;
}

.pill-count {
  font-size: 10px;
  background: #1E293B;
  color: #818CF8;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 800;
  margin-left: auto;
}

.pill-online {
  font-size: 10px;
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-green);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 800;
  margin-left: auto;
}

.pill-live {
  font-size: 9px;
  background: #F43F5E;
  color: #FFF;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 800;
  margin-left: auto;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  margin-top: 12px;
}

.avatar {
  width: 36px;
  height: 36px;
  background: #334155;
  color: #F8FAFC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.user-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.user-name {
  font-size: 13px;
  font-weight: 700;
}

.user-role {
  font-size: 10px;
  color: var(--text-muted);
}

.btn-logout {
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

/* MAIN CONTENT */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-dark);
}

.top-header {
  padding: 16px 28px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title-box h1 {
  font-size: 18px;
  font-weight: 800;
}

.header-domain {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.highlight-domain {
  color: #818CF8;
  font-weight: 700;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.store-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 10px;
}

.store-selector select {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 700;
  outline: none;
  cursor: pointer;
}

.server-status {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  color: var(--accent-green);
  font-weight: 700;
}

.dot-green {
  width: 8px;
  height: 8px;
  background-color: var(--accent-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-green);
}

/* TAB PAGES */
.tab-page {
  display: none;
  padding: 24px 28px;
  overflow-y: auto;
  flex: 1;
}

.tab-page.active {
  display: block;
}

.page-top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.subtab-group {
  display: flex;
  /* Five subtabs on a narrow window used to widen the section rather than
     wrap, which is half of why the store room could scroll sideways. */
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 4px;
}

.subtab {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
}

.subtab.active {
  background: var(--primary);
  color: #FFFFFF;
}

.subtab-page {
  display: none;
}

.subtab-page.active {
  display: block;
}

.search-filter-row {
  display: flex;
  gap: 12px;
  flex: 1;
  max-width: 500px;
}

.search-input {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
  outline: none;
}

.select-filter {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
  outline: none;
}

.btn-group-right {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background: var(--primary);
  color: #FFF;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: #1E293B;
  color: #F8FAFC;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 16px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* METRICS GRID */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.metric-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}

.metric-trend {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}

.metric-trend.positive {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-green);
}

.metric-trend.neutral {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-gold);
}

.metric-value {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 4px;
}

.metric-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* DASHBOARD GRID */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.card-header h3 {
  font-size: 15px;
  font-weight: 800;
}

.chart-container {
  height: 220px;
  display: flex;
  align-items: flex-end;
  padding-top: 20px;
}

.bar-chart {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: flex-end;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
  justify-content: flex-end;
  flex: 1;
}

.bar {
  width: 32px;
  background: linear-gradient(180deg, #6366F1 0%, #312E81 100%);
  border-radius: 8px 8px 0 0;
}

.bar.active {
  background: linear-gradient(180deg, #10B981 0%, #064E3B 100%);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.top-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.top-list li {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-dark);
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.rank {
  width: 24px;
  height: 24px;
  background: #1E293B;
  color: #818CF8;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-right: 12px;
}

.item-name {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}

.item-count {
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 12px;
}

.item-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-green);
}

/* DATA TABLE */
.table-card-full {
  padding: 0;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th, .data-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
}

.data-table th {
  background: var(--bg-sidebar);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.item-img-thumb {
  width: 36px;
  height: 36px;
  background: #1E293B;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.cat-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: #1E1B4B;
  color: #A5B4FC;
}

/* The staff table used this class for years with no rule behind it, so every
   role rendered as unstyled text. */
.role-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  white-space: nowrap;
}

.role-badge.manager {
  background: rgba(2, 132, 199, 0.15);
  color: var(--primary);
}

.modifier-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mod-chip {
  font-size: 10px;
  background: #1E293B;
  color: #94A3B8;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.status-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
}

.status-chip.success { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }
.status-chip.danger { background: rgba(244, 63, 94, 0.15); color: var(--accent-red); }
.status-chip.warning { background: rgba(245, 158, 11, 0.15); color: var(--accent-gold); }

.btn-sm {
  background: #1E293B;
  color: #F8FAFC;
  border: 1px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.btn-sm.danger { background: rgba(244, 63, 94, 0.2); color: var(--accent-red); border-color: var(--accent-red); }

/* PRINTING */
.printing-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.printing-card { margin-bottom: 16px; }
.printing-warn { padding: 10px 14px; border-radius: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.printing-warn.danger { background: rgba(244, 63, 94, 0.12); color: var(--accent-red); }
.printing-warn.warning { background: rgba(245, 158, 11, 0.12); color: var(--accent-gold); }
.printing-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.printing-row:first-child { border-top: none; }
.printing-row.retired { opacity: 0.55; }
.printing-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
.printing-main .status-chip { margin-left: 6px; }
.printing-sub { font-size: 12px; color: var(--text-muted); }
.printing-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.printing-chip { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border-color); }
.printing-chip.product { border-style: dashed; }
.printing-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.printing-select { max-width: 260px; }
.printing-form { display: flex; flex-direction: column; gap: 14px; }
.printing-form [hidden] { display: none; }
.printing-form .form-row { flex-wrap: wrap; }
.printing-form .form-row > div { flex: 1 1 90px; min-width: 0; }
.printing-form .form-row > .printing-host { flex: 3 1 180px; }
.printing-form .form-row .form-input { width: 100%; box-sizing: border-box; }
.printing-checklist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; padding: 8px; border: 1px solid var(--border-color); border-radius: 10px; }
.printing-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }

/* DEVICES GRID */
.devices-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.device-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.device-type-icon {
  width: 40px;
  height: 40px;
  background: #1E1B4B;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.device-titles h4 {
  font-size: 14px;
  font-weight: 800;
}

.device-ip {
  font-size: 11px;
  color: var(--text-muted);
}

.device-info-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.color-green { color: var(--accent-green); }
.color-gold { color: var(--accent-gold); }

.device-actions {
  display: flex;
  gap: 8px;
}

/* FLOOR BUILDER */
.floor-builder-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
}

.floor-zones-sidebar h4 {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text-muted);
}

.zone-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zone-list li {
  padding: 10px 14px;
  background: var(--bg-dark);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.zone-list li.active {
  background: #1E1B4B;
  border-color: var(--primary);
  color: #FFF;
}

.tables-visual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.table-box {
  background: var(--bg-dark);
  border: 2px solid var(--accent-green);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}

.table-box.occupied { border-color: var(--accent-red); }
.table-box.billing { border-color: var(--accent-gold); }

.tbl-num {
  font-size: 18px;
  font-weight: 900;
}

.tbl-cap {
  font-size: 11px;
  color: var(--text-muted);
}

.tbl-nfc {
  font-size: 10px;
  background: #1E1B4B;
  color: #A5B4FC;
  padding: 2px 6px;
  border-radius: 4px;
}

.tbl-status {
  font-size: 10px;
  font-weight: 800;
}

.btn-icon-sm {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
}

/* SETTINGS FORM */
.settings-card {
  max-width: 600px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.form-input {
  background: var(--bg-dark);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
  outline: none;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.checkbox-group label {
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
}

.btn-row {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

/* MODAL DIALOG OVERLAY */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(11, 14, 20, 0.85);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  background: #0F172A;
  border: 2px solid var(--primary);
  border-radius: 20px;
  width: 90%;
  max-width: 580px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: #F8FAFC;
}

.modal-close-btn {
  background: #1E293B;
  color: #94A3B8;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The card is near-black and so is the page's default text colour, so plain
   text written into a modal came out invisible. It went unnoticed because
   every modal until now was a form, and inputs carry their own colours. */
.modal-body,
.modal-body p,
.modal-body li,
.modal-body strong {
  color: #F8FAFC;
}

.modal-body .text-muted {
  color: #94A3B8;
}

/* TOAST CONTAINERS */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10000;
}

.toast {
  background: #1E1B4B;
  border: 1.5px solid var(--primary);
  color: #F8FAFC;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pairing-box {
  background: var(--bg-dark);
  border: 2px dashed var(--primary);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  margin: 10px 0;
}

.pairing-code-display {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #818CF8;
  margin: 10px 0;
}

/* Two fields on one line -- ΑΦΜ and ΔΟΥ belong together and each is short. */
.form-group.form-row {
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}
.form-group.form-row > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* What the kitchen printer will actually put at the top of the ticket. The
   name is not decoration, so the field shows its consequence. */
.ticket-preview {
  background: var(--bg-dark);
  border: 1.5px dashed var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0;
  color: var(--text-main);
  font-family: "Consolas", "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
}

.settings-form small.text-muted {
  font-size: 11px;
  line-height: 1.5;
}

/* Wide tables scroll inside themselves, never by dragging the page.
 *
 * `.table-responsive` was in the markup with no rule behind it, so it did
 * nothing: a table wider than its column made the whole `.tab-page` section
 * scroll horizontally instead. Once that section was scrolled even a little,
 * every *other* subtab rendered off to the left of the visible area and the
 * screen read as empty -- content was there, drawn, and simply not where
 * anyone was looking. Reported as "I see nothing" on 2026-09-02, on both the
 * laptop and Railway, and the store room's eight-column shelf is what made it
 * wide enough to bite.
 *
 * `min-width: 0` is the load-bearing half. A flex or grid child defaults to
 * `min-width: auto`, which refuses to shrink below its content -- so without
 * it the section still stretches and the overflow just moves up a level. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  max-width: 100%;
}

/* The section itself must never be the thing that scrolls sideways. */
.tab-page {
  overflow-x: hidden;
  min-width: 0;
}

/* `overflow: hidden` on the card would clip the scrollbar the wrapper needs. */
.table-card-full {
  overflow: visible;
}

/* Below this the columns start colliding; past it the wrapper scrolls. */
.table-card-full .data-table {
  min-width: 720px;
}

/* ==========================================================================
   Small screens
   ==========================================================================
   There was not one media query in this file. The sidebar is a fixed 270px,
   so on a 375px phone it took **72% of the screen** and left 105px for
   everything else -- narrower than a business card. The owner opened it on his
   phone and reported, accurately, that nothing showed. The viewport meta tag
   was correct all along; the phone was faithfully rendering a 105px column.

   The shell below ~900px: the sidebar leaves the flow and slides over the
   content when asked for, the content gets the whole width, and a ☰ in the
   header is what asks.
   ========================================================================== */

/* The backdrop is always in the markup so the drawer can animate against it;
   it is inert until the drawer opens. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-color);
  color: inherit;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  padding: 7px 11px;
  cursor: pointer;
}

@media (max-width: 900px) {
  /* `100vh` on a phone is the viewport *including* the address bar, so the
     last rows of any list sit under it and cannot be scrolled to. `100dvh`
     is the visible part and changes as the bar hides; the `100vh` above it
     stays for browsers that do not know `dvh`. */
  body,
  .app-layout {
    height: 100vh;
    height: 100dvh;
  }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 82vw;
    max-width: 300px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .nav-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* The header carried a title, a domain line, a store picker and a status
     pill in one row. On a phone that wraps into four lines before any content
     appears, so the two that are decoration go. */
  .top-header {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .header-domain,
  .server-status {
    display: none;
  }

  .top-header h1 {
    font-size: 16px;
    line-height: 1.3;
  }

  .tab-page {
    padding: 14px;
  }

  /* Rows of buttons and filters stack instead of overflowing. */
  .page-top-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .subtab-group {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* A dialog sized for a laptop is unusable on a phone; full width, and tall
     enough to scroll inside itself rather than under the keyboard. */
  #modalCard {
    width: calc(100vw - 20px);
    max-width: none;
    max-height: 88dvh;
    overflow-y: auto;
  }

  .form-input,
  .input-field,
  select,
  input,
  textarea {
    font-size: 16px;   /* under 16px iOS zooms the whole page on focus */
  }
}

@media (max-width: 560px) {
  /* Below this a table cannot be made to fit by any amount of scrolling, so
     each row becomes a card: the name and its supplier on top, the figures
     underneath with their own labels. Same data, different shape -- shrinking
     eight columns would only make eight unreadable ones. */
  .table-card-full .data-table,
  .table-card-full .data-table tbody,
  .table-card-full .data-table tr,
  .table-card-full .data-table td {
    display: block;
    width: auto;
  }

  .table-card-full .data-table thead {
    display: none;
  }

  .table-card-full .data-table tr {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 6px 10px;
  }

  .table-card-full .data-table td {
    border: none;
    padding: 5px 0;
    text-align: left !important;
  }

  /* The header each cell lost, put back beside it. `data-label` is written by
     the renderer; a cell without one simply shows its value, which is right
     for the first cell and for a row of buttons. */
  .table-card-full .data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 1px;
  }

  .table-card-full .data-table {
    min-width: 0;
  }
}

/* Every fixed-column grid, on a narrow screen.
 *
 * `repeat(4, 1fr)` does not mean "four columns that fit" -- a grid child
 * defaults to `min-width: auto`, so it refuses to shrink below its own
 * content and the row overflows instead. On the Analytics tab that pushed
 * «Μέσο τικέτ» off the right edge with no scrollbar to reach it.
 *
 * `auto-fit` with a `minmax` floor lets the browser pick the column count,
 * and the `0` floor is what actually allows shrinking. */
@media (max-width: 900px) {
  .metrics-grid,
  .devices-grid,
  .tables-visual-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 12px;
  }

  .dashboard-grid,
  .floor-builder-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* ---- Grouped navigation --------------------------------------------------
 * Twelve items in a flat list is a list you scan every time. Three doors --
 * Analytics, Αποθήκη, Ρυθμίσεις -- is a shape you remember, and the third
 * holds everything that is set up once.
 */
.nav-group { margin-top: 6px; }

.nav-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.nav-group-head:hover { background: rgba(255, 255, 255, 0.05); }

.nav-group-head .chev {
  margin-left: auto;
  transition: transform 0.18s ease;
  font-size: 11px;
}

.nav-group.open .nav-group-head .chev { transform: rotate(180deg); }

/* Closed by height rather than `display`, so it animates and a screen reader
 * still sees a collapsed region rather than nothing.
 *
 * **Not the `grid-template-rows: 0fr` trick.** That collapses only the first
 * row, and this group has nine children -- measured closed at 363px, which is
 * to say not closed at all. `max-height` handles any number of them. */
.nav-group-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.nav-group.open .nav-group-items { max-height: 620px; }

.nav-group-items .nav-item { padding-left: 26px; }

/* A group holding the open screen stays open, so the sidebar never shows a
 * closed group as the answer to "where am I". */
.nav-group:has(.nav-item.active) .nav-group-items { max-height: 620px; }
.nav-group:has(.nav-item.active) .nav-group-head { color: var(--text-main); }

/* ---- The bell ------------------------------------------------------------ */
.bell-btn {
  position: relative;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  padding: 8px 11px;
  cursor: pointer;
}

.bell-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #EF4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* An author `display` beats the `hidden` attribute, which only sets
 * `display:none` in the UA stylesheet -- so the badge showed a red `0` on a
 * bell with nothing behind it. Same shape as the drawer backdrop, which is
 * why both are written down. */
.bell-count[hidden] { display: none; }

/* ---- The assistant, on every screen -------------------------------------- */
.assistant-bar { margin-bottom: 16px; }

.assistant-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card, #fff);
  border: 1px solid #38BDF8;
  border-radius: 12px;
  padding: 9px 12px;
}

.assistant-spark { font-size: 15px; line-height: 1; }

.assistant-input {
  flex: 1;
  min-width: 0;          /* or a long placeholder widens the whole row */
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  outline: none;
}

.assistant-go {
  border: none;
  background: #38BDF8;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
}

.assistant-go:disabled { opacity: 0.55; cursor: default; }

/* A 📎, which is what the removed tab uniquely had. Icon-only, so its meaning
   lives in `title` as well as the glyph. */
.assistant-clip {
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  padding: 4px 2px;
  cursor: pointer;
  opacity: .75;
}
.assistant-clip:hover { opacity: 1; }

.assistant-answer {
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin: -6px 10px 0;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  /* The panel holds a running conversation now, not one answer. Capped and
     scrolled so a long thread cannot push the screen it belongs to off the
     bottom of the page. */
  max-height: 52vh;
  overflow-y: auto;
}

/* One question and its answer. Separated by a rule rather than by bubbles:
   this sits above a working screen, and a chat window competes with it. */
.assistant-turn + .assistant-turn {
  border-top: 1px solid var(--border-color);
  margin-top: 10px;
  padding-top: 10px;
}

.assistant-mine { color: var(--text-muted); }

.assistant-line { margin-bottom: 6px; white-space: pre-wrap; }
.assistant-thinking { color: var(--text-muted); }
.assistant-failed { color: #EF4444; }
.assistant-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }

.assistant-close {
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}

.assistant-proposal {
  border: 1px solid #F59E0B;
  border-radius: 9px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 13px;
}

.assistant-proposal-actions { margin-top: 8px; }

@media (max-width: 560px) {
  /* The button below the field rather than beside it: at 375px a Greek
     placeholder and a button in one row leave about eight characters of
     input. */
  .assistant-ask { flex-wrap: wrap; }
  .assistant-input { flex: 1 1 100%; order: 2; }
  .assistant-go { order: 3; margin-left: auto; }
}

/* ---- The home: three doors ----------------------------------------------
 *
 * The owner's own shape for this app -- Analytics, Αποθήκη, Ρυθμίσεις, with
 * the assistant under them. Deliberately not a fourth design: the tiles use
 * the same card, border and radius as everything else, so this is the same
 * Dashboard opened at a different page rather than a landing screen with its
 * own rules.
 */
.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px 22px;
  min-height: 168px;
  text-align: left;
  font-family: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.home-tile:hover,
.home-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(2, 132, 199, .14);
}

.home-tile-icon { font-size: 30px; line-height: 1; }

.home-tile-name {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-main);
}

/* The figure that decides whether the tile is worth opening. It sits at the
   bottom and takes whatever room is left, so three tiles line up however
   long their sentences are. */
.home-tile-note {
  margin-top: auto;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Something waiting is the whole reason to press. Amber rather than red:
   unmatched articles are work, not a fault. */
.home-tile-note strong { color: var(--accent-gold); font-weight: 700; }
.home-tile-note .ok { color: var(--accent-green); font-weight: 700; }

@media (max-width: 900px) {
  /* Two across on a tablet, one on a phone -- a 168px-tall tile three across
     on a 375px screen is three unreadable columns. */
  .home-tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 560px) {
  .home-tiles { grid-template-columns: 1fr; gap: 12px; }
  .home-tile { min-height: 0; padding: 18px 16px; flex-direction: row;
               align-items: center; flex-wrap: wrap; }
  .home-tile-icon { font-size: 24px; }
  .home-tile-name { font-size: 18px; }
  .home-tile-note { flex-basis: 100%; margin-top: 2px; }
}

.assistant-rule {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 10px 0;
}

/* One ingredient line inside a recipe or preparation dialog.
   A `<select>` refuses to shrink below its widest option unless told to, and
   this shop's options run to «ΚΡΕΜΜΥΔΙΑ ΞΕΡΑ ΧΥΜΑ Α' ΠΟΙΟΤ. 5KG (gr)». Left at
   `flex:2` it pushed the quantity box past the right edge of a 580px dialog,
   so the number being typed was the one thing off-screen. The quantity is
   pinned and the name gives way instead: a clipped name is still readable, a
   half-visible number is not. */
.recipe-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.recipe-row > select {
  flex: 1 1 auto;
  min-width: 0;          /* the whole fix; without it flex-shrink cannot act */
}

.recipe-row-qty {
  flex: 0 0 116px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.recipe-row-qty input {
  width: 100%;
  min-width: 0;
  text-align: right;
}

/* The placeholder vanishes the moment a number is typed, so the unit is shown
   beside it: «150» means nothing without knowing whether it is grams. */
.recipe-row-unit {
  color: var(--text-muted);
  font-size: 12px;
  min-width: 24px;
}

/* On a phone the dialog is the whole screen and 116px of quantity plus a bin
   leaves the name unreadable. Below this the name takes its own line, so all
   three are fully visible rather than three things sharing 300 pixels. */
@media (max-width: 460px) {
  .recipe-row { flex-wrap: wrap; }
  .recipe-row > select { flex: 1 1 100%; }
  /* Grows, but not so far that it pushes the bin onto a third line of its
     own -- one row of a recipe should read as one thing. */
  .recipe-row-qty { flex: 1 1 auto; max-width: calc(100% - 58px); }
}

/* The ingredient picker: a search box with the list under it.
   A `<select>` stopped working as a control the moment this shop passed a
   hundred ingredients -- it cannot be searched, it opens as a wall of names,
   and it has no way to say «this one is not in the list yet». */
.picker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.picker-input { width: 100%; min-width: 0; }

/* Over the rows beneath rather than pushing them down: a list that reflows the
   dialog every time you type is unusable on a tablet. */
.picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  padding: 4px;
}

.picker-group {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 10px 4px;
}

.picker-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 13px;
}

.picker-opt:hover,
.picker-opt:focus-visible { background: rgba(56, 189, 248, 0.14); outline: none; }
.picker-opt small { color: var(--text-muted); font-size: 11px; }

/* Last, and marked: it is the answer only when the list has none. */
.picker-new { border-top: 1px solid var(--border-color); margin-top: 4px; }
.picker-new span { color: var(--primary); font-weight: 700; }

.picker-empty { padding: 12px 10px; color: var(--text-muted); font-size: 13px; }

.picker-new-form { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.picker-new-form label { font-size: 12px; font-weight: 700; }
.picker-new-form .text-muted { margin: 0; font-size: 11px; }
.picker-new-actions { display: flex; gap: 8px; margin-top: 2px; }
.picker-new-error { margin: 0; color: #DC2626; font-size: 12px; }

/* The menu lives inside `.modal-card`, which scrolls, so a list opened on the
   last row is clipped at the card's edge and reached by scrolling the dialog.
   Capped at 260px above for that reason: a taller list would be mostly
   unreachable rather than mostly visible. Two more letters typed is a shorter
   route to the right row than any amount of scrolling. */