/*
 * RaksaData ERP — Brand & Design System Overlay
 * ===============================================
 * Tämä CSS-tiedosto YLIKIRJOITTAA base_bootstrap.html:n inline-tyylit
 * tuomalla yhtenäisen brändinmukaisen ilmeen koko sovellukseen.
 *
 * Käyttöönotto: <link> base_bootstrap.html:n inline <style> -lohkon JÄLKEEN.
 *
 * Brand-perusta:
 *   Pääväri:  #2D5F4F (metsänvihreä)  — ammattimainen, kestävyys, puurakentaminen
 *   Aksentti: #C9923D (puusävy)       — lämmin, identiteetti
 *   Tausta:   #FAFAF7 (off-white)     — pehmeä, ei terävä
 *   Teksti:   #1F2937 (tumma harmaa)  — luettava
 *   Reuna:    #E5E7EB (vaalea harmaa) — hienovarainen
 *
 * Status:
 *   Onnistuminen: #10B981 (vihreä)
 *   Varoitus:     #F59E0B (kullankeltainen)
 *   Virhe:        #DC2626 (punainen)
 *   Info:         #3B82F6 (sininen)
 */

/* ===== Inter-fontti ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ===== Brändimuuttujat ===== */
:root {
    /* Brändivärit */
    --rd-primary: #2D5F4F;
    --rd-primary-dark: #1B4332;
    --rd-primary-light: #3F8C73;
    --rd-accent: #C9923D;
    --rd-accent-light: #D4A574;

    /* Neutraalit */
    --rd-bg: #FAFAF7;
    --rd-bg-alt: #F4F4EE;
    --rd-card: #FFFFFF;
    --rd-text: #1F2937;
    --rd-text-muted: #6B7280;
    --rd-border: #E5E7EB;
    --rd-border-light: #F3F4F6;

    /* Status */
    --rd-success: #10B981;
    --rd-warning: #F59E0B;
    --rd-danger: #DC2626;
    --rd-info: #3B82F6;

    /* Sidebar (oma paletti) */
    --rd-sidebar-bg: #1B4332;
    --rd-sidebar-hover: rgba(255, 255, 255, 0.08);
    --rd-sidebar-active-bg: rgba(212, 165, 116, 0.18);
    --rd-sidebar-active-border: var(--rd-accent);
    --rd-sidebar-text: rgba(255, 255, 255, 0.65);
    --rd-sidebar-text-active: #FFFFFF;
    --rd-sidebar-divider: rgba(255, 255, 255, 0.08);

    /* Tilat ja varjot */
    --rd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --rd-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --rd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);

    /* Bootstrap-muuttujien yliajot */
    --bs-primary: var(--rd-primary);
    --bs-primary-rgb: 45, 95, 79;
    --bs-success: var(--rd-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-warning: var(--rd-warning);
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: var(--rd-danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-info: var(--rd-info);
    --bs-info-rgb: 59, 130, 246;
    --bs-body-bg: var(--rd-bg);
    --bs-body-color: var(--rd-text);
    --bs-border-color: var(--rd-border);
    --bs-link-color: var(--rd-primary);
    --bs-link-hover-color: var(--rd-primary-dark);

    /* Yliajetaan vanhan teeman muuttujat */
    --primary-color: var(--rd-primary);
    --sidebar-bg: var(--rd-sidebar-bg);
    --sidebar-hover: var(--rd-sidebar-hover);
    --sidebar-active: var(--rd-sidebar-active-bg);
    --sidebar-text: var(--rd-sidebar-text);
    --sidebar-text-active: var(--rd-sidebar-text-active);
    --content-bg: var(--rd-bg);
    --card-bg: var(--rd-card);
}

/* ===== Typografia ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: var(--rd-text);
    background-color: var(--rd-bg);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rd-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.75rem; line-height: 1.2; }
h2 { font-size: 1.5rem; line-height: 1.25; }
h3 { font-size: 1.25rem; line-height: 1.3; }
h4 { font-size: 1.125rem; line-height: 1.35; }
h5 { font-size: 1rem; line-height: 1.4; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

.text-muted {
    color: var(--rd-text-muted) !important;
}

/* ===== Sidebar ===== */
.sidebar {
    background: var(--rd-sidebar-bg) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-brand {
    padding: 1rem 1.25rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--rd-sidebar-divider);
    color: #fff !important;
    font-weight: 700;
}

.sidebar-brand img {
    max-height: 36px;
    margin-right: 0.5rem;
}

.sidebar-brand i {
    color: var(--rd-accent) !important;
}

.sidebar .nav-link {
    color: var(--rd-sidebar-text) !important;
    padding: 0.5rem 1.25rem;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
    border-radius: 0;
    font-weight: 500;
    font-size: 0.875rem;
}

.sidebar .nav-link:hover {
    background: var(--rd-sidebar-hover) !important;
    color: var(--rd-sidebar-text-active) !important;
}

.sidebar .nav-link.active {
    background: var(--rd-sidebar-active-bg) !important;
    color: var(--rd-sidebar-text-active) !important;
    border-left-color: var(--rd-sidebar-active-border) !important;
}

.sidebar .nav-link i {
    color: var(--rd-accent-light);
    font-size: 1rem;
    margin-right: 0.6rem;
}

.sidebar .nav-link.active i {
    color: var(--rd-accent);
}

.sidebar-heading {
    color: var(--rd-sidebar-text) !important;
    opacity: 0.6;
    font-size: 0.65rem !important;
    letter-spacing: 0.12em !important;
}

.sidebar-divider {
    border-color: var(--rd-sidebar-divider) !important;
}

/* ===== Topbar ===== */
.topbar {
    background: var(--rd-card) !important;
    border-bottom: 1px solid var(--rd-border) !important;
    box-shadow: var(--rd-shadow-sm);
}

/* ===== Content ===== */
.main-content,
main,
.content {
    background: var(--rd-bg);
}

/* ===== Cards ===== */
.card {
    background: var(--rd-card);
    border: 1px solid var(--rd-border);
    border-radius: 8px;
    box-shadow: var(--rd-shadow-sm);
    transition: box-shadow 0.15s ease;
}

.card:hover {
    box-shadow: var(--rd-shadow);
}

.card-header {
    background: var(--rd-bg-alt);
    border-bottom: 1px solid var(--rd-border);
    padding: 0.875rem 1.25rem;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem;
}

/* Brändillinen primary-card-header */
.card.border-primary > .card-header,
.card-header.bg-primary {
    background: var(--rd-primary) !important;
    color: #fff;
    border-bottom-color: var(--rd-primary-dark);
}

.card.border-success > .card-header,
.card-header.bg-success {
    background: var(--rd-success) !important;
    color: #fff;
}

/* ===== Buttons ===== */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease;
    letter-spacing: -0.005em;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
}

