/* =================================================================
   Perx.fans - Design System v2.0
   "Facebook/Google/Bank" Simplicity
   ================================================================= */

/* =================================================================
   1. CSS VARIABLES - NEW DESIGN SYSTEM
   ================================================================= */
:root {
    /* Primary - Hope UI Inspired */
    --primary: #3a57e8;
    --primary-hover: #2e46ba;
    --primary-light: #e9ecff;
    --primary-bg: rgba(58, 87, 232, 0.08);
    --primary-dark: #001F4D;

    /* Nøytrale */
    --bg: #F5F6FA;
    --surface: #FFFFFF;
    --border: #e9ecef;
    --border-light: #f8f9fa;

    /* Tekst */
    --text: #232D42;
    --text-secondary: #8A92A6;
    --text-muted: #8A92A6;
    --text-inverse: #FFFFFF;

    /* Status */
    --success: #1aa053;
    --success-bg: #e6f7ed;
    --warning: #f16a1b;
    --warning-bg: #fef0e6;
    --error: #c03221;
    --error-bg: #fce8e6;
    --info: #079aa2;
    --info-bg: #e6f6f7;

    /* Typografi */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.25rem;    /* 20px */
    --text-xl: 1.5rem;     /* 24px */
    --text-2xl: 2rem;      /* 32px */

    /* Spacing (8px base) */
    --space-1: 0.25rem;    /* 4px */
    --space-2: 0.5rem;     /* 8px */
    --space-3: 0.75rem;    /* 12px */
    --space-4: 1rem;       /* 16px */
    --space-5: 1.5rem;     /* 24px */
    --space-6: 2rem;       /* 32px */
    --space-8: 3rem;       /* 48px */

    /* Border Radius - Hope UI */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 2rem;
    --radius-full: 9999px;
    --radius-pill: 50rem;

    /* Shadows - Hope UI (blue-tinted) */
    --shadow-sm: 0 0.125rem 0.25rem rgba(17, 38, 146, 0.1);
    --shadow: 0 0.5rem 1rem rgba(17, 38, 146, 0.05);
    --shadow-lg: 0 10px 30px 0 rgba(17, 38, 146, 0.05);

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 300;
    --z-toast: 400;

    /* Bottom nav height */
    --bottom-nav-height: 64px;
    --header-height: 56px;
}

/* =================================================================
   2. RESET & BASE
   ================================================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile: Add padding for bottom nav */
@media (max-width: 768px) {
    body {
        padding-bottom: var(--bottom-nav-height);
    }
}

/* =================================================================
   3. TYPOGRAPHY
   ================================================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); font-weight: 600; }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover { color: var(--primary-hover); }

small, .text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* =================================================================
   4. LAYOUT
   ================================================================= */
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

main {
    min-height: calc(100vh - var(--header-height));
    padding: var(--space-4) 0;
}

/* Desktop: Wider container with sidebar space */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
    }

    .app-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: var(--space-6);
    }
}

/* =================================================================
   5. APP LAYOUT (Main wrapper structure)
   ================================================================= */
.app-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-wrapper {
    flex: 1;
    padding-top: var(--header-height);
    padding-bottom: var(--bottom-nav-height);
}

@media (min-width: 768px) {
    .main-wrapper {
        padding-bottom: 0;
        margin-left: 240px;
    }
}

.main-content {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-4);
}

/* =================================================================
   6. HEADER (App Header)
   ================================================================= */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--surface);
    border-bottom: none;
    box-shadow: 0 0.125rem 0.25rem rgba(17, 38, 146, 0.06);
    z-index: var(--z-sticky);
}

@media (min-width: 768px) {
    .app-header {
        left: 240px;
    }
}

.header-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.logo-dot {
    width: 12px;
    height: 12px;
    background: var(--primary);
    border-radius: var(--radius-full);
}

.page-title {
    font-weight: 600;
    color: var(--text);
    font-size: var(--text-base);
}

@media (min-width: 768px) {
    .page-title {
        display: none;
    }
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.header-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.15s ease;
    color: var(--text-secondary);
}

.header-icon-btn:hover {
    background: var(--bg);
    color: var(--text);
}

