/* ---------------------------------------------------------------------------
   Design Tokens — Mayors Gambit cinematic redesign.

   This is the single source of truth for every color, font, spacing unit, and
   chrome dimension used site-wide. After the redesign a grep for `#` followed
   by hex digits in templates, stylesheets, and Java string templates should
   return hits ONLY inside this file.

   All values come from doc/design/design_specification.md (§3 background,
   §4 color system, §5 typography, §6 chrome, §7 glass card, §8 spacing,
   §9 buttons, §12 mobile, §15 breakpoints). Keep this file aligned with the
   spec; do not introduce literals elsewhere.
   --------------------------------------------------------------------------- */

:root {
    /* §4 Color system — every color used by the UI is declared here. */
    --bg-main: #0B1020;
    --bg-card: #11182D;
    --primary: #8B5CF6;
    --primary-hover: #A78BFA;
    --primary-deep: #6D28D9;
    --gold: #D4A64F;
    --positive: #22C55E;
    --negative: #EF4444;
    --warning: #F59E0B;
    --neutral: #94A3B8;
    --text-main: #F8FAFC;
    --text-secondary: #94A3B8;

    /* §5 Typography — Inter for UI, Cinzel for headings/branding. Fallback
       stacks ensure the brief FOUT before the webfonts swap in uses a
       visually similar system font, not Times New Roman. */
    --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;

    /* §8 Spacing scale — the only legal spacing units. Avoid arbitrary px. */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    /* §6 Chrome dimensions — desktop sidebar/topbar and mobile topbar. The
       mobile bottom-nav strip was removed; the mobile drawer's width is a
       local literal in the .app-drawer rule rather than a token because it
       is the only consumer. */
    --sidebar-width: 280px;
    --topbar-height-desktop: 72px;
    --topbar-height-mobile: 64px;
    --content-max-width: 1600px;

    /* §7 Glass card — radius reused across every content surface. */
    --card-radius: 20px;
    --card-radius-login: 28px;
    --button-radius: 14px;

    /* §3 Background overlays — desktop and mobile variants of the dark
       gradient applied above the city panorama. */
    --bg-overlay-desktop: linear-gradient(
        180deg,
        rgba(5, 10, 25, 0.88) 0%,
        rgba(10, 14, 30, 0.82) 45%,
        rgba(5, 8, 20, 0.92) 100%
    );
    --bg-overlay-mobile: linear-gradient(
        180deg,
        rgba(4, 8, 18, 0.94),
        rgba(8, 12, 22, 0.92)
    );

    /* Translucent surface colors used by the chrome — referenced as
       rgba() literals only here; templates use these custom properties. */
    --sidebar-bg: rgba(8, 12, 24, 0.82);
    --topbar-bg: rgba(10, 14, 25, 0.72);
    /* Used by the mobile drawer panel — same frosted-glass tint the now-
       removed bottom nav used, expressed as a side panel rather than a
       bottom strip. */
    --drawer-bg: rgba(10, 14, 25, 0.88);
    --card-bg: rgba(18, 24, 42, 0.72);
    --card-bg-mobile: rgba(17, 24, 39, 0.82);
    --card-border: 1px solid rgba(255, 255, 255, 0.08);
    --chrome-border: 1px solid rgba(255, 255, 255, 0.06);
    --row-bg: rgba(255, 255, 255, 0.03);
    --row-bg-hover: rgba(139, 92, 246, 0.08);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.12);

    /* Shadows used by glass cards and primary-button hover. */
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-primary-glow: 0 0 24px rgba(139, 92, 246, 0.45);

    /* Info-banner tints — used by the mayor-decision-active banner. Derived
       from a translucent variant of the primary purple so we don't introduce
       a new hex color outside this file. */
    --banner-info-bg: rgba(139, 92, 246, 0.12);
    --banner-info-border: rgba(139, 92, 246, 0.30);
    --banner-info-text: var(--primary-hover);
}

/* ===========================================================================
   Base typography and document background.
   The panorama + dark gradient overlay is applied at the document root so it
   is rendered once globally and never duplicated per page.
   =========================================================================== */
