/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-calendar-grid
 * @description The main 7-column monthly grid container.
 * @called-by  pm-panel-calendar.html
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-20
 */
.pm-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin: 10px 14px 0; /* Match pm-reminders-container padding */
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-calendar-day-header
 * @description Header cells for days of the week (S, M, T...).
 * @called-by  pm-panel-calendar.html
 * @depends-on --pm-text-2
 * @tags        TODO
 * @updated 2026-04-20
 */
.pm-calendar-day-header {
    color: var(--pm-text-2);
    text-align: center;
    padding: 8px 0;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-calendar-day
 * @description Individual day cell in the calendar grid.
 * @called-by  pm-panel-calendar.html
 * @depends-on --pm-text-1, --pm-border
 * @tags        TODO
 * @updated 2026-04-20
 */
.pm-calendar-day {
    background-color: var(--pm-panel-surface, var(--pm-panel-surface));
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--pm-text-1);
    transition: all 0.2s ease;
    border-radius: var(--pm-radius-small);
    border: 1px solid var(--pm-border);
}

.pm-calendar-day:hover {
    background-color: var(--pm-surface-2);
    transform: translateY(-2px);
    box-shadow: var(--pm-shadow-sm);
}

/* Today highlight — strong and obvious */
.pm-calendar-day.pm-active {
    border: 3px solid var(--pm-brand, var(--pm-brand));
    background-color: var(--pm-brand-light, var(--pm-brand-light));
    color: var(--pm-brand-dark, var(--pm-brand-dark));
    font-weight: 700;
}

/* Selection highlight */
.pm-calendar-day.pm-selected {
    border: 2px solid var(--pm-accent, var(--pm-accent));
    background-color: var(--pm-surface-2);
}

