@import '_content/TrackerShared/TrackerShared.84qyjs1wq4.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-lndmf3zz8y] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-lndmf3zz8y] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Modals/BadgesModal.razor.rz.scp.css */
.badges-modal[b-s1bdapsviq] {
    max-width: 540px;
    width: 100%;
}

.badges-section[b-s1bdapsviq] {
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border-light);
}

.badges-section:last-child[b-s1bdapsviq] {
    border-bottom: none;
}

.badges-section h4[b-s1bdapsviq] {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.level-section[b-s1bdapsviq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.level-display[b-s1bdapsviq] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.level-progress-bar[b-s1bdapsviq] {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    overflow: hidden;
}

.level-progress-fill[b-s1bdapsviq] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 999px;
    transition: width 240ms ease;
}

.level-meta[b-s1bdapsviq] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.level-lifetime[b-s1bdapsviq] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.badges-section .muted[b-s1bdapsviq] {
    color: var(--text-muted);
    font-size: 0.825rem;
    font-style: italic;
    margin: 0 0 0.5rem;
}

.badge-list[b-s1bdapsviq] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.badge-row[b-s1bdapsviq] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.875rem;
}

.badge-row.earned[b-s1bdapsviq] {
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-tertiary));
}

.badge-row.locked[b-s1bdapsviq] {
    opacity: 0.55;
    filter: grayscale(0.8);
}

.badge-row .bi[b-s1bdapsviq] {
    font-size: 1.2rem;
}

.badge-info[b-s1bdapsviq] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.badge-info strong[b-s1bdapsviq] {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge-meta[b-s1bdapsviq] {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.badge-xp[b-s1bdapsviq] {
    color: var(--accent-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

@media (max-width: 576px) {
    .badges-modal[b-s1bdapsviq] {
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
    }
}
/* /Components/Modals/ConnectGoogleCalendarModal.razor.rz.scp.css */
.google-cal-modal[b-yk88fdq2pn] {
    max-width: 560px;
    width: 100%;
}

.gcal-intro[b-yk88fdq2pn] {
    padding: 0.5rem 0.25rem 0.75rem;
}

.gcal-intro p[b-yk88fdq2pn] {
    margin: 0 0 1rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.gcal-bullets[b-yk88fdq2pn] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.gcal-bullets li[b-yk88fdq2pn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.gcal-bullets li i[b-yk88fdq2pn] {
    color: var(--accent-primary);
    font-size: 1.125rem;
}

.gcal-connect-btn[b-yk88fdq2pn] {
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.gcal-connected-header[b-yk88fdq2pn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
    border-radius: 8px;
}

.gcal-label[b-yk88fdq2pn] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.125rem;
}

.gcal-badge[b-yk88fdq2pn] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 8px;
    font-weight: 500;
}

.gcal-badge-warning[b-yk88fdq2pn] {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #b45309;
}

.gcal-section-hint[b-yk88fdq2pn] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

.gcal-calendar-list[b-yk88fdq2pn] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.gcal-calendar-row[b-yk88fdq2pn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.gcal-calendar-row:last-child[b-yk88fdq2pn] {
    border-bottom: none;
}

.gcal-calendar-info[b-yk88fdq2pn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.gcal-color-dot[b-yk88fdq2pn] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gcal-calendar-name[b-yk88fdq2pn] {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcal-chip[b-yk88fdq2pn] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    color: var(--accent-primary);
    border-radius: 8px;
}

.gcal-loading[b-yk88fdq2pn],
.gcal-error[b-yk88fdq2pn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--text-muted);
}

.gcal-error[b-yk88fdq2pn] {
    color: #dc2626;
    background: color-mix(in srgb, #ef4444 8%, transparent);
    border-radius: 8px;
}

.gcal-busy[b-yk88fdq2pn] {
    color: var(--text-muted);
}

.gcal-danger-zone[b-yk88fdq2pn] {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.gcal-disconnect-btn[b-yk88fdq2pn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.google-connected-badge[b-yk88fdq2pn] {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    background: color-mix(in srgb, #22c55e 20%, transparent);
    color: #15803d;
    border-radius: 8px;
    font-weight: 500;
}

.spinner[b-yk88fdq2pn] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-yk88fdq2pn 0.8s linear infinite;
}

@keyframes spin-b-yk88fdq2pn {
    to { transform: rotate(360deg); }
}

@media (max-width: 576px) {
    .google-cal-modal[b-yk88fdq2pn] {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        height: 100vh;
        padding-bottom: env(safe-area-inset-bottom);
    }
}
/* /Components/Modals/EventListManageModal.razor.rz.scp.css */
.modal-overlay[b-neunq3de00] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    animation: fadeIn-b-neunq3de00 0.2s ease-out;
    padding: 1rem;
}

@keyframes fadeIn-b-neunq3de00 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.eventlist-modal[b-neunq3de00] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 550px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-neunq3de00 0.3s ease-out;
}

@keyframes slideUp-b-neunq3de00 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-neunq3de00] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-neunq3de00] {
    margin: 0;
    color: var(--text-color);
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-neunq3de00] {
    color: var(--accent-primary);
}

.close-button[b-neunq3de00] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

@media (hover: hover) {
    .close-button:hover[b-neunq3de00] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.modal-body[b-neunq3de00] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.modal-footer[b-neunq3de00] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    gap: 0.75rem;
}

.footer-left[b-neunq3de00], .footer-right[b-neunq3de00] {
    display: flex;
    gap: 0.5rem;
}

.footer-right[b-neunq3de00] {
    margin-left: auto;
}

.form-section[b-neunq3de00] {
    margin-bottom: 1.5rem;
}

.form-section:last-child[b-neunq3de00] {
    margin-bottom: 0;
}

.section-header[b-neunq3de00] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.section-header .bi[b-neunq3de00] {
    color: var(--accent-primary);
}

.form-group[b-neunq3de00] {
    margin-bottom: 1rem;
}

.form-group label[b-neunq3de00] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-color);
}

.form-group label .bi[b-neunq3de00] {
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.form-control[b-neunq3de00] {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.2s;
}

.form-control:focus[b-neunq3de00] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

textarea.form-control[b-neunq3de00] {
    resize: vertical;
    min-height: 60px;
}

/* Color picker */
.color-picker[b-neunq3de00] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.color-option[b-neunq3de00] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.color-option.selected[b-neunq3de00] {
    border-color: var(--text-color);
    box-shadow: 0 0 0 3px var(--hover-bg);
    transform: scale(1.05);
}

.color-option .bi[b-neunq3de00] {
    color: white;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
    .color-option:hover[b-neunq3de00] {
        transform: scale(1.1);
    }
}

.custom-color-wrapper[b-neunq3de00] {
    position: relative;
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    flex: 1;
    min-width: 0;
}

.custom-color-input[b-neunq3de00] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-color-button[b-neunq3de00] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.custom-color-button span[b-neunq3de00] {
    color: white;
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Share section */
.share-signin-prompt[b-neunq3de00] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.share-signin-prompt .bi[b-neunq3de00] {
    font-size: 1rem;
    flex-shrink: 0;
}

.share-link-row[b-neunq3de00] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.share-link-input[b-neunq3de00] {
    flex: 1;
    font-size: 0.8rem;
    background: var(--bg-secondary);
}

.share-actions[b-neunq3de00] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Member list */
.member-list[b-neunq3de00] {
    margin-top: 1rem;
}

.member-list-header[b-neunq3de00] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.member-item[b-neunq3de00] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 0.375rem;
    background: var(--bg-secondary);
}

.member-info[b-neunq3de00] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.member-id[b-neunq3de00] {
    font-size: 0.8rem;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-badge[b-neunq3de00] {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    text-transform: uppercase;
}

.permission-badge.owner[b-neunq3de00] {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.permission-badge.editor[b-neunq3de00] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.permission-badge.viewer[b-neunq3de00] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
}

/* Delete confirmation */
.delete-confirm[b-neunq3de00] {
    text-align: center;
    padding: 2rem 1rem;
}

.delete-confirm h4[b-neunq3de00] {
    margin: 1rem 0 0.5rem;
    font-weight: 600;
}

.delete-confirm p[b-neunq3de00] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.alert-danger[b-neunq3de00] {
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.btn[b-neunq3de00] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s;
}

.btn-sm[b-neunq3de00] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.btn-outline-primary[b-neunq3de00] {
    background: transparent;
    border: 1.5px solid var(--accent-primary);
    color: var(--accent-primary);
}

.btn-outline-secondary[b-neunq3de00] {
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-outline-danger[b-neunq3de00] {
    background: transparent;
    border: 1.5px solid #ef4444;
    color: #ef4444;
}

.spinner-border-sm[b-neunq3de00] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125rem;
}

@media (max-width: 576px) {
    .eventlist-modal[b-neunq3de00] {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        width: 100%;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .modal-overlay[b-neunq3de00] {
        padding: 0;
    }

    .share-actions[b-neunq3de00] {
        flex-wrap: wrap;
    }
}
/* /Components/Modals/ExportImportModal.razor.rz.scp.css */
.modal-overlay[b-qutjlj0m0y] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    overscroll-behavior: contain;
}

.modal-content[b-qutjlj0m0y] {
    background-color: var(--card-bg, #fff);
    color: var(--text-primary, #333);
    border-radius: 8px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-header[b-qutjlj0m0y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.modal-header h3[b-qutjlj0m0y] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.btn-close[b-qutjlj0m0y] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
}

.modal-body[b-qutjlj0m0y] {
    padding: 1.5rem;
    overflow-y: auto;
}

.section-block h4[b-qutjlj0m0y] {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.file-drop-area[b-qutjlj0m0y] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--border-color, #e5e7eb);
    border-radius: 8px;
    transition: all 0.2s;
    background-color: var(--bg-secondary, #f9fafb);
    cursor: pointer;
}

.file-drop-area.drag-over[b-qutjlj0m0y] {
    border-color: var(--primary-color, #6366f1);
    background-color: rgba(99, 102, 241, 0.05);
}

.file-input[b-qutjlj0m0y] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-msg[b-qutjlj0m0y] {
    display: flex;
    align-items: center;
    color: var(--text-secondary, #6b7280);
}

.export-options[b-qutjlj0m0y] {
    background-color: var(--bg-secondary, #f9fafb);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color, #e5e7eb);
}

.form-check[b-qutjlj0m0y] {
    margin-bottom: 0.5rem;
}

.form-check:last-child[b-qutjlj0m0y] {
    margin-bottom: 0;
}

.alert[b-qutjlj0m0y] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.alert-danger[b-qutjlj0m0y] {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.alert-success[b-qutjlj0m0y] {
    background-color: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.alert-warning[b-qutjlj0m0y] {
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* Preview Summary Stats */
.preview-summary[b-qutjlj0m0y] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
}

.preview-stat[b-qutjlj0m0y] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #6b7280);
}

.preview-stat strong[b-qutjlj0m0y] {
    color: var(--text-primary, #333);
}

/* Category Selection */
.category-selection[b-qutjlj0m0y] {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    overflow: hidden;
}

.category-selection-header[b-qutjlj0m0y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary, #f9fafb);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.selection-links[b-qutjlj0m0y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.btn-link[b-qutjlj0m0y] {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color, #6366f1);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
}

@media (hover: hover) {
    .btn-link:hover[b-qutjlj0m0y] {
        text-decoration: underline;
    }
}

.category-list[b-qutjlj0m0y] {
    max-height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.category-preview-item[b-qutjlj0m0y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    cursor: pointer;
    transition: background-color 0.15s;
}

.category-preview-item:last-child[b-qutjlj0m0y] {
    border-bottom: none;
}

@media (hover: hover) {
    .category-preview-item:hover[b-qutjlj0m0y] {
        background-color: var(--bg-secondary, #f9fafb);
    }
}

.category-preview-item input[type="checkbox"][b-qutjlj0m0y] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--primary-color, #6366f1);
}

.category-info[b-qutjlj0m0y] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.category-name[b-qutjlj0m0y] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-meta[b-qutjlj0m0y] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
}

.duplicate-badge[b-qutjlj0m0y] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background-color: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* Importing Spinner */
.importing-spinner[b-qutjlj0m0y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #6b7280);
}

/* Import Summary */
.import-summary[b-qutjlj0m0y] {
    padding: 1rem;
    background-color: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
}

.summary-grid[b-qutjlj0m0y] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
}

.summary-item[b-qutjlj0m0y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 0.5rem;
}

.summary-item span:first-child[b-qutjlj0m0y] {
    font-size: 1.25rem;
    color: var(--primary-color, #6366f1);
}

.summary-item strong[b-qutjlj0m0y] {
    font-size: 1.25rem;
}

.summary-item span:last-child[b-qutjlj0m0y] {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
}

/* Mobile Fullscreen Modal */
@media (max-width: 576px) {
    .modal-overlay[b-qutjlj0m0y] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-qutjlj0m0y] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-qutjlj0m0y] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .btn-close[b-qutjlj0m0y] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-body[b-qutjlj0m0y] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn[b-qutjlj0m0y] {
        min-height: 48px;
    }

    .preview-summary[b-qutjlj0m0y] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .category-preview-item[b-qutjlj0m0y] {
        min-height: 48px;
    }

    .category-preview-item input[type="checkbox"][b-qutjlj0m0y] {
        width: 22px;
        height: 22px;
    }

    .summary-grid[b-qutjlj0m0y] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Dark mode overrides */
:global(body.dark-theme) .modal-content[b-qutjlj0m0y] {
    --card-bg: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --bg-secondary: #111827;
}

:global(body.dark-theme) .alert-danger[b-qutjlj0m0y] {
    background-color: rgba(185, 28, 28, 0.2);
    color: #fca5a5;
    border-color: rgba(185, 28, 28, 0.3);
}

:global(body.dark-theme) .alert-success[b-qutjlj0m0y] {
    background-color: rgba(21, 128, 61, 0.2);
    color: #86efac;
    border-color: rgba(21, 128, 61, 0.3);
}

:global(body.dark-theme) .alert-warning[b-qutjlj0m0y] {
    background-color: rgba(146, 64, 14, 0.2);
    color: #fcd34d;
    border-color: rgba(146, 64, 14, 0.3);
}

:global(body.dark-theme) .duplicate-badge[b-qutjlj0m0y] {
    background-color: rgba(146, 64, 14, 0.2);
    color: #fcd34d;
    border-color: rgba(146, 64, 14, 0.3);
}
/* /Components/Modals/ExtractEventsModal.razor.rz.scp.css */
.modal-backdrop[b-usudw9nlqy] {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop, rgba(0, 0, 0, 0.5));
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.extract-events-modal[b-usudw9nlqy] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 12px;
    width: min(720px, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.modal-header[b-usudw9nlqy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2[b-usudw9nlqy] {
    margin: 0;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-close[b-usudw9nlqy] {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover[b-usudw9nlqy] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body[b-usudw9nlqy] {
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.tab-toggle[b-usudw9nlqy] {
    display: flex;
    gap: 0.25rem;
    background: var(--bg-secondary);
    padding: 0.25rem;
    border-radius: 8px;
}

.tab-btn[b-usudw9nlqy] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
}

.tab-btn.active[b-usudw9nlqy] {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.input-section[b-usudw9nlqy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.text-input[b-usudw9nlqy] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem; /* >=16px to prevent iOS Safari zoom */
    resize: vertical;
    min-height: 8rem;
    font-family: inherit;
}

.text-input:focus[b-usudw9nlqy] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
    border-color: transparent;
}

.char-counter[b-usudw9nlqy] {
    align-self: flex-end;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.image-pick-btn[b-usudw9nlqy] {
    width: 100%;
    padding: 2rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-height: 8rem;
    font-size: 0.875rem;
}

.image-pick-btn:hover[b-usudw9nlqy] {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.image-pick-btn .bi[b-usudw9nlqy] {
    font-size: 2rem;
}

.image-preview[b-usudw9nlqy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.image-preview img[b-usudw9nlqy] {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-secondary);
}

.image-preview-meta[b-usudw9nlqy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.image-replace-btn[b-usudw9nlqy],
.image-remove-btn[b-usudw9nlqy] {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.813rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pdf-pick-btn[b-usudw9nlqy] {
    width: 100%;
    padding: 2rem 1rem;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-height: 8rem;
    font-size: 0.875rem;
}

.pdf-pick-btn:hover[b-usudw9nlqy] {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.pdf-pick-btn .bi[b-usudw9nlqy] {
    font-size: 2rem;
}

.pdf-input-hidden[b-usudw9nlqy] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pdf-preview[b-usudw9nlqy] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.pdf-preview .pdf-icon[b-usudw9nlqy] {
    font-size: 1.75rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.pdf-preview-meta[b-usudw9nlqy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pdf-name[b-usudw9nlqy] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pdf-size[b-usudw9nlqy] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pdf-replace-btn[b-usudw9nlqy],
.pdf-remove-btn[b-usudw9nlqy] {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.813rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.pdf-remove-btn[b-usudw9nlqy] {
    padding: 0.375rem 0.5rem;
}

.calendar-section[b-usudw9nlqy] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.calendar-section label[b-usudw9nlqy] {
    font-size: 0.813rem;
    color: var(--text-muted);
}

.calendar-select[b-usudw9nlqy] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    min-height: 48px;
}

.footer[b-usudw9nlqy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.btn-primary[b-usudw9nlqy],
.btn-secondary[b-usudw9nlqy] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.875rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-primary[b-usudw9nlqy] {
    background: var(--accent-primary);
    color: var(--accent-on-primary, white);
}

.btn-primary:disabled[b-usudw9nlqy] {
    background: var(--bg-secondary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.btn-secondary[b-usudw9nlqy] {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover[b-usudw9nlqy] {
    background: var(--bg-secondary);
}

.link-btn[b-usudw9nlqy] {
    background: transparent;
    border: 0;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.813rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

.link-btn:hover[b-usudw9nlqy] {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.processing[b-usudw9nlqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
}

.processing h3[b-usudw9nlqy] {
    margin: 0;
    font-size: 1rem;
}

.processing .hint[b-usudw9nlqy] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.813rem;
}

.spinner[b-usudw9nlqy] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--bg-secondary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin-b-usudw9nlqy 0.8s linear infinite;
}

.spinner-inline[b-usudw9nlqy] {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-usudw9nlqy 0.8s linear infinite;
    margin-right: 0.25rem;
    display: inline-block;
}

@keyframes spin-b-usudw9nlqy {
    to { transform: rotate(360deg); }
}

.error-section[b-usudw9nlqy],
.empty-section[b-usudw9nlqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
}

.error-section .bi[b-usudw9nlqy],
.empty-section .bi[b-usudw9nlqy] {
    font-size: 2rem;
    color: var(--text-muted);
}

.error-section p[b-usudw9nlqy],
.empty-section p[b-usudw9nlqy] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.results-header[b-usudw9nlqy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.capped-warning[b-usudw9nlqy] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent);
    color: var(--warning, #d97706);
    border-radius: 8px;
    font-size: 0.813rem;
    line-height: 1.4;
}

.capped-warning .bi[b-usudw9nlqy] {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* v2: recurrence chip + unroll toggle on each event card */
.recurrence-row[b-usudw9nlqy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.recurrence-chip[b-usudw9nlqy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recurrence-chip .bi[b-usudw9nlqy] {
    font-size: 0.813rem;
    flex-shrink: 0;
}

.unroll-toggle[b-usudw9nlqy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.unroll-toggle input[b-usudw9nlqy] {
    width: 0.875rem;
    height: 0.875rem;
    cursor: pointer;
}

.unroll-preview[b-usudw9nlqy] {
    color: var(--accent-primary);
    font-weight: 500;
    margin-left: 0.25rem;
}

.results-list[b-usudw9nlqy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.event-card[b-usudw9nlqy] {
    display: flex;
    gap: 0.625rem;
    padding: 0.625rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.event-card.selected[b-usudw9nlqy] {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 6%, transparent);
}

.event-checkbox[b-usudw9nlqy] {
    display: flex;
    align-items: flex-start;
    padding-top: 0.5rem;
    min-width: 1.25rem;
}

.event-checkbox input[b-usudw9nlqy] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.event-fields[b-usudw9nlqy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.event-row[b-usudw9nlqy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.event-title[b-usudw9nlqy] {
    flex: 1;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
}

.event-title:focus[b-usudw9nlqy],
.event-title:hover[b-usudw9nlqy] {
    border-color: var(--border-color);
    background: var(--bg-primary);
    outline: none;
}

.event-datetime[b-usudw9nlqy] {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    min-height: 36px;
}

.datetime-row[b-usudw9nlqy] {
    align-items: center;
}

.datetime-fields[b-usudw9nlqy] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
    flex-wrap: wrap;
}

.datetime-sep[b-usudw9nlqy] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.allday-toggle[b-usudw9nlqy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.813rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.allday-toggle input[b-usudw9nlqy] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.event-description[b-usudw9nlqy] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.813rem;
    resize: vertical;
    font-family: inherit;
    min-height: 2.5rem;
}

.confidence-badge[b-usudw9nlqy] {
    font-size: 0.688rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.confidence-badge.high[b-usudw9nlqy] {
    background: color-mix(in srgb, var(--success, #16a34a) 18%, transparent);
    color: var(--success, #16a34a);
}

.confidence-badge.medium[b-usudw9nlqy] {
    background: color-mix(in srgb, var(--warning, #d97706) 18%, transparent);
    color: var(--warning, #d97706);
}

.confidence-badge.low[b-usudw9nlqy] {
    background: var(--bg-primary);
    color: var(--text-muted);
}

@media (max-width: 576px) {
    .modal-backdrop[b-usudw9nlqy] {
        padding: 0;
    }
    .extract-events-modal[b-usudw9nlqy] {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .results-list[b-usudw9nlqy] {
        max-height: none;
    }
    .footer[b-usudw9nlqy] {
        flex-direction: column-reverse;
    }
    .footer .btn-primary[b-usudw9nlqy],
    .footer .btn-secondary[b-usudw9nlqy] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Modals/HabitSettingsModal.razor.rz.scp.css */
.settings-modal[b-1cgnx666w7] {
    max-width: 540px;
    width: 100%;
}

/* Each settings section is a card block. Card blocks separate the three concerns visually. */
.settings-section[b-1cgnx666w7] {
    padding: 1rem 1.125rem 1.125rem;
    margin-bottom: 0.875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.settings-section:last-child[b-1cgnx666w7] {
    margin-bottom: 0;
}

.settings-section h4[b-1cgnx666w7] {
    margin: 0 0 0.375rem;
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-help[b-1cgnx666w7] {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
    font-size: 0.813rem;
    line-height: 1.4;
}

/* Segmented toggle — connected pill buttons for one-tap window selection. */
.window-options[b-1cgnx666w7] {
    display: inline-flex;
    gap: 0;
    margin-bottom: 0.75rem;
    padding: 2px;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    flex-wrap: wrap;
}

.window-option[b-1cgnx666w7] {
    padding: 0.5rem 1rem;
    font-size: 0.813rem;
    color: var(--text-secondary);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    min-height: 36px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.window-option.selected[b-1cgnx666w7] {
    background: var(--accent-primary);
    color: #ffffff;
    font-weight: 600;
}

@media (hover: hover) {
    .window-option:not(.selected):hover[b-1cgnx666w7] {
        background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
        color: var(--text-primary);
    }
}

/* Modern toggle-switch styling for display checkboxes. */
.settings-checkbox[b-1cgnx666w7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.settings-checkbox:not(:last-child)[b-1cgnx666w7] {
    border-bottom: 1px solid var(--border-light);
}

.settings-checkbox input[type="checkbox"][b-1cgnx666w7] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 22px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
    margin: 0;
}

.settings-checkbox input[type="checkbox"][b-1cgnx666w7]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--card-bg);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 160ms ease, background 160ms ease;
}

.settings-checkbox input[type="checkbox"]:checked[b-1cgnx666w7] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.settings-checkbox input[type="checkbox"]:checked[b-1cgnx666w7]::after {
    transform: translateX(18px);
    background: #ffffff;
}

.settings-checkbox input[type="checkbox"]:focus-visible[b-1cgnx666w7] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.settings-checkbox span[b-1cgnx666w7] {
    flex: 1;
}

.reward-row[b-1cgnx666w7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 0.5rem;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-light);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.reward-row.earned[b-1cgnx666w7] {
    border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 5%, var(--card-bg));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.reward-info[b-1cgnx666w7] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.reward-info strong[b-1cgnx666w7] {
    color: var(--text-primary);
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reward-cost[b-1cgnx666w7] {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.reward-actions[b-1cgnx666w7] {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-shrink: 0;
}

.reward-chip[b-1cgnx666w7] {
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
    color: var(--text-muted);
}

.reward-chip.claimed[b-1cgnx666w7] {
    background: color-mix(in srgb, var(--success, #10b981) 15%, transparent);
    color: var(--success, #10b981);
}

.btn-icon[b-1cgnx666w7] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    font-size: 0.95rem;
    min-width: 32px;
    min-height: 32px;
}

@media (hover: hover) {
    .btn-icon:hover[b-1cgnx666w7] {
        background: color-mix(in srgb, var(--danger) 10%, transparent);
        color: var(--danger);
    }
}

.btn-sm[b-1cgnx666w7] {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    min-height: 32px;
}

.add-reward-form[b-1cgnx666w7] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem;
    margin: 0.625rem 0;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.reward-cost-input[b-1cgnx666w7] {
    max-width: 140px;
}

.add-reward-actions[b-1cgnx666w7] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.add-reward-btn[b-1cgnx666w7] {
    margin-top: 0.625rem;
    width: 100%;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border: 1px dashed color-mix(in srgb, var(--accent-primary) 45%, transparent);
    color: var(--accent-primary);
    font-weight: 600;
}

@media (hover: hover) {
    .add-reward-btn:hover[b-1cgnx666w7] {
        background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
        border-style: solid;
    }
}

.error-message[b-1cgnx666w7] {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
}

@media (max-width: 576px) {
    .settings-modal[b-1cgnx666w7] {
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
    }

    .reward-row[b-1cgnx666w7] {
        flex-wrap: wrap;
    }
}
/* /Components/Modals/NumericEntryModal.razor.rz.scp.css */
/* ----------------------------------------------------------------------------
 * Log-progress modal (numeric/duration habits).
 *
 * Habit color drives the accent across the modal — dot, progress bar, focus ring,
 * preset chips, save button. Passed through `--habit-color` on the modal root.
 *
 * Layout philosophy: the modal IS the card. Internal sections are separated by
 * small gaps and thin dividers, not nested-card decoration. Tighter than the
 * other tracker modals on purpose — this modal exists for a single, fast action.
 * -------------------------------------------------------------------------- */

.numeric-entry-modal[b-v6k7hrxr4g] {
    max-width: 440px;
    width: 100%;
}

/* Tighter modal chrome than the global defaults. The logging flow is focused;
   big 2rem padding on a 440px modal feels empty. */
.numeric-entry-modal .modal-header[b-v6k7hrxr4g] {
    padding: 0.875rem 1.125rem;
}

.numeric-entry-modal .modal-header h3[b-v6k7hrxr4g] {
    font-size: 1rem;
    font-weight: 600;
}

.numeric-entry-modal .modal-header h3 .bi[b-v6k7hrxr4g] {
    color: var(--habit-color, var(--accent-primary));
    font-size: 1rem;
}

.numeric-entry-modal .modal-body[b-v6k7hrxr4g] {
    padding: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.numeric-entry-modal .modal-footer[b-v6k7hrxr4g] {
    padding: 0.875rem 1.125rem;
    gap: 0.5rem;
}

/* -------- Hero bar -------- */

.hero-bar[b-v6k7hrxr4g] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 6%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--habit-color, var(--accent-primary)) 18%, var(--border-light));
    border-radius: 10px;
}

.hero-row[b-v6k7hrxr4g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.hero-title[b-v6k7hrxr4g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.hero-dot[b-v6k7hrxr4g] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--habit-color, var(--accent-primary));
    flex-shrink: 0;
}

.hero-name[b-v6k7hrxr4g] {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-stats[b-v6k7hrxr4g] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-shrink: 0;
}

.hero-total[b-v6k7hrxr4g] {
    font-size: 0.938rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.hero-unit[b-v6k7hrxr4g] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.2rem;
}

.hero-pct[b-v6k7hrxr4g] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 18%, transparent);
    color: var(--habit-color, var(--accent-primary));
    font-size: 0.688rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hero-pct.complete[b-v6k7hrxr4g] {
    background: var(--habit-color, var(--accent-primary));
    color: #ffffff;
}

.hero-progress[b-v6k7hrxr4g] {
    height: 4px;
    background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 10%, var(--bg-tertiary));
    border-radius: 999px;
    overflow: hidden;
}

.hero-progress-fill[b-v6k7hrxr4g] {
    height: 100%;
    background: var(--habit-color, var(--accent-primary));
    border-radius: 999px;
    transition: width 240ms ease;
}

/* -------- Amount input (hero of the form) -------- */

.amount-wrap[b-v6k7hrxr4g] {
    position: relative;
}

.amount-input[b-v6k7hrxr4g] {
    width: 100%;
    height: 64px;
    padding: 0 3.25rem 0 1rem;
    font-size: 2.25rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    background: var(--card-bg);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    color: var(--text-primary);
    transition: border-color 120ms ease, box-shadow 120ms ease;
    /* 16px floor already enforced globally; we're well above it. */
}

.amount-input[b-v6k7hrxr4g]::placeholder {
    color: var(--text-muted);
    opacity: 0.45;
    font-weight: 600;
}

.amount-input:focus[b-v6k7hrxr4g] {
    outline: none;
    border-color: var(--habit-color, var(--accent-primary));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--habit-color, var(--accent-primary)) 18%, transparent);
}

/* Hide browser number spinners — the presets cover that role more cleanly. */
.amount-input[b-v6k7hrxr4g]::-webkit-outer-spin-button,
.amount-input[b-v6k7hrxr4g]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.amount-input[type="number"][b-v6k7hrxr4g] {
    -moz-appearance: textfield;
}

.amount-unit-suffix[b-v6k7hrxr4g] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-muted);
    pointer-events: none;
    user-select: none;
}

/* -------- Preset chips -------- */

.preset-row[b-v6k7hrxr4g] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;
}

.preset-button[b-v6k7hrxr4g] {
    height: 40px;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--habit-color, var(--accent-primary));
    background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--habit-color, var(--accent-primary)) 22%, transparent);
    border-radius: 999px;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background 120ms ease, transform 80ms ease, border-color 120ms ease;
}

@media (hover: hover) {
    .preset-button:hover[b-v6k7hrxr4g] {
        background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 18%, transparent);
        border-color: var(--habit-color, var(--accent-primary));
    }
}

.preset-button:active[b-v6k7hrxr4g] {
    transform: scale(0.95);
}

/* -------- Merged details collapsible -------- */

.details-row[b-v6k7hrxr4g] {
    margin: -0.125rem 0;
}

.details-summary[b-v6k7hrxr4g] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.125rem;
    font-size: 0.813rem;
    color: var(--text-secondary);
    user-select: none;
    border-radius: 6px;
    transition: color 120ms ease;
}

.details-summary[b-v6k7hrxr4g]::-webkit-details-marker { display: none; }

@media (hover: hover) {
    .details-summary:hover[b-v6k7hrxr4g] {
        color: var(--text-primary);
    }
}

.details-chevron[b-v6k7hrxr4g] {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform 160ms ease;
}

.details-row[open] .details-chevron[b-v6k7hrxr4g] {
    transform: rotate(90deg);
    color: var(--habit-color, var(--accent-primary));
}

.details-summary-text[b-v6k7hrxr4g] {
    flex: 1;
    font-weight: 500;
}

.details-recorded[b-v6k7hrxr4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.details-recorded .bi[b-v6k7hrxr4g] {
    color: var(--habit-color, var(--accent-primary));
    font-size: 0.813rem;
}

.details-body[b-v6k7hrxr4g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.5rem 0.25rem;
    margin-top: 0.25rem;
    border-left: 2px solid color-mix(in srgb, var(--habit-color, var(--accent-primary)) 24%, transparent);
}

.details-notes[b-v6k7hrxr4g] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.details-notes:focus[b-v6k7hrxr4g] {
    outline: none;
    border-color: var(--habit-color, var(--accent-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--habit-color, var(--accent-primary)) 14%, transparent);
}

.details-emoji-row[b-v6k7hrxr4g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.details-emoji-label[b-v6k7hrxr4g] {
    width: 22px;
    text-align: center;
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.emoji-picker[b-v6k7hrxr4g] {
    display: flex;
    gap: 0.25rem;
    flex: 1;
}

.emoji-btn[b-v6k7hrxr4g] {
    flex: 1;
    height: 36px;
    padding: 0;
    font-size: 1.125rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

@media (hover: hover) {
    .emoji-btn:hover[b-v6k7hrxr4g] {
        background: var(--bg-tertiary);
    }
}

.emoji-btn.selected[b-v6k7hrxr4g] {
    border-color: var(--habit-color, var(--accent-primary));
    background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 14%, transparent);
    transform: scale(1.06);
}

/* -------- Error banner -------- */

.error-message[b-v6k7hrxr4g] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
    border-radius: 8px;
    font-size: 0.813rem;
    line-height: 1.4;
}

.error-message .bi[b-v6k7hrxr4g] {
    font-size: 0.938rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* -------- Entries divider (replaces uppercase banner) -------- */

.entries-divider[b-v6k7hrxr4g] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.25rem;
}

.entries-divider-line[b-v6k7hrxr4g] {
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.entries-divider-label[b-v6k7hrxr4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.entries-divider-count[b-v6k7hrxr4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 0.375rem;
    background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 14%, transparent);
    color: var(--habit-color, var(--accent-primary));
    border-radius: 999px;
    font-size: 0.688rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    letter-spacing: 0;
}

/* -------- Footer buttons -------- */

.numeric-entry-modal .modal-footer .btn[b-v6k7hrxr4g] {
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 1.5px solid var(--border-light);
    background: var(--card-bg);
    color: var(--text-primary);
    transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

@media (hover: hover) {
    .numeric-entry-modal .modal-footer .btn.btn-secondary:hover[b-v6k7hrxr4g] {
        background: var(--bg-tertiary);
    }
}

.btn-save-amount[b-v6k7hrxr4g] {
    background: var(--habit-color, var(--accent-primary)) !important;
    border-color: var(--habit-color, var(--accent-primary)) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--habit-color, var(--accent-primary)) 30%, transparent);
}

@media (hover: hover) {
    .btn-save-amount:hover[b-v6k7hrxr4g] {
        background: color-mix(in srgb, var(--habit-color, var(--accent-primary)) 88%, black) !important;
    }
}

.btn-save-amount:active[b-v6k7hrxr4g] {
    transform: translateY(1px);
}

.btn-save-amount:disabled[b-v6k7hrxr4g] {
    opacity: 0.6;
    cursor: wait;
    box-shadow: none;
}

.btn-ghost[b-v6k7hrxr4g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.55rem 0.75rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.813rem;
    border-radius: 8px;
    transition: color 120ms ease, background 120ms ease;
}

@media (hover: hover) {
    .btn-ghost:hover[b-v6k7hrxr4g] {
        color: var(--text-primary);
        background: var(--bg-tertiary);
    }
}

.footer-spacer[b-v6k7hrxr4g] {
    flex: 1;
}

/* -------- Mobile -------- */

@media (max-width: 576px) {
    .numeric-entry-modal[b-v6k7hrxr4g] {
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
    }

    .numeric-entry-modal .modal-body[b-v6k7hrxr4g] {
        padding: 1rem;
        gap: 0.875rem;
    }

    .numeric-entry-modal .modal-header[b-v6k7hrxr4g] {
        padding: calc(env(safe-area-inset-top, 0px) + 0.875rem) 1rem 0.875rem;
    }

    .numeric-entry-modal .modal-footer[b-v6k7hrxr4g] {
        padding: 0.875rem 1rem calc(env(safe-area-inset-bottom, 0px) + 0.875rem);
    }

    .amount-input[b-v6k7hrxr4g] {
        height: 60px;
        font-size: 2rem;
    }

    .preset-row[b-v6k7hrxr4g] {
        grid-template-columns: repeat(2, 1fr);
    }

    .preset-button[b-v6k7hrxr4g] {
        height: 48px;
    }

    .emoji-btn[b-v6k7hrxr4g] {
        height: 44px;
        font-size: 1.25rem;
    }

    .hero-name[b-v6k7hrxr4g] {
        font-size: 0.875rem;
    }

    .numeric-entry-modal .modal-footer .btn[b-v6k7hrxr4g] {
        min-height: 44px;
        padding: 0.6rem 1rem;
    }
}
/* /Components/Modals/PauseHabitModal.razor.rz.scp.css */
.pause-modal[b-3z9m6du7yb] {
    max-width: 28rem;
    width: calc(100% - 2rem);
}

.pause-explanation[b-3z9m6du7yb] {
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.pause-form-row[b-3z9m6du7yb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.pause-form-row label[b-3z9m6du7yb] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.pause-form-row input[type="date"][b-3z9m6du7yb] {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg, var(--card-bg));
    color: var(--text-primary);
    /* 16px minimum to prevent iOS Safari zoom (mobile rule 43). */
    font-size: 1rem;
}

.pause-open-ended-row[b-3z9m6du7yb] {
    margin-bottom: 0.5rem;
}

.pause-open-ended-label[b-3z9m6du7yb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 400;
    color: var(--text-primary);
}

.pause-open-ended-label input[type="checkbox"][b-3z9m6du7yb] {
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
}

.pause-error[b-3z9m6du7yb] {
    color: var(--danger-color, #ef4444);
    background: color-mix(in srgb, var(--danger-color, #ef4444) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color, #ef4444) 24%, transparent);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.pause-reminder-note[b-3z9m6du7yb] {
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

@media (max-width: 576px) {
    .pause-modal[b-3z9m6du7yb] {
        max-width: 100%;
        width: 100%;
        min-height: 50vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
    }
}
/* /Components/Modals/RetroactiveConfirmationModal.razor.rz.scp.css */
.retroactive-modal[b-e7exoaps21] {
    max-width: 460px;
    width: 100%;
}

.retro-explanation[b-e7exoaps21] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.retro-summary[b-e7exoaps21] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-variant-numeric: tabular-nums;
}

.retro-summary strong[b-e7exoaps21] {
    color: var(--text-primary);
    font-size: 1rem;
}

.retro-summary span[b-e7exoaps21] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.retroactive-modal label[b-e7exoaps21] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.retroactive-modal textarea[b-e7exoaps21] {
    resize: vertical;
    min-height: 60px;
}

@media (max-width: 576px) {
    .retroactive-modal[b-e7exoaps21] {
        max-width: 100%;
        border-radius: 0;
        min-height: 100dvh;
    }
}
/* /Components/Modals/RewardCelebrationModal.razor.rz.scp.css */
.celebration-overlay[b-0nz4yhguug] {
    backdrop-filter: blur(2px);
}

.celebration-modal[b-0nz4yhguug] {
    max-width: 420px;
    width: 100%;
    padding: 2rem 1.5rem;
    text-align: center;
    align-items: center;
}

.celebration-burst[b-0nz4yhguug] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--streak-color) 18%, var(--bg-tertiary));
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--streak-color) 8%, transparent);
    animation: celebration-pop-b-0nz4yhguug 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.celebration-burst .bi[b-0nz4yhguug] {
    font-size: 3rem;
}

.celebration-modal h3[b-0nz4yhguug] {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.celebration-name[b-0nz4yhguug] {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.celebration-desc[b-0nz4yhguug] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
}

.celebration-xp[b-0nz4yhguug] {
    margin: 0 0 1.25rem;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.celebration-dismiss[b-0nz4yhguug] {
    min-width: 160px;
}

@keyframes celebration-pop-b-0nz4yhguug {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 576px) {
    .celebration-modal[b-0nz4yhguug] {
        max-width: calc(100% - 2rem);
        margin: 1rem;
    }
}
/* /Components/Modals/TagManagementModal.razor.rz.scp.css */
/* TagManagementModal component styles */

/* Base modal styles */
.modal-overlay[b-mykwuzipg9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn-b-mykwuzipg9 0.15s ease-out forwards;
    overscroll-behavior: contain;
}

@keyframes fadeIn-b-mykwuzipg9 {
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.6);
    }
}

.modal-content[b-mykwuzipg9] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-mykwuzipg9 0.3s ease-out;
}

@keyframes slideUp-b-mykwuzipg9 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-mykwuzipg9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-mykwuzipg9] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.btn-close[b-mykwuzipg9] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-close:hover[b-mykwuzipg9] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.modal-footer[b-mykwuzipg9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary, var(--card-bg));
}

/* Specific TagManagement styles */
.modal-tag-management[b-mykwuzipg9] {
    max-width: 480px;
    width: 100%;
}

.modal-tag-management .modal-body[b-mykwuzipg9] {
    padding: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

/* Limits info */
.tag-limits-info[b-mykwuzipg9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Create section */
.tag-create-section[b-mykwuzipg9] {
    margin-bottom: 1.5rem;
}

.tag-create-form[b-mykwuzipg9] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tag-name-input[b-mykwuzipg9] {
    flex: 1;
    min-width: 0;
}

.tag-color-select[b-mykwuzipg9] {
    position: relative;
}

.btn-color-select[b-mykwuzipg9] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--border-color, #e5e7eb);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-color-select:hover[b-mykwuzipg9] {
        transform: scale(1.1);
        border-color: var(--text-primary);
    }
}

.color-picker-dropdown[b-mykwuzipg9] {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    z-index: 1010;
    min-width: 144px;
}

.color-option[b-mykwuzipg9] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .color-option:hover[b-mykwuzipg9] {
        transform: scale(1.1);
    }
}

.color-option.selected[b-mykwuzipg9] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--card-bg, white);
}

.btn-create-tag[b-mykwuzipg9] {
    white-space: nowrap;
}

/* Tag list section */
.tag-list-section[b-mykwuzipg9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tag-list-item[b-mykwuzipg9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .tag-list-item:hover[b-mykwuzipg9] {
        border-color: var(--primary-color, #6366f1);
    }
}

.tag-list-item.editing[b-mykwuzipg9] {
    background: var(--bg-secondary, #f9fafb);
}

.tag-color-dot[b-mykwuzipg9] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-item-name[b-mykwuzipg9] {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--text-primary);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) {
    .tag-item-name:hover[b-mykwuzipg9] {
        color: var(--primary-color, #6366f1);
    }
}

.tag-usage-count[b-mykwuzipg9] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f3f4f6);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    min-width: 1.5rem;
    text-align: center;
}

.tag-edit-input[b-mykwuzipg9] {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
}

.tag-edit-input.is-invalid[b-mykwuzipg9] {
    border-color: var(--danger-color, #ef4444);
}

.tag-list-item-wrapper[b-mykwuzipg9] {
    display: flex;
    flex-direction: column;
}

.tag-edit-error[b-mykwuzipg9] {
    font-size: 0.75rem;
    color: var(--danger-color, #ef4444);
    padding: 0.25rem 0.75rem 0;
}

.btn-tag-action[b-mykwuzipg9] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    opacity: 0;
}

@media (hover: hover) {
    .tag-list-item:hover .btn-tag-action[b-mykwuzipg9] {
        opacity: 1;
    }
}

@media (hover: none) {
    .btn-tag-action[b-mykwuzipg9] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .btn-tag-action:hover[b-mykwuzipg9] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

@media (hover: hover) {
    .btn-tag-action.btn-delete:hover[b-mykwuzipg9] {
        color: var(--danger-color, #ef4444);
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Empty state */
.tag-empty-state[b-mykwuzipg9] {
    text-align: center;
    padding: 2rem;
    color: var(--text-secondary);
}

.tag-empty-state .bi-tags[b-mykwuzipg9] {
    font-size: 2.5rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
    display: block;
}

.tag-empty-state p[b-mykwuzipg9] {
    margin: 0.25rem 0;
}

.tag-empty-state .text-muted[b-mykwuzipg9] {
    font-size: 0.875rem;
}

/* Loading state */
.loading-container[b-mykwuzipg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
}

/* Dark theme adjustments */
:root.dark-theme .tag-list-item[b-mykwuzipg9] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

:root.dark-theme .tag-list-item.editing[b-mykwuzipg9] {
    background: var(--bg-secondary);
}

:root.dark-theme .color-picker-dropdown[b-mykwuzipg9] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* Mobile responsive */
@media (max-width: 576px) {
    .modal-overlay[b-mykwuzipg9] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content.modal-tag-management[b-mykwuzipg9] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-mykwuzipg9] {
        padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) 1.5rem 1.25rem;
        flex-shrink: 0;
    }

    .modal-tag-management .modal-body[b-mykwuzipg9] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
    }

    .modal-footer[b-mykwuzipg9] {
        padding: 1rem 1.5rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
    }

    .btn-close[b-mykwuzipg9] {
        min-width: 48px;
        min-height: 48px;
    }

    .tag-create-form[b-mykwuzipg9] {
        flex-wrap: wrap;
    }

    .tag-name-input[b-mykwuzipg9] {
        flex: 1 1 100%;
        order: 1;
        margin-bottom: 0.5rem;
        font-size: 16px; /* Prevent iOS zoom */
    }

    .tag-color-select[b-mykwuzipg9] {
        order: 2;
    }

    .btn-create-tag[b-mykwuzipg9] {
        order: 3;
        flex: 1;
    }

    .btn-tag-action[b-mykwuzipg9] {
        opacity: 1;
    }

    .tag-edit-input[b-mykwuzipg9] {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .color-picker-dropdown[b-mykwuzipg9] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: none;
        border-radius: 16px 16px 0 0;
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .color-option[b-mykwuzipg9] {
        width: 36px;
        height: 36px;
    }
}
/* /Components/Modals/TaskCalendarSettingsModal.razor.rz.scp.css */
.modal-overlay[b-7h4hivgt39] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.modal-content.task-calendar-modal[b-7h4hivgt39] {
    background: var(--card-bg, var(--bg-primary));
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    -webkit-overflow-scrolling: touch;
}

.modal-header[b-7h4hivgt39] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-7h4hivgt39] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
}

.close-button[b-7h4hivgt39] {
    background: transparent;
    border: none;
    font-size: 1.125rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.close-button:hover[b-7h4hivgt39] {
    background: var(--hover-bg);
}

.modal-body[b-7h4hivgt39] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.form-section[b-7h4hivgt39] {
    margin-bottom: 1.25rem;
}

.form-section:last-child[b-7h4hivgt39] {
    margin-bottom: 0;
}

.form-hint[b-7h4hivgt39] {
    margin: 0.25rem 0 0 3.5rem;
    font-size: 0.813rem;
    color: var(--text-muted);
}

.toggle-label[b-7h4hivgt39] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem 0;
    min-height: 48px;
}

.toggle-input[b-7h4hivgt39] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.toggle-input[b-7h4hivgt39]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.toggle-input:checked[b-7h4hivgt39] {
    background: var(--accent-primary);
}

.toggle-input:checked[b-7h4hivgt39]::after {
    transform: translateX(20px);
    background: white;
}

.toggle-input:disabled[b-7h4hivgt39] {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-text[b-7h4hivgt39] {
    font-size: 0.938rem;
    color: var(--text-color);
}

.inline-notice[b-7h4hivgt39] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-color);
}

.modal-footer[b-7h4hivgt39] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

.btn[b-7h4hivgt39] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.938rem;
    cursor: pointer;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.btn-secondary[b-7h4hivgt39] {
    background: var(--bg-secondary);
    color: var(--text-color);
    border-color: var(--border-color);
}

.btn-primary[b-7h4hivgt39] {
    background: var(--accent-primary);
    color: white;
}

.btn-primary:disabled[b-7h4hivgt39] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .modal-overlay[b-7h4hivgt39] {
        padding: 0;
    }

    .modal-content.task-calendar-modal[b-7h4hivgt39] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
        padding-top: env(safe-area-inset-top);
    }
}
/* /Components/Modals/WeatherDetailModal.razor.rz.scp.css */
.modal-overlay[b-a3rs0alxqx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    animation: fade-in-b-a3rs0alxqx 160ms ease;
}

@keyframes fade-in-b-a3rs0alxqx { from { opacity: 0; } to { opacity: 1; } }

.modal-content.weather-detail-modal[b-a3rs0alxqx] {
    background: var(--card-bg, var(--bg-primary));
    border-radius: 16px;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    -webkit-overflow-scrolling: touch;
    animation: pop-in-b-a3rs0alxqx 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes pop-in-b-a3rs0alxqx {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.modal-header[b-a3rs0alxqx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title-wrap h3[b-a3rs0alxqx] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: -0.01em;
}

.modal-subtitle[b-a3rs0alxqx] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.813rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.close-button[b-a3rs0alxqx] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.938rem;
}

@media (hover: hover) {
    .close-button:hover[b-a3rs0alxqx] { background: var(--hover-bg); color: var(--text-color); }
}

.modal-body[b-a3rs0alxqx] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Loading / empty states */

.loading-state[b-a3rs0alxqx], .empty-state[b-a3rs0alxqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.empty-state .bi[b-a3rs0alxqx] { font-size: 2rem; color: var(--text-muted); opacity: 0.6; }

/* Day-nav row */

.day-nav[b-a3rs0alxqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.day-nav-btn[b-a3rs0alxqx] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-color);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.day-nav-btn:disabled[b-a3rs0alxqx] {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (hover: hover) {
    .day-nav-btn:not(:disabled):hover[b-a3rs0alxqx] {
        background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
        transform: translateY(-1px);
    }
}

.day-nav-label[b-a3rs0alxqx] {
    min-width: 4rem;
    text-align: center;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.813rem;
}

/* Summary row — big icon + high/low + condition */

.summary-row[b-a3rs0alxqx] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 12%, transparent),
        color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 4%, transparent));
    border: 1px solid color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 20%, transparent);
    border-radius: 12px;
}

.summary-icon[b-a3rs0alxqx] {
    font-size: 3rem;
    color: var(--weather-tint, var(--accent-primary));
    line-height: 1;
}

.summary-main[b-a3rs0alxqx] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-temp-hi[b-a3rs0alxqx] {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text-color);
}

.summary-temp-lo[b-a3rs0alxqx] {
    font-size: 0.813rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: 0.25rem;
    align-items: baseline;
}

.summary-temp-lo .muted[b-a3rs0alxqx] { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.688rem; }

.summary-meta[b-a3rs0alxqx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
    justify-self: end;
}

.summary-condition[b-a3rs0alxqx] {
    font-size: 0.938rem;
    font-weight: 500;
    color: var(--text-color);
}

.summary-pop[b-a3rs0alxqx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.813rem;
    color: var(--weather-tint, #3b82f6);
    background: color-mix(in srgb, var(--weather-tint, #3b82f6) 12%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* Hourly strip */

.hourly-label[b-a3rs0alxqx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.5rem 0;
}

.hourly-strip[b-a3rs0alxqx] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
    margin: 0 -0.25rem;
}

.hourly-strip[b-a3rs0alxqx]::-webkit-scrollbar { height: 6px; }
.hourly-strip[b-a3rs0alxqx]::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 30%, transparent);
    border-radius: 3px;
}

.hourly-card[b-a3rs0alxqx] {
    flex: 0 0 auto;
    width: 88px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

@media (hover: hover) {
    .hourly-card:hover[b-a3rs0alxqx] {
        background: color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 8%, var(--bg-secondary));
        border-color: color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 30%, var(--border-color));
        transform: translateY(-1px);
    }
}

.hourly-time[b-a3rs0alxqx] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.hourly-icon[b-a3rs0alxqx] {
    font-size: 1.5rem;
    color: var(--weather-tint, var(--accent-primary));
    line-height: 1;
}

.hourly-temp[b-a3rs0alxqx] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.hourly-stats[b-a3rs0alxqx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    align-items: center;
}

.stat[b-a3rs0alxqx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.stat-icon[b-a3rs0alxqx] { font-size: 0.75rem; }
.stat-icon-water[b-a3rs0alxqx] { color: #3b82f6; }
.stat-icon-wind[b-a3rs0alxqx] { color: #64748b; }
.stat-icon-humidity[b-a3rs0alxqx] { color: #06b6d4; }

/* Upcoming days strip — at-a-glance 5-day forecast; clicking a card switches the modal's day */

.upcoming-label[b-a3rs0alxqx] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 1rem 0 0.5rem 0;
}

.upcoming-strip[b-a3rs0alxqx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.5rem;
}

.upcoming-day[b-a3rs0alxqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.35rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 6%, transparent);
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
    min-height: 48px;
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

@media (hover: hover) {
    .upcoming-day:hover[b-a3rs0alxqx] {
        background: color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 10%, transparent);
        border-color: color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 25%, transparent);
        transform: translateY(-1px);
    }
}

.upcoming-day:focus-visible[b-a3rs0alxqx] {
    outline: 2px solid var(--weather-tint, var(--accent-primary));
    outline-offset: 2px;
}

.upcoming-day.is-selected[b-a3rs0alxqx] {
    background: color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 14%, transparent);
    border-color: color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 40%, transparent);
}

.upcoming-day-label[b-a3rs0alxqx] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upcoming-day.is-selected .upcoming-day-label[b-a3rs0alxqx] {
    color: var(--weather-tint, var(--accent-primary));
}

.upcoming-day-icon[b-a3rs0alxqx] {
    font-size: 1.25rem;
    color: var(--weather-tint, var(--accent-primary));
    line-height: 1;
}

.upcoming-day-temps[b-a3rs0alxqx] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-variant-numeric: tabular-nums;
}

.upcoming-day-hi[b-a3rs0alxqx] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
}

.upcoming-day-sep[b-a3rs0alxqx] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.upcoming-day-lo[b-a3rs0alxqx] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.upcoming-day-pop[b-a3rs0alxqx] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #3b82f6;
    font-variant-numeric: tabular-nums;
    min-height: 0.85rem;
}

.upcoming-day-pop .bi-droplet-fill[b-a3rs0alxqx] { font-size: 0.6rem; }
.upcoming-day-pop.is-empty[b-a3rs0alxqx] { visibility: hidden; }

/* Condition-based tint on the summary row, hourly cards, and individual upcoming-day cards */
.modal-content[data-condition="clear"][b-a3rs0alxqx],
.hourly-card[data-condition="clear"][b-a3rs0alxqx],
.upcoming-day[data-condition="clear"][b-a3rs0alxqx]                { --weather-tint: #f59e0b; }
.modal-content[data-condition="clouds"][b-a3rs0alxqx],
.hourly-card[data-condition="clouds"][b-a3rs0alxqx],
.upcoming-day[data-condition="clouds"][b-a3rs0alxqx]               { --weather-tint: #64748b; }
.modal-content[data-condition="rain"][b-a3rs0alxqx],
.hourly-card[data-condition="rain"][b-a3rs0alxqx],
.upcoming-day[data-condition="rain"][b-a3rs0alxqx],
.upcoming-day[data-condition="drizzle"][b-a3rs0alxqx]              { --weather-tint: #3b82f6; }
.modal-content[data-condition="drizzle"][b-a3rs0alxqx],
.hourly-card[data-condition="drizzle"][b-a3rs0alxqx]               { --weather-tint: #3b82f6; }
.modal-content[data-condition="thunderstorm"][b-a3rs0alxqx],
.hourly-card[data-condition="thunderstorm"][b-a3rs0alxqx],
.upcoming-day[data-condition="thunderstorm"][b-a3rs0alxqx],
.upcoming-day[data-condition="storm"][b-a3rs0alxqx]                { --weather-tint: #7c3aed; }
.modal-content[data-condition="snow"][b-a3rs0alxqx],
.hourly-card[data-condition="snow"][b-a3rs0alxqx],
.upcoming-day[data-condition="snow"][b-a3rs0alxqx]                 { --weather-tint: #06b6d4; }
.modal-content[data-condition="fog"][b-a3rs0alxqx],
.hourly-card[data-condition="fog"][b-a3rs0alxqx],
.upcoming-day[data-condition="fog"][b-a3rs0alxqx]                  { --weather-tint: #94a3b8; }

/* Footer */

.modal-footer[b-a3rs0alxqx] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.attribution[b-a3rs0alxqx] {
    font-size: 0.688rem;
    color: var(--text-muted);
}

.attribution a[b-a3rs0alxqx] {
    color: var(--accent-primary);
    text-decoration: none;
}

.attribution a:hover[b-a3rs0alxqx] { text-decoration: underline; }

/* Mobile fullscreen (rule 45) — the modal fills the viewport at ≤576px with safe-area
   padding for notch/home indicator. Body scrolls internally; header/footer are pinned. */
@media (max-width: 576px) {
    .modal-overlay[b-a3rs0alxqx] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content.weather-detail-modal[b-a3rs0alxqx] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        animation: fade-in-b-a3rs0alxqx 160ms ease;
    }

    .modal-header[b-a3rs0alxqx] {
        padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 1.25rem 0.75rem;
        flex-shrink: 0;
    }

    .close-button[b-a3rs0alxqx] {
        min-width: 48px;
        min-height: 48px;
    }

    .modal-body[b-a3rs0alxqx] {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.5rem 1rem 1rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .day-nav[b-a3rs0alxqx] { margin-bottom: 0.875rem; gap: 0.625rem; }

    .day-nav-btn[b-a3rs0alxqx] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .summary-row[b-a3rs0alxqx] {
        grid-template-columns: auto 1fr;
        row-gap: 0.5rem;
        padding: 0.875rem 1rem;
        margin-bottom: 1.125rem;
        border-radius: 14px;
    }

    .summary-meta[b-a3rs0alxqx] {
        grid-column: 1 / -1;
        align-items: flex-start;
        justify-self: start;
        flex-direction: row;
        gap: 0.625rem;
        flex-wrap: wrap;
    }

    .summary-icon[b-a3rs0alxqx] { font-size: 3rem; }
    .summary-temp-hi[b-a3rs0alxqx] { font-size: 2.5rem; }

    .hourly-strip[b-a3rs0alxqx] { gap: 0.5rem; margin: 0 -0.5rem; padding: 0 0.5rem 0.5rem; }
    .hourly-card[b-a3rs0alxqx] { width: 84px; padding: 0.5rem 0.375rem; }

    .upcoming-strip[b-a3rs0alxqx] {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        gap: 0.375rem;
    }
    .upcoming-day[b-a3rs0alxqx] { padding: 0.5rem 0.25rem; }

    .modal-footer[b-a3rs0alxqx] {
        padding: 0.625rem 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.625rem);
        flex-shrink: 0;
    }
}
/* /Components/Modals/WeatherSettingsModal.razor.rz.scp.css */
.modal-overlay[b-st4v2qt0cl] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.modal-content.weather-modal[b-st4v2qt0cl] {
    background: var(--card-bg, var(--bg-primary));
    border-radius: 12px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    -webkit-overflow-scrolling: touch;
}

.modal-header[b-st4v2qt0cl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-st4v2qt0cl] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
}

.close-button[b-st4v2qt0cl] {
    background: transparent;
    border: none;
    font-size: 1.125rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.close-button:hover[b-st4v2qt0cl] {
    background: var(--hover-bg);
}

.modal-body[b-st4v2qt0cl] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.form-section[b-st4v2qt0cl] {
    margin-bottom: 1.25rem;
}

.form-section:last-child[b-st4v2qt0cl] {
    margin-bottom: 0;
}

.form-label[b-st4v2qt0cl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-size: 0.875rem;
    font-weight: 500;
}

.form-control[b-st4v2qt0cl] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
}

.form-control:focus[b-st4v2qt0cl] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.toggle-label[b-st4v2qt0cl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem 0;
    min-height: 48px;
}

.toggle-input[b-st4v2qt0cl] {
    appearance: none;
    -webkit-appearance: none;
    width: 44px;
    height: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.toggle-input[b-st4v2qt0cl]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.toggle-input:checked[b-st4v2qt0cl] {
    background: var(--accent-primary);
}

.toggle-input:checked[b-st4v2qt0cl]::after {
    transform: translateX(20px);
    background: white;
}

.toggle-slider[b-st4v2qt0cl] {
    display: none;
}

.toggle-text[b-st4v2qt0cl] {
    font-size: 0.938rem;
    color: var(--text-color);
}

.search-status[b-st4v2qt0cl],
.search-empty[b-st4v2qt0cl] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.813rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.city-results[b-st4v2qt0cl] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    max-height: 260px;
    overflow-y: auto;
}

.city-result-item[b-st4v2qt0cl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    min-height: 48px;
    background: transparent;
    border: none;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    font-size: 0.938rem;
    border-bottom: 1px solid var(--border-color);
}

.city-result-item:last-child[b-st4v2qt0cl] {
    border-bottom: none;
}

@media (hover: hover) {
    .city-result-item:hover[b-st4v2qt0cl] {
        background: var(--hover-bg);
    }
}

.city-result-item.active[b-st4v2qt0cl] {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    color: var(--accent-primary);
}

.selected-city[b-st4v2qt0cl] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.unit-picker[b-st4v2qt0cl] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.radio-label[b-st4v2qt0cl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    min-height: 48px;
    flex: 1;
}

.radio-label input[type="radio"][b-st4v2qt0cl] {
    accent-color: var(--accent-primary);
}

.inline-notice[b-st4v2qt0cl] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border-left: 3px solid var(--accent-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-color);
}

.modal-footer[b-st4v2qt0cl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

.btn[b-st4v2qt0cl] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.938rem;
    cursor: pointer;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.btn-secondary[b-st4v2qt0cl] {
    background: var(--bg-secondary);
    color: var(--text-color);
    border-color: var(--border-color);
}

.btn-primary[b-st4v2qt0cl] {
    background: var(--accent-primary);
    color: white;
}

.btn-primary:disabled[b-st4v2qt0cl] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* iOS Safari prevents zoom on focus when input font-size >= 16px */
.form-control[b-st4v2qt0cl] {
    font-size: 16px;
}

@media (max-width: 576px) {
    .modal-overlay[b-st4v2qt0cl] {
        padding: 0;
    }

    .modal-content.weather-modal[b-st4v2qt0cl] {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        height: 100vh;
        padding-top: env(safe-area-inset-top);
    }

    .unit-picker[b-st4v2qt0cl] {
        flex-direction: column;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.about-container[b-7i1opoqxma] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.about-header[b-7i1opoqxma] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-7i1opoqxma] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-7i1opoqxma] {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.about-content[b-7i1opoqxma] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-section[b-7i1opoqxma] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.hero-section[b-7i1opoqxma] {
    text-align: center;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: white;
    padding: 3rem 2rem;
}

.hero-icon[b-7i1opoqxma] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.mission-statement[b-7i1opoqxma] {
    font-size: 1.125rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.95;
    color: white;
}

.about-section h2[b-7i1opoqxma] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.hero-section h2[b-7i1opoqxma] {
    color: white !important;
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
}

.about-section p[b-7i1opoqxma] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.features-grid[b-7i1opoqxma] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feature-item[b-7i1opoqxma] {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

@media (hover: hover) {
    .feature-item:hover[b-7i1opoqxma] {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.feature-icon[b-7i1opoqxma] {
    font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.feature-item h3[b-7i1opoqxma] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.feature-item p[b-7i1opoqxma] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.benefits-list[b-7i1opoqxma] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.benefit-item[b-7i1opoqxma] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.benefit-icon[b-7i1opoqxma] {
    font-size: 1.5rem;
    color: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.benefit-content h3[b-7i1opoqxma] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.benefit-content p[b-7i1opoqxma] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.audience-list[b-7i1opoqxma] {
    margin: 1rem 0 0 1.5rem;
    padding: 0;
}

.audience-list li[b-7i1opoqxma] {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.commitment-section[b-7i1opoqxma] {
    background: var(--bg-tertiary);
}

.cta-section[b-7i1opoqxma] {
    text-align: center;
    border: 2px solid var(--accent-primary);
}

.cta-buttons[b-7i1opoqxma] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.btn[b-7i1opoqxma] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s;
}

.btn-primary[b-7i1opoqxma] {
    background: var(--accent-gradient);
    color: white;
    border: none;
}

@media (hover: hover) {
    .btn-primary:hover[b-7i1opoqxma] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.btn-secondary[b-7i1opoqxma] {
    background: var(--card-bg);
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-7i1opoqxma] {
        background: var(--accent-primary);
        color: white;
    }
}

.contact-section[b-7i1opoqxma] {
    text-align: center;
}

.contact-link[b-7i1opoqxma] {
    display: inline-flex;
    align-items: center;
    color: var(--accent-primary);
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
    transition: color 0.2s;
}

@media (hover: hover) {
    .contact-link:hover[b-7i1opoqxma] {
        color: var(--accent-secondary);
    }
}

@media (max-width: 768px) {
    .about-container[b-7i1opoqxma] {
        padding: 1rem;
    }

    .page-title[b-7i1opoqxma] {
        font-size: 2rem;
    }

    .about-section[b-7i1opoqxma] {
        padding: 1.5rem;
    }

    .hero-section[b-7i1opoqxma] {
        padding: 2rem 1.5rem;
    }

    .hero-icon[b-7i1opoqxma] {
        font-size: 3rem;
    }

    .hero-section h2[b-7i1opoqxma] {
        font-size: 1.5rem;
    }

    .mission-statement[b-7i1opoqxma] {
        font-size: 1rem;
    }

    .features-grid[b-7i1opoqxma] {
        grid-template-columns: 1fr;
    }

    .cta-buttons[b-7i1opoqxma] {
        flex-direction: column;
    }

    .btn[b-7i1opoqxma] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .about-container[b-7i1opoqxma] {
        padding: 0.75rem;
    }

    .page-title[b-7i1opoqxma] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-7i1opoqxma] {
        font-size: 0.875rem;
    }

    .about-section[b-7i1opoqxma] {
        padding: 1rem;
        border-radius: 12px;
    }

    .hero-section[b-7i1opoqxma] {
        padding: 1.5rem 1rem;
    }

    .hero-icon[b-7i1opoqxma] {
        font-size: 2.5rem;
    }

    .hero-section h2[b-7i1opoqxma] {
        font-size: 1.25rem;
    }

    .mission-statement[b-7i1opoqxma] {
        font-size: 0.9rem;
    }

    .feature-card[b-7i1opoqxma] {
        padding: 1rem;
    }

    .feature-card h3[b-7i1opoqxma] {
        font-size: 1rem;
    }

    .contact-link[b-7i1opoqxma] {
        font-size: 1rem;
    }
}
/* /Components/Pages/ChallengeDetail.razor.rz.scp.css */
/* PAGE WRAPPER */
.challenge-detail-page[b-g50e6g9r91] {
    min-height: calc(100vh - 52px);
    background: var(--bg-primary);
}

/* CONTAINER */
.challenge-detail[b-g50e6g9r91] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* HEADER SECTION */
.challenge-header[b-g50e6g9r91] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    position: relative;
}

.header-actions[b-g50e6g9r91] {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.header-content[b-g50e6g9r91] {
    max-width: 100%;
}

.header-main[b-g50e6g9r91] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.challenge-image[b-g50e6g9r91] {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.challenge-image img[b-g50e6g9r91] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-text-content[b-g50e6g9r91] {
    flex: 1;
    min-width: 0;
}

.challenge-title[b-g50e6g9r91] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    line-height: 1.2;
    padding-right: 300px;
}

.challenge-description-container[b-g50e6g9r91] {
    margin-bottom: 0;
}

.challenge-description[b-g50e6g9r91] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: relative;
    text-align: left;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.challenge-description.collapsed[b-g50e6g9r91] {
    max-height: 4.8em; /* 3 lines at 1.6 line-height */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Only show gradient if text is actually clamped (overflow present) */
.challenge-description.collapsed[b-g50e6g9r91]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.6em;
    background: linear-gradient(to bottom, transparent, var(--card-bg));
    pointer-events: none;
    opacity: 0;
}

/* Show gradient only when description exceeds 2 lines */
.challenge-description.collapsed[style*="cursor: pointer"][b-g50e6g9r91]::after {
    opacity: 1;
}

.challenge-description.expanded[b-g50e6g9r91] {
    max-height: none;
}

.btn-expand-description[b-g50e6g9r91] {
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.25rem 0;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-expand-description:hover[b-g50e6g9r91] {
        color: var(--accent-hover);
        text-decoration: underline;
    }
}

.challenge-meta[b-g50e6g9r91] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.meta-item[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.meta-item .bi[b-g50e6g9r91] {
    font-size: 1.1rem;
    color: var(--accent-primary);
}

.meta-item.current-streak-badge[b-g50e6g9r91] {
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 600;
}

.meta-item.current-streak-badge .bi[b-g50e6g9r91] {
    color: #ff9800;
}

/* MENU STYLES - Modern Design */
.menu-wrapper[b-g50e6g9r91] {
    position: relative;
}

.action-btn[b-g50e6g9r91] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

@media (hover: hover) {
    .action-btn:hover[b-g50e6g9r91], .action-btn.active[b-g50e6g9r91] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.modern-dropdown[b-g50e6g9r91] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    min-width: 220px;
    z-index: 1000;
    padding: 0.5rem;
    animation: slideDown-b-g50e6g9r91 0.2s ease-out;
}

@keyframes slideDown-b-g50e6g9r91 {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-divider[b-g50e6g9r91] {
    height: 1px;
    background: var(--border-light);
    margin: 0.5rem 0;
}

.dropdown-action[b-g50e6g9r91] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .dropdown-action:hover[b-g50e6g9r91] {
        background: var(--hover-bg);
    }
}

.dropdown-action i[b-g50e6g9r91] {
    font-size: 1rem;
}

.dropdown-action.text-danger[b-g50e6g9r91] {
    color: var(--danger);
}

@media (hover: hover) {
    .dropdown-action.text-danger:hover[b-g50e6g9r91] {
        background: rgba(239, 68, 68, 0.1);
    }
}

/* CARD BASE */
.card[b-g50e6g9r91] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* DAILY CHECK-IN SECTION */
.daily-checkin-section[b-g50e6g9r91] {
    margin-bottom: 2rem;
}

/* SECTION HEADER */
.section-header[b-g50e6g9r91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.section-header h2[b-g50e6g9r91] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* PERIOD TABS */
.period-tabs[b-g50e6g9r91] {
    background: var(--card-bg);
    border-radius: 999px;
    padding: 0.35rem;
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--border-color);
    position: relative;
}

.tab-slider[b-g50e6g9r91] {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: calc(33.333% - 0.35rem);
    height: calc(100% - 0.7rem);
    background: #5c6bc0;
    border-radius: 999px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(92, 107, 192, 0.3);
    z-index: 0;
}

.tab[b-g50e6g9r91] {
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
}

@media (hover: hover) {
    .tab:hover[b-g50e6g9r91] {
        color: var(--text-primary);
    }
}

.tab.active[b-g50e6g9r91] {
    color: #fff;
    background: transparent;
}

/* PROGRESS STATISTICS OVERVIEW */
.progress-stats-overview[b-g50e6g9r91] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-g50e6g9r91] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08), rgba(76, 175, 80, 0.03));
    border: 1px solid rgba(76, 175, 80, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .stat-card:hover[b-g50e6g9r91] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
    }
}

.stat-icon[b-g50e6g9r91] {
    font-size: 2rem;
    line-height: 1;
}

.stat-content[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-g50e6g9r91] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value[b-g50e6g9r91] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-subtext[b-g50e6g9r91] {
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
}

/* FIELD AGGREGATES SECTION */
.field-aggregates-section[b-g50e6g9r91],
.habit-stats-section[b-g50e6g9r91] {
    margin-bottom: 2rem;
}

.field-aggregates-section h3[b-g50e6g9r91],
.habit-stats-section h3[b-g50e6g9r91] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

.field-aggregates-grid[b-g50e6g9r91] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.aggregate-card[b-g50e6g9r91] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .aggregate-card:hover[b-g50e6g9r91] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

.aggregate-header[b-g50e6g9r91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.aggregate-name[b-g50e6g9r91] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

.trend-indicator[b-g50e6g9r91] {
    font-size: 1.5rem;
    line-height: 1;
}

.trend-up[b-g50e6g9r91] {
    color: #16a34a;
}

.trend-down[b-g50e6g9r91] {
    color: #dc2626;
}

.trend-stable[b-g50e6g9r91] {
    color: #94a3b8;
}

.aggregate-stats[b-g50e6g9r91] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.aggregate-stat[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.aggregate-label[b-g50e6g9r91] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.aggregate-value[b-g50e6g9r91] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.aggregate-value.positive[b-g50e6g9r91] {
    color: #16a34a;
}

.aggregate-value.negative[b-g50e6g9r91] {
    color: #dc2626;
}

.aggregate-value.neutral[b-g50e6g9r91] {
    color: var(--text-muted);
}

/* HABIT STATS */
.habit-stats-list[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.habit-stat-item[b-g50e6g9r91] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .habit-stat-item:hover[b-g50e6g9r91] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

.habit-stat-header[b-g50e6g9r91] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.habit-stat-name[b-g50e6g9r91] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.habit-stat-rate[b-g50e6g9r91] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.habit-stat-progress[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar-container[b-g50e6g9r91] {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill[b-g50e6g9r91] {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-hover));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.habit-stat-count[b-g50e6g9r91] {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* USER PROGRESS LAYOUT */
.user-progress-layout[b-g50e6g9r91] {
    display: grid;
    grid-template-columns: 1.65fr 1fr;
    gap: 1.75rem;
}

.progress-card[b-g50e6g9r91] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

.card-heading[b-g50e6g9r91] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.card-heading h3[b-g50e6g9r91] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.card-subtitle[b-g50e6g9r91] {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.picture-upload-inline[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.picture-thumbnail[b-g50e6g9r91] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--accent-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.picture-thumbnail img[b-g50e6g9r91] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-picture-btn[b-g50e6g9r91] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .remove-picture-btn:hover[b-g50e6g9r91] {
        background: rgba(220, 38, 38, 1);
        transform: scale(1.1);
    }
}

.upload-btn-compact[b-g50e6g9r91] {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.65rem 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

@media (hover: hover) {
    .upload-btn-compact:hover[b-g50e6g9r91] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.input-grid[b-g50e6g9r91] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.input-field[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.input-field span[b-g50e6g9r91] {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.input-field input[b-g50e6g9r91],
.input-field textarea[b-g50e6g9r91] {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
    resize: none;
    font-family: inherit;
}

.input-field textarea[b-g50e6g9r91] {
    resize: vertical;
    min-height: 120px;
}

.input-field input:focus[b-g50e6g9r91],
.input-field textarea:focus[b-g50e6g9r91] {
    outline: none;
    border-color: var(--border-color);
    background: var(--card-bg);
    box-shadow: none;
}

.notes-field[b-g50e6g9r91] {
    grid-column: 1 / -1;
}

.progress-sidebar[b-g50e6g9r91] {
    gap: 2rem;
}

.habit-checklist[b-g50e6g9r91] {
    margin-bottom: 1.5rem;
}

.habit-checklist h3[b-g50e6g9r91],
.picture-upload h3[b-g50e6g9r91] {
    margin: 0 0 1rem 0;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.habit-list[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.habit-item[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
}

.habit-item input[b-g50e6g9r91] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.picture-preview[b-g50e6g9r91] {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px dashed rgba(76, 175, 80, 0.35);
    background: rgba(76, 175, 80, 0.08);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.picture-preview img[b-g50e6g9r91] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-btn[b-g50e6g9r91] {
    width: 100%;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (hover: hover) {
    .upload-btn:hover[b-g50e6g9r91] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

/* PARTICIPANTS LIST */
.participants-list[b-g50e6g9r91] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.empty-participants[b-g50e6g9r91] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-color);
    border-radius: 16px;
}

.empty-participants .empty-text[b-g50e6g9r91] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

.empty-participants .empty-subtext[b-g50e6g9r91] {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
}

/* PARTICIPANT CARD */
.participant-card[b-g50e6g9r91] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.participant-card.current-user[b-g50e6g9r91] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
    border-color: rgba(59, 130, 246, 0.3);
}

@media (hover: hover) {
    .participant-card:hover[b-g50e6g9r91] {
        border-color: var(--primary-color);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transform: translateY(-2px);
    }
}

@media (hover: hover) {
    .participant-card.current-user:hover[b-g50e6g9r91] {
        border-color: rgba(59, 130, 246, 0.5);
    }
}

.participant-header[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.participant-avatar[b-g50e6g9r91] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.participant-title[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.participant-name[b-g50e6g9r91] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-completion-badge[b-g50e6g9r91] {
    font-size: 0.8rem;
    color: var(--accent-primary);
    font-weight: 600;
    background: rgba(76, 175, 80, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    width: fit-content;
}

.participant-stats-mini[b-g50e6g9r91] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-wrap: wrap;
}

.participant-mini-stat[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.participant-mini-stat .bi[b-g50e6g9r91] {
    color: var(--primary-color);
    font-size: 1rem;
}

.participant-mini-stat .bi-fire[b-g50e6g9r91] {
    color: #ff9800;
}

.participant-data[b-g50e6g9r91] {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    flex-wrap: wrap;
}

.data-item[b-g50e6g9r91] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.data-item .label[b-g50e6g9r91] {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.data-item .value[b-g50e6g9r91] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.participant-notes[b-g50e6g9r91] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 3px solid var(--accent-primary);
}

.participant-notes .bi[b-g50e6g9r91] {
    color: var(--accent-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.participant-notes p[b-g50e6g9r91] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.participant-habits[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.habit-status[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--bg-primary);
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.habit-status.completed[b-g50e6g9r91] {
    color: var(--accent-primary);
}

.habit-status .bi[b-g50e6g9r91] {
    font-size: 1.1rem;
}

.participant-picture[b-g50e6g9r91] {
    width: 100%;
    height: 180px;
    border-radius: 10px;
    overflow: hidden;
}

.participant-picture img[b-g50e6g9r91] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PARTICIPANT HEATMAP */
.participant-heatmap-container[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.participant-heatmap-row[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.participant-heatmap-row.current-user[b-g50e6g9r91] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.02));
    border-color: rgba(59, 130, 246, 0.3);
}

@media (hover: hover) {
    .participant-heatmap-row:hover[b-g50e6g9r91] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

@media (hover: hover) {
    .participant-heatmap-row.current-user:hover[b-g50e6g9r91] {
        border-color: rgba(59, 130, 246, 0.5);
    }
}

.participant-heatmap-header[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 180px;
    flex-shrink: 0;
}

.participant-avatar-small[b-g50e6g9r91] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.participant-name-section[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    flex: 1;
}

.participant-name-small[b-g50e6g9r91] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-streak-badge[b-g50e6g9r91] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: rgba(255, 152, 0, 0.1);
    color: #ff9800;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.participant-streak-badge .bi[b-g50e6g9r91] {
    font-size: 0.9rem;
}

.heatmap-cells[b-g50e6g9r91] {
    display: flex;
    gap: 0.4rem;
    flex: 1;
    overflow-x: auto;
    padding: 0.25rem 0;
}

.heatmap-cell[b-g50e6g9r91] {
    position: relative;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .heatmap-cell:hover:not(.disabled)[b-g50e6g9r91] {
        border-color: var(--accent-primary);
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
        z-index: 1;
    }
}

.heatmap-cell.today[b-g50e6g9r91] {
    border-color: var(--accent-primary);
    border-width: 2px;
}

.heatmap-cell.disabled[b-g50e6g9r91] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.heatmap-cell.future[b-g50e6g9r91] {
    opacity: 0.5;
}

.heatmap-cell.before-start[b-g50e6g9r91] {
    opacity: 0.3;
}

.heatmap-indicator[b-g50e6g9r91] {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: all 0.2s ease;
}

.heatmap-indicator.has-data[b-g50e6g9r91] {
    background: var(--accent-primary);
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

.heatmap-day-label[b-g50e6g9r91] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* MODAL */
.modal-overlay[b-g50e6g9r91] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn-b-g50e6g9r91 0.2s ease;
}

@keyframes fadeIn-b-g50e6g9r91 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-g50e6g9r91] {
    background: var(--card-bg);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-g50e6g9r91 0.3s ease;
}

@keyframes slideUp-b-g50e6g9r91 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-g50e6g9r91] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
}

.modal-header h3[b-g50e6g9r91] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-subtitle[b-g50e6g9r91] {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.btn-close[b-g50e6g9r91] {
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-close:hover[b-g50e6g9r91] {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
}

.modal-body[b-g50e6g9r91] {
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.modal-participant-card[b-g50e6g9r91] {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .challenge-detail[b-g50e6g9r91] {
        padding: 1rem 0.5rem;
    }

    .challenge-header[b-g50e6g9r91],
    .card[b-g50e6g9r91] {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .header-actions[b-g50e6g9r91] {
        position: static;
        margin-bottom: 1rem;
        width: 100%;
    }

    .header-actions button[b-g50e6g9r91] {
        flex: 1;
    }

    .header-content[b-g50e6g9r91] {
        padding-right: 0;
    }

    .challenge-title[b-g50e6g9r91] {
        font-size: 1.5rem;
        padding-right: 0;
    }

    .challenge-description[b-g50e6g9r91] {
        font-size: 1rem;
    }

    .section-header[b-g50e6g9r91] {
        flex-direction: column;
        align-items: flex-start;
    }

    .period-tabs[b-g50e6g9r91] {
        width: 100%;
    }

    .tab[b-g50e6g9r91] {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.75rem;
    }

    .form-row[b-g50e6g9r91] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .habits-grid[b-g50e6g9r91] {
        grid-template-columns: 1fr;
    }

    .btn-save[b-g50e6g9r91] {
        width: 100%;
    }

    .participants-list[b-g50e6g9r91] {
        grid-template-columns: 1fr;
    }

    .participant-data[b-g50e6g9r91] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .participant-heatmap-row[b-g50e6g9r91] {
        flex-direction: column;
        align-items: stretch;
    }

    .participant-heatmap-header[b-g50e6g9r91] {
        min-width: 0;
        width: 100%;
    }

    .heatmap-cells[b-g50e6g9r91] {
        overflow-x: scroll;
        justify-content: flex-start;
    }

    .modal-content[b-g50e6g9r91] {
        max-width: 95vw;
        margin: 0 0.5rem;
    }

    .modal-header[b-g50e6g9r91],
    .modal-body[b-g50e6g9r91] {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .challenge-meta[b-g50e6g9r91] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .period-tabs[b-g50e6g9r91] {
        flex-direction: column;
    }

    .tab[b-g50e6g9r91] {
        width: 100%;
    }

    .user-progress-layout[b-g50e6g9r91] {
        grid-template-columns: 1fr;
    }
}

/* PICTURE VIEW MODAL */
.picture-view-modal[b-g50e6g9r91] {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
}

.picture-view-container[b-g50e6g9r91] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 80vh;
    overflow: auto;
}

.picture-view-container img[b-g50e6g9r91] {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}

/* USER PROGRESS LAYOUT - NO SIDEBAR */
.user-progress-layout.no-sidebar[b-g50e6g9r91] {
    grid-template-columns: 1fr;
}

.progress-inputs.full-width[b-g50e6g9r91] {
    grid-column: 1;
}

/* INLINE CHECKLIST STYLES */
.inline-checklist[b-g50e6g9r91] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.inline-checklist h4[b-g50e6g9r91] {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.checklist-items[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-item[b-g50e6g9r91] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .checklist-item:hover[b-g50e6g9r91] {
        background: var(--bg-hover);
        border-color: var(--accent-primary);
    }
}

.checklist-item.completed[b-g50e6g9r91] {
    opacity: 0.6;
}

.checklist-item.completed span[b-g50e6g9r91] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.checklist-item input[type="checkbox"][b-g50e6g9r91] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.checklist-item span[b-g50e6g9r91] {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-primary);
    user-select: none;
}

/* Skeleton loading */
.skeleton-loading[b-g50e6g9r91] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
}

.skeleton-loading > [aria-hidden][b-g50e6g9r91] {
    display: contents;
}

[b-g50e6g9r91] .skeleton-challenge-header {
    gap: 1.25rem;
}

.skeleton-header-main[b-g50e6g9r91] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

[b-g50e6g9r91] .skeleton-image {
    flex-shrink: 0;
}

.skeleton-header-text[b-g50e6g9r91] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.skeleton-meta-row[b-g50e6g9r91] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.skeleton-stats-row[b-g50e6g9r91] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

[b-g50e6g9r91] .skeleton-stat-card {
    gap: 0.75rem;
}

[b-g50e6g9r91] .skeleton-progress-section {
    gap: 1rem;
}

.skeleton-input-grid[b-g50e6g9r91] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media screen and (max-width: 768px) {
    .skeleton-stats-row[b-g50e6g9r91] {
        grid-template-columns: 1fr;
    }

    .skeleton-header-main[b-g50e6g9r91] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .skeleton-input-grid[b-g50e6g9r91] {
        grid-template-columns: 1fr;
    }
}

/* /Components/Pages/Challenges.razor.rz.scp.css */
.challenges-container[b-1syzhiq8y1] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem 2rem;
    background: var(--card-bg);
}

.challenges-header[b-1syzhiq8y1] {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.challenges-header h1[b-1syzhiq8y1] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

.challenges-content[b-1syzhiq8y1] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.challenges-section[b-1syzhiq8y1] {
    display: flex;
    flex-direction: column;
}

.section-header[b-1syzhiq8y1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2[b-1syzhiq8y1] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.header-actions[b-1syzhiq8y1] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Use global .btn-action-primary from app.css for consistent styling */
.btn-join-challenge[b-1syzhiq8y1] {
    /* Inherits from .btn-action-primary in app.css */
}

/* Use global .btn-action-primary from app.css for consistent styling */
.btn-create-challenge[b-1syzhiq8y1] {
    /* Inherits from .btn-action-primary in app.css */
}

.challenges-list[b-1syzhiq8y1] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.challenge-item[b-1syzhiq8y1] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

@media (hover: hover) {
    .challenge-item:hover[b-1syzhiq8y1] {
        border-color: var(--accent-primary);
        box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
    }
}

.challenge-item.template-challenge[b-1syzhiq8y1] {
    border-left: 3px solid var(--accent-secondary);
}

@media (hover: hover) {
    .challenge-item.template-challenge:hover[b-1syzhiq8y1] {
        border-color: var(--accent-secondary);
        box-shadow: 0 4px 16px rgba(255, 193, 7, 0.15);
    }
}

.challenge-item.template-challenge.active-template[b-1syzhiq8y1] {
    border-left: 3px solid #5c6bc0;
    background: linear-gradient(to right, rgba(92, 107, 192, 0.05), transparent);
}

@media (hover: hover) {
    .challenge-item.template-challenge.active-template:hover[b-1syzhiq8y1] {
        border-color: #5c6bc0;
        box-shadow: 0 4px 16px rgba(92, 107, 192, 0.15);
    }
}

.challenge-item.active-challenge[b-1syzhiq8y1] {
    border-left: 3px solid #5c6bc0;
    background: var(--card-bg);
}

@media (hover: hover) {
    .challenge-item.active-challenge:hover[b-1syzhiq8y1] {
        border-color: #5c6bc0;
        box-shadow: 0 4px 16px rgba(92, 107, 192, 0.12);
    }
}

.challenge-main-info[b-1syzhiq8y1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.challenge-item-image[b-1syzhiq8y1] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.challenge-item-image img[b-1syzhiq8y1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.challenge-name-section[b-1syzhiq8y1] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.challenge-name-row[b-1syzhiq8y1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.challenge-name[b-1syzhiq8y1] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.challenge-description[b-1syzhiq8y1] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.challenge-meta-inline[b-1syzhiq8y1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.challenge-time[b-1syzhiq8y1] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.challenge-progress[b-1syzhiq8y1] {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 500;
}

.challenge-status[b-1syzhiq8y1] {
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.challenge-status.completed[b-1syzhiq8y1] {
    color: var(--accent-primary);
}

.challenge-countdown[b-1syzhiq8y1] {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-favorite-challenge[b-1syzhiq8y1] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    align-self: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-favorite-challenge:hover[b-1syzhiq8y1] {
        background: var(--hover-bg);
        color: var(--accent-secondary);
    }
}

.btn-favorite-challenge .bi-star-fill[b-1syzhiq8y1] {
    color: var(--accent-secondary);
}

.template-icon[b-1syzhiq8y1] {
    font-size: 1.5rem;
    color: var(--accent-secondary);
    flex-shrink: 0;
}

.challenge-actions[b-1syzhiq8y1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-action-btn[b-1syzhiq8y1] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.template-action-btn span[b-1syzhiq8y1] {
    font-size: 1rem;
}

.template-action-btn.start-btn[b-1syzhiq8y1] {
    background: #5c6bc0;
    color: white;
    box-shadow: 0 2px 4px rgba(92, 107, 192, 0.2);
}

@media (hover: hover) {
    .template-action-btn.start-btn:hover[b-1syzhiq8y1] {
        background: #4a5ab8;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(92, 107, 192, 0.3);
    }
}

.template-action-btn.start-btn:active[b-1syzhiq8y1] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(92, 107, 192, 0.2);
}

.template-action-btn.stop-btn[b-1syzhiq8y1] {
    background: #ef5350;
    color: white;
    box-shadow: 0 2px 4px rgba(239, 83, 80, 0.2);
}

@media (hover: hover) {
    .template-action-btn.stop-btn:hover[b-1syzhiq8y1] {
        background: #e53935;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(239, 83, 80, 0.3);
    }
}

.template-action-btn.stop-btn:active[b-1syzhiq8y1] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(239, 83, 80, 0.2);
}

.template-action-btn.copy-btn[b-1syzhiq8y1] {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

@media (hover: hover) {
    .template-action-btn.copy-btn:hover[b-1syzhiq8y1] {
        background: var(--hover-bg);
        border-color: #5c6bc0;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
}

.template-action-btn.copy-btn:active[b-1syzhiq8y1] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.challenge-badge[b-1syzhiq8y1] {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.challenge-badge.shared[b-1syzhiq8y1] {
    background: rgba(76, 175, 80, 0.1);
    color: var(--accent-primary);
}

.challenge-badge.private[b-1syzhiq8y1] {
    background: rgba(133, 143, 168, 0.1);
    color: var(--text-muted);
}

.btn-start-challenge[b-1syzhiq8y1] {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media (hover: hover) {
    .btn-start-challenge:hover[b-1syzhiq8y1] {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
    }
}

.btn-edit-challenge[b-1syzhiq8y1],
.btn-delete-challenge[b-1syzhiq8y1],
.btn-add-template[b-1syzhiq8y1] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.1rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-edit-challenge:hover[b-1syzhiq8y1] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

@media (hover: hover) {
    .btn-delete-challenge:hover[b-1syzhiq8y1] {
        background: rgba(244, 67, 54, 0.1);
        color: #f44336;
    }
}

.btn-add-template[b-1syzhiq8y1] {
    font-size: 1.5rem;
}

@media (hover: hover) {
    .btn-add-template:hover[b-1syzhiq8y1] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.empty-state[b-1syzhiq8y1] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-icon[b-1syzhiq8y1] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state p[b-1syzhiq8y1] {
    font-size: 1.1rem;
    margin: 0;
}

/* Modal Styles */
.modal-backdrop[b-1syzhiq8y1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.edit-modal[b-1syzhiq8y1],
.delete-modal[b-1syzhiq8y1] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-1syzhiq8y1 0.2s ease-out;
}

@keyframes slideUp-b-1syzhiq8y1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-1syzhiq8y1] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-1syzhiq8y1] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.close-btn[b-1syzhiq8y1] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.25rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .close-btn:hover[b-1syzhiq8y1] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.modal-body[b-1syzhiq8y1] {
    padding: 1.5rem;
}

.form-group[b-1syzhiq8y1] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-1syzhiq8y1] {
    margin-bottom: 0;
}

.form-group label[b-1syzhiq8y1] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-control[b-1syzhiq8y1] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-control:focus[b-1syzhiq8y1] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.checkbox-label[b-1syzhiq8y1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-1syzhiq8y1] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.modal-footer[b-1syzhiq8y1] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn[b-1syzhiq8y1] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-1syzhiq8y1] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-1syzhiq8y1] {
        background: var(--accent-hover);
    }
}

.btn-secondary[b-1syzhiq8y1] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-1syzhiq8y1] {
        background: var(--hover-bg);
    }
}

/* Delete Modal Specific Styles */
.delete-modal[b-1syzhiq8y1] {
    max-width: 450px;
}

.delete-modal-header[b-1syzhiq8y1] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.delete-modal-header h4[b-1syzhiq8y1] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.delete-modal-body[b-1syzhiq8y1] {
    padding: 1.5rem;
}

.delete-modal-body p[b-1syzhiq8y1] {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.delete-modal-body .text-muted[b-1syzhiq8y1] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.delete-modal-footer[b-1syzhiq8y1] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-cancel-delete[b-1syzhiq8y1],
.btn-confirm-delete[b-1syzhiq8y1] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-delete[b-1syzhiq8y1] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-cancel-delete:hover[b-1syzhiq8y1] {
        background: var(--hover-bg);
    }
}

.btn-confirm-delete[b-1syzhiq8y1] {
    background: #f44336;
    color: white;
}

@media (hover: hover) {
    .btn-confirm-delete:hover[b-1syzhiq8y1] {
        background: #d32f2f;
    }
}

/* Loading State */
.loading-container[b-1syzhiq8y1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
}

.loading-text[b-1syzhiq8y1] {
    color: var(--text-muted);
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .challenges-header[b-1syzhiq8y1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-header[b-1syzhiq8y1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions[b-1syzhiq8y1] {
        flex-direction: column;
        width: 100%;
    }

    .btn-join-challenge[b-1syzhiq8y1],
    .btn-create-challenge[b-1syzhiq8y1] {
        width: 100%;
        justify-content: center;
    }

    .challenge-item[b-1syzhiq8y1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .challenge-main-info[b-1syzhiq8y1] {
        width: 100%;
    }

    .challenge-actions[b-1syzhiq8y1] {
        align-self: flex-end;
    }

    /* Modal full-screen on mobile */
    .modal-backdrop[b-1syzhiq8y1] {
        padding: 0;
    }

    .edit-modal[b-1syzhiq8y1],
    .delete-modal[b-1syzhiq8y1] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-body[b-1syzhiq8y1] {
        flex: 1;
        overflow-y: auto;
    }
}

/* Extra small screens (360px min supported) */
@media (max-width: 480px) {
    .challenges-container[b-1syzhiq8y1] {
        padding: 0.5rem 0.75rem 1rem;
    }

    .challenges-header h1[b-1syzhiq8y1] {
        font-size: 1.5rem;
    }

    .section-header h2[b-1syzhiq8y1] {
        font-size: 1.25rem;
    }

    .challenge-item[b-1syzhiq8y1] {
        padding: 0.875rem;
    }

    .challenge-item-image[b-1syzhiq8y1] {
        width: 48px;
        height: 48px;
    }

    .challenge-name[b-1syzhiq8y1] {
        font-size: 1rem;
    }

    .challenge-description[b-1syzhiq8y1] {
        font-size: 0.85rem;
    }

    .template-action-btn[b-1syzhiq8y1] {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }

    .challenge-badge[b-1syzhiq8y1] {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }

    .challenge-actions[b-1syzhiq8y1] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .modal-header[b-1syzhiq8y1] {
        padding: 1rem;
    }

    .modal-header h3[b-1syzhiq8y1] {
        font-size: 1.1rem;
    }

    .modal-body[b-1syzhiq8y1] {
        padding: 1rem;
    }

    .modal-footer[b-1syzhiq8y1] {
        padding: 1rem;
        flex-direction: column;
    }

    .modal-footer .btn[b-1syzhiq8y1] {
        width: 100%;
    }
}

/* Image View Modal */
.modal-overlay[b-1syzhiq8y1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.picture-view-modal[b-1syzhiq8y1] {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.picture-view-modal .modal-header[b-1syzhiq8y1] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.picture-view-modal .modal-header h3[b-1syzhiq8y1] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close-btn[b-1syzhiq8y1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .modal-close-btn:hover[b-1syzhiq8y1] {
        color: var(--text-primary);
    }
}

.picture-view-container[b-1syzhiq8y1] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 80vh;
    overflow: auto;
}

.picture-view-container img[b-1syzhiq8y1] {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}

/* Skeleton loading */
[b-1syzhiq8y1] .skeleton-challenge-card {
    gap: 0.75rem;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact-container[b-h1nh2yh7tu] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.contact-header[b-h1nh2yh7tu] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-h1nh2yh7tu] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-h1nh2yh7tu] {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.contact-intro[b-h1nh2yh7tu] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.contact-intro p[b-h1nh2yh7tu] {
    font-size: 1.063rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.contact-layout[b-h1nh2yh7tu] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.contact-info-section[b-h1nh2yh7tu] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-section h2[b-h1nh2yh7tu] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.info-card[b-h1nh2yh7tu] {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    transition: transform 0.2s;
}

@media (hover: hover) {
    .info-card:hover[b-h1nh2yh7tu] {
        transform: translateX(4px);
    }
}

.info-icon[b-h1nh2yh7tu] {
    font-size: 2rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.info-content[b-h1nh2yh7tu] {
    flex: 1;
}

.info-content h3[b-h1nh2yh7tu] {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.info-content p[b-h1nh2yh7tu] {
    font-size: 0.938rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.info-content small[b-h1nh2yh7tu] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.info-content a[b-h1nh2yh7tu] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .info-content a:hover[b-h1nh2yh7tu] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

@media (max-width: 992px) {
    .contact-layout[b-h1nh2yh7tu] {
        grid-template-columns: 1fr;
    }

    .contact-info-section[b-h1nh2yh7tu] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .contact-container[b-h1nh2yh7tu] {
        padding: 1rem;
    }

    .page-title[b-h1nh2yh7tu] {
        font-size: 2rem;
    }

    .contact-info-section[b-h1nh2yh7tu] {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-container[b-h1nh2yh7tu] {
        padding: 0.75rem;
    }

    .page-title[b-h1nh2yh7tu] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-h1nh2yh7tu] {
        font-size: 0.875rem;
    }

    .contact-info-section[b-h1nh2yh7tu] {
        padding: 1rem;
        border-radius: 12px;
    }

    .info-icon[b-h1nh2yh7tu] {
        font-size: 1.25rem;
    }

    .info-content h3[b-h1nh2yh7tu] {
        font-size: 1rem;
    }

    .info-content p[b-h1nh2yh7tu] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/EditChallenge.razor.rz.scp.css */
.create-challenge-container[b-9zl6p5nptr] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.loading-container[b-9zl6p5nptr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.loading-text[b-9zl6p5nptr] {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 1rem;
}

.page-header[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-btn[b-9zl6p5nptr] {
    background: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .back-btn:hover[b-9zl6p5nptr] {
        background: var(--hover-bg);
    }
}

.page-header h1[b-9zl6p5nptr] {
    flex: 1;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-card[b-9zl6p5nptr] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title[b-9zl6p5nptr] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.section-description[b-9zl6p5nptr] {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

.section-header .section-title[b-9zl6p5nptr] {
    margin: 0;
}

.form-group[b-9zl6p5nptr] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-9zl6p5nptr] {
    margin-bottom: 0;
}

.form-group label[b-9zl6p5nptr] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-input[b-9zl6p5nptr] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-input:focus[b-9zl6p5nptr] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-textarea[b-9zl6p5nptr] {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.validation-error[b-9zl6p5nptr] {
    display: block;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.habits-list[b-9zl6p5nptr] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.habit-row[b-9zl6p5nptr] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    min-height: 60px;
}

@media (hover: hover) {
    .habit-row:hover[b-9zl6p5nptr] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

.add-habit-row[b-9zl6p5nptr] {
    cursor: pointer;
    background: var(--bg-secondary);
}

@media (hover: hover) {
    .add-habit-row:hover[b-9zl6p5nptr] {
        background: var(--hover-bg);
    }
}

.add-habit-prompt[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: var(--text-muted);
}

.add-icon[b-9zl6p5nptr] {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.add-text[b-9zl6p5nptr] {
    font-size: 0.95rem;
    font-weight: 500;
}

.habit-info[b-9zl6p5nptr] {
    flex: 1;
}

.habit-name[b-9zl6p5nptr] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.habit-description[b-9zl6p5nptr] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.habit-actions[b-9zl6p5nptr] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-9zl6p5nptr] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-icon:hover[b-9zl6p5nptr] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.empty-state[b-9zl6p5nptr] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.empty-icon[b-9zl6p5nptr] {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 1rem;
    display: block;
}

.empty-state p[b-9zl6p5nptr] {
    margin: 0;
    font-size: 1rem;
}

.footer-actions[b-9zl6p5nptr] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1rem 0;
}

.btn[b-9zl6p5nptr] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn:disabled[b-9zl6p5nptr] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-9zl6p5nptr] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

@media (hover: hover) {
    .btn-secondary:hover:not(:disabled)[b-9zl6p5nptr] {
        background: var(--hover-bg);
    }
}

.btn-outline-secondary[b-9zl6p5nptr] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

@media (hover: hover) {
    .btn-outline-secondary:hover:not(:disabled)[b-9zl6p5nptr] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.btn-primary[b-9zl6p5nptr] {
    background: var(--accent-primary);
    color: white;
    border: 1px solid var(--accent-primary);
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled)[b-9zl6p5nptr] {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }
}

/* Modal Styles */
.modal-overlay[b-9zl6p5nptr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn-b-9zl6p5nptr 0.2s ease-out;
}

@keyframes fadeIn-b-9zl6p5nptr {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-9zl6p5nptr] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-9zl6p5nptr 0.3s ease-out;
}

@keyframes slideUp-b-9zl6p5nptr {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-9zl6p5nptr] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-9zl6p5nptr] {
    color: #3788d8;
    font-size: 1.1rem;
}

.close-button[b-9zl6p5nptr] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-9zl6p5nptr] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.btn-close[b-9zl6p5nptr] {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 1.75rem;
    line-height: 1;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-close:hover[b-9zl6p5nptr] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.modal-body[b-9zl6p5nptr] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.modal-footer[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

/* Form Sections */
.form-section[b-9zl6p5nptr] {
    margin-bottom: 2rem;
}

.form-section:last-child[b-9zl6p5nptr] {
    margin-bottom: 0;
}

.form-section .section-header[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
}

.form-section .section-header .bi[b-9zl6p5nptr] {
    color: #3788d8;
    font-size: 1.1rem;
}

.form-section .form-group label[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-color);
}

.form-section .form-group label .bi[b-9zl6p5nptr] {
    color: #3788d8;
    font-size: 0.95rem;
}

.form-control[b-9zl6p5nptr] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.form-control:focus[b-9zl6p5nptr] {
    outline: none;
    border-color: #3788d8;
    box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.1);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-9zl6p5nptr] {
        border-color: #3788d8;
    }
}

.color-picker[b-9zl6p5nptr] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.color-option[b-9zl6p5nptr] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .color-option:hover[b-9zl6p5nptr] {
        transform: scale(1.15);
    }
}

.color-option.selected[b-9zl6p5nptr] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.custom-color-picker-wrapper[b-9zl6p5nptr] {
    position: relative;
    width: 40px;
    height: 40px;
}

.custom-color-input[b-9zl6p5nptr] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-color-button[b-9zl6p5nptr] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.2s;
}

.custom-color-button span[b-9zl6p5nptr] {
    color: white;
    font-size: 1.25rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-9zl6p5nptr] {
        border-color: var(--text-primary);
        transform: scale(1.1);
    }
}

.form-section-header[b-9zl6p5nptr] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 1rem 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.time-range-inputs[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-input[b-9zl6p5nptr] {
    flex: 1;
}

.time-separator[b-9zl6p5nptr] {
    color: var(--text-muted);
    font-weight: 500;
}

.days-picker[b-9zl6p5nptr] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

@media (hover: hover) {
    .day-checkbox:hover[b-9zl6p5nptr] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.day-checkbox input[type="checkbox"][b-9zl6p5nptr] {
    cursor: pointer;
}

.day-checkbox span[b-9zl6p5nptr] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Quick add form styles now handled by shared QuickAddRow component */

.btn[b-9zl6p5nptr] {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-sm[b-9zl6p5nptr] {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
}

@media (hover: hover) {
    .btn-outline-secondary:hover[b-9zl6p5nptr] {
        background: var(--hover-bg);
    }
}

.spinner-border[b-9zl6p5nptr] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-9zl6p5nptr 0.75s linear infinite;
}

.spinner-border-sm[b-9zl6p5nptr] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125em;
}

@keyframes spinner-border-b-9zl6p5nptr {
    to {
        transform: rotate(360deg);
    }
}

/* Checkbox label styles */
.checkbox-label[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0;
}

.checkbox-label.disabled[b-9zl6p5nptr] {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-label input[type="checkbox"][b-9zl6p5nptr] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.checkbox-label.disabled input[type="checkbox"][b-9zl6p5nptr] {
    cursor: not-allowed;
}

.premium-link[b-9zl6p5nptr] {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

@media (hover: hover) {
    .premium-link:hover[b-9zl6p5nptr] {
        text-decoration: underline;
    }
}

.form-hint[b-9zl6p5nptr] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .create-challenge-container[b-9zl6p5nptr] {
        padding: 1rem 0.5rem;
    }

    .section-card[b-9zl6p5nptr] {
        padding: 1.5rem;
    }

    .page-header h1[b-9zl6p5nptr] {
        font-size: 1.5rem;
    }

    .footer-actions[b-9zl6p5nptr] {
        flex-direction: column;
    }

    .btn[b-9zl6p5nptr] {
        width: 100%;
        justify-content: center;
    }

    /* Modal full-screen on mobile */
    .modal-overlay[b-9zl6p5nptr] {
        padding: 0;
    }

    .modal-content[b-9zl6p5nptr] {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .modal-header[b-9zl6p5nptr],
    .modal-body[b-9zl6p5nptr],
    .modal-footer[b-9zl6p5nptr] {
        padding: 1rem 1.25rem;
    }
}

/* Extra small screens (360px min supported) */
@media (max-width: 480px) {
    .create-challenge-container[b-9zl6p5nptr] {
        padding: 1rem 0.5rem;
    }

    .page-header h1[b-9zl6p5nptr] {
        font-size: 1.25rem;
    }

    .section-card[b-9zl6p5nptr] {
        padding: 1rem;
        border-radius: 8px;
    }

    .section-title[b-9zl6p5nptr] {
        font-size: 1.1rem;
    }

    .form-group label[b-9zl6p5nptr] {
        font-size: 0.9rem;
    }

    .habit-row[b-9zl6p5nptr] {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .habit-actions[b-9zl6p5nptr] {
        width: 100%;
        justify-content: flex-end;
    }

    .color-picker[b-9zl6p5nptr] {
        gap: 0.5rem;
    }

    .color-option[b-9zl6p5nptr] {
        width: 36px;
        height: 36px;
    }

    .days-picker[b-9zl6p5nptr] {
        gap: 0.375rem;
    }

    .day-checkbox[b-9zl6p5nptr] {
        padding: 0.4rem 0.6rem;
    }

    .day-checkbox span[b-9zl6p5nptr] {
        font-size: 0.85rem;
    }

    .modal-body[b-9zl6p5nptr] {
        padding: 1rem;
    }

    .modal-footer[b-9zl6p5nptr] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-9zl6p5nptr] {
        width: 100%;
    }
}

/* Skeleton loading */
.skeleton-loading[b-9zl6p5nptr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

.skeleton-loading > [aria-hidden][b-9zl6p5nptr] {
    display: contents;
}

.skeleton-header-bar[b-9zl6p5nptr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[b-9zl6p5nptr] .skeleton-form-card {
    gap: 0.875rem;
}
/* /Components/Pages/EventListShared.razor.rz.scp.css */
.shared-eventlist-container[b-unf41q5vai] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

.loading-state[b-unf41q5vai],
.error-state[b-unf41q5vai] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-state h2[b-unf41q5vai],
.error-state h2[b-unf41q5vai] {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.loading-state p[b-unf41q5vai],
.error-state p[b-unf41q5vai] {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2rem;
}

.error-message[b-unf41q5vai] {
    font-size: 1rem;
}

.eventlist-preview-card[b-unf41q5vai] {
    background: var(--card-bg, #ffffff);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.eventlist-color-bar[b-unf41q5vai] {
    height: 6px;
    width: 100%;
}

.eventlist-preview-content[b-unf41q5vai] {
    padding: 2rem;
}

.eventlist-preview-content h1[b-unf41q5vai] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #111827);
}

.eventlist-preview-description[b-unf41q5vai] {
    font-size: 1.125rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.eventlist-preview-meta[b-unf41q5vai] {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 0.5rem;
}

.meta-item[b-unf41q5vai] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary, #6b7280);
}

.meta-item .bi[b-unf41q5vai] {
    font-size: 1.25rem;
    color: var(--primary, #6366f1);
}

.preview-actions[b-unf41q5vai] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-lg[b-unf41q5vai] {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
}

.btn[b-unf41q5vai] {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.spinner-border-sm[b-unf41q5vai] {
    width: 1rem;
    height: 1rem;
    border-width: 0.125rem;
}

@media (max-width: 768px) {
    .shared-eventlist-container[b-unf41q5vai] {
        padding: 1rem;
    }

    .eventlist-preview-content[b-unf41q5vai] {
        padding: 1.5rem;
    }

    .eventlist-preview-content h1[b-unf41q5vai] {
        font-size: 1.5rem;
    }

    .preview-actions[b-unf41q5vai] {
        flex-direction: column;
    }
}

/* Skeleton loading */
[b-unf41q5vai] .skeleton-preview-card {
    max-width: 420px;
    margin: 0 auto;
    gap: 0.875rem;
    align-items: flex-start;
}
/* /Components/Pages/Events.razor.rz.scp.css */
.events-page[b-iumfxe75zx] {
    padding: 0;
    height: calc(100vh - 52px);
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    overflow: hidden;
}

.events-page :is(button, a, input, select, textarea, [tabindex]):focus-visible[b-iumfxe75zx] {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-primary), 0 0 0 4px var(--bg-primary);
    border-radius: 4px;
}

.events-container[b-iumfxe75zx] {
    max-width: 100%;
    margin: 0;
    background: var(--card-bg);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Unified toolbar — single row like Google Calendar */
.events-toolbar[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.75rem;
    flex-shrink: 0;
}

.toolbar-left[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.toolbar-right[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.sidebar-toggle[b-iumfxe75zx] {
    font-size: 1.25rem;
}

.toolbar-today-btn[b-iumfxe75zx] {
    padding: 0.375rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

@media (hover: hover) {
    .toolbar-today-btn:hover[b-iumfxe75zx] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.nav-btn[b-iumfxe75zx] {
    font-size: 0.875rem;
}

.toolbar-title-wrapper[b-iumfxe75zx] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s;
}

@media (hover: hover) {
    .toolbar-title-wrapper:hover[b-iumfxe75zx] {
        background: var(--hover-bg);
    }
}

.toolbar-title[b-iumfxe75zx] {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    pointer-events: none;
}

.toolbar-title-caret[b-iumfxe75zx] {
    font-size: 0.625rem;
    color: var(--text-secondary);
    pointer-events: none;
}

.hidden-date-input[b-iumfxe75zx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* Desktop: button group, Mobile: hidden */
.view-switcher-desktop[b-iumfxe75zx] {
    display: flex;
}

.view-select-mobile[b-iumfxe75zx] {
    display: none;
}

.view-switcher[b-iumfxe75zx] {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.view-btn[b-iumfxe75zx] {
    padding: 0.375rem 0.75rem;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.view-btn:not(:last-child)[b-iumfxe75zx] {
    border-right: 1px solid var(--border-color);
}

.view-btn.active[b-iumfxe75zx] {
    background: var(--hover-bg);
    color: var(--accent-primary);
}

@media (hover: hover) {
    .view-btn:hover:not(.active)[b-iumfxe75zx] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

/* Menu Wrapper - Modern Design from Timeboxing */
.menu-wrapper[b-iumfxe75zx] {
    position: relative;
}

.action-btn[b-iumfxe75zx] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

@media (hover: hover) {

    .action-btn:hover[b-iumfxe75zx],
    .action-btn.active[b-iumfxe75zx] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.action-btn-text[b-iumfxe75zx] {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    padding: 0 1rem;
    gap: 0.5rem;
    font-weight: 500;
}

@media (hover: hover) {

    .action-btn-text:hover[b-iumfxe75zx],
    .action-btn-text.active[b-iumfxe75zx] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.modern-dropdown[b-iumfxe75zx] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    min-width: 260px;
    z-index: 1000;
    padding: 0.5rem;
    animation: slideDown-b-iumfxe75zx 0.2s ease-out;
}

@keyframes slideDown-b-iumfxe75zx {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-section[b-iumfxe75zx] {
    padding: 0.75rem;
}

.section-label[b-iumfxe75zx] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.dropdown-divider[b-iumfxe75zx] {
    height: 1px;
    background: var(--border-light);
    margin: 0.5rem 0;
}

.dropdown-action[b-iumfxe75zx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .dropdown-action:hover[b-iumfxe75zx] {
        background: var(--hover-bg);
    }
}

.dropdown-action.text-danger[b-iumfxe75zx] {
    color: var(--danger);
}

@media (hover: hover) {
    .dropdown-action.text-danger:hover[b-iumfxe75zx] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.country-select-custom[b-iumfxe75zx] {
    position: relative;
    width: 100%;
}

.country-select-trigger[b-iumfxe75zx] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.country-select-trigger:focus[b-iumfxe75zx] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

@media (hover: hover) {
    .country-select-trigger:hover:not(:focus)[b-iumfxe75zx] {
        border-color: var(--accent-primary);
    }
}

.country-chevron[b-iumfxe75zx] {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.country-chevron.open[b-iumfxe75zx] {
    transform: rotate(180deg);
}

.country-select-list[b-iumfxe75zx] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.country-select-item[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: none;
    background: none;
    color: var(--text-color);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .country-select-item:hover[b-iumfxe75zx] {
        background: var(--hover-bg);
    }
}

.country-select-item.active[b-iumfxe75zx] {
    background: var(--hover-bg);
    font-weight: 600;
}

/* Use global button styles from app.css - no local override needed */
.btn[b-iumfxe75zx] {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

@media (hover: hover) {
    .btn:hover[b-iumfxe75zx] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn:active[b-iumfxe75zx] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* .btn-primary inherits from global app.css with purple gradient */

.btn-secondary[b-iumfxe75zx] {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    box-shadow: none;
}

@media (hover: hover) {
    .btn-secondary:hover[b-iumfxe75zx] {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-secondary);
    }
}

.btn-danger[b-iumfxe75zx] {
    background: linear-gradient(135deg, var(--btn-danger) 0%, var(--btn-danger-hover) 100%);
    color: white;
}

@media (hover: hover) {
    .btn-danger:hover[b-iumfxe75zx] {
        background: linear-gradient(135deg, var(--btn-danger-hover) 0%, var(--btn-danger-active) 100%);
    }
}

/* Sidebar layout — fill remaining height */
.events-layout[b-iumfxe75zx] {
    display: flex;
    gap: 0;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar-panel[b-iumfxe75zx] {
    width: 260px;
    min-width: 260px;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.calendar-area[b-iumfxe75zx] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.calendar-area > #calendar[b-iumfxe75zx] {
    flex: 1;
    min-height: 0;
}

.sidebar-backdrop[b-iumfxe75zx] {
    display: none;
}

/* View-only indicator */
.view-only-indicator[b-iumfxe75zx] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-secondary);
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.view-only-badge[b-iumfxe75zx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text-color);
}

#calendar[b-iumfxe75zx] {
    background: var(--card-bg);
    color: var(--text-color);
    height: 100%;
}

/* Modal Styles */
/* Native <dialog> shell — stripped of default browser chrome so the inner
   .modal-content keeps its full visual responsibility. The ::backdrop pseudo
   replaces the old .modal-overlay backdrop styling. */
.event-dialog-shell[b-iumfxe75zx] {
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    max-width: min(600px, 100%);
    max-height: 90vh;
    overflow: visible;
}

.event-dialog-shell[b-iumfxe75zx]::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: fadeIn-b-iumfxe75zx 0.2s ease-out;
}

@keyframes fadeIn-b-iumfxe75zx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-iumfxe75zx] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-iumfxe75zx 0.3s ease-out;
}

@keyframes slideUp-b-iumfxe75zx {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-iumfxe75zx] {
    margin: 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-iumfxe75zx] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.close-button[b-iumfxe75zx] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-iumfxe75zx] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.modal-body[b-iumfxe75zx] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    -webkit-overflow-scrolling: touch;
}

.modal-footer[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    flex-wrap: wrap;
    gap: 1rem;
}

/* Form Sections */
.form-section[b-iumfxe75zx] {
    margin-bottom: 2rem;
}

.form-section:last-child[b-iumfxe75zx] {
    margin-bottom: 0;
}

.section-header[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
}

.section-header .bi[b-iumfxe75zx] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.form-group[b-iumfxe75zx] {
    margin-bottom: 1.25rem;
}

.form-group label[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-color);
}

.form-group label .bi[b-iumfxe75zx] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.form-control[b-iumfxe75zx] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.form-control:focus[b-iumfxe75zx] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-iumfxe75zx] {
        border-color: var(--accent-primary);
    }
}

/* iOS Safari zooms aggressively on any focused input below 16px. CLAUDE.md rule 43. */
.event-modal .form-control[b-iumfxe75zx],
.event-modal textarea.form-control[b-iumfxe75zx] {
    font-size: 1rem;
}

select.form-control[b-iumfxe75zx] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

textarea.form-control[b-iumfxe75zx] {
    resize: vertical;
    min-height: 80px;
}

.form-row[b-iumfxe75zx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Toggle Switches */
.toggle-group[b-iumfxe75zx] {
    margin-bottom: 1.25rem;
}

.toggle-label[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-input[b-iumfxe75zx] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-iumfxe75zx] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 24px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.toggle-slider[b-iumfxe75zx]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-input:checked+.toggle-slider[b-iumfxe75zx] {
    background: var(--accent-primary);
}

.toggle-input:checked+.toggle-slider[b-iumfxe75zx]::before {
    transform: translateX(20px);
}

.toggle-input:focus+.toggle-slider[b-iumfxe75zx] {
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.toggle-text[b-iumfxe75zx] {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
}

.checkbox-label[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-iumfxe75zx] {
    width: auto;
}

.color-picker[b-iumfxe75zx] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.color-picker-compact[b-iumfxe75zx] {
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.color-option[b-iumfxe75zx] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-picker-compact .color-option[b-iumfxe75zx] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    flex: 1;
    min-width: 0;
}

@media (hover: hover) {
    .color-option:hover[b-iumfxe75zx] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option.selected[b-iumfxe75zx] {
    border-color: var(--text-color);
    box-shadow: 0 0 0 3px var(--hover-bg), 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* Clear/No color option */
.color-option-clear[b-iumfxe75zx] {
    background: var(--input-bg);
    border: 2px dashed var(--border-color);
}

.color-option-clear .bi[b-iumfxe75zx] {
    color: var(--text-secondary);
    text-shadow: none;
}

@media (hover: hover) {
    .color-option-clear:hover[b-iumfxe75zx] {
        border-color: var(--text-secondary);
    }
}

.color-option-clear.selected[b-iumfxe75zx] {
    border-style: solid;
    border-color: var(--text-color);
}

.custom-color-picker-wrapper[b-iumfxe75zx] {
    position: relative;
    width: 60px;
    height: 60px;
}

.custom-color-picker-compact[b-iumfxe75zx] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    flex: 1;
    min-width: 0;
}

.custom-color-input[b-iumfxe75zx] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-color-button[b-iumfxe75zx] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-color-picker-compact .custom-color-button[b-iumfxe75zx] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border-width: 2px;
}

.custom-color-button span[b-iumfxe75zx] {
    color: white;
    font-size: 1.5rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.custom-color-picker-compact .custom-color-button span[b-iumfxe75zx] {
    font-size: 1rem;
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-iumfxe75zx] {
        border-color: var(--text-color);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option .bi[b-iumfxe75zx] {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.color-picker-compact .color-option .bi[b-iumfxe75zx] {
    font-size: 1rem;
}

.modal-actions-right[b-iumfxe75zx] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* FullCalendar Theming */
[b-iumfxe75zx] .fc {
    --fc-border-color: var(--border-color);
    --fc-event-bg-color: var(--accent-primary);
    --fc-event-border-color: var(--accent-primary);
    --fc-today-bg-color: var(--hover-bg);
}

[b-iumfxe75zx] .fc-theme-standard td,
[b-iumfxe75zx] .fc-theme-standard th {
    border-color: var(--border-color);
}

[b-iumfxe75zx] .fc-col-header-cell {
    background: var(--header-bg);
    color: var(--text-color);
}

[b-iumfxe75zx] .fc-daygrid-day-number {
    color: var(--text-color);
}

/* FullCalendar renders day numbers, month titles, and list-day headers as <a> tags.
   Bootstrap underlines all anchors by default, so strip that across the calendar. */
[b-iumfxe75zx] .fc a {
    text-decoration: none;
}

[b-iumfxe75zx] .fc-daygrid-day {
    background: var(--card-bg);
    transition: background 0.2s ease;
}

[b-iumfxe75zx] .fc-daygrid-day.fc-day-today {
    background: var(--fc-today-bg-color);
}

@media (hover: hover) {
    [b-iumfxe75zx] .fc-daygrid-day:hover {
        background: var(--hover-bg);
        cursor: pointer;
    }
}

@media (hover: hover) {
    [b-iumfxe75zx] .fc-daygrid-day.fc-day-today:hover {
        background: var(--hover-bg);
        opacity: 0.8;
    }
}

/* Week and Day view time slot hover - both :00 and :30 slots */
[b-iumfxe75zx] .fc-timegrid-slot,
[b-iumfxe75zx] .fc-timegrid-slot-lane {
    transition: background 0.2s ease;
}

@media (hover: hover) {

    [b-iumfxe75zx] .fc-timegrid-slot:hover,
    [b-iumfxe75zx] .fc-timegrid-slot-lane:hover {
        background: var(--hover-bg) !important;
        cursor: pointer;
    }
}

/* Remove default today column highlight ONLY in day view (not week view) */
[b-iumfxe75zx] .fc-timeGridDay-view .fc-timegrid-col.fc-day-today {
    background: transparent !important;
}

[b-iumfxe75zx] .fc-timegrid-col {
    transition: background 0.2s ease;
}

/* Style the now indicator line to match project color scheme (purple) */
[b-iumfxe75zx] .fc-timegrid-now-indicator-line {
    border-color: var(--accent-primary);
}

[b-iumfxe75zx] .fc-timegrid-now-indicator-arrow {
    border-left-color: var(--accent-primary) !important;
}



[b-iumfxe75zx] .fc-event {
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    [b-iumfxe75zx] .fc-event:hover {
        filter: brightness(1.15);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }
}

/* Multi-Month Year View */
[b-iumfxe75zx] .fc-multimonth {
    background: var(--card-bg);
}

[b-iumfxe75zx] .fc-multimonth-month {
    padding: 0.5rem;
}

[b-iumfxe75zx] .fc-multimonth-header {
    background: var(--card-bg);
}

[b-iumfxe75zx] .fc-multimonth-title {
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem;
}

[b-iumfxe75zx] .fc-multimonth-daygrid {
    background: var(--card-bg);
}

[b-iumfxe75zx] .fc-multimonth .fc-daygrid-day-number {
    color: var(--text-color);
    font-size: 0.8rem;
}

[b-iumfxe75zx] .fc-multimonth .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-iumfxe75zx] .fc-multimonth .fc-col-header-cell-cushion {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

[b-iumfxe75zx] .fc-multimonth .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    color: var(--text-muted);
}

/* List / Schedule View */
[b-iumfxe75zx] .fc-list {
    background: var(--card-bg);
    border-color: var(--border-color);
}

[b-iumfxe75zx] .fc-list-sticky .fc-list-day > * {
    background: var(--bg-secondary);
}

[b-iumfxe75zx] .fc-list-day-cushion {
    background: var(--bg-secondary);
    color: var(--text-color);
    font-weight: 600;
}

[b-iumfxe75zx] .fc-list-day-text,
[b-iumfxe75zx] .fc-list-day-side-text {
    color: var(--text-color);
}

[b-iumfxe75zx] .fc-list-event {
    cursor: pointer;
}

[b-iumfxe75zx] .fc-list-event td {
    border-color: var(--border-color);
    padding: 0.625rem 1rem;
}

[b-iumfxe75zx] .fc-list-event-title {
    color: var(--text-color);
}

[b-iumfxe75zx] .fc-list-event-time {
    color: var(--text-secondary);
}

[b-iumfxe75zx] .fc-list-event-dot {
    border-color: var(--accent-primary);
}

@media (hover: hover) {
    [b-iumfxe75zx] .fc-list-event:hover td {
        background: var(--hover-bg);
    }
}

[b-iumfxe75zx] .fc-list-empty {
    background: var(--card-bg);
}

[b-iumfxe75zx] .fc-list-empty-cushion {
    color: var(--text-secondary);
    font-style: italic;
}

/* Days of week selector */
.days-of-week-selector[b-iumfxe75zx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    background: var(--input-bg);
    transition: all 0.2s;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .day-checkbox:hover[b-iumfxe75zx] {
        background: var(--hover-bg);
    }
}

.day-checkbox input[type="checkbox"][b-iumfxe75zx] {
    width: auto;
    margin: 0;
}

.day-checkbox input[type="checkbox"]:checked+span[b-iumfxe75zx],
.day-checkbox:has(input[type="checkbox"]:checked)[b-iumfxe75zx] {
    background: var(--hover-bg);
    font-weight: 600;
}

/* Info button and tooltip */
.info-button-wrapper[b-iumfxe75zx] {
    position: relative;
    display: inline-block;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.info-button[b-iumfxe75zx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--accent-primary);
    cursor: help;
    font-size: 0.875rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .info-button:hover[b-iumfxe75zx] {
        color: var(--accent-secondary);
        transform: scale(1.15);
    }
}

.info-tooltip[b-iumfxe75zx] {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 250px;
    max-width: 300px;
    padding: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 0.8rem;
    color: var(--text-color);
    line-height: 1.5;
    text-align: left;
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}

.info-tooltip[b-iumfxe75zx]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--card-bg);
}

@media (hover: hover) {
    .info-button-wrapper:hover .info-tooltip[b-iumfxe75zx] {
        visibility: visible;
        opacity: 1;
    }
}

@media (hover: none) {
    .info-tooltip[b-iumfxe75zx] {
        opacity: 1;
        visibility: visible;
    }
}

/* Monthly recurrence mode options */
.monthly-mode-options[b-iumfxe75zx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-label[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    cursor: pointer;
    transition: all 0.2s;
    flex-wrap: wrap;
}

@media (hover: hover) {
    .radio-label:hover[b-iumfxe75zx] {
        background: var(--hover-bg);
    }
}

.radio-label input[type="radio"][b-iumfxe75zx] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.radio-label input[type="radio"]:checked[b-iumfxe75zx] {
    accent-color: var(--accent-primary);
}

.radio-label:has(input[type="radio"]:checked)[b-iumfxe75zx] {
    background: var(--hover-bg);
    border-color: var(--accent-primary);
}

.radio-label span[b-iumfxe75zx] {
    color: var(--text-color);
    font-size: 0.875rem;
}

.hint-text[b-iumfxe75zx] {
    color: var(--text-secondary, #6c757d);
}

.form-hint[b-iumfxe75zx] {
    display: block;
    margin: -0.25rem 0 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.day-input[b-iumfxe75zx] {
    width: 70px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.ordinal-select[b-iumfxe75zx],
.weekday-select[b-iumfxe75zx] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
}

.ordinal-select[b-iumfxe75zx] {
    min-width: 85px;
}

.weekday-select[b-iumfxe75zx] {
    min-width: 110px;
}

.warning-text[b-iumfxe75zx] {
    color: var(--streak-color);
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Recurrence end options */
.recurrence-end-options[b-iumfxe75zx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.occurrence-input[b-iumfxe75zx] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

/* Recurrence preview */
.recurrence-preview[b-iumfxe75zx] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.preview-header[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.preview-header .bi[b-iumfxe75zx] {
    font-size: 1rem;
}

.preview-dates[b-iumfxe75zx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.preview-date[b-iumfxe75zx] {
    padding: 0.4rem 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--text-color);
}

.preview-more[b-iumfxe75zx] {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #6c757d);
    font-style: italic;
}

.preview-total[b-iumfxe75zx] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-color);
}

.preview-total strong[b-iumfxe75zx] {
    color: var(--accent-primary);
}

/* Birthday Modal Styles */
.birthday-modal[b-iumfxe75zx] {
    max-width: 600px;
}

.birthday-modal .modal-header[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.birthday-modal .header-actions[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-new-birthday[b-iumfxe75zx] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--list-color-pink-500) 0%, var(--list-color-pink-600) 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .btn-new-birthday:hover[b-iumfxe75zx] {
        background: linear-gradient(135deg, var(--list-color-pink-600) 0%, var(--list-color-pink-700) 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn-new-birthday:active[b-iumfxe75zx] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.birthday-list[b-iumfxe75zx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.birthday-item[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--input-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .birthday-item:hover[b-iumfxe75zx] {
        background: rgba(236, 72, 153, 0.05);
        border-color: var(--list-color-pink-500);
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(236, 72, 153, 0.15);
    }
}

.birthday-icon[b-iumfxe75zx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(236, 72, 153, 0.1);
    font-size: 1rem;
    flex-shrink: 0;
}

.birthday-details[b-iumfxe75zx] {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.birthday-name[b-iumfxe75zx] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    flex-shrink: 1;
}

.birthday-separator[b-iumfxe75zx] {
    color: var(--text-muted, #9ca3af);
    flex-shrink: 0;
}

.birthday-date[b-iumfxe75zx] {
    font-size: 0.85rem;
    color: var(--text-secondary, #6c757d);
    white-space: nowrap;
    flex-shrink: 0;
}

.birthday-age[b-iumfxe75zx] {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

.birthday-calendar-badge[b-iumfxe75zx] {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--list-color-pink-500);
    background: rgba(236, 72, 153, 0.08);
    border: 1px solid rgba(236, 72, 153, 0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    flex-shrink: 0;
    margin-left: auto;
}

.add-birthday-row[b-iumfxe75zx] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* QuickAddRow with date input styling */
[b-iumfxe75zx] .add-birthday-row .quick-add-row {
    background: var(--input-bg);
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    cursor: default;
}

[b-iumfxe75zx] .add-birthday-row .add-form.with-date-input {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
}

[b-iumfxe75zx] .add-birthday-row .quick-add-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s;
}

[b-iumfxe75zx] .add-birthday-row .quick-add-input:focus {
    outline: none;
    border-color: var(--list-color-pink-500);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

[b-iumfxe75zx] .add-birthday-row .quick-add-date-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s;
}

[b-iumfxe75zx] .add-birthday-row .quick-add-date-input:focus {
    outline: none;
    border-color: var(--list-color-pink-500);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

[b-iumfxe75zx] .add-birthday-row .add-actions {
    display: flex;
    gap: 0.5rem;
}

[b-iumfxe75zx] .add-birthday-row .add-prompt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary, #6c757d);
    font-size: 0.9rem;
    cursor: pointer;
}

[b-iumfxe75zx] .add-birthday-row .add-icon {
    color: var(--list-color-pink-500);
    font-size: 1rem;
}

.text-secondary[b-iumfxe75zx] {
    color: var(--text-secondary, #6c757d);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Responsive Styles */
.nav-buttons[b-iumfxe75zx] {
    display: flex;
    align-items: center;
}

.nav-buttons .nav-btn:first-child[b-iumfxe75zx] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.nav-buttons .nav-btn:last-child[b-iumfxe75zx] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-text[b-iumfxe75zx] {
    display: inline;
}

/* Select dropdown for mobile views */
.view-select-mobile[b-iumfxe75zx] {
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    appearance: auto;
    min-height: 36px;
}

@media (max-width: 992px) {
    .toolbar-title[b-iumfxe75zx] {
        font-size: 1.125rem;
    }

    .btn-text[b-iumfxe75zx] {
        display: none;
    }

    .action-btn-text[b-iumfxe75zx] {
        width: 36px;
        height: 36px;
        padding: 0;
        gap: 0;
    }
}

@media (max-width: 768px) {
    .events-page[b-iumfxe75zx] {
        height: calc(100vh - 52px);
    }

    .sidebar-panel[b-iumfxe75zx] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 1040;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        animation: slideInLeft-b-iumfxe75zx 0.25s ease-out;
    }

    @keyframes slideInLeft-b-iumfxe75zx {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }

    .sidebar-backdrop[b-iumfxe75zx] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        backdrop-filter: blur(2px);
    }

    /* Single compact row (Google-Calendar style): left cluster = hamburger, nav,
       optional Today, then the flexible date title; right cluster = settings gear + view
       select. The `today` column collapses to ~0 when the Today button is hidden. */
    .events-toolbar[b-iumfxe75zx] {
        display: grid;
        grid-template-columns: auto auto auto 1fr auto auto;
        grid-template-rows: auto;
        grid-template-areas: "sidebar nav today title menu view";
        gap: 0.75rem 0.5rem;
        padding: 0.75rem;
    }

    .toolbar-left[b-iumfxe75zx],
    .toolbar-right[b-iumfxe75zx] {
        display: contents;
    }

    .sidebar-toggle[b-iumfxe75zx] { grid-area: sidebar; }

    .toolbar-title-wrapper[b-iumfxe75zx] {
        grid-area: title;
        justify-content: flex-start;
        overflow: hidden;
        /* Grid items default to min-width: auto, which would refuse to shrink below the
           title's intrinsic width and force overflow. min-width: 0 lets the 1fr column
           shrink so .toolbar-title can ellipsize on narrow phones. */
        min-width: 0;
    }

    .toolbar-title[b-iumfxe75zx] {
        font-size: 1.125rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Add event + Birthdays move to floating action buttons on mobile
       (.mobile-fab-container below). Hide their toolbar counterparts. */
    .btn-birthdays[b-iumfxe75zx],
    .btn-add-event[b-iumfxe75zx] {
        display: none;
    }

    .menu-wrapper[b-iumfxe75zx] { grid-area: menu; }
    
    .toolbar-today-btn[b-iumfxe75zx] { grid-area: today; justify-self: start; }
    .nav-buttons[b-iumfxe75zx] { grid-area: nav; }
    .view-select-mobile[b-iumfxe75zx] { grid-area: view; }

    /* Switch view buttons to select dropdown */
    .view-switcher-desktop[b-iumfxe75zx] {
        display: none;
    }

    .view-select-mobile[b-iumfxe75zx] {
        display: block;
        min-height: 44px;
        justify-self: end;
    }

    /* Touch targets */
    .action-btn[b-iumfxe75zx],
    .action-btn-text[b-iumfxe75zx] {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .menu-wrapper[b-iumfxe75zx] {
        display: block;
        flex: 0 0 44px;
        position: relative;
    }

    .modern-dropdown[b-iumfxe75zx] {
        right: 0;
        left: auto;
        width: 280px;
        max-width: 90vw;
    }

    /* Mobile: dialog fills the viewport so the inner .modal-content can stretch full-screen. */
    .event-dialog-shell[b-iumfxe75zx] {
        max-width: 100vw;
        max-height: 100vh;
        width: 100vw;
        height: 100vh;
    }

    .modal-content[b-iumfxe75zx] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        animation: slideUp-b-iumfxe75zx 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal-header[b-iumfxe75zx] {
        padding: 1rem 1.25rem;
        flex-shrink: 0;
    }

    .modal-footer[b-iumfxe75zx] {
        padding: 1rem 1.25rem;
        flex-shrink: 0;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .modal-body[b-iumfxe75zx] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem;
    }

    .close-button[b-iumfxe75zx] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .form-row[b-iumfxe75zx] {
        grid-template-columns: 1fr;
    }

    /* Birthday List Items */
    .birthday-item[b-iumfxe75zx] {
        padding: 0.5rem 0.75rem;
    }

    .birthday-icon[b-iumfxe75zx] {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    [b-iumfxe75zx] .add-birthday-row .add-form.with-date-input {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .events-toolbar[b-iumfxe75zx] {
        gap: 0.5rem 0.375rem;
        padding: 0.5rem;
    }

    .action-btn[b-iumfxe75zx],
    .action-btn-text[b-iumfxe75zx],
    .menu-wrapper[b-iumfxe75zx] {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .toolbar-title[b-iumfxe75zx] {
        font-size: 0.95rem;
    }

    .toolbar-today-btn[b-iumfxe75zx] {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }

    .nav-btn[b-iumfxe75zx] {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        font-size: 0.75rem;
    }

    .toolbar-title-wrapper[b-iumfxe75zx] {
        padding: 0.125rem 0.25rem;
    }

    .toolbar-title-caret[b-iumfxe75zx] {
        display: none;
    }

    .modal-footer[b-iumfxe75zx] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-iumfxe75zx] {
        width: 100%;
        justify-content: center;
    }

    .modal-actions-right[b-iumfxe75zx] {
        width: 100%;
        flex-direction: column;
    }
}

/* Print Styles */
@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    *[b-iumfxe75zx] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html[b-iumfxe75zx],
    body[b-iumfxe75zx] {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Hide navigation and controls */
    .navbar-top[b-iumfxe75zx],
    .app-footer[b-iumfxe75zx],
    nav.navbar-top[b-iumfxe75zx],
    footer.app-footer[b-iumfxe75zx],
    .sidebar[b-iumfxe75zx],
    .events-toolbar[b-iumfxe75zx] {
        display: none !important;
    }

    .events-page[b-iumfxe75zx] {
        padding: 0 !important;
        background: white !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .events-container[b-iumfxe75zx] {
        box-shadow: none !important;
        padding: 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .events-layout[b-iumfxe75zx] {
        overflow: visible !important;
        height: auto !important;
    }

    /* Optimize calendar for print - force full width */
    #calendar[b-iumfxe75zx] {
        min-height: 0 !important;
        height: auto !important;
        background: white !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* FullCalendar print optimizations - using :global() to pierce scoping */
    :global(.fc)[b-iumfxe75zx] {
        font-size: 9pt !important;
        width: 100% !important;
    }

    :global(.fc-view-harness)[b-iumfxe75zx] {
        width: 100% !important;
    }

    :global(.fc-daygrid)[b-iumfxe75zx],
    :global(.fc-scrollgrid)[b-iumfxe75zx],
    :global(.fc-scrollgrid-sync-table)[b-iumfxe75zx] {
        width: 100% !important;
    }

    :global(.fc-toolbar)[b-iumfxe75zx] {
        margin-bottom: 0.5rem !important;
        display: flex !important;
        justify-content: center !important;
    }

    :global(.fc-toolbar-title)[b-iumfxe75zx] {
        color: #000 !important;
        font-size: 16pt !important;
    }

    :global(.fc-button)[b-iumfxe75zx] {
        display: none !important;
    }

    :global(.fc-toolbar-chunk)[b-iumfxe75zx] {
        display: none !important;
    }

    :global(.fc-toolbar-chunk:nth-child(2))[b-iumfxe75zx] {
        display: flex !important;
    }

    :global(.fc-col-header-cell)[b-iumfxe75zx] {
        background: #f0f0f0 !important;
        color: #000 !important;
        border-color: #000 !important;
        font-weight: bold !important;
        padding: 4px !important;
    }

    :global(.fc-daygrid-day)[b-iumfxe75zx] {
        background: white !important;
        min-height: 80px !important;
    }

    :global(.fc-daygrid-day-number)[b-iumfxe75zx] {
        color: #000 !important;
        padding: 4px !important;
    }

    :global(.fc-daygrid-day-top)[b-iumfxe75zx] {
        flex-direction: row !important;
    }

    :global(.fc-event)[b-iumfxe75zx] {
        page-break-inside: avoid !important;
        font-size: 8pt !important;
        padding: 2px 4px !important;
    }

    :global(.fc-event-title)[b-iumfxe75zx] {
        font-weight: 500 !important;
    }

    :global(.fc-theme-standard) td[b-iumfxe75zx],
    :global(.fc-theme-standard) th[b-iumfxe75zx] {
        border-color: #333 !important;
        border-width: 1px !important;
    }

    :global(.fc-scrollgrid)[b-iumfxe75zx] {
        border-color: #333 !important;
    }

    /* Ensure week view prints properly too */
    :global(.fc-timegrid)[b-iumfxe75zx] {
        width: 100% !important;
    }

    :global(.fc-timegrid-slot)[b-iumfxe75zx] {
        height: 2em !important;
    }
}

/* Weather chip — rendered by calendar.js dayCellDidMount on the month view.
   Design goals:
   - Glass-pill aesthetic with condition-based tint (clear/clouds/rain/storm/snow/fog)
   - Tabular-nums + 600 weight on the temperature for readable alignment across rows
   - Tiny vertical lift on hover as a subtle affordance (tooltip shows the range)
   - Dark-mode safe via color-mix() over existing accent/surface tokens

   NOTE on Blazor scoped CSS: the chip is injected by calendar.js and has no scope
   attribute, so we use ::deep — compiled to [b-...] .weather-chip — which matches
   any descendant of this component's rendered root (.events-page). */
[b-iumfxe75zx] .weather-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 4px 10px;
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--text-color);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 14%, transparent),
        color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 22%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 10%, transparent);
    backdrop-filter: saturate(1.4) blur(2px);
    -webkit-backdrop-filter: saturate(1.4) blur(2px);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

[b-iumfxe75zx] .weather-chip .bi {
    font-size: 0.875rem;
    color: var(--weather-tint, var(--accent-primary));
    line-height: 1;
}

[b-iumfxe75zx] .weather-chip-temp {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

/* Hover reveal only on true pointer devices (not touch) */
@media (hover: hover) {
    [b-iumfxe75zx] .weather-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 22%, transparent);
    }
}

/* Condition tints — each sets the --weather-tint custom property consumed above */
[b-iumfxe75zx] .weather-chip[data-condition="clear"]   { --weather-tint: var(--weather-clear); }
[b-iumfxe75zx] .weather-chip[data-condition="clouds"]  { --weather-tint: var(--weather-clouds); }
[b-iumfxe75zx] .weather-chip[data-condition="rain"]    { --weather-tint: var(--weather-rain); }
[b-iumfxe75zx] .weather-chip[data-condition="storm"]   { --weather-tint: var(--weather-storm); }
[b-iumfxe75zx] .weather-chip[data-condition="snow"]    { --weather-tint: var(--weather-snow); }
[b-iumfxe75zx] .weather-chip[data-condition="fog"]     { --weather-tint: var(--weather-fog); }

/* Dark mode: soften the tints so they don't glow against dark surfaces.
   :global() wraps the theme selector because [data-theme] lives on <html>,
   outside this component's scope. */
:global([data-theme="dark"])[b-iumfxe75zx]  .weather-chip[data-condition="clear"]  { --weather-tint: #fbbf24; }
:global([data-theme="dark"])[b-iumfxe75zx]  .weather-chip[data-condition="clouds"] { --weather-tint: #94a3b8; }
:global([data-theme="dark"])[b-iumfxe75zx]  .weather-chip[data-condition="rain"]   { --weather-tint: #60a5fa; }
:global([data-theme="dark"])[b-iumfxe75zx]  .weather-chip[data-condition="storm"]  { --weather-tint: #a78bfa; }
:global([data-theme="dark"])[b-iumfxe75zx]  .weather-chip[data-condition="snow"]   { --weather-tint: #22d3ee; }
:global([data-theme="dark"])[b-iumfxe75zx]  .weather-chip[data-condition="fog"]    { --weather-tint: #cbd5e1; }

[b-iumfxe75zx] .fc-daygrid-day-top {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 2px !important;
}

.weather-attribution[b-iumfxe75zx] {
    text-align: right;
    font-size: 0.7rem;
    color: var(--text-muted);
    padding: 4px 12px 2px;
}

.weather-attribution a[b-iumfxe75zx] {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.weather-attribution a:hover[b-iumfxe75zx] {
    text-decoration: underline;
}

/* Touch devices: lift interactive controls to the 48px floor (CLAUDE.md rule 44 / WCAG 2.5.8).
   Coarse-pointer is more reliable than max-width — covers iPad in landscape, foldables, etc. */
@media (pointer: coarse) {
    .events-toolbar .action-btn[b-iumfxe75zx],
    .events-toolbar .action-btn-text[b-iumfxe75zx],
    .events-toolbar .view-btn[b-iumfxe75zx],
    .events-toolbar .menu-trigger[b-iumfxe75zx] {
        min-height: 48px;
        min-width: 48px;
    }

    [b-iumfxe75zx] .weather-chip {
        min-height: 48px;
    }
}

/* Mobile layout — flip the default arrangement inside `.fc-daygrid-day-top`:
   - Day number: 14px, no container padding, pinned to top-right via `margin-inline-start: auto`
   - Weather chip: icon-only, absolutely positioned in the cell's top-left corner
   Narrow phone cells (~55px wide) don't leave slack for the chip alongside the number in
   normal flow, so the chip stays out of flow (the `.fc-daygrid-day { position: relative }`
   above makes the cell the positioning context). */
@media (max-width: 576px) {
    [b-iumfxe75zx] .fc-daygrid-day {
        position: relative;
    }

    [b-iumfxe75zx] .fc-daygrid-day-top {
        padding: 0 !important;
        min-height: 20px;
    }

    [b-iumfxe75zx] .fc-daygrid-day-number {
        font-size: 0.875rem;
        padding: 2px 4px !important;
        margin-inline-start: auto;
        line-height: 1.1;
    }

    [b-iumfxe75zx] .fc-daygrid-day-top .weather-chip {
        position: absolute;
        top: 2px;
        left: 2px;
        margin: 0;
        padding: 1px 5px;
        gap: 0;
        min-height: 18px;
        z-index: 2;
    }

    [b-iumfxe75zx] .weather-chip .bi {
        font-size: 0.8rem;
    }

    [b-iumfxe75zx] .weather-chip-temp {
        display: none;
    }

    .weather-attribution[b-iumfxe75zx] {
        font-size: 0.625rem;
        padding: 2px 8px;
    }
}

/* Very narrow screens (older iPhone SE, Android small) — shrink the icon a touch more
   and snug the chip tighter into the corner so it can't clip against the cell border. */
@media (max-width: 360px) {
    [b-iumfxe75zx] .fc-daygrid-day-top .weather-chip {
        top: 1px;
        left: 1px;
        padding: 1px 4px;
    }

    [b-iumfxe75zx] .weather-chip .bi {
        font-size: 0.75rem;
    }
}

/* ───────── Task chips on the calendar ─────────
   Tasks render via FullCalendar's default rendering; calendar.js eventDidMount adds a leading
   checkbox circle. Styled via ::deep because chip DOM is built by FullCalendar/JS, not Blazor (rule 33b). */

/* Leading checkbox circle — works in both block (timeGrid/list-item-bg) and list-item (month) layouts. */
[b-iumfxe75zx] .fc-task-event .task-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 0.375rem;
    vertical-align: middle;
}

[b-iumfxe75zx] .fc-task-event .task-circle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
    border-radius: 50%;
}

/* Chip itself: transparent + tight flex row of [task-circle | main]. Applies to BOTH
   FC daygrid variants — the "dot" variant (timed tasks; .fc-daygrid-dot-event) and the
   "block" variant (all-day tasks; .fc-daygrid-block-event). Without the explicit
   `background-color: transparent !important` Chromium sometimes keeps FC's inline
   `style="background-color: rgb(...)"` on the <a> even with the `background:` shorthand
   `!important` — be defensive. */
[b-iumfxe75zx] .fc-task-event.fc-daygrid-event,
[b-iumfxe75zx] .fc-task-event.fc-daygrid-block-event {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 1px 4px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* Force the inner .fc-event-main into a flex container WITH our text color. This
   overrides FullCalendar's `.fc-h-event .fc-event-main { color: var(--fc-event-text-color); }`
   default (white text against the colored chip background) — without this rule, block-
   variant task titles render white on transparent and become invisible / unreadable. */
[b-iumfxe75zx] .fc-task-event .fc-event-main {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 0;
    color: var(--text-color);
}

/* Block-variant nests the title in extra wrappers (.fc-event-main-frame >
   .fc-event-title-container); carry the flex + overflow discipline through them so
   the title can ellipsise inside the (possibly multi-day) chip width. */
[b-iumfxe75zx] .fc-task-event .fc-event-main-frame,
[b-iumfxe75zx] .fc-task-event .fc-event-title-container {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 0;
}

[b-iumfxe75zx] .fc-task-event .fc-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

/* Time stays fully visible — never narrowed or ellipsised — so users always see when
   a timed task fires. The title (above) shrinks first under flex pressure. */
[b-iumfxe75zx] .fc-task-event .fc-event-time {
    flex-shrink: 0;
    white-space: nowrap;
}

[b-iumfxe75zx] .fc-task-event .fc-daygrid-event-dot {
    display: none;
}

[b-iumfxe75zx] .fc-task-event .task-circle {
    color: var(--task-chip-color, currentColor);
}

/* Non-task event chips (regular calendar events): keep their colored backgrounds, but
   give the title the same single-line ellipsis treatment so long titles don't wrap or
   overflow the day cell — and keep .fc-event-time fully visible. */
[b-iumfxe75zx] .fc-daygrid-event:not(.fc-task-event) .fc-event-main,
[b-iumfxe75zx] .fc-daygrid-event:not(.fc-task-event) .fc-event-main-frame,
[b-iumfxe75zx] .fc-daygrid-event:not(.fc-task-event) .fc-event-title-container {
    overflow: hidden;
    min-width: 0;
}

[b-iumfxe75zx] .fc-daygrid-event:not(.fc-task-event) .fc-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

[b-iumfxe75zx] .fc-daygrid-event:not(.fc-task-event) .fc-event-time {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Block-rendered chips (timeGridWeek/timeGridDay): the chip background is the task color.
   Title and circle render in white for contrast against the colored fill. */
[b-iumfxe75zx] .fc-task-event.fc-timegrid-event .task-circle,
[b-iumfxe75zx] .fc-task-event.fc-timegrid-event .fc-event-title,
[b-iumfxe75zx] .fc-task-event.fc-timegrid-event .fc-event-time {
    color: white;
}

/* List view (Schedule): the title row gets the circle inline; keep the row's normal text color. */
[b-iumfxe75zx] .fc-task-event.fc-list-event .task-circle {
    color: var(--accent-primary);
}

/* Completed tasks: strikethrough title + dimmed chip. The fade is intentional only on completed —
   past uncompleted tasks stay full-opacity as a deliberate "nag" pattern (Google Calendar behavior). */
[b-iumfxe75zx] .fc-task-event.fc-task-completed .fc-event-title,
[b-iumfxe75zx] .fc-task-event.fc-task-completed .fc-list-event-title {
    text-decoration: line-through;
}

[b-iumfxe75zx] .fc-task-event.fc-task-completed {
    opacity: 0.55;
}

/* Deadline countdown chip — injected by calendar.js eventDidMount (rule 33b: ::deep) */
[b-iumfxe75zx] .deadline-countdown {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.3rem;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

[b-iumfxe75zx] .deadline-countdown-upcoming {
    background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
    color: var(--accent-primary);
}

[b-iumfxe75zx] .deadline-countdown-grace {
    background: var(--warning-light);
    color: var(--text-color);
}

[b-iumfxe75zx] .deadline-countdown-missed {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--danger);
}

/* Reminder bell glyph — injected by calendar.js eventDidMount (rule 33b: ::deep).
   Sits to the left of the event title. Matches Google Calendar / Todoist conventions:
   single icon, no count, signals "this event will notify me." */
[b-iumfxe75zx] .event-reminder-indicator {
    display: inline-block;
    font-size: 0.7rem;
    margin-right: 0.3rem;
    opacity: 0.85;
    vertical-align: middle;
}

/* Mobile floating action buttons — primary "Add event" + secondary "Birthdays".
   Pattern mirrors GymTracker3 (.mobile-fab-container in workouts.css) and
   CalorieTracker2 (Dashboard.razor.css). Hidden on desktop; visible at ≤768px.
   bottom: 90px clears the AssistantWidget which sits at bottom: 20px (60px
   widget + 10px gap). z-index 990 stays below modals (1100) but above content. */
.mobile-fab-container[b-iumfxe75zx] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-fab-container[b-iumfxe75zx] {
        position: fixed;
        bottom: 90px;
        /* right: 10px aligns the column horizontally with the shared AssistantWidget,
           which sits at right: 10px on mobile — without this the robot FAB juts 10px
           further right than the +/cake stack (see CalorieTracker2 Dashboard.razor.css). */
        right: 10px;
        z-index: 990;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        /* Container is transparent to pointer events so users can tap calendar
           events behind the bounding box; only the buttons themselves capture clicks. */
        pointer-events: none;
    }

    .fab-btn[b-iumfxe75zx] {
        pointer-events: auto;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .fab-btn:active[b-iumfxe75zx] {
        transform: scale(0.92);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .fab-btn:focus-visible[b-iumfxe75zx] {
        outline: 2px solid var(--accent-primary);
        outline-offset: 2px;
    }

    .fab-primary[b-iumfxe75zx] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
        background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    }

    .fab-secondary[b-iumfxe75zx] {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    }
}
/* /Components/Pages/HabitDetail.razor.rz.scp.css */
.habit-detail-page[b-777kn6vesc] {
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.back-button[b-777kn6vesc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    min-height: 40px;
}

@media (hover: hover) {
    .back-button:hover[b-777kn6vesc] {
        background: var(--hover-bg);
    }
}

.habit-header[b-777kn6vesc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 1rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--habit-color);
    border-radius: 12px;
}

.habit-header h1[b-777kn6vesc] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.habit-description[b-777kn6vesc] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.stats-grid[b-777kn6vesc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.stat-card[b-777kn6vesc] {
    padding: 0.875rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-height: 92px;
}

.stat-label[b-777kn6vesc] {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.25;
}

/* Always anchor the value at the bottom-left so single-line and multi-line
   labels produce a visually consistent grid. */
.stat-value[b-777kn6vesc] {
    margin-top: auto;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    text-align: left;
}

.stat-value .bi[b-777kn6vesc] {
    color: var(--streak-color);
    margin-right: 0.25rem;
}

.heatmap-section[b-777kn6vesc],
.milestones-section[b-777kn6vesc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.milestones-section h2[b-777kn6vesc] {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
}

.milestone-list[b-777kn6vesc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.milestone-row[b-777kn6vesc] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.875rem;
}

.milestone-title[b-777kn6vesc] {
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.milestone-date[b-777kn6vesc] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.milestone-xp[b-777kn6vesc] {
    color: var(--accent-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.muted[b-777kn6vesc] {
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 576px) {
    .habit-detail-page[b-777kn6vesc] {
        padding: 0.75rem;
    }

    .habit-header h1[b-777kn6vesc] {
        font-size: 1.25rem;
    }

    .stat-value[b-777kn6vesc] {
        font-size: 1.25rem;
    }

    .milestone-row[b-777kn6vesc] {
        grid-template-columns: auto 1fr;
        row-gap: 0.25rem;
    }

    .milestone-date[b-777kn6vesc],
    .milestone-xp[b-777kn6vesc] {
        grid-column: 2;
    }
}

/* Lifecycle banner: Paused / Archived state callouts above the heatmap.
   Same shape as the existing skeleton cards; left-edge accent color signals state. */
.lifecycle-banner[b-777kn6vesc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin: 0 0 1rem 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: 12px;
}

.lifecycle-banner.archived[b-777kn6vesc] {
    border-left-color: var(--text-muted);
}

.lifecycle-banner .banner-icon[b-777kn6vesc] {
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.lifecycle-banner.archived .banner-icon[b-777kn6vesc] {
    color: var(--text-muted);
}

.lifecycle-banner .banner-text[b-777kn6vesc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.lifecycle-banner .banner-text strong[b-777kn6vesc] {
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.lifecycle-banner .banner-text span[b-777kn6vesc] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

@media (max-width: 576px) {
    .lifecycle-banner[b-777kn6vesc] {
        flex-wrap: wrap;
    }

    .lifecycle-banner .btn[b-777kn6vesc] {
        width: 100%;
    }
}
/* /Components/Pages/Habits.razor.rz.scp.css */
/* Modern Habits Page Styling */

.habits-page[b-s9696asn1e] {
    padding: 2rem;
    max-width: 1600px; /* Wider for better calendar view */
    margin: 0 auto;
    min-height: 80vh;
}

/* --- Controls Bar --- */
.controls-bar[b-s9696asn1e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 1.5rem;
    background: var(--card-bg);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-light);
}

.view-toggles[b-s9696asn1e] {
    display: flex;
    background: var(--bg-primary);
    padding: 0.25rem;
    border-radius: 8px;
    gap: 0.25rem;
}

.view-toggle-btn[b-s9696asn1e] {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .view-toggle-btn:hover[b-s9696asn1e] {
        color: var(--text-primary);
        background: var(--hover-bg);
    }
}

.view-toggle-btn.active[b-s9696asn1e] {
    background: var(--card-bg);
    color: var(--accent-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-controls[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.period-label[b-s9696asn1e] {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
}

.nav-arrow[b-s9696asn1e] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .nav-arrow:hover[b-s9696asn1e] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

/* Right-side cluster of controls-bar. Wrapping them keeps .controls-bar's
   `justify-content: space-between` a simple two-child layout (controls-left / controls-right)
   with the absolutely-positioned .nav-controls floating over the center. */
.controls-right[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new-habit[b-s9696asn1e] {
    background: var(--accent-primary);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

/* Header icon-only button (gear, future header chips) — matches new-habit height
   so the row aligns. Square shape, no label. */
.btn-icon-header[b-s9696asn1e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    cursor: pointer;
    font-size: 1.05rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-icon-header:hover[b-s9696asn1e] {
        color: var(--accent-primary);
        border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
        background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-tertiary));
    }
}

@media (hover: hover) {
    .btn-new-habit:hover[b-s9696asn1e] {
        background: var(--accent-secondary);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
    }
}

/* Compact day-streak pill inside controls-bar — replaces the old header stat card.
   #f59e0b matches the streak amber used by .habit-streak (no semantic token exists). */
.controls-streak-pill[b-s9696asn1e] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent);
    color: #f59e0b;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

.controls-streak-pill .bi-fire[b-s9696asn1e] {
    font-size: 1rem;
}

.controls-streak-pill .streak-pill-value[b-s9696asn1e] {
    font-variant-numeric: tabular-nums;
}

.controls-streak-pill .streak-pill-label[b-s9696asn1e] {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.8rem;
}

/* --- Main Grid --- */
.habits-grid-container[b-s9696asn1e] {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    overflow: hidden; /* Contains the scrollbar */
    position: relative;
    display: flex;
    flex-direction: column;
}

.grid-scroll-area[b-s9696asn1e] {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    padding-right: 0;
}

/* Grid Layout Definition */
.habits-grid[b-s9696asn1e] {
    display: grid;
    --habit-name-width: 280px;
}

/* Sticky Left Column (Habit Names) */
.grid-header-cell:first-child[b-s9696asn1e],
.habit-row-cell:first-child[b-s9696asn1e] {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--card-bg);
    border-right: 1px solid var(--border-light);
    width: var(--habit-name-width);
    min-width: var(--habit-name-width);
}
/* Ensure sticky header stays on top of sticky left column content when scrolling down (if we had vertical scroll) */
.grid-header-cell:first-child[b-s9696asn1e] {
    z-index: 20;
}

/* When a row's 3-dot menu is open, elevate the row's sticky cell above the other
   rows' sticky cells. The HabitRowMenu dropdown lives inside this cell and its own
   z-index is trapped by the cell's stacking context — without this rule, sibling
   rows (also z-index: 10, later in DOM order) paint over the open dropdown. */
.habit-row-cell.habit-info-cell.menu-open[b-s9696asn1e] {
    z-index: 50;
}

/* Header Row */
.grid-header-row[b-s9696asn1e] {
    display: contents; /* Use parent grid */
}

.grid-header-cell[b-s9696asn1e] {
    padding: 1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.grid-header-cell.today-header[b-s9696asn1e] {
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.day-name[b-s9696asn1e] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    display: block;
}

.day-number[b-s9696asn1e] {
    font-size: 1.125rem;
    font-weight: 700;
    display: block;
}

.habit-name-header[b-s9696asn1e] {
    text-align: left;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: row; /* Reset for name header */
    justify-content: flex-start;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Habit Rows */
.habit-row[b-s9696asn1e] {
    display: contents;
}

.habit-row-cell[b-s9696asn1e] {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    transition: background 0.2s;
}

@media (hover: hover) {
    .habit-row:hover .habit-row-cell[b-s9696asn1e] {
        background: var(--bg-primary);
    }
}

/* Habit Name Cell styling */
.habit-info-cell[b-s9696asn1e] {
    justify-content: flex-start; /* Override center */
    padding-left: 1.5rem;
    padding-right: 1rem;
    position: relative;
}

/* Quick Add Cell styling */
.quick-add-cell[b-s9696asn1e] {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--card-bg);
    border-right: 1px solid var(--border-light);
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
    width: var(--habit-name-width);
    min-width: var(--habit-name-width);
    max-width: var(--habit-name-width);
    overflow: hidden;
}

/* Contain QuickAddRow within the cell - need to target child elements */
.quick-add-cell > :first-child[b-s9696asn1e] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.habit-color-indicator[b-s9696asn1e] {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    margin-right: 1rem;
}

.habit-details[b-s9696asn1e] {
    flex: 1;
    overflow: hidden;
}

.habit-name-container[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.habit-name[b-s9696asn1e] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Hover underline reveals the click affordance for opening the detail page.
   Hidden on touch devices to avoid sticky underline after a tap. */
@media (hover: hover) {
    .habit-name:hover[b-s9696asn1e] {
        text-decoration: underline;
        text-decoration-color: var(--text-muted);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

.habit-streak[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #f59e0b; /* Amber for fire */
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.1rem 0.4rem;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.1);
}

.challenge-badge[b-s9696asn1e] {
    display: flex;
    align-items: center;
    color: var(--accent-primary);
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
    cursor: help;
}

.fire-icon[b-s9696asn1e] {
    font-size: 0.85rem;
}

/* Inline Edit Input */
.inline-edit-input[b-s9696asn1e] {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Action Buttons (Hover only) */
.habit-actions[b-s9696asn1e] {
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

@media (hover: hover) {
    .habit-row-cell:hover .habit-actions[b-s9696asn1e] {
        opacity: 1;
    }
}

/* Keep actions visible while the row menu is open so the dropdown
   (a descendant of .habit-actions) doesn't fade out when the mouse
   leaves the row to reach the dropdown items. */
.habit-info-cell.menu-open .habit-actions[b-s9696asn1e] {
    opacity: 1;
}

@media (hover: none) {
    .habit-actions[b-s9696asn1e] {
        opacity: 1;
        visibility: visible;
    }
}

.action-btn[b-s9696asn1e] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    /* WCAG 2.5.8 floor 24×24 + project rule 44 (48×48 mobile). Audit F-008. */
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {
    .action-btn[b-s9696asn1e] {
        min-width: 48px;
        min-height: 48px;
    }
}

@media (hover: hover) {
    .action-btn:hover[b-s9696asn1e] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

/* Checkboxes */
.check-btn[b-s9696asn1e] {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* Circular */
    border: 2px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy */
    font-size: 1rem;
    padding: 0;
    flex-shrink: 0; /* Prevent squishing */
}

@media (hover: hover) {
    .check-btn:hover:not(:disabled)[b-s9696asn1e] {
        border-color: var(--text-secondary);
        transform: scale(1.1);
    }
}

.check-btn.completed[b-s9696asn1e] {
    border-color: transparent;
    transform: scale(1);
}

@media (hover: hover) {
    .check-btn.completed:hover[b-s9696asn1e] {
        transform: scale(1.1);
    }
}

/* Avoidance habit cells — empty = clean, red X = slip. Click toggles.
   Contrast with check-btn (green tick = success) to make the inverted semantic obvious. */
.slip-cell[b-s9696asn1e] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px dashed var(--border-color);
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.slip-cell.slipped[b-s9696asn1e] {
    border-style: solid;
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 22%, transparent);
}

@media (hover: hover) {
    .slip-cell:not(:disabled):hover[b-s9696asn1e] {
        border-color: var(--danger);
        transform: scale(1.1);
    }
}

.slip-cell:disabled[b-s9696asn1e] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Numeric / Duration habit cells — circular progress ring with centered number.
   Conic gradient fills the ring; ::before disc hides the inside so only the ring shows.
   When complete, the full circle fills with the habit color. Click opens NumericEntryModal. */
.numeric-cell[b-s9696asn1e] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    background: conic-gradient(
        var(--cell-color, var(--accent-primary)) calc(var(--cell-pct, 0) * 1%),
        transparent 0
    );
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.numeric-cell[b-s9696asn1e]::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--card-bg, var(--bg-primary));
    transition: background 120ms ease;
}

.numeric-cell-value[b-s9696asn1e] {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.02em;
}

.numeric-cell.complete[b-s9696asn1e] {
    border-color: transparent;
    background: var(--cell-color, var(--accent-primary));
}

.numeric-cell.complete[b-s9696asn1e]::before {
    background: var(--cell-color, var(--accent-primary));
}

.numeric-cell.complete .numeric-cell-value[b-s9696asn1e] {
    color: #ffffff;
    mix-blend-mode: difference;
}

@media (hover: hover) {
    .numeric-cell:hover:not(:disabled)[b-s9696asn1e] {
        border-color: var(--text-secondary);
        transform: scale(1.12);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--cell-color, var(--accent-primary)) 35%, transparent);
    }
}

.numeric-cell:disabled[b-s9696asn1e] {
    opacity: 0.3;
    cursor: not-allowed;
}

.check-btn:disabled[b-s9696asn1e] {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--bg-primary);
    border-color: var(--border-light);
}

/* Pre-creation / pre-challenge-start cells: muted dashed outline, no action.
   Distinguishes "this habit didn't exist yet" from "missed" or "not completed". */
.check-btn.before-creation[b-s9696asn1e],
.numeric-cell.before-creation[b-s9696asn1e],
.slip-cell.before-creation[b-s9696asn1e] {
    background: transparent !important;
    border-style: dashed !important;
    border-color: var(--border-light) !important;
    border-width: 1px !important;
    opacity: 0.35;
    cursor: default !important;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

.numeric-cell.before-creation[b-s9696asn1e]::before {
    display: none;
}

/* Today Column Highlight */
.habit-row-cell.today-cell[b-s9696asn1e] {
    background: rgba(99, 102, 241, 0.05);
}

/* Empty State */
.empty-state-container[b-s9696asn1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px dashed var(--border-color);
    margin-top: 2rem;
}

.empty-illustration[b-s9696asn1e] {
    font-size: 4rem;
    color: var(--accent-primary);
    opacity: 0.2;
    margin-bottom: 1.5rem;
}

.empty-text h3[b-s9696asn1e] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.empty-text p[b-s9696asn1e] {
    color: var(--text-secondary);
    margin: 0;
}

/* Loading */
.loading-container[b-s9696asn1e] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Section Dividers */
.section-divider[b-s9696asn1e] {
    grid-column: 1 / -1;
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    left: 0;
}

/* Completion Stats Row */
.completion-stats-row[b-s9696asn1e] {
    border-top: 2px solid var(--border-light);
}

.completion-stats-row .habit-row-cell[b-s9696asn1e] {
    padding: 0.75rem 0;
}

.completion-stats-label[b-s9696asn1e] {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--card-bg);
    border-right: 1px solid var(--border-light);
    padding-left: 1.5rem !important;
    padding-right: 1rem !important;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    justify-content: flex-start;
    gap: 0.5rem;
}

.stats-label-icon[b-s9696asn1e] {
    display: none; /* Hidden on desktop */
}

.completion-percentage[b-s9696asn1e] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.2rem;
    border-radius: 4px;
    width: 36px;
    text-align: center;
    display: inline-block;
}

.completion-percentage.complete[b-s9696asn1e] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.completion-percentage.high[b-s9696asn1e] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.completion-percentage.medium[b-s9696asn1e] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.completion-percentage.low[b-s9696asn1e] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.completion-percentage.zero[b-s9696asn1e] {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
}

/* Dark-theme badge contrast fix. Audit F-011: red #ef4444 on tinted-red
   background measured 4.13:1 — below AA 4.5:1. Lighter variants of each
   badge color pass AA against the same tinted backgrounds in dark mode. */
body.dark-theme .completion-percentage.complete[b-s9696asn1e] { color: #6ee7b7; }
body.dark-theme .completion-percentage.high[b-s9696asn1e]     { color: #93c5fd; }
body.dark-theme .completion-percentage.medium[b-s9696asn1e]   { color: #fcd34d; }
body.dark-theme .completion-percentage.low[b-s9696asn1e]      { color: #fca5a5; }

/* Future dates — no percentage makes sense yet; show a muted em-dash. */
.completion-percentage.future[b-s9696asn1e] {
    background: transparent;
    color: var(--text-muted);
    opacity: 0.45;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .habits-page[b-s9696asn1e] {
        padding: 1rem;
        padding-bottom: 5rem; /* Extra space for mobile usage */
    }

    .habits-grid[b-s9696asn1e] {
        /* 160px gives enough room for name + 2 icons without being too wide */
        --habit-name-width: 160px;
    }

    /* Controls bar - keep new habit button on same row as nav */
    .controls-bar[b-s9696asn1e] {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .view-toggles[b-s9696asn1e] {
        width: 100%;
        justify-content: center;
        order: 1;
    }

    .view-toggle-btn[b-s9696asn1e] {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }

    .nav-controls[b-s9696asn1e] {
        position: static;
        transform: none;
        flex: 1;
        justify-content: space-between;
        background: var(--bg-primary);
        padding: 0.5rem;
        border-radius: 8px;
        order: 2;
    }

    .controls-right[b-s9696asn1e] {
        order: 3;
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .btn-new-habit[b-s9696asn1e] {
        flex-shrink: 0;
        padding: 0.5rem 0.75rem;
    }

    .btn-new-habit span:last-child[b-s9696asn1e] {
        display: none; /* Hide "New Habit" text, keep icon */
    }

    /* Streak pill: drop the label, keep icon + number */
    .controls-streak-pill[b-s9696asn1e] {
        height: 36px;
        padding: 0 0.6rem;
        font-size: 0.85rem;
    }

    .controls-streak-pill .streak-pill-label[b-s9696asn1e] {
        display: none;
    }

    /* Habit Row Adjustments */
    .habit-name[b-s9696asn1e] {
        font-size: 0.85rem;
    }

    .habit-info-cell[b-s9696asn1e] {
        padding-left: 0.75rem;
        padding-right: 0.25rem; /* Reduced right padding to fit actions */
    }

    .habit-color-indicator[b-s9696asn1e] {
        margin-right: 0.5rem;
        width: 3px;
    }

    .habit-streak[b-s9696asn1e] {
        font-size: 0.75rem;
        padding: 0.1rem 0.3rem;
    }

    /* Make actions visible on mobile since there's no hover */
    .habit-actions[b-s9696asn1e] {
        opacity: 1;
        position: static;
        background: transparent;
        margin-left: 0.25rem;
        flex-shrink: 0; /* Prevent actions from shrinking */
    }

    .action-btn[b-s9696asn1e] {
        padding: 0.25rem;
        font-size: 1rem; /* Larger icon for touch */
        color: var(--text-secondary);
    }

    /* Ensure habit name truncates properly before the actions */
    .habit-name-container[b-s9696asn1e] {
        min-width: 0; /* Flexbox truncation fix */
    }

    /* Checkbox touch targets */
    .habit-row-cell[b-s9696asn1e] {
        padding: 0.5rem 0.25rem;
    }

    .check-btn[b-s9696asn1e] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    /* Hide "Daily Completion" text on mobile, show icon instead */
    .stats-label-text[b-s9696asn1e] {
        display: none;
    }

    .stats-label-icon[b-s9696asn1e] {
        display: inline;
        font-size: 1rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .habits-grid[b-s9696asn1e] {
        --habit-name-width: 150px; /* Slightly tighter on very small screens */
    }

    .habit-streak[b-s9696asn1e] {
        font-size: 0.7rem;
        padding: 0 0.2rem;
        gap: 0.15rem;
    }

    .habit-streak .fire-icon[b-s9696asn1e] {
        font-size: 0.7rem;
    }

    .view-toggle-btn[b-s9696asn1e] {
        font-size: 0.75rem;
        padding: 0.4rem 0.2rem;
    }

    .period-label[b-s9696asn1e] {
        font-size: 0.85rem;
        min-width: 100px;
    }
}

/* Modal Overrides (inheriting basic structure but polishing) */
.modal-content[b-s9696asn1e] {
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 1px solid var(--border-light);
}

.color-option.selected[b-s9696asn1e] {
    transform: scale(1.1);
    box-shadow: 0 0 0 3px var(--card-bg), 0 0 0 5px var(--accent-primary);
}

/* --- Layout Toggle Styles --- */
.controls-left[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.layout-toggles[b-s9696asn1e] {
    display: flex;
    background: var(--bg-primary);
    padding: 0.25rem;
    border-radius: 8px;
    gap: 0.25rem;
}

.layout-toggle-btn[b-s9696asn1e] {
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .layout-toggle-btn:hover[b-s9696asn1e] {
        color: var(--text-primary);
        background: var(--hover-bg);
    }
}

.layout-toggle-btn.active[b-s9696asn1e] {
    background: var(--card-bg);
    color: var(--accent-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- Card Grid Layout --- */
.habits-card-grid[b-s9696asn1e] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .habits-card-grid[b-s9696asn1e] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .habits-card-grid[b-s9696asn1e] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Quick Add Section for Card View.
   QuickAddRow brings its own dashed border + gradient — no wrapping card chrome. */
.quick-add-section[b-s9696asn1e] {
    margin-top: 1.5rem;
}

/* Mobile Responsive for Layout Toggle */
@media (max-width: 768px) {
    .controls-left[b-s9696asn1e] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        order: 1;
    }

    .layout-toggles[b-s9696asn1e] {
        width: fit-content;
    }

    .controls-bar[b-s9696asn1e] {
        flex-wrap: wrap;
    }

    .habits-card-grid[b-s9696asn1e] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .habits-card-grid[b-s9696asn1e] {
        grid-template-columns: 1fr;
    }
}

/* --- Today's Progress Bar --- */
.today-progress-container[b-s9696asn1e] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.today-progress-header[b-s9696asn1e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.today-progress-label[b-s9696asn1e] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.all-done-badge[b-s9696asn1e] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
}

.today-progress-bar[b-s9696asn1e] {
    height: 8px;
    background: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.today-progress-fill[b-s9696asn1e] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* --- Card Section Labels --- */
.card-section-label[b-s9696asn1e] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.75rem;
    padding-left: 0.25rem;
}

/* --- Completed Section ---
   Per-card .habit-card.completed dims the content (not the dropdown);
   a section-level opacity would create a stacking context that traps
   the menu dropdown below the .quick-add-section sibling. */

/* --- Not Due Today Toggle --- */
.not-due-toggle[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.75rem 0.25rem;
    margin-top: 1rem;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .not-due-toggle:hover[b-s9696asn1e] {
        color: var(--text-primary);
    }
}

.not-due-section[b-s9696asn1e] {
    margin-top: 0.5rem;
}

/* Skeleton loading */
.skeleton-loading[b-s9696asn1e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.skeleton-loading > [aria-hidden][b-s9696asn1e] {
    display: contents;
}

[b-s9696asn1e] .skeleton-habit-row {
    flex-direction: row;
    padding: 0.75rem 1rem;
}

.skeleton-habit-inner[b-s9696asn1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.skeleton-date-cells[b-s9696asn1e] {
    display: flex;
    gap: 0.375rem;
}

/* ==========================================================================
   Habit lifecycle (Pause / Archive)
   ========================================================================== */

.habit-paused-pill[b-s9696asn1e] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.habit-paused-pill .bi[b-s9696asn1e] {
    font-size: 0.75rem;
}

/* Paused cells in the grid: muted, striped, not clickable. Distinguished from
   before-creation cells (which are fully blank) by the stripe pattern. */
.paused-cell[b-s9696asn1e] {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--text-muted) 8%, transparent),
        color-mix(in srgb, var(--text-muted) 8%, transparent) 4px,
        transparent 4px,
        transparent 8px
    );
    opacity: 0.5;
    cursor: not-allowed;
}

.paused-cell:hover[b-s9696asn1e] {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--text-muted) 8%, transparent),
        color-mix(in srgb, var(--text-muted) 8%, transparent) 4px,
        transparent 4px,
        transparent 8px
    );
}

/* Active header button: matches existing "active" state styling on layout toggles
   so the archive icon stays in the same visual family. */
.btn-icon-header.active[b-s9696asn1e] {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
}

.archived-banner[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.archived-list[b-s9696asn1e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.archived-row[b-s9696asn1e] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.archived-row-info[b-s9696asn1e] {
    flex: 1;
    min-width: 0;
}

.archived-row-info .habit-name[b-s9696asn1e] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.archived-meta[b-s9696asn1e] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.archived-row-actions[b-s9696asn1e] {
    flex-shrink: 0;
}

/* /Components/Pages/Home.razor.rz.scp.css */
/* Landing page styles adapted for HabitTracker with habit theme */
.landing-page[b-z9osrwluu5] {
    /* Fill below the sticky 52px navbar */
    min-height: calc(100vh - 52px);
    background: var(--bg-primary);
    --hero-bg-deep: #1a1b40;
    --hero-bg-mid: #2d3561;
}

/* Full-bleed so backgrounds span edge-to-edge despite article padding */
.full-bleed[b-z9osrwluu5] { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* Hero Section */
.hero-section[b-z9osrwluu5] {
    background: linear-gradient(135deg, var(--hero-bg-deep) 0%, var(--hero-bg-mid) 50%, var(--accent-secondary) 100%);
    min-height: calc(100vh - 52px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
}

.hero-container[b-z9osrwluu5] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.hero-content[b-z9osrwluu5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 80vh;
}

.hero-text[b-z9osrwluu5] { color: white; }

.hero-title[b-z9osrwluu5] {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    text-align: center;
}

.gradient-text[b-z9osrwluu5] {
    background: linear-gradient(45deg, white 0%, color-mix(in srgb, var(--accent-primary) 8%, white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle[b-z9osrwluu5] {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    opacity: 0.85;
    max-width: 560px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions[b-z9osrwluu5] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.workout-buttons[b-z9osrwluu5] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    max-width: 420px;
}

.btn-workout[b-z9osrwluu5] {
    background: white;
    color: var(--accent-primary);
    border: none;
    font-weight: 700;
    padding: 1rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.btn-workout[b-z9osrwluu5]::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-primary) 30%, transparent), transparent);
    transition: left 0.5s ease;
}
@media (hover: hover) {
    .btn-workout:hover[b-z9osrwluu5]::before { left: 100%; }
}

/* Sequential animation */
@keyframes buttonHighlight-b-z9osrwluu5 {
    0% { background: white; color: var(--accent-primary); transform: scale(1); }
    10% { background: var(--accent-primary); color: white; transform: scale(1.05); }
    20% { background: var(--accent-primary); color: white; transform: scale(1.05); }
    30% { background: white; color: var(--accent-primary); transform: scale(1); }
    100% { background: white; color: var(--accent-primary); transform: scale(1); }
}
.push-btn[b-z9osrwluu5] { animation: buttonHighlight-b-z9osrwluu5 6s ease-in-out 0s infinite; }
.pull-btn[b-z9osrwluu5] { animation: buttonHighlight-b-z9osrwluu5 6s ease-in-out 2s infinite; }
.legs-btn[b-z9osrwluu5] { animation: buttonHighlight-b-z9osrwluu5 6s ease-in-out 4s infinite; }
@media (hover: hover) {
    .workout-buttons:hover .btn-workout[b-z9osrwluu5] { animation: none !important; }
}
@media (hover: hover) {
    .btn-workout:hover[b-z9osrwluu5] {
        background: var(--accent-primary) !important;
        color: white !important;
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    }
}

/* Hero Image (icon-based) */
.hero-image[b-z9osrwluu5] { display: flex; justify-content: center; align-items: center; overflow: visible; padding: 20px; }
.uncle-sam-container[b-z9osrwluu5] {
    position: relative;
    max-width: 420px;
    border-radius: 20px;
    overflow: visible;
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    z-index: 100;
}
@media (hover: hover) {
    .uncle-sam-container:hover[b-z9osrwluu5] { transform: perspective(1000px) rotateY(-2deg) rotateX(2deg) scale(1.02); }
}
.uncle-sam-container:active[b-z9osrwluu5] {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(0.92);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.6, 1);
}
.uncle-sam-image[b-z9osrwluu5] { width: 100%; height: auto; display: block; border-radius: 16px; filter: brightness(0.9) contrast(1.1) saturate(0.95); position: relative; z-index: 1; }
.image-overlay[b-z9osrwluu5] { position: absolute; inset: 0; background: transparent; mix-blend-mode: multiply; }

/* Features Section */
.features-section[b-z9osrwluu5] { padding: 6rem 0; background: var(--bg-primary); }
.container[b-z9osrwluu5] { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.features-header[b-z9osrwluu5] { text-align: center; margin-bottom: 4rem; }
.section-title[b-z9osrwluu5] { font-size: 2.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.section-subtitle[b-z9osrwluu5] { font-size: 1.1rem; color: var(--text-secondary); max-width: 640px; margin: 0 auto; }
.features-grid[b-z9osrwluu5] { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.feature-card[b-z9osrwluu5] { background: var(--card-bg); padding: 2rem; border-radius: 16px; text-align: center; border: 1px solid var(--border-light); transition: all 0.3s ease; box-shadow: var(--shadow); }
@media (hover: hover) {
    .feature-card:hover[b-z9osrwluu5] { transform: translateY(-4px); box-shadow: 0 20px 40px -12px color-mix(in srgb, var(--hero-bg-deep) 25%, transparent); }
}
.feature-icon[b-z9osrwluu5] { width: 72px; height: 72px; background: var(--accent-gradient); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; font-size: 1.85rem; color: white; }
.feature-card h3[b-z9osrwluu5] { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.feature-card p[b-z9osrwluu5] { color: var(--text-secondary); line-height: 1.6; }

/* CTA Section */
.cta-section[b-z9osrwluu5] { background: linear-gradient(135deg, var(--hero-bg-deep) 0%, var(--hero-bg-mid) 50%, var(--accent-secondary) 100%); padding: 5rem 0; text-align: center; }
.cta-content[b-z9osrwluu5] { max-width: 800px; margin: 0 auto; }
.cta-title[b-z9osrwluu5] { font-size: 2.25rem; font-weight: 700; color: white; margin-bottom: 1rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
.cta-subtitle[b-z9osrwluu5] { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; }
.cta-actions[b-z9osrwluu5] { display: flex; justify-content: center; gap: 1rem; }

/* Responsive - Tablet (Bootstrap lg breakpoint) */
@media (max-width: 992px) {
    .hero-content[b-z9osrwluu5] { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .hero-title[b-z9osrwluu5] { font-size: 2.5rem; }
    .uncle-sam-container[b-z9osrwluu5] { max-width: 320px; }
    .features-grid[b-z9osrwluu5] { grid-template-columns: 1fr; }
    .cta-actions[b-z9osrwluu5] { flex-direction: column; align-items: center; }
}

/* Responsive - Mobile (Bootstrap md breakpoint) */
@media (max-width: 768px) {
    .hero-container[b-z9osrwluu5] { padding: 0 1rem; }
    .hero-content[b-z9osrwluu5] { min-height: 70vh; gap: 2rem; }
    .hero-title[b-z9osrwluu5] { font-size: 2rem; }
    .hero-subtitle[b-z9osrwluu5] { font-size: 1rem; }
    .btn-workout[b-z9osrwluu5] { padding: 0.875rem 1.5rem; font-size: 0.95rem; }
    .features-section[b-z9osrwluu5] { padding: 4rem 0; }
    .section-title[b-z9osrwluu5] { font-size: 1.75rem; }
    .feature-card[b-z9osrwluu5] { padding: 1.5rem; }
    .cta-section[b-z9osrwluu5] { padding: 3rem 0; }
    .cta-title[b-z9osrwluu5] { font-size: 1.75rem; }
}

/* Responsive - Extra small (360px min supported) */
@media (max-width: 480px) {
    .hero-container[b-z9osrwluu5] { padding: 0 0.75rem; }
    .hero-content[b-z9osrwluu5] { min-height: 60vh; gap: 1.5rem; padding: 1rem 0; }
    .hero-title[b-z9osrwluu5] { font-size: 1.75rem; margin-bottom: 1rem; }
    .hero-subtitle[b-z9osrwluu5] { font-size: 0.9rem; margin-bottom: 1.5rem; }
    .workout-buttons[b-z9osrwluu5] { max-width: 100%; }
    .btn-workout[b-z9osrwluu5] { padding: 0.75rem 1rem; font-size: 0.875rem; border-radius: 8px; }
    .uncle-sam-container[b-z9osrwluu5] { max-width: 260px; }
    .container[b-z9osrwluu5] { padding: 0 0.75rem; }
    .features-section[b-z9osrwluu5] { padding: 3rem 0; }
    .features-header[b-z9osrwluu5] { margin-bottom: 2rem; }
    .section-title[b-z9osrwluu5] { font-size: 1.5rem; }
    .section-subtitle[b-z9osrwluu5] { font-size: 0.9rem; }
    .feature-card[b-z9osrwluu5] { padding: 1.25rem; border-radius: 12px; }
    .feature-icon[b-z9osrwluu5] { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 14px; }
    .feature-card h3[b-z9osrwluu5] { font-size: 1.15rem; }
    .cta-section[b-z9osrwluu5] { padding: 2.5rem 0; }
    .cta-title[b-z9osrwluu5] { font-size: 1.5rem; }
    .cta-subtitle[b-z9osrwluu5] { font-size: 0.95rem; }
}
/* /Components/Pages/Pomodoro.razor.rz.scp.css */
.pomodoro-page[b-u9v5ljzqfg] {
    display: flex;
    justify-content: center;
    padding: 1rem clamp(1rem, 4vw, 3rem) 2rem;
    background: var(--bg-primary);
}

.pomodoro-card[b-u9v5ljzqfg] {
    width: min(1080px, 100%);
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(118, 131, 185, 0.16);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    position: relative;
}

.task-context[b-u9v5ljzqfg] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

.task-info[b-u9v5ljzqfg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.task-label[b-u9v5ljzqfg] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.task-name[b-u9v5ljzqfg] {
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clear-task-btn[b-u9v5ljzqfg] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .clear-task-btn:hover[b-u9v5ljzqfg] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger);
    }
}

.task-stats[b-u9v5ljzqfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.task-stats .pomodoro-count[b-u9v5ljzqfg] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.15);
    padding: 0.35rem 0.75rem;
    border-radius: 16px;
}

.header-actions[b-u9v5ljzqfg] {
    position: absolute;
    top: clamp(1.5rem, 4vw, 2.5rem);
    right: clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    gap: 0.6rem;
}

/* Menu Wrapper - Modern Design */
.menu-wrapper[b-u9v5ljzqfg] {
    position: relative;
}

.action-btn[b-u9v5ljzqfg], .action-btn-info[b-u9v5ljzqfg] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

@media (hover: hover) {
    .action-btn:hover[b-u9v5ljzqfg], .action-btn.active[b-u9v5ljzqfg],
    .action-btn-info:hover[b-u9v5ljzqfg] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.action-btn:focus-visible[b-u9v5ljzqfg],
.action-btn-info:focus-visible[b-u9v5ljzqfg] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.modern-dropdown[b-u9v5ljzqfg] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    min-width: 340px;
    max-width: 380px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1000;
    padding: 0.5rem;
    animation: slideDown-b-u9v5ljzqfg 0.2s ease-out;
}

@keyframes slideDown-b-u9v5ljzqfg {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-section[b-u9v5ljzqfg] {
    padding: 0.75rem;
}

.section-label[b-u9v5ljzqfg] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.dropdown-divider[b-u9v5ljzqfg] {
    height: 1px;
    background: var(--border-light);
    margin: 0.5rem 0;
}

.menu-setting-group[b-u9v5ljzqfg] {
    padding: 0.5rem 0;
}

.menu-setting-group label[b-u9v5ljzqfg] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.setting-row[b-u9v5ljzqfg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.input-inline[b-u9v5ljzqfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-inline input[type="number"][b-u9v5ljzqfg] {
    width: 60px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: center;
}

/* Remove spinner arrows from number input */
.input-inline input[type="number"][b-u9v5ljzqfg]::-webkit-outer-spin-button,
.input-inline input[type="number"][b-u9v5ljzqfg]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-inline input[type="number"][b-u9v5ljzqfg] {
    -moz-appearance: textfield;
}

.input-inline .unit[b-u9v5ljzqfg] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.range-slider[b-u9v5ljzqfg] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.range-slider[b-u9v5ljzqfg]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.range-slider[b-u9v5ljzqfg]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    transition: all 0.2s;
    margin-top: -5px;
}

@media (hover: hover) {
    .range-slider[b-u9v5ljzqfg]::-webkit-slider-thumb:hover {
        transform: scale(1.2);
    }
}

.range-slider[b-u9v5ljzqfg]::-moz-range-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.range-slider[b-u9v5ljzqfg]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--accent-primary);
}

.range-slider[b-u9v5ljzqfg]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

@media (hover: hover) {
    .range-slider[b-u9v5ljzqfg]::-moz-range-thumb:hover {
        transform: scale(1.2);
    }
}

/* For Microsoft Edge and IE */
.range-slider[b-u9v5ljzqfg]::-ms-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.range-slider[b-u9v5ljzqfg]::-ms-fill-lower {
    background: var(--accent-primary);
    border-radius: 3px;
}

.range-slider[b-u9v5ljzqfg]::-ms-fill-upper {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.range-slider[b-u9v5ljzqfg]::-ms-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: none;
}

.timer-style-selector-menu[b-u9v5ljzqfg] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.timer-style-option-menu[b-u9v5ljzqfg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.5rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

@media (hover: hover) {
    .timer-style-option-menu:hover[b-u9v5ljzqfg] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.timer-style-option-menu.active[b-u9v5ljzqfg] {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Preview SVGs are rendered from MarkupString in the registry, so they don't
   carry Blazor's scope attribute. Use ::deep to match them as descendants of
   the scoped .timer-style-option-menu button. */
.timer-style-option-menu[b-u9v5ljzqfg]  .style-preview-menu {
    width: 32px;
    height: 32px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.timer-style-option-menu.active[b-u9v5ljzqfg]  .style-preview-menu {
    color: var(--accent-primary);
}

.timer-style-option-menu span[b-u9v5ljzqfg] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.timer-style-option-menu.active span[b-u9v5ljzqfg] {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Premium Section Styles */
.menu-setting-group.premium-section[b-u9v5ljzqfg] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

.premium-section-label[b-u9v5ljzqfg] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 0.5rem;
}

.premium-section-label .bi-stars[b-u9v5ljzqfg] {
    font-size: 1rem;
}

.timer-style-selector-menu.premium-grid[b-u9v5ljzqfg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.premium-badge[b-u9v5ljzqfg] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.75rem;
    line-height: 1;
}

.dropdown-action[b-u9v5ljzqfg] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    text-decoration: none;
}

@media (hover: hover) {
    .dropdown-action:hover[b-u9v5ljzqfg] {
        background: var(--hover-bg);
    }
}

.dropdown-action i[b-u9v5ljzqfg] {
    font-size: 1rem;
}

.dropdown-action.text-danger[b-u9v5ljzqfg] {
    color: var(--danger);
}

@media (hover: hover) {
    .dropdown-action.text-danger:hover[b-u9v5ljzqfg] {
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Toggle Switch */
.toggle-switch[b-u9v5ljzqfg] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    margin: 0;
}

.toggle-switch input[b-u9v5ljzqfg] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-u9v5ljzqfg] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-tertiary);
    transition: 0.3s;
    border-radius: 34px;
    border: 1px solid var(--border-color);
}

.toggle-slider[b-u9v5ljzqfg]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider[b-u9v5ljzqfg] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider[b-u9v5ljzqfg]:before {
    transform: translateX(22px);
}

@media (hover: hover) {
    .toggle-slider:hover[b-u9v5ljzqfg] {
        opacity: 0.9;
    }
}

.setting-description[b-u9v5ljzqfg] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 0.25rem;
}

.btn-enable-notifications[b-u9v5ljzqfg] {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--accent-primary);
    background: transparent;
    color: var(--accent-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-enable-notifications:hover[b-u9v5ljzqfg] {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.sound-pick-row[b-u9v5ljzqfg] {
    margin-top: 0.5rem;
}

.sound-pick-controls[b-u9v5ljzqfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sound-select[b-u9v5ljzqfg] {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 8.5rem;
}

.btn-preview-sound[b-u9v5ljzqfg] {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    background: transparent;
    color: var(--accent-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}

.btn-preview-sound:hover[b-u9v5ljzqfg] {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

.btn-preview-sound .bi[b-u9v5ljzqfg] {
    font-size: 1rem;
    line-height: 1;
}

.volume-value[b-u9v5ljzqfg] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: right;
}

/* Premium lock indicator */
.timer-style-option-menu.premium-locked[b-u9v5ljzqfg] {
    position: relative;
    opacity: 0.7;
}

.timer-style-option-menu.premium-locked:hover[b-u9v5ljzqfg] {
    opacity: 0.85;
}

.pomodoro-body[b-u9v5ljzqfg] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.loading-timer[b-u9v5ljzqfg] {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1rem;
}

.timer-wrapper[b-u9v5ljzqfg] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.timer-toggle[b-u9v5ljzqfg] {
    border: 1.5px solid rgba(92, 107, 192, 0.25);
    background: transparent;
    border-radius: 50%;
    padding: clamp(0.55rem, 1.8vw, 1.1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.timer-toggle.cup-timer[b-u9v5ljzqfg] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle:hover[b-u9v5ljzqfg] {
        border-color: rgba(92, 107, 192, 0.45);
        transform: translateY(-3px);
    }
}

@media (hover: hover) {
    .timer-toggle.cup-timer:hover[b-u9v5ljzqfg] {
        transform: scale(1.02);
        border: none;
    }
}

.timer-toggle:focus-visible[b-u9v5ljzqfg] {
    outline: 2px solid rgba(92, 107, 192, 0.55);
    outline-offset: 6px;
}
.session-panel[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.session-progress-wrapper[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.session-progress-label[b-u9v5ljzqfg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.progress-count[b-u9v5ljzqfg] {
    color: var(--accent-primary);
    font-size: 1rem;
    font-weight: 700;
}

.session-indicators[b-u9v5ljzqfg] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.session-indicator[b-u9v5ljzqfg] {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(92, 107, 192, 0.08);
    border: 2px solid rgba(92, 107, 192, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    cursor: help;
}

@media (hover: hover) {
    .session-indicator:hover[b-u9v5ljzqfg] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(92, 107, 192, 0.2);
    }
}

.session-indicator.completed[b-u9v5ljzqfg] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.15));
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2);
}

.session-indicator.active[b-u9v5ljzqfg] {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    animation: pulse-border-b-u9v5ljzqfg 2s ease-in-out infinite;
}

@keyframes pulse-border-b-u9v5ljzqfg {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(99, 102, 241, 0);
    }
}

.indicator-dot[b-u9v5ljzqfg] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(92, 107, 192, 0.15);
    z-index: 1;
}

.session-indicator.completed .indicator-dot[b-u9v5ljzqfg] {
    background: rgba(16, 185, 129, 0.25);
}

.session-indicator.active .indicator-dot[b-u9v5ljzqfg] {
    background: rgba(99, 102, 241, 0.25);
}

.check-icon[b-u9v5ljzqfg] {
    color: #10b981;
    font-size: 1rem;
    font-weight: 700;
}

.indicator-pulse[b-u9v5ljzqfg] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: pulse-dot-b-u9v5ljzqfg 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-b-u9v5ljzqfg {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.indicator-number[b-u9v5ljzqfg] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.session-indicator.completed .indicator-number[b-u9v5ljzqfg] {
    color: #10b981;
}

.session-indicator.active .indicator-number[b-u9v5ljzqfg] {
    color: var(--accent-primary);
}

.next-phase[b-u9v5ljzqfg] {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.96rem;
}

.timer-actions[b-u9v5ljzqfg] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.5rem);
}

.action-button[b-u9v5ljzqfg] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(92, 107, 192, 0.3);
    background: transparent;
    color: var(--accent-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

@media (hover: hover) {
    .action-button:hover[b-u9v5ljzqfg] {
        background: rgba(92, 107, 192, 0.1);
        border-color: rgba(92, 107, 192, 0.5);
        transform: scale(1.1);
    }
}

.action-button:active[b-u9v5ljzqfg] {
    transform: scale(0.95);
}

.action-button:focus-visible[b-u9v5ljzqfg] {
    outline: 2px solid rgba(92, 107, 192, 0.55);
    outline-offset: 4px;
}

@media (hover: hover) {
    .complete-button:hover[b-u9v5ljzqfg] {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.5);
        color: #10b981;
    }
}

@media (hover: hover) {
    .reset-button:hover[b-u9v5ljzqfg] {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.5);
        color: #ef4444;
    }
}

.play-toggle[b-u9v5ljzqfg] {
    width: clamp(60px, 8vw, 72px);
    height: clamp(60px, 8vw, 72px);
    border-radius: 50%;
    border: 2px solid rgba(92, 107, 192, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.65rem, 3vw, 2.1rem);
    color: var(--accent-secondary);
    background: transparent;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
    .play-toggle:hover[b-u9v5ljzqfg] {
        background: rgba(92, 107, 192, 0.1);
        border-color: rgba(92, 107, 192, 0.65);
        transform: translateY(-3px);
    }
}

.play-toggle:focus-visible[b-u9v5ljzqfg] {
    outline: 2px solid rgba(92, 107, 192, 0.55);
    outline-offset: 4px;
}

.modal-backdrop[b-u9v5ljzqfg] {
    position: fixed;
    inset: 0;
    background: rgba(12, 14, 18, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(12px);
}

.settings-modal[b-u9v5ljzqfg] {
    background: var(--card-bg);
    border-radius: 28px;
    padding: clamp(2rem, 5vw, 2.75rem);
    width: min(520px, 92vw);
    border: 1px solid rgba(92, 107, 192, 0.14);
    box-shadow: 0 32px 60px -36px rgba(12, 16, 30, 0.55);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.modal-header[b-u9v5ljzqfg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-u9v5ljzqfg] {
    margin: 0;
    font-size: 1.6rem;
}

.icon-circle[b-u9v5ljzqfg] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .icon-circle:hover[b-u9v5ljzqfg] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.modal-body[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.setting-group[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.setting-group label[b-u9v5ljzqfg] {
    font-weight: 600;
}

.control-pair[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.control-pair input[type="number"][b-u9v5ljzqfg] {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 14px;
    padding: 0.6rem 0.95rem;
    color: var(--text-primary);
    font-weight: 600;
}

.control-pair input[type="range"][b-u9v5ljzqfg] {
    accent-color: var(--accent-secondary);
}

.modal-footer[b-u9v5ljzqfg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.reset-defaults[b-u9v5ljzqfg] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.35rem 0;
}

.modal-actions[b-u9v5ljzqfg] {
    display: flex;
    gap: 0.75rem;
}

.btn-cancel[b-u9v5ljzqfg],
.btn-confirm[b-u9v5ljzqfg] {
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.9rem;
    font-weight: 600;
}

.btn-cancel[b-u9v5ljzqfg] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-confirm[b-u9v5ljzqfg] {
    background: var(--accent-gradient);
    color: var(--accent-contrast);
    box-shadow: var(--accent-glow);
}

.info-modal[b-u9v5ljzqfg] {
    max-width: 650px;
    max-height: 85vh;
    overflow-y: auto;
}

.info-content[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-intro p[b-u9v5ljzqfg] {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.info-cycle h3[b-u9v5ljzqfg],
.info-tips h3[b-u9v5ljzqfg] {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.cycle-steps[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cycle-step[b-u9v5ljzqfg] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.cycle-step.repeat-step[b-u9v5ljzqfg] {
    border-left-color: #f59e0b;
}

.step-icon[b-u9v5ljzqfg] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.focus-icon[b-u9v5ljzqfg] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.break-icon[b-u9v5ljzqfg] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.repeat-icon[b-u9v5ljzqfg] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.long-break-icon[b-u9v5ljzqfg] {
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: white;
}

.step-content[b-u9v5ljzqfg] {
    flex: 1;
}

.step-content h4[b-u9v5ljzqfg] {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.step-duration[b-u9v5ljzqfg] {
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.step-content p:last-child[b-u9v5ljzqfg] {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cycle-arrow[b-u9v5ljzqfg] {
    display: flex;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.2rem;
    opacity: 0.5;
}

.info-tips ul[b-u9v5ljzqfg] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-tips li[b-u9v5ljzqfg] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
    align-items: baseline;
}

.info-tips li[b-u9v5ljzqfg]::before {
    content: "•";
    color: var(--accent-primary);
    font-weight: bold;
    font-size: 1.2rem;
}

.info-tips li strong[b-u9v5ljzqfg] {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.info-modal .modal-footer[b-u9v5ljzqfg] {
    justify-content: flex-end;
}
.pomodoro-title-input[b-u9v5ljzqfg] {
    width: 100%;
    max-width: 500px;
}

.pomodoro-title-input .title-input[b-u9v5ljzqfg] {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid rgba(92, 107, 192, 0.2);
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
}

.pomodoro-title-input .title-input:focus[b-u9v5ljzqfg] {
    outline: none;
    border-color: rgba(92, 107, 192, 0.5);
    box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);
}

.pomodoro-title-input .title-input[b-u9v5ljzqfg]::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.pomodoro-title-display[b-u9v5ljzqfg] {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.pomodoro-title-display .pomodoro-count[b-u9v5ljzqfg] {
    background: rgba(99, 102, 241, 0.15);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--accent-primary);
    white-space: nowrap;
}

@media (max-width: 768px) {
    .header-actions[b-u9v5ljzqfg] {
        top: 1.5rem;
        right: 1.5rem;
    }
}

body.dark-theme .next-phase[b-u9v5ljzqfg] {
    color: var(--text-secondary);
}

body.dark-theme .indicator-dot[b-u9v5ljzqfg] {
    background: rgba(255, 255, 255, 0.85);
}

/* Coffee Cup Timer Styles */
.cup-timer-container[b-u9v5ljzqfg] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-cup-svg[b-u9v5ljzqfg] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15));
}

.cup-liquid[b-u9v5ljzqfg] {
    transition: all 0.6s ease-out;
}

.cup-time-text[b-u9v5ljzqfg] {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.cup-phase-text[b-u9v5ljzqfg] {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Steam animations */
.steam-container[b-u9v5ljzqfg] {
    animation: fadeInOut-b-u9v5ljzqfg 2s ease-in-out infinite;
}

.steam[b-u9v5ljzqfg] {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

.steam-1[b-u9v5ljzqfg] {
    animation: steam-rise-b-u9v5ljzqfg 3s ease-in-out infinite;
}

.steam-2[b-u9v5ljzqfg] {
    animation: steam-rise-b-u9v5ljzqfg 3s ease-in-out infinite 0.5s;
}

.steam-3[b-u9v5ljzqfg] {
    animation: steam-rise-b-u9v5ljzqfg 3s ease-in-out infinite 1s;
}

@keyframes steam-rise-b-u9v5ljzqfg {
    0% {
        stroke-dashoffset: 40;
        opacity: 0;
    }
    25% {
        opacity: 0.6;
    }
    75% {
        opacity: 0.3;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes fadeInOut-b-u9v5ljzqfg {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* Timer Style Selector in Settings */
.timer-style-selector[b-u9v5ljzqfg] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.timer-style-option[b-u9v5ljzqfg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .timer-style-option:hover[b-u9v5ljzqfg] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.timer-style-option.active[b-u9v5ljzqfg] {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.style-preview[b-u9v5ljzqfg] {
    width: 40px;
    height: 40px;
    color: var(--text-primary);
}

.timer-style-option span[b-u9v5ljzqfg] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.timer-style-option.active span[b-u9v5ljzqfg] {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Responsive adjustments for cup timer */
@media (max-width: 768px) {
    .cup-timer-container[b-u9v5ljzqfg] {
        width: clamp(280px, 90vw, 380px);
    }

    .cup-time-text[b-u9v5ljzqfg] {
        font-size: 56px;
    }

    .cup-phase-text[b-u9v5ljzqfg] {
        font-size: 18px;
    }
}

/* Premium Timer Skins Styles */

/* Premium lock indicator */
.timer-style-option-menu.premium-locked[b-u9v5ljzqfg] {
    position: relative;
    opacity: 0.7;
}

@media (hover: hover) {
    .timer-style-option-menu.premium-locked:hover[b-u9v5ljzqfg] {
        opacity: 0.85;
    }
}

/* Hourglass Timer Styles */
.hourglass-timer-container[b-u9v5ljzqfg] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hourglass-svg[b-u9v5ljzqfg] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.2));
}

.hourglass-sand-top[b-u9v5ljzqfg],
.hourglass-sand-bottom[b-u9v5ljzqfg] {
    transition: all 0.5s ease-out;
}

.sand-stream[b-u9v5ljzqfg] {
    animation: streamFlow-b-u9v5ljzqfg 1s ease-in-out infinite;
}

@keyframes streamFlow-b-u9v5ljzqfg {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.3;
    }
}

.sand-particle[b-u9v5ljzqfg] {
    animation: particleFall-b-u9v5ljzqfg 1.2s ease-in infinite;
}

.sand-p1[b-u9v5ljzqfg] {
    animation-delay: 0s;
}

.sand-p2[b-u9v5ljzqfg] {
    animation-delay: 0.25s;
}

.sand-p3[b-u9v5ljzqfg] {
    animation-delay: 0.5s;
}

@keyframes particleFall-b-u9v5ljzqfg {
    0% {
        transform: translateY(-3px);
        opacity: 1;
    }
    100% {
        transform: translateY(8px);
        opacity: 0;
    }
}

.hourglass-time-text[b-u9v5ljzqfg],
.hourglass-phase-text[b-u9v5ljzqfg] {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.timer-toggle.hourglass-timer[b-u9v5ljzqfg] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.hourglass-content[b-u9v5ljzqfg] {
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 150px 150px;
}

.hourglass-content.recharging[b-u9v5ljzqfg] {
    transform: rotate(180deg);
}


/* Plant Timer Styles */
.plant-timer-container[b-u9v5ljzqfg] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant-svg[b-u9v5ljzqfg] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.2));
}

.plant-stem[b-u9v5ljzqfg] {
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plant-leaf[b-u9v5ljzqfg] {
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Removed sway animation to allow scale transform in SVG */
}

.plant-leaf-left[b-u9v5ljzqfg],
.plant-leaf-left-2[b-u9v5ljzqfg] {
    animation-delay: 0s;
}

.plant-leaf-right[b-u9v5ljzqfg],
.plant-leaf-right-2[b-u9v5ljzqfg] {
    animation-delay: 2s;
}

@keyframes leafSway-b-u9v5ljzqfg {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

.plant-flower[b-u9v5ljzqfg] {
    animation: flowerPulse-b-u9v5ljzqfg 3s ease-in-out infinite;
}

@keyframes flowerPulse-b-u9v5ljzqfg {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.plant-time-text[b-u9v5ljzqfg],
.plant-phase-text[b-u9v5ljzqfg] {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.timer-toggle.plant-timer[b-u9v5ljzqfg] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle.plant-timer:hover[b-u9v5ljzqfg] {
        transform: scale(1.02);
        border: none;
    }
}

/* Battery Timer Styles */
.battery-timer-container[b-u9v5ljzqfg] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery-svg[b-u9v5ljzqfg] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.15));
}

.battery-fill[b-u9v5ljzqfg] {
    transition: all 0.6s ease-out;
}

.battery-lightning[b-u9v5ljzqfg] {
    animation: lightningPulse-b-u9v5ljzqfg 0.8s ease-in-out infinite;
}

@keyframes lightningPulse-b-u9v5ljzqfg {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 4px #fbbf24);
    }
    50% {
        opacity: 0.6;
        filter: drop-shadow(0 0 8px #fbbf24);
    }
}

.battery-time-text[b-u9v5ljzqfg],
.battery-phase-text[b-u9v5ljzqfg] {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.timer-toggle.battery-timer[b-u9v5ljzqfg] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle.battery-timer:hover[b-u9v5ljzqfg] {
        transform: scale(1.02);
        border: none;
    }
}

/* Moon Timer Styles */
.moon-timer-container[b-u9v5ljzqfg] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.moon-svg[b-u9v5ljzqfg] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 4px 16px rgba(251, 191, 36, 0.3));
}

.moon-sky[b-u9v5ljzqfg] {
    transition: all 0.3s ease;
}

.moon-body[b-u9v5ljzqfg] {
    transition: all 0.3s ease;
}

.moon-shadow[b-u9v5ljzqfg] {
    transition: all 0.7s ease-out;
}

.moon-glow[b-u9v5ljzqfg] {
    /* Removed pulse animation to allow phase-based opacity */
}

@keyframes glowPulse-b-u9v5ljzqfg {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.stars .star[b-u9v5ljzqfg] {
    animation: starTwinkle-b-u9v5ljzqfg 3s ease-in-out infinite;
}

.star-1[b-u9v5ljzqfg] { animation-delay: 0s; }
.star-2[b-u9v5ljzqfg] { animation-delay: 0.4s; }
.star-3[b-u9v5ljzqfg] { animation-delay: 0.8s; }
.star-4[b-u9v5ljzqfg] { animation-delay: 1.2s; }
.star-5[b-u9v5ljzqfg] { animation-delay: 1.6s; }
.star-6[b-u9v5ljzqfg] { animation-delay: 2s; }
.star-7[b-u9v5ljzqfg] { animation-delay: 2.4s; }
.star-8[b-u9v5ljzqfg] { animation-delay: 2.8s; }

@keyframes starTwinkle-b-u9v5ljzqfg {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

.moon-time-text[b-u9v5ljzqfg],
.moon-phase-text[b-u9v5ljzqfg] {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.timer-toggle.moon-timer[b-u9v5ljzqfg] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle.moon-timer:hover[b-u9v5ljzqfg] {
        transform: scale(1.02);
        border: none;
    }
}

/* Premium Modal Styles */
.premium-modal[b-u9v5ljzqfg] {
    max-width: 500px;
}

.premium-content[b-u9v5ljzqfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.premium-icon[b-u9v5ljzqfg] {
    margin-bottom: 0.5rem;
}

.premium-message[b-u9v5ljzqfg] {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.premium-description[b-u9v5ljzqfg] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.premium-note[b-u9v5ljzqfg] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: rgba(99, 102, 241, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0;
}

/* Responsive adjustments for premium timers */
@media (max-width: 768px) {
    .hourglass-timer-container[b-u9v5ljzqfg],
    .plant-timer-container[b-u9v5ljzqfg],
    .battery-timer-container[b-u9v5ljzqfg],
    .moon-timer-container[b-u9v5ljzqfg] {
        width: clamp(280px, 90vw, 380px);
        height: clamp(280px, 90vw, 380px);
    }

    .hourglass-time-text[b-u9v5ljzqfg],
    .plant-time-text[b-u9v5ljzqfg],
    .battery-time-text[b-u9v5ljzqfg],
    .moon-time-text[b-u9v5ljzqfg] {
        font-size: 32px;
    }

    .hourglass-phase-text[b-u9v5ljzqfg],
    .plant-phase-text[b-u9v5ljzqfg],
    .battery-phase-text[b-u9v5ljzqfg],
    .moon-phase-text[b-u9v5ljzqfg] {
        font-size: 10px;
    }
}

/* Extra small screens (360px min supported) */
@media (max-width: 480px) {
    .pomodoro-page[b-u9v5ljzqfg] {
        padding: 0.5rem 0.5rem 1rem;
    }

    .pomodoro-card[b-u9v5ljzqfg] {
        padding: 1.5rem 1rem;
        border-radius: 8px;
    }

    .header-actions[b-u9v5ljzqfg] {
        top: 1rem;
        right: 1rem;
    }

    .action-btn[b-u9v5ljzqfg], .action-btn-info[b-u9v5ljzqfg] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .modern-dropdown[b-u9v5ljzqfg] {
        min-width: 280px;
        max-width: calc(100vw - 2rem);
        right: -0.5rem;
    }

    .session-indicator[b-u9v5ljzqfg] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .indicator-dot[b-u9v5ljzqfg] {
        width: 20px;
        height: 20px;
    }

    .play-toggle[b-u9v5ljzqfg] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .action-button[b-u9v5ljzqfg] {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .task-context[b-u9v5ljzqfg] {
        padding: 0.75rem 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .task-info[b-u9v5ljzqfg] {
        flex-direction: column;
        align-items: center;
    }

    .pomodoro-title-input[b-u9v5ljzqfg],
    .pomodoro-title-display[b-u9v5ljzqfg] {
        max-width: 100%;
    }
}
/* /Components/Pages/PomodoroComponents/BatteryTimer.razor.rz.scp.css */
.battery-timer[b-hz5j2k03ru] {
    --battery-charge-start: #22c55e;
    --battery-charge-end: #4ade80;
    --battery-low-start: #ef4444;
    --battery-low-end: #f87171;
    --battery-inner: rgba(0, 0, 0, 0.3);
    --battery-segment: rgba(0, 0, 0, 0.2);
    --battery-bolt: #fbbf24;

    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--pomo-dur-fast) var(--pomo-ease-out);
}

.battery-timer[data-phase="ShortBreak"][b-hz5j2k03ru] {
    --battery-charge-start: #3b82f6;
    --battery-charge-end: #60a5fa;
}

.battery-timer[data-phase="LongBreak"][b-hz5j2k03ru] {
    --battery-charge-start: #8b5cf6;
    --battery-charge-end: #a78bfa;
}

body.dark-theme .battery-timer[b-hz5j2k03ru] {
    --battery-inner: rgba(0, 0, 0, 0.55);
    --battery-segment: rgba(255, 255, 255, 0.08);
}

@media (hover: hover) {
    .battery-timer:hover[b-hz5j2k03ru] { transform: scale(1.02); }
}

.battery-timer:focus-visible[b-hz5j2k03ru] {
    outline: 2px solid color-mix(in oklab, var(--battery-charge-start) 55%, transparent);
    outline-offset: 6px;
}

.battery-timer-container[b-hz5j2k03ru] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery-svg[b-hz5j2k03ru] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 20px color-mix(in oklab, var(--battery-charge-start) 30%, transparent));
}

.battery-fill[b-hz5j2k03ru] {
    transition: y var(--pomo-dur-base) var(--pomo-ease-progress),
                height var(--pomo-dur-base) var(--pomo-ease-progress),
                fill var(--pomo-dur-base) var(--pomo-ease-progress);
}

.battery-lightning[b-hz5j2k03ru] {
    animation: battery-bolt-pulse-b-hz5j2k03ru var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite;
    filter: drop-shadow(0 0 6px var(--battery-bolt));
}

@keyframes battery-bolt-pulse-b-hz5j2k03ru {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px var(--battery-bolt)); }
    50% { opacity: 0.7; filter: drop-shadow(0 0 12px var(--battery-bolt)); }
}

.battery-time-text[b-hz5j2k03ru],
.battery-phase-text[b-hz5j2k03ru] {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .battery-timer-container[b-hz5j2k03ru] {
        width: clamp(280px, 90vw, 380px);
        height: clamp(280px, 90vw, 380px);
    }
    .battery-time-text[b-hz5j2k03ru] { font-size: 32px; }
    .battery-phase-text[b-hz5j2k03ru] { font-size: 10px; }
}

@media (max-width: 480px) {
    .battery-timer-container[b-hz5j2k03ru] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/CampfireTimer.razor.rz.scp.css */
.campfire-timer[b-6wlr27e239] {
    --campfire-log1-light: #8b4513;
    --campfire-log1-mid: #654321;
    --campfire-log1-dark: #4a2f0a;
    --campfire-log2-light: #7b3f10;
    --campfire-log2-mid: #5c3317;
    --campfire-log2-dark: #3e1f09;
    --campfire-log3-light: #96572a;
    --campfire-log3-mid: #6b3a1f;
    --campfire-log3-dark: #4a2510;
    --campfire-stone-light: #9ca3af;
    --campfire-stone-dark: #6b7280;
    --campfire-stone-stroke: #4b5563;
    --campfire-flame-base: #ff6b35;
    --campfire-flame-outer-tip: #ef4444;
    --campfire-flame-middle-base: #ffd700;
    --campfire-flame-middle-tip: #f97316;
    --campfire-flame-inner-base: #fff7ed;
    --campfire-ember-dark: #991b1b;
    --campfire-ground-light: #1c1917;
    --campfire-ground-dark: #292524;
    --campfire-smoke: #9ca3af;
    --campfire-smoke-light: #d1d5db;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.campfire-timer[data-phase="LongBreak"][b-6wlr27e239] {
    --campfire-flame-base: #dc2626;
    --campfire-flame-outer-tip: #991b1b;
}

body.dark-theme .campfire-timer[b-6wlr27e239] {
    --campfire-stone-light: #4b5563;
    --campfire-stone-dark: #374151;
    --campfire-ground-light: #0f0a09;
    --campfire-ground-dark: #1c1917;
}

.campfire-timer-container[b-6wlr27e239] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.campfire-svg[b-6wlr27e239] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--campfire-flame-base) 40%, transparent));
}

.campfire-flame-group[b-6wlr27e239] {
    animation: pomo-flame-flicker var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite;
    transition: transform var(--pomo-dur-base) var(--pomo-ease-progress);
}

.campfire-ambient-glow[b-6wlr27e239] {
    transition: opacity var(--pomo-dur-slow) var(--pomo-ease-progress);
}

.campfire-glow-pulse[b-6wlr27e239] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
}

.campfire-ember[b-6wlr27e239] {
    animation: pomo-ember-drift var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
    filter: drop-shadow(0 0 4px var(--campfire-flame-middle-base));
}
.campfire-ember-1[b-6wlr27e239] { animation-delay: 0s; --pomo-ember-sway: -3px; }
.campfire-ember-2[b-6wlr27e239] { animation-delay: 0.5s; --pomo-ember-sway: 4px; }
.campfire-ember-3[b-6wlr27e239] { animation-delay: 1s; --pomo-ember-sway: -5px; }
.campfire-ember-4[b-6wlr27e239] { animation-delay: 1.5s; --pomo-ember-sway: 2px; }
.campfire-ember-5[b-6wlr27e239] { animation-delay: 2s; --pomo-ember-sway: 6px; }

.campfire-smoke[b-6wlr27e239] {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
}
.campfire-smoke-1[b-6wlr27e239] { animation: pomo-steam-rise var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite; }
.campfire-smoke-2[b-6wlr27e239] { animation: pomo-steam-rise var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite 1.5s; }
.campfire-smoke-3[b-6wlr27e239] { animation: pomo-steam-rise var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite 3s; }

.campfire-time-text[b-6wlr27e239],
.campfire-phase-text[b-6wlr27e239] {
    text-shadow:
        0 0 12px color-mix(in oklab, var(--campfire-flame-base) 60%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .campfire-timer-container[b-6wlr27e239] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .campfire-timer-container[b-6wlr27e239] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/CandleTimer.razor.rz.scp.css */
.candle-timer[b-55bhbhlq08] {
    --candle-wax: #fff8e7;
    --candle-wax-edge: #f5e6c8;
    --candle-wax-stroke: #e8d5b0;
    --candle-wick: #2d2d2d;
    --candle-holder-light: #daa520;
    --candle-holder-dark: #b8860b;
    --candle-holder-stroke: #9a7b0a;
    --candle-flame-base: #ff6b35;
    --candle-flame-mid: #ffd700;
    --candle-flame-tip: #fffacd;
    --candle-smoke: #9ca3af;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.candle-timer[data-phase="ShortBreak"][b-55bhbhlq08] {
    --candle-flame-base: #ef4444;
    --candle-flame-mid: #f97316;
}

.candle-timer[data-phase="LongBreak"][b-55bhbhlq08] {
    --candle-flame-base: #8b5cf6;
    --candle-flame-mid: #a78bfa;
    --candle-flame-tip: #ddd6fe;
}

body.dark-theme .candle-timer[b-55bhbhlq08] {
    --candle-wax: #e8dcc8;
    --candle-wax-edge: #c9b896;
    --candle-wick: #111827;
}

.candle-timer-container[b-55bhbhlq08] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.candle-svg[b-55bhbhlq08] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--candle-flame-mid) 35%, transparent));
}

.candle-body[b-55bhbhlq08] {
    transition: d var(--pomo-dur-base) var(--pomo-ease-progress),
                y var(--pomo-dur-base) var(--pomo-ease-progress);
}

.candle-flame[b-55bhbhlq08] {
    animation: pomo-flame-flicker var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite;
}

.candle-flame-core[b-55bhbhlq08] {
    filter: drop-shadow(0 0 6px var(--candle-flame-mid));
}

.candle-glow[b-55bhbhlq08] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
}

.candle-smoke[b-55bhbhlq08] {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}
.smoke-1[b-55bhbhlq08] { animation: pomo-steam-rise var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite; }
.smoke-2[b-55bhbhlq08] { animation: pomo-steam-rise var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite 1.2s; }
.smoke-3[b-55bhbhlq08] { animation: pomo-steam-rise var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite 2.4s; }

.candle-time-text[b-55bhbhlq08],
.candle-phase-text[b-55bhbhlq08] {
    text-shadow:
        0 0 12px var(--pomo-surface-bg),
        0 0 4px var(--pomo-surface-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .candle-timer-container[b-55bhbhlq08] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .candle-timer-container[b-55bhbhlq08] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/CircleTimer.razor.rz.scp.css */
/* ----- CircleTimer: per-phase palette ----- */
.circle-timer[b-xtuhwunkdm] {
    --circle-stroke-start: var(--pomo-focus);
    --circle-stroke-end: var(--pomo-accent);
    --circle-glow: var(--pomo-accent);

    border: 1.5px solid color-mix(in oklab, var(--circle-stroke-start) 30%, transparent);
    background: transparent;
    border-radius: 50%;
    padding: clamp(0.55rem, 1.8vw, 1.1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform var(--pomo-dur-fast) var(--pomo-ease-out),
        border-color var(--pomo-dur-base) var(--pomo-ease-progress);
}

.circle-timer[data-phase="ShortBreak"][b-xtuhwunkdm] {
    --circle-stroke-start: var(--pomo-short-break);
    --circle-stroke-end: color-mix(in oklab, var(--pomo-short-break) 55%, var(--pomo-accent));
    --circle-glow: var(--pomo-short-break);
}

.circle-timer[data-phase="LongBreak"][b-xtuhwunkdm] {
    --circle-stroke-start: var(--pomo-long-break);
    --circle-stroke-end: color-mix(in oklab, var(--pomo-long-break) 65%, var(--pomo-accent));
    --circle-glow: var(--pomo-long-break);
}

@media (hover: hover) {
    .circle-timer:hover[b-xtuhwunkdm] {
        border-color: color-mix(in oklab, var(--circle-stroke-start) 55%, transparent);
        transform: translateY(-3px);
    }
}

.circle-timer:focus-visible[b-xtuhwunkdm] {
    outline: 2px solid color-mix(in oklab, var(--circle-stroke-start) 70%, transparent);
    outline-offset: 6px;
}

.circle-ring[b-xtuhwunkdm] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
}

.circle-svg[b-xtuhwunkdm] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(var(--pomo-shadow-ambient));
}

.circle-halo[b-xtuhwunkdm] {
    /* Halo opacity is baked into its radialGradient stop-opacity; this transition just smooths it */
    transition: opacity var(--pomo-dur-slow) var(--pomo-ease-progress);
}

.circle-track[b-xtuhwunkdm] {
    fill: none;
    stroke: color-mix(in oklab, var(--circle-stroke-start) 18%, transparent);
    stroke-width: clamp(16px, 3.6vw, 22px);
}

.circle-progress[b-xtuhwunkdm] {
    fill: none;
    stroke-width: clamp(16px, 3.6vw, 22px);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--pomo-dur-base) var(--pomo-ease-progress);
}

.circle-complete-pulse[b-xtuhwunkdm] {
    animation: circle-complete-b-xtuhwunkdm 1.6s var(--pomo-ease-out) infinite;
    transform-origin: 150px 150px;
}

@keyframes circle-complete-b-xtuhwunkdm {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.15); opacity: 0; }
}

.circle-overlay[b-xtuhwunkdm] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2.4vw, 1.4rem);
    text-align: center;
}

.circle-time[b-xtuhwunkdm] {
    font-size: clamp(4.75rem, 10vw, 7.5rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--pomo-stroke-primary);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    min-width: 8ch;
    display: inline-flex;
    justify-content: center;
    transition: font-size var(--pomo-dur-base) var(--pomo-ease-progress);
}

.circle-time.long-format[b-xtuhwunkdm] {
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    letter-spacing: 0.08em;
}

.circle-phase[b-xtuhwunkdm] {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 600;
    color: var(--pomo-stroke-muted);
    text-transform: uppercase;
    letter-spacing: 0.36em;
}

@media (max-width: 768px) {
    .circle-ring[b-xtuhwunkdm] { width: 280px; height: 280px; }
}

@media (max-width: 480px) {
    .circle-ring[b-xtuhwunkdm] { width: 260px; height: 260px; }
    .circle-time[b-xtuhwunkdm] { font-size: 3.5rem; letter-spacing: 0.08em; }
    .circle-time.long-format[b-xtuhwunkdm] { font-size: 2.5rem; }
}
/* /Components/Pages/PomodoroComponents/CoffeeCupTimer.razor.rz.scp.css */
.cup-timer[b-5i9kucoq2f] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--pomo-dur-fast) var(--pomo-ease-out);
}

@media (hover: hover) {
    .cup-timer:hover[b-5i9kucoq2f] { transform: scale(1.02); }
}

.cup-timer:focus-visible[b-5i9kucoq2f] {
    outline: 2px solid color-mix(in oklab, var(--pomo-accent) 55%, transparent);
    outline-offset: 6px;
}

.cup-timer-container[b-5i9kucoq2f] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-cup-svg[b-5i9kucoq2f] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(var(--pomo-shadow-ambient));
}

/* Liquid rises/falls — semantic, always animates */
.liquid-level[b-5i9kucoq2f] {
    transition: transform var(--pomo-dur-slow) var(--pomo-ease-progress);
}

/* Wave pan — shared keyframe */
.cup-liquid-wave[b-5i9kucoq2f] {
    animation: pomo-wave-pan var(--pomo-dur-ambient) linear infinite;
}

.refill-stream[b-5i9kucoq2f] {
    animation: stream-flow-b-5i9kucoq2f var(--pomo-dur-fast) linear infinite;
    transform-origin: top;
}

@keyframes stream-flow-b-5i9kucoq2f {
    0% { transform: scaleY(0.95); opacity: 0.8; }
    50% { transform: scaleY(1.05); opacity: 1; }
    100% { transform: scaleY(0.95); opacity: 0.8; }
}

.splash-bubble[b-5i9kucoq2f] {
    animation: cup-splash-b-5i9kucoq2f var(--pomo-dur-slow) var(--pomo-ease-out) infinite;
    opacity: 0;
}

.bubble-1[b-5i9kucoq2f] { animation-delay: 0s; }
.bubble-2[b-5i9kucoq2f] { animation-delay: 0.3s; }
.bubble-3[b-5i9kucoq2f] { animation-delay: 0.6s; }

@keyframes cup-splash-b-5i9kucoq2f {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: translateY(-20px) scale(1.2); opacity: 0; }
    100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}

/* Steam — container fades, each strand uses shared pomo-steam-rise */
.steam-container[b-5i9kucoq2f] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite;
}

.steam[b-5i9kucoq2f] {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
}

.steam-1[b-5i9kucoq2f] { animation: pomo-steam-rise var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite; }
.steam-2[b-5i9kucoq2f] { animation: pomo-steam-rise var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite 0.7s; }
.steam-3[b-5i9kucoq2f] { animation: pomo-steam-rise var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite 1.4s; }

.cup-time-text[b-5i9kucoq2f],
.cup-phase-text[b-5i9kucoq2f] {
    text-shadow:
        0 0 15px var(--pomo-surface-bg),
        0 0 5px var(--pomo-surface-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .cup-timer-container[b-5i9kucoq2f] { width: clamp(280px, 90vw, 380px); }
    .cup-time-text[b-5i9kucoq2f] { font-size: 56px; }
    .cup-phase-text[b-5i9kucoq2f] { font-size: 18px; }
}

@media (max-width: 480px) {
    .cup-timer-container[b-5i9kucoq2f] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/DnaTimer.razor.rz.scp.css */
.dna-timer[b-224muqhwe6] {
    --dna-bg-top: #0f172a;
    --dna-bg-mid: #1e293b;
    --dna-bg-bottom: #0f172a;
    --dna-backbone-deep: #8b5cf6;
    --dna-backbone-light: #a78bfa;
    --dna-base-pair-a: #06b6d4;
    --dna-base-pair-a-light: #22d3ee;
    --dna-base-pair-b: #f43f5e;
    --dna-base-pair-b-light: #fb7185;
    --dna-particle: #c4b5fd;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.dna-timer[data-phase="ShortBreak"][b-224muqhwe6] {
    --dna-backbone-deep: #3b82f6;
    --dna-backbone-light: #60a5fa;
    --dna-base-pair-a: #10b981;
    --dna-base-pair-a-light: #34d399;
}

.dna-timer[data-phase="LongBreak"][b-224muqhwe6] {
    --dna-backbone-deep: #a78bfa;
    --dna-backbone-light: #c4b5fd;
    --dna-base-pair-a: #22d3ee;
    --dna-base-pair-a-light: #67e8f9;
}

.dna-timer-container[b-224muqhwe6] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dna-svg[b-224muqhwe6] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 30px color-mix(in oklab, var(--dna-backbone-deep) 40%, transparent));
}

.dna-backbone-left[b-224muqhwe6],
.dna-backbone-right[b-224muqhwe6],
.dna-strand-glow[b-224muqhwe6] {
    transition: stroke-dashoffset var(--pomo-dur-base) var(--pomo-ease-progress);
}

.dna-base-pair-group[b-224muqhwe6] {
    transition: opacity var(--pomo-dur-base) var(--pomo-ease-progress);
}

.dna-particle[b-224muqhwe6] {
    animation: dna-particle-flow-b-224muqhwe6 4s linear infinite;
    filter: drop-shadow(0 0 4px var(--dna-particle));
}
.dna-particle-1[b-224muqhwe6] { animation-delay: 0s; }
.dna-particle-2[b-224muqhwe6] { animation-delay: -1s; }
.dna-particle-3[b-224muqhwe6] { animation-delay: -2s; }
.dna-particle-4[b-224muqhwe6] { animation-delay: -3s; }

@keyframes dna-particle-flow-b-224muqhwe6 {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-80px); opacity: 0; }
}

.dna-strand-glow[b-224muqhwe6] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
}

.dna-sparkle[b-224muqhwe6] { animation: pomo-star-twinkle 2.5s var(--pomo-ease-ambient) infinite; }
.dna-sparkle:nth-of-type(2n)[b-224muqhwe6] { animation-delay: 0.6s; }
.dna-sparkle:nth-of-type(3n)[b-224muqhwe6] { animation-delay: 1.2s; }
.dna-sparkle:nth-of-type(4n)[b-224muqhwe6] { animation-delay: 1.8s; }

.dna-time-text[b-224muqhwe6],
.dna-phase-text[b-224muqhwe6] {
    text-shadow: 0 0 12px color-mix(in oklab, var(--dna-backbone-deep) 50%, transparent),
                 0 2px 4px rgba(0, 0, 0, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .dna-timer-container[b-224muqhwe6] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .dna-timer-container[b-224muqhwe6] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/HourglassTimer.razor.rz.scp.css */
.hourglass-timer[b-h8hkdogrtj] {
    --hourglass-sand-top: #fde68a;
    --hourglass-sand-bottom: #d97706;

    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--pomo-dur-fast) var(--pomo-ease-out);
}

.hourglass-timer[data-phase="ShortBreak"][b-h8hkdogrtj] {
    --hourglass-sand-top: #bbf7d0;
    --hourglass-sand-bottom: #059669;
}

.hourglass-timer[data-phase="LongBreak"][b-h8hkdogrtj] {
    --hourglass-sand-top: #c7d2fe;
    --hourglass-sand-bottom: #4f46e5;
}

body.dark-theme .hourglass-timer[b-h8hkdogrtj] {
    --hourglass-sand-top: #fcd34d;
    --hourglass-sand-bottom: #b45309;
}

@media (hover: hover) {
    .hourglass-timer:hover[b-h8hkdogrtj] { transform: translateY(-3px); }
}

.hourglass-timer:focus-visible[b-h8hkdogrtj] {
    outline: 2px solid color-mix(in oklab, var(--hourglass-sand-top) 65%, transparent);
    outline-offset: 6px;
}

.hourglass-timer-container[b-h8hkdogrtj] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hourglass-svg[b-h8hkdogrtj] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--hourglass-sand-bottom) 35%, transparent));
}

.hourglass-sand-top[b-h8hkdogrtj],
.hourglass-sand-bottom[b-h8hkdogrtj] {
    transition: y var(--pomo-dur-base) var(--pomo-ease-progress);
}

/* Shared keyframes */
.sand-stream[b-h8hkdogrtj] { animation: pomo-stream-flow 1s var(--pomo-ease-ambient) infinite; }
.sand-particle[b-h8hkdogrtj] { animation: pomo-particle-fall 0.7s ease-in infinite; }
.sand-p1[b-h8hkdogrtj] { animation-delay: 0s; }
.sand-p2[b-h8hkdogrtj] { animation-delay: 0.18s; }

.hourglass-time-text[b-h8hkdogrtj],
.hourglass-phase-text[b-h8hkdogrtj] {
    text-shadow:
        0 0 15px var(--pomo-surface-bg),
        0 0 5px var(--pomo-surface-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hourglass-content[b-h8hkdogrtj] {
    transition: transform var(--pomo-dur-slow) var(--pomo-ease-progress);
    transform-origin: 150px 150px;
}

.hourglass-content.recharging[b-h8hkdogrtj] {
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .hourglass-timer-container[b-h8hkdogrtj] {
        width: clamp(280px, 90vw, 380px);
        height: clamp(280px, 90vw, 380px);
    }
    .hourglass-time-text[b-h8hkdogrtj] { font-size: 32px; }
    .hourglass-phase-text[b-h8hkdogrtj] { font-size: 10px; }
}

@media (max-width: 480px) {
    .hourglass-timer-container[b-h8hkdogrtj] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/IceTimer.razor.rz.scp.css */
.ice-timer[b-5ewjvp5w3i] {
    --ice-body-light: #bae6fd;
    --ice-body-mid: #7dd3fc;
    --ice-body-dark: #0ea5e9;
    --ice-water-bright: #38bdf8;
    --ice-water-dark: #0284c7;
    --ice-frost: #e0f2fe;
    --ice-sparkle: #bfdbfe;
    --ice-sparkle-bright: #f0f9ff;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.ice-timer[data-phase="ShortBreak"][b-5ewjvp5w3i] {
    --ice-body-light: #c7d2fe;
    --ice-body-mid: #a5b4fc;
    --ice-body-dark: #6366f1;
    --ice-water-bright: #818cf8;
    --ice-water-dark: #4338ca;
}

.ice-timer[data-phase="LongBreak"][b-5ewjvp5w3i] {
    --ice-body-light: #ddd6fe;
    --ice-body-mid: #c4b5fd;
    --ice-body-dark: #8b5cf6;
}

body.dark-theme .ice-timer[b-5ewjvp5w3i] {
    --ice-body-light: #0ea5e9;
    --ice-body-mid: #0284c7;
    --ice-body-dark: #0369a1;
    --ice-frost: #bae6fd;
}

.ice-timer-container[b-5ewjvp5w3i] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ice-svg[b-5ewjvp5w3i] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--ice-body-dark) 35%, transparent));
}

.ice-crystal-group[b-5ewjvp5w3i] {
    transition: transform var(--pomo-dur-base) var(--pomo-ease-progress);
}

.ice-body[b-5ewjvp5w3i],
.ice-pool-shape[b-5ewjvp5w3i] {
    transition: rx var(--pomo-dur-base) var(--pomo-ease-progress),
                ry var(--pomo-dur-base) var(--pomo-ease-progress),
                opacity var(--pomo-dur-base) var(--pomo-ease-progress);
}

.ice-shimmer[b-5ewjvp5w3i] {
    animation: ice-shimmer-pass-b-5ewjvp5w3i 3s linear infinite;
    transform-origin: 89px 148px;
}

@keyframes ice-shimmer-pass-b-5ewjvp5w3i {
    0% { transform: translateX(0); opacity: 0; }
    20% { opacity: 0.4; }
    80% { opacity: 0.4; }
    100% { transform: translateX(150px); opacity: 0; }
}

.ice-drip[b-5ewjvp5w3i] {
    animation: ice-drip-fall-b-5ewjvp5w3i 2s var(--pomo-ease-ambient) infinite;
    opacity: 0;
}
.ice-drip-1[b-5ewjvp5w3i] { animation-delay: 0s; }
.ice-drip-2[b-5ewjvp5w3i] { animation-delay: 0.7s; }
.ice-drip-3[b-5ewjvp5w3i] { animation-delay: 1.4s; }

@keyframes ice-drip-fall-b-5ewjvp5w3i {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(15px); opacity: 0; }
}

.ice-sparkle[b-5ewjvp5w3i] { animation: pomo-star-twinkle 2s var(--pomo-ease-ambient) infinite; }
.ice-sparkle:nth-of-type(2n)[b-5ewjvp5w3i] { animation-delay: 0.4s; }
.ice-sparkle:nth-of-type(3n)[b-5ewjvp5w3i] { animation-delay: 0.8s; }
.ice-sparkle:nth-of-type(4n)[b-5ewjvp5w3i] { animation-delay: 1.2s; }
.ice-sparkle:nth-of-type(5n)[b-5ewjvp5w3i] { animation-delay: 1.6s; }

.ice-frost-pulse[b-5ewjvp5w3i] { animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite; }

.ice-time-text[b-5ewjvp5w3i],
.ice-phase-text[b-5ewjvp5w3i] {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
                 0 0 12px color-mix(in oklab, var(--ice-body-light) 40%, transparent);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .ice-timer-container[b-5ewjvp5w3i] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .ice-timer-container[b-5ewjvp5w3i] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/MoonTimer.razor.rz.scp.css */
.moon-timer[b-5v7b4s8mdx] {
    --moon-surface-bright: #fef3c7;
    --moon-surface-mid: #fbbf24;
    --moon-surface-dim: #d97706;
    --moon-crater: #b45309;
    --moon-sky: #0f172a;

    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
    transition: transform var(--pomo-dur-fast) var(--pomo-ease-out);
}

.moon-timer[data-phase="ShortBreak"][b-5v7b4s8mdx] {
    --moon-surface-bright: #e0e7ff;
    --moon-surface-mid: #818cf8;
    --moon-surface-dim: #4f46e5;
    --moon-crater: #3730a3;
}

.moon-timer[data-phase="LongBreak"][b-5v7b4s8mdx] {
    --moon-surface-bright: #ddd6fe;
    --moon-surface-mid: #a78bfa;
    --moon-surface-dim: #7c3aed;
    --moon-crater: #5b21b6;
    --moon-sky: #1e1b4b;
}

@media (hover: hover) {
    .moon-timer:hover[b-5v7b4s8mdx] { transform: scale(1.02); }
}

.moon-timer:focus-visible[b-5v7b4s8mdx] {
    outline: 2px solid color-mix(in oklab, var(--moon-surface-mid) 60%, transparent);
    outline-offset: 6px;
}

.moon-timer-container[b-5v7b4s8mdx] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.moon-svg[b-5v7b4s8mdx] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--moon-surface-mid) 40%, transparent));
}

/* Smooth rx changes across quarter-phase boundaries */
.moon-phase-ellipse[b-5v7b4s8mdx] {
    transition: rx var(--pomo-dur-base) var(--pomo-ease-progress),
                fill var(--pomo-dur-base) var(--pomo-ease-progress);
}

.moon-glow[b-5v7b4s8mdx] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite;
}

/* Stars use shared pomo-star-twinkle */
.moon-star[b-5v7b4s8mdx] {
    animation: pomo-star-twinkle 3s var(--pomo-ease-ambient) infinite;
}
.moon-stars .moon-star:nth-child(1)[b-5v7b4s8mdx] { animation-delay: 0s; }
.moon-stars .moon-star:nth-child(2)[b-5v7b4s8mdx] { animation-delay: 0.4s; }
.moon-stars .moon-star:nth-child(3)[b-5v7b4s8mdx] { animation-delay: 0.8s; }
.moon-stars .moon-star:nth-child(4)[b-5v7b4s8mdx] { animation-delay: 1.2s; }
.moon-stars .moon-star:nth-child(5)[b-5v7b4s8mdx] { animation-delay: 1.6s; }
.moon-stars .moon-star:nth-child(6)[b-5v7b4s8mdx] { animation-delay: 2s; }
.moon-stars .moon-star:nth-child(7)[b-5v7b4s8mdx] { animation-delay: 2.4s; }
.moon-stars .moon-star:nth-child(8)[b-5v7b4s8mdx] { animation-delay: 2.8s; }

.moon-time-text[b-5v7b4s8mdx],
.moon-phase-text[b-5v7b4s8mdx] {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .moon-timer-container[b-5v7b4s8mdx] {
        width: clamp(280px, 90vw, 380px);
        height: clamp(280px, 90vw, 380px);
    }
    .moon-time-text[b-5v7b4s8mdx] { font-size: 32px; }
    .moon-phase-text[b-5v7b4s8mdx] { font-size: 10px; }
}

@media (max-width: 480px) {
    .moon-timer-container[b-5v7b4s8mdx] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/MountainTimer.razor.rz.scp.css */
.mountain-timer[b-z6cxx4o2wi] {
    --mountain-sky-top: #2563eb;
    --mountain-sky-mid: #60a5fa;
    --mountain-sky-bottom: #93c5fd;
    --mountain-rock-light: #9ca3af;
    --mountain-rock-mid: #6b7280;
    --mountain-rock-dark: #4b5563;
    --mountain-rock-darkest: #374151;
    --mountain-snow-bright: #f8fafc;
    --mountain-snow-dim: #e2e8f0;
    --mountain-trail-light: #f59e0b;
    --mountain-trail-dark: #d97706;
    --mountain-ground-top: #166534;
    --mountain-ground-bottom: #14532d;
    --mountain-tree-light: #15803d;
    --mountain-tree-dark: #166534;
    --mountain-trunk: #78350f;
    --mountain-flag: #ef4444;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.mountain-timer[data-phase="ShortBreak"][b-z6cxx4o2wi] {
    --mountain-sky-top: #ea580c;
    --mountain-sky-mid: #fb923c;
    --mountain-sky-bottom: #fed7aa;
}

.mountain-timer[data-phase="LongBreak"][b-z6cxx4o2wi] {
    --mountain-sky-top: #312e81;
    --mountain-sky-mid: #6366f1;
    --mountain-sky-bottom: #a5b4fc;
    --mountain-snow-bright: #e0e7ff;
}

body.dark-theme .mountain-timer[b-z6cxx4o2wi] {
    --mountain-sky-top: #0f172a;
    --mountain-sky-mid: #1e3a8a;
    --mountain-sky-bottom: #312e81;
}

.mountain-timer-container[b-z6cxx4o2wi] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mountain-svg[b-z6cxx4o2wi] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--mountain-rock-dark) 40%, transparent));
}

.mountain-cloud[b-z6cxx4o2wi] {
    animation: mountain-cloud-drift-b-z6cxx4o2wi 20s linear infinite;
}
.mountain-cloud-1[b-z6cxx4o2wi] { animation-delay: 0s; }
.mountain-cloud-2[b-z6cxx4o2wi] { animation-delay: -7s; animation-duration: 25s; }
.mountain-cloud-3[b-z6cxx4o2wi] { animation-delay: -14s; animation-duration: 30s; }

@keyframes mountain-cloud-drift-b-z6cxx4o2wi {
    0% { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
}

.mountain-trail-path[b-z6cxx4o2wi] {
    stroke-dasharray: 230;
    transition: stroke-dashoffset var(--pomo-dur-base) var(--pomo-ease-progress);
    filter: drop-shadow(0 0 3px color-mix(in oklab, var(--mountain-trail-light) 50%, transparent));
}

.mountain-hiker-dot[b-z6cxx4o2wi] {
    transition: cx var(--pomo-dur-base) var(--pomo-ease-progress),
                cy var(--pomo-dur-base) var(--pomo-ease-progress);
    animation: pomo-fade-pulse var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite;
    filter: drop-shadow(0 0 4px var(--mountain-trail-light));
}

.mountain-flag[b-z6cxx4o2wi] {
    transition: transform var(--pomo-dur-base) var(--pomo-ease-spring);
}

.mountain-snow[b-z6cxx4o2wi] {
    animation: mountain-snow-fall-b-z6cxx4o2wi 5s linear infinite;
}
.mountain-snow-1[b-z6cxx4o2wi] { animation-delay: 0s; }
.mountain-snow-2[b-z6cxx4o2wi] { animation-delay: -1s; animation-duration: 6s; }
.mountain-snow-3[b-z6cxx4o2wi] { animation-delay: -2s; animation-duration: 4s; }
.mountain-snow-4[b-z6cxx4o2wi] { animation-delay: -3s; animation-duration: 7s; }
.mountain-snow-5[b-z6cxx4o2wi] { animation-delay: -4s; animation-duration: 5.5s; }

@keyframes mountain-snow-fall-b-z6cxx4o2wi {
    0% { transform: translate(0, -10px); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(5px, 200px); opacity: 0.3; }
}

.mountain-time-text[b-z6cxx4o2wi],
.mountain-phase-text[b-z6cxx4o2wi] {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .mountain-timer-container[b-z6cxx4o2wi] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .mountain-timer-container[b-z6cxx4o2wi] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/PlantTimer.razor.rz.scp.css */
/* ----- PlantTimer: per-phase palette ----- */
.plant-timer[b-66hud4xl8s] {
    --plant-leaf: #16a34a;
    --plant-leaf-light: #4ade80;
    --plant-stem: #22c55e;
    --plant-pot-start: #c2410c;
    --plant-pot-end: #9a3412;
    --plant-pot-rim: #9a3412;
    --plant-petal: #fb7185;
    --plant-flower-center-inner: #fcd34d;
    --plant-flower-center-outer: #f59e0b;

    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
    cursor: pointer;
}

.plant-timer[data-phase="ShortBreak"][b-66hud4xl8s] {
    --plant-leaf: #10b981;
    --plant-leaf-light: #34d399;
    --plant-petal: #f472b6;
}

.plant-timer[data-phase="LongBreak"][b-66hud4xl8s] {
    --plant-leaf: #14b8a6;
    --plant-leaf-light: #5eead4;
    --plant-petal: #a78bfa;
    --plant-flower-center-inner: #c4b5fd;
    --plant-flower-center-outer: #8b5cf6;
}

body.dark-theme .plant-timer[b-66hud4xl8s] {
    --plant-leaf: #22c55e;
    --plant-leaf-light: #86efac;
    --plant-pot-start: #ea580c;
    --plant-pot-end: #c2410c;
}

.plant-timer-container[b-66hud4xl8s] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant-svg[b-66hud4xl8s] {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--plant-leaf) 35%, transparent));
}

/* Pot has a subtle inner shadow implied by gradient + outline */
.plant-pot[b-66hud4xl8s],
.plant-pot-rim[b-66hud4xl8s] {
    transition: fill var(--pomo-dur-slow) var(--pomo-ease-progress);
}

/* Stem draw-in — semantic, transitions smoothly over progress */
.plant-stem[b-66hud4xl8s] {
    transition: stroke-dashoffset var(--pomo-dur-slow) var(--pomo-ease-progress);
}

/* Leaves: scale-in via CSS variable from Razor, + gentle sway */
.plant-leaf[b-66hud4xl8s] {
    transform-box: fill-box;
    transform-origin: 0 0;
}

.plant-leaf path[b-66hud4xl8s] {
    transform-origin: 0 0;
    transform: scale(var(--leaf-scale, 0));
    transition: transform var(--pomo-dur-base) var(--pomo-ease-spring);
    animation: pomo-leaf-sway var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
}

.plant-leaf:nth-child(odd) path[b-66hud4xl8s] { animation-delay: 0s; }
.plant-leaf:nth-child(even) path[b-66hud4xl8s] { animation-delay: -1.3s; }

/* Flower — scale-in with spring overshoot */
.plant-flower[b-66hud4xl8s] {
    transform: translate(150px, 70px) scale(var(--flower-scale, 0));
    transform-origin: 150px 70px;
    transition: transform var(--pomo-dur-slow) var(--pomo-ease-spring);
}

/* Completion glow — expanding ring at full bloom */
.plant-bloom-glow[b-66hud4xl8s] {
    animation: plant-bloom-ring-b-66hud4xl8s 2.2s var(--pomo-ease-out) infinite;
    transform-origin: 150px 70px;
}

@keyframes plant-bloom-ring-b-66hud4xl8s {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}

.plant-time-text[b-66hud4xl8s],
.plant-phase-text[b-66hud4xl8s] {
    text-shadow:
        0 0 15px var(--pomo-surface-bg),
        0 0 5px var(--pomo-surface-bg);
}
/* /Components/Pages/PomodoroComponents/PomodoroInfoModal.razor.rz.scp.css */
.modal-backdrop[b-ovfnpqurya] {
    position: fixed;
    inset: 0;
    background: rgba(12, 14, 18, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(12px);
}

.settings-modal[b-ovfnpqurya] {
    background: var(--card-bg);
    border-radius: 28px;
    padding: clamp(2rem, 5vw, 2.75rem);
    width: min(520px, 92vw);
    border: 1px solid rgba(92, 107, 192, 0.14);
    box-shadow: 0 32px 60px -36px rgba(12, 16, 30, 0.55);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.modal-header[b-ovfnpqurya] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-ovfnpqurya] {
    margin: 0;
    font-size: 1.6rem;
}

.icon-circle[b-ovfnpqurya] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.icon-circle:hover[b-ovfnpqurya] {
    background: var(--hover-bg);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.modal-body[b-ovfnpqurya] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.modal-footer[b-ovfnpqurya] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.btn-confirm[b-ovfnpqurya] {
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.9rem;
    font-weight: 600;
    background: var(--accent-gradient);
    color: var(--accent-contrast);
    box-shadow: var(--accent-glow);
}

.info-modal[b-ovfnpqurya] {
    max-width: 650px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.info-modal .modal-header[b-ovfnpqurya] {
    flex-shrink: 0;
    padding: clamp(2rem, 5vw, 2.75rem);
    padding-bottom: 0;
}

.info-modal .modal-body[b-ovfnpqurya] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(2rem, 5vw, 2.75rem);
    padding-top: 1.75rem;
    padding-bottom: 0;
}

.info-modal .modal-footer[b-ovfnpqurya] {
    flex-shrink: 0;
    padding: clamp(2rem, 5vw, 2.75rem);
    padding-top: 1.75rem;
}

.info-content[b-ovfnpqurya] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-intro p[b-ovfnpqurya] {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.info-cycle h3[b-ovfnpqurya],
.info-tips h3[b-ovfnpqurya] {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.cycle-steps[b-ovfnpqurya] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cycle-step[b-ovfnpqurya] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

.cycle-step.repeat-step[b-ovfnpqurya] {
    border-left-color: #f59e0b;
}

.step-icon[b-ovfnpqurya] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.focus-icon[b-ovfnpqurya] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.break-icon[b-ovfnpqurya] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.repeat-icon[b-ovfnpqurya] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.long-break-icon[b-ovfnpqurya] {
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: white;
}

.step-content[b-ovfnpqurya] {
    flex: 1;
}

.step-content h4[b-ovfnpqurya] {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.step-duration[b-ovfnpqurya] {
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.step-content p:last-child[b-ovfnpqurya] {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cycle-arrow[b-ovfnpqurya] {
    display: flex;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.2rem;
    opacity: 0.5;
}

.info-tips ul[b-ovfnpqurya] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-tips li[b-ovfnpqurya] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
    align-items: baseline;
}

.info-tips li[b-ovfnpqurya]::before {
    content: "\2022";
    color: var(--accent-primary);
    font-weight: bold;
    font-size: 1.2rem;
}

.info-tips li strong[b-ovfnpqurya] {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.info-modal .modal-footer[b-ovfnpqurya] {
    justify-content: flex-end;
}

@media (max-width: 480px) {
    .settings-modal[b-ovfnpqurya],
    .info-modal[b-ovfnpqurya] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .info-modal[b-ovfnpqurya] {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
    }

    .info-modal .modal-header[b-ovfnpqurya] {
        flex-shrink: 0;
        padding-top: calc(env(safe-area-inset-top, 0px) + 1rem);
    }

    .info-modal .modal-body[b-ovfnpqurya] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .info-modal .modal-footer[b-ovfnpqurya] {
        flex-shrink: 0;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }
}
/* /Components/Pages/PomodoroComponents/SundialTimer.razor.rz.scp.css */
.sundial-timer[b-3vjja000gw] {
    --sundial-face-bright: #e8dcc8;
    --sundial-face-mid: #d4c5a9;
    --sundial-face-dim: #b8a88a;
    --sundial-face-edge: #a69478;
    --sundial-face-edge-dark: #8b7d6b;
    --sundial-gnomon-light: #4b5563;
    --sundial-gnomon-mid: #374151;
    --sundial-gnomon-dark: #1f2937;
    --sundial-gnomon-lightest: #6b7280;
    --sundial-marker: #4b5563;
    --sundial-numeral: #374151;
    --sundial-sun-bright: #fbbf24;
    --sundial-sun-mid: #f59e0b;
    --sundial-moonlight: #94a3b8;
    --sundial-star: #e2e8f0;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.sundial-timer[data-phase="ShortBreak"][b-3vjja000gw] {
    --sundial-sun-bright: #fbbf24;
    --sundial-face-bright: #fef3c7;
}

.sundial-timer[data-phase="LongBreak"][b-3vjja000gw] {
    --sundial-face-bright: #1e293b;
    --sundial-face-mid: #334155;
    --sundial-face-dim: #475569;
    --sundial-face-edge: #64748b;
    --sundial-face-edge-dark: #475569;
    --sundial-marker: #cbd5e1;
    --sundial-numeral: #e2e8f0;
    --sundial-gnomon-light: #94a3b8;
    --sundial-gnomon-mid: #64748b;
    --sundial-gnomon-dark: #334155;
}

body.dark-theme .sundial-timer[b-3vjja000gw] {
    --sundial-face-bright: #57534e;
    --sundial-face-mid: #44403c;
    --sundial-face-dim: #292524;
    --sundial-face-edge: #1c1917;
    --sundial-marker: #d6d3d1;
    --sundial-numeral: #e7e5e4;
}

.sundial-timer-container[b-3vjja000gw] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sundial-svg[b-3vjja000gw] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--sundial-face-edge) 40%, transparent));
}

.sundial-shadow-wedge[b-3vjja000gw] {
    transition: transform var(--pomo-dur-base) var(--pomo-ease-progress),
                opacity var(--pomo-dur-base) var(--pomo-ease-progress);
}

.sundial-sun-glow[b-3vjja000gw] { animation: pomo-glow-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite; }
.sundial-ray[b-3vjja000gw] { animation: pomo-fade-pulse var(--pomo-dur-ambient-fast) var(--pomo-ease-ambient) infinite; }
.sundial-ray:nth-of-type(2n)[b-3vjja000gw] { animation-delay: 0.4s; }
.sundial-ray:nth-of-type(3n)[b-3vjja000gw] { animation-delay: 0.8s; }

.sundial-moonlight[b-3vjja000gw] { animation: pomo-fade-pulse var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite; }
.sundial-star[b-3vjja000gw] { animation: pomo-star-twinkle 3s var(--pomo-ease-ambient) infinite; }
.sundial-star:nth-of-type(2n)[b-3vjja000gw] { animation-delay: 0.6s; }
.sundial-star:nth-of-type(3n)[b-3vjja000gw] { animation-delay: 1.2s; }
.sundial-star:nth-of-type(4n)[b-3vjja000gw] { animation-delay: 1.8s; }

.sundial-time-text[b-3vjja000gw],
.sundial-phase-text[b-3vjja000gw] {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35),
                 0 0 10px color-mix(in oklab, var(--sundial-face-mid) 40%, transparent);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .sundial-timer-container[b-3vjja000gw] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .sundial-timer-container[b-3vjja000gw] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/TeslaCoilTimer.razor.rz.scp.css */
.teslacoil-timer[b-x7jn8gzhfq] {
    --tesla-lab-top: #0f172a;
    --tesla-lab-bottom: #1e293b;
    --tesla-base-light: #4b5563;
    --tesla-base-dark: #374151;
    --tesla-coil-light: #9ca3af;
    --tesla-coil-dark: #6b7280;
    --tesla-sphere-bright: #cbd5e1;
    --tesla-sphere-mid: #94a3b8;
    --tesla-sphere-dark: #64748b;
    --tesla-arc-light: #a78bfa;
    --tesla-arc-mid: #8b5cf6;
    --tesla-arc-deep: #7c3aed;
    --tesla-arc-bright: #c084fc;
    --tesla-arc-lightest: #e9d5ff;
    --tesla-ring-active: #a78bfa;
    --tesla-spark: #fde68a;
    --tesla-grid: #1e293b;
    --tesla-led-green: #22c55e;
    --tesla-led-red: #ef4444;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.teslacoil-timer[data-phase="ShortBreak"][b-x7jn8gzhfq] {
    --tesla-arc-light: #60a5fa;
    --tesla-arc-mid: #3b82f6;
    --tesla-arc-deep: #2563eb;
    --tesla-arc-bright: #93c5fd;
    --tesla-ring-active: #60a5fa;
}

.teslacoil-timer[data-phase="LongBreak"][b-x7jn8gzhfq] {
    --tesla-arc-light: #34d399;
    --tesla-arc-mid: #10b981;
    --tesla-arc-deep: #059669;
    --tesla-arc-bright: #6ee7b7;
    --tesla-ring-active: #34d399;
}

.teslacoil-timer-container[b-x7jn8gzhfq] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.teslacoil-svg[b-x7jn8gzhfq] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 30px color-mix(in oklab, var(--tesla-arc-deep) 40%, transparent));
}

.teslacoil-ring[b-x7jn8gzhfq] {
    transition: fill var(--pomo-dur-base) var(--pomo-ease-progress),
                opacity var(--pomo-dur-base) var(--pomo-ease-progress);
}

.teslacoil-ring-active[b-x7jn8gzhfq] {
    filter: drop-shadow(0 0 4px var(--tesla-ring-active));
}

.teslacoil-energy-field[b-x7jn8gzhfq] {
    transition: r var(--pomo-dur-base) var(--pomo-ease-progress),
                opacity var(--pomo-dur-base) var(--pomo-ease-progress);
    animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
}

.teslacoil-arc[b-x7jn8gzhfq] {
    animation: teslacoil-arc-flash-b-x7jn8gzhfq 0.6s var(--pomo-ease-ambient) infinite;
    filter: drop-shadow(0 0 6px var(--tesla-arc-bright));
}
.teslacoil-arc-1[b-x7jn8gzhfq] { animation-delay: 0s; }
.teslacoil-arc-2[b-x7jn8gzhfq] { animation-delay: 0.2s; }
.teslacoil-arc-3[b-x7jn8gzhfq] { animation-delay: 0.4s; }

@keyframes teslacoil-arc-flash-b-x7jn8gzhfq {
    0%, 100% { opacity: 0.2; }
    30%, 60% { opacity: 1; }
}

.teslacoil-spark[b-x7jn8gzhfq] {
    animation: pomo-star-twinkle 0.8s var(--pomo-ease-ambient) infinite;
    filter: drop-shadow(0 0 4px var(--tesla-spark));
}
.teslacoil-spark-2[b-x7jn8gzhfq] { animation-delay: 0.15s; }
.teslacoil-spark-3[b-x7jn8gzhfq] { animation-delay: 0.3s; }

.teslacoil-charge-glow[b-x7jn8gzhfq] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
}

.teslacoil-energy-rise[b-x7jn8gzhfq] {
    animation: tesla-energy-rise-b-x7jn8gzhfq 1.6s linear infinite;
    filter: drop-shadow(0 0 4px var(--tesla-arc-light));
}
.teslacoil-energy-rise-1[b-x7jn8gzhfq] { animation-delay: 0s; }
.teslacoil-energy-rise-2[b-x7jn8gzhfq] { animation-delay: 0.4s; }
.teslacoil-energy-rise-3[b-x7jn8gzhfq] { animation-delay: 0.8s; }

@keyframes tesla-energy-rise-b-x7jn8gzhfq {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-140px); opacity: 0; }
}

.teslacoil-time-text[b-x7jn8gzhfq],
.teslacoil-phase-text[b-x7jn8gzhfq] {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9),
                 0 0 15px color-mix(in oklab, var(--tesla-arc-mid) 40%, transparent);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .teslacoil-timer-container[b-x7jn8gzhfq] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .teslacoil-timer-container[b-x7jn8gzhfq] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/VinylTimer.razor.rz.scp.css */
.vinyl-timer[b-fby7fkdd51] {
    --vinyl-record-light: #2d2d2d;
    --vinyl-record-mid: #1a1a1a;
    --vinyl-record-dark: #111111;
    --vinyl-label-light: #f97316;
    --vinyl-label-mid: #dc2626;
    --vinyl-label-dark: #991b1b;
    --vinyl-arm-light: #9ca3af;
    --vinyl-arm-mid: #6b7280;
    --vinyl-arm-dark: #4b5563;
    --vinyl-stylus: #d1d5db;
    --vinyl-note: #fbbf24;
    --vinyl-note-soft: #fcd34d;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.vinyl-timer[data-phase="ShortBreak"][b-fby7fkdd51] {
    --vinyl-label-light: #3b82f6;
    --vinyl-label-mid: #1d4ed8;
    --vinyl-label-dark: #1e3a8a;
}

.vinyl-timer[data-phase="LongBreak"][b-fby7fkdd51] {
    --vinyl-label-light: #a78bfa;
    --vinyl-label-mid: #8b5cf6;
    --vinyl-label-dark: #6d28d9;
}

.vinyl-timer-container[b-fby7fkdd51] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vinyl-svg[b-fby7fkdd51] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 30px color-mix(in oklab, var(--vinyl-label-mid) 30%, transparent));
}

.vinyl-spinning[b-fby7fkdd51] {
    animation: pomo-spin var(--pomo-dur-ambient-slow) linear infinite;
    transform-origin: 150px 150px;
}

.vinyl-groove-highlight[b-fby7fkdd51] {
    transition: r var(--pomo-dur-base) var(--pomo-ease-progress);
}

.vinyl-tonearm[b-fby7fkdd51] {
    transition: transform var(--pomo-dur-slow) var(--pomo-ease-progress);
}

.vinyl-label-glow[b-fby7fkdd51] { animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite; }

.vinyl-note[b-fby7fkdd51] {
    animation: vinyl-note-rise-b-fby7fkdd51 3.5s var(--pomo-ease-ambient) infinite;
    opacity: 0;
    filter: drop-shadow(0 0 3px color-mix(in oklab, var(--vinyl-note) 50%, transparent));
}
.vinyl-note-1[b-fby7fkdd51] { animation-delay: 0s; }
.vinyl-note-2[b-fby7fkdd51] { animation-delay: 1.2s; }
.vinyl-note-3[b-fby7fkdd51] { animation-delay: 2.4s; }

@keyframes vinyl-note-rise-b-fby7fkdd51 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translate(20px, -60px) rotate(15deg); opacity: 0; }
}

.vinyl-time-text[b-fby7fkdd51],
.vinyl-phase-text[b-fby7fkdd51] {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .vinyl-timer-container[b-fby7fkdd51] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .vinyl-timer-container[b-fby7fkdd51] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/VolcanoTimer.razor.rz.scp.css */
.volcano-timer[b-b4dm9nufqx] {
    --volcano-sky-top: #292524;
    --volcano-sky-mid: #44403c;
    --volcano-sky-bottom: #1c1917;
    --volcano-rock-light: #6b7280;
    --volcano-rock-mid: #4b5563;
    --volcano-rock-dark: #1f2937;
    --volcano-rock-darkest: #1f2937;
    --volcano-rock-highlight: #6b7280;
    --volcano-lava-bright: #fcd34d;
    --volcano-lava-mid: #f97316;
    --volcano-lava-mid-bright: #fbbf24;
    --volcano-lava-deep: #ef4444;
    --volcano-ground-top: #1f2937;
    --volcano-ground-bottom: #111827;
    --volcano-cool-mist: #94a3b8;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.volcano-timer[data-phase="ShortBreak"][b-b4dm9nufqx] {
    --volcano-lava-bright: #fde68a;
    --volcano-lava-mid: #fbbf24;
    --volcano-lava-deep: #d97706;
}

.volcano-timer[data-phase="LongBreak"][b-b4dm9nufqx] {
    --volcano-lava-bright: #ddd6fe;
    --volcano-lava-mid: #a78bfa;
    --volcano-lava-deep: #7c3aed;
}

.volcano-timer-container[b-b4dm9nufqx] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.volcano-svg[b-b4dm9nufqx] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 10px 30px color-mix(in oklab, var(--volcano-lava-deep) 40%, transparent));
}

.volcano-crater-glow[b-b4dm9nufqx] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
    transition: opacity var(--pomo-dur-base) var(--pomo-ease-progress);
}

.volcano-lava-fill[b-b4dm9nufqx] {
    transition: y var(--pomo-dur-base) var(--pomo-ease-progress),
                height var(--pomo-dur-base) var(--pomo-ease-progress);
}

.volcano-bubble[b-b4dm9nufqx] {
    animation: volcano-bubble-pop-b-b4dm9nufqx 1.6s var(--pomo-ease-ambient) infinite;
}
.volcano-bubble-1[b-b4dm9nufqx] { animation-delay: 0s; }
.volcano-bubble-2[b-b4dm9nufqx] { animation-delay: 0.5s; }
.volcano-bubble-3[b-b4dm9nufqx] { animation-delay: 1s; }

@keyframes volcano-bubble-pop-b-b4dm9nufqx {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-2px); opacity: 1; }
}

.volcano-ash[b-b4dm9nufqx] {
    animation: pomo-ember-drift var(--pomo-dur-ambient) var(--pomo-ease-ambient) infinite;
}
.volcano-ash-1[b-b4dm9nufqx] { animation-delay: 0s; --pomo-ember-sway: -2px; }
.volcano-ash-2[b-b4dm9nufqx] { animation-delay: 0.5s; --pomo-ember-sway: 3px; }
.volcano-ash-3[b-b4dm9nufqx] { animation-delay: 1s; --pomo-ember-sway: -4px; }
.volcano-ash-4[b-b4dm9nufqx] { animation-delay: 1.5s; --pomo-ember-sway: 2px; }
.volcano-ash-5[b-b4dm9nufqx] { animation-delay: 2s; --pomo-ember-sway: 5px; }

.volcano-cool-mist[b-b4dm9nufqx] {
    animation: pomo-fade-pulse var(--pomo-dur-ambient-slow) var(--pomo-ease-ambient) infinite;
}

.volcano-crystal[b-b4dm9nufqx] {
    animation: pomo-star-twinkle 3s var(--pomo-ease-ambient) infinite;
}
.volcano-crystal:nth-of-type(2n)[b-b4dm9nufqx] { animation-delay: 0.8s; }
.volcano-crystal:nth-of-type(3n)[b-b4dm9nufqx] { animation-delay: 1.6s; }

.volcano-time-text[b-b4dm9nufqx],
.volcano-phase-text[b-b4dm9nufqx] {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9),
                 0 0 20px color-mix(in oklab, var(--volcano-lava-deep) 40%, transparent);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .volcano-timer-container[b-b4dm9nufqx] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .volcano-timer-container[b-b4dm9nufqx] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroComponents/WaveTimer.razor.rz.scp.css */
.wave-timer[b-gyy76wol5g] {
    --wave-sky-top: #60a5fa;
    --wave-sky-bottom: #87ceeb;
    --wave-water-top: #0ea5e9;
    --wave-water-bottom: #0284c7;
    --wave-water-deep: #0369a1;
    --wave-sun-bright: #fde68a;
    --wave-sun-mid: #fbbf24;
    --wave-sun-dim: #f59e0b;
    --wave-island: #2d6a4f;
    --wave-boat: #4b5563;
    --wave-sail-light: #e5e7eb;
    --wave-sail-dark: #d1d5db;

    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transition: transform var(--pomo-dur-fast) var(--pomo-ease-out);
}

.wave-timer[data-phase="ShortBreak"][b-gyy76wol5g] {
    --wave-sky-top: #a78bfa;
    --wave-sky-bottom: #c4b5fd;
    --wave-water-top: #8b5cf6;
    --wave-water-bottom: #7c3aed;
    --wave-water-deep: #5b21b6;
    --wave-sun-bright: #fed7aa;
    --wave-sun-mid: #fb923c;
    --wave-sun-dim: #ea580c;
}

.wave-timer[data-phase="LongBreak"][b-gyy76wol5g] {
    --wave-sky-top: #1e3a8a;
    --wave-sky-bottom: #312e81;
    --wave-water-top: #1e40af;
    --wave-water-bottom: #1e3a8a;
    --wave-water-deep: #172554;
    --wave-sun-bright: #fef3c7;
    --wave-sun-mid: #facc15;
    --wave-sun-dim: #ca8a04;
}

body.dark-theme .wave-timer[b-gyy76wol5g] {
    --wave-sky-top: #1e3a8a;
    --wave-sky-bottom: #1e293b;
}

@media (hover: hover) {
    .wave-timer:hover[b-gyy76wol5g] { transform: scale(1.02); }
}

.wave-timer-container[b-gyy76wol5g] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wave-svg[b-gyy76wol5g] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--wave-water-top) 40%, transparent));
}

.wave-sun[b-gyy76wol5g] {
    transition: transform var(--pomo-dur-slow) var(--pomo-ease-progress);
    filter: drop-shadow(0 0 10px color-mix(in oklab, var(--wave-sun-mid) 60%, transparent));
}

.wave-sun-rays[b-gyy76wol5g] { animation: pomo-spin 30s linear infinite; transform-origin: 0 0; }

.wave-water-level[b-gyy76wol5g],
.wave-water-group[b-gyy76wol5g] {
    transition: transform var(--pomo-dur-slow) var(--pomo-ease-progress),
                opacity var(--pomo-dur-slow) var(--pomo-ease-progress);
}

.wave-surface[b-gyy76wol5g] {
    animation: pomo-wave-pan var(--pomo-dur-ambient) linear infinite;
}

.wave-bubble[b-gyy76wol5g] {
    animation: wave-bubble-rise-b-gyy76wol5g 3s var(--pomo-ease-ambient) infinite;
    opacity: 0;
}
.bubble-1[b-gyy76wol5g] { animation-delay: 0s; }
.bubble-2[b-gyy76wol5g] { animation-delay: 0.8s; }
.bubble-3[b-gyy76wol5g] { animation-delay: 1.6s; }
.bubble-4[b-gyy76wol5g] { animation-delay: 2.4s; }

@keyframes wave-bubble-rise-b-gyy76wol5g {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-35px); opacity: 0; }
}

.wave-time-text[b-gyy76wol5g],
.wave-phase-text[b-gyy76wol5g] {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 768px) {
    .wave-timer-container[b-gyy76wol5g] { width: clamp(280px, 90vw, 380px); }
}
@media (max-width: 480px) {
    .wave-timer-container[b-gyy76wol5g] { width: 260px; height: 260px; }
}
/* /Components/Pages/PomodoroHistory.razor.rz.scp.css */
.history-container[b-dtkb5i1mq8] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.history-header[b-dtkb5i1mq8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #ddd);
}

.history-header h1[b-dtkb5i1mq8] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1a1b40);
}

.btn-back[b-dtkb5i1mq8] {
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary, #5c6bc0);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-back:hover[b-dtkb5i1mq8] {
        background: var(--accent-secondary, #3f51b5);
        transform: translateY(-1px);
    }
}

/* Stats Section */
.stats-section[b-dtkb5i1mq8] {
    margin-bottom: 3rem;
}

.section-title[b-dtkb5i1mq8] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    display: flex;
    align-items: center;
    color: var(--text-primary, #1a1b40);
}

.stats-grid[b-dtkb5i1mq8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-dtkb5i1mq8] {
    background: white;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.2s;
}

@media (hover: hover) {
    .stat-card:hover[b-dtkb5i1mq8] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
}

.stat-icon[b-dtkb5i1mq8] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.stat-value[b-dtkb5i1mq8] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary, #5c6bc0);
    margin-bottom: 0.25rem;
}

.stat-label[b-dtkb5i1mq8] {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    font-weight: 600;
}

/* Sessions Section */
.sessions-section[b-dtkb5i1mq8] {
    margin-top: 3rem;
}

.sessions-list[b-dtkb5i1mq8] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.date-group[b-dtkb5i1mq8] {
    background: white;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 12px;
    overflow: hidden;
}

.date-header[b-dtkb5i1mq8] {
    background: var(--card-bg, #f9f9f9);
    padding: 1rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary, #1a1b40);
    border-bottom: 1px solid var(--border-color, #ddd);
}

.sessions-for-date[b-dtkb5i1mq8] {
    display: flex;
    flex-direction: column;
}

.session-card[b-dtkb5i1mq8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #ddd);
    transition: all 0.2s;
    cursor: pointer;
}

.session-card:last-child[b-dtkb5i1mq8] {
    border-bottom: none;
}

@media (hover: hover) {
    .session-card:hover[b-dtkb5i1mq8] {
        background: var(--hover-bg, #f5f5f5);
    }
}

.session-card.completed[b-dtkb5i1mq8] {
    opacity: 1;
}

.session-card.interrupted[b-dtkb5i1mq8] {
    opacity: 0.7;
}

.session-icon[b-dtkb5i1mq8] {
    font-size: 2rem;
    min-width: 50px;
    text-align: center;
}

.session-details[b-dtkb5i1mq8] {
    flex: 1;
}

.session-type[b-dtkb5i1mq8] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #1a1b40);
    margin-bottom: 0.25rem;
}

.session-task[b-dtkb5i1mq8] {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin-bottom: 0.5rem;
}

.session-meta[b-dtkb5i1mq8] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.session-meta .time[b-dtkb5i1mq8],
.session-meta .duration[b-dtkb5i1mq8] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.session-status[b-dtkb5i1mq8] {
    margin-left: auto;
}

.status-badge[b-dtkb5i1mq8] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.completed[b-dtkb5i1mq8] {
    background: #d4edda;
    color: #155724;
}

.status-badge.interrupted[b-dtkb5i1mq8] {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.pending[b-dtkb5i1mq8] {
    background: #fff3cd;
    color: #856404;
}

/* Empty State */
.empty-state[b-dtkb5i1mq8] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-dtkb5i1mq8] {
    font-size: 4rem;
    color: var(--border-color, #ddd);
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-dtkb5i1mq8] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-dtkb5i1mq8] {
    color: var(--text-secondary, #666);
    margin: 0 0 1.5rem 0;
}

.btn-primary[b-dtkb5i1mq8] {
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary, #5c6bc0);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-primary:hover[b-dtkb5i1mq8] {
        background: var(--accent-secondary, #3f51b5);
    }
}

/* Loading Spinner */
.spinner-border[b-dtkb5i1mq8] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-primary[b-dtkb5i1mq8] {
    color: var(--accent-primary, #5c6bc0) !important;
}

/* Dark Mode */
:global(.dark-theme) .history-container[b-dtkb5i1mq8] {
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #444;
    --card-bg: #2a2a3e;
    --hover-bg: #363650;
}

:global(.dark-theme) .stat-card[b-dtkb5i1mq8],
:global(.dark-theme) .date-group[b-dtkb5i1mq8],
:global(.dark-theme) .session-card[b-dtkb5i1mq8] {
    background: #1e1e2e;
}

:global(.dark-theme) .date-header[b-dtkb5i1mq8] {
    background: #2a2a3e;
}

@media (hover: hover) {
    :global(.dark-theme) .session-card:hover[b-dtkb5i1mq8] {
        background: #363650;
    }
}

:global(.dark-theme) .status-badge.completed[b-dtkb5i1mq8] {
    background: #1e4620;
    color: #7dffb3;
}

:global(.dark-theme) .status-badge.interrupted[b-dtkb5i1mq8] {
    background: #4a1c1c;
    color: #ff9999;
}

:global(.dark-theme) .status-badge.pending[b-dtkb5i1mq8] {
    background: #4a3c1c;
    color: #ffd699;
}

@media (max-width: 768px) {
    .history-container[b-dtkb5i1mq8] {
        padding: 1rem;
    }

    .stats-grid[b-dtkb5i1mq8] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .history-header[b-dtkb5i1mq8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .history-header h1[b-dtkb5i1mq8] {
        font-size: 1.5rem;
    }

    .section-title[b-dtkb5i1mq8] {
        font-size: 1.25rem;
    }

    .session-card[b-dtkb5i1mq8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .session-status[b-dtkb5i1mq8] {
        margin-left: 0;
        align-self: flex-start;
    }

    .session-meta[b-dtkb5i1mq8] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .history-container[b-dtkb5i1mq8] {
        padding: 0.75rem;
    }

    .stats-grid[b-dtkb5i1mq8] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-dtkb5i1mq8] {
        padding: 1rem;
    }

    .stat-icon[b-dtkb5i1mq8] {
        font-size: 2rem;
    }

    .stat-value[b-dtkb5i1mq8] {
        font-size: 1.5rem;
    }

    .history-header h1[b-dtkb5i1mq8] {
        font-size: 1.25rem;
    }

    .btn-back[b-dtkb5i1mq8] {
        padding: 0.5rem 1rem;
        width: 100%;
        justify-content: center;
    }

    .date-header[b-dtkb5i1mq8] {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .session-card[b-dtkb5i1mq8] {
        padding: 0.75rem 1rem;
    }

    .session-icon[b-dtkb5i1mq8] {
        font-size: 1.5rem;
        min-width: 40px;
    }

    .session-type[b-dtkb5i1mq8] {
        font-size: 0.9rem;
    }

    .status-badge[b-dtkb5i1mq8] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* Skeleton loading */
.skeleton-loading[b-dtkb5i1mq8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
}

.skeleton-loading > [aria-hidden][b-dtkb5i1mq8] {
    display: contents;
}

.skeleton-stats-row[b-dtkb5i1mq8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

[b-dtkb5i1mq8] .skeleton-stat-card {
    align-items: center;
    text-align: center;
    gap: 0.5rem;
}

[b-dtkb5i1mq8] .skeleton-session-row {
    padding: 0.75rem 1rem;
}

.skeleton-session-inner[b-dtkb5i1mq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 576px) {
    .skeleton-stats-row[b-dtkb5i1mq8] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-container[b-xqpg2wg5ww] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.privacy-header[b-xqpg2wg5ww] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-xqpg2wg5ww] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-xqpg2wg5ww] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.privacy-content[b-xqpg2wg5ww] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.privacy-section[b-xqpg2wg5ww] {
    margin-bottom: 2.5rem;
}

.privacy-section:last-of-type[b-xqpg2wg5ww] {
    margin-bottom: 0;
}

.privacy-section h2[b-xqpg2wg5ww] {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.privacy-section h3[b-xqpg2wg5ww] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.privacy-section p[b-xqpg2wg5ww] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.privacy-section ul[b-xqpg2wg5ww] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.privacy-section li[b-xqpg2wg5ww] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.privacy-section a[b-xqpg2wg5ww] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .privacy-section a:hover[b-xqpg2wg5ww] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.privacy-section strong[b-xqpg2wg5ww] {
    color: var(--text-primary);
    font-weight: 600;
}

.privacy-footer[b-xqpg2wg5ww] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.privacy-footer p[b-xqpg2wg5ww] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    font-style: italic;
}

@media (max-width: 768px) {
    .privacy-container[b-xqpg2wg5ww] {
        padding: 1rem;
    }

    .page-title[b-xqpg2wg5ww] {
        font-size: 2rem;
    }

    .privacy-content[b-xqpg2wg5ww] {
        padding: 1.5rem;
    }

    .privacy-section h2[b-xqpg2wg5ww] {
        font-size: 1.5rem;
    }

    .privacy-section h3[b-xqpg2wg5ww] {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .privacy-container[b-xqpg2wg5ww] {
        padding: 0.75rem;
    }

    .page-title[b-xqpg2wg5ww] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-xqpg2wg5ww] {
        font-size: 0.875rem;
    }

    .privacy-content[b-xqpg2wg5ww] {
        padding: 1rem;
        border-radius: 12px;
    }

    .privacy-section h2[b-xqpg2wg5ww] {
        font-size: 1.25rem;
    }

    .privacy-section h3[b-xqpg2wg5ww] {
        font-size: 1rem;
    }

    .privacy-section p[b-xqpg2wg5ww],
    .privacy-section li[b-xqpg2wg5ww] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/TaskListShared.razor.rz.scp.css */
.shared-tasklist-container[b-605nmhnlgr] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

.loading-state[b-605nmhnlgr],
.error-state[b-605nmhnlgr] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-state h2[b-605nmhnlgr],
.error-state h2[b-605nmhnlgr] {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.loading-state p[b-605nmhnlgr],
.error-state p[b-605nmhnlgr] {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2rem;
}

.error-message[b-605nmhnlgr] {
    font-size: 1rem;
}

.tasklist-preview-card[b-605nmhnlgr] {
    background: var(--card-bg, #ffffff);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.tasklist-color-bar[b-605nmhnlgr] {
    height: 6px;
    width: 100%;
}

.tasklist-preview-content[b-605nmhnlgr] {
    padding: 2rem;
}

.tasklist-preview-content h1[b-605nmhnlgr] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #111827);
}

.tasklist-preview-description[b-605nmhnlgr] {
    font-size: 1.125rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.tasklist-preview-meta[b-605nmhnlgr] {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 0.5rem;
}

.meta-item[b-605nmhnlgr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary, #6b7280);
}

.meta-item .bi[b-605nmhnlgr] {
    font-size: 1.25rem;
    color: var(--primary, #6366f1);
}

.preview-actions[b-605nmhnlgr] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-lg[b-605nmhnlgr] {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
}

.btn[b-605nmhnlgr] {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.spinner-border-sm[b-605nmhnlgr] {
    width: 1rem;
    height: 1rem;
    border-width: 0.125rem;
}

@media (max-width: 768px) {
    .shared-tasklist-container[b-605nmhnlgr] {
        padding: 1rem;
    }

    .tasklist-preview-content[b-605nmhnlgr] {
        padding: 1.5rem;
    }

    .tasklist-preview-content h1[b-605nmhnlgr] {
        font-size: 1.5rem;
    }

    .preview-actions[b-605nmhnlgr] {
        flex-direction: column;
    }
}

/* Skeleton loading */
[b-605nmhnlgr] .skeleton-preview-card {
    max-width: 420px;
    margin: 0 auto;
    gap: 0.875rem;
    align-items: flex-start;
}
/* /Components/Pages/Tasks.razor.rz.scp.css */
/* ===== Scope bridges for extracted child components =====
   Child component markup doesn't get the parent's scope attribute.
   Wrapper divs (.kanban-view-scope, .list-view-scope, .completed-view-scope, .canvas-view-scope)
   use display:contents so they don't affect layout. Parent CSS uses ::deep
   to style child component elements through these wrappers. */
.kanban-view-scope[b-9tevoc9plc],
.list-view-scope[b-9tevoc9plc],
.completed-view-scope[b-9tevoc9plc],
.canvas-view-scope[b-9tevoc9plc] {
    display: contents;
}

/* Wrapper to capture clicks on margin areas for closing dropdowns */
.tasks-page-wrapper[b-9tevoc9plc] {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tasks-page-wrapper.kanban-active[b-9tevoc9plc],
.tasks-page-wrapper.canvas-active[b-9tevoc9plc] {
    overflow: hidden;
}

/* ===== Outer layout: sidebar vs tabs mode ===== */

.tasks-outer-layout[b-9tevoc9plc] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.tasks-outer-layout.tabs-mode[b-9tevoc9plc] {
    flex-direction: column;
}

/* Sidebar width custom properties for viewport-level content centering */
.tasks-outer-layout.sidebar-mode[b-9tevoc9plc] {
    --sidebar-current-width: 260px;
}

.tasks-outer-layout.sidebar-mode.sidebar-collapsed[b-9tevoc9plc] {
    --sidebar-current-width: 52px;
}

.tasks-outer-layout.sidebar-mode .tasks-container[b-9tevoc9plc] {
    flex: 1;
    min-width: 0;
    /* Compensate for sidebar: add right padding that mirrors sidebar+left-padding so
       margin:auto on inner max-width elements centers content relative to the viewport.
       Scales from 1rem (narrow) → sidebar+1rem (wide, at viewport >= sidebar*2+1400px). */
    padding-right: clamp(1rem, calc(50vw - 700px + 1rem), calc(var(--sidebar-current-width) + 1rem));
    transition: padding-right 0.25s ease;
}

/* Kanban board: disable edge-to-edge in sidebar mode (::deep to reach child component) */
.tasks-outer-layout.sidebar-mode[b-9tevoc9plc]  .kanban-board {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0.5rem 1rem;
}

/* Sidebar backdrop overlay (mobile) */
.sidebar-backdrop[b-9tevoc9plc] {
    display: none;
}

/* Mobile hamburger toggle for sidebar drawer (hidden by default, shown on mobile in sidebar mode) */
.btn-mobile-sidebar-toggle[b-9tevoc9plc] {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
    width: 100%;
    transition: background 0.15s;
}

.btn-mobile-sidebar-toggle .bi-list[b-9tevoc9plc] {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.mobile-sidebar-label[b-9tevoc9plc] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: hover) {
    .btn-mobile-sidebar-toggle:hover[b-9tevoc9plc] {
        background: var(--hover-bg);
    }
}

/* ===== Sidebar toggle button in tab bar ===== */

.btn-toggle-sidebar[b-9tevoc9plc] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-right: 0.25rem;
    transition: color 0.15s, background 0.15s;
}

@media (hover: hover) {
    .btn-toggle-sidebar:hover[b-9tevoc9plc] {
        color: var(--accent-primary);
        background: var(--hover-bg);
    }
}

/* Hide sidebar toggle on mobile (sidebar not supported) */
@media (max-width: 768px) {
    /* Hide desktop sidebar toggle on mobile */
    .btn-toggle-sidebar[b-9tevoc9plc] {
        display: none;
    }

    /* Show mobile hamburger trigger in sidebar mode */
    .tasks-outer-layout.sidebar-mode .btn-mobile-sidebar-toggle[b-9tevoc9plc] {
        display: flex;
    }

    /* Mobile: sidebar is overlay drawer, not inline flex */
    .tasks-outer-layout.sidebar-mode[b-9tevoc9plc] {
        flex-direction: column;
    }

    /* Mobile backdrop overlay */
    .tasks-outer-layout.sidebar-mode.sidebar-open .sidebar-backdrop[b-9tevoc9plc] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
    }
}

.tasks-container[b-9tevoc9plc] {
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
}

.tasks-page-wrapper.kanban-active .tasks-container[b-9tevoc9plc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-right: 1rem; /* override sidebar-mode clamp — kanban is full-width */
}

.kanban-active .tasks-content[b-9tevoc9plc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Canvas view needs the same flex chain as kanban so the height cascade reaches
   .canvas-viewport, but it also wants edge-to-edge layout (no 1rem padding) and
   it owns its own scroll/pan, so .tasks-content clips overflow. Without these
   rules the .tasks-container computed its natural height — cards clipped off the
   bottom at 1080p, gaps appeared at 1440p. */
.tasks-page-wrapper.canvas-active .tasks-container[b-9tevoc9plc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.canvas-active .tasks-content[b-9tevoc9plc] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* Tab scroll wrapper */
.task-list-tabs-wrapper[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.tab-scroll-btn[b-9tevoc9plc] {
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    z-index: 10;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Show buttons only when there's overflow */
.task-list-tabs-wrapper.has-overflow .tab-scroll-btn[b-9tevoc9plc] {
    display: flex;
}

/* Add margin for scroll buttons and floating add button when there's overflow */
.task-list-tabs-wrapper.has-overflow[b-9tevoc9plc] {
    margin-left: 0;
    margin-right: 40px; /* Space for floating add button only */
}

/* Left margin only when left scroll button is visible (not at start) */
.task-list-tabs-wrapper.has-overflow:not(.at-start)[b-9tevoc9plc] {
    margin-left: 40px;
}

/* Right margin for right scroll button + floating add button (not at end) */
.task-list-tabs-wrapper.has-overflow:not(.at-end)[b-9tevoc9plc] {
    margin-right: 80px; /* Space for right scroll button (40px) + floating add button (40px) */
}

@media (hover: hover) {
    .tab-scroll-btn:hover:not(.disabled)[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--text-primary);
        border-color: var(--text-secondary);
    }
}

.tab-scroll-btn:active:not(.disabled)[b-9tevoc9plc] {
    transform: translateY(-50%) scale(0.95);
}

/* Disabled state for buttons at edges - specificity must match .has-overflow rule */
.task-list-tabs-wrapper.has-overflow .tab-scroll-btn.disabled[b-9tevoc9plc] {
    display: none;
}

.tab-scroll-left[b-9tevoc9plc] {
    left: -40px;
}

.tab-scroll-right[b-9tevoc9plc] {
    right: -40px;
}

.task-list-tabs[b-9tevoc9plc] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.task-list-tabs[b-9tevoc9plc]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.filter-tab[b-9tevoc9plc] {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    max-width: 200px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.filter-tab .tab-name[b-9tevoc9plc] {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: hover) {
    .filter-tab:hover[b-9tevoc9plc] {
        color: var(--text-primary);
        background: var(--hover-bg, #f3f4f6);
    }
}

.filter-tab.active[b-9tevoc9plc] {
    color: var(--primary-color, #6366f1);
    border-bottom-color: var(--primary-color, #6366f1);
}

/* Reduced padding only for tabs with menu button (not Inbox) */
.filter-tab.active:has(.tab-menu-btn)[b-9tevoc9plc] {
    padding-right: 0.5rem;
}

/* Tab wrapper for positioning dropdown */
.filter-tab-wrapper[b-9tevoc9plc] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Three-dot menu button inside active tab */
.tab-menu-btn[b-9tevoc9plc] {
    padding: 0.125rem 0.25rem;
    margin-left: 0.25rem;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .tab-menu-btn:hover[b-9tevoc9plc] {
        background: rgba(99, 102, 241, 0.2);
        color: var(--accent-primary, #6366f1);
    }
}

.filter-tab.active .tab-menu-btn[b-9tevoc9plc] {
    color: var(--primary-color, #6366f1);
}

@media (hover: hover) {
    .filter-tab.active .tab-menu-btn:hover[b-9tevoc9plc] {
        background: rgba(99, 102, 241, 0.25);
    }
}

/* Tab dropdown menu - using fixed to escape overflow:hidden parent */
.tab-dropdown-menu[b-9tevoc9plc] {
    position: fixed;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    z-index: 9999;
    overflow: hidden;
    opacity: 0; /* Hide initially to prevent flicker */
    transition: opacity 0.15s ease-in-out;
}

.tab-dropdown-menu .dropdown-item[b-9tevoc9plc] {
    width: 100%;
    padding: 0.65rem 1rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .tab-dropdown-menu .dropdown-item:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.tab-dropdown-menu .dropdown-item.text-danger[b-9tevoc9plc] {
    color: var(--danger, #ef4444);
}

@media (hover: hover) {
    .tab-dropdown-menu .dropdown-item.text-danger:hover[b-9tevoc9plc] {
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Highlight tab when section is dragged over it */
.filter-tab.section-drop-target[b-9tevoc9plc] {
    background: var(--primary-color, #6366f1);
    color: white;
    border-bottom-color: var(--primary-color, #6366f1);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Highlight tab when card is dragged over it (green for card) */
.filter-tab.card-drop-target[b-9tevoc9plc] {
    background: var(--success-color, #10b981) !important;
    color: white !important;
    border-bottom-color: var(--success-color, #10b981) !important;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Tab drag-drop styles */
/* Tab wrapper drag styles */
.filter-tab-wrapper[b-9tevoc9plc] {
    cursor: grab;
}

.filter-tab-wrapper:active[b-9tevoc9plc] {
    cursor: grabbing;
}

/* Tab wrapper being dragged - original element hidden */
.filter-tab-wrapper.tab-dragging[b-9tevoc9plc] {
    opacity: 0 !important;
    pointer-events: none;
}

/* Prevent drop settle animation on the dragged tab wrapper */
.filter-tab-wrapper.tab-drop-settle[b-9tevoc9plc] {
    transition: none !important;
}

/* Transition for sliding tab wrappers during drag */
.filter-tab-wrapper.tab-shifting[b-9tevoc9plc] {
    transition: transform 0.2s ease;
}

.filter-tab-container[b-9tevoc9plc] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.inline-edit-tab-input[b-9tevoc9plc] {
    background: var(--input-bg);
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    padding: 0 0.25rem;
    font-weight: 500;
    font-size: inherit;
    color: var(--text-primary);
    width: 120px;
    height: 1.5em;
    line-height: 1.5;
    box-sizing: border-box;
    margin: 0;
}

.inline-edit-tab-input:focus[b-9tevoc9plc] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.tab-menu-container[b-9tevoc9plc] {
    position: relative;
    display: flex;
    align-items: center;
}

.tab-menu-button[b-9tevoc9plc] {
    padding: 0.25rem 0.5rem;
    background: none;
    color: var(--text-secondary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1rem;
    opacity: 0.7;
}

@media (hover: hover) {
    .tab-menu-button:hover[b-9tevoc9plc] {
        background: var(--hover-bg);
        color: var(--text-primary);
        opacity: 1;
    }
}


.dropdown-item[b-9tevoc9plc] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border-light);
}

.dropdown-item:last-child[b-9tevoc9plc] {
    border-bottom: none;
}

@media (hover: hover) {
    .dropdown-item:hover[b-9tevoc9plc] {
        background: var(--hover-bg);
    }
}

.dropdown-item.text-danger[b-9tevoc9plc] {
    color: #ef4444;
}

.text-muted[b-9tevoc9plc] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.btn-danger[b-9tevoc9plc] {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-danger:hover[b-9tevoc9plc] {
        background: #dc2626;
    }
}

.btn-add-list[b-9tevoc9plc] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    border-radius: 0.375rem;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-add-list:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
        background: var(--hover-bg, #f3f4f6);
    }
}

/* Hide inline "New List" button when there's overflow */
.task-list-tabs-wrapper.has-overflow .btn-add-list[b-9tevoc9plc] {
    display: none;
}

/* Floating add button - shown only when tabs overflow */
.btn-add-list-floating[b-9tevoc9plc] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -80px;
}

.task-list-tabs-wrapper.has-overflow .btn-add-list-floating[b-9tevoc9plc] {
    display: flex;
}

@media (hover: hover) {
    .btn-add-list-floating:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
        border-color: var(--primary-color, #6366f1);
    }
}

.section-header[b-9tevoc9plc] {
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.btn-share-list[b-9tevoc9plc] {
    background: var(--card-bg, white);
    color: var(--text-secondary);
    border: 2px solid var(--border-color, #e5e7eb);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media (hover: hover) {
    .btn-share-list:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
        border-color: var(--primary-color, #6366f1);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    }
}

/* Use global .btn-action-primary from app.css for consistent styling */
.btn-add-task-inline[b-9tevoc9plc] {
    /* Inherits from .btn-action-primary in app.css */
}

/* Secondary action button - outline style matching project theme */
.btn-action-secondary[b-9tevoc9plc] {
    padding: 0.6rem 1.2rem;
    background: var(--card-bg, white);
    color: var(--text-secondary, #6b7280);
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-action-secondary:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
        border-color: var(--primary-color, #6366f1);
        background: rgba(99, 102, 241, 0.05);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    }
}

.btn-action-secondary:active[b-9tevoc9plc] {
    transform: translateY(0);
    box-shadow: none;
}

.btn-plan-goal .bi-stars[b-9tevoc9plc] {
    color: var(--primary-color, #6366f1);
}

.section-menu-container[b-9tevoc9plc] {
    position: relative;
    display: flex;
    align-items: center;
}

.section-menu-button[b-9tevoc9plc] {
    width: 42px;
    height: 42px;
    padding: 0;
    background: var(--card-bg, white);
    color: var(--text-secondary);
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .section-menu-button:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
        border-color: var(--primary-color, #6366f1);
        background: rgba(99, 102, 241, 0.05);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    }
}

.section-menu-button:active[b-9tevoc9plc] {
    transform: translateY(0);
    box-shadow: none;
}

.section-dropdown-menu[b-9tevoc9plc] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    z-index: 1000;
    overflow: hidden;
}

.completed-section-header[b-9tevoc9plc] {
    margin-bottom: 1rem;
}

.completed-section-header h3[b-9tevoc9plc] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    margin: 0;
}

.completed-tasks-list[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Constrain list-view content to readable width */
.tasks-list[b-9tevoc9plc],
.completed-section-header[b-9tevoc9plc],
.completed-tasks-list[b-9tevoc9plc],
.skeleton-task-content[b-9tevoc9plc] {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Deadline Sections */
.deadline-section[b-9tevoc9plc] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.deadline-section:last-of-type[b-9tevoc9plc] {
    margin-bottom: 0;
}

.deadline-section-title[b-9tevoc9plc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.overdue-section .deadline-section-title[b-9tevoc9plc] {
    color: #ef4444;
}

.today-section .deadline-section-title[b-9tevoc9plc] {
    color: #f59e0b;
}

.tomorrow-section .deadline-section-title[b-9tevoc9plc] {
    color: #10b981;
}

.task-deadline-time[b-9tevoc9plc] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.task-list-label[b-9tevoc9plc] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-right: 0.5rem;
}

.list-color-dot[b-9tevoc9plc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.tasks-list[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-item-container[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.task-item-wrapper[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
}

.nested-subtasks[b-9tevoc9plc] {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 2px solid var(--border-color, #e5e7eb);
    padding-left: 1rem;
}

/* Unified Task Card - used for both list and kanban views */
.task-card[b-9tevoc9plc] {
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    border-left: 3px solid var(--task-color, transparent);
}

@media (hover: hover) {
    .task-card:hover[b-9tevoc9plc] {
        border-color: var(--primary-color, #6366f1);
        border-left-color: var(--task-color, var(--primary-color, #6366f1));
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    }
}

.task-card.favorite[b-9tevoc9plc] {
    background: var(--warning-light, #fef3c7);
}

.task-card.completed[b-9tevoc9plc] {
    opacity: 0.6;
}

.task-card.dragging[b-9tevoc9plc] {
    opacity: 0.4;
    transform: scale(0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color, #6366f1);
    z-index: 100;
}

/* Task Card Header - checkbox + title */
.task-card-header[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.task-card-checkbox[b-9tevoc9plc] {
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0s;
}

@media (hover: hover) {
    .task-card:hover .task-card-checkbox[b-9tevoc9plc] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .task-card-checkbox[b-9tevoc9plc] {
        opacity: 1;
        visibility: visible;
    }
}

.task-card-checkbox span[b-9tevoc9plc] {
    border-radius: 3px;
}

@media (hover: hover) {
    .task-card-checkbox:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
    }
}

.task-card-title[b-9tevoc9plc] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.43;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .task-card:hover .task-card-title[b-9tevoc9plc] {
        transform: translateX(1.375rem);
    }
}

.task-card-title.completed[b-9tevoc9plc] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Task Card Metadata */
.task-card-meta[b-9tevoc9plc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.6875rem;
    margin-top: 2px;
}

.task-card-meta .due-date[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color, #3b82f6);
    padding: 0 0.125rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    position: relative;
}

@media (hover: hover) {
    .task-card-meta .due-date:hover[b-9tevoc9plc] {
        background: rgba(59, 130, 246, 0.1);
    }
}

.task-card-meta .due-date.overdue[b-9tevoc9plc] {
    color: #ef4444;
}

.task-card-meta .due-date.due-today[b-9tevoc9plc] {
    color: #f59e0b;
}

.task-card-meta .priority[b-9tevoc9plc] {
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.task-card-meta .priority.priority-medium[b-9tevoc9plc] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.task-card-meta .priority.priority-high[b-9tevoc9plc] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.task-card-meta .priority.priority-critical[b-9tevoc9plc] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-card-meta .subtasks[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

.task-card-meta .description-indicator[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

/* List view task card pickers (CalendarPicker and PriorityPicker) */
[b-9tevoc9plc] .list-due-date-picker .calendar-picker-btn,
[b-9tevoc9plc] .list-priority-picker .priority-picker-btn {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease;
}

[b-9tevoc9plc] .list-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-9tevoc9plc] .list-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-9tevoc9plc] .list-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-9tevoc9plc] .list-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-9tevoc9plc] .list-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-9tevoc9plc] .list-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-9tevoc9plc] .list-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-9tevoc9plc] .list-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.75rem;
}

@media (hover: hover) {
    [b-9tevoc9plc] .list-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Ensure dropdown panels appear above other elements */
[b-9tevoc9plc] .list-due-date-picker .calendar-picker-panel,
[b-9tevoc9plc] .list-priority-picker .priority-picker-panel {
    z-index: 1000;
}

/* Task Card Actions (for list view) */
.task-card-actions[b-9tevoc9plc] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
    padding-left: 0.5rem;
}

.task-card-actions button[b-9tevoc9plc] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.375rem;
    border-radius: 4px;
}

@media (hover: hover) {
    .task-card-actions button:hover[b-9tevoc9plc] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

@media (hover: hover) {
    .task-card-actions .btn-favorite:hover[b-9tevoc9plc] {
        color: #fbbf24;
    }
}

.task-card-actions .btn-favorite .bi-star-fill[b-9tevoc9plc] {
    color: #fbbf24;
}

@media (hover: hover) {
    .task-card-actions .btn-plan:hover[b-9tevoc9plc] {
        color: #10b981;
    }
}

@media (hover: hover) {
    .task-card-actions .btn-edit:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
    }
}

@media (hover: hover) {
    .task-card-actions .btn-delete:hover[b-9tevoc9plc] {
        color: var(--danger-color, #ef4444);
    }
}

/* List View Layout - horizontal with actions */
.task-card.list-view[b-9tevoc9plc] {
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
}

.task-card.list-view .task-card-content[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}


/* Legacy .task-item support - alias to .task-card */
.task-item[b-9tevoc9plc] {
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    position: relative;
    border-left: 3px solid var(--task-color, transparent);
}

@media (hover: hover) {
    .task-item:hover[b-9tevoc9plc] {
        border-color: var(--primary-color, #6366f1);
        border-left-color: var(--task-color, var(--primary-color, #6366f1));
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    }
}

/* QuickAddRow wrapper for spacing */
.quick-add-wrapper[b-9tevoc9plc] {
    margin-bottom: 1rem;
}

.task-item.dragging[b-9tevoc9plc] {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.drag-handle[b-9tevoc9plc] {
    cursor: grab;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    opacity: 0.4;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

@media (hover: hover) {
    .task-item:hover .drag-handle[b-9tevoc9plc] {
        opacity: 0.8;
    }
}

@media (hover: hover) {
    .drag-handle:hover[b-9tevoc9plc] {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary-color, #6366f1);
        opacity: 1;
    }
}

.drag-handle:active[b-9tevoc9plc] {
    cursor: grabbing;
    background: rgba(99, 102, 241, 0.15);
    opacity: 1;
}

.task-item.dragging .drag-handle[b-9tevoc9plc] {
    opacity: 1;
    color: var(--primary-color, #6366f1);
}

.drop-zone[b-9tevoc9plc] {
    height: 8px;
    margin: 0;
    transition: all 0.2s ease;
    position: relative;
    pointer-events: auto;
    border-radius: 4px;
}

.drop-zone-above[b-9tevoc9plc],
.drop-zone-below[b-9tevoc9plc] {
    height: 8px;
    margin: 0;
}

.nested-subtasks .drop-zone[b-9tevoc9plc] {
    margin-left: 0;
}

@media (hover: hover) {
    .drop-zone:hover[b-9tevoc9plc] {
        background: rgba(99, 102, 241, 0.05);
    }
}

.drop-zone.active[b-9tevoc9plc] {
    height: 20px;
    margin: 4px 0;
    background: rgba(99, 102, 241, 0.15);
    border: 2px dashed var(--primary-color, #6366f1);
}

.drop-zone.active[b-9tevoc9plc]::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: var(--primary-color, #6366f1);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
}

.task-item.drag-over-child[b-9tevoc9plc] {
    background: rgba(99, 102, 241, 0.12);
    border-color: var(--primary-color, #6366f1);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
    transform: scale(1.02);
}

.task-item.drag-over-child[b-9tevoc9plc]::after {
    content: 'Drop to make subtask';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--primary-color, #6366f1);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 10;
    white-space: nowrap;
    opacity: 0.95;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.task-item.favorite[b-9tevoc9plc] {
    background: var(--warning-light, #fef3c7);
}

.task-item.completed[b-9tevoc9plc] {
    opacity: 0.6;
}

.task-item.completed .task-title[b-9tevoc9plc] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.task-checkbox[b-9tevoc9plc] {
    font-size: 1.5rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.task-main-info[b-9tevoc9plc] {
    flex: 1;
    min-width: 0;
}

.task-title-section[b-9tevoc9plc] {
    flex: 1;
}

.task-title[b-9tevoc9plc] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.task-description[b-9tevoc9plc] {
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.task-meta-inline[b-9tevoc9plc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.task-priority[b-9tevoc9plc] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.priority-medium[b-9tevoc9plc] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.priority-high[b-9tevoc9plc] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.priority-critical[b-9tevoc9plc] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-due-date.overdue[b-9tevoc9plc] {
    color: var(--danger-color, #ef4444);
    font-weight: 600;
}

.task-due-date.due-soon[b-9tevoc9plc] {
    color: var(--warning-color, #f59e0b);
    font-weight: 600;
}

.task-actions[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.btn-favorite-task[b-9tevoc9plc],
.btn-plan-task[b-9tevoc9plc],
.btn-edit-task[b-9tevoc9plc],
.btn-delete-task[b-9tevoc9plc] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.5rem;
}

@media (hover: hover) {
    .btn-favorite-task:hover[b-9tevoc9plc] {
        color: #fbbf24;
        transform: scale(1.1);
    }
}

.btn-favorite-task .bi-star-fill[b-9tevoc9plc] {
    color: #fbbf24;
}

@media (hover: hover) {
    .btn-plan-task:hover[b-9tevoc9plc] {
        color: #10b981;
        transform: scale(1.1);
    }
}

@media (hover: hover) {
    .btn-edit-task:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
        transform: scale(1.1);
    }
}

@media (hover: hover) {
    .btn-delete-task:hover[b-9tevoc9plc] {
        color: var(--danger-color, #ef4444);
        transform: scale(1.1);
    }
}

.loading-container[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.loading-text[b-9tevoc9plc] {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.empty-state[b-9tevoc9plc] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-icon[b-9tevoc9plc] {
    font-size: 4rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 1rem;
}

/* Add Task Row Styles - Now handled by shared QuickAddRow component */

/* Color Picker - Matches Habits.razor.css */
.color-picker[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.color-option[b-9tevoc9plc] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .color-option:hover[b-9tevoc9plc] {
        transform: scale(1.1);
    }
}

.color-option.selected[b-9tevoc9plc] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--card-bg);
}

.custom-color-picker-wrapper[b-9tevoc9plc] {
    position: relative;
    width: 40px;
    height: 40px;
}

.custom-color-input[b-9tevoc9plc] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-color-button[b-9tevoc9plc] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.2s;
}

.custom-color-button span[b-9tevoc9plc] {
    color: white;
    font-size: 1.25rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-9tevoc9plc] {
        border-color: var(--text-primary);
        transform: scale(1.1);
    }
}

/* Modal Styles - Matches Habits page */
.modal-overlay[b-9tevoc9plc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-9tevoc9plc] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal-header[b-9tevoc9plc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title-row[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.modal-task-checkbox[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .modal-task-checkbox:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
    }
}

.modal-task-checkbox .bi-check-square-fill[b-9tevoc9plc] {
    color: var(--success-color, #10b981);
}

.modal-header h3[b-9tevoc9plc] {
    margin: 0;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editable modal title */
.modal-title-editable[b-9tevoc9plc] {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) {
    .modal-title-editable:hover[b-9tevoc9plc] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

.modal-title-editable.completed[b-9tevoc9plc] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.modal-title-input[b-9tevoc9plc] {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    color: var(--text-primary);
    background: var(--input-bg, white);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Modal Header Actions (Calendar/Priority pickers) */
.modal-header-actions[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.btn-close[b-9tevoc9plc] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

@media (hover: hover) {
    .btn-close:hover[b-9tevoc9plc] {
        background: var(--hover-bg);
    }
}

.modal-body[b-9tevoc9plc] {
    padding: 1.5rem;
}

.form-group[b-9tevoc9plc] {
    margin-bottom: 1.5rem;
}

.form-group label[b-9tevoc9plc] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.modal-footer[b-9tevoc9plc] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.modal-footer-left[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
}

.modal-footer-right[b-9tevoc9plc] {
    display: flex;
    gap: 1rem;
}

.btn-primary[b-9tevoc9plc], .btn-secondary[b-9tevoc9plc] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-9tevoc9plc] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-9tevoc9plc] {
        background: var(--accent-secondary);
    }
}

.btn-secondary[b-9tevoc9plc] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-9tevoc9plc] {
        background: var(--hover-bg);
    }
}

.form-input[b-9tevoc9plc] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.form-input:focus[b-9tevoc9plc] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

textarea.form-input[b-9tevoc9plc] {
    resize: vertical;
    font-family: inherit;
}

.modal-content-large[b-9tevoc9plc] {
    max-width: 700px;
}

/* Task Detail Modal - Quick Edit Properties */
.task-properties-row[b-9tevoc9plc] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.property-group[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.property-label[b-9tevoc9plc] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.priority-button-group[b-9tevoc9plc] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.priority-btn[b-9tevoc9plc] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    background: var(--card-bg, white);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .priority-btn:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        border-color: var(--text-secondary);
    }
}

.priority-btn.active[b-9tevoc9plc] {
    color: white;
    border-color: transparent;
}

.priority-btn.priority-low.active[b-9tevoc9plc] {
    background: #6b7280;
}

.priority-btn.priority-medium.active[b-9tevoc9plc] {
    background: #f59e0b;
}

.priority-btn.priority-high.active[b-9tevoc9plc] {
    background: #ef4444;
}

.priority-btn.priority-critical.active[b-9tevoc9plc] {
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.due-date-picker[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.due-date-picker .date-input[b-9tevoc9plc] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    min-width: 140px;
    max-width: 160px;
}

.btn-clear-date[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-clear-date:hover[b-9tevoc9plc] {
        background: #fee2e2;
        border-color: #fecaca;
        color: #dc2626;
    }
}

/* Responsive adjustments for task properties */
@media (max-width: 480px) {
    .task-properties-row[b-9tevoc9plc] {
        flex-direction: column;
        gap: 1rem;
    }

    .priority-button-group[b-9tevoc9plc] {
        flex-wrap: wrap;
    }

    .priority-btn[b-9tevoc9plc] {
        flex: 1;
        min-width: 70px;
        text-align: center;
    }
}

/* Batch Add Tasks Modal */
.batch-add-modal[b-9tevoc9plc] {
    max-width: 500px;
}

.batch-task-preview[b-9tevoc9plc] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 0.5rem;
    margin-top: 1rem;
    background: var(--bg-secondary, #f9fafb);
}

.batch-task-item[b-9tevoc9plc] {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.batch-task-item:not(:last-child)[b-9tevoc9plc] {
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.batch-task-more[b-9tevoc9plc] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Subtasks Section */
.subtasks-section[b-9tevoc9plc] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.subtasks-header[b-9tevoc9plc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.subtasks-header h4[b-9tevoc9plc] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.add-subtask-row[b-9tevoc9plc] {
    cursor: pointer;
    border: 2px dashed var(--border-color, #e5e7eb) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(79, 70, 229, 0.03) 100%);
    margin-top: 0.5rem;
}

@media (hover: hover) {
    .add-subtask-row:hover[b-9tevoc9plc] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);
        border-color: var(--primary-color, #6366f1) !important;
    }
}

.add-subtask-prompt[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    width: 100%;
}

@media (hover: hover) {
    .add-subtask-row:hover .add-icon[b-9tevoc9plc] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon[b-9tevoc9plc] {
        opacity: 1;
    }
}

.add-subtask-form[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.subtask-input[b-9tevoc9plc] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.subtask-input:focus[b-9tevoc9plc] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-subtask-actions[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
}

.subtasks-list[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subtask-item[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    transition: all 0.2s;
}

@media (hover: hover) {
    .subtask-item:hover[b-9tevoc9plc] {
        background: var(--hover-bg);
    }
}

.subtask-item.completed[b-9tevoc9plc] {
    opacity: 0.6;
}

.subtask-checkbox[b-9tevoc9plc] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
}

@media (hover: hover) {
    .subtask-checkbox:hover[b-9tevoc9plc] {
        color: var(--accent-primary);
    }
}

.subtask-title[b-9tevoc9plc] {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.subtask-title.completed[b-9tevoc9plc] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.btn-delete-subtask[b-9tevoc9plc] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
    opacity: 0;
}

@media (hover: hover) {
    .subtask-item:hover .btn-delete-subtask[b-9tevoc9plc] {
        opacity: 1;
    }
}

@media (hover: none) {
    .btn-delete-subtask[b-9tevoc9plc] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .btn-delete-subtask:hover[b-9tevoc9plc] {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
    }
}

.no-subtasks-message[b-9tevoc9plc] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.task-checkbox[b-9tevoc9plc] {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

@media (hover: hover) {
    .task-checkbox:hover[b-9tevoc9plc] {
        color: var(--accent-primary);
    }
}

/* Nested Subtasks in Task List */
.task-item-container[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
}

.nested-subtasks[b-9tevoc9plc] {
    margin-left: 2.5rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Plan button states */
.btn-plan-task.generating[b-9tevoc9plc] {
    color: #10b981;
}

.btn-plan-task.plan-ready[b-9tevoc9plc] {
    color: #10b981;
}

.btn-plan-task.plan-ready .bi-diagram-3-fill[b-9tevoc9plc] {
    color: #10b981;
}

/* Ping animation for plan ready state */
.btn-plan-task.plan-ping[b-9tevoc9plc] {
    position: relative;
    animation: pulse-icon-b-9tevoc9plc 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-plan-task.plan-ping[b-9tevoc9plc]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Use fixed square dimensions for perfect circle */
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #10b981;
    opacity: 0.5;
    animation: ping-ring-b-9tevoc9plc 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes ping-ring-b-9tevoc9plc {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    75%, 100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes pulse-icon-b-9tevoc9plc {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Synchronized spinner animation - use global keyframe to ensure all spinners animate in sync */
.spinner-border[b-9tevoc9plc],
.spinner-border-sm[b-9tevoc9plc] {
    animation: spinner-border-sync-b-9tevoc9plc 0.75s linear infinite !important;
    animation-delay: 0s !important;
}

@keyframes spinner-border-sync-b-9tevoc9plc {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Layout Toggle in Modal */
.layout-toggle[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-secondary, #f3f4f6);
    padding: 0.25rem;
    border-radius: 8px;
}

.layout-option[b-9tevoc9plc] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .layout-option:hover[b-9tevoc9plc] {
        color: var(--text-primary);
        background: var(--card-bg, white);
    }
}

.layout-option.active[b-9tevoc9plc] {
    background: var(--card-bg, white);
    color: var(--primary-color, #6366f1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-text[b-9tevoc9plc] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

/* Section-based Layout */
.section-group[b-9tevoc9plc] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-group:last-of-type[b-9tevoc9plc] {
    margin-bottom: 0;
}

.section-title[b-9tevoc9plc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
    border-left: 3px solid var(--border-color, #e5e7eb);
}

.not-started-section .section-title[b-9tevoc9plc] {
    border-left-color: #6b7280;
    color: #6b7280;
}

.in-progress-section .section-title[b-9tevoc9plc] {
    border-left-color: #3b82f6;
    color: #3b82f6;
}

.completed-section .section-title[b-9tevoc9plc] {
    border-left-color: #10b981;
    color: #10b981;
}

.custom-section .section-title[b-9tevoc9plc] {
    color: var(--text-secondary);
}

/* View Type Toggle (Icon Buttons) */
.view-type-toggle[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
}

.view-type-option[b-9tevoc9plc] {
    width: 48px;
    height: 48px;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--card-bg, white);
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .view-type-option:hover[b-9tevoc9plc] {
        border-color: var(--primary-color, #6366f1);
        color: var(--primary-color, #6366f1);
    }
}

.view-type-option.active[b-9tevoc9plc] {
    border-color: var(--primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color, #6366f1);
}

/* Kanban Board Styles */
.kanban-board[b-9tevoc9plc] {
    display: flex;
    gap: 1rem;
    overflow: auto hidden;
    padding: 0.5rem 1rem;
    flex: 1;
    min-height: 400px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
}

.kanban-column[b-9tevoc9plc] {
    flex: 0 0 300px;
    min-width: 280px;
    max-width: 320px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    transition: all 0.2s ease;
}

/* Task drag-over state for column */
.kanban-column.drag-over[b-9tevoc9plc] {
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px var(--primary-color, #6366f1);
}

/* Make entire column draggable */
.kanban-column[draggable="true"][b-9tevoc9plc] {
    cursor: grab;
}

.kanban-column[draggable="true"]:active[b-9tevoc9plc] {
    cursor: grabbing;
}

/* Section being dragged - hide original since we show a floating clone via JS */
.kanban-column.section-dragging[b-9tevoc9plc] {
    opacity: 0;
    pointer-events: none;
}

.kanban-column.wip-exceeded .kanban-column-header[b-9tevoc9plc] {
    background: rgba(239, 68, 68, 0.1);
}

.kanban-column-header[b-9tevoc9plc] {
    padding: 0.625rem 0.75rem;
    border-top: 3px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    background: var(--card-bg, white);
    user-select: none;
    -webkit-user-select: none;
}

.column-title-row[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.column-title[b-9tevoc9plc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

@media (hover: hover) {
    .column-title:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
    }
}

.section-title-input[b-9tevoc9plc] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    background: var(--input-bg, white);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
    min-width: 0;
}

/* Section Menu */
.section-menu-wrapper[b-9tevoc9plc] {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-section-add[b-9tevoc9plc],
.btn-section-menu[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-section-add:hover[b-9tevoc9plc],
    .btn-section-menu:hover[b-9tevoc9plc] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

@media (hover: hover) {
    .btn-section-add:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
    }
}

/* Kanban section menu uses fixed positioning to escape overflow:hidden on parent containers.
   JS (sectionMenu.positionDropdown) sets the exact top/left after render.
   opacity:0 prevents flicker at the default position before JS runs. */
.section-menu-wrapper .section-dropdown-menu[b-9tevoc9plc] {
    position: fixed;
    top: auto;
    right: auto;
    min-width: 200px;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    z-index: 9999;
    margin-top: 0;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.section-dropdown-menu .dropdown-item[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .section-dropdown-menu .dropdown-item:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.section-dropdown-menu .dropdown-item.text-danger[b-9tevoc9plc] {
    color: #ef4444;
}

@media (hover: hover) {
    .section-dropdown-menu .dropdown-item.text-danger:hover[b-9tevoc9plc] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.section-dropdown-menu .dropdown-divider[b-9tevoc9plc] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Move to submenu */
.dropdown-item-with-submenu[b-9tevoc9plc] {
    position: relative;
}

.dropdown-item-with-submenu .dropdown-item .bi-chevron-right[b-9tevoc9plc] {
    font-size: 0.75rem;
    opacity: 0.6;
}

.move-to-submenu[b-9tevoc9plc] {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 220px;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    z-index: 1001;
    margin-left: 4px;
}

.submenu-search[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 0.25rem;
}

.submenu-search .bi-search[b-9tevoc9plc] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.submenu-search-input[b-9tevoc9plc] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.submenu-search-input[b-9tevoc9plc]::placeholder {
    color: var(--text-secondary);
}

.submenu-list[b-9tevoc9plc] {
    max-height: 200px;
    overflow-y: auto;
}

.submenu-item[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .submenu-item:hover:not(:disabled)[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.submenu-item.current[b-9tevoc9plc] {
    color: var(--primary-color, #6366f1);
    font-weight: 500;
}

.submenu-item:disabled[b-9tevoc9plc] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submenu-item .bi-check[b-9tevoc9plc] {
    color: var(--primary-color, #6366f1);
}

.column-count[b-9tevoc9plc] {
    color: var(--text-muted, #9ca3af);
    font-size: 0.8125rem;
    font-weight: 400;
}

.column-count.over-limit[b-9tevoc9plc] {
    color: #ef4444;
    font-weight: 600;
}

.kanban-column-body[b-9tevoc9plc] {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.375rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-height: 0;
    transition: padding-bottom 0.2s ease;
}

.kanban-column-body[b-9tevoc9plc]::-webkit-scrollbar {
    width: 6px;
}

.kanban-column-body[b-9tevoc9plc]::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-column-body[b-9tevoc9plc]::-webkit-scrollbar-thumb {
    background: var(--border-color, #e5e7eb);
    border-radius: 3px;
}

.kanban-column-body[b-9tevoc9plc]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #6b7280);
}

/* View More pagination button */
.kanban-view-more[b-9tevoc9plc] {
    padding: 0.5rem;
    text-align: center;
}

.btn-view-more[b-9tevoc9plc] {
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-view-more:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        border-color: var(--primary-color, #6366f1);
        color: var(--primary-color, #6366f1);
    }
}

/* List view pagination - reuse same button styles with list-specific wrapper */
.list-view-more[b-9tevoc9plc] {
    padding: 0.75rem 0;
    text-align: center;
}

.list-view-more .btn-view-more[b-9tevoc9plc] {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* Top Quick Add Row - always rendered for iOS keyboard focus */
.kanban-top-quick-add[b-9tevoc9plc] {
    padding: 0 0.375rem;
}

/* Collapsed state - hidden until expanded via "+" button */
.kanban-top-quick-add[b-9tevoc9plc]  .kanban-quick-add:not(.expanded) {
    display: none;
}

/* Expanded state - styled form with separator */
.kanban-top-quick-add[b-9tevoc9plc]  .kanban-quick-add.expanded {
    background: transparent;
    border: none;
    padding: 0;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 0.25rem;
    width: 100%;
    box-sizing: border-box;
}

.kanban-top-quick-add[b-9tevoc9plc]  .kanban-quick-add.expanded .add-form {
    background: var(--card-bg, white);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.kanban-column-footer[b-9tevoc9plc] {
    padding: 0.375rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, white);
    border-radius: 0 0 12px 12px;
    overflow: visible;
}

/* QuickAddRow inside Kanban columns */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .add-prompt {
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

@media (hover: hover) {
    .kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .add-prompt:hover {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

/* Kanban QuickAddRow form layout - stack vertically for narrow columns */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .add-form {
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.375rem;
    width: 100%;
    box-sizing: border-box;
}

/* Name input wrapper takes full width in kanban */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .name-input-wrapper {
    width: 100%;
    flex: none;
}

/* Textarea fills the wrapper width and can grow */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .quick-add-input {
    width: 100%;
    padding: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.875rem;
    border-radius: 6px;
    box-sizing: border-box;
    min-width: 100%;
    height: auto;
    min-height: 2.25rem;
    max-height: 8rem;
    overflow: hidden;
}

/* Task options go on their own row */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .task-options-buttons {
    width: 100%;
    justify-content: flex-start;
}

/* Dropdown panels in kanban footer must use fixed positioning to escape overflow:hidden.
   Use auto positioning (like section-menu-wrapper) to keep panel at natural flow position. */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .task-option-panel {
    position: fixed;
    z-index: 9999;
    /* auto positioning keeps panel at its natural flow position */
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin-top: 4px;
}

/* Hide description hint in narrow kanban columns - use Shift+Enter keyboard shortcut */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .description-hint {
    display: none;
}

/* Description mode container in kanban */
.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .description-mode-container {
    padding: 0;
}

.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .description-mode-footer {
    flex-wrap: wrap;
    gap: 0.375rem;
}

.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .add-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
    width: 100%;
}

.kanban-column-footer[b-9tevoc9plc]  .kanban-quick-add .add-actions button {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
}

/* Add Section Column */
.kanban-add-section-column[b-9tevoc9plc] {
    flex: 0 0 280px;
    min-width: 260px;
    max-width: 300px;
    background: transparent;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    min-height: auto;
    max-height: 150px;
}

/* QuickAddRow inside Add Section Column */
.kanban-add-section-column[b-9tevoc9plc]  .kanban-add-section {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}

.kanban-add-section-column[b-9tevoc9plc]  .kanban-add-section .add-prompt {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    justify-content: center;
}

@media (hover: hover) {
    .kanban-add-section-column[b-9tevoc9plc]  .kanban-add-section .add-prompt:hover {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.kanban-add-section-column[b-9tevoc9plc]  .kanban-add-section .add-form {
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.kanban-add-section-column[b-9tevoc9plc]  .kanban-add-section .name-input-wrapper {
    width: 100%;
}

.kanban-add-section-column[b-9tevoc9plc]  .kanban-add-section .quick-add-input {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 8px;
    width: 100%;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, white);
}

.kanban-add-section-column[b-9tevoc9plc]  .kanban-add-section .quick-add-input:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-add-section[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    width: 100%;
}

@media (hover: hover) {
    .btn-add-section:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.add-section-form[b-9tevoc9plc] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-name-input[b-9tevoc9plc] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--card-bg, white);
    color: var(--text-primary);
}

.section-name-input:focus[b-9tevoc9plc] {
    outline: none;
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-section-buttons[b-9tevoc9plc] {
    display: flex;
    gap: 0.5rem;
}

.btn-save-section[b-9tevoc9plc],
.btn-cancel-section[b-9tevoc9plc] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-save-section[b-9tevoc9plc] {
    background: var(--primary-color, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-save-section:hover[b-9tevoc9plc] {
        background: var(--primary-hover, #4f46e5);
    }
}

.btn-cancel-section[b-9tevoc9plc] {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .btn-cancel-section:hover[b-9tevoc9plc] {
        background: var(--border-color, #d1d5db);
    }
}

.btn-add-kanban-task[b-9tevoc9plc] {
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-add-kanban-task:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.kanban-card[b-9tevoc9plc] {
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 4px 12px;
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 3px solid var(--task-color, transparent);
}

@media (hover: hover) {
    .kanban-card:hover[b-9tevoc9plc] {
        border-color: var(--primary-color, #6366f1);
        border-left-color: var(--task-color, var(--primary-color, #6366f1));
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    }
}

.kanban-card:active[b-9tevoc9plc] {
    cursor: grabbing;
}

/* Old HTML5 drag style - kept for backwards compatibility */
.kanban-card.dragging[b-9tevoc9plc] {
    opacity: 0.4;
    transform: scale(0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color, #6366f1);
    z-index: 100;
}

/* Helper element (floating clone during drag) */
#card-drag-helper[b-9tevoc9plc] {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.95;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1);
    transform: rotate(-2deg);
    cursor: grabbing;
}

/* Mobile Touch Support - allow scrolling by default, JS adds touch-drag-active during drag */
.kanban-card[b-9tevoc9plc],
.kanban-column-header[b-9tevoc9plc],
.filter-tab-wrapper[b-9tevoc9plc],
.section-title[b-9tevoc9plc] {
    touch-action: pan-x pan-y;
}

/* Applied by JS when drag is active (after hold completes) */
.touch-drag-active[b-9tevoc9plc] {
    touch-action: none !important;
}

.kanban-card.favorite[b-9tevoc9plc] {
    background: var(--warning-light, #fef3c7);
}

/* Kanban card wrapper for drop indicators */
.kanban-card-wrapper[b-9tevoc9plc] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Drop indicator line above/below cards */
.kanban-drop-indicator[b-9tevoc9plc] {
    height: 0;
    background: var(--primary-color, #6366f1);
    border-radius: 2px;
    margin: 0;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.15s ease;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

.kanban-drop-indicator.visible[b-9tevoc9plc] {
    height: 3px;
    margin: 2px 0;
    opacity: 1;
    transform: scaleX(1);
    animation: pulse-drop-indicator-b-9tevoc9plc 1s ease-in-out infinite;
}

@keyframes pulse-drop-indicator-b-9tevoc9plc {
    0%, 100% {
        box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
    }
    50% {
        box-shadow: 0 0 16px rgba(99, 102, 241, 0.9);
    }
}

/* Drag over column highlight */
.kanban-column-body.drag-over[b-9tevoc9plc] {
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    outline: 2px dashed var(--primary-color, #6366f1);
    outline-offset: -2px;
}

/* Empty column drop zone */
.kanban-empty-drop-zone[b-9tevoc9plc] {
    min-height: 60px;
    border: 2px dashed transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kanban-empty-drop-zone.drag-over[b-9tevoc9plc] {
    border-color: var(--primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.08);
}

.kanban-card-header[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.card-checkbox[b-9tevoc9plc] {
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0s;
}

@media (hover: hover) {
    .kanban-card:hover .card-checkbox[b-9tevoc9plc] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .card-checkbox[b-9tevoc9plc] {
        opacity: 1;
        visibility: visible;
    }
}

.card-checkbox span[b-9tevoc9plc] {
    border-radius: 3px;
}

@media (hover: hover) {
    .card-checkbox:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
    }
}

.card-title[b-9tevoc9plc] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.43;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .kanban-card:hover .card-title[b-9tevoc9plc] {
        transform: translateX(1.375rem);
    }
}

.card-title.completed[b-9tevoc9plc] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.kanban-card-meta[b-9tevoc9plc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-top: 2px;
}

.card-due-date[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color, #3b82f6);
    cursor: pointer;
    padding: 0 0.125rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    position: relative;
    font-size: 0.6875rem;
}

@media (hover: hover) {
    .card-due-date:hover[b-9tevoc9plc] {
        background: rgba(59, 130, 246, 0.1);
    }
}

.card-due-date.overdue[b-9tevoc9plc] {
    color: #ef4444;
}

@media (hover: hover) {
    .card-due-date.overdue:hover[b-9tevoc9plc] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.card-due-date.due-today[b-9tevoc9plc] {
    color: #f59e0b;
}

@media (hover: hover) {
    .card-due-date.due-today:hover[b-9tevoc9plc] {
        background: rgba(245, 158, 11, 0.1);
    }
}

/* Hidden date input for date picker */
.card-due-date input[type="date"][b-9tevoc9plc] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.card-priority[b-9tevoc9plc] {
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.card-priority.priority-medium[b-9tevoc9plc] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.card-priority.priority-high[b-9tevoc9plc] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.card-priority.priority-critical[b-9tevoc9plc] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.card-subtasks[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

.card-description-indicator[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

/* Card metadata pickers (CalendarPicker and PriorityPicker in Kanban cards) */
[b-9tevoc9plc] .card-meta-picker {
    position: relative;
}

[b-9tevoc9plc] .card-meta-picker .calendar-picker-btn,
[b-9tevoc9plc] .card-meta-picker .priority-picker-btn {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease;
}

[b-9tevoc9plc] .card-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-9tevoc9plc] .card-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-9tevoc9plc] .card-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-9tevoc9plc] .card-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-9tevoc9plc] .card-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-9tevoc9plc] .card-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-9tevoc9plc] .card-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-9tevoc9plc] .card-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.6875rem;
}

@media (hover: hover) {
    [b-9tevoc9plc] .card-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Position dropdown panels from card pickers - use fixed positioning to escape overflow clipping */
[b-9tevoc9plc] .card-meta-picker .calendar-picker-panel,
[b-9tevoc9plc] .card-meta-picker .priority-picker-panel {
    position: fixed;
    z-index: 9999;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin-top: 4px;
}

.kanban-empty-placeholder[b-9tevoc9plc] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

.kanban-empty-placeholder .bi[b-9tevoc9plc] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.kanban-empty-placeholder p[b-9tevoc9plc] {
    margin: 0;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .kanban-column[b-9tevoc9plc] {
        flex: 0 0 260px;
        min-width: 240px;
    }

}


/* Tab View Icons and Shared Indicator */
.tab-view-icon[b-9tevoc9plc] {
    font-size: 0.875rem;
    opacity: 0.7;
}

.shared-indicator[b-9tevoc9plc] {
    font-size: 0.75rem;
    color: var(--primary-color, #6366f1);
    opacity: 0.8;
}

/* Owner-only Settings Notice */
.owner-only-notice[b-9tevoc9plc] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.owner-only-notice .bi[b-9tevoc9plc] {
    color: #3b82f6;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Disabled Settings */
.disabled-setting[b-9tevoc9plc] {
    opacity: 0.6;
    pointer-events: none;
}

.disabled-setting label[b-9tevoc9plc] {
    color: var(--text-secondary);
}

.disabled-setting .form-input[b-9tevoc9plc],
.disabled-setting .view-type-option[b-9tevoc9plc],
.disabled-setting .layout-option[b-9tevoc9plc],
.disabled-setting .color-option[b-9tevoc9plc] {
    cursor: not-allowed;
    background: var(--bg-tertiary, #f3f4f6);
}

/* ==========================================
   List View Drag-and-Drop Styles
   ========================================== */

/* Section header draggable - make it grabable */
.section-title-draggable[b-9tevoc9plc] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 6px;
}

@media (hover: hover) {
    .section-title-draggable:hover[b-9tevoc9plc] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.03));
    }
}

.section-title-draggable:active[b-9tevoc9plc] {
    cursor: grabbing;
}

/* Section group during drag - hidden since we show a floating clone */
.section-group.section-dragging[b-9tevoc9plc] {
    opacity: 0;
    pointer-events: none;
}

/* Section group as drop target */
.section-group.drag-target[b-9tevoc9plc] {
    background: rgba(99, 102, 241, 0.05);
    border: 2px dashed var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0.5rem;
    margin: -0.5rem;
}

/* List view task wrapper for drop indicators */
.list-task-wrapper[b-9tevoc9plc] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* List view drop indicator - horizontal line between tasks */
.list-drop-indicator[b-9tevoc9plc] {
    height: 0;
    background: var(--primary-color, #6366f1);
    border-radius: 2px;
    margin: 0;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.15s ease;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

.list-drop-indicator.visible[b-9tevoc9plc] {
    height: 3px;
    margin: 4px 0;
    opacity: 1;
    transform: scaleX(1);
    animation: pulse-drop-indicator-b-9tevoc9plc 1s ease-in-out infinite;
}

/* Task card list view dragging state */
.task-card.list-view.dragging[b-9tevoc9plc] {
    opacity: 0.4;
    transform: scale(0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color, #6366f1);
    z-index: 100;
}

/* Section group drag-over state - highlight when task dragged over */
.section-group.list-drag-over[b-9tevoc9plc] {
    background: rgba(99, 102, 241, 0.03);
    border-radius: 8px;
}

/* List view section header with add button */
.section-header-row[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.section-header-row .section-title[b-9tevoc9plc] {
    flex: 1;
    margin: 0;
}

.list-section-add-btn[b-9tevoc9plc] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    opacity: 0.6;
}

@media (hover: hover) {
    .list-section-add-btn:hover[b-9tevoc9plc] {
        color: var(--primary-color, #6366f1);
        background: rgba(99, 102, 241, 0.08);
        opacity: 1;
    }
}

@media (hover: hover) {
    .section-group:hover .list-section-add-btn[b-9tevoc9plc] {
        opacity: 1;
    }
}

@media (hover: none) {
    .list-section-add-btn[b-9tevoc9plc] {
        opacity: 1;
        visibility: visible;
    }
}

/* List view quick add row inside sections - always rendered for iOS keyboard focus */
.list-section-quick-add[b-9tevoc9plc] {
    padding: 0 0.25rem;
}

/* Collapsed state - hidden until expanded via "+" button */
.list-section-quick-add[b-9tevoc9plc]  .list-quick-add:not(.expanded) {
    display: none;
}

/* Expanded state */
.list-section-quick-add[b-9tevoc9plc]  .list-quick-add.expanded {
    margin-top: 0.5rem;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.list-section-quick-add[b-9tevoc9plc]  .list-quick-add.expanded .add-form {
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.list-section-quick-add[b-9tevoc9plc]  .list-quick-add .name-input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.list-section-quick-add[b-9tevoc9plc]  .list-quick-add .quick-add-input {
    padding: 0.75rem 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
}

.list-section-quick-add[b-9tevoc9plc]  .list-quick-add .quick-add-input:focus {
    outline: none;
}

.list-section-quick-add[b-9tevoc9plc]  .list-quick-add .add-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0 0.25rem 0.25rem;
}

.list-section-quick-add[b-9tevoc9plc]  .list-quick-add .add-actions button {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

/* Kanban Per-Section Completed Tasks */
.kanban-completed-section[b-9tevoc9plc] {
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin-top: auto;
}

.kanban-completed-header[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

@media (hover: hover) {
    .kanban-completed-header:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.kanban-completed-label[b-9tevoc9plc] {
    font-weight: 500;
}

.kanban-completed-count[b-9tevoc9plc] {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: auto;
}

.kanban-completed-body[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.kanban-card.completed[b-9tevoc9plc] {
    opacity: 0.7;
    background: var(--bg-secondary, #f9fafb);
    cursor: pointer;
}

@media (hover: hover) {
    .kanban-card.completed:hover[b-9tevoc9plc] {
        opacity: 0.85;
    }
}

/* Mobile responsiveness - Tasks page */
@media (max-width: 768px) {
    .tasks-container[b-9tevoc9plc] {
        padding: 1rem;
    }

    .task-list-tabs-wrapper[b-9tevoc9plc] {
        margin-bottom: 1rem;
    }

    .filter-tab[b-9tevoc9plc] {
        padding: 0.5rem 1rem;
        max-width: 160px;
    }

    .section-header[b-9tevoc9plc] {
        margin-top: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .btn-action-secondary[b-9tevoc9plc],
    .btn-share-list[b-9tevoc9plc] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .kanban-board[b-9tevoc9plc] {
        padding: 0.75rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        justify-content: flex-start;
        min-height: 350px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .tasks-container[b-9tevoc9plc] {
        padding: 0.5rem;
    }

    .task-list-tabs-wrapper[b-9tevoc9plc] {
        gap: 0.25rem;
    }

    .filter-tab[b-9tevoc9plc] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        max-width: 120px;
    }

    .btn-add-list[b-9tevoc9plc] {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }

    .btn-add-list-floating[b-9tevoc9plc] {
        width: 28px;
        height: 28px;
        right: -70px;
    }

    .task-list-tabs-wrapper.has-overflow[b-9tevoc9plc] {
        margin-right: 35px; /* Floating add button only */
    }

    .task-list-tabs-wrapper.has-overflow:not(.at-end)[b-9tevoc9plc] {
        margin-right: 70px;
    }

    .section-header[b-9tevoc9plc] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .section-header > *[b-9tevoc9plc] {
        width: 100%;
        justify-content: center;
    }

    .btn-action-secondary[b-9tevoc9plc],
    .btn-share-list[b-9tevoc9plc],
    .section-menu-button[b-9tevoc9plc] {
        width: 100%;
    }

    .kanban-board[b-9tevoc9plc] {
        padding: 0.5rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        min-height: 300px;
    }

    .kanban-column[b-9tevoc9plc] {
        flex: 0 0 240px;
        min-width: 220px;
        max-width: 260px;
    }

    .kanban-column-header[b-9tevoc9plc] {
        padding: 0.5rem;
    }

    .column-title[b-9tevoc9plc] {
        font-size: 0.8125rem;
    }

    .kanban-column-body[b-9tevoc9plc] {
        padding: 0.25rem;
    }

    .kanban-card[b-9tevoc9plc],
    .task-card[b-9tevoc9plc] {
        padding: 4px 8px;
    }

    .card-title[b-9tevoc9plc],
    .task-card-title[b-9tevoc9plc] {
        font-size: 0.8125rem;
    }

    .kanban-add-section-column[b-9tevoc9plc] {
        flex: 0 0 200px;
        min-width: 180px;
    }

    /* Modal styles on mobile */
    .modal-content[b-9tevoc9plc] {
        max-width: 100%;
        margin: 0.5rem;
    }

    .modal-header[b-9tevoc9plc] {
        padding: 1rem;
    }

    .modal-body[b-9tevoc9plc] {
        padding: 1rem;
    }

    .modal-footer[b-9tevoc9plc] {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer-left[b-9tevoc9plc],
    .modal-footer-right[b-9tevoc9plc] {
        width: 100%;
        justify-content: center;
    }

    /* Task actions always visible on touch devices */
    .task-card-checkbox[b-9tevoc9plc],
    .card-checkbox[b-9tevoc9plc] {
        opacity: 1;
        transition: none;
    }

    .task-card .task-card-title[b-9tevoc9plc],
    .kanban-card .card-title[b-9tevoc9plc] {
        transform: translateX(1.375rem);
    }

    /* Delete button always visible on mobile */
    .btn-delete-subtask[b-9tevoc9plc] {
        opacity: 1;
    }
}

/* Task Action Menu (three-dot dropdown) */
.task-action-menu-container[b-9tevoc9plc] {
    position: relative;
    display: inline-flex;
}

.btn-task-menu[b-9tevoc9plc] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.375rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-task-menu:hover[b-9tevoc9plc] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.task-action-dropdown[b-9tevoc9plc] {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    z-index: 1000;
    padding: 0.5rem 0;
    overflow: hidden;
}

.task-action-dropdown .dropdown-item[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .task-action-dropdown .dropdown-item:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.task-action-dropdown .dropdown-item.text-danger[b-9tevoc9plc] {
    color: #ef4444;
}

@media (hover: hover) {
    .task-action-dropdown .dropdown-item.text-danger:hover[b-9tevoc9plc] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.task-action-dropdown .dropdown-divider[b-9tevoc9plc] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Favorite icon in dropdown */
.task-action-dropdown .favorite-icon[b-9tevoc9plc] {
    color: #fbbf24;
}

/* Plan menu item states */
.task-action-dropdown .dropdown-item.generating[b-9tevoc9plc] {
    opacity: 0.7;
}

.task-action-dropdown .dropdown-item.plan-ready[b-9tevoc9plc] {
    color: #10b981;
}

.task-action-dropdown .dropdown-item.plan-ready .bi-diagram-3-fill[b-9tevoc9plc] {
    color: #10b981;
}

/* Task List Badge (clickable pill - matches TaskDetailModal move-to-badge) */
.task-list-badge[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 160px;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: 0.5rem;
}

@media (hover: hover) {
    .task-list-badge:hover[b-9tevoc9plc] {
        color: var(--text-primary);
        background: var(--hover-bg, #e5e7eb);
        border-color: var(--accent-primary, #6366f1);
    }
}

.task-list-badge:focus[b-9tevoc9plc] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.task-list-badge .bi-kanban[b-9tevoc9plc],
.task-list-badge .bi-list-task[b-9tevoc9plc] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.task-list-badge-text[b-9tevoc9plc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   Long-press visual feedback for mobile touch drag
   ========================================== */

/* Pending hold state - subtle feedback indicating user should keep holding */
.drag-hold-pending[b-9tevoc9plc] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: scale(1.02);
    box-shadow: 0 0 0 2px var(--primary-color, #6366f1);
}

/* Hold complete - ready to drag, more prominent feedback */
.drag-hold-ready[b-9tevoc9plc] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Apply hold styles to specific draggable elements */
.kanban-card.drag-hold-pending[b-9tevoc9plc],
.kanban-column-header.drag-hold-pending[b-9tevoc9plc],
.section-title.drag-hold-pending[b-9tevoc9plc],
.filter-tab-wrapper.drag-hold-pending[b-9tevoc9plc] {
    /* Uses shared .drag-hold-pending styles */
}

.kanban-card.drag-hold-ready[b-9tevoc9plc],
.kanban-column-header.drag-hold-ready[b-9tevoc9plc],
.section-title.drag-hold-ready[b-9tevoc9plc],
.filter-tab-wrapper.drag-hold-ready[b-9tevoc9plc] {
    /* Uses shared .drag-hold-ready styles */
}

/* ==========================================
   Tag Filter Bar
   ========================================== */

/* Tag filter toggle button in tab bar */
/* Search toggle button */
.tab-bar-search-toggle[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    background: var(--card-bg, white);
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: all 0.2s;
    z-index: 5;
}

@media (hover: hover) {
    .tab-bar-search-toggle:hover[b-9tevoc9plc] {
        border-color: #3788d8;
        color: var(--text-primary);
    }
}

.tab-bar-search-toggle.active[b-9tevoc9plc] {
    border-color: #3788d8;
    background: rgba(55, 136, 216, 0.08);
    color: #3788d8;
}

.tab-bar-search-toggle.has-search[b-9tevoc9plc] {
    border-color: #3788d8;
    color: #3788d8;
}

.tab-bar-tag-toggle[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 36px;
    height: 36px;
    background: var(--card-bg, white);
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.5rem;
    transition: all 0.2s;
    z-index: 5;
}

@media (hover: hover) {
    .tab-bar-tag-toggle:hover[b-9tevoc9plc] {
        border-color: #3788d8;
        color: var(--text-primary);
    }
}

.tab-bar-tag-toggle.active[b-9tevoc9plc] {
    border-color: #3788d8;
    background: rgba(55, 136, 216, 0.08);
    color: #3788d8;
}

.tab-bar-tag-toggle.has-filters[b-9tevoc9plc] {
    border-color: #3788d8;
    color: #3788d8;
}

.tab-bar-tag-badge[b-9tevoc9plc] {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #3788d8;
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Tag filter pills wrapper (outer flex container) */
.tag-filter-pills-wrapper[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
}

/* Tag filter pills row (scrollable inner container) */
.tag-filter-pills-row[b-9tevoc9plc] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
}

.tag-filter-pills-row[b-9tevoc9plc]::-webkit-scrollbar {
    display: none;
}

/* Tag pill scroll buttons */
.tag-pill-scroll-btn[b-9tevoc9plc] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, white);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    padding: 0;
    font-size: 0.75rem;
}

@media (hover: hover) {
    .tag-pill-scroll-btn:hover[b-9tevoc9plc] {
        border-color: #3788d8;
        color: #3788d8;
        background: rgba(55, 136, 216, 0.05);
    }
}

.tag-filter-pills-wrapper.has-overflow .tag-pill-scroll-btn[b-9tevoc9plc] {
    display: flex;
}

.tag-filter-pills-wrapper.has-overflow .tag-pill-scroll-btn.disabled[b-9tevoc9plc] {
    display: none;
}

.tag-filter-pill[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--card-bg, white);
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 160px;
}

.tag-filter-pill-text[b-9tevoc9plc] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    display: inline-block;
}

@media (hover: hover) {
    .tag-filter-pill:hover[b-9tevoc9plc] {
        border-color: var(--tag-color, #6366f1);
        background: rgba(99, 102, 241, 0.05);
    }
}

.tag-filter-pill.selected[b-9tevoc9plc] {
    border-color: var(--tag-color, #6366f1);
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-primary);
}

.tag-filter-pill .tag-color-dot[b-9tevoc9plc] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-manage-btn[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--card-bg, white);
    border: 1.5px dashed var(--border-color, #e5e7eb);
    border-radius: 8px;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .tag-manage-btn:hover[b-9tevoc9plc] {
        border-color: #3788d8;
        border-style: solid;
        color: #3788d8;
    }
}

.clear-tag-filters[b-9tevoc9plc] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (hover: hover) {
    .clear-tag-filters:hover[b-9tevoc9plc] {
        color: #ef4444;
    }
}

/* Mobile responsive styles for tag filter bar */
@media (max-width: 576px) {
    .tab-bar-tag-toggle[b-9tevoc9plc] {
        width: 32px;
        height: 32px;
    }

    .tag-filter-pills-wrapper[b-9tevoc9plc] {
        gap: 0.375rem;
        padding: 0.375rem 0;
    }

    .tag-filter-pill[b-9tevoc9plc] {
        padding: 0.3125rem 0.625rem;
        font-size: 0.75rem;
    }

    .tag-filter-pill-text[b-9tevoc9plc] {
        max-width: 90px;
    }

    .tag-manage-btn[b-9tevoc9plc] {
        width: 28px;
        height: 28px;
    }

    .tag-pill-scroll-btn[b-9tevoc9plc] {
        display: none !important;
    }
}

/* Search bar */
.task-search-wrapper[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
}

.task-search-bar[b-9tevoc9plc] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.task-search-icon[b-9tevoc9plc] {
    position: absolute;
    left: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted, #9ca3af);
    pointer-events: none;
    z-index: 1;
}

.task-search-input[b-9tevoc9plc] {
    width: 100%;
    padding: 0.625rem 2.5rem 0.625rem 2.25rem;
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--input-bg, var(--card-bg, white));
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
    font-family: inherit;
}

.task-search-input:focus[b-9tevoc9plc] {
    outline: none;
    border-color: #3788d8;
    box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.1);
}

.task-search-input[b-9tevoc9plc]::placeholder {
    color: var(--text-muted, #9ca3af);
}

/* Hide native search clear button in favor of our own */
.task-search-input[b-9tevoc9plc]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.task-search-wrapper .btn-clear-search[b-9tevoc9plc] {
    position: absolute;
    right: 0.375rem;
    background: none;
    border: none;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    padding: 0.375rem;
    font-size: 1.125rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    min-width: 32px;
    min-height: 32px;
}

@media (hover: hover) {
    .task-search-wrapper .btn-clear-search:hover[b-9tevoc9plc] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--text-primary);
    }
}

.search-result-count[b-9tevoc9plc] {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--text-muted, #9ca3af);
    white-space: nowrap;
}

/* Mobile responsive styles for search */
@media (max-width: 576px) {
    .tab-bar-search-toggle[b-9tevoc9plc] {
        width: 32px;
        height: 32px;
    }

    .task-search-wrapper[b-9tevoc9plc] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    .search-result-count[b-9tevoc9plc] {
        text-align: right;
        font-size: 0.8125rem;
    }
}

/* Skeleton loading */
.skeleton-task-content[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
    /* Definite cross size so the skeleton can't collapse when .tasks-content
       becomes a flex column (kanban-active / canvas-active). Without this the
       auto margins from the .tasks-list group above disable flex-stretch. */
    width: 100%;
}

[b-9tevoc9plc] .skeleton-task-row {
    flex-direction: row;
    padding: 0.75rem 1rem;
}

.skeleton-task-inner[b-9tevoc9plc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Kanban loading skeleton — mirrors .kanban-board / .kanban-column (TasksKanbanView.razor.css) */
.skeleton-kanban-board[b-9tevoc9plc] {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    align-items: flex-start;
    width: 100%;
    overflow: hidden;
}

.skeleton-kanban-column[b-9tevoc9plc] {
    flex: 0 0 300px;
    max-width: 320px;
    background: var(--bg-secondary);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.skeleton-kanban-column-header[b-9tevoc9plc] {
    padding: 0.625rem 0.75rem;
    border-top: 3px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    background: var(--card-bg);
}

.skeleton-kanban-cards[b-9tevoc9plc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
.terms-container[b-clryzjdhjr] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.terms-header[b-clryzjdhjr] {
    text-align: center;
    margin-bottom: 3rem;
}

.page-title[b-clryzjdhjr] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.page-subtitle[b-clryzjdhjr] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.terms-content[b-clryzjdhjr] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.terms-section[b-clryzjdhjr] {
    margin-bottom: 2.5rem;
}

.terms-section:last-of-type[b-clryzjdhjr] {
    margin-bottom: 0;
}

.intro-section[b-clryzjdhjr] {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border-left: 4px solid var(--accent-primary);
}

.terms-section h2[b-clryzjdhjr] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-primary);
}

.terms-section h3[b-clryzjdhjr] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.terms-section p[b-clryzjdhjr] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.terms-section ul[b-clryzjdhjr] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.terms-section li[b-clryzjdhjr] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.terms-section a[b-clryzjdhjr] {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

@media (hover: hover) {
    .terms-section a:hover[b-clryzjdhjr] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.terms-section strong[b-clryzjdhjr] {
    color: var(--text-primary);
    font-weight: 600;
}

.important-notice[b-clryzjdhjr] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(239, 68, 68, 0.1);
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    margin: 1.5rem 0;
}

.important-notice > span[b-clryzjdhjr] {
    font-size: 1.5rem;
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.important-notice h3[b-clryzjdhjr] {
    color: #dc2626;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.important-notice p[b-clryzjdhjr] {
    color: var(--text-primary);
    font-size: 0.938rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.important-notice p:last-child[b-clryzjdhjr] {
    margin-bottom: 0;
}

.terms-footer[b-clryzjdhjr] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-light);
    text-align: center;
}

.terms-footer p[b-clryzjdhjr] {
    font-size: 1rem;
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .terms-container[b-clryzjdhjr] {
        padding: 1rem;
    }

    .page-title[b-clryzjdhjr] {
        font-size: 2rem;
    }

    .terms-content[b-clryzjdhjr] {
        padding: 1.5rem;
    }

    .terms-section h2[b-clryzjdhjr] {
        font-size: 1.25rem;
    }

    .terms-section h3[b-clryzjdhjr] {
        font-size: 1.063rem;
    }

    .terms-section p[b-clryzjdhjr],
    .terms-section li[b-clryzjdhjr] {
        font-size: 0.938rem;
    }

    .important-notice[b-clryzjdhjr] {
        flex-direction: column;
        padding: 1.25rem;
    }

    .important-notice > span[b-clryzjdhjr] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .terms-container[b-clryzjdhjr] {
        padding: 0.75rem;
    }

    .page-title[b-clryzjdhjr] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-clryzjdhjr] {
        font-size: 0.875rem;
    }

    .terms-content[b-clryzjdhjr] {
        padding: 1rem;
        border-radius: 12px;
    }

    .terms-section h2[b-clryzjdhjr] {
        font-size: 1.1rem;
    }

    .terms-section h3[b-clryzjdhjr] {
        font-size: 1rem;
    }

    .terms-section p[b-clryzjdhjr],
    .terms-section li[b-clryzjdhjr] {
        font-size: 0.875rem;
    }

    .important-notice[b-clryzjdhjr] {
        padding: 1rem;
    }

    .important-notice h3[b-clryzjdhjr] {
        font-size: 1rem;
    }

    .important-notice p[b-clryzjdhjr] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/Timeboxing.razor.rz.scp.css */
/* Timeboxing Page Styles */
.timeboxing-page[b-uogfkx2eth] {
    min-height: calc(100vh - 52px);
    background: var(--bg-primary);
    padding: 1rem 2rem 2rem;
}

.timeboxing-container[b-uogfkx2eth] {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 2rem;
    overflow: visible;
}

/* Main Content Grid - Flexbox Wrap for responsiveness */
.timeboxing-content[b-uogfkx2eth] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

/* Wrappers to control flex behavior */
.tasks-wrapper[b-uogfkx2eth] {
    flex: 1 1 350px; /* Grows, shrinks, basis 350px. Will wrap if container < ~350px*2 */
    min-width: 300px;
}

.grid-wrapper[b-uogfkx2eth] {
    flex: 100 1 450px; /* Basis matches min-width to delay wrapping */
    min-width: 450px; /* Wrap if it would shrink below 450px */
}

/* Responsive */
@media screen and (max-width: 768px) {
    .timeboxing-page[b-uogfkx2eth] {
        padding: 0.25rem 0.5rem 0.5rem;
        min-height: calc(100vh - 50px);
    }

    .timeboxing-container[b-uogfkx2eth] {
        padding: 1rem;
        border-radius: 0;
        box-shadow: none;
    }
    
    .timeboxing-content[b-uogfkx2eth] {
        gap: 1rem;
    }

    /* Force full width on mobile */
    .tasks-wrapper[b-uogfkx2eth], .grid-wrapper[b-uogfkx2eth] {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Extra small screens (360px min supported) */
@media screen and (max-width: 480px) {
    .timeboxing-page[b-uogfkx2eth] {
        padding: 0 0.25rem 0.25rem;
    }

    .timeboxing-container[b-uogfkx2eth] {
        padding: 0.5rem;
        border-radius: 0;
    }

    .timeboxing-content[b-uogfkx2eth] {
        gap: 0.75rem;
    }

    /* Allow horizontal scroll on very small screens if needed */
    .grid-wrapper[b-uogfkx2eth] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Print Styles */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm 10mm; /* Slightly reduced margins */
    }

    *[b-uogfkx2eth] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide nav and footer using their actual class names */
    .navbar-top[b-uogfkx2eth],
    .app-footer[b-uogfkx2eth],
    nav.navbar-top[b-uogfkx2eth],
    footer.app-footer[b-uogfkx2eth],
    .sidebar[b-uogfkx2eth] {
        display: none !important;
    }

    /* Clean up page layout */
    body[b-uogfkx2eth] {
        background: white;
        margin: 0;
        padding: 0;
    }

    .timeboxing-page[b-uogfkx2eth] {
        padding: 0;
        background: white;
        min-height: 0;
        width: 100%;
    }

    .timeboxing-container[b-uogfkx2eth] {
        box-shadow: none;
        padding: 0;
        max-width: 100%;
        width: 100%;
        border: none;
    }

    .timeboxing-content[b-uogfkx2eth] {
        display: flex !important; /* Force flex for print */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 15px; /* Reduced gap */
        align-items: flex-start;
        width: 100%;
    }
    
    .tasks-wrapper[b-uogfkx2eth] {
        width: 35% !important; /* Fixed width for tasks column */
        flex: 0 0 35% !important;
        display: block;
        min-width: 0 !important; /* Override min-width */
    }

    .grid-wrapper[b-uogfkx2eth] {
        width: 63% !important; /* Fixed width for grid column */
        flex: 0 0 63% !important;
        display: block;
        min-width: 0 !important; /* Override min-width */
        margin-top: 0;
    }
}

/* Task Modal Item Styles (used in ItemTemplate) */
.task-option-row[b-uogfkx2eth] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
    background: var(--input-bg);
    position: relative;
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.task-option-row:last-child[b-uogfkx2eth] {
    margin-bottom: 0;
}

.task-option-row.completed[b-uogfkx2eth] {
    opacity: 0.6;
}

.task-option-row.completed .task-option-text[b-uogfkx2eth] {
    text-decoration: line-through;
}

@media (hover: hover) {
    .task-option-row:hover[b-uogfkx2eth] {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
    }
}

.task-option-checkbox[b-uogfkx2eth] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .task-option-checkbox:hover[b-uogfkx2eth] {
        color: var(--accent-primary);
    }
}

.task-option-main[b-uogfkx2eth] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 1;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
}

.task-option-text[b-uogfkx2eth] {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.task-option-due[b-uogfkx2eth] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--hover-bg);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: 500;
}

.task-option-due.due-overdue[b-uogfkx2eth] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-weight: 600;
}

.task-option-due.due-today[b-uogfkx2eth] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-weight: 600;
}

.task-option-due.due-tomorrow[b-uogfkx2eth] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-weight: 600;
}

.task-option-actions[b-uogfkx2eth] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-shrink: 0;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.2s ease;
}

@media (hover: hover) {
    .task-option-row:hover .task-option-actions[b-uogfkx2eth] {
        max-width: 200px;
    }
}

.btn-favorite-modal-task[b-uogfkx2eth],
.btn-edit-modal-task[b-uogfkx2eth],
.btn-delete-modal-task[b-uogfkx2eth] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

@media (hover: hover) {
    .btn-favorite-modal-task:hover[b-uogfkx2eth] {
        color: #fbbf24;
        background: rgba(251, 191, 36, 0.1);
    }
}

.btn-favorite-modal-task .bi-star-fill[b-uogfkx2eth] {
    color: #fbbf24;
}

@media (hover: hover) {
    .btn-edit-modal-task:hover[b-uogfkx2eth] {
        color: var(--accent-primary);
        background: rgba(99, 102, 241, 0.1);
    }
}

@media (hover: hover) {
    .btn-delete-modal-task:hover[b-uogfkx2eth] {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Habit Modal Item Styles (used in ItemTemplate) */
.habit-option[b-uogfkx2eth] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
    position: relative;
    margin-bottom: 0.25rem;
}

.habit-option:last-child[b-uogfkx2eth] {
    margin-bottom: 0;
}

@media (hover: hover) {
    .habit-option:hover[b-uogfkx2eth] {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
        transform: translateX(4px);
    }
}

.habit-color-indicator[b-uogfkx2eth] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.habit-name[b-uogfkx2eth] {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    padding-right: 2rem;
}

.add-icon-overlay[b-uogfkx2eth] {
    position: absolute;
    right: 1rem;
    opacity: 0;
    font-size: 1.2rem;
    color: var(--accent-primary);
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .habit-option:hover .add-icon-overlay[b-uogfkx2eth] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon-overlay[b-uogfkx2eth] {
        opacity: 1;
    }
}

/* /Components/Pages/TimeboxingComponents/AddItemContent.razor.rz.scp.css */
.add-item-content[b-ndhrjesd1k] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Search and Filter Styles */
.search-filter-bar[b-ndhrjesd1k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.search-row[b-ndhrjesd1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-input-wrapper[b-ndhrjesd1k] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.search-input-wrapper i[b-ndhrjesd1k] {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.search-input[b-ndhrjesd1k] {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.search-input:focus[b-ndhrjesd1k] {
    outline: none;
    border-color: var(--modal-accent-color, var(--accent-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent-color, var(--accent-primary)) 18%, transparent);
}

.filter-controls[b-ndhrjesd1k] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-select[b-ndhrjesd1k] {
    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.filter-select:focus[b-ndhrjesd1k] {
    outline: none;
    border-color: var(--modal-accent-color, var(--accent-primary));
}

.btn-clear-filters[b-ndhrjesd1k] {
    padding: 0.625rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-clear-filters:hover[b-ndhrjesd1k] {
        background: var(--hover-bg);
        color: var(--modal-accent-color, var(--accent-primary));
        border-color: var(--modal-accent-color, var(--accent-primary));
    }
}

.btn-toggle-filters[b-ndhrjesd1k] {
    padding: 0.625rem;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.btn-toggle-filters.active[b-ndhrjesd1k] {
    background: var(--hover-bg);
    color: var(--modal-accent-color, var(--accent-primary));
    border-color: var(--modal-accent-color, var(--accent-primary));
}

@media (hover: hover) {
    .btn-toggle-filters:hover[b-ndhrjesd1k] {
        background: var(--hover-bg);
        color: var(--modal-accent-color, var(--accent-primary));
        border-color: var(--modal-accent-color, var(--accent-primary));
    }
}

/* Item List Styles */
.item-list[b-ndhrjesd1k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 460px;
    min-height: 460px;
    max-height: 460px;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-right: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-section-title[b-ndhrjesd1k] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-container[b-ndhrjesd1k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Additional Sections */
.recently-completed-section[b-ndhrjesd1k] {
    margin-top: 1rem;
    padding-top: 0;
}

.recently-completed-header[b-ndhrjesd1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .recently-completed-header:hover[b-ndhrjesd1k] {
        background: var(--hover-bg);
    }
}

.recently-completed-list[b-ndhrjesd1k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

/* Quick Add Section */
.quick-add-section[b-ndhrjesd1k] {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Date quick-add form (used by birthday entry and similar date-aware quick adds) */
.date-quick-add[b-ndhrjesd1k] {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-quick-add.expanded[b-ndhrjesd1k] {
    border-style: solid;
    border-color: var(--modal-accent-color, var(--accent-primary));
    cursor: default;
}

@media (hover: hover) {
    .date-quick-add:not(.expanded):hover[b-ndhrjesd1k] {
        border-color: var(--modal-accent-color, var(--accent-primary));
        background: var(--hover-bg);
    }
}

.date-quick-add-prompt[b-ndhrjesd1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.date-quick-add-icon[b-ndhrjesd1k] {
    color: var(--modal-accent-color, var(--accent-primary));
    font-size: 1rem;
}

.date-quick-add-form[b-ndhrjesd1k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date-quick-add-name-row[b-ndhrjesd1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-quick-add-input[b-ndhrjesd1k] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.9rem;
    min-height: 38px;
}

.date-quick-add-input:focus[b-ndhrjesd1k] {
    outline: none;
    border-color: var(--modal-accent-color, var(--accent-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent-color, var(--accent-primary)) 18%, transparent);
}

.date-quick-add-name-row .btn-primary[b-ndhrjesd1k] {
    background: var(--modal-accent-color, var(--accent-primary));
    border-color: var(--modal-accent-color, var(--accent-primary));
    min-width: 36px;
    min-height: 36px;
}

@media (hover: hover) {
    .date-quick-add-name-row .btn-primary:hover[b-ndhrjesd1k] {
        background: var(--accent-secondary, var(--modal-accent-color, var(--accent-primary)));
        border-color: var(--accent-secondary, var(--modal-accent-color, var(--accent-primary)));
    }
}

.date-quick-add-date-row[b-ndhrjesd1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-row-icon[b-ndhrjesd1k] {
    color: var(--modal-accent-color, var(--text-secondary));
    font-size: 0.9rem;
    flex-shrink: 0;
}

.date-select[b-ndhrjesd1k] {
    flex: 1;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    min-height: 36px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.date-select:focus[b-ndhrjesd1k] {
    outline: none;
    border-color: var(--modal-accent-color, var(--accent-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent-color, var(--accent-primary)) 18%, transparent);
}

.month-select[b-ndhrjesd1k] {
    flex: 1.3;
}

.year-select[b-ndhrjesd1k] {
    flex: 1.2;
}

/* Tablet layout adjustments */
@media (max-width: 768px) {
    .item-list[b-ndhrjesd1k] {
        height: auto;
        min-height: 200px;
        max-height: none;
        flex: 1;
    }

    .filter-controls[b-ndhrjesd1k] {
        flex-wrap: wrap;
    }

    .filter-select[b-ndhrjesd1k] {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
}

/* Mobile fullscreen modal */
@media (max-width: 576px) {
    .btn-clear-filters[b-ndhrjesd1k],
    .btn-toggle-filters[b-ndhrjesd1k] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .search-input[b-ndhrjesd1k],
    .filter-select[b-ndhrjesd1k] {
        font-size: 16px;
    }

    .date-quick-add-input[b-ndhrjesd1k],
    .date-select[b-ndhrjesd1k] {
        font-size: 16px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .search-filter-bar[b-ndhrjesd1k] {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .filter-controls[b-ndhrjesd1k] {
        gap: 0.375rem;
    }

    .filter-select[b-ndhrjesd1k] {
        flex: 1 1 100%;
        padding: 0.5rem;
    }

    .modal-section-title[b-ndhrjesd1k] {
        font-size: 0.8rem;
    }

    .recently-completed-header[b-ndhrjesd1k] {
        font-size: 0.8rem;
        padding: 0.375rem;
    }
}
/* /Components/Pages/TimeboxingComponents/AddItemModal.razor.rz.scp.css */
.modal-overlay[b-qxj6w0axca] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    overscroll-behavior: contain;
}

.modal-content[b-qxj6w0axca] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    --modal-accent-color: var(--accent-primary);
}

.modal-header[b-qxj6w0axca] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-qxj6w0axca] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-header h3 .bi[b-qxj6w0axca] {
    color: var(--modal-accent-color, var(--text-primary));
}

.header-actions[b-qxj6w0axca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new-item[b-qxj6w0axca] {
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-new-item:hover[b-qxj6w0axca] {
        background: var(--accent-secondary);
    }
}

.btn-close[b-qxj6w0axca] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-close:hover[b-qxj6w0axca] {
        background: var(--hover-bg);
    }
}

.modal-body[b-qxj6w0axca] {
    padding: 1.5rem;
}

/* Birthday modal specific styles */
.birthday-modal[b-qxj6w0axca] {
    max-width: 600px;
}

/* Mobile fullscreen modal */
@media (max-width: 576px) {
    .modal-overlay[b-qxj6w0axca] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-qxj6w0axca],
    .birthday-modal[b-qxj6w0axca] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-qxj6w0axca] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-body[b-qxj6w0axca] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn-close[b-qxj6w0axca] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .btn-new-item[b-qxj6w0axca] {
        min-height: 48px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header[b-qxj6w0axca] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-header h3[b-qxj6w0axca] {
        font-size: 1.1rem;
        flex: 1 1 100%;
        order: 1;
    }

    .header-actions[b-qxj6w0axca] {
        order: 2;
        width: 100%;
        justify-content: space-between;
    }

    .btn-new-item[b-qxj6w0axca] {
        flex: 1;
        justify-content: center;
    }

    .modal-body[b-qxj6w0axca] {
        padding: 0.75rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    }
}
/* /Components/Pages/TimeboxingComponents/PillDetailsModal.razor.rz.scp.css */
.modal-overlay[b-o34k9nxv5l] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    animation: pill-modal-fade-in-b-o34k9nxv5l 160ms ease;
    overscroll-behavior: contain;
}

@keyframes pill-modal-fade-in-b-o34k9nxv5l {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-o34k9nxv5l] {
    background: var(--card-bg, var(--bg-primary));
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation: pill-modal-pop-in-b-o34k9nxv5l 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes pill-modal-pop-in-b-o34k9nxv5l {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-header[b-o34k9nxv5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    gap: 0.75rem;
}

.modal-header h3[b-o34k9nxv5l] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.modal-header h3 span[b-o34k9nxv5l] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-header h3 .bi[b-o34k9nxv5l] {
    color: var(--accent-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.btn-close[b-o34k9nxv5l] {
    min-width: 36px;
    min-height: 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .btn-close:hover[b-o34k9nxv5l] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.modal-body[b-o34k9nxv5l] {
    padding: 0.75rem 1.25rem 1.25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.empty-state[b-o34k9nxv5l] {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.pill-rows[b-o34k9nxv5l] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pill-row[b-o34k9nxv5l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.4;
    min-height: 24px;
}

.row-color[b-o34k9nxv5l] {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}

.row-title[b-o34k9nxv5l] {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.row-time[b-o34k9nxv5l] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

/* Mobile fullscreen */
@media (max-width: 576px) {
    .modal-overlay[b-o34k9nxv5l] {
        padding: 0;
        align-items: stretch;
    }

    .modal-content[b-o34k9nxv5l],
    .modal-content.modal-small[b-o34k9nxv5l] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-header[b-o34k9nxv5l] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-body[b-o34k9nxv5l] {
        padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }
}
/* /Components/Pages/TimeboxingComponents/SlotAddItemModal.razor.rz.scp.css */
.modal-overlay[b-b82ljwfk3c] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    overscroll-behavior: contain;
}

.modal-content[b-b82ljwfk3c] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    --modal-accent-color: var(--accent-primary);
}

.modal-header[b-b82ljwfk3c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

/* Segmented tab toggle */
.tab-toggle[b-b82ljwfk3c] {
    display: inline-flex;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light, var(--border-color));
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    flex-shrink: 0;
}

.tab-button[b-b82ljwfk3c] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.tab-button.active[b-b82ljwfk3c] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .tab-button:not(.active):hover[b-b82ljwfk3c] {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    }
}

.tab-button:focus-visible[b-b82ljwfk3c] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.header-actions[b-b82ljwfk3c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-new-item[b-b82ljwfk3c] {
    padding: 0.5rem 0.85rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-new-item:hover[b-b82ljwfk3c] {
        background: var(--accent-secondary, var(--accent-primary));
    }
}

.btn-close[b-b82ljwfk3c] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-close:hover[b-b82ljwfk3c] {
        background: var(--hover-bg);
    }
}

.modal-body[b-b82ljwfk3c] {
    padding: 1.5rem;
}

.tab-panel[b-b82ljwfk3c] {
    display: flex;
    flex-direction: column;
}

/* Mobile fullscreen modal */
@media (max-width: 576px) {
    .modal-overlay[b-b82ljwfk3c] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-b82ljwfk3c] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-header[b-b82ljwfk3c] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 0.75rem 0.75rem;
        flex-wrap: wrap;
    }

    .tab-toggle[b-b82ljwfk3c] {
        flex: 1 1 100%;
        order: 1;
        justify-content: stretch;
    }

    .tab-button[b-b82ljwfk3c] {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    .header-actions[b-b82ljwfk3c] {
        order: 2;
        width: 100%;
        justify-content: space-between;
    }

    .btn-new-item[b-b82ljwfk3c] {
        flex: 1;
        justify-content: center;
        min-height: 48px;
    }

    .btn-close[b-b82ljwfk3c] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .modal-body[b-b82ljwfk3c] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .tab-button[b-b82ljwfk3c] {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
}
/* /Components/Pages/TimeboxingComponents/TimeboxingGrid.razor.rz.scp.css */
/* TimeboxingGrid.razor.css */

/* Right Column - Timebox Schedule */
.timebox-column[b-s1ynrkmikp] {
    display: flex;
    flex-direction: column;
}

.timebox-header[b-s1ynrkmikp] {
    display: grid;
    grid-template-columns: 40px 1fr 1fr;
    gap: 0;
    margin-bottom: 0;
    font-weight: 700;
    color: var(--text-primary);
}

.timebox-header .time-column[b-s1ynrkmikp] {
    text-align: center;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-light);
}

.timebox-header .time-column:last-child[b-s1ynrkmikp] {
    border-right: none;
}

.timebox-header .time-spacer[b-s1ynrkmikp] {
    background: transparent;
}

.timebox-grid-wrapper[b-s1ynrkmikp] {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.timebox-grid[b-s1ynrkmikp] {
    display: flex;
    flex-direction: column;
}

.timebox-row[b-s1ynrkmikp] {
    display: grid;
    grid-template-columns: 40px 1fr 1fr;
    border-bottom: 1px solid var(--border-light);
}

.timebox-row:last-child[b-s1ynrkmikp] {
    border-bottom: none;
}

.time-label[b-s1ynrkmikp] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
    border-right: 1px solid var(--border-light);
    padding: 0.5rem;
}

/* Skeleton loading state for time slots */
.skeleton-slot-cell[b-s1ynrkmikp] {
    min-height: 60px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    padding: 0.5rem;
    pointer-events: none;
    border-right: 1px solid var(--border-light);
}

.skeleton-slot-cell:last-child[b-s1ynrkmikp] {
    border-right: none;
}

/* Time Settings */
.time-settings[b-s1ynrkmikp] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.time-settings label[b-s1ynrkmikp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

.time-input[b-s1ynrkmikp] {
    width: 60px;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* Current Time Indicator */
.current-time-indicator[b-s1ynrkmikp] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
}

.time-line[b-s1ynrkmikp] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #3b82f6, #2563eb);
    box-shadow: 0 0 4px rgba(59, 130, 246, 0.6);
}

.time-line[b-s1ynrkmikp]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.8);
}

.time-badge[b-s1ynrkmikp] {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    background: #3b82f6;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
    white-space: nowrap;
}

/* Modal Styles */
.modal-overlay[b-s1ynrkmikp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-s1ynrkmikp] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.habit-list[b-s1ynrkmikp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.habit-option[b-s1ynrkmikp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 0.95rem;
}

@media (hover: hover) {
    .habit-option:hover[b-s1ynrkmikp] {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
        transform: translateX(4px);
    }
}

.habit-color-indicator[b-s1ynrkmikp] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.close-modal-btn[b-s1ynrkmikp] {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .close-modal-btn:hover[b-s1ynrkmikp] {
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
    }
}

/* Delete Confirmation Modal Styles */
.modal-small[b-s1ynrkmikp] {
    max-width: 400px;
}

.modal-header[b-s1ynrkmikp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-s1ynrkmikp] {
    margin: 0;
    color: var(--text-primary);
}

.btn-close[b-s1ynrkmikp] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

@media (hover: hover) {
    .btn-close:hover[b-s1ynrkmikp] {
        background: var(--hover-bg);
    }
}

.modal-body[b-s1ynrkmikp] {
    padding: 1.5rem;
}

.modal-body p[b-s1ynrkmikp] {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.text-secondary[b-s1ynrkmikp] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.modal-footer[b-s1ynrkmikp] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.btn-secondary[b-s1ynrkmikp] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-s1ynrkmikp] {
        background: var(--hover-bg);
    }
}

.btn-danger[b-s1ynrkmikp] {
    background: #ef4444;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-danger:hover[b-s1ynrkmikp] {
        background: #dc2626;
    }
}

/* New Habit Button in Modal Header */
.header-actions[b-s1ynrkmikp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new-habit[b-s1ynrkmikp] {
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-new-habit:hover[b-s1ynrkmikp] {
        background: var(--accent-secondary);
    }
}

.btn-new-habit .me-1[b-s1ynrkmikp] {
    margin-right: 0.25rem;
}

.add-habit-row-timeboxing[b-s1ynrkmikp] {
    margin-top: 1rem;
}

/* Recently Completed Section */
.recently-completed-section[b-s1ynrkmikp] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.recently-completed-header[b-s1ynrkmikp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .recently-completed-header:hover[b-s1ynrkmikp] {
        background: var(--hover-bg);
    }
}

.recently-completed-list[b-s1ynrkmikp] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .timebox-column[b-s1ynrkmikp] {
        order: 1;
    }
}

@media screen and (max-width: 768px) {
    .timebox-column[b-s1ynrkmikp] {
        /* Disable horizontal scroll on mobile in favor of stacked view */
        overflow-x: visible;
    }

    .timebox-grid-wrapper[b-s1ynrkmikp] {
        min-width: 0;
        border: none;
    }
    
    /* Stack the header to match the row layout */
    .timebox-header[b-s1ynrkmikp] {
        display: none; /* Hide traditional header on mobile */
    }
    
    /* Stack slots vertically */
    .timebox-row[b-s1ynrkmikp] {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        border-bottom: 1px solid var(--border-light);
        margin-bottom: 0.5rem;
        background: var(--card-bg);
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border-light);
    }
    
    .time-label[b-s1ynrkmikp] {
        grid-row: 1 / -1; /* Span both rows */
        border-right: 1px solid var(--border-light);
        font-size: 0.9rem;
        background: var(--bg-tertiary);
    }
    
    /* Adjust time slots to look good stacked */
    .timebox-row > .time-slot:nth-of-type(1)[b-s1ynrkmikp] { /* :00 slot */
        border-bottom: 1px dashed var(--border-light);
    }

    .skeleton-slot-cell:first-of-type[b-s1ynrkmikp] {
        border-bottom: 1px dashed var(--border-light);
    }

    .skeleton-slot-cell[b-s1ynrkmikp] {
        border-right: none;
    }
}

/* Extra small screens (360px min supported) */
@media screen and (max-width: 480px) {
    .time-label[b-s1ynrkmikp] {
        font-size: 0.75rem;
        padding: 0.25rem;
    }

    .timebox-row[b-s1ynrkmikp] {
        grid-template-columns: 32px 1fr;
        margin-bottom: 0.25rem;
    }

    .time-badge[b-s1ynrkmikp] {
        left: 36px;
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }

    /* Modal full-screen on mobile */
    .modal-content[b-s1ynrkmikp] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

@media print {
    .current-time-indicator[b-s1ynrkmikp],
    .time-settings[b-s1ynrkmikp],
    .timebox-header[b-s1ynrkmikp] {
        display: none !important;
    }
    
    .timebox-grid-wrapper[b-s1ynrkmikp] {
        border: 1px solid #bbb !important;
        border-bottom: none !important; /* Avoid double border at bottom */
        overflow: visible !important;
        border-radius: 0 !important;
    }

    .timebox-grid[b-s1ynrkmikp] {
        gap: 0 !important;
        display: block !important; /* Ensure no flex/grid gap issues */
    }

    .timebox-row[b-s1ynrkmikp] {
        display: grid !important;
        grid-template-columns: 40px 1fr 1fr !important;
        page-break-inside: avoid;
        border-bottom: none !important; /* Handled by slots/label */
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        height: auto !important;
        background: transparent !important;
    }
    
    .time-label[b-s1ynrkmikp] {
        background: #f5f5f5 !important; /* Keep light grey for time */
        border-right: 1px solid #bbb !important;
        border-bottom: 1px solid #bbb !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        font-weight: bold;
    }
}
/* /Components/Pages/TimeboxingComponents/TimeboxingHeader.razor.rz.scp.css */
/* Modern Timeboxing Header - Compact & Preserving Positioning */
.modern-timebox-header[b-dowv2t1ktk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
    position: relative;
    height: 42px;
    overflow: visible;
    z-index: 200;
}

/* Left: Title */
.header-left-section[b-dowv2t1ktk] {
    flex: 1;
    min-width: 200px;
}

.title-wrapper[b-dowv2t1ktk] {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.modern-title-input[b-dowv2t1ktk] {
    width: 100%;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: none;
    padding: 0.25rem 0;
    outline: none;
    font-family: inherit;
    line-height: 1.2;
}

.modern-title-input[b-dowv2t1ktk]::placeholder {
    color: var(--border-color);
    font-weight: 500;
}

.title-underline[b-dowv2t1ktk] {
    height: 2px;
    background: transparent;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: background 0.3s ease;
}

@media (hover: hover) {
    .modern-title-input:hover + .title-underline[b-dowv2t1ktk] {
        background: var(--border-light);
    }
}

.modern-title-input:focus + .title-underline[b-dowv2t1ktk] {
    background: var(--accent-primary);
    height: 2px;
}

/* Middle: Events */
.header-middle-section[b-dowv2t1ktk] {
    flex-shrink: 0;
    overflow: visible;
}

.events-row[b-dowv2t1ktk] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    overflow: visible;
}

.event-pill[b-dowv2t1ktk] {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px; /* Match gemini-redesign */
    padding: 0.25rem 0.75rem; /* Match gemini-redesign */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: inherit;
    line-height: 1.2;
    white-space: nowrap;
}

.event-pill:focus-visible[b-dowv2t1ktk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

@media (hover: hover) {
    .event-pill:hover[b-dowv2t1ktk] {
        transform: translateY(-1px);
        background: var(--bg-tertiary);
    }
}

.event-pill .bi[b-dowv2t1ktk] {
    font-size: 0.85rem;
}

/* Color variants - adapted for white background */
.event-pill.today[b-dowv2t1ktk] {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1); /* Light red bg */
    border-color: rgba(239, 68, 68, 0.2);
}

.event-pill.tomorrow[b-dowv2t1ktk] {
    color: var(--accent-secondary); /* Using accent color for tomorrow instead of yellow for better contrast on white */
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

.event-pill.later[b-dowv2t1ktk] {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

/* Task Due pill variants */
.event-pill.today-task[b-dowv2t1ktk] {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.event-pill.tomorrow-task[b-dowv2t1ktk] {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
}

.event-pill.later-task[b-dowv2t1ktk] {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

/* Save Indicator */
.save-indicator[b-dowv2t1ktk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.save-indicator.saving[b-dowv2t1ktk] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.save-indicator.saved[b-dowv2t1ktk] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
    animation: fadeIn-b-dowv2t1ktk 0.3s ease;
}

@keyframes fadeIn-b-dowv2t1ktk {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes spin-b-dowv2t1ktk {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.save-indicator .spin[b-dowv2t1ktk] {
    animation: spin-b-dowv2t1ktk 1s linear infinite;
}

.save-text[b-dowv2t1ktk] {
    white-space: nowrap;
}

/* Right: Date & Menu */
.header-right-section[b-dowv2t1ktk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Date Navigator - Updated to match gemini-redesign structure */
.date-navigator[b-dowv2t1ktk] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    height: 36px;
}

.nav-btn[b-dowv2t1ktk] {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

@media (hover: hover) {
    .nav-btn:hover[b-dowv2t1ktk] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.date-display-wrapper[b-dowv2t1ktk] {
    position: relative;
    display: flex;
    align-items: baseline; /* Match gemini-redesign baseline alignment */
    gap: 0.4rem;
    padding: 0 0.5rem;
    cursor: pointer;
    user-select: none;
    /* Native <button> resets — element was a <div> before audit F-024 fix. */
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.date-display-wrapper:focus-visible[b-dowv2t1ktk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.day-name[b-dowv2t1ktk] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary); /* was --text-muted (3.23:1) — bumped to meet WCAG 1.4.3 AA */
    font-weight: 600;
    pointer-events: none; /* Allow clicks to pass through to hidden date input */
}

.date-full[b-dowv2t1ktk] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    pointer-events: none; /* Allow clicks to pass through to hidden date input */
}

.hidden-date-input[b-dowv2t1ktk] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.today-btn[b-dowv2t1ktk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-left: 1px solid var(--border-color);
    padding: 0 0.6rem;
    height: 20px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

@media (hover: hover) {
    .today-btn:hover[b-dowv2t1ktk] {
        color: var(--accent-primary);
    }
}

/* Menu - Settings Gear */
.menu-wrapper[b-dowv2t1ktk] {
    position: relative;
}

.action-btn[b-dowv2t1ktk] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color); /* Added border to match date nav */
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}

@media (hover: hover) {
    .action-btn:hover[b-dowv2t1ktk] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

/* Active state must render on touch devices too, and needs ≥ 3:1 contrast against
   the surrounding container in dark theme (audit F-005). Use a stronger tint plus a
   solid border so the indicator survives any background. */
.action-btn.active[b-dowv2t1ktk] {
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    outline: 1.5px solid var(--accent-primary);
    outline-offset: -1px;
}

/* Dropdown & Tooltips (Reused) */
.modern-dropdown[b-dowv2t1ktk] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    min-width: 260px;
    z-index: 1000;
    padding: 0.5rem;
    animation: slideDown-b-dowv2t1ktk 0.2s ease-out;
}

@keyframes slideDown-b-dowv2t1ktk {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-section[b-dowv2t1ktk] { padding: 0.75rem; }
.section-label[b-dowv2t1ktk] { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; }
.time-range-inputs[b-dowv2t1ktk] { display: flex; gap: 0.75rem; }
.time-input-group[b-dowv2t1ktk] { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.time-input-group label[b-dowv2t1ktk] { font-size: 0.75rem; color: var(--text-secondary); }
.time-input-group input[b-dowv2t1ktk] { width: 100%; padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); color: var(--text-primary); font-size: 1rem; text-align: center; }
.dropdown-divider[b-dowv2t1ktk] { height: 1px; background: var(--border-light); margin: 0.5rem 0; }
.dropdown-action[b-dowv2t1ktk] { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: none; background: transparent; color: var(--text-primary); font-size: 0.95rem; font-weight: 500; cursor: pointer; border-radius: 8px; transition: background 0.2s; text-decoration: none; }
@media (hover: hover) {
    .dropdown-action:hover[b-dowv2t1ktk] { background: var(--hover-bg); }
}
.dropdown-action.text-danger[b-dowv2t1ktk] { color: var(--danger); }
@media (hover: hover) {
    .dropdown-action.text-danger:hover[b-dowv2t1ktk] { background: rgba(239, 68, 68, 0.1); }
}

/* Tooltips */
.event-tooltip[b-dowv2t1ktk] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    max-width: 320px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10000;
    pointer-events: none;
    white-space: nowrap;
}

@media (hover: hover) {
    .event-pill:hover .event-tooltip[b-dowv2t1ktk],
    .weather-chip-btn:hover .event-tooltip[b-dowv2t1ktk] {
        opacity: 1;
        visibility: visible;
    }
}

.tooltip-header[b-dowv2t1ktk] { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }

.tooltip-item-compact[b-dowv2t1ktk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}
.tooltip-item-compact:last-child[b-dowv2t1ktk] { margin-bottom: 0; }
.tooltip-color[b-dowv2t1ktk] {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}
.tooltip-title-compact[b-dowv2t1ktk] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tooltip-time-compact[b-dowv2t1ktk] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
}

/* Weather chip tooltip — a compact mirror of WeatherDetailModal:
   summary row (condition + hi/lo + precip) + hourly strip + upcoming-days strip.
   Anchored to the right so it doesn't clip off-screen (chip is in the top-right). */
.weather-tooltip[b-dowv2t1ktk] {
    left: auto;
    right: 0;
    transform: none;
    width: 380px;
    max-width: min(92vw, 440px);
    min-width: 320px;
    padding: 0.75rem;
    white-space: normal;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    --weather-tint: var(--accent-primary);
}

.weather-tooltip[data-condition="clear"][b-dowv2t1ktk]        { --weather-tint: #f59e0b; }
.weather-tooltip[data-condition="clouds"][b-dowv2t1ktk]       { --weather-tint: #64748b; }
.weather-tooltip[data-condition="rain"][b-dowv2t1ktk],
.weather-tooltip[data-condition="drizzle"][b-dowv2t1ktk]      { --weather-tint: #3b82f6; }
.weather-tooltip[data-condition="storm"][b-dowv2t1ktk],
.weather-tooltip[data-condition="thunderstorm"][b-dowv2t1ktk] { --weather-tint: #7c3aed; }
.weather-tooltip[data-condition="snow"][b-dowv2t1ktk]         { --weather-tint: #06b6d4; }
.weather-tooltip[data-condition="fog"][b-dowv2t1ktk]          { --weather-tint: #94a3b8; }

/* ----- Location row ----- */
.weather-tooltip-location[b-dowv2t1ktk] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    align-self: flex-start;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--weather-tint) 10%, transparent);
    color: var(--weather-tint);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-tooltip-location .bi-geo-alt-fill[b-dowv2t1ktk] { font-size: 0.7rem; }

.weather-tooltip-location span[b-dowv2t1ktk] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Summary row ----- */
.weather-tooltip-summary[b-dowv2t1ktk] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.weather-tooltip-icon[b-dowv2t1ktk] {
    font-size: 1.75rem;
    color: var(--weather-tint);
    flex-shrink: 0;
    line-height: 1;
}

.weather-tooltip-main[b-dowv2t1ktk] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.weather-tooltip-condition[b-dowv2t1ktk] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weather-tooltip-temps[b-dowv2t1ktk] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.weather-tooltip-hi[b-dowv2t1ktk] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.weather-tooltip-lo[b-dowv2t1ktk] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

.weather-tooltip-lo-label[b-dowv2t1ktk] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.weather-tooltip-pop[b-dowv2t1ktk] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, #3b82f6 14%, transparent);
    color: #3b82f6;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* ----- Section labels (shared by hourly + daily strips) ----- */
.weather-tooltip-section[b-dowv2t1ktk] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    border-top: 1px solid var(--border-light, var(--border-color));
    padding-top: 0.55rem;
}

.weather-tooltip-label[b-dowv2t1ktk] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ----- Hourly strip ----- */
.weather-tooltip-hour-strip[b-dowv2t1ktk] {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0.15rem;
}

.weather-tooltip-hour[b-dowv2t1ktk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 44px;
    padding: 0.3rem 0.25rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--weather-tint) 6%, transparent);
    flex-shrink: 0;
    --weather-tint: var(--accent-primary);
}

.weather-tooltip-hour[data-condition="clear"][b-dowv2t1ktk]        { --weather-tint: #f59e0b; }
.weather-tooltip-hour[data-condition="clouds"][b-dowv2t1ktk]       { --weather-tint: #64748b; }
.weather-tooltip-hour[data-condition="rain"][b-dowv2t1ktk],
.weather-tooltip-hour[data-condition="drizzle"][b-dowv2t1ktk]      { --weather-tint: #3b82f6; }
.weather-tooltip-hour[data-condition="storm"][b-dowv2t1ktk],
.weather-tooltip-hour[data-condition="thunderstorm"][b-dowv2t1ktk] { --weather-tint: #7c3aed; }
.weather-tooltip-hour[data-condition="snow"][b-dowv2t1ktk]         { --weather-tint: #06b6d4; }
.weather-tooltip-hour[data-condition="fog"][b-dowv2t1ktk]          { --weather-tint: #94a3b8; }

.weather-tooltip-hour.is-past[b-dowv2t1ktk] { opacity: 0.45; }

.weather-tooltip-hour-time[b-dowv2t1ktk] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.weather-tooltip-hour-icon[b-dowv2t1ktk] {
    font-size: 1.05rem;
    color: var(--weather-tint);
    line-height: 1;
}

.weather-tooltip-hour-temp[b-dowv2t1ktk] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.weather-tooltip-hour-pop[b-dowv2t1ktk] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #3b82f6;
    font-variant-numeric: tabular-nums;
    min-height: 0.8rem;
}

.weather-tooltip-hour-pop .bi-droplet-fill[b-dowv2t1ktk] { font-size: 0.55rem; }

.weather-tooltip-hour-pop.is-empty[b-dowv2t1ktk] { visibility: hidden; }

/* ----- Upcoming days strip ----- */
.weather-tooltip-day-strip[b-dowv2t1ktk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    gap: 0.35rem;
}

.weather-tooltip-day[b-dowv2t1ktk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.4rem 0.3rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--weather-tint) 6%, transparent);
    border: 1px solid transparent;
    --weather-tint: var(--accent-primary);
}

.weather-tooltip-day[data-condition="clear"][b-dowv2t1ktk]        { --weather-tint: #f59e0b; }
.weather-tooltip-day[data-condition="clouds"][b-dowv2t1ktk]       { --weather-tint: #64748b; }
.weather-tooltip-day[data-condition="rain"][b-dowv2t1ktk],
.weather-tooltip-day[data-condition="drizzle"][b-dowv2t1ktk]      { --weather-tint: #3b82f6; }
.weather-tooltip-day[data-condition="storm"][b-dowv2t1ktk],
.weather-tooltip-day[data-condition="thunderstorm"][b-dowv2t1ktk] { --weather-tint: #7c3aed; }
.weather-tooltip-day[data-condition="snow"][b-dowv2t1ktk]         { --weather-tint: #06b6d4; }
.weather-tooltip-day[data-condition="fog"][b-dowv2t1ktk]          { --weather-tint: #94a3b8; }

.weather-tooltip-day.is-selected[b-dowv2t1ktk] {
    background: color-mix(in srgb, var(--weather-tint) 14%, transparent);
    border-color: color-mix(in srgb, var(--weather-tint) 40%, transparent);
}

.weather-tooltip-day-label[b-dowv2t1ktk] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.weather-tooltip-day.is-selected .weather-tooltip-day-label[b-dowv2t1ktk] {
    color: var(--weather-tint);
}

.weather-tooltip-day-icon[b-dowv2t1ktk] {
    font-size: 1.15rem;
    color: var(--weather-tint);
    line-height: 1;
}

.weather-tooltip-day-temps[b-dowv2t1ktk] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.2rem;
    font-variant-numeric: tabular-nums;
}

.weather-tooltip-day-hi[b-dowv2t1ktk] {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.weather-tooltip-day-sep[b-dowv2t1ktk] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.weather-tooltip-day-lo[b-dowv2t1ktk] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.weather-tooltip-day-pop[b-dowv2t1ktk] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #3b82f6;
    font-variant-numeric: tabular-nums;
    min-height: 0.8rem;
}

.weather-tooltip-day-pop .bi-droplet-fill[b-dowv2t1ktk] { font-size: 0.55rem; }

.weather-tooltip-day-pop.is-empty[b-dowv2t1ktk] { visibility: hidden; }

/* Responsive */
@media (max-width: 992px) {
    /* Grid layout:
       row 1: date-nav | settings
       row 2: title (full width)
       row 3: pills   | weather
       header-right-section uses display: contents so its children participate as grid items. */
    .modern-timebox-header[b-dowv2t1ktk] {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "datenav  settings"
            "title    title"
            "pills    weather";
        column-gap: 1rem;
        row-gap: 0.75rem;
        height: auto;
        align-items: center;
    }

    .header-right-section[b-dowv2t1ktk] {
        display: contents;
    }

    .header-left-section[b-dowv2t1ktk] {
        grid-area: title;
        min-width: 0;
    }

    .header-middle-section[b-dowv2t1ktk] {
        grid-area: pills;
        margin-left: 0;
    }

    .date-navigator[b-dowv2t1ktk] {
        grid-area: datenav;
        justify-self: start;
    }

    .menu-wrapper[b-dowv2t1ktk] {
        grid-area: settings;
        justify-self: end;
    }

    .weather-chip-btn[b-dowv2t1ktk] {
        grid-area: weather;
        justify-self: end;
        margin-right: 0;
    }

    .modern-title-input[b-dowv2t1ktk] {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .modern-timebox-header[b-dowv2t1ktk] {
        margin-bottom: 1rem;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .modern-title-input[b-dowv2t1ktk] {
        font-size: 1.2rem;
    }

    /* WCAG 2.5.8 floor (24px) — match the event-pill compact height for visual consistency.
       Rule 44 (48px touch target) is intentionally not enforced here per user preference;
       see F-012 (Medium) for the broader icon-button sizing discussion. */
    .weather-chip-btn[b-dowv2t1ktk] {
        min-height: 32px;
        padding: 0.25rem 0.5rem;
    }

    .date-display-wrapper[b-dowv2t1ktk] {
        padding: 0;
    }
    
    .date-full[b-dowv2t1ktk] {
        font-size: 0.85rem;
    }
    
    .day-name[b-dowv2t1ktk] {
        display: none; /* Save space */
    }
    
    .events-row[b-dowv2t1ktk] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    /* Keep the count visible next to the icon (audit F-008 — was previously hidden).
       Pill stays compact + horizontal; the descriptor word is hidden to save space. */
    .event-pill[b-dowv2t1ktk] {
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        min-height: 32px;
        gap: 0.3rem;
        justify-content: center;
        align-items: center;
    }

    .pill-text[b-dowv2t1ktk] {
        font-size: 0.75rem;
        line-height: 1;
        font-weight: 700;
    }

    .event-pill .pill-label[b-dowv2t1ktk] {
        display: none;
    }

    .event-pill .bi[b-dowv2t1ktk] {
        margin: 0;
    }
}

@media print {
    .modern-timebox-header[b-dowv2t1ktk] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 1rem;
        border-bottom: none;
        width: 100%;
    }
    
    /* Hide middle section (events), menu, and save indicator */
    .header-middle-section[b-dowv2t1ktk],
    .menu-wrapper[b-dowv2t1ktk],
    .save-indicator[b-dowv2t1ktk],
    .nav-btn[b-dowv2t1ktk],
    .today-btn[b-dowv2t1ktk],
    .hidden-date-input[b-dowv2t1ktk] {
        display: none !important;
    }

    /* Title on Left */
    .header-left-section[b-dowv2t1ktk] {
        order: 1;
        flex: 1;
        display: block !important;
    }

    /* Date on Right */
    .header-right-section[b-dowv2t1ktk] {
        order: 2;
        display: flex !important;
        width: auto !important;
        justify-content: flex-end !important;
    }

    .date-navigator[b-dowv2t1ktk] {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .date-display-wrapper[b-dowv2t1ktk] {
        padding: 0 !important;
    }

    .day-name[b-dowv2t1ktk], .date-full[b-dowv2t1ktk] {
        color: black !important;
        font-size: 14pt !important; /* Larger for visibility */
    }
    
    .modern-title-input[b-dowv2t1ktk] {
        font-size: 1.5rem;
        border-bottom: 2px solid #000 !important; /* Stronger line for print */
        color: black !important;
        width: 100%;
    }

    .modern-title-input[b-dowv2t1ktk]::placeholder {
        color: transparent !important;
        opacity: 0;
    }
}

/* Weather chip button — compact indicator in the header, opens the detail modal on click.
   Keep in sync with Events.razor.css `.weather-chip` (the JS-injected calendar variant).
   Deliberate duplication over a global CSS file (Rule 33 forbids globals for component CSS). */
.weather-chip-btn[b-dowv2t1ktk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    margin-right: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-color);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 14%, transparent),
        color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 22%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 10%, transparent);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.weather-chip-btn .bi[b-dowv2t1ktk] {
    font-size: 0.938rem;
    color: var(--weather-tint, var(--accent-primary));
    line-height: 1;
}

.weather-chip-temp[b-dowv2t1ktk] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-color);
}

@media (hover: hover) {
    .weather-chip-btn:hover[b-dowv2t1ktk] {
        transform: translateY(-1px);
        box-shadow: 0 3px 8px color-mix(in srgb, var(--weather-tint, var(--accent-primary)) 22%, transparent);
    }
}

.weather-chip-btn:focus-visible[b-dowv2t1ktk] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.weather-chip-btn[data-condition="clear"][b-dowv2t1ktk]        { --weather-tint: #f59e0b; }
.weather-chip-btn[data-condition="clouds"][b-dowv2t1ktk]       { --weather-tint: #64748b; }
.weather-chip-btn[data-condition="rain"][b-dowv2t1ktk]         { --weather-tint: #3b82f6; }
.weather-chip-btn[data-condition="drizzle"][b-dowv2t1ktk]      { --weather-tint: #3b82f6; }
.weather-chip-btn[data-condition="storm"][b-dowv2t1ktk],
.weather-chip-btn[data-condition="thunderstorm"][b-dowv2t1ktk] { --weather-tint: #7c3aed; }
.weather-chip-btn[data-condition="snow"][b-dowv2t1ktk]         { --weather-tint: #06b6d4; }
.weather-chip-btn[data-condition="fog"][b-dowv2t1ktk]          { --weather-tint: #94a3b8; }

@media (max-width: 576px) {
    .weather-chip-btn[b-dowv2t1ktk] {
        padding: 3px 8px;
        font-size: 0.7rem;
        margin-right: 0.25rem;
    }
}
/* /Components/Pages/TimeboxingComponents/TimeboxingTaskColumn.razor.rz.scp.css */
/* TimeboxingTaskColumn.razor.css */

/* Left Column - Tasks */
.tasks-column[b-dacxbgjecl] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.task-section-header[b-dacxbgjecl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.task-section h2[b-dacxbgjecl],
.task-section-header h2[b-dacxbgjecl] {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.brain-dump-section h2[b-dacxbgjecl] {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 1.25rem 0;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
}

.task-list[b-dacxbgjecl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-item[b-dacxbgjecl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-secondary);
}

/* Skeleton loading state for task items */
.skeleton-task-item[b-dacxbgjecl] {
    pointer-events: none;
    gap: 0.75rem;
}

/* Draggable task items */
.task-item[draggable="true"][b-dacxbgjecl] {
    cursor: grab;
}

.task-item[draggable="true"]:active[b-dacxbgjecl] {
    cursor: grabbing;
}

.task-item.dragging[b-dacxbgjecl] {
    opacity: 0.5;
    transform: scale(0.98);
}

.task-checkbox[b-dacxbgjecl] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.task-input[b-dacxbgjecl] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.25rem;
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    transition: flex-basis 0.2s ease;
}

.task-input.completed[b-dacxbgjecl] {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Display text (non-editing mode) */
.task-text[b-dacxbgjecl] {
    flex: 1;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.25rem;
    cursor: text;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .task-text:hover[b-dacxbgjecl] {
        color: var(--accent-primary, #6366f1);
    }
}

.task-text.completed[b-dacxbgjecl] {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Editing input (active edit mode) */
.task-input-editing[b-dacxbgjecl] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.25rem;
    outline: none;
    min-width: 0;
}

/* Empty task input (always visible for empty tasks) */
.task-input-empty[b-dacxbgjecl] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.25rem;
    outline: none;
    min-width: 0;
}


.task-actions[b-dacxbgjecl] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.2s ease;
    flex-shrink: 0;
}

@media (hover: hover) {
    .task-item:hover .task-actions[b-dacxbgjecl] {
        max-width: 300px;
    }
}

.pomodoro-btn[b-dacxbgjecl] {
    background: none;
    border: none;
    color: var(--accent-primary);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    opacity: 0.7;
    transition: all 0.2s;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .pomodoro-btn:hover[b-dacxbgjecl] {
        background: var(--accent-primary);
        color: white;
        opacity: 1;
    }
}

.pomodoro-count[b-dacxbgjecl] {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    background: var(--hover-bg);
    white-space: nowrap;
}

.edit-task-btn[b-dacxbgjecl] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    opacity: 0.7;
    transition: all 0.2s;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .edit-task-btn:hover[b-dacxbgjecl] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        opacity: 1;
    }
}

.remove-btn[b-dacxbgjecl] {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .remove-btn:hover[b-dacxbgjecl] {
        opacity: 1;
    }
}

/* Add Task Quick Button (for empty slots) */
.add-task-quick-btn[b-dacxbgjecl] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
}

@media (hover: hover) {
    .empty-task-item:hover .add-task-quick-btn[b-dacxbgjecl] {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (hover: none) {
    .add-task-quick-btn[b-dacxbgjecl] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .add-task-quick-btn:hover[b-dacxbgjecl] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
        transform: scale(1.05);
    }
}

.add-task-btn[b-dacxbgjecl] {
    padding: 0.5rem;
    background: var(--hover-bg);
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    color: var(--accent-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .add-task-btn:hover[b-dacxbgjecl] {
        background: var(--accent-primary);
        color: white;
        border-style: solid;
    }
}

/* Modern Header Add Button */
.add-task-btn-header[b-dacxbgjecl] {
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--input-bg); /* Match style from screenshot */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--accent-primary);
    font-size: 1.2rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (hover: hover) {
    .add-task-btn-header:hover[b-dacxbgjecl] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
}

/* Events Section */
.events-section h2[b-dacxbgjecl] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.events-list[b-dacxbgjecl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-item[b-dacxbgjecl] {
    padding: 0.875rem;
    background: var(--input-bg);
    border-radius: 6px;
    border-left: 4px solid;
}

.event-item-header[b-dacxbgjecl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.event-item-title[b-dacxbgjecl] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.event-item-time[b-dacxbgjecl] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.event-item-description[b-dacxbgjecl] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    line-height: 1.4;
}

.event-item-title.completed[b-dacxbgjecl] {
    text-decoration: line-through;
    opacity: 0.6;
}

.events-overflow[b-dacxbgjecl] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0.5rem 0.875rem;
    font-weight: 500;
}

/* Brain Dump */
.brain-dump-section[b-dacxbgjecl] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.brain-dump-textarea[b-dacxbgjecl] {
    width: 100%;
    flex: 1;
    min-height: 200px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-image:
        radial-gradient(circle, var(--border-color) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    outline: none;
}

.brain-dump-textarea:focus[b-dacxbgjecl] {
    outline: none;
    border-color: var(--border-color);
}

/* AI Button - matches btn-action-secondary style */
.btn-action-secondary[b-dacxbgjecl] {
    padding: 0.6rem 1.2rem;
    background: var(--card-bg, white);
    color: var(--text-secondary, #6b7280);
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-action-secondary:hover[b-dacxbgjecl] {
        color: var(--primary-color, #6366f1);
        border-color: var(--primary-color, #6366f1);
        background: rgba(99, 102, 241, 0.05);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    }
}

.btn-action-secondary:active[b-dacxbgjecl] {
    transform: translateY(0);
    box-shadow: none;
}

.btn-action-secondary .bi-stars[b-dacxbgjecl] {
    color: var(--primary-color, #6366f1);
}

/* Modal Styles */
.modal-overlay[b-dacxbgjecl] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-dacxbgjecl] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.modal-header[b-dacxbgjecl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-dacxbgjecl] {
    margin: 0;
    color: var(--text-primary);
}

.btn-close[b-dacxbgjecl] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

@media (hover: hover) {
    .btn-close:hover[b-dacxbgjecl] {
        background: var(--hover-bg);
    }
}

.modal-body[b-dacxbgjecl] {
    padding: 1.5rem;
}

.btn-new-task[b-dacxbgjecl] {
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    transition: background 0.2s;
    white-space: nowrap;
}

@media (hover: hover) {
    .btn-new-task:hover[b-dacxbgjecl] {
        background: var(--accent-secondary);
    }
}

.btn-new-task .me-1[b-dacxbgjecl] {
    margin-right: 0.25rem;
}

.add-task-row-timeboxing[b-dacxbgjecl] {
    margin-top: 1rem;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .tasks-column[b-dacxbgjecl] {
        order: 0;
    }
}

@media screen and (max-width: 768px) {
    .task-item[b-dacxbgjecl] {
        flex-wrap: wrap;
        padding: 0.75rem;
    }

    .task-input[b-dacxbgjecl] {
        min-width: 200px; /* Force wrap if too narrow */
    }

    /* Make buttons larger for touch */
    .task-checkbox[b-dacxbgjecl],
    .remove-btn[b-dacxbgjecl],
    .pomodoro-btn[b-dacxbgjecl],
    .edit-task-btn[b-dacxbgjecl],
    .add-task-quick-btn[b-dacxbgjecl] {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Keep remove button visible on touch devices */
    .remove-btn[b-dacxbgjecl] {
        opacity: 1;
        color: var(--text-muted);
    }

    .pomodoro-btn[b-dacxbgjecl] {
        opacity: 1;
    }

    .edit-task-btn[b-dacxbgjecl] {
        opacity: 1;
    }
    
    .add-task-quick-btn[b-dacxbgjecl] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Brain dump area */
    .brain-dump-textarea[b-dacxbgjecl] {
        min-height: 150px;
    }
}

/* Extra small screens (360px min supported) */
@media screen and (max-width: 480px) {
    .tasks-column[b-dacxbgjecl] {
        gap: 1rem;
    }

    .task-section-header[b-dacxbgjecl] {
        margin-bottom: 0.5rem;
    }

    .task-section h2[b-dacxbgjecl],
    .task-section-header h2[b-dacxbgjecl],
    .brain-dump-section h2[b-dacxbgjecl] {
        font-size: 0.8rem;
    }

    .task-item[b-dacxbgjecl] {
        padding: 0.5rem;
    }

    .task-input[b-dacxbgjecl],
    .task-text[b-dacxbgjecl] {
        font-size: 0.9rem;
        min-width: 120px;
    }

    /* Ensure buttons are always visible and touch-friendly */
    .task-actions[b-dacxbgjecl] {
        max-width: 200px;
    }

    .add-task-btn-header[b-dacxbgjecl] {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    /* Modal full-screen on mobile */
    .modal-content[b-dacxbgjecl] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .modal-header[b-dacxbgjecl],
    .modal-body[b-dacxbgjecl] {
        padding: 1rem;
    }
}

@media print {
    .add-task-btn-header[b-dacxbgjecl],
    .remove-btn[b-dacxbgjecl],
    .pomodoro-btn[b-dacxbgjecl],
    .edit-task-btn[b-dacxbgjecl],
    .pomodoro-count[b-dacxbgjecl],
    .add-task-quick-btn[b-dacxbgjecl],
    .hide-on-print[b-dacxbgjecl] {
        display: none !important;
    }

    .task-section-header h2[b-dacxbgjecl],
    .brain-dump-section h2[b-dacxbgjecl] {
        font-size: 10pt;
        page-break-after: avoid;
        color: black !important;
        margin-bottom: 5px;
    }

    .task-list[b-dacxbgjecl] {
        gap: 0 !important; /* Remove gap, rely on borders */
    }

    .task-item[b-dacxbgjecl] {
        border: 1px solid #ccc !important; /* Enforce border */
        border-radius: 0 !important; /* Sharper corners for print */
        margin-bottom: -1px; /* Collapse borders */
        page-break-inside: avoid;
        background: white !important;
        padding: 8px !important; /* Better padding */
    }

    .task-input[b-dacxbgjecl],
    .task-text[b-dacxbgjecl] {
        font-size: 10pt;
        color: black !important;
    }

    /* Ensure checkboxes are visible */
    .task-checkbox[b-dacxbgjecl] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 1px solid #000;
        box-shadow: none !important;
    }

    .brain-dump-textarea[b-dacxbgjecl] {
        font-size: 10pt;
        /* Restore dots for print, using dark gray for visibility */
        background-image: radial-gradient(circle, #999 1px, transparent 1px) !important;
        background-size: 20px 20px !important;
        background-color: transparent !important;
        color: black !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        display: block;
        border: 1px solid #ccc !important;
        min-height: 250px; /* Ensure enough space on paper */
    }

    .task-input[b-dacxbgjecl]::placeholder,
    .brain-dump-textarea[b-dacxbgjecl]::placeholder {
        color: transparent !important;
        opacity: 0;
    }
}
/* /Components/Pages/TimeboxingComponents/TimeSlot.razor.rz.scp.css */
/* TimeSlot.razor.css */

.time-slot[b-0vbs225r09] {
    min-height: 60px;
    background: var(--bg-secondary);
    transition: all 0.2s;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.5rem;
    gap: 0.25rem;
    cursor: text;
}

.time-slot.has-badges[b-0vbs225r09] {
    justify-content: space-between;
}

@media (hover: hover) {
    .time-slot:hover[b-0vbs225r09] {
        background: var(--hover-bg);
    }
}

.time-slot.completed[b-0vbs225r09]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 11px
    );
    pointer-events: none;
    z-index: 1;
}

.time-slot-input[b-0vbs225r09] {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    padding: 0.25rem 0.5rem;
    cursor: text;
    position: relative;
    z-index: 2;
    width: 100%;
    flex-shrink: 0;
    resize: none;
    overflow: hidden;
    min-height: 28px;
    line-height: 1.2em;
    font-family: inherit;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.time-slot.completed .time-slot-input[b-0vbs225r09] {
    opacity: 0.5;
    text-decoration: line-through;
}

.time-slot.drag-over[b-0vbs225r09] {
    background: rgba(99, 102, 241, 0.1);
    border: 2px dashed var(--accent-primary);
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

/* Current Slot Styling */
.time-slot.current-slot[b-0vbs225r09] {
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.time-slot.current-slot .time-slot-input[b-0vbs225r09],
.time-slot.current-slot .badge[b-0vbs225r09] {
    position: relative;
    z-index: 2;
}

@media (hover: hover) {
    .time-slot.current-slot:hover[b-0vbs225r09] {
        background: var(--bg-secondary);
        border-color: rgba(59, 130, 246, 0.5);
    }
}

.slot-progress-bar[b-0vbs225r09] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--progress, 0%);
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 12px,
        rgba(59, 130, 246, 0.12) 12px,
        rgba(59, 130, 246, 0.12) 13px
    );
    transition: height 0.5s ease;
    pointer-events: none;
    z-index: 1;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

/* Past Slot Styling - dimmed with subtle diagonal lines */
.time-slot.past-slot[b-0vbs225r09] {
    background: var(--bg-tertiary);
    position: relative;
    opacity: 0.5;
}

.time-slot.past-slot[b-0vbs225r09]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 12px,
        rgba(0, 0, 0, 0.03) 12px,
        rgba(0, 0, 0, 0.03) 13px
    );
    pointer-events: none;
    z-index: 1;
}

.time-slot.past-slot .time-slot-input[b-0vbs225r09],
.time-slot.past-slot .badge[b-0vbs225r09] {
    position: relative;
    z-index: 2;
}

@media (hover: hover) {
    .time-slot.past-slot:hover[b-0vbs225r09] {
        opacity: 0.8;
    }
}

.checkmark-section[b-0vbs225r09] {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
    position: relative;
    z-index: 2;
}

@media (hover: hover) {
    .checkmark-section:hover[b-0vbs225r09] {
        background: rgba(0, 0, 0, 0.05);
    }
}

.time-slot.completed .checkmark-section[b-0vbs225r09]::after {
    content: '✓';
    font-size: 1.5rem;
    color: var(--success);
    font-weight: 700;
}

/* Badge Styles */
.slot-badges[b-0vbs225r09] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    padding-right: 32px; /* Space for add button */
    flex-shrink: 0;
    min-height: 24px;
}

.badge[b-0vbs225r09] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: transparent;
    border: 1.5px solid;
    box-shadow: none;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: grab;
}

.badge:active[b-0vbs225r09] {
    cursor: grabbing;
}

/* Calendar badges are read-only synced data — keep default cursor.
   .calendar-badge { cursor: default; } below already wins by source order. */

/* The "+N" overflow indicator is a button, not a draggable badge. */
.badge.more-badge[b-0vbs225r09] {
    cursor: pointer;
}

.habit-badge[b-0vbs225r09] {
    /* Border and text color comes from inline style */
}

.task-badge[b-0vbs225r09] {
    border-color: #6b7280;
    color: #6b7280;
}

.calendar-badge[b-0vbs225r09] {
    cursor: default;
    opacity: 0.85;
    font-style: italic;
    background: transparent;
}

.badge-checkbox[b-0vbs225r09] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

@media (hover: hover) {
    .badge:hover .badge-checkbox[b-0vbs225r09] {
        opacity: 1;
    }
}

@media (hover: none) {
    .badge-checkbox[b-0vbs225r09] {
        opacity: 1;
        visibility: visible;
    }
}

.badge-text[b-0vbs225r09] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .badge-text:hover[b-0vbs225r09] {
        opacity: 0.7;
    }
}

.badge-remove[b-0vbs225r09] {
    background: none;
    border: none;
    color: currentColor;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0;
}

@media (hover: hover) {
    .badge:hover .badge-remove[b-0vbs225r09] {
        opacity: 1;
    }
}

@media (hover: none) {
    .badge-remove[b-0vbs225r09] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .badge-remove:hover[b-0vbs225r09] {
        background: rgba(0, 0, 0, 0.1);
    }
}

@media (hover: hover) {
    .badge:hover[b-0vbs225r09] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
}

.badge-more-container[b-0vbs225r09] {
    position: relative;
    display: inline-flex;
    z-index: 101;
}

.more-badge[b-0vbs225r09] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px dashed var(--border-color);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
}

@media (hover: hover) {
    .more-badge:hover[b-0vbs225r09] {
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.badge-dropdown[b-0vbs225r09] {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    max-width: 250px;
    z-index: 1001;
    overflow: hidden;
}

.badge-dropdown-item[b-0vbs225r09] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    transition: background 0.2s;
}

.badge-dropdown-item:last-child[b-0vbs225r09] {
    border-bottom: none;
}

@media (hover: hover) {
    .badge-dropdown-item:hover[b-0vbs225r09] {
        background: var(--hover-bg);
    }
}

.task-dropdown-item[b-0vbs225r09] {
    border-left: 3px solid #6b7280;
}

.badge-dropdown-text[b-0vbs225r09] {
    flex: 1;
    color: var(--text-primary);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
}

@media (hover: hover) {
    .badge-dropdown-text:hover[b-0vbs225r09] {
        opacity: 0.7;
    }
}

/* Dropdown item controls - always visible */
.badge-dropdown-item .badge-checkbox[b-0vbs225r09] {
    opacity: 1;
}

.badge-dropdown-item .badge-remove[b-0vbs225r09] {
    opacity: 1;
    color: var(--text-primary);
}

/* Modern Add Habit Button */
.add-habit-btn[b-0vbs225r09] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    border: 1px solid var(--border-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    box-shadow: none;
}

@media (hover: hover) {
    .time-slot:hover .add-habit-btn[b-0vbs225r09] {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (hover: none) {
    .add-habit-btn[b-0vbs225r09] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (hover: hover) {
    .add-habit-btn:hover[b-0vbs225r09] {
        background: var(--accent-primary);
        color: white;
        border-color: var(--accent-primary);
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
    }
}

.add-habit-btn:active[b-0vbs225r09] {
    transform: translateY(-50%) scale(0.95);
}

/* Responsive */
@media screen and (max-width: 768px) {
    /* Reduce time slot min-height on mobile */
    .time-slot[b-0vbs225r09] {
        min-height: 50px;
        padding: 0.35rem;
    }
    
    /* Always show actions on mobile since there is no hover */
    .add-habit-btn[b-0vbs225r09] {
        opacity: 1;
        pointer-events: auto;
        width: 36px;
        height: 36px;
        background: var(--bg-tertiary);
        color: var(--accent-primary);
        border: 1px solid var(--border-color);
    }
    
    .badge-remove[b-0vbs225r09] {
        opacity: 1;
        width: 24px;
        height: 24px;
    }
    
    @media (hover: hover) {
    
        .badge:hover[b-0vbs225r09] {
            transform: none;
        }
    
    }
}

@media print {
    .checkmark-section[b-0vbs225r09],
    .slot-progress-bar[b-0vbs225r09],
    .add-habit-btn[b-0vbs225r09],
    .badge-remove[b-0vbs225r09],
    .more-badge[b-0vbs225r09],
    .badge-dropdown[b-0vbs225r09] {
        display: none !important;
    }

    /* Remove progress indicators */
    .time-slot.current-slot[b-0vbs225r09]::before,
    .time-slot.past-slot[b-0vbs225r09]::before,
    .slot-progress-bar[b-0vbs225r09] {
        display: none !important;
    }

    .time-slot.current-slot[b-0vbs225r09],
    .time-slot.past-slot[b-0vbs225r09] {
        background: transparent !important;
        opacity: 1 !important;
    }
    
    .time-slot[b-0vbs225r09] {
        min-height: 40px !important;
        border-bottom: 1px solid #bbb !important; /* Visible lines */
        border-right: 1px solid #bbb !important; /* Visible lines */
        margin: 0 !important;
    }
    
    /* Remove bottom border for last row if needed, but usually grid handles it. 
       Actually, let's keep it to ensure lines are visible. */

    .time-slot-input[b-0vbs225r09] {
        font-size: 9pt;
        color: black !important;
        min-height: auto !important;
    }

    .habit-badge[b-0vbs225r09],
    .task-badge[b-0vbs225r09],
    .calendar-badge[b-0vbs225r09] {
        font-size: 7pt;
        border: 1px solid #000 !important;
        color: black !important;
        padding: 1px 4px;
        background: white !important;
    }
    
    .habit-badge[b-0vbs225r09] {
        border-color: currentColor !important;
    }
}
/* /Components/Pages/TimeboxingHistory.razor.rz.scp.css */
.history-container[b-o9ve5q63bm] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.history-header[b-o9ve5q63bm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #ddd);
}

.history-header h1[b-o9ve5q63bm] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1a1b40);
}

.btn-back[b-o9ve5q63bm] {
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary, #5c6bc0);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-back:hover[b-o9ve5q63bm] {
        background: var(--accent-secondary, #3f51b5);
        transform: translateY(-1px);
    }
}

/* Progress Section */
.progress-section[b-o9ve5q63bm] {
    margin-bottom: 3rem;
}

.progress-heading[b-o9ve5q63bm] {
    margin-bottom: 1rem;
}

.progress-kicker[b-o9ve5q63bm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-primary, #5c6bc0);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.progress-heading h2[b-o9ve5q63bm] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.25rem 0 0 0;
}

/* Timebox Cards */
.timebox-card[b-o9ve5q63bm] {
    background: white;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.2s;
}

@media (hover: hover) {
    .timebox-card:hover[b-o9ve5q63bm] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.timebox-card-today[b-o9ve5q63bm] {
    border: 2px solid var(--accent-primary, #5c6bc0);
    cursor: pointer;
}

@media (hover: hover) {
    .timebox-card-today:hover[b-o9ve5q63bm] {
        box-shadow: 0 6px 20px rgba(92, 107, 192, 0.15);
    }
}

.timebox-card-info[b-o9ve5q63bm] {
    padding: 1.5rem;
}

.timebox-card-info h3[b-o9ve5q63bm] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.timebox-meta[b-o9ve5q63bm] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.meta-item[b-o9ve5q63bm] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.timebox-card-actions[b-o9ve5q63bm] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.timebox-card-action[b-o9ve5q63bm] {
    padding: 0.5rem 1rem;
    background: var(--accent-primary, #5c6bc0);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (hover: hover) {
    .timebox-card-action:hover[b-o9ve5q63bm] {
        background: var(--accent-secondary, #3f51b5);
    }
}

/* History List */
.section-title[b-o9ve5q63bm] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    display: flex;
    align-items: center;
}

.timeboxes-list[b-o9ve5q63bm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timebox-header[b-o9ve5q63bm] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

@media (hover: hover) {
    .timebox-header:hover[b-o9ve5q63bm] {
        background: var(--hover-bg, #f5f5f5);
    }
}

.timebox-info h3[b-o9ve5q63bm] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.expand-btn[b-o9ve5q63bm] {
    background: none;
    border: none;
    color: var(--accent-primary, #5c6bc0);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .expand-btn:hover[b-o9ve5q63bm] {
        background: var(--hover-bg, #f5f5f5);
    }
}

/* Details */
.timebox-details[b-o9ve5q63bm] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color, #ddd);
}

.details-grid[b-o9ve5q63bm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 1.5rem;
}

.detail-column[b-o9ve5q63bm] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section h4[b-o9ve5q63bm] {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #666);
    margin: 0 0 0.75rem 0;
}

.tasks-list[b-o9ve5q63bm],
.timeslots-list[b-o9ve5q63bm] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-row[b-o9ve5q63bm],
.timeslot-row[b-o9ve5q63bm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    background: var(--card-bg, #f9f9f9);
}

.task-row.completed .task-text[b-o9ve5q63bm],
.timeslot-row.completed .slot-text[b-o9ve5q63bm] {
    text-decoration: line-through;
    opacity: 0.6;
}

.task-text[b-o9ve5q63bm],
.slot-text[b-o9ve5q63bm] {
    flex: 1;
}

.time-label[b-o9ve5q63bm] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--accent-primary, #5c6bc0);
    min-width: 50px;
}

.brain-dump-display[b-o9ve5q63bm] {
    padding: 1rem;
    background: var(--card-bg, #f9f9f9);
    border-radius: 6px;
    white-space: pre-wrap;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Empty State */
.empty-state[b-o9ve5q63bm] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-o9ve5q63bm] {
    font-size: 4rem;
    color: var(--border-color, #ddd);
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-o9ve5q63bm] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-o9ve5q63bm] {
    color: var(--text-secondary, #666);
    margin: 0 0 1.5rem 0;
}

.btn-primary[b-o9ve5q63bm] {
    padding: 0.75rem 1.5rem;
    background: var(--accent-primary, #5c6bc0);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-primary:hover[b-o9ve5q63bm] {
        background: var(--accent-secondary, #3f51b5);
    }
}

/* Loading Spinner */
.spinner-border[b-o9ve5q63bm] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-primary[b-o9ve5q63bm] {
    color: var(--accent-primary, #5c6bc0) !important;
}

.text-success[b-o9ve5q63bm] {
    color: #28a745 !important;
}

.text-muted[b-o9ve5q63bm] {
    color: #6c757d !important;
}

/* Dark Mode */
[data-bs-theme="dark"] .history-container[b-o9ve5q63bm] {
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --card-bg: #1f2937;
    --hover-bg: #374151;
}

[data-bs-theme="dark"] .history-header[b-o9ve5q63bm] {
    border-bottom: 2px solid #374151;
}

[data-bs-theme="dark"] .history-header h1[b-o9ve5q63bm] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .progress-heading h2[b-o9ve5q63bm],
[data-bs-theme="dark"] .section-title[b-o9ve5q63bm] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .timebox-card[b-o9ve5q63bm] {
    background: #1f2937;
    border-color: #374151;
}

[data-bs-theme="dark"] .timebox-card-today[b-o9ve5q63bm] {
    border: 2px solid #6366f1;
}

[data-bs-theme="dark"] .timebox-card-info h3[b-o9ve5q63bm],
[data-bs-theme="dark"] .timebox-info h3[b-o9ve5q63bm] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .timebox-meta[b-o9ve5q63bm] {
    color: #9ca3af;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .timebox-header:hover[b-o9ve5q63bm],
    [data-bs-theme="dark"] .expand-btn:hover[b-o9ve5q63bm] {
        background: #374151;
    }
}

[data-bs-theme="dark"] .timebox-details[b-o9ve5q63bm] {
    border-top-color: #374151;
}

[data-bs-theme="dark"] .detail-section h4[b-o9ve5q63bm] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .task-row[b-o9ve5q63bm],
[data-bs-theme="dark"] .timeslot-row[b-o9ve5q63bm],
[data-bs-theme="dark"] .brain-dump-display[b-o9ve5q63bm] {
    background: #111827;
    color: #f3f4f6;
}

[data-bs-theme="dark"] .task-text[b-o9ve5q63bm],
[data-bs-theme="dark"] .slot-text[b-o9ve5q63bm] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .empty-state h3[b-o9ve5q63bm] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .empty-state p[b-o9ve5q63bm] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .empty-icon[b-o9ve5q63bm] {
    color: #374151;
}

[data-bs-theme="dark"] .spinner-border[b-o9ve5q63bm] {
    border-color: #6366f1;
    border-right-color: transparent;
}

@media (max-width: 768px) {
    .history-container[b-o9ve5q63bm] {
        padding: 1rem;
    }

    .details-grid[b-o9ve5q63bm] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .history-header[b-o9ve5q63bm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .history-header h1[b-o9ve5q63bm] {
        font-size: 1.5rem;
    }

    .section-title[b-o9ve5q63bm] {
        font-size: 1.25rem;
    }

    .timebox-header[b-o9ve5q63bm] {
        padding: 1rem;
    }

    .timebox-card-info[b-o9ve5q63bm] {
        padding: 1rem;
    }

    .timebox-card-actions[b-o9ve5q63bm] {
        padding: 0 1rem 1rem 1rem;
        flex-wrap: wrap;
    }

    .timebox-details[b-o9ve5q63bm] {
        padding: 0 1rem 1rem 1rem;
    }

    .timebox-meta[b-o9ve5q63bm] {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .history-container[b-o9ve5q63bm] {
        padding: 0.75rem;
    }

    .history-header h1[b-o9ve5q63bm] {
        font-size: 1.25rem;
    }

    .btn-back[b-o9ve5q63bm] {
        padding: 0.5rem 1rem;
        width: 100%;
        justify-content: center;
    }

    .section-title[b-o9ve5q63bm] {
        font-size: 1.1rem;
    }

    .progress-heading h2[b-o9ve5q63bm] {
        font-size: 1.25rem;
    }

    .timebox-card-info h3[b-o9ve5q63bm],
    .timebox-info h3[b-o9ve5q63bm] {
        font-size: 1rem;
    }

    .timebox-card-action[b-o9ve5q63bm] {
        flex: 1;
        justify-content: center;
        font-size: 0.875rem;
    }

    .task-row[b-o9ve5q63bm],
    .timeslot-row[b-o9ve5q63bm] {
        padding: 0.375rem;
        gap: 0.5rem;
    }

    .time-label[b-o9ve5q63bm] {
        font-size: 0.8rem;
        min-width: 45px;
    }

    .brain-dump-display[b-o9ve5q63bm] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* Skeleton loading */
.skeleton-loading[b-o9ve5q63bm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
}

.skeleton-loading > [aria-hidden][b-o9ve5q63bm] {
    display: contents;
}

[b-o9ve5q63bm] .skeleton-timebox-card {
    gap: 0.75rem;
}
/* /Components/Shared/BadgeBar.razor.rz.scp.css */
.badge-bar[b-if3k5powmc] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.825rem;
    cursor: pointer;
    min-height: 36px;
    transition: border-color 120ms ease, background 120ms ease;
    font-variant-numeric: tabular-nums;
}

.badge-bar-level[b-if3k5powmc] {
    color: var(--accent-primary);
    font-weight: 600;
}

.badge-bar-next[b-if3k5powmc] {
    color: var(--text-muted);
    border-left: 1px solid var(--border-light);
    padding-left: 0.625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

@media (hover: hover) {
    .badge-bar:hover[b-if3k5powmc] {
        border-color: color-mix(in srgb, var(--accent-primary) 35%, transparent);
        background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-tertiary));
    }
}

@media (max-width: 576px) {
    .badge-bar-next[b-if3k5powmc] {
        display: none;
    }
}
/* /Components/Shared/Canvas/CanvasEdgesLayer.razor.rz.scp.css */
/* Flowing dashed motion on edges that touch an In-Progress task. The dash array is
   applied only when the parent <g> is marked active so dormant edges remain solid;
   stroke-dashoffset animates on the GPU compositor path (SVG paint, no layout). */
.canvas-edge[data-canvas-edge-active="true"] .canvas-edge-visible[b-uzize012s8] {
    stroke-dasharray: 6 8;
    animation: canvas-edge-flow-b-uzize012s8 var(--canvas-dur-flow) linear infinite;
}

@keyframes canvas-edge-flow-b-uzize012s8 {
    to { stroke-dashoffset: -14; }
}

/* Stage 7 — hover affordance on every edge. drop-shadow on the SVG path is composited;
   wrapped in @media (hover: hover) so it never fires on touch and never leaves a sticky
   highlight after a tap. */
@media (hover: hover) {
    .canvas-edge:hover .canvas-edge-visible[b-uzize012s8] {
        stroke-width: 2.5;
        filter: drop-shadow(0 0 6px var(--canvas-edge-glow));
        transition: stroke-width var(--canvas-dur-micro) var(--canvas-ease-out),
                    filter var(--canvas-dur-micro) var(--canvas-ease-out);
    }
}

@media (prefers-reduced-motion: reduce) {
    .canvas-edge[data-canvas-edge-active="true"] .canvas-edge-visible[b-uzize012s8] {
        animation: none;
        stroke-dasharray: none;
    }
    .canvas-edge:hover .canvas-edge-visible[b-uzize012s8] {
        transition: none;
    }
}
/* /Components/Shared/Canvas/CanvasMinimap.razor.rz.scp.css */
.canvas-minimap[b-k9s37x3651] {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 10;
    width: 200px;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.canvas-minimap-label[b-k9s37x3651] {
    padding: 0.25rem 0.5rem;
    font-size: 0.688rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.canvas-minimap-svg[b-k9s37x3651] {
    display: block;
    width: 200px;
    height: 140px;
    background-color: var(--bg-secondary);
    cursor: crosshair;
}

.canvas-minimap-empty[b-k9s37x3651] {
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    background-color: var(--bg-secondary);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stage 5: live viewport-rect overlay. Coords are computed in pure CSS via calc()
   from CSS vars set on .canvas-viewport (--canvas-vp-x/y/w/h, updated every frame by
   canvas-camera.js) and the SVG's own bounds vars (--mm-min-x/y, --mm-scale, --mm-pad,
   set inline in CanvasMinimap.razor). Painted last in the SVG so it overlays the
   task/note rects. */
.canvas-minimap-viewport[b-k9s37x3651] {
    fill: color-mix(in oklab, var(--accent-primary) 14%, transparent);
    stroke: var(--accent-primary);
    stroke-width: 1;
    pointer-events: none;
    rx: 2;
}

/* Hide on narrow screens — minimap eats real estate users need. */
@media (max-width: 768px) {
    .canvas-minimap[b-k9s37x3651] {
        display: none;
    }
}
/* /Components/Shared/Canvas/CanvasPalette.razor.rz.scp.css */
.canvas-palette[b-3xsgpnt1rp] {
    flex-shrink: 0;
    width: 280px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-subtle);
    background-color: var(--bg-primary);
    overflow: hidden;
    transition: width 160ms ease;
}

.canvas-palette:has(.canvas-palette-collapse[aria-label*="Expand"])[b-3xsgpnt1rp],
.canvas-palette:has(.canvas-palette-collapse[title*="Expand"])[b-3xsgpnt1rp] {
    /* Width when collapsed: just enough for the chevron column */
    width: 2.5rem;
}

.canvas-palette-header[b-3xsgpnt1rp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 2.5rem;
}

.canvas-palette-title[b-3xsgpnt1rp] {
    font-size: 0.813rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.canvas-palette-collapse[b-3xsgpnt1rp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
}

@media (hover: hover) {
    .canvas-palette-collapse:hover[b-3xsgpnt1rp] {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
    }
}

.canvas-palette-tabs[b-3xsgpnt1rp] {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
}

.canvas-palette-tab[b-3xsgpnt1rp] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.813rem;
    cursor: pointer;
}

.canvas-palette-tab.active[b-3xsgpnt1rp] {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
    font-weight: 500;
}

.canvas-palette-count[b-3xsgpnt1rp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.375rem;
    background-color: var(--bg-secondary);
    border-radius: 999px;
    font-size: 0.688rem;
    font-weight: 500;
}

.canvas-palette-search[b-3xsgpnt1rp] {
    position: relative;
    padding: 0.5rem;
}

.canvas-palette-search-icon[b-3xsgpnt1rp] {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.813rem;
    pointer-events: none;
}

.canvas-palette-search-input[b-3xsgpnt1rp] {
    width: 100%;
    padding: 0.375rem 0.5rem 0.375rem 1.75rem;
    font-size: 16px; /* prevent iOS Safari zoom on focus per mobile rule #43 */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
}

.canvas-palette-search-input:focus[b-3xsgpnt1rp] {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
    border-color: transparent;
}

.canvas-palette-list[b-3xsgpnt1rp] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.5rem 0.5rem;
}

.canvas-palette-empty[b-3xsgpnt1rp] {
    padding: 1.5rem 0.5rem;
    text-align: center;
    font-size: 0.813rem;
    color: var(--text-muted);
}

.canvas-palette-item[b-3xsgpnt1rp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    margin-bottom: 0.25rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    cursor: grab;
    font-size: 0.813rem;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 120ms ease, transform 80ms ease;
}

.canvas-palette-item:active[b-3xsgpnt1rp] {
    cursor: grabbing;
}

@media (hover: hover) {
    .canvas-palette-item:not(.is-placed):hover[b-3xsgpnt1rp] {
        background-color: var(--bg-secondary);
    }
}

.canvas-palette-item.is-placed[b-3xsgpnt1rp] {
    opacity: 0.5;
    cursor: default;
}

.canvas-palette-item.is-completed .canvas-palette-item-title[b-3xsgpnt1rp] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.canvas-palette-item-stripe[b-3xsgpnt1rp] {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 2px;
    width: 3px;
    border-radius: 2px;
}

.canvas-palette-item-title[b-3xsgpnt1rp] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.canvas-palette-item-badge[b-3xsgpnt1rp] {
    flex-shrink: 0;
    padding: 0.125rem 0.375rem;
    background-color: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.688rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.canvas-palette-item-priority[b-3xsgpnt1rp] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.25rem;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: -0.5px;
}

/* T2.1: sticky-note row in the Notes tab. Pastel left swatch + truncated text;
   clicking pans the viewport to the note's center. */
.canvas-palette-note[b-3xsgpnt1rp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin-bottom: 0.25rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.813rem;
    text-align: left;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 120ms ease;
}

@media (hover: hover) {
    .canvas-palette-note:hover[b-3xsgpnt1rp] {
        background-color: var(--bg-secondary);
    }
}

.canvas-palette-note-swatch[b-3xsgpnt1rp] {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.canvas-palette-note-text[b-3xsgpnt1rp] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.canvas-task-priority-medium[b-3xsgpnt1rp]   { color: #f59e0b; }
.canvas-task-priority-high[b-3xsgpnt1rp]     { color: #ef4444; }
.canvas-task-priority-critical[b-3xsgpnt1rp] { color: #ef4444; }

/* Hide palette on touch devices in Phase 6 — for now palette stays visible but compressed. */
@media (max-width: 576px) {
    .canvas-palette[b-3xsgpnt1rp] {
        width: 220px;
    }
}
/* /Components/Shared/Canvas/CanvasSearchBox.razor.rz.scp.css */
.canvas-search-wrapper[b-m0r2nwkunz] {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    width: min(420px, calc(100% - 2rem));
}

.canvas-search-box[b-m0r2nwkunz] {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.canvas-search-icon[b-m0r2nwkunz] {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    pointer-events: none;
}

.canvas-search-input[b-m0r2nwkunz] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 16px; /* prevent iOS Safari zoom */
    padding: 0.625rem 2.5rem 0.625rem 2.25rem;
}

.canvas-search-close[b-m0r2nwkunz] {
    position: absolute;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
}

.canvas-search-close:hover[b-m0r2nwkunz] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.canvas-search-results[b-m0r2nwkunz] {
    margin-top: 0.25rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    max-height: 60vh;
    overflow-y: auto;
}

.canvas-search-result[b-m0r2nwkunz] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    text-align: left;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.canvas-search-result:hover[b-m0r2nwkunz],
.canvas-search-result.is-first[b-m0r2nwkunz] {
    background-color: var(--bg-secondary);
}

.canvas-search-result-icon[b-m0r2nwkunz] {
    color: var(--text-muted);
    flex-shrink: 0;
}

.canvas-search-result-text[b-m0r2nwkunz] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-search-empty[b-m0r2nwkunz],
.canvas-search-more[b-m0r2nwkunz] {
    padding: 0.75rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.813rem;
}
/* /Components/Shared/Canvas/CanvasShortcutOverlay.razor.rz.scp.css */
.canvas-shortcut-overlay[b-gua4nj47az] {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    padding: 1rem;
}

.canvas-shortcut-panel[b-gua4nj47az] {
    width: min(620px, 100%);
    max-height: 80vh;
    overflow-y: auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.canvas-shortcut-header[b-gua4nj47az] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.canvas-shortcut-header h3[b-gua4nj47az] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.canvas-shortcut-close[b-gua4nj47az] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.canvas-shortcut-close:hover[b-gua4nj47az] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.canvas-shortcut-grid[b-gua4nj47az] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    padding: 1.25rem;
}

@media (max-width: 540px) {
    .canvas-shortcut-grid[b-gua4nj47az] {
        grid-template-columns: 1fr;
    }
}

.canvas-shortcut-group h4[b-gua4nj47az] {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.canvas-shortcut-group dl[b-gua4nj47az] {
    margin: 0;
    display: grid;
    gap: 0.375rem;
}

.canvas-shortcut-row[b-gua4nj47az] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.813rem;
}

.canvas-shortcut-row dt[b-gua4nj47az] {
    color: var(--text-primary);
}

.canvas-shortcut-row dd[b-gua4nj47az] {
    margin: 0;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
}

.canvas-shortcut-row kbd[b-gua4nj47az] {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-bottom-width: 2px;
    border-radius: 4px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.7rem;
    color: var(--text-primary);
}
/* /Components/Shared/Canvas/CanvasStickyNoteCard.razor.rz.scp.css */
.canvas-sticky-note[b-y7cwzu3y10] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    display: flex;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    box-shadow: var(--canvas-card-shadow-rest);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* T1.16: hardcoded foreground (not a token) is intentional. Sticky notes use fixed
       pastel backgrounds in both light and dark mode so they keep their "physical paper"
       feel. Pairing that with the slate-800 hex guarantees ~7:1 contrast on every preset
       in the palette below — switching to var(--text-primary) would invert in dark mode
       and become white-on-pastel which fails WCAG AA. */
    color: #1f2937;
    overflow: hidden;
    transition: box-shadow var(--canvas-dur-micro) var(--canvas-ease-out);
    /* Entrance: opacity-only stagger, redeclared per-component because scoped CSS isolates
       keyframe lookup. See CanvasTaskCard.razor.css for the rationale on staying off the
       individual transform properties (translate/scale). */
    animation: canvas-note-in-b-y7cwzu3y10 var(--canvas-dur-pop) var(--canvas-ease-out) both;
    /* Stagger delay is provided inline on the element (animation-delay: Nms). See the
       matching note in CanvasTaskCard.razor.css. */
}

@keyframes canvas-note-in-b-y7cwzu3y10 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.canvas-sticky-note:active[b-y7cwzu3y10] {
    cursor: grabbing;
}

.canvas-sticky-note.canvas-node-dragging[b-y7cwzu3y10],
.canvas-sticky-note.canvas-node-resizing[b-y7cwzu3y10] {
    z-index: 100;
    box-shadow: var(--canvas-card-shadow-drag);
}

.canvas-sticky-note.canvas-node-selected[b-y7cwzu3y10] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Selection pulse on a pseudo-element so it never touches the note's own `animation`
   property — see the matching note in CanvasTaskCard.razor.css for the deselect-flash
   rationale. */
.canvas-sticky-note.canvas-node-selected[b-y7cwzu3y10]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
    animation: canvas-note-select-pulse-b-y7cwzu3y10 600ms var(--canvas-ease-out) 1;
}

@keyframes canvas-note-select-pulse-b-y7cwzu3y10 {
    0%   { box-shadow: 0 0 0 0  var(--canvas-selection-pulse); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

/* P6.a — keyboard focus ring. Thicker than selection so the two visual states differ. */
.canvas-sticky-note:focus-visible[b-y7cwzu3y10] {
    outline: 3px solid var(--accent-primary);
    outline-offset: 3px;
}

/* P6.e — reduced-motion: kill entrance + pulse + transitions; static states still apply. */
@media (prefers-reduced-motion: reduce) {
    .canvas-sticky-note[b-y7cwzu3y10],
    .canvas-sticky-note.canvas-node-selected[b-y7cwzu3y10]::after,
    .canvas-sticky-note-toolbar[b-y7cwzu3y10],
    .canvas-anchor[b-y7cwzu3y10],
    .canvas-sticky-delete[b-y7cwzu3y10] {
        transition: none !important;
        animation: none !important;
    }
}

@media (hover: hover) {
    .canvas-sticky-note:hover[b-y7cwzu3y10] {
        box-shadow: var(--canvas-card-shadow-hover);
    }
    .canvas-sticky-note:hover .canvas-sticky-note-toolbar[b-y7cwzu3y10] {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Touch: toolbar permanently visible at reduced opacity */
@media (hover: none) {
    .canvas-sticky-note-toolbar[b-y7cwzu3y10] {
        opacity: 0.85;
        pointer-events: auto;
    }
}

.canvas-sticky-note-content[b-y7cwzu3y10] {
    flex: 1;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.canvas-sticky-note-content.is-empty[b-y7cwzu3y10] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-sticky-note-placeholder[b-y7cwzu3y10] {
    color: rgba(31, 41, 55, 0.5);
    font-style: italic;
    font-size: 0.813rem;
}

.canvas-sticky-note-textarea[b-y7cwzu3y10] {
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: inherit;
    font-family: inherit;
    font-size: 16px; /* prevent iOS Safari zoom on focus per mobile rule #43 */
    line-height: 1.4;
    padding: 0;
}

/* ---- Hover toolbar ---- */
.canvas-sticky-note-toolbar[b-y7cwzu3y10] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.canvas-sticky-color-swatch[b-y7cwzu3y10] {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    cursor: pointer;
}

.canvas-sticky-color-swatch.selected[b-y7cwzu3y10] {
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.canvas-sticky-color-swatch:focus-visible[b-y7cwzu3y10] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.canvas-sticky-toolbar-divider[b-y7cwzu3y10] {
    width: 1px;
    height: 1rem;
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0 0.125rem;
}

.canvas-sticky-delete[b-y7cwzu3y10] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #6b7280;
    font-size: 0.75rem;
    cursor: pointer;
}

.canvas-sticky-delete:hover[b-y7cwzu3y10] {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.08);
}

/* ---- Resize handle ---- */
.canvas-sticky-resize-handle[b-y7cwzu3y10] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    opacity: 0.45;
    transition: opacity var(--canvas-dur-micro) var(--canvas-ease-out);
    /* Two parallel diagonal grip lines — reads as a corner-resize affordance instead of
       the previous single line that looked more like a glitch than a handle. The
       hardcoded #1f2937 sticky-note foreground means rgba(0,0,0,.45) sits comfortably
       on every pastel preset. */
    background:
        linear-gradient(135deg,
            transparent 38%,
            rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0.45) 46%,
            transparent 46%, transparent 60%,
            rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.45) 68%,
            transparent 68%);
}

@media (hover: hover) {
    .canvas-sticky-note:hover .canvas-sticky-resize-handle[b-y7cwzu3y10] {
        opacity: 1;
    }
}

@media (pointer: coarse) {
    .canvas-sticky-resize-handle[b-y7cwzu3y10] {
        width: 22px;
        height: 22px;
        opacity: 0.8;
    }
}

/* ---- Edge anchor dots ---- */
.canvas-anchor[b-y7cwzu3y10] {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    cursor: crosshair;
    opacity: 0;
    transition: opacity 120ms ease, transform 80ms ease;
    z-index: 5;
}

.canvas-anchor-top[b-y7cwzu3y10]    { top: -6px;    left: 50%; transform: translateX(-50%); }
.canvas-anchor-right[b-y7cwzu3y10]  { top: 50%;     right: -6px; transform: translateY(-50%); }
.canvas-anchor-bottom[b-y7cwzu3y10] { bottom: -6px; left: 50%; transform: translateX(-50%); }
.canvas-anchor-left[b-y7cwzu3y10]   { top: 50%;     left: -6px; transform: translateY(-50%); }

.canvas-anchor-top:hover[b-y7cwzu3y10]    { transform: translateX(-50%) scale(1.4); }
.canvas-anchor-right:hover[b-y7cwzu3y10]  { transform: translateY(-50%) scale(1.4); }
.canvas-anchor-bottom:hover[b-y7cwzu3y10] { transform: translateX(-50%) scale(1.4); }
.canvas-anchor-left:hover[b-y7cwzu3y10]   { transform: translateY(-50%) scale(1.4); }

@media (hover: hover) {
    .canvas-sticky-note:hover .canvas-anchor[b-y7cwzu3y10] {
        opacity: 1;
    }
}

/* Edge-create drop target: see CanvasTaskCard.razor.css for the rationale. Sticky notes
   use the same `canvas-edge-create-target` class on their root element. */
.canvas-sticky-note.canvas-edge-create-target .canvas-anchor[b-y7cwzu3y10] {
    opacity: 1;
}

.canvas-sticky-note.canvas-edge-create-target .canvas-anchor:hover[b-y7cwzu3y10] {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-primary) 35%, transparent),
                0 1px 3px rgba(0, 0, 0, 0.25);
}

@media (hover: none) {
    .canvas-anchor[b-y7cwzu3y10] {
        opacity: 0.5;
        width: 16px;
        height: 16px;
    }
    .canvas-anchor-top[b-y7cwzu3y10]    { top: -8px; }
    .canvas-anchor-right[b-y7cwzu3y10]  { right: -8px; }
    .canvas-anchor-bottom[b-y7cwzu3y10] { bottom: -8px; }
    .canvas-anchor-left[b-y7cwzu3y10]   { left: -8px; }
}

/* T2.3: mobile read-only — hide every write-affordance on the note. The note text is
   still visible; the user can pan/zoom and tap to view but can't edit/color/resize/delete. */
:global([data-touch="true"]) .canvas-anchor[b-y7cwzu3y10],
:global([data-touch="true"]) .canvas-sticky-note-toolbar[b-y7cwzu3y10],
:global([data-touch="true"]) .canvas-sticky-resize-handle[b-y7cwzu3y10] {
    display: none;
}
/* /Components/Shared/Canvas/CanvasTaskCard.razor.rz.scp.css */
.canvas-task-card[b-lmuf8x4vz1] {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* Symmetric padding now that the left colour stripe is hidden. */
    padding: 0.625rem 0.75rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: var(--canvas-card-shadow-rest);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: box-shadow var(--canvas-dur-micro) var(--canvas-ease-out), transform 0ms;
    will-change: auto;
    /* Entrance: stagger via --canvas-stagger-i passed inline by parent. Opacity-only so
       it can NEVER conflict with the inline `transform: translate3d(X,Y,0)` that positions
       the card. An earlier draft animated `translate`/`scale` (the individual transform
       properties); some Chromium configurations silently dropped those keyframes which
       left the from-state opacity:0 stuck via `animation-fill-mode: both` — the cards
       went invisible. Pure opacity is bulletproof and reads as a tasteful fade-in. */
    animation: canvas-card-in-b-lmuf8x4vz1 var(--canvas-dur-pop) var(--canvas-ease-out) both;
    /* Per-card stagger delay is set inline on the element (animation-delay: Nms) by
       CanvasTaskCard.razor. Sticking to a plain CSS property name avoids the `--` token
       that the Razor parser was misinterpreting when adjacent to an in-tag comment. */
}

@keyframes canvas-card-in-b-lmuf8x4vz1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.canvas-task-card:active[b-lmuf8x4vz1] {
    cursor: grabbing;
}

.canvas-task-card.canvas-node-dragging[b-lmuf8x4vz1] {
    cursor: grabbing;
    z-index: 100;
    box-shadow: var(--canvas-card-shadow-drag);
}

.canvas-task-card.canvas-node-selected[b-lmuf8x4vz1] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* The selection pulse rides a pseudo-element, NOT the card's own `animation` property.
   If it set `animation` on the card, removing .canvas-node-selected would revert the
   property to the entrance `canvas-card-in` keyframe and re-run the opacity 0→1 fade —
   the card would flash on every deselect. The ::after is created/destroyed with the
   class, runs its own animation once, and leaves the card's `animation` untouched. */
.canvas-task-card.canvas-node-selected[b-lmuf8x4vz1]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
    animation: canvas-select-pulse-b-lmuf8x4vz1 600ms var(--canvas-ease-out) 1;
}

@keyframes canvas-select-pulse-b-lmuf8x4vz1 {
    0%   { box-shadow: 0 0 0 0  var(--canvas-selection-pulse); }
    100% { box-shadow: 0 0 0 10px transparent; }
}

/* P6.a — keyboard focus ring. Slightly thicker than the selection outline so a focused-but-
   not-selected card looks distinct from a selected one. Selected + focused stacks both. */
.canvas-task-card:focus-visible[b-lmuf8x4vz1] {
    outline: 3px solid var(--accent-primary);
    outline-offset: 3px;
}

/* P6.e — respect prefers-reduced-motion. Kill all animations (entrance + pulse) and
   transitions; hover/selected stays as static state changes. */
@media (prefers-reduced-motion: reduce) {
    .canvas-task-card[b-lmuf8x4vz1],
    .canvas-task-card.canvas-node-selected[b-lmuf8x4vz1]::after,
    .canvas-anchor[b-lmuf8x4vz1],
    .canvas-task-remove[b-lmuf8x4vz1] {
        transition: none !important;
        animation: none !important;
    }
    .canvas-anchor-top:hover[b-lmuf8x4vz1],
    .canvas-anchor-right:hover[b-lmuf8x4vz1],
    .canvas-anchor-bottom:hover[b-lmuf8x4vz1],
    .canvas-anchor-left:hover[b-lmuf8x4vz1] {
        /* Keep the transform reset (no scale) so the user knows hover registered. */
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (hover: hover) {
    .canvas-task-card:hover[b-lmuf8x4vz1] {
        box-shadow: var(--canvas-card-shadow-hover);
    }
    .canvas-task-card:hover .canvas-task-remove[b-lmuf8x4vz1] {
        opacity: 1;
    }
}

.canvas-task-card.is-completed .canvas-task-title[b-lmuf8x4vz1] {
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Left color stripe — anchored to the card's left edge.
   Hidden for now (custom task colour removed from the displayed item); the markup span
   and stripeColor plumbing are kept so it can be re-enabled by dropping this display:none. */
.canvas-task-stripe[b-lmuf8x4vz1] {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
}

/* Floating × in the top-right corner. Hidden until hover on fine pointers,
   always visible on touch (no hover state). */
.canvas-task-remove[b-lmuf8x4vz1] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease;
}

@media (hover: none) {
    .canvas-task-remove[b-lmuf8x4vz1] {
        opacity: 0.6;
    }
}

.canvas-task-remove:hover[b-lmuf8x4vz1] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    opacity: 1;
}

.canvas-task-body[b-lmuf8x4vz1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding-right: 1.25rem; /* room for the × button */
}

.canvas-task-checkbox[b-lmuf8x4vz1] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.canvas-task-checkbox input[b-lmuf8x4vz1] {
    cursor: pointer;
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-primary);
}

/* Priority-tinted checkbox (matches the list/kanban checkbox palette). Note: accent-color
   only tints the CHECKED state of a native checkbox — the always-visible priority badge
   remains the primary cue for unchecked canvas tasks. Low keeps the default accent. */
.canvas-task-checkbox.priority-medium input[b-lmuf8x4vz1] { accent-color: #3b82f6; }
.canvas-task-checkbox.priority-high input[b-lmuf8x4vz1] { accent-color: #f97316; }
.canvas-task-checkbox.priority-critical input[b-lmuf8x4vz1] { accent-color: #ef4444; }

.canvas-task-title[b-lmuf8x4vz1] {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.canvas-task-favorite[b-lmuf8x4vz1] {
    color: #f59e0b;
    font-size: 0.75rem;
}

.canvas-task-meta[b-lmuf8x4vz1] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-left: 1.5rem; /* align with title (past the checkbox) */
    font-size: 0.75rem;
    color: var(--text-muted);
}

.canvas-task-priority[b-lmuf8x4vz1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 4px;
    background-color: var(--bg-secondary);
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: -0.5px;
}

.canvas-task-priority-medium[b-lmuf8x4vz1] { color: #f59e0b; }
.canvas-task-priority-high[b-lmuf8x4vz1]   { color: #ef4444; }
.canvas-task-priority-critical[b-lmuf8x4vz1] {
    background-color: #ef4444;
    color: #ffffff;
}

.canvas-task-due[b-lmuf8x4vz1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.canvas-task-due.is-overdue[b-lmuf8x4vz1] {
    color: #ef4444;
    font-weight: 500;
}

/* ---- Edge anchor dots ---- */
.canvas-anchor[b-lmuf8x4vz1] {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--accent-primary);
    border: 2px solid var(--bg-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    cursor: crosshair;
    opacity: 0;
    transition: opacity 120ms ease, transform 80ms ease;
    z-index: 5;
}

.canvas-anchor:hover[b-lmuf8x4vz1] {
    transform: scale(1.4);
}

.canvas-anchor-top[b-lmuf8x4vz1]    { top: -6px;    left: 50%; transform: translateX(-50%); }
.canvas-anchor-right[b-lmuf8x4vz1]  { top: 50%;     right: -6px; transform: translateY(-50%); }
.canvas-anchor-bottom[b-lmuf8x4vz1] { bottom: -6px; left: 50%; transform: translateX(-50%); }
.canvas-anchor-left[b-lmuf8x4vz1]   { top: 50%;     left: -6px; transform: translateY(-50%); }

.canvas-anchor-top:hover[b-lmuf8x4vz1]    { transform: translateX(-50%) scale(1.4); }
.canvas-anchor-right:hover[b-lmuf8x4vz1]  { transform: translateY(-50%) scale(1.4); }
.canvas-anchor-bottom:hover[b-lmuf8x4vz1] { transform: translateX(-50%) scale(1.4); }
.canvas-anchor-left:hover[b-lmuf8x4vz1]   { transform: translateY(-50%) scale(1.4); }

@media (hover: hover) {
    .canvas-task-card:hover .canvas-anchor[b-lmuf8x4vz1] {
        opacity: 1;
    }
}

/* Edge-create drop target: while another card is being wired toward this one, force
   all four anchors visible so the user can see exactly where the drop will land.
   canvas-camera.js adds/removes this class on the host node during the gesture. */
.canvas-task-card.canvas-edge-create-target .canvas-anchor[b-lmuf8x4vz1] {
    opacity: 1;
}

.canvas-task-card.canvas-edge-create-target .canvas-anchor:hover[b-lmuf8x4vz1] {
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-primary) 35%, transparent),
                0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Touch devices don't have hover — anchors are always visible but dimmer to avoid
   clutter; users tap-and-drag to wire. */
@media (hover: none) {
    .canvas-anchor[b-lmuf8x4vz1] {
        opacity: 0.5;
        width: 16px;
        height: 16px;
    }
    .canvas-anchor-top[b-lmuf8x4vz1]    { top: -8px; }
    .canvas-anchor-right[b-lmuf8x4vz1]  { right: -8px; }
    .canvas-anchor-bottom[b-lmuf8x4vz1] { bottom: -8px; }
    .canvas-anchor-left[b-lmuf8x4vz1]   { left: -8px; }
}

/* T2.3: mobile read-only — hide write-affordances. The data-touch attribute is set on
   the canvas-root ancestor; :global() reaches above this component's scope per rule #33b.
   We hide rather than disable so the card looks clean instead of half-functional. */
:global([data-touch="true"]) .canvas-anchor[b-lmuf8x4vz1],
:global([data-touch="true"]) .canvas-task-remove[b-lmuf8x4vz1] {
    display: none;
}
/* /Components/Shared/Canvas/CanvasToolbar.razor.rz.scp.css */
.canvas-toolbar[b-kn9dasyzxg] {
    position: absolute;
    /* Sit above the global AI assistant widget (TrackerShared, position: fixed; right:20;
       bottom:20; 60×60). 5.5rem (88px) clears the widget's top edge with an 8px buffer
       so a stray click on either is unambiguous. */
    bottom: 5.5rem;
    right: 1rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    /* Stage 6: frosted-glass treatment. color-mix gives the panel a tinted translucency
       so cards passing under the toolbar peek through subtly; backdrop-filter blurs them
       so the toolbar's content stays readable. Gracefully degrades to solid on browsers
       without backdrop-filter (older Firefox ESR) because the color-mix still lands on
       a near-opaque base. */
    background-color: color-mix(in oklab, var(--bg-primary) 88%, transparent);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.canvas-toolbar-btn[b-kn9dasyzxg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--canvas-dur-micro) ease,
                transform var(--canvas-dur-micro) var(--canvas-ease-out);
}

.canvas-toolbar-zoom[b-kn9dasyzxg] {
    min-width: 3.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.canvas-toolbar-btn:disabled[b-kn9dasyzxg] {
    opacity: 0.4;
    cursor: not-allowed;
}

@media (hover: hover) {
    .canvas-toolbar-btn:not(:disabled):hover[b-kn9dasyzxg] {
        background-color: var(--bg-secondary);
        /* Stage 6: subtle hover lift. Composes safely — buttons have no inline transform. */
        transform: translateY(-1px);
    }
}

.canvas-toolbar-btn:focus-visible[b-kn9dasyzxg] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.canvas-toolbar-btn.is-active[b-kn9dasyzxg] {
    background-color: color-mix(in srgb, var(--accent-primary) 18%, transparent);
    color: var(--accent-primary);
}

/* P6.e — reduced-motion: hover backgrounds and pressed states snap instantly. */
@media (prefers-reduced-motion: reduce) {
    .canvas-toolbar-btn[b-kn9dasyzxg] {
        transition: none !important;
    }
}

.canvas-toolbar-divider[b-kn9dasyzxg] {
    width: 1px;
    height: 1.5rem;
    background-color: var(--border-subtle);
    margin: 0 0.125rem;
}

/* Larger touch targets on coarse pointers per mobile rule #44 (48px). */
@media (pointer: coarse) {
    .canvas-toolbar-btn[b-kn9dasyzxg] {
        min-width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }
    .canvas-toolbar-zoom[b-kn9dasyzxg] {
        min-width: 4rem;
    }
}
/* /Components/Shared/Canvas/EditEdgeModal.razor.rz.scp.css */
/* Edit-connection modal — mirrors the ConfirmationModal styling vocabulary so the
   canvas's edge editor feels like the rest of the suite's modal family. The global
   .modal-overlay / .modal-content / .modal-header / .modal-body / .modal-footer
   chrome comes from app.css; this file fills in the button + form styles those
   global rules don't cover. */

.modal-small[b-lrpobvqrv5] {
    max-width: 450px;
}

/* Close (×) button — 48px target, transparent, hover-tints the surface. */
.btn-close[b-lrpobvqrv5] {
    min-width: 48px;
    min-height: 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-lrpobvqrv5] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

/* Footer split layout — Delete on the left, Cancel/Save on the right. */
.modal-footer-split[b-lrpobvqrv5] {
    justify-content: space-between;
}

.modal-footer-actions[b-lrpobvqrv5] {
    display: inline-flex;
    gap: 0.5rem;
}

/* Form input — bare <input> styling so the Label field looks like a proper field
   and not the raw browser default that comes from the dark theme + no border. */
.form-input[b-lrpobvqrv5] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1.5px solid var(--input-border);
    border-radius: 8px;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input[b-lrpobvqrv5]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-lrpobvqrv5] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-primary) 25%, transparent);
}

/* Buttons — same vocabulary as ConfirmationModal (.btn-secondary / .btn-danger /
   .btn-primary). Scoped here because the global app.css only ships .btn-primary
   styling and a few of its variants; we want this modal to look polished in
   isolation rather than depend on what happens to be globally defined. */
.btn-secondary[b-lrpobvqrv5],
.btn-danger[b-lrpobvqrv5],
.btn-primary[b-lrpobvqrv5] {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-secondary[b-lrpobvqrv5] {
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    box-shadow: none;
}

@media (hover: hover) {
    .btn-secondary:hover[b-lrpobvqrv5] {
        background: var(--hover-bg);
        border-color: var(--text-secondary);
        transform: translateY(-1px);
    }
}

.btn-danger[b-lrpobvqrv5] {
    background: linear-gradient(135deg, var(--danger) 0%, color-mix(in srgb, var(--danger) 85%, black) 100%);
    color: #ffffff;
}

@media (hover: hover) {
    .btn-danger:hover[b-lrpobvqrv5] {
        background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 90%, black) 0%, color-mix(in srgb, var(--danger) 70%, black) 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 10px color-mix(in srgb, var(--danger) 30%, transparent);
    }
}

.btn-primary[b-lrpobvqrv5] {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: #ffffff;
}

@media (hover: hover) {
    .btn-primary:hover[b-lrpobvqrv5] {
        background: linear-gradient(135deg, var(--accent-secondary) 0%, color-mix(in srgb, var(--accent-secondary) 75%, black) 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 10px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    }
}

.btn-secondary:active[b-lrpobvqrv5],
.btn-danger:active[b-lrpobvqrv5],
.btn-primary:active[b-lrpobvqrv5] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ---- Edge-specific elements (kept from before) ---- */

.edge-color-picker[b-lrpobvqrv5] {
    display: inline-flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

.edge-color-swatch[b-lrpobvqrv5] {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    transition: transform 0.12s var(--canvas-ease-out, ease-out), box-shadow 0.12s ease;
}

@media (hover: hover) {
    .edge-color-swatch:hover[b-lrpobvqrv5] {
        transform: scale(1.1);
    }
}

.edge-color-swatch.selected[b-lrpobvqrv5] {
    box-shadow: 0 0 0 2px var(--accent-primary);
}

.edge-color-swatch:focus-visible[b-lrpobvqrv5] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.edge-color-swatch-default[b-lrpobvqrv5] {
    background-color: var(--bg-secondary);
    border-style: dashed;
}

/* Mobile fullscreen — same shape as ConfirmationModal's mobile rules. */
@media (max-width: 576px) {
    .modal-content[b-lrpobvqrv5],
    .modal-content.modal-small[b-lrpobvqrv5] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-footer-split[b-lrpobvqrv5] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Components/Shared/CountdownTimer.razor.rz.scp.css */
.countdown-container[b-9z9w3cbphb] {
    background: linear-gradient(135deg, rgba(92, 107, 192, 0.1) 0%, rgba(92, 107, 192, 0.05) 100%);
    border: 1px solid rgba(92, 107, 192, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin: 1rem 0;
}

.countdown-header[b-9z9w3cbphb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.countdown-icon[b-9z9w3cbphb] {
    font-size: 1.25rem;
    color: #5c6bc0;
}

.countdown-label[b-9z9w3cbphb] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.countdown-timer[b-9z9w3cbphb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.countdown-segment[b-9z9w3cbphb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.countdown-value[b-9z9w3cbphb] {
    font-size: 2rem;
    font-weight: 700;
    color: #5c6bc0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-unit[b-9z9w3cbphb] {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.countdown-separator[b-9z9w3cbphb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(92, 107, 192, 0.5);
    margin-bottom: 1rem;
}

.countdown-message[b-9z9w3cbphb] {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 480px) {
    .countdown-segment[b-9z9w3cbphb] {
        min-width: 45px;
    }

    .countdown-value[b-9z9w3cbphb] {
        font-size: 1.5rem;
    }

    .countdown-separator[b-9z9w3cbphb] {
        font-size: 1.25rem;
    }
}
/* /Components/Shared/DateFieldsInput.razor.rz.scp.css */
.date-fields[b-cdkiutnfek] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem; /* 16px prevents iOS zoom on focus (rule 43) */
    line-height: 1.4;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 2.5rem;
    box-sizing: border-box;
}

.date-fields:focus-within[b-cdkiutnfek] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.date-fields-disabled[b-cdkiutnfek] {
    opacity: 0.6;
    pointer-events: none;
}

.date-fields-input[b-cdkiutnfek] {
    border: none;
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: 1rem;
    font-family: inherit;
    text-align: center;
    min-height: 1.5rem;
    -moz-appearance: textfield;
    appearance: textfield;
}

.date-fields-input[b-cdkiutnfek]::-webkit-outer-spin-button,
.date-fields-input[b-cdkiutnfek]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.date-fields-input[b-cdkiutnfek]::placeholder {
    color: var(--text-muted);
}

.date-fields-input:focus[b-cdkiutnfek] {
    outline: none;
}

.date-fields-input-dd[b-cdkiutnfek],
.date-fields-input-mm[b-cdkiutnfek] {
    width: 1.75em;
}

.date-fields-input-yyyy[b-cdkiutnfek] {
    width: 3em;
}

.date-fields-separator[b-cdkiutnfek] {
    color: var(--text-secondary);
    user-select: none;
}

/* Hidden native picker — kept in DOM (not display:none) so showPicker() works.
   Zero-sized + opacity 0 + pointer-events none = invisible but functional. */
.date-fields-hidden-picker[b-cdkiutnfek] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.date-fields-picker-trigger[b-cdkiutnfek] {
    margin-left: 0.4rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

@media (hover: hover) {
    .date-fields-picker-trigger:hover[b-cdkiutnfek] {
        color: var(--accent-primary);
        background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    }
}

.date-fields-picker-trigger:focus-visible[b-cdkiutnfek] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

.date-fields-picker-trigger:disabled[b-cdkiutnfek] {
    cursor: not-allowed;
    opacity: 0.5;
}
/* /Components/Shared/DateTimeFieldsInput.razor.rz.scp.css */
.datetime-fields[b-cek0g6cubb] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.datetime-fields-disabled[b-cek0g6cubb] {
    opacity: 0.6;
    pointer-events: none;
}

.datetime-fields-time[b-cek0g6cubb] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-color);
    padding: 0.4rem 0.6rem;
    font-size: 1rem; /* 16px prevents iOS zoom on focus (rule 43) */
    line-height: 1.4;
    min-height: 2.5rem;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.datetime-fields-time:focus[b-cek0g6cubb] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
/* /Components/Shared/EventListSidebar.razor.rz.scp.css */
.eventlist-sidebar[b-nd9lsu2jdq] {
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.sidebar-header[b-nd9lsu2jdq] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header h4[b-nd9lsu2jdq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.sidebar-content[b-nd9lsu2jdq] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.sidebar-item[b-nd9lsu2jdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 1rem;
    transition: background 0.15s;
}

@media (hover: hover) {
    .sidebar-item:hover[b-nd9lsu2jdq] {
        background: var(--hover-bg);
    }

    .sidebar-item:hover .sidebar-action-btn[b-nd9lsu2jdq] {
        opacity: 1;
    }
}

.sidebar-checkbox[b-nd9lsu2jdq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.sidebar-checkbox input[type="checkbox"][b-nd9lsu2jdq] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-color-dot[b-nd9lsu2jdq] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-task-icon[b-nd9lsu2jdq] {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    flex-shrink: 0;
    font-size: 0.875rem;
}

.sidebar-item-name[b-nd9lsu2jdq] {
    font-size: 0.875rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.member-count-badge[b-nd9lsu2jdq] {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    border-radius: 9999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 18px;
    text-align: center;
}

.sidebar-action-btn[b-nd9lsu2jdq] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* On touch devices, always show gear icon */
@media (hover: none) {
    .sidebar-action-btn[b-nd9lsu2jdq] {
        opacity: 0.6;
    }
}

@media (hover: hover) {
    .sidebar-action-btn:hover[b-nd9lsu2jdq] {
        color: var(--accent-primary);
        background: rgba(0, 0, 0, 0.05);
    }
}

.sidebar-divider[b-nd9lsu2jdq] {
    height: 1px;
    background: var(--border-color);
    margin: 0.375rem 1rem;
}

.sidebar-footer[b-nd9lsu2jdq] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-new-calendar[b-nd9lsu2jdq] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1.5px dashed var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-new-calendar:hover[b-nd9lsu2jdq] {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: var(--hover-bg);
    }
}

/* Mobile: sidebar-panel handles overlay positioning */
@media (max-width: 768px) {
    .sidebar-footer[b-nd9lsu2jdq] {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
}
/* /Components/Shared/EventRemindersEditor.razor.rz.scp.css */
/* Toggle switch — same DOM and visual scale as the IsRecurring toggle in
   Events.razor's Recurrence section. Replicated here so the editor renders
   consistently without depending on Events.razor's scoped styles. */

.toggle-group[b-4oqh31p4w5] {
    margin-bottom: 0.75rem;
}

.toggle-label[b-4oqh31p4w5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-input[b-4oqh31p4w5] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-4oqh31p4w5] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 24px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.toggle-slider[b-4oqh31p4w5]::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.toggle-input:checked + .toggle-slider[b-4oqh31p4w5] {
    background: var(--accent-primary);
}

.toggle-input:checked + .toggle-slider[b-4oqh31p4w5]::before {
    transform: translateX(20px);
}

.toggle-input:focus + .toggle-slider[b-4oqh31p4w5] {
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.toggle-text[b-4oqh31p4w5] {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
}

/* Compact toggle variant used for per-reminder channel switches
   (in-app / email) inside a reminder row. */

.toggle-label-sm[b-4oqh31p4w5] {
    gap: 0.4rem;
    min-height: 2.25rem; /* keep a sensible touch target */
}

.toggle-slider-sm[b-4oqh31p4w5] {
    width: 30px;
    height: 16px;
}

.toggle-slider-sm[b-4oqh31p4w5]::before {
    width: 12px;
    height: 12px;
    left: 2px;
    top: 2px;
}

.toggle-input:checked + .toggle-slider-sm[b-4oqh31p4w5]::before {
    transform: translateX(14px);
}

.channel-icon[b-4oqh31p4w5] {
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: color 0.2s;
}

.toggle-input:checked ~ .channel-icon[b-4oqh31p4w5] {
    color: var(--accent-primary);
}

/* Premium upgrade prompt */
.reminders-premium[b-4oqh31p4w5] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

.reminders-premium-icon[b-4oqh31p4w5] {
    color: var(--accent-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.reminders-premium-text[b-4oqh31p4w5] {
    margin: 0 0 0.25rem;
    color: var(--text-color);
    font-size: 0.875rem;
}

.reminders-premium-link[b-4oqh31p4w5] {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
}

.reminders-premium-link:hover[b-4oqh31p4w5] {
    text-decoration: underline;
}

/* Disabled (recurring / synced) note */
.reminders-disabled-note[b-4oqh31p4w5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 0.813rem;
}

/* Deadline grace-period block */
.deadline-fields[b-4oqh31p4w5] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--bg-secondary);
    margin-bottom: 0.75rem;
}

.deadline-grace-label[b-4oqh31p4w5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.deadline-preview[b-4oqh31p4w5] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
}

.deadline-status[b-4oqh31p4w5] {
    margin: 0;
    font-size: 0.813rem;
    font-weight: 600;
}

.deadline-status-grace[b-4oqh31p4w5] {
    color: var(--accent-primary);
}

.deadline-status-missed[b-4oqh31p4w5] {
    color: var(--danger);
}

/* Reminder rows */
.reminders-empty[b-4oqh31p4w5] {
    margin: 0 0 0.5rem;
    font-size: 0.813rem;
    color: var(--text-muted);
}

.reminder-item[b-4oqh31p4w5] {
    margin-bottom: 0.5rem;
}

.reminder-row[b-4oqh31p4w5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.reminder-days-until[b-4oqh31p4w5] {
    display: block;
    margin-top: 0.2rem;
    margin-left: 0.15rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.reminder-preset[b-4oqh31p4w5],
.reminder-anchor[b-4oqh31p4w5] {
    flex: 1 1 8rem;
    min-width: 7rem;
}

.reminder-num[b-4oqh31p4w5] {
    width: 4.5rem;
    flex: 0 0 auto;
}

.reminder-unit[b-4oqh31p4w5] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

/* 16px font-size on inputs prevents iOS Safari zoom on focus (rule 43) */
.reminder-preset[b-4oqh31p4w5],
.reminder-anchor[b-4oqh31p4w5],
.reminder-num[b-4oqh31p4w5] {
    font-size: 1rem;
}

.reminder-remove[b-4oqh31p4w5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
}

@media (hover: hover) {
    .reminder-remove:hover[b-4oqh31p4w5] {
        background: var(--hover-bg);
        color: var(--danger);
    }
}

.reminder-add-row[b-4oqh31p4w5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.reminder-add[b-4oqh31p4w5] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    min-height: 2.5rem;
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--accent-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

@media (hover: hover) {
    .reminder-add:hover:not(:disabled)[b-4oqh31p4w5] {
        background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
    }
}

.reminder-add:disabled[b-4oqh31p4w5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.reminder-limit[b-4oqh31p4w5] {
    font-size: 0.75rem;
    color: var(--text-muted);
}
/* /Components/Shared/EventReminderToastHost.razor.rz.scp.css */
.reminder-toast-host[b-72cj1ohm8a] {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 22rem;
    padding-bottom: env(safe-area-inset-bottom);
}

.reminder-toast[b-72cj1ohm8a] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.reminder-toast-icon[b-72cj1ohm8a] {
    color: var(--accent-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.reminder-toast-body[b-72cj1ohm8a] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.reminder-toast-title[b-72cj1ohm8a] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.reminder-toast-event[b-72cj1ohm8a] {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reminder-toast-meta[b-72cj1ohm8a] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.reminder-toast-link[b-72cj1ohm8a] {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--accent-primary);
    font-size: 0.813rem;
    font-weight: 600;
    cursor: pointer;
}

.reminder-toast-link:hover[b-72cj1ohm8a] {
    text-decoration: underline;
}

.reminder-toast-dismiss[b-72cj1ohm8a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
}

@media (hover: hover) {
    .reminder-toast-dismiss:hover[b-72cj1ohm8a] {
        background: var(--hover-bg);
        color: var(--text-color);
    }
}

@media (max-width: 576px) {
    .reminder-toast-host[b-72cj1ohm8a] {
        right: 0.5rem;
        left: 0.5rem;
        bottom: 0.5rem;
        max-width: none;
    }
}
/* /Components/Shared/HabitCard.razor.rz.scp.css */
/* Habit Card Component */
.habit-card[b-2er0ef9iri] {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
    padding: 1rem;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.habit-card[b-2er0ef9iri]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--habit-color);
    border-radius: 12px 0 0 12px;
}

@media (hover: hover) {
    .habit-card:hover[b-2er0ef9iri] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }
}

/* Dim the content but not the actions block — opacity on the card root would
   render the dropdown menu at the same reduced opacity, and CSS can't restore
   a child above its parent's rendered opacity. Target the header's non-action
   children and the body instead. */
.habit-card.completed .habit-card-header > :not(.habit-card-actions)[b-2er0ef9iri],
.habit-card.completed .habit-card-body[b-2er0ef9iri] {
    opacity: 0.7;
}

.habit-card.dimmed .habit-card-header > :not(.habit-card-actions)[b-2er0ef9iri],
.habit-card.dimmed .habit-card-body[b-2er0ef9iri] {
    opacity: 0.5;
}

/* Elevate the card while its 3-dot menu is open so the dropdown
   renders above adjacent cards instead of being clipped by them. */
.habit-card.menu-open[b-2er0ef9iri] {
    z-index: 50;
}

/* The HabitRowMenu trigger is sized for grid rows (44px touch target).
   Inside the narrower card it visually dominates, so shrink it in the card context. */
.habit-card-actions[b-2er0ef9iri]  .btn-habit-row-menu {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem;
    font-size: 0.9rem;
    border-radius: 6px;
}

/* Header */
.habit-card-header[b-2er0ef9iri] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-left: 0.5rem;
}

.habit-card-color[b-2er0ef9iri] {
    display: none;
}

.habit-card-name[b-2er0ef9iri] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    transition: color 120ms ease;
}

@media (hover: hover) {
    .habit-card-name:hover[b-2er0ef9iri] {
        color: var(--accent-primary);
    }
}

.habit-card-streak[b-2er0ef9iri] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--streak-color);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--streak-color) 10%, transparent);
    flex-shrink: 0;
}

.habit-card-challenge[b-2er0ef9iri] {
    display: flex;
    align-items: center;
    color: var(--accent-primary);
    font-size: 0.8rem;
    padding: 0.15rem 0.3rem;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.1);
    flex-shrink: 0;
}

/* Body */
.habit-card-body[b-2er0ef9iri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-left: 0.5rem;
}

.habit-card-info[b-2er0ef9iri] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
}

.habit-card-frequency[b-2er0ef9iri] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* 7-day history dots */
.habit-card-history[b-2er0ef9iri] {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.history-dot[b-2er0ef9iri] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color);
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.history-dot.filled[b-2er0ef9iri] {
    background: var(--habit-color);
}

/* Check button */
.habit-card-check[b-2er0ef9iri] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2.5px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex-shrink: 0;
    padding: 0;
}

@media (hover: hover) {
    .habit-card-check:hover[b-2er0ef9iri] {
        border-color: var(--text-secondary);
        transform: scale(1.1);
    }
}

.habit-card-check.checked[b-2er0ef9iri] {
    border-color: transparent;
    animation: checkBounce-b-2er0ef9iri 0.3s ease;
}

@keyframes checkBounce-b-2er0ef9iri {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .habit-card[b-2er0ef9iri] {
        padding: 0.75rem;
    }

    .habit-card-name[b-2er0ef9iri] {
        font-size: 0.875rem;
    }

    .habit-card-check[b-2er0ef9iri] {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .history-dot[b-2er0ef9iri] {
        width: 6px;
        height: 6px;
    }
}

/* ===== Numeric / Duration progress ===== */

.habit-card-progress[b-2er0ef9iri] {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.habit-card-progress-fill[b-2er0ef9iri] {
    height: 100%;
    background: var(--habit-color);
    transition: width 200ms ease;
}

.habit-card-progress-label[b-2er0ef9iri] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    margin-top: 0.25rem;
}

.habit-card-progress-label .unit[b-2er0ef9iri] {
    color: var(--text-muted);
    margin-left: 0.25rem;
}

.habit-card-add[b-2er0ef9iri] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 2px solid var(--habit-color);
    background: transparent;
    color: var(--habit-color);
    cursor: pointer;
    font-size: 1.25rem;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.habit-card-add:hover[b-2er0ef9iri] {
    background: color-mix(in srgb, var(--habit-color) 8%, transparent);
}

.habit-card-add:active[b-2er0ef9iri] {
    transform: scale(0.94);
}

.habit-card-add.completed[b-2er0ef9iri] {
    color: white;
}

/* Skipped state — dashed border, muted, "—" glyph. */
.habit-card.skipped[b-2er0ef9iri] {
    border-style: dashed;
}

.habit-card.skipped .habit-card-header > :not(.habit-card-actions)[b-2er0ef9iri],
.habit-card.skipped .habit-card-body[b-2er0ef9iri] {
    opacity: 0.75;
}

.habit-card-skipped-badge[b-2er0ef9iri] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-radius: 6px;
}

@media (max-width: 480px) {
    .habit-card-add[b-2er0ef9iri] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 1.1rem;
    }
}

/* ===== Avoidance habit card styles ===== */

.habit-card-clean[b-2er0ef9iri] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--habit-color);
    margin-top: 0.25rem;
}

.habit-card-slipped[b-2er0ef9iri] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--danger);
    margin-top: 0.25rem;
}

.habit-card-slip[b-2er0ef9iri] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 2px solid var(--danger);
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease;
}

.habit-card-slip:hover[b-2er0ef9iri] {
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.habit-card-slip:active[b-2er0ef9iri] {
    transform: scale(0.94);
}

.habit-card-slip.slipped[b-2er0ef9iri] {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    color: var(--text-primary);
}

@media (max-width: 480px) {
    .habit-card-slip[b-2er0ef9iri] {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

/* Actions sit as the last flex child of the header so they share natural flow
   with the name + paused/challenge badges — no absolute positioning, so the
   name ellipsises instead of overflowing under the streak/menu. */
.habit-card-actions[b-2er0ef9iri] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Paused state: card-wide striped overlay + smaller "Paused" pill in the header.
   The paused pill flanks the streak/challenge badges with the same visual weight. */
.habit-card.paused[b-2er0ef9iri] {
    background-image: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--text-muted) 6%, transparent),
        color-mix(in srgb, var(--text-muted) 6%, transparent) 6px,
        transparent 6px,
        transparent 12px
    );
}

.habit-card-paused[b-2er0ef9iri] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--accent-primary);
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.habit-card-paused .bi[b-2er0ef9iri] {
    font-size: 0.75rem;
}
/* /Components/Shared/HabitEntryList.razor.rz.scp.css */
.entry-list[b-3byx6d6gft] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.entry-list-empty[b-3byx6d6gft] {
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
    font-style: italic;
}

.entry-date-header[b-3byx6d6gft] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.5rem 0 0.25rem;
    margin-top: 0.25rem;
}

.entry-date-header:first-child[b-3byx6d6gft] {
    margin-top: 0;
    padding-top: 0;
}

.entry-row[b-3byx6d6gft] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    text-align: left;
}

.entry-row.clickable[b-3byx6d6gft] {
    cursor: pointer;
}

@media (hover: hover) {
    .entry-row.clickable:hover[b-3byx6d6gft] {
        border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
        background: color-mix(in srgb, var(--accent-primary) 4%, var(--card-bg));
    }
}

.entry-row.clickable:focus-visible[b-3byx6d6gft] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.entry-row.clickable:active[b-3byx6d6gft] {
    transform: scale(0.995);
}

.entry-row.retroactive[b-3byx6d6gft] {
    border-style: dashed;
}

/* Time column — small, muted, fixed-width, tabular so multiple rows align. */
.entry-time[b-3byx6d6gft] {
    flex: 0 0 auto;
    min-width: 44px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding-top: 0.125rem;
}

.entry-main[b-3byx6d6gft] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.entry-primary[b-3byx6d6gft] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.entry-amount[b-3byx6d6gft] {
    font-size: 0.938rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.entry-amount.skipped[b-3byx6d6gft] {
    color: var(--text-muted);
    font-style: italic;
}

.entry-amount.missed[b-3byx6d6gft] {
    color: var(--danger);
}

.entry-unit[b-3byx6d6gft] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.2rem;
}

.entry-emojis[b-3byx6d6gft] {
    display: inline-flex;
    gap: 0.125rem;
}

.entry-emoji[b-3byx6d6gft] {
    font-size: 0.938rem;
    line-height: 1;
}

.entry-retro-chip[b-3byx6d6gft] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
    color: var(--text-muted);
    font-size: 0.625rem;
}

.entry-notes[b-3byx6d6gft] {
    font-size: 0.813rem;
    color: var(--text-secondary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.entry-delete[b-3byx6d6gft] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: background 120ms ease, color 120ms ease;
}

@media (hover: hover) {
    .entry-delete:hover[b-3byx6d6gft] {
        background: color-mix(in srgb, var(--danger) 12%, transparent);
        color: var(--danger);
    }
}

.entry-delete:focus-visible[b-3byx6d6gft] {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .entry-row[b-3byx6d6gft] {
        padding: 0.75rem;
        gap: 0.625rem;
    }

    .entry-delete[b-3byx6d6gft] {
        width: 40px;
        height: 40px;
    }
}
/* /Components/Shared/HabitRowMenu.razor.rz.scp.css */
.habit-row-menu-container[b-83xsrmphuh] {
    position: relative;
    display: inline-flex;
}

.btn-habit-row-menu[b-83xsrmphuh] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0.5rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

@media (hover: hover) {
    .btn-habit-row-menu:hover[b-83xsrmphuh] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.btn-habit-row-menu:focus-visible[b-83xsrmphuh] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.habit-row-dropdown[b-83xsrmphuh] {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    z-index: 1000;
    padding: 0.5rem 0;
    overflow: hidden;
}

.habit-row-dropdown .dropdown-item[b-83xsrmphuh] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .habit-row-dropdown .dropdown-item:hover[b-83xsrmphuh] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.habit-row-dropdown .dropdown-item.text-danger[b-83xsrmphuh] {
    color: var(--danger-color, #ef4444);
}

@media (hover: hover) {
    .habit-row-dropdown .dropdown-item.text-danger:hover[b-83xsrmphuh] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.habit-row-dropdown .dropdown-divider[b-83xsrmphuh] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Mobile: anchor dropdown to viewport bottom so menu is reachable with thumb. */
@media (max-width: 576px) {
    .habit-row-dropdown[b-83xsrmphuh] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
        min-width: auto;
    }

    .habit-row-dropdown .dropdown-item[b-83xsrmphuh] {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }
}
/* /Components/Shared/HabitYearHeatmap.razor.rz.scp.css */
.year-heatmap[b-vq0uh2uip3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.year-heatmap svg[b-vq0uh2uip3] {
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Cells take their color from --cell-fill (set inline per cell from habit color),
   falling back to the neutral background when no entry exists for the day. */
.heatmap-cell[b-vq0uh2uip3] {
    fill: var(--cell-fill, var(--bg-tertiary));
    stroke: var(--border-light);
    stroke-width: 0.5;
    transition: transform 120ms ease;
}

.heatmap-cell:hover[b-vq0uh2uip3] {
    stroke-width: 1.5;
    stroke: var(--accent-primary);
    cursor: pointer;
}

.heatmap-cell.selected[b-vq0uh2uip3] {
    stroke-width: 2;
    stroke: var(--accent-primary);
}

.heatmap-selected[b-vq0uh2uip3] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-tertiary);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.heatmap-cell.intensity-0[b-vq0uh2uip3] {
    fill: var(--bg-tertiary);
}

.heatmap-cell.intensity-skipped[b-vq0uh2uip3] {
    fill: color-mix(in srgb, var(--text-muted) 30%, transparent);
    stroke-dasharray: 2 1;
}

/* Pre-creation cells: dashed outline, transparent fill, no hover interaction. */
.heatmap-cell.pre-creation[b-vq0uh2uip3] {
    fill: transparent;
    stroke: var(--border-light);
    stroke-dasharray: 1 2;
    cursor: default;
}

.heatmap-cell.pre-creation:hover[b-vq0uh2uip3] {
    stroke-width: 0.5;
    stroke: var(--border-light);
}

.heatmap-legend[b-vq0uh2uip3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    justify-content: flex-end;
}

/* Legend cells are <span> (HTML, not SVG), so they need background-color
   instead of fill. Use the accent color since the legend is global, not per-habit. */
.heatmap-legend .heatmap-cell[b-vq0uh2uip3] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-light);
}

.heatmap-legend .heatmap-cell.intensity-0[b-vq0uh2uip3] { background-color: var(--bg-tertiary); }
.heatmap-legend .heatmap-cell.intensity-1[b-vq0uh2uip3] { background-color: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-tertiary)); }
.heatmap-legend .heatmap-cell.intensity-2[b-vq0uh2uip3] { background-color: color-mix(in srgb, var(--accent-primary) 40%, var(--bg-tertiary)); }
.heatmap-legend .heatmap-cell.intensity-3[b-vq0uh2uip3] { background-color: color-mix(in srgb, var(--accent-primary) 60%, var(--bg-tertiary)); }
.heatmap-legend .heatmap-cell.intensity-4[b-vq0uh2uip3] { background-color: color-mix(in srgb, var(--accent-primary) 80%, var(--bg-tertiary)); }

@media (max-width: 768px) {
    .year-heatmap[b-vq0uh2uip3] {
        padding: 0.75rem;
    }

    .heatmap-legend[b-vq0uh2uip3] {
        justify-content: center;
    }
}
/* /Components/Shared/ListSettingsModal.razor.rz.scp.css */
.modal-overlay[b-ikqfrtru2y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    overflow-y: auto;
    padding: 1rem;
    overscroll-behavior: contain;
}

.modal-content[b-ikqfrtru2y] {
    background: var(--card-bg, white);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    margin: auto;
}

.modal-header[b-ikqfrtru2y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.modal-header h3[b-ikqfrtru2y] {
    margin: 0;
    color: var(--text-primary, #111827);
}

.btn-close[b-ikqfrtru2y] {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    line-height: 1;
    padding: 0.25rem;
}

@media (hover: hover) {
    .btn-close:hover[b-ikqfrtru2y] {
        color: var(--text-primary, #111827);
    }
}

.modal-body[b-ikqfrtru2y] {
    padding: 1.5rem;
}

.modal-footer[b-ikqfrtru2y] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.form-group[b-ikqfrtru2y] {
    margin-bottom: 1.25rem;
}

.form-group label[b-ikqfrtru2y] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #111827);
}

.form-input[b-ikqfrtru2y] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--input-bg, white);
    color: var(--text-primary, #111827);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus[b-ikqfrtru2y] {
    outline: none;
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input:disabled[b-ikqfrtru2y] {
    background: var(--bg-secondary, #f3f4f6);
    cursor: not-allowed;
    opacity: 0.7;
}

.color-picker[b-ikqfrtru2y] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.color-option[b-ikqfrtru2y] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

@media (hover: hover) {
    .color-option:hover[b-ikqfrtru2y] {
        transform: scale(1.1);
    }
}

.color-option.selected[b-ikqfrtru2y] {
    border-color: var(--text-primary, #111827);
    box-shadow: 0 0 0 2px white inset;
}

.color-option.disabled[b-ikqfrtru2y] {
    cursor: not-allowed;
    opacity: 0.5;
}

.custom-color-picker-wrapper[b-ikqfrtru2y] {
    position: relative;
    width: 32px;
    height: 32px;
}

.custom-color-input[b-ikqfrtru2y] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-color-button[b-ikqfrtru2y] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    pointer-events: none;
}

.view-type-toggle[b-ikqfrtru2y],
.layout-toggle[b-ikqfrtru2y] {
    display: flex;
    gap: 0.5rem;
}

.view-type-option[b-ikqfrtru2y],
.layout-option[b-ikqfrtru2y] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--card-bg, white);
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
}

@media (hover: hover) {
    .view-type-option:hover[b-ikqfrtru2y],
    .layout-option:hover[b-ikqfrtru2y] {
        border-color: var(--accent-color, #6366f1);
        color: var(--accent-color, #6366f1);
    }
}

.view-type-option.active[b-ikqfrtru2y],
.layout-option.active[b-ikqfrtru2y] {
    background: var(--accent-color, #6366f1);
    border-color: var(--accent-color, #6366f1);
    color: white;
}

.view-type-option.disabled[b-ikqfrtru2y],
.layout-option.disabled[b-ikqfrtru2y] {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-secondary[b-ikqfrtru2y] {
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--card-bg, white);
    color: var(--text-primary, #111827);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

@media (hover: hover) {
    .btn-secondary:hover[b-ikqfrtru2y] {
        background: var(--bg-secondary, #f3f4f6);
    }
}

.btn-primary[b-ikqfrtru2y] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: var(--accent-color, #6366f1);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

@media (hover: hover) {
    .btn-primary:hover[b-ikqfrtru2y] {
        background: var(--accent-color-hover, #4f46e5);
    }
}

.form-text[b-ikqfrtru2y] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.text-muted[b-ikqfrtru2y] {
    color: var(--text-secondary, #6b7280);
}

.owner-only-notice[b-ikqfrtru2y] {
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    display: flex;
    align-items: center;
}

.disabled-setting[b-ikqfrtru2y] {
    opacity: 0.6;
}

.disabled-setting label[b-ikqfrtru2y] {
    color: var(--text-secondary, #6b7280);
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-ikqfrtru2y] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-ikqfrtru2y] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-body[b-ikqfrtru2y] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header[b-ikqfrtru2y] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-footer[b-ikqfrtru2y] {
        flex-shrink: 0;
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn-close[b-ikqfrtru2y] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .view-type-toggle[b-ikqfrtru2y],
    .layout-toggle[b-ikqfrtru2y] {
        flex-wrap: wrap;
    }

    .view-type-option[b-ikqfrtru2y],
    .layout-option[b-ikqfrtru2y] {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-ikqfrtru2y] {
        font-size: 1.1rem;
    }

    .modal-footer[b-ikqfrtru2y] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn-primary[b-ikqfrtru2y],
    .modal-footer .btn-secondary[b-ikqfrtru2y] {
        width: 100%;
        justify-content: center;
    }

    .view-type-option[b-ikqfrtru2y],
    .layout-option[b-ikqfrtru2y] {
        flex: 1 1 100%;
    }

    .color-picker[b-ikqfrtru2y] {
        justify-content: center;
    }
}
/* /Components/Shared/MiniCalendar.razor.rz.scp.css */
.mini-calendar[b-05yk2sreyq] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.mini-cal-header[b-05yk2sreyq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.mini-cal-title[b-05yk2sreyq] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
    user-select: none;
}

.mini-cal-nav[b-05yk2sreyq] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s;
}

@media (hover: hover) {
    .mini-cal-nav:hover[b-05yk2sreyq] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.mini-cal-grid[b-05yk2sreyq] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    text-align: center;
}

.mini-cal-dow[b-05yk2sreyq] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.25rem 0;
    user-select: none;
}

.mini-cal-day[b-05yk2sreyq] {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s;
    padding: 0;
}

@media (hover: hover) {
    .mini-cal-day:hover:not(.today)[b-05yk2sreyq] {
        background: var(--hover-bg);
    }
}

.mini-cal-day.other-month[b-05yk2sreyq] {
    color: var(--text-muted);
}

.mini-cal-day.selected[b-05yk2sreyq] {
    background: var(--hover-bg);
    color: var(--accent-primary);
    font-weight: 600;
}

.mini-cal-day.today[b-05yk2sreyq] {
    background: var(--accent-primary);
    color: white;
    font-weight: 600;
}

/* Mobile */
@media (max-width: 768px) {
    .mini-calendar[b-05yk2sreyq] {
        padding: 0.75rem;
        padding-top: calc(0.75rem + env(safe-area-inset-top));
    }
}
/* /Components/Shared/NewHabitModal.razor.rz.scp.css */
.modal-overlay[b-d8xnk35sdy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn-b-d8xnk35sdy 0.2s ease-out;
    overscroll-behavior: contain;
}

@keyframes fadeIn-b-d8xnk35sdy {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-d8xnk35sdy] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-d8xnk35sdy 0.3s ease-out;
}

@keyframes slideUp-b-d8xnk35sdy {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-d8xnk35sdy] {
    margin: 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-d8xnk35sdy] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.close-button[b-d8xnk35sdy] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-d8xnk35sdy] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.challenge-info-banner[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-primary) 20%, transparent);
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.challenge-info-banner .bi[b-d8xnk35sdy] {
    font-size: 1rem;
}

.challenge-info-banner strong[b-d8xnk35sdy] {
    font-weight: 600;
}

.modal-body[b-d8xnk35sdy] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections — card-block style with soft background so each logical group reads as a chunk. */
.form-section[b-d8xnk35sdy] {
    margin-bottom: 1rem;
    padding: 1rem 1.125rem 1.125rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
}

.form-section:last-child[b-d8xnk35sdy] {
    margin-bottom: 0;
}

.section-header[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
    font-size: 0.938rem;
    color: var(--text-primary);
}

.section-header .bi[b-d8xnk35sdy] {
    color: var(--accent-primary);
    font-size: 1rem;
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    border-radius: 7px;
}

.form-group[b-d8xnk35sdy] {
    margin-bottom: 1.25rem;
}

.form-group label[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-color);
}

.form-group label .bi[b-d8xnk35sdy] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.form-control[b-d8xnk35sdy] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    /* 16px floor prevents iOS Safari auto-zoom when the input receives focus. */
    font-size: 1rem;
    transition: all 0.2s;
}

/* Desktop pointer devices can use the denser 0.9rem for visual tightness. */
@media (hover: hover) and (pointer: fine) {
    .form-control[b-d8xnk35sdy] {
        font-size: 0.9rem;
    }
}

.form-control:focus[b-d8xnk35sdy] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-d8xnk35sdy] {
        border-color: var(--accent-primary);
    }
}

.color-picker[b-d8xnk35sdy] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.color-picker-compact[b-d8xnk35sdy] {
    gap: 0.375rem;
    flex-wrap: wrap;
}

.color-option[b-d8xnk35sdy] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-picker-compact .color-option[b-d8xnk35sdy] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    flex: 0 0 auto;
    min-width: 28px;
}

@media (hover: hover) {
    .color-option:hover[b-d8xnk35sdy] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option.selected[b-d8xnk35sdy] {
    border-color: var(--text-color);
    box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.color-option .bi[b-d8xnk35sdy] {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.color-picker-compact .color-option .bi[b-d8xnk35sdy] {
    font-size: 1rem;
}

/* Clear/No color option */
.color-option-clear[b-d8xnk35sdy] {
    background: var(--input-bg);
    border: 2px dashed var(--border-color);
}

.color-option-clear .bi[b-d8xnk35sdy] {
    color: var(--text-secondary);
    text-shadow: none;
}

@media (hover: hover) {
    .color-option-clear:hover[b-d8xnk35sdy] {
        border-color: var(--text-secondary);
    }
}

.color-option-clear.selected[b-d8xnk35sdy] {
    border-style: solid;
    border-color: var(--text-color);
}

.custom-color-picker-wrapper[b-d8xnk35sdy] {
    position: relative;
    width: 60px;
    height: 60px;
}

.custom-color-picker-compact[b-d8xnk35sdy] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    flex: 0 0 auto;
    min-width: 28px;
}

.custom-color-input[b-d8xnk35sdy] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-color-button[b-d8xnk35sdy] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-color-picker-compact .custom-color-button[b-d8xnk35sdy] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border-width: 2px;
}

.custom-color-button span[b-d8xnk35sdy] {
    color: white;
    font-size: 1.5rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.custom-color-picker-compact .custom-color-button span[b-d8xnk35sdy] {
    font-size: 1rem;
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-d8xnk35sdy] {
        border-color: var(--text-color);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.modal-footer[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    gap: 0.75rem;
}

.footer-spacer[b-d8xnk35sdy] {
    flex: 1;
}

.btn-danger[b-d8xnk35sdy] {
    background: var(--danger);
    color: #ffffff;
}

@media (hover: hover) {
    .btn-danger:hover[b-d8xnk35sdy] {
        background: color-mix(in srgb, var(--danger) 85%, black);
    }
}

.btn[b-d8xnk35sdy] {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .btn:hover[b-d8xnk35sdy] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn:active[b-d8xnk35sdy] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-d8xnk35sdy] {
    background: var(--accent-primary);
    color: #ffffff;
}

@media (hover: hover) {
    .btn-primary:hover[b-d8xnk35sdy] {
        background: var(--accent-secondary);
    }
}

.btn-secondary[b-d8xnk35sdy] {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    box-shadow: none;
}

@media (hover: hover) {
    .btn-secondary:hover[b-d8xnk35sdy] {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-secondary);
    }
}

.time-range-inputs[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-input[b-d8xnk35sdy] {
    flex: 1;
}

/* Ensure time input shows native browser controls (spinners/steppers) */
.time-input[b-d8xnk35sdy]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.time-input[b-d8xnk35sdy]::-webkit-inner-spin-button,
.time-input[b-d8xnk35sdy]::-webkit-outer-spin-button {
    opacity: 1;
}

.time-input[b-d8xnk35sdy] {
    -moz-appearance: auto;
    -webkit-appearance: auto;
    appearance: auto;
}

.time-separator[b-d8xnk35sdy] {
    color: var(--text-secondary);
    font-weight: 500;
}

.days-picker[b-d8xnk35sdy] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
    background: var(--card-bg);
}

.day-checkbox:has(input:checked)[b-d8xnk35sdy] {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

@media (hover: hover) {
    .day-checkbox:hover[b-d8xnk35sdy] {
        background: var(--hover-bg);
    }
}

.day-checkbox input[type="checkbox"][b-d8xnk35sdy] {
    margin: 0;
    cursor: pointer;
}

.day-checkbox span[b-d8xnk35sdy] {
    font-size: 0.875rem;
    color: var(--text-primary);
    user-select: none;
}

.input-with-emoji[b-d8xnk35sdy] {
    position: relative;
}

.input-with-emoji .form-input[b-d8xnk35sdy] {
    padding-right: 3rem;
}

.emoji-picker-button[b-d8xnk35sdy] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--text-secondary);
    font-size: 1.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .emoji-picker-button:hover[b-d8xnk35sdy] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.emoji-picker-dropdown[b-d8xnk35sdy] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    width: 270px;
    max-width: 85vw; /* Ensure it fits on mobile */
}

/* Responsive adjustment for emoji picker */
@media (max-width: 400px) {
    .emoji-picker-dropdown[b-d8xnk35sdy] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: auto;
    }
    
    .emoji-more-hint[b-d8xnk35sdy] {
        grid-column: span 5;
    }
}

.emoji-option[b-d8xnk35sdy] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.5rem;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
}

@media (hover: hover) {
    .emoji-option:hover[b-d8xnk35sdy] {
        background: var(--hover-bg);
        transform: scale(1.1);
    }
}

.emoji-more-hint[b-d8xnk35sdy] {
    grid-column: span 6;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
    margin-top: 0.125rem;
}

.hint-icon[b-d8xnk35sdy] {
    font-size: 0.875rem;
}

.hint-text[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.emoji-more-hint kbd[b-d8xnk35sdy] {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0.0625rem 0.25rem;
    font-size: 0.6875rem;
    font-family: monospace;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-d8xnk35sdy] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-d8xnk35sdy] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-header[b-d8xnk35sdy] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.25rem 1rem;
    }

    .modal-footer[b-d8xnk35sdy] {
        padding: 1rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .modal-body[b-d8xnk35sdy] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem;
    }

    .close-button[b-d8xnk35sdy] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .form-section[b-d8xnk35sdy] {
        margin-bottom: 1.5rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-d8xnk35sdy] {
        font-size: 1.1rem;
    }

    .color-picker[b-d8xnk35sdy] {
        gap: 0.5rem;
    }

    .color-option[b-d8xnk35sdy] {
        width: 40px;
        height: 40px;
    }

    .days-picker[b-d8xnk35sdy] {
        gap: 0.375rem;
    }

    .day-checkbox[b-d8xnk35sdy] {
        padding: 0.4rem 0.6rem;
    }

    .day-checkbox span[b-d8xnk35sdy] {
        font-size: 0.8rem;
    }

    .time-range-inputs[b-d8xnk35sdy] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .time-separator[b-d8xnk35sdy] {
        display: none;
    }

    .modal-footer[b-d8xnk35sdy] {
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .modal-footer .btn[b-d8xnk35sdy] {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Polarity picker (Positive / Avoidance) ===== */

.polarity-picker[b-d8xnk35sdy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.polarity-option[b-d8xnk35sdy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.875rem;
    background: var(--card-bg);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    min-height: 78px;
}

@media (hover: hover) {
    .polarity-option:not(.disabled):hover[b-d8xnk35sdy] {
        border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
        transform: translateY(-1px);
    }
}

.polarity-option .bi[b-d8xnk35sdy] {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.polarity-option .polarity-label[b-d8xnk35sdy] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.polarity-option .polarity-desc[b-d8xnk35sdy] {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.25;
}

.polarity-option.selected[b-d8xnk35sdy] {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.polarity-option.selected .bi[b-d8xnk35sdy] {
    color: var(--accent-primary);
}

.polarity-option.disabled[b-d8xnk35sdy] {
    opacity: 0.55;
    cursor: not-allowed;
}

.avoidance-hint[b-d8xnk35sdy] {
    margin: 0 0 0.5rem;
    padding: 0.6rem 0.75rem;
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== Type picker (Binary / Numeric / Duration) ===== */

.type-picker[b-d8xnk35sdy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.type-option[b-d8xnk35sdy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.375rem;
    padding: 0.875rem;
    background: var(--card-bg);
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    min-height: 88px;
}

.type-option .bi[b-d8xnk35sdy] {
    font-size: 1.25rem;
    color: var(--text-secondary);
}

.type-option .type-label[b-d8xnk35sdy] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.type-option .type-desc[b-d8xnk35sdy] {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.25;
}

.type-option.selected[b-d8xnk35sdy] {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.type-option.selected .bi[b-d8xnk35sdy] {
    color: var(--accent-primary);
}

.type-option.disabled[b-d8xnk35sdy] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (hover: hover) {
    .type-option:not(.disabled):hover[b-d8xnk35sdy] {
        border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
        transform: translateY(-1px);
    }
}

.target-inputs[b-d8xnk35sdy] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.target-field label[b-d8xnk35sdy] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    display: block;
}

@media (max-width: 576px) {
    .type-picker[b-d8xnk35sdy] {
        grid-template-columns: 1fr;
    }

    .type-option[b-d8xnk35sdy] {
        min-height: 64px;
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .type-option .type-desc[b-d8xnk35sdy] {
        margin-left: auto;
        text-align: right;
    }

    .target-inputs[b-d8xnk35sdy] {
        grid-template-columns: 1fr;
    }
}

/* ---------- Template quick-start strip ----------
   Horizontal scrollable chip row — one row tall, scannable at a glance, gets out of
   the way. Appears above the form for new habits only. Tap a chip to fill the form. */

.template-quickstart[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    min-height: 44px;
}

.template-quickstart-label[b-d8xnk35sdy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-right: 0.625rem;
    border-right: 1px solid var(--border-light);
}

.template-quickstart-label .bi[b-d8xnk35sdy] {
    color: var(--accent-primary);
    font-size: 0.875rem;
}

.template-chip-row[b-d8xnk35sdy] {
    position: relative;
    display: flex;
    gap: 0.375rem;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.125rem 0.25rem 0.125rem 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}

.template-chip-row[b-d8xnk35sdy]::-webkit-scrollbar {
    height: 6px;
}

.template-chip-row[b-d8xnk35sdy]::-webkit-scrollbar-track {
    background: transparent;
}

.template-chip-row[b-d8xnk35sdy]::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 999px;
}

.template-chip[b-d8xnk35sdy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.625rem 0.3rem 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
    min-height: 32px;
    max-width: 220px;
}

.template-chip .tpl-dot[b-d8xnk35sdy] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tpl-color, var(--accent-primary));
    flex-shrink: 0;
}

.template-chip .tpl-name[b-d8xnk35sdy] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.template-chip.avoidance[b-d8xnk35sdy] {
    border-style: dashed;
}

@media (hover: hover) {
    .template-chip:hover[b-d8xnk35sdy] {
        border-color: var(--tpl-color, var(--accent-primary));
        background: color-mix(in srgb, var(--tpl-color, var(--accent-primary)) 8%, var(--card-bg));
        transform: translateY(-1px);
    }
}

.template-chip:active[b-d8xnk35sdy] {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 576px) {
    .template-quickstart[b-d8xnk35sdy] {
        padding: 0.5rem;
    }

    .template-quickstart-label[b-d8xnk35sdy] {
        font-size: 0.688rem;
        padding-right: 0.5rem;
    }
}

.form-hint[b-d8xnk35sdy] {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.form-error[b-d8xnk35sdy] {
    background: color-mix(in srgb, var(--danger-color, #ef4444) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger-color, #ef4444) 24%, transparent);
    color: var(--danger-color, #ef4444);
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
}

/* ===== Custom start date — toggle switch ===== */

.start-date-group[b-d8xnk35sdy] {
    margin-bottom: 0;
}

.start-date-switch[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    padding: 0.6rem 0.875rem;
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
    /* Override the broader `.form-group label` rule that adds a bottom margin —
       the switch row sits flush with the conditional date-picker block below. */
    margin-bottom: 0;
}

.start-date-switch input[type="checkbox"][role="switch"][b-d8xnk35sdy] {
    /* Native role=switch checkbox; accent-color paints the on-state pill in
       supported browsers. Width=2.25em / height=1.25em gives a 36×20 hit area
       at 16px base, comfortably above the 24px touch-spec minimum. */
    appearance: none;
    -webkit-appearance: none;
    width: 2.25em;
    height: 1.25em;
    background: var(--border-color);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 120ms ease;
    margin: 0;
}

.start-date-switch input[type="checkbox"][role="switch"][b-d8xnk35sdy]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25em - 4px);
    height: calc(1.25em - 4px);
    background: #ffffff;
    border-radius: 50%;
    transition: transform 120ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.start-date-switch input[type="checkbox"][role="switch"]:checked[b-d8xnk35sdy] {
    background: var(--accent-primary);
}

.start-date-switch input[type="checkbox"][role="switch"]:checked[b-d8xnk35sdy]::before {
    transform: translateX(1em);
}

.start-date-switch input[type="checkbox"][role="switch"]:focus-visible[b-d8xnk35sdy] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.start-date-switch .bi-calendar-event[b-d8xnk35sdy] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.start-date-switch .toggle-label[b-d8xnk35sdy] {
    flex: 1 1 auto;
    text-align: left;
    font-weight: 500;
}

.start-date-switch:has(input:checked)[b-d8xnk35sdy] {
    border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
    background: color-mix(in srgb, var(--accent-primary) 6%, var(--card-bg));
}

@media (hover: hover) {
    .start-date-switch:hover[b-d8xnk35sdy] {
        border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
    }
}

.start-date-input[b-d8xnk35sdy] {
    margin-top: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
}

.start-date-input .start-date-label[b-d8xnk35sdy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.start-date-input .start-date-label .bi[b-d8xnk35sdy] {
    color: var(--accent-primary);
    font-size: 0.875rem;
}
/* /Components/Shared/PlanModal.razor.rz.scp.css */
.modal-overlay[b-pm5yydx995] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    overscroll-behavior: contain;
}

.modal-content[b-pm5yydx995] {
    background: var(--card-bg);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    position: relative;
    z-index: 2001;
    border: 1px solid var(--border-color);
}

.modal-header[b-pm5yydx995] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3[b-pm5yydx995] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close[b-pm5yydx995] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-pm5yydx995] {
        color: var(--text-primary);
    }
}

.modal-body[b-pm5yydx995] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-pm5yydx995] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-pm5yydx995],
.btn-primary[b-pm5yydx995] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-secondary[b-pm5yydx995] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-pm5yydx995] {
        background: var(--hover-bg);
    }
}

.btn-primary[b-pm5yydx995] {
    background: var(--accent-primary);
    color: var(--accent-contrast);
}

@media (hover: hover) {
    .btn-primary:hover[b-pm5yydx995] {
        background: var(--accent-secondary);
    }
}

.btn-primary:disabled[b-pm5yydx995] {
    background: var(--text-muted);
    cursor: not-allowed;
}

.form-group[b-pm5yydx995] {
    margin-bottom: 1rem;
}

.form-group label[b-pm5yydx995] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-input[b-pm5yydx995] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.form-input[b-pm5yydx995]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-pm5yydx995] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.plan-type-section[b-pm5yydx995] {
    margin-bottom: 1.5rem;
}

.section-label[b-pm5yydx995] {
    display: block;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.plan-type-options[b-pm5yydx995] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.plan-type-card[b-pm5yydx995] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

@media (hover: hover) {
    .plan-type-card:hover[b-pm5yydx995] {
        border-color: var(--accent-primary);
        background: var(--hover-bg);
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

.plan-type-card.selected[b-pm5yydx995] {
    border-color: var(--accent-primary);
    background: var(--hover-bg);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.plan-type-icon[b-pm5yydx995] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.plan-type-title[b-pm5yydx995] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.plan-type-description[b-pm5yydx995] {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.generating-state[b-pm5yydx995] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.generating-text[b-pm5yydx995] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.generating-subtext[b-pm5yydx995] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
}

.modal-generating[b-pm5yydx995] {
    pointer-events: auto;
}

.alert[b-pm5yydx995] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 0;
}

.alert-danger[b-pm5yydx995] {
    background-color: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-pm5yydx995] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-pm5yydx995] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-body[b-pm5yydx995] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header[b-pm5yydx995] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-footer[b-pm5yydx995] {
        flex-shrink: 0;
        padding: 1rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn-close[b-pm5yydx995] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .plan-type-options[b-pm5yydx995] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .plan-type-card[b-pm5yydx995] {
        padding: 1rem;
    }

    .plan-type-icon[b-pm5yydx995] {
        font-size: 2rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-pm5yydx995] {
        font-size: 1.1rem;
    }

    .modal-footer[b-pm5yydx995] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn-primary[b-pm5yydx995],
    .modal-footer .btn-secondary[b-pm5yydx995] {
        width: 100%;
        justify-content: center;
    }

    .plan-type-title[b-pm5yydx995] {
        font-size: 1rem;
    }

    .plan-type-description[b-pm5yydx995] {
        font-size: 0.8rem;
    }
}
/* /Components/Shared/PlanPreviewModal.razor.rz.scp.css */
.modal-overlay[b-7yqzjlhu9u] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    overscroll-behavior: contain;
}

.modal-content[b-7yqzjlhu9u] {
    background: white;
    border-radius: 12px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    position: relative;
    z-index: 1051;
}

.modal-header[b-7yqzjlhu9u] {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3[b-7yqzjlhu9u] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.btn-close[b-7yqzjlhu9u] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

@media (hover: hover) {
    .btn-close:hover[b-7yqzjlhu9u] {
        color: #111827;
    }
}

.modal-body[b-7yqzjlhu9u] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-7yqzjlhu9u] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-7yqzjlhu9u],
.btn-primary[b-7yqzjlhu9u] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-secondary[b-7yqzjlhu9u] {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

@media (hover: hover) {
    .btn-secondary:hover[b-7yqzjlhu9u] {
        background: #f9fafb;
    }
}

.btn-primary[b-7yqzjlhu9u] {
    background: #6366f1;
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-7yqzjlhu9u] {
        background: #4f46e5;
    }
}

.plan-preview-modal[b-7yqzjlhu9u] {
    max-width: 900px;
}

.modal-content-large[b-7yqzjlhu9u] {
    max-width: 900px;
}

.plan-preview-modal .modal-body[b-7yqzjlhu9u] {
    max-height: calc(90vh - 160px);
    overflow-y: auto;
}

.plan-summary[b-7yqzjlhu9u] {
    background: #f0f9ff;
    border-left: 4px solid #3b82f6;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: #1e40af;
}

.plan-section[b-7yqzjlhu9u] {
    margin-bottom: 2rem;
}

.section-title[b-7yqzjlhu9u] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.tasks-tree[b-7yqzjlhu9u] {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
}

.task-item[b-7yqzjlhu9u] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.task-header[b-7yqzjlhu9u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.task-title-section[b-7yqzjlhu9u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.task-checkbox-label[b-7yqzjlhu9u] {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.task-checkbox-label input[type="checkbox"][b-7yqzjlhu9u] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.task-bullet[b-7yqzjlhu9u] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-title[b-7yqzjlhu9u] {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
}

.task-description[b-7yqzjlhu9u] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

.task-priority[b-7yqzjlhu9u] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
}

.priority-critical[b-7yqzjlhu9u] {
    background: #fef2f2;
    color: #991b1b;
}

.priority-high[b-7yqzjlhu9u] {
    background: #fef3c7;
    color: #92400e;
}

.priority-medium[b-7yqzjlhu9u] {
    background: #dbeafe;
    color: #1e40af;
}

.priority-low[b-7yqzjlhu9u] {
    background: #f3f4f6;
    color: #4b5563;
}

.task-deadline[b-7yqzjlhu9u] {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
}

.subtasks-container[b-7yqzjlhu9u] {
    margin-top: 0.5rem;
}

.create-habits-option[b-7yqzjlhu9u] {
    margin-bottom: 1rem;
}

.checkbox-label[b-7yqzjlhu9u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-7yqzjlhu9u] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.habits-list[b-7yqzjlhu9u] {
    display: grid;
    gap: 0.75rem;
}

.habit-card[b-7yqzjlhu9u] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
}

.habit-header[b-7yqzjlhu9u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.75rem;
}

.habit-checkbox-label[b-7yqzjlhu9u] {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.habit-checkbox-label input[type="checkbox"][b-7yqzjlhu9u] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.habit-name[b-7yqzjlhu9u] {
    font-weight: 600;
    color: #111827;
}

.habit-frequency[b-7yqzjlhu9u] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
}

.badge[b-7yqzjlhu9u] {
    background: #e0e7ff;
    color: #3730a3;
    text-transform: capitalize;
}

.habit-description[b-7yqzjlhu9u] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.habit-days[b-7yqzjlhu9u] {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.day-badge[b-7yqzjlhu9u] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: #f3f4f6;
    color: #9ca3af;
}

.day-badge.active[b-7yqzjlhu9u] {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
}

.btn-outline[b-7yqzjlhu9u] {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-outline:hover[b-7yqzjlhu9u] {
        background: #f9fafb;
        border-color: #9ca3af;
    }
}

.modal-content-large[b-7yqzjlhu9u] {
    width: 90%;
}

.task-title-input[b-7yqzjlhu9u] {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s;
    flex: 1;
    min-width: 200px;
}

@media (hover: hover) {
    .task-title-input:hover[b-7yqzjlhu9u] {
        background: #f3f4f6;
    }
}

.task-title-input:focus[b-7yqzjlhu9u] {
    outline: none;
    background: white;
    box-shadow: 0 0 0 2px #6366f1;
}

.task-edit-btn[b-7yqzjlhu9u] {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.375rem 0.625rem;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    margin-left: auto;
}

@media (hover: hover) {
    .task-edit-btn:hover[b-7yqzjlhu9u] {
        background: #f3f4f6;
        color: #6366f1;
    }
}

@media (hover: hover) {
    .task-item:hover .task-edit-btn[b-7yqzjlhu9u] {
        opacity: 1;
    }
}

@media (hover: none) {
    .task-edit-btn[b-7yqzjlhu9u] {
        opacity: 1;
        visibility: visible;
    }
}

/* Dark mode support */
[data-bs-theme="dark"] .modal-overlay[b-7yqzjlhu9u] {
    background: rgba(0, 0, 0, 0.7);
}

[data-bs-theme="dark"] .modal-content[b-7yqzjlhu9u] {
    background: #1f2937;
    color: #f3f4f6;
}

[data-bs-theme="dark"] .modal-header[b-7yqzjlhu9u] {
    border-bottom: 1px solid #374151;
}

[data-bs-theme="dark"] .modal-header h3[b-7yqzjlhu9u] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .btn-close[b-7yqzjlhu9u] {
    color: #9ca3af;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-close:hover[b-7yqzjlhu9u] {
        color: #f3f4f6;
    }
}

[data-bs-theme="dark"] .modal-footer[b-7yqzjlhu9u] {
    border-top: 1px solid #374151;
}

[data-bs-theme="dark"] .btn-secondary[b-7yqzjlhu9u] {
    background: #374151;
    border: 1px solid #4b5563;
    color: #f3f4f6;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-secondary:hover[b-7yqzjlhu9u] {
        background: #4b5563;
    }
}

[data-bs-theme="dark"] .btn-primary[b-7yqzjlhu9u] {
    background: #6366f1;
    color: white;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-primary:hover[b-7yqzjlhu9u] {
        background: #4f46e5;
    }
}

[data-bs-theme="dark"] .plan-summary[b-7yqzjlhu9u] {
    background: #1e3a5f;
    border-left: 4px solid #3b82f6;
    color: #93c5fd;
}

[data-bs-theme="dark"] .section-title[b-7yqzjlhu9u] {
    color: #f3f4f6;
    border-bottom: 2px solid #374151;
}

[data-bs-theme="dark"] .tasks-tree[b-7yqzjlhu9u] {
    background: #111827;
}

[data-bs-theme="dark"] .task-item[b-7yqzjlhu9u] {
    background: #1f2937;
    border: 1px solid #374151;
}

[data-bs-theme="dark"] .task-title[b-7yqzjlhu9u] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .task-title-input[b-7yqzjlhu9u] {
    color: #f3f4f6;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .task-title-input:hover[b-7yqzjlhu9u] {
        background: #374151;
    }
}

[data-bs-theme="dark"] .task-title-input:focus[b-7yqzjlhu9u] {
    background: #1f2937;
    box-shadow: 0 0 0 2px #6366f1;
}

[data-bs-theme="dark"] .task-description[b-7yqzjlhu9u] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .priority-critical[b-7yqzjlhu9u] {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-bs-theme="dark"] .priority-high[b-7yqzjlhu9u] {
    background: #78350f;
    color: #fcd34d;
}

[data-bs-theme="dark"] .priority-medium[b-7yqzjlhu9u] {
    background: #1e3a8a;
    color: #93c5fd;
}

[data-bs-theme="dark"] .priority-low[b-7yqzjlhu9u] {
    background: #374151;
    color: #d1d5db;
}

[data-bs-theme="dark"] .task-deadline[b-7yqzjlhu9u] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .habit-card[b-7yqzjlhu9u] {
    background: #1f2937;
    border: 1px solid #374151;
}

[data-bs-theme="dark"] .habit-name[b-7yqzjlhu9u] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .badge[b-7yqzjlhu9u] {
    background: #312e81;
    color: #c7d2fe;
}

[data-bs-theme="dark"] .habit-description[b-7yqzjlhu9u] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .day-badge[b-7yqzjlhu9u] {
    background: #374151;
    color: #6b7280;
}

[data-bs-theme="dark"] .day-badge.active[b-7yqzjlhu9u] {
    background: #1e3a8a;
    color: #93c5fd;
}

[data-bs-theme="dark"] .btn-outline[b-7yqzjlhu9u] {
    background: #374151;
    border: 1px solid #4b5563;
    color: #f3f4f6;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-outline:hover[b-7yqzjlhu9u] {
        background: #4b5563;
        border-color: #6b7280;
    }
}

[data-bs-theme="dark"] .task-edit-btn[b-7yqzjlhu9u] {
    color: #9ca3af;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .task-edit-btn:hover[b-7yqzjlhu9u] {
        background: #374151;
        color: #6366f1;
    }
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-7yqzjlhu9u] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-7yqzjlhu9u],
    .modal-content-large[b-7yqzjlhu9u],
    .plan-preview-modal[b-7yqzjlhu9u] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .plan-preview-modal .modal-body[b-7yqzjlhu9u] {
        max-height: none;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-body[b-7yqzjlhu9u] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem;
    }

    .modal-header[b-7yqzjlhu9u] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-footer[b-7yqzjlhu9u] {
        flex-shrink: 0;
        padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn-close[b-7yqzjlhu9u] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .task-header[b-7yqzjlhu9u] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .task-title-section[b-7yqzjlhu9u] {
        flex-basis: 100%;
    }

    .task-title-input[b-7yqzjlhu9u] {
        min-width: 0;
        width: 100%;
    }

    .task-edit-btn[b-7yqzjlhu9u] {
        opacity: 1;
    }

    .habit-header[b-7yqzjlhu9u] {
        flex-wrap: wrap;
    }

    .habit-days[b-7yqzjlhu9u] {
        flex-wrap: wrap;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-7yqzjlhu9u] {
        font-size: 1.1rem;
    }

    .modal-body[b-7yqzjlhu9u] {
        padding: 1rem;
    }

    .modal-footer[b-7yqzjlhu9u] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn-primary[b-7yqzjlhu9u],
    .modal-footer .btn-secondary[b-7yqzjlhu9u],
    .modal-footer .btn-outline[b-7yqzjlhu9u] {
        width: 100%;
        text-align: center;
    }

    .section-title[b-7yqzjlhu9u] {
        font-size: 1rem;
    }

    .task-item[b-7yqzjlhu9u] {
        padding: 0.5rem;
    }

    .task-title[b-7yqzjlhu9u] {
        font-size: 0.9rem;
    }

    .habit-card[b-7yqzjlhu9u] {
        padding: 0.75rem;
    }

    .plan-summary[b-7yqzjlhu9u] {
        font-size: 0.875rem;
        padding: 0.75rem;
    }
}
/* /Components/Shared/PublicChallengesModal.razor.rz.scp.css */
.modal-overlay[b-auy6h8d35z] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    overscroll-behavior: contain;
}

.modal-content[b-auy6h8d35z] {
    background-color: var(--card-bg);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.modal-large[b-auy6h8d35z] {
    max-width: 700px;
}

.modal-header[b-auy6h8d35z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-auy6h8d35z] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
}

.btn-close[b-auy6h8d35z] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    line-height: 1;
}

@media (hover: hover) {
    .btn-close:hover[b-auy6h8d35z] {
        color: var(--text-color);
    }
}

.modal-body[b-auy6h8d35z] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.search-section[b-auy6h8d35z] {
    margin-bottom: 1rem;
}

.input-group[b-auy6h8d35z] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group-text[b-auy6h8d35z] {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 6px 0 0 6px;
    padding: 0.5rem 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.input-group .form-control[b-auy6h8d35z] {
    flex: 1;
    border-radius: 0;
    border-left: none;
    min-width: 0;
    width: auto;
}

.input-group .form-control:not(:last-child)[b-auy6h8d35z] {
    border-right: none;
}

.input-group .form-control:last-child[b-auy6h8d35z] {
    border-radius: 0 6px 6px 0;
}

.input-group .btn[b-auy6h8d35z] {
    border-radius: 0 6px 6px 0;
    border-left: none;
    white-space: nowrap;
}

.loading-state[b-auy6h8d35z],
.empty-state[b-auy6h8d35z] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-icon[b-auy6h8d35z] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.challenges-list[b-auy6h8d35z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.challenge-item[b-auy6h8d35z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

@media (hover: hover) {
    .challenge-item:hover[b-auy6h8d35z] {
        border-color: var(--primary-color);
        background-color: var(--hover-bg);
    }
}

.challenge-info[b-auy6h8d35z] {
    flex: 1;
    min-width: 0;
}

.challenge-name-row[b-auy6h8d35z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.challenge-name[b-auy6h8d35z] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.challenge-details-row[b-auy6h8d35z] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.challenge-description[b-auy6h8d35z] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1;
}

.participant-count[b-auy6h8d35z] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #5c6bc0;
    font-weight: 500;
}

.challenge-meta[b-auy6h8d35z] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.meta-item[b-auy6h8d35z] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.challenge-action[b-auy6h8d35z] {
    margin-left: 1rem;
    flex-shrink: 0;
}

.load-more-trigger[b-auy6h8d35z] {
    display: flex;
    justify-content: center;
    padding: 1rem;
    min-height: 40px;
}

.modal-footer[b-auy6h8d35z] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

.btn-secondary[b-auy6h8d35z] {
    background-color: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .btn-secondary:hover[b-auy6h8d35z] {
        background-color: var(--hover-bg);
    }
}

.btn-primary[b-auy6h8d35z] {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .btn-primary:hover[b-auy6h8d35z] {
        opacity: 0.9;
    }
}

.form-control[b-auy6h8d35z] {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    width: 100%;
}

.form-control:focus[b-auy6h8d35z] {
    outline: none;
    border-color: var(--border-color);
    box-shadow: none;
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-auy6h8d35z] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-auy6h8d35z],
    .modal-large[b-auy6h8d35z] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-body[b-auy6h8d35z] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-header[b-auy6h8d35z] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-footer[b-auy6h8d35z] {
        flex-shrink: 0;
        padding: 1rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .btn-close[b-auy6h8d35z] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .challenges-list[b-auy6h8d35z] {
        max-height: none;
    }

    .challenge-item[b-auy6h8d35z] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .challenge-action[b-auy6h8d35z] {
        margin-left: 0;
        width: 100%;
    }

    .challenge-action .btn-primary[b-auy6h8d35z] {
        width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-auy6h8d35z] {
        font-size: 1.1rem;
    }

    .modal-footer[b-auy6h8d35z] {
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .modal-footer .btn-secondary[b-auy6h8d35z] {
        width: 100%;
    }

    .input-group[b-auy6h8d35z] {
        flex-wrap: wrap;
    }

    .input-group-text[b-auy6h8d35z] {
        border-radius: 6px 6px 0 0;
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        width: 100%;
        justify-content: center;
    }

    .input-group .form-control[b-auy6h8d35z] {
        border-radius: 0;
        border-left: 1px solid var(--border-color);
    }

    .input-group .form-control:last-child[b-auy6h8d35z],
    .input-group .btn[b-auy6h8d35z] {
        border-radius: 0 0 6px 6px;
    }

    .challenge-name-row[b-auy6h8d35z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .challenge-details-row[b-auy6h8d35z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .challenge-meta[b-auy6h8d35z] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Components/Shared/TagDisplay.razor.rz.scp.css */
/* TagDisplay component styles */

.tag-display[b-yj0dpebe0m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.tag-pill[b-yj0dpebe0m] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--tag-color, #6366f1);
    background: color-mix(in srgb, var(--tag-color, #6366f1) 12%, transparent);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s ease;
    max-width: 100px;
    white-space: nowrap;
}

@media (hover: hover) {
    .tag-pill:hover[b-yj0dpebe0m] {
        background: color-mix(in srgb, var(--tag-color, #6366f1) 20%, transparent);
        transform: translateY(-1px);
    }
}

.tag-pill-text[b-yj0dpebe0m] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-overflow[b-yj0dpebe0m] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f3f4f6);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.15s ease;
}

@media (hover: hover) {
    .tag-overflow:hover[b-yj0dpebe0m] {
        background: #e5e7eb;
    }
}

.tag-collapse[b-yj0dpebe0m] {
    color: var(--text-secondary);
}

/* Compact mode */
.tag-display.compact .tag-pill[b-yj0dpebe0m] {
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    max-width: 72px;
}

.tag-display.compact .tag-overflow[b-yj0dpebe0m] {
    padding: 0.0625rem 0.25rem;
    font-size: 0.5625rem;
}

/* Dark theme adjustments */
:root.dark-theme .tag-pill[b-yj0dpebe0m] {
    background: color-mix(in srgb, var(--tag-color, #6366f1) 20%, transparent);
}

@media (hover: hover) {
    :root.dark-theme .tag-pill:hover[b-yj0dpebe0m] {
        background: color-mix(in srgb, var(--tag-color, #6366f1) 30%, transparent);
    }
}

:root.dark-theme .tag-overflow[b-yj0dpebe0m] {
    background: var(--bg-secondary);
}

@media (hover: hover) {
    :root.dark-theme .tag-overflow:hover[b-yj0dpebe0m] {
        background: var(--border-color, #374151);
    }
}

/* Mobile responsive */
@media (max-width: 576px) {
    .tag-pill[b-yj0dpebe0m] {
        padding: 0.1875rem 0.5rem;
        font-size: 0.75rem;
        max-width: 80px;
    }

    .tag-display.compact .tag-pill[b-yj0dpebe0m] {
        font-size: 0.625rem;
        max-width: 64px;
    }
}
/* /Components/Shared/TagPicker.razor.rz.scp.css */
/* TagPicker component styles */

.tag-picker-container[b-pz5qo3r53x] {
    position: relative;
    display: inline-flex;
}

.tag-picker-btn[b-pz5qo3r53x] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .tag-picker-btn:hover[b-pz5qo3r53x] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.tag-picker-btn.has-tags[b-pz5qo3r53x] {
    color: var(--primary-color, #6366f1);
}

.tag-picker-btn .tag-count[b-pz5qo3r53x] {
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--primary-color, #6366f1);
    color: white;
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
    min-width: 1.25rem;
    text-align: center;
}

/* Dropdown panel */
.tag-picker-panel[b-pz5qo3r53x] {
    position: fixed;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 240px;
    max-width: 300px;
    z-index: 9999;
    overflow: hidden;
}

.tag-picker-panel.mobile-panel[b-pz5qo3r53x] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-width: none;
    border-radius: 16px 16px 0 0;
    max-height: 70vh;
    padding-bottom: env(safe-area-inset-bottom, 0.5rem);
}

.tag-picker-header[b-pz5qo3r53x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.tag-picker-title[b-pz5qo3r53x] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.btn-manage-tags[b-pz5qo3r53x] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-manage-tags:hover[b-pz5qo3r53x] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

/* Search input */
.tag-search-wrapper[b-pz5qo3r53x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.tag-search-wrapper .bi-search[b-pz5qo3r53x] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tag-search-input[b-pz5qo3r53x] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.tag-search-input[b-pz5qo3r53x]::placeholder {
    color: var(--text-secondary);
}

/* Tag list */
.tag-list[b-pz5qo3r53x] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.tag-loading[b-pz5qo3r53x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tag-empty[b-pz5qo3r53x] {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tag-option[b-pz5qo3r53x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: var(--text-primary);
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .tag-option:hover[b-pz5qo3r53x] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.tag-option.selected[b-pz5qo3r53x] {
    background: rgba(99, 102, 241, 0.08);
}

.tag-checkbox[b-pz5qo3r53x] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
}

.tag-option.selected .tag-checkbox[b-pz5qo3r53x] {
    color: var(--primary-color, #6366f1);
}

.tag-color-dot[b-pz5qo3r53x] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-name[b-pz5qo3r53x] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Create tag option */
.tag-create-option[b-pz5qo3r53x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-top: 1px solid var(--border-color, #e5e7eb);
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: var(--primary-color, #6366f1);
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .tag-create-option:hover[b-pz5qo3r53x] {
        background: rgba(99, 102, 241, 0.08);
    }
}

/* Error message */
.tag-error-message[b-pz5qo3r53x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color, #ef4444);
    font-size: 0.75rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.tag-error-message .bi[b-pz5qo3r53x] {
    font-size: 0.875rem;
}

/* Color picker overlay */
.tag-color-picker[b-pz5qo3r53x] {
    padding: 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.color-picker-label[b-pz5qo3r53x] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.color-options[b-pz5qo3r53x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.color-option[b-pz5qo3r53x] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .color-option:hover[b-pz5qo3r53x] {
        transform: scale(1.1);
    }
}

.color-option.selected[b-pz5qo3r53x] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--card-bg, white);
}

.color-picker-actions[b-pz5qo3r53x] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Footer */
.tag-picker-footer[b-pz5qo3r53x] {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.btn-clear-tags[b-pz5qo3r53x] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.25rem 0;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .btn-clear-tags:hover[b-pz5qo3r53x] {
        color: var(--danger-color, #ef4444);
    }
}

/* Dark theme adjustments */
:root.dark-theme .tag-picker-panel[b-pz5qo3r53x] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

:root.dark-theme .tag-color-picker[b-pz5qo3r53x] {
    background: var(--bg-secondary);
}

/* Mobile responsive */
@media (max-width: 576px) {
    .tag-picker-panel[b-pz5qo3r53x] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        max-width: none;
        border-radius: 16px 16px 0 0;
        max-height: 70vh;
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
    }

    .tag-list[b-pz5qo3r53x] {
        max-height: 40vh;
    }
}
/* /Components/Shared/TaskCard.razor.rz.scp.css */
/* TaskCard component styles */

/* ==========================================================================
   List View Task Card
   ========================================================================== */

.task-item-container[b-9a1hrqx7tw] {
}

.task-item-container:last-child[b-9a1hrqx7tw] {
    margin-bottom: 0;
}

.task-item-wrapper[b-9a1hrqx7tw] {
    position: relative;
}

.task-card[b-9a1hrqx7tw] {
    background: transparent;
    padding: 4px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

@media (hover: hover) {
    .task-card:hover[b-9a1hrqx7tw] {
        /* Rounded highlight (TickTick-style) — round the corners and drop this row's
           divider while hovered so the highlight reads as a clean rounded pill. */
        background: var(--hover-bg, rgba(0, 0, 0, 0.04));
        border-radius: 8px;
        border-bottom-color: transparent;
    }
}

.task-card.favorite[b-9a1hrqx7tw] {
    background: var(--warning-light, #fef3c7);
}

.task-card.completed[b-9a1hrqx7tw] {
    opacity: 0.6;
}

.task-card.dragging[b-9a1hrqx7tw] {
    opacity: 0;
    transform: scale(0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 100;
    transition: none;
}

/* Task Card Header - checkbox + title */
.task-card-header[b-9a1hrqx7tw] {
    display: flex;
    align-items: center;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.task-card-checkbox[b-9a1hrqx7tw] {
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0s;
}

@media (hover: hover) {
    .task-card:hover .task-card-checkbox[b-9a1hrqx7tw] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .task-card-checkbox[b-9a1hrqx7tw] {
        opacity: 1;
        visibility: visible;
    }
}

.task-card-checkbox span[b-9a1hrqx7tw] {
    border-radius: 3px;
}

@media (hover: hover) {
    .task-card-checkbox:hover[b-9a1hrqx7tw] {
        color: var(--primary-color, #6366f1);
    }
}

.task-card-title[b-9a1hrqx7tw] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.43;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0;
    transition: padding-left 0.25s ease;
    flex: 1;
    min-width: 0;
}

@media (hover: hover) {
    .task-card:hover .task-card-title[b-9a1hrqx7tw] {
        padding-left: 1.375rem;
    }
}

@media (hover: none) {
    .task-card-title[b-9a1hrqx7tw] {
        padding-left: 1.375rem;
    }
}

.task-card-title.completed[b-9a1hrqx7tw] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Task Card Metadata */
.task-card-meta[b-9a1hrqx7tw] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.25rem;
    font-size: 0.6875rem;
    margin-top: 0;
    margin-left: auto;
    flex-shrink: 0;
    align-items: center;
    white-space: nowrap;
}

.task-card-meta .due-date[b-9a1hrqx7tw] {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color, #3b82f6);
    padding: 0 0.125rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    position: relative;
}

@media (hover: hover) {
    .task-card-meta .due-date:hover[b-9a1hrqx7tw] {
        background: rgba(59, 130, 246, 0.1);
    }
}

.task-card-meta .due-date.overdue[b-9a1hrqx7tw] {
    color: #ef4444;
}

.task-card-meta .due-date.due-today[b-9a1hrqx7tw] {
    color: #f59e0b;
}

.task-card-meta .priority[b-9a1hrqx7tw] {
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.task-card-meta .priority.priority-medium[b-9a1hrqx7tw] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.task-card-meta .priority.priority-high[b-9a1hrqx7tw] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.task-card-meta .priority.priority-critical[b-9a1hrqx7tw] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-card-meta .subtasks[b-9a1hrqx7tw] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

.task-card-meta .description-indicator[b-9a1hrqx7tw],
.task-card-meta .reminder[b-9a1hrqx7tw],
.task-card-meta .recurring[b-9a1hrqx7tw] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

/* List view task card pickers (CalendarPicker and PriorityPicker) */
[b-9a1hrqx7tw] .list-due-date-picker .calendar-picker-btn,
[b-9a1hrqx7tw] .list-priority-picker .priority-picker-btn {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease;
}

[b-9a1hrqx7tw] .list-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .list-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-9a1hrqx7tw] .list-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .list-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-9a1hrqx7tw] .list-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .list-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-9a1hrqx7tw] .list-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-9a1hrqx7tw] .list-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.75rem;
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .list-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Ensure dropdown panels appear above other elements */
[b-9a1hrqx7tw] .list-due-date-picker .calendar-picker-panel,
[b-9a1hrqx7tw] .list-priority-picker .priority-picker-panel {
    z-index: 1000;
}

/* Task Card Actions (for list view) */
.task-card-actions[b-9a1hrqx7tw] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
    padding-left: 0.5rem;
}

.task-card-actions button[b-9a1hrqx7tw] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.375rem;
    border-radius: 4px;
}

@media (hover: hover) {
    .task-card-actions button:hover[b-9a1hrqx7tw] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

@media (hover: hover) {
    .task-card-actions .btn-favorite:hover[b-9a1hrqx7tw] {
        color: #fbbf24;
    }
}

.task-card-actions .btn-favorite .bi-star-fill[b-9a1hrqx7tw] {
    color: #fbbf24;
}

@media (hover: hover) {
    .task-card-actions .btn-edit:hover[b-9a1hrqx7tw] {
        color: var(--primary-color, #6366f1);
    }
}

@media (hover: hover) {
    .task-card-actions .btn-delete:hover[b-9a1hrqx7tw] {
        color: var(--danger-color, #ef4444);
    }
}

/* List View Layout - flat row with a hairline divider (TickTick-style). No per-row
   box/border/radius/shadow; rows sit flush (parent flex gaps are zeroed) so the
   bottom dividers read as a continuous list. */
.task-card.list-view[b-9a1hrqx7tw] {
    flex-direction: row;
    align-items: center;
    padding: 4px 10px;
    min-height: 36px;
    border-radius: 0;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.task-card.list-view .task-card-content[b-9a1hrqx7tw] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Tags sit inline in the meta row just left of the due date; never let them grow or
   wrap the row taller. The +N overflow keeps the chip count bounded. */
.task-card-meta .tag-display[b-9a1hrqx7tw] {
    flex-shrink: 0;
}

/* Responsive priority flag (list + kanban). Where the checkbox is permanently visible
   (touch / mobile) the priority-tinted checkbox conveys priority, so hide the redundant
   flag. On desktop the checkbox is hidden until row-hover, so the flag stays as the
   always-visible priority cue. Mirrors the checkbox-visibility media queries below. */
@media (hover: none) {
    [b-9a1hrqx7tw] .list-priority-picker,
    [b-9a1hrqx7tw] .card-priority-picker {
        display: none;
    }
}

@media (max-width: 576px) {
    [b-9a1hrqx7tw] .list-priority-picker,
    [b-9a1hrqx7tw] .card-priority-picker {
        display: none;
    }
}

/* Task list badge for Inbox view */
.task-list-badge[b-9a1hrqx7tw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 160px;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary, #f3f4f6);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-right: 0.5rem;
}

@media (hover: hover) {
    .task-list-badge:hover[b-9a1hrqx7tw] {
        color: var(--text-primary);
        background: var(--hover-bg, #e5e7eb);
        border-color: var(--accent-primary, #6366f1);
    }
}

.task-list-badge:focus[b-9a1hrqx7tw] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.task-list-badge .bi-kanban[b-9a1hrqx7tw],
.task-list-badge .bi-list-task[b-9a1hrqx7tw] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.task-list-badge-text[b-9a1hrqx7tw] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Task action menu */
.task-action-menu-container[b-9a1hrqx7tw] {
    position: relative;
    display: inline-flex;
}

.btn-task-menu[b-9a1hrqx7tw] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.375rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
    .btn-task-menu:hover[b-9a1hrqx7tw] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.task-action-dropdown[b-9a1hrqx7tw] {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    z-index: 1000;
    padding: 0.5rem 0;
    overflow: hidden;
}

.task-action-dropdown .dropdown-item[b-9a1hrqx7tw] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .task-action-dropdown .dropdown-item:hover[b-9a1hrqx7tw] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.task-action-dropdown .dropdown-item.text-danger[b-9a1hrqx7tw] {
    color: var(--danger-color, #ef4444);
}

@media (hover: hover) {
    .task-action-dropdown .dropdown-item.text-danger:hover[b-9a1hrqx7tw] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.task-action-dropdown .dropdown-item .favorite-icon[b-9a1hrqx7tw] {
    color: #fbbf24;
}

.task-action-dropdown .dropdown-divider[b-9a1hrqx7tw] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Plan menu item states */
.task-action-dropdown .dropdown-item.generating[b-9a1hrqx7tw] {
    opacity: 0.7;
}

.task-action-dropdown .dropdown-item.plan-ready[b-9a1hrqx7tw] {
    color: #10b981;
}

.task-action-dropdown .dropdown-item.plan-ready .bi-diagram-3-fill[b-9a1hrqx7tw] {
    color: #10b981;
}

/* ==========================================================================
   Kanban Card
   ========================================================================== */

.kanban-card-wrapper[b-9a1hrqx7tw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.kanban-card[b-9a1hrqx7tw] {
    background: transparent;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    padding: 4px 12px;
    cursor: grab;
    transition: background-color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (hover: hover) {
    .kanban-card:hover[b-9a1hrqx7tw] {
        /* Rounded highlight to match the flat list rows. */
        background: var(--hover-bg, rgba(0, 0, 0, 0.04));
        border-radius: 8px;
        border-bottom-color: transparent;
    }
}

.kanban-card:active[b-9a1hrqx7tw] {
    cursor: grabbing;
}

.kanban-card.dragging[b-9a1hrqx7tw] {
    opacity: 0.4;
    transform: scale(0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color, #6366f1);
    z-index: 100;
}

/* JavaScript drag: original card hidden during drag (used by card-drag.js) */
.kanban-card.card-dragging[b-9a1hrqx7tw] {
    opacity: 0 !important;
    pointer-events: none;
    transform: none;
    transition: none;
}

.kanban-card.favorite[b-9a1hrqx7tw] {
    background: var(--warning-light, #fef3c7);
}

.kanban-card.completed[b-9a1hrqx7tw] {
    opacity: 0.7;
    cursor: pointer;
}

@media (hover: hover) {
    .kanban-card.completed:hover[b-9a1hrqx7tw] {
        opacity: 0.85;
    }
}

.kanban-card-header[b-9a1hrqx7tw] {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.card-checkbox[b-9a1hrqx7tw] {
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0s;
}

@media (hover: hover) {
    .kanban-card:hover .card-checkbox[b-9a1hrqx7tw] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .card-checkbox[b-9a1hrqx7tw] {
        opacity: 1;
        visibility: visible;
    }
}

.card-checkbox span[b-9a1hrqx7tw] {
    border-radius: 3px;
}

@media (hover: hover) {
    .card-checkbox:hover[b-9a1hrqx7tw] {
        color: var(--primary-color, #6366f1);
    }
}

/* Priority-tinted checkbox (TickTick-style), shared by list + kanban. Colours both the
   unchecked (bi-square) and checked (bi-check-square-fill) glyph. Placed AFTER the :hover
   overrides above so a prioritised checkbox keeps its colour on hover; Low has no rule and
   falls back to the neutral colour + primary-on-hover. */
.task-card-checkbox.priority-medium[b-9a1hrqx7tw],
.card-checkbox.priority-medium[b-9a1hrqx7tw] {
    color: #3b82f6;
}

.task-card-checkbox.priority-high[b-9a1hrqx7tw],
.card-checkbox.priority-high[b-9a1hrqx7tw] {
    color: #f97316;
}

.task-card-checkbox.priority-critical[b-9a1hrqx7tw],
.card-checkbox.priority-critical[b-9a1hrqx7tw] {
    color: #ef4444;
}

.card-title[b-9a1hrqx7tw] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.43;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0;
    transition: padding-left 0.25s ease;
}

@media (hover: hover) {
    .kanban-card:hover .card-title[b-9a1hrqx7tw] {
        padding-left: 1.375rem;
    }
}

@media (hover: none) {
    .card-title[b-9a1hrqx7tw] {
        padding-left: 1.375rem;
    }
}

.card-title.completed[b-9a1hrqx7tw] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.kanban-card-meta[b-9a1hrqx7tw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-top: 2px;
}

.card-description-indicator[b-9a1hrqx7tw] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

.card-subtasks[b-9a1hrqx7tw] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

/* Generic card-meta-picker container (for kanban cards) */
[b-9a1hrqx7tw] .card-meta-picker {
    position: relative;
}

[b-9a1hrqx7tw] .card-meta-picker .calendar-picker-btn,
[b-9a1hrqx7tw] .card-meta-picker .priority-picker-btn {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease;
}

/* Position dropdown panels from card pickers - use fixed positioning to escape overflow clipping */
[b-9a1hrqx7tw] .card-meta-picker .calendar-picker-panel,
[b-9a1hrqx7tw] .card-meta-picker .priority-picker-panel {
    position: fixed;
    z-index: 9999;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin-top: 4px;
}

/* Kanban card pickers */
[b-9a1hrqx7tw] .card-due-date-picker .calendar-picker-btn,
[b-9a1hrqx7tw] .card-priority-picker .priority-picker-btn {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease;
}

[b-9a1hrqx7tw] .card-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .card-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-9a1hrqx7tw] .card-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .card-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-9a1hrqx7tw] .card-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .card-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-9a1hrqx7tw] .card-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-9a1hrqx7tw] .card-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.6875rem;
}

@media (hover: hover) {
    [b-9a1hrqx7tw] .card-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Ensure dropdown panels appear above other elements */
[b-9a1hrqx7tw] .card-due-date-picker .calendar-picker-panel,
[b-9a1hrqx7tw] .card-priority-picker .priority-picker-panel {
    z-index: 1000;
}

/* ==========================================================================
   Nested Subtasks
   ========================================================================== */

.nested-subtasks[b-9a1hrqx7tw] {
    margin-left: 1.5rem;
    border-left: 2px solid var(--border-color, #e5e7eb);
    padding-left: 0.5rem;
}

.nested-subtasks .task-item-container[b-9a1hrqx7tw] {
    margin-bottom: 0;
}

/* ==========================================================================
   Dark Theme Adjustments
   ========================================================================== */

:root.dark-theme .task-card[b-9a1hrqx7tw],
:root.dark-theme .kanban-card[b-9a1hrqx7tw] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

:root.dark-theme .task-card.favorite[b-9a1hrqx7tw],
:root.dark-theme .kanban-card.favorite[b-9a1hrqx7tw] {
    background: rgba(251, 191, 36, 0.15);
}

:root.dark-theme .task-action-dropdown[b-9a1hrqx7tw] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 576px) {
    .task-card-checkbox[b-9a1hrqx7tw],
    .card-checkbox[b-9a1hrqx7tw] {
        opacity: 1;
    }

    .task-card-title[b-9a1hrqx7tw],
    .card-title[b-9a1hrqx7tw] {
        padding-left: 1.375rem;
    }

    @media (hover: hover) {
        .task-card:hover .task-card-title[b-9a1hrqx7tw],
        .kanban-card:hover .card-title[b-9a1hrqx7tw] {
            padding-left: 1.375rem;
        }
    }

    .task-card-meta .description-indicator[b-9a1hrqx7tw],
    .task-card-meta .reminder[b-9a1hrqx7tw],
    .task-card-meta .recurring[b-9a1hrqx7tw] {
        display: none;
    }

    .task-list-badge[b-9a1hrqx7tw] {
        max-width: 80px;
    }

    .task-action-dropdown[b-9a1hrqx7tw] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0.5rem);
    }
}

@media (max-width: 480px) {
    .kanban-card[b-9a1hrqx7tw],
    .task-card[b-9a1hrqx7tw] {
        padding: 4px 8px;
    }

    .card-title[b-9a1hrqx7tw],
    .task-card-title[b-9a1hrqx7tw] {
        font-size: 0.8125rem;
    }
}
/* /Components/Shared/TaskDetailModal.razor.rz.scp.css */
/* TaskDetailModal Styles */

/* Modal Base Styles */
.modal-overlay[b-vt3w82ssa1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    overscroll-behavior: contain;
}

.modal-content[b-vt3w82ssa1] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.modal-content-large[b-vt3w82ssa1] {
    max-width: 700px;
}

.modal-header[b-vt3w82ssa1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-title-row[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.modal-task-checkbox[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

@media (hover: hover) {
    .modal-task-checkbox:hover[b-vt3w82ssa1] {
        color: var(--primary-color, #6366f1);
    }
}

.modal-task-checkbox .bi-check-square-fill[b-vt3w82ssa1] {
    color: var(--success-color, #10b981);
}

.modal-header h3[b-vt3w82ssa1] {
    margin: 0;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editable modal title */
.modal-title-editable[b-vt3w82ssa1] {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) {
    .modal-title-editable:hover[b-vt3w82ssa1] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

.modal-title-editable.completed[b-vt3w82ssa1] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.modal-title-input[b-vt3w82ssa1] {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    color: var(--text-primary);
    background: var(--input-bg, white);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Modal Header Actions (Calendar/Priority pickers) */
.modal-header-actions[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.btn-close[b-vt3w82ssa1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

@media (hover: hover) {
    .btn-close:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
    }
}

.modal-body[b-vt3w82ssa1] {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.form-group[b-vt3w82ssa1] {
    margin-bottom: 1.5rem;
}

.form-group label[b-vt3w82ssa1] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.modal-footer[b-vt3w82ssa1] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-footer-left[b-vt3w82ssa1] {
    display: flex;
    gap: 0.5rem;
}

.modal-footer-right[b-vt3w82ssa1] {
    display: flex;
    gap: 1rem;
}

.btn-primary[b-vt3w82ssa1], .btn-secondary[b-vt3w82ssa1] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-vt3w82ssa1] {
    background: var(--accent-primary);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-vt3w82ssa1] {
        background: var(--accent-secondary);
    }
}

.btn-secondary[b-vt3w82ssa1] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
    }
}

.form-input[b-vt3w82ssa1] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.form-input:focus[b-vt3w82ssa1] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

textarea.form-input[b-vt3w82ssa1] {
    resize: vertical;
    font-family: inherit;
}

/* Character Counter */
.character-counter[b-vt3w82ssa1] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.character-counter-warning[b-vt3w82ssa1] {
    color: #f59e0b;
}

/* Subtasks Section */
.subtasks-section[b-vt3w82ssa1] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.subtasks-header[b-vt3w82ssa1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.subtasks-header h4[b-vt3w82ssa1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.subtasks-count[b-vt3w82ssa1] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.subtasks-header-actions[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-section-add[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-section-add:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
        color: var(--primary-color, #6366f1);
    }
}

.subtasks-scroll-container[b-vt3w82ssa1] {
    border-radius: 6px;
    max-height: 275px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.btn-load-more[b-vt3w82ssa1] {
    display: block;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-load-more:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.subtasks-limit-reached[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.add-subtask-row[b-vt3w82ssa1] {
    cursor: pointer;
    border: 2px dashed var(--border-color, #e5e7eb) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(79, 70, 229, 0.03) 100%);
    margin-bottom: 0.5rem;
}

@media (hover: hover) {
    .add-subtask-row:hover[b-vt3w82ssa1] {
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(79, 70, 229, 0.08) 100%);
        border-color: var(--primary-color, #6366f1) !important;
    }
}

.add-subtask-prompt[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    width: 100%;
}

@media (hover: hover) {
    .add-subtask-row:hover .add-icon[b-vt3w82ssa1] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon[b-vt3w82ssa1] {
        opacity: 1;
    }
}

.add-subtask-form[b-vt3w82ssa1] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.subtask-input[b-vt3w82ssa1] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    background: var(--input-bg);
    color: var(--text-primary);
}

.subtask-input:focus[b-vt3w82ssa1] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-subtask-actions[b-vt3w82ssa1] {
    display: flex;
    gap: 0.5rem;
}

.subtasks-list[b-vt3w82ssa1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subtask-item[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    transition: all 0.2s;
}

@media (hover: hover) {
    .subtask-item:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
    }
}

.subtask-item.completed[b-vt3w82ssa1] {
    opacity: 0.6;
}

.subtask-checkbox[b-vt3w82ssa1] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
}

@media (hover: hover) {
    .subtask-checkbox:hover[b-vt3w82ssa1] {
        color: var(--accent-primary);
    }
}

.subtask-title[b-vt3w82ssa1] {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.subtask-title.completed[b-vt3w82ssa1] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Editable subtask title - click to edit inline */
.subtask-title-editable[b-vt3w82ssa1] {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.125rem 0.375rem;
    margin: -0.125rem -0.375rem;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
    .subtask-title-editable:hover[b-vt3w82ssa1] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--accent-primary);
    }
}

.subtask-title-editable.completed[b-vt3w82ssa1] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Subtask Action Menu */
.subtask-action-menu-container[b-vt3w82ssa1] {
    position: relative;
    display: inline-flex;
}

.btn-subtask-menu[b-vt3w82ssa1] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0.375rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

@media (hover: hover) {
    .subtask-item:hover .btn-subtask-menu[b-vt3w82ssa1] {
        opacity: 1;
    }
}

@media (hover: none) {
    .btn-subtask-menu[b-vt3w82ssa1] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .btn-subtask-menu:hover[b-vt3w82ssa1] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

/* Mobile: always show subtask menu button (no hover on touch) */
@media (max-width: 768px) {
    .btn-subtask-menu[b-vt3w82ssa1] {
        opacity: 1;
    }
}

.subtask-action-dropdown[b-vt3w82ssa1] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.25rem;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 140px;
    z-index: 1100;
    padding: 0.5rem 0;
    overflow: hidden;
}

.subtask-action-dropdown .dropdown-item[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .subtask-action-dropdown .dropdown-item:hover[b-vt3w82ssa1] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.subtask-action-dropdown .dropdown-item.text-danger[b-vt3w82ssa1] {
    color: #ef4444;
}

@media (hover: hover) {
    .subtask-action-dropdown .dropdown-item.text-danger:hover[b-vt3w82ssa1] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.subtask-action-dropdown .dropdown-divider[b-vt3w82ssa1] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Subtask Edit Input */
.subtask-edit-input[b-vt3w82ssa1] {
    flex: 1;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
}

/* Outline Button Variants */
.btn-outline-danger[b-vt3w82ssa1] {
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-outline-danger:hover[b-vt3w82ssa1] {
        background: #ef4444;
        color: white;
    }
}

.btn-outline-primary[b-vt3w82ssa1] {
    background: transparent;
    border: 1px solid var(--accent-primary, #6366f1);
    color: var(--accent-primary, #6366f1);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-outline-primary:hover[b-vt3w82ssa1] {
        background: var(--accent-primary, #6366f1);
        color: white;
    }
}

/* Small button variants */
.btn-sm[b-vt3w82ssa1] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-vt3w82ssa1] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-vt3w82ssa1],
    .modal-content-large[b-vt3w82ssa1] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-header[b-vt3w82ssa1] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

    .modal-footer[b-vt3w82ssa1] {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
        flex-shrink: 0;
    }

    .btn-close[b-vt3w82ssa1] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }
}

/* Action Menu (Three-dot dropdown) */
.task-action-menu-container[b-vt3w82ssa1] {
    position: relative;
}

.btn-task-menu[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-task-menu:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
        color: var(--text-primary);
        border-color: var(--text-secondary);
    }
}

.task-action-dropdown[b-vt3w82ssa1] {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    z-index: 1200;
    padding: 0.25rem 0;
}

.task-action-dropdown .dropdown-item[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

@media (hover: hover) {
    .task-action-dropdown .dropdown-item:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
    }
}

.task-action-dropdown .dropdown-item.text-danger[b-vt3w82ssa1] {
    color: var(--danger-color, #ef4444);
}

.task-action-dropdown .dropdown-item .favorite-icon[b-vt3w82ssa1] {
    color: #f59e0b;
}

.task-action-dropdown .dropdown-divider[b-vt3w82ssa1] {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--border-color);
}

/* Move to List Badge & Dropdown */
.move-to-container[b-vt3w82ssa1] {
    position: relative;
    display: inline-block;
}

.move-to-badge[b-vt3w82ssa1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 200px;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .move-to-badge:hover[b-vt3w82ssa1] {
        color: var(--text-primary);
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.move-to-badge:focus[b-vt3w82ssa1] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.move-to-badge .bi-folder2[b-vt3w82ssa1],
.move-to-badge .bi-kanban[b-vt3w82ssa1],
.move-to-badge .bi-list-task[b-vt3w82ssa1] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.move-to-badge-text[b-vt3w82ssa1] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-to-dropdown-wrapper[b-vt3w82ssa1] {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.5rem;
    z-index: 1200;
}

.move-to-dropdown[b-vt3w82ssa1] {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    min-width: 200px;
    max-width: 280px;
}

.move-to-search[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.move-to-search .bi-search[b-vt3w82ssa1] {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.move-to-search input[b-vt3w82ssa1] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
}

.move-to-search input[b-vt3w82ssa1]::placeholder {
    color: var(--text-secondary);
}

.move-to-list[b-vt3w82ssa1] {
    flex: 1;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
}

.move-to-list-item[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: var(--text-primary);
    font-size: 0.875rem;
}

@media (hover: hover) {
    .move-to-list-item:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
    }
}

.move-to-list-item.selected[b-vt3w82ssa1] {
    background: var(--hover-bg);
    color: var(--accent-primary, #6366f1);
}

.move-to-list-item.current[b-vt3w82ssa1] {
    background: rgba(99, 102, 241, 0.08);
}

.move-to-list-item .bi-list-ul[b-vt3w82ssa1] {
    color: var(--text-secondary);
    font-size: 1rem;
    flex-shrink: 0;
}

.move-to-list-item .bi-chevron-right[b-vt3w82ssa1] {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.move-to-list-name[b-vt3w82ssa1] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sections Submenu - absolutely positioned to the right of dropdown */
.move-to-sections-submenu[b-vt3w82ssa1] {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 4px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    min-width: 160px;
    max-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem 0;
    z-index: 1;
}

.move-to-section-item[b-vt3w82ssa1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
    color: var(--text-primary);
    font-size: 0.875rem;
}

@media (hover: hover) {
    .move-to-section-item:hover[b-vt3w82ssa1] {
        background: var(--hover-bg);
    }
}

.move-to-section-item.current[b-vt3w82ssa1] {
    background: rgba(99, 102, 241, 0.08);
}

.move-to-section-item .bi-dash[b-vt3w82ssa1],
.move-to-section-item .bi-list-ul[b-vt3w82ssa1] {
    font-size: 1rem;
    flex-shrink: 0;
}

.move-to-section-name[b-vt3w82ssa1] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-to-no-results[b-vt3w82ssa1] {
    padding: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
}

/* Responsive adjustments for submenu */
@media (max-width: 768px) {
    .move-to-dropdown-wrapper[b-vt3w82ssa1] {
        position: fixed;
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-bottom: 0;
    }

    .move-to-dropdown[b-vt3w82ssa1] {
        width: 90vw;
        max-width: 280px;
    }

    .move-to-sections-submenu[b-vt3w82ssa1] {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0;
        width: 90vw;
        max-width: 250px;
    }
}
/* /Components/Shared/TaskModal.razor.rz.scp.css */
/* Task Modal Styles */
.modal-overlay[b-atlq3ri4wj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1150;
    animation: fadeIn-b-atlq3ri4wj 0.2s ease-out;
    overscroll-behavior: contain;
}

@keyframes fadeIn-b-atlq3ri4wj {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-content[b-atlq3ri4wj] {
    background: var(--card-bg);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-atlq3ri4wj 0.3s ease-out;
}

@keyframes slideUp-b-atlq3ri4wj {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-atlq3ri4wj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
}

.modal-header h3[b-atlq3ri4wj] {
    margin: 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-header h3 .bi[b-atlq3ri4wj] {
    color: #3788d8;
    font-size: 1.1rem;
}

.close-button[b-atlq3ri4wj] {
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1.1rem;
}

@media (hover: hover) {
    .close-button:hover[b-atlq3ri4wj] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.modal-body[b-atlq3ri4wj] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections */
.form-section[b-atlq3ri4wj] {
    margin-bottom: 2rem;
}

.form-section:last-child[b-atlq3ri4wj] {
    margin-bottom: 0;
}

.section-header[b-atlq3ri4wj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
}

.section-header .bi[b-atlq3ri4wj] {
    color: #3788d8;
    font-size: 1.1rem;
}

.form-group[b-atlq3ri4wj] {
    margin-bottom: 1.25rem;
}

.form-group label[b-atlq3ri4wj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-color);
}

.form-group label .bi[b-atlq3ri4wj] {
    color: #3788d8;
    font-size: 0.95rem;
}

.form-control[b-atlq3ri4wj] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.form-control:focus[b-atlq3ri4wj] {
    outline: none;
    border-color: #3788d8;
    box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.1);
}

@media (hover: hover) {
    .form-control:hover:not(:focus)[b-atlq3ri4wj] {
        border-color: #3788d8;
    }
}

textarea.form-control[b-atlq3ri4wj] {
    resize: vertical;
    min-height: 80px;
}

.form-row[b-atlq3ri4wj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-footer[b-atlq3ri4wj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--header-bg, var(--card-bg));
    gap: 0.75rem;
}

.btn[b-atlq3ri4wj] {
    padding: 0.65rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (hover: hover) {
    .btn:hover[b-atlq3ri4wj] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn:active[b-atlq3ri4wj] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-atlq3ri4wj] {
    background: linear-gradient(135deg, #3788d8 0%, #2d6fb3 100%);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-atlq3ri4wj] {
        background: linear-gradient(135deg, #2d6fb3 0%, #2563a0 100%);
    }
}

.btn-secondary[b-atlq3ri4wj] {
    background: var(--input-bg);
    color: var(--text-color);
    border: 1.5px solid var(--border-color);
    box-shadow: none;
}

@media (hover: hover) {
    .btn-secondary:hover[b-atlq3ri4wj] {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-secondary);
    }
}

/* Color Picker */
.color-picker[b-atlq3ri4wj] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.color-picker-compact[b-atlq3ri4wj] {
    gap: 0.375rem;
    flex-wrap: wrap;
}

.color-option[b-atlq3ri4wj] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-picker-compact .color-option[b-atlq3ri4wj] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    flex: 0 0 auto;
    min-width: 28px;
}

@media (hover: hover) {
    .color-option:hover[b-atlq3ri4wj] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option.selected[b-atlq3ri4wj] {
    border-color: var(--text-color);
    box-shadow: 0 0 0 3px rgba(55, 136, 216, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.color-option .bi[b-atlq3ri4wj] {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.color-picker-compact .color-option .bi[b-atlq3ri4wj] {
    font-size: 1rem;
}

/* Clear/No color option */
.color-option-clear[b-atlq3ri4wj] {
    background: var(--input-bg);
    border: 2px dashed var(--border-color);
}

.color-option-clear .bi[b-atlq3ri4wj] {
    color: var(--text-secondary);
    text-shadow: none;
}

@media (hover: hover) {
    .color-option-clear:hover[b-atlq3ri4wj] {
        border-color: var(--text-secondary);
    }
}

.color-option-clear.selected[b-atlq3ri4wj] {
    border-style: solid;
    border-color: var(--text-color);
}

.custom-color-picker-wrapper[b-atlq3ri4wj] {
    position: relative;
    width: 60px;
    height: 60px;
}

.custom-color-picker-compact[b-atlq3ri4wj] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    flex: 0 0 auto;
    min-width: 28px;
}

.custom-color-input[b-atlq3ri4wj] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.custom-color-button[b-atlq3ri4wj] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 3px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-color-picker-compact .custom-color-button[b-atlq3ri4wj] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border-width: 2px;
}

.custom-color-button span[b-atlq3ri4wj] {
    color: white;
    font-size: 1.5rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.custom-color-picker-compact .custom-color-button span[b-atlq3ri4wj] {
    font-size: 1rem;
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-atlq3ri4wj] {
        border-color: var(--text-color);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-atlq3ri4wj] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-atlq3ri4wj] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-header[b-atlq3ri4wj] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.25rem 1rem;
    }

    .modal-footer[b-atlq3ri4wj] {
        flex-shrink: 0;
        padding: 1rem 1.25rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .modal-body[b-atlq3ri4wj] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1.25rem;
    }

    .close-button[b-atlq3ri4wj] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .form-row[b-atlq3ri4wj] {
        grid-template-columns: 1fr;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-atlq3ri4wj] {
        font-size: 1.1rem;
    }

    .color-picker[b-atlq3ri4wj] {
        gap: 0.5rem;
    }

    .color-option[b-atlq3ri4wj] {
        width: 40px;
        height: 40px;
    }

    .modal-footer[b-atlq3ri4wj] {
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .modal-footer .btn[b-atlq3ri4wj] {
        width: 100%;
        justify-content: center;
    }
}

/* Tag picker form row */
.tag-picker-form-row[b-atlq3ri4wj] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tag-picker-form-row .tag-hint[b-atlq3ri4wj] {
    font-size: 0.875rem;
}

.tag-picker-form-row[b-atlq3ri4wj]  .tag-picker-btn {
    padding: 0.5rem 0.75rem;
    border: 1.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
}

@media (hover: hover) {
    .tag-picker-form-row[b-atlq3ri4wj]  .tag-picker-btn:hover {
        border-color: #3788d8;
    }
}
/* /Components/Shared/TasksCanvasView.razor.rz.scp.css */
.canvas-root[b-5543vij3xw] {
    flex: 1;
    display: flex;
    flex-direction: row;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.canvas-viewport[b-5543vij3xw] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background-color: var(--bg-secondary);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    /* Dot grid (replaces the heavier crossed-line grid). 24px cadence reads as a softer
       unit-grid than the previous 40px lines and doesn't visually compete with rectangular
       cards. CSS vars --canvas-pan-x/y/zoom are driven from canvas-camera.js so the grid
       stays anchored to the world as the user pans/zooms. Cosmetic only — SNAP_GRID
       (20px world) in canvas-camera.js remains the authoritative snap source. */
    background-image: radial-gradient(var(--canvas-grid-dot) 1px, transparent 1.4px);
    background-size:
        calc(24px * var(--canvas-zoom, 1)) calc(24px * var(--canvas-zoom, 1));
    background-position:
        calc(var(--canvas-pan-x, 0) * 1px) calc(var(--canvas-pan-y, 0) * 1px);
}

.canvas-viewport:active[b-5543vij3xw] {
    cursor: grabbing;
}

.canvas-world[b-5543vij3xw] {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    /* transform set by canvas-camera.js per-frame */
    transform-origin: 0 0;
}

.canvas-mobile-banner[b-5543vij3xw] {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.813rem;
    max-width: calc(100% - 2rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* P6.d — CTA in the mobile banner. Minimum 44px height per WCAG touch-target. */
.canvas-mobile-cta[b-5543vij3xw] {
    flex-shrink: 0;
    min-height: 2.5rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--accent-primary);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 0.813rem;
    font-weight: 500;
    cursor: pointer;
}

.canvas-mobile-cta:focus-visible[b-5543vij3xw] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.canvas-loading-overlay[b-5543vij3xw] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Respect reduced-motion preference for future animations (zoom-to-fit, etc.). */
@media (prefers-reduced-motion: reduce) {
    .canvas-world[b-5543vij3xw] {
        transition: none !important;
    }
}

/* P6.b — standard visually-hidden pattern (clip-rect). The screen-reader fallback
   <ul> lives inside the viewport so assistive tech keeps it under the canvas's
   role="application" landmark, but sighted users never see it. */
.canvas-sr-only[b-5543vij3xw] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* /Components/Shared/TasksCompletedSection.razor.rz.scp.css */
/* ===== TasksCompletedSection component styles =====
   Extracted from Tasks.razor.css for the completed-section child component */

.completed-section-header[b-kx2sl6migm] {
    margin-bottom: 1rem;
}

.completed-section-header h3[b-kx2sl6migm] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    margin: 0;
}

.completed-tasks-list[b-kx2sl6migm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Constrain completed-section content to readable width */
.completed-section-header[b-kx2sl6migm],
.completed-tasks-list[b-kx2sl6migm] {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== View More pagination button ===== */

.btn-view-more[b-kx2sl6migm] {
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-view-more:hover[b-kx2sl6migm] {
        background: var(--hover-bg, #f3f4f6);
        border-color: var(--primary-color, #6366f1);
        color: var(--primary-color, #6366f1);
    }
}

.list-view-more[b-kx2sl6migm] {
    padding: 0.75rem 0;
    text-align: center;
}

.list-view-more .btn-view-more[b-kx2sl6migm] {
    width: auto;
    padding: 0.5rem 1.5rem;
}
/* /Components/Shared/TaskSidebar.razor.rz.scp.css */
/* ===== Task Sidebar - Collapsible Navigation ===== */

.task-sidebar[b-f43ash685i] {
    width: 260px;
    min-width: 260px;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
    position: relative;
    z-index: 10;
}

.task-sidebar.collapsed[b-f43ash685i] {
    width: 52px;
    min-width: 52px;
}

@media (prefers-reduced-motion: reduce) {
    .task-sidebar[b-f43ash685i] {
        transition: none;
    }
}

/* ===== Header ===== */

.sidebar-header[b-f43ash685i] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    flex-shrink: 0;
}

.sidebar-collapse-btn[b-f43ash685i],
.sidebar-switch-btn[b-f43ash685i] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    transition: color 0.15s, background 0.15s;
}

@media (hover: hover) {
    .sidebar-collapse-btn:hover[b-f43ash685i],
    .sidebar-switch-btn:hover[b-f43ash685i] {
        color: var(--accent-primary);
        background: var(--hover-bg);
    }
}

.task-sidebar.collapsed .sidebar-header[b-f43ash685i] {
    justify-content: center;
}

/* ===== Mobile close button (hidden on desktop) ===== */

.sidebar-mobile-close-btn[b-f43ash685i] {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 6px;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
    margin-left: auto;
}

/* ===== Search ===== */

.sidebar-search[b-f43ash685i] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-search-icon[b-f43ash685i] {
    position: absolute;
    left: 1.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    pointer-events: none;
}

.sidebar-search-input[b-f43ash685i] {
    width: 100%;
    padding: 0.375rem 0.5rem 0.375rem 1.75rem;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.15s;
}

.sidebar-search-input[b-f43ash685i]::placeholder {
    color: var(--text-muted);
}

.sidebar-search-input:focus[b-f43ash685i] {
    border-color: var(--accent-primary);
}

.sidebar-search-clear[b-f43ash685i] {
    position: absolute;
    right: 1rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.125rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

@media (hover: hover) {
    .sidebar-search-clear:hover[b-f43ash685i] {
        color: var(--text-primary);
    }
}

/* ===== Sections container ===== */

.sidebar-sections[b-f43ash685i] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.25rem 0;
}

/* ===== Section headers ===== */

.sidebar-section[b-f43ash685i] {
    margin-bottom: 0.25rem;
}

.sidebar-section-header[b-f43ash685i] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.15s;
}

@media (hover: hover) {
    .sidebar-section-header:hover[b-f43ash685i] {
        color: var(--text-secondary);
    }
}

.section-chevron[b-f43ash685i] {
    font-size: 0.625rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.section-chevron.expanded[b-f43ash685i] {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .section-chevron[b-f43ash685i] {
        transition: none;
    }
}

.sidebar-section-title[b-f43ash685i] {
    flex: 1;
    text-align: left;
}

/* ===== Navigation items ===== */

.sidebar-item[b-f43ash685i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.75rem 0.4375rem 1.5rem;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    min-height: 36px;
}

.sidebar-item.active[b-f43ash685i] {
    background: color-mix(in srgb, var(--sidebar-active-color, var(--accent-primary)) 10%, transparent);
    border-left: 3px solid var(--sidebar-active-color, var(--accent-primary));
    padding-left: calc(1.5rem - 3px);
}

@media (hover: hover) {
    .sidebar-item:not(.active):hover[b-f43ash685i] {
        background: var(--hover-bg);
    }

    .sidebar-item:hover .sidebar-item-menu-btn[b-f43ash685i] {
        opacity: 1;
    }
}

.sidebar-item-icon[b-f43ash685i] {
    font-size: 1rem;
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.sidebar-item.active .sidebar-item-icon[b-f43ash685i] {
    color: var(--sidebar-active-color, var(--accent-primary));
}

.sidebar-view-icon[b-f43ash685i] {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sidebar-item-text[b-f43ash685i] {
    flex: 1;
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sidebar-item.active .sidebar-item-text[b-f43ash685i] {
    font-weight: 500;
}

.sidebar-shared-icon[b-f43ash685i] {
    font-size: 0.625rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.sidebar-color-dot[b-f43ash685i] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-count-badge[b-f43ash685i] {
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
    min-width: 18px;
    text-align: center;
}

.sidebar-count-today[b-f43ash685i] {
    background: var(--accent-primary);
    color: var(--accent-contrast);
}

/* ===== Context menu button ===== */

.sidebar-item-menu-btn[b-f43ash685i] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

.sidebar-item.active .sidebar-item-menu-btn[b-f43ash685i] {
    opacity: 0.6;
}

@media (hover: none) {
    .sidebar-item-menu-btn[b-f43ash685i] {
        opacity: 0.5;
    }
}

@media (hover: hover) {
    .sidebar-item-menu-btn:hover[b-f43ash685i] {
        color: var(--accent-primary);
        background: rgba(0, 0, 0, 0.05);
        opacity: 1;
    }
}

/* ===== Context menu dropdown ===== */

.sidebar-category-item[b-f43ash685i] {
    position: relative;
}

.sidebar-context-menu[b-f43ash685i] {
    position: absolute;
    top: 100%;
    left: 0.5rem;
    right: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 200;
}

.sidebar-menu-item[b-f43ash685i] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
}

@media (hover: hover) {
    .sidebar-menu-item:hover[b-f43ash685i] {
        background: var(--hover-bg);
    }
}

.sidebar-menu-item.text-danger[b-f43ash685i] {
    color: var(--danger);
}

/* ===== Inline edit ===== */

.sidebar-inline-edit[b-f43ash685i] {
    flex: 1;
    padding: 0.25rem 0.375rem;
    background: var(--input-bg);
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.875rem;
    outline: none;
    min-width: 0;
}

/* ===== Add list button ===== */

.sidebar-add-btn[b-f43ash685i] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: calc(100% - 1.5rem);
    margin: 0.25rem 0 0.25rem 1.5rem;
    padding: 0.375rem 0.5rem;
    background: transparent;
    border: 1.5px dashed var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.15s;
}

@media (hover: hover) {
    .sidebar-add-btn:hover[b-f43ash685i] {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: var(--hover-bg);
    }
}

/* ===== Tags section ===== */

.sidebar-tag-badge[b-f43ash685i] {
    font-size: 0.5625rem;
    padding: 0.0625rem 0.3125rem;
    border-radius: 9999px;
    background: var(--accent-primary);
    color: var(--accent-contrast);
    font-weight: 700;
    flex-shrink: 0;
    min-width: 14px;
    text-align: center;
    line-height: 1.2;
}

.sidebar-tag-item[b-f43ash685i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem 0.3125rem 1.5rem;
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 0;
    min-height: 32px;
}

.sidebar-tag-item.selected[b-f43ash685i] {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

@media (hover: hover) {
    .sidebar-tag-item:not(.selected):hover[b-f43ash685i] {
        background: var(--hover-bg);
    }
}

.sidebar-tag-icon[b-f43ash685i] {
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 1rem;
    text-align: center;
}

.sidebar-tag-text[b-f43ash685i] {
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-clear-tags[b-f43ash685i] {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem 0.25rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--accent-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s;
    margin-top: 0.25rem;
}

@media (hover: hover) {
    .sidebar-clear-tags:hover[b-f43ash685i] {
        color: var(--accent-secondary);
    }
}

.sidebar-manage-tags-btn[b-f43ash685i] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem 0.25rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.15s;
}

@media (hover: hover) {
    .sidebar-manage-tags-btn:hover[b-f43ash685i] {
        color: var(--text-secondary);
    }
}

/* ===== Drag-and-drop states ===== */

.sidebar-item-dragging[b-f43ash685i] {
    opacity: 0;
    pointer-events: none;
}

.sidebar-item-shifting[b-f43ash685i] {
    transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-item-shifting[b-f43ash685i] {
        transition: none;
    }
}

.sidebar-drag-hold-pending[b-f43ash685i] {
    background: color-mix(in srgb, var(--accent-primary) 8%, transparent);
}

.sidebar-drag-hold-ready[b-f43ash685i] {
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

/* Drop target highlight when dragging tasks/sections onto sidebar items */
.sidebar-category-item.card-drop-target[b-f43ash685i],
.sidebar-category-item.section-drop-target[b-f43ash685i] {
    background: color-mix(in srgb, var(--accent-primary) 15%, transparent);
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
    border-radius: 6px;
}

/* ===== Collapsed state overrides ===== */

.task-sidebar.collapsed .sidebar-sections[b-f43ash685i] {
    padding: 0.5rem 0;
}

.task-sidebar.collapsed .sidebar-item[b-f43ash685i] {
    padding: 0.5rem 0;
    justify-content: center;
    gap: 0;
}

.task-sidebar.collapsed .sidebar-item.active[b-f43ash685i] {
    padding-left: 0;
    border-left-width: 3px;
}

.task-sidebar.collapsed .sidebar-section-header[b-f43ash685i] {
    justify-content: center;
    padding: 0.375rem 0;
}

/* ===== Skeleton loading ===== */

[b-f43ash685i] .sidebar-skeleton {
    margin: 0.25rem 0.75rem 0.25rem 1.5rem;
}

/* ===== Mobile: slide-over drawer (TickTick-style) ===== */

@media (max-width: 768px) {
    .task-sidebar[b-f43ash685i] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        min-width: 280px;
        z-index: 1040;
        border-radius: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .task-sidebar.mobile-open[b-f43ash685i] {
        transform: translateX(0);
    }

    /* Collapsed mode not applicable on mobile — always expanded */
    .task-sidebar.collapsed[b-f43ash685i] {
        width: 280px;
        min-width: 280px;
    }

    .task-sidebar .sidebar-collapse-btn[b-f43ash685i] {
        display: none;
    }

    .task-sidebar .sidebar-switch-btn[b-f43ash685i] {
        display: none;
    }

    .sidebar-mobile-close-btn[b-f43ash685i] {
        display: flex;
    }

    .sidebar-header[b-f43ash685i] {
        padding-top: calc(0.75rem + env(safe-area-inset-top));
    }

    .sidebar-sections[b-f43ash685i] {
        padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .task-sidebar[b-f43ash685i] {
        transition: none;
    }
}
/* /Components/Shared/TasksInboxView.razor.rz.scp.css */
/* ===== TasksInboxView component styles =====
   Extracted from Tasks.razor.css for the inbox-view child component */

/* Deadline Sections */
.deadline-section[b-yhbsub1bgm] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    /* Rows sit flush so TaskCard's bottom dividers read as a continuous list.
       The section title keeps its own margin-bottom for header separation. */
    gap: 0;
}

.deadline-section:last-of-type[b-yhbsub1bgm] {
    margin-bottom: 0;
}

.deadline-section-title[b-yhbsub1bgm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
}

.overdue-section .deadline-section-title[b-yhbsub1bgm] {
    color: #ef4444;
}

.today-section .deadline-section-title[b-yhbsub1bgm] {
    color: #f59e0b;
}

.tomorrow-section .deadline-section-title[b-yhbsub1bgm] {
    color: #10b981;
}

/* ===== View More pagination button ===== */

.btn-view-more[b-yhbsub1bgm] {
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-view-more:hover[b-yhbsub1bgm] {
        background: var(--hover-bg, #f3f4f6);
        border-color: var(--primary-color, #6366f1);
        color: var(--primary-color, #6366f1);
    }
}

.list-view-more[b-yhbsub1bgm] {
    padding: 0.75rem 0;
    text-align: center;
}

.list-view-more .btn-view-more[b-yhbsub1bgm] {
    width: auto;
    padding: 0.5rem 1.5rem;
}
/* /Components/Shared/TasksKanbanView.razor.rz.scp.css */
/* Kanban Board Styles */
.kanban-board[b-s8osi96rxm] {
    display: flex;
    gap: 1rem;
    overflow: auto hidden;
    padding: 0.5rem 1rem;
    flex: 1;
    min-height: 400px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
}

.kanban-column[b-s8osi96rxm] {
    flex: 0 0 300px;
    min-width: 280px;
    max-width: 320px;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    max-height: 100%;
    min-height: 0;
    transition: all 0.2s ease;
}

/* Task drag-over state for column */
.kanban-column.drag-over[b-s8osi96rxm] {
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px var(--primary-color, #6366f1);
}

/* Make entire column draggable */
.kanban-column[draggable="true"][b-s8osi96rxm] {
    cursor: grab;
}

.kanban-column[draggable="true"]:active[b-s8osi96rxm] {
    cursor: grabbing;
}

/* Section being dragged - hide original since we show a floating clone via JS */
.kanban-column.section-dragging[b-s8osi96rxm] {
    opacity: 0;
    pointer-events: none;
}

.kanban-column.wip-exceeded .kanban-column-header[b-s8osi96rxm] {
    background: rgba(239, 68, 68, 0.1);
}

.kanban-column-header[b-s8osi96rxm] {
    padding: 0.625rem 0.75rem;
    border-top: 3px solid var(--border-color);
    border-radius: 12px 12px 0 0;
    background: var(--card-bg, white);
    user-select: none;
    -webkit-user-select: none;
}

.column-title-row[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.column-title[b-s8osi96rxm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 2px;
    transition: color 0.15s;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

@media (hover: hover) {
    .column-title:hover[b-s8osi96rxm] {
        color: var(--primary-color, #6366f1);
    }
}

.section-title-input[b-s8osi96rxm] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    background: var(--input-bg, white);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
    min-width: 0;
}

/* Section Menu */
.section-menu-wrapper[b-s8osi96rxm] {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-section-add[b-s8osi96rxm],
.btn-section-menu[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-section-add:hover[b-s8osi96rxm],
    .btn-section-menu:hover[b-s8osi96rxm] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

@media (hover: hover) {
    .btn-section-add:hover[b-s8osi96rxm] {
        color: var(--primary-color, #6366f1);
    }
}

/* Kanban section menu uses fixed positioning to escape overflow:hidden on parent containers.
   JS (sectionMenu.positionDropdown) sets the exact top/left after render.
   opacity:0 prevents flicker at the default position before JS runs. */
.section-menu-wrapper .section-dropdown-menu[b-s8osi96rxm] {
    position: fixed;
    top: auto;
    right: auto;
    min-width: 200px;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    z-index: 9999;
    margin-top: 0;
    overflow: visible;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.section-dropdown-menu .dropdown-item[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .section-dropdown-menu .dropdown-item:hover[b-s8osi96rxm] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.section-dropdown-menu .dropdown-item.text-danger[b-s8osi96rxm] {
    color: #ef4444;
}

@media (hover: hover) {
    .section-dropdown-menu .dropdown-item.text-danger:hover[b-s8osi96rxm] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.section-dropdown-menu .dropdown-divider[b-s8osi96rxm] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Move to submenu */
.dropdown-item-with-submenu[b-s8osi96rxm] {
    position: relative;
}

.dropdown-item-with-submenu .dropdown-item .bi-chevron-right[b-s8osi96rxm] {
    font-size: 0.75rem;
    opacity: 0.6;
}

.move-to-submenu[b-s8osi96rxm] {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 220px;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    z-index: 1001;
    margin-left: 4px;
}

.submenu-search[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 0.25rem;
}

.submenu-search .bi-search[b-s8osi96rxm] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.submenu-search-input[b-s8osi96rxm] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.submenu-search-input[b-s8osi96rxm]::placeholder {
    color: var(--text-secondary);
}

.submenu-list[b-s8osi96rxm] {
    max-height: 200px;
    overflow-y: auto;
}

.submenu-item[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

@media (hover: hover) {
    .submenu-item:hover:not(:disabled)[b-s8osi96rxm] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.submenu-item.current[b-s8osi96rxm] {
    color: var(--primary-color, #6366f1);
    font-weight: 500;
}

.submenu-item:disabled[b-s8osi96rxm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submenu-item .bi-check[b-s8osi96rxm] {
    color: var(--primary-color, #6366f1);
}

.column-count[b-s8osi96rxm] {
    color: var(--text-muted, #9ca3af);
    font-size: 0.8125rem;
    font-weight: 400;
}

.column-count.over-limit[b-s8osi96rxm] {
    color: #ef4444;
    font-weight: 600;
}

.kanban-column-body[b-s8osi96rxm] {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0.375rem 0.5rem;
    display: flex;
    flex-direction: column;
    /* Flush so flat TaskCard rows' bottom dividers read as a continuous list. */
    gap: 0;
    min-height: 0;
    transition: padding-bottom 0.2s ease;
}

.kanban-column-body[b-s8osi96rxm]::-webkit-scrollbar {
    width: 6px;
}

.kanban-column-body[b-s8osi96rxm]::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-column-body[b-s8osi96rxm]::-webkit-scrollbar-thumb {
    background: var(--border-color, #e5e7eb);
    border-radius: 3px;
}

.kanban-column-body[b-s8osi96rxm]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #6b7280);
}

/* View More pagination button */
.kanban-view-more[b-s8osi96rxm] {
    padding: 0.5rem;
    text-align: center;
}

.btn-view-more[b-s8osi96rxm] {
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-view-more:hover[b-s8osi96rxm] {
        background: var(--hover-bg, #f3f4f6);
        border-color: var(--primary-color, #6366f1);
        color: var(--primary-color, #6366f1);
    }
}

/* List view pagination - reuse same button styles with list-specific wrapper */
.list-view-more[b-s8osi96rxm] {
    padding: 0.75rem 0;
    text-align: center;
}

.list-view-more .btn-view-more[b-s8osi96rxm] {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* Top Quick Add Row - always rendered for iOS keyboard focus */
.kanban-top-quick-add[b-s8osi96rxm] {
    padding: 0 0.375rem;
}

/* Collapsed state - hidden until expanded via "+" button */
.kanban-top-quick-add[b-s8osi96rxm]  .kanban-quick-add:not(.expanded) {
    display: none;
}

/* Expanded state - styled form with separator */
.kanban-top-quick-add[b-s8osi96rxm]  .kanban-quick-add.expanded {
    background: transparent;
    border: none;
    padding: 0;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 0.25rem;
    width: 100%;
    box-sizing: border-box;
}

.kanban-top-quick-add[b-s8osi96rxm]  .kanban-quick-add.expanded .add-form {
    background: var(--card-bg, white);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.kanban-column-footer[b-s8osi96rxm] {
    padding: 0.375rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, white);
    border-radius: 0 0 12px 12px;
    overflow: visible;
}

/* QuickAddRow inside Kanban columns */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .add-prompt {
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

@media (hover: hover) {
    .kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .add-prompt:hover {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

/* Kanban QuickAddRow form layout - stack vertically for narrow columns */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .add-form {
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.375rem;
    width: 100%;
    box-sizing: border-box;
}

/* Name input wrapper takes full width in kanban */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .name-input-wrapper {
    width: 100%;
    flex: none;
}

/* Textarea fills the wrapper width and can grow */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .quick-add-input {
    width: 100%;
    padding: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.875rem;
    border-radius: 6px;
    box-sizing: border-box;
    min-width: 100%;
    height: auto;
    min-height: 2.25rem;
    max-height: 8rem;
    overflow: hidden;
}

/* Task options go on their own row */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .task-options-buttons {
    width: 100%;
    justify-content: flex-start;
}

/* Dropdown panels in kanban footer must use fixed positioning to escape overflow:hidden.
   Use auto positioning (like section-menu-wrapper) to keep panel at natural flow position. */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .task-option-panel {
    position: fixed;
    z-index: 9999;
    /* auto positioning keeps panel at its natural flow position */
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin-top: 4px;
}

/* Hide description hint in narrow kanban columns - use Shift+Enter keyboard shortcut */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .description-hint {
    display: none;
}

/* Description mode container in kanban */
.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .description-mode-container {
    padding: 0;
}

.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .description-mode-footer {
    flex-wrap: wrap;
    gap: 0.375rem;
}

.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .add-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
    width: 100%;
}

.kanban-column-footer[b-s8osi96rxm]  .kanban-quick-add .add-actions button {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
}

/* Add Section Column */
.kanban-add-section-column[b-s8osi96rxm] {
    flex: 0 0 280px;
    min-width: 260px;
    max-width: 300px;
    background: transparent;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    min-height: auto;
    max-height: 150px;
}

/* QuickAddRow inside Add Section Column */
.kanban-add-section-column[b-s8osi96rxm]  .kanban-add-section {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}

.kanban-add-section-column[b-s8osi96rxm]  .kanban-add-section .add-prompt {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    justify-content: center;
}

@media (hover: hover) {
    .kanban-add-section-column[b-s8osi96rxm]  .kanban-add-section .add-prompt:hover {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.kanban-add-section-column[b-s8osi96rxm]  .kanban-add-section .add-form {
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.kanban-add-section-column[b-s8osi96rxm]  .kanban-add-section .name-input-wrapper {
    width: 100%;
}

.kanban-add-section-column[b-s8osi96rxm]  .kanban-add-section .quick-add-input {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 8px;
    width: 100%;
    border: 1px solid var(--border-color, #e5e7eb);
    background: var(--card-bg, white);
}

.kanban-add-section-column[b-s8osi96rxm]  .kanban-add-section .quick-add-input:focus {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-add-section[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    width: 100%;
}

@media (hover: hover) {
    .btn-add-section:hover[b-s8osi96rxm] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.add-section-form[b-s8osi96rxm] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-name-input[b-s8osi96rxm] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--card-bg, white);
    color: var(--text-primary);
}

.section-name-input:focus[b-s8osi96rxm] {
    outline: none;
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-section-buttons[b-s8osi96rxm] {
    display: flex;
    gap: 0.5rem;
}

.btn-save-section[b-s8osi96rxm],
.btn-cancel-section[b-s8osi96rxm] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-save-section[b-s8osi96rxm] {
    background: var(--primary-color, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-save-section:hover[b-s8osi96rxm] {
        background: var(--primary-hover, #4f46e5);
    }
}

.btn-cancel-section[b-s8osi96rxm] {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .btn-cancel-section:hover[b-s8osi96rxm] {
        background: var(--border-color, #d1d5db);
    }
}

.btn-add-kanban-task[b-s8osi96rxm] {
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .btn-add-kanban-task:hover[b-s8osi96rxm] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.kanban-card[b-s8osi96rxm] {
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 4px 12px;
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 3px solid var(--task-color, transparent);
}

@media (hover: hover) {
    .kanban-card:hover[b-s8osi96rxm] {
        border-color: var(--primary-color, #6366f1);
        border-left-color: var(--task-color, var(--primary-color, #6366f1));
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    }
}

.kanban-card:active[b-s8osi96rxm] {
    cursor: grabbing;
}

/* Old HTML5 drag style - kept for backwards compatibility */
.kanban-card.dragging[b-s8osi96rxm] {
    opacity: 0.4;
    transform: scale(0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color, #6366f1);
    z-index: 100;
}

/* Helper element (floating clone during drag) */
#card-drag-helper[b-s8osi96rxm] {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.95;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1);
    transform: rotate(-2deg);
    cursor: grabbing;
}

/* Mobile Touch Support - allow scrolling by default, JS adds touch-drag-active during drag */
.kanban-card[b-s8osi96rxm],
.kanban-column-header[b-s8osi96rxm],
.filter-tab-wrapper[b-s8osi96rxm],
.section-title[b-s8osi96rxm] {
    touch-action: pan-x pan-y;
}

/* Applied by JS when drag is active (after hold completes) */
.touch-drag-active[b-s8osi96rxm] {
    touch-action: none !important;
}

.kanban-card.favorite[b-s8osi96rxm] {
    background: var(--warning-light, #fef3c7);
}

/* Kanban card wrapper for drop indicators */
.kanban-card-wrapper[b-s8osi96rxm] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Drop indicator line above/below cards */
.kanban-drop-indicator[b-s8osi96rxm] {
    height: 0;
    background: var(--primary-color, #6366f1);
    border-radius: 2px;
    margin: 0;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.15s ease;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

.kanban-drop-indicator.visible[b-s8osi96rxm] {
    height: 3px;
    margin: 2px 0;
    opacity: 1;
    transform: scaleX(1);
    animation: pulse-drop-indicator-b-s8osi96rxm 1s ease-in-out infinite;
}

@keyframes pulse-drop-indicator-b-s8osi96rxm {
    0%, 100% {
        box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
    }
    50% {
        box-shadow: 0 0 16px rgba(99, 102, 241, 0.9);
    }
}

/* Drag over column highlight */
.kanban-column-body.drag-over[b-s8osi96rxm] {
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    outline: 2px dashed var(--primary-color, #6366f1);
    outline-offset: -2px;
}

/* Empty column drop zone */
.kanban-empty-drop-zone[b-s8osi96rxm] {
    min-height: 60px;
    border: 2px dashed transparent;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kanban-empty-drop-zone.drag-over[b-s8osi96rxm] {
    border-color: var(--primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.08);
}

.kanban-card-header[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.card-checkbox[b-s8osi96rxm] {
    position: absolute;
    left: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0s;
}

@media (hover: hover) {
    .kanban-card:hover .card-checkbox[b-s8osi96rxm] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .card-checkbox[b-s8osi96rxm] {
        opacity: 1;
        visibility: visible;
    }
}

.card-checkbox span[b-s8osi96rxm] {
    border-radius: 3px;
}

@media (hover: hover) {
    .card-checkbox:hover[b-s8osi96rxm] {
        color: var(--primary-color, #6366f1);
    }
}

.card-title[b-s8osi96rxm] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.43;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.25s ease;
}

@media (hover: hover) {
    .kanban-card:hover .card-title[b-s8osi96rxm] {
        transform: translateX(1.375rem);
    }
}

.card-title.completed[b-s8osi96rxm] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.kanban-card-meta[b-s8osi96rxm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-top: 2px;
}

.card-due-date[b-s8osi96rxm] {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color, #3b82f6);
    cursor: pointer;
    padding: 0 0.125rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    position: relative;
    font-size: 0.6875rem;
}

@media (hover: hover) {
    .card-due-date:hover[b-s8osi96rxm] {
        background: rgba(59, 130, 246, 0.1);
    }
}

.card-due-date.overdue[b-s8osi96rxm] {
    color: #ef4444;
}

@media (hover: hover) {
    .card-due-date.overdue:hover[b-s8osi96rxm] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.card-due-date.due-today[b-s8osi96rxm] {
    color: #f59e0b;
}

@media (hover: hover) {
    .card-due-date.due-today:hover[b-s8osi96rxm] {
        background: rgba(245, 158, 11, 0.1);
    }
}

/* Hidden date input for date picker */
.card-due-date input[type="date"][b-s8osi96rxm] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.card-priority[b-s8osi96rxm] {
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.card-priority.priority-medium[b-s8osi96rxm] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.card-priority.priority-high[b-s8osi96rxm] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.card-priority.priority-critical[b-s8osi96rxm] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.card-subtasks[b-s8osi96rxm] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

.card-description-indicator[b-s8osi96rxm] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

/* Card metadata pickers (CalendarPicker and PriorityPicker in Kanban cards) */
[b-s8osi96rxm] .card-meta-picker {
    position: relative;
}

[b-s8osi96rxm] .card-meta-picker .calendar-picker-btn,
[b-s8osi96rxm] .card-meta-picker .priority-picker-btn {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.15s ease;
}

[b-s8osi96rxm] .card-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-s8osi96rxm] .card-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-s8osi96rxm] .card-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-s8osi96rxm] .card-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-s8osi96rxm] .card-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-s8osi96rxm] .card-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-s8osi96rxm] .card-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-s8osi96rxm] .card-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.6875rem;
}

@media (hover: hover) {
    [b-s8osi96rxm] .card-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Position dropdown panels from card pickers - use fixed positioning to escape overflow clipping */
[b-s8osi96rxm] .card-meta-picker .calendar-picker-panel,
[b-s8osi96rxm] .card-meta-picker .priority-picker-panel {
    position: fixed;
    z-index: 9999;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    margin-top: 4px;
}

.kanban-empty-placeholder[b-s8osi96rxm] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

.kanban-empty-placeholder .bi[b-s8osi96rxm] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.kanban-empty-placeholder p[b-s8osi96rxm] {
    margin: 0;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .kanban-column[b-s8osi96rxm] {
        flex: 0 0 260px;
        min-width: 240px;
    }

}


/* Tab View Icons and Shared Indicator */
.tab-view-icon[b-s8osi96rxm] {
    font-size: 0.875rem;
    opacity: 0.7;
}

.shared-indicator[b-s8osi96rxm] {
    font-size: 0.75rem;
    color: var(--primary-color, #6366f1);
    opacity: 0.8;
}

/* Owner-only Settings Notice */
.owner-only-notice[b-s8osi96rxm] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.owner-only-notice .bi[b-s8osi96rxm] {
    color: #3b82f6;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Disabled Settings */
.disabled-setting[b-s8osi96rxm] {
    opacity: 0.6;
    pointer-events: none;
}

.disabled-setting label[b-s8osi96rxm] {
    color: var(--text-secondary);
}

.disabled-setting .form-input[b-s8osi96rxm],
.disabled-setting .view-type-option[b-s8osi96rxm],
.disabled-setting .layout-option[b-s8osi96rxm],
.disabled-setting .color-option[b-s8osi96rxm] {
    cursor: not-allowed;
    background: var(--bg-tertiary, #f3f4f6);
}

/* ==========================================
   List View Drag-and-Drop Styles
   ========================================== */

/* Section header draggable - make it grabable */
.section-title-draggable[b-s8osi96rxm] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 6px;
}

@media (hover: hover) {
    .section-title-draggable:hover[b-s8osi96rxm] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.03));
    }
}

.section-title-draggable:active[b-s8osi96rxm] {
    cursor: grabbing;
}

/* Section group during drag - hidden since we show a floating clone */
.section-group.section-dragging[b-s8osi96rxm] {
    opacity: 0;
    pointer-events: none;
}

/* Section group as drop target */
.section-group.drag-target[b-s8osi96rxm] {
    background: rgba(99, 102, 241, 0.05);
    border: 2px dashed var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0.5rem;
    margin: -0.5rem;
}

/* List view task wrapper for drop indicators */
.list-task-wrapper[b-s8osi96rxm] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* List view drop indicator - horizontal line between tasks */
.list-drop-indicator[b-s8osi96rxm] {
    height: 0;
    background: var(--primary-color, #6366f1);
    border-radius: 2px;
    margin: 0;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.15s ease;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

.list-drop-indicator.visible[b-s8osi96rxm] {
    height: 3px;
    margin: 4px 0;
    opacity: 1;
    transform: scaleX(1);
    animation: pulse-drop-indicator-b-s8osi96rxm 1s ease-in-out infinite;
}

/* Task card list view dragging state */
.task-card.list-view.dragging[b-s8osi96rxm] {
    opacity: 0.4;
    transform: scale(0.98);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color, #6366f1);
    z-index: 100;
}

/* Section group drag-over state - highlight when task dragged over */
.section-group.list-drag-over[b-s8osi96rxm] {
    background: rgba(99, 102, 241, 0.03);
    border-radius: 8px;
}

/* List view section header with add button */
.section-header-row[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.section-header-row .section-title[b-s8osi96rxm] {
    flex: 1;
    margin: 0;
}

.list-section-add-btn[b-s8osi96rxm] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    opacity: 0.6;
}

@media (hover: hover) {
    .list-section-add-btn:hover[b-s8osi96rxm] {
        color: var(--primary-color, #6366f1);
        background: rgba(99, 102, 241, 0.08);
        opacity: 1;
    }
}

@media (hover: hover) {
    .section-group:hover .list-section-add-btn[b-s8osi96rxm] {
        opacity: 1;
    }
}

@media (hover: none) {
    .list-section-add-btn[b-s8osi96rxm] {
        opacity: 1;
        visibility: visible;
    }
}

/* List view quick add row inside sections - always rendered for iOS keyboard focus */
.list-section-quick-add[b-s8osi96rxm] {
    padding: 0 0.25rem;
}

/* Collapsed state - hidden until expanded via "+" button */
.list-section-quick-add[b-s8osi96rxm]  .list-quick-add:not(.expanded) {
    display: none;
}

/* Expanded state */
.list-section-quick-add[b-s8osi96rxm]  .list-quick-add.expanded {
    margin-top: 0.5rem;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.list-section-quick-add[b-s8osi96rxm]  .list-quick-add.expanded .add-form {
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.list-section-quick-add[b-s8osi96rxm]  .list-quick-add .name-input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.list-section-quick-add[b-s8osi96rxm]  .list-quick-add .quick-add-input {
    padding: 0.75rem 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
}

.list-section-quick-add[b-s8osi96rxm]  .list-quick-add .quick-add-input:focus {
    outline: none;
}

.list-section-quick-add[b-s8osi96rxm]  .list-quick-add .add-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0 0.25rem 0.25rem;
}

.list-section-quick-add[b-s8osi96rxm]  .list-quick-add .add-actions button {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

/* Kanban Per-Section Completed Tasks */
.kanban-completed-section[b-s8osi96rxm] {
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin-top: auto;
}

.kanban-completed-header[b-s8osi96rxm] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    transition: background 0.15s, color 0.15s;
    user-select: none;
}

@media (hover: hover) {
    .kanban-completed-header:hover[b-s8osi96rxm] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.kanban-completed-label[b-s8osi96rxm] {
    font-weight: 500;
}

.kanban-completed-count[b-s8osi96rxm] {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    margin-left: auto;
}

.kanban-completed-body[b-s8osi96rxm] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.375rem 0.5rem 0.5rem;
    max-height: 200px;
    overflow-y: auto;
}

.kanban-card.completed[b-s8osi96rxm] {
    opacity: 0.7;
    background: var(--bg-secondary, #f9fafb);
    cursor: pointer;
}

@media (hover: hover) {
    .kanban-card.completed:hover[b-s8osi96rxm] {
        opacity: 0.85;
    }
}

/* ===== Responsive overrides ===== */

@media (max-width: 768px) {
    .kanban-board[b-s8osi96rxm] {
        padding: 0.75rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        justify-content: flex-start;
        min-height: 350px;
    }
}

@media (max-width: 480px) {
    .kanban-board[b-s8osi96rxm] {
        padding: 0.5rem;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        min-height: 300px;
    }

    .kanban-column[b-s8osi96rxm] {
        flex: 0 0 240px;
        min-width: 220px;
        max-width: 260px;
    }

    .kanban-column-header[b-s8osi96rxm] {
        padding: 0.5rem;
    }

    .column-title[b-s8osi96rxm] {
        font-size: 0.8125rem;
    }

    .kanban-column-body[b-s8osi96rxm] {
        padding: 0.25rem;
    }

    .kanban-card[b-s8osi96rxm] {
        padding: 4px 8px;
    }

    .card-title[b-s8osi96rxm] {
        font-size: 0.8125rem;
    }

    .kanban-add-section-column[b-s8osi96rxm] {
        flex: 0 0 200px;
        min-width: 180px;
    }

    .kanban-card .card-title[b-s8osi96rxm] {
        transform: translateX(1.375rem);
    }
}

/* ===== Long-press drag feedback ===== */

.kanban-card.drag-hold-pending[b-s8osi96rxm],
.kanban-column-header.drag-hold-pending[b-s8osi96rxm] {
    /* Uses shared .drag-hold-pending styles */
}

.kanban-card.drag-hold-ready[b-s8osi96rxm],
.kanban-column-header.drag-hold-ready[b-s8osi96rxm] {
    /* Uses shared .drag-hold-ready styles */
}

/* /Components/Shared/TasksListView.razor.rz.scp.css */
/* ===== TasksListView component styles =====
   Extracted from Tasks.razor.css for the list-view child component */

/* Constrain list-view content to readable width */
.tasks-list[b-jdlrioezba] {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.tasks-list[b-jdlrioezba] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* QuickAddRow wrapper for spacing */
.quick-add-wrapper[b-jdlrioezba] {
    margin-bottom: 1rem;
}

/* Empty state */
.empty-state[b-jdlrioezba] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-icon[b-jdlrioezba] {
    font-size: 4rem;
    opacity: 0.3;
    display: block;
    margin-bottom: 1rem;
}

/* ===== Section-based Layout ===== */

.section-group[b-jdlrioezba] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    /* Rows sit flush so TaskCard's bottom dividers read as a continuous list.
       Header separation is handled by .section-header-row's own margin-bottom. */
    gap: 0;
}

.section-group:last-of-type[b-jdlrioezba] {
    margin-bottom: 0;
}

.section-title[b-jdlrioezba] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
    border-left: 3px solid var(--border-color, #e5e7eb);
}

.not-started-section .section-title[b-jdlrioezba] {
    border-left-color: #6b7280;
    color: #6b7280;
}

.in-progress-section .section-title[b-jdlrioezba] {
    border-left-color: #3b82f6;
    color: #3b82f6;
}

.completed-section .section-title[b-jdlrioezba] {
    border-left-color: #10b981;
    color: #10b981;
}

.custom-section .section-title[b-jdlrioezba] {
    color: var(--text-secondary);
}

/* Section title inline editing input */
.section-title-input[b-jdlrioezba] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    background: var(--input-bg, white);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
    min-width: 0;
}

/* List view section header with add button */
.section-header-row[b-jdlrioezba] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.section-header-row .section-title[b-jdlrioezba] {
    flex: 1;
    margin: 0;
}

.list-section-add-btn[b-jdlrioezba] {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6b7280);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    opacity: 0.6;
}

@media (hover: hover) {
    .list-section-add-btn:hover[b-jdlrioezba] {
        color: var(--primary-color, #6366f1);
        background: rgba(99, 102, 241, 0.08);
        opacity: 1;
    }
}

@media (hover: hover) {
    .section-group:hover .list-section-add-btn[b-jdlrioezba] {
        opacity: 1;
    }
}

@media (hover: none) {
    .list-section-add-btn[b-jdlrioezba] {
        opacity: 1;
        visibility: visible;
    }
}

/* ===== Section header draggable ===== */

.section-title-draggable[b-jdlrioezba] {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.15s ease;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 6px;
}

@media (hover: hover) {
    .section-title-draggable:hover[b-jdlrioezba] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.03));
    }
}

.section-title-draggable:active[b-jdlrioezba] {
    cursor: grabbing;
}

/* Section group during drag - hidden since we show a floating clone */
.section-group.section-dragging[b-jdlrioezba] {
    opacity: 0;
    pointer-events: none;
}

/* Section group as drop target */
.section-group.drag-target[b-jdlrioezba] {
    background: rgba(99, 102, 241, 0.05);
    border: 2px dashed var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0.5rem;
    margin: -0.5rem;
}

/* ===== List View Drag-and-Drop ===== */

/* List view task wrapper for drop indicators */
.list-task-wrapper[b-jdlrioezba] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* List view drop indicator - horizontal line between tasks */
.list-drop-indicator[b-jdlrioezba] {
    height: 0;
    background: var(--primary-color, #6366f1);
    border-radius: 2px;
    margin: 0;
    opacity: 0;
    transform: scaleX(0);
    transition: all 0.15s ease;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
}

.list-drop-indicator.visible[b-jdlrioezba] {
    height: 3px;
    margin: 4px 0;
    opacity: 1;
    transform: scaleX(1);
    animation: pulse-drop-indicator-b-jdlrioezba 1s ease-in-out infinite;
}

@keyframes pulse-drop-indicator-b-jdlrioezba {
    0%, 100% {
        box-shadow: 0 0 8px rgba(99, 102, 241, 0.6);
    }
    50% {
        box-shadow: 0 0 16px rgba(99, 102, 241, 0.9);
    }
}

/* Section group drag-over state - highlight when task dragged over */
.section-group.list-drag-over[b-jdlrioezba] {
    background: rgba(99, 102, 241, 0.03);
    border-radius: 8px;
}

/* ===== List view quick add row inside sections ===== */

/* Always rendered for iOS keyboard focus */
.list-section-quick-add[b-jdlrioezba] {
    padding: 0 0.25rem;
}

/* Collapsed state - hidden until expanded via "+" button */
.list-section-quick-add[b-jdlrioezba]  .list-quick-add:not(.expanded) {
    display: none;
}

/* Expanded state */
.list-section-quick-add[b-jdlrioezba]  .list-quick-add.expanded {
    margin-top: 0.5rem;
    background: var(--bg-secondary, #f9fafb);
    border: 1px solid var(--primary-color, #6366f1);
    border-radius: 8px;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.list-section-quick-add[b-jdlrioezba]  .list-quick-add.expanded .add-form {
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.list-section-quick-add[b-jdlrioezba]  .list-quick-add .name-input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.list-section-quick-add[b-jdlrioezba]  .list-quick-add .quick-add-input {
    padding: 0.75rem 1rem;
    padding-right: 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    background: transparent;
}

.list-section-quick-add[b-jdlrioezba]  .list-quick-add .quick-add-input:focus {
    outline: none;
}

.list-section-quick-add[b-jdlrioezba]  .list-quick-add .add-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0 0.25rem 0.25rem;
}

.list-section-quick-add[b-jdlrioezba]  .list-quick-add .add-actions button {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

/* ===== View More pagination button ===== */

.btn-view-more[b-jdlrioezba] {
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .btn-view-more:hover[b-jdlrioezba] {
        background: var(--hover-bg, #f3f4f6);
        border-color: var(--primary-color, #6366f1);
        color: var(--primary-color, #6366f1);
    }
}

.list-view-more[b-jdlrioezba] {
    padding: 0.75rem 0;
    text-align: center;
}

.list-view-more .btn-view-more[b-jdlrioezba] {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* ===== Mobile Touch Support ===== */

.section-title[b-jdlrioezba] {
    touch-action: pan-x pan-y;
}

/* ===== Long-press visual feedback for mobile touch drag ===== */

.section-title.drag-hold-pending[b-jdlrioezba] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: scale(1.02);
    box-shadow: 0 0 0 2px var(--primary-color, #6366f1);
}

.section-title.drag-hold-ready[b-jdlrioezba] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}