.btn-primary {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--rd-primary-dark);
    border-color: var(--rd-primary-dark);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(45, 95, 79, 0.15);
}

.btn-outline-primary {
    color: var(--rd-primary);
    border-color: var(--rd-primary);
}

.btn-outline-primary:hover {
    background: var(--rd-primary);
    border-color: var(--rd-primary);
    color: #fff;
}

.btn-success {
    background: var(--rd-success);
    border-color: var(--rd-success);
}

.btn-success:hover {
    background: #059669;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.btn-warning {
    background: var(--rd-warning);
    border-color: var(--rd-warning);
    color: #fff;
}

.btn-danger {
    background: var(--rd-danger);
    border-color: var(--rd-danger);
}

/* Aksenttinappi (esim. tärkeät CTA:t kuten "Save" tai "Generate quote") */
.btn-accent {
    background: var(--rd-accent);
    border-color: var(--rd-accent);
    color: #fff;
}

.btn-accent:hover {
    background: #B8822E;
    border-color: #B8822E;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(201, 146, 61, 0.15);
}

/* ===== Forms ===== */
.form-control,
.form-select {
    border: 1px solid var(--rd-border);
    border-radius: 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
    color: var(--rd-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--rd-primary);
    box-shadow: 0 0 0 3px rgba(45, 95, 79, 0.12);
}

