/**
 * LV Winterthur Pattern Library
 *
 * Gemeinsame Styles für alle LVW-Anwendungen
 * Basiert auf Bootstrap 5.3.2
 *
 * Verwendung:
 * <link href="/shared/css/lvw-pattern-library.css" rel="stylesheet">
 *
 * Diese Library muss NACH Bootstrap eingebunden werden.
 */

/* =============================================================================
   CSS Custom Properties (Design Tokens)
   ============================================================================= */

:root {
    /* Brand Colors - LV Winterthur (based on Brand Guidelines) */
    --lvw-primary: #E02F22;
    --lvw-primary-hover: #A32117;
    --lvw-primary-light: #F8D3D0;
    --lvw-secondary: #2E2E2F;
    --lvw-secondary-hover: #100302;

    /* Secondary Brand Colors (for special use cases) */
    --lvw-accent-gold: #E0AE24;
    --lvw-accent-blue: #2495E0;
    --lvw-accent-magenta: #9C2A66;

    /* Semantic Colors */
    --lvw-success: #198754;
    --lvw-warning: #E0AE24;
    --lvw-danger: #dc3545;
    --lvw-info: #2495E0;

    /* Neutral Colors (based on Brand Guidelines) */
    --lvw-gray-100: #f8f9fa;
    --lvw-gray-200: #E5E5E5;
    --lvw-gray-300: #dee2e6;
    --lvw-gray-500: #B6B6B6;
    --lvw-gray-600: #828282;
    --lvw-gray-700: #495057;
    --lvw-gray-800: #2E2E2F;
    --lvw-gray-900: #100302;

    /* Text Colors */
    --lvw-text-primary: #2E2E2F;
    --lvw-text-secondary: #828282;
    --lvw-text-muted: #B6B6B6;

    /* Background Colors */
    --lvw-bg-body: #f8f9fa;
    --lvw-bg-card: #ffffff;
    --lvw-bg-sidebar: #f8f9fa;

    /* Shadows */
    --lvw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --lvw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --lvw-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

    /* Border Radius */
    --lvw-radius-sm: 4px;
    --lvw-radius-md: 8px;
    --lvw-radius-lg: 12px;
    --lvw-radius-pill: 50rem;

    /* Transitions */
    --lvw-transition-fast: 0.15s ease-in-out;
    --lvw-transition-base: 0.2s ease-in-out;
    --lvw-transition-slow: 0.3s ease-in-out;

    /* Spacing */
    --lvw-spacing-xs: 0.25rem;
    --lvw-spacing-sm: 0.5rem;
    --lvw-spacing-md: 1rem;
    --lvw-spacing-lg: 1.5rem;
    --lvw-spacing-xl: 2rem;

    /* Legacy aliases for backwards compatibility */
    --primary-color: var(--lvw-primary);
    --secondary-color: var(--lvw-secondary);
    --success-color: var(--lvw-success);
    --warning-color: var(--lvw-warning);
    --danger-color: var(--lvw-danger);
}

/* =============================================================================
   Base Styles
   ============================================================================= */

body {
    background: var(--lvw-bg-body);
    color: var(--lvw-text-primary);
}

/* =============================================================================
   Navbar
   ============================================================================= */

.navbar-lvw {
    background: var(--lvw-primary) !important;
}

.navbar-lvw .navbar-brand {
    font-weight: 600;
    color: white;
}

.navbar-lvw .navbar-brand:hover {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-lvw .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-lvw .nav-link:hover,
.navbar-lvw .nav-link:focus {
    color: white;
}

/* =============================================================================
   Sidebar Navigation
   ============================================================================= */

.sidebar-lvw {
    min-height: calc(100vh - 56px);
    background: var(--lvw-bg-sidebar);
}

.sidebar-lvw .nav-link {
    color: var(--lvw-text-primary);
    padding: 0.75rem 1rem;
    transition: var(--lvw-transition-fast);
}

.sidebar-lvw .nav-link:hover {
    background: var(--lvw-gray-200);
}

.sidebar-lvw .nav-link.active {
    background: var(--lvw-primary);
    color: white;
}

.sidebar-lvw .nav-link i {
    width: 24px;
}

.sidebar-lvw .nav-section-title {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--lvw-text-secondary);
    letter-spacing: 0.05em;
}

/* =============================================================================
   Cards
   ============================================================================= */

.card-lvw {
    border: none;
    box-shadow: var(--lvw-shadow-sm);
    border-radius: var(--lvw-radius-md);
    transition: var(--lvw-transition-base);
}

.card-lvw:hover {
    transform: translateY(-2px);
    box-shadow: var(--lvw-shadow-md);
}

.card-lvw .card-header {
    background: var(--lvw-bg-card);
    border-bottom: 1px solid var(--lvw-gray-200);
    font-weight: 500;
}

/* Stat Cards (Dashboard) */
.stat-card {
    border-left: 4px solid var(--lvw-primary);
    background: var(--lvw-bg-card);
    border-radius: var(--lvw-radius-md);
    padding: var(--lvw-spacing-lg);
    box-shadow: var(--lvw-shadow-sm);
}

.stat-card.success { border-left-color: var(--lvw-success); }
.stat-card.warning { border-left-color: var(--lvw-warning); }
.stat-card.danger { border-left-color: var(--lvw-danger); }
.stat-card.info { border-left-color: var(--lvw-info); }

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 0.875rem;
    color: var(--lvw-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =============================================================================
   Buttons
   ============================================================================= */

.btn-lvw-primary {
    background: var(--lvw-primary);
    border-color: var(--lvw-primary);
    color: white;
}

.btn-lvw-primary:hover,
.btn-lvw-primary:focus {
    background: var(--lvw-primary-hover);
    border-color: var(--lvw-primary-hover);
    color: white;
}

.btn-lvw-outline-primary {
    color: var(--lvw-primary);
    border-color: var(--lvw-primary);
    background: transparent;
}

.btn-lvw-outline-primary:hover,
.btn-lvw-outline-primary:focus {
    background: var(--lvw-primary);
    border-color: var(--lvw-primary);
    color: white;
}

/* Bootstrap overrides */
.btn-primary {
    background: var(--lvw-primary);
    border-color: var(--lvw-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--lvw-primary-hover);
    border-color: var(--lvw-primary-hover);
}

.btn-outline-primary {
    color: var(--lvw-primary);
    border-color: var(--lvw-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background: var(--lvw-primary);
    border-color: var(--lvw-primary);
}

/* =============================================================================
   Badges & Tags
   ============================================================================= */

.badge-lvw {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--lvw-radius-sm);
}

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

.badge-lvw-secondary {
    background: var(--lvw-secondary);
    color: white;
}

/* Status badges */
.badge-status-draft { background: var(--lvw-gray-600); color: white; }
.badge-status-active { background: var(--lvw-success); color: white; }
.badge-status-closed { background: var(--lvw-danger); color: white; }
.badge-status-archived { background: var(--lvw-gray-500); color: white; }

/* Material tags */
.material-tag {
    display: inline-block;
    background: var(--lvw-gray-200);
    padding: 2px 8px;
    border-radius: var(--lvw-radius-pill);
    font-size: 0.8rem;
    margin: 2px;
}

/* Age group tags */
.age-tag {
    display: inline-block;
    background: var(--lvw-secondary);
    color: white;
    padding: 2px 6px;
    border-radius: var(--lvw-radius-sm);
    font-size: 0.75rem;
    margin: 1px;
}

/* Category badges with colors */
.category-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--lvw-radius-sm);
    color: white;
    font-size: 0.8rem;
}

/* =============================================================================
   Forms
   ============================================================================= */

.form-control:focus,
.form-select:focus {
    border-color: var(--lvw-primary);
    box-shadow: 0 0 0 0.25rem var(--lvw-primary-light);
}

.form-check-input:checked {
    background-color: var(--lvw-primary);
    border-color: var(--lvw-primary);
}

/* =============================================================================
   Tables
   ============================================================================= */

.table-lvw tbody tr:hover {
    background: var(--lvw-gray-100);
}

