/* ==========================================================================
   Komunidad EPR Platform — brand theme

   Palette taken from the Komunidad mark (images/k_color.svg), whose gradient
   runs deep navy -> slate -> petrol -> teal:

       #1F3556  ->  #21495F  ->  #1F7079  ->  #2BA093

   Text-facing accents are pulled from the Komunidad platform's own tokens
   (--accent #1d969e) rather than the mark's mint end, which fails contrast
   on white for small text and controls.

   Loaded by base.html and by every standalone auth page, so the sidebar,
   header, and sign-in screens agree on one palette.
   ========================================================================== */

:root {
    /* Brand gradient stops, straight off the mark */
    --k-navy:        #1F3556;
    --k-slate:       #21495F;
    --k-petrol:      #1F7079;
    --k-teal:        #2BA093;
    --k-gradient:    linear-gradient(135deg, #1F3556 0%, #21495F 42%, #1F7079 70%, #2BA093 100%);
    --k-gradient-h:  linear-gradient(90deg, #1F3556 0%, #21495F 42%, #1F7079 70%, #2BA093 100%);
    /* Deep end only — for panels that sit over imagery (map controls, overlays),
       where the teal end of the full gradient would wash out white text. */
    --k-gradient-dark: linear-gradient(195deg, #21495F 0%, #1F3556 100%);

    /* Accents safe for text and small controls */
    --k-accent:      #1d969e;
    --k-accent-dark: #17787f;
    --k-accent-ink:  #135c62;
    --k-accent-soft: #eaf6f7;
    --k-accent-line: #a9d9dd;

    /* Surfaces */
    --k-paper:       #f4f7f8;
    --k-surface:     #ffffff;
    --k-surface-2:   #fafcfc;
    --k-sunk:        #eef2f4;

    /* Ink */
    --k-ink:         #17262b;
    --k-ink-2:       #41545c;
    --k-ink-3:       #6b7a84;

    /* Rules */
    --k-rule:        #e2eaec;
    --k-rule-strong: #cfdade;

    /* Categorical chart series. Brand teal leads; the remaining three are the
       hues needed to keep four series tellable apart — a navy-to-teal-only ramp
       cannot do it. Fixed order, never cycled. Validated against the white card
       surface: lightness band, chroma floor, CVD separation (worst adjacent
       deutan ΔE 12.5), normal-vision floor (16.8), and 3:1 contrast all pass. */
    --k-series-1:    #009AA2;
    --k-series-2:    #6B5BC5;
    --k-series-3:    #C4801F;
    --k-series-4:    #C24D6E;

    /* Metrics */
    --k-radius:      10px;
    --k-radius-lg:   16px;
    --k-ring:        0 0 0 3px rgba(29, 150, 158, .16);
    --k-shadow:      0 1px 2px rgba(20, 60, 66, .04), 0 4px 16px rgba(20, 60, 66, .06);
    --k-shadow-lg:   0 2px 8px rgba(20, 60, 66, .06), 0 20px 48px rgba(20, 60, 66, .10);

    /* Bootstrap 5 overrides so stock components inherit the brand */
    --bs-primary:      #1d969e;
    --bs-primary-rgb:  29, 150, 158;
    --bs-link-color:   #1d969e;
    --bs-link-hover-color: #135c62;
}

body {
    background-color: var(--k-paper);
    color: var(--k-ink);
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", sans-serif;
}

/* --------------------------------------------------------------------------
   Sidebar — the brand gradient carries the navigation
   -------------------------------------------------------------------------- */

.sidebar {
    background: var(--k-gradient) !important;
    color: #ffffff !important;
    border-right: none !important;
    box-shadow: 2px 0 18px rgba(20, 60, 66, .18) !important;
}

.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* The white lockup reads on the gradient; the colour one does not. */
.sidebar-logo {
    max-width: 78%;
    height: auto;
}

.burger-menu,
.burger-menu svg line {
    color: #ffffff;
    stroke: #ffffff;
}

.sidebar a,
.sidebar a:visited {
    color: rgba(255, 255, 255, .86) !important;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.sidebar a:hover,
.sidebar a:focus {
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
    border-left-color: var(--k-teal);
}

.sidebar a.active,
.sidebar .sidebar-item.active {
    background: rgba(255, 255, 255, .16) !important;
    color: #ffffff !important;
    border-left-color: var(--k-teal);
}

.sidebar .icon {
    fill: rgba(255, 255, 255, .9) !important;
    flex: 0 0 24px;
}

.sidebar a:hover .icon,
.sidebar a.active .icon {
    fill: #ffffff !important;
}

.sidebar-subitem {
    color: rgba(255, 255, 255, .78) !important;
}

.sidebar-subitem:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Header / footer
   -------------------------------------------------------------------------- */

.header {
    background: var(--k-surface) !important;
    color: var(--k-ink) !important;
    border-bottom: 1px solid var(--k-rule);
    box-shadow: 0 1px 3px rgba(20, 60, 66, .06) !important;
}

.header .fa-user-circle {
    color: var(--k-accent) !important;
}

.header .btn-outline-dark {
    color: var(--k-accent-dark);
    border-color: var(--k-accent-line);
}

.header .btn-outline-dark:hover {
    background: var(--k-accent);
    border-color: var(--k-accent);
    color: #ffffff;
}

.footer {
    color: var(--k-ink-3);
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.btn-primary,
.btn-dark {
    background-color: var(--k-accent);
    border-color: var(--k-accent);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--k-accent-dark);
    border-color: var(--k-accent-dark);
    color: #ffffff;
}

.btn-outline-primary {
    color: var(--k-accent-dark);
    border-color: var(--k-accent);
}

.btn-outline-primary:hover {
    background-color: var(--k-accent);
    border-color: var(--k-accent);
    color: #ffffff;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    border-color: var(--k-accent);
    box-shadow: var(--k-ring);
}

a {
    color: var(--k-accent);
}

a:hover {
    color: var(--k-accent-ink);
}

.nav-tabs .nav-link.active {
    color: var(--k-accent-dark);
    border-color: var(--k-rule) var(--k-rule) var(--k-surface);
}

.nav-pills .nav-link.active,
.page-item.active .page-link {
    background-color: var(--k-accent);
    border-color: var(--k-accent);
}

.page-link {
    color: var(--k-accent-dark);
}

.table thead th {
    background-color: var(--k-sunk);
    color: var(--k-ink);
    border-bottom-color: var(--k-rule-strong);
}

.progress-bar,
.badge.bg-primary {
    background-color: var(--k-accent) !important;
}

.form-check-input:checked {
    background-color: var(--k-accent);
    border-color: var(--k-accent);
}

/* --------------------------------------------------------------------------
   Shared auth-page chrome (login, forgot password, MFA, password change)
   -------------------------------------------------------------------------- */

.k-auth {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--k-gradient);
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", sans-serif;
    color: var(--k-ink);
    position: relative;
    overflow: hidden;
}

/* Slow drift across the brand gradient — motion without a second palette. */
.k-auth::before {
    content: '';
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(38% 46% at 22% 28%, rgba(43, 160, 147, .38), transparent 70%),
        radial-gradient(34% 42% at 78% 72%, rgba(31, 112, 121, .34), transparent 70%),
        radial-gradient(30% 38% at 62% 18%, rgba(31, 53, 86, .30), transparent 70%);
    animation: kDrift 22s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes kDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .k-auth::before { animation: none; }
}

.k-auth-card {
    position: relative;
    z-index: 1;
    background: var(--k-surface);
    border: 1px solid var(--k-rule);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-shadow-lg);
    padding: 36px 32px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

/* The gradient hairline ties the card back to the mark. */
.k-auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0;
    background: var(--k-gradient-h);
}

.k-auth-logo {
    width: 210px;
    max-width: 80%;
    height: auto;
    display: block;
    margin: 4px auto 18px;
}

.k-auth-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--k-ink);
    margin: 0 0 6px;
}

.k-auth-sub {
    font-size: .85rem;
    color: var(--k-ink-3);
    margin: 0 0 22px;
}