:root {
    --navy: #08182f;
    --navy-2: #102844;
    --gold: #c9a45c;
    --gold-soft: #e0c481;
    --ivory: #f7f3ea;
    --white: #fff;
    --ink: #142237;
    --muted: #6e7785;
    --line: #e2e4e8;
    --danger: #9d3232;
    --success: #27644d;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: #f3f4f5;
    font-family: var(--sans);
    font-size: 0.94rem;
    line-height: 1.55;
}

body,
button,
input,
textarea,
select { font: 400 0.94rem/1.5 var(--sans); }

a { color: inherit; }

.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    color: rgba(255,255,255,.78);
    background:
        radial-gradient(circle at 20% 15%, rgba(201,164,92,.16), transparent 30%),
        linear-gradient(145deg, #061326, var(--navy-2));
}

.login-card {
    width: min(100%, 28rem);
    padding: clamp(2rem, 6vw, 3.5rem);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(224,196,129,.24);
    box-shadow: 0 30px 80px rgba(0,0,0,.3);
}

.login-card h1 {
    margin: .5rem 0 .25rem;
    color: var(--white);
    font: 500 3rem/1 var(--serif);
}

.login-card > p { margin: 0 0 1.8rem; }

.admin-mark,
.admin-brand span {
    display: grid;
    place-items: center;
    width: 3.5rem;
    aspect-ratio: 1;
    color: var(--gold-soft);
    font: 500 1rem/1 var(--serif);
    letter-spacing: .02em;
    text-decoration: none;
    border: 1px solid rgba(224,196,129,.5);
    border-radius: 50%;
}

.admin-kicker {
    margin: 0;
    color: #937334;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.login-card .admin-kicker { margin-top: 1.5rem; color: var(--gold-soft); }

.stack-form,
.admin-form { display: grid; gap: 1rem; }

label {
    display: grid;
    gap: .45rem;
    color: #4f5a6b;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .035em;
}

input,
textarea,
select {
    width: 100%;
    padding: .72rem .8rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid #cfd4db;
    border-radius: 5px;
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,164,92,.14);
}

.login-card input { color: var(--white); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.login-card label { color: rgba(255,255,255,.72); }

.admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 2.85rem;
    padding: 0 1.2rem;
    color: var(--white);
    font-weight: 600;
    background: var(--navy-2);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.login-card .admin-button { width: 100%; color: var(--navy); background: var(--gold-soft); }
.admin-button--small { min-height: 2.4rem; padding-inline: .9rem; font-size: .8rem; }
.back-link { display: block; margin-top: 1.4rem; color: rgba(255,255,255,.65); font-size: .8rem; text-align: center; text-decoration: none; }

.admin-page { display: grid; grid-template-columns: 17rem 1fr; min-height: 100vh; }

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: 17rem;
    padding: 1.6rem;
    color: rgba(255,255,255,.72);
    background: var(--navy);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 2.5rem;
    color: var(--white);
    text-decoration: none;
}

.admin-brand span { width: 2.8rem; }
.admin-brand strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.admin-sidebar nav { display: grid; gap: .25rem; }
.admin-sidebar nav a,
.sidebar-bottom a {
    padding: .72rem .8rem;
    text-decoration: none;
    border-left: 2px solid transparent;
}

.admin-sidebar nav a:hover,
.admin-sidebar nav a[aria-current="page"] {
    color: var(--white);
    background: rgba(255,255,255,.06);
    border-left-color: var(--gold);
}

.sidebar-bottom { display: grid; gap: .2rem; margin-top: auto; font-size: .8rem; }
.admin-main { grid-column: 2; min-width: 0; padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 5rem; }

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.admin-header h1 {
    margin: .3rem 0 0;
    color: var(--navy);
    font: 600 clamp(2.3rem, 4vw, 3.4rem)/1 var(--serif);
}

.admin-user { display: flex; align-items: center; gap: .75rem; }
.admin-user > span { display: grid; place-items: center; width: 2.6rem; aspect-ratio: 1; color: var(--navy); font-weight: 600; background: var(--gold-soft); border-radius: 50%; }
.admin-user strong,
.admin-user small { display: block; }
.admin-user small { color: var(--muted); }

.notice {
    max-width: 1200px;
    margin: 0 auto 1.2rem;
    padding: .9rem 1rem;
    border: 1px solid;
    border-radius: 5px;
}

