/*
  Dark, minimal, card-based theme (Bento Grid style) generated with the
  ui-ux-pro-max skill: neutral near-black surfaces, soft green accent,
  Outfit/Work Sans pairing. Built on top of Bootstrap 5.3's data-bs-theme="dark".
*/

:root,
[data-bs-theme="dark"] {
    --bg: #0a0a0b;
    --bg-elevated: #15161a;
    --bg-elevated-2: #1c1d22;
    --border-color: rgba(255, 255, 255, 0.08);
    --border-color-strong: rgba(255, 255, 255, 0.14);
    --text-primary: #f4f4f5;
    --text-muted: #9a9ca5;
    --accent: #22c55e;
    --accent-strong: #15803d;
    --accent-soft-bg: rgba(34, 197, 94, 0.14);
    --radius: 14px;
    --radius-sm: 10px;

    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text-primary);
    --bs-secondary-color: var(--text-muted);
    --bs-border-color: var(--border-color);
    --bs-tertiary-bg: var(--bg-elevated-2);
    --bs-emphasis-color: #fff;
    --bs-link-color: var(--accent);
    --bs-link-hover-color: #4ade80;
}

body {
    font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .card-header, .fw-semibold {
    font-family: "Outfit", "Work Sans", sans-serif;
}

a {
    transition: color 150ms ease;
}

/* ---------- Surfaces ---------- */

.navbar {
    background-color: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

aside {
    background-color: var(--bg-elevated) !important;
    border-right: 1px solid var(--border-color) !important;
}

.card {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: border-color 200ms ease, transform 200ms ease;
}

.card:hover {
    border-color: var(--border-color-strong);
}

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--border-color);
}

/* Existing templates use Bootstrap's .bg-white utility for "neutral card
   surface" — under the dark theme that should just be the elevated surface,
   so it's overridden centrally here rather than edited in every view. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bg-elevated) !important;
}

/* Bento-style stat cards (dashboard top row): lift slightly on hover */
.card.h-100:hover {
    transform: translateY(-2px);
}

/* ---------- Sidebar nav (admin) ---------- */

.nav-pills .nav-link {
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: background-color 150ms ease, color 150ms ease;
}

.nav-pills .nav-link:hover {
    background-color: var(--bg-elevated-2);
    color: var(--text-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--accent-soft-bg);
    color: var(--accent);
    box-shadow: none;
}

.nav-pills .nav-link i {
    width: 1.1rem;
    display: inline-block;
}

/* ---------- User navbar links ---------- */

.navbar .nav-link {
    color: var(--text-muted);
}

.navbar .nav-link.fw-semibold,
.navbar .nav-link:hover {
    color: var(--text-primary);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--radius-sm);
    transition: filter 150ms ease, transform 150ms ease;
}

.btn:active {
    transform: scale(0.97);
}

.btn-dark,
.btn-primary {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
}

.btn-dark:hover,
.btn-primary:hover {
    filter: brightness(1.12);
}

.btn-outline-secondary,
.btn-outline-primary {
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    background-color: var(--bg-elevated-2);
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Tables ---------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
}

.table-light,
thead.table-light {
    --bs-table-bg: var(--bg-elevated-2);
    --bs-table-color: var(--text-muted);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--bg-elevated-2);
}

/* ---------- Forms ---------- */

.form-control,
.form-select {
    background-color: var(--bg-elevated-2);
    border-color: var(--border-color-strong);
    color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-elevated-2);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px var(--accent-soft-bg);
}

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

/* ---------- Misc ---------- */

pre code {
    white-space: pre-wrap;
    word-break: break-word;
}

.table-responsive pre {
    margin: 0;
}

code, pre {
    font-family: "Fira Code", ui-monospace, monospace;
}

.badge {
    border-radius: 999px;
    font-weight: 500;
}

::selection {
    background-color: var(--accent-soft-bg);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}