.notification-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--error);
    border-radius: var(--radius-full);
    color: white;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--text-sm);
    font-weight: 600;
    transition: transform 0.15s ease;
}

.user-avatar:hover {
    transform: scale(1.05);
}

/* =================================================================
   7. BOTTOM TAB BAR (Mobile)
   ================================================================= */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: var(--surface);
    border-top: none;
    box-shadow: 0 -2px 10px rgba(17, 38, 146, 0.08);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: var(--z-sticky);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 768px) {
    .bottom-nav {
        display: none;
    }
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-2) 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 500;
    transition: color 0.15s ease;
    min-height: 44px;
}

.bottom-nav-item svg {
    width: 24px;
    height: 24px;
}

.bottom-nav-item span {
    font-size: 10px;
    margin-top: 2px;
}

.bottom-nav-item:hover,
.bottom-nav-item.active {
    color: var(--primary);
}

.bottom-nav-item.active svg {
    stroke-width: 2.5;
}

/* =================================================================
   8. SIDE NAVIGATION (Desktop)
   ================================================================= */
.side-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    background: var(--primary-dark);
    border-right: none;
    z-index: calc(var(--z-sticky) + 1);
    padding-top: var(--space-5);
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
    .side-nav {
        display: flex;
        flex-direction: column;
    }
}

.side-nav .logo {
    padding: 0 var(--space-4) var(--space-5) var(--space-4);
    color: #FFFFFF;
}

.side-nav .logo a,
.side-nav .logo span {
    color: #FFFFFF !important;
}

.side-nav .logo .logo-dot {
    color: #3a57e8 !important;
}

.side-nav-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-3);
}

.nav-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: var(--space-3) var(--space-2);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: all 0.15s ease;
}

.nav-item svg {
    flex-shrink: 0;
    stroke: rgba(255, 255, 255, 0.7);
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

.nav-item:hover svg {
    stroke: #FFFFFF;
}

.nav-item.active {
    background: rgba(58, 87, 232, 0.4);
    color: #FFFFFF;
}

.nav-item.active svg {
    stroke-width: 2.5;
    stroke: #FFFFFF;
}

.nav-logout {
    color: rgba(255, 150, 150, 0.9);
}

.nav-logout svg {
    stroke: rgba(255, 150, 150, 0.9);
}

.nav-logout:hover {
    background: rgba(192, 50, 33, 0.3);
    color: #ff9999;
}

.nav-logout:hover svg {
    stroke: #ff9999;
}

.nav-bottom {
    margin-top: auto;
    padding-bottom: var(--space-4);
}

/* =================================================================
   9. MORE MENU (Mobile Overlay)
   ================================================================= */
.more-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.more-menu-overlay.active {
    display: block;
    opacity: 1;
}

.more-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    z-index: calc(var(--z-modal) + 1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.more-menu.active {
    transform: translateY(0);
}

.more-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: var(--text-lg);
}

.more-menu-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.more-menu-close:hover {
    background: var(--border);
}

.more-menu-items {
    padding: var(--space-2);
}

.more-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}

.more-menu-item svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.more-menu-item:hover,
.more-menu-item.active {
    background: var(--bg);
}

.more-menu-item.active {
    color: var(--primary);
}

.more-menu-item.active svg {
    color: var(--primary);
}

.more-menu-item-danger {
    color: var(--error);
}

.more-menu-item-danger svg {
    color: var(--error);
}

.more-menu-item-danger:hover {
    background: rgba(220, 38, 38, 0.1);
}

.more-menu-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-2) var(--space-4);
}

/* Hide more menu on desktop */
@media (min-width: 768px) {
    .more-menu,
    .more-menu-overlay {
        display: none !important;
    }
}

/* =================================================================
   10. CARDS
   ================================================================= */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.card-title {
    font-size: var(--text-lg);
    font-weight: 600;
}

.card-compact {
    padding: var(--space-4);
}

.card-flat {
    border: none;
    box-shadow: var(--shadow-sm);
}

/* =================================================================
   11. BUTTONS
   ================================================================= */
button, .btn {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all 0.15s ease;
    min-height: 44px; /* Touch target */
}

.btn-primary, button[type="submit"] {
    background: var(--primary);
    color: var(--text-inverse);
}