.notice--success { color: var(--success); background: #eef8f3; border-color: #b9dcca; }
.notice--error { color: var(--danger); background: #fff2f2; border-color: #e7baba; }
.login-card .notice { color: #ffd1d1; background: rgba(157,50,50,.2); border-color: rgba(255,209,209,.25); }

.admin-card,
.stat-grid { max-width: 1200px; margin-inline: auto; }

.admin-card {
    margin-bottom: 1.25rem;
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(18,31,51,.05);
}

.admin-card h2,
.admin-card h3 { margin: 0; color: var(--navy); font-family: var(--serif); font-weight: 600; }
.admin-card h2 { font-size: 2rem; line-height: 1; }
.admin-card h3 { font-size: 1.5rem; }
.admin-card p { color: var(--muted); }
.admin-card hr { width: 100%; margin: 1rem 0; border: 0; border-top: 1px solid var(--line); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.stat-card { display: grid; gap: .3rem; min-height: 8rem; padding: 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: 8px; }
.stat-card strong { color: var(--navy); font: 600 3rem/1 var(--serif); }
.stat-card span { color: var(--muted); font-size: .8rem; }

.welcome-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; }
.welcome-card > div:first-child { max-width: 40rem; }
.quick-links { display: grid; gap: .5rem; min-width: 14rem; }
.quick-links a,
.add-row-form button { padding: .75rem .9rem; color: var(--navy); font-weight: 600; text-decoration: none; background: var(--ivory); border: 1px solid #e3dac7; border-radius: 4px; }

.card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.card-heading p { margin: .5rem 0 0; }
.form-grid { display: grid; gap: 1rem; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.language-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.language-panels fieldset { display: grid; gap: 1rem; margin: 0; padding: 1.2rem; border: 1px solid var(--line); border-radius: 6px; }
.language-panels legend { padding: 0 .45rem; color: var(--navy); font-family: var(--serif); font-size: 1.25rem; font-weight: 600; }
.color-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.color-input { display: flex; gap: .4rem; }
.color-input input[type="color"] { flex: 0 0 3rem; height: 2.9rem; padding: .2rem; }
.check-label { display: flex; align-items: center; align-self: end; min-height: 2.8rem; }
.check-label input { width: auto; }

.page-editor { padding: 0; overflow: hidden; }
.compact-form { padding: 1.5rem; background: #fbfbfa; border-bottom: 1px solid var(--line); }
.section-list { display: grid; gap: .7rem; padding: 1.25rem 1.5rem; }
.section-editor { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.section-editor summary { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; cursor: pointer; background: #fafafa; }
.section-editor summary span { color: var(--navy); font-weight: 600; }
.section-editor summary small { color: var(--muted); }
.section-editor .admin-form { padding: 1.2rem; border-top: 1px solid var(--line); }
.image-field { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #f8f8f7; border: 1px dashed #cdd2d7; }
.image-field img { width: 7rem; height: 5rem; object-fit: cover; }
.image-field label { flex: 1; }
.add-row-form { padding: 0 1.5rem 1.5rem; }
.add-row-form button { cursor: pointer; }

.slide-list { display: grid; gap: 1rem; margin-top: 1.4rem; }
.slide-editor { display: grid; grid-template-columns: 13rem 1fr; gap: 1.2rem; padding: 1rem; background: #f8f8f7; border: 1px solid var(--line); border-radius: 6px; }
.slide-preview img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.slide-fields { display: grid; align-content: space-between; gap: 1rem; }
.narrow-card { max-width: 38rem; margin-left: max(0px, calc((100% - 1200px) / 2)); }

.toolbar-card,
.toolbar-card > div,
.search-form,
.inline-admin-form,
.form-actions,
.batch-actions,
.add-guest-form {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.toolbar-card { justify-content: space-between; }
.toolbar-card > div { flex-wrap: wrap; justify-content: flex-end; }
.search-form { flex: 1; max-width: 32rem; }
.admin-link-button,
.text-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .45rem .8rem;
    color: var(--navy);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--ivory);
    border: 1px solid #ddd7ca;
    border-radius: 4px;
    cursor: pointer;
}

.text-button { min-height: 1.9rem; padding: .25rem .5rem; background: transparent; border-color: #d2d7dd; }
.text-button:disabled { opacity: .4; cursor: not-allowed; }
.danger-button { min-height: 2.4rem; padding: .4rem .75rem; color: #8c3535; font-size: .75rem; font-weight: 600; background: #fff4f4; border: 1px solid #e4bcbc; border-radius: 4px; cursor: pointer; }
.large-summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer; color: var(--navy); font: 600 1.55rem/1.2 var(--serif); }
.large-summary small { color: var(--muted); font: 400 .78rem/1.5 var(--sans); }
.import-form { margin-top: 1.4rem; }
.table-wrap { width: 100%; margin-top: 1.2rem; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.admin-table th { padding: .7rem; color: #687283; font-size: .66rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; background: #f5f6f7; border-bottom: 1px solid var(--line); }
.admin-table td { padding: .8rem .7rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.admin-table td strong,
.admin-table td small { display: block; }
.admin-table td small { color: var(--muted); margin-top: .2rem; }
.row-warning { background: #fff8ed; }
.validation-message { display: block; color: #965b22; }
.status-badge { display: inline-flex; width: fit-content; padding: .25rem .5rem; color: #536073; background: #edf0f3; border-radius: 99px; font-size: .64rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.status-badge--ok,
.status-badge--attending,
.status-badge--sent { color: #27644d; background: #e8f5ef; }
.status-badge--declined,
.status-badge--failed { color: #8c3b36; background: #faeceb; }
.status-badge--needs_review,
.status-badge--scheduled { color: #8a6326; background: #fff4dc; }
.form-actions { margin-top: 1rem; }
.household-list { display: grid; gap: .8rem; margin-top: 1.2rem; }
.household-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.household-card > summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; background: #fafafa; }
.household-card > summary strong,
.household-card > summary span { display: block; }
.household-card > summary span { color: var(--muted); font-size: .76rem; }
.summary-badges { display: flex; align-items: center; gap: .45rem; }
.household-body { display: grid; gap: 1rem; padding: 1rem; border-top: 1px solid var(--line); }
.compact-block,
.guest-edit-row { padding: 1rem; background: #f8f8f7; border: 1px solid var(--line); border-radius: 5px; }
.guest-edit-row { border-left: 2px solid var(--gold); }
.add-guest-form input { max-width: 13rem; }
.empty-admin { padding: 2rem; color: var(--muted); text-align: center; }
.generated-link > div { display: flex; gap: .6rem; }
.generated-link input { font-family: monospace; }
.variable-help { display: flex; flex-wrap: wrap; gap: .45rem; }
.variable-help code { padding: .3rem .5rem; color: #785b28; background: #f8f2e5; border: 1px solid #eadcbd; border-radius: 3px; }
.template-grid { display: grid; gap: 1rem; margin-top: 1.3rem; }
.template-editor { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.template-editor > summary { padding: .9rem 1rem; color: var(--navy); font-weight: 600; cursor: pointer; background: #fafafa; }
.template-editor > form { padding: 1rem; border-top: 1px solid var(--line); }
.email-preview { width: calc(100% - 2rem); height: 26rem; margin: 0 1rem 1rem; background: white; border: 1px solid var(--line); }
.inline-admin-form input { max-width: 24rem; }
.inline-admin-form select { max-width: 10rem; }
.batch-actions { flex-wrap: wrap; margin-top: 1rem; }
.batch-actions input { max-width: 15rem; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 13rem; }
.row-actions form { display: flex; align-items: center; gap: .25rem; }
.row-actions select { width: 5.6rem; padding: .25rem; font-size: .7rem; }
.unit-admin-list,.booking-admin-list{display:grid;gap:.8rem;margin-top:1rem}.admin-unit-image{width:10rem;height:8rem;object-fit:cover}.booking-admin-card{display:grid;grid-template-columns:1fr auto 1.2fr;gap:1.5rem;align-items:center;padding:1rem;background:#fafafa;border:1px solid var(--line);border-left:2px solid var(--gold)}.booking-admin-card h3{font-size:1.7rem}.booking-admin-card p{margin:.4rem 0}.booking-admin-card dl{display:flex;gap:1rem;margin:0}.booking-admin-card dt{color:var(--muted);font-size:.65rem;text-transform:uppercase}.booking-admin-card dd{margin:0;font-weight:600}.manual-payment-form{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.manual-payment-form button{min-height:2.4rem}

@media (max-width: 1050px) {
    .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
    .admin-page { display: block; }
    .admin-sidebar { position: static; width: 100%; padding: 1rem; }
    .admin-brand { margin-bottom: 1rem; }
    .admin-sidebar nav { display: flex; gap: .25rem; overflow-x: auto; }
    .admin-sidebar nav a { flex: 0 0 auto; border-bottom: 2px solid transparent; border-left: 0; }
    .admin-sidebar nav a[aria-current="page"] { border-bottom-color: var(--gold); border-left: 0; }
    .sidebar-bottom { display: none; }
    .admin-main { padding: 1.5rem 1rem 4rem; }
    .admin-header { align-items: flex-start; }
    .admin-user div { display: none; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .welcome-card,
    .language-panels { grid-template-columns: 1fr; }
    .color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .slide-editor { grid-template-columns: 7rem 1fr; }
    .booking-admin-card{grid-template-columns:1fr}.manual-payment-form{grid-template-columns:1fr 1fr}
    .toolbar-card { align-items: stretch; flex-direction: column; }
    .toolbar-card > div { justify-content: flex-start; }
}

@media (max-width: 540px) {
    .admin-header h1 { font-size: 2.25rem; }
    .stat-grid,
    .form-grid--2,
    .form-grid--3,
    .form-grid--4,
    .color-grid { grid-template-columns: 1fr; }
    .card-heading { display: grid; }
    .slide-editor { grid-template-columns: 1fr; }
    .slide-preview img { max-height: 15rem; }
    .section-editor summary { display: grid; }
    .image-field { display: grid; }
    .response-choice,
    .inline-admin-form,
    .generated-link > div,
    .add-guest-form { align-items: stretch; flex-direction: column; }
    .add-guest-form input,
    .inline-admin-form input,
    .inline-admin-form select { max-width: none; }
    .household-card > summary { display: grid; }
    .summary-badges { flex-wrap: wrap; }
}
.host-discount-form{display:flex;align-items:center;gap:.3rem;min-width:9rem}
.host-discount-form label{display:flex;align-items:center;gap:.2rem}
.host-discount-form input{width:5.5rem;padding:.35rem;border:1px solid #c8c8c8}
.admin-form label:has(> input[name="deposit_amount"]),.admin-form label:has(> input[name="final_payment_date"]){display:none}
