/* Variables CSS - CauseFinder Pro Design System */
:root {
    /* Brand Colors - Premium Gold Theme */
    --primary-color: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --secondary-color: #8b5cf6;
    --accent-gold: #d4af37;
    --accent-gold-light: #f4d03f;
    --accent-gold-dark: #b8960c;

    /* Status Colors */
    --success-color: #10b981;
    --success-light: #34d399;
    --danger-color: #ef4444;
    --danger-light: #f87171;
    --warning-color: #f59e0b;
    --warning-light: #fbbf24;
    --info-color: #3b82f6;
    --info-light: #60a5fa;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-dark: #1f2937;
    --bg-darker: #111827;
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-glass-dark: rgba(0, 0, 0, 0.2);

    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.6);

    /* Border Colors */
    --border-color: #e5e7eb;
    --border-light: rgba(255, 255, 255, 0.1);
    --border-gold: rgba(212, 175, 55, 0.3);

    /* Border Radius */
    --border-radius: 16px;
    --border-radius-sm: 10px;
    --border-radius-lg: 24px;
    --border-radius-xl: 32px;

    /* Shadows - Enhanced */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
    --shadow-gold: 0 0 30px rgba(212, 175, 55, 0.3);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Layout */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 68px;
    --header-height: 64px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-warning: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
    --gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.3) 0, transparent 50%),
        radial-gradient(at 80% 0%, rgba(139, 92, 246, 0.2) 0, transparent 50%),
        radial-gradient(at 0% 50%, rgba(212, 175, 55, 0.15) 0, transparent 50%);
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Sidebar - Auto-collapsable */
.sidebar {
    width: var(--sidebar-collapsed-width);
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f1419 100%);
    border-right: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
}

.sidebar:hover {
    width: var(--sidebar-width);
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 3px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

.sidebar-header {
    padding: 12px;
    border-bottom: 2px solid rgba(212, 175, 55, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(22, 33, 62, 0.8) 100%);
    position: relative;
    transition: min-height 0.3s ease, padding 0.3s ease;
}

.sidebar:hover .sidebar-header {
    min-height: 120px;
    padding: 20px 16px;
}

.sidebar-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.logo-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(212, 175, 55, 0.3);
    padding: 4px;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.sidebar:hover .logo-wrapper {
    width: 100%;
    height: auto;
    border-radius: 20px;
    padding: 10px;
}

.sidebar-header:hover .logo-wrapper {
    border-color: rgba(212, 175, 55, 0.35);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.2);
}

.sidebar-header img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(212, 175, 55, 0.3)) brightness(1.05);
    transition: all 0.3s ease;
}

.sidebar:hover .sidebar-header img {
    max-height: 140px;
    transform: scale(1.15);
    transform-origin: center;
}

.sidebar-header:hover img {
    filter: drop-shadow(0 6px 16px rgba(212, 175, 55, 0.4)) brightness(1.1);
}

.sidebar-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

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

.sidebar-nav {
    flex: 1;
    padding: 12px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    margin: 2px 6px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar:hover .nav-item {
    justify-content: flex-start;
    margin: 4px 12px;
    padding: 14px 20px;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, transparent 100%);
    transition: width 0.3s ease;
}

.nav-item:hover {
    background: rgba(212, 175, 55, 0.1);
    color: rgba(255, 255, 255, 0.95);
    border-left-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sidebar:hover .nav-item:hover {
    transform: translateX(4px);
}

.nav-item:hover::before {
    width: 100%;
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
    color: #d4af37;
    border-left-color: #d4af37;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3), inset 0 0 20px rgba(212, 175, 55, 0.1);
}

.sidebar:hover .nav-item.active {
    transform: translateX(4px);
}

.nav-item.active::before {
    width: 100%;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.3) 0%, transparent 100%);
}

.nav-item.active::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #d4af37;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
    animation: navPulse 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar:hover .nav-item.active::after {
    opacity: 1;
}

@keyframes navPulse {

    0%,
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translateY(-50%) scale(1.2);
    }
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 0;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.sidebar:hover .nav-icon {
    margin-right: 14px;
}

.nav-icon img {
    width: 28px;
    height: 28px;
    opacity: 0.75;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-item:hover .nav-icon img {
    opacity: 1;
    transform: scale(1.12);
}

.nav-item.active .nav-icon img {
    opacity: 1;
    transform: scale(1.15);
}

.nav-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease 0s, width 0.3s ease;
}

.sidebar:hover .nav-text {
    opacity: 1;
    width: auto;
    transition: opacity 0.2s ease 0.1s, width 0.3s ease;
}

/* ==========================================
   NAV GROUP - Submenu System
   ========================================== */

.nav-group {
    margin: 2px 6px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover .nav-group {
    margin: 4px 12px;
}

.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar:hover .nav-group-header {
    justify-content: flex-start;
    padding: 14px 20px;
}

.nav-group-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.15) 0%, transparent 100%);
    transition: width 0.3s ease;
}

.nav-group-header:hover {
    background: rgba(212, 175, 55, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.nav-group-header:hover::before {
    width: 100%;
}

.nav-group-header .nav-icon {
    margin-right: 0;
}

.sidebar:hover .nav-group-header .nav-icon {
    margin-right: 14px;
}

/* Group arrow */
.nav-group-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sidebar:hover .nav-group-arrow {
    display: flex;
}

.nav-group.open .nav-group-arrow {
    transform: rotate(90deg);
    color: #d4af37;
}

/* Group children container */
.nav-group-children {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        padding 0.3s ease;
    padding: 0;
}

.nav-group.open .nav-group-children {
    max-height: 500px;
    opacity: 1;
    padding: 4px 0 8px 0;
}

/* Child nav items */
.nav-child {
    padding: 8px 0 !important;
    margin: 1px 0 !important;
    border-left: none !important;
    font-size: 13px;
}

.sidebar:hover .nav-child {
    padding: 10px 20px 10px 28px !important;
    margin: 1px 0 !important;
}

.nav-child .nav-text {
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* Child icon sizing */
.nav-child .nav-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-child .nav-icon img {
    width: 18px;
    height: 18px;
    opacity: 0.55;
    transition: all 0.3s ease;
}

.sidebar:hover .nav-child .nav-icon {
    margin-right: 12px;
}

.nav-child:hover .nav-icon img {
    opacity: 0.9;
    transform: scale(1.15);
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.3));
}

.nav-child.active .nav-icon img {
    opacity: 1;
    transform: scale(1.2);
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.5));
}

/* Group with active child - highlight the header */
.nav-group.has-active-child .nav-group-header {
    color: rgba(212, 175, 55, 0.9);
}

.nav-group.has-active-child .nav-group-header .nav-icon img {
    opacity: 1;
}

.nav-group.has-active-child .nav-group-arrow {
    color: rgba(212, 175, 55, 0.6);
}

/* Separator between groups */
.nav-group+.nav-group {
    margin-top: 2px;
}

.sidebar:hover .nav-group+.nav-group {
    margin-top: 4px;
}


.sidebar-footer {
    padding: 10px;
    border-top: 2px solid rgba(212, 175, 55, 0.15);
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
    transition: padding 0.3s ease;
}

.sidebar:hover .sidebar-footer {
    padding: 20px;
}

/* Footer elements visibility */
.sidebar-footer .user-info,
.sidebar-footer .logout-btn,
.sidebar-footer .status-indicator span:not(.status-dot) {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.sidebar:hover .sidebar-footer .user-info,
.sidebar:hover .sidebar-footer .logout-btn,
.sidebar:hover .sidebar-footer .status-indicator span:not(.status-dot) {
    opacity: 1;
    width: auto;
}

.sidebar-footer .user-profile {
    justify-content: center;
}

.sidebar:hover .sidebar-footer .user-profile {
    justify-content: flex-start;
}

.sidebar-footer .status-indicator {
    justify-content: center;
    padding: 8px;
}

.sidebar:hover .sidebar-footer .status-indicator {
    justify-content: flex-start;
    padding: 12px 16px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: all 0.3s ease;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.status-indicator:hover {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(212, 175, 55, 0.4);
    color: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.status-dot.online {
    background: #2d5016;
    box-shadow: 0 0 12px rgba(45, 80, 22, 0.8);
    animation: pulseOnline 2s infinite;
}

@keyframes pulseOnline {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 12px rgba(45, 80, 22, 0.8);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
        box-shadow: 0 0 16px rgba(45, 80, 22, 1);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-collapsed-width);
    flex: 1;
    padding: 32px;
    max-width: calc(100vw - var(--sidebar-collapsed-width));
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-color);
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, 0.3));
    border-radius: 2px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

/* Statistics Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, 0.3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.3);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-icon {
    font-size: 36px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.stat-card:hover .stat-icon {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
    transform: scale(1.1) rotate(5deg);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

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

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 70%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

/* Chart Cards */
.chart-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(212, 175, 55, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, 0.3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.chart-card:hover {
    box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.25);
}

.chart-card:hover::before {
    transform: scaleX(1);
}

.chart-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 24px 0;
    letter-spacing: -0.3px;
    position: relative;
    padding-bottom: 12px;
}

.chart-card h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, rgba(212, 175, 55, 0.3));
    border-radius: 2px;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 28px;
    margin-top: 40px;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    position: relative;
}

.btn-primary .btn-icon svg,
.btn-primary .btn-text {
    color: white;
    fill: none;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-color));
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

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

.btn-secondary:hover:not(:disabled) {
    background: var(--border-color);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    position: relative;
}

.btn-info {
    background: var(--info-color);
    color: white;
    border: none;
}

.btn-info:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-info:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-info .btn-icon,
.btn-info .btn-icon svg {
    color: white;
}

.btn-warning {
    background: linear-gradient(135deg, var(--warning-color), #f97316);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    position: relative;
}

.btn-warning:hover:not(:disabled) {
    background: linear-gradient(135deg, #d97706, #ea580c);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

.btn-warning:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.btn-warning .btn-icon,
.btn-warning .btn-icon svg {
    color: white !important;
}

.btn-danger .btn-icon svg,
.btn-danger .btn-text {
    color: white;
    fill: none;
}

.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
    transform: translateY(-2px);
}

.btn-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.btn-icon {
    background: transparent;
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.btn-icon:hover::before {
    width: 100%;
    height: 100%;
}

.btn-icon:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}

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

.btn-large {
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.button-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* Running state animations */
.config-panel.running {
    animation: panelPulse 3s ease-in-out infinite;
    border-color: rgba(16, 185, 129, 0.3);
}

@keyframes panelPulse {

    0%,
    100% {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    50% {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 0 20px rgba(16, 185, 129, 0.2);
    }
}

.status-panel.running {
    border-color: rgba(16, 185, 129, 0.3);
}

/* Forms */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.hidden {
    display: none !important;
}

/* Generic hidden class for any element */
.hidden {
    display: none !important;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-input {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    transition: all 0.2s;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

select.form-input[multiple] {
    padding: 8px;
    min-height: 200px;
    overflow-y: auto;
}

select.form-input[multiple] option {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}

select.form-input[multiple] optgroup {
    font-weight: 600;
    color: var(--text-primary);
    padding: 4px 0;
}

select.form-input[multiple] optgroup option {
    font-weight: normal;
    padding-left: 20px;
    color: var(--text-secondary);
}

.form-help-text {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
}

.form-help-text strong {
    color: var(--text-primary);
}

/* Section Header */
.section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-weight: 400;
}

/* Scraper Panel */
.scraper-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.config-panel,
.status-panel {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.config-panel::before,
.status-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.config-panel:hover::before,
.status-panel:hover::before {
    transform: scaleX(1);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--bg-secondary);
}

.panel-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    }
}

.config-panel h3,
.status-panel h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.5px;
}

/* Form Labels */
.form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    transition: color 0.2s ease;
}

.label-icon {
    color: var(--primary-color);
    flex-shrink: 0;
}

.input-wrapper {
    position: relative;
    transition: all 0.3s ease;
}

.input-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.input-wrapper:focus-within::after {
    transform: scaleX(1);
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-input:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.05);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

.form-input-multiselect {
    min-height: 200px;
    padding: 12px;
}

.form-input-multiselect option {
    padding: 10px;
    border-radius: 6px;
    margin: 2px 0;
    transition: background 0.2s ease;
}

.form-input-multiselect option:checked {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.form-help-text {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.form-help-text svg {
    flex-shrink: 0;
    color: var(--info-color);
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}

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

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

/* Buttons */
.button-group {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--bg-secondary);
}

.btn-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-animated::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    z-index: 0;
    pointer-events: none;
}

.btn-animated:hover::before {
    width: 300px;
    height: 300px;
}

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

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.btn-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    color: inherit;
}

/* Ensure icons are visible in primary and danger buttons */
.btn-primary .btn-icon,
.btn-primary .btn-icon svg {
    color: white !important;
}

.btn-danger .btn-icon,
.btn-danger .btn-icon svg {
    color: white !important;
}

.btn-animated:hover .btn-icon {
    transform: scale(1.1);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-loader {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
}

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

.btn-animated.loading .btn-text {
    opacity: 0.7;
}

.btn-animated.loading .btn-loader {
    display: inline-block;
}

/* Status Panel */
.scraper-status {
    margin-bottom: 32px;
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--bg-primary);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.status-badge.running {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    color: var(--success-color);
    border: 2px solid rgba(16, 185, 129, 0.3);
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
    }

    50% {
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    }
}

.status-badge.stopped {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    color: var(--danger-color);
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    position: relative;
    animation: none;
}

.status-badge.running .badge-dot {
    animation: pulseDot 1.5s ease-in-out infinite;
}

.status-badge.running .badge-dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    animation: ripple 1.5s ease-out infinite;
}

@keyframes pulseDot {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Scraper Summary */
.scraper-summary {
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    position: sticky;
    top: 20px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.summary-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bg-secondary);
}

.summary-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--bg-secondary);
}

.summary-stat {
    text-align: center;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.summary-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.summary-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

.status-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
    animation: fadeIn 0.4s ease-out;
}

.stat-item {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1;
}

/* Logs Header */
.logs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bg-secondary);
}

.logs-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.logs-header h4 svg {
    color: var(--primary-color);
}

.btn-clear-logs {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-clear-logs:hover {
    background: var(--bg-secondary);
    border-color: var(--danger-color);
    color: var(--danger-color);
    transform: scale(1.05);
}

.btn-clear-logs.loading {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-clear-logs.loading svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Logs */
.logs-container {
    background: linear-gradient(135deg, #1a1f2e, #1f2937);
    border-radius: 12px;
    padding: 20px;
    max-height: 450px;
    overflow-y: auto;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
}

.logs-container::-webkit-scrollbar {
    width: 8px;
}

.logs-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.logs-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.logs-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.log-entry {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 6px;
    color: #d1d5db;
    animation: slideInLog 0.3s ease-out;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

@keyframes slideInLog {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

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

.log-entry:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.log-entry.log-placeholder {
    opacity: 0.5;
    font-style: italic;
}

.log-entry.info {
    color: #60a5fa;
    border-left-color: #60a5fa;
    background: rgba(96, 165, 250, 0.05);
}

.log-entry.process {
    color: #06b6d4;
    border-left-color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

.log-entry.data {
    color: #a78bfa;
    border-left-color: #a78bfa;
    background: rgba(167, 139, 250, 0.05);
}

.log-entry.config {
    color: #94a3b8;
    border-left-color: #94a3b8;
    background: rgba(148, 163, 184, 0.05);
}

.log-entry.skip {
    color: #9ca3af;
    border-left-color: #9ca3af;
    background: rgba(156, 163, 175, 0.05);
}

.log-entry.error {
    color: #f87171;
    border-left-color: #f87171;
    background: rgba(248, 113, 113, 0.1);
    animation: shake 0.5s ease-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.log-entry.warning {
    color: #fbbf24;
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.05);
}

.log-entry.success {
    color: #34d399;
    border-left-color: #34d399;
    background: rgba(52, 211, 153, 0.05);
}

.log-time {
    color: #6b7280;
    min-width: 90px;
    font-weight: 500;
    flex-shrink: 0;
}

.log-message {
    flex: 1;
    word-break: break-word;
    line-height: 1.6;
}

/* Filters */
.filters-panel {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.filters-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
}

.filters-panel:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.filter-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: end;
}

.filter-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.filter-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1), 0 4px 6px rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
}

.filter-input:hover:not(:focus) {
    border-color: rgba(102, 126, 234, 0.5);
}

/* Table */
.table-container {
    background: var(--bg-primary);
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: visible;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    transition: box-shadow 0.3s ease;
    /* Scroll horizontal styling */
    scrollbar-width: thin;
    scrollbar-color: #d4af37 #f1f1f1;
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #c9a030, #e8c435);
}

.table-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.cases-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cases-table thead {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    position: relative;
}

.cases-table thead::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.cases-table th {
    padding: 18px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.cases-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cases-table th.sortable:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.cases-table th.sortable:active {
    transform: translateY(0);
}

.sort-indicator {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    opacity: 0.6;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.cases-table th.sortable:hover .sort-indicator {
    opacity: 1;
    transform: translateY(-2px);
}

.cases-table td {
    padding: 18px 16px;
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: all 0.2s ease;
}

.cases-table tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInRow 0.5s ease-out;
    animation-fill-mode: both;
}

.cases-table tbody tr:nth-child(1) {
    animation-delay: 0.05s;
}

.cases-table tbody tr:nth-child(2) {
    animation-delay: 0.1s;
}

.cases-table tbody tr:nth-child(3) {
    animation-delay: 0.15s;
}

.cases-table tbody tr:nth-child(4) {
    animation-delay: 0.2s;
}

.cases-table tbody tr:nth-child(5) {
    animation-delay: 0.25s;
}

.cases-table tbody tr:nth-child(6) {
    animation-delay: 0.3s;
}

.cases-table tbody tr:nth-child(7) {
    animation-delay: 0.35s;
}

.cases-table tbody tr:nth-child(8) {
    animation-delay: 0.4s;
}

.cases-table tbody tr:nth-child(9) {
    animation-delay: 0.45s;
}

.cases-table tbody tr:nth-child(10) {
    animation-delay: 0.5s;
}

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

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

.cases-table tbody tr:nth-child(even) {
    background: rgba(249, 250, 251, 0.5);
}

.cases-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    transform: translateX(4px);
    box-shadow: -4px 0 0 0 #1e293b;
}

.cases-table tbody tr:hover td {
    color: var(--text-primary);
}

.cases-table .loading {
    text-align: center;
    padding: 60px 48px;
    color: var(--text-secondary);
    font-size: 15px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
}

/* Status Badge in Table */
.status-badge-inline {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.status-badge-inline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.status-badge-inline:hover::before {
    left: 100%;
}

.status-badge-inline.new {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge-inline.new:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.status-badge-inline.processing {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge-inline.processing:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(217, 119, 6, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3);
}

.status-badge-inline.processed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge-inline.processed:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.status-badge-inline.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge-inline.error:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(220, 38, 38, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3);
}

.status-badge-inline.archived {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.15) 100%);
    color: #4b5563;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.status-badge-inline.archived:hover {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.25) 0%, rgba(75, 85, 99, 0.25) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(107, 114, 128, 0.3);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

.pagination button {
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.pagination button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    transition: left 0.3s;
    z-index: 0;
}

.pagination button span {
    position: relative;
    z-index: 1;
}

.pagination button:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.pagination button:hover:not(:disabled)::before {
    left: 0;
}

.pagination button:active:not(:disabled) {
    transform: translateY(0);
}

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

.pagination .page-info {
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Sync Section */
.sync-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sync-info-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-card {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1e293b 0%, #0f172a 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: #1e293b;
}

.info-card:hover::before {
    transform: scaleX(1);
}

.info-icon {
    font-size: 36px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 14px;
    box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.info-card:hover .info-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 12px rgba(102, 126, 234, 0.4);
}

.info-content {
    flex: 1;
}

.info-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.info-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.sync-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.sync-actions:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.selection-info {
    margin-left: auto;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 600;
}

.sync-table-container {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    transition: box-shadow 0.3s ease;
}

.sync-table-container:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sync-table-container h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sync-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.sync-table thead {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    position: relative;
}

.sync-table thead::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.sync-table th {
    padding: 18px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sync-table td {
    padding: 18px 16px;
    border-top: 1px solid var(--border-color);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: all 0.2s ease;
}

.sync-table tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInRow 0.5s ease-out;
    animation-fill-mode: both;
}

.sync-table tbody tr:nth-child(1) {
    animation-delay: 0.05s;
}

.sync-table tbody tr:nth-child(2) {
    animation-delay: 0.1s;
}

.sync-table tbody tr:nth-child(3) {
    animation-delay: 0.15s;
}

.sync-table tbody tr:nth-child(4) {
    animation-delay: 0.2s;
}

.sync-table tbody tr:nth-child(5) {
    animation-delay: 0.25s;
}

.sync-table tbody tr:nth-child(6) {
    animation-delay: 0.3s;
}

.sync-table tbody tr:nth-child(7) {
    animation-delay: 0.35s;
}

.sync-table tbody tr:nth-child(8) {
    animation-delay: 0.4s;
}

.sync-table tbody tr:nth-child(9) {
    animation-delay: 0.45s;
}

.sync-table tbody tr:nth-child(10) {
    animation-delay: 0.5s;
}

.sync-table tbody tr:nth-child(even) {
    background: rgba(249, 250, 251, 0.5);
}

.sync-table tbody tr:hover {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.08) 0%, rgba(245, 87, 108, 0.08) 100%);
    transform: translateX(4px);
    box-shadow: -4px 0 0 0 #f093fb;
}

.sync-table .loading {
    text-align: center;
    padding: 60px 48px;
    color: var(--text-secondary);
    font-size: 15px;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.05) 0%, rgba(245, 87, 108, 0.05) 100%);
}

