/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0f0f1a;
  --bg2:       #1a1a2e;
  --bg3:       #252540;
  --border:    #2e2e4a;
  --text:      #e8e8f0;
  --text-muted:#8888aa;
  --primary:   #6c63ff;
  --primary-h: #5a52e0;
  --success:   #22c55e;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 4px 24px rgba(0,0,0,.4);
}

html, body { height: 100%; background: var(--bg); color: var(--text);
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
             font-size: 16px; line-height: 1.5; }

.app-shell { min-height: 100vh; max-width: 480px; margin: 0 auto; padding-bottom: 2rem; }

/* ── Loading splash ───────────────────────────────── */
.loading { text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: .9rem; }
.loading-progress { display: block; width: 3rem; height: 3rem; margin: 2rem auto; }
.loading-progress circle { fill: none; stroke: var(--primary); stroke-width: 0.15em;
  transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke-dasharray: 100%; stroke-dashoffset: 100%;
  animation: load 3s ease-in-out infinite; }
@keyframes load { to { stroke-dashoffset: 0%; } }

/* ── Typography helpers ───────────────────────────── */
.subtitle  { font-size: .8rem; color: var(--text-muted); display: block; }
.mt-sm     { margin-top: .5rem; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); line-height: 1.8; }

/* ── Buttons ──────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
       padding: .65rem 1.25rem; border-radius: var(--radius-sm); border: none;
       font-size: .9rem; font-weight: 600; cursor: pointer; transition: .15s; text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary  { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-h); }
.btn-secondary{ background: var(--bg3); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--border); }
.btn-danger   { background: var(--danger); color: #fff; }
.btn-ghost    { background: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); }
.btn-full     { width: 100%; display: flex; }

/* ── Forms ────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.form-group label { font-size: .8rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm);
         padding: .7rem 1rem; color: var(--text); font-size: .95rem; width: 100%;
         transition: border-color .15s; }
.input:focus { outline: none; border-color: var(--primary); }
.input-sm { padding: .4rem .75rem; font-size: .85rem; }
.alert-error { background: rgba(239,68,68,.15); border: 1px solid var(--danger); border-radius: var(--radius-sm);
               padding: .6rem 1rem; color: #fca5a5; font-size: .85rem; margin-bottom: 1rem; }

/* ── Page header ──────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between;
               padding: 1rem 1rem .75rem; position: sticky; top: 0; z-index: 10;
               background: var(--bg2); border-bottom: 1px solid var(--border); }
.page-header h2 { font-size: 1.1rem; font-weight: 700; }
.header-center { text-align: center; }
.icon-btn { font-size: 1.2rem; padding: .4rem .6rem; }

/* ── Login ────────────────────────────────────────── */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center;
                padding: 1.5rem; background: var(--bg); }
.login-card   { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
                padding: 2rem 1.75rem; width: 100%; max-width: 380px; box-shadow: var(--shadow); }
.login-logo   { text-align: center; margin-bottom: 2rem; }
.logo-icon    { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.login-logo h1{ font-size: 1.8rem; font-weight: 800; color: var(--text); }
.login-logo h1 span { color: var(--primary); }

/* ── Tables grid ──────────────────────────────────── */
.tables-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: 1rem; }

.table-card { background: var(--bg2); border: 2px solid var(--border); border-radius: var(--radius);
              padding: 1rem; cursor: pointer; transition: .2s; text-align: center; }
.table-card:active { transform: scale(.97); }
.table-number      { font-size: 2rem; font-weight: 800; line-height: 1; }
.table-name        { font-size: .75rem; color: var(--text-muted); margin: .15rem 0; }
.table-status-badge{ font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 99px;
                     display: inline-block; margin: .4rem 0; }
.table-customer    { font-size: .8rem; color: var(--text); margin-top: .25rem; }
.table-capacity    { font-size: .7rem; color: var(--text-muted); }

