/* Teal (#025169): hvite flater med teal som merkevare, header og knapper */

html[data-ui="helsedir-teal"] {
    color-scheme: light;

    /* Brand */
    --brand-primary: #025169;
    --brand-primary-mid: #047FA4;
    --brand-primary-dark: #013e52;
    --accent: #025169;
    --accent-dark: #013e52;

    /* Surfaces */
    --surface: #ffffff;
    --surface-muted: #f0f9fd;
    --body-background: #f0f9fd;

    /* Text */
    --text-primary: #1f2937;
    --text-muted: #4b7a8a;
    --text-heading: #013e52;

    /* Borders */
    --border-default: #93c9de;
    --border-subtle: #d1eaf4;

    /* Header */
    --header-background: #025169;
    --header-text: #ffffff;
    --header-subtitle: rgba(255, 255, 255, 0.88);
    --header-stripe-width: 4px;
    --header-stripe-color: #5ab8db;

    /* Nav */
    --nav-border-top: rgba(255, 255, 255, 0.18);
    --nav-tab-color: rgba(255, 255, 255, 0.9);
    --nav-tab-hover-bg: rgba(255, 255, 255, 0.14);
    --nav-tab-active-bg: transparent;
    --nav-tab-active-line: #5ab8db;
    --nav-tab-active-shadow: inset 0 -3px 0 #5ab8db;

    /* Logo */
    --logo-ntnu-filter: brightness(0) invert(1);

    /* Info / cards */
    --info-tint-from: #e4f4fb;
    --info-tint-to: #f0f9fd;
    --info-border: #93c9de;
    --card-border-color: #93c9de;
    --card-top-stripe-color: #025169;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(2, 81, 105, 0.06);
    --shadow-md: 0 4px 6px rgba(2, 81, 105, 0.1);
    --shadow-lg: 0 10px 18px rgba(2, 81, 105, 0.13);

    /* Footer */
    --footer-shadow: 0 -2px 8px rgba(2, 81, 105, 0.08);
    --footer-background: #f0f9fd;
    --footer-border-top-color: #025169;
    --footer-border-top-width: 3px;

    /* Focus / controls */
    --focus-ring: #025169;
    --focus-ring-soft: rgba(2, 81, 105, 0.2);
    --control-focus: #025169;
    --control-focus-soft: rgba(2, 81, 105, 0.18);

    /* Banner */
    --theme-banner-from: #047FA4;
    --theme-banner-to: #025169;

    /* FRISK aliases: mapped to teal-on-white palette */
    --frisk-white: #ffffff;
    --frisk-logoblå-1: #013e52;
    --frisk-logoblå-2: #025169;
    --frisk-neutral-light: #f0f9fd;
    --frisk-neutral-medium: #4b7a8a;
    --frisk-neutral-dark: #1f2937;
    --frisk-blue-light: #e4f4fb;
    --frisk-blue-soft: #f0f9fd;
    --frisk-blue-border: #93c9de;
    --frisk-teal: #025169;
    --frisk-teal-light: #e4f4fb;
    --frisk-gray-50: #f8fbfd;
    --frisk-gray-100: #f0f9fd;
    --frisk-gray-700: #1f2937;
    --frisk-shadow-md: 0 4px 6px rgba(2, 81, 105, 0.1);
    --frisk-shadow-lg: 0 10px 18px rgba(2, 81, 105, 0.13);
}

/* ── Cards ── */
html[data-ui="helsedir-teal"] .frisk-card.card {
    background: #ffffff;
    color: var(--text-primary);
    border-color: var(--border-default);
    border-top-color: var(--card-top-stripe-color);
    box-shadow: var(--shadow-md);
}

html[data-ui="helsedir-teal"] .frisk-card .card-title {
    color: var(--text-heading);
}

/* ── Index / quick-link sections ── */
html[data-ui="helsedir-teal"] .index-section {
    background: #ffffff;
    border-color: var(--border-subtle);
    border-top-color: var(--accent);
}

html[data-ui="helsedir-teal"] .index-section:hover {
    box-shadow: 0 6px 12px rgba(2, 81, 105, 0.14);
    border-color: var(--border-default);
}

html[data-ui="helsedir-teal"] .index-section-title {
    color: var(--text-heading);
}

html[data-ui="helsedir-teal"] .index-section-desc {
    color: var(--text-muted);
}

/* ── Buttons ── */
html[data-ui="helsedir-teal"] .btn,
html[data-ui="helsedir-teal"] .btn-secondary {
    background: var(--brand-primary);
    color: #ffffff;
    border-color: var(--brand-primary-dark);
}

html[data-ui="helsedir-teal"] .btn:hover,
html[data-ui="helsedir-teal"] .btn-secondary:hover {
    background: var(--brand-primary-dark);
    color: #ffffff;
}

