/*
 * Colours come from web.whatfbo.com, so an FBO manager moving between the
 * public listing and the portal that edits it sees one product rather than
 * two. LAYOUT IS UNTOUCHED -- only the palette changed; every width, spacing
 * and Bootstrap class is exactly as it was.
 *
 * The purple was inherited from the FlutterFlow build and never belonged to
 * the brand. Navy carries structure, teal is the action colour, matching the
 * site: its .btn is teal and the "FBO" in its wordmark is teal.
 */
:root {
    --sidebar-width: 270px;

    /* The site's palette, verbatim. */
    --navy:          #19374F;
    --navy-deep:     #12293C;
    --teal:          #249689;
    --teal-deep:     #1E7F74;
    --ink:           #14181B;
    --ink-2:         #57636C;
    --ground:        #F1F4F8;
    --rule:          #DCE3EA;

    /* Kept as names the existing rules already use, so nothing below had to
       be rewritten to take the new colours. */
    --primary:       var(--navy);
    --primary-light: #E8EEF4;
    --sidebar-bg:    #FFFFFF;
    --sidebar-border: var(--rule);
}

body { background: var(--ground); color: var(--ink); }

/* Bootstrap draws its own components from these, so overriding them recolours
   the whole portal without touching a single template. */
:root {
    --bs-primary: #19374F;
    --bs-primary-rgb: 25, 55, 79;
    --bs-link-color: #19374F;
    --bs-link-color-rgb: 25, 55, 79;
    --bs-link-hover-color: #12293C;
    --bs-body-color: #14181B;
    --bs-secondary-color: #57636C;
    --bs-border-color: #DCE3EA;
}

/* ── Sidebar ── */
#sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.1;
}
.sidebar-brand-sub {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--teal);
}

.nav-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6c757d;
    padding: 0.25rem 0.75rem;
    list-style: none;
}

#sidebar .nav-link {
    color: #212529;
    border-radius: 8px;
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
    display: flex;
    align-items: center;
}
#sidebar .nav-link:hover { background: #e9ecef; }
#sidebar .nav-link.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}
#sidebar .nav-link.active i { color: var(--primary); }

.sidebar-user-info { min-width: 0; }
.sidebar-user-info .fw-semibold,
.sidebar-user-info .text-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Page content ── */
#page-content { min-height: 100vh; }

.page-header {
    background: #fff;
    border-bottom: 1px solid var(--sidebar-border);
    padding: 1.25rem 1.5rem;
}
.page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }

/* ── Cards ── */
.card { border: 1px solid var(--sidebar-border); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.card-header { background: #fff; font-weight: 600; }

/* ── KPI cards ── */
.kpi-card { border-radius: 12px; }
.kpi-card .kpi-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
}
.kpi-card .kpi-value { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.kpi-card .kpi-label { font-size: 0.8rem; color: #6c757d; margin-top: 2px; }

/* ── Status badges ── */
.badge-status-approved  { background: #d1fae5; color: #065f46; }
.badge-status-pending   { background: #fef9c3; color: #854d0e; }
.badge-status-rejected  { background: #fee2e2; color: #991b1b; }
.badge-status-submitted { background: #dbeafe; color: #1e40af; }

/* ── Review card ── */
.review-card { border-radius: 10px; }
.review-card .reviewer-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--primary-light); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.review-reply { background: #f8f9fa; border-left: 3px solid var(--primary); border-radius: 0 6px 6px 0; }

/* ── Audit form ── */
.audit-section { border-left: 4px solid var(--primary); }

/* ── Document tile ── */
.doc-tile {
    width: 140px; border-radius: 10px;
    background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 1rem; text-align: center;
}
.doc-tile .doc-icon {
    width: 48px; height: 48px; border-radius: 8px;
    background: #dc3545; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin: 0 auto .5rem;
}

/* The signed-out screens moved to auth.css and the site's chrome; the
   navy-gradient .login-wrapper and its 420px card are gone with them. */

/* ── Pagination ── */
.pagination .page-link { color: var(--primary); }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ── Utilities ── */
/* Teal, because on the site the primary button is teal and navy is structure.
   Keeping buttons navy here would make the portal read a shade duller than
   the pages it edits. */
.btn-primary { background: var(--teal); border-color: var(--teal); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--teal-deep) !important; border-color: var(--teal-deep) !important;
}
.btn-outline-primary { color: var(--navy); border-color: var(--navy); }
.btn-outline-primary:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.text-primary { color: var(--primary) !important; }

/* ── Brand: fonts and shape ───────────────────────────────────────────────────
 *
 * The palette above already came from web.whatfbo.com. What still gave the
 * portal away as a different product was everything the palette does not
 * carry: Bootstrap's system font against the site's Barlow, and Bootstrap's
 * rounded corners against a site that is square throughout.
 *
 * Still no template edits, and still no layout changes -- these are type and
 * radius only, which is why they can sit at the end of the file and apply to
 * every screen at once. Anything already given an explicit radius for a reason
 * (the sidebar nav pills, the KPI tiles) keeps it; the rest goes square.
 */
body,
.form-control, .form-select, .btn, .dropdown-menu, .nav-link, .table {
    font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

/* The site sets headings in Barlow Condensed. It is the single strongest
   signal that this is the same product as the page they arrived from. */
h1, h2, h3, h4, h5, h6,
.page-header h1, .sidebar-brand-title, .card-header, .kpi-value {
    font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
    letter-spacing: 0.005em;
}
h1, h2, h3, .page-header h1 { color: var(--navy); font-weight: 600; }
.page-header h1 { font-size: 1.75rem; }

/* The wordmark, two-tone, as it is everywhere else. */
.sidebar-brand-title { font-size: 1.7rem; font-weight: 700; }
.sidebar-brand-title .wm { color: var(--teal); }
.sidebar-brand-sub {
    font-family: "Barlow", Arial, sans-serif;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
}

/* Square, like the site. Bootstrap draws almost everything from these three,
   so the whole portal follows without a template being touched. */
:root {
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;
}
.card, .btn, .form-control, .form-select, .alert, .dropdown-menu,
.list-group-item, .modal-content, .input-group-text, .badge, .nav-tabs .nav-link,
.page-link, .toast, .table-responsive { border-radius: 0 !important; }
/* Two exceptions, both deliberate: the sidebar's nav pills read as pills, and
   a round avatar is a round avatar. */
#sidebar .nav-link, .rounded-circle, .kpi-card .kpi-icon { border-radius: 8px !important; }
.rounded-circle { border-radius: 50% !important; }

/* The site's primary button is teal and squared; Bootstrap's was navy because
   --bs-primary is navy, which is right for links and wrong for the one thing
   on a page you are meant to press. */
.btn-primary, .btn-primary:focus {
    background: var(--teal); border-color: var(--teal); color: #fff;
    font-family: "Barlow Condensed", "Barlow", Arial, sans-serif;
    font-weight: 600; letter-spacing: 0.03em;
}
.btn-primary:hover, .btn-primary:active {
    background: var(--teal-deep) !important; border-color: var(--teal-deep) !important;
}
.btn-check:checked + .btn-primary { background: var(--teal-deep); border-color: var(--teal-deep); }
.form-control:focus, .form-select:focus {
    border-color: var(--teal); box-shadow: 0 0 0 3px rgba(36, 150, 137, .15);
}