/* ===================================================================
   REFINE — global design-elevation layer ("warm precision")
   Loaded last in layout.html, after Bootstrap + styles.css.
   Reskins the whole app via tokens + component overrides only:
   NO layout/positioning changes, safe to remove with one <link>.
   =================================================================== */

/* ── 1. Design tokens ──────────────────────────────────────────── */
:root {
  /* Ink & surfaces (warm neutrals — extends the Apr 2026 set) */
  --ink-900: #211d16;      /* espresso — primary text & solid buttons */
  --ink-800: #2e2a22;
  --ink-700: #4a463d;
  --ink-500: #7a766c;      /* muted text */
  --ink-300: #b9b4a7;
  --cream-page: #faf8f4;   /* page background */
  --cream-card: #ffffff;
  --cream-muted: #f4f1ea;  /* table stripes, hover, wells */
  --cream-deep: #ece8de;
  --line-soft: #eae6dc;    /* hairline borders */
  --line-strong: #d9d3c4;

  /* Accent — caramel (brand moment, focus, active states) */
  --caramel-600: #b06612;
  --caramel-500: #c17817;
  --caramel-100: #f7e9d4;
  --caramel-050: #fbf4e7;

  /* Semantics — tuned to the warm palette */
  --sage-600: #4e7a54;     /* success */
  --sage-100: #e6efe7;
  --brick-600: #b0483b;    /* danger */
  --brick-100: #f6e5e2;
  --honey-600: #a97b0f;    /* warning text-safe */
  --honey-100: #f9efd6;
  --slate-600: #47637d;    /* info */
  --slate-100: #e6ecf2;

  /* Type */
  --font-display: "Bricolage Grotesque", "Manrope", sans-serif;
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Shape & depth */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --elev-1: 0 1px 2px rgba(33,29,22,.05), 0 1px 3px rgba(33,29,22,.06);
  --elev-2: 0 4px 12px rgba(33,29,22,.08), 0 2px 4px rgba(33,29,22,.05);
  --elev-3: 0 12px 32px rgba(33,29,22,.14), 0 4px 8px rgba(33,29,22,.06);

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --t-fast: 130ms;
  --t-med: 220ms;

  /* Re-point Bootstrap's own tokens where they matter */
  --bs-body-bg: var(--cream-page);
  --bs-body-color: var(--ink-800);
  --bs-body-font-family: var(--font-ui);
  --bs-border-color: var(--line-soft);
  --bs-link-color: var(--caramel-600);
  --bs-link-hover-color: var(--caramel-500);
  --bs-secondary-color: var(--ink-500);
}

/* ── 2. Global type & surfaces ─────────────────────────────────── */
html, body {
  font-family: var(--font-ui);
  color: var(--ink-800);
  background-color: var(--cream-page);
  font-size: 15px;
  letter-spacing: .001em;
  -webkit-font-smoothing: antialiased;
}
/* layout_with_sidebar.html sets body #f7f9fc in a later inline <style>; token must win */
body { background: var(--cream-page) !important; }
.dashboard-content-wrapper { background-color: var(--cream-page) !important; }

h1, h2, h3, .page-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.022em;
  color: var(--ink-900);
}
h4, h5, h6 { font-family: var(--font-ui); font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; }
.page-header h2 { font-size: 1.65rem; }
.page-header .page-subtitle { color: var(--ink-500); }

::selection { background: var(--caramel-100); color: var(--ink-900); }

/* Custom scrollbars (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid var(--cream-page); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 3. Chrome: navbar, sidebar, breadcrumb ────────────────────── */
.navbar.bg-light {
  background: rgba(250,248,244,.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none;
}
.navbar-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; color: var(--ink-900) !important; }
.navbar .nav-link { color: var(--ink-700); font-weight: 600; font-size: .9rem; transition: color var(--t-fast) var(--ease-out); }
.navbar .nav-link:hover { color: var(--ink-900); }