.form-label {
    font-weight: 500;
    color: var(--rd-text);
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
}

.input-group-text {
    background: var(--rd-bg-alt);
    border-color: var(--rd-border);
    color: var(--rd-text-muted);
    font-size: 0.875rem;
}

/* ===== Tables ===== */
.table {
    color: var(--rd-text);
}

.table thead {
    background: var(--rd-bg-alt);
}

.table thead th {
    border-bottom: 1px solid var(--rd-border);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--rd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.875rem 1rem;
}

.table tbody td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--rd-border-light);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: var(--rd-bg-alt);
}

.table-hover tbody tr:hover {
    background: var(--rd-bg-alt);
    cursor: default;
}

/* ===== Badges ===== */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
    border-radius: 4px;
    letter-spacing: 0;
}

.badge.bg-primary {
    background: var(--rd-primary) !important;
}

.badge.bg-success {
    background: var(--rd-success) !important;
}

.badge.bg-info {
    background: var(--rd-info) !important;
}

.badge.bg-warning {
    background: var(--rd-warning) !important;
    color: #fff !important;
}

.badge.bg-danger {
    background: var(--rd-danger) !important;
}

.badge.bg-secondary {
    background: #6B7280 !important;
}

/* ===== Alerts ===== */
.alert {
    border-radius: 6px;
    border-width: 0;
    border-left-width: 3px;
    padding: 0.875rem 1.25rem;
}

.alert-success {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border-left-color: var(--rd-success);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.08);
    color: #B45309;
    border-left-color: var(--rd-warning);
}

.alert-danger {
    background: rgba(220, 38, 38, 0.08);
    color: #B91C1C;
    border-left-color: var(--rd-danger);
}

.alert-info {
    background: rgba(59, 130, 246, 0.08);
    color: #1D4ED8;
    border-left-color: var(--rd-info);
}

.alert-secondary {
    background: var(--rd-bg-alt);
    color: var(--rd-text);
    border-left-color: var(--rd-border);
}

/* ===== Modal ===== */
.modal-content {
    border-radius: 8px;
    border: 1px solid var(--rd-border);
    box-shadow: var(--rd-shadow-md);
}

.modal-header {
    border-bottom: 1px solid var(--rd-border);
    padding: 1rem 1.25rem;
}

.modal-footer {
    border-top: 1px solid var(--rd-border);
    padding: 0.875rem 1.25rem;
}

/* ===== Helper Classes ===== */
.text-primary { color: var(--rd-primary) !important; }
.text-success { color: var(--rd-success) !important; }
.text-accent { color: var(--rd-accent) !important; }

.bg-primary-soft { background: rgba(45, 95, 79, 0.06); }
.bg-accent-soft { background: rgba(201, 146, 61, 0.08); }