html, body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    /* §3 — fixed full-screen background. */
    background-image: var(--bg-overlay-desktop), url('/img/bakgrundsbild.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Mobile overlay — darker and lower-contrast so text stays readable on small
   screens, per §3 Mobile overlay. */
@media (max-width: 767px) {
    body {
        background-image: var(--bg-overlay-mobile), url('/img/bakgrundsbild.png');
        background-attachment: scroll; /* fixed backgrounds are janky on iOS Safari */
    }
}

/* §5 — Cinzel for major headings, branding, political titles. Body content
   uses Inter (declared via --font-body on html/body above). */
h1, h2, h3,
.font-display {
    font-family: var(--font-display);
    letter-spacing: 0.01em;
}

/* ===========================================================================
   Glass card — every content surface.
   The pre-redesign `.card` and `.bg-surface` Tailwind utilities are remapped
   here so existing templates inherit the cinematic style without per-page
   rewrites.
   =========================================================================== */
.card,
.bg-surface,
.glass-card {
    background: var(--card-bg) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
    color: var(--text-main);
}

@media (max-width: 767px) {
    .card,
    .bg-surface,
    .glass-card {
        background: var(--card-bg-mobile);
        backdrop-filter: blur(10px); /* §15 — reduced blur on mobile */
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }
}

/* ===========================================================================
   Text color overrides — the pre-redesign palette assumed light surfaces.
   Map the existing Tailwind helper classes onto the dark-theme tokens so all
   existing markup picks up the redesign without per-page edits.
   =========================================================================== */
.text-text-primary,
.text-gray-800,
.text-gray-900 {
    color: var(--text-main);
}

.text-text-secondary,
.text-gray-500,
.text-gray-600,
.text-gray-700 {
    color: var(--text-secondary);
}

.text-green-600,
.text-green-700 {
    color: var(--positive);
}

.text-red-600,
.text-red-700,
.text-error {
    color: var(--negative);
}

/* ===========================================================================
   Party-affinity badges — solid two-tone pill used wherever a PartyAffinity
   (party name + signed value) is rendered. Single source of truth so the
   styling cannot drift between the many pages that show these badges.
   Each call site keeps its own padding/font-size utilities; only the
   sign-driven color is centralized here.
   =========================================================================== */
.party-affinity-positive {
    background-color: var(--positive);
    color: var(--text-main);
}

.party-affinity-negative {
    background-color: var(--negative);
    color: var(--text-main);
}

/* Body / page background overrides — neutralize the pre-redesign light
   surfaces so the cinematic background shows through. */
.bg-gray-50,
.bg-gray-100,
.bg-white {
    background-color: transparent !important;
}

/* Borders previously set against a white surface need to recede on dark. */
.border-border-default,
.border-gray-200,
.border-gray-300,
.border-purple-100 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* The thin gradient strip beneath the legacy header is irrelevant in the new
   chrome and would otherwise float as a stray bright bar. */
header .bg-gradient-to-r,
footer .bg-gradient-to-r {
    display: none;
}

/* ===========================================================================
   Buttons — §9 primary button.
   The pre-redesign `.bg-primary` Tailwind utility is remapped to the gradient
   so all existing primary buttons inherit the new style without per-page
   edits. Hover applies the glow + lift effect.
   =========================================================================== */
.bg-primary,
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-deep)) !important;
    color: var(--text-main) !important;
    border: none;
    border-radius: var(--button-radius);
    min-height: 48px;
    padding: 0 var(--space-4);
    font-family: var(--font-body);
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bg-primary:hover,
.btn-primary:hover,
.hover\:bg-primary-dark:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary-glow);
}

/* ===========================================================================
   Form inputs — give them a glass treatment that reads on the dark surface.
   =========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-main);
    border-radius: 10px;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-secondary);
}

/* Native <select> dropdown options. Without this rule the OS-rendered popup
   inherits the page's dark text on the redesign's dark card background and
   non-highlighted options become invisible. Force the redesign's primary
   text on the card background so every option is readable, not just the
   one currently highlighted by the OS focus ring. */