.btn-primary:hover, button[type="submit"]:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--border-light);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background: var(--bg);
    color: var(--text);
}

.btn-success {
    background: var(--success);
    color: var(--text-inverse);
}

.btn-error {
    background: var(--error);
    color: var(--text-inverse);
}

.btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    min-height: 32px;
}

.btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
}

.btn-block {
    width: 100%;
}

button:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =================================================================
   12. FORMS
   ================================================================= */
.form-group {
    margin-bottom: var(--space-4);
}

label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family);
    font-size: var(--text-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-height: 44px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

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

textarea {
    min-height: 120px;
    resize: vertical;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: var(--space-2);
    accent-color: var(--primary);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
}

/* Helper text */
.form-help {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--error);
    margin-top: var(--space-1);
}

/* =================================================================
   13. ALERTS & NOTIFICATIONS
   ================================================================= */
.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.alert-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.alert-info {
    background: var(--primary-light);
    border: 1px solid var(--primary);
}

.alert-info .alert-icon { color: var(--primary); }

.alert-success {
    background: var(--success-bg);
    border: 1px solid var(--success);
}

.alert-success .alert-icon { color: var(--success); }

.alert-warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
}

.alert-warning .alert-icon { color: var(--warning); }

.alert-error {
    background: var(--error-bg);
    border: 1px solid var(--error);
}

.alert-error .alert-icon { color: var(--error); }

/* Important alert - prominent */
.alert-important {
    background: var(--error-bg);
    border: 2px solid var(--error);
    cursor: pointer;
}

.alert-important:hover {
    background: #FECACA;
}

/* =================================================================
   14. STAT BOXES
   ================================================================= */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

@media (max-width: 480px) {
    .stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-box {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

.stat-number {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary);
    display: block;
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* =================================================================
   15. FEED / LIST ITEMS (Facebook-style)
   ================================================================= */
.feed-item {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: box-shadow 0.15s ease;
}

.feed-item:hover {
    box-shadow: var(--shadow);
}

.feed-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.feed-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.feed-meta {
    flex: 1;
}

.feed-author {
    font-weight: 600;
    color: var(--text);
}

.feed-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.feed-content {
    color: var(--text);
    line-height: 1.5;
}

.feed-actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

.feed-action {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: color 0.15s ease;
}

.feed-action:hover {
    color: var(--primary);
}

/* =================================================================
   16. FORUM (Simplified)
   ================================================================= */
.forum-category {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    transition: all 0.15s ease;
}

.forum-category:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.forum-category-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.forum-category-info {
    flex: 1;
}

.forum-category-info h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-1);
}

.forum-category-info p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin: 0;
}

.forum-category-stats {
    text-align: right;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.forum-category-stats strong {
    color: var(--text);
    font-size: var(--text-lg);
    display: block;
}

/* Thread list */
.forum-thread {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: background 0.15s ease;
}

.forum-thread:hover {
    background: var(--bg);
}

.forum-thread:last-child {
    border-bottom: none;
}

.forum-thread-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.forum-thread-content {
    flex: 1;
    min-width: 0;
}

.forum-thread-title {
    font-weight: 500;
    color: var(--text);
    margin-bottom: var(--space-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.forum-thread-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.forum-thread-stats {
    display: flex;
    gap: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Thread tags */
.thread-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
}

.thread-tag.pinned {
    background: var(--primary-light);
    color: var(--primary);
}

.thread-tag.locked {
    background: var(--bg);
    color: var(--text-muted);
}

/* Forum post */
.forum-post {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.forum-post:last-child {
    border-bottom: none;
}

.forum-post-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.forum-post-author {
    font-weight: 600;
}

.forum-post-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.forum-post-content {
    color: var(--text);
    line-height: 1.6;
}

.forum-post-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.forum-post-actions button {
    background: transparent;
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    min-height: auto;
}

.forum-post-actions button:hover {
    color: var(--primary);
    background: var(--primary-light);
}

/* Breadcrumb */
.forum-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.forum-breadcrumb a {
    color: var(--primary);
}

.forum-breadcrumb span:not(:last-child)::after {
    content: "›";
    margin-left: var(--space-2);
    color: var(--text-muted);
}

/* Quote box */
.quote-box {
    background: var(--bg);
    border-left: 3px solid var(--primary);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-sm);
}

.quote-box-author {
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

/* Reply form */
.forum-reply-form {
    padding: var(--space-4);
    background: var(--bg);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
}

.forum-reply-form h3 {
    margin-bottom: var(--space-3);
}

/* Forum empty state */
.forum-empty {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
}

.forum-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
}

/* Forum search */
.forum-search {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.forum-search input {
    flex: 1;
}

/* Pagination */
.forum-pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
}

.forum-pagination button {
    min-width: 40px;
    padding: var(--space-2);
}

.forum-pagination button.active {
    background: var(--primary);
    color: var(--text-inverse);
}

/* =================================================================
   17. MODALS
   ================================================================= */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-4);
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp 0.2s ease;
}

.modal-content > form {
    padding: var(--space-5);
}
.modal-tab-content {
    padding: var(--space-5);
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
}

.modal-header h2 {
    font-size: var(--text-lg);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--bg);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--text-muted);
    min-height: 32px;
    padding: 0;
}