.sync-table input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #1e293b;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.sync-table input[type="checkbox"]:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.sync-table input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Database Panel */
.database-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* Database Schema Styles */
.schema-container {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.schema-header {
    padding: 32px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.schema-header h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
}

.schema-description {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.6;
}

#schemaContainer {
    padding: 32px;
    min-height: 400px;
}

.schema-tables {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.schema-table-card {
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.schema-table-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.schema-table-header {
    padding: 20px 24px;
    background: var(--bg-primary);
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.schema-table-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.schema-table-icon {
    font-size: 24px;
}

.schema-table-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.schema-table-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.schema-stat {
    background: var(--bg-secondary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.schema-table-content {
    padding: 24px;
}

.schema-section {
    margin-bottom: 32px;
}

.schema-section:last-child {
    margin-bottom: 0;
}

.schema-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.schema-section-icon {
    font-size: 18px;
}

.schema-table-wrapper {
    overflow-x: auto;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.schema-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.schema-table thead {
    background: var(--bg-tertiary);
}

.schema-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.schema-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.schema-table tbody tr:hover {
    background: var(--bg-secondary);
}

.schema-table tbody tr:last-child td {
    border-bottom: none;
}

.schema-code {
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 600;
}

.schema-type {
    color: var(--text-primary);
    font-weight: 500;
}

.schema-nullable {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.schema-nullable.nullable-yes {
    background: #dbeafe;
    color: #1e40af;
}

.schema-nullable.nullable-no {
    background: #fee2e2;
    color: #991b1b;
}

.schema-default {
    color: var(--text-secondary);
    font-style: italic;
}

.schema-relations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schema-relation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.schema-relation-arrow {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 18px;
}

.schema-indexes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.schema-index-item {
    padding: 8px 14px;
    background: var(--bg-primary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.schema-error {
    padding: 24px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: var(--border-radius-sm);
    border: 1px solid #fecaca;
    text-align: center;
    font-weight: 600;
}

/* Model Explanation Styles */
.model-explanation {
    padding: 24px 32px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 0;
}

.model-explanation h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 20px 0;
}

.model-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.model-level {
    width: 100%;
}

.model-tables-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.model-table {
    background: white;
    padding: 16px;
    border-radius: var(--border-radius-sm);
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.model-table strong {
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 700;
}

.model-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.model-arrow {
    font-size: 24px;
    color: var(--primary-color);
    font-weight: bold;
}

.model-relationships {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.model-relationships h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.model-relationships ul {
    margin: 0;
    padding-left: 20px;
    list-style-type: disc;
}

.model-relationships li {
    margin-bottom: 8px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.model-relationships li strong {
    color: var(--text-primary);
}

@media (max-width: 1200px) {
    .model-tables-row {
        grid-template-columns: 1fr;
    }
}

/* Reports Section */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.report-card {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

.report-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.report-card-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.report-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.report-card-body {
    padding: 24px;
    flex: 1;
}

.report-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.report-filters {
    margin-top: 20px;
}

.report-filters .form-group {
    margin-bottom: 16px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.date-range-group {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

.date-inputs {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.date-input-wrapper {
    flex: 1;
    min-width: 200px;
}

.date-input-wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.date-input-wrapper .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    transition: border-color 0.2s;
}

.date-input-wrapper .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.report-card-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.btn-generate {
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-generate:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Notification */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 16px 20px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 500px;
    animation: slideInRight 0.3s ease-out;
}

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

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

.notification.success {
    background: var(--success-color);
    color: white;
}

.notification.error {
    background: var(--danger-color);
    color: white;
}

.notification.info {
    background: var(--info-color);
    color: white;
}

.notification.warning {
    background: var(--warning-color);
    color: white;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.52);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

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

.modal-header h2 {
    font-size: 24px;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s;
}

.modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
}

/* Case detail modal - layout fijo: header y botones siempre visibles */
.case-detail-modal .modal-body {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    min-height: 0;
}

.case-detail-modal .case-header-card {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.case-detail-modal .case-tabs-nav {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.case-detail-modal .case-tabs-content {
    flex: 1 1 0;
    min-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.case-detail-modal .modal-header {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 20;
    padding: 0;
    border: none;
}

.case-detail-modal .modal-header h2 {
    display: none;
}

.case-detail-modal .modal-close {
    background: rgba(0, 0, 0, 0.25);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.case-detail-modal .modal-close:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}

.case-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.detail-row:last-child {
    border-bottom: none;
}

.detail-row strong {
    min-width: 180px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Documents Section */
.documents-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid var(--border-color);
}

.documents-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.documents-title svg {
    color: var(--primary-color);
}

.documents-table-container {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    max-height: 400px;
    overflow-y: auto;
}

.documents-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.documents-table thead {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    position: sticky;
    top: 0;
    z-index: 10;
}

.documents-table th {
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
    white-space: nowrap;
}

.documents-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: top;
}

.documents-table tbody tr:hover {
    background: var(--bg-secondary);
}

.documents-table tbody tr:last-child td {
    border-bottom: none;
}

.document-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    font-size: 12px;
}

.doc-type {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-color);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-weight: 500;
}

.doc-link:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: scale(1.05);
}

.doc-link svg {
    width: 14px;
    height: 14px;
}

.no-docs {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 12px;
    padding: 8px;
}

/* Document Cards & Buttons */
.document-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.document-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.doc-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    cursor: pointer;
}

.doc-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.doc-button .doc-icon {
    font-size: 16px;
}

.doc-button .doc-label {
    flex: 1;
}

.doc-button svg {
    transition: transform 0.2s;
}

.doc-button:hover svg {
    transform: translateY(2px);
}

/* Anexo Cards */
.anexo-card {
    transition: all 0.2s;
}

.anexo-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: #10b981 !important;
}

.anexo-card .doc-button {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.anexo-card .doc-button:hover {
    background: #059669;
    border-color: #059669;
}

.documents-info {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--info-color);
}

.documents-info p {
    margin: 8px 0;
    font-size: 14px;
    color: var(--text-primary);
}

.documents-info code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--primary-color);
}

.documents-note {
    padding: 12px 16px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 8px;
    border-left: 4px solid var(--warning-color);
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 12px;
}

/* Scraper Confirmation Modal */
.scraper-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
    background: rgba(0, 0, 0, 0.5);
}

.scraper-modal.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
}

.scraper-modal.closing {
    opacity: 0;
    pointer-events: none;
}

.scraper-modal.closing .scraper-modal-container {
    animation: modalSlideOut 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalSlideOut {
    to {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
}

.scraper-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
}

.scraper-modal-container {
    position: relative;
    background: var(--bg-primary);
    border-radius: 24px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

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

.scraper-modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 24px 28px;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.scraper-modal-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    50% {
        transform: translate(-50%, -50%) rotate(180deg);
    }
}

.scraper-modal-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: iconPulse 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

.scraper-modal-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    position: relative;
    z-index: 1;
    letter-spacing: -0.5px;
}

.scraper-modal-subtitle {
    font-size: 15px;
    opacity: 0.9;
    margin: 0;
    position: relative;
    z-index: 1;
    font-weight: 400;
}

.scraper-modal-body {
    padding: 24px 28px;
    background: var(--bg-primary);
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.config-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.config-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    animation: slideInItem 0.4s ease-out backwards;
    min-width: 0;
    /* Permite que el contenido se ajuste en flexbox */
    overflow: hidden;
    /* Evita que el contenido se desborde */
}

.summary-item:nth-child(1) {
    animation-delay: 0.1s;
}

.summary-item:nth-child(2) {
    animation-delay: 0.15s;
}

.summary-item:nth-child(3) {
    animation-delay: 0.2s;
}

.summary-item:nth-child(4) {
    animation-delay: 0.25s;
}

.summary-item:nth-child(5) {
    animation-delay: 0.3s;
}

.summary-item:nth-child(6) {
    animation-delay: 0.35s;
}

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

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

.summary-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-color);
}

.config-summary-grid .summary-item.summary-full-width {
    grid-column: 1 / -1;
}

.summary-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(99, 102, 241, 0.3);
    font-size: 16px;
}

.summary-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.summary-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.summary-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
    max-width: 100%;
}

/* Update mode header variant */
.scraper-modal-header.update-mode {
    background: linear-gradient(135deg, #00897b, #00bfa5);
}

.scraper-modal-header.update-mode+.scraper-modal-body+.scraper-modal-footer {
    justify-content: center;
}

/* Confirm Update Summary */
.confirm-update-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 0;
    gap: 16px;
}

.confirm-update-big-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.confirm-update-number {
    font-size: 56px;
    font-weight: 800;
    color: #00bfa5;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.confirm-update-label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.confirm-update-state-badge {
    display: inline-block;
    background: rgba(0, 191, 165, 0.1);
    color: #00897b;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 20px;
    border-radius: 20px;
    border: 1px solid rgba(0, 191, 165, 0.25);
    letter-spacing: 0.3px;
}

.confirm-update-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 360px;
    margin: 0;
}

/* Update variant for confirm button */
.scraper-modal-btn-confirm.update-variant {
    background: linear-gradient(135deg, #00bfa5, #00897b) !important;
}

.scraper-modal-btn-confirm.update-variant:hover {
    background: linear-gradient(135deg, #00d4b8, #009e8c) !important;
}

.scraper-modal-footer {
    padding: 24px 32px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
    margin-top: auto;
}

.scraper-modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    min-width: 140px;
    justify-content: center;
}

.scraper-modal-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
    pointer-events: none;
    z-index: 0;
}

.scraper-modal-btn:hover::before {
    width: 300px;
    height: 300px;
}

.scraper-modal-btn svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.scraper-modal-btn span,
.scraper-modal-btn {
    position: relative;
    z-index: 1;
}

.scraper-modal-btn:hover svg {
    transform: scale(1.1);
}

.scraper-modal-btn-cancel {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.scraper-modal-btn-cancel:hover {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.scraper-modal-btn-confirm {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.scraper-modal-btn-confirm:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--secondary-color));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.scraper-modal-btn-confirm:active {
    transform: translateY(0);
}

.scraper-modal-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    flex-shrink: 0;
}

.scraper-modal-btn-confirm svg,
.scraper-modal-btn-confirm {
    color: white;
}

.scraper-modal-btn-cancel svg {
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .scraper-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: var(--sidebar-collapsed-width);
        transform: translateX(-100%);
        transition: transform 0.3s, width 0.3s;
    }

    .sidebar:hover {
        width: var(--sidebar-width);
    }

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

    .main-content {
        margin-left: 0;
        max-width: 100vw;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* /* Custom Modal Styles (Sleek SaaS Design) */
.custom-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.custom-modal.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
}

.custom-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10001;
    animation: fadeIn 0.3s ease-out;
}

.custom-modal-container {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0,0,0,0.05);
    animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    z-index: 10002;
    padding: 32px 24px;
    text-align: center;
}

@keyframes modalScaleUp {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.custom-modal-header {
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #1e293b;
}

.custom-modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
}

.custom-modal-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

/* Elegant Icon Colors */
.custom-modal-icon-info {
    background: #eff6ff;
    color: #3b82f6;
}

.custom-modal-icon-warning {
    background: #fffbeb;
    color: #f59e0b;
}

.custom-modal-icon-danger {
    background: #fef2f2;
    color: #ef4444;
}

/* Clean Title */
.custom-modal-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.custom-modal-body {
    padding: 12px 0 24px 0;
    color: #64748b;
}

.custom-modal-message {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    white-space: pre-line;
}

/* Minimal Footer */
.custom-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
}

.custom-modal-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.custom-modal-btn svg {
    display: none; /* Hide emojis/SVG arrows in standard buttons to keep it clean */
}

/* Primary buttons */
.custom-modal-btn-primary,
.custom-modal-btn-confirm {
    background: #0f172a;
    color: #ffffff;
}

.custom-modal-btn-primary:hover,
.custom-modal-btn-confirm:hover {
    background: #334155;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.custom-modal-btn-primary:active,
.custom-modal-btn-confirm:active {
    transform: translateY(0);
}

/* Danger buttons */
.custom-modal-btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.custom-modal-btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* Cancel / Light buttons */
.custom-modal-btn-cancel {
    background: #f1f5f9;
    color: #475569;
}

.custom-modal-btn-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
}

@media (max-width: 768px) {
    .custom-modal-container {
        padding: 24px 20px;
    }
    .custom-modal-footer {
        flex-direction: column;
    }
    .custom-modal-btn {
        width: 100%;
    }
}

/* Ciudad Dropdown Search */
.ciudad-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(99, 102, 241, 0.08);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 6px;
    backdrop-filter: blur(12px);
    padding: 4px;
}

.ciudad-dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: none;
    border-radius: 8px;
    margin: 2px 0;
    font-size: 13px;
    color: var(--text-primary);
}

.ciudad-dropdown-item:last-child {
    border-bottom: none;
}

.ciudad-dropdown-item:hover {
    background: rgba(99, 102, 241, 0.08);
}

.ciudad-dropdown-item.selected {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}

.ciudad-dropdown-item.highlight {
    background: rgba(99, 102, 241, 0.12);
}

.input-wrapper {
    position: relative;
}

@media (max-width: 768px) {
    .custom-modal-container {
        width: 95%;
        max-width: none;
    }

    .custom-modal-header {
        padding: 24px;
    }

    .custom-modal-body {
        padding: 24px;
    }

    .custom-modal-footer {
        padding: 20px;
        flex-direction: column;
    }

    .custom-modal-btn {
        width: 100%;
    }
}

/* ============================================
   CASE DETAIL MODAL - REDESIGNED
   ============================================ */

/* Modal entrance animation */
.modal.active .modal-content {
    animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

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

/* Enhanced modal for case details - más espacio y diseño limpio */
.modal-content.case-detail-modal {
    max-width: 1200px;
    width: 95%;
    max-height: 96vh;
    min-height: 85vh;
    border-radius: 12px;
    border: none;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.1);
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    overflow: hidden;
}

