/**
 * Creatrr Date Picker Styles
 *
 * Uses --cr-* design tokens exclusively. Theme-aware (dark/light).
 * Ultra-compact grid — rectangular cells, tight spacing, mobile-first.
 *
 * @package Creatrr\Platform
 */

/* ===== CREATRR DATE PICKER =====
   Minimal, ultra-compact calendar widget. Rectangular day cells (height: 28px).
   Grid: 7 columns for day-of-week; gap: 1px for tight packing.
   Weekday row shows abbreviated names (Su/Mo/Tu/...); click nav buttons to change month. */

/* ── Container ── */
.cr-datepicker {
    width: 100%;
    font-family: var(--cr-font-family);
    user-select: none;
}

/* ── Header: [<] Month Year [>] ── */
.cr-dp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.cr-dp-title {
    font-size: var(--cr-font-size-xs);
    font-weight: var(--cr-font-weight-semibold);
    color: var(--cr-text-primary);
    text-align: center;
    flex: 1;
}

.cr-dp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--cr-radius-full);
    background: transparent;
    color: var(--cr-text-secondary);
    cursor: pointer;
    transition: all var(--cr-transition);
    padding: 0;
    flex-shrink: 0;
}
.cr-dp-nav:hover:not(:disabled) {
    background: color-mix(in srgb, var(--cr-text-primary) 8%, transparent);
    color: var(--cr-text-primary);
}
.cr-dp-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.cr-dp-nav svg {
    display: block;
}

/* ── Weekday labels ──
   Tertiary text color, uppercase, small font. Tight padding for compact layout. */
.cr-dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-bottom: 2px;
}

.cr-dp-wday {
    text-align: center;
    font-size: 10px;
    font-weight: var(--cr-font-weight-medium);
    color: var(--cr-text-tertiary);
    padding: 2px 0;
    line-height: 1;
}

/* ── Day grid ──
   7 columns, minimal 1px gap. Each cell is 28px tall with centered text.
   States: .today (bold, inset shadow), .selected (inverted colors), .disabled/.unavailable (opacity 0.4, strikethrough). */
.cr-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}

.cr-dp-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    font-size: 11px;
    color: var(--cr-text-primary);
    border-radius: var(--cr-radius-sm);
    cursor: pointer;
    transition: background var(--cr-transition), color var(--cr-transition);
    line-height: 1;
}

.cr-dp-day.empty {
    cursor: default;
}

.cr-dp-day:not(.empty):not(.disabled):hover {
    background: color-mix(in srgb, var(--cr-text-primary) 8%, transparent);
}

/* ── Today ── */
.cr-dp-day.today {
    font-weight: var(--cr-font-weight-bold);
    color: var(--cr-text-primary);
    box-shadow: inset 0 0 0 1px var(--cr-border-hover);
}

/* ── Selected ── */
.cr-dp-day.selected {
    background: var(--cr-text-primary);
    color: var(--cr-bg-primary);
    font-weight: var(--cr-font-weight-semibold);
}
.cr-dp-day.selected:hover {
    background: var(--cr-text-primary);
    color: var(--cr-bg-primary);
}

/* ── Disabled (past / out of range) ── */
.cr-dp-day.disabled {
    color: var(--cr-text-tertiary);
    opacity: 0.4;
    cursor: not-allowed;
}
.cr-dp-day.disabled:hover {
    background: transparent;
}

/* ── Unavailable (booked / blocked) ── */
.cr-dp-day.unavailable {
    color: var(--cr-text-tertiary);
    text-decoration: line-through;
    opacity: 0.5;
}
.cr-dp-day.unavailable:hover {
    background: transparent;
}

/* ── Color-coded availability statuses ──
   Applied via .status-booked, .status-pending, .status-available classes.
   Used by the availability calendar modal on listing pages. */

.cr-dp-day.status-available:not(.disabled) {
    background: color-mix(in srgb, var(--cr-success) 15%, transparent);
    color: var(--cr-success);
    font-weight: var(--cr-font-weight-semibold);
}
.cr-dp-day.status-available:not(.disabled):hover {
    background: color-mix(in srgb, var(--cr-success) 25%, transparent);
}

.cr-dp-day.status-pending {
    background: color-mix(in srgb, var(--cr-warning) 18%, transparent);
    color: var(--cr-warning);
    font-weight: var(--cr-font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    opacity: 1;
}
.cr-dp-day.status-pending:hover {
    background: color-mix(in srgb, var(--cr-warning) 25%, transparent);
}

.cr-dp-day.status-booked {
    background: color-mix(in srgb, var(--cr-error) 15%, transparent);
    color: var(--cr-error);
    font-weight: var(--cr-font-weight-semibold);
    cursor: not-allowed;
    text-decoration: none;
    opacity: 1;
}
.cr-dp-day.status-booked:hover {
    background: color-mix(in srgb, var(--cr-error) 22%, transparent);
}

/* ── Availability-mode calendar: larger cells ──
   Parent wrapper uses .cr-datepicker-lg to opt into the bigger layout. */
.cr-datepicker-lg .cr-dp-header {
    margin-bottom: var(--cr-space-2);
}
.cr-datepicker-lg .cr-dp-title {
    font-size: var(--cr-font-size-base);
    font-weight: var(--cr-font-weight-bold);
}
.cr-datepicker-lg .cr-dp-nav {
    width: 32px;
    height: 32px;
}
.cr-datepicker-lg .cr-dp-wday {
    font-size: var(--cr-font-size-xs);
    padding: var(--cr-space-1) 0;
}
.cr-datepicker-lg .cr-dp-grid {
    gap: 2px;
    /* Lock to 6 rows so the modal height stays stable across all months */
    grid-template-rows: repeat(6, 40px);
}
.cr-datepicker-lg .cr-dp-day {
    height: 40px;
    font-size: var(--cr-font-size-sm);
    border-radius: var(--cr-radius-md);
}

/* ── Mobile: touch-friendly hit targets ──
   Increases day cell height to 32px and nav button size to 28x28.
   Improves tap accuracy on small screens. */
@media (max-width: 480px) {
    .cr-dp-day {
        height: 32px;
        font-size: 12px;
    }
    .cr-dp-nav {
        width: 28px;
        height: 28px;
    }
    .cr-dp-title {
        font-size: var(--cr-font-size-sm);
    }
    .cr-datepicker-lg .cr-dp-day {
        height: 36px;
    }
}