/*
 * NSR — charcoal/red theme overlay on top of Bootstrap 5.3 dark mode.
 *
 * Loaded after bootstrap.min.css so the rules below win on specificity ties.
 *
 * Three responsibilities:
 *   1. Tweak Bootstrap variables so the brand red is the primary accent and
 *      our cards / tables / forms use the charcoal surface palette.
 *   2. Provide a small set of `.nsr-*` utility classes for layout patterns
 *      that are repeated across templates (page headers, section titles,
 *      narrow forms).
 *   3. Soften the default badge / button palette into something
 *      admin-appropriate: less saturated, less loud, more legible at a
 *      glance.
 *
 * Custom CSS stays modest on purpose. Where a Bootstrap utility already
 * does the job, the templates use that directly.
 */

/* ---------------------------------------------------------------- *
 * 1. Theme variables
 * ---------------------------------------------------------------- */

:root,
[data-bs-theme="dark"] {
    /* Bootstrap-facing palette */
    --bs-body-bg: #15171a;
    --bs-body-color: #e6e8ea;
    --bs-secondary-color: #8b9098;
    --bs-tertiary-bg: #1d2024;
    --bs-border-color: #2c3036;
    --bs-link-color: #e6e8ea;
    --bs-link-hover-color: #d04545;

    /* Brand-facing palette (NSR-specific) */
    --nsr-bg: #15171a;
    --nsr-surface: #1c1f23;
    --nsr-surface-2: #23272d;
    --nsr-surface-3: #2a2e34;
    --nsr-border: #2c3036;
    --nsr-border-strong: #3a4047;
    --nsr-text: #e6e8ea;
    --nsr-text-dim: #9aa0a8;
    --nsr-text-muted: #707681;

    /* Accent (deep brand red — used as Bootstrap primary) */
    --nsr-accent: #b9322f;
    --nsr-accent-hover: #cc4441;
    --nsr-accent-soft: rgba(185, 50, 47, 0.18);

    /* Destructive (vivid red — distinguishably brighter than primary) */
    --nsr-danger: #d63a3a;
    --nsr-danger-hover: #e94e4e;
    --nsr-danger-soft: rgba(214, 58, 58, 0.18);

    --nsr-success: #2ea561;
    --nsr-success-soft: rgba(46, 165, 97, 0.18);
    --nsr-warning: #d4a23a;
    --nsr-warning-soft: rgba(212, 162, 58, 0.20);
    --nsr-info-soft: rgba(110, 130, 160, 0.18);

    /* Bootstrap "primary" → brand red */
    --bs-primary: var(--nsr-accent);
    --bs-primary-rgb: 185, 50, 47;
}

body {
    background: var(--nsr-bg);
    color: var(--nsr-text);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Generic focus polish — gives keyboard users a visible accent ring. */
:focus-visible {
    outline: 2px solid var(--nsr-accent-hover);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- *
 * 2. App shell
 * ---------------------------------------------------------------- */

.nsr-shell { min-height: calc(100vh - 64px); padding-bottom: 2.5rem; }

.nsr-navbar { background: var(--nsr-surface); border-color: var(--nsr-border) !important; }
.nsr-navbar .navbar-brand { color: var(--nsr-text); letter-spacing: 0.04em; }
.nsr-navbar .nav-link {
    color: var(--nsr-text-dim);
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}
.nsr-navbar .nav-link.active,
.nsr-navbar .nav-link:hover { color: var(--nsr-text); }
.nsr-navbar .nav-link.active {
    color: var(--nsr-text);
    box-shadow: inset 0 -2px 0 var(--nsr-accent);
}

/* ---------------------------------------------------------------- *
 * 3. Page-header pattern (used by partials/page_header.php)
 * ---------------------------------------------------------------- */

.nsr-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}
.nsr-page-header__text { min-width: 0; }
.nsr-page-header__title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 0.15rem;
    letter-spacing: 0.005em;
    color: var(--nsr-text);
}
.nsr-page-header__subtitle {
    font-size: 0.85rem;
    color: var(--nsr-text-dim);
    line-height: 1.4;
}
.nsr-page-header__subtitle code { color: var(--nsr-text); }
.nsr-page-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.nsr-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Section heading inside cards / show pages. */
.nsr-section-title {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nsr-text-dim);
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

/* Narrow form constraint (used by login). Pages with cards already get a
 * sensible width via container-xl + col-lg-* — this is for centered
 * single-column flows. */
.nsr-form-narrow { max-width: 28rem; margin: 3.5rem auto 1rem; }

/* ---------------------------------------------------------------- *
 * 4. Buttons — keep brand vs destructive visually distinct
 * ---------------------------------------------------------------- */