/* Case Header Card - compacto, reservar espacio para botón cerrar */
.case-header-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 20px 52px 18px 28px;
    color: white;
    position: relative;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.case-header-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.case-header-rol {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.case-header-caratulado {
    font-size: 14px;
    opacity: 0.95;
    font-weight: 500;
    margin-bottom: 10px;
}

.case-header-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.case-header-badge {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Tabs Navigation - más compacto */
.case-tabs-nav {
    display: flex;
    background: #f1f5f9;
    padding: 6px 10px;
    gap: 4px;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    flex-shrink: 0;
}

.case-tab-btn {
    padding: 12px 20px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.case-tab-btn:hover {
    background: #e2e8f0;
    color: #334155;
}

.case-tab-btn.active {
    background: white;
    color: #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.case-tab-btn .tab-count {
    background: #e0e7ff;
    color: #4338ca;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}

.case-tab-btn.active .tab-count {
    background: #6366f1;
    color: white;
}

/* Toggle vista cuadernos/trámites - estado activo */
.cuadernos-view-btn.active,
.cuadernos-view-btn-initial.active,
.tramites-view-btn.active {
    background: #6366f1 !important;
    color: white !important;
}

/* Tab Content - scroll interno, más espacio útil */
.case-tabs-content {
    padding: 20px 24px 28px;
    background: #fff;
}

.case-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.case-tab-panel.active {
    display: block;
}

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

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

/* Info Grid */
.case-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.case-info-item {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.case-info-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.case-info-label {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.case-info-value {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

/* Document Cards */
.doc-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.doc-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.doc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1e293b, #0f172a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.doc-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.12);
    transform: translateY(-2px);
}

.doc-card:hover::before {
    transform: scaleX(1);
}

.doc-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.doc-card-folio {
    font-size: 22px;
    font-weight: 800;
    color: #6366f1;
}

.doc-card-etapa {
    font-size: 11px;
    background: #e0e7ff;
    color: #4338ca;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.doc-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
    line-height: 1.4;
}

.doc-card-tramite {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

.doc-card-date {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.doc-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.doc-btn-primary {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
}

.doc-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.doc-btn-outline {
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.doc-btn-outline:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: #f5f3ff;
}

/* Litigants Table */
.case-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.case-table thead {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.case-table th {
    padding: 14px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #334155;
    border-top: 1px solid #f1f5f9;
}

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

.case-table tbody tr:hover {
    background: #f8fafc;
}

.case-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.case-table tbody tr:nth-child(even):hover {
    background: #f1f5f9;
}

/* Georef Badge */
.georef-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.georef-badge:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    transform: translateY(-1px);
}

/* Empty State */
.case-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: #94a3b8;
}

.case-empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.case-empty-state-text {
    font-size: 15px;
    font-weight: 500;
}

/* Scrollbar Styling */
.case-tabs-content::-webkit-scrollbar {
    width: 8px;
}

.case-tabs-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.case-tabs-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.case-tabs-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-content.case-detail-modal {
        max-width: 100%;
        width: 100%;
        max-height: 98vh;
        min-height: 90vh;
        border-radius: 10px;
        margin: 0;
    }

    .case-detail-modal .case-tabs-content {
        min-height: 240px;
    }

    .case-header-card {
        padding: 16px 20px 14px 24px;
    }

    .case-header-rol {
        font-size: 22px;
    }

    .case-tabs-nav {
        padding: 6px;
    }

    .case-tab-btn {
        padding: 10px 14px;
        font-size: 12px;
    }

    .case-tabs-content {
        padding: 16px;
    }

    .case-info-grid {
        grid-template-columns: 1fr;
    }

    .doc-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== WORKER TRACKING STYLES ==================== */
.progress-container {
    background: white;
    border-radius: var(--border-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.progress-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-filters span {
    color: var(--text-secondary);
    font-weight: 500;
}

.progress-table-container {
    overflow-x: auto;
}

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

.progress-table thead {
    background: var(--bg-tertiary);
}

.progress-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-color);
}

.progress-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.progress-table tbody tr:hover {
    background: var(--bg-secondary);
}

.progress-bar-container {
    position: relative;
    width: 100%;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, #34d399 100%);
    border-radius: 12px;
    transition: width 0.3s ease;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    z-index: 1;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.status-completed {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.status-processing {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.status-paused {
    background: #fef3c7;
    color: #92400e;
}

.logs-container {
    background: white;
    border-radius: var(--border-radius);
    padding: 24px;
    box-shadow: var(--shadow-md);
}

.logs-container .logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.logs-container .logs-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.logs-container .logs-content {
    max-height: 400px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background: #1e293b;
    color: #e2e8f0;
    padding: 16px;
    border-radius: var(--border-radius-sm);
}

.log-entry {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    gap: 12px;
}

.log-entry.log-info {
    background: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
}

.log-entry.log-error {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.log-entry.log-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
}

.log-entry.log-success {
    background: rgba(16, 185, 129, 0.1);
    color: #6ee7b7;
}

.log-time {
    color: #64748b;
    font-weight: 600;
    min-width: 80px;
}

.log-message {
    flex: 1;
    word-break: break-word;
}

.btn-clear-logs {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-clear-logs:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* ==================== EXTRACTION STATUS STYLES ==================== */
.extraction-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
}

.view-controls,
.filter-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.view-toggle {
    display: flex;
    gap: 4px;
    background: white;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--border-color);
}

.view-btn {
    padding: 6px 16px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

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

.view-btn.active {
    background: var(--primary-color);
    color: white;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.extraction-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.summary-card {
    background: white;
    border-radius: var(--border-radius-sm);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

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

.summary-card-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.summary-card-content {
    flex: 1;
}

.summary-card-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 4px;
}

.summary-card-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-card-progress {
    grid-column: 1 / -1;
}

.summary-card-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin: 8px 0;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, #34d399 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.extraction-status-container {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: white;
}

.status-placeholder {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.status-placeholder-hint {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

/* Vista por día expandible */
.day-status-card {
    border-bottom: 1px solid var(--border-color);
    background: white;
}

.day-status-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.day-status-header:hover {
    background: var(--bg-secondary);
}

.day-status-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.day-status-date {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.day-status-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.day-status-badge.completado {
    background: #d1fae5;
    color: #065f46;
}

.day-status-badge.en_proceso {
    background: #dbeafe;
    color: #1e40af;
}

.day-status-badge.pausado {
    background: #fef3c7;
    color: #92400e;
}

.day-status-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

.day-status-summary {
    display: flex;
    gap: 24px;
    font-size: 13px;
    color: var(--text-secondary);
}

.day-status-toggle {
    font-size: 18px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.day-status-card.expanded .day-status-toggle {
    transform: rotate(180deg);
}

.day-status-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.day-status-card.expanded .day-status-content {
    max-height: 5000px;
}

.city-section {
    padding: 12px 20px 12px 40px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.city-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.city-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.city-progress {
    font-size: 13px;
    color: var(--text-secondary);
}

.tribunal-item {
    padding: 12px 16px;
    margin: 8px 0;
    background: white;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

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

.tribunal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tribunal-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.tribunal-progress-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.tribunal-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.tribunal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, #34d399 100%);
    transition: width 0.3s ease;
}

.tribunal-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-resume {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.btn-resume-primary:hover {
    background: var(--primary-dark);
}

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

.btn-resume-secondary:hover {
    background: var(--bg-secondary);
}

.causes-list {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    max-height: 300px;
    overflow-y: auto;
}

.cause-item {
    padding: 8px 12px;
    margin: 4px 0;
    background: var(--bg-secondary);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.cause-id {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
}

.cause-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cause-status-icon {
    font-size: 16px;
}

.cause-status.completed .cause-status-icon {
    color: var(--success-color);
}

.cause-status.pending .cause-status-icon {
    color: var(--warning-color);
}

.cause-status.error .cause-status-icon {
    color: var(--danger-color);
}

.load-status-controls {
    text-align: center;
    padding: 16px;
}

/* Worker Controls Panel */
.worker-controls-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius-sm);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-group .control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* =====================================================
   GLOBAL ANIMATIONS & KEYFRAMES
   ===================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.3), 0 0 20px rgba(99, 102, 241, 0.1);
    }

    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 40px rgba(99, 102, 241, 0.2);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes progressPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

@keyframes borderGlow {

    0%,
    100% {
        border-color: rgba(212, 175, 55, 0.3);
    }

    50% {
        border-color: rgba(212, 175, 55, 0.6);
    }
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

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

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

.animate-fadeInUp {
    animation: fadeInUp 0.5s ease-out forwards;
}

.animate-fadeInScale {
    animation: fadeInScale 0.4s ease-out forwards;
}

.animate-slideInRight {
    animation: slideInRight 0.5s ease-out forwards;
}

.animate-slideInLeft {
    animation: slideInLeft 0.5s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

/* Staggered animations */
.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

.stagger-4 {
    animation-delay: 0.4s;
}

.stagger-5 {
    animation-delay: 0.5s;
}

/* =====================================================
   WORKER DASHBOARD - MODERN REDESIGN
   ===================================================== */

/* Worker Dashboard Container */
.worker-dashboard {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* Worker Stats Grid - Hero Section */
.worker-stats-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 12px;
}

.worker-stat-card {
    position: relative;
    padding: 24px;
    border-radius: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(212, 175, 55, 0.15);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;
}

.worker-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.worker-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(212, 175, 55, 0.4);
}

.worker-stat-card:hover::before {
    transform: scaleX(1);
}

.worker-stat-card.stat-active::before {
    background: var(--gradient-primary);
}

.worker-stat-card.stat-completed::before {
    background: var(--gradient-success);
}

.worker-stat-card.stat-pending::before {
    background: var(--gradient-warning);
}

.worker-stat-card.stat-errors::before {
    background: var(--gradient-danger);
}

.worker-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.worker-stat-card:hover .worker-stat-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-active .worker-stat-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.stat-completed .worker-stat-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(56, 239, 125, 0.1) 100%);
}

.stat-pending .worker-stat-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.1) 100%);
}

.stat-errors .worker-stat-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(248, 113, 113, 0.1) 100%);
}

.worker-stat-value {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 70%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 4px;
    animation: countUp 0.6s ease-out forwards;
}

.worker-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Worker Main Content - Split View */
.worker-main-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
}

/* Extraction Pipeline - Modern List View */
.extraction-pipeline {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 24px;
    border: 1px solid rgba(212, 175, 55, 0.12);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.pipeline-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pipeline-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.pipeline-header h3 .header-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.pipeline-actions {
    display: flex;
    gap: 10px;
}

.pipeline-body {
    padding: 0;
    max-height: 600px;
    overflow-y: auto;
}

.pipeline-body::-webkit-scrollbar {
    width: 8px;
}

.pipeline-body::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.pipeline-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d4af37 0%, #b8960c 100%);
    border-radius: 4px;
}

/* Extraction Row - Modern Table-like Design */
.extraction-row {
    display: grid;
    grid-template-columns: auto 1fr 160px 140px 100px;
    align-items: center;
    gap: 20px;
    padding: 20px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: white;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.extraction-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.3s ease;
}

.extraction-row:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0%, rgba(99, 102, 241, 0.03) 100%);
    transform: translateX(4px);
}

.extraction-row:hover::before {
    background: var(--gradient-primary);
}

.extraction-row.active::before {
    background: var(--gradient-success);
    animation: progressPulse 1.5s ease-in-out infinite;
}

.extraction-row.completed {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%);
}

.extraction-row.completed::before {
    background: var(--success-color);
}

.extraction-row.error::before {
    background: var(--danger-color);
}

/* Row Status Indicator */
.row-status-indicator {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.extraction-row:hover .row-status-indicator {
    transform: scale(1.1);
}

.row-status-indicator.status-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
    animation: glow 2s ease-in-out infinite;
}

.row-status-indicator.status-completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.row-status-indicator.status-paused {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.row-status-indicator.status-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
}

/* Row Info */
.row-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.row-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.row-subtitle .separator {
    color: var(--border-color);
}

/* Row Progress */
.row-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progress-bar-modern {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.progress-bar-fill.fill-active {
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
}

.progress-bar-fill.fill-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
    background-size: 200% 100%;
}

.progress-bar-fill.fill-completed {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.progress-bar-fill.fill-paused {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.progress-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
}

/* Row Status Badge */
.status-badge-modern {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.status-badge-modern.badge-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.status-badge-modern.badge-completed {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge-modern.badge-paused {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-badge-modern.badge-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Row Actions */
.row-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.extraction-row:hover .row-actions {
    opacity: 1;
    transform: translateX(0);
}

.action-btn-mini {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.action-btn-mini.btn-play {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
}

.action-btn-mini.btn-pause {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
}

.action-btn-mini.btn-cancel {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
}

.action-btn-mini:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Worker Live Feed Panel */
.worker-live-feed {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border-radius: 24px;
    border: 1px solid rgba(48, 54, 61, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: fit-content;
    max-height: 680px;
}

.live-feed-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-bottom: 1px solid rgba(48, 54, 61, 0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.live-feed-header h4 {
    font-size: 15px;
    font-weight: 600;
    color: #c9d1d9;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-indicator {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.live-feed-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.8;
}

.live-feed-body::-webkit-scrollbar {
    width: 6px;
}

.live-feed-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.live-feed-body::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 3px;
}

.log-entry {
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    animation: fadeInUp 0.3s ease-out;
}

.log-entry .log-time {
    color: #484f58;
    font-size: 11px;
    white-space: nowrap;
}

.log-entry .log-message {
    color: #8b949e;
    word-break: break-word;
}

.log-entry.log-success {
    background: rgba(16, 185, 129, 0.1);
}

.log-entry.log-success .log-message {
    color: #3fb950;
}

.log-entry.log-error {
    background: rgba(248, 81, 73, 0.1);
}

.log-entry.log-error .log-message {
    color: #f85149;
}

.log-entry.log-warning {
    background: rgba(210, 153, 34, 0.1);
}

.log-entry.log-warning .log-message {
    color: #d29922;
}

.log-entry.log-info {
    background: rgba(88, 166, 255, 0.1);
}

.log-entry.log-info .log-message {
    color: #58a6ff;
}

/* Empty State */
.empty-state-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    text-align: center;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
    animation: float 3s ease-in-out infinite;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 300px;
}

/* =====================================================
   LEGACY EXTRACTION CARDS (Backward Compatibility)
   ===================================================== */
.extraction-card {
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.4s ease-out forwards;
}

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

.extraction-card.expanded {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-glow);
}

.extraction-card-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.extraction-card-header:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.02) 100%);
}

.extraction-card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    gap: 24px;
}

.extraction-card-title {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.extraction-card-icon {
    font-size: 28px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: 14px;
    transition: transform 0.3s ease;
}

.extraction-card:hover .extraction-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.extraction-card-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.extraction-card-subtitle {
    margin: 6px 0 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.extraction-card-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.extraction-card-progress {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
}

.extraction-card-progress-bar {
    flex: 1;
    height: 10px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-inner);
}

.extraction-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, var(--success-light) 100%);
    border-radius: 10px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.extraction-card-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
    background-size: 200% 100%;
}

.extraction-card-progress-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 48px;
    text-align: right;
}

.extraction-card-toggle {
    font-size: 20px;
    color: var(--text-tertiary);
    margin-left: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.extraction-card:hover .extraction-card-toggle {
    color: var(--primary-color);
}

.extraction-card.expanded .extraction-card-toggle {
    transform: rotate(180deg);
    color: var(--primary-color);
}

.extraction-card-content {
    padding: 0 24px 24px 24px;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    animation: fadeInUp 0.3s ease-out;
}

.extraction-card-actions {
    display: flex;
    gap: 12px;
    padding: 20px 0;
    flex-wrap: wrap;
}

.extraction-card-completed {
    border-left: 4px solid var(--success-color);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.03) 0%, transparent 30%);
}

.extraction-card-completed .extraction-card-header {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.extraction-card-completed:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(16, 185, 129, 0.2);
}

.extractions-section {
    margin-bottom: 32px;
}

.extractions-section h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.extraction-card-detail {
    background: white;
    border-radius: var(--border-radius);
    padding: 20px;
    margin-top: 16px;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* =====================================================
   BUTTON ENHANCEMENTS
   ===================================================== */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn-glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    animation: glow 2s ease-in-out infinite;
}

.btn-shimmer {
    background-size: 200% 100%;
    animation: shimmer 3s infinite;
}

.btn-loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading span:first-child {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* =====================================================
   SCRAPER SECTION ENHANCEMENTS
   ===================================================== */
.scraper-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.config-panel {
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.config-panel .panel-header {
    padding: 24px 28px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
    display: flex;
    align-items: center;
    gap: 16px;
}

.config-panel .panel-header .panel-icon {
    width: 48px;
    height: 48px;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
}

.config-panel .panel-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 28px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.form-group .form-label .label-icon {
    color: var(--primary-color);
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-input:hover {
    border-color: rgba(99, 102, 241, 0.3);
}

.form-help-text {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.button-group {
    padding: 24px 28px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-top: 1px solid var(--border-color);
}

.btn-large {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
}

.btn-animated {
    position: relative;
    overflow: hidden;
}

.btn-animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.btn-animated:hover::after {
    left: 100%;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 1200px) {
    .worker-stats-hero {
        grid-template-columns: repeat(2, 1fr);
    }

    .worker-main-content {
        grid-template-columns: 1fr;
    }

    .worker-live-feed {
        max-height: 400px;
    }
}

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

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

    .row-progress,
    .status-badge-modern,
    .row-actions {
        grid-column: 1 / -1;
    }

    .sidebar {
        width: var(--sidebar-collapsed-width);
    }

    .sidebar:hover {
        width: var(--sidebar-collapsed-width);
    }

    .sidebar .nav-text {
        display: none;
    }

    .sidebar .sidebar-header {
        display: none;
    }

    .sidebar .sidebar-footer .user-info,
    .sidebar .sidebar-footer .logout-btn,
    .sidebar .sidebar-footer .status-indicator span:not(.status-dot) {
        display: none;
    }

    .main-content {
        margin-left: var(--sidebar-collapsed-width);
        max-width: calc(100vw - var(--sidebar-collapsed-width));
    }
}

/* =====================================================
   SCROLLBAR STYLING
   ===================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d4af37 0%, #b8960c 100%);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e5c048 0%, #d4af37 100%);
}

/* =====================================================
   TOAST NOTIFICATIONS
   ===================================================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    padding: 16px 24px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInRight 0.3s ease-out;
    max-width: 400px;
}

.toast.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast.toast-error {
    border-left: 4px solid var(--danger-color);
}

.toast.toast-warning {
    border-left: 4px solid var(--warning-color);
}

.toast.toast-info {
    border-left: 4px solid var(--info-color);
}

/* =====================================================
   LOGIN SCREEN - PROFESSIONAL DESIGN
   ===================================================== */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.login-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.login-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: orbFloat 15s ease-in-out infinite;
}

.login-orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
}

.login-orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    bottom: -50px;
    left: -50px;
    animation-delay: -5s;
}

.login-orb-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -10s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* .login-container removed (conflict) */

.login-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 48px 40px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.login-header {
    text-align: center;
    margin-bottom: 40px;
}

.login-logo-wrapper {
    width: 280px;
    height: 160px;
    margin: 0 auto 32px;
    border-radius: 24px;
    overflow: hidden;
    background: transparent;
    border: 3px solid rgba(212, 175, 55, 0.4);
    padding: 0;
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-logo-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.4);
}

