/* App-specific styles layered on Tabler. Keep this file small — Tabler
   provides the design system; only truly custom UI lives here. */

/* Month-grid availability calendar */
.cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal .head {
    font-size: 12px;
    font-weight: 700;
    color: var(--tblr-secondary);
    padding: 4px 6px;
}

.cal .day {
    min-height: 72px;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    overflow: hidden;
}

.cal .day .date {
    font-weight: 600;
    color: var(--tblr-secondary);
}

.cal .day.other {
    background: var(--tblr-bg-surface-tertiary);
    opacity: .5;
}

.cal .day.booked {
    background: var(--tblr-blue-lt, #cfe6fb);
    border-color: var(--tblr-blue);
}

.cal .day.blocked {
    background: var(--tblr-bg-surface-secondary);
    border-style: dashed;
}