: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; color: var(--color-text); }
/* Helper colours come from /assets/colors.css as .shift--color-<n>; keep every other .shift rule at the same specificity so they win. */
.shift__time { display: block; font-weight: 600; white-space: nowrap; }
.shift__helper { display: block; }
.shift__helper--none { color: var(--color-muted); font-style: italic; }
/* Flags sit on a light badge so they stay readable on any helper colour. */
.shift__flag { display: inline-block; margin: 0.15rem 0.25rem 0 0; padding: 0 0.3rem; border-radius: 3px; background: rgba(255, 255, 255, 0.9); color: var(--color-text); 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; 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__warning { margin: 0 0 1rem; padding: 0.75rem; border-radius: 6px; background: #fff4e5; color: #7a4100; font-size: 0.95rem; }
.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; }

/* Månedsstatus (månedsjusterede bevillinger) */
.month-status { margin-top: 1.25rem; }
.month-status__title { margin: 0 0 0.5rem; font-size: 1.05rem; }
.month-status__type { display: block; font-size: 0.9rem; font-weight: 400; color: var(--color-muted); }
.month-status__table { border-collapse: collapse; width: 100%; max-width: 48rem; background: var(--color-card); font-size: 0.9rem; }
.month-status__table th, .month-status__table td { border: 1px solid var(--color-border); padding: 0.35rem 0.6rem; text-align: left; }
.month-status__table thead th { background: var(--color-bg); text-align: center; }
.month-status__table tbody th { font-weight: 400; }
.month-status__table .num { text-align: right; font-variant-numeric: tabular-nums; min-width: 6rem; }
.month-status__current { background: #f3f8fc; }
.month-status__emphasis th, .month-status__emphasis td { font-weight: 600; }
.month-status__positive { color: #1e5631; }

/* Typetimer under ugeplanen */
.typehours { margin-top: 1.25rem; }
.typehours__title { margin: 0 0 0.5rem; font-size: 1.05rem; }
.typehours__table { border-collapse: collapse; width: 100%; background: var(--color-card); font-size: 0.85rem; }
.typehours__table th, .typehours__table td { border: 1px solid var(--color-border); padding: 0.35rem 0.5rem; text-align: left; white-space: nowrap; }
.typehours__table thead th { background: var(--color-bg); }
.typehours__table tbody th { font-weight: 400; }
.typehours__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.typehours__total { font-weight: 600; }

/* Månedsrapport */
.report__old th, .report__old td { color: var(--color-muted); }
.report__current th, .report__current td { font-weight: 600; background: #f3f8fc; }
.report__lost th, .report__lost td { color: var(--color-alert-text); font-weight: 600; }
@media print {
    .topbar, .no-print, .plan-nav { display: none !important; }
    body { background: #fff; }
    .page { max-width: none; padding: 0; }
    .card { border: 0; padding: 0; }
}

/* Registreringer på en booket vagt: faner, tabel og tilføjelsesformular */
.visually-hidden { position: absolute; left: -9999px; }
.tabs { display: flex; gap: 0.25rem; margin: 0 0 1rem; border-bottom: 1px solid var(--color-border); }
.tabs a { padding: 0.5rem 0.9rem; color: var(--color-primary); font-weight: 600; text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--color-text); background: var(--color-card); border-color: var(--color-border); }
.tabs__count { font-weight: 400; color: var(--color-muted); }
.shift-summary { margin: 0 0 1rem; padding: 0.5rem 0.75rem; background: var(--color-bg); border-radius: 6px; }
.regs { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.regs th, .regs td { border-bottom: 1px solid var(--color-border); padding: 0.45rem 0.4rem; text-align: left; vertical-align: middle; }
.regs thead th { font-size: 0.85rem; color: var(--color-muted); font-weight: 600; }
.regs .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.regs__caption { text-align: left; margin-bottom: 0.25rem; font-weight: 600; }
.regs__type small { display: block; color: var(--color-muted); }
.regs tfoot th, .regs tfoot td { font-weight: 600; border-bottom: 0; }
.regs form { margin: 0; }
.button--danger { background: #fff; color: var(--color-alert-text); border: 1px solid var(--color-alert-text); }
.button--danger:hover { background: var(--color-alert-bg); }
.reg-add { margin-top: 1.25rem; border: 1px solid var(--color-border); border-radius: 6px; padding: 0.75rem; }
.reg-add > summary { cursor: pointer; font-weight: 600; }
.reg-add .form { margin-top: 0.75rem; }
.reg-preview { margin: 0; padding: 0.4rem 0.6rem; border-radius: 6px; background: #f3f8fc; color: var(--color-text); font-size: 0.9rem; }
.reg-empty { margin: 0 0 1rem; color: var(--color-muted); }
.reg-locked { margin: 0 0 1rem; padding: 0.5rem 0.75rem; border-radius: 6px; background: #fff7d6; }
.reg-close { margin-top: 1rem; }
@media (max-width: 30rem) {
    .regs thead { position: absolute; left: -9999px; }
    .regs, .regs tbody, .regs tr, .regs td, .regs tfoot, .regs th { display: block; }
    .regs tr { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; }
    .regs td, .regs th { border: 0; padding: 0.1rem 0; }
    .regs td.num { text-align: left; }
    .regs td.regs__del { grid-row: 1 / span 3; grid-column: 2; align-self: center; }
}