/* ============================================================
   COOL MIST — app theme
   Light, airy, professional. Blue-gray surfaces, sky-blue accent,
   clean Inter typography. Layered on top of Bootstrap 5.3 (loaded
   first in header.php): we mostly re-tint Bootstrap's own CSS
   variables, so existing markup keeps working.
   ============================================================ */
:root {
  /* — Surfaces — */
  --bg:        #F4F7FB;  /* page background */
  --card:      #FFFFFF;  /* raised cards / panels */
  --sunk:      #EBF0F6;  /* insets, table stripes, quiet fills */
  --line:      #E3E9F2;  /* hairline borders */

  /* — Ink — */
  --ink:       #172033;  /* primary text */
  --ink-soft:  #4B5567;  /* secondary text */
  --ink-faint: #8593A8;  /* captions, meta, placeholders */

  /* — Accent (sky blue) — */
  --accent:      #0EA5E9;
  --accent-deep: #0284C7;  /* hover / pressed */
  --accent-text: #0369A1;  /* accent text on light wash */
  --accent-wash: #E0F2FE;  /* tints, badges, highlights */

  /* — Status — */
  --success:      #16A34A;  --success-deep: #15803D;  --success-wash: #DCFCE7;
  --danger:       #DC2626;  --danger-deep:  #B91C1C;  --danger-wash:  #FEE2E2;
  --warn:         #D97706;

  /* — Type — */
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* — Radius — */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-pill: 999px;

  /* — Shadow (cool, low) — */
  --shadow-sm: 0 1px 3px rgba(23,32,51,.05);
  --shadow-md: 0 4px 12px rgba(23,32,51,.07);
  --shadow-lg: 0 12px 28px rgba(23,32,51,.10);

  /* — Map onto Bootstrap's global tokens — */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--line);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--ink-soft);
  --bs-link-color: var(--accent-deep);
  --bs-link-hover-color: var(--accent-deep);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings ----------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}

/* Muted / secondary text --------------------------------------------------- */
.text-muted     { color: var(--ink-faint) !important; }
.text-secondary { color: var(--ink-faint) !important; }
.form-text      { color: var(--ink-faint); }

/* Top navigation (custom, see header.php) ---------------------------------- */
.app-nav {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: .85rem 0;
}
.app-nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.app-brand {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.app-brand:hover { color: var(--accent-deep); }
.app-nav-links { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.app-nav-links a:not(.btn) {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
}
.app-nav-links a:not(.btn):hover { color: var(--accent-deep); }
.app-nav-user { font-size: .85rem; color: var(--ink-faint); font-weight: 500; }
.app-nav-sep  { color: var(--line); }

/* Cards -------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--card);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--r-lg);
  --bs-card-inner-border-radius: calc(var(--r-lg) - 1px);
  --bs-card-cap-bg: var(--sunk);
}
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow, .shadow-md { box-shadow: var(--shadow-md) !important; }

/* Buttons ------------------------------------------------------------------ */
.btn {
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 600;
  --bs-btn-focus-shadow-rgb: 14,165,233;
}
.btn-primary {
  --bs-btn-bg: var(--accent);             --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent-deep);  --bs-btn-hover-border-color: var(--accent-deep);
  --bs-btn-active-bg: var(--accent-deep); --bs-btn-active-border-color: var(--accent-deep);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
}
.btn-success {
  --bs-btn-bg: var(--success);             --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--success-deep);  --bs-btn-hover-border-color: var(--success-deep);
  --bs-btn-active-bg: var(--success-deep); --bs-btn-active-border-color: var(--success-deep);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--accent-deep);   --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);     --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent-deep); --bs-btn-active-border-color: var(--accent-deep); --bs-btn-active-color: #fff;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink-soft);      --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--sunk);       --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--ink);
  --bs-btn-active-bg: var(--sunk);      --bs-btn-active-border-color: var(--line); --bs-btn-active-color: var(--ink);
}
.btn-outline-light {
  --bs-btn-color: var(--ink-soft);      --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--sunk);       --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);        --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);     --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #fff;
}
.btn-link { --bs-btn-color: var(--accent-deep); --bs-btn-hover-color: var(--accent-deep); text-decoration: none; }

/* Forms -------------------------------------------------------------------- */
.form-control, .form-select {
  background-color: var(--card);
  border-color: var(--line);
  color: var(--ink);
  border-radius: var(--r-md);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus, .form-select:focus {
  background-color: var(--card);
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: 0 0 0 .2rem rgba(14,165,233,.18);
}
.form-label { font-weight: 600; font-size: .875rem; color: var(--ink-soft); }

/* Tables ------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-hover-bg: var(--sunk);
  --bs-table-hover-color: var(--ink);
}
.table > thead.table-light th,
.table-light {
  --bs-table-bg: var(--sunk);
  --bs-table-color: var(--ink-soft);
  --bs-table-border-color: var(--line);
}
.table > thead th {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.table > :not(caption) > * > * { background-color: transparent; }

/* List groups -------------------------------------------------------------- */
.list-group { --bs-list-group-border-color: var(--line); --bs-list-group-bg: transparent; }
.list-group-item { background: transparent; color: var(--ink); }

/* Alerts ------------------------------------------------------------------- */
.alert { --bs-alert-border-radius: var(--r-md); border-width: 1px; }
.alert-danger  { --bs-alert-color: var(--danger-deep);  --bs-alert-bg: var(--danger-wash);  --bs-alert-border-color: #F3C9C9; }
.alert-success { --bs-alert-color: var(--success-deep); --bs-alert-bg: var(--success-wash); --bs-alert-border-color: #BBE9C9; }

/* Badges ------------------------------------------------------------------- */
.badge {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--r-pill);
  padding: .35em .7em;
  font-size: .75rem;
}
.badge.bg-info      { background-color: var(--accent-wash) !important; color: var(--accent-text) !important; }
.badge.bg-secondary { background-color: var(--sunk) !important;        color: var(--ink-soft) !important; }
.badge.bg-success   { background-color: var(--success-wash) !important; color: var(--success-deep) !important; }
.badge.bg-light     { background-color: var(--sunk) !important;        color: var(--ink-soft) !important; border-color: var(--line) !important; }

/* Misc --------------------------------------------------------------------- */
a { color: var(--accent-deep); }
a:hover { color: var(--accent-deep); }
code {
  color: var(--accent-text);
  background: var(--accent-wash);
  padding: .1em .35em;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
}
hr { border-color: var(--line); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }