/*
 * shadcn/ui look for the server-rendered Bootstrap pages.
 * Same tokens as frontend/src/index.css so React islands and Django markup match.
 * Loaded after Bootstrap and style.css.
 */
:root {
    --radius: 0.5rem;
    --background: #fafafa;
    --foreground: #26282b;
    --card: #ffffff;
    --primary: #3b3f45;
    --primary-foreground: #fafafa;
    --secondary: #f1f1f2;
    --muted: #f1f1f2;
    --muted-foreground: #6b7078;
    --accent: #eeeef0;
    --destructive: #b42318;
    --border: #dcdcdc;
    --ring: #8a8f98;
    /* Brand blue from the logo; used for primary buttons. */
    --brand: #2554eb;
    --brand-hover: #1839b0;
    --brand-active: #142f91;
    --brand-foreground: #ffffff;

    --bs-body-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-secondary-color: var(--muted-foreground);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: calc(var(--radius) - 2px);
    --bs-border-radius-lg: var(--radius);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 59, 63, 69;
    --bs-link-color: var(--foreground);
    --bs-link-color-rgb: 38, 40, 43;
    --bs-link-hover-color: #000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-heading-color: var(--foreground);
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.01em; font-weight: 600; }
.h4, h1.h4 { font-size: 1.375rem; }
.h6, h2.h6 { font-size: 0.95rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.text-muted { color: var(--muted-foreground) !important; }
.text-danger { color: var(--destructive) !important; }
hr { border-color: var(--border); opacity: 1; }
code { color: var(--foreground); background: var(--muted); border-radius: 4px; padding: 0.1rem 0.35rem; font-size: 0.8em; }

/* ---- Buttons ---- */
.btn {
    --bs-btn-border-radius: calc(var(--radius) - 2px);
    --bs-btn-font-size: 0.875rem;
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(138, 143, 152, 0.35);
    box-shadow: none !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.3125rem; --bs-btn-font-size: 0.8125rem; }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.625rem; --bs-btn-font-size: 0.95rem; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(138, 143, 152, 0.35) !important; }

.btn-primary {
    --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--brand-foreground);
    --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-hover-color: var(--brand-foreground);
    --bs-btn-active-bg: var(--brand-active); --bs-btn-active-border-color: var(--brand-active); --bs-btn-active-color: var(--brand-foreground);
    --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.btn-secondary, .btn-light {
    --bs-btn-bg: var(--secondary); --bs-btn-border-color: var(--secondary); --bs-btn-color: var(--foreground);
    --bs-btn-hover-bg: #e6e6e8; --bs-btn-hover-border-color: #e6e6e8; --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: #dcdcde; --bs-btn-active-border-color: #dcdcde; --bs-btn-active-color: var(--foreground);
}
.btn-danger {
    --bs-btn-bg: var(--destructive); --bs-btn-border-color: var(--destructive); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #912018; --bs-btn-hover-border-color: #912018; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7a1a14; --bs-btn-active-border-color: #7a1a14;
}
.btn-outline-secondary, .btn-outline-primary {
    --bs-btn-color: var(--foreground); --bs-btn-bg: var(--card); --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--border); --bs-btn-hover-color: var(--foreground);
    --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--border); --bs-btn-active-color: var(--foreground);
    --bs-btn-disabled-color: var(--muted-foreground); --bs-btn-disabled-border-color: var(--border);
}
.btn-outline-danger {
    --bs-btn-color: var(--destructive); --bs-btn-bg: var(--card); --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: rgba(180, 35, 24, 0.08); --bs-btn-hover-border-color: var(--border); --bs-btn-hover-color: var(--destructive);
    --bs-btn-active-bg: rgba(180, 35, 24, 0.12); --bs-btn-active-border-color: var(--border); --bs-btn-active-color: var(--destructive);
}
.btn-link { --bs-btn-color: var(--foreground); --bs-btn-hover-color: #000; }
.btn-close { box-shadow: none !important; }

/* ---- Forms ---- */
.form-label { font-weight: 500; font-size: 0.8125rem; margin-bottom: 0.4rem; }
.form-text { color: var(--muted-foreground); font-size: 0.8rem; }
.form-control, .form-select {
    border-color: var(--border);
    border-radius: calc(var(--radius) - 2px);
    background-color: var(--card);
    font-size: 0.875rem;
    padding: 0.4375rem 0.75rem;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control-sm, .form-select-sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; }
.form-control::placeholder { color: var(--muted-foreground); opacity: 0.8; }
.form-control:focus, .form-select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgba(138, 143, 152, 0.3) !important;
}
.form-control-color { padding: 0.25rem; height: 2.25rem; }
.form-check-input { border-color: var(--border); box-shadow: none !important; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(138, 143, 152, 0.3) !important; }
.form-check-label { font-size: 0.875rem; }

