/* ==========================================================================
   NCA MEL SYSTEM - CENTRAL THEME
   Norwegian Church Aid (Kirkens Nødhjelp)
   --------------------------------------------------------------------------
   This is the ONLY file that defines colors and brand styling.
   Every other stylesheet, page, chart and report must use the CSS variables
   below (var(--nca-primary), var(--success), ...) and never a raw HEX/RGB.

   TO UPDATE THE BRAND: edit section 1 only.
   ========================================================================== */


/* ==========================================================================
   1. OFFICIAL NCA BRAND COLORS  -  EDIT HERE
   --------------------------------------------------------------------------
   Primary color confirmed by the user from their own reference material
   (a purple table-header swatch, #621e64). Secondary and the dark shade
   are still derived/placeholder - update them if official values differ.

   Keep each *-rgb triplet in sync with its HEX value (Bootstrap uses the
   triplets for opacity utilities such as .bg-primary.bg-opacity-10).
   ========================================================================== */
:root {
    --nca-primary:        #621E64;   /* NCA purple, confirmed from reference image */
    --nca-primary-rgb:    98, 30, 100;

    --nca-secondary:      #C8102E;   /* PLACEHOLDER - official NCA secondary */
    --nca-secondary-rgb:  200, 16, 46;

    --nca-dark:           #341035;   /* darker shade of the confirmed primary purple */
    --nca-dark-rgb:       52, 16, 53;

    /* Text/icon color placed on top of the primary color (sidebar, buttons) */
    --nca-on-primary:     #FFFFFF;
}


/* ==========================================================================
   2. FIXED COLORS (status + neutral)  -  independent of the NCA brand
   ========================================================================== */
:root {
    /* Status */
    --success: #198754;
    --warning: #ffc107;
    --danger:  #dc3545;
    --info:    #0d6efd;

    /* Neutrals */
    --white:      #ffffff;
    --light-bg:   #f8f9fa;
    --text-dark:  #212529;
    --text-muted: #6c757d;
    --border:     #dee2e6;
}


/* ==========================================================================
   3. DERIVED TOKENS  -  computed from section 1, do not edit
   ========================================================================== */
:root {
    /* Very light tint of the primary: cards, table headers, filters */
    --nca-light:        color-mix(in srgb, var(--nca-primary) 7%, var(--white));
    --nca-light-border: color-mix(in srgb, var(--nca-primary) 18%, var(--white));

    /* Interaction states */
    --nca-primary-hover:  color-mix(in srgb, var(--nca-primary) 88%, black);
    --nca-primary-active: color-mix(in srgb, var(--nca-primary) 76%, black);
    --nca-sidebar-hover:  color-mix(in srgb, var(--nca-on-primary) 10%, transparent);
    --nca-sidebar-muted:  color-mix(in srgb, var(--nca-on-primary) 65%, transparent);
    --nca-sidebar-line:   color-mix(in srgb, var(--nca-on-primary) 18%, transparent);
    --nca-focus-ring:     color-mix(in srgb, var(--nca-primary) 35%, transparent);

    /* Soft status backgrounds for badges and alerts */
    --success-soft: color-mix(in srgb, var(--success) 12%, var(--white));
    --warning-soft: color-mix(in srgb, var(--warning) 20%, var(--white));
    --danger-soft:  color-mix(in srgb, var(--danger)  12%, var(--white));
    --info-soft:    color-mix(in srgb, var(--info)    12%, var(--white));

    /* Chart series, read by assets/js/nca-chart-colors.js */
    --chart-1: var(--nca-primary);
    --chart-2: var(--nca-secondary);
    --chart-3: color-mix(in srgb, var(--nca-primary) 55%, var(--white));
    --chart-4: color-mix(in srgb, var(--nca-secondary) 55%, var(--white));
    --chart-5: color-mix(in srgb, var(--nca-primary) 30%, var(--white));
    --chart-6: var(--text-muted);
}


/* ==========================================================================
   4. TYPOGRAPHY, SHAPE AND LAYOUT TOKENS
   ========================================================================== */
:root {
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --radius:    8px;    /* softened from the original 4px - modern without losing the institutional feel */
    --radius-sm: 6px;
    --radius-lg: 14px;   /* larger surfaces: KPI cards, the login panel */

    --sidebar-width: 260px;
    --topbar-height: 56px;

    --transition: 160ms ease;

    --shadow-sm: 0 1px 2px color-mix(in srgb, var(--nca-dark) 8%, transparent);
    --shadow-md: 0 4px 16px -4px color-mix(in srgb, var(--nca-dark) 16%, transparent), 0 1px 3px color-mix(in srgb, var(--nca-dark) 6%, transparent);
    --shadow-lg: 0 16px 40px -12px color-mix(in srgb, var(--nca-dark) 24%, transparent);
}


