/* ============================================
   FreyAI Visions - Core Styles

   Contains:
   - CSS Custom Properties (variables) for dark industrial theme
   - Global reset and base typography
   - Layout (sidebar, main content, mobile header)
   - Responsive breakpoints (mobile, tablet, desktop)
   - Base animations (fadeIn, slide, pulse)
   - Tutorial & activity indicator fallback styles

   This is the PRIMARY stylesheet that defines the color palette
   and should be loaded FIRST. All other stylesheets inherit from these
   CSS variables for consistency.

   Cleanup Notes:
   - Added comprehensive CSS variable system with color palette aliases
   - Unified all color variables (--accent-*, --bg-*, --text-*, --border-*)
   - Added backward-compatibility aliases (--bg-primary, --surface, etc.)
   - Consolidated responsive media queries into logical sections
   ============================================ */

:root {
    /* ============================================
       Color Palette - Dark Industrial Theme
       ============================================ */

    /* Background Colors */
    --bg-dark: #0f0f12;
    --bg-sidebar: #16161a;
    --bg-card: #1c1c21;
    --bg-hover: #24242a;
    --bg-input: #1f1f25;

    /* Legacy aliases for backward compatibility */
    --bg-primary: #1c1c21;
    --bg-secondary: #24242a;
    --surface: #1c1c21;
    --surface-dark: #0f0f12;
    --surface-light: #24242a;
    --input-bg: #1f1f25;
    --input-bg-focus: #27272a;
    --bg-muted: #2a2a3a;

    /* Accent Colors - Primary Actions */
    --accent-primary: #6366f1;
    --accent-primary-hover: #818cf8;
    --accent-primary-light: rgba(99, 102, 241, 0.15);
    --accent-primary-alpha: rgba(99, 102, 241, 0.1);

    /* Accent Colors - Status/Intent */
    --accent-success: #22c55e;
    --accent-success-light: rgba(34, 197, 94, 0.15);
    --accent-danger: #ef4444;
    --accent-danger-light: rgba(239, 68, 68, 0.1);
    --accent-warning: #f59e0b;
    --accent-warning-light: rgba(245, 158, 11, 0.15);
    --accent-info: #3b82f6;
    --accent-info-light: rgba(59, 130, 246, 0.15);

    /* Error/Success aliases */
    --color-error: #ef4444;
    --color-success: #22c55e;

    /* Accent Color aliases (for reorder-engine.css compatibility) */
    --accent-color: #4CAF50;
    --accent-dark: #388E3C;
    --accent-bg: rgba(76, 175, 80, 0.15);
    --warning-color: #FFA726;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #8b8b94;

    /* Border & Spacing */
    --border-color: #27272a;
    --border-radius: 12px;
    --border-radius-sm: 8px;

    /* Shadows - Industrial dark theme */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* Transitions & Animations */
    --transition-fast: 0.15s ease;
    --transition: 0.25s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* ============================================
   Layout
   ============================================ */

.app-container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-bottom: 1px solid var(--border-color);
}

.logo-icon {
    font-size: 24px;
}

.logo span {
    font-size: 18px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-info));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    font-size: 14px;
    text-align: left;
    width: 100%;
}

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

.nav-item.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(59, 130, 246, 0.1));
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.nav-icon {
    font-size: 18px;
}

.badge {
    margin-left: auto;
    background: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.badge:empty,
.badge[data-count="0"] {
    display: none;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.btn-new-anfrage {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-info));
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--transition);
}

.btn-new-anfrage:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.btn-new-anfrage span {
    font-size: 18px;
    font-weight: 300;
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: 260px;
    padding: 32px;
    overflow-y: auto;
}

.view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-header {
    margin-bottom: 32px;
}

.view-header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}

.view-header .subtitle {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ============================================
   Components
   ============================================ */

/* Mobile Header */
.mobile-header {
    display: none;
    align-items: center;
    padding: 16px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    height: 60px;
}

.mobile-menu-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
}

