/* ============================================================
   ZUSTCARE BRAND
   Coral #F26B4F  ·  Teal #146B6B
   ============================================================ */

:root {
    --zc-coral: #F26B4F;
    --zc-coral-dark: #D9553A;
    --zc-coral-soft: #FDE9E4;
    --zc-teal: #146B6B;
    --zc-teal-dark: #0E5050;
    --zc-teal-soft: #E3F1F1;
}

/* ------------------------------------------------------------
   TailAdmin utility overrides (login / public layouts)
   ------------------------------------------------------------ */

.bg-brand-500 {
    background-color: var(--zc-coral) !important;
}

.hover\:bg-brand-600:hover,
.bg-brand-600 {
    background-color: var(--zc-coral-dark) !important;
}

.bg-brand-950 {
    background-color: var(--zc-teal) !important;
}

.text-brand-500,
.text-brand-600,
.hover\:text-brand-600:hover {
    color: var(--zc-coral) !important;
}

.border-brand-500,
.focus\:border-brand-300:focus {
    border-color: var(--zc-coral) !important;
}

.zc-tagline {
    color: rgba(255, 255, 255, .82) !important;
}

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */

.app-sidebar .menu-item.menu-item-active {
    background: var(--zc-coral-soft);
    color: var(--zc-coral-dark);
}

.app-sidebar .menu-item.disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}

.app-sidebar .menu-soon {
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 50px;
    background: var(--zc-teal-soft);
    color: var(--zc-teal);
    margin-left: auto;
}

/* ------------------------------------------------------------
   Tabs + pills (every module)
   custom.css paints .nav-tabs links on #00263E / #e7e7e7 with a
   colour variable that is not defined on staff pages, so the
   active tab text came out the same colour as its background.
   These rules load last and give every nav-tabs / nav-pills link
   a readable foreground in both states and in dark mode.
   ------------------------------------------------------------ */

.nav.nav-tabs .nav-link,
.nav.nav-pills .nav-link {
    color: #344054 !important;
    background-color: #f2f4f7 !important;
    border: 1px solid #e4e7ec !important;
    font-weight: 500;
    opacity: 1;
}

.nav.nav-tabs .nav-link:hover,
.nav.nav-tabs .nav-link:focus,
.nav.nav-pills .nav-link:hover,
.nav.nav-pills .nav-link:focus {
    color: var(--zc-teal-dark) !important;
    background-color: var(--zc-teal-soft) !important;
    border-color: #cfe5e5 !important;
}

.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-item.show .nav-link,
.nav.nav-pills .nav-link.active,
.nav.nav-pills .show > .nav-link {
    color: #ffffff !important;
    background-color: var(--zc-teal) !important;
    border-color: var(--zc-teal) !important;
    font-weight: 600;
}

.nav.nav-tabs .nav-link.disabled,
.nav.nav-pills .nav-link.disabled {
    color: #98a2b3 !important;
    background-color: #f9fafb !important;
}

.nav.nav-tabs .nav-link .badge,
.nav.nav-pills .nav-link .badge {
    color: #fff;
}

.nav.nav-tabs {
    border-bottom-color: var(--zc-teal) !important;
}

[data-bs-theme="dark"] .nav.nav-tabs .nav-link,
[data-bs-theme="dark"] .nav.nav-pills .nav-link {
    color: #d0d5dd !important;
    background-color: #1d2939 !important;
    border-color: #344054 !important;
}

[data-bs-theme="dark"] .nav.nav-tabs .nav-link:hover,
[data-bs-theme="dark"] .nav.nav-pills .nav-link:hover {
    color: #ffffff !important;
    background-color: #0E5050 !important;
}

[data-bs-theme="dark"] .nav.nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav.nav-pills .nav-link.active {
    color: #ffffff !important;
    background-color: var(--zc-teal) !important;
    border-color: var(--zc-teal) !important;
}