:root {
    --color-bg: #f4f5f7;
    --color-card: #ffffff;
    --color-text: #1f2933;
    --color-muted: #52606d;
    --color-primary: #1f5f8b;
    --color-primary-dark: #174b6e;
    --color-alert-bg: #fdecea;
    --color-alert-text: #8a1c1c;
    --color-border: #cbd2d9;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}

.page {
    max-width: 24rem;
    margin: 0 auto;
    padding: 2rem 16px;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.5rem;
}

.card__title {
    margin: 0 0 1rem;
    font-size: 1.4rem;
}

.alert {
    margin: 0 0 1rem;
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--color-alert-bg);
    color: var(--color-alert-text);
}

.form { display: flex; flex-direction: column; gap: 0.5rem; }
.form--inline { margin-top: 1rem; }

.form__label { font-weight: 600; }

.form__input {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.button {
    margin-top: 0.75rem;
    padding: 0.7rem 1rem;
    font-size: 1rem;
    color: #fff;
    background: var(--color-primary);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.button:hover { background: var(--color-primary-dark); }

.button--secondary { background: var(--color-muted); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

.debug { white-space: pre-wrap; font-size: 0.85rem; overflow-x: auto; }

/* --- Arbejdsplan --- */
.page--wide { max-width: 80rem; }

.topbar { background: var(--color-card); border-bottom: 1px solid var(--color-border); }
.topbar__nav { max-width: 80rem; margin: 0 auto; padding: 0.5rem 16px; display: flex; gap: 1rem; align-items: center; }
.topbar__nav a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.topbar__user { margin-left: auto; color: var(--color-muted); }
.topbar__logout { margin-left: 0; }
.topbar__password { font-weight: 400 !important; font-size: 0.9rem; }

.button--small { margin-top: 0; padding: 0.35rem 0.7rem; font-size: 0.9rem; }

.plan-nav { margin-bottom: 1rem; }
.plan-nav__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.plan-nav__title { margin: 0 0 0 0.5rem; font-size: 1.3rem; }
.plan-nav__link { margin-left: 0.5rem; }
.form__input--short { width: auto; padding: 0.35rem 0.5rem; font-size: 0.9rem; }

.plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.plan { border-collapse: collapse; width: 100%; background: var(--color-card); font-size: 0.85rem; }
.plan th, .plan td { border: 1px solid var(--color-border); vertical-align: top; }
.plan__day, .plan__cell { min-width: 7rem; }
.plan__day { padding: 0.4rem; text-align: left; }
.plan__day a { color: var(--color-text); text-decoration: none; }
.plan__day--today { background: #fff7d6; }
.plan__corner, .plan__rowhead { width: 6rem; padding: 0.4rem; text-align: left; background: var(--color-bg); font-weight: 600; }
.plan__cell { padding: 0.25rem; }
.plan__sum { padding: 0.4rem; text-align: right; font-variant-numeric: tabular-nums; }
.plan__daynumber { display: block; text-align: right; color: var(--color-muted); font-size: 0.8rem; }
.day--outside { background: var(--color-bg); color: var(--color-muted); }

.shift { margin: 0 0 0.25rem; padding: 0.25rem 0.35rem; border-radius: 4px; border: 1px solid var(--color-border); border-bottom-width: 4px; background: #eef3f8; }
.shift__time { display: block; font-weight: 600; white-space: nowrap; }
.shift__helper { display: block; }
.shift__helper--none { color: var(--color-muted); font-style: italic; }
.shift__flag { display: inline-block; margin-right: 0.25rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.shift--cancelled { text-decoration: line-through; opacity: 0.7; }
.shift--ill .shift__flag { color: var(--color-alert-text); }
.shift--conflict { outline: 2px solid var(--color-alert-text); }
.shift--status-none { border-bottom-color: var(--color-border); }
.shift--status-consultant { border-bottom-color: #e3b505; }
.shift--status-lines { border-bottom-color: #2e9e4f; }
.shift--status-exported { border-bottom-color: #8a94a0; }

.balance--negative { color: var(--color-alert-text); font-weight: 700; }
.plan-week-sum { margin-top: 0.75rem; color: var(--color-muted); }

/* --- Bevilling --- */
.card--wide { max-width: none; }
.card__subtitle { margin: 1.25rem 0 0.5rem; font-size: 1.1rem; }
.grant { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.grant th, .grant td { border-bottom: 1px solid var(--color-border); padding: 0.4rem; text-align: left; }
.grant .num { text-align: right; font-variant-numeric: tabular-nums; }

.muted { color: var(--color-muted); font-size: 0.9rem; }

/* --- Planlægning --- */
.plan-actions { margin: 0 0 0.75rem; display: flex; gap: 0.5rem; }
.plan__add { display: block; margin-top: 0.25rem; text-align: center; color: var(--color-muted); text-decoration: none; border: 1px dashed var(--color-border); border-radius: 4px; }
.plan__add:hover { color: var(--color-primary); border-color: var(--color-primary); }
a.shift { display: block; color: inherit; text-decoration: none; }
a.shift:hover { outline: 2px solid var(--color-primary); }
.notice { padding: 0.5rem 0.75rem; border-radius: 6px; background: #e6f4ea; color: #1e5631; }
.violations { margin: 0 0 1rem; padding: 0.75rem 0.75rem 0.75rem 1.75rem; border-radius: 6px; background: var(--color-alert-bg); color: var(--color-alert-text); }
.violations[hidden] { display: none; }
.card--form { max-width: 32rem; }
.form__row { display: flex; gap: 0.75rem; }
.form__row > div { flex: 1; }
.form__hint { margin: 0.25rem 0 0.5rem; color: var(--color-muted); font-size: 0.9rem; }
.form__fieldset { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.5rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.form__check { display: block; }
.form__actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.form__more { margin-top: 1rem; }
.dialog { border: 1px solid var(--color-border); border-radius: 8px; padding: 0; max-width: 34rem; width: calc(100% - 32px); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.dialog .card { border: 0; }

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

/* Approval page (Godkend uge) */
.approval th, .approval td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--color-border, #ddd); text-align: left; vertical-align: top; }
.approval__num { text-align: right; }
.approval__helper { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; }
.approval__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.approval__actions .form--inline { margin: 0; }
.approval__request { color: var(--color-muted); }
.approval__state--lines, .approval__state--exported { color: #1e5631; }
.approval__state--partial, .approval__state--consultant { color: #8a6d00; }
.redtext { color: #a12020; }
.error { padding: 0.5rem 0.75rem; border-radius: 6px; background: #fbe9e9; color: #a12020; }