/* ============================================================
   PM BLUE-GREEN THEME
   Drop-in replacement for pm-blue-theme.css.
   Redefines the same CSS custom properties (--blue-50 ... --blue-900,
   --ink, --ink-dim, --border-soft, --bg-surface-2) so every page that
   already references them (index.php, or_logbook.php, topbar, etc.)
   automatically re-colors without needing per-page edits — plus a
   handful of teal/emerald component overrides for extra polish.
   ============================================================ */

:root {
  /* Core blue-green scale (teal-leaning blue -> emerald) */
  --blue-50:  #e9f7f5;
  --blue-100: #cdeee8;
  --blue-200: #a3ded4;
  --blue-300: #74c9bc;
  --blue-400: #45b3a1;
  --blue-500: #17a087;   /* primary accent (was pure blue, now teal) */
  --blue-600: #128d76;
  --blue-700: #0e7863;   /* deep teal */
  --blue-800: #0b5f4f;
  --blue-900: #073d34;   /* darkest, near-emerald navy */

  /* Secondary "green" accent, used for highlights / success states */
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;

  /* Neutrals */
  --ink:          #0f2a26;
  --ink-dim:      #5c7b74;
  --border-soft:  #d3e8e2;
  --bg-surface-2: #f2faf8;
  --bg-page:      #eef8f6;
}

/* ---------- Global element re-skin ---------- */
body { background-color: var(--bg-page); color: var(--ink); }

a { color: var(--blue-700); }
a:hover { color: var(--blue-900); }

/* ---------- Bootstrap primary button family ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  border-color: var(--blue-700);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, var(--blue-600), var(--blue-900));
  border-color: var(--blue-800);
}
.btn-outline-primary {
  color: var(--blue-700);
  border-color: var(--blue-500);
}
.btn-outline-primary:hover {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff;
}
.btn-success {
  background: linear-gradient(135deg, var(--green-500), var(--blue-700));
  border-color: var(--green-600);
}
.btn-success:hover {
  background: linear-gradient(135deg, var(--green-600), var(--blue-800));
  border-color: var(--blue-800);
}

/* ---------- Links / nav / topbar ---------- */
.navbar, .topbar, .app-topbar {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-900)) !important;
}
.navbar .nav-link, .topbar .nav-link { color: rgba(255,255,255,.88) !important; }
.navbar .nav-link:hover, .topbar .nav-link:hover { color: #fff !important; }

/* ---------- Cards / panels ---------- */
.card {
  border-color: var(--border-soft);
}

/* ---------- Form controls ---------- */
.form-control:focus, .form-select:focus {
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(23,160,135,.18);
}

/* ---------- Badges / pills tinted teal-green ---------- */
.badge.bg-primary { background-color: var(--blue-600) !important; }
.badge.bg-success { background-color: var(--green-600) !important; }

/* ---------- Pagination ---------- */
.page-link { color: var(--blue-700); }
.page-item.active .page-link {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
}

/* ---------- Scrollbar accent (WebKit) ---------- */
::-webkit-scrollbar-thumb { background: var(--blue-300); border-radius: 8px; }
::-webkit-scrollbar-track { background: var(--bg-surface-2); }