.table-free .table-status-badge     { background: rgba(34,197,94,.15); color: var(--success); }
.table-free .table-number           { color: var(--success); }
.table-open .table-status-badge     { background: rgba(245,158,11,.15); color: var(--warning); }
.table-open .table-number           { color: var(--warning); }
.table-open                         { border-color: rgba(245,158,11,.3); }
.table-waiting .table-status-badge  { background: rgba(239,68,68,.15); color: var(--danger); }
.table-waiting .table-number        { color: var(--danger); }

/* ── Modal ────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
                 align-items: flex-end; justify-content: center; z-index: 100; padding: 1rem; }
.modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
         padding: 1.5rem 1.25rem; width: 100%; max-width: 480px; }
.modal h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; }
.modal-info { margin-bottom: 1rem; font-size: .95rem; }

/* ── QR Code ──────────────────────────────────────── */
.qr-section    { padding: 1.25rem 1rem; text-align: center; }
.qr-label      { font-size: .9rem; color: var(--text-muted); margin-bottom: .75rem; }
.qr-wrapper    { display: inline-block; background: #fff; padding: .75rem; border-radius: var(--radius-sm); }
.qr-image      { display: block; width: 220px; height: 220px; }
.qr-token      { font-size: .7rem; color: var(--text-muted); margin-top: .75rem; word-break: break-all; }

/* ── Session actions ──────────────────────────────── */
.session-actions { display: flex; gap: .75rem; padding: .75rem 1rem; }
.session-actions .btn { flex: 1; }

/* ── Comanda ──────────────────────────────────────── */
.comanda        { padding: 0 1rem 1rem; }
.comanda-header { display: flex; justify-content: space-between; align-items: center;
                  padding: .75rem 0; font-weight: 700; border-bottom: 1px solid var(--border); }
.total          { font-size: .85rem; }
.total strong   { color: var(--primary); font-size: 1rem; }
.order-group    { margin-top: 1rem; }
.order-group-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                     padding: .3rem .6rem; border-radius: 99px; display: inline-block; margin-bottom: .5rem; }
.status-pending   .order-group-label, .order-group-label.status-pending   { background: rgba(245,158,11,.15); color: var(--warning); }
.status-preparing .order-group-label, .order-group-label.status-preparing { background: rgba(239,68,68,.15);  color: var(--danger); }
.status-ready     .order-group-label, .order-group-label.status-ready     { background: rgba(34,197,94,.15);  color: var(--success); }
.status-delivered .order-group-label, .order-group-label.status-delivered { background: rgba(100,100,120,.15);color: var(--text-muted); }

.order-item { display: flex; justify-content: space-between; align-items: flex-start;
              padding: .65rem .5rem; border-bottom: 1px solid var(--border); gap: .5rem; }
