.input,
textarea,
select {
    width: 100%;
}

html {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background-image:
        radial-gradient(circle at top, color-mix(in srgb, hsl(var(--p)) 16%, transparent) 0, transparent 32rem),
        linear-gradient(to bottom, hsl(var(--b2)), hsl(var(--b3)));
    background-attachment: fixed;
    overflow-x: hidden;
}

.surface-panel {
    backdrop-filter: blur(18px);
    background-color: color-mix(in srgb, hsl(var(--b1)) 88%, transparent);
    border: 1px solid color-mix(in srgb, hsl(var(--bc)) 12%, transparent);
    box-shadow: 0 20px 45px color-mix(in srgb, black 10%, transparent);
}

html[data-theme="dark"] .surface-panel {
    background-color: color-mix(in srgb, hsl(var(--b1)) 82%, transparent);
    border-color: color-mix(in srgb, white 10%, transparent);
    box-shadow: 0 28px 60px color-mix(in srgb, black 42%, transparent);
}

.surface-soft {
    background-color: color-mix(in srgb, hsl(var(--b2)) 72%, transparent);
    border: 1px solid color-mix(in srgb, hsl(var(--bc)) 10%, transparent);
}

html[data-theme="dark"] .surface-soft {
    background-color: color-mix(in srgb, hsl(var(--b2)) 55%, transparent);
    border-color: color-mix(in srgb, white 8%, transparent);
}

.safe-wrap {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.card.surface-panel,
.menu.surface-panel,
.dropdown-content.surface-panel {
    border-radius: 1.5rem;
}

.alert {
    border: 1px solid color-mix(in srgb, hsl(var(--bc)) 10%, transparent);
    box-shadow: 0 16px 30px color-mix(in srgb, black 8%, transparent);
}

.input,
.textarea,
.select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"] {
    background-color: color-mix(in srgb, hsl(var(--b1)) 90%, transparent);
    border-color: color-mix(in srgb, hsl(var(--bc)) 15%, transparent);
    color: hsl(var(--bc));
}

.input:focus,
.textarea:focus,
.select:focus,
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus {
    outline: 2px solid color-mix(in srgb, hsl(var(--p)) 35%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, hsl(var(--p)) 45%, transparent);
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="url"] {
    background-color: color-mix(in srgb, hsl(var(--b2)) 68%, transparent);
    border-color: color-mix(in srgb, white 10%, transparent);
}

.leaflet-container,
.leaflet-control-zoom a,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: hsl(var(--b1));
    color: hsl(var(--bc));
}

.leaflet-container {
    border-radius: 1rem;
}

.leaflet-control-zoom a {
    border-bottom-color: color-mix(in srgb, hsl(var(--bc)) 12%, transparent);
}

.leaflet-bar a,
.leaflet-bar a:hover {
    background: hsl(var(--b1));
    color: hsl(var(--bc));
    border-bottom-color: color-mix(in srgb, hsl(var(--bc)) 12%, transparent);
}

#toast-container > .toast {
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, hsl(var(--bc)) 10%, transparent);
    box-shadow: 0 18px 40px color-mix(in srgb, black 20%, transparent);
    backdrop-filter: blur(18px);
    background-color: color-mix(in srgb, hsl(var(--b1)) 88%, transparent);
    color: hsl(var(--bc));
}

html[data-theme="dark"] #toast-container > .toast {
    background-color: color-mix(in srgb, hsl(var(--b1)) 78%, transparent);
    border-color: color-mix(in srgb, white 10%, transparent);
}

#toast-container > .toast-success {
    box-shadow: inset 4px 0 0 hsl(var(--su)), 0 18px 40px color-mix(in srgb, black 20%, transparent);
}

#toast-container > .toast-error {
    box-shadow: inset 4px 0 0 hsl(var(--er)), 0 18px 40px color-mix(in srgb, black 20%, transparent);
}

#toast-container > .toast-warning {
    box-shadow: inset 4px 0 0 hsl(var(--wa)), 0 18px 40px color-mix(in srgb, black 20%, transparent);
}

#toast-container > .toast-info {
    box-shadow: inset 4px 0 0 hsl(var(--in)), 0 18px 40px color-mix(in srgb, black 20%, transparent);
}

#toast-container .toast-close-button {
    color: currentColor;
    opacity: 0.8;
}

@media (max-width: 767px) {
    .navbar .btn {
        min-height: 2.75rem;
    }

    .dropdown-content {
        max-width: calc(100vw - 1.5rem);
    }
}