/* Primary = brand deep red. Used for the main CTA on a page. */
.btn-primary {
    --bs-btn-bg: var(--nsr-accent);
    --bs-btn-border-color: var(--nsr-accent);
    --bs-btn-hover-bg: var(--nsr-accent-hover);
    --bs-btn-hover-border-color: var(--nsr-accent-hover);
    --bs-btn-active-bg: var(--nsr-accent-hover);
    --bs-btn-active-border-color: var(--nsr-accent-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

/* Danger = brighter red, reserved for destructive actions (revoke, reject).
 * Distinct enough from --nsr-accent that the eye reads "different intent". */
.btn-danger {
    --bs-btn-bg: var(--nsr-danger);
    --bs-btn-border-color: var(--nsr-danger);
    --bs-btn-hover-bg: var(--nsr-danger-hover);
    --bs-btn-hover-border-color: var(--nsr-danger-hover);
    --bs-btn-active-bg: var(--nsr-danger-hover);
    --bs-btn-active-border-color: var(--nsr-danger-hover);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.btn-outline-danger {
    --bs-btn-color: var(--nsr-danger);
    --bs-btn-border-color: var(--nsr-danger);
    --bs-btn-hover-bg: var(--nsr-danger);
    --bs-btn-hover-border-color: var(--nsr-danger);
    --bs-btn-active-bg: var(--nsr-danger);
    --bs-btn-active-border-color: var(--nsr-danger);
}

/* Outline-light is heavily used for table actions and filter buttons.
 * Bootstrap default is full white which reads "loud" on dark; tone down. */
.btn-outline-light {
    --bs-btn-color: var(--nsr-text);
    --bs-btn-border-color: var(--nsr-border-strong);
    --bs-btn-hover-bg: var(--nsr-surface-3);
    --bs-btn-hover-border-color: var(--nsr-border-strong);
    --bs-btn-hover-color: var(--nsr-text);
    --bs-btn-active-bg: var(--nsr-surface-3);
    --bs-btn-active-border-color: var(--nsr-border-strong);
}

.btn-outline-secondary {
    --bs-btn-color: var(--nsr-text-dim);
    --bs-btn-border-color: var(--nsr-border-strong);
    --bs-btn-hover-bg: var(--nsr-surface-2);
    --bs-btn-hover-border-color: var(--nsr-border-strong);
    --bs-btn-hover-color: var(--nsr-text);
    --bs-btn-active-bg: var(--nsr-surface-2);
    --bs-btn-active-color: var(--nsr-text);
    --bs-btn-active-border-color: var(--nsr-border-strong);
}

.btn-success {
    --bs-btn-bg: var(--nsr-success);
    --bs-btn-border-color: var(--nsr-success);
    --bs-btn-hover-bg: #34b76e;
    --bs-btn-hover-border-color: #34b76e;
    --bs-btn-active-bg: #34b76e;
    --bs-btn-active-border-color: #34b76e;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

/* ---------------------------------------------------------------- *
 * 5. Cards — slightly more breathing room, consistent header styling
 * ---------------------------------------------------------------- */

.card {
    background: var(--nsr-surface);
    border-color: var(--nsr-border);
}
.card-header,
.card-footer {
    background: var(--nsr-surface-2);
    border-color: var(--nsr-border);
    color: var(--nsr-text);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.55rem 1rem;
}
.card-header strong { font-weight: 600; }
.card-body { padding: 1.1rem 1.1rem; }

/* Subtle "danger/success-bordered" card variants used by the
 * transfer-decision panels. We keep the colour as a thin left border
 * instead of painting the entire card-header — it reads as serious without
 * looking like an alert. */
.card.border-danger { border-color: var(--nsr-danger) !important; }
.card.border-success { border-color: var(--nsr-success) !important; }
.card.border-danger > .card-header,
.card.border-success > .card-header {
    background: var(--nsr-surface-2);
    color: var(--nsr-text);
}

/* ---------------------------------------------------------------- *
 * 6. Tables — better vertical rhythm; cleaner header styling
 * ---------------------------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nsr-text);
}
.table thead th {
    color: var(--nsr-text-dim);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    font-weight: 600;
    border-bottom-color: var(--nsr-border);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}
.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--nsr-border);
}
.table > tbody > tr > td {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    vertical-align: middle;
}
.table > tbody > tr:hover > td {
    background-color: var(--nsr-surface-2);
}
.table.table-sm > tbody > tr > td,
.table.table-sm > thead > tr > th {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* Definition-list rows used in show pages. Slightly less aggressive gap. */
dl.row > dt,
dl.row > dd {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* ---------------------------------------------------------------- *
 * 7. Forms — labels, inputs, validation, help text
 * ---------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--nsr-bg);
    color: var(--nsr-text);
    border-color: var(--nsr-border-strong);
}
.form-control:hover,
.form-select:hover { border-color: var(--nsr-text-muted); }
.form-control:focus,
.form-select:focus {
    background-color: var(--nsr-bg);
    color: var(--nsr-text);
    border-color: var(--nsr-accent);
    box-shadow: 0 0 0 0.2rem var(--nsr-accent-soft);
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--nsr-surface-2);
    color: var(--nsr-text-dim);
}
.form-label {
    color: var(--nsr-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.form-text { color: var(--nsr-text-muted); font-size: 0.78rem; }
.invalid-feedback { color: #ef6e6e; font-size: 0.78rem; }

.form-check-input {
    background-color: var(--nsr-bg);
    border-color: var(--nsr-border-strong);
}
.form-check-input:checked {
    background-color: var(--nsr-accent);
    border-color: var(--nsr-accent);
}
.form-check-input:focus {
    border-color: var(--nsr-accent);
    box-shadow: 0 0 0 0.2rem var(--nsr-accent-soft);
}

/* A standard form-actions row (submit + cancel). Used at the bottom of every
 * form. We expose this as a class so the templates can stay short. */
.nsr-form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nsr-border);
}

/* Identifier table inside the item form: keep it borderless but tighten
 * vertical rhythm so dense forms don't grow taller than they need to. */
.nsr-identifier-table th,
.nsr-identifier-table td { padding: 0.35rem 0.5rem; }
.nsr-identifier-table th { color: var(--nsr-text-dim); }

/* ---------------------------------------------------------------- *
 * 8. Badges — admin-style, subtle palette
 * ---------------------------------------------------------------- */

/* Base: every badge is small caps, slightly tracked, semi-bold. */
.badge {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.32em 0.6em;
    border-radius: 0.25rem;
    vertical-align: middle;
}

/* Status colours: soft fills with full-strength text.
 * These intentionally override Bootstrap's vivid backgrounds because an
 * admin table looks unbearable when every status badge is a fully-saturated
 * green/red/yellow. */
.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--nsr-success-soft) !important;
    color: #6ed59a !important;
}
.badge.bg-danger,
.badge.text-bg-danger {
    background-color: var(--nsr-danger-soft) !important;
    color: #f08585 !important;
}
.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--nsr-warning-soft) !important;
    color: #e8c270 !important;
}
.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--nsr-info-soft) !important;
    color: #b1bdd0 !important;
}
.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: var(--nsr-surface-3) !important;
    color: var(--nsr-text-dim) !important;
}