select option {
    color: var(--text-main);
    background-color: var(--bg-card);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

input:disabled {
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.02);
}

/* ===========================================================================
   Tables → row cards (§10).
   Headers use the panel tint, rows use the translucent row background, hover
   tints purple. On mobile, tables are replaced by stacked cards in the
   per-page templates, but the table styling here keeps tablet rendering
   legible.
   =========================================================================== */
table thead {
    background: var(--row-bg);
}

table tbody tr {
    transition: background 0.2s ease;
}

table tbody tr:hover {
    background: var(--row-bg-hover);
}

table th,
table td {
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.06);
}

table .divide-y > tr {
    border-color: rgba(255, 255, 255, 0.06);
}

/* Replace the legacy light-grey table head with the row-card tint. */
.bg-gray-100 {
    background-color: var(--row-bg) !important;
}

/* ===========================================================================
   App shell — sidebar + topbar (desktop), topbar + hamburger drawer (mobile).
   These rules are paired with the markup in the shared shell partial. The
   visibility toggling is CSS-only against the §15 breakpoints — no JS, no
   server-side branching. Alpine.js drives drawer open/closed state via the
   x-data scope rooted on <header class="app-topbar">.
   =========================================================================== */
.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: var(--chrome-border);
    padding: var(--space-4) var(--space-3);
    overflow-y: auto;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.app-topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-height-desktop);
    background: var(--topbar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: var(--chrome-border);
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 20;
}

/* Body padding reserves space for the fixed sidebar (desktop) and the fixed
   topbar (top). The sidebar and topbar are absolute over the viewport, so
   without this padding the page's <main> would render under them. The
   media queries below adjust this for tablet (icon sidebar) and mobile
   (no sidebar; mobile nav lives behind a hamburger drawer in the topbar). */
body:has(.app-sidebar) {
    padding-left: var(--sidebar-width);
    padding-top: var(--topbar-height-desktop);
}

/* Hamburger + drawer are mobile-only chrome. They are hidden at ≥768px so
   the desktop/tablet sidebar remains the only nav surface there. The mobile
   media query below re-enables them. */
.app-hamburger,
.app-drawer,
.app-drawer-overlay {
    display: none;
}

/* Sidebar nav items. */
.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
    min-height: 44px;
}

.nav-item:hover {
    background: var(--row-bg);
    color: var(--text-main);
}

.nav-item.active {
    background: var(--row-bg-hover);
    color: var(--primary-hover);
    box-shadow: inset 3px 0 0 var(--primary);
}

.nav-item .nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Sidebar sub-nav group toggles. */
.nav-group-header {
    cursor: pointer;
    user-select: none;
}

