:root {
    --ink: #0d1821;
    --ink-subtle: #415a77;
    --stone: #e0e6ed;
    --sky: #c3ddf6;
    --violet: #5c6ac4;
    --coral: #f87060;
    --mint: #3ab795;
    --bg: linear-gradient(160deg, #f7f9fc 0%, #edf2f8 60%, #ffffff 100%);
    --shadow-soft: 0 12px 30px rgba(13, 24, 33, 0.08);
}

.host-calendar-shell {
    background: var(--bg);
    padding: 2.5rem clamp(1rem, 3vw, 4rem);
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calendar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.calendar-title .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.75rem;
    color: var(--ink-subtle);
}

.calendar-title h1 {
    margin: 0.35rem 0;
    font-size: clamp(2rem, 3vw, 2.6rem);
    color: var(--ink);
}

.calendar-title p {
    margin: 0;
    color: var(--ink-subtle);
}

.calendar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.property-picker {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--ink-subtle);
}

.control-input {
    padding: 0.65rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    background: white;
    box-shadow: var(--shadow-soft);
    font-weight: 600;
    min-width: 240px;
}

.month-switch {
    display: inline-flex;
    background: white;
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
}

.primary,
.ghost,
.danger {
    border: none;
    border-radius: 0.9rem;
    padding: 0.65rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.primary {
    background: radial-gradient(circle at top left, #768bff, #5c6ac4 70%);
    color: white;
    box-shadow: 0 14px 24px rgba(92, 106, 196, 0.25);
}

.primary:hover { transform: translateY(-1px); }

.ghost {
    background: transparent;
    color: var(--ink);
    padding: 0.5rem 0.75rem;
}

.ghost:hover { color: var(--violet); }

.danger {
    background: linear-gradient(135deg, #ff8f70, #f87060);
    color: white;
    box-shadow: 0 12px 22px rgba(248, 112, 96, 0.28);
}

.calendar-body {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 1.5rem;
}

.legend-card,
.context-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legend-card h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--ink);
}

.legend-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.legend-card li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink-subtle);
}

.badge {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: inline-block;
}

.badge.available { background: var(--mint); }
.badge.booked { background: var(--coral); }
.badge.blocked { background: var(--violet); }

.upcoming h3,
.context-card h3 { margin: 0; color: var(--ink); }

.booking-digest {
    display: grid;
    gap: 0.75rem;
}

.booking-snippet {
    background: white;
    border-radius: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid #eef2f8;
    box-shadow: 0 6px 16px rgba(13, 24, 33, 0.05);
}

.booking-snippet header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.booking-snippet .reference {
    font-family: "Space Mono", monospace;
    font-size: 0.8rem;
    color: var(--ink-subtle);
}

.status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    color: white;
    background: var(--violet);
}

.status-confirmed { background: var(--mint); }
.status-pending { background: linear-gradient(135deg, #f6d365, #fda085); }
.status-checked_in { background: var(--violet); }

.booking-snippet footer {
    margin-top: 0.5rem;
    font-weight: 700;
    color: var(--ink);
}

.booking-snippet p {
    margin: 0;
    color: var(--ink-subtle);
    font-size: 0.85rem;
}

.booking-digest .empty { color: var(--ink-subtle); }

.context-card dl {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.context-card dt {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-subtle);
}

.context-card dd {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

.calendar-grid-area {
    background: rgba(255,255,255,0.92);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-soft);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.calendar-grid-head,
.calendar-grid-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.calendar-grid-head {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-subtle);
    margin-bottom: 1rem;
}

.calendar-day {
    min-height: 120px;
    background: white;
    border-radius: 0.9rem;
    border: 1px solid #eef2f8;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    position: relative;
}

.calendar-day:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(13, 24, 33, 0.08);
}

.calendar-day .date-label {
    font-weight: 700;
    color: var(--ink);
}

.calendar-day .status-chip {
    font-size: 0.7rem;
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.calendar-day.available .status-chip { background: rgba(58,183,149,0.15); color: var(--mint); }
.calendar-day.booked .status-chip { background: rgba(248,112,96,0.15); color: var(--coral); }
.calendar-day.blocked .status-chip { background: rgba(92,106,196,0.15); color: var(--violet); }

.calendar-day.today::after {
    content: "today";
    position: absolute;
    top: 0.3rem;
    right: 0.6rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--violet);
    letter-spacing: 0.08em;
}

.calendar-day .badge-sum {
    font-size: 0.7rem;
    color: var(--ink-subtle);
}

.calendar-dialog {
    border: none;
    border-radius: 1rem;
    padding: 0;
    box-shadow: 0 40px 60px rgba(13,24,33,0.35);
    max-width: min(520px, 90vw);
}

.calendar-dialog::backdrop { background: rgba(11, 20, 30, 0.45); }

.calendar-dialog header,
.calendar-dialog footer {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-dialog header {
    border-bottom: 1px solid #eef2f8;
}

.calendar-dialog section {
    padding: 1.25rem 1.5rem;
    display: grid;
    gap: 1rem;
}

.calendar-dialog label {
    display: grid;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--ink-subtle);
}

.calendar-dialog input,
.calendar-dialog select {
    padding: 0.6rem 0.8rem;
    border-radius: 0.65rem;
    border: 1px solid #dce4f2;
}

.calendar-dialog footer { gap: 0.75rem; }

@media (max-width: 1024px) {
    .calendar-body {
        grid-template-columns: 1fr;
    }
    .calendar-header {
        flex-direction: column;
        align-items: stretch;
    }
    .calendar-actions {
        flex-wrap: wrap;
    }
}