/* ─── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:            #EEF2F7;
  --surface:       #FFFFFF;
  --surface-alt:   #F5F8FC;
  --border:        #DDE3EC;
  --primary:       #4B5563;
  --primary-hover: #374151;
  --accent:        #C94B00;
  --text:          #18243A;
  --text-muted:    #637389;
  --shadow:        0 4px 32px rgba(0, 0, 0, .10);
  --radius:        .875rem;
  --font:          'Inter', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --bg:          #0D1520;
  --surface:     #172032;
  --surface-alt: #1E2D45;
  --border:      #2A3A52;
  --text:        #E2EAF4;
  --text-muted:  #8BA0BC;
  --shadow:      0 4px 32px rgba(0, 0, 0, .45);
}

/* ─── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background-color .25s, color .25s;
}

/* ─── Login page centring ────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ─── Card ───────────────────────────────────────────────────────────── */
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  transition: background .25s, border-color .25s;
}

/* Brand cap */
.card-brand {
  background: var(--primary);
  padding: 2rem 2rem 1.75rem;
  text-align: center;
}

.card-brand img {
  width: 96px;
  height: auto;
  display: block;
  margin: 0 auto .75rem;
  background: #fff;
  border-radius: .5rem;
  padding: 6px 8px;
}

.card-brand-title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
}

.card-brand-sub {
  color: rgba(255, 255, 255, .55);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-top: .3rem;
}

/* Card body */
.card-form {
  padding: 1.75rem 2rem 2rem;
}

.card-foot {
  padding: .875rem 2rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: .78rem;
  color: var(--text-muted);
  background: var(--surface-alt);
  transition: background .25s, border-color .25s;
}

/* ─── Forms ──────────────────────────────────────────────────────────── */
.form-label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .375rem;
}

.form-control {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: .5rem;
  padding: .625rem .875rem;
  font-size: .9375rem;
  font-family: var(--font);
  transition: border-color .15s, box-shadow .15s, background .25s;
}

.form-control:focus {
  background: var(--surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(75, 85, 99, .18);
  color: var(--text);
  outline: none;
}

.form-control::placeholder { color: var(--text-muted); opacity: .6; }

[data-theme="dark"] .form-control { background: var(--surface-alt); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .form-control:focus { background: #243350; border-color: #4A7FBF; box-shadow: 0 0 0 3px rgba(74,127,191,.2); }

.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

/* ─── Buttons ────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .625rem 1.25rem;
  border-radius: .5rem;
  font-family: var(--font);
  transition: background .15s, box-shadow .15s;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 2px 10px rgba(75, 85, 99, .4);
}

.btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: 500;
  border-radius: .5rem;
  font-family: var(--font);
  background: transparent;
}

.btn-outline-secondary:hover { background: var(--surface-alt); color: var(--text); border-color: var(--border); }

.btn-link { color: var(--text-muted); font-size: .875rem; }
.btn-link:hover { color: var(--primary); }

/* ─── Alerts ─────────────────────────────────────────────────────────── */
.alert { border-radius: .5rem; font-size: .9rem; }

.alert-danger  { background: #FEF2F0; border-color: #F5C2BB; color: #8B1A0E; }
.alert-success { background: #F0FBF4; border-color: #B8E8C8; color: #16643A; }
.alert-warning { background: #FFFBF0; border-color: #FAE0A0; color: #7A5900; }

[data-theme="dark"] .alert-danger  { background: #2A1215; border-color: #5C2020; color: #F4A8A0; }
[data-theme="dark"] .alert-success { background: #0F2A1A; border-color: #1A5030; color: #80DBA0; }
[data-theme="dark"] .alert-warning { background: #221A08; border-color: #503A10; color: #F0C060; }

/* ─── Dark mode toggle ───────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background .25s, border-color .25s, color .15s;
  font-size: 1rem;
  padding: 0;
}

.theme-toggle:hover { color: var(--primary); }

/* Inline variant for the dashboard navbar */
.theme-toggle-nav {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .85);
  border-radius: 50%;
  width: 2.125rem;
  height: 2.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  padding: 0;
  transition: background .2s, color .15s;
}

.theme-toggle-nav:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* ─── Dashboard nav ──────────────────────────────────────────────────── */
.dashboard-header { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.dashboard-header .navbar-brand { color: #fff; font-weight: 700; }
.dashboard-header .text-white-50 { color: rgba(255,255,255,.55) !important; }

/* ─── Dashboard cards ────────────────────────────────────────────────── */
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
  text-align: center;
  transition: background .25s, border-color .25s, transform .15s, box-shadow .15s;
  height: 100%;
}

.dash-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.14); }

.dash-card-link { text-decoration: none; display: block; height: 100%; }
.dash-card-icon { font-size: 2.5rem; color: var(--primary); display: block; margin-bottom: 1rem; }
.dash-card-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.dash-card-text { font-size: .875rem; color: var(--text-muted); margin: 0; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .card-form  { padding: 1.25rem 1.25rem 1.5rem; }
  .card-brand { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}