/* The Planner filter's chip and picker (js/modules/planner-filter-ui.js). The chip is the same 32px pill as the
   Today button beside it (planner-scope.css); filtered, it's tinted in the area's colour (--pf-color). */

.planner-filter {
    --pf-color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 32px;
    border: 1px solid var(--border-medium, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-md);
    background: var(--bg-primary, #FFFFFF);
    transition: background var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);
}

.planner-filter.is-active {
    border-color: var(--pf-color);
    background: color-mix(in srgb, var(--pf-color) 12%, var(--bg-primary, #FFFFFF));
}

.planner-filter-chip,
.planner-filter-clear {
    display: inline-flex;
    align-items: center;
    height: 100%;
    border: none;
    background: none;
    color: var(--text-primary, #1A1A2E);
    font: 500 var(--font-size-sm) 'Avenir Next', -apple-system, sans-serif;
    cursor: pointer;
}

.planner-filter-chip {
    gap: var(--space-2, 8px);
    padding: 0 var(--space-3, 12px);
    border-radius: var(--radius-md);
}

.planner-filter.is-active .planner-filter-chip { padding-right: var(--space-1, 4px); }

.planner-filter-chip:hover,
.planner-filter-clear:hover { background: var(--hover-light, rgba(0, 0, 0, 0.04)); }

.planner-filter-chip:focus-visible,
.planner-filter-clear:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.planner-filter-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
    background: var(--pf-color);
}

.planner-filter-label {
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-filter-chevron svg,
.planner-filter-clear svg { width: 14px; height: 14px; color: var(--text-secondary); }

.planner-filter-clear {
    justify-content: center;
    width: 28px;
    margin-right: 2px;
    border-radius: var(--radius-sm, 6px);
}

[hidden].planner-filter-dot,
[hidden].planner-filter-chevron,
.planner-filter-clear[hidden] { display: none; }

@media (max-width: 1360px) {
    .planner-filter-label { max-width: 9ch; }
}

/* The picker: fixed under the chip, rows as the Tasks sidebar's area filter draws them */
.planner-filter-picker {
    position: fixed;
    z-index: var(--z-dropdown, 1000);
    min-width: 220px;
    max-width: 300px;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    padding: var(--space-1, 4px);
    border: 1px solid var(--border-medium, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-lg);
    background: var(--bg-card, #FFFFFF);
    box-shadow: var(--shadow-3, 0 8px 24px rgba(0, 0, 0, 0.12));
    font-family: 'Avenir Next', -apple-system, sans-serif;
    outline: none;
}

.planner-filter-heading {
    padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
    font-size: var(--font-size-xs, 11px);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.planner-filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 32px;
    padding: 0 var(--space-3, 12px);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary, #1A1A2E);
    cursor: pointer;
}

.planner-filter-option.is-highlighted { background: var(--hover-light, rgba(0, 0, 0, 0.05)); }

.planner-filter-option[aria-selected="true"] { font-weight: 600; }

.planner-filter-option-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-circle);
}

.planner-filter-option-dot.is-all { background: var(--text-secondary); }
.planner-filter-option-dot.is-none { border: 1.5px solid var(--text-secondary); }

.planner-filter-option-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-filter-option-count {
    font-size: var(--font-size-xs, 12px);
    color: var(--text-secondary);
}

.planner-filter-find {
    width: calc(100% - 2 * var(--space-2, 8px));
    margin: var(--space-1, 4px) var(--space-2, 8px);
    padding: 6px var(--space-2, 8px);
    border: 1px solid var(--border-medium, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-sm, 6px);
    font: inherit;
    font-size: var(--font-size-sm);
}

@media (prefers-reduced-motion: reduce) {
    .planner-filter { transition: none; }
}

/* Filtered, the chip is wider (its colour dot and ×): Plan My Day keeps to its icon a little longer so the header
   stays on one row (planner-scope.css does the same below 1360px for everyone) */
@media (max-width: 1460px) {
    .planner-page-header:has(.planner-filter.is-active) .plan-my-day-btn span { display: none; }
    .planner-page-header:has(.planner-filter.is-active) .plan-my-day-btn { padding-inline: var(--space-2, 8px); }
}

/* …and the header's controls sit a little closer; in the desktop app's own width (it opens at 1280) the chip shows
   its ▾ rather than a separate × — All in the picker, or Show all under the list, clears it */
@media (max-width: 1460px) {
    .planner-page-header:has(.planner-filter.is-active) .planner-header-right { gap: var(--space-2, 8px); }
}
@media (max-width: 1360px) {
    .planner-filter.is-active .planner-filter-clear { display: none; }
    .planner-filter.is-active .planner-filter-chevron[hidden] { display: inline-flex; }
    .planner-filter.is-active .planner-filter-chip { padding-right: var(--space-3, 12px); }
}

/* Under the list (Day) or the grid (3 Days / Week): what the filter hides, overdue work always counted */
.planner-filter-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
    margin: var(--space-2, 8px) var(--space-4, 16px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-md);
    background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.planner-filter-footer[hidden],
.planner-filter-empty[hidden] { display: none; }

.planner-filter-show-all {
    border: none;
    background: none;
    padding: 2px 4px;
    border-radius: var(--radius-sm, 4px);
    color: var(--accent-blue, #4A90D9);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

.planner-filter-show-all:hover { text-decoration: underline; }
.planner-filter-show-all:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); }

/* A filtered span with no task left — never the motivational quote */
.planner-filter-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-6, 24px) var(--space-4, 16px);
    text-align: center;
    color: var(--text-secondary);
}

.planner-filter-empty-line {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    font-weight: 500;
    color: var(--text-primary);
}

.planner-filter-empty-more {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}