:root {
  --charcoal-900: #14171a;
  --charcoal-800: #1c2024;
  --charcoal-700: #2d3238;
  --steel-500: #60686f;
  --steel-300: #9aa1a8;
  --steel-200: #c2c7cc;
  --blue-700: #023c8d;
  --blue-600: #0b4fa8;
  --blue-400: #5587c9;
  --off-white: #f4f5f6;
  --white: #ffffff;
  --green: #3fa66b;
  --amber: #d69a3e;
  --red: #c9584f;

  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius: 6px;
  --transition: 0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--charcoal-900);
  color: var(--steel-200);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--off-white);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: var(--font-body); }

/* ===== Auth pages (login / setup) ===== */
.centered-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(ellipse 900px 500px at 50% -10%, rgba(2,60,141,0.35), transparent 60%), var(--charcoal-900);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--charcoal-800);
  border: 1px solid rgba(96,104,111,0.25);
  border-radius: 10px;
  padding: 40px 32px;
  text-align: center;
}
.auth-logo { height: 64px; margin: 0 auto 16px; }
.auth-card h1 { font-size: 26px; margin-bottom: 24px; }

.user-select { display: flex; gap: 12px; }
.user-btn {
  flex: 1;
  padding: 22px 0;
  background: var(--charcoal-700);
  border: 1px solid rgba(96,104,111,0.35);
  border-radius: var(--radius);
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.user-btn:hover { border-color: var(--blue-400); background: #22262b; }

.pin-form.hidden, .user-select.hidden { display: none; }

.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 8px 0 28px; }
.pin-dots span {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--steel-500);
  transition: background var(--transition), border-color var(--transition);
}
.pin-dots span.filled { background: var(--blue-400); border-color: var(--blue-400); }

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pin-key {
  padding: 18px 0;
  background: var(--charcoal-700);
  border: 1px solid rgba(96,104,111,0.3);
  border-radius: var(--radius);
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 22px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.pin-key:hover { border-color: var(--blue-400); }
.pin-key.back, .pin-key.change { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--steel-300); }
.pin-key.change { grid-column: span 1; }

.notice { padding: 10px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; }
.notice.error { background: rgba(201,88,79,0.15); border: 1px solid var(--red); color: #f0a49d; }
.notice.success { background: rgba(63,166,107,0.15); border: 1px solid var(--green); color: #a3d9b8; }

.form-group { text-align: left; margin-bottom: 16px; }
.form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--steel-300);
  margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  background: var(--charcoal-700);
  border: 1px solid rgba(96,104,111,0.35);
  border-radius: var(--radius);
  padding: 11px 12px;
  color: var(--off-white);
  font-size: 15px;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--blue-400);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-primary {
  background: linear-gradient(135deg, var(--blue-400), var(--blue-700));
  color: var(--white);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-outline { background: transparent; border-color: var(--steel-500); color: var(--off-white); }
.btn-outline:hover { border-color: var(--blue-400); color: var(--blue-400); }

/* ===== Admin layout ===== */
.admin-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  background: var(--charcoal-800);
  border-right: 1px solid rgba(96,104,111,0.2);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  flex-shrink: 0;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 24px; }
.sidebar-brand img { height: 34px; }
.sidebar-brand span { font-family: var(--font-display); font-weight: 700; color: var(--off-white); text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; }

.sidebar-nav { display: flex; flex-direction: column; flex: 1; }
.sidebar-nav a {
  padding: 13px 20px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--steel-300);
  border-left: 3px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sidebar-nav a:hover { background: rgba(85,135,201,0.08); color: var(--off-white); }
.sidebar-nav a.active { color: var(--off-white); border-left-color: var(--blue-400); background: rgba(85,135,201,0.1); }

.sidebar-footer { padding: 16px 20px 0; border-top: 1px solid rgba(96,104,111,0.2); margin-top: 16px; font-size: 13px; color: var(--steel-300); }
.sidebar-footer strong { color: var(--off-white); }
.logout-link { display: block; margin-top: 8px; color: var(--blue-400); }
.logout-link:hover { color: var(--off-white); }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 32px;
  border-bottom: 1px solid rgba(96,104,111,0.2);
  background: var(--charcoal-900);
}
.topbar h1 { font-size: 22px; }
.sidebar-toggle { display: none; background: none; border: none; color: var(--off-white); font-size: 22px; cursor: pointer; }

.content { padding: 32px; flex: 1; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--charcoal-800);
  border: 1px solid rgba(96,104,111,0.25);
  border-radius: var(--radius);
  padding: 22px;
}
.stat-label { display: block; font-family: var(--font-display); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--steel-300); margin-bottom: 8px; }
.stat-value { display: block; font-family: var(--font-display); font-size: 38px; font-weight: 700; color: var(--off-white); margin-bottom: 10px; }
.stat-link { font-size: 13px; color: var(--blue-400); }
.stat-link:hover { color: var(--off-white); }

.placeholder-panel {
  background: var(--charcoal-800);
  border: 1px dashed rgba(96,104,111,0.35);
  border-radius: var(--radius);
  padding: 28px;
}
.placeholder-panel h2 { font-size: 18px; margin-bottom: 10px; }
.placeholder-panel p { color: var(--steel-300); font-size: 14.5px; }

@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: block; }
  .content { padding: 20px; }
  .topbar { padding: 16px 20px; }
}

/* ===== Data tables (used in stage 2+) ===== */
.data-table { width: 100%; border-collapse: collapse; background: var(--charcoal-800); border: 1px solid rgba(96,104,111,0.25); border-radius: var(--radius); overflow: hidden; }
.data-table th { text-align: left; font-family: var(--font-display); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--steel-300); padding: 12px 16px; background: var(--charcoal-700); }
.data-table td { padding: 12px 16px; border-top: 1px solid rgba(96,104,111,0.15); font-size: 14.5px; }
.data-table tr:hover td { background: rgba(85,135,201,0.05); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-family: var(--font-display); letter-spacing: 0.5px; text-transform: uppercase; }
.badge-draft { background: rgba(154,161,168,0.15); color: var(--steel-300); }
.badge-sent { background: rgba(85,135,201,0.15); color: var(--blue-400); }
.badge-paid, .badge-approved, .badge-complete { background: rgba(63,166,107,0.15); color: var(--green); }
.badge-overdue, .badge-declined { background: rgba(201,88,79,0.15); color: var(--red); }
.badge-partial { background: rgba(214,154,62,0.15); color: var(--amber); }