.modal-close:hover {
    background: var(--border);
    color: var(--text);
}

.modal-body {
    padding: var(--space-5);
}

.modal-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Modal tabs */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-light);
}

.modal-tab {
    flex: 1;
    padding: var(--space-4);
    text-align: center;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
    background: none;
    border-radius: 0;
    min-height: auto;
}

.modal-tab:hover {
    color: var(--text);
    background: var(--bg);
}

.modal-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

/* =================================================================
   18. TOAST NOTIFICATIONS
   ================================================================= */
#toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toast {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    animation: toastSlideIn 0.2s ease;
    max-width: 400px;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--error); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info { border-left: 3px solid var(--primary); }

/* =================================================================
   19. TABLES
   ================================================================= */
.table-container {
    overflow-x: auto;
    margin: var(--space-4) 0;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}

th {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    background: var(--bg);
}

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

/* =================================================================
   20. BADGES & TAGS
   ================================================================= */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-primary {
    background: var(--primary-light);
    color: var(--primary);
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
}

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.badge-error {
    background: var(--error-bg);
    color: var(--error);
}

/* Status badges for loans */
.status-aktiv { background: var(--success-bg); color: var(--success); }
.status-forfalt { background: var(--error-bg); color: var(--error); }
.status-innbetalt { background: var(--primary-light); color: var(--primary); }
.status-mislighold { background: var(--warning-bg); color: #92400e; }

/* =================================================================
   21. HOMEPAGE LAYOUTS
   ================================================================= */

/* Logged Out Hero */
.homepage-hero {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content {
    max-width: 500px;
    margin: 0 auto;
}

.hero-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-3);
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
}

.hero-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.hero-stat {
    text-align: center;
}

.hero-stat-number {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary);
}

.hero-stat-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.hero-cta {
    margin-top: var(--space-5);
}

.hero-cta .btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
}

.hero-cta-sub {
    margin-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.hero-cta-sub a {
    color: var(--primary);
    font-weight: 500;
}

/* Dashboard (Logged In) */
.homepage-dashboard {
    padding: var(--space-4) 0;
}

.dashboard-welcome {
    margin-bottom: var(--space-5);
}

.dashboard-welcome h2 {
    font-size: var(--text-xl);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

/* Status Cards Grid */
.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.status-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    cursor: pointer;
    transition: all 0.15s ease;
}

.status-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.status-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.status-info {
    display: flex;
    flex-direction: column;
}

.status-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}

.status-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Quick Links */
.quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease;
}

.quick-link:hover {
    background: var(--bg);
}