/* ===== Pricing-spesifiset (tier-värit yhtenäistetty) ===== */
.tier-starter { background: var(--rd-info) !important; }
.tier-professional { background: var(--rd-primary) !important; }
.tier-enterprise { background: var(--rd-primary-dark) !important; }
.tier-custom { background: #6B7280 !important; }

/* ===========================================================================
 * Komponenttikirjasto (PR1 / 2026-05-10)
 *
 * Yhtenäiset komponenttiluokat joita kaikki näkymät käyttävät.
 * Tavoite: ei "jokainen näkymä keksii omansa" -tilaa.
 *
 * Käyttöoppaat:
 *   .kpi-card       — KPI-numerokortti, valitse modifier statuksen mukaan
 *                     .kpi-card--primary | --success | --warning | --danger | --info
 *   .page-header    — Sivun otsikkorivi (eyebrow + title + meta + actions)
 *                     Lisää .page-header--sticky kun haluat scroll-stickyn
 *   .modal-action-* — Standardoitu modaalin header-väritys.
 *                     success = siirto, sijoitus, hyväksyntä
 *                     danger  = poisto, kriittinen varoitus
 *                     primary = luominen, uusi resurssi
 *                     warning = tuonti, korjattava tila
 *                     info    = informatiivinen dialogi (oletus)
 *   .lca-grade      — LCA-luokitusbadgi (A/B/C/D/na)
 * =========================================================================== */

/* ===== KPI-card ===== */
.kpi-card {
    background: var(--rd-card);
    border: 1px solid var(--rd-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    height: 100%;
    transition: box-shadow 0.18s ease;
}
.kpi-card:hover { box-shadow: var(--rd-shadow-md); }
.kpi-card--primary { border-left: 4px solid var(--rd-primary); }
.kpi-card--success { border-left: 4px solid var(--rd-success); }
.kpi-card--warning { border-left: 4px solid var(--rd-warning); }
.kpi-card--danger  { border-left: 4px solid var(--rd-danger);  }
.kpi-card--info    { border-left: 4px solid var(--rd-info);    }
.kpi-card-label {
    font-size: 0.75rem;
    color: var(--rd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.kpi-card-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--rd-text);
}
.kpi-card-value--primary { color: var(--rd-primary); }
.kpi-card-value--success { color: var(--rd-success); }
.kpi-card-value--warning { color: var(--rd-warning); }
.kpi-card-value--danger  { color: var(--rd-danger);  }
.kpi-card-value--info    { color: var(--rd-info);    }
.kpi-card-meta {
    font-size: 0.78rem;
    color: var(--rd-text-muted);
    margin-top: 0.2rem;
}

/* ===== Page header (eyebrow + title + meta + actions) ===== */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.page-header__main { flex: 1 1 auto; min-width: 0; }
.page-header__eyebrow {
    font-size: 0.78rem;
    color: var(--rd-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.page-header__title {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0.1rem 0 0;
    color: var(--rd-text);
    line-height: 1.2;
}
.page-header__meta {
    font-size: 0.85rem;
    color: var(--rd-text-muted);
    margin-top: 0.25rem;
}
.page-header__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.page-header--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--rd-bg);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rd-border);
}

/* ===== Modal-headerin standardoidut värit ===== */
.modal-action-success .modal-header {
    background: var(--rd-success);
    color: #fff;
    border-bottom: 0;
}
.modal-action-danger .modal-header {
    background: var(--rd-danger);
    color: #fff;
    border-bottom: 0;
}
.modal-action-primary .modal-header {
    background: var(--rd-primary);
    color: #fff;
    border-bottom: 0;
}
.modal-action-warning .modal-header {
    background: var(--rd-warning);
    color: #1F2937;
    border-bottom: 0;
}
.modal-action-info .modal-header {
    background: var(--rd-info);
    color: #fff;
    border-bottom: 0;
}
/* Tee btn-close näkyväksi tummalla taustalla */
.modal-action-success .modal-header .btn-close,
.modal-action-danger .modal-header .btn-close,
.modal-action-primary .modal-header .btn-close,
.modal-action-info .modal-header .btn-close {
    filter: invert(1) brightness(2);
}
.modal-action-success .modal-title,
.modal-action-danger .modal-title,
.modal-action-primary .modal-title,
.modal-action-info .modal-title { color: #fff; }
.modal-action-warning .modal-title { color: #1F2937; }

/* ===== Tenant pill (näyttää nykyisen tenantin nimen otsikkorivillä) ===== */
.tenant-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #F0F7F4;
    color: var(--rd-primary-dark);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.tenant-pill .bi-building { color: var(--rd-primary); }

/* ===== LCA-grade badge (luokitus A/B/C/D) ===== */
.lca-grade {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1;
}
.lca-grade--A  { background: var(--rd-success); color: #fff; }
.lca-grade--B  { background: #84CC16; color: #fff; }
.lca-grade--C  { background: var(--rd-warning); color: #1F2937; }
.lca-grade--D  { background: var(--rd-danger); color: #fff; }
.lca-grade--na { background: var(--rd-bg-alt); color: var(--rd-text-muted); }

/* ===== Print-tyyli (tarjouksia varten) ===== */
@media print {
    .sidebar,
    .topbar,
    .btn,
    .no-print,
    .page-header__actions {
        display: none !important;
    }

    body {
        background: #fff !important;
    }

    .card,
    .kpi-card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .page-header--sticky {
        position: static !important;
        border-bottom: 2px solid #000 !important;
    }
}

/* =====================================================================
 * Premium B2B -laajennus (2026-05-16)
 * =====================================================================
 * Mockupin rakennuselementit projektien ja muiden moduulien näkymiin.
 * Kaikki uudet luokat alkavat .rd-* — eivät kosketa olemassaoleviin.
 * ===================================================================== */

:root {
    /* Background-tasot */
    --rd-bg-canvas:  #FAFAF7;
    --rd-bg-surface: #FFFFFF;
    --rd-bg-subtle:  #F7F7F2;
    --rd-bg-soft:    #F4F4EE;
    --rd-bg-hover:   #F0F0EA;

    /* Teksti-tasot */
    --rd-text-primary:   #111827;
    --rd-text-secondary: #4B5563;
    --rd-text-tertiary:  #6B7280;
    --rd-text-faint:     #9CA3AF;

    /* Reuna-tasot */
    --rd-border-subtle:  #EFEFEA;
    --rd-border-default: #E5E7EB;
    --rd-border-strong:  #D1D5DB;

    /* Varjo-tasot (mockup) */
    --rd-shadow-xs: 0 1px 2px rgba(17,24,39,0.04);
    --rd-shadow-mockup-sm: 0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
    --rd-shadow-mockup-md: 0 4px 12px rgba(17,24,39,0.06), 0 1px 3px rgba(17,24,39,0.04);
    --rd-shadow-mockup-lg: 0 12px 32px rgba(17,24,39,0.08), 0 2px 6px rgba(17,24,39,0.04);

    /* Radius */
    --rd-r-xs: 4px;
    --rd-r-sm: 6px;
    --rd-r-md: 8px;
    --rd-r-lg: 12px;
    --rd-r-xl: 16px;
    --rd-r-pill: 999px;

    /* Spacing */
    --rd-s-1: 4px;  --rd-s-2: 8px;  --rd-s-3: 12px; --rd-s-4: 16px;
    --rd-s-5: 20px; --rd-s-6: 24px; --rd-s-8: 32px;
    --rd-s-10: 40px; --rd-s-12: 48px;

    /* Status-väripaletit */
    --rd-green-50:  #ECFDF5; --rd-green-500:  #10B981; --rd-green-700:  #047857;
    --rd-amber-50:  #FFFBEB; --rd-amber-500:  #F59E0B; --rd-amber-700:  #B45309;
    --rd-red-50:    #FEF2F2; --rd-red-500:    #EF4444; --rd-red-700:    #B91C1C;
    --rd-blue-50:   #EFF6FF; --rd-blue-500:   #3B82F6; --rd-blue-700:   #1D4ED8;
    --rd-violet-50: #F5F3FF; --rd-violet-500: #8B5CF6; --rd-violet-700: #6D28D9;

    /* Brand-50 / 100 (vaaleat sävyt) */
    --rd-primary-50:  #F0F7F4;
    --rd-primary-100: #DCEBE3;
    --rd-accent-50:   #FBF6EC;
}

/* ----- Page header (skrollaa pois, vain tab-bar pysyy sticky) ------- */
.rd-page-header {
    background: var(--rd-bg-surface);
    border-bottom: 1px solid var(--rd-border-subtle);
    padding: var(--rd-s-5) var(--rd-s-8) 0;
    margin: -1.5rem -1.5rem 0;
}
.rd-page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--rd-s-6);
    margin-bottom: var(--rd-s-5);
}
.rd-page-header__title-block { flex: 1; min-width: 0; }
.rd-page-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--rd-s-2);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rd-text-tertiary);
    margin-bottom: 6px;
}
.rd-page-eyebrow__id {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--rd-text-secondary);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.rd-page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--rd-text-primary);
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--rd-s-3);
    flex-wrap: wrap;
}
.rd-page-meta {
    display: flex;
    align-items: center;
    gap: var(--rd-s-4);
    margin-top: var(--rd-s-2);
    font-size: 13px;
    color: var(--rd-text-secondary);
    flex-wrap: wrap;
}
.rd-page-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rd-page-meta__icon {
    width: 14px;
    height: 14px;
    color: var(--rd-text-faint);
    flex-shrink: 0;
}
.rd-page-meta__link {
    color: var(--rd-primary);
    font-weight: 500;
    text-decoration: none;
}
.rd-page-meta__link:hover { text-decoration: underline; }

