/* ============================================
   calendar.css — Personal Calendar: month grid, weekly hourly view,
   event chips, recurrence controls.
   Part of the app.css split.
   ============================================ */

/* Calendar toolbar: left nav | center toggle | right actions */
.cal-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 14px 20px 10px;
    gap: 12px;
    flex-shrink: 0;
}

/* override default feature-panel padding for calendar since toolbar handles it */
#calendarPanel {
    padding: 0;
    overflow: hidden;
}
.cal-toolbar-right {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-end;
}
.cal-toolbar-center {
    display: flex; align-items: center; gap: 10px;
    justify-content: center;
}
.cal-nav {
    display: flex; align-items: center; gap: 4px;
    justify-content: flex-start;
}
.cal-nav h2 { font-size: 1.15rem; font-weight: 700; min-width: 170px; text-align: center; }

/* View toggle */
.cal-view-toggle {
    display: flex; background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden;
}
.cal-view-btn {
    padding: 5px 12px; font-size: 0.78rem; font-weight: 500;
    background: transparent; border: none; color: var(--text-secondary);
    cursor: pointer; display: flex; align-items: center; gap: 5px;
    transition: all var(--transition); white-space: nowrap;
}
.cal-view-btn i { font-size: 0.9rem; }
.cal-view-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.cal-view-btn.active { background: var(--navy); color: #fff; }

.cal-container {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; padding: 0 20px 20px;
}
.cal-header-row {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.cal-day-header {
    text-align: center; padding: 8px 0;
    font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
}

/* ── Weekly view (hourly) ── */
.cal-week-container {
    flex: 1; display: flex; flex-direction: column;
    overflow: hidden; padding: 0 20px 20px;
}
/* Header row: gutter + 7 cols */
.cal-week-header {
    display: grid; grid-template-columns: 52px repeat(7, 1fr);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0; flex-shrink: 0;
}
.cal-week-gutter-hdr { /* empty top-left corner */ }
.cal-week-col-hdr {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px; gap: 4px;
}
.cal-week-today-hdr .cal-week-day-name { color: var(--gold); font-weight: 700; }
.cal-week-day-name {
    font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted);
}
.cal-week-date-num {
    width: 28px; height: 28px; display: flex;
    align-items: center; justify-content: center;
    border-radius: 50%; font-size: 0.9rem; font-weight: 600;
    color: var(--text-secondary);
}

/* All-day strip row (between header and scroll body) */
.cal-week-allday-row {
    display: grid; grid-template-columns: 52px 1fr;
    border-bottom: 2px solid var(--border);
    flex-shrink: 0; min-height: 28px;
}
.cal-week-allday-gutter {
    display: flex; align-items: center; justify-content: flex-end;
    padding: 4px 6px 4px 0;
    font-size: 0.6rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
    border-right: 1px solid var(--border);
}
.cal-week-allday-cols {
    display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-week-allday-col {
    padding: 2px; display: flex; flex-direction: column; gap: 2px;
    border-left: 1px solid var(--border); min-height: 28px;
}
.cal-week-allday-col:first-child { border-left: none; }
.cal-week-allday-event {
    border-radius: 4px;
    font-size: 0.72rem; padding: 2px 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; color: #fff;
    transition: opacity var(--transition);
}
.cal-week-allday-event:hover { opacity: 0.82; }

/* Scrollable body */
.cal-week-body { flex: 1; overflow: hidden; }
.cal-week-scroll { height: 100%; overflow-y: auto; }
.cal-week-inner {
    display: grid; grid-template-columns: 52px 1fr;
    min-height: 100%;
}

/* Hour gutter */
.cal-week-gutter {
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}
.cal-week-hour-label {
    display: flex; align-items: flex-start; justify-content: flex-end;
    padding: 0 6px 0 0;
    font-size: 0.65rem; color: var(--text-muted);
    transform: translateY(-8px);
    box-sizing: border-box;
    border-top: 1px solid transparent; /* keeps height consistent */
}

/* 7-column grid for days */
.cal-week-cols {
    display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-week-day-col {
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    cursor: pointer;
}
.cal-week-day-col:first-child { border-left: none; }
.cal-week-today-col { background: rgba(24,37,81,0.15) !important; }

/* Timed area: relative container with hour slots */
.cal-week-timed-area { overflow: hidden; }
.cal-week-hour-slot {
    border-top: 1px solid var(--border);
    box-sizing: border-box;
    cursor: pointer;
}
.cal-week-hour-slot:first-child { border-top: none; }
.cal-week-hour-slot:hover { background: var(--bg-hover); }

/* Positioned timed events */
.cal-week-timed-event {
    position: absolute; left: 2px; right: 2px;
    border-radius: 4px; padding: 3px 6px;
    font-size: 0.72rem; color: #fff;
    cursor: pointer; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 2; transition: opacity var(--transition);
    display: flex; flex-direction: column; gap: 1px;
}
.cal-week-timed-event:hover { opacity: 0.88; z-index: 3; }
.cal-week-timed-event .cal-event-time {
    font-size: 0.65rem; opacity: 0.9; font-weight: 600; white-space: nowrap;
}
.cal-week-timed-event .cal-event-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(90px, 1fr);
    flex: 1; gap: 2px; overflow-y: auto;
}
.cal-cell {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 6px 4px;
    cursor: pointer;
    transition: background var(--transition);
    min-height: 90px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.cal-cell:hover { background: var(--bg-hover); }
.cal-cell-empty { border-color: transparent; cursor: default; }
.cal-today { background: var(--navy-glow) !important; border-color: var(--navy-light) !important; }
.cal-date-num {
    font-size: 0.8rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 4px;
    width: 24px; height: 24px; display: flex;
    align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
}
.cal-today-num {
    background: var(--gold); color: var(--text-inverse);
}
.cal-events-wrap { display: flex; flex-direction: column; gap: 2px; overflow: hidden; flex: 1; }
.cal-event {
    border-radius: 4px; padding: 2px 6px;
    font-size: 0.72rem; font-weight: 500; color: #fff;
    cursor: pointer; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; display: flex; align-items: center; gap: 4px;
    transition: opacity var(--transition);
}
.cal-event:hover { opacity: 0.85; }
.cal-event-time { font-size: 0.65rem; opacity: 0.85; flex-shrink: 0; }
.cal-event-title { overflow: hidden; text-overflow: ellipsis; }
.cal-more {
    font-size: 0.68rem; color: var(--text-muted);
    padding: 1px 4px; cursor: pointer;
}
.cal-more:hover { color: var(--gold); }

/* Multi-day event span visuals */
.cal-event-span-start {
    border-radius: 4px 0 0 4px;
    margin-right: -2px;
    padding-right: 2px;
}
.cal-event-span-mid {
    border-radius: 0;
    margin-left: -2px;
    margin-right: -2px;
    padding-left: 2px;
    padding-right: 2px;
    opacity: 0.85;
}
.cal-event-span-end {
    border-radius: 0 4px 4px 0;
    margin-left: -2px;
    padding-left: 2px;
    opacity: 0.85;
}
.cal-event-cont { opacity: 0; pointer-events: none; }

/* ── Calendar Recurrence Group ─────────────────── */
#eventRecurrenceGroup {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
#eventRecurrenceGroup .form-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 768px) {
    .cal-toolbar { grid-template-columns: 1fr; justify-items: center; gap: 8px; }
    .cal-toolbar-right { justify-content: center; }
    .cal-week-day-name { font-size: 0.6rem; }
    .cal-week-date-num { width: 22px; height: 22px; font-size: 0.78rem; }
    .cal-week-inner { grid-template-columns: 38px 1fr; }
    .cal-week-hour-label { font-size: 0.58rem; padding-right: 3px; }
    .cal-grid { grid-auto-rows: minmax(60px, 1fr); }
    .cal-event-time { display: none; }
    .cal-date-num { font-size: 0.72rem; width: 20px; height: 20px; }
    .cal-container { padding: 0 10px 10px; }
}
@media (max-width: 480px) {
    .cal-nav h2 { min-width: 140px; font-size: 1rem; }
    .cal-day-header { font-size: 0.65rem; }
    .cal-event { font-size: 0.65rem; }
}