.login-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.1);
    border-radius: 24px;
    background: transparent;
}

.login-title {
    font-size: 32px;
    font-weight: 800;
    color: white;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #ffffff 0%, #d4af37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-label svg {
    opacity: 0.7;
}

.login-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    font-size: 15px;
    transition: all 0.3s ease;
}

.login-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-input:focus {
    outline: none;
    border-color: #d4af37;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.login-password-wrapper {
    position: relative;
}

.login-password-wrapper .login-input {
    padding-right: 50px;
}

.login-password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
    transition: color 0.3s ease;
}

.login-password-toggle:hover {
    color: rgba(255, 255, 255, 0.8);
}

.login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 13px;
}

.login-button {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    border: none;
    border-radius: 12px;
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.login-button:active {
    transform: translateY(0);
}

.login-button-loader {
    display: none;
}

.login-button.loading .login-button-text {
    opacity: 0;
}

.login-button.loading .login-button-loader {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border: 3px solid rgba(26, 26, 46, 0.3);
    border-top-color: #1a1a2e;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.login-footer {
    margin-top: 32px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

/* =====================================================
   NEW SPLIT LOGIN DESIGN
   ===================================================== */
.login-split-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    z-index: 10000;
    background: #0a0a0f;
}

/* Left Branding Panel */
.login-branding-panel {
    flex: 1;
    background: linear-gradient(145deg, #0d0d14 0%, #1a1a2e 50%, #16213e 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 40px;
}

.branding-bg-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.branding-bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
}

.shape-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #d4af37 0%, transparent 70%);
    top: -150px;
    left: -100px;
    animation: floatShape 20s ease-in-out infinite;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #6366f1 0%, transparent 70%);
    bottom: -100px;
    right: -100px;
    animation: floatShape 25s ease-in-out infinite reverse;
}

.shape-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #10b981 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulseShape 8s ease-in-out infinite;
}

.shape-4 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #f59e0b 0%, transparent 70%);
    top: 20%;
    right: 20%;
    animation: floatShape 15s ease-in-out infinite;
}

@keyframes floatShape {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -30px) rotate(5deg);
    }

    50% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }

    75% {
        transform: translate(10px, 40px) rotate(3deg);
    }
}

@keyframes pulseShape {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }
}

.branding-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 450px;
}

.branding-logo-wrapper {
    width: 320px;
    height: 280px;
    margin: 0 auto 32px;
    border-radius: 40px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(212, 175, 55, 0.4);
    box-shadow:
        0 0 60px rgba(212, 175, 55, 0.3),
        inset 0 0 30px rgba(212, 175, 55, 0.1);
    animation: logoGlow 4s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

@keyframes logoGlow {

    0%,
    100% {
        box-shadow: 0 0 60px rgba(212, 175, 55, 0.3), inset 0 0 30px rgba(212, 175, 55, 0.1);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 80px rgba(212, 175, 55, 0.5), inset 0 0 40px rgba(212, 175, 55, 0.15);
        transform: scale(1.02);
    }
}

.branding-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.branding-title {
    font-size: 48px;
    font-weight: 900;
    margin: 0 0 12px;
    background: linear-gradient(135deg, #ffffff 0%, #d4af37 50%, #f4d03f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
    letter-spacing: -1px;
}

.branding-tagline {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 48px;
    font-weight: 400;
}

.branding-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateX(8px);
}

.feature-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
    stroke: #d4af37;
}

.feature-item span {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.branding-footer {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

.branding-footer strong {
    color: #d4af37;
    font-weight: 600;
}

/* Right Form Panel */
.login-form-panel {
    flex: 1;
    background: linear-gradient(180deg, #fafafa 0%, #f0f0f5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.login-form-panel::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.form-panel-content {
    width: 100%;
    max-width: 420px;
    padding: 40px;
    position: relative;
    z-index: 1;
}

.welcome-section {
    margin-bottom: 48px;
}

.welcome-title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

.welcome-subtitle {
    font-size: 16px;
    color: #64748b;
    margin: 0;
}

/* Floating Input Groups */
.modern-login-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.floating-input-group {
    position: relative;
}

.floating-input-group input {
    width: 100%;
    padding: 20px 16px 8px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: white;
    color: #1a1a2e;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.floating-input-group input:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
}

.floating-input-group label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    padding: 0 4px;
}

.floating-input-group input:focus+label,
.floating-input-group input:not(:placeholder-shown)+label {
    top: 0;
    font-size: 12px;
    color: #d4af37;
    font-weight: 600;
}

.floating-input-group .input-highlight {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #d4af37, #f4d03f);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 0 0 14px 14px;
}

.floating-input-group input:focus~.input-highlight {
    width: calc(100% - 4px);
}

/* Password Toggle */
.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #94a3b8;
    transition: color 0.3s;
}

.password-toggle:hover {
    color: #d4af37;
}

.password-toggle svg {
    width: 22px;
    height: 22px;
}

/* Modern Error Message */
.modern-login-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 12px;
    animation: shakeError 0.5s ease-in-out;
}

@keyframes shakeError {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-8px);
    }

    40%,
    80% {
        transform: translateX(8px);
    }
}

.modern-login-error svg {
    width: 20px;
    height: 20px;
    stroke: #ef4444;
    flex-shrink: 0;
}

.modern-login-error span {
    font-size: 14px;
    color: #b91c1c;
    font-weight: 500;
}

/* Login Button */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin-top: 8px;
}

.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transition: left 0.5s;
}

.login-btn:hover::before {
    left: 100%;
}

.login-btn:hover {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    color: #1a1a2e;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(212, 175, 55, 0.4);
}

.login-btn .btn-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}

.login-btn:hover .btn-arrow {
    transform: translateX(5px);
}

.login-btn .btn-loader {
    display: none;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.login-btn.loading .btn-text,
.login-btn.loading .btn-arrow {
    display: none;
}

.login-btn.loading .btn-loader {
    display: block;
}

/* Form Footer */
.login-form-footer {
    margin-top: 48px;
    text-align: center;
}

.login-form-footer p {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .login-split-container {
        flex-direction: column;
    }

    .login-branding-panel {
        padding: 40px 20px;
        min-height: 40vh;
    }

    .branding-title {
        font-size: 36px;
    }

    .branding-features {
        display: none;
    }

    .login-form-panel {
        min-height: 60vh;
    }
}

@media (max-width: 480px) {
    .form-panel-content {
        padding: 24px;
    }

    .welcome-title {
        font-size: 28px;
    }

    .branding-logo-wrapper {
        width: 240px;
        height: 200px;
        border-radius: 28px;
    }
}

/* =====================================================
   SCRAPER REDESIGN
   ===================================================== */
.scraper-redesign {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.scraper-config-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.scraper-config-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.scraper-config-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
}

.scraper-config-icon-large {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(255, 107, 53, 0.15) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 32px rgba(212, 175, 55, 0.2);
    animation: rocketPulse 2s ease-in-out infinite;
}

@keyframes rocketPulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(212, 175, 55, 0.2);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 12px 40px rgba(212, 175, 55, 0.3);
    }
}

.lottie-rocket {
    width: 80px;
    height: 80px;
}

.lottie-mini {
    width: 48px;
    height: 48px;
}

.scraper-config-title h3 {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    background: linear-gradient(135deg, #d4af37 0%, #ff6b35 50%, #f4d03f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.scraper-config-title p {
    margin: 8px 0 0;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.scraper-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.scraper-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scraper-form-group.full-width {
    grid-column: 1 / -1;
}

.scraper-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #d4af37;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scraper-label svg {
    color: #d4af37;
}

.scraper-input,
.scraper-select {
    padding: 14px 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.3s ease;
    font-weight: 500;
}

.scraper-input:focus,
.scraper-select:focus {
    outline: none;
    border-color: #d4af37;
    background: linear-gradient(135deg, #fffef5 0%, #fff9e6 100%);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15), 0 4px 12px rgba(212, 175, 55, 0.1);
}

.scraper-input:hover,
.scraper-select:hover {
    border-color: rgba(212, 175, 55, 0.5);
}

.ciudad-search-wrapper {
    position: relative;
}

.ciudad-dropdown-enhanced {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}

/* Tribunales Container - Animated Cards */
.tribunales-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    max-height: 280px;
    overflow-y: auto;
}

.tribunales-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tribunales-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.tribunales-header h3 svg {
    color: #d4af37;
}

.tribunales-actions {
    display: flex;
    gap: 8px;
}

.tribunales-select-all,
.tribunales-clear {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tribunales-select-all:hover,
.tribunales-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.tribunales-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    min-height: 120px;
}

.tribunales-placeholder {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

.tribunales-placeholder-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.tribunal-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.4s ease-out forwards;
    opacity: 0;
}

.tribunal-card:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

.tribunal-card.selected {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.15) 100%);
    border-color: #d4af37;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.tribunal-card-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tribunal-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.tribunal-card.selected .tribunal-checkbox {
    background: #d4af37;
    border-color: #d4af37;
}

.tribunal-checkbox svg {
    width: 12px;
    height: 12px;
    color: #1a1a2e;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tribunal-card.selected .tribunal-checkbox svg {
    opacity: 1;
}

.tribunal-name {
    color: white;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Scraper Start Button */
.scraper-start-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.scraper-start-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 48px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    border: none;
    border-radius: 16px;
    color: #1a1a2e;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.scraper-start-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
}

.scraper-start-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scraper-start-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: slideGlow 3s infinite;
}

@keyframes slideGlow {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

/* =====================================================
   SCRAPER MODE TABS (Extracción / Actualización)
   ===================================================== */
.scraper-mode-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 4px;
    border: 1px solid rgba(212, 175, 55, 0.15);
}

.scraper-mode-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.scraper-mode-tab:hover {
    background: rgba(212, 175, 55, 0.08);
    color: var(--text-primary);
}

.scraper-mode-tab.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.08));
    color: var(--gold);
    box-shadow: 0 2px 12px rgba(212, 175, 55, 0.2);
}

.scraper-mode-tab.active svg {
    filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));
}

.scraper-tab-content {
    animation: fadeInTab 0.35s ease;
}

.scraper-tab-content:not(.active) {
    display: none;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* =====================================================
   UPDATE SCRAPER TAB — REDESIGNED PREMIUM
   ===================================================== */
.update-scraper-container {
    display: flex;
    flex-direction: column;
    background: #1a1a2e;
    border-radius: 20px;
    padding: 32px 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    min-height: 600px;
}

/* --- Stepper / Wizard --- */
.upd-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 20px 0 28px;
}

.upd-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.upd-step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.upd-step.active .upd-step-circle {
    background: linear-gradient(135deg, rgba(0, 191, 165, 0.2), rgba(0, 191, 165, 0.08));
    border-color: #00bfa5;
    color: #00bfa5;
    box-shadow: 0 0 24px rgba(0, 191, 165, 0.25);
}

.upd-step.completed .upd-step-circle {
    background: linear-gradient(135deg, #00bfa5, #00897b);
    border-color: #00bfa5;
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 191, 165, 0.3);
}

.upd-step-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.upd-step.active .upd-step-label {
    color: #00bfa5;
}

.upd-step.completed .upd-step-label {
    color: rgba(0, 191, 165, 0.7);
}

.upd-step-line {
    width: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 12px;
    margin-bottom: 20px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease;
}

.upd-step-line.filled {
    background: linear-gradient(90deg, #00bfa5, rgba(0, 191, 165, 0.4));
}

/* --- Step Panels --- */
.upd-step-panel {
    animation: updFadeIn 0.4s ease;
}

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

/* --- Section Header --- */
.upd-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(0, 191, 165, 0.06), rgba(0, 191, 165, 0.02));
    border-radius: 16px;
    border: 1px solid rgba(0, 191, 165, 0.1);
}

.upd-section-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 191, 165, 0.15), rgba(0, 191, 165, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00bfa5;
    flex-shrink: 0;
}

.upd-section-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #f0f0f0;
    margin: 0 0 4px;
}

.upd-section-header p {
    font-size: 13px;
    color: #a0aec0;
    margin: 0;
    line-height: 1.5;
}

/* --- Mode Options (Map, Org, State) --- */
.upd-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 800px) {
    .upd-mode-grid { grid-template-columns: 1fr; }
}

.upd-mode-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.upd-mode-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--mode-color, rgba(255, 255, 255, 0.2));
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

.upd-mode-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--mode-color, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upd-mode-card:hover::before {
    opacity: 1;
}

.upd-mode-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mode-color, white);
    transition: all 0.3s ease;
}

.upd-mode-card:hover .upd-mode-icon {
    background: var(--mode-color);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--mode-color);
}

.upd-mode-info h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: white;
}

.upd-mode-info p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* --- State Cards Grid --- */
.upd-state-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1100px) {
    .upd-state-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
    .upd-state-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .upd-state-grid { grid-template-columns: 1fr; }
}

.upd-state-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    outline: none;
}

.upd-state-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--state-color, #00bfa5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upd-state-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.upd-state-card:hover::before {
    opacity: 0.6;
}

.upd-state-card.selected {
    background: linear-gradient(135deg, color-mix(in srgb, var(--state-color, #00bfa5) 12%, transparent), color-mix(in srgb, var(--state-color, #00bfa5) 4%, transparent));
    border-color: var(--state-color, #00bfa5);
    box-shadow: 0 0 28px color-mix(in srgb, var(--state-color, #00bfa5) 25%, transparent);
    transform: translateY(-3px);
}

.upd-state-card.selected::before {
    opacity: 1;
}

.upd-state-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--state-color, #00bfa5) 12%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--state-color, #00bfa5);
    transition: all 0.3s ease;
}

.upd-state-card.selected .upd-state-icon {
    background: color-mix(in srgb, var(--state-color, #00bfa5) 20%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--state-color, #00bfa5) 20%, transparent);
}

.upd-state-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.upd-state-name {
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
}

.upd-state-code {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
}

.upd-state-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #a0aec0;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
    min-width: 28px;
    text-align: center;
}

.upd-state-card.selected .upd-state-badge {
    background: var(--state-color, #00bfa5);
    color: #fff;
}

/* Loading shimmer for badges */
.upd-state-badge.loading {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: updShimmer 1.5s infinite;
    color: transparent;
}

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

/* --- Summary Card --- */
.upd-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    background: linear-gradient(135deg, #0d2818 0%, #1a3a2a 100%);
    border-radius: 20px;
    border: 1px solid rgba(0, 191, 165, 0.2);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    animation: countCardAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-wrap: wrap;
    gap: 16px;
}

.upd-summary-left {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.upd-summary-pulse {
    position: absolute;
    top: 50%;
    left: 60px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 191, 165, 0.12) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: countPulse 2.5s ease-in-out infinite;
}

.upd-summary-count {
    font-size: 52px;
    font-weight: 800;
    color: #00bfa5;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 30px rgba(0, 191, 165, 0.3);
}

.upd-summary-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upd-summary-label {
    font-size: 14px;
    color: #a0aec0;
    font-weight: 500;
}

.upd-summary-state-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 191, 165, 0.15);
    color: #00bfa5;
    border: 1px solid rgba(0, 191, 165, 0.25);
    width: fit-content;
}

.upd-summary-right {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

.upd-summary-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    transition: all 0.3s ease;
    color: #fff;
    min-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.upd-summary-search-wrapper:focus-within {
    border-color: #00bfa5;
    box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.2);
}

.upd-summary-search {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    width: 100%;
}

.upd-summary-search::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.upd-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 20px;
    background: rgba(0, 191, 165, 0.1);
    border: 1.5px solid #00bfa5;
    border-radius: 12px;
    color: #00bfa5;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.upd-back-btn:hover {
    background: #00bfa5;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 191, 165, 0.3);
}

/* --- Cases Panel --- */
.upd-cases-panel {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.8), rgba(22, 33, 62, 0.8));
    border-radius: 18px;
    border: 1px solid rgba(0, 191, 165, 0.12);
    overflow: hidden;
    margin-bottom: 20px;
}

.upd-cases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 191, 165, 0.03);
}

.upd-cases-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #f0f0f0;
    margin: 0;
}

.upd-cases-header h4 svg {
    color: #00bfa5;
}

.upd-cases-total {
    font-size: 13px;
    color: #a0aec0;
    background: rgba(0, 191, 165, 0.1);
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 600;
}

.upd-cases-body {
    max-height: 450px;
    overflow-y: auto;
    padding: 4px 8px 8px;
}

.upd-cases-body::-webkit-scrollbar {
    width: 6px;
}

.upd-cases-body::-webkit-scrollbar-track {
    background: transparent;
}

.upd-cases-body::-webkit-scrollbar-thumb {
    background: rgba(0, 191, 165, 0.2);
    border-radius: 3px;
}

/* Tribunal Group */
.upd-tribunal-group {
    margin-bottom: 4px;
}

.upd-tribunal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.2s ease;
    user-select: none;
}

.upd-tribunal-header:hover {
    background: rgba(0, 191, 165, 0.05);
}