/* ==========================================================================
   5. BOOTSTRAP 5 MAPPING
   --------------------------------------------------------------------------
   Load AFTER bootstrap.min.css. Points Bootstrap's own variables at the NCA
   tokens so every stock Bootstrap component picks up the brand.
   ========================================================================== */
:root {
    --bs-primary:            var(--nca-primary);
    --bs-primary-rgb:        var(--nca-primary-rgb);
    --bs-secondary:          var(--nca-secondary);
    --bs-secondary-rgb:      var(--nca-secondary-rgb);
    --bs-success:            var(--success);
    --bs-warning:            var(--warning);
    --bs-danger:             var(--danger);
    --bs-info:               var(--info);
    --bs-body-color:         var(--text-dark);
    --bs-body-bg:            var(--light-bg);
    --bs-body-font-family:   var(--font-family);
    --bs-border-color:       var(--border);
    --bs-border-radius:      var(--radius);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-link-color:         var(--nca-primary);
    --bs-link-hover-color:   var(--nca-primary-hover);
    --bs-heading-color:      var(--nca-dark);
    --bs-focus-ring-color:   var(--nca-focus-ring);
}

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    background-color: var(--light-bg);
}

h1, h2, h3, h4, h5, h6 { color: var(--nca-dark); font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--nca-primary); transition: color var(--transition); }
a:hover { color: var(--nca-primary-hover); }

:focus-visible {
    outline: 2px solid var(--nca-primary);
    outline-offset: 2px;
}


/* ==========================================================================
   6. APPLICATION SHELL: SIDEBAR + TOPBAR
   ========================================================================== */
.nca-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    background-color: var(--nca-primary);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--nca-primary) 100%, white 4%) 0%, var(--nca-primary) 40%);
    color: var(--nca-on-primary);
    overflow-y: auto;
    z-index: 1030;
    display: flex;
    flex-direction: column;
}

.nca-sidebar .nca-logo-area {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--nca-sidebar-line);
}

.nca-sidebar-group {
    padding: 1.25rem 1.25rem 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nca-sidebar-muted);
}

.nca-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.05rem 0.6rem;
    padding: 0.55rem 0.7rem;
    color: var(--nca-on-primary);
    border-radius: var(--radius-sm);
    font-size: 0.925rem;
    transition: background-color var(--transition), transform var(--transition);
}

.nca-sidebar .nav-link:hover { background-color: var(--nca-sidebar-hover); transform: translateX(2px); }

.nca-sidebar .nav-link.active {
    background-color: color-mix(in srgb, var(--nca-on-primary) 16%, transparent);
    box-shadow: inset 3px 0 0 var(--nca-secondary);
    font-weight: 600;
}

.nca-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
}

.nca-topbar {
    height: var(--topbar-height);
    background-color: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
}

.nca-content { padding: 1.5rem; }

/* Tablet and mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 991.98px) {
    .nca-sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    .nca-sidebar.is-open { transform: translateX(0); }
    .nca-main { margin-left: 0; }
    .nca-content { padding: 1rem; }
}


/* ==========================================================================
   7. LOGO AREA
   --------------------------------------------------------------------------
   The official logo file goes in assets/images/nca-logo.png.
   Only constrain height; never set both width and height (no distortion).
   ========================================================================== */