.order-item-info { flex: 1; }
.order-item-name  { display: block; font-weight: 600; font-size: .9rem; }
.order-item-notes { display: block; font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.order-item-right { text-align: right; flex-shrink: 0; }
.order-item-qty   { display: block; font-size: .75rem; color: var(--text-muted); }
.order-item-price { display: block; font-weight: 700; font-size: .9rem; color: var(--primary); }

/* ── Menu ─────────────────────────────────────────── */
.cart-badge    { background: var(--primary); color: #fff; border-radius: 99px;
                 padding: .3rem .7rem; font-size: .85rem; font-weight: 700; cursor: pointer; }
.menu-category { padding: .5rem 1rem 0; }
.menu-category-title { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
                        letter-spacing: .08em; padding: .5rem 0; border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.menu-item     { display: flex; justify-content: space-between; align-items: center;
                 padding: .85rem .25rem; border-bottom: 1px solid var(--border); gap: .5rem; }
.menu-item.in-cart { background: rgba(108,99,255,.05); border-radius: var(--radius-sm); }
.menu-item-info{ flex: 1; }
.menu-item-name{ display: block; font-weight: 600; }
.menu-item-desc{ display: block; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.menu-item-time{ display: block; font-size: .72rem; color: var(--text-muted); margin-top: .1rem; }
.menu-item-right { text-align: right; flex-shrink: 0; }
.menu-item-price { display: block; font-weight: 700; color: var(--primary); margin-bottom: .4rem; }
.qty-controls  { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.qty-btn       { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--border);
                 background: var(--bg3); color: var(--text); font-size: 1.1rem; cursor: pointer;
                 display: flex; align-items: center; justify-content: center; transition: .15s; }
.qty-btn.add   { border-color: var(--primary); color: var(--primary); }
.qty-btn:active{ transform: scale(.9); }
.qty-val       { min-width: 1.2rem; text-align: center; font-weight: 700; }
.cart-item     { display: flex; justify-content: space-between; padding: .4rem 0;
                 font-size: .9rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.cart-total    { text-align: right; font-weight: 700; padding: .5rem 0 1rem;
                 color: var(--primary); font-size: 1rem; }

/* ── Kitchen Kanban ───────────────────────────────── */
.kitchen-board { display: flex; gap: .75rem; padding: 1rem; overflow-x: auto; min-height: calc(100vh - 60px); }
.kitchen-col   { flex: 0 0 260px; display: flex; flex-direction: column; gap: .5rem; }
.kitchen-col-header { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                      padding: .5rem .75rem; border-radius: var(--radius-sm); display: flex;
                      justify-content: space-between; align-items: center; }
.kitchen-count { background: rgba(0,0,0,.25); border-radius: 99px; padding: .1rem .5rem; }
.kitchen-card  { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
                 padding: .85rem 1rem; }
.kitchen-card-table { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                      color: var(--text-muted); margin-bottom: .25rem; }
.kitchen-card-name  { font-size: 1rem; font-weight: 700; }
.kitchen-card-qty   { font-size: .85rem; color: var(--text-muted); }
.kitchen-card-notes { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; font-style: italic; }
.kitchen-card-time  { font-size: .7rem; color: var(--text-muted); margin-top: .35rem; }
.kitchen-card-actions { display: flex; gap: .4rem; margin-top: .6rem; }

.k-pending   .kitchen-col-header, .k-pending   { border-left: 3px solid var(--warning); }
.k-pending   .kitchen-col-header               { background: rgba(245,158,11,.12); color: var(--warning); }
.k-preparing .kitchen-col-header, .k-preparing { border-left: 3px solid var(--danger); }
.k-preparing .kitchen-col-header               { background: rgba(239,68,68,.12); color: var(--danger); }
.k-ready     .kitchen-col-header, .k-ready     { border-left: 3px solid var(--success); }
.k-ready     .kitchen-col-header               { background: rgba(34,197,94,.12); color: var(--success); }

.btn-sm      { padding: .35rem .75rem; font-size: .78rem; }
.btn-warning { background: rgba(245,158,11,.2); color: var(--warning); border: 1px solid rgba(245,158,11,.4); }
.btn-success { background: rgba(34,197,94,.2); color: var(--success); border: 1px solid rgba(34,197,94,.4); }

/* ── Dashboard ────────────────────────────────────── */
.dash-grid    { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; padding: 1rem; }
.dash-kpi     { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
                padding: 1rem; text-align: center; }
.dash-kpi-val { font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1; }
.dash-kpi-lbl { font-size: .7rem; color: var(--text-muted); margin-top: .25rem; text-transform: uppercase;
                letter-spacing: .05em; }
.dash-section { padding: 0 1rem 1rem; }
.dash-section h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
                   color: var(--text-muted); margin-bottom: .5rem; padding-top: .5rem;
                   border-top: 1px solid var(--border); }
.alert-item   { display: flex; align-items: center; gap: .5rem; padding: .5rem 0;
                border-bottom: 1px solid var(--border); font-size: .85rem; }
.alert-item .alert-badge { background: rgba(239,68,68,.15); color: var(--danger); padding: .15rem .5rem;
                           border-radius: 99px; font-size: .7rem; font-weight: 700; flex-shrink: 0; }

/* ── Blazor error UI ──────────────────────────────── */
#blazor-error-ui { background: var(--danger); color: #fff; padding: .75rem 1rem;
                   position: fixed; bottom: 0; width: 100%; display: none; font-size: .85rem; }
#blazor-error-ui .reload { color: #fff; font-weight: 700; margin-left: .5rem; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; }