.upd-tribunal-chevron {
    color: rgba(0, 191, 165, 0.5);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.upd-tribunal-header.collapsed .upd-tribunal-chevron {
    transform: rotate(-90deg);
}

.upd-tribunal-name {
    font-size: 13px;
    font-weight: 600;
    color: #00bfa5;
    flex: 1;
}

.upd-tribunal-count {
    font-size: 11px;
    color: #718096;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.upd-tribunal-cases {
    padding-left: 12px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.upd-tribunal-cases.hidden {
    max-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
}

/* Case Item */
.upd-case-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.upd-case-item:hover {
    background: rgba(0, 191, 165, 0.05);
    border-color: rgba(0, 191, 165, 0.12);
}

.upd-case-item-rol {
    font-weight: 700;
    color: #00bfa5;
    font-size: 13px;
    min-width: 110px;
    font-variant-numeric: tabular-nums;
}

.upd-case-item-caratulado {
    flex: 1;
    font-size: 13px;
    color: #cbd5e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upd-case-item-fecha {
    font-size: 11px;
    color: #718096;
    white-space: nowrap;
}

.upd-case-item-icon {
    color: rgba(0, 191, 165, 0.4);
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.upd-case-item:hover .upd-case-item-icon {
    color: #00bfa5;
}

/* Empty state */
.upd-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

.upd-empty-state-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.upd-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* --- Confirm Area --- */
.upd-confirm-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 8px;
}

.upd-confirm-summary {
    width: 100%;
    background: rgba(0, 191, 165, 0.04);
    border: 1px solid rgba(0, 191, 165, 0.12);
    border-radius: 14px;
    padding: 16px 24px;
}

.upd-confirm-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #a0aec0;
}

.upd-confirm-info svg {
    color: #00bfa5;
    flex-shrink: 0;
}

.upd-confirm-info strong {
    color: #00bfa5;
}

.upd-confirm-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 44px;
    background: linear-gradient(135deg, #00bfa5 0%, #00897b 100%);
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    font-family: inherit;
    letter-spacing: 0.3px;
}

.upd-confirm-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 191, 165, 0.35);
}

.upd-confirm-btn:active {
    transform: translateY(-1px) scale(0.99);
}

.upd-confirm-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.upd-confirm-btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: slideGlow 3s infinite;
}

/* Keep backwards compatible old class names hidden */
.update-config-card,
.update-count-card,
.update-cases-list,
.update-form-section {
    display: none !important;
}


/* =====================================================
   WORKERS HUB - ROBOT DISPLAY
   ===================================================== */
.workers-hub {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.workers-hub-header {
    margin-bottom: 24px;
}

.workers-hub-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.workers-hub-header h3 svg {
    color: #d4af37;
}

.workers-display {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.worker-robot-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.worker-robot-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-4px);
}

.worker-robot-card.active {
    border-color: #d4af37;
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.worker-robot-animation {
    width: 100px;
    height: 100px;
}

.worker-robot-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.worker-robot-name {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.worker-robot-status {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.worker-robot-status.status-idle {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.worker-robot-status.status-active {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    animation: pulse 2s infinite;
}

/* =====================================================
   ALL WORKERS BUSY STATE - FRIENDLY LOGS
   ===================================================== */
.all-workers-busy {
    margin-top: 24px;
    padding: 32px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.all-workers-busy.hidden {
    display: none;
}

.busy-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.loading-animation {
    width: 120px;
    height: 120px;
}

.busy-message {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #d4af37;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.friendly-logs {
    width: 100%;
    max-width: 500px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.friendly-log-message {
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 16px;
    color: white;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    min-height: 24px;
}

.friendly-log-message.fade-in {
    opacity: 1;
}

.friendly-log-message.fade-out {
    opacity: 0;
}

/* Active Extractions Hub */
.active-extractions-hub {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.active-extractions-header {
    margin-bottom: 20px;
}

.active-extractions-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.live-pulse {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    animation: livePulse 2s infinite;
}

@keyframes livePulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
}

.active-extractions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.active-extraction-card {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.active-extraction-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    border-color: #d4af37;
}

.active-extraction-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #d4af37, #f4d03f);
}

.extraction-card-lottie {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 50px;
    height: 50px;
    opacity: 0.8;
}

.extraction-card-info {
    padding-right: 60px;
}

.extraction-card-date {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.extraction-card-tribunal {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.extraction-card-worker {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 4px;
    width: fit-content;
}

.extraction-card-worker span:first-child {
    opacity: 0.7;
}

.extraction-card-year {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(212, 175, 55, 0.1);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #d4af37;
    margin-top: 8px;
}

.extraction-card-progress {
    margin-top: 16px;
}

.extraction-progress-bar {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.extraction-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.extraction-progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.extraction-stop-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
}

.active-extraction-card:hover .extraction-stop-btn {
    opacity: 1;
}

.extraction-stop-btn:hover {
    background: #ef4444;
}

/* Active extraction card processing state */
.active-extraction-card.processing {
    border-color: rgba(34, 197, 94, 0.4);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.03) 0%, white 100%);
}

.active-extraction-card.processing::before {
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Update-type extraction card */
.active-extraction-card.update-type {
    border-color: rgba(0, 191, 165, 0.35);
    background: linear-gradient(135deg, rgba(0, 191, 165, 0.06) 0%, rgba(13, 40, 24, 0.4) 100%);
}

.active-extraction-card.update-type::before {
    background: linear-gradient(90deg, transparent, rgba(0, 191, 165, 0.25), transparent);
    animation: shimmer 2.5s infinite;
}

.extraction-card-type-badge {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 191, 165, 0.2), rgba(0, 191, 165, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00bfa5;
    flex-shrink: 0;
    animation: rotateBadge 3s linear infinite;
}

@keyframes rotateBadge {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.extraction-progress-bar.update-bar {
    background: rgba(0, 191, 165, 0.1);
}

.extraction-progress-fill.update-fill {
    background: linear-gradient(90deg, #00bfa5, #00897b) !important;
}

.worker-pulse {
    animation: workerPulse 1.5s ease-in-out infinite;
}

@keyframes workerPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.no-extractions-message {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
}

.no-extractions-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.no-extractions-message p {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
}

.no-extractions-message span {
    font-size: 13px;
}

/* Queue Section */
.extraction-queue {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.queue-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
}

.queue-header h3 svg {
    color: #f59e0b;
}

.queue-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    min-width: 200px;
}

.queue-item-lottie {
    width: 40px;
    height: 40px;
}

.queue-item-info {
    flex: 1;
}

.queue-item-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.queue-item-tribunal {
    font-size: 12px;
    color: var(--text-secondary);
}

.queue-item-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
}

.queue-item-btn.resume-btn {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.queue-item-btn.resume-btn:hover {
    background: rgba(34, 197, 94, 0.3);
    transform: scale(1.1);
}

.queue-item-btn.clear-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.queue-item-btn.clear-btn:hover {
    background: rgba(239, 68, 68, 0.3);
    transform: scale(1.1);
}

/* Completed Extractions Summary */
.completed-extractions-summary {
    background: white;
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.completed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.completed-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.completed-header h3 svg {
    color: #10b981;
}

.filter-select-mini {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
}

.completed-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.completed-stat-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.completed-stat-card.success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.completed-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.completed-stat-card.success .completed-stat-value {
    color: #10b981;
}

.completed-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.completed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

/* =====================================================
   EXECUTION HISTORY GROUPS
   ===================================================== */
.execution-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.execution-group-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.execution-group-card:hover {
    border-color: rgba(212, 175, 55, 0.25);
    background: rgba(212, 175, 55, 0.03);
}

.execution-group-card.update-exec:hover {
    border-color: rgba(0, 191, 165, 0.25);
    background: rgba(0, 191, 165, 0.03);
}

.execution-group-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.execution-group-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
}

.execution-group-date {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: auto;
}

.execution-group-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

.execution-group-badge.finished {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.execution-group-badge.running {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.execution-group-params {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.execution-group-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.execution-mini-progress {
    flex: 1;
    min-width: 60px;
    max-width: 120px;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.execution-mini-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.execution-group-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.execution-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.execution-detail-row span:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

/* =====================================================
   PER-CAUSA TRACKING COMPONENTS
   ===================================================== */

/* Current causa indicator with pulse */
.causa-current-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 5px 10px;
    background: rgba(34, 197, 94, 0.08);
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.15);
    width: fit-content;
    max-width: 100%;
}

.causa-pulse-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    flex-shrink: 0;
    animation: causaPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

@keyframes causaPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

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

.causa-current-rol {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.3px;
}

.causa-current-phase {
    font-size: 10px;
    color: var(--text-secondary);
    background: rgba(34, 197, 94, 0.12);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Causa dots row */
.causa-dots-row {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.causa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.causa-dot:hover {
    transform: scale(1.6);
}

.causa-dot.dot-completed {
    background: #22c55e;
}

.causa-dot.dot-failed {
    background: #ef4444;
}

.causa-dot.dot-active {
    background: #f59e0b;
    animation: causaPulse 1s ease-in-out infinite;
}

.causa-dot.dot-pending {
    background: rgba(0, 0, 0, 0.15);
}

.causa-dot.dot-skipped {
    background: #94a3b8;
}

.causa-dots-more {
    font-size: 10px;
    color: var(--text-secondary);
    margin-left: 4px;
    font-weight: 600;
}

/* Causa mini stats */
.causa-stats-mini {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.causa-stat-item {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}

.causa-stat-item.cs-completed {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.causa-stat-item.cs-failed {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.causa-stat-item.cs-pending {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.05);
}

/* =====================================================
   REDESIGNED EXECUTION HISTORY
   ===================================================== */
.exec-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px;
    color: var(--text-secondary);
    font-size: 13px;
}

.exec-history-empty-icon {
    font-size: 28px;
    opacity: 0.5;
}

.exec-history-card {
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    margin-bottom: 6px;
}

.exec-history-card:hover {
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.exec-history-card.running {
    border-left: 3px solid #3b82f6;
}

.exec-history-card.finished {
    border-left: 3px solid rgba(0, 0, 0, 0.08);
}

.exec-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.exec-history-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exec-type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.exec-type-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.exec-history-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.exec-history-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exec-duration {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.exec-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.exec-badge.badge-success {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.exec-badge.badge-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.exec-badge.badge-running {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    animation: badgePulse 2s ease-in-out infinite;
}

.exec-history-params {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.exec-history-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.exec-history-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.exec-history-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.exec-history-progress-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.exec-history-errors {
    font-size: 10px;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.exec-history-detail {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.exec-detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-size: 12px;
}

.exec-detail-grid > span:nth-child(odd) {
    font-weight: 600;
    color: var(--text-primary);
}

.exec-detail-grid > span:nth-child(even) {
    color: var(--text-secondary);
}

.exec-id-mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px !important;
}

/* Advanced Logs Panel */
.advanced-logs-panel {
    background: #0d1117;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #30363d;
}

.logs-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}

.logs-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logs-title h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #c9d1d9;
}

.live-indicator {
    width: 8px;
    height: 8px;
    background: #238636;
    border-radius: 50%;
    animation: livePulse 2s infinite;
}

.logs-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.logs-action-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logs-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #c9d1d9;
}

.logs-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px 20px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 12px;
    line-height: 1.8;
}

.logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #8b949e;
    text-align: center;
}

.log-entry {
    display: flex;
    gap: 12px;
    padding: 4px 0;
}

.log-time {
    color: #8b949e;
    flex-shrink: 0;
}

.log-type {
    font-weight: 600;
    flex-shrink: 0;
    width: 60px;
}

.log-type.info {
    color: #58a6ff;
}

.log-type.success {
    color: #3fb950;
}

.log-type.warning {
    color: #d29922;
}

.log-type.error {
    color: #f85149;
}

.log-message {
    color: #c9d1d9;
}

/* =====================================================
   MODERN TABLES
   ===================================================== */
.modern-filters-panel {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.filters-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.filter-item label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modern-filter-select,
.modern-filter-input {
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.modern-filter-select:hover,
.modern-filter-input:hover {
    border-color: #d4af37;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.modern-filter-select:focus,
.modern-filter-input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
}

select.modern-filter-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

select.modern-filter-select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}

.filter-checkbox {
    min-width: auto;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #d4af37;
}

.filter-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.modern-table-container {
    background: white;
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Scroll horizontal styling */
    scrollbar-width: thin;
    scrollbar-color: #d4af37 #f1f1f1;
}

.modern-table-container::-webkit-scrollbar {
    height: 8px;
}

.modern-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modern-table-container::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #d4af37, #f4d03f);
    border-radius: 4px;
}

.modern-table-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #c9a030, #e8c435);
}

.modern-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

.modern-table thead {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    position: sticky;
    top: 0;
    z-index: 2;
}

.modern-table thead th {
    padding: 14px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-table thead th.sortable {
    cursor: pointer;
    transition: background 0.3s ease, color 0.2s ease;
    user-select: none;
}

.modern-table thead th.sortable:hover {
    background: rgba(212, 175, 55, 0.2);
    color: #f4d03f;
}

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

.modern-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.05);
}

.modern-table tbody td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modern-table tbody td:last-child {
    overflow: visible;
    text-overflow: clip;
}

.modern-table .th-number {
    width: 40px;
    text-align: center;
}

.modern-table .th-actions {
    width: 120px;
    text-align: center;
}

.modern-table .th-checkbox {
    width: 50px;
    text-align: center;
}

.loading-cell {
    text-align: center;
    padding: 40px !important;
}

.table-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Table Action Buttons */
.table-action-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background: rgba(212, 175, 55, 0.1) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-radius: 8px !important;
    color: #d4af37 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 2px;
}

.table-action-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.table-action-btn:hover {
    background: #d4af37 !important;
    color: white !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    border-color: #d4af37 !important;
}

.table-action-btn:hover::before {
    width: 300px;
    height: 300px;
}

.table-action-btn:active {
    transform: translateY(0) scale(0.98);
}

.table-action-btn svg {
    position: relative;
    z-index: 1;
}

.table-action-btn.danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

.table-action-btn.danger:hover {
    background: #ef4444 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
    border-color: #ef4444 !important;
}

.table-action-btn.danger::before {
    background: rgba(239, 68, 68, 0.2);
}

.table-action-btn.kellu {
    background: rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #6366f1 !important;
}

.table-action-btn.kellu:hover {
    background: #6366f1 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    border-color: #6366f1 !important;
}

.table-action-btn.kellu::before {
    background: rgba(99, 102, 241, 0.2);
}

.modern-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 24px;
}

.pagination-btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    color: #d4af37;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pagination-btn-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    transition: left 0.3s ease;
    z-index: 0;
}

.pagination-btn-nav span,
.pagination-btn-nav svg {
    position: relative;
    z-index: 1;
}

.pagination-btn-nav:hover:not(:disabled) {
    color: white;
    border-color: #d4af37;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.pagination-btn-nav:hover:not(:disabled)::before {
    left: 0;
}

.pagination-btn-nav:active:not(:disabled) {
    transform: translateY(0);
}

.pagination-btn-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-secondary);
}

.pagination-btn-nav:disabled::before {
    display: none;
}

.modern-pagination .page-info {
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    color: #d4af37;
    font-size: 14px;
    font-weight: 600;
    min-width: 140px;
    text-align: center;
}

.pagination-btn {
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination-btn:hover {
    background: var(--bg-secondary);
    border-color: #d4af37;
}

.pagination-btn.active {
    background: #d4af37;
    border-color: #d4af37;
    color: white;
}

/* =====================================================
   SYNC SECTION REDESIGN
   ===================================================== */
.sync-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.sync-stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.sync-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.sync-stat-card.pending-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(99, 102, 241, 0.2);
}

.sync-stat-card.synced-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

.sync-stat-card.error-card {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    border-color: rgba(239, 68, 68, 0.2);
}

.sync-stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pending-card .sync-stat-icon svg {
    color: #6366f1;
}

.synced-card .sync-stat-icon svg {
    color: #10b981;
}

.error-card .sync-stat-icon svg {
    color: #ef4444;
}

.sync-stat-content {
    flex: 1;
}

.sync-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
}

.sync-stat-label {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Sync Actions Panel */
.sync-actions-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sync-action-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.sync-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #d4af37;
}

.sync-action-card[data-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.sync-action-card.warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, white 100%);
}

.sync-action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.sync-action-icon.primary {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
}

.sync-action-icon.secondary {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: white;
}

.sync-action-icon.tertiary {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    color: #1a1a2e;
}

.sync-action-icon.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
}

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

.sync-action-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.sync-action-desc {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Danger Zone */
.danger-zone {
    margin-bottom: 24px;
}

.danger-zone summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: #2d2d2d;
    border-radius: 12px;
    color: #f87171;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.danger-zone summary:hover {
    background: #3d3d3d;
}

.danger-zone[open] summary {
    border-radius: 12px 12px 0 0;
}

.danger-content {
    padding: 20px;
    background: #1a1a1a;
    border-radius: 0 0 12px 12px;
    border: 1px solid #333;
    border-top: none;
}

.danger-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #dc2626;
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.danger-btn:hover {
    background: #b91c1c;
    transform: translateY(-2px);
}

/* Sync Logs Panel Modern */
.sync-logs-panel-modern {
    background: #0d1117;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #30363d;
    margin-bottom: 24px;
}

.sync-logs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}

.sync-logs-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #c9d1d9;
}

.sync-status-dot {
    width: 8px;
    height: 8px;
    background: #f85149;
    border-radius: 50%;
}

.sync-status-dot.active {
    background: #238636;
    animation: livePulse 2s infinite;
}

.sync-logs-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sync-progress-text {
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: #8b949e;
}

.sync-log-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sync-log-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #c9d1d9;
}

.sync-progress-bar {
    height: 3px;
    background: #21262d;
}

.sync-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #58a6ff, #a371f7);
    transition: width 0.3s ease;
}

.sync-logs-content {
    max-height: 280px;
    overflow-y: auto;
    padding: 16px 20px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 12px;
    line-height: 1.8;
    color: #8b949e;
}

.sync-logs-empty {
    padding: 24px;
    text-align: center;
    opacity: 0.6;
}