.nca-logo {
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
.nca-logo--lg { height: 64px; }   /* login page, report cover */
.nca-logo--sm { height: 28px; }   /* topbar, footers */

/* On the primary-colored sidebar: use the logo file in its white/reversed
   version if NCA supplies one. If only the standard logo exists, place it on a
   white panel instead of filtering or recoloring it. */
.nca-logo-panel {
    background-color: var(--white);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    display: inline-block;
}

.nca-system-title {
    font-weight: 600;
    line-height: 1.25;
}
.nca-system-subtitle {
    font-size: 0.8rem;
    color: var(--nca-sidebar-muted);
}


/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.btn { border-radius: var(--radius); font-weight: 500; transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-color: var(--nca-on-primary);
    --bs-btn-bg: var(--nca-primary);
    --bs-btn-border-color: var(--nca-primary);
    --bs-btn-hover-color: var(--nca-on-primary);
    --bs-btn-hover-bg: var(--nca-primary-hover);
    --bs-btn-hover-border-color: var(--nca-primary-hover);
    --bs-btn-active-color: var(--nca-on-primary);
    --bs-btn-active-bg: var(--nca-primary-active);
    --bs-btn-active-border-color: var(--nca-primary-active);
    --bs-btn-focus-shadow-rgb: var(--nca-primary-rgb);
    --bs-btn-disabled-bg: var(--nca-primary);
    --bs-btn-disabled-border-color: var(--nca-primary);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { box-shadow: var(--shadow-md); }

.btn-outline-primary {
    --bs-btn-color: var(--nca-primary);
    --bs-btn-border-color: var(--nca-primary);
    --bs-btn-hover-color: var(--nca-on-primary);
    --bs-btn-hover-bg: var(--nca-primary);
    --bs-btn-hover-border-color: var(--nca-primary);
    --bs-btn-active-color: var(--nca-on-primary);
    --bs-btn-active-bg: var(--nca-primary-active);
    --bs-btn-active-border-color: var(--nca-primary-active);
    --bs-btn-focus-shadow-rgb: var(--nca-primary-rgb);
}

/* Accent button: use sparingly for a single highlighted action */
.btn-accent {
    --bs-btn-color: var(--white);
    --bs-btn-bg: var(--nca-secondary);
    --bs-btn-border-color: var(--nca-secondary);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--nca-secondary) 88%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--nca-secondary) 88%, black);
}


/* ==========================================================================
   9. CARDS AND KPI INDICATORS
   ========================================================================== */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.card-header {
    background-color: var(--nca-light);
    border-bottom: 1px solid var(--nca-light-border);
    color: var(--nca-dark);
    font-weight: 600;
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}

.nca-section {
    background-color: var(--nca-light);
    border: 1px solid var(--nca-light-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
}

.nca-page-title {
    color: var(--nca-primary);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 0.25rem;
}
.nca-page-subtitle { color: var(--text-muted); margin-bottom: 1.25rem; }

/* KPI card: number in the primary color, a soft icon roundel for visual anchor */
.kpi-card {
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.25rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.kpi-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--nca-secondary), color-mix(in srgb, var(--nca-secondary) 40%, var(--nca-primary)));
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kpi-icon {
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    background-color: var(--nca-light);
    color: var(--nca-primary);
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}
.kpi-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 0.3rem; }
.kpi-value { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--nca-dark); }
.kpi-note  { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; }

/* Progress indicators use the accent */
.progress { background-color: var(--nca-light); border-radius: 999px; }
.progress-bar { background-color: var(--nca-secondary); border-radius: 999px; }
.progress-bar.bg-primary { background-color: var(--nca-primary) !important; }


/* ==========================================================================
   10. TABLES
   ========================================================================== */