.rd-page-header__actions {
    display: flex;
    gap: var(--rd-s-2);
    align-items: center;
}

/* ----- Pill (status) -------------------------------------------------- */
.rd-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--rd-r-pill);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
}
.rd-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rd-pill--active  { background: var(--rd-green-50);  color: var(--rd-green-700); }
.rd-pill--active::before  { background: var(--rd-green-500);  box-shadow: 0 0 0 2px rgba(16,185,129,0.16); }
.rd-pill--info    { background: var(--rd-blue-50);   color: var(--rd-blue-700); }
.rd-pill--info::before    { background: var(--rd-blue-500); }
.rd-pill--warning { background: var(--rd-amber-50);  color: var(--rd-amber-700); }
.rd-pill--warning::before { background: var(--rd-amber-500); }
.rd-pill--danger  { background: var(--rd-red-50);    color: var(--rd-red-700); }
.rd-pill--danger::before  { background: var(--rd-red-500); }
.rd-pill--neutral { background: var(--rd-bg-soft);   color: var(--rd-text-secondary); }
.rd-pill--neutral::before { background: var(--rd-text-faint); }

/* ----- LCA-luokitus-merkki ------------------------------------------- */
.rd-lca-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--rd-r-sm);
    font-size: 11px;
    font-weight: 700;
    color: white;
}
.rd-lca-badge--A { background: #10B981; }
.rd-lca-badge--B { background: #84CC16; }
.rd-lca-badge--C { background: #F59E0B; }
.rd-lca-badge--D { background: #EF4444; }
.rd-lca-badge--unknown { background: var(--rd-text-faint); }

/* ----- Header KPI strip ---------------------------------------------- */
.rd-header-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0;
    border-top: 1px solid var(--rd-border-subtle);
    margin: 0 calc(-1 * var(--rd-s-8));
}
.rd-header-kpi {
    padding: var(--rd-s-4) var(--rd-s-5);
    border-right: 1px solid var(--rd-border-subtle);
}
.rd-header-kpi:last-child { border-right: none; }
.rd-header-kpi__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--rd-text-tertiary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.rd-header-kpi__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--rd-text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.rd-header-kpi__value--positive { color: var(--rd-green-700); }
.rd-header-kpi__value--negative { color: var(--rd-red-700); }
.rd-header-kpi__meta {
    font-size: 11.5px;
    color: var(--rd-text-tertiary);
    margin-top: 2px;
}
.rd-header-kpi__unit {
    font-size: 11px;
    color: var(--rd-text-tertiary);
    font-weight: 500;
}

/* ----- Tabs (anchor links) ------------------------------------------- */
.rd-tabs-bar {
    background: var(--rd-bg-surface);
    border-bottom: 1px solid var(--rd-border-subtle);
    padding: 0 var(--rd-s-8);
    margin: 0 calc(-1 * var(--rd-s-8)) var(--rd-s-5);
    display: flex;
    gap: var(--rd-s-2);
    position: sticky;
    top: 0;
    z-index: 4;
    overflow-x: auto;
    scrollbar-width: none;
}
.rd-tabs-bar::-webkit-scrollbar { display: none; }
.rd-tab {
    padding: 11px var(--rd-s-3);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--rd-text-tertiary);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 100ms, border-color 100ms;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.rd-tab:hover { color: var(--rd-text-primary); text-decoration: none; }
.rd-tab.is-active {
    color: var(--rd-primary-dark);
    border-bottom-color: var(--rd-primary);
    font-weight: 600;
}
.rd-tab__count {
    font-size: 11px;
    font-weight: 600;
    color: var(--rd-text-faint);
    background: var(--rd-bg-soft);
    padding: 1px 6px;
    border-radius: var(--rd-r-xs);
}
.rd-tab.is-active .rd-tab__count {
    background: var(--rd-primary-50);
    color: var(--rd-primary-dark);
}

/* ----- Card v2 (mockup) ---------------------------------------------- */
.rd-card {
    background: var(--rd-bg-surface);
    border: 1px solid var(--rd-border-subtle);
    border-radius: var(--rd-r-lg);
    overflow: hidden;
    margin-bottom: var(--rd-s-5);
}
.rd-card__header {
    padding: var(--rd-s-4) var(--rd-s-5);
    border-bottom: 1px solid var(--rd-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rd-s-3);
}
.rd-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rd-text-primary);
    margin: 0;
}
.rd-card__subtitle {
    font-size: 12px;
    color: var(--rd-text-tertiary);
    margin-top: 1px;
}
.rd-card__body { padding: var(--rd-s-5); }
.rd-card__link {
    font-size: 12.5px;
    color: var(--rd-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-decoration: none;
}
.rd-card__link:hover { text-decoration: underline; }

/* ----- Mini-table ---------------------------------------------------- */
.rd-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rd-mini-table th {
    text-align: left;
    padding: 8px 12px 8px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rd-text-tertiary);
    border-bottom: 1px solid var(--rd-border-default);
    font-weight: 600;
}
.rd-mini-table th.num { text-align: right; padding-right: 12px; padding-left: 12px; }
.rd-mini-table td {
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--rd-border-subtle);
    color: var(--rd-text-primary);
}
.rd-mini-table tr:last-child td { border-bottom: none; }
.rd-mini-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: 12px;
    padding-left: 12px;
}
.rd-mini-table td.muted { color: var(--rd-text-tertiary); }