/* Sync Filters Modern */
.sync-filters-modern {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.sync-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sync-filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sync-filter-select {
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    min-width: 150px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.sync-filter-select:hover {
    border-color: #d4af37;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
}

.sync-filter-select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E");
}

.sync-table-container {
    margin-bottom: 24px;
}

.sync-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sync-table-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.select-all-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

/* =====================================================
   MAPS SECTION REDESIGN
   ===================================================== */
.map-filters-modern {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border-color);
}

.map-filter-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.map-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}

.map-filter-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.map-filter-group label svg {
    color: #d4af37;
}

.map-filter-select {
    padding: 12px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.map-filter-select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.map-generate-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    border: none;
    border-radius: 12px;
    color: #1a1a2e;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.map-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

.map-stats-modern {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.map-stat-item {
    text-align: center;
}

.map-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.map-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.map-container-modern {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* Custom cursor for map - better visibility */
.map-container-modern .leaflet-container,
#mainMap.leaflet-container,
#leafletMap .leaflet-container {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%231e293b' stroke-width='2.5' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%231e293b' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='white' stroke-width='1' opacity='0.6'/%3E%3Cline x1='16' y1='2' x2='16' y2='8' stroke='%231e293b' stroke-width='2' opacity='0.8'/%3E%3Cline x1='16' y1='24' x2='16' y2='30' stroke='%231e293b' stroke-width='2' opacity='0.8'/%3E%3Cline x1='2' y1='16' x2='8' y2='16' stroke='%231e293b' stroke-width='2' opacity='0.8'/%3E%3Cline x1='24' y1='16' x2='30' y2='16' stroke='%231e293b' stroke-width='2' opacity='0.8'/%3E%3C/svg%3E") 16 16, crosshair;
}

.map-container-modern .leaflet-container .leaflet-interactive,
#mainMap.leaflet-container .leaflet-interactive,
#leafletMap .leaflet-container .leaflet-interactive {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='%23ec4899' stroke-width='2.5' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='3' fill='%23ec4899' opacity='0.9'/%3E%3Ccircle cx='16' cy='16' r='10' fill='none' stroke='white' stroke-width='1' opacity='0.6'/%3E%3C/svg%3E") 16 16, pointer !important;
}

.map-placeholder {
    height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.map-placeholder-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.map-placeholder-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.map-placeholder-text {
    font-size: 14px;
}

.map-legend-modern {
    margin-top: 16px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.legend-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

/* =====================================================
   MAPAS - NUEVA INTERFAZ PROFESIONAL
   ===================================================== */

/* Header de la sección */
.maps-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
}

.maps-header .header-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon-wrapper {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
}

.maps-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.maps-header p {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.maps-header .section-tabs {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.03);
    padding: 6px;
    border-radius: 12px;
}

.maps-header .section-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.maps-header .section-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}

.maps-header .section-tab.active {
    background: linear-gradient(135deg, #d4af37 0%, #b8962e 100%);
    color: #000;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

/* Panel de Filtros - Mejorado */
.map-filters-panel {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 24px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.filters-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #d4af37;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filters-icon {
    font-size: 18px;
    width: 36px;
    height: 36px;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Filters: Row 1 - Selects */
.filters-row-selects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Filters: Row 2 - Checkboxes + Button */
.filters-row-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.filters-checkboxes {
    display: flex;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}

.filters-checkboxes .checkbox-modern {
    flex: 0 1 auto;
}

.filters-checkboxes .checkbox-modern label {
    padding: 8px 12px;
    margin-bottom: 0 !important;
}

/* KPIs row inside filters */
.filters-kpis-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.kpi-card.kpi-mini {
    padding: 14px 16px;
}

.kpi-card.kpi-mini .kpi-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.kpi-card.kpi-mini .kpi-value {
    font-size: 22px;
}

.kpi-card.kpi-mini .kpi-label {
    font-size: 11px;
}

/* Selected KPI icon */
.kpi-selected .kpi-icon {
    background: linear-gradient(135deg, #1e293b 0%, #8b5cf6 100%);
}

@media (max-width: 1100px) {
    .filters-row-selects {
        grid-template-columns: 1fr 1fr;
    }

    .filters-row-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .filters-row-selects {
        grid-template-columns: 1fr;
    }

    .filters-kpis-row {
        grid-template-columns: 1fr;
    }
}

.map-filters-panel .filter-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.map-filters-panel .filter-group.checkbox-group {
    gap: 8px;
}

.map-filters-panel .filter-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.filter-icon {
    font-size: 14px;
    opacity: 0.9;
}

.map-filters-panel .form-select {
    width: 100%;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.map-filters-panel .form-select:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background-color: rgba(0, 0, 0, 0.5);
}

.map-filters-panel .form-select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.map-filters-panel .form-select option {
    background: #1a1a2e;
    color: white;
    padding: 12px;
}

/* Checkbox moderno */
.checkbox-modern {
    display: flex;
    align-items: center;
    height: 100%;
}

.checkbox-modern input[type="checkbox"] {
    display: none;
}

.checkbox-modern label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    transition: all 0.3s ease;
    width: 100%;
}

.checkbox-modern label:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background-color: rgba(0, 0, 0, 0.5);
}

.checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.checkbox-modern input[type="checkbox"]:checked+label {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.08);
}

.checkbox-modern input[type="checkbox"]:checked+label .checkbox-box {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}

.checkbox-modern input[type="checkbox"]:checked+label .checkbox-box::after {
    content: '✓';
    color: #000;
    font-size: 13px;
    font-weight: bold;
}

.checkbox-text {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.3;
}

/* Botón de actualizar */
.filter-action {
    display: flex;
    align-items: flex-end;
}

.btn-map-update {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 50%, #d4af37 100%);
    background-size: 200% 100%;
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s ease;
    width: auto;
    min-width: 180px;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-map-update:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.5);
    background-position: 100% 0;
}

.btn-map-update:active {
    transform: translateY(-1px);
}

.btn-map-update:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* KPIs Grid */
.map-kpis-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

/* 2-column KPIs grid for maps */
.map-kpis-grid.map-kpis-2col {
    grid-template-columns: repeat(2, 1fr);
    max-width: 600px;
}

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

.kpi-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 100%);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.kpi-causas .kpi-icon {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

.kpi-puntos .kpi-icon {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
}

.kpi-deuda .kpi-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.kpi-ciudades .kpi-icon {
    background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
}

.kpi-content {
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.kpi-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Contenedor del Mapa */
.map-container-modern {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.15);
    min-height: 500px;
    position: relative;
}

.map-view {
    height: 550px;
    width: 100%;
}

/* Placeholder del Mapa */
.map-placeholder {
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%);
}

.map-initial-state,
.map-loading-state,
.map-empty-state,
.map-error-state {
    text-align: center;
    padding: 40px;
    max-width: 500px;
}

.placeholder-icon,
.empty-icon,
.error-icon {
    font-size: 80px;
    margin-bottom: 24px;
    display: block;
}

.map-initial-state h3,
.map-empty-state h3,
.map-error-state h3 {
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin: 0 0 12px 0;
}

.map-initial-state p,
.map-empty-state p,
.map-error-state p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.map-empty-state .hint {
    font-size: 13px;
    color: rgba(212, 175, 55, 0.8);
    font-style: italic;
}

.placeholder-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.feature-item span {
    font-size: 18px;
}

/* Loading State */
.map-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-spinner-large {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(212, 175, 55, 0.2);
    border-top-color: #d4af37;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

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

/* Error State */
.btn-retry {
    padding: 12px 24px;
    background: linear-gradient(135deg, #d4af37 0%, #b8962e 100%);
    border: none;
    border-radius: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-retry:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
}

/* Popup Moderno - Tema Claro */
.modern-popup .leaflet-popup-content-wrapper {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 0;
}

.modern-popup .leaflet-popup-tip {
    background: #fff;
    border: 1px solid rgba(212, 175, 55, 0.25);
}

.modern-popup .leaflet-popup-content {
    margin: 0;
    width: auto !important;
}

.map-popup-modern {
    padding: 16px;
    color: #1a1a2e;
    min-width: 280px;
    max-width: 320px;
    max-height: 260px;
    overflow-y: auto;
}

.popup-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.popup-rol {
    font-size: 18px;
    font-weight: 700;
    color: #b8962e;
}

.popup-badge {
    font-size: 11px;
    background: #f0f0f0;
    padding: 5px 10px;
    border-radius: 6px;
    color: #666;
}

.popup-section {
    margin-bottom: 14px;
}

.popup-field {
    display: flex;
    gap: 12px;
    padding: 8px 0;
}

.popup-field.highlight {
    background: rgba(212, 175, 55, 0.08);
    margin: 8px -12px;
    padding: 12px;
    border-radius: 10px;
    border-left: 3px solid #d4af37;
}

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

.field-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.field-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-value {
    font-size: 13px;
    color: #1a1a2e;
    font-weight: 500;
}

.field-sub {
    font-size: 11px;
    color: #888;
}

.field-address {
    font-size: 12px;
    color: #b8962e;
    margin-top: 4px;
}

/* Popup Stats */
.popup-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0;
}

.stat-box {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
}

.stat-box .stat-icon {
    font-size: 16px;
    display: block;
    margin-bottom: 4px;
}

.stat-box .stat-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.stat-box .stat-value {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
}

.stat-box.tum-fresh {
    border: 1px solid rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.05);
}

.stat-box.tum-warning {
    border: 1px solid rgba(251, 188, 4, 0.5);
    background: rgba(251, 188, 4, 0.05);
}

.stat-box.tum-danger {
    border: 1px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.08);
}

.stat-box.deuda-box {
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.05);
}

/* Popup Location */
.popup-location {
    background: #f8f9fa;
    margin: 0 -20px;
    padding: 14px 20px;
    margin-bottom: -6px;
}

.location-header {
    font-size: 12px;
    font-weight: 600;
    color: #b8962e;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coords-display {
    margin-top: 8px;
}

.coords-display code {
    font-size: 11px;
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
    color: #666;
    font-family: 'Monaco', 'Consolas', monospace;
}

/* Popup Actions */
.popup-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.popup-btn-modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: none;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.popup-btn-modern span {
    font-size: 18px;
}

.popup-btn-modern.btn-maps {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
}

.popup-btn-modern.btn-directions {
    background: linear-gradient(135deg, #fbbc04 0%, #ea4335 100%);
    color: white;
}

.popup-btn-modern.btn-details {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.popup-btn-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Custom Markers */
.custom-marker-container {
    background: none !important;
    border: none !important;
}

.custom-marker {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.9);
}

.marker-inner {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    transform: rotate(45deg);
}

/* =====================================================
   KELLU SECTION - CHAT HISTORY
   ===================================================== */
.kellu-layout {
    display: flex;
    gap: 24px;
    height: calc(100vh - 200px);
    max-height: 800px;
}

.kellu-history-sidebar {
    width: 280px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kellu-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kellu-history-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.kellu-new-chat-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    color: #d4af37;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kellu-new-chat-btn:hover {
    background: rgba(212, 175, 55, 0.3);
}

.kellu-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.kellu-history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

.kellu-history-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

.kellu-history-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.kellu-history-item:hover .kellu-history-item-delete {
    opacity: 1;
}

.kellu-history-item.active {
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.kellu-history-item-content {
    flex: 1;
    min-width: 0;
    /* Permite que el texto se trunque */
}

.kellu-history-item-title {
    font-size: 13px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kellu-history-item-date {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.kellu-history-item-delete {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: rgba(239, 68, 68, 0.9);
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.kellu-history-item-delete:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    transform: scale(1.1);
}

.kellu-history-item-delete:active {
    transform: scale(0.95);
}

.kellu-history-item-delete svg {
    width: 14px;
    height: 14px;
}

.kellu-chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 0;
    /* Permite que el flex funcione correctamente */
}

.kellu-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    min-height: 0;
    /* Permite que el contenedor se ajuste correctamente */
}

/* Cuando hay animación de Lottie visible, no permitir scroll */
.kellu-messages.has-lottie {
    overflow: hidden;
    /* Sin scroll cuando hay animación */
    padding-bottom: 0;
}

/* Asegurar que el contenedor de Lottie ocupe el espacio disponible */
.kellu-messages #kelluLottieContainer:not(.hidden) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    max-height: 100%;
    overflow: visible;
    margin: 0;
}

.kellu-message {
    display: flex;
    position: relative;
    z-index: 2;
    animation: fadeInUp 0.3s ease-out;
}

.kellu-message.user {
    justify-content: flex-end;
}

.kellu-message.assistant,
.kellu-message.kellu-assistant {
    justify-content: flex-start;
}

.kellu-avatar-lottie {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kellu-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.kellu-message-content {
    display: flex;
    gap: 12px;
    max-width: 80%;
}

/* Mensaje de bienvenida más ancho para ocupar menos líneas */
.kellu-message.kellu-assistant .kellu-message-content {
    max-width: 95%;
}

.kellu-message.user .kellu-message-content {
    flex-direction: row-reverse;
}

.kellu-message-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.kellu-message-text {
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.kellu-message.user .kellu-message-text {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.kellu-message.assistant .kellu-message-text {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-bottom-left-radius: 4px;
}

.kellu-welcome-message {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.7);
}

.kellu-message.kellu-assistant {
    margin-bottom: 0;
    flex-shrink: 0;
    /* El mensaje no se encoge */
}

.kellu-content {
    flex: 1;
}

.kellu-text {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    border-bottom-left-radius: 4px;
}

.kellu-message.kellu-assistant .kellu-content {
    flex: 1;
}

.kellu-message.kellu-assistant .kellu-text {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    border-bottom-left-radius: 4px;
}

/* Mensaje de bienvenida más compacto */
#kelluWelcomeText {
    font-size: 15px;
    line-height: 1.5;
    padding: 16px 20px;
}

.kellu-welcome-message h3 {
    color: white;
    margin-bottom: 8px;
}

.kellu-lottie-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    min-height: 0;
    overflow: visible;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;
    /* Ocupa todo el espacio disponible */
}

.kellu-lottie-container:not(.hidden) {
    opacity: 1;
}

.kellu-lottie-container.hidden {
    display: none;
}

.kellu-lottie {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 100%;
    min-width: 300px;
    min-height: 300px;
    object-fit: contain;
    flex-shrink: 1;
    flex-grow: 0;
    box-sizing: border-box;
    margin: 0 auto;
    /* Centrar la animación */
}

/* =====================================================
   KELLU MULTI-CASE SELECTION CARDS
   ===================================================== */
.kellu-multi-match-message {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    line-height: 1.5;
}

.kellu-causa-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.kellu-causa-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kellu-causa-card:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.2);
}

.kellu-causa-card:active {
    transform: translateY(0);
}

.kellu-causa-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.kellu-causa-card-num {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    color: #1a1a2e;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.kellu-causa-card-tribunal {
    font-size: 13px;
    font-weight: 600;
    color: white;
    flex: 1;
}

.kellu-causa-card-badge {
    font-size: 11px;
    padding: 3px 10px;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-radius: 20px;
    font-weight: 500;
    flex-shrink: 0;
}

.kellu-causa-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.kellu-causa-card-detail {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.kellu-causa-card-detail strong {
    color: rgba(255, 255, 255, 0.9);
}

/* =====================================================
   FORM CONTROLS (Cuadernos Dropdown)
   ===================================================== */
.form-control {
    display: block;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 42px;
}

.form-control:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
}

.form-control:focus {
    outline: none;
    border-color: #d4af37;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2), 0 4px 12px rgba(212, 175, 55, 0.3);
    transform: translateY(-1px);
}