.pm-calendar-day.pm-muted {
    color: var(--pm-text-3);
    opacity: 0.4;
    border-color: transparent;
    background-color: transparent;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-has-reminder
 * @description Applied to calendar day cells that contain one or more reminders.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-20
 */
.pm-calendar-day.pm-has-reminder {
    background-color: var(--pm-success-light, var(--pm-success-light)) !important;
    border-color: var(--pm-success, var(--pm-success)) !important;
    color: var(--pm-success, var(--pm-success));
    font-weight: 600;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-has-past-reminder
 * @description Applied to calendar day cells that contain one or more overdue or past reminders.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-27
 */
.pm-calendar-day.pm-has-past-reminder {
    background-color: var(--pm-event-blue-bg) !important; /* Light Blue */
    border-color: var(--pm-event-blue) !important;      /* Blue border */
    color: var(--pm-event-blue-dark);                        /* Darker blue text */
    font-weight: 600;
}

/* Today wins background/border but has-reminder keeps its text color indicator if needed */
.pm-calendar-day.pm-active.pm-has-reminder,
.pm-calendar-day.pm-active.pm-has-past-reminder {
    border: 3px solid var(--pm-brand, var(--pm-brand)) !important;
    background-color: var(--pm-brand-light, var(--pm-brand-light)) !important;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-has-important-date
 * @description Applied to calendar day cells that contain an important date (birthday, anniversary, memorial).
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-28
 */
.pm-calendar-day.pm-has-important-date {
    background-color: var(--pm-event-orange-bg) !important;
    border-color: var(--pm-event-orange) !important;
    color: var(--pm-event-orange-dark);
    font-weight: 600;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-calendar-day-num
 * @description The numeric label for a day within the calendar grid cell.
 * @called-by  none found
 * @depends-on none
 * @tags        TODO
 * @updated 2026-04-20
 */
.pm-calendar-day-num {
    z-index: 1;
}

/* ----------------------------------------------------------------
   CALENDAR AGENDA ALIGNMENT
   Ensure the list and header matches the grid width.
   ---------------------------------------------------------------- */

.pm-section-header.pm-calendar-agenda-header {
    margin: 20px 14px 10px !important;
}

#pm-calendar-list {
    padding-top: 0; /* Remove top padding since header provides gap */
}

/* ----------------------------------------------------------------
   LIVE CLOCK BAR
   ---------------------------------------------------------------- */

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-calendar-clock-bar
 * @description Centered bar showing live date and time at top of calendar.
 * @called-by  pm-panel-calendar.html
 * @depends-on --pm-panel-surface, --pm-border
 * @tags        TODO
 * @updated 2026-04-27
 */
.pm-calendar-clock-bar {
    display: flex;
    justify-content: center;
    padding: 10px 14px;
    background: var(--pm-panel-surface);
    border-bottom: 1px solid var(--pm-border);
    margin-bottom: 12px;
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix pm
 * @type css-class
 * @name pm-calendar-live-clock
 * @description Single-line bold display of today's date and live time.
 * @called-by  pm-panel-calendar.html
 * @depends-on --pm-text-1
 * @tags        TODO
 * @updated 2026-04-27
 */
.pm-calendar-live-clock {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pm-text-1);
    letter-spacing: 0.2px;
}

.pm-calendar-header-clock {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ── Agenda bar: pills + actions ────────────────────────────── */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-agenda-bar
 * @tags        themes
 * @description Styles the container for calendar agenda filter pills and action buttons.
 * @called-by   pm-panel-calendar.html
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-calendar-agenda-bar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0 8px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-filter-pills
 * @tags        themes
 * @description Styles a flexible container for calendar filter pill elements.
 * @called-by   pm-panel-calendar.html
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-calendar-filter-pills {
    display: flex;
    gap: 5px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-pill
 * @tags        themes
 * @description Styles a clickable, rounded calendar filter pill with active state.
 * @called-by   pm-panel-calendar.html
 * @depends-on  --pm-border, --pm-surface-2, --pm-text-2
 * @updated     2026-05-05
 */
.pm-calendar-pill {
    flex: 1;
    min-width: 0;
    padding: 4px 4px;
    border-radius: 999px;
    font-size: clamp(0.62rem, 2.4vw, 0.78rem);
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--pm-border);
    background: var(--pm-surface-2);
    color: var(--pm-text-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pm-calendar-pill.pm-active {
    background: var(--pm-brand);
    color: var(--pm-on-brand, #fff);
    border-color: var(--pm-brand);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-agenda-actions
 * @tags        themes
 * @description Styles a flexible container for action buttons in the calendar agenda.
 * @called-by   pm-panel-calendar.html
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-calendar-agenda-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pm-cal-calendar-actions {
    display: flex;
    gap: 4px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-sync-btn
 * @tags        themes
 * @description Styles a button for initiating calendar synchronization.
 * @called-by   pm-panel-calendar.html
 * @depends-on  --pm-radius-xsmall, --pm-success, --pm-success-light
 * @updated     2026-05-05
 */
.pm-calendar-sync-btn {
    padding: 4px 8px;
    border-radius: var(--pm-radius-xsmall);
    font-size: clamp(0.62rem, 2.2vw, 0.78rem);
    font-weight: 500;
    border: 1px solid var(--pm-success);
    background: var(--pm-success-light);
    color: var(--pm-success);
    cursor: pointer;
    white-space: nowrap;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-add-btn
 * @tags        themes
 * @description Styles a button for adding new calendar entries.
 * @called-by   pm-panel-calendar.html
 * @depends-on  --pm-radius-xsmall, --pm-brand, --pm-brand-light, --pm-brand-dark
 * @updated     2026-05-05
 */
.pm-calendar-add-btn {
    padding: 4px 8px;
    border-radius: var(--pm-radius-xsmall);
    font-size: clamp(0.62rem, 2.2vw, 0.78rem);
    font-weight: 600;
    border: 1px solid var(--pm-brand);
    background: var(--pm-brand-light);
    color: var(--pm-brand-dark);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.pm-calendar-add-btn:active {
    background: var(--pm-brand);
    color: #fff;
}

.pm-calendar-add-reminder-btn {
    padding: 6px 14px;
    border-radius: var(--pm-radius-xsmall);
    font-size: clamp(0.62rem, 2.2vw, 0.8rem);
    font-weight: 700;
    border: none;
    background: var(--pm-brand);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.pm-calendar-add-reminder-btn:active {
    opacity: 0.8;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-agenda-sublabel
 * @tags        themes
 * @description Styles a small, secondary hidden label within the calendar agenda.
 * @called-by   pm-panel-calendar.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-calendar-agenda-sublabel {
    font-size: 0.78rem;
    color: var(--pm-text-2);
    margin-bottom: 6px;
    display: none;
}

/* ── Calendar Search ─────────────────────────────────────────── */

.pm-calendar-search-row {
    margin: 0 0 8px;
}

.pm-calendar-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: var(--pm-radius-xsmall);
    border: 1px solid var(--pm-border);
    background: var(--pm-surface-2);
    color: var(--pm-text-1);
    font-size: 0.85rem;
}

.pm-calendar-search-input:focus {
    outline: none;
    border-color: var(--pm-brand);
}

/* ── Calendar Sync Modal ─────────────────────────────────────── */

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feeds-list
 * @tags        themes
 * @description Styles a vertically stacked list container for calendar feeds.
 * @called-by   pm-modal-calendar-sync.html
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-calendar-feeds-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feeds-loading
 * @tags        themes
 * @description Styles a loading indicator for the calendar feeds list.
 * @called-by   pm-modal-calendar-sync.html
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-calendar-feeds-loading {
    color: var(--pm-text-2);
    font-size: 0.85rem;
    padding: 8px 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-row
 * @tags        themes
 * @description Styles a container for an individual calendar feed item, with vertical layout and distinct background.
 * @called-by   none found
 * @depends-on  --pm-surface-2, --pm-border, --pm-radius-small
 * @updated     2026-05-05
 */
.pm-calendar-feed-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--pm-surface-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-small);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-top
 * @tags        themes
 * @description Styles the top section of a calendar feed row, arranging items horizontally.
 * @called-by   none found
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-calendar-feed-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-bottom
 * @tags        themes
 * @description Styles the bottom section of a calendar feed row, with controls and a top border.
 * @called-by   none found
 * @depends-on  --pm-border
 * @updated     2026-05-05
 */
.pm-calendar-feed-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--pm-border);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-info
 * @tags        themes
 * @description Styles a flexible container for calendar feed details, expanding vertically.
 * @called-by   none found
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-calendar-feed-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-name
 * @tags        themes
 * @description Styles the prominent name of a calendar feed.
 * @called-by   none found
 * @depends-on  --pm-text-1
 * @updated     2026-05-05
 */
.pm-calendar-feed-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pm-text-1);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-meta
 * @tags        themes
 * @description Styles secondary meta-information text within a calendar feed.
 * @called-by   none found
 * @depends-on  --pm-text-2
 * @updated     2026-05-05
 */
.pm-calendar-feed-meta {
    font-size: 0.75rem;
    color: var(--pm-text-2);
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-url
 * @tags        themes
 * @description Styles the calendar feed URL, displaying it in monospace with ellipsis for overflow.
 * @called-by   none found
 * @depends-on  --pm-text-3
 * @updated     2026-05-05
 */
.pm-calendar-feed-url {
    font-size: 0.7rem;
    color: var(--pm-text-3);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-sync-btn
 * @tags        themes
 * @description Prevents the calendar feed synchronization button from shrinking in a flex container.
 * @called-by   none found
 * @depends-on  none
 * @updated     2026-05-05
 */
.pm-calendar-feed-sync-btn {
    flex-shrink: 0;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-delete-btn
 * @tags        themes
 * @description Styles the calendar feed delete button with danger-themed colors and prevents it from shrinking.
 * @called-by   none found
 * @depends-on  --pm-danger-light, --pm-danger
 * @updated     2026-05-05
 */
.pm-calendar-feed-delete-btn {
    flex-shrink: 0;
    background: var(--pm-danger-light) !important;
    color: var(--pm-danger) !important;
    border-color: var(--pm-danger) !important;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-feed-protected
 * @tags        themes
 * @description Styles a protected indicator for a calendar feed with specific text, background, border, and padding.
 * @called-by   none found
 * @depends-on  --pm-text-3, --pm-surface-3, --pm-border, --pm-radius-xsmall
 * @updated     2026-05-05
 */
.pm-calendar-feed-protected {
    font-size: 0.72rem;
    color: var(--pm-text-3);
    background: var(--pm-surface-3);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-xsmall);
    padding: 2px 8px;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-toggle-label
 * @tags        themes
 * @description Styles a toggle switch's label, arranging content with flexbox and indicating clickability.
 * @called-by   none found
 * @depends-on  --pm-text-1
 * @updated     2026-05-05
 */
.pm-toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--pm-text-1);
    cursor: pointer;
}

/**
 * @pm-registry
 * @prefix      pm
 * @type        css-class
 * @name        pm-calendar-sync-add
 * @tags        themes
 * @description Applies a top border, padding, and margin to visually separate an element for adding calendar synchronization.
 * @called-by   pm-modal-calendar-sync.html
 * @depends-on  --pm-border
 * @updated     2026-05-05
 */
.pm-calendar-sync-add {
    border-top: 1px solid var(--pm-border);
    padding-top: 16px;
    margin-top: 4px;
}