/* === Base === */
body {
    font-family: 'Work Sans', system-ui, sans-serif;
    color: #2b2b2b;
}

/* === Calendar scroll container === */
/* Self-contained vertical scroll so the day-row can be sticky inside it. */
.cal-scroll {
    overflow: auto;
    max-height: calc(100vh - 240px);
    padding: 0 16px 8px;
    border-top: 1px solid transparent; /* prevents margin-collapse with sticky header */
}
@media (min-width: 640px) {
    .cal-scroll {
        padding: 0 0 8px;
        max-height: calc(100vh - 280px);
    }
}

/* === Calendar table === */
.cal-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
    table-layout: fixed;
    min-width: 380px; /* keeps cells tappable on narrow screens */
}

.cal-th-time {
    width: 56px;
    min-width: 56px;
    background: #f2f5f7;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 6;
}

.cal-th-date {
    text-align: center;
    padding: 8px 4px;
    border-bottom: 2px solid #e5e7eb;
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 5;
}

.cal-th-date.cal-today {
    border-bottom-color: #ffde00;
}

.cal-td-time {
    font-size: 0.7rem;
    color: #9ca3af;
    padding-right: 8px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
    line-height: 32px;
    font-weight: 500;
}

/* === Cells === */
.cal-cell {
    height: 32px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    position: relative;
    transition: background-color 0.05s;
    text-align: center;
    vertical-align: middle;
}

.cal-cell:hover:not(.cal-cell-disabled) {
    outline: 2px solid #ffde00;
    outline-offset: -2px;
    z-index: 1;
}

/* My availability states */
.cal-cell-empty {
    background-color: #ffffff;
}
.cal-cell-free {
    background-color: #4ade80;
}
.cal-cell-busy {
    background-color: #f87171;
}
.cal-cell-maybe {
    background-color: #fbbf24;
}

/* Selection overlay */
.cal-cell-selecting {
    background-color: #fff3a8 !important;
    outline: 2px solid #ffde00;
    outline-offset: -2px;
    z-index: 2;
}

/* Group heat map (free count) */
.cal-cell-heat-1 {
    background-color: #f0fdf4;
}
.cal-cell-heat-2 {
    background-color: #bbf7d0;
}
.cal-cell-heat-3 {
    background-color: #4ade80;
}
.cal-cell-heat-4 {
    background-color: #16a34a;
}

/* Cell counts */
.cal-cell-counts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    line-height: 32px;
    font-weight: 700;
    font-size: 0.7rem;
}

.cal-cell-count-free {
    color: rgba(0, 0, 0, 0.65);
}
.cal-cell-heat-3 .cal-cell-count-free,
.cal-cell-heat-4 .cal-cell-count-free {
    color: #ffffff;
}

.cal-cell-count-maybe {
    color: #b45309;
    font-size: 0.6rem;
    font-weight: 600;
}

/* Maybe-only badge for cells where free=0 but maybe>0 */
.cal-cell-maybe-only {
    background-color: #fef3c7;
}

/* === Disabled cells === */
.cal-cell-disabled {
    background-color: #f9fafb;
    cursor: default;
    border-color: #f3f4f6;
}
.cal-cell-disabled:hover {
    outline: none;
}

/* === Tooltip === */
.cell-tooltip {
    position: fixed;
    z-index: 60;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 12px 14px;
    min-width: 200px;
    max-width: 280px;
    pointer-events: auto;
    font-size: 0.85rem;
}

.cell-tooltip-header {
    font-weight: 700;
    color: #2b2b2b;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 6px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.cell-tooltip-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

.cell-tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}
.cell-tooltip-dot-free { background: #4ade80; }
.cell-tooltip-dot-maybe { background: #fbbf24; }
.cell-tooltip-dot-busy { background: #f87171; }
.cell-tooltip-dot-none { background: #d1d5db; }

.cell-tooltip-label {
    font-weight: 600;
    color: #2b2b2b;
}
.cell-tooltip-names {
    color: #6b7280;
    font-size: 0.78rem;
}

/* === Bottom safe area for action bar === */
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* === Buttons (3den.pl style) === */
.btn-primary {
    background: #ffde00;
    color: #2b2b2b;
    padding: 10px 20px;
    border-radius: 9999px;
    font-weight: 600;
    transition: background 0.2s, color 0.2s;
}
.btn-primary:hover {
    background: #2b2b2b;
    color: #ffffff;
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: #ffffff;
    color: #2b2b2b;
    padding: 10px 20px;
    border-radius: 9999px;
    border: 1px solid #d9d9d9;
    font-weight: 600;
    transition: background 0.2s;
}
.btn-secondary:hover {
    background: #f2f5f7;
}

.btn-ghost {
    color: #2b2b2b;
    padding: 8px 16px;
    border-radius: 9999px;
    font-weight: 500;
    transition: background 0.2s;
}
.btn-ghost:hover {
    background: #f2f5f7;
}

/* === Inputs === */
.input {
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 0.95rem;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {
    outline: none;
    border-color: #ffde00;
    box-shadow: 0 0 0 3px rgba(255, 222, 0, 0.25);
}

.label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b2b2b;
    margin-bottom: 4px;
}

/* === Cards === */
.card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
}

/* === Status pills === */
.pill-free {
    background: #dcfce7;
    color: #166534;
}
.pill-maybe {
    background: #fef3c7;
    color: #92400e;
}
.pill-busy {
    background: #fee2e2;
    color: #991b1b;
}

/* === Responsive === */
@media (max-width: 640px) {
    .cal-cell {
        height: 28px;
    }
    .cal-td-time {
        font-size: 0.6rem;
        line-height: 28px;
    }
    .cal-cell-counts {
        font-size: 0.6rem;
        line-height: 28px;
    }
    .cal-th-date {
        padding: 4px 2px;
        font-size: 0.7rem;
    }
    .cal-th-time {
        width: 44px;
        min-width: 44px;
    }
}

/* Touch */
@media (hover: none) {
    .cal-cell:hover:not(.cal-cell-disabled) {
        outline: none;
    }
    .cal-cell:active:not(.cal-cell-disabled) {
        outline: 2px solid #ffde00;
        outline-offset: -2px;
    }
}