*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
}
body { background-color: #f8fafc; color: #1e3a5f; overflow-x: hidden; }
img,
svg,
video,
canvas {
    max-width: 100%;
}
a,
button,
label,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(45, 90, 142, 0.16);
}
.glass-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(30, 58, 95, 0.1);
    min-width: 0;
}
.btn-brand {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    color: #fff;
    transition: all 0.3s ease;
}
.btn-brand:hover {
    box-shadow: 0 0 20px rgba(30, 58, 95, 0.3);
    transform: translateY(-2px);
}
.btn-outline {
    background: transparent;
    border: 2px solid #1e3a5f;
    color: #1e3a5f;
    transition: all 0.3s ease;
}
.btn-outline:hover {
    background: #1e3a5f;
    color: #fff;
}
.text-brand { color: #1e3a5f; }
.text-brand-light { color: #a8d8ea; }
.bg-brand { background-color: #1e3a5f; }
.bg-brand-light { background-color: #a8d8ea; }
.border-brand { border-color: #1e3a5f; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #a8d8ea; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #1e3a5f; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    background-color: #ffffff !important;
    color: #1e3a5f !important;
    border-color: #e2e8f0 !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}
input:not([type="checkbox"]):not([type="radio"])::placeholder, textarea::placeholder {
    color: #94a3b8 !important;
}


/* Redesign CSS Tokens */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(30, 58, 95, 0.06);
    box-shadow: 0 8px 30px 0 rgba(31, 38, 135, 0.03);
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.06);
    border-color: rgba(30, 58, 95, 0.12);
}
@media (hover: none) and (pointer: coarse) {
    nav,
    footer,
    .glass-card,
    .glass-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .glass-card,
    .glass-panel {
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 4px 18px rgba(30, 58, 95, 0.05) !important;
        transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
    }
    .glass-card:hover,
    .btn-brand:hover,
    .btn-outline:hover {
        transform: none !important;
    }
    .animate-bounce,
    .animate-pulse,
    .animate-swing {
        animation: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
.btn-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.75rem;
    border: 1.5px solid rgba(30, 58, 95, 0.15);
    color: rgba(30, 58, 95, 0.7);
    background: #ffffff;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.btn-filter-pill:hover {
    border-color: #2d5a8e;
    color: #1e3a5f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 58, 95, 0.08);
}
.btn-filter-pill.active {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.2);
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-pill-open {
    background-color: #fef9c3;
    color: #713f12;
    border: 1px solid #fef08a;
}
.status-pill-completed {
    background-color: #dcfce7;
    color: #14532d;
    border: 1px solid #bbf7d0;
}
.status-pill-canceled {
    background-color: #fee2e2;
    color: #7f1d1d;
    border: 1px solid #fecaca;
}
.badge-custom {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-neuwagen { background-color: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; }
.badge-gebrauchtwagen { background-color: #fef9c3; color: #713f12; border: 1px solid #fef08a; }
.badge-vfw { background-color: #f3e8ff; color: #581c87; border: 1px solid #e9d5ff; }
.badge-service { background-color: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; }
.badge-lager { background-color: #ffedd5; color: #7c2d12; border: 1px solid #fed7aa; }
.badge-company { background-color: #dbeafe; color: #1e3a8a; border: 1px solid #bfdbfe; }

.unified-table-header {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}
.unified-input {
    width: 100%;
    padding: 0.625rem 1rem 0.625rem 2.75rem;
    font-size: 0.875rem;
    border-radius: 0.75rem !important;
    border: 1.5px solid rgba(30, 58, 95, 0.1) !important;
    background-color: #ffffff !important;
    color: #1e3a5f !important;
    transition: all 0.25s ease-in-out;
    outline: none !important;
}
.unified-input:focus {
    border-color: #2d5a8e !important;
    box-shadow: 0 0 0 4px rgba(45, 90, 142, 0.08) !important;
}
select.unified-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%231e3a5f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 1rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.25em 1.25em !important;
    padding-right: 2.75rem !important;
    padding-left: 2.75rem !important;
}
.kpi-card {
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.06);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
@media (min-width: 640px) {
    .kpi-card {
        padding: 1.5rem;
    }
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(30, 58, 95, 0.06);
    border-color: rgba(30, 58, 95, 0.1);
}
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #1e3a5f, #2d5a8e);
}
.kpi-card-yellow::before {
    background: #d97706;
}
.kpi-card-green::before {
    background: #16a34a;
}
.kpi-card-blue::before {
    background: #2563eb;
}
.kpi-card-gray::before {
    background: #64748b;
}
.kpi-card-red::before {
    background: #dc2626;
}

/* Dark glassmorphism cards for immersive contrast over team photo */
.dark-glass {
    background: rgba(10, 17, 40, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark-glass:hover {
    background: rgba(15, 27, 61, 0.85);
    border-color: rgba(168, 216, 234, 0.25);
    box-shadow: 0 15px 50px 0 rgba(168, 216, 234, 0.1);
    transform: translateY(-4px);
}
.ambient-glow {
    position: relative;
}
.ambient-glow::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(168, 216, 234, 0.4) 0%, rgba(30, 58, 95, 0) 50%, rgba(168, 216, 234, 0.1) 100%);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}
.ambient-glow:hover::after {
    opacity: 1;
}
.premium-glow-card {
    position: relative;
    border: 1px solid rgba(168, 216, 234, 0.2);
    box-shadow: 0 10px 40px 0 rgba(168, 216, 234, 0.05);
}
.premium-glow-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #a8d8ea 0%, #2d5a8e 50%, #1e3a5f 100%);
    border-radius: 0.75rem 0.75rem 0 0;
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.5; }
}
.glow-pulse-slow {
    animation: pulse-glow 8s infinite ease-in-out;
}

/* Automatically convert all glass-cards and light sections to light-glass when light-theme is active */
body.light-theme {
    background-color: #f4f9ff !important;
    color: #1e3a5f !important;
}
body.light-theme .glass-card,
body.light-theme .dark-glass {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(30, 58, 95, 0.1) !important;
    box-shadow: 0 10px 40px rgba(30, 58, 95, 0.04) !important;
    color: #1e3a5f !important;
}
body.light-theme .glass-card:hover,
body.light-theme .dark-glass:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(45, 90, 142, 0.25) !important;
    box-shadow: 0 15px 50px rgba(30, 58, 95, 0.08) !important;
}
body.light-theme .glass-card h1,
body.light-theme .glass-card h2,
body.light-theme .glass-card h3,
body.light-theme .glass-card h4,
body.light-theme .glass-card h5,
body.light-theme .glass-card h6,
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4 {
    color: #1e3a5f !important;
}
body.light-theme .glass-card p,
body.light-theme .glass-card span,
body.light-theme .glass-card li,
body.light-theme .glass-card td,
body.light-theme .glass-card label,
body.light-theme p,
body.light-theme span,
body.light-theme li,
body.light-theme label {
    color: rgba(30, 58, 95, 0.8) !important; /* brand-dark text with clean visibility */
}
body.light-theme .glass-card a:not(.btn-brand):not(.btn-filter-pill):not(.btn-outline):not(.legal-nav-active),
body.light-theme a:not(.btn-brand):not(.btn-filter-pill):not(.btn-outline):not(.legal-nav-active) {
    color: #2d5a8e !important; /* brand-mid */
}
body.light-theme .glass-card a:not(.btn-brand):not(.btn-filter-pill):not(.btn-outline):not(.legal-nav-active):hover,
body.light-theme a:not(.btn-brand):not(.btn-filter-pill):not(.btn-outline):not(.legal-nav-active):hover {
    color: #1e3a5f !important;
    text-decoration: underline;
}
body.light-theme a.legal-nav-link:hover {
    text-decoration: none;
}
body.light-theme a.legal-nav-active,
body.light-theme a.legal-nav-active:hover {
    color: #ffffff !important;
}
body.light-theme input,
body.light-theme select,
body.light-theme textarea {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(30, 58, 95, 0.15) !important;
    color: #1e3a5f !important;
}
body.light-theme input:focus,
body.light-theme select:focus,
body.light-theme textarea:focus {
    border-color: #2d5a8e !important;
    box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.1) !important;
}

/* Intercept text-white and make it brand-dark on light background, EXCEPT inside dark brand elements */
body.light-theme .text-white:not(.btn-brand):not(a.btn-brand):not(.badge-custom):not(.status-pill):not([class*="bg-brand"]):not([class*="bg-red"]):not([class*="bg-green"]) {
    color: #1e3a5f !important;
}

/* Force absolute white text inside all dark brand elements in light theme */
body.light-theme .btn-brand,
body.light-theme .btn-brand *,
body.light-theme .bg-brand-dark,
body.light-theme .bg-brand-dark *,
body.light-theme .bg-brand-mid,
body.light-theme .bg-brand-mid * {
    color: #ffffff !important;
}
body.light-theme .text-brand-light {
    color: #2d5a8e !important;
}
body.light-theme .text-brand-lighter {
    color: #1e3a5f !important;
}
body.light-theme .text-brand-lighter\/45 {
    color: rgba(30, 58, 95, 0.5) !important;
}
body.light-theme .text-brand-lighter\/50 {
    color: rgba(30, 58, 95, 0.6) !important;
}
body.light-theme .text-brand-lighter\/60 {
    color: rgba(30, 58, 95, 0.7) !important;
}
body.light-theme .text-brand-lighter\/70 {
    color: rgba(30, 58, 95, 0.8) !important;
}
body.light-theme .text-brand-lighter\/75 {
    color: rgba(30, 58, 95, 0.8) !important;
}
body.light-theme .text-brand-lighter\/80 {
    color: rgba(30, 58, 95, 0.85) !important;
}
body.light-theme .text-brand-lighter\/85 {
    color: rgba(30, 58, 95, 0.9) !important;
}
body.light-theme .bg-white\/5 {
    background-color: rgba(30, 58, 95, 0.05) !important;
}
body.light-theme .border-white\/5 {
    border-color: rgba(30, 58, 95, 0.08) !important;
}
body.light-theme .border-white\/10 {
    border-color: rgba(30, 58, 95, 0.12) !important;
}
body.light-theme .bg-slate-900\/90 {
    background-color: rgba(255, 255, 255, 0.92) !important;
}
body.light-theme .bg-slate-900\/50 {
    background-color: rgba(255, 255, 255, 0.8) !important;
}
body.light-theme .bg-slate-950\/60 {
    background-color: rgba(255, 255, 255, 0.85) !important;
}
body.light-theme .bg-slate-950\/40 {
    background-color: rgba(255, 255, 255, 0.7) !important;
}
body.light-theme .dashboard-line {
    background: linear-gradient(90deg, rgba(30, 58, 95, 0.04) 0%, rgba(30, 58, 95, 0.01) 100%) !important;
}
body.light-theme .bg-brand-light\/10 {
    background-color: rgba(45, 90, 142, 0.08) !important;
}
body.light-theme .bg-brand-light\/20 {
    background-color: rgba(45, 90, 142, 0.12) !important;
}
body.light-theme .border-brand-light\/20 {
    border-color: rgba(45, 90, 142, 0.2) !important;
}
body.light-theme .border-brand-light\/30 {
    border-color: rgba(45, 90, 142, 0.3) !important;
}

/* Dynamically intercept text gradients to look outstanding in light theme */
body.light-theme .bg-gradient-to-r.from-white {
    background-image: linear-gradient(to right, #1e3a5f 0%, #2d5a8e 50%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
body.light-theme .bg-gradient-to-r.from-brand-light {
    background-image: linear-gradient(to right, #2d5a8e 0%, #1e3a5f 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
body.light-theme .bg-gradient-to-r.from-white.via-brand-lighter {
    background-image: linear-gradient(to right, #1e3a5f 0%, #2d5a8e 50%, #3b82f6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/*
 * Safari/macOS performance path.
 * WebKit has to perform additional compositing passes for every backdrop blur.
 * On long public pages that made normal link navigation appear frozen even
 * though the HTML response arrived in under 200 ms.
 */
html.safari-webkit nav,
html.safari-webkit footer,
html.safari-webkit .glass-card,
html.safari-webkit .glass-panel,
html.safari-webkit .dark-glass,
html.safari-webkit body.light-theme .glass-card,
html.safari-webkit body.light-theme .dark-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.safari-webkit .glass-card,
html.safari-webkit .glass-panel,
html.safari-webkit .dark-glass,
html.safari-webkit body.light-theme .glass-card,
html.safari-webkit body.light-theme .dark-glass {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 4px 18px rgba(30, 58, 95, 0.05) !important;
}
html.safari-webkit .glass-card:hover,
html.safari-webkit .dark-glass:hover,
html.safari-webkit body.light-theme .glass-card:hover,
html.safari-webkit body.light-theme .dark-glass:hover {
    transform: none !important;
    box-shadow: 0 4px 18px rgba(30, 58, 95, 0.05) !important;
}
html.safari-webkit #global-premium-bg > div:not(:first-child) {
    display: none !important;
}
html.safari-webkit #global-premium-bg > div:first-child {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 52%, #eaf4ff 100%) !important;
}
html.safari-webkit [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.safari-webkit [class*="blur-"],
html.safari-webkit .glow-pulse-slow,
html.safari-webkit .animate-bounce,
html.safari-webkit .animate-pulse,
html.safari-webkit .animate-swing {
    filter: none !important;
    animation: none !important;
}

@media (hover: none) and (pointer: coarse) {
    nav,
    footer,
    .glass-card,
    .glass-panel,
    .dark-glass,
    body.light-theme .glass-card,
    body.light-theme .dark-glass {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .dark-glass,
    body.light-theme .glass-card,
    body.light-theme .dark-glass {
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 4px 18px rgba(30, 58, 95, 0.05) !important;
    }
    .dark-glass:hover,
    body.light-theme .glass-card:hover,
    body.light-theme .dark-glass:hover {
        transform: none !important;
        box-shadow: 0 4px 18px rgba(30, 58, 95, 0.05) !important;
    }
    #global-premium-bg > div:not(:first-child) {
        display: none !important;
    }
    #global-premium-bg > div:first-child {
        background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 52%, #eaf4ff 100%) !important;
    }
    [class*="blur-"],
    .glow-pulse-slow,
    .animate-bounce,
    .animate-pulse,
    .animate-swing {
        filter: none !important;
        animation: none !important;
    }
}