/* ============================================================
   NORA SIGNAL — Nora CRM profilhåndbok v1.0 (forside-skin)
   ============================================================
   Scoped rebrand for the public landing page (index.php only).
   Everything here is gated under `body.nora-skin`, so the shared
   CSS files (standalone.css, segmentering.css, ...) still render
   their original look on stats.html and investorer/index.php.

   Strategi:
   - 4 tema-token-sett (Sand standard / Slate / Mørk / Varm),
     scoped under body.nora-skin[data-theme="…"]. Sand er default
     på body.nora-skin (uten data-theme).
   - Re-map de delte CSS-variablene (--primary / --dashboard-*) til
     tema-tokenene, slik at hver var()-referanse i de importerte
     stilarkene plukker opp temaets accent automatisk.
   - Overstyr komponentene som hardkoder farger/gradienter/glass.

   Profilhåndbok (faste verdier):
     Typografi: DM Sans (UI) + Source Serif 4 (store tall/beløp)
     Body 14px / 400 / line-height 1.6, antialiased
     Radius: kort 12 · modal 16 · knapp/input 6 · tag 4 · badge 10
             · logo-merke 8 · avatar 50%
     Skygger: kort 0 1px 2px rgba(0,0,0,.04)
              modal 0 24px 48px rgba(0,0,0,.15)
              dropdown 0 8px 24px rgba(0,0,0,.12)
   ============================================================ */

/* ============================================================
   TEMA-TOKENS — 4 sett, scoped under body.nora-skin
   ============================================================ */

/* ---- SAND (standard) ---- */
body.nora-skin {
    --bg: #F7F7F5;
    --surface: #FFFFFF;
    --surface-hover: #FAFAF8;
    --border: #E8E6E1;
    --border-light: #F0EEEA;
    --text: #1A1A1A;
    --text-secondary: #6B6B6B;
    --text-tertiary: #9B9B9B;
    --accent: #2C5F2D;
    --accent-light: #EEF3EE;
    --accent-hover: #234D24;
    --red: #C44536;     --red-light: #FDF0EE;
    --orange: #B5651D;  --orange-light: #FDF5EE;
    --blue: #2D5F8A;    --blue-light: #EEF3F8;
}

/* ---- SLATE ---- */
body.nora-skin[data-theme="slate"] {
    --bg: #F0F2F5;
    --surface: #FFFFFF;
    --surface-hover: #F7F8FA;
    --border: #DDE1E7;
    --border-light: #EBEEF2;
    --text: #1A1A1A;
    --text-secondary: #6B6B6B;
    --text-tertiary: #9B9B9B;
    --accent: #3B5998;
    --accent-light: #EEF1F8;
    --accent-hover: #2F477A;
    --red: #C44536;     --red-light: #FDF0EE;
    --orange: #B5651D;  --orange-light: #FDF5EE;
    --blue: #2D5F8A;    --blue-light: #EEF3F8;
}

/* ---- MØRK (dark) ---- */
body.nora-skin[data-theme="dark"] {
    --bg: #111113;
    --surface: #1A1A1E;
    --surface-hover: #222227;
    --border: #2A2A30;
    --border-light: #232328;
    --text: #E4E4E7;
    --text-secondary: #A0A0A8;
    --text-tertiary: #6B6B73;
    --accent: #6D9A6E;
    --accent-light: #1E2A1E;
    --accent-hover: #7FAE80;
    --red: #E0685B;     --red-light: #2A1A18;
    --orange: #D08A45;  --orange-light: #2A2018;
    --blue: #5B8FBF;    --blue-light: #18222A;
}

/* ---- VARM (warm) ---- */
body.nora-skin[data-theme="warm"] {
    --bg: #FAF6F1;
    --surface: #FFFFFF;
    --surface-hover: #FBF7F2;
    --border: #E8DFD3;
    --border-light: #F0E9DF;
    --text: #2D2016;
    --text-secondary: #6B5D4F;
    --text-tertiary: #9B8B7B;
    --accent: #A0522D;
    --accent-light: #F5EBE3;
    --accent-hover: #87431F;
    --red: #C44536;     --red-light: #FBEEE9;
    --orange: #B5651D;  --orange-light: #FBF2E7;
    --blue: #2D5F8A;    --blue-light: #ECF1F6;
}

/* ============================================================
   DELT GRUNN — re-mapping, typografi, bakgrunn
   (gjelder alle temaer; bruker var() fra tokenene over)
   ============================================================ */