/* ----- Btn variants (uudet, eivät korvaa Bootstrapin .btn:ää) -------- */
.rd-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rd-s-2);
    padding: 7px 12px;
    border-radius: var(--rd-r-sm);
    font-size: 13px;
    font-weight: 500;
    transition: background-color 100ms, border-color 100ms, box-shadow 100ms;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.rd-btn--secondary {
    background: var(--rd-bg-surface);
    border-color: var(--rd-border-default);
    color: var(--rd-text-primary);
}
.rd-btn--secondary:hover {
    background: var(--rd-bg-soft);
    border-color: var(--rd-border-strong);
    text-decoration: none;
    color: var(--rd-text-primary);
}
.rd-btn--primary {
    background: var(--rd-primary);
    color: white;
    box-shadow: var(--rd-shadow-xs);
}
.rd-btn--primary:hover {
    background: var(--rd-primary-dark);
    box-shadow: var(--rd-shadow-mockup-sm);
    color: white;
    text-decoration: none;
}

/* ----- Mobile-mukautukset -------------------------------------------- */
@media (max-width: 768px) {
    .rd-page-header {
        padding: var(--rd-s-4) var(--rd-s-4) 0;
        margin: -1rem -1rem 0;
    }
    .rd-page-header__row {
        flex-direction: column;
        gap: var(--rd-s-3);
    }
    .rd-header-kpi-strip {
        margin: 0 calc(-1 * var(--rd-s-4));
        grid-template-columns: 1fr 1fr;
    }
    .rd-header-kpi {
        border-bottom: 1px solid var(--rd-border-subtle);
    }
    .rd-header-kpi:nth-child(2n) { border-right: none; }
    .rd-tabs-bar {
        padding: 0 var(--rd-s-4);
        margin: 0 calc(-1 * var(--rd-s-4)) var(--rd-s-4);
    }
}