.dashboard-sidebar { background: var(--cream-card); border-right: 1px solid var(--line-soft); }
.sidebar-username { font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; }
.sidebar-nav .nav-link {
  border-radius: var(--r-sm);
  margin: 1px 8px;
  color: var(--ink-700);
  font-weight: 600;
  font-size: .875rem;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.sidebar-nav .nav-link:hover { background: var(--cream-muted); color: var(--ink-900); }
/* Collapsed icon rail (auto-hide): drop the horizontal pill margin so icons
   stay aligned with the category bookmarks at the rail's fixed x-offset */
.dashboard-container.auto-hide-sidebar .dashboard-sidebar:not(:hover):not(:focus-within) .sidebar-nav .nav-link {
  margin: 1px 0;
  border-radius: 0;
}
.sidebar-nav .nav-link.active {
  background: var(--ink-900);
  color: var(--cream-page);
  box-shadow: var(--elev-1);
}
.sidebar-nav .nav-link.active i { color: var(--caramel-100); }
.sidebar-category {
  font-family: var(--font-ui);
  font-size: .66rem;
  letter-spacing: .12em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink-500);
}

.breadcrumb { font-size: .8rem; font-weight: 600; }
.breadcrumb-item a { color: var(--ink-500); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
.breadcrumb-item a:hover { color: var(--caramel-600); }
.breadcrumb-item.active { color: var(--ink-900); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-300); }

/* ── 4. Cards ──────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
  background: var(--cream-card);
  transition: box-shadow var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 700;
  color: var(--ink-900);
}
.card-header.bg-light, .card-header.bg-secondary { background: var(--cream-muted) !important; color: var(--ink-900) !important; }
a.card:hover, .card.card-hover:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }

/* ── 5. Buttons ────────────────────────────────────────────────── */
.btn {
  font-weight: 700;
  font-size: .875rem;
  border-radius: var(--r-sm);
  letter-spacing: .002em;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--ink-900);
  --bs-btn-border-color: var(--ink-900);
  --bs-btn-hover-bg: var(--ink-800);
  --bs-btn-hover-border-color: var(--ink-800);
  --bs-btn-active-bg: #17140e;
  --bs-btn-active-border-color: #17140e;
  --bs-btn-disabled-bg: var(--ink-300);
  --bs-btn-disabled-border-color: var(--ink-300);
  box-shadow: var(--elev-1);
}
.btn-outline-primary {
  --bs-btn-color: var(--ink-800);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-bg: var(--cream-muted);
  --bs-btn-hover-border-color: var(--ink-500);
  --bs-btn-hover-color: var(--ink-900);
  --bs-btn-active-bg: var(--cream-deep);
  --bs-btn-active-border-color: var(--ink-500);
  --bs-btn-active-color: var(--ink-900);
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--ink-700);
  --bs-btn-border-color: var(--line-strong);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--cream-muted);
  --bs-btn-hover-color: var(--ink-900);
  --bs-btn-hover-border-color: var(--ink-500);
  --bs-btn-active-bg: var(--cream-deep);
  --bs-btn-active-color: var(--ink-900);
  --bs-btn-active-border-color: var(--ink-500);
}
.btn-success {
  --bs-btn-bg: var(--sage-600); --bs-btn-border-color: var(--sage-600);
  --bs-btn-hover-bg: #446b4a; --bs-btn-hover-border-color: #446b4a;
  --bs-btn-active-bg: #3c5f42; --bs-btn-active-border-color: #3c5f42;
}
.btn-danger {
  --bs-btn-bg: var(--brick-600); --bs-btn-border-color: var(--brick-600);
  --bs-btn-hover-bg: #9c3f33; --bs-btn-hover-border-color: #9c3f33;
  --bs-btn-active-bg: #8a382d; --bs-btn-active-border-color: #8a382d;
}
.btn-warning {
  --bs-btn-bg: var(--honey-100); --bs-btn-border-color: #ecd9a8;
  --bs-btn-color: var(--honey-600);
  --bs-btn-hover-bg: #f3e5c2; --bs-btn-hover-border-color: #e2cd96; --bs-btn-hover-color: #8d670c;
}
.btn-info {
  --bs-btn-bg: var(--slate-600); --bs-btn-border-color: var(--slate-600); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #3d576e; --bs-btn-hover-border-color: #3d576e; --bs-btn-hover-color: #fff;
}
.btn-outline-danger {
  --bs-btn-color: var(--brick-600); --bs-btn-border-color: #e5c4be;
  --bs-btn-hover-bg: var(--brick-100); --bs-btn-hover-color: #8a382d; --bs-btn-hover-border-color: var(--brick-600);
}

