/* ==============================================
   NEXCOD POS — Design System (v3)
   Modern SaaS palette · Inter + Manrope
   ============================================== */

:root {
  /* ---- Brand ---- */
  /* Blue, not indigo.
     #1d4ed8 is the indigo every AI product on the internet is built in, and the owner
     kept saying the software "looks like AI made it" without being able to point at the
     reason — this was most of it. The public site was already on #1d4ed8, so the app was
     also a different colour from its own website. One blue now, and it is the ordinary,
     trusted blue of business software rather than a launch-page purple. */
  --brand-50:  #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-400: #60a5fa;
  --brand-500: #3b82f6;
  --brand-600: #1d4ed8;
  --brand-700: #1e40af;
  --brand-800: #1e3a8a;
  --brand-900: #172554;

  /* kept so nothing breaks if a rule still names them — pointed at the same blue */
  --violet-500: #3b82f6;
  --violet-600: #1d4ed8;
  --violet-700: #1e40af;

  /* ---- Neutrals (Slate) ---- */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* ---- Semantic ---- */
  --success: #10b981;
  --success-bg: #d1fae5;
  --warning: #f59e0b;
  --warning-bg: #fef3c7;
  --danger: #e11d48;
  --danger-bg: #ffe4e6;
  --info: #3b82f6;
  --info-bg: #dbeafe;

  /* ---- Surfaces (light theme) ---- */
  --bg:           #fafafa;
  --bg-elevated:  #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f8fafc;
  --border:       #e5e7eb;
  --border-strong:#d1d5db;
  --text:         #0f172a;
  /* There is no "muted" text in this software any more.
     The owner's standing complaint — twice — is that grey is hard to read on a counter
     under tube light, and it was still grey. This is one step off the main text colour:
     enough to tell a caption from a heading, not enough to make anyone squint. 469 places
     read this token, so it is the one line that fixes all of them.
     Light theme only — the two dark themes below keep their lighter value, where a dark
     grey would disappear instead. */
  --text-muted:   #1e293b;
  --text-dim:     #64748b;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.10), 0 8px 10px -6px rgb(15 23 42 / 0.06);

  /* ---- Radii (kept subtle — lightly rounded, never pill-round) ---- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 5px;
  --r-2xl: 12px;

  /* ---- Type ---- */
  --ff-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --ff-display: 'Manrope', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---- Layout ---- */
  --sidebar-w: 260px;
  --topbar-h:  64px;
  --content-max: 1320px;

  /* ---- Aliases (used by admin.css / dashboard.css / public.css) ---- */
  --primary:   var(--brand-600);
  --bg-card:   var(--surface);
  --bg-subtle: var(--surface-2);
}

/* ==============================================
   Dark theme
   ============================================== */
[data-theme="dark"] {
  --bg:           #0a0a0f;
  --bg-elevated:  #111118;
  --surface:      #161620;
  --surface-2:    #1c1c28;
  --border:       #262635;
  --border-strong:#363645;
  --text:         #f1f5f9;
  --text-muted:   #94a3b8;
  --text-dim:     #64748b;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.55);
}

/* ==============================================
   Reset + base
   ============================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  /* Crisp text: subpixel rendering (Windows/ClearType) keeps letters sharp.
     'antialiased' + optimizeLegibility made text look thin and blurry. */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeSpeed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 22px; line-height: 1.25; }
h3 { font-size: 18px; line-height: 1.3; }
h4 { font-size: 16px; line-height: 1.4; }

p { margin: 0; color: var(--text-muted); }

a { color: var(--brand-600); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-700); }

/* Anchor buttons must never take the link color on hover/click/after-visit —
   the label becomes unreadable on colored backgrounds. */
a.btn-primary:hover, a.btn-primary:focus, a.btn-primary:active, a.btn-primary:visited,
a.btn-danger:hover,  a.btn-danger:focus,  a.btn-danger:active,  a.btn-danger:visited { color: #fff; }
a.btn-secondary:focus, a.btn-secondary:active, a.btn-secondary:visited { color: var(--text); }
a.btn-ghost:focus, a.btn-ghost:active, a.btn-ghost:visited { color: var(--text-muted); }
.btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

input, textarea, select, button { font-family: inherit; font-size: inherit; }

::selection { background: var(--brand-200); color: var(--brand-900); }

/* ==============================================
   Buttons
   ============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius:var(--r-md);
  border: 1px solid #111827;   /* thin black outline on every button */
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  user-select: none;
}

.btn:disabled, .btn.disabled {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.btn-primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 1px 2px rgb(79 70 229 / 0.20), inset 0 1px 0 rgb(255 255 255 / 0.15);
}
.btn-primary:hover { filter: brightness(.96); color: #fff; }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--brand-400); color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: #be123c; color: #fff; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #059669; color: #fff; }

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 13px 22px; font-size: 15px; }
.btn-icon { padding: 8px; width: 36px; height: 36px; }
.btn-block { width: 100%; }

/* ==============================================
   Forms
   ============================================== */
.form-group { margin-bottom: 16px; }

.label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.input, .textarea, .select {
  width: 100%;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius:var(--r-md);
  color: var(--text);
  font-size: 14px;
  transition: border .15s, box-shadow .15s;
  outline: none;
}

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgb(99 102 241 / 0.15);
}

.input::placeholder, .textarea::placeholder { color: var(--text-dim); }

.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}

.input-icon-wrap { position: relative; }
.input-icon-wrap .input { padding-left: 40px; }
.input-icon-wrap .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim);
}