/* =====================================================================
 * Body-overrides projects/detail.html:lle (2026-05-16)
 * =====================================================================
 * Vanhat .section-card, .dashboard-card ja .quick-action saavat rd-tyylin
 * ilman että HTML:ää tarvitsee muuttaa. Säilyttää HTMX/collapse-toiminnot.
 * ===================================================================== */

/* Section card → rd-card -tyyli */
.section-card {
    border: 1px solid var(--rd-border-subtle) !important;
    border-radius: var(--rd-r-lg) !important;
    box-shadow: none !important;
    margin-bottom: var(--rd-s-5) !important;
    overflow: hidden;
    background: var(--rd-bg-surface);
}
.section-card .card-header {
    background: var(--rd-bg-surface) !important;
    border-bottom: 1px solid var(--rd-border-subtle) !important;
    padding: var(--rd-s-4) var(--rd-s-5) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--rd-text-primary) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--rd-s-2);
    transition: background-color 100ms;
}
.section-card .card-header:hover {
    background: var(--rd-bg-subtle) !important;
}
.section-card .card-header > i {
    color: var(--rd-primary);
    font-size: 14px;
}
.section-card .card-header .badge {
    margin-left: auto;
    font-weight: 600;
    font-size: 11px;
}
.section-card .card-body {
    padding: var(--rd-s-5) !important;
    background: var(--rd-bg-surface);
}