/* ── 6. Forms ──────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
  background-color: #fff;
  color: var(--ink-800);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.form-control::placeholder { color: var(--ink-300); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--caramel-500);
  box-shadow: 0 0 0 .22rem rgba(193,120,23,.16);
}
.form-label { color: var(--ink-700); font-weight: 700; font-size: .82rem; }
.form-check-input:checked { background-color: var(--ink-900); border-color: var(--ink-900); }
.form-switch .form-check-input:checked { background-color: var(--sage-600); border-color: var(--sage-600); }
.input-group-text { background: var(--cream-muted); border-color: var(--line-strong); color: var(--ink-500); }

/* ── 7. Tables ─────────────────────────────────────────────────── */
.table { --bs-table-color: var(--ink-800); border-color: var(--line-soft); }
.table thead th {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-500);
  background: var(--cream-muted);
  border-bottom: 1px solid var(--line-strong) !important;
  padding-top: .65rem; padding-bottom: .65rem;
}
.table tbody td { border-color: var(--line-soft); padding-top: .7rem; padding-bottom: .7rem; vertical-align: middle; }
.table-hover tbody tr:hover { --bs-table-hover-bg: var(--caramel-050); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: rgba(244,241,234,.55); }
.table-responsive { border-radius: var(--r-md); }
.card .table { margin-bottom: 0; }

/* ── 8. Badges, alerts, modals, dropdowns, pagination ──────────── */
.badge { font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .4em .75em; }
.badge.bg-success { background: var(--sage-100) !important; color: var(--sage-600) !important; }
.badge.bg-danger { background: var(--brick-100) !important; color: var(--brick-600) !important; }
.badge.bg-warning { background: var(--honey-100) !important; color: var(--honey-600) !important; }
.badge.bg-info { background: var(--slate-100) !important; color: var(--slate-600) !important; }
.badge.bg-secondary { background: var(--cream-deep) !important; color: var(--ink-700) !important; }
.badge.bg-primary { background: var(--ink-900) !important; color: var(--cream-page) !important; }

.alert { border-radius: var(--r-md); border-width: 1px; font-size: .9rem; }
.alert-success { background: var(--sage-100); border-color: #cfe0d1; color: #3c5f42; }
.alert-danger { background: var(--brick-100); border-color: #ecd0ca; color: #8a382d; }
.alert-warning { background: var(--honey-100); border-color: #eeddb0; color: #8d670c; }
.alert-info { background: var(--slate-100); border-color: #d3dde7; color: #3d576e; }

.modal-content { border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--elev-3); }
.modal-header { border-bottom: 1px solid var(--line-soft); }
.modal-header .modal-title { font-family: var(--font-display); font-weight: 600; }
.modal-footer { border-top: 1px solid var(--line-soft); }

.dropdown-menu {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--elev-2);
  font-size: .875rem;
  padding: .35rem;
}
.dropdown-item { border-radius: var(--r-sm); font-weight: 600; color: var(--ink-700); }
.dropdown-item:hover { background: var(--cream-muted); color: var(--ink-900); }
.dropdown-item.active { background: var(--ink-900); color: var(--cream-page); }

.pagination { --bs-pagination-color: var(--ink-700); --bs-pagination-border-color: var(--line-soft);
  --bs-pagination-hover-bg: var(--cream-muted); --bs-pagination-hover-color: var(--ink-900);
  --bs-pagination-active-bg: var(--ink-900); --bs-pagination-active-border-color: var(--ink-900);
  --bs-pagination-focus-box-shadow: 0 0 0 .22rem rgba(193,120,23,.16); }

.nav-tabs { border-color: var(--line-soft); }
.nav-tabs .nav-link { color: var(--ink-500); font-weight: 700; border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link:hover { color: var(--ink-900); border-color: var(--line-strong); }
.nav-tabs .nav-link.active { color: var(--ink-900); background: transparent; border-bottom: 2px solid var(--caramel-600); }

/* ── 9. Motion: gentle page entrance ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .dashboard-content-wrapper > .container,
  .dashboard-content-wrapper > .container-fluid {
    animation: refine-enter .38s var(--ease-out) both;
  }
  @keyframes refine-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* ── 10. Focus visibility (a11y) ───────────────────────────────── */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--caramel-600);
  outline-offset: 2px;
  box-shadow: none;
}