/*
 * R2B2 brand overlay — injected by nginx sub_filter into every HTML response.
 * Palette and typography sourced from r2b2.io (Helvetica Now Display, #f93 accent, #333 text).
 * No upstream template edits — overrides target selectors already present in templates/base.html.
 */

@font-face {
    font-family: HelveticaNowDisplay;
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url("https://web-cdn.r2b2.io/wp-content/themes/r2b2/public/fonts/helveticanowdisplay-regular.6a9c38.woff2") format("woff2");
}
@font-face {
    font-family: HelveticaNowDisplay;
    font-display: swap;
    font-style: normal;
    font-weight: 800;
    src: url("https://web-cdn.r2b2.io/wp-content/themes/r2b2/public/fonts/helveticanowdisplay-extrabold.93bbe3.woff2") format("woff2");
}

:root {
    --font-family: HelveticaNowDisplay, arial, helvetica, sans-serif;
    --font-family-mono: Roboto Mono;
    --font-family-numeric: Roboto Mono, HelveticaNowDisplay, arial, helvetica, sans-serif;

    --color-base-white: #FFF;

    --color-neutral-50: #fafaf9;
    --color-neutral-100: #F5F5F4;
    --color-neutral-200: #e7e5e4;
    --color-neutral-300: #D6D3D1;
    --color-neutral-400: #a8a29e;
    --color-neutral-500: #78716c;
    --color-neutral-600: #57534e;
    --color-neutral-700: #44403c;
    --color-neutral-800: #292524;
    --color-neutral-900: #1c1917;

    --color-orange-50: #FFF7ED;
    --color-orange-100: #FFEEDD;
    --color-orange-200: #FFDDBB;
    --color-orange-300: #FFCC99;
    --color-orange-400: #FFB366;
    --color-orange-500: #FF9933;
    --color-orange-600: #E57300;
    --color-orange-700: #B36B24;
    --color-orange-800: #804D1A;
    --color-orange-900: #663D14;
    --color-orange-950: #331F0A;

    --color-yellow-50: #FEFCE8;
    --color-yellow-100: #FEF9C3;
    --color-yellow-200: #FEF08A;
    --color-yellow-300: #FDE047;
    --color-yellow-400: #FACC15;
    --color-yellow-500: #EAB308;
    --color-yellow-600: #CA8A04;
    --color-yellow-700: #A16207;
    --color-yellow-800: #854D0E;
    --color-yellow-900: #713F12;
    --color-yellow-950: #422006;

    --color-red-50: #fef2f2;
    --color-red-100: #FEE2E2;
    --color-red-200: #fecaca;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;
    --color-red-800: #991b1b;

    --color-green-50: #f0fdf4;
    --color-green-100: #dcfce7;
    --color-green-200: #bbf7d0;
    --color-green-300: #86efac;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;
    --color-green-800: #166534;

    --color-lime-50: #f7fee7;
    --color-lime-200: #d9f99d;
    --color-lime-600: #65a30d;
    --color-lime-700: #4d7c0f;

    --color-emerald-50: #ecfdf5;
    --color-emerald-100: #d1fae5;
    --color-emerald-200: #a7f3d0;
    --color-emerald-500: #10b981;
    --color-emerald-600: #059669;

    --color-blue-50: #EFF6FF;
    --color-blue-100: #dbeafe;
    --color-blue-200: #bfdbfe;
    --color-blue-300: #93c5fd;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    --color-blue-900: #1e3a8a;

    --color-pink-50: #fdf2f8;
    --color-pink-100: #fce7f3;
    --color-pink-200: #fbcfe8;
    --color-pink-500: #ec4899;
    --color-pink-600: #db2777;

    --color-rose-50: #fff1f2;
    --color-rose-100: #ffe4e6;
    --color-rose-200: #fecdd3;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;

    --color-fuchsia-50: #fdf4ff;
    --color-fuchsia-100: #fae8ff;
    --color-fuchsia-200: #f5d0fe;
    --color-fuchsia-500: #d946ef;
    --color-fuchsia-600: #c026d3;

    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-200: #c7d2fe;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;

    --color-sky-50: #f0f9ff;
    --color-sky-100: #e0f2fe;
    --color-sky-200: #bae6fd;
    --color-sky-500: #0ea5e9;
    --color-sky-600: #0284c7;

    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;

    --color-cyan-50: #ecfeff;
    --color-cyan-100: #cffafe;
    --color-cyan-200: #a5f3fc;
    --color-cyan-500: #06b6d4;
    --color-cyan-600: #0891b2;

    --color-teal-50: #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;

    --color-purple-50: #FAF5FF;
    --color-purple-100: #F3E8FF;
    --color-purple-200: #E9D5FF;
    --color-purple-500: #A855F7;
    --color-purple-600: #9333EA;

    --color-success: var(--color-green-500);
    --color-error: var(--color-red-500);
    --color-warning: var(--color-orange-500);
    --color-info: var(--color-blue-500);

    --shadow-small: 0 1px 2px 0 var(--color-neutral-300);
    --shadow-medium: 0 1px 3px 0 var(--color-neutral-300);
    --shadow-large: 0 3px 8px 0 var(--color-neutral-300);
    --gradient-primary: linear-gradient(#e7e5e4, #FFF);

    --color-primary: var(--color-orange-600);
    --color-primary-hover:var(--color-orange-700);

    /* Override Bootstrap CSS variables where exposed */
    --bs-primary: var(--color-orange-600);
    --bs-primary-rgb: 229, 115, 0;
    --bs-link-color: var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
}

body {
    font-family: var(--font-family) !important;
    background: var(--color-base-white) !important;
    color: var(--color-neutral-800) !important;
}

h1,
h2,
h3,
h4,
 h5,
 h6 {
    margin: .5rem 0;
    font-weight: bold;
    line-height: 1em;
}
h1 {
    font-size: 1.5rem;
}
h2 {
    font-size: 1.4rem;
}
h3 {
    font-size: 1.25rem;
}
h4 {
    font-size: 1.20rem;
}
h5 {
    font-size: 1.15rem;
}
h6 {
    font-size: 1.1rem;
}

code {
    font-family: var(--font-family-mono);
    font-size: 1rem;
    color: var(--color-amber-600)
}

.text-italic {
    font-style: italic;
}

/* ───── Header: light background, charcoal text, orange accent border, R2B2 wordmark ───── */
.header {
    background: var(--color-neutral-100) !important;
    color: var(--color-neutral-800) !important;
    border-bottom: 3px solid var(--color-primary) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
    padding: 1.25rem 0 !important;
}
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.header h1 {
    font-size: 1.15rem;
    color: var(--color-neutral-800);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.header h1::before {
    content: "";
    display: inline-block;
    width: 124px;
    height: 24px;
    background: url("/static/r2b2-logo.svg") no-repeat left center;
    background-size: contain;
    flex-shrink: 0;
}
.header nav {
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.header nav a,
.header nav span {
    color: var(--color-neutral-800) !important;
}
.header nav a {
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 0.313rem;
    transition: color 0.15s ease, background 0.15s ease;
}
.header nav a:hover {
    color: var(--color-primary-hover) !important;
    background: var(--color-neutral-100);
}

/* ───── Cards & sections ───── */
.custom-card {
    background: var(--color-base-white) !important;
    border: 1px solid var(--color-neutral-200);
    border-radius: 0.5rem !important;
    box-shadow: none !important;
}
.custom-card h2 {
    color: var(--color-neutral-800) !important;
    font-family: var(--font-family);
    font-weight: 800;
}

/* ───── Bootstrap button overrides ───── */
.btn {
    min-width: 4rem;
    text-align: center;
    font-weight: 700;
    border-radius: .5rem;
}
.btn:focus,
.btn:active {
    box-shadow: 0 0 0 .25rem var(--color-orange-300);
}
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-base-white) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-base-white) !important;
}
/* Outline buttons render as solid brand buttons — no outline style in this UI. */
.btn-outline-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-base-white) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-base-white) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus,
.btn-outline-warning:active {
    color: var(--color-yellow-700) !important;
}
.btn-secondary,
.btn-outline-secondary {
    border: 1px solid var(--color-orange-300) !important;
    background: var(--color-orange-50) !important;
    color: var(--color-orange-700) !important;
    box-shadow: var(--shadow-light);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    border: 1px solid var(--color-orange-300) !important;
    background: var(--color-orange-100) !important;
    color: var(--color-orange-800) !important;
}
.btn-danger,
.btn-outline-danger {
    background-color: var(--color-red-600) !important;
    border-color: var(--color-red-600) !important;
    color: var(--color-base-white) !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: var(--color-red-700) !important;
    border-color: var(--color-red-700) !important;
    color: var(--color-base-white) !important;
}
/* Success buttons use the brand accent, not Bootstrap green. */
.btn-success {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-base-white) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-base-white) !important;
}
.btn-link,
a {
    color: var(--color-primary);
}
.btn-link:hover,
a:hover {
    color: var(--color-primary-hover);
}