.table {
    --bs-table-bg: var(--white);
    --bs-table-border-color: var(--border);
    --bs-table-striped-bg: var(--light-bg);
    --bs-table-hover-bg: var(--nca-light);
}
.table > thead > tr > th {
    background-color: var(--nca-light);
    color: var(--nca-dark);
    border-bottom: 2px solid var(--nca-primary);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.table > tbody > tr { transition: background-color var(--transition); }


/* ==========================================================================
   11. FORMS AND FILTER AREAS
   ========================================================================== */
.form-control, .form-select {
    border-color: var(--border);
    border-radius: var(--radius);
    background-color: var(--white);
    color: var(--text-dark);
}
.form-control:focus, .form-select:focus {
    border-color: var(--nca-primary);
    box-shadow: 0 0 0 0.2rem var(--nca-focus-ring);
}
.form-check-input:checked {
    background-color: var(--nca-primary);
    border-color: var(--nca-primary);
}
.form-label { font-weight: 500; }

.nca-filter-bar {
    background-color: var(--nca-light);
    border: 1px solid var(--nca-light-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}


/* ==========================================================================
   12. NAVIGATION COMPONENTS (tabs, pagination, dropdowns)
   ========================================================================== */
.nav-tabs .nav-link { color: var(--nca-primary); }
.nav-tabs .nav-link.active {
    color: var(--nca-dark);
    border-bottom-color: var(--white);
    font-weight: 600;
}
.nav-pills .nav-link.active { background-color: var(--nca-primary); color: var(--nca-on-primary); }

.page-link { color: var(--nca-primary); }
.page-item.active .page-link {
    background-color: var(--nca-primary);
    border-color: var(--nca-primary);
    color: var(--nca-on-primary);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--nca-primary);
    color: var(--nca-on-primary);
}


/* ==========================================================================
   13. STATUS COLORS (badges, alerts, RAG indicators)
   --------------------------------------------------------------------------
   Kept quiet (soft backgrounds) so they never overpower the NCA identity.
   ========================================================================== */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.status-success { background-color: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.status-warning { background-color: var(--warning-soft); color: color-mix(in srgb, var(--warning) 55%, black); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.status-danger  { background-color: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.status-info    { background-color: var(--info-soft);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 35%, transparent); }

.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger  { color: var(--danger)  !important; }
.text-info    { color: var(--info)    !important; }

.alert-success { background-color: var(--success-soft); border-color: var(--success); color: var(--text-dark); }
.alert-warning { background-color: var(--warning-soft); border-color: var(--warning); color: var(--text-dark); }
.alert-danger  { background-color: var(--danger-soft);  border-color: var(--danger);  color: var(--text-dark); }
.alert-info    { background-color: var(--info-soft);    border-color: var(--info);    color: var(--text-dark); }

/* Indicator performance dot (on track / at risk / off track) */
.rag-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; }
.rag-green { background-color: var(--success); }
.rag-amber { background-color: var(--warning); }
.rag-red   { background-color: var(--danger); }


/* ==========================================================================
   14. LOGIN PAGE
   --------------------------------------------------------------------------
   A two-panel layout: a branded purple panel (left on desktop, top on
   mobile) and a clean white sign-in panel. Falls back to a single stacked
   column below 860px, where the brand panel shrinks to a compact header.
   ========================================================================== */
.nca-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--light-bg);
    background-image: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--nca-primary) 6%, transparent), transparent 45%),
                       radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--nca-secondary) 6%, transparent), transparent 45%);
}
.nca-login-shell {
    width: 100%;
    max-width: 860px;
    display: flex;
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.nca-login-brand {
    flex: 0 0 44%;
    background-color: var(--nca-primary);
    background-image: linear-gradient(160deg, color-mix(in srgb, var(--nca-primary) 100%, white 6%) 0%, var(--nca-dark) 130%);
    color: var(--nca-on-primary);
    display: flex;
    align-items: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
}
.nca-login-brand::after {
    /* a quiet decorative ring, purely CSS - keeps the panel from feeling flat without needing an image asset */
    content: "";
    position: absolute; right: -60px; bottom: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    border: 24px solid color-mix(in srgb, var(--nca-on-primary) 8%, transparent);
}
.nca-login-brand-inner { position: relative; z-index: 1; }
.nca-login-brand .nca-logo { margin-bottom: 1.5rem; }
.nca-login-brand-title { font-size: 1.35rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.nca-login-brand-tag { font-size: 0.875rem; color: color-mix(in srgb, var(--nca-on-primary) 78%, transparent); line-height: 1.5; margin: 0; }

.nca-login-card {
    flex: 1 1 auto;
    padding: 2.5rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.nca-login-title {
    color: var(--nca-dark);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.2rem;
}
.nca-login-tagline { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.9rem; }

@media (max-width: 860px) {
    .nca-login-shell { flex-direction: column; max-width: 440px; }
    .nca-login-brand { padding: 1.75rem 1.75rem 1.5rem; }
    .nca-login-brand .nca-logo { margin-bottom: 1rem; }
    .nca-login-brand-tag { display: none; }
    .nca-login-card { padding: 2rem 1.75rem; }
}


/* ==========================================================================
   15. REPORTS AND PRINT
   ========================================================================== */
.report-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid var(--nca-primary);
}
.report-org   { font-weight: 700; color: var(--nca-primary); letter-spacing: 0.02em; }
.report-system { font-size: 0.85rem; color: var(--text-muted); }
.report-title { color: var(--nca-primary); font-size: 1.6rem; font-weight: 700; margin: 0.5rem 0 1rem; }

.report-meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin-bottom: 1.5rem; }
.report-meta dt { color: var(--text-muted); font-weight: 500; }
.report-meta dd { margin: 0; }

.report-section-heading {
    color: var(--nca-primary);
    border-bottom: 1px solid var(--nca-light-border);
    padding-bottom: 0.25rem;
    margin: 1.5rem 0 0.75rem;
    font-size: 1.15rem;
}

.report-footer {
    margin-top: 2rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--nca-primary);
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

@media print {
    /* Keep brand colors and tints when printing or saving to PDF */
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    body { background-color: var(--white); }
    .nca-sidebar, .nca-topbar, .nca-filter-bar, .no-print { display: none !important; }
    .nca-main { margin-left: 0; }
    .nca-content { padding: 0; }
    .card { box-shadow: none; break-inside: avoid; }
    .table { break-inside: auto; }
    .table tr { break-inside: avoid; }
    a { color: var(--text-dark); text-decoration: none; }
}


/* ==========================================================================
   16. ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}