/*
    My PBX Assistant — portal theme.

    Built on the studio palette, applied 60-30-10: off-white carries the page, sage green carries
    structure (navigation, headers, secondary controls), terracotta is reserved for the few things a
    customer is meant to act on. Spending terracotta on ordinary buttons is what turns an accent into
    wallpaper, so there is deliberately very little of it.

    Body text is always charcoal on off-white. White on terracotta appears only at heavy weights,
    where it clears contrast comfortably; anywhere lighter uses charcoal instead.
*/

:root {
    --pbx-terracotta: #C25E43;
    --pbx-terracotta-dark: #A34C34;
    --pbx-terracotta-tint: #F6E7E2;

    --pbx-sage: #7A8D74;
    --pbx-sage-dark: #63755E;
    --pbx-sage-tint: #E8EDE6;

    --pbx-base: #F4F0EA;
    --pbx-surface: #FFFFFF;

    --pbx-charcoal: #3A3A35;
    --pbx-charcoal-soft: #6B6B63;
    --pbx-border: #DCD6CC;

    /* Bootstrap reads these, so components inherit the palette instead of being overridden one by
       one. The rgb triples are what its rgba() utilities interpolate into. */
    --bs-body-bg: var(--pbx-base);
    --bs-body-color: var(--pbx-charcoal);
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --bs-primary: var(--pbx-terracotta);
    --bs-primary-rgb: 194, 94, 67;
    --bs-secondary: var(--pbx-sage);
    --bs-secondary-rgb: 122, 141, 116;
    --bs-secondary-color: var(--pbx-charcoal-soft);

    --bs-border-color: var(--pbx-border);
    --bs-link-color: var(--pbx-terracotta);
    --bs-link-hover-color: var(--pbx-terracotta-dark);
    --bs-link-color-rgb: 194, 94, 67;

    --bs-emphasis-color: var(--pbx-charcoal);
    --bs-heading-color: var(--pbx-charcoal);
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background-color: var(--pbx-base);
    color: var(--pbx-charcoal);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pbx-charcoal);
    letter-spacing: -0.01em;
}

/*
    ---------- Navigation ----------

    Scoped to .portal rather than styling .navbar globally. The signed-in application wears a solid
    sage bar with white text; the public site wears an off-white one with charcoal text. When these
    rules were unscoped, the public header adopted the portal's colours the moment it started using
    Bootstrap's .navbar for its menu — white links on an off-white bar, which is to say no visible
    links at all. Whichever way that is fixed, it should not be fixed by two stylesheets escalating
    !important at each other.
*/

.portal .navbar {
    background-color: var(--pbx-sage) !important;
    border-bottom: 1px solid var(--pbx-sage-dark) !important;
    box-shadow: none !important;
}

.portal .navbar .navbar-brand,
.portal .navbar .nav-link {
    color: #FFFFFF !important;
    font-weight: 500;
}