.form-control option {
    padding: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Asegurar que los botones de acción sean visibles */
.th-actions {
    position: relative;
    z-index: 1;
}

.th-actions>div {
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.kellu-messages {
    position: relative;
}

.kellu-input-area {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.kellu-input-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.kellu-rol-input {
    flex: 0 0 180px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.kellu-rol-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.kellu-message-input {
    flex: 1;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 14px;
}

.kellu-message-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.kellu-message-input:focus,
.kellu-rol-input:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

.kellu-send-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: none;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kellu-send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

/* =====================================================
   REPORTS SECTION
   ===================================================== */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
}

.report-card-modern {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.report-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.report-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    color: white;
}

.report-card-header.primary {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.report-card-header.warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.report-card-header.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.report-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.report-badge {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.report-card-body {
    padding: 24px;
}

.report-card-body p {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.report-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.date-range-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.date-input label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.date-input input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
}

.filter-group {
    margin-bottom: 12px;
}

.filter-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.report-filter-select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.checkbox-label.disabled {
    opacity: 0.6;
}

.report-card-footer {
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.btn-full {
    width: 100%;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    color: white;
}

/* =====================================================
   USERS MANAGEMENT SECTION
   ===================================================== */
.users-container {
    margin-top: 24px;
}

.users-table tbody td {
    vertical-align: middle;
}

.user-permissions-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.permission-badge {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.user-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.user-status-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.user-status-badge.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* User Modal */
.user-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* User modal needs higher z-index to appear above other .user-modal instances (e.g. orgUsersModal) */
#userModal {
    z-index: 10003;
}

.user-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    animation: modalOverlayShow 0.3s ease-out;
}

@keyframes modalOverlayShow {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.user-modal-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    margin: 20px;
    z-index: 2001;
    animation: modalPremiumShow 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPremiumShow {
    0% { transform: scale(0.95) translateY(20px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.user-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: white;
}

.user-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.user-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.user-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.user-form {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.user-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.user-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.user-form-group input,
.user-form-group select {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.user-form-group input:focus,
.user-form-group select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.user-permissions-section {
    margin-bottom: 24px;
}

.user-permissions-section h4 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.permission-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.permission-item:hover {
    background: rgba(212, 175, 55, 0.1);
}

.permission-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #d4af37;
}

.permission-item span {
    font-size: 13px;
    color: var(--text-primary);
}

.user-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

/* User Profile in Sidebar */
.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4af37;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.logout-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* =====================================================
   RESPONSIVE ADJUSTMENTS
   ===================================================== */
@media (max-width: 1200px) {
    .sync-stats-grid {
        grid-template-columns: 1fr;
    }

    .sync-actions-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .map-stats-modern {
        grid-template-columns: repeat(2, 1fr);
    }

    .completed-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .kellu-layout {
        flex-direction: column;
    }

    .kellu-history-sidebar {
        width: 100%;
        max-height: 200px;
    }

    .scraper-form-grid {
        grid-template-columns: 1fr;
    }

    .sync-actions-panel {
        grid-template-columns: 1fr;
    }

    .permissions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-form-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    }

    50% {
        box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

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

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

/* ==========================================================================
   PREMIUM LOGIN MODULE
   ========================================================================== */
.login-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111827;
    z-index: 10000;
}

.login-background {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.login-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.05) 1.5px, transparent 1.5px);
    background-size: 40px 40px, 80px 80px;
    opacity: 0.5;
}

.login-gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: floatOrb 10s infinite ease-in-out;
}

.login-orb-1 {
    width: 300px;
    height: 300px;
    background: #6366f1;
    top: -50px;
    left: -50px;
    animation-delay: 0s;
}

.login-orb-2 {
    width: 400px;
    height: 400px;
    background: #8b5cf6;
    bottom: -100px;
    right: -100px;
    animation-delay: -3s;
}

.login-orb-3 {
    width: 250px;
    height: 250px;
    background: #d4af37;
    top: 40%;
    left: 40%;
    opacity: 0.3;
    animation-delay: -6s;
}

@keyframes floatOrb {

    0%,
    100% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(30px, -50px);
    }

    66% {
        transform: translate(-20px, 20px);
    }
}

/* .login-container removed (conflict) */

.login-card {
    background: rgba(255, 255, 255, 0.05);
    /* Glassmorphism base */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    padding: 40px 32px;
    overflow: hidden;
    position: relative;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
    border-color: rgba(212, 175, 55, 0.2);
}

.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #d4af37);
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo-wrapper {
    width: 240px;
    height: 240px;
    margin: 0 auto 30px;
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.1);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.login-logo {
    width: 100%;
    height: auto;
    border-radius: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.login-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 500;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-input {
    background: rgba(17, 24, 39, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 16px;
    color: #fff;
    outline: none;
    transition: all 0.2s;
}

.login-input:focus {
    border-color: #6366f1;
    background: rgba(17, 24, 39, 0.8);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.login-password-wrapper {
    position: relative;
    display: flex;
}

.login-password-wrapper .login-input {
    width: 100%;
    padding-right: 40px;
}

.login-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 4px;
}

.login-password-toggle:hover {
    color: #fff;
}

.login-button {
    margin-top: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    font-weight: 600;
    padding: 14px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    position: relative;
    overflow: hidden;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.5);
}

.login-button:active {
    transform: translateY(0);
}

.login-button.loading {
    color: transparent;
    pointer-events: none;
}

.login-button-loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.login-button.loading .login-button-loader {
    display: block;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.login-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.login-footer {
    margin-top: 24px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
}

/* =====================================================
   STATIC MAPS S3 SECTION
   ===================================================== */
.static-maps-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 1200px) {
    .static-maps-container {
        grid-template-columns: 1fr;
    }
}

.static-map-generator {
    padding: 28px;
}

.static-map-generator h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.generator-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

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

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input,
.form-select {
    padding: 12px 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.btn-generate-map {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.btn-generate-map:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35);
}

.btn-generate-map.loading {
    pointer-events: none;
    opacity: 0.7;
}

.static-maps-list {
    padding: 24px;
    min-height: 400px;
}

.static-maps-list .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.static-maps-list .list-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.maps-list-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.maps-list-content .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.empty-state .empty-hint {
    font-size: 13px;
    color: var(--text-secondary);
}

.static-map-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.static-map-item:hover {
    border-color: #d4af37;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.static-map-item .map-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.static-map-item .map-info {
    flex: 1;
    min-width: 0;
}

.static-map-item .map-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.static-map-item .map-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.static-map-item .map-actions {
    display: flex;
    gap: 8px;
}

.btn-copy-url,
.btn-open-map,
.btn-delete-map {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-copy-url {
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    color: #1a1a2e;
}

.btn-open-map {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.btn-delete-map {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.btn-copy-url:hover,
.btn-open-map:hover,
.btn-delete-map:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.btn-copy-url.copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Auto-label for title input */
.auto-label {
    font-size: 11px;
    font-weight: 500;
    color: #d4af37;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.9;
}

.auto-label.hidden {
    display: none;
}

/* =====================================================
   MAP CONFIRM MODAL - Glassmorphism Design
   ===================================================== */
.map-confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.map-confirm-modal.active {
    display: flex;
}

.map-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.25s ease-out;
}

.map-confirm-container {
    position: relative;
    width: 95%;
    max-width: 540px;
    background: var(--bg-primary);
    border-radius: 24px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.map-confirm-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, transparent 100%);
    border-bottom: 1px solid var(--border-color);
}

.map-confirm-header-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    flex-shrink: 0;
}

.map-confirm-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.map-confirm-header p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 2px 0 0;
}

.map-confirm-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.map-confirm-close:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.map-confirm-body {
    padding: 24px 28px;
}

.map-confirm-preview {
    text-align: center;
    padding: 28px 20px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06) 0%, rgba(99, 102, 241, 0.04) 100%);
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    margin-bottom: 24px;
    animation: previewFadeIn 0.5s ease-out 0.15s both;
}

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

.preview-icon-large {
    font-size: 42px;
    margin-bottom: 12px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.preview-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.3;
}

.preview-date {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.map-confirm-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .map-confirm-details {
        grid-template-columns: 1fr;
    }
}

.confirm-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    animation: detailItemIn 0.35s ease-out both;
}

.confirm-detail-item:nth-child(1) { animation-delay: 0.15s; }
.confirm-detail-item:nth-child(2) { animation-delay: 0.2s; }
.confirm-detail-item:nth-child(3) { animation-delay: 0.25s; }
.confirm-detail-item:nth-child(4) { animation-delay: 0.3s; }
.confirm-detail-item:nth-child(5) { animation-delay: 0.35s; }
.confirm-detail-item:nth-child(6) { animation-delay: 0.4s; }

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

.confirm-detail-item.hidden {
    display: none;
}

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

.detail-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 1;
}

.detail-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.map-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.map-confirm-generate {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%) !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
}

.map-confirm-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.35);
}

.map-confirm-generate.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Enhanced Map List Items */
.static-map-item .map-info .map-filters-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.map-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.map-filter-tag.mode-tag {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.map-secret-key {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.map-secret-key:hover {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

/* Secure API Key Presentation */
.secure-key-wrapper {
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.secure-key-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.secure-key-label svg {
    color: #d4af37;
}

.secure-key-input-container {
    display: flex;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    max-width: 250px;
    flex: 1;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

.secure-key-input {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
    outline: none;
    letter-spacing: 2px;
    user-select: all;
}

.secure-key-input::selection {
    background: rgba(212, 175, 55, 0.2);
}

.secure-key-actions {
    display: flex;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
}

.btn-key-action {
    background: transparent;
    border: none;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-key-action:hover {
    background: rgba(212, 175, 55, 0.1);
    color: #d4af37;
}

.btn-key-action:focus {
    outline: none;
}

.btn-key-action.copied {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}



/* TUM Manager Styles - Enhanced */
.tum-alert-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    margin-bottom: 24px;
    animation: alertSlideIn 0.5s ease-out;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.tum-alert-banner .alert-icon {
    font-size: 32px;
}

.tum-alert-banner .alert-content {
    font-size: 15px;
    color: var(--text-primary);
}

.tum-alert-banner .alert-content strong {
    color: #ef4444;
}

.tum-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tum-stats-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1400px) {
    .tum-stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.tum-stat-card {
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 24px;
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

.tum-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.tum-stat-card.total {
    border-color: rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, var(--bg-primary) 100%);
}

.tum-stat-card.warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, var(--bg-primary) 100%);
}

.tum-stat-card.danger {
    border-color: rgba(249, 115, 22, 0.3);
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, var(--bg-primary) 100%);
}

.tum-stat-card.critical {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, var(--bg-primary) 100%);
    animation: criticalPulse 2s ease-in-out infinite;
}

@keyframes criticalPulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2);
    }

    50% {
        box-shadow: 0 4px 30px rgba(239, 68, 68, 0.4);
    }
}

.stat-card-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.stat-icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.stat-icon-wrapper .stat-emoji {
    font-size: 28px;
}

.stat-icon-wrapper.warning-glow {
    background: rgba(245, 158, 11, 0.15);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.stat-icon-wrapper.danger-glow {
    background: rgba(249, 115, 22, 0.15);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.2);
}

.stat-icon-wrapper.critical-glow {
    background: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.3);
}

.stat-icon-wrapper.pulse {
    animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.stat-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-details .stat-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.stat-details .stat-number.animate-pulse {
    animation: numberPulse 1s ease-in-out infinite;
}

.stat-details .stat-number.animate-shake {
    animation: numberShake 0.5s ease-in-out infinite;
}

.stat-details .stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

@keyframes numberPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes numberShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

.stat-progress {
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease-out;
}

.progress-bar.total-bar {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.progress-bar.warning-bar {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.progress-bar.danger-bar {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.progress-bar.critical-bar {
    background: linear-gradient(90deg, #ef4444, #f87171);
    animation: progressPulse 1s ease-in-out infinite;
}

@keyframes progressPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.tum-list-container {
    padding: 24px;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.risk-low {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.risk-medium {
    background-color: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.risk-high {
    background-color: rgba(249, 115, 22, 0.15);
    color: #f97316;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.risk-critical {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
    color: #ef4444;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    animation: riskBlink 1s ease-in-out infinite;
}

@keyframes riskBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* =====================================================
   TUM MANAGER REDESIGN - Modern Clean Style
   ===================================================== */

.tum-redesign {
    padding: 0 !important;
}

/* Hero Header */
.tum-hero-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 32px 40px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 24px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.tum-hero-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.tum-hero-icon {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
}

.tum-hero-icon svg {
    width: 40px;
    height: 40px;
}

.tum-hero-text {
    position: relative;
    z-index: 1;
}

.tum-hero-text h2 {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
}

.tum-hero-text p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-weight: 400;
}

/* Alert Banner New */
.tum-alert-banner-new {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.15) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 16px;
    margin-bottom: 24px;
    animation: slideDown 0.4s ease-out;
}

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

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

.alert-icon-new {
    width: 44px;
    height: 44px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-icon-new svg {
    width: 24px;
    height: 24px;
    stroke: #f59e0b;
}

.alert-content-new {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Stats Grid */
.tum-dashboard-new {
    margin-bottom: 28px;
}

.tum-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

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

@media (max-width: 640px) {
    .tum-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* TUM Cards */
.tum-card {
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.tum-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.tum-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.tum-card-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
}

.tum-card-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tum-card-number {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    letter-spacing: -1px;
}

.tum-card-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tum-card-sublabel {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.tum-card-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    border-radius: 0 20px 0 100%;
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.tum-card:hover .tum-card-indicator {
    opacity: 0.15;
}

/* Card Variants */
.tum-card-total .tum-card-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
}

.tum-card-total .tum-card-icon svg {
    stroke: #6366f1;
}

.tum-card-total .tum-card-number {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tum-card-approaching .tum-card-icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.15) 100%);
}

.tum-card-approaching .tum-card-icon svg {
    stroke: #f59e0b;
}

.tum-card-approaching .tum-card-number {
    color: #f59e0b;
}

.tum-card-approaching .tum-card-indicator {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.tum-card-exceeded .tum-card-icon {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(234, 88, 12, 0.15) 100%);
}

.tum-card-exceeded .tum-card-icon svg {
    stroke: #f97316;
}

.tum-card-exceeded .tum-card-number {
    color: #f97316;
}

.tum-card-exceeded .tum-card-indicator {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%);
}

.tum-card-urgent {
    border-color: rgba(239, 68, 68, 0.2);
    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(239, 68, 68, 0.03) 100%);
}

.tum-card-urgent .tum-card-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
    animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.tum-card-urgent .tum-card-icon svg {
    stroke: #ef4444;
}

.tum-card-urgent .tum-card-number {
    color: #ef4444;
}

.tum-card-urgent .tum-card-indicator {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

/* Table Wrapper */
.tum-table-wrapper {
    background: var(--bg-primary);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.tum-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    flex-wrap: wrap;
    gap: 16px;
}

.tum-table-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tum-table-title svg {
    width: 22px;
    height: 22px;
    stroke: var(--primary-color);
    opacity: 0.8;
}

.tum-table-title h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.tum-search-container {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.tum-search-container svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    opacity: 0.6;
}

.tum-search-container input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.tum-search-container input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.tum-search-container input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Table Container */
.tum-table-container {
    overflow-x: auto;
}

/* Table Styles */
.tum-table {
    width: 100%;
    border-collapse: collapse;
}

.tum-table thead {
    background: var(--bg-secondary);
}

.tum-table th {
    padding: 16px 20px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.tum-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.tum-table tbody tr:last-child {
    border-bottom: none;
}

.tum-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.04);
}

.tum-table td {
    padding: 18px 20px;
    font-size: 14px;
    color: var(--text-primary);
    vertical-align: middle;
}

.tum-table td:first-child {
    font-weight: 600;
    color: var(--primary-color);
}

/* Time Badge Styles */
.tum-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.tum-time-badge.approaching {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.12) 100%);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.tum-time-badge.exceeded {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(234, 88, 12, 0.12) 100%);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.tum-time-badge.urgent {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.12) 100%);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.85;
    }
}

.tum-time-days {
    font-size: 11px;
    opacity: 0.8;
    font-weight: 500;
}

/* View Button */
.tum-btn-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

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

.tum-btn-view:active {
    transform: translateY(0);
}

/* Empty State */
.tum-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.tum-empty-state svg {
    width: 64px;
    height: 64px;
    stroke: var(--text-secondary);
    opacity: 0.3;
    margin-bottom: 16px;
}

.tum-empty-state p {
    font-size: 15px;
    margin: 0;
}

/* Loading State */
.tum-loading {
    text-align: center;
    padding: 60px 20px;
}

.tum-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 16px;
}

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

.tum-loading p {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Static Map Generator Styles */
.section-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.section-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}

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

.section-tab:hover:not(.active) {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.02);
}

.generator-container {
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.result-box {
    margin-top: 24px;
    padding: 20px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--border-radius);
}

.success-message {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.url-copy-box {
    display: flex;
    gap: 10px;
}

.url-copy-box input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
}

/* Admin Only Visibility for table columns */
.admin-only {
    display: none;
    /* Default hidden, shown via JS if admin */
}

/* Modal Styles for User Assignment */
.modal-content {
    background: var(--bg-primary);
    padding: 24px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
}


/* TUM Manager Styles */
.tum-dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tum-stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.stat-card.warning .stat-icon {
    color: var(--warning-color);
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.stat-card.danger .stat-icon {
    color: var(--danger-color);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.tum-list-container {
    padding: 24px;
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.risk-medium {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.risk-critical {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* Static Map Generator Styles */
.section-tabs {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.section-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s;
}

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

.section-tab:hover:not(.active) {
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.02);
}

.generator-container {
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.result-box {
    margin-top: 24px;
    padding: 20px;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--border-radius);
}

.success-message {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.url-copy-box {
    display: flex;
    gap: 10px;
}

.url-copy-box input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background: var(--bg-primary);
}

/* Admin Only Visibility for table columns */
.admin-only {
    display: none;
    /* Default hidden, shown via JS if admin */
}

/* Modal Styles for User Assignment */
.modal-content {
    background: var(--bg-primary);
    padding: 24px;
    border-radius: var(--border-radius);
    max-width: 500px;
    width: 90%;
}

/* ==========================================================================
   LOGIN FORM STYLES - Matching HTML classes
   ========================================================================== */

/* Glass morphism effect for login card */
.glass-morphism {
    background: rgba(26, 26, 46, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Logo icon for login */
.logo-icon-large {
    width: 220px;
    height: 220px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.02) 100%);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.logo-icon-large:hover {
    transform: scale(1.05);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.brand-logo {
    width: 70px;
    height: 70px;
    color: #d4af37;
    filter: drop-shadow(0 4px 8px rgba(212, 175, 55, 0.4));
}

/* Login logo container */
.login-logo {
    text-align: center;
    margin-bottom: 32px;
}

/* Input groups for login */
.login-form .input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.login-form .input-group label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Input wrapper with icon */
.login-form .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-form .input-wrapper .input-icon {
    position: absolute;
    left: 16px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: color 0.3s ease;
    z-index: 1;
}

.login-form .input-wrapper input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: white;
    font-size: 15px;
    transition: all 0.3s ease;
    outline: none;
}

.login-form .input-wrapper input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-form .input-wrapper input:focus {
    border-color: #d4af37;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.login-form .input-wrapper input:focus+.input-icon,
.login-form .input-wrapper:focus-within .input-icon {
    color: #d4af37;
}

/* Login button */
.login-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    border: none;
    border-radius: 12px;
    color: #1a1a2e;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.login-btn:hover::before {
    left: 100%;
}

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

.login-btn svg {
    width: 20px;
    height: 20px;
    stroke: #1a1a2e;
}

/* Login footer */
.login-footer {
    margin-top: 32px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.login-footer p {
    margin: 0;
}

/* Particles background */
.login-background {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05) 1px, transparent 1px),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.03) 1.5px, transparent 1.5px);
    background-size: 40px 40px, 80px 80px;
    opacity: 0.8;
}

/* =====================================================
   MAP SELECTION - Mode Toggle & Manual Selection
   ===================================================== */

/* Mode Toggle */
.map-mode-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.mode-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.toggle-options {
    display: flex;
    gap: 8px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 12px;
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.toggle-btn:hover {
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.08);
}

.toggle-btn.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.toggle-btn.active svg {
    stroke: white;
}

/* Mode Sections */
.mode-section {
    animation: fadeIn 0.3s ease;
}

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

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

.form-group-full {
    grid-column: 1 / -1;
}

/* Manual Selection Area */
.manual-selection-area {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 2px dashed rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.selection-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.selection-count {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--text-primary);
}

.selection-count svg {
    width: 24px;
    height: 24px;
    stroke: var(--primary-color);
    opacity: 0.8;
}

.selection-count strong {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
}

.btn-clear-selection {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #ef4444;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear-selection:hover {
    background: rgba(239, 68, 68, 0.15);
}

.btn-clear-selection svg {
    width: 14px;
    height: 14px;
}

.btn-select-people {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
}

.btn-select-people:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.45);
}

