/* IMSBooking komponent-lag. Bygger kun paa design-tokens.css. Ingen Bootstrap. */

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

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

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}
.table th { width: 180px; color: var(--color-text-muted); font-weight: var(--font-weight-medium); }

.pill {
    display: inline-block;
    background: var(--color-info-bg);
    color: var(--color-info);
    border-radius: var(--radius-pill);
    padding: 2px var(--space-2);
    margin: 0 var(--space-1) var(--space-1) 0;
}

.btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-brand-navy); color: var(--color-text-inverse); }
.btn-primary:hover { background: var(--color-brand-navy-hover); color: var(--color-text-inverse); }
.btn-light { background: var(--color-card); color: var(--color-brand-navy); }

/* Centrerede sider: signin, access-denied, fejl, senere kundeportal-kvitteringer */
.center-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: linear-gradient(160deg, var(--color-brand-navy) 0%, var(--color-brand-navy-active) 100%);
    color: var(--color-text-inverse);
}
.center-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: var(--space-7) var(--space-6);
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.center-card h1 { color: var(--color-text-inverse); font-weight: var(--font-weight-medium); margin-bottom: var(--space-3); }
.center-card p { color: rgba(255, 255, 255, 0.75); }
.center-card .btn { margin-top: var(--space-4); }
.center-logo { height: 36px; margin-bottom: var(--space-5); }

.dev-form { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.dev-form input { padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); font: inherit; }
.dev-warning { color: var(--color-warning) !important; font-size: var(--font-size-xs); margin-top: var(--space-3); }

/* --- Projekter --- */
.page-header-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); }
.breadcrumb { display: inline-block; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }

.card-flush { padding: 0; overflow: hidden; }
.card-title { font-size: var(--font-size-lg); margin-bottom: var(--space-3); }

.table-list th { width: auto; background: var(--color-card-alt); }
.table-list tr:last-child td { border-bottom: none; }