.mobile-logo {
    margin-left: 16px;
    font-weight: 600;
    font-size: 18px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-info));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Global Loader */
.global-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    backdrop-filter: blur(4px);
}

.global-loader.active {
    opacity: 1;
    pointer-events: all;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loader-text {
    color: white;
    font-weight: 500;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Button loading state */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.btn-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Skeleton loading placeholder */
.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-wave 1.5s ease-in-out infinite;
    border-radius: var(--border-radius-sm);
}
@keyframes skeleton-wave {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   Quick Actions Home Screen
   Main entry point for non-technical Handwerker
   ============================================ */

.quick-actions-view {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* Greeting Section */
.qa-greeting-section {
    text-align: center;
    padding: 24px 16px;
}

.qa-greeting {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
    line-height: 1.2;
}

.qa-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Cards Grid - 2x2 on mobile, 4 columns on desktop */
.qa-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
}

/* Action Cards */
.qa-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 140px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition);
    font-family: inherit;
    border: none;
    text-decoration: none;
    color: inherit;
    touch-action: manipulation;
}

.qa-card:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.2);
}

.qa-card:active {
    transform: translateY(-2px);
}

.qa-card:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Card Content */
.qa-card-icon {
    font-size: 48px;
    line-height: 1;
    display: block;
}

.qa-card-label {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Recent Activities Section */
.qa-activities-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qa-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding: 0 16px;
}

.qa-activities-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px;
}

.qa-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
}

.qa-activity-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.qa-activity-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 4px;
}

.qa-activity-content {
    flex: 1;
    min-width: 0;
}

.qa-activity-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    word-break: break-word;
}

.qa-activity-time {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.qa-empty-state {
    font-size: 16px;
    color: var(--text-muted);
    text-align: center;
    padding: 24px;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-sm);
    margin: 0;
}

/* Stats Section */
.qa-stats-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.qa-stat-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    min-height: 100px;
}

.qa-stat-badge:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.15);
}

.qa-stat-badge:active {
    transform: translateY(0);
}

.qa-stat-badge:focus {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.qa-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}

.qa-stat-label {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.3;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mobile-header {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        width: 260px;
        transition: transform 0.3s ease;
        top: 60px;
        height: calc(100vh - 60px);
    }

    .sidebar.active {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }

    .main-content {
        margin-left: 0;
        padding: 92px 16px 32px 16px;
    }

    .sidebar .logo {
        display: none;
    }

    /* Modal adjustments */
    .modal-content {
        width: 95%;
        max-height: 90vh;
        margin: 10px;
    }
}

