/*
 * DEV-THEME — internetport.se-palett (vit / near-black / röd #be1823)
 *
 * Laddas endast när PHP körs från /dev_kundarea/. Live (/kundarea/)
 * är blå/navy som vanligt — denna fil rörs aldrig där.
 *
 * 60/30/10-regel från internetport.se:
 *   60% white   = bakgrunder
 *   30% dark    = text + UI-element  (#1d1d1c)
 *   10% accent  = knappar + CTAs     (#be1823)
 *
 * Strategi: override CSS-variabler i :root + ett fåtal hardcoded
 * gradienter som style.css använder direkt utan var().
 *
 * Behåll medvetet:
 *   - DEV-banner lila (#7c3aed) — kontrasterar mot rött, signalerar "DEV"
 *   - --success/--warning/--danger — semantik (grön=OK, röd=fel) får inte ändras
 *   - a11y-switcher gul (#ffd60a) — accessibility-mode behöver distinkt färg
 */

:root {
    /* Bakgrund + ytor */
    --bg:           #ffffff;
    --surface:      #ffffff;
    --border:       rgba(29, 29, 28, 0.10); /* 10% opacity of secondary */

    /* Typografi */
    --text:         #1d1d1c;
    --muted:        rgba(29, 29, 28, 0.60); /* 60% opacity */

    /* Primär (CTA/länkar) — internetport.se röd */
    --primary:      #be1823;
    --primary-dark: #8e1019;

    /* Accent — samma röda för konsistens */
    --accent:       #be1823;

    /* Dark surface (headers, mörka block) */
    --dark:         #1d1d1c;

    /* Semantik — OFÖRÄNDRAT (måste betyda samma sak överallt) */
    /* --success: #1f9d55; --warning: #d97706; --danger: #d33245; */
}

/* ============================================================
   Hardcoded gradienter som style.css använder utan var()
   ============================================================ */

/* Site header: var navy-gradient → solid near-black (Internetport-stil) */
.site-header {
    background: #1d1d1c !important;
    border-bottom: 3px solid #be1823 !important;
}

/* Hero-sektion: var navy→blue→cyan gradient → dark→red */
.hero {
    background: linear-gradient(135deg, #1d1d1c 0%, #be1823 100%) !important;
}

/* OBS: .brand-mark INTE överridad — den är fransk bulldog-PNG (Internetport-loggan),
   ska visas på dev också. Ändring av `background` här skulle skriva över hunden.
   .admin-brand-mark (admin-headerns "IP"-badge) övriderr vi däremot nedan. */

/* Admin "IP" brand-mark — texten "IP" i en röd badge */
.admin-brand-mark {
    background: linear-gradient(135deg, #be1823 0%, #1d1d1c 100%) !important;
    color: #fff !important;
}

/* User chip avatar — initialer i röd gradient */
.user-chip .avatar {
    background: linear-gradient(135deg, #be1823 0%, #1d1d1c 100%) !important;
}

/* ============================================================
   Dashboard tiles med ikon vänster + text höger
   ============================================================ */
.tile-with-icon {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 16px !important;
}
.tile-with-icon .tile-icon {
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(190, 24, 35, 0.10);
    color: #be1823;
    display: inline-flex; align-items: center; justify-content: center;
}
.tile-with-icon .tile-icon svg {
    width: 28px; height: 28px;
}
.tile-with-icon .tile-body {
    display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0;
}
/* Färgvariation per tile-typ — alla håller röd accent men ikon-bg skiljer */
.tile-with-icon.tile-warning .tile-icon { background: rgba(217, 119, 6, 0.10); color: #d97706; }
.tile-with-icon.tile-accent  .tile-icon { background: rgba(190, 24, 35, 0.10); color: #be1823; }
.tile-with-icon.tile-success .tile-icon { background: rgba(29, 29, 28, 0.08);  color: #1d1d1c; }

/* ============================================================
   Collapsible panel (<details>) för "Mina aktiva tjänster"
   ============================================================ */
.panel-collapsible > summary {
    user-select: none;
}
.panel-collapsible > summary::-webkit-details-marker { display: none; }
.panel-collapsible .collapse-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 13px;
    color: var(--muted);
}
.panel-collapsible[open] .collapse-chevron {
    transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
    .panel-collapsible .collapse-chevron { transition: none !important; }
}

/* Mobilanpassning: ikon ovanför text vid trångt utrymme */
@media (max-width: 480px) {
    .tile-with-icon { flex-direction: column !important; align-items: center; text-align: center; }
    .tile-with-icon .tile-body { align-items: center; }
}

/* Active nav-item underline: var primary blue */
.site-nav a.active {
    border-bottom-color: #be1823 !important;
}

/* Panel headings / heros med blå border */
.panel-head {
    border-left-color: #be1823 !important;
}

/* ============================================================
   Knapp-tweaks så hover-state får rätt röd
   ============================================================ */

.btn-primary,
.admin-btn-primary {
    background: #be1823 !important;
    border-color: #be1823 !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.admin-btn-primary:hover {
    background: #8e1019 !important;
    border-color: #8e1019 !important;
}

/* Stripe Elements primary color override (uses --primary via JS) */
/* Hanteras i payment-methods.php-Stripe Elements appearance options */

/* ============================================================
   Card-display gradient (payment-methods.php inline-style)
   Kortvisning-blocket har egen gradient hardcoded
   ============================================================ */
.card-display {
    background: linear-gradient(135deg, #1d1d1c 0%, #be1823 100%) !important;
    box-shadow: 0 8px 20px rgba(190, 24, 35, 0.15) !important;
}

/* ============================================================
   Confirm-modal "Ta bort"-knapp: behåll varnings-röd #dc2626
   (skiljer sig från brand-röd för att signalera "destruktiv åtgärd")
   ============================================================ */
/* Ingen override behövs — #dc2626 redan inline + skiljer sig medvetet
   från brand-röd #be1823. */

/* ============================================================
   Focus-states behåller gul (#ffd60a) — accessibility-distinkt
   ============================================================ */
/* Ingen override — :focus styles i style.css använder #ffd60a redan,
   som ger maximal kontrast oavsett tema. */

/* ============================================================
   Mörkt läge (a11y-dark) — om kund slår på dark mode i DEV
   måste röd accent fortfarande synas
   ============================================================ */
body.a11y-dark {
    --primary:      #ff4858; /* ljusare röd för dark-bg-kontrast */
    --primary-dark: #be1823;
    --accent:       #ff4858;
}
body.a11y-dark .site-header {
    background: #0d1117 !important;
    border-bottom-color: #ff4858 !important;
}