/* ───── Breadcrumbs: "Link > Link > Current" ───── */
.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 1rem;
}
.breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
.breadcrumb-item a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}
.breadcrumb-item.active {
    color: var(--color-neutral-800);
    font-weight: 700;
}
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: var(--color-neutral-400);
}

/* ───── Tabs ───── */
.nav-tabs .nav-link {
    color: var(--color-neutral-900) !important;
}
.nav-tabs .nav-link:hover {
    border-bottom-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
.tab.active,
.nav-tabs .nav-link.active {
    border-bottom-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    font-weight: 700;
}

/* ───── Tables ───── */
th {
    background: var(--color-neutral-100) !important;
    color: var(--color-neutral-800);
}
tr:hover {
    background: var(--color-neutral-100) !important;
}

/* ───── Forms ───── */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-control:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.15rem rgba(255, 153, 51, 0.25) !important;
    outline: none;
}

/* Leave status-active/status-inactive alone — they communicate state and
   shouldn't be repainted with the brand accent. alert-info/alert-warning
   get remapped to the r2b2 palette (same hue family, brand shades). */
.alert-info {
    background: var(--color-blue-50);
    color: var(--color-blue-900);
    border: 1px solid var(--color-blue-200);
    border-left: 4px solid var(--color-blue-600);
}
.alert-warning {
    background: var(--color-yellow-50);
    color: var(--color-yellow-900);
    border: 1px solid var(--color-yellow-200);
    border-left: 4px solid var(--color-orange-500);
}

.card {
    margin-bottom: 2rem;
    padding: 1rem;
    border: none;
    border-radius: .5rem;
    box-shadow: var(--shadow-large);
}