/* Print Optimization */
@media print {

    .sidebar,
    .mobile-header,
    .btn,
    .nav-menu,
    .form-actions,
    .modal-close,
    .status-badge,
    .badge,
    .view-header {
        display: none !important;
    }

    .app-container {
        display: block;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        width: 100% !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .card,
    .item-card,
    .rechnung-preview {
        border: none !important;
        box-shadow: none !important;
        page-break-inside: avoid;
    }

    .rechnung-preview {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Light Theme */
body.light-theme {
    --bg-dark: #f3f4f6;
    --bg-sidebar: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f9fafb;
    --bg-input: #ffffff;
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Accessibility & Validation
   ============================================ */

/* Inline form validation errors */
.input-error {
    border-color: var(--color-error, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.field-error {
    color: var(--color-error, #ef4444);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

/* Visual feedback for invalid forms */
input:not(:placeholder-shown):invalid,
select:not(:placeholder-shown):invalid,
textarea:not(:placeholder-shown):invalid {
    border-color: var(--accent-danger);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ef4444' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    padding-right: 32px;
}

/* Screen Reader Only Class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Focus visibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ============================================
   Demo Mode Banner
   ============================================ */
.demo-mode-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    padding: 12px 20px;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.demo-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
}

.demo-banner-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.demo-banner-text {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
}

.demo-banner-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.demo-banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Adjust body padding when banner is visible */
body:has(.demo-mode-banner) {
    padding-top: 48px;
}

/* ============================================
   User Info Panel
   ============================================ */
.user-info-panel {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 12px;
    background: var(--bg-hover);
    border-radius: 8px;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Tutorial & Activity Indicator Animations
   Fallback styles for services
   ============================================ */

/* Tutorial Overlay & Spotlight */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 15, 18, 0.85);
    backdrop-filter: blur(2px);
    z-index: 9998;
    animation: fadeIn 0.3s ease-out;
}

/* Tutorial Tooltip */
.tutorial-tooltip {
    position: fixed;
    background: #1c1c21;
    border: 2px solid #6366f1;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    z-index: 9999;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 32px rgba(99, 102, 241, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease-out;
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.tutorial-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tutorial Progress Bar */
.tutorial-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tutorial-progress-text {
    font-size: 12px;
    color: #a1a1aa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tutorial-progress-bar {
    height: 4px;
    background: #27272a;
    border-radius: 2px;
    overflow: hidden;
    width: 100%;
}

.tutorial-progress-bar::after {
    content: '';
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #818cf8);
    border-radius: 2px;
    width: 10%;
    transition: width 0.4s ease-out;
}

/* Tutorial Title & Description */
.tutorial-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.tutorial-description {
    margin: 0;
    font-size: 14px;
    color: #a1a1aa;
    line-height: 1.6;
}

/* Tutorial Actions */
.tutorial-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tutorial-btn {
    flex: 1;
    min-width: 100px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

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

.tutorial-btn-primary {
    background: #6366f1;
    color: #ffffff;
    flex: 1.5;
    font-weight: 600;
}

.tutorial-btn-primary:hover:not(:disabled) {
    background: #818cf8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.tutorial-btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.tutorial-btn-secondary {
    background: #27272a;
    color: #a1a1aa;
    border: 1px solid #36363c;
}

.tutorial-btn-secondary:hover:not(:disabled) {
    background: #36363c;
    color: #ffffff;
    border-color: #4a4a52;
}

/* Tutorial Highlight Effect */
.tutorial-highlight {
    position: relative;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4), 0 0 0 8px rgba(99, 102, 241, 0.2) !important;
    border-radius: 8px;
    animation: pulse 2s ease-in-out infinite;
    z-index: 9997;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.4), 0 0 0 8px rgba(99, 102, 241, 0.2);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 0 0 12px rgba(99, 102, 241, 0.1);
    }
}

/* Tutorial Toast Notification */
.tutorial-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #1c1c21;
    color: #a1a1aa;
    padding: 16px 24px;
    border-radius: 8px;
    border-left: 4px solid #6366f1;
    font-size: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    animation: slideInRight 0.3s ease-out;
    opacity: 1;
    transition: opacity 0.3s ease;
}

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

.tutorial-toast-success {
    border-left-color: #22c55e;
    color: #22c55e;
}

.tutorial-toast-warning {
    border-left-color: #f59e0b;
    color: #f59e0b;
}

.tutorial-toast-error {
    border-left-color: #ef4444;
    color: #ef4444;
}

/* Activity Indicator Badge */
.activity-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-primary);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 50%;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--bg-sidebar);
    transition: all 0.3s ease;
}

.activity-badge.badge-danger {
    background: var(--accent-danger);
    animation: pulse-red 2s infinite;
}

.activity-badge.badge-warning {
    background: var(--accent-warning);
    animation: pulse-amber 2s infinite;
}

.activity-badge.badge-info {
    background: var(--accent-info);
    animation: pulse-blue 2s infinite;
}

.activity-badge.badge-success {
    background: var(--accent-success);
}

/* Activity Indicator Pulse Animations */
@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 10px var(--accent-danger);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 20px var(--accent-danger);
        opacity: 0.8;
    }
}

@keyframes pulse-amber {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 10px var(--accent-warning);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 20px var(--accent-warning);
        opacity: 0.8;
    }
}

