/* ============================================================================
   PENDING REMINDERS SECTION
   A premium, compact section that surfaces Apple Reminders items at the top
   of the Inbox. Designed to feel native to Cadeo — not bolted on.
   ============================================================================ */

.pending-reminders-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto 8px;
    padding: 0 0 8px;
}

/* Header row: icon + label + count badge + Import All */
.pending-reminders-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.pending-reminders-title {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex: 1;
    min-width: 0;
}

.pending-reminders-bell {
    flex-shrink: 0;
    color: var(--text-tertiary);
    opacity: 0.8;
}

.pending-reminders-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.pending-reminders-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent-blue-opacity-12);
    color: var(--accent-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    flex-shrink: 0;
}

/* "Import All" — minimal text link, not a CTA button */
.pending-reminders-import-all-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--accent-blue);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.85;
}

.pending-reminders-import-all-btn:hover {
    background: var(--accent-blue-opacity-8);
    opacity: 1;
}

.pending-reminders-import-all-btn:active {
    background: var(--accent-blue-opacity-12);
}

.pending-reminders-import-all-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pending-reminders-import-all-btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/* The list card container */
.pending-reminders-list {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

/* Individual reminder row */
.pending-reminder-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-4);
    cursor: pointer;
    transition: background var(--transition-fast);
    position: relative;
    border-bottom: 0.5px solid var(--border-light);
}

.pending-reminder-row:last-child {
    border-bottom: none;
}

.pending-reminder-row:hover {
    background: var(--bg-tertiary);
}

/* Left accent line on hover — a subtle signal this row is actionable */
.pending-reminder-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--accent-blue);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity var(--duration-normal) var(--ease-in-out),
                transform var(--duration-normal) var(--ease-in-out);
}

.pending-reminder-row:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* Reminder content: title + date chip */
.pending-reminder-content {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}

.pending-reminder-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--line-height-tight);
    flex-shrink: 1;
    min-width: 0;
}

/* Date chip — soft metadata, not competing with the title */
.pending-reminder-due-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    background: var(--accent-blue-opacity-8);
    color: var(--accent-blue);
    border-radius: var(--radius-full);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.pending-reminder-due-chip svg {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Import pill — hidden by default, slides in on row hover */
.pending-reminder-import-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 4px 10px;
    background: var(--accent-fill);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity var(--duration-normal) var(--ease-in-out),
                transform var(--duration-normal) var(--ease-in-out),
                background var(--transition-fast);
    pointer-events: none;
}

.pending-reminder-row:hover .pending-reminder-import-pill {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.pending-reminder-import-pill:hover {
    background: var(--accent-fill-hover);
}

.pending-reminder-import-pill:active {
    transform: scale(0.97);
}

.pending-reminder-import-pill:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pending-reminder-import-pill:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

/* Importing state on the row itself */
.pending-reminder-row.is-importing {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-in-out);
}

/* Separator between reminders section and task list */
.pending-reminders-divider {
    height: 1px;
    margin: 4px 16px 12px;
    background: var(--border-light);
    display: none; /* only shown when there are tasks below */
}

.pending-reminders-divider.visible {
    display: block;
}

/* Reduced motion: disable slide/scale animations */
@media (prefers-reduced-motion: reduce) {
    .pending-reminder-row::before,
    .pending-reminder-import-pill {
        transition: opacity var(--transition-fast);
        transform: none !important;
    }
}

/* ============================================================================
   END PENDING REMINDERS SECTION
   ============================================================================ */