.portal .navbar .navbar-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.portal .navbar .nav-link:hover,
.portal .navbar .nav-link:focus {
    color: var(--pbx-base) !important;
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.portal .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.portal .navbar-toggler-icon {
    /* Recoloured to white so the burger reads against sage rather than disappearing into it. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Cards and surfaces ---------- */

.card {
    background-color: var(--pbx-surface);
    border: 1px solid var(--pbx-border);
    border-radius: 0.5rem;
}

.card-header {
    background-color: var(--pbx-sage-tint);
    border-bottom: 1px solid var(--pbx-border);
    color: var(--pbx-charcoal);
    font-weight: 600;
}

.list-group-item {
    background-color: var(--pbx-surface);
    border-color: var(--pbx-border);
    color: var(--pbx-charcoal);
}

.table {
    --bs-table-bg: var(--pbx-surface);
    --bs-table-color: var(--pbx-charcoal);
    --bs-table-border-color: var(--pbx-border);
}

.table > thead {
    color: var(--pbx-charcoal-soft);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

/* ---------- Buttons ---------- */

/* Terracotta is the 10%: it marks the one thing on a page worth doing. White on it is safe only at
   this weight, which is why the rule sets it rather than leaving it to Bootstrap. */
.btn-primary {
    --bs-btn-bg: var(--pbx-terracotta);
    --bs-btn-border-color: var(--pbx-terracotta);
    --bs-btn-hover-bg: var(--pbx-terracotta-dark);
    --bs-btn-hover-border-color: var(--pbx-terracotta-dark);
    --bs-btn-active-bg: var(--pbx-terracotta-dark);
    --bs-btn-active-border-color: var(--pbx-terracotta-dark);
    --bs-btn-disabled-bg: var(--pbx-terracotta);
    --bs-btn-disabled-border-color: var(--pbx-terracotta);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--pbx-terracotta-dark);
    --bs-btn-border-color: var(--pbx-terracotta);
    --bs-btn-hover-bg: var(--pbx-terracotta);
    --bs-btn-hover-border-color: var(--pbx-terracotta);
    --bs-btn-active-bg: var(--pbx-terracotta-dark);
    --bs-btn-active-border-color: var(--pbx-terracotta-dark);
    font-weight: 600;
}

.btn-secondary {
    --bs-btn-bg: var(--pbx-sage);
    --bs-btn-border-color: var(--pbx-sage);
    --bs-btn-hover-bg: var(--pbx-sage-dark);
    --bs-btn-hover-border-color: var(--pbx-sage-dark);
    --bs-btn-active-bg: var(--pbx-sage-dark);
    font-weight: 600;
}

.btn-outline-secondary {
    --bs-btn-color: var(--pbx-charcoal);
    --bs-btn-border-color: var(--pbx-border);
    --bs-btn-hover-bg: var(--pbx-sage-tint);
    --bs-btn-hover-border-color: var(--pbx-sage);
    --bs-btn-hover-color: var(--pbx-charcoal);
    --bs-btn-active-bg: var(--pbx-sage-tint);
    --bs-btn-active-color: var(--pbx-charcoal);
}

.btn-link {
    --bs-btn-color: var(--pbx-terracotta-dark);
    --bs-btn-hover-color: var(--pbx-terracotta);
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--pbx-sage);
    box-shadow: 0 0 0 0.2rem rgba(122, 141, 116, 0.35);
}

.form-check-input:checked {
    background-color: var(--pbx-sage);
    border-color: var(--pbx-sage-dark);
}

/* ---------- Tabs ---------- */

.nav-tabs {
    border-bottom-color: var(--pbx-border);
}

.nav-tabs .nav-link {
    color: var(--pbx-charcoal-soft);
    border: 1px solid transparent;
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    border-color: transparent transparent var(--pbx-sage);
    color: var(--pbx-charcoal);
    isolation: auto;
}

/* The active tab is where you are, not something to do, so it is marked in sage rather than
   spending the accent colour on it. */
.nav-tabs .nav-link.active {
    background-color: var(--pbx-surface);
    border-color: var(--pbx-border) var(--pbx-border) var(--pbx-surface);
    border-top: 2px solid var(--pbx-sage);
    color: var(--pbx-charcoal);
    font-weight: 600;
}

/* ---------- Badges and alerts ---------- */

/*
    Bootstrap's stock green and red are the one thing that gives away a repainted template — they sit
    outside the palette entirely and pull the eye harder than the accent does. Brought into the family:
    a healthy registration is sage, a broken one is a deepened terracotta, and the amber is the same
    one the warning alerts use.

    Deepened rather than the accent itself, deliberately. Terracotta means "act on this", and a failed
    registration is exactly that, but it must not be mistaken for a button.
*/
.badge.bg-success {
    background-color: var(--pbx-sage) !important;
}

.badge.bg-danger {
    background-color: #A34C34 !important;
}

.badge.bg-warning {
    background-color: #D9B071 !important;
    color: var(--pbx-charcoal) !important;
}

.badge.bg-secondary {
    background-color: var(--pbx-sage) !important;
}

.badge.bg-light {
    background-color: var(--pbx-sage-tint) !important;
    color: var(--pbx-charcoal) !important;
    font-weight: 500;
}

.alert-success {
    background-color: var(--pbx-sage-tint);
    border-color: var(--pbx-sage);
    color: var(--pbx-charcoal);
}

.alert-warning {
    background-color: #FBF1DE;
    border-color: #D9B071;
    color: var(--pbx-charcoal);
}

.alert-danger {
    background-color: var(--pbx-terracotta-tint);
    border-color: var(--pbx-terracotta);
    color: #7E3524;
}

.text-secondary {
    color: var(--pbx-charcoal-soft) !important;
}

/* ---------- Icons ---------- */

/*
    Sized in ems so an icon tracks whatever text it sits beside, and inheriting currentColor so it
    takes the colour of that text rather than needing a rule per context.
*/
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.icon-lg {
    width: 1.5em;
    height: 1.5em;
}

.nav-link .icon,
.btn .icon {
    margin-right: 0.35em;
}

.nav-tabs .nav-link .icon {
    color: var(--pbx-sage);
}

.nav-tabs .nav-link.active .icon {
    color: var(--pbx-terracotta);
}

/* Status colours, kept separate from the accent so "good" never reads as "do this". */
.icon-ok { color: var(--pbx-sage); }
.icon-warn { color: #B07D2A; }
.icon-bad { color: var(--pbx-terracotta); }

/* ---------- Footer ---------- */

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 60px;
    background-color: var(--pbx-base);
    border-top: 1px solid var(--pbx-border) !important;
    color: var(--pbx-charcoal-soft) !important;
}

.footer a {
    color: var(--pbx-charcoal-soft);
}