/*
 * Grundstilar och delade komponenter.
 * Sidornas egna filer innehåller bara layout och det som är unikt.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            ellipse 60rem 28rem at 70% -8rem,
            color-mix(in srgb, var(--accent) 9%, transparent),
            transparent
        ),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 650;
    line-height: 1.3;
}

h1 {
    font-size: var(--fs-xl);
}

h2 {
    font-size: var(--fs-lg);
}

h3 {
    font-size: var(--fs);
}

p {
    margin: var(--s-2) 0 0;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.muted {
    color: var(--muted);
}

/* ------------------------------------------------------------
   Etiketter
   ------------------------------------------------------------ */

label,
.eyebrow {
    display: block;
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

label {
    margin: var(--s-4) 0 6px;
}

/* Kryssrutor med text bredvid */
label.check,
label.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text);
    font-size: var(--fs);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Fält
   ------------------------------------------------------------ */

input,
select,
textarea {
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface-1);
    color: var(--text);
    font: inherit;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
    min-height: 96px;
    resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    padding: 0;
    accent-color: var(--accent-strong);
}

input[type="color"] {
    height: 40px;
    padding: 3px;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Knappar
   ------------------------------------------------------------ */

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.08s ease;
}

button:hover,
.button:hover {
    border-color: var(--border-strong);
    background: var(--surface-3);
    text-decoration: none;
}

button:active,
.button:active {
    transform: translateY(1px);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/*
 * Primärknapp: sidans huvudåtgärd.
 * En submit-knapp utan egen klass räknas som primär.
 */
button[type="submit"]:not([class]),
button.primary,
button.booking-v2-submit,
button.profile-save {
    border-color: var(--accent-strong);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent-strong) 88%, white),
            var(--accent-strong)
        );
    color: var(--accent-contrast);
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 14px color-mix(in srgb, var(--accent-strong) 35%, transparent);
}

button[type="submit"]:not([class]):hover:not(:disabled),
button.primary:hover:not(:disabled),
button.booking-v2-submit:hover:not(:disabled),
button.profile-save:hover:not(:disabled) {
    border-color: var(--accent-strong);
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent-strong) 82%, white),
            color-mix(in srgb, var(--accent-strong) 94%, white)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 6px 20px color-mix(in srgb, var(--accent-strong) 48%, transparent);
}

/* Farlig åtgärd: vanlig knapp som blir röd när man pekar på den. */
button.danger:hover:not(:disabled),
.button.danger:hover {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

/* Formulärets huvudknapp får luft ovanför. */
form > button[type="submit"]:not([class]) {
    margin-top: var(--s-5);
}

/* ------------------------------------------------------------
   Sida, sidhuvud och kort
   ------------------------------------------------------------ */

.page {
    width: min(var(--page-width, 1100px), calc(100% - 32px));
    margin: 0 auto;
    padding: var(--s-6) 0 64px;
}

.page > header {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
}

/* Accentlinjen under sidhuvudet, som i Kansliet. */
.page > header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 55%;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-line), transparent);
}

.page > header .muted,
.page > header .subtitle {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--fs-sm);
}

.page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* Gemensam menyrad överst på alla inloggade sidor */

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    padding: var(--s-2) 0 var(--s-3);
    font-size: var(--fs-sm);
}

.site-nav a {
    padding: var(--s-1) 0;
    border-bottom: 2px solid transparent;
    color: var(--muted);
}

.site-nav a:hover {
    color: var(--text);
    text-decoration: none;
}

.site-nav a.current {
    border-bottom-color: var(--accent);
    color: var(--text);
}

.page > header a {
    color: var(--muted);
    font-size: var(--fs-sm);
}

.page > header a:hover {
    color: var(--text);
    text-decoration: none;
}

.panel {
    padding: var(--s-5);
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
}

.back {
    display: inline-block;
    margin-bottom: var(--s-4);
    color: var(--muted);
    font-size: var(--fs-sm);
}

.back:hover {
    color: var(--text);
    text-decoration: none;
}

/* ------------------------------------------------------------
   Meddelanden
   ------------------------------------------------------------ */

.message,
.error,
.warning {
    margin-bottom: var(--s-4);
    padding: var(--s-3) 14px;
    border: 1px solid;
    border-radius: var(--r);
    font-size: var(--fs-sm);
}

.message {
    border-color: var(--success-line);
    background: var(--success-soft);
}

.error {
    border-color: var(--danger-line);
    background: var(--danger-soft);
}

.warning {
    border-color: var(--attention-line);
    background: var(--attention-soft);
}

/* ------------------------------------------------------------
   Chip
   ------------------------------------------------------------ */

.chip {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Små skärmar och rörelse
   ------------------------------------------------------------ */

@media (max-width: 760px) {
    /* 16 px hindrar mobilens webbläsare från att zooma in på fältet. */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    .page {
        width: calc(100% - 24px);
        padding-top: var(--s-4);
    }

    .panel {
        padding: var(--s-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* Testmiljön */

.test-banner {
    padding: var(--s-1) var(--s-3);
    background: var(--test-banner);
    color: var(--accent-contrast);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-align: center;
}