/* =========================================================================
   SOVEREIGN ELITE — application layer.
   Loaded after site.css and Bootstrap. Aligns the framework defaults and
   shared UI primitives with the CB Group mobile app's design language:
   slate charcoal, muted bronze, linen ground, Inter, 4pt/8pt radii.
   ========================================================================= */

/* --- Typography ------------------------------------------------------- */
body,
.btn,
.form-control,
.form-select,
input,
textarea,
select,
button {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3 {
    letter-spacing: -0.03em;
}

h4, h5, h6 {
    letter-spacing: -0.015em;
    font-weight: 700;
}

/* Small caps labels — the app uses these for every field and section header */
label,
.form-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Buttons ---------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.875rem 1.5rem;
    box-shadow: none;
    transition: var(--transition-smooth);
}

.btn-primary,
.btn-dark {
    background-color: var(--primary-navy);
    border-color: var(--primary-navy);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--secondary-gold);
    border-color: var(--secondary-gold);
    color: #fff;
}

.btn-outline-primary,
.btn-outline-dark {
    border: 1.5px solid var(--primary-navy);
    color: var(--primary-navy);
    background: transparent;
}

.btn-outline-primary:hover,
.btn-outline-dark:hover {
    background-color: var(--primary-navy);
    border-color: var(--primary-navy);
    color: #fff;
}

.btn-secondary {
    background-color: var(--secondary-gold);
    border-color: var(--secondary-gold);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #9a7448;
    border-color: #9a7448;
    color: #fff;
}

.btn-link {
    color: var(--secondary-gold);
    text-decoration: none;
}

.btn:focus-visible,
.btn:focus {
    box-shadow: 0 0 0 3px rgba(184, 145, 102, 0.28);
}

/* Bootstrap's pill buttons fight the app's tailored 4pt corner. Badges keep
   their pill shape — this is scoped to buttons only. */
.btn.rounded-pill {
    border-radius: var(--radius-sm) !important;
}

/* --- Inputs ----------------------------------------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="tel"],
textarea,
select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background-color: var(--bg-surface);
    color: var(--text-main);
    font-size: 0.9375rem;
    padding: 0.875rem 1rem;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--secondary-gold);
    box-shadow: 0 0 0 3px rgba(184, 145, 102, 0.16);
    outline: none;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}

/* --- Surfaces --------------------------------------------------------- */
.card,
.modal-content,
.dropdown-menu {
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    background-color: var(--bg-surface);
}

.dropdown-item {
    font-size: 0.9375rem;
    padding: 0.625rem 1rem;
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--bg-subtle);
    color: var(--text-main);
}

.table {
    --bs-table-hover-bg: var(--bg-subtle);
    color: var(--text-main);
}

.table > thead th {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
}

.table > tbody td {
    border-color: var(--line);
    vertical-align: middle;
}

hr {
    border-color: var(--line);
    opacity: 1;
}

a {
    color: var(--secondary-gold);
}

a:hover {
    color: #9a7448;
}

/* --- Selection & scrollbar -------------------------------------------- */
::selection {
    background: rgba(184, 145, 102, 0.24);
    color: var(--text-main);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #d3cac2 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d3cac2;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-gold);
    background-clip: content-box;
    border: 3px solid transparent;
}

/* --- Blazor error banner, in the same voice ---------------------------- */
#blazor-error-ui {
    background: var(--primary-navy);
    color: #fff;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    box-shadow: 0 -4px 16px rgba(24, 31, 33, 0.16);
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: var(--secondary-gold);
}