body.nora-skin {
    /* ---- Re-map the legacy variables used by the shared CSS ----
       Dette bærer temaets accent gjennom hver
       var(--primary)/var(--dashboard-*)-referanse i importene. */
    --primary: var(--accent);
    --primary-dark: var(--accent-hover);
    --accent-dark: var(--accent-hover);
    --primary-gradient: var(--accent);
    --accent-gradient: var(--accent);

    --glass-bg: var(--surface);
    --glass-border: var(--border);
    --shadow-light: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

    --text-primary: var(--text);
    --text-light: var(--text-tertiary);

    --dashboard-bg: var(--bg);
    --dashboard-white: var(--surface);
    --dashboard-border: var(--border);
    --dashboard-text: var(--text);
    --dashboard-text-light: var(--text-secondary);
    --dashboard-hover: var(--surface-hover);

    /* (sidebar-tokens er ikke i bruk på forsiden, men tatt med for fullstendighet) */
    --sb-bg: var(--surface);
    --sb-border: var(--border);
    --sb-text: var(--text);
    --sb-accent: var(--accent);

    --transition: all 0.15s ease;
    --transition-fast: all 0.15s ease;

    /* ---- Typography ---- */
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* ---- Page background + soft tema-bytte ---- */
    background: var(--bg) !important;
    background-attachment: scroll;
    transition: background 0.3s ease, color 0.2s ease;
}

body.nora-skin::before {
    /* Fjern de animerte radial-gradient-blobbene — Nora-drakt er rolig/flat. */
    display: none !important;
    content: none !important;
}

/* Inherit DM Sans everywhere on this page (overrides 'Inter' fallbacks
   that are hard-coded in the shared stylesheets). */
body.nora-skin,
body.nora-skin input,
body.nora-skin button,
body.nora-skin select,
body.nora-skin textarea,
body.nora-skin .search-input,
body.nora-skin .branch-select {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   TEMA-VELGER (sluttbruker) — diskré kontroll, fixed topp venstre
   ============================================================ */
body.nora-skin .nora-theme-switcher {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1200;
    font-family: 'DM Sans', sans-serif;
}

body.nora-skin .nora-theme-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: var(--transition);
}
body.nora-skin .nora-theme-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--accent);
}
body.nora-skin .nora-theme-icon { color: var(--accent); flex-shrink: 0; }
body.nora-skin .nora-theme-label { line-height: 1; }
body.nora-skin .nora-theme-caret {
    color: var(--text-tertiary);
    transition: transform 0.15s ease;
}
body.nora-skin .nora-theme-switcher.open .nora-theme-caret { transform: rotate(180deg); }

body.nora-skin .nora-theme-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 168px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
}
body.nora-skin .nora-theme-switcher.open .nora-theme-menu { display: flex; }

body.nora-skin .nora-theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}
body.nora-skin .nora-theme-option:hover { background: var(--bg); }
body.nora-skin .nora-theme-option > span:nth-child(2) { flex: 1; }

body.nora-skin .nora-theme-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

body.nora-skin .nora-theme-check {
    color: var(--accent);
    opacity: 0;
    flex-shrink: 0;
}
body.nora-skin .nora-theme-option[aria-checked="true"] .nora-theme-check { opacity: 1; }
body.nora-skin .nora-theme-option[aria-checked="true"] { color: var(--accent); }

/* On small screens, keep the switcher tidy (label can hide) */
@media (max-width: 640px) {
    body.nora-skin .nora-theme-switcher { top: 12px; left: 12px; }
    body.nora-skin .nora-theme-label { display: none; }
}

/* ============================================================
   TEXT LOGO — "Nora Signal"
   ============================================================ */
body.nora-skin .logo-container {
    margin-bottom: 1.75rem;
}

body.nora-skin .nora-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

body.nora-skin .logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}

body.nora-skin .nora-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0.32rem;
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}

body.nora-skin .nora-logo .nora-logo-mark {
    color: var(--text);
}

body.nora-skin .nora-logo .nora-logo-accent {
    color: var(--accent);
    font-weight: 600;
}

body.nora-skin .nora-logo:hover .nora-logo-accent {
    color: var(--accent-hover);
}

/* ============================================================
   SEARCH CARD (the main panel)
   ============================================================ */
body.nora-skin .search-container {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transform: none;
}

body.nora-skin .search-container:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Kill the gradient glow ring around the card */
body.nora-skin .search-container::before {
    display: none;
    content: none;
}

/* ============================================================
   SEARCH-MODE TOGGLE (Enkelt søk / Segmentering / Ny/Konkurser)
   ============================================================ */
body.nora-skin .search-toggle {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    backdrop-filter: none;
    padding: 4px;
    gap: 4px;
}

body.nora-skin .toggle-btn {
    color: var(--text-secondary);
    font-weight: 500;
    border-radius: 6px;
    font-size: 13px;
}

