:root {
  --bg-start: #252a34;
  --bg-mid: #15181f;
  --bg-end: #0f1115;
  --coffee-950: #0f1115;
  --coffee-900: #15181f;
  --coffee-800: #1c2028;
  --coffee-700: #252a34;
  --coffee-600: #2d3441;
  --coffee-500: #3a4352;
  --coffee-400: #566073;
  --coffee-200: #c7cdd8;
  --cream-50: #1b1f26;
  --accent: #f0841b;
  --accent-2: #ffa34d;
  --sage-500: #7aa69b;
  --ink: #f4f6fb;
  --muted: #9aa2ae;
  --card: #15181f;
  --border: #252b36;
}

/* Black-Orange (default) */
:root[data-theme="black-orange"] {
  --bg-start: #252a34;
  --bg-mid: #15181f;
  --bg-end: #0f1115;
  --coffee-950: #0f1115;
  --coffee-900: #15181f;
  --coffee-800: #1c2028;
  --coffee-700: #252a34;
  --coffee-600: #2d3441;
  --coffee-500: #3a4352;
  --coffee-400: #566073;
  --coffee-200: #c7cdd8;
  --cream-50: #1b1f26;
  --accent: #f0841b;
  --accent-2: #ffa34d;
  --sage-500: #7aa69b;
  --ink: #f4f6fb;
  --muted: #9aa2ae;
  --card: #15181f;
  --border: #252b36;
}

/* Light Cafe */
:root[data-theme="light"] {
  --bg-start: #fff8f0;
  --bg-mid: #f5efe8;
  --bg-end: #f0e7de;
  --coffee-950: #2b2b2b;
  --coffee-900: #2b2b2b;
  --coffee-800: #3a3a3a;
  --coffee-700: #4a4a4a;
  --coffee-600: #5a5a5a;
  --coffee-500: #6a6a6a;
  --coffee-400: #7a7a7a;
  --coffee-200: #a7a7a7;
  --cream-50: #ffffff;
  --accent: #f0841b;
  --accent-2: #ffa34d;
  --sage-500: #4d7c74;
  --ink: #1f2937;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
}

/* Espresso Light */
:root[data-theme="espresso-light"] {
  --bg-start: #f7f1ea;
  --bg-mid: #ede3d9;
  --bg-end: #e3d6c9;
  --coffee-950: #3a2f28;
  --coffee-900: #4a3b32;
  --coffee-800: #5a473c;
  --coffee-700: #6b5446;
  --coffee-600: #7b6252;
  --coffee-500: #8a705e;
  --coffee-400: #9a7f6d;
  --coffee-200: #b9a494;
  --cream-50: #fffaf4;
  --accent: #d27a32;
  --accent-2: #e49a5f;
  --sage-500: #5f7f72;
  --ink: #2e2620;
  --muted: #6f5f54;
  --card: #fffaf4;
  --border: #e2d5c7;
}

body.theme-cafe,
body {
  background: radial-gradient(circle at 20% 0%, var(--bg-start) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
  color: var(--ink);
}

.page-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 14px;
  padding: 10px 14px;
  background: #15181f;
  border-radius: 14px;
  color: #f9fffe;
  box-shadow: 0 10px 24px rgba(5, 6, 8, 0.5);
  border: 1px solid #252b36;
}

.page-brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #2d3441;
  background: #1c2028;
}

.page-brand-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.content {
  padding: 16px;
}

h1, h2, h3 {
  color: var(--accent);
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

.subtitle {
  color: var(--accent);
  font-size: 16px;
}

label {
  color: var(--accent);
  font-size: 16px;
}

.section-title {
  color: var(--accent);
  font-weight: 700;
}

.pill, .badge {
  background: #1c212b;
  color: #f0a85a;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(5, 6, 8, 0.5);
}

.table-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  background: var(--card);
  box-shadow: 0 8px 18px rgba(5, 6, 8, 0.4);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
}

table th,
table td {
  padding: 10px 12px;
  border-bottom: 1px solid #252b36;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
}

table th {
  font-size: 16px;
}

th {
  background: #1c2028;
  color: var(--accent);
}

table td {
  color: var(--ink);
}

table thead th:first-child {
  border-top-left-radius: 12px;
}

table thead th:last-child {
  border-top-right-radius: 12px;
}

table tbody tr:nth-child(even) td {
  background: #1a1f27;
}

table tbody tr:hover td {
  background: #252b36;
}

table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

a {
  color: #f4f6fb;
}

a:hover {
  color: var(--accent);
}

button,
button.primary,
.checkout,
.row-btn {
  background: var(--accent);
  color: #fff;
}

button.secondary {
  background: var(--coffee-500);
}

.row-btn.danger {
  background: #9c3b33;
}

.positive,
.status-positive {
  color: var(--sage-500);
}

.badge.positive,
.pill.positive {
  background: #dbe7df;
  color: #2f4a3d;
}

.btn-positive {
  background: var(--sage-500);
  color: #fff;
}

input, select, textarea {
  border: 1px solid var(--border);
  background: #12151b;
  color: #f4f6fb;
}

select {
  color: var(--accent);
}

input::placeholder, textarea::placeholder {
  color: var(--muted);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 2px rgba(255, 159, 69, 0.2);
}

.sidebar {
  background: #0f1218;
  border-right: 1px solid var(--border);
}

.sidebar h2 {
  color: var(--coffee-900);
}

.sidebar a {
  color: var(--accent);
  background: #151a22;
}

.sidebar a.active,
.sidebar a:hover {
  background: #1f2530;
  color: var(--accent-2);
}

.menu-toggle {
  background: #151a22;
  color: #fff;
}

.low {
  color: #b00020;
}

.low-row,
tr.low td {
  background: #2a1414;
}

.status {
  color: #f0a85a;
}

@media (min-width: 900px) {
  .content {
    padding: 20px;
  }
}