/*
 * CalDAV Calendar Styles
 *
 * Frontend widget styles use CSS custom properties so they inherit the
 * active theme's colours. Override any variable on your own CSS to customise.
 * Admin panel styles are kept as-is (admin area always has a light bg).
 */

/* ─────────────────────────────────────────
 * CSS Custom Properties – frontend widgets
 * ───────────────────────────────────────── */
.caldav-calendar,
.caldav-calendar-sidebar-container,
.caldav-calendar-block,
.caldav-calendar-widget-area {
    --caldav-text: var(--wp--style--root--color--text, inherit);
    --caldav-text-secondary: var(--wp--style--root--color--text, inherit);
    --caldav-bg: var(--wp--style--root--color--background, transparent);
    --caldav-bg-alternate: var(--wp--style--root--color--background, transparent);
    --caldav-border: var(--wp--style--root--color--border, currentColor);
    --caldav-accent: var(--wp--preset--color--accent, #0073aa);
    --caldav-highlight-bg: color-mix(in srgb, var(--caldav-text, currentColor) 6%, transparent);
    --caldav-events-bg:    color-mix(in srgb, var(--caldav-accent, currentColor) 10%, transparent);
    --caldav-hover-bg:     color-mix(in srgb, var(--caldav-text, currentColor) 8%, transparent);
    color: var(--caldav-text);
    color-scheme: light dark;
}

/* ─────────────────────────────────────────
 * Admin panel styles (unchanged)
 * ───────────────────────────────────────── */
.disabled-field { opacity: 0.5; }
.cct-log-container { margin-top: 15px; max-width: 100%; }
.cct-log-textarea {
    width: 100%; height: 300px; font-family: monospace; margin-bottom: 10px;
    background-color: #f9f9f9; border: 1px solid #ddd; padding: 10px; box-sizing: border-box;
}
.cct-log-actions { margin-bottom: 15px; display: flex; gap: 10px; }
.cct-log-actions button, .cct-log-actions input[type="submit"] { margin-right: 10px; }
#cct-test-result { margin-top: 15px; }
.cct-clear-log { background-color: #dc3232; border-color: #dc3232; color: white !important; }
.cct-clear-log:hover { background-color: #b32d2e !important; border-color: #b32d2e !important; color: white !important; }
.cron-interval-toggle { margin-top: 10px; }
.cron-interval-toggle button { margin-right: 10px; }
.cron-interval-option { margin-bottom: 10px; }
.cron-interval-option label { display: inline-block; width: 80px; font-weight: bold; }

/* ─────────────────────────────────────────
 * Frontend Calendar Display
 * ───────────────────────────────────────── */
.caldav-calendar {
    margin: 20px 0; padding: 15px;
    background: var(--caldav-bg);
    border: 1px solid var(--caldav-border);
    border-radius: 5px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.caldav-calendar.caldav-error {
    background: var(--caldav-highlight-bg); border-color: var(--caldav-border); color: inherit;
}
.caldav-title { margin-top: 0; margin-bottom: 10px; font-size: 1.5em; color: inherit; }
.caldav-name { margin-top: 0; margin-bottom: 15px; font-size: 1.1em; font-style: italic; opacity: 0.8; }
.caldav-no-events { font-style: italic; opacity: 0.6; }
.caldav-events-list { list-style: none; padding: 0; margin: 0; }
.caldav-event { padding: 12px 0; display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--caldav-border); }
.caldav-event:last-child { border-bottom: none; }
.caldav-event-date { font-weight: bold; margin-right: 15px; min-width: 100px; color: inherit; opacity: 0.85; }
.caldav-event-time { margin-right: 15px; opacity: 0.6; }
.caldav-event-summary { flex: 1; font-weight: 500; margin: 0 0 5px 0; }
.caldav-event-location { flex-basis: 100%; margin-top: 5px; margin-left: 115px; font-size: 0.9em; opacity: 0.55; }
.caldav-past-event { opacity: 0.5; }
.caldav-compact .caldav-event { padding: 8px 0; }
.caldav-compact .caldav-event-date, .caldav-compact .caldav-event-time { font-size: 0.9em; min-width: 80px; }
.caldav-compact .caldav-event-summary { font-size: 0.95em; }

/* ─────────────────────────────────────────
 * Widget Styles
 * ───────────────────────────────────────── */
.caldav-widget-events { list-style: none; padding: 0; margin: 0; }
.caldav-widget-event { padding: 10px 0; border-bottom: 1px solid var(--caldav-border); }
.caldav-widget-event:last-child { border-bottom: none; }
.caldav-widget-event-title { font-weight: 600; font-size: 1em; margin-bottom: 5px; color: inherit; }
.caldav-widget-event-datetime { font-size: 0.9em; opacity: 0.6; margin-bottom: 5px; }
.caldav-widget-event-date { font-weight: 500; }
.caldav-widget-event-time { margin-left: 5px; }
.caldav-widget-event-location { font-size: 0.85em; opacity: 0.55; margin-top: 5px; font-style: italic; }
.caldav-widget-event-description { font-size: 0.85em; opacity: 0.7; margin-top: 5px; line-height: 1.4; white-space: pre-line; }
.caldav-widget-error { font-size: 0.9em; padding: 10px; background: var(--caldav-highlight-bg);
    border: 1px solid var(--caldav-border); border-radius: 3px; color: inherit; }
.caldav-widget-no-events { opacity: 0.6; font-style: italic; padding: 10px 0; }

/* ─────────────────────────────────────────
 * Calendar Grid
 * ───────────────────────────────────────── */
.caldav-calendar-grid { margin: 15px 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.caldav-calendar-header { margin-bottom: 10px; }
.caldav-calendar-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.caldav-calendar-month-year { font-size: 1.2em; font-weight: 600; margin: 0; flex: 1; text-align: center; color: inherit; }
.caldav-nav-prev, .caldav-nav-next {
    background: transparent; border: 1px solid var(--caldav-border); border-radius: 3px;
    padding: 5px 10px; cursor: pointer; font-size: 1.5em; line-height: 1;
    transition: all 0.2s; min-width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center; color: inherit;
}
.caldav-nav-prev:hover, .caldav-nav-next:hover { background: var(--caldav-hover-bg); color: inherit; }
.caldav-nav-prev:active, .caldav-nav-next:active {
    background: color-mix(in srgb, var(--caldav-text, currentColor) 12%, transparent);
}
.caldav-calendar-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.caldav-calendar-table thead th { padding: 8px 4px; text-align: center; font-weight: 600; font-size: 0.85em;
    border-bottom: 2px solid var(--caldav-border); opacity: 0.7; }
.caldav-calendar-table tbody td { padding: 8px 4px; text-align: center; vertical-align: top;
    border: 1px solid var(--caldav-border); min-height: 40px; position: relative; }
.caldav-day { min-height: 40px; position: relative; }
.caldav-day-empty { background-color: transparent; }
.caldav-day-number { display: block; font-size: 0.9em; color: inherit; }
.caldav-day-has-events { background-color: var(--caldav-events-bg); cursor: pointer; position: relative; }
.caldav-day-has-events:hover { background-color: var(--caldav-hover-bg); }
.caldav-day-has-events .caldav-day-number { position: relative; z-index: 1; }
.caldav-day-has-events::before { content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%;
    background-color: var(--caldav-accent); z-index: 0; opacity: 0.15; }
.caldav-day-has-events:hover::before { opacity: 0.25; }
.caldav-day-today { background-color: var(--caldav-highlight-bg); font-weight: 600; }
.caldav-day-today.caldav-day-has-events { background-color: var(--caldav-events-bg); }
.caldav-day-link { display: block; text-decoration: none; color: inherit;
    width: 100%; height: 100%; padding: 4px; border-radius: 3px; }
.caldav-day-link:hover { background: var(--caldav-hover-bg); }
.caldav-event-indicator { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
.caldav-event-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
    background-color: var(--caldav-accent, currentColor); }

/* Calendar help tooltip */
.caldav-calendar-help { position: relative; margin-bottom: 10px; text-align: right; }
.caldav-help-icon { cursor: pointer; font-size: 1.2em; opacity: 0.5; transition: opacity 0.2s; }
.caldav-help-icon:hover { opacity: 1; }
.caldav-help-popup {
    position: absolute; top: 25px; right: 0;
    background: var(--caldav-bg, inherit); border: 1px solid var(--caldav-border);
    border-radius: 4px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000; max-width: 250px; font-size: 0.9em; line-height: 1.4; color: inherit;
}

/* ─────────────────────────────────────────
 * Events List Below Calendar
 * ───────────────────────────────────────── */
.caldav-events-list { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--caldav-border); }
.caldav-events-list h4 { font-size: 1em; margin: 0 0 10px 0; }
.caldav-events-list-items { list-style: none; padding: 0; margin: 0; }
.caldav-event-item { padding: 8px 0 8px 10px; border-bottom: 1px solid var(--caldav-border);
    border-left: 3px solid var(--caldav-accent, currentColor); }
.caldav-event-item:last-child { border-bottom: none; }
.caldav-event-item .caldav-event-date { font-weight: 600; margin-right: 10px; font-size: 0.9em; opacity: 0.65; }
.caldav-event-item .caldav-event-title { font-weight: 500; margin-right: 10px; }
.caldav-event-item .caldav-event-time { font-size: 0.85em; margin-right: 10px; opacity: 0.5; }
.caldav-event-item .caldav-event-location { font-size: 0.85em; opacity: 0.5; font-style: italic; }

/* ─────────────────────────────────────────
 * Calendar Themes
 * ───────────────────────────────────────── */
.caldav-theme-minimal .caldav-calendar-table { border: none; }
.caldav-theme-minimal .caldav-calendar-table thead th {
    border-bottom: 1px solid var(--caldav-border, currentColor); font-weight: 400; }
.caldav-theme-minimal .caldav-calendar-table tbody td {
    border: none; border-right: 1px solid var(--caldav-border, currentColor);
    border-bottom: 1px solid var(--caldav-border, currentColor); }
.caldav-theme-minimal .caldav-day-has-events { background-color: transparent; }
.caldav-theme-minimal .caldav-day-has-events .caldav-day-number { font-weight: 600; }
.caldav-theme-colorful .caldav-calendar-table thead th { background-color: var(--caldav-highlight-bg); }
.caldav-theme-colorful .caldav-day-has-events {
    background: linear-gradient(135deg, var(--caldav-events-bg) 0%,
        color-mix(in srgb, var(--caldav-accent, currentColor) 15%, transparent) 100%); }
.caldav-theme-colorful .caldav-day-today { background: var(--caldav-highlight-bg); }
.caldav-theme-colorful .caldav-day-today.caldav-day-has-events {
    background: linear-gradient(135deg, var(--caldav-highlight-bg) 0%, var(--caldav-events-bg) 100%); }