body.nora-skin .toggle-btn:hover {
    background: var(--accent-light);
    color: var(--text);
}

body.nora-skin .toggle-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   SIMPLE SEARCH FIELD + BUTTON
   ============================================================ */
body.nora-skin .search-input-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: none;
    transition: var(--transition);
}

body.nora-skin .search-input-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    transform: none;
}

body.nora-skin .search-input {
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    border-radius: 6px 0 0 6px;
}
body.nora-skin .search-input::placeholder { color: var(--text-tertiary); }

body.nora-skin .search-btn {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 6px 6px 0;
}

body.nora-skin .search-btn:hover {
    background: var(--accent-hover);
    transform: none;
}
body.nora-skin .search-btn:active { transform: none; }

/* The standalone "Vis bedrifter" submit buttons inside segmentation forms */
body.nora-skin #segmentation-search-btn,
body.nora-skin #newbankrupt-search-btn {
    border-radius: 6px;
}

/* ============================================================
   CUSTOM SELECTS / DROPDOWNS
   ============================================================ */
body.nora-skin .custom-select .select-display,
body.nora-skin .search-dropdown-wrapper {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}
body.nora-skin .select-display .select-text { color: var(--text); }
body.nora-skin .dropdown-arrow { color: var(--text-tertiary); }

body.nora-skin .select-dropdown,
body.nora-skin .branch-smart-dropdown,
body.nora-skin .autocomplete-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    color: var(--text);
}
body.nora-skin .autocomplete-dropdown {
    border-radius: 0 0 12px 12px;
    border-color: var(--accent);
}

/* Toggle pills inside the segment dropdown (Bransjer / Formål) */
body.nora-skin .mode-toggle-btn.active,
body.nora-skin .newbankrupt-type-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
body.nora-skin .mode-toggle-btn:hover:not(.active),
body.nora-skin .newbankrupt-type-btn:hover:not(.active) {
    background: var(--accent-light);
    color: var(--accent);
}

/* ============================================================
   INPUTS (range / search / branch) — Nora field look
   ============================================================ */
body.nora-skin .range-input,
body.nora-skin .branch-search-input,
body.nora-skin .location-search-input,
body.nora-skin .ai-url-input,
body.nora-skin .form-input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
}
body.nora-skin .range-input::placeholder,
body.nora-skin .branch-search-input::placeholder,
body.nora-skin .location-search-input::placeholder,
body.nora-skin .ai-url-input::placeholder,
body.nora-skin .form-input::placeholder { color: var(--text-tertiary); }
body.nora-skin .range-input:focus,
body.nora-skin .branch-search-input:focus,
body.nora-skin .location-search-input:focus,
body.nora-skin .ai-url-input:focus,
body.nora-skin .form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

/* Section / field labels: uppercase Nora-look */
body.nora-skin .filter-label,
body.nora-skin .contact-filters-label {
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
}
/* Numeric / money fields → Source Serif 4 */
body.nora-skin .range-input,
body.nora-skin .financial-input {
    font-family: 'Source Serif 4', serif;
}

/* Checkboxes / accent colour */
body.nora-skin input[type="checkbox"] { accent-color: var(--accent); }

body.nora-skin .checkbox-item,
body.nora-skin .contact-checkbox-item { color: var(--text); }
body.nora-skin .checkbox-item:hover,
body.nora-skin .contact-checkbox-item:hover {
    background: var(--accent-light);
}

/* AI helper button (ghost → accent) */
body.nora-skin .ai-suggestion-btn {
    color: var(--text-secondary);
}
body.nora-skin .ai-suggestion-btn:hover {
    background: var(--accent-light);
    color: var(--accent);
}
body.nora-skin .ai-next-btn:not(:disabled):not(.disabled) {
    background: var(--accent);
}
body.nora-skin .ai-next-btn:hover:not(:disabled):not(.disabled) {
    background: var(--accent-hover);
}

/* Clear / "Nullstill" buttons → secondary look */
body.nora-skin .clear-btn {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}
body.nora-skin .clear-btn:hover {
    background: var(--bg);
}

/* Live-count chip */
body.nora-skin .live-count-display {
    font-family: 'Source Serif 4', serif;
    color: var(--text-secondary);
}

/* ============================================================
   FOOTER
   ============================================================ */
body.nora-skin .footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
}

body.nora-skin .footer-column h4 {
    color: var(--text);
    border-bottom: 2px solid var(--accent);
    font-weight: 600;
    letter-spacing: -0.3px;
}