/* ---- Cards, alerts, badges ---- */
.card {
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-bg: var(--card);
    --bs-card-cap-bg: transparent;
    box-shadow: none !important;
}
.alert {
    --bs-alert-border-radius: calc(var(--radius) - 2px);
    --bs-alert-padding-y: 0.75rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    box-shadow: none !important;
}
.alert-success { border-color: #a7d7bd; background: #f0faf4; color: #14532d; }
.alert-danger, .alert-error { border-color: #f1b5b0; background: #fef3f2; color: #912018; }
.alert-warning { border-color: #f1d7a1; background: #fffaeb; color: #7a4a0a; }
.alert-info { border-color: var(--border); background: var(--card); }

.badge { font-weight: 500; font-size: 0.75rem; border-radius: calc(var(--radius) - 2px); padding: 0.3em 0.6em; }
.badge.rounded-pill { border-radius: 999px; }
.text-bg-primary { background-color: #2563eb !important; color: #fff !important; }
.text-bg-success { background-color: #059669 !important; color: #fff !important; }
.text-bg-danger { background-color: #dc2626 !important; color: #fff !important; }
.text-bg-warning { background-color: #fbbf24 !important; color: #171717 !important; }
.text-bg-info { background-color: #0891b2 !important; color: #fff !important; }
.text-bg-dark { background-color: #262626 !important; color: #fff !important; }
/* Obsidian default tag colors, used for important date types */
.text-bg-red { background-color: #e93147 !important; color: #fff !important; }
.text-bg-orange { background-color: #ec7500 !important; color: #fff !important; }
.text-bg-yellow { background-color: #e0ac00 !important; color: #171717 !important; }
.text-bg-green { background-color: #08b94e !important; color: #fff !important; }
.text-bg-cyan { background-color: #00bfbc !important; color: #171717 !important; }
.text-bg-blue { background-color: #086ddd !important; color: #fff !important; }
.text-bg-purple { background-color: #7852ee !important; color: #fff !important; }
.text-bg-pink { background-color: #d53984 !important; color: #fff !important; }
.text-bg-secondary, .badge.bg-secondary { background-color: var(--secondary) !important; color: var(--foreground) !important; }

/* ---- Tables (any left that aren't React data tables) ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.02);
    font-size: 0.875rem;
}
.table > thead th { color: var(--muted-foreground); font-weight: 500; font-size: 0.75rem; border-bottom-color: var(--border); }

/* ---- Overlays ---- */
.modal-content { border-color: var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; }
.modal-header, .modal-footer { border-color: var(--border); }
.dropdown-menu {
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: calc(var(--radius) - 2px);
    --bs-dropdown-font-size: 0.875rem;
    padding: 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
.dropdown-item { border-radius: calc(var(--radius) - 4px); padding: 0.375rem 0.6rem; color: var(--foreground); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active, .dropdown-item.active { background-color: var(--accent); color: var(--foreground); }

/* ---- Definition lists on detail pages ---- */
dl.row > dt { color: var(--muted-foreground); font-weight: 500; margin-bottom: 0.5rem; }
dl.row > dd { margin-bottom: 0.5rem; }