/* Portal token aliases (since 05.11.2026).
   Several portal views use variable names that resources/css/app.css never defined
   (e.g. --surface-primary, --text-primary, --radius). Undefined variables render as
   transparent / 0 / inherited, which made active states invisible (resource toggle on
   the server order page) and removed rounded corners. These are aliases onto the
   existing design tokens only - no new colours. Loaded after the Vite CSS in
   layouts/app.blade.php and layouts/guest.blade.php; served as a plain file because
   backend/public/build is not part of the git-based release. */
:root {
    --surface-primary: var(--surface);
    --surface-color: var(--surface);
    --card-bg: var(--surface);
    --bg: var(--surface);
    --bg-secondary: var(--surface-secondary);
    --surface-hover: var(--surface-tertiary);
    --hover-bg: var(--surface-tertiary);
    --text-primary: var(--text);
    --color-text-muted: var(--text-muted);
    --border-color: var(--border);
    --radius: var(--radius-md);
    --info: var(--primary);
    --info-pale: var(--primary-pale);
    --primary-alpha: var(--primary-pale);
    --primary-rgb: 37, 99, 235;
    --danger: var(--error);
    --danger-bg: var(--error-pale);
    --success-bg: var(--success-pale);
    --success-alpha: var(--success-pale);
    --color-success: var(--success);
    --warning-bg: var(--warning-pale);
}

[data-theme="dark"],
.dark {
    --primary-rgb: 59, 130, 246;
}

/* Portal top navigation (05.11.2026): the full row needs ~1800px (admin, measured live),
   but switched to the desktop layout at 769px - below that "Rechnungen", "Admin",
   the theme toggle and the user menu were pushed off-screen and the page scrolled sideways.
   Only the nav is targeted; the generic .hide-mobile/.show-mobile utilities stay untouched. */
@media (min-width: 769px) and (max-width: 1349px) {
    #main-nav .nav-links.hide-mobile,
    #main-nav .nav-right.hide-mobile {
        display: none !important;
    }

    #main-nav .show-mobile,
    #main-nav #mobile-menu-toggle {
        display: flex !important;
    }
}

/* 1350-1799px: compact row - menu text without icons (measured with the admin menu, the widest case) */
@media (min-width: 1350px) and (max-width: 1799px) {
    #main-nav .nav-links.hide-mobile .nav-link-icon {
        display: none;
    }
}

/* The user menu shows the avatar only - the full name pushed the row off-screen even at 1872px */
#main-nav .user-dropdown-trigger > span:not(.avatar) {
    display: none;
}

/* ============================================
   Design refresh 05.11.2026 ("Kombi") - same direction as the public site:
   brand-tinted off-white page, white cards with blue hairlines, glass navigation,
   no white header bar. Light values are scoped to html:not(.dark) so they never
   override the dark tokens; the structure applies to both themes.
   ============================================ */
html:not(.dark) {
    --surface-secondary: #f0f4fa;
    --surface-tertiary: #e8eef8;
    --border: #dfe6f0;
    --hairline: rgba(37, 99, 235, 0.12);
    --hairline-strong: rgba(37, 99, 235, 0.24);
    --nav-glass: rgba(247, 249, 252, 0.72);
}

.dark {
    --hairline: rgba(96, 165, 250, 0.16);
    --hairline-strong: rgba(96, 165, 250, 0.32);
    --nav-glass: rgba(15, 23, 42, 0.72);
}

html:not(.dark) body {
    background: #f7f9fc;
}

#main-nav {
    background: var(--nav-glass);
    -webkit-backdrop-filter: saturate(1.6) blur(16px);
    backdrop-filter: saturate(1.6) blur(16px);
    border-bottom-color: var(--hairline);
}

.page-header {
    background: transparent;
    border-bottom-color: transparent;
}

.card,
.stat-card,
.category-card,
.auth-card {
    border: 1px solid var(--hairline);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.category-card.active {
    border: 2px solid var(--primary);
}

html:not(.dark) .card,
html:not(.dark) .stat-card,
html:not(.dark) .auth-card {
    background: #fff;
}

.dark .card,
.dark .stat-card,
.dark .auth-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.btn-secondary {
    border-color: var(--hairline-strong);
}

/* Brand backdrop at the top of every portal page (same signature as the public site hero):
   soft brand glow + fine dot grid, fading into the page colour after ~420px */
html:not(.dark) body {
    background:
        radial-gradient(1100px 460px at 85% -120px, rgba(37, 99, 235, 0.10), transparent 65%),
        radial-gradient(800px 380px at 0% -80px, rgba(6, 182, 212, 0.07), transparent 60%),
        linear-gradient(to bottom, transparent 0, #f7f9fc 420px),
        radial-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px),
        #f7f9fc;
    background-size: auto, auto, auto, 22px 22px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

.dark body {
    background:
        radial-gradient(1100px 460px at 85% -120px, rgba(59, 130, 246, 0.14), transparent 65%),
        radial-gradient(800px 380px at 0% -80px, rgba(6, 182, 212, 0.06), transparent 60%),
        linear-gradient(to bottom, transparent 0, var(--surface-secondary) 420px),
        radial-gradient(rgba(148, 163, 184, 0.10) 1px, transparent 1px),
        var(--surface-secondary);
    background-size: auto, auto, auto, 22px 22px;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}

/* Selectable option cards on the order pages (servers, hosting, mail, configurator).
   The pages bring their own <style> with 2px grey borders; "html body" outranks those
   single-class rules so the new look applies everywhere. */
html body :is(.category-card, .location-chip, .billing-option, .domain-type-option, .region-option, .stack-option, .arch-option, .location-option, .type-option) {
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

html body .category-card {
    border-radius: 16px;
}

html body :is(.category-card, .location-chip, .billing-option, .domain-type-option, .region-option, .stack-option, .arch-option, .location-option, .type-option):hover {
    border-color: var(--hairline-strong);
    box-shadow: 0 8px 22px -10px rgba(37, 99, 235, 0.25);
}

html body :is(.billing-option, .domain-type-option, .region-option, .stack-option, .arch-option, .location-option, .type-option).active {
    border: 2px solid var(--primary);
    background: var(--primary-pale);
}

html body .category-card.active {
    border: 2px solid var(--primary);
    background: var(--surface);
    box-shadow: 0 10px 28px -14px rgba(37, 99, 235, 0.35);
}

html body .location-chip.active {
    background: var(--primary);
    border-color: var(--primary);
}

html body .resource-toggle {
    background: var(--surface);
    border-color: var(--hairline);
}