/* ==========================================================================
   Synteny Style Guide — Auth App Overrides
   Layers on top of Bootstrap LUX (Bootswatch) theme.
   All brand colours are defined as CSS custom properties in Section A
   for easy reconfiguration.
   ========================================================================== */

/* --- A. Brand Variables -------------------------------------------------- */
:root {
    --synteny-dark-green: #15331F;
    --synteny-light-green: #BEDCC3;
    --synteny-light-blue: #CCE6F1;
    --synteny-beige: #F2F3EC;
    --synteny-muted: #5a7a63;
    --synteny-white: #ffffff;

    /* Bootstrap variable overrides */
    --bs-primary: var(--synteny-dark-green);
    --bs-primary-rgb: 21, 51, 31;
    --bs-secondary: var(--synteny-light-green);
    --bs-secondary-rgb: 190, 220, 195;
    --bs-info: var(--synteny-light-blue);
    --bs-info-rgb: 204, 230, 241;
    --bs-light: var(--synteny-beige);
    --bs-light-rgb: 242, 243, 236;
    --bs-body-bg: var(--synteny-beige);
    --bs-body-color: var(--synteny-dark-green);
    --bs-link-color: var(--synteny-dark-green);
    --bs-link-hover-color: var(--synteny-muted);
}

/* --- B. Typography ------------------------------------------------------- */
body {
    font-family: 'Inter', sans-serif !important;
    font-weight: 300;
    font-size: 16px;
    color: var(--synteny-dark-green);
    background-color: var(--synteny-beige);
}

/* Headers — Instrument Serif */
h1,
h2,
.display-4 {
    font-family: 'Instrument Serif', serif !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    color: var(--synteny-dark-green);
}

/* App title — Playfair Display (editorial serif, similar to IvyPresto) */
.synteny-title {
    font-family: 'Playfair Display', 'Instrument Serif', serif !important;
    font-weight: 400 !important;
    font-style: normal;
}

/* Subheader 1 — Inter Light 20px */
h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 300 !important;
    font-size: 20px !important;
    color: var(--synteny-dark-green);
}

/* Subheader 2 — Inter Medium 16px */
h4,
h5 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    color: var(--synteny-dark-green);
}

h6 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: var(--synteny-dark-green);
}

/* --- C. Primary Button --------------------------------------------------- */
.btn-primary {
    background-color: var(--synteny-dark-green) !important;
    border-color: var(--synteny-dark-green) !important;
    color: var(--synteny-white) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #1e4a2d !important;
    border-color: #1e4a2d !important;
    color: var(--synteny-white) !important;
}

.btn-primary:active {
    background-color: #0e2816 !important;
    border-color: #0e2816 !important;
}

/* Outline primary */
.btn-outline-primary {
    color: var(--synteny-dark-green) !important;
    border-color: var(--synteny-dark-green) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--synteny-dark-green) !important;
    color: var(--synteny-white) !important;
}

/* --- D. Secondary Button ------------------------------------------------- */
.btn-secondary {
    background-color: var(--synteny-light-green) !important;
    border-color: var(--synteny-light-green) !important;
    color: var(--synteny-dark-green) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #a8d0ae !important;
    border-color: #a8d0ae !important;
    color: var(--synteny-dark-green) !important;
}

/* Outline secondary (password toggle, sign-out) */
.btn-outline-secondary {
    color: var(--synteny-muted) !important;
    border-color: var(--synteny-muted) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--synteny-muted) !important;
    color: var(--synteny-white) !important;
}

/* --- E. Other Button Variants -------------------------------------------- */
/* Warning (leave league) — keep recognizable but harmonise */
.btn-outline-warning {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Danger buttons — keep Bootstrap red for UX clarity */
.btn-danger,
.btn-outline-danger {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* Link-style button (resend code) */
.btn-link {
    color: var(--synteny-dark-green) !important;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.btn-link:hover {
    color: var(--synteny-muted) !important;
}

/* General button typography */
.btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* --- F. Badges ----------------------------------------------------------- */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--synteny-dark-green) !important;
    color: var(--synteny-white) !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: var(--synteny-light-green) !important;
    color: var(--synteny-dark-green) !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--synteny-light-blue) !important;
    color: var(--synteny-dark-green) !important;
}

/* --- G. Alerts ----------------------------------------------------------- */
.alert-info {
    background-color: var(--synteny-light-blue) !important;
    border-color: #b0d4e6 !important;
    color: var(--synteny-dark-green) !important;
}

/* alert-success and alert-danger keep Bootstrap defaults for semantic clarity */

/* --- H. Text Utilities --------------------------------------------------- */
.text-primary {
    color: var(--synteny-dark-green) !important;
}