.nav-group-items {
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-group-items .nav-item {
    min-height: 36px;
    padding: 6px var(--space-3);
}

/* §15 Tablet — between 768px and 1023px the sidebar collapses to an icon
   strip and content takes the freed width. Labels are hidden, only icons
   remain. */
@media (max-width: 1023px) and (min-width: 768px) {
    .app-sidebar {
        width: 72px;
        padding: var(--space-3) var(--space-1);
    }
    body:has(.app-sidebar) {
        padding-left: 72px;
    }
    .app-topbar {
        left: 72px;
    }
    .nav-item .nav-label,
    .nav-group-items {
        display: none;
    }
    .nav-item {
        justify-content: center;
        padding: var(--space-2);
    }
}

/* §15 Mobile — under 768px the sidebar is hidden entirely and the mobile
   topbar takes over as the only chrome. A hamburger button in the topbar's
   top-left slot opens a left-anchored drawer containing every nav
   destination (Election, City, News, Economy, Influence, Settings,
   Logout). The bottom-nav strip from the prior redesign was removed in
   favor of this single-surface model so Settings and Logout are reachable
   on mobile without splitting nav across two surfaces. */
@media (max-width: 767px) {
    .app-sidebar {
        display: none;
    }
    body:has(.app-sidebar) {
        /* On mobile the sidebar is display:none but the :has() selector
           still matches, so override the desktop offsets explicitly. */
        padding-left: 0;
        padding-top: var(--topbar-height-mobile);
    }
    .app-topbar {
        height: var(--topbar-height-mobile);
        padding: 0 var(--space-3);
        left: 0;
    }

    /* Hamburger button — 48px touch target, 24px glyph, in --text-main. */
    .app-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: transparent;
        border: none;
        color: var(--text-main);
        cursor: pointer;
        padding: 0;
        border-radius: 8px;
    }
    .app-hamburger:hover {
        background: var(--row-bg);
    }

    /* Dimmed overlay behind the drawer. Sits between the topbar and the
       drawer panel and dismisses the drawer when tapped. */
    .app-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 45;
    }

    /* Drawer panel — left-anchored, frosted-glass treatment matching the
       removed bottom nav (rgba(10,14,25,0.88) + blur(20px)). Slides in
       from the left in ~0.2s per §13. */
    .app-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        background: var(--drawer-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-right: var(--card-border);
        z-index: 50;
        overflow-y: auto;
    }

    /* Alpine x-transition classes for the slide-in / slide-out animation.
       Enter starts off-screen left and slides to 0; leave reverses. */
    .drawer-enter {
        transition: transform 0.2s ease;
    }
    .drawer-enter-start {
        transform: translateX(-100%);
    }
    .drawer-enter-end {
        transform: translateX(0);
    }
    .drawer-leave {
        transition: transform 0.2s ease;
    }
    .drawer-leave-start {
        transform: translateX(0);
    }
    .drawer-leave-end {
        transform: translateX(-100%);
    }

    /* Drawer nav row — full-width tap target, icon left, label right,
       56px minimum height per the task spec. Active state mirrors the
       desktop sidebar's .nav-item.active treatment for visual parity. */
    .drawer-item {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-3);
        color: var(--text-secondary);
        text-decoration: none;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 500;
        min-height: 56px;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .drawer-item:hover {
        background: var(--row-bg);
        color: var(--text-main);
    }
    .drawer-item.active {
        background: var(--row-bg-hover);
        color: var(--primary-hover);
        box-shadow: inset 3px 0 0 var(--primary);
        text-shadow: 0 0 12px rgba(139, 92, 246, 0.55);
    }
    .drawer-item svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
}

/* ===========================================================================
   Login hero (§11 Login).
   Centers the glass card over the city panorama. The card itself reuses the
   `.glass-card` rules above but bumps the radius and padding per spec.
   =========================================================================== */
.login-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.login-card {
    width: 520px;
    max-width: 92%;
    padding: var(--space-6);
    border-radius: var(--card-radius-login);
    background: var(--card-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: var(--card-border);
    box-shadow: var(--shadow-card);
}

@media (max-width: 767px) {
    .login-card {
        padding: var(--space-4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

.login-logo {
    display: block;
    margin: 0 auto var(--space-4);
    max-height: 220px;
    min-height: 160px;
    width: auto;
}

@media (max-width: 767px) {
    .login-logo {
        min-height: 140px;
        max-height: 180px;
    }
}

/* ===========================================================================
   Animations — §13. Subtle, not flashy.
   =========================================================================== */
.card,
.bg-surface,
.glass-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 1024px) {
    .card:hover,
    .glass-card:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 767px) {
    .card:active,
    .glass-card:active {
        transform: scale(0.98);
    }
}

/* ===========================================================================
   Page title — Cinzel display font, sized per §5.
   =========================================================================== */
.page-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    color: var(--text-main);
    margin-bottom: var(--space-4);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    color: var(--text-main);
    margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
    .page-title {
        font-size: 32px;
    }
    .section-title {
        font-size: 20px;
    }
}

/* Override the legacy text-4xl / text-3xl page heading sizes inside cards so
   they pick up the Cinzel display font automatically without per-page edits. */
.bg-surface h1,
.bg-surface h2,
.bg-surface h3,
.glass-card h1,
.glass-card h2,
.glass-card h3 {
    font-family: var(--font-display);
    color: var(--text-main);
}

/* The legacy "border-purple-500" gradient strip beneath header/footer is no
   longer used — the chrome handles its own borders. */