/* ── Info cards ── */
html[data-ui="helsedir-teal"] .info-card-blue {
    background: linear-gradient(135deg, #e4f4fb 0%, #f0f9fd 100%);
    border-color: var(--border-default);
    border-left-color: var(--brand-primary);
    color: var(--text-primary);
}

/* ── Dataset stats ── */
html[data-ui="helsedir-teal"] .dataset-stat {
    background: #ffffff;
    border-color: var(--border-subtle);
}

html[data-ui="helsedir-teal"] .dataset-stat-label {
    color: var(--text-muted);
}

html[data-ui="helsedir-teal"] .dataset-stat-value {
    color: var(--text-heading);
}

/* ── Viz controls ── */
html[data-ui="helsedir-teal"] .viz-controls-card {
    background: #ffffff;
    border-color: var(--border-default);
    color: var(--text-primary);
}

html[data-ui="helsedir-teal"] .viz-controls-card .viz-controls-title {
    color: var(--text-heading);
}

html[data-ui="helsedir-teal"] .viz-controls-card .viz-section-title,
html[data-ui="helsedir-teal"] .viz-controls-card .viz-section-desc,
html[data-ui="helsedir-teal"] .viz-controls-card .viz-controls-desc {
    color: var(--text-muted);
}

html[data-ui="helsedir-teal"] .viz-controls-card .viz-section + .viz-section {
    border-top-color: var(--border-subtle);
}

html[data-ui="helsedir-teal"] .viz-controls-card .viz-field label {
    color: var(--text-primary);
}

html[data-ui="helsedir-teal"] .viz-controls-card .viz-btn-update {
    background: var(--brand-primary);
    color: #ffffff;
}

html[data-ui="helsedir-teal"] .viz-controls-card .viz-btn-update:hover {
    background: var(--brand-primary-dark);
}

html[data-ui="helsedir-teal"] .viz-graph-container {
    background: #f8fbfd;
    border-color: var(--brand-primary);
}

html[data-ui="helsedir-teal"] .viz-graph-setting-label {
    color: var(--text-primary);
}

html[data-ui="helsedir-teal"] .viz-legend-item,
html[data-ui="helsedir-teal"] .precomputed-legend-item {
    color: var(--text-primary);
}

/* ── Form inputs & selects ── */
html[data-ui="helsedir-teal"] .viz-native-select,
html[data-ui="helsedir-teal"] .viz-graph-num,
html[data-ui="helsedir-teal"] .viz-controls-card input[type="number"],
html[data-ui="helsedir-teal"] .viz-controls-card #viz-category-select {
    background-color: #ffffff;
    color: var(--text-primary);
    border-color: var(--border-default);
}

html[data-ui="helsedir-teal"] .viz-native-select:hover {
    border-color: var(--brand-primary);
}

html[data-ui="helsedir-teal"] .viz-native-select:focus,
html[data-ui="helsedir-teal"] .viz-graph-num:focus,
html[data-ui="helsedir-teal"] .viz-controls-card input[type="number"]:focus,
html[data-ui="helsedir-teal"] .viz-controls-card #viz-category-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--focus-ring-soft);
}

/* ── Search result box ── */
html[data-ui="helsedir-teal"] .search-result-content-box {
    background: #f8fbfd;
    border-color: var(--border-default);
}

html[data-ui="helsedir-teal"] .search-result-content-text {
    color: var(--text-primary);
}

/* ── Export buttons ── */
html[data-ui="helsedir-teal"] .export-buttons button:nth-child(3) {
    background-color: color-mix(in srgb, #025169 12%, #ffffff);
    color: var(--brand-primary-dark);
}

html[data-ui="helsedir-teal"] .export-buttons button:nth-child(4) {
    background-color: #ffffff;
    color: var(--brand-primary);
    border-color: var(--border-default);
}

/* ── Section divider ── */
html[data-ui="helsedir-teal"] .section-divider::before {
    background: var(--brand-primary);
}

/* ── Footer ── */
html[data-ui="helsedir-teal"] .footer {
    background: var(--footer-background);
    border-top-color: var(--footer-border-top-color);
}

html[data-ui="helsedir-teal"] .footer-text,
html[data-ui="helsedir-teal"] .footer-disclaimer {
    color: var(--text-muted);
}

/* ── Tailwind bg-white overrides: keep white on this light theme ── */
html[data-ui="helsedir-teal"] .bg-white {
    background-color: #ffffff !important;
}

/* ── Tailwind helsedir-* color class overrides ── */
html[data-ui="helsedir-teal"] .bg-helsedir-blue,
html[data-ui="helsedir-teal"] .bg-helsedir-blue-dark,
html[data-ui="helsedir-teal"] .bg-helsedir-cherry {
    background-color: #025169 !important;
}

html[data-ui="helsedir-teal"] .hover\:bg-helsedir-blue-dark:hover,
html[data-ui="helsedir-teal"] .hover\:bg-helsedir-blue:hover {
    background-color: #013e52 !important;
}

html[data-ui="helsedir-teal"] .text-helsedir-blue,
html[data-ui="helsedir-teal"] .text-helsedir-blue-dark {
    color: #025169 !important;
}

html[data-ui="helsedir-teal"] .border-helsedir-blue,
html[data-ui="helsedir-teal"] .border-helsedir-blue-dark {
    border-color: #025169 !important;
}

html[data-ui="helsedir-teal"] .bg-helsedir-blue-light,
html[data-ui="helsedir-teal"] .bg-helsedir-cherry-light {
    background-color: #e4f4fb !important;
}

html[data-ui="helsedir-teal"] .bg-helsedir-neutral-light {
    background-color: #f0f9fd !important;
}

/* ── Scrollbar ── */
html[data-ui="helsedir-teal"] ::-webkit-scrollbar-track {
    background: #f0f9fd;
}

html[data-ui="helsedir-teal"] ::-webkit-scrollbar-thumb {
    background: #047FA4;
}

html[data-ui="helsedir-teal"] ::-webkit-scrollbar-thumb:hover {
    background: #025169;
}