/* ═══════════════════════════════════════════════
   RestoPOS Serbia — Design System v2.5
   Full UI/UX Kit — Serbia & Eastern Europe
   © 2025 RestoPOS · Confidential
═══════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────── */
:root {
  /* Colors */
  --nav:      #0D1B2A;
  --bg:       #0F172A;
  --bg2:      #1E293B;
  --bg3:      #334155;
  --bg4:      #475569;
  --text:     #F1F5F9;
  --text2:    #94A3B8;
  --text3:    #64748B;
  --border:   #334155;
  --card:     #1E293B;

  /* Brand */
  --blue:     #1565C0;
  --lblue:    #3B82F6;
  --gold:     #F59E0B;
  --green:    #10B981;
  --red:      #EF4444;
  --purple:   #7C3AED;
  --orange:   #F97316;
  --teal:     #0D9488;
  --cyan:     #06B6D4;
  --pink:     #EC4899;

  /* Semantic */
  --success:  #10B981;
  --warning:  #F59E0B;
  --danger:   #EF4444;
  --info:     #3B82F6;

  /* Radius */
  --r-sm:     6px;
  --r:        10px;
  --r-lg:     14px;
  --r-xl:     20px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow:    0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── RESET ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--lblue); text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

/* ── LAYOUT ────────────────────────────────── */
.app-layout   { display: flex; height: 100vh; overflow: hidden; }
.sidebar      { width: 56px; background: var(--nav); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 2px; flex-shrink: 0; transition: width .2s; }
.sidebar.expanded { width: 200px; align-items: flex-start; padding: 8px; }
.main-area    { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar       { height: 48px; background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 16px; gap: 10px; flex-shrink: 0; }
.content-area { flex: 1; overflow-y: auto; padding: 16px; }
.status-bar   { height: 28px; background: var(--nav); display: flex; align-items: center; padding: 0 16px; gap: 16px; font-size: 11px; color: var(--text3); flex-shrink: 0; }
.tab-bar      { display: flex; gap: 2px; padding: 8px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
.pos-grid     { display: grid; grid-template-columns: 1fr 320px 200px; gap: 10px; height: 100%; }

/* ── GRID ──────────────────────────────────── */
.g2  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g3  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.g4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gap-sm { gap: 6px; } .gap-md { gap: 12px; } .gap-lg { gap: 20px; }

/* ── CARDS ─────────────────────────────────── */
.card         { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; }
.card-sm      { padding: 10px; }
.card-lg      { padding: 20px; }
.card-header  { font-size: 10px; color: var(--text2); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.card-hover   { transition: border-color .15s, box-shadow .15s; }
.card-hover:hover { border-color: var(--lblue); box-shadow: var(--shadow-sm); }

/* KPI Cards */
.kpi-card     { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.kpi-value    { font-size: 22px; font-weight: 700; margin: 3px 0 2px; }
.kpi-label    { font-size: 10px; color: var(--text2); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.kpi-change   { font-size: 11px; font-weight: 600; margin-top: 2px; }
.kpi-up       { color: var(--green); }
.kpi-dn       { color: var(--red); }

/* ── NAVIGATION ────────────────────────────── */
.nav-item     { width: 40px; height: 40px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 18px; transition: all .15s; position: relative; flex-shrink: 0; }
.nav-item:hover { background: var(--bg3); color: var(--text); }
.nav-item.active { background: var(--blue); color: #fff; }
.nav-badge    { position: absolute; top: 3px; right: 3px; min-width: 14px; height: 14px; background: var(--red); border-radius: 7px; font-size: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; padding: 0 2px; }
.nav-label    { display: none; font-size: 12px; margin-left: 10px; white-space: nowrap; }
.sidebar.expanded .nav-item { width: 100%; padding: 0 10px; justify-content: flex-start; }
.sidebar.expanded .nav-label { display: block; }

/* ── TABS ──────────────────────────────────── */
.tab          { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; border: none; background: transparent; color: var(--text2); white-space: nowrap; transition: all .15s; }
.tab:hover    { background: var(--bg3); color: var(--text); }
.tab.active   { background: var(--blue); color: #fff; }

/* ── BADGES ────────────────────────────────── */
.badge        { padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.badge-green  { background: #064E3B; color: #34D399; }
.badge-blue   { background: #1E3A5F; color: #60A5FA; }
.badge-red    { background: #450A0A; color: #F87171; }
.badge-gold   { background: #3B1F00; color: #FCD34D; }
.badge-purple { background: #2E1065; color: #C084FC; }
.badge-cyan   { background: #0c3341; color: #67E8F9; }
.badge-gray   { background: var(--bg3); color: var(--text2); }

/* ── BUTTONS ───────────────────────────────── */
.btn          { background: var(--blue); color: #fff; border: none; border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.btn:hover    { background: var(--lblue); }
.btn:active   { transform: scale(.98); }
.btn-sm       { padding: 5px 10px; font-size: 11px; }
.btn-lg       { padding: 11px 20px; font-size: 14px; }
.btn-ghost    { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.btn-ghost:hover { background: var(--bg4); }
.btn-danger   { background: #450A0A; color: var(--red); border: 1px solid #450A0A; border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.btn-success  { background: #064E3B; color: var(--green); border: none; border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.btn-full     { width: 100%; justify-content: center; }
.btn-icon     { padding: 8px; aspect-ratio: 1; }

/* Payment-specific */
.pay-cash     { background: #064E3B; color: #34D399; border: none; border-radius: var(--r-sm); padding: 12px; font-weight: 700; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.pay-card     { background: #1E3A5F; color: #60A5FA; border: none; border-radius: var(--r-sm); padding: 12px; font-weight: 700; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.pay-qr       { background: #2E1065; color: #C084FC; border: none; border-radius: var(--r-sm); padding: 12px; font-weight: 700; font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }

/* ── FORMS ─────────────────────────────────── */
.form-group   { margin-bottom: 12px; }
.form-label   { font-size: 12px; color: var(--text2); font-weight: 600; margin-bottom: 5px; display: block; }
.form-input   { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; transition: border-color .15s; }
.form-input:focus { border-color: var(--lblue); }
.form-select  { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; cursor: pointer; appearance: none; }
.form-textarea { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; color: var(--text); font-size: 13px; outline: none; resize: vertical; min-height: 80px; }
.form-row-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* Toggle */
.toggle       { width: 40px; height: 22px; border-radius: 11px; cursor: pointer; position: relative; transition: background .2s; display: inline-block; flex-shrink: 0; }
.toggle.on    { background: var(--green); border: 1px solid var(--green); }
.toggle.off   { background: var(--bg3); border: 1px solid var(--border); }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.toggle.on::after { left: 20px; }

/* ── TABLE ─────────────────────────────────── */
.data-table   { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; font-size: 11px; color: var(--text2); font-weight: 700; border-bottom: 1px solid var(--border); text-transform: uppercase; letter-spacing: .3px; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) { background: rgba(255,255,255,.02); }
.data-table tr:hover { background: rgba(255,255,255,.04); }

/* ── LIST ITEMS ────────────────────────────── */
.list-row     { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.list-row:last-child { border-bottom: none; }

/* ── PROGRESS ──────────────────────────────── */
.progress     { height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--blue); transition: width .4s; }
.progress-lg  { height: 10px; border-radius: 5px; }
.progress-green .progress-fill { background: var(--green); }
.progress-red .progress-fill   { background: var(--red); }
.progress-gold .progress-fill  { background: var(--gold); }

/* ── DIVIDER ───────────────────────────────── */
.divider      { height: 1px; background: var(--border); margin: 10px 0; }
.divider-v    { width: 1px; background: var(--border); align-self: stretch; }

/* ── AVATAR ────────────────────────────────── */
.avatar       { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.avatar-sm    { width: 28px; height: 28px; font-size: 10px; }
.avatar-lg    { width: 56px; height: 56px; font-size: 18px; }

/* ── MISC ──────────────────────────────────── */
.ml-auto      { margin-left: auto; }
.text-muted   { color: var(--text2); }
.text-sm      { font-size: 12px; }
.text-xs      { font-size: 10px; }
.font-mono    { font-family: var(--font-mono); }
.font-bold    { font-weight: 700; }
.text-green   { color: var(--green); }
.text-red     { color: var(--red); }
.text-gold    { color: var(--gold); }
.text-blue    { color: var(--lblue); }
.status-dot   { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 4px; }

/* ── SCREEN-SPECIFIC ───────────────────────── */
/* Table map */
.table-card   { border-radius: var(--r-sm); padding: 10px 8px; cursor: pointer; border: 2px solid transparent; text-align: center; transition: all .15s; }
.table-card:hover { transform: scale(1.03); }
.t-free       { background: #064E3B; border-color: #10B981; color: #34D399; }
.t-occupied   { background: #450A0A; border-color: #EF4444; color: #F87171; }
.t-reserved   { background: #3B1F00; border-color: #F59E0B; color: #FCD34D; }

/* Menu item card */
.menu-item    { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; cursor: pointer; transition: all .15s; }
.menu-item:hover { border-color: var(--lblue); background: var(--bg2); }
.menu-item:active { transform: scale(.97); }

/* Order item row */
.order-item   { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r-sm); border-bottom: 1px solid var(--border); font-size: 13px; }
.order-item:hover { background: var(--bg3); }

/* KDS Ticket */
.kds-ticket   { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.kds-urgent   { border-color: var(--red); }
.kds-ready    { border-color: var(--green); }
.kds-new      { border-color: var(--lblue); }

/* Receipt */
.receipt-paper { background: #fff; color: #111; border-radius: var(--r-sm); padding: 16px; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.7; max-width: 320px; }
.receipt-paper .r-center { text-align: center; }
.receipt-paper .r-bold   { font-weight: 700; }
.receipt-paper .r-dashed { border-top: 1px dashed #aaa; margin: 8px 0; }
.receipt-paper .r-row    { display: flex; justify-content: space-between; }

/* API */
.method-badge { padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; font-family: monospace; }
.method-get   { background: #064E3B; color: #34D399; }
.method-post  { background: #1E3A5F; color: #60A5FA; }
.method-put   { background: #3B1F00; color: #FCD34D; }
.method-del   { background: #450A0A; color: #F87171; }

/* Loyalty card gradient */
.loyalty-card { background: linear-gradient(135deg, var(--blue), var(--purple)); border-radius: var(--r-lg); padding: 16px; color: #fff; position: relative; overflow: hidden; }

/* ── ANIMATIONS ────────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes slideIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.animate-pulse { animation: pulse 2s infinite; }
.animate-spin  { animation: spin 1s linear infinite; }
.animate-in    { animation: slideIn .2s ease; }

/* ── SCROLLBAR ─────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }

/* ── PRINT ─────────────────────────────────── */
@media print {
  .sidebar, .topbar, .status-bar, .tab-bar, .btn, .btn-ghost { display: none !important; }
  .content-area { padding: 0; }
  body { background: white; color: black; }
}

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width: 768px) {
  .g4  { grid-template-columns: 1fr 1fr; }
  .g3  { grid-template-columns: 1fr 1fr; }
  .pos-grid { grid-template-columns: 1fr; }
  .sidebar { width: 44px; }
}