/* Dashboard card (oikean palstan side-cards) → kompakti rd-tyyli */
.dashboard-card {
    border: 1px solid var(--rd-border-subtle) !important;
    border-radius: var(--rd-r-lg) !important;
    box-shadow: none !important;
    transition: border-color 100ms, box-shadow 100ms !important;
}
.dashboard-card:hover {
    transform: none !important;
    border-color: var(--rd-border-default) !important;
    box-shadow: var(--rd-shadow-mockup-sm) !important;
}
.dashboard-card .card-body {
    padding: var(--rd-s-5) !important;
}
.dashboard-card .card-label {
    font-size: 11px !important;
    color: var(--rd-text-tertiary) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 4px !important;
}
.dashboard-card .card-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--rd-text-primary);
    font-variant-numeric: tabular-nums;
}
.dashboard-card .card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: var(--rd-r-md) !important;
    font-size: 1.1rem !important;
}

/* Quick actions → siistit kortit */
.quick-action {
    background: var(--rd-bg-surface) !important;
    border: 1px solid var(--rd-border-subtle) !important;
    border-radius: var(--rd-r-md) !important;
    padding: var(--rd-s-4) var(--rd-s-3) !important;
    transition: border-color 100ms, background-color 100ms, box-shadow 100ms !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--rd-text-primary) !important;
    text-decoration: none !important;
    gap: 6px;
}
.quick-action:hover {
    background: var(--rd-bg-subtle) !important;
    border-color: var(--rd-border-default) !important;
    color: var(--rd-text-primary) !important;
    transform: none !important;
    box-shadow: var(--rd-shadow-xs) !important;
}
.quick-action i {
    font-size: 1.4rem !important;
    margin-bottom: 0 !important;
    opacity: 0.85;
}
.quick-action span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--rd-text-secondary);
    text-align: center;
    line-height: 1.3;
}

/* Yhteenveto-taulukko (oikea palsta) ohuet rivit */
.section-card table.table {
    margin-bottom: 0;
}
.section-card table.table > tbody > tr > td {
    border-color: var(--rd-border-subtle) !important;
    padding: 8px 0 !important;
    font-size: 13px;
}

/* Status-badge -overrides (kun vanha bg-* badge esiintyy detailissa) */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px !important;
    border-radius: var(--rd-r-pill) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0;
    text-transform: none !important;
}

/* Container-fluid mukautukset jotta header-mockupin reuna-anchorit toimii */
.container-fluid {
    padding-left: var(--rd-s-6);
    padding-right: var(--rd-s-6);
}
@media (max-width: 768px) {
    .container-fluid {
        padding-left: var(--rd-s-4);
        padding-right: var(--rd-s-4);
    }
}

/* Tab-ankkurin scroll-offset — sticky tab-rivi peittää muuten yläreunan */
[id^="section-"] {
    scroll-margin-top: 60px;
}