/* ABQCARE brand palette, matched to the public website.
   Change a value here and every page (and every app) follows. */
:root {
    --abq-navy:       #111936;  /* headings, navigation, strong text */
    --abq-teal:       #4FA6A6;  /* icons, links, active menu items */
    --abq-teal-dark:  #3B8A8A;  /* hover state for teal */
    --abq-coral:      #DE485E;  /* primary buttons, important actions */
    --abq-coral-dark: #C93A4F;  /* hover state for coral */
    --abq-soft-teal:  #E8F3F2;  /* soft backgrounds, hover areas */
    --abq-warm-white: #FAFAF8;  /* page background */
    --abq-light-gray: #F2F4F5;  /* borders, dividers */
    --abq-text:       #303746;  /* body text */
    --abq-white:      #FFFFFF;  /* cards, surfaces */

    /* Bootstrap 5.3 hooks */
    --bs-body-bg: var(--abq-warm-white);
    --bs-body-color: var(--abq-text);
    --bs-heading-color: var(--abq-navy);
    --bs-primary: var(--abq-coral);
    --bs-primary-rgb: 222, 72, 94;
    --bs-link-color: var(--abq-teal);
    --bs-link-color-rgb: 79, 166, 166;
    --bs-link-hover-color: var(--abq-teal-dark);
    --bs-link-hover-color-rgb: 59, 138, 138;
    --bs-border-color: var(--abq-light-gray);
}

/* ---- Page frame ---------------------------------------------------------- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--abq-warm-white);
    color: var(--abq-text);
}
main { flex: 1; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--abq-navy); }

.text-muted { color: #5c6473 !important; }

/* ---- Navigation ---------------------------------------------------------- */
.navbar-portal { background-color: var(--abq-navy); }
.navbar-portal .navbar-brand { color: var(--abq-white); }
.navbar-portal .nav-link { color: rgba(255, 255, 255, .8); }
.navbar-portal .nav-link:hover,
.navbar-portal .nav-link:focus { color: var(--abq-white); }
.navbar-portal .nav-link.active {
    color: var(--abq-teal);
    font-weight: 600;
}
.navbar-portal .navbar-toggler { border-color: rgba(255, 255, 255, .3); }

.dropdown-item:active,
.dropdown-item.active { background-color: var(--abq-teal); }
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--abq-soft-teal); color: var(--abq-navy); }
.dropdown-item .bi { color: var(--abq-teal); }

/* ---- Buttons ------------------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--abq-coral);
    --bs-btn-border-color: var(--abq-coral);
    --bs-btn-hover-bg: var(--abq-coral-dark);
    --bs-btn-hover-border-color: var(--abq-coral-dark);
    --bs-btn-active-bg: var(--abq-coral-dark);
    --bs-btn-active-border-color: var(--abq-coral-dark);
    --bs-btn-disabled-bg: var(--abq-coral);
    --bs-btn-disabled-border-color: var(--abq-coral);
    --bs-btn-focus-shadow-rgb: 222, 72, 94;
}
.btn-outline-primary {
    --bs-btn-color: var(--abq-coral);
    --bs-btn-border-color: var(--abq-coral);
    --bs-btn-hover-bg: var(--abq-coral);
    --bs-btn-hover-border-color: var(--abq-coral);
    --bs-btn-active-bg: var(--abq-coral-dark);
    --bs-btn-active-border-color: var(--abq-coral-dark);
    --bs-btn-focus-shadow-rgb: 222, 72, 94;
}
.btn-outline-secondary {
    --bs-btn-color: var(--abq-navy);
    --bs-btn-border-color: #c9ced6;
    --bs-btn-hover-bg: var(--abq-soft-teal);
    --bs-btn-hover-border-color: var(--abq-teal);
    --bs-btn-hover-color: var(--abq-navy);
    --bs-btn-active-bg: var(--abq-soft-teal);
    --bs-btn-active-border-color: var(--abq-teal);
    --bs-btn-active-color: var(--abq-navy);
}
.btn-link { color: var(--abq-teal); }

/* ---- Cards, tables, forms ------------------------------------------------ */
.card {
    background: var(--abq-white);
    border-color: var(--abq-light-gray);
}
.card-header, .card-footer { border-color: var(--abq-light-gray); }

.table-light {
    --bs-table-bg: var(--abq-soft-teal);
    --bs-table-color: var(--abq-navy);
}
.table > :not(caption) > * > * { border-bottom-color: var(--abq-light-gray); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--abq-soft-teal); }

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--abq-teal);
    box-shadow: 0 0 0 .25rem rgba(79, 166, 166, .25);
}
.form-check-input:checked {
    background-color: var(--abq-teal);
    border-color: var(--abq-teal);
}
.form-text { color: #5c6473; }

/* ---- Badges -------------------------------------------------------------- */
.badge.text-bg-primary { background-color: var(--abq-coral) !important; }
.badge.text-bg-secondary { background-color: var(--abq-navy) !important; color: var(--abq-white); }
.badge.text-bg-success { background-color: var(--abq-teal) !important; }

/* ---- Home app tiles ------------------------------------------------------ */
.app-tile {
    text-decoration: none;
    color: inherit;
    transition: transform .1s, box-shadow .1s, background-color .1s;
}
.app-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(17, 25, 54, .12);
    background: var(--abq-soft-teal);
    color: inherit;
}
.app-tile .bi {
    font-size: 2.25rem;
    color: var(--abq-teal);
}
.app-tile .fw-semibold { color: var(--abq-navy); }

/* ---- Login --------------------------------------------------------------- */
.login-logo { max-height: 110px; width: auto; }
.login-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--abq-teal), var(--abq-coral));
    border-radius: 2px 2px 0 0;
}

/* ---- Footer -------------------------------------------------------------- */
footer { color: #5c6473; border-top: 1px solid var(--abq-light-gray); }