/* ── CSS Variables ── */
:root {
  --om-bg:       #0f1117;
  --om-surface:  #1c1f2e;
  --om-border:   #2d3248;
  --om-text:     #f1f3f9;
  --om-muted:    #8b95b0;
  --om-primary:  #6c63ff;
  --om-new:      #f59e0b;
  --om-prep:     #3b82f6;
  --om-ready:    #10b981;
  --om-done:     #4b5563;
  --om-danger:   #ef4444;
  --om-navbar-h: 58px;
}

*, *::before, *::after { box-sizing: border-box; }

body.om-body {
  background: var(--om-bg);
  color: var(--om-text);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  margin: 0;
}

/* ── Navbar ── */
.om-navbar {
  height: var(--om-navbar-h);
  background: var(--om-surface);
  border-bottom: 1px solid var(--om-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  gap: 8px;
}
.om-brand      { font-weight: 700; font-size: 1rem; color: var(--om-primary); white-space: nowrap; }
.om-pill       { background: rgba(108,99,255,.15); color: var(--om-primary);
                 padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; }
.om-clock      { font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--om-muted); }
.om-nav-btn    { background: transparent; border: 1px solid var(--om-border); color: var(--om-muted);
                 border-radius: 8px; padding: 5px 12px; font-size: 0.8rem;
                 cursor: pointer; text-decoration: none; transition: all .15s; }
.om-nav-btn:hover, .om-nav-btn.active {
  background: var(--om-primary); border-color: var(--om-primary); color: #fff;
}
.om-user-pill  { font-size: 0.8rem; color: var(--om-muted); }
.om-logout-btn { background: transparent; border: 1px solid var(--om-border);
                 color: var(--om-muted); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.om-logout-btn:hover { border-color: var(--om-danger); color: var(--om-danger); }
.om-flash { margin: 0; border-radius: 0; border: none; font-size: 0.9rem; }
.om-main  { padding: 0; }

/* ── Toggle bar ── */
.om-toggle-bar { background: var(--om-surface); border-bottom: 1px solid var(--om-border); }
.om-col-toggle { background: var(--om-surface); border: 1px solid var(--om-border);
                 color: var(--om-muted); border-radius: 20px; padding: 5px 14px;
                 font-size: 0.85rem; cursor: pointer; transition: all .15s; }
.om-col-toggle.active { background: var(--om-primary); border-color: var(--om-primary); color: #fff; }
.om-badge { background: rgba(255,255,255,.2); border-radius: 10px;
            padding: 1px 7px; font-size: 0.75rem; margin-left: 4px; }

/* ── Board Kanban ── */
/* ── Board: horizontal scroll, each column holds a 2-card grid ── */
.om-board {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 12px;
  overflow-x: auto;
  height: calc(100vh - var(--om-navbar-h) - 48px);
  align-items: flex-start;
}

/* Each column: min 580px so 2 cards sit side-by-side comfortably */
.om-col {
  min-width: 580px;
  flex: 1;
  background: var(--om-surface);
  border-radius: 14px;
  border: 1px solid var(--om-border);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
.om-col.om-col-hidden { display: none; }

.om-col-header { padding: 10px 14px; font-weight: 700; font-size: 0.9rem; border-radius: 14px 14px 0 0; }
.om-col-new       { background: rgba(245,158,11,.15); color: var(--om-new); }
.om-col-preparing { background: rgba(59,130,246,.15);  color: var(--om-prep); }
.om-col-ready     { background: rgba(16,185,129,.15);  color: var(--om-ready); }
.om-col-completed { background: rgba(75,85,99,.15);    color: var(--om-done); }

/* Card grid: 2 columns inside each board column */
.om-col-body {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}
.om-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-content: start;
}

/* On smaller screens: collapse to 1 card wide */
@media (max-width: 900px) {
  .om-board {
    flex-direction: column;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .om-col {
    min-width: unset;
    width: 100%;
    max-height: none;
  }
  .om-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Empty state spans both columns */
.om-empty-col {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--om-muted);
  font-size: 0.85rem;
  padding: 24px;
}

/* ── Order Cards ── */
.om-card {
  background: #252840;
  border-radius: 12px;
  padding: 12px;
  border-left: 4px solid var(--om-border);
  transition: transform .15s;
}
.om-card:hover { transform: translateY(-2px); }
.om-card-new, .om-card-confirmed { border-left-color: var(--om-new); }
.om-card-preparing               { border-left-color: var(--om-prep); }
.om-card-ready                   { border-left-color: var(--om-ready); }
.om-card-completed               { border-left-color: var(--om-done); opacity: .8; }

@keyframes overdue-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,.4); }
}
/* overdue only applies to non-completed cards */
.om-overdue { animation: overdue-pulse 1.8s ease-in-out infinite;
              border-left-color: var(--om-danger) !important; }