@keyframes pulse-blue {
    0%, 100% {
        box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 10px var(--accent-info);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 2px var(--bg-sidebar), 0 0 20px var(--accent-info);
        opacity: 0.8;
    }
}

/* Priority Actions Card (Activity Indicator) */
.priority-nudge-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

.priority-nudge-card.has-urgent {
    border-left: 4px solid var(--accent-danger);
}

.priority-nudge-card h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.priority-actions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.priority-action-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-hover);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--accent-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
}

.priority-action-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
}

.priority-action-item.danger {
    border-left-color: var(--accent-danger);
}

.priority-action-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.priority-action-item.warning {
    border-left-color: var(--accent-warning);
}

.priority-action-item.warning:hover {
    background: rgba(245, 158, 11, 0.1);
}

.priority-action-item.info {
    border-left-color: var(--accent-info);
}

.priority-action-item.info:hover {
    background: rgba(59, 130, 246, 0.1);
}

.priority-action-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.priority-action-content {
    flex: 1;
}

.priority-action-text {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-weight: 500;
}

.priority-action-detail {
    font-size: 12px;
    color: var(--text-muted);
}

.priority-action-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.priority-actions-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 14px;
}

.priority-actions-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ============================================
   Enhanced Mobile Responsive Design
   Breakpoints: Mobile (≤640px), Tablet (641-1024px), Desktop (>1024px)
   ============================================ */

/* Mobile: 320px to 640px */
@media (max-width: 640px) {
    /* Root adjustments for small screens */
    :root {
        --border-radius: 10px;
        --border-radius-sm: 6px;
    }

    /* Typography - readable on small screens */
    body {
        font-size: 15px;
        line-height: 1.5;
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 20px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    p {
        font-size: 14px;
    }

    /* Sidebar - slide-out drawer */
    .sidebar {
        transform: translateX(-100%);
        width: 100%;
        max-width: 280px;
        position: fixed;
        z-index: 95;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .sidebar::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: -1;
        display: none;
    }

    .sidebar.active::after {
        display: block;
    }

    /* Mobile header */
    .mobile-header {
        display: flex;
        height: 60px;
        gap: 12px;
    }

    .mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    .mobile-logo {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

    /* Main content adjustments */
    .main-content {
        margin-left: 0;
        padding: 76px 16px 20px 16px;
        width: 100%;
    }

    /* KPI/Dashboard Cards - stack vertically on mobile */
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }

    .stat-card {
        padding: 16px;
        gap: 12px;
        flex-direction: column;
        text-align: center;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        font-size: 24px;
        margin: 0 auto;
    }

    .stat-content {
        align-items: center;
    }

    .stat-value {
        font-size: 24px;
    }

    .stat-label {
        font-size: 12px;
    }

    /* Forms - full-width, stacked */
    .form-group {
        margin-bottom: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    label {
        font-size: 12px;
        margin-bottom: 6px;
        display: block;
    }

    input,
    select,
    textarea {
        width: 100%;
        padding: 12px 12px;
        font-size: 16px; /* Prevents zoom on iOS */
        min-height: 44px;
    }

    textarea {
        min-height: 100px;
    }

    /* Buttons - larger touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
        width: 100%;
        justify-content: center;
    }

    .btn-small,
    .btn-sm {
        padding: 10px 12px;
        min-height: 40px;
    }

    .form-actions {
        flex-direction: column-reverse;
        gap: 10px;
        padding-top: 16px;
        margin-top: 16px;
    }

    .form-actions .btn {
        width: 100%;
    }

    /* Modals - full-screen on mobile */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: flex-end;
        background: rgba(0, 0, 0, 0.5);
        z-index: 200;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        width: 100%;
        max-height: 90vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        padding: 20px;
        max-width: none;
    }

    .modal-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-color);
    }

    .modal-header h2 {
        font-size: 18px;
        margin: 0;
    }

    .modal-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-hover);
        border-radius: 8px;
        cursor: pointer;
        border: none;
        color: var(--text-primary);
        font-size: 18px;
    }

    /* Tables - card-based layout for mobile */
    table {
        font-size: 13px;
    }

    thead {
        display: none;
    }

    tbody tr {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 12px;
        background: var(--bg-card);
    }

    tbody td {
        display: block;
        text-align: left;
        padding: 8px 0;
        border: none;
    }

    tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        display: inline-block;
        width: 40%;
        word-break: break-word;
    }

    tbody td[data-label]::before {
        content: attr(data-label) ': ';
    }

    /* Workflow visual - horizontal scroll on mobile */
    .workflow-steps {
        gap: 8px;
        padding: 12px 0;
    }

    .step-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
        flex-shrink: 0;
    }

    .step-label {
        font-size: 12px;
        min-width: 60px;
    }

    .step-arrow {
        font-size: 18px;
        margin: 0 4px;
        flex-shrink: 0;
    }

    /* View header */
    .view-header {
        margin-bottom: 20px;
    }

    .view-header h1 {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .view-header .subtitle {
        font-size: 12px;
    }

    /* Spacing adjustments */
    .main-content {
        padding: 76px 12px 16px 12px;
    }

    .sidebar-footer {
        padding: 12px;
    }

    .btn-new-anfrage {
        padding: 12px;
        font-size: 13px;
    }

    /* Ensure touch-friendly spacing */
    .nav-item {
        padding: 12px 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Prevent horizontal overflow */
    body,
    html {
        overflow-x: hidden;
    }

    .app-container {
        overflow-x: hidden;
    }

    /* Tutorial responsive */
    .tutorial-tooltip {
        max-width: calc(100% - 32px);
        padding: 16px;
        font-size: 13px;
    }

    .tutorial-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        font-size: 13px;
    }
}

/* Tablet: 641px to 1024px */
@media (min-width: 641px) and (max-width: 1024px) {
    /* Dashboard - 2 columns on tablet */
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Quick Actions - 4 cards in 2x2 grid on tablet */
    .qa-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    /* Stats grid - 2 columns on tablet */
    .qa-stats-section {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Forms - wider on tablet */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Main content padding */
    .main-content {
        padding: 24px 20px;
    }

    /* Sidebar still visible */
    .sidebar {
        width: 240px;
    }

    .main-content {
        margin-left: 240px;
    }

    /* Tables get a bit more breathing room */
    table {
        font-size: 13px;
    }

    /* Modals slightly adjusted */
    .modal-content {
        width: 90%;
        max-width: 600px;
    }

    /* Typography tweaks */
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 21px;
    }

    /* Buttons a bit smaller on tablet */
    .btn {
        padding: 11px 18px;
        min-height: 40px;
    }
}

/* Desktop: 1025px and above */
@media (min-width: 1025px) {
    /* Dashboard - 4 columns on desktop */
    .dashboard-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    /* Quick Actions - 4 cards in single row on desktop */
    .qa-cards-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .qa-card {
        min-height: 160px;
    }

    /* Stats grid - 4 columns on desktop */
    .qa-stats-section {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Forms - 2 column layout */
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Sidebar fixed width */
    .sidebar {
        width: 260px;
    }

    .main-content {
        margin-left: 260px;
    }

    .mobile-header {
        display: none;
    }

    .mobile-menu-toggle {
        display: none;
    }

    /* Table full display on desktop */
    thead {
        display: table-header-group;
    }

    tbody tr {
        display: table-row;
    }

    tbody td {
        display: table-cell;
        padding: 12px;
    }

    tbody td::before {
        content: none;
    }

    /* Modals centered on desktop */
    .modal {
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        width: 90%;
        max-width: 800px;
        margin: 20px;
        border-radius: 12px;
    }

    /* Buttons normal sizing */
    .btn {
        padding: 10px 20px;
        min-height: auto;
    }
}

/* ============================================
   Error Display System — Toast Notifications
   Toast container, messages, and animations
   ============================================ */

#error-display-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    pointer-events: none;
}