.btn-select-people svg {
    width: 20px;
    height: 20px;
}

/* Selected Preview */
.selected-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
    max-height: 120px;
    overflow-y: auto;
}

.selected-preview:empty {
    display: none;
}

.preview-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-primary);
}

.preview-chip-more {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
    color: var(--primary-color);
    font-weight: 600;
}

/* =====================================================
   MAP SELECTION MODAL
   ===================================================== */

.map-selection-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.3s ease;
}

.map-selection-modal.active {
    display: flex;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.map-selection-content {
    background: var(--bg-primary);
    border-radius: 24px;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
    animation: modalSlideIn 0.3s ease;
    overflow: visible;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

.map-selection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    flex-shrink: 0;
}

.map-selection-header .header-info h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.map-selection-header .header-info h3 svg {
    width: 24px;
    height: 24px;
    stroke: var(--primary-color);
}

.map-selection-header .header-info p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.btn-close-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-modal svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
}

.btn-close-modal:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-close-modal:hover svg {
    stroke: #ef4444;
}

/* Filters */
.map-selection-filters {
    padding: 16px 28px;
    background: var(--bg-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

.filter-search {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.filter-search svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--text-secondary);
    opacity: 0.6;
}

.filter-search input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.filter-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-selects {
    display: flex;
    gap: 10px;
}

.filter-selects .form-select {
    min-width: 180px;
    padding: 12px 16px;
    border-radius: 12px;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

.btn-select-all,
.btn-deselect-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-select-all:hover,
.btn-deselect-all:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
}

.btn-select-all svg,
.btn-deselect-all svg {
    width: 16px;
    height: 16px;
}

/* Counter */
.map-selection-counter {
    padding: 10px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.counter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 20px;
    font-size: 14px;
    color: var(--primary-color);
}

.counter-badge strong {
    font-size: 16px;
    font-weight: 700;
}

.counter-total {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Selection List */
.map-selection-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 28px;
    min-height: 200px;
    max-height: 350px;
}

.selection-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
}

.selection-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

/* Selection Item */
.selection-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--bg-primary);
}

.selection-item:hover {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.02);
}

.selection-item.selected {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
}

.selection-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.selection-item.selected .selection-checkbox {
    background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
    border-color: transparent;
}

.selection-checkbox svg {
    width: 14px;
    height: 14px;
    stroke: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.selection-item.selected .selection-checkbox svg {
    opacity: 1;
    transform: scale(1);
}

.selection-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.selection-main-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.selection-info .rol {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
    flex-shrink: 0;
}

.selection-info .demandado {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(99, 102, 241, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
}

.selection-info .caratulado {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-info .meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.selection-info .meta span {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.selection-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.selection-empty svg {
    width: 64px;
    height: 64px;
    stroke: var(--text-secondary);
    opacity: 0.3;
    margin-bottom: 16px;
}

/* Footer */
.map-selection-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
    border-radius: 0 0 24px 24px;
}

.map-selection-footer .btn-cancel {
    padding: 12px 24px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-selection-footer .btn-cancel:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.map-selection-footer .btn-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    background: linear-gradient(135deg, var(--primary-color) 0%, #7c3aed 100%);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.map-selection-footer .btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.map-selection-footer .btn-confirm svg {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .map-mode-toggle {
        flex-direction: column;
        align-items: flex-start;
    }

    .toggle-options {
        width: 100%;
    }

    .toggle-btn {
        flex: 1;
        justify-content: center;
    }

    .map-selection-filters {
        flex-direction: column;
    }

    .filter-search {
        width: 100%;
    }

    .filter-selects {
        width: 100%;
    }

    .filter-selects .form-select {
        flex: 1;
        min-width: 0;
    }

    .filter-actions {
        width: 100%;
        justify-content: center;
    }
}

/* Fix table header clipping */
.table th {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle;
    line-height: 1.5;
}

.table-responsive {
    padding-top: 5px;
    /* Prevent shadow clipping */
    overflow-y: visible;
    /* Allow dropdowns to overflow */
}
/* --- Menu Flattening Logic --- */
.sidebar-nav.flat-menu .nav-group-header {
    display: none !important;
}
.sidebar-nav.flat-menu .nav-group-children {
    padding-left: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0 !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
}
.sidebar-nav.flat-menu .nav-group {
    margin-bottom: 0 !important;
}

/* =====================================================
   PHASE 4: REAL-TIME DASHBOARD (WORKERS)
   ===================================================== */

.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

.dashboard-main-col, .dashboard-side-col {
    display: flex;
    flex-direction: column;
}

.dashboard-panel {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.dashboard-panel .panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.1);
}

.dashboard-panel .panel-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.dashboard-execution-card {
    margin: 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.15);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-execution-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.exec-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.exec-card-header.update-type {
    border-left: 4px solid #f59e0b;
}

.exec-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exec-card-icon {
    font-size: 26px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.exec-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.05);
}

.exec-stat-box {
    background: rgba(0,0,0,0.2);
    padding: 12px 10px;
    text-align: center;
}

.exec-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    margin-bottom: 6px;
    font-weight: 600;
}

.exec-stat-value {
    font-size: 22px;
    font-weight: 700;
}

.exec-jobs-container {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dashboard-job-row {
    padding: 14px;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    border-left: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.dashboard-job-row.active {
    background: rgba(59, 130, 246, 0.05);
    border-left-color: #3b82f6;
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.02);
}

.history-item {
    display: flex;
    flex-direction: column;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    transition: background 0.2s;
}

.history-item:hover {
    background: rgba(255,255,255,0.01);
}

.history-item:last-child {
    border-bottom: none;
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.history-item-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.history-item-date {
    font-size: 11px;
    color: var(--text-secondary);
}

.history-item-details {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    background: rgba(0,0,0,0.1);
    padding: 6px 10px;
    border-radius: 4px;
}

.fleet-list {
    display: flex;
    flex-direction: column;
}

.fleet-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    transition: all 0.2s ease;
}

.fleet-item.active {
    background: rgba(16, 185, 129, 0.03);
}

.fleet-item:last-child {
    border-bottom: none;
}

.fleet-item-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    font-size: 18px;
    transition: all 0.3s ease;
}

.fleet-item-icon.processing {
    background: rgba(16, 185, 129, 0.15);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
    animation: fleetPulse 2s infinite;
}

@keyframes fleetPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.unified-terminal-panel {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    height: 400px; /* Fixed height for terminal */
}

.unified-terminal-panel .terminal-header {
    background: #161b22 !important;
    border-bottom: 1px solid #30363d !important;
}

.unified-terminal-panel .terminal-content {
    background: #0d1117;
    padding: 12px;
    font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
}

.unified-terminal-panel .terminal-content::-webkit-scrollbar {
    width: 8px;
}
.unified-terminal-panel .terminal-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.2);
}
.unified-terminal-panel .terminal-content::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

.live-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: inline-block;
    animation: redBlink 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px #ef4444;
}

@keyframes redBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

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

/* =========================================
   Organization View & Cards UI
   ========================================= */
.view-toggle {
    display: flex;
    background: var(--bg-neutral);
    border-radius: 8px;
    padding: 2px;
    border: 1px solid var(--border-color);
}
.view-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-btn:hover {
    color: var(--text-primary);
}
.view-btn.active {
    background: var(--bg-primary);
    color: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 6px;
}

.organizations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    animation: fadeInRow 0.4s ease-out;
}

.org-card {
    background: var(--bg-primary);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.org-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px -3px rgba(0,0,0,0.1);
    border-color: #cbd5e1;
}

.premium-org-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
    z-index: 10;
}

.org-card-header {
    padding: 24px;
    background: linear-gradient(135deg, white 0%, #f8fafc 100%);
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.org-card-title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}
.org-card-type {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.org-card-body {
    padding: 24px;
    flex: 1;
}
.org-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: #475569;
}
.org-stat:last-child {
    margin-bottom: 0;
}
.org-stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.org-card-actions {
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.fab-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.fab-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.fab-btn.view:hover { color: #3b82f6; border-color: #bfdbfe; }
.fab-btn.edit:hover { color: #10b981; border-color: #a7f3d0; }
.fab-btn.delete:hover { color: #ef4444; border-color: #fecaca; }

/* =========================================
   Email Tags Manager UI
   ========================================= */
.email-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 34px;
}

.email-chip {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    animation: scaleIn 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.email-chip-icon {
    color: #64748b;
    margin-right: 6px;
    display: flex;
}
.email-chip-remove {
    background: none;
    border: none;
    color: #94a3b8;
    margin-left: 8px;
    padding: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: all 0.2s;
}
.email-chip-remove:hover {
    background: #fee2e2;
    color: #ef4444;
}

.email-input-dock {
    display: flex;
    align-items: center;
}

.add-email-inline {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 2px 2px 2px 12px;
    transition: all 0.3s;
    width: 100%;
    max-width: 320px;
}
.add-email-inline:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.add-email-inline input {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 13px;
    color: #334155;
    outline: none;
    padding: 8px 0;
}
.add-email-inline input::placeholder {
    color: #94a3b8;
}
.add-email-btn {
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.add-email-btn:hover {
    background: #4f46e5;
    transform: scale(1.05);
}
.add-email-btn:active {
    transform: scale(0.95);
}

/* =====================================================
   CASE HISTORY — Historial de Movimientos
   ===================================================== */

/* KPI Grid */
.ch-kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 24px !important;
}
@media (max-width: 1100px) {
    .ch-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .ch-kpi-grid { grid-template-columns: 1fr !important; }
}

/* Filter Bar */
.ch-filters-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.ch-filter-group { flex: 1; min-width: 140px; }
.ch-filter-group:first-child { flex: 2; min-width: 240px; }

.ch-search-input, .ch-select, .ch-date-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 13.5px;
    background: #fff;
    color: var(--text-primary);
    transition: all 0.25s ease;
    outline: none;
}
.ch-search-input:focus, .ch-select:focus, .ch-date-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.ch-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.ch-filter-btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ch-filter-btn-clear {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 10px 12px;
}
.ch-filter-btn-clear:hover { background: #e5e7eb; color: var(--text-primary); }

/* Table */
.ch-table-container {
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid var(--border-color);
}
.ch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.ch-table thead {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.ch-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(212, 175, 55, 0.9);
    border-bottom: 2px solid rgba(212, 175, 55, 0.15);
    white-space: nowrap;
}
.ch-table tbody tr {
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.2s ease;
}
.ch-table tbody tr:hover { background: rgba(99, 102, 241, 0.04); }
.ch-table tbody td { padding: 12px 16px; vertical-align: middle; }

/* Row animation */
@keyframes chRowSlideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}
.ch-row-animate { animation: chRowSlideIn 0.35s ease both; }

/* Spin animation for loading */
@keyframes chSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ch-spin { display: inline-block; animation: chSpin 1.2s linear infinite; }

/* Date cells */
.ch-td-date { white-space: nowrap; }
.ch-date-main { font-weight: 500; color: var(--text-primary); font-size: 13px; }
.ch-date-relative { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

/* ROL badge */
.ch-rol-badge {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f0f0ff, #e8e8ff);
    color: var(--primary-dark);
    border-radius: 8px;
    font-weight: 600;
    font-size: 12.5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    letter-spacing: 0.3px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    cursor: default;
}

/* Tribunal truncation */
.ch-td-tribunal {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* Event badges */
.ch-event-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: transform 0.2s ease;
}
.ch-event-badge:hover { transform: scale(1.04); }
.ch-event-icon { font-size: 13px; }

.ch-event-legal {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.05));
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
.ch-event-movement {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.2);
}
.ch-event-assigned {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.05));
    color: #6d28d9;
    border: 1px solid rgba(139, 92, 246, 0.2);
}
.ch-event-sync {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.05));
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.ch-event-update {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.05));
    color: #0369a1;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

/* Value badges */
.ch-val-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-val-na { color: var(--text-tertiary); font-size: 14px; }

.ch-val-approved { background: rgba(16, 185, 129, 0.1); color: #047857; border: 1px solid rgba(16, 185, 129, 0.2); }
.ch-val-opportunity { background: rgba(245, 158, 11, 0.1); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.2); }
.ch-val-future { background: rgba(249, 115, 22, 0.1); color: #9a3412; border: 1px solid rgba(249, 115, 22, 0.2); }
.ch-val-rejected { background: rgba(239, 68, 68, 0.1); color: #991b1b; border: 1px solid rgba(239, 68, 68, 0.2); }
.ch-val-archived { background: rgba(107, 114, 128, 0.1); color: #374151; border: 1px solid rgba(107, 114, 128, 0.2); }
.ch-val-assigned { background: rgba(139, 92, 246, 0.1); color: #5b21b6; border: 1px solid rgba(139, 92, 246, 0.2); }

/* Timeline button */
.ch-timeline-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.25s ease;
}
.ch-timeline-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Empty state */
.ch-empty-state {
    text-align: center;
    padding: 60px 20px !important;
    color: var(--text-tertiary);
}
.ch-empty-icon { font-size: 48px; margin-bottom: 12px; }
.ch-empty-state small { color: var(--text-tertiary); font-size: 12px; }

/* Pagination */
.ch-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    flex-wrap: wrap;
    gap: 12px;
}
.ch-page-info {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.ch-page-btns {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ch-page-btn {
    padding: 7px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.ch-page-btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(99,102,241,0.04); }
.ch-page-active {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}
.ch-page-dots { color: var(--text-tertiary); padding: 0 6px; font-size: 14px; }

/* =====================================================
   TIMELINE MODAL
   ===================================================== */
.ch-timeline-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ch-timeline-modal-overlay.ch-modal-visible { opacity: 1; }

.ch-timeline-modal {
    width: 90%;
    max-width: 680px;
    max-height: 85vh;
    background: linear-gradient(135deg, #fff, #fafbff);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.25), 0 0 0 1px rgba(99,102,241,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(30px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ch-modal-visible .ch-timeline-modal { transform: translateY(0) scale(1); }

.ch-timeline-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 28px 16px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.ch-timeline-modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: rgba(212, 175, 55, 0.95);
    margin: 0;
    background: none;
    -webkit-text-fill-color: unset;
}
.ch-timeline-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-top: 4px;
}
.ch-timeline-close {
    background: none;
    border: none;
    font-size: 28px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s, transform 0.2s;
    padding: 0 4px;
}
.ch-timeline-close:hover { color: #fff; transform: scale(1.15); }

.ch-timeline-body {
    flex: 1;
    overflow-y: auto;
    padding: 28px;
}
.ch-timeline-body::-webkit-scrollbar { width: 5px; }
.ch-timeline-body::-webkit-scrollbar-track { background: transparent; }
.ch-timeline-body::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); border-radius: 3px; }

/* Loading */
.ch-timeline-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
    gap: 16px;
}
.ch-timeline-spinner {
    width: 36px; height: 36px;
    border: 3px solid rgba(99,102,241,0.15);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: chSpin 0.8s linear infinite;
}

/* Timeline items */
.ch-timeline-wrapper { padding-left: 8px; }

.ch-tl-item {
    display: flex;
    gap: 18px;
    position: relative;
}

@keyframes chTlFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.ch-tl-animate { animation: chTlFadeIn 0.4s ease both; }

.ch-tl-dot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 44px;
}
.ch-tl-dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ch-tl-dot:hover { transform: scale(1.15); }
.ch-tl-dot-icon { font-size: 16px; }

.ch-tl-dot.ch-event-legal {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
    box-shadow: 0 3px 12px rgba(245, 158, 11, 0.25);
}
.ch-tl-dot.ch-event-movement {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 2px solid #3b82f6;
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.25);
}
.ch-tl-dot.ch-event-assigned {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    border: 2px solid #8b5cf6;
    box-shadow: 0 3px 12px rgba(139, 92, 246, 0.25);
}
.ch-tl-dot.ch-event-sync {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 2px solid #10b981;
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.25);
}
.ch-tl-dot.ch-event-update {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    border: 2px solid #0ea5e9;
    box-shadow: 0 3px 12px rgba(14, 165, 233, 0.25);
}

.ch-tl-line {
    width: 2px;
    flex: 1;
    min-height: 24px;
    background: linear-gradient(180deg, var(--border-color) 0%, rgba(229,231,235,0.3) 100%);
    margin: 4px 0;
}

.ch-tl-content {
    flex: 1;
    padding-bottom: 28px;
    min-width: 0;
}
.ch-tl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.ch-tl-date {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.ch-tl-values {
    background: rgba(249, 250, 251, 0.8);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 10px;
    padding: 12px 16px;
}
.ch-tl-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.ch-tl-value-row + .ch-tl-value-row { border-top: 1px dashed rgba(0,0,0,0.06); padding-top: 8px; }
.ch-tl-label {
    font-size: 11.5px;
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 65px;
}

/* =====================================================
   MODERN CUSTOM TOOLTIP — Truncated Text Tooltip
   ===================================================== */
.modern-custom-tooltip {
    position: fixed;
    z-index: 999999;
    max-width: 420px;
    padding: 10px 16px;
    background: rgba(15, 23, 42, 0.95);
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.2s;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    letter-spacing: 0.01em;
}

.modern-custom-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Arrow pointing down (tooltip above element) */
.modern-custom-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: rgba(15, 23, 42, 0.95);
    border-radius: 0 0 3px 0;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
}

/* Arrow pointing up (tooltip below element) */
.modern-custom-tooltip.bottom-arrow::after {
    bottom: auto;
    top: -6px;
    transform: translateX(-50%) rotate(-135deg);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.08);
}