.btn-secondary { background: var(--color-card); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-card-alt); color: var(--color-text); }
.btn-danger { background: var(--color-danger); color: var(--color-text-inverse); }
.btn-danger:hover { color: var(--color-text-inverse); filter: brightness(0.95); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.form-card { max-width: 820px; }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field > span { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); }
.field input, .field textarea, .live-confirm input {
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-card);
}
.field input:disabled, .field textarea:disabled { background: var(--color-card-alt); color: var(--color-text-muted); }
.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.form-error { color: var(--color-danger); background: var(--color-danger-bg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
.form-ok { color: var(--color-success); background: var(--color-success-bg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }

.lifecycle-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.live-confirm { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; padding: var(--space-3); border: 1px solid var(--color-danger); border-radius: var(--radius-md); background: var(--color-danger-bg); }

.status-pill { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.status-draft { background: var(--color-card-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.status-test { background: var(--color-warning-bg); color: var(--color-warning); }
.status-live { background: var(--color-success-bg); color: var(--color-success); }
.status-closed { background: var(--color-border); color: var(--color-text-muted); }

.banner { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: var(--font-size-sm); }
.banner-test { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning); }
.banner-closed { background: var(--color-card-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* --- Kunder og import --- */
.nav-cards { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.nav-card {
    display: flex; flex-direction: column; gap: var(--space-1);
    min-width: 220px; padding: var(--space-4);
    background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); color: var(--color-text);
}
.nav-card:hover { box-shadow: var(--shadow-card-hover); text-decoration: none; color: var(--color-text); }
.nav-card span { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.btn-sm { padding: 2px var(--space-3); font-size: var(--font-size-sm); }
.input-sm { font: inherit; width: 90px; padding: 2px var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }
.row-actions { white-space: nowrap; text-align: right; }
.checkbox { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); }
.stat { display: flex; flex-direction: column; min-width: 90px; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.stat span { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text); }
.stat-new span { color: var(--color-success); }
.stat-upd span { color: var(--color-info); }
.stat-err span { color: var(--color-danger); }

.filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.row-error td { background: var(--color-danger-bg); }
.row-duplicate td { color: var(--color-text-muted); }
.change { font-size: var(--font-size-xs); color: var(--color-info); }
.change-kept { color: var(--color-warning); }

/* --- Kalender --- */
.month-nav { display: flex; align-items: center; gap: var(--space-3); text-transform: capitalize; }
.open-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.open-range label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); margin: 0; }
.open-range input[type=date] { font: inherit; padding: 2px var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }

.calendar-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .calendar-layout { grid-template-columns: 1fr; } }

.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.month-head { text-align: center; font-size: var(--font-size-xs); color: var(--color-text-muted); padding: var(--space-1) 0; }
.month-cell {
    min-height: 78px; padding: var(--space-2);
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-card-alt); font: inherit; text-align: left; cursor: pointer;
}
.month-empty { background: transparent; border: none; cursor: default; }
.month-date { font-weight: var(--font-weight-semibold); }
.month-cap { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.month-cust { font-size: var(--font-size-xs); color: var(--color-info); }
.month-open { background: var(--color-card); border-color: var(--color-success); }
.month-full { background: var(--color-warning-bg); border-color: var(--color-warning); }
.month-over { background: var(--color-danger-bg); border-color: var(--color-danger); }
.month-closed { color: var(--color-text-faint); }
.month-cell.selected { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.day-panel h3 { text-transform: capitalize; }
.day-panel hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-4) 0; }
.badge-danger { display: inline-block; margin-left: var(--space-2); padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--color-danger); color: var(--color-text-inverse); font-size: var(--font-size-xs); }
.ack { color: var(--color-danger); }

/* --- Mail og invitationer --- */
.bulk-send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.bulk-send .checkbox { margin: 0; }
.preview-card .table th { width: 160px; }
.mail-frame { width: 100%; min-height: 420px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; margin-top: var(--space-3); }
.input-wide { font: inherit; min-width: 280px; padding: 2px var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); }

/* --- Kundeportal --- */
.portal { min-height: 100vh; background: var(--color-bg); }
.portal-header { background: var(--color-brand-navy); padding: var(--space-4) var(--space-5); }
.portal-logo { height: 28px; display: block; }
.portal-main { max-width: 760px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-7); }
.portal-card h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-3); }
.portal-card h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-3); }
.portal-card h3 { font-size: var(--font-size-lg); margin: var(--space-5) 0 var(--space-2); }
.portal-customer { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--space-1); }
.portal-lead { font-size: var(--font-size-lg); }
.portal-text { white-space: pre-line; }
.portal-facts { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); }
.portal-facts dt { color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.portal-facts dd { margin: 0; }
@media (max-width: 600px) { .portal-facts { grid-template-columns: 1fr; } .portal-facts dd { margin-bottom: var(--space-2); } }
.portal-inline { margin: var(--space-3) 0; }
.portal-otp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-4); }
.portal-otp .field { margin: 0; }
.portal-otp input { font-size: var(--font-size-xl); letter-spacing: 4px; width: 180px; }
.portal-form { margin-top: var(--space-3); }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--space-4); }
.portal-booked { font-size: var(--font-size-lg); }
.portal-days { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.portal-month { border: none; padding: 0; margin: 0 0 var(--space-4); }
.portal-month legend { font-weight: var(--font-weight-semibold); text-transform: capitalize; margin-bottom: var(--space-2); }
.portal-dates { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.portal-date { position: relative; cursor: pointer; }
.portal-date input { position: absolute; opacity: 0; pointer-events: none; }
.portal-date span { display: block; }
.portal-date-day { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: capitalize; }
.portal-date-num { font-weight: var(--font-weight-semibold); }
.portal-date { min-width: 110px; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-card); }
.portal-date:has(input:checked) { border-color: var(--color-brand-navy); background: var(--color-info-bg); outline: 2px solid var(--color-brand-navy); }
.portal-date:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }