/* Base layout */
body{font-family:system-ui,Segoe UI,Arial,sans-serif;margin:0}
.container{max-width:1100px;margin:2rem auto;padding:0 1rem}

/* Tables */
table.table{border-collapse:separate;border-spacing:0}
table thead th{position:sticky;top:0;background:var(--bs-body-bg);z-index:1}
th[data-sort-key]{cursor:pointer}
th[data-sort-key].text-primary{font-weight:600}

/* Actions column */
.actions{display:flex;gap:.5rem;justify-content:center}
.actions .action-btn{flex:1 1 0}

/* Responsive tweaks */
@media (max-width: 576px){
  .actions{flex-direction:column}
}

/* Home cards */
.card h5{margin-bottom:.25rem}

/* Misc */
#sentinel .spinner-border{vertical-align:middle}

/* ---------------- Theme tokens ---------------- */
:root {
  /* Brand/Accent – light */
  --sb-primary: #3b82f6;           /* blue-500 */
  --sb-primary-rgb: 59,130,246;
  --sb-bg: #f8fafc;                /* slate-50 */
  --sb-surface: #ffffff;
  --sb-text: #0f172a;              /* slate-900 */
  --sb-muted: #64748b;             /* slate-500 */
  --sb-link: #2563eb;              /* blue-600 */
  --sb-nav-bg: #ffffff;
}

[data-bs-theme="dark"] {
  /* Brand/Accent – dark */
  --sb-primary: #60a5fa;           /* blue-400 */
  --sb-primary-rgb: 96,165,250;
  --sb-bg: #0b1220;                /* deep slate/indigo */
  --sb-surface: #0f172a;
  --sb-text: #e5e7eb;              /* zinc-200 */
  --sb-muted: #94a3b8;             /* slate-400 */
  --sb-link: #93c5fd;              /* blue-300 */
  --sb-nav-bg: #0f172a;
}

/* Wire our tokens into Bootstrap CSS vars */
:root {
  --bs-body-bg: var(--sb-bg);
  --bs-body-color: var(--sb-text);
  --bs-primary: var(--sb-primary);
  --bs-link-color: var(--sb-link);
}
[data-bs-theme="dark"] {
  --bs-body-bg: var(--sb-bg);
  --bs-body-color: var(--sb-text);
  --bs-primary: var(--sb-primary);
  --bs-link-color: var(--sb-link);
}

/* ---------------- Navbar accent ---------------- */
.navbar-accent {
  background: var(--sb-nav-bg);
  border-bottom: 1px solid rgba(var(--sb-primary-rgb), 0.15);
}
.navbar-accent .navbar-brand {
  font-weight: 600;
}
.navbar-accent .nav-link.active,
.navbar-accent .nav-link:hover {
  color: var(--sb-primary);
}

/* ---------------- Page width + tables ---------------- */
main.container-xxl {
  /* Boost Bootstrap’s max width a bit to feel airier on desktops */
  max-width: 1440px;
}

/* Make big tables usable on smaller screens */
.table-responsive {
  overflow-x: auto;
}

/* Optional: equal-width action buttons row you added earlier */
.actions .btn {
  min-width: 96px;
}

/* Optional: subtle cards on Home */
.entity-card {
  background: var(--sb-surface);
  border: 1px solid rgba(var(--sb-primary-rgb), 0.1);
  border-radius: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.entity-card:hover {
  border-color: rgba(var(--sb-primary-rgb), 0.25);
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

.btn-primary {
  /* Let Bootstrap handle colors; we just add a tiny glow */
  box-shadow: 0 2px 8px rgba(var(--sb-primary-rgb), .25);
}
.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(var(--sb-primary-rgb), .35);
}

.text-pink {
    color: #e85d89;
}

.btn-pink {
    background: #e85d89;
    border-color: #e85d89;
}

    .btn-pink:hover {
        filter: brightness(.96);
    }

.rounded-2xl {
    border-radius: 1rem;
}

.object-fit-cover {
    object-fit: cover;
}