.quick-link-icon {
    width: 32px;
    height: 32px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

/* Card highlight variant */
.card-highlight {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--bg) 25%, var(--border-light) 50%, var(--bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 16px;
    margin-bottom: var(--space-2);
}

.loading-placeholder {
    padding: var(--space-4);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Legacy hero support */
.hero {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    background: linear-gradient(135deg, var(--primary) 0%, #004999 100%);
    color: var(--text-inverse);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

.hero h1 {
    color: var(--text-inverse);
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.hero p {
    opacity: 0.9;
    font-size: var(--text-lg);
    margin-bottom: var(--space-5);
}

.hero-stats .stat {
    text-align: center;
}

.hero-stats .stat-number {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text-inverse);
}

.hero-stats .stat-label {
    font-size: var(--text-sm);
    opacity: 0.8;
    color: var(--text-inverse);
}

/* =================================================================
   22. PROFILE PAGE
   ================================================================= */
.profile-section {
    margin-bottom: var(--space-4);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    font-weight: 700;
}

.profile-info h1 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-1);
}

.profile-info p {
    color: var(--text-muted);
    margin: 0;
}

/* Accordion for profile sections */
.accordion {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--surface);
    cursor: pointer;
    font-weight: 500;
    transition: background 0.15s ease;
}

.accordion-header:hover {
    background: var(--bg);
}

.accordion-icon {
    transition: transform 0.2s ease;
}

.accordion.open .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    display: none;
    padding: var(--space-4);
    border-top: 1px solid var(--border-light);
}

.accordion.open .accordion-content {
    display: block;
}

/* Profile Stats */
.profile-stats {
    display: flex;
    justify-content: space-around;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.profile-stat {
    text-align: center;
}

.profile-stat-value {
    display: block;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--primary);
}

.profile-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Profile Loan Summary */
.profile-loan-summary {
    display: flex;
    justify-content: space-around;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-sm);
}

.loan-stat {
    text-align: center;
}

.loan-stat-value {
    display: block;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
}

.loan-stat-value.loan-stat-warning {
    color: var(--warning);
}