.om-card-header  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.om-card-ref     { font-weight: 800; font-size: 1.1rem; color: var(--om-text); }
.om-card-age     { font-size: 0.85rem; }
.om-src-badge    { display: inline-block; padding: 1px 7px; border-radius: 10px;
                   font-size: 0.7rem; margin-left: 6px; }
.om-src-phone    { background: rgba(59,130,246,.2); color: #93c5fd; }
.om-src-till     { background: rgba(16,185,129,.2); color: #6ee7b7; }
.om-card-customer { font-size: 0.85rem; color: var(--om-muted); margin-bottom: 4px; }
.om-card-type-badge { display: inline-block; font-size: 0.7rem; font-weight: 700;
                      padding: 2px 8px; border-radius: 10px;
                      background: rgba(108,99,255,.2); color: var(--om-primary); margin-bottom: 8px; }
.om-card-items  { list-style: none; padding: 0; margin: 0 0 8px; font-size: 0.88rem; }
.om-card-items li { padding: 2px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.om-item-qty    { font-weight: 700; color: var(--om-new); margin-right: 4px; }
.om-item-notes  { font-size: 0.78rem; color: var(--om-muted); }
.om-card-notes  { font-size: 0.8rem; color: var(--om-muted);
                  background: rgba(245,158,11,.08); border-radius: 6px;
                  padding: 5px 8px; margin-bottom: 6px; }
.om-card-total  { font-weight: 800; font-size: 1rem; color: var(--om-ready);
                  text-align: right; margin-bottom: 6px; }
/* Completed time badge */
.om-completed-time { display: inline-block; background: rgba(75,85,99,.3);
                     color: #9ca3af; border-radius: 8px; padding: 3px 9px;
                     font-size: 0.78rem; margin-bottom: 6px; }
.om-completed-time i { margin-right: 3px; }

/* ── Action buttons ── */
.om-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.om-action-btn   { border: none; border-radius: 8px; padding: 7px 12px; font-size: 0.8rem;
                   font-weight: 600; cursor: pointer; transition: opacity .15s; flex: 1; min-width: 80px; }
.om-action-btn:hover    { opacity: .85; }
.om-action-btn:disabled { opacity: .45; cursor: not-allowed; }
.om-btn-prepare  { background: var(--om-prep);  color: #fff; }
.om-btn-ready    { background: var(--om-ready); color: #fff; }
.om-btn-complete { background: #10b981;          color: #fff; }
.om-btn-print    { background: rgba(255,255,255,.1); color: var(--om-muted); flex: 0; }
.om-btn-cancel   { background: rgba(239,68,68,.15);  color: var(--om-danger); flex: 0; }

/* ── Login screens ── */
body.om-login-body { background: linear-gradient(135deg,#1e2a3b,#263447); }
.om-login-card  { background: #1c1f2e; border-radius: 20px; padding: 36px;
                  max-width: 420px; width: 100%; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
.om-login-logo  { font-size: 3rem; color: var(--om-primary); }
.om-login-title { font-size: 1.4rem; font-weight: 800; color: var(--om-text); }
.om-login-sub   { color: var(--om-muted); font-size: 0.9rem; }
.om-location-btn { display: block; background: #252840; border: 2px solid var(--om-border);
                   color: var(--om-text); border-radius: 12px; padding: 14px 18px;
                   font-weight: 600; text-decoration: none; text-align: left;
                   cursor: pointer; transition: all .15s; width: 100%; }
.om-location-btn:hover { border-color: var(--om-primary); color: var(--om-primary); }

/* ── PIN pad ── */
.om-pin-dots { display: flex; justify-content: center; gap: 10px; }
.om-pin-dot  { width: 18px; height: 18px; border-radius: 50%;
               border: 2px solid var(--om-border); background: transparent; transition: background .1s; }
.om-pin-dot.filled { background: var(--om-primary); border-color: var(--om-primary); }
.om-numpad   { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
               max-width: 260px; margin: 0 auto; }
.om-numpad-btn { background: #252840; border: 1px solid var(--om-border); color: var(--om-text);
                 border-radius: 12px; padding: 18px; font-size: 1.4rem; font-weight: 700;
                 cursor: pointer; transition: all .1s; }
.om-numpad-btn:hover  { background: var(--om-primary); border-color: var(--om-primary); }
.om-numpad-btn:active { transform: scale(.94); }

/* ── Menu items (new order) ── */
.om-cat-btn { background: var(--om-surface); border: 1px solid var(--om-border);
              color: var(--om-muted); border-radius: 20px; padding: 5px 14px;
              font-size: 0.82rem; cursor: pointer; }
.om-cat-btn.active, .om-cat-btn:hover { background: var(--om-primary); border-color: var(--om-primary); color: #fff; }
.om-menu-item  { background: var(--om-surface); border: 1px solid var(--om-border);
                 border-radius: 10px; padding: 10px 12px; cursor: pointer;
                 transition: all .12s; height: 100%; }
.om-menu-item:hover { border-color: var(--om-primary); background: #252840; transform: translateY(-2px); }
.om-menu-name  { font-weight: 600; font-size: 0.88rem; }
.om-menu-price { color: var(--om-ready); font-weight: 700; font-size: 0.9rem; }
.om-basket-row { display: flex; align-items: center; justify-content: space-between;
                 padding: 6px 0; border-bottom: 1px solid var(--om-border); }
.om-qty-ctrl   { display: flex; align-items: center; gap: 6px; }
.om-qty-btn    { background: var(--om-surface); border: 1px solid var(--om-border);
                 color: var(--om-text); border-radius: 6px; width: 26px; height: 26px;
                 cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ── Menu management ── */
.om-menu-mgmt-card { transition: opacity .2s; }
.om-unavailable    { opacity: .45; }
.om-card-panel     { background: var(--om-surface); border: 1px solid var(--om-border); border-radius: 12px; }
.om-card-panel .card-header { background: rgba(255,255,255,.04);
                               border-bottom: 1px solid var(--om-border); color: var(--om-text); }

/* ── Bootstrap dark overrides ── */
.table { color: var(--om-text); }
.table-hover tbody tr:hover { background: rgba(108,99,255,.08); }
.table thead { color: var(--om-muted); }
.form-control, .form-select { background: #252840; border: 1px solid var(--om-border); color: var(--om-text); }
.form-control:focus, .form-select:focus { background: #252840; border-color: var(--om-primary);
                                          color: var(--om-text); box-shadow: 0 0 0 3px rgba(108,99,255,.2); }
.form-control::placeholder { color: var(--om-muted); }
.card { background: var(--om-surface); border: 1px solid var(--om-border); color: var(--om-text); }
.card-header { background: rgba(255,255,255,.04); border-bottom: 1px solid var(--om-border); }
.card-footer { background: rgba(255,255,255,.03); border-top: 1px solid var(--om-border); }
.modal-content { background: var(--om-surface); color: var(--om-text); border: 1px solid var(--om-border); }
.modal-header  { border-bottom: 1px solid var(--om-border); }
.progress      { background: rgba(255,255,255,.08); }
.alert-success { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.3); color: #6ee7b7; }
.alert-danger  { background: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.3);  color: #fca5a5; }