/* Toast Base Styles */
.toast {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    animation: slideInRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    pointer-events: auto;
    min-height: 80px;
    transition: all 0.3s ease;
}

.toast.visible {
    opacity: 1;
}

/* Toast Color Variants */
.toast-error {
    border-left: 4px solid var(--accent-danger);
    background: rgba(239, 68, 68, 0.05);
}

.toast-error .toast-icon {
    color: var(--accent-danger);
}

.toast-error .toast-title {
    color: var(--accent-danger);
}

.toast-warning {
    border-left: 4px solid var(--accent-warning);
    background: rgba(245, 158, 11, 0.05);
}

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

.toast-warning .toast-title {
    color: var(--accent-warning);
}

.toast-success {
    border-left: 4px solid var(--accent-success);
    background: rgba(34, 197, 94, 0.05);
}

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

.toast-success .toast-title {
    color: var(--accent-success);
}

.toast-info {
    border-left: 4px solid var(--accent-info);
    background: rgba(59, 130, 246, 0.05);
}

.toast-info .toast-icon {
    color: var(--accent-info);
}

.toast-info .toast-title {
    color: var(--accent-info);
}

/* Toast Content Layout */
.toast-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.toast-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1;
}

.toast-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.toast-close:hover {
    color: var(--text-primary);
    transform: scale(1.1);
}