.loan-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.profile-loan-actions {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.profile-loans-list {
    max-height: 300px;
    overflow-y: auto;
}

/* Consent items */
.consent-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.consent-checkbox {
    padding-top: 2px;
}

.consent-checkbox input {
    width: 18px;
    height: 18px;
}

.consent-info {
    flex: 1;
}

.consent-info strong {
    display: block;
    margin-bottom: var(--space-1);
}

.consent-info p {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.consent-timestamp {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.checkbox-label input {
    width: 18px;
    height: 18px;
}

/* Danger card variant */
.card-danger {
    border: 1px solid var(--error);
    background: rgba(220, 38, 38, 0.05);
}

.btn-danger-outline {
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
}

.btn-danger-outline:hover {
    background: var(--error);
    color: white;
}

/* =================================================================
   23. LAWYER CARDS
   ================================================================= */
.lawyer-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: border-color 0.15s ease;
}

.lawyer-card:hover {
    border-color: var(--primary);
}

.lawyer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.lawyer-name {
    font-size: var(--text-lg);
    font-weight: 600;
}

.lawyer-firm {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.lawyer-selection-count {
    background: var(--primary-light);
    color: var(--primary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-align: center;
}

.lawyer-contact {
    background: var(--bg);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}

.lawyer-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.expertise-tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 500;
}

/* =================================================================
   24. SECTIONS
   ================================================================= */
.section {
    display: none;
}

.section.active {
    display: block;
}

/* =================================================================
   25. LOADING STATES
   ================================================================= */
.loading {
    text-align: center;
    padding: var(--space-6);
    color: var(--text-muted);
}

.skeleton {
    background: linear-gradient(90deg, var(--bg) 25%, var(--border-light) 50%, var(--bg) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =================================================================
   26. FOOTER
   ================================================================= */
footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

footer a {
    color: var(--text-muted);
}

footer a:hover {
    color: var(--primary);
}

@media (min-width: 768px) {
    footer {
        margin-left: 240px;
    }
}
/* Hide footer on mobile (bottom nav takes that space) */
@media (max-width: 768px) {
    footer {
        display: none;
    }
}

/* =================================================================
   27. UTILITY CLASSES
   ================================================================= */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4 { padding: var(--space-4); }
.text-center { text-align: center; }
.font-bold { font-weight: 600; }
.w-full { width: 100%; }

/* =================================================================
   28. BACKWARDS COMPATIBILITY
   Keep old class names working
   ================================================================= */

/* Old grid system */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Old nav classes */
nav a, .nav-link-old {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.15s ease;
    text-decoration: none;
}

nav a:hover {
    background: var(--bg);
    color: var(--text);
}

nav a.active {
    background: var(--primary-light);
    color: var(--primary);
}

/* Old hamburger menu */
.hamburger {
    display: none;
    background: var(--primary);
    color: var(--text-inverse);
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    nav:not(.bottom-nav) {
        display: none;
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--surface);
        padding: var(--space-4);
        flex-direction: column;
        gap: var(--space-2);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }

    nav:not(.bottom-nav).open {
        display: flex;
    }

    nav:not(.bottom-nav) a {
        padding: var(--space-3) var(--space-4);
    }
}

/* Old article styles */
.article-item, .article-list > div {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}

.article-item:hover {
    box-shadow: var(--shadow);
}

/* Disclaimer Footer */
.disclaimer-footer {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    padding: 0;
    margin-top: 2rem;
}
@media (min-width: 768px) {
    .disclaimer-footer {
        margin-left: 240px;
    }
}
.disclaimer-header {
    padding: 1rem 2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
    font-weight: 600;
    transition: background 0.2s;
}
.disclaimer-header:hover {
    background: rgba(0, 0, 0, 0.05);
}
.disclaimer-header h3 {
    margin: 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.disclaimer-toggle {
    font-size: 1.25rem;
    transition: transform 0.3s;
}
.disclaimer-toggle.open {
    transform: rotate(180deg);
}
.disclaimer-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.disclaimer-body.open {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
}
.disclaimer-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 2rem 2rem 2rem;
    font-size: 0.875rem;
    line-height: 1.7;
}
.disclaimer-content h4 {
    color: #92400e;
    margin: 1.5rem 0 0.75rem 0;
    font-size: 1rem;
}
.disclaimer-content ul {
    margin: 0.5rem 0 0.5rem 1.5rem;
}
.disclaimer-content li {
    margin-bottom: 0.25rem;
}
@media (max-width: 768px) {
    .disclaimer-header {
        padding: 0.75rem 1rem;
    }
    .disclaimer-header h3 {
        font-size: 0.85rem;
    }
    .disclaimer-content {
        padding: 0 1rem 1.5rem 1rem;
    }
}

/* Old disclaimer */
.disclaimer {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    font-size: var(--text-sm);
}

/* Old consent group */
.consent-group {
    margin: var(--space-4) 0;
}

/* Processing alert (bankruptcy notice) */
.processing-alert {
    background: var(--error);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.processing-alert:hover {
    transform: translateY(-2px);
}

.processing-alert h3 {
    color: var(--text-inverse);
}

/* User status badge in header */
.user-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .user-status {
        display: none;
    }
}

/* =================================================================
   29. VOTING SYSTEM (NEW)
   ================================================================= */
.voting-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.voting-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.voting-title {
    font-size: var(--text-lg);
    font-weight: 600;
}

.voting-deadline {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.voting-status {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: 600;
}

.voting-status.active {
    background: var(--success-bg);
    color: var(--success);
}

.voting-status.closed {
    background: var(--bg);
    color: var(--text-muted);
}

/* Candidate card */
.candidate-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    cursor: pointer;
    transition: all 0.15s ease;
}

.candidate-card:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.candidate-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}

.candidate-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.candidate-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-lg);
}

.candidate-name {
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.candidate-bio {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Vote progress bar */
.vote-progress {
    height: 8px;
    background: var(--bg);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: var(--space-2);
}

.vote-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.vote-percentage {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Representative card */
.representative-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.representative-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.representative-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-xl);
}

.representative-info h3 {
    margin-bottom: var(--space-1);
}

.representative-role {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.representative-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.representative-stat {
    text-align: center;
    padding: var(--space-3);
    background: var(--bg);
    border-radius: var(--radius-md);
}

.representative-stat-value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--primary);
}

.representative-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Rating stars */
.rating {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--warning);
    font-size: var(--text-lg);
}

.rating-value {
    color: var(--text);
    font-weight: 600;
    margin-left: var(--space-2);
}

.rating-count {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* Recall section */
.recall-section {
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
}

.recall-progress {
    margin-bottom: var(--space-3);
}

.recall-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}

.recall-progress-bar {
    height: 8px;
    background: var(--bg);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.recall-progress-fill {
    height: 100%;
    background: var(--error);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}