/* Hemordna designsystem. Värden och regler: docs/DESIGN.md */

:root {
    --color-primary: #4E9D74;
    --color-primary-strong: #3C7E5B;
    --color-primary-soft: #E8F3EC;
    --color-secondary: #E5DAC8;
    --color-secondary-soft: #F5EFE5;
    --color-accent: #5B8CC4;
    --color-accent-soft: #E9F0F8;
    --color-warning: #E07A5F;
    --color-bg: #FBFAF7;
    --color-surface: #FFFFFF;
    --color-text: #2C3330;
    --color-text-soft: #6B7570;
    --color-border: #E6E4DE;
    --color-brand: #3F6191;

    --radius-card: 12px;
    --radius-control: 10px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgba(44, 51, 48, .06);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Scaled by the "Stor text" presentation mode. */
    --font-size-base: 15px;

    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Presentation mode: larger text. Individual preference, never a household setting. */
:root[data-text-size="large"] {
    --font-size-base: 19px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.25;
    font-weight: 600;
}

h1 { font-size: calc(var(--font-size-base) * 1.9); }
h2 { font-size: calc(var(--font-size-base) * 1.2); }

a {
    color: var(--color-primary-strong);
}

/* Focus is always visible - never removed. */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Surfaces ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
}

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

.small {
    font-size: calc(var(--font-size-base) * .87);
}

/* ---------- Controls ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-5);
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-primary-strong);
}

.btn-secondary {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--color-secondary-soft);
}

.btn:disabled {
    opacity: .55;
    cursor: default;
}

.btn-block {
    width: 100%;
}

.field {
    display: block;
    margin-bottom: var(--space-4);
}

.field > span {
    display: block;
    margin-bottom: var(--space-2);
    font-size: calc(var(--font-size-base) * .87);
    color: var(--color-text-soft);
}

.field input,
.field select {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    font: inherit;
    color: inherit;
}

.field-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.field-check input {
    width: auto;
    min-height: 0;
}

/* A row of qualitative choices (Ingen/Lite/Lagom/Gott om tid) standing in for a minute count -
   see Hemordna.Client.Support.TimeLevel for why nothing in the app asks for a number instead. */
.level-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.level-picker .btn {
    flex: 1 1 auto;
    padding: 0 var(--space-3);
    min-height: 40px;
}

.more-options summary {
    cursor: pointer;
    color: var(--color-text-soft);
    font-size: calc(var(--font-size-base) * .9);
    padding: var(--space-2) 0;
    margin-bottom: var(--space-2);
}

/* A simple, read-only list of things - areas, tasks, members. "Min dag" has its own richer,
   interactive task list scoped to that component; this is the plain version other pages share. */
.list {
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    overflow: hidden;
}

.list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

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

.list-name {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.list-meta {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.chip {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-secondary-soft);
    color: var(--color-text-soft);
    font-size: calc(var(--font-size-base) * .8);
    white-space: nowrap;
}

/* Never the only carrier of meaning - always paired with text. */
.notice {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--color-accent-soft);
    color: var(--color-text);
    font-size: calc(var(--font-size-base) * .9);
}

.notice-problem {
    background: #FBEBE6;
}

/* ---------- Boot and error states ---------- */

.app-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 100vh;
    color: var(--color-brand);
    font-weight: 600;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-3) var(--space-4);
    background: var(--color-secondary-soft);
    border-top: 1px solid var(--color-secondary);
    box-shadow: 0 -1px 2px rgba(44, 51, 48, .08);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}