.table-lvw th {
    font-weight: 600;
    color: var(--lvw-text-primary);
    border-bottom: 2px solid var(--lvw-gray-300);
}

/* =============================================================================
   Training Blocks (Training Generator specific)
   ============================================================================= */

.training-block {
    border-left: 4px solid var(--lvw-gray-300);
    padding-left: var(--lvw-spacing-md);
    margin-bottom: var(--lvw-spacing-lg);
}

.training-block.warmup { border-color: #4CAF50; }
.training-block.lauf_abc { border-color: #2196F3; }
.training-block.huerden_abc { border-color: #9C27B0; }
.training-block.speedwork { border-color: #F44336; }
.training-block.athletik { border-color: #FF9800; }
.training-block.ausdauer { border-color: #00BCD4; }
.training-block.spiel { border-color: #8BC34A; }

/* =============================================================================
   Survey Items (Survey Tool specific)
   ============================================================================= */

.survey-card {
    transition: var(--lvw-transition-base);
}

.survey-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--lvw-shadow-md);
}

.question-type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lvw-gray-100);
    border-radius: var(--lvw-radius-md);
}

.question-item {
    background: var(--lvw-bg-card);
    border: 1px solid var(--lvw-gray-300);
    border-radius: var(--lvw-radius-md);
    padding: var(--lvw-spacing-md);
    margin-bottom: var(--lvw-spacing-sm);
    transition: var(--lvw-transition-fast);
}

.question-item:hover {
    border-color: var(--lvw-primary);
}

.question-item.dragging {
    opacity: 0.5;
}

.drag-handle {
    cursor: move;
    color: var(--lvw-gray-500);
}

.drag-handle:hover {
    color: var(--lvw-text-primary);
}

.question-palette .palette-item {
    cursor: pointer;
    padding: var(--lvw-spacing-sm);
    border-radius: var(--lvw-radius-sm);
    transition: var(--lvw-transition-fast);
}

.question-palette .palette-item:hover {
    background: var(--lvw-gray-100);
}

/* =============================================================================
   Footer
   ============================================================================= */

.site-footer {
    text-align: center;
    padding: var(--lvw-spacing-lg) 0;
    margin-top: var(--lvw-spacing-xl);
    color: var(--lvw-text-secondary);
    font-size: 0.875rem;
    border-top: 1px solid var(--lvw-gray-300);
    background: var(--lvw-bg-card);
}

.site-footer img {
    height: 25px;
    vertical-align: middle;
}

.site-footer a {
    color: var(--lvw-text-secondary);
    text-decoration: none;
}

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

/* =============================================================================
   Login/Register Pages
   ============================================================================= */

.auth-page {
    background: linear-gradient(135deg, var(--lvw-primary) 0%, var(--lvw-secondary) 100%);
    min-height: 100vh;
}

.auth-card {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 10vh;
}

.auth-card .card {
    border: none;
    box-shadow: var(--lvw-shadow-lg);
}

.auth-icon {
    font-size: 3rem;
    color: var(--lvw-primary);
}

/* =============================================================================
   Utility Classes
   ============================================================================= */

.text-lvw-primary { color: var(--lvw-primary) !important; }
.text-lvw-secondary { color: var(--lvw-secondary) !important; }
.bg-lvw-primary { background: var(--lvw-primary) !important; }
.bg-lvw-secondary { background: var(--lvw-secondary) !important; }
.border-lvw-primary { border-color: var(--lvw-primary) !important; }

.response-row:hover {
    background: var(--lvw-gray-100);
}

.chart-container {
    height: 300px;
}

/* =============================================================================
   Print Styles
   ============================================================================= */

@media print {
    .no-print {
        display: none !important;
    }

    .sidebar-lvw,
    .sidebar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .navbar {
        display: none !important;
    }

    .site-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
}

/* =============================================================================
   Responsive Adjustments
   ============================================================================= */

@media (max-width: 768px) {
    .sidebar-lvw,
    .sidebar {
        min-height: auto;
    }

    .stat-card .stat-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .auth-card {
        padding: 2rem 1rem;
    }
}