/* Larger emphasis size used in transfer/certificate page headers. */
.badge.fs-6 {
    font-size: 0.82rem !important;
    padding: 0.4em 0.7em;
}

/* Convenience "accent" pill — used in a few places for an active filter or
 * a current-period chip. */
.badge.bg-accent {
    background-color: var(--nsr-accent-soft) !important;
    color: #f0b1b0 !important;
}

/* ---------------------------------------------------------------- *
 * 9. Alerts — soften, align with badge palette
 * ---------------------------------------------------------------- */

.alert {
    border: 1px solid var(--nsr-border);
    background-color: var(--nsr-surface-2);
    color: var(--nsr-text);
}
.alert-success { border-color: var(--nsr-success); background-color: var(--nsr-success-soft); }
.alert-danger  { border-color: var(--nsr-danger);  background-color: var(--nsr-danger-soft); }
.alert-warning { border-color: var(--nsr-warning); background-color: var(--nsr-warning-soft); color: var(--nsr-text); }
.alert-info    { border-color: var(--nsr-border-strong); background-color: var(--nsr-info-soft); }
.alert-secondary {
    border-color: var(--nsr-border);
    background-color: var(--nsr-surface-2);
    color: var(--nsr-text-dim);
}

/* ---------------------------------------------------------------- *
 * 10. Breadcrumbs, pagination, misc
 * ---------------------------------------------------------------- */

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--nsr-text-muted);
    --bs-breadcrumb-item-active-color: var(--nsr-text);
    font-size: 0.8rem;
    margin-bottom: 1rem;
}
.breadcrumb-item a { color: var(--nsr-text-dim); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--nsr-text); text-decoration: underline; }

.pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--nsr-border);
    --bs-pagination-color: var(--nsr-text-dim);
    --bs-pagination-hover-bg: var(--nsr-surface-2);
    --bs-pagination-hover-border-color: var(--nsr-border);
    --bs-pagination-hover-color: var(--nsr-text);
    --bs-pagination-active-bg: var(--nsr-accent);
    --bs-pagination-active-border-color: var(--nsr-accent);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--nsr-text-muted);
    --bs-pagination-disabled-border-color: var(--nsr-border);
}

code { color: var(--nsr-text); }
.text-secondary code { color: var(--nsr-text-dim); }
hr { border-color: var(--nsr-border); opacity: 0.7; }