.toast-message {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.toast-field-error {
    margin: 0;
    font-size: 12px;
    color: var(--accent-danger);
    font-style: italic;
}

/* Toast Actions/Buttons */
.toast-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.toast-btn {
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.toast-btn-retry {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.toast-btn-retry:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

.toast-btn-dismiss {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.toast-btn-dismiss:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Toast Exit Animation */
.toast.removing {
    opacity: 0;
    transform: translateX(400px);
}

/* ============================================
   Empty State Styles
   Used when lists/views have no content
   ============================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: var(--bg-card);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    min-height: 300px;
}

.empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 400px;
}

.empty-state-message {
    font-size: 18px;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.empty-state-btn {
    padding: 14px 28px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 48px;
    min-width: 200px;
}

.empty-state-btn:hover {
    background: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.empty-state-btn:active {
    transform: translateY(0);
}

/* ============================================
   Toast Responsive Design
   Mobile-first adjustments
   ============================================ */

@media (max-width: 768px) {
    #error-display-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
    }

    .toast {
        padding: 14px;
        min-height: 70px;
    }

    .toast-message {
        font-size: 13px;
    }

    .toast-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .empty-state {
        padding: 32px 16px;
        min-height: 250px;
    }

    .empty-state-message {
        font-size: 16px;
    }

    .empty-state-btn {
        width: 100%;
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    #error-display-container {
        bottom: 12px;
        right: 12px;
        left: 12px;
    }

    .toast {
        padding: 12px;
    }

    .toast-header {
        gap: 10px;
    }

    .toast-icon {
        font-size: 18px;
    }

    .toast-title {
        font-size: 15px;
    }

    .toast-message {
        font-size: 12px;
    }

    .toast-actions {
        flex-direction: column;
        gap: 6px;
    }

    .toast-btn {
        width: 100%;
    }
}

/* ============================================
   User Mode (Simple vs Pro) Styles
   ============================================ */

/* Mode Toggle Button */
.mode-toggle-btn {
    width: 100%;
    padding: 12px 14px;
    margin-top: 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--accent-primary);
    border-radius: var(--border-radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    display: block;
}

.mode-toggle-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}

.mode-toggle-btn:active {
    transform: translateY(0);
}

/* Mode Hidden Class */
.mode-hidden {
    display: none !important;
}

/* Animations for mode transitions */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* Mode Tooltip */
.mode-tooltip {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 16px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    max-width: 320px;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
    pointer-events: none;
}

.mode-tooltip.mode-tooltip-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.mode-tooltip-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mode-tooltip-icon {
    font-size: 20px;
    flex-shrink: 0;
    animation: pulse 1.5s ease-in-out infinite;
}

.mode-tooltip-content p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Utility Classes for Mode-Specific Content */
.mode-simple-only {
    /* Shown only in Simple mode */
}

.mode-pro-only {
    /* Shown only in Pro mode */
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .mode-toggle-btn {
        padding: 10px 12px;
        font-size: 12px;
        margin-top: 10px;
    }

    .mode-tooltip {
        bottom: 16px;
        right: 16px;
        left: 16px;
        max-width: none;
    }

    .mode-tooltip-icon {
        font-size: 18px;
    }

    .mode-tooltip-content p {
        font-size: 12px;
    }
}

/* ============================================
   Confirmation Dialog Styles
   ============================================ */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    animation: fadeIn 0.15s ease;
}

.confirm-dialog {
    background: var(--bg-card, #1c1c21);
    border-radius: 12px;
    padding: 2rem;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: slideUp 0.2s ease;
}

.confirm-dialog h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary, #ffffff);
    line-height: 1.4;
}

.confirm-dialog p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    color: var(--text-secondary, #a1a1aa);
}

.confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.confirm-actions button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    border: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.btn-cancel {
    background: var(--bg-hover, #24242a);
    color: var(--text-secondary, #a1a1aa);
    padding: 0.75rem 1.75rem;
}

.btn-cancel:hover {
    background: var(--bg-secondary, #27272a);
    color: var(--text-primary, #ffffff);
}

.btn-cancel:active {
    transform: scale(0.98);
}

.btn-confirm {
    background: var(--accent-primary, #6366f1);
    color: #ffffff;
    padding: 0.75rem 1.75rem;
}

.btn-confirm:hover {
    background: var(--accent-primary-hover, #818cf8);
}

.btn-confirm:active {
    transform: scale(0.98);
}

.btn-destructive {
    background: var(--accent-danger, #ef4444);
}

.btn-destructive:hover {
    background: #dc2626;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .confirm-dialog {
        padding: 1.5rem;
        max-width: 100%;
    }

    .confirm-dialog h3 {
        font-size: 1.125rem;
    }

    .confirm-dialog p {
        font-size: 0.95rem;
    }

    .confirm-actions {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .confirm-actions button {
        flex: 1;
        min-width: 120px;
    }
}

/* ============================================
   Undo Toast (Trash Service)
   ============================================ */
.toast-undo {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: slideInRight 0.3s ease-out;
    min-width: 320px;
    max-width: 480px;
}

.toast-undo .toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.toast-undo .toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.toast-undo .toast-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toast-undo .toast-text strong {
    font-size: 0.95rem;
    color: var(--text-primary, #e0e0e0);
}

.toast-undo .toast-text span {
    font-size: 0.85rem;
    color: var(--text-secondary, #999);
}

.toast-undo .btn-undo {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: background 0.2s;
}

.toast-undo .btn-undo:hover {
    background: var(--accent-primary-hover);
}

.toast-undo .toast-close {
    background: none;
    border: none;
    color: var(--text-secondary, #999);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-undo .toast-close:hover {
    color: var(--text-primary, #e0e0e0);
}

.undo-progress {
    height: 3px;
    background: var(--bg-muted, #2a2a3a);
}

.undo-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--accent-primary);
    transition: width 10s linear;
}

.toast-exit {
    animation: slideOutRight 0.3s ease-in forwards;
}

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

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

@media (max-width: 640px) {
    .toast-undo {
        min-width: auto;
        max-width: none;
        width: calc(100% - 32px);
        margin: 0 16px 8px;
    }
}

/* ============================================
   Form Validation Styles
   ============================================ */
.input-error {
    border-color: var(--color-error, #ef4444) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
.field-error {
    color: var(--color-error, #ef4444);
    font-size: 12px;
    display: block;
    margin-top: 2px;
}