body.nora-skin .footer-link,
body.nora-skin .footer-link-external {
    color: var(--text-secondary);
}
body.nora-skin .footer-link:hover,
body.nora-skin .footer-link-external:hover {
    color: var(--accent);
}
body.nora-skin .footer-link::before,
body.nora-skin .footer-link-external::before {
    background: var(--accent);
}
body.nora-skin .footer-copyright p { color: var(--text-secondary); }
body.nora-skin .footer-copyright a { color: var(--accent); }

/* ============================================================
   ACCOUNT MODAL + PURCHASE POPUPS (Nora-styled)
   ============================================================ */
body.nora-skin .account-modal-overlay,
body.nora-skin .purchase-popup-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

body.nora-skin .account-modal,
body.nora-skin .purchase-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    color: var(--text);
}

body.nora-skin .account-modal h3,
body.nora-skin .account-modal h4,
body.nora-skin .purchase-popup h3,
body.nora-skin .purchase-popup h4 { color: var(--text); }
body.nora-skin .account-sub,
body.nora-skin .account-hint,
body.nora-skin .purchase-item-label,
body.nora-skin .account-dl dt { color: var(--text-secondary); }
body.nora-skin .account-dl dd,
body.nora-skin .purchase-item-value { color: var(--text); }

body.nora-skin .account-field label,
body.nora-skin .form-label { color: var(--text-secondary); }

body.nora-skin .account-card,
body.nora-skin .account-price,
body.nora-skin .purchase-summary {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
}

body.nora-skin .account-tabs,
body.nora-skin .purchase-popup-tabs { border-bottom: 1px solid var(--border); }
body.nora-skin .account-tab,
body.nora-skin .purchase-tab { color: var(--text-secondary); }
body.nora-skin .account-tab.active,
body.nora-skin .purchase-tab.active {
    color: var(--accent);
}
body.nora-skin .account-tab.active::after,
body.nora-skin .purchase-tab.active::after { background: var(--accent); }

body.nora-skin .account-btn-primary,
body.nora-skin .purchase-btn-confirm {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
}
body.nora-skin .account-btn-primary:hover,
body.nora-skin .purchase-btn-confirm:hover {
    background: var(--accent-hover);
}

body.nora-skin .account-btn-ghost,
body.nora-skin .purchase-btn-cancel {
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
}
body.nora-skin .account-btn-ghost:hover,
body.nora-skin .purchase-btn-cancel:hover {
    background: var(--bg);
    color: var(--text);
}

body.nora-skin .account-modal-close,
body.nora-skin .purchase-popup-close { color: var(--text-secondary); }
body.nora-skin .account-modal-close:hover,
body.nora-skin .purchase-popup-close:hover { color: var(--text); }

body.nora-skin .account-field input,
body.nora-skin .account-pane input,
body.nora-skin .customer-info-section input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
}
body.nora-skin .account-field input:focus,
body.nora-skin .account-pane input:focus,
body.nora-skin .customer-info-section input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
body.nora-skin .account-field input::placeholder,
body.nora-skin .account-pane input::placeholder,
body.nora-skin .customer-info-section input::placeholder { color: var(--text-tertiary); }

body.nora-skin .purchase-divider { border-color: var(--border); background: var(--border); }
body.nora-skin .account-badge {
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 10px;
}

body.nora-skin .account-modal a,
body.nora-skin .login-link,
body.nora-skin .excel-link,
body.nora-skin .vilkaar-link,
body.nora-skin .account-switch a {
    color: var(--accent);
}

/* Money / totals in the purchase summary → serif numerals */
body.nora-skin .purchase-item-value,
body.nora-skin .purchase-total-value,
body.nora-skin .account-price-row span:last-child,
body.nora-skin #companyCount {
    font-family: 'Source Serif 4', serif;
}
body.nora-skin .purchase-total-value { color: var(--accent); }
body.nora-skin .purchase-total-label { color: var(--text); }

/* Success ticks use the accent rather than legacy colours */
body.nora-skin .success-icon i,
body.nora-skin .account-success-icon i,
body.nora-skin .account-sub-status.ok i {
    color: var(--accent);
}
body.nora-skin .account-sub-status.warn i { color: var(--orange); }

/* CEO-email premium popup (special-access only) — keep token-driven so it
   stays readable in dark mode. */
body.nora-skin .ceo-email-premium-popup-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
body.nora-skin .ceo-email-premium-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}
body.nora-skin .ceo-email-premium-title { color: var(--text); }
body.nora-skin .ceo-email-premium-text { color: var(--text-secondary); }
body.nora-skin .ceo-email-premium-icon { color: var(--accent); }
body.nora-skin .ceo-email-premium-contact a { color: var(--accent); }
body.nora-skin .ceo-email-premium-btn {
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
}
body.nora-skin .ceo-email-premium-btn:hover { background: var(--accent-hover); }