.text-muted {
    color: var(--synteny-muted) !important;
}

.text-secondary {
    color: var(--synteny-muted) !important;
}

a {
    color: var(--synteny-dark-green);
}

a:hover {
    color: var(--synteny-muted);
}

/* --- I. Backgrounds ------------------------------------------------------ */
.bg-light {
    background-color: var(--synteny-beige) !important;
}

/* --- J. Cards ------------------------------------------------------------ */
.card {
    background-color: var(--synteny-white);
    border: 1px solid rgba(190, 220, 195, 0.4);
}

.card-header {
    background-color: var(--synteny-white);
    border-bottom: 1px solid rgba(190, 220, 195, 0.4);
}

/* --- K. Tables ----------------------------------------------------------- */
.table {
    color: var(--synteny-dark-green);
    --bs-table-color: var(--synteny-dark-green);
}

.table thead th {
    color: var(--synteny-dark-green);
    border-bottom-color: var(--synteny-light-green);
}

.table td,
.table th {
    border-color: rgba(190, 220, 195, 0.3);
}

/* --- L. Forms ------------------------------------------------------------ */
.form-control:focus,
.form-select:focus {
    border-color: var(--synteny-light-green) !important;
    box-shadow: 0 0 0 0.25rem rgba(190, 220, 195, 0.5) !important;
}

.form-control,
.form-select {
    color: var(--synteny-dark-green);
}

.form-label {
    color: var(--synteny-dark-green);
    font-weight: 400;
}

/* --- M. Nav Pills (tab navigation, sidebar links) ----------------------- */
.nav-pills .nav-link {
    color: var(--synteny-dark-green);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.nav-pills .nav-link:hover {
    color: var(--synteny-muted);
}

.nav-pills .nav-link.active {
    background-color: var(--synteny-dark-green) !important;
    color: var(--synteny-white) !important;
}

/* --- N. Sidebar ---------------------------------------------------------- */
/* Target the fixed sidebar column (bg-light vh-100 position-fixed) */
.position-fixed.vh-100 {
    background-color: var(--synteny-dark-green) !important;
    color: var(--synteny-white);
}

.position-fixed.vh-100 h4 {
    color: var(--synteny-white) !important;
}

.position-fixed.vh-100 hr {
    border-color: rgba(190, 220, 195, 0.3);
    opacity: 1;
}

.position-fixed.vh-100 .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.position-fixed.vh-100 .nav-link:hover {
    color: var(--synteny-white) !important;
    background-color: rgba(190, 220, 195, 0.15);
}

.position-fixed.vh-100 .nav-link.active {
    background-color: var(--synteny-light-green) !important;
    color: var(--synteny-dark-green) !important;
}

/* Icons inside sidebar inherit text colour */
.position-fixed.vh-100 .bi {
    color: inherit;
}

/* --- O. Modals ----------------------------------------------------------- */
.modal-content {
    background-color: var(--synteny-white);
    color: var(--synteny-dark-green);
    border: 1px solid rgba(190, 220, 195, 0.4);
}

.modal-header {
    border-bottom-color: rgba(190, 220, 195, 0.4);
}

.modal-footer {
    border-top-color: rgba(190, 220, 195, 0.4);
}

/* --- P. List Groups ------------------------------------------------------ */
.list-group-item {
    color: var(--synteny-dark-green);
    background-color: var(--synteny-white);
    border-color: rgba(190, 220, 195, 0.4);
}

/* --- Q. Misc ------------------------------------------------------------- */
/* Loading spinner */
.spinner-border.text-secondary {
    color: var(--synteny-muted) !important;
}

/* Ensure monospace code blocks still readable */
.font-monospace {
    color: var(--synteny-dark-green);
}

/* Checkbox accent */
.form-check-input:checked {
    background-color: var(--synteny-dark-green);
    border-color: var(--synteny-dark-green);
}

.form-check-input:focus {
    border-color: var(--synteny-light-green);
    box-shadow: 0 0 0 0.25rem rgba(190, 220, 195, 0.5);
}

/* Input group buttons (password toggle) */
.input-group .btn-outline-secondary {
    border-color: #ced4da !important;
    color: var(--synteny-muted) !important;
}

.input-group .btn-outline-secondary:hover {
    background-color: var(--synteny-beige) !important;
    color: var(--synteny-dark-green) !important;
}

/* Synteny AI attribution link — no link styling */
a.text-muted.text-decoration-none {
    color: var(--synteny-muted) !important;
}

a.text-muted.text-decoration-none:hover {
    color: var(--synteny-muted) !important;
    text-decoration: none !important;
}