.help-text { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.error-text { font-size: 12px; color: var(--danger); margin-top: 6px; }

/* ==============================================
   Cards
   ============================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.card-header h3 { font-size: 15px; font-weight: 700; }

.card-body { padding: 20px; }

/* ==============================================
   Badges
   ============================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius:3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  white-space: nowrap;
}

.badge-primary { background: var(--brand-100); color: var(--brand-700); }
.badge-success { background: var(--success-bg); color: #065f46; }
.badge-warning { background: var(--warning-bg); color: #92400e; }
.badge-danger  { background: var(--danger-bg); color: #9f1239; }
.badge-info    { background: var(--info-bg); color: #1e40af; }
.badge-muted   { background: var(--slate-100); color: var(--slate-600); }

/* ==============================================
   Tables
   ============================================== */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--surface-2); }

.table .text-right { text-align: right; }
.table .text-center { text-align: center; }

/* ==============================================
   Utilities
   ============================================== */
.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }

.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--brand-600); }
.text-mono { font-family: var(--ff-mono); }
.text-xs { font-size: 11px; } .text-sm { font-size: 12.5px; } .text-lg { font-size: 16px; }
.font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }

.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }

.w-full { width: 100%; }
.hidden { display: none !important; }
.cursor-pointer { cursor: pointer; }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

.skeleton {
  background: var(--surface-2);
  background-size: 200% 100%;
  animation: skeleton 1.4s linear infinite;
  border-radius:var(--r-sm);
}
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ==============================================
   Toast
   ============================================== */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 400px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-in .25s ease-out;
}
.toast.success { border-left: 4px solid var(--success); }
.toast.error   { border-left: 4px solid var(--danger); }
.toast.info    { border-left: 4px solid var(--info); }
.toast.warning { border-left: 4px solid var(--warning); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ==============================================
   Modal
   ============================================== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgb(15 23 42 / 0.55);
  
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.is-open { display: flex; animation: fade-in .15s; }
.modal {
  background: var(--surface);
  border-radius:var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-in .25s ease-out;
}
.modal.wide { max-width: 760px; }
.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h3 { font-size: 16px; }
.modal-body { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ==============================================
   Empty state
   ============================================== */
.empty-state {
  text-align: center;
  padding: 48px 20px;
}
.empty-state .icon {
  width: 56px; height: 56px;
  border-radius:50%;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.empty-state h4 { margin-bottom: 6px; }
.empty-state p { font-size: 13px; max-width: 320px; margin: 0 auto; }

/* Brand logo image (drop /assets/logo.png to replace the "N" badge everywhere) */
/* Brand logo image (drop /assets/logo.png to replace the "N" badge everywhere).
   When a real logo is present, remove the indigo gradient so the logo shows clean,
   and use 'contain' so the whole logo is visible (not cropped). */
.brand-icon img, .sidebar-brand-icon img { width: 100%; height: 100%; object-fit: contain; border-radius:inherit; display: block; }
.brand-icon:has(img),
.sidebar-brand-icon:has(img),
.dash-sidebar .brand-icon:has(img) {
  background: transparent !important;
  box-shadow: none !important;
}
/* ============================================================
   DARK MODE  (toggled via <html data-theme="dark">)
   ============================================================ */
[data-theme="dark"] {
  --bg:            #0b1220;
  --bg-elevated:   #131c2e;
  --surface:       #131c2e;
  --surface-2:     #0f1828;
  --bg-subtle:     #0f1828;
  --border:        #243049;
  --border-strong: #33415c;
  --text:          #e8edf5;
  --text-muted:    #9fb0c7;
  --text-dim:      #6b7d96;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 10px 20px -3px rgb(0 0 0 / 0.55);
}
[data-theme="dark"] body,
[data-theme="dark"] body.dash-body { background: var(--bg); color: var(--text); }

/* Shell pieces that were hard-coded white */
[data-theme="dark"] .dash-sidebar,
[data-theme="dark"] .dash-topbar,
[data-theme="dark"] .dash-table-wrap,
[data-theme="dark"] .notif-panel,
[data-theme="dark"] .dash-card,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .panel { background: var(--surface) !important; border-color: var(--border); color: var(--text); }

/* Tables */
[data-theme="dark"] .dash-table thead th { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .dash-table tbody td { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .dash-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* Form fields */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"] { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
[data-theme="dark"] ::placeholder { color: var(--text-dim); }

/* Sidebar links + topbar buttons */
[data-theme="dark"] .dash-link { color: var(--text-muted); }
[data-theme="dark"] .dash-link:hover { background: rgba(255,255,255,.05); color: var(--text); }
[data-theme="dark"] .dash-topbar h1 { color: var(--text); }
[data-theme="dark"] .fs-btn, [data-theme="dark"] .notif-bell, [data-theme="dark"] .sidebar-toggle { color: var(--text-muted); }
[data-theme="dark"] .fs-btn:hover, [data-theme="dark"] .notif-bell:hover, [data-theme="dark"] .sidebar-toggle:hover { background: rgba(255,255,255,.06); color: var(--text); }

/* Notification items + quicknav */
[data-theme="dark"] .notif-item { border-color: var(--border); }
[data-theme="dark"] .notif-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .qn-item { color: var(--text-muted); }
[data-theme="dark"] .qn-item:hover, [data-theme="dark"] .qn-item.active { background: rgba(255,255,255,.06); color: var(--text); }

/* Generic white backgrounds inside the dashboard content */
[data-theme="dark"] .dash-content [style*="background:#fff"],
[data-theme="dark"] .dash-content [style*="background: #fff"],
[data-theme="dark"] .dash-content [style*="background:#ffffff"] { background: var(--surface) !important; }
[data-theme="dark"] .dash-table-wrap { box-shadow: none; }