@import '_content/TrackerShared/TrackerShared.brfa8lcusq.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-u0s9m98ibo] {
    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-u0s9m98ibo] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Modals/EventListManageModal.razor.rz.scp.css */
.modal-overlay[b-i0mi60ztxe] {
    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-i0mi60ztxe 0.2s ease-out;
    padding: 1rem;
}

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

.eventlist-modal[b-i0mi60ztxe] {
    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-i0mi60ztxe 0.3s ease-out;
}

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

.modal-header[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    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-i0mi60ztxe] {
    color: var(--accent-primary);
}

.close-button[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

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

.modal-footer[b-i0mi60ztxe] {
    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-i0mi60ztxe], .footer-right[b-i0mi60ztxe] {
    display: flex;
    gap: 0.5rem;
}

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

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

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

.section-header[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    color: var(--accent-primary);
}

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

.form-group label[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.form-control[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--hover-bg);
}

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

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

.color-option[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    border-color: var(--text-color);
    box-shadow: 0 0 0 3px var(--hover-bg);
    transform: scale(1.05);
}

.color-option .bi[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
        transform: scale(1.1);
    }
}

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

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

.custom-color-button[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    color: white;
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Share section */
.share-signin-prompt[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    font-size: 1rem;
    flex-shrink: 0;
}

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

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

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

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

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

.member-item[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

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

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

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

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

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

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

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

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

.alert-danger[b-i0mi60ztxe] {
    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-i0mi60ztxe] {
    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-i0mi60ztxe] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

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

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

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

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

@media (max-width: 576px) {
    .eventlist-modal[b-i0mi60ztxe] {
        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-i0mi60ztxe] {
        padding: 0;
    }

    .share-actions[b-i0mi60ztxe] {
        flex-wrap: wrap;
    }
}
/* /Components/Modals/ExportImportModal.razor.rz.scp.css */
.modal-overlay[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

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

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

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

.file-drop-area[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    border-color: var(--primary-color, #6366f1);
    background-color: rgba(99, 102, 241, 0.05);
}

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

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

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

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

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

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

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

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

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

/* Preview Summary Stats */
.preview-summary[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #6b7280);
}

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

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

.category-selection-header[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.btn-link[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
        text-decoration: underline;
    }
}

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

.category-preview-item[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    border-bottom: none;
}

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

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

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

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

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

.duplicate-badge[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary, #6b7280);
}

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

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

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

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

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

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

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

    .modal-content[b-0gmn5aqqcy] {
        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-0gmn5aqqcy] {
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
        flex-shrink: 0;
    }

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

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

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

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

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

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

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

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

:global(body.dark-theme) .alert-danger[b-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    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-0gmn5aqqcy] {
    background-color: rgba(146, 64, 14, 0.2);
    color: #fcd34d;
    border-color: rgba(146, 64, 14, 0.3);
}
/* /Components/Modals/TagManagementModal.razor.rz.scp.css */
/* TagManagementModal component styles */

/* Base modal styles */
.modal-overlay[b-wbwvzql5rv] {
    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-wbwvzql5rv 0.15s ease-out forwards;
    overscroll-behavior: contain;
}

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

.modal-content[b-wbwvzql5rv] {
    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-wbwvzql5rv 0.3s ease-out;
}

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

.modal-header[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-primary);
}

.btn-close[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.modal-footer[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
    max-width: 480px;
    width: 100%;
}

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

/* Limits info */
.tag-limits-info[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
    margin-bottom: 1.5rem;
}

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

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

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

.btn-color-select[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
        transform: scale(1.1);
        border-color: var(--text-primary);
    }
}

.color-picker-dropdown[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
    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-wbwvzql5rv] {
        transform: scale(1.1);
    }
}

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

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

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

.tag-list-item[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
        border-color: var(--primary-color, #6366f1);
    }
}

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

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

.tag-item-name[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
        color: var(--primary-color, #6366f1);
    }
}

.tag-usage-count[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
}

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

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

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

.btn-tag-action[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
        opacity: 1;
    }
}

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

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

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

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

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

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

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

/* Loading state */
.loading-container[b-wbwvzql5rv] {
    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-wbwvzql5rv] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

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

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

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

    .modal-content.modal-tag-management[b-wbwvzql5rv] {
        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-wbwvzql5rv] {
        padding: calc(env(safe-area-inset-top, 0px) + 1.25rem) 1.5rem 1.25rem;
        flex-shrink: 0;
    }

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

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

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

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

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

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

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

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

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

    .color-picker-dropdown[b-wbwvzql5rv] {
        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-wbwvzql5rv] {
        width: 36px;
        height: 36px;
    }
}
/* /Components/Pages/About.razor.rz.scp.css */
.about-container[b-muapp5w5u5] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

.feature-item[b-muapp5w5u5] {
    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-muapp5w5u5] {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.btn[b-muapp5w5u5] {
    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-muapp5w5u5] {
    background: var(--accent-gradient);
    color: white;
    border: none;
}

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

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

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

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

.contact-link[b-muapp5w5u5] {
    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-muapp5w5u5] {
        color: var(--accent-secondary);
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* HEADER SECTION */
.challenge-header[b-legio14fef] {
    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-legio14fef] {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

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

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

.challenge-image[b-legio14fef] {
    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-legio14fef] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

.challenge-title[b-legio14fef] {
    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-legio14fef] {
    margin-bottom: 0;
}

.challenge-description[b-legio14fef] {
    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-legio14fef] {
    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-legio14fef]::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-legio14fef]::after {
    opacity: 1;
}

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

.btn-expand-description[b-legio14fef] {
    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-legio14fef] {
        color: var(--accent-hover);
        text-decoration: underline;
    }
}

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

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

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

.meta-item.current-streak-badge[b-legio14fef] {
    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-legio14fef] {
    color: #ff9800;
}

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

.action-btn[b-legio14fef] {
    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-legio14fef], .action-btn.active[b-legio14fef] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.modern-dropdown[b-legio14fef] {
    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-legio14fef 0.2s ease-out;
}

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

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

.dropdown-action[b-legio14fef] {
    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-legio14fef] {
        background: var(--hover-bg);
    }
}

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

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

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

/* CARD BASE */
.card[b-legio14fef] {
    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-legio14fef] {
    margin-bottom: 2rem;
}

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

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

/* PERIOD TABS */
.period-tabs[b-legio14fef] {
    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-legio14fef] {
    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-legio14fef] {
    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-legio14fef] {
        color: var(--text-primary);
    }
}

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

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

.stat-card[b-legio14fef] {
    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-legio14fef] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
    }
}

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

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

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

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

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

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

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

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

.aggregate-card[b-legio14fef] {
    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-legio14fef] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

.aggregate-header[b-legio14fef] {
    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-legio14fef] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

.habit-stat-item[b-legio14fef] {
    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-legio14fef] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

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

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

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

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

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

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

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

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

.progress-card[b-legio14fef] {
    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-legio14fef] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

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

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

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

.picture-thumbnail[b-legio14fef] {
    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-legio14fef] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-picture-btn[b-legio14fef] {
    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-legio14fef] {
        background: rgba(220, 38, 38, 1);
        transform: scale(1.1);
    }
}

.upload-btn-compact[b-legio14fef] {
    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-legio14fef] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

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

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

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

.input-field input[b-legio14fef],
.input-field textarea[b-legio14fef] {
    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-legio14fef] {
    resize: vertical;
    min-height: 120px;
}

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

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

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

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

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

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

.habit-item[b-legio14fef] {
    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-legio14fef] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.picture-preview[b-legio14fef] {
    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-legio14fef] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-btn[b-legio14fef] {
    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-legio14fef] {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

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

.empty-participants[b-legio14fef] {
    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-legio14fef] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
}

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

/* PARTICIPANT CARD */
.participant-card[b-legio14fef] {
    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-legio14fef] {
    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-legio14fef] {
        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-legio14fef] {
        border-color: rgba(59, 130, 246, 0.5);
    }
}

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

.participant-avatar[b-legio14fef] {
    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-legio14fef] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.participant-name[b-legio14fef] {
    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-legio14fef] {
    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-legio14fef] {
    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-legio14fef] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

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

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

.participant-data[b-legio14fef] {
    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-legio14fef] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

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

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

.participant-notes[b-legio14fef] {
    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-legio14fef] {
    color: var(--accent-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

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

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

.habit-status[b-legio14fef] {
    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-legio14fef] {
    color: var(--accent-primary);
}

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

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

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

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

.participant-heatmap-row[b-legio14fef] {
    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-legio14fef] {
    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-legio14fef] {
        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-legio14fef] {
        border-color: rgba(59, 130, 246, 0.5);
    }
}

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

.participant-avatar-small[b-legio14fef] {
    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-legio14fef] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    flex: 1;
}

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

.participant-streak-badge[b-legio14fef] {
    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-legio14fef] {
    font-size: 0.9rem;
}

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

.heatmap-cell[b-legio14fef] {
    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-legio14fef] {
        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-legio14fef] {
    border-color: var(--accent-primary);
    border-width: 2px;
}

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

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

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

.heatmap-indicator[b-legio14fef] {
    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-legio14fef] {
    background: var(--accent-primary);
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.5);
}

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

/* MODAL */
.modal-overlay[b-legio14fef] {
    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-legio14fef 0.2s ease;
}

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

.modal-content[b-legio14fef] {
    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-legio14fef 0.3s ease;
}

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

.modal-header[b-legio14fef] {
    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-legio14fef] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-subtitle[b-legio14fef] {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.btn-close[b-legio14fef] {
    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-legio14fef] {
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
}

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

.modal-participant-card[b-legio14fef] {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .challenge-detail[b-legio14fef] {
        padding: 1rem 0.5rem;
    }

    .challenge-header[b-legio14fef],
    .card[b-legio14fef] {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .header-actions[b-legio14fef] {
        position: static;
        margin-bottom: 1rem;
        width: 100%;
    }

    .header-actions button[b-legio14fef] {
        flex: 1;
    }

    .header-content[b-legio14fef] {
        padding-right: 0;
    }

    .challenge-title[b-legio14fef] {
        font-size: 1.5rem;
        padding-right: 0;
    }

    .challenge-description[b-legio14fef] {
        font-size: 1rem;
    }

    .section-header[b-legio14fef] {
        flex-direction: column;
        align-items: flex-start;
    }

    .period-tabs[b-legio14fef] {
        width: 100%;
    }

    .tab[b-legio14fef] {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.75rem;
    }

    .form-row[b-legio14fef] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .habits-grid[b-legio14fef] {
        grid-template-columns: 1fr;
    }

    .btn-save[b-legio14fef] {
        width: 100%;
    }

    .participants-list[b-legio14fef] {
        grid-template-columns: 1fr;
    }

    .participant-data[b-legio14fef] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .participant-heatmap-row[b-legio14fef] {
        flex-direction: column;
        align-items: stretch;
    }

    .participant-heatmap-header[b-legio14fef] {
        min-width: 0;
        width: 100%;
    }

    .heatmap-cells[b-legio14fef] {
        overflow-x: scroll;
        justify-content: flex-start;
    }

    .modal-content[b-legio14fef] {
        max-width: 95vw;
        margin: 0 0.5rem;
    }

    .modal-header[b-legio14fef],
    .modal-body[b-legio14fef] {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .challenge-meta[b-legio14fef] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .period-tabs[b-legio14fef] {
        flex-direction: column;
    }

    .tab[b-legio14fef] {
        width: 100%;
    }

    .user-progress-layout[b-legio14fef] {
        grid-template-columns: 1fr;
    }
}

/* PICTURE VIEW MODAL */
.picture-view-modal[b-legio14fef] {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
}

.picture-view-container[b-legio14fef] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 80vh;
    overflow: auto;
}

.picture-view-container img[b-legio14fef] {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}

/* USER PROGRESS LAYOUT - NO SIDEBAR */
.user-progress-layout.no-sidebar[b-legio14fef] {
    grid-template-columns: 1fr;
}

.progress-inputs.full-width[b-legio14fef] {
    grid-column: 1;
}

/* INLINE CHECKLIST STYLES */
.inline-checklist[b-legio14fef] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.inline-checklist h4[b-legio14fef] {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.checklist-items[b-legio14fef] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checklist-item[b-legio14fef] {
    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-legio14fef] {
        background: var(--bg-hover);
        border-color: var(--accent-primary);
    }
}

.checklist-item.completed[b-legio14fef] {
    opacity: 0.6;
}

.checklist-item.completed span[b-legio14fef] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.checklist-item input[type="checkbox"][b-legio14fef] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.checklist-item span[b-legio14fef] {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-primary);
    user-select: none;
}

/* /Components/Pages/Challenges.razor.rz.scp.css */
.challenges-container[b-68zbcgx6il] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.challenges-header[b-68zbcgx6il] {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.challenges-header h1[b-68zbcgx6il] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
}

.challenges-content[b-68zbcgx6il] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.challenges-section[b-68zbcgx6il] {
    display: flex;
    flex-direction: column;
}

.section-header[b-68zbcgx6il] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

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

.header-actions[b-68zbcgx6il] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Use global .btn-action-primary from app.css for consistent styling */
.btn-join-challenge[b-68zbcgx6il] {
    /* Inherits from .btn-action-primary in app.css */
}

/* Use global .btn-action-primary from app.css for consistent styling */
.btn-create-challenge[b-68zbcgx6il] {
    /* Inherits from .btn-action-primary in app.css */
}

.challenges-list[b-68zbcgx6il] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.challenge-item[b-68zbcgx6il] {
    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-68zbcgx6il] {
        border-color: var(--accent-primary);
        box-shadow: 0 4px 16px rgba(76, 175, 80, 0.15);
    }
}

.challenge-item.template-challenge[b-68zbcgx6il] {
    border-left: 3px solid var(--accent-secondary);
}

@media (hover: hover) {
    .challenge-item.template-challenge:hover[b-68zbcgx6il] {
        border-color: var(--accent-secondary);
        box-shadow: 0 4px 16px rgba(255, 193, 7, 0.15);
    }
}

.challenge-item.template-challenge.active-template[b-68zbcgx6il] {
    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-68zbcgx6il] {
        border-color: #5c6bc0;
        box-shadow: 0 4px 16px rgba(92, 107, 192, 0.15);
    }
}

.challenge-item.active-challenge[b-68zbcgx6il] {
    border-left: 3px solid #5c6bc0;
    background: var(--card-bg);
}

@media (hover: hover) {
    .challenge-item.active-challenge:hover[b-68zbcgx6il] {
        border-color: #5c6bc0;
        box-shadow: 0 4px 16px rgba(92, 107, 192, 0.12);
    }
}

.challenge-main-info[b-68zbcgx6il] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.challenge-item-image[b-68zbcgx6il] {
    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-68zbcgx6il] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.challenge-name-section[b-68zbcgx6il] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.challenge-name-row[b-68zbcgx6il] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.challenge-name[b-68zbcgx6il] {
    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-68zbcgx6il] {
    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-68zbcgx6il] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.challenge-time[b-68zbcgx6il] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.challenge-progress[b-68zbcgx6il] {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 500;
}

.challenge-status[b-68zbcgx6il] {
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.challenge-status.completed[b-68zbcgx6il] {
    color: var(--accent-primary);
}

.challenge-countdown[b-68zbcgx6il] {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-favorite-challenge[b-68zbcgx6il] {
    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-68zbcgx6il] {
        background: var(--hover-bg);
        color: var(--accent-secondary);
    }
}

.btn-favorite-challenge .bi-star-fill[b-68zbcgx6il] {
    color: var(--accent-secondary);
}

.template-icon[b-68zbcgx6il] {
    font-size: 1.5rem;
    color: var(--accent-secondary);
    flex-shrink: 0;
}

.challenge-actions[b-68zbcgx6il] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-action-btn[b-68zbcgx6il] {
    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-68zbcgx6il] {
    font-size: 1rem;
}

.template-action-btn.start-btn[b-68zbcgx6il] {
    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-68zbcgx6il] {
        background: #4a5ab8;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(92, 107, 192, 0.3);
    }
}

.template-action-btn.start-btn:active[b-68zbcgx6il] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(92, 107, 192, 0.2);
}

.template-action-btn.stop-btn[b-68zbcgx6il] {
    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-68zbcgx6il] {
        background: #e53935;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(239, 83, 80, 0.3);
    }
}

.template-action-btn.stop-btn:active[b-68zbcgx6il] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(239, 83, 80, 0.2);
}

.template-action-btn.copy-btn[b-68zbcgx6il] {
    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-68zbcgx6il] {
        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-68zbcgx6il] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.challenge-badge[b-68zbcgx6il] {
    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-68zbcgx6il] {
    background: rgba(76, 175, 80, 0.1);
    color: var(--accent-primary);
}

.challenge-badge.private[b-68zbcgx6il] {
    background: rgba(133, 143, 168, 0.1);
    color: var(--text-muted);
}

.btn-start-challenge[b-68zbcgx6il] {
    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-68zbcgx6il] {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
    }
}

.btn-edit-challenge[b-68zbcgx6il],
.btn-delete-challenge[b-68zbcgx6il],
.btn-add-template[b-68zbcgx6il] {
    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-68zbcgx6il] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

@media (hover: hover) {
    .btn-delete-challenge:hover[b-68zbcgx6il] {
        background: rgba(244, 67, 54, 0.1);
        color: #f44336;
    }
}

.btn-add-template[b-68zbcgx6il] {
    font-size: 1.5rem;
}

@media (hover: hover) {
    .btn-add-template:hover[b-68zbcgx6il] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.empty-state[b-68zbcgx6il] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-icon[b-68zbcgx6il] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.empty-state p[b-68zbcgx6il] {
    font-size: 1.1rem;
    margin: 0;
}

/* Modal Styles */
.modal-backdrop[b-68zbcgx6il] {
    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-68zbcgx6il],
.delete-modal[b-68zbcgx6il] {
    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-68zbcgx6il 0.2s ease-out;
}

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

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

.modal-header h3[b-68zbcgx6il] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.close-btn[b-68zbcgx6il] {
    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-68zbcgx6il] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.modal-body[b-68zbcgx6il] {
    padding: 1.5rem;
}

.form-group[b-68zbcgx6il] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-68zbcgx6il] {
    margin-bottom: 0;
}

.form-group label[b-68zbcgx6il] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-control[b-68zbcgx6il] {
    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-68zbcgx6il] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.checkbox-label[b-68zbcgx6il] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-68zbcgx6il] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

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

.btn[b-68zbcgx6il] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

@media (hover: hover) {
    .btn-primary:hover[b-68zbcgx6il] {
        background: var(--accent-hover);
    }
}

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

@media (hover: hover) {
    .btn-secondary:hover[b-68zbcgx6il] {
        background: var(--hover-bg);
    }
}

/* Delete Modal Specific Styles */
.delete-modal[b-68zbcgx6il] {
    max-width: 450px;
}

.delete-modal-header[b-68zbcgx6il] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.delete-modal-header h4[b-68zbcgx6il] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.delete-modal-body[b-68zbcgx6il] {
    padding: 1.5rem;
}

.delete-modal-body p[b-68zbcgx6il] {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.delete-modal-body .text-muted[b-68zbcgx6il] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.delete-modal-footer[b-68zbcgx6il] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn-cancel-delete[b-68zbcgx6il],
.btn-confirm-delete[b-68zbcgx6il] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel-delete[b-68zbcgx6il] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-cancel-delete:hover[b-68zbcgx6il] {
        background: var(--hover-bg);
    }
}

.btn-confirm-delete[b-68zbcgx6il] {
    background: #f44336;
    color: white;
}

@media (hover: hover) {
    .btn-confirm-delete:hover[b-68zbcgx6il] {
        background: #d32f2f;
    }
}

/* Loading State */
.loading-container[b-68zbcgx6il] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
}

.loading-text[b-68zbcgx6il] {
    color: var(--text-muted);
    font-size: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .challenges-header[b-68zbcgx6il] {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-header[b-68zbcgx6il] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-actions[b-68zbcgx6il] {
        flex-direction: column;
        width: 100%;
    }

    .btn-join-challenge[b-68zbcgx6il],
    .btn-create-challenge[b-68zbcgx6il] {
        width: 100%;
        justify-content: center;
    }

    .challenge-item[b-68zbcgx6il] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .challenge-main-info[b-68zbcgx6il] {
        width: 100%;
    }

    .challenge-actions[b-68zbcgx6il] {
        align-self: flex-end;
    }

    /* Modal full-screen on mobile */
    .modal-backdrop[b-68zbcgx6il] {
        padding: 0;
    }

    .edit-modal[b-68zbcgx6il],
    .delete-modal[b-68zbcgx6il] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .modal-body[b-68zbcgx6il] {
        flex: 1;
        overflow-y: auto;
    }
}

/* Extra small screens (360px min supported) */
@media (max-width: 480px) {
    .challenges-container[b-68zbcgx6il] {
        padding: 1rem 0.75rem;
    }

    .challenges-header h1[b-68zbcgx6il] {
        font-size: 1.5rem;
    }

    .section-header h2[b-68zbcgx6il] {
        font-size: 1.25rem;
    }

    .challenge-item[b-68zbcgx6il] {
        padding: 0.875rem;
    }

    .challenge-item-image[b-68zbcgx6il] {
        width: 48px;
        height: 48px;
    }

    .challenge-name[b-68zbcgx6il] {
        font-size: 1rem;
    }

    .challenge-description[b-68zbcgx6il] {
        font-size: 0.85rem;
    }

    .template-action-btn[b-68zbcgx6il] {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }

    .challenge-badge[b-68zbcgx6il] {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }

    .challenge-actions[b-68zbcgx6il] {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .modal-header[b-68zbcgx6il] {
        padding: 1rem;
    }

    .modal-header h3[b-68zbcgx6il] {
        font-size: 1.1rem;
    }

    .modal-body[b-68zbcgx6il] {
        padding: 1rem;
    }

    .modal-footer[b-68zbcgx6il] {
        padding: 1rem;
        flex-direction: column;
    }

    .modal-footer .btn[b-68zbcgx6il] {
        width: 100%;
    }
}

/* Image View Modal */
.modal-overlay[b-68zbcgx6il] {
    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-68zbcgx6il] {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
}

.picture-view-modal .modal-header[b-68zbcgx6il] {
    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-68zbcgx6il] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close-btn[b-68zbcgx6il] {
    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-68zbcgx6il] {
        color: var(--text-primary);
    }
}

.picture-view-container[b-68zbcgx6il] {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 80vh;
    overflow: auto;
}

.picture-view-container img[b-68zbcgx6il] {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: 8px;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
.contact-container[b-3322t2gnpq] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.contact-header[b-3322t2gnpq] {
    text-align: center;
    margin-bottom: 3rem;
}

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

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

.contact-intro[b-3322t2gnpq] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.contact-intro p[b-3322t2gnpq] {
    font-size: 1.063rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.contact-layout[b-3322t2gnpq] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
}

.contact-info-section[b-3322t2gnpq] {
    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-3322t2gnpq] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.info-card[b-3322t2gnpq] {
    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-3322t2gnpq] {
        transform: translateX(4px);
    }
}

.info-icon[b-3322t2gnpq] {
    font-size: 2rem;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.info-content[b-3322t2gnpq] {
    flex: 1;
}

.info-content h3[b-3322t2gnpq] {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.info-content p[b-3322t2gnpq] {
    font-size: 0.938rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.info-content small[b-3322t2gnpq] {
    font-size: 0.813rem;
    color: var(--text-secondary);
}

.info-content a[b-3322t2gnpq] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .info-content a:hover[b-3322t2gnpq] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

@media (max-width: 992px) {
    .contact-layout[b-3322t2gnpq] {
        grid-template-columns: 1fr;
    }

    .contact-info-section[b-3322t2gnpq] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .contact-container[b-3322t2gnpq] {
        padding: 1rem;
    }

    .page-title[b-3322t2gnpq] {
        font-size: 2rem;
    }

    .contact-info-section[b-3322t2gnpq] {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .contact-container[b-3322t2gnpq] {
        padding: 0.75rem;
    }

    .page-title[b-3322t2gnpq] {
        font-size: 1.5rem;
    }

    .page-subtitle[b-3322t2gnpq] {
        font-size: 0.875rem;
    }

    .contact-info-section[b-3322t2gnpq] {
        padding: 1rem;
        border-radius: 12px;
    }

    .info-icon[b-3322t2gnpq] {
        font-size: 1.25rem;
    }

    .info-content h3[b-3322t2gnpq] {
        font-size: 1rem;
    }

    .info-content p[b-3322t2gnpq] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/EditChallenge.razor.rz.scp.css */
.create-challenge-container[b-so3ysodexl] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.loading-container[b-so3ysodexl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.loading-text[b-so3ysodexl] {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 1rem;
}

.page-header[b-so3ysodexl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-btn[b-so3ysodexl] {
    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-so3ysodexl] {
        background: var(--hover-bg);
    }
}

.page-header h1[b-so3ysodexl] {
    flex: 1;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.section-card[b-so3ysodexl] {
    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-so3ysodexl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title[b-so3ysodexl] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.section-description[b-so3ysodexl] {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

.section-header .section-title[b-so3ysodexl] {
    margin: 0;
}

.form-group[b-so3ysodexl] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-so3ysodexl] {
    margin-bottom: 0;
}

.form-group label[b-so3ysodexl] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-input[b-so3ysodexl] {
    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-so3ysodexl] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-textarea[b-so3ysodexl] {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.validation-error[b-so3ysodexl] {
    display: block;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.habits-list[b-so3ysodexl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.habit-row[b-so3ysodexl] {
    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-so3ysodexl] {
        border-color: var(--accent-primary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

.add-habit-row[b-so3ysodexl] {
    cursor: pointer;
    background: var(--bg-secondary);
}

@media (hover: hover) {
    .add-habit-row:hover[b-so3ysodexl] {
        background: var(--hover-bg);
    }
}

.add-habit-prompt[b-so3ysodexl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: var(--text-muted);
}

.add-icon[b-so3ysodexl] {
    font-size: 1.25rem;
    color: var(--accent-primary);
}

.add-text[b-so3ysodexl] {
    font-size: 0.95rem;
    font-weight: 500;
}

.habit-info[b-so3ysodexl] {
    flex: 1;
}

.habit-name[b-so3ysodexl] {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.habit-description[b-so3ysodexl] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.habit-actions[b-so3ysodexl] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-so3ysodexl] {
    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-so3ysodexl] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.empty-state[b-so3ysodexl] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.empty-icon[b-so3ysodexl] {
    font-size: 3rem;
    opacity: 0.5;
    margin-bottom: 1rem;
    display: block;
}

.empty-state p[b-so3ysodexl] {
    margin: 0;
    font-size: 1rem;
}

.footer-actions[b-so3ysodexl] {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding: 1rem 0;
}

.btn[b-so3ysodexl] {
    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-so3ysodexl] {
    opacity: 0.6;
    cursor: not-allowed;
}

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

@media (hover: hover) {
    .btn-secondary:hover:not(:disabled)[b-so3ysodexl] {
        background: var(--hover-bg);
    }
}

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

@media (hover: hover) {
    .btn-outline-secondary:hover:not(:disabled)[b-so3ysodexl] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.btn-primary[b-so3ysodexl] {
    background: var(--accent-primary);
    color: white;
    border: 1px solid var(--accent-primary);
}

@media (hover: hover) {
    .btn-primary:hover:not(:disabled)[b-so3ysodexl] {
        background: var(--accent-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    }
}

/* Modal Styles */
.modal-overlay[b-so3ysodexl] {
    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-so3ysodexl 0.2s ease-out;
}

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

.modal-content[b-so3ysodexl] {
    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-so3ysodexl 0.3s ease-out;
}

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

.modal-header[b-so3ysodexl] {
    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-so3ysodexl] {
    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-so3ysodexl] {
    color: #3788d8;
    font-size: 1.1rem;
}

.close-button[b-so3ysodexl] {
    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-so3ysodexl] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.btn-close[b-so3ysodexl] {
    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-so3ysodexl] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.modal-body[b-so3ysodexl] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

.modal-footer[b-so3ysodexl] {
    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-so3ysodexl] {
    margin-bottom: 2rem;
}

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

.form-section .section-header[b-so3ysodexl] {
    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-so3ysodexl] {
    color: #3788d8;
    font-size: 1.1rem;
}

.form-section .form-group label[b-so3ysodexl] {
    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-so3ysodexl] {
    color: #3788d8;
    font-size: 0.95rem;
}

.form-control[b-so3ysodexl] {
    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-so3ysodexl] {
    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-so3ysodexl] {
        border-color: #3788d8;
    }
}

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

.color-option[b-so3ysodexl] {
    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-so3ysodexl] {
        transform: scale(1.15);
    }
}

.color-option.selected[b-so3ysodexl] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.custom-color-picker-wrapper[b-so3ysodexl] {
    position: relative;
    width: 40px;
    height: 40px;
}

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

.custom-color-button[b-so3ysodexl] {
    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-so3ysodexl] {
    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-so3ysodexl] {
        border-color: var(--text-primary);
        transform: scale(1.1);
    }
}

.form-section-header[b-so3ysodexl] {
    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-so3ysodexl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-input[b-so3ysodexl] {
    flex: 1;
}

.time-separator[b-so3ysodexl] {
    color: var(--text-muted);
    font-weight: 500;
}

.days-picker[b-so3ysodexl] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-so3ysodexl] {
    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-so3ysodexl] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.day-checkbox input[type="checkbox"][b-so3ysodexl] {
    cursor: pointer;
}

.day-checkbox span[b-so3ysodexl] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Quick add form styles now handled by shared QuickAddRow component */

.btn[b-so3ysodexl] {
    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-so3ysodexl] {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
}

@media (hover: hover) {
    .btn-outline-secondary:hover[b-so3ysodexl] {
        background: var(--hover-bg);
    }
}

.spinner-border[b-so3ysodexl] {
    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-so3ysodexl 0.75s linear infinite;
}

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

@keyframes spinner-border-b-so3ysodexl {
    to {
        transform: rotate(360deg);
    }
}

/* Checkbox label styles */
.checkbox-label[b-so3ysodexl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0;
}

.checkbox-label.disabled[b-so3ysodexl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-label input[type="checkbox"][b-so3ysodexl] {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.checkbox-label.disabled input[type="checkbox"][b-so3ysodexl] {
    cursor: not-allowed;
}

.premium-link[b-so3ysodexl] {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

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

.form-hint[b-so3ysodexl] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .create-challenge-container[b-so3ysodexl] {
        padding: 1rem 0.5rem;
    }

    .section-card[b-so3ysodexl] {
        padding: 1.5rem;
    }

    .page-header h1[b-so3ysodexl] {
        font-size: 1.5rem;
    }

    .footer-actions[b-so3ysodexl] {
        flex-direction: column;
    }

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

    /* Modal full-screen on mobile */
    .modal-overlay[b-so3ysodexl] {
        padding: 0;
    }

    .modal-content[b-so3ysodexl] {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .modal-header[b-so3ysodexl],
    .modal-body[b-so3ysodexl],
    .modal-footer[b-so3ysodexl] {
        padding: 1rem 1.25rem;
    }
}

/* Extra small screens (360px min supported) */
@media (max-width: 480px) {
    .create-challenge-container[b-so3ysodexl] {
        padding: 1rem 0.5rem;
    }

    .page-header h1[b-so3ysodexl] {
        font-size: 1.25rem;
    }

    .section-card[b-so3ysodexl] {
        padding: 1rem;
        border-radius: 8px;
    }

    .section-title[b-so3ysodexl] {
        font-size: 1.1rem;
    }

    .form-group label[b-so3ysodexl] {
        font-size: 0.9rem;
    }

    .habit-row[b-so3ysodexl] {
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .habit-actions[b-so3ysodexl] {
        width: 100%;
        justify-content: flex-end;
    }

    .color-picker[b-so3ysodexl] {
        gap: 0.5rem;
    }

    .color-option[b-so3ysodexl] {
        width: 36px;
        height: 36px;
    }

    .days-picker[b-so3ysodexl] {
        gap: 0.375rem;
    }

    .day-checkbox[b-so3ysodexl] {
        padding: 0.4rem 0.6rem;
    }

    .day-checkbox span[b-so3ysodexl] {
        font-size: 0.85rem;
    }

    .modal-body[b-so3ysodexl] {
        padding: 1rem;
    }

    .modal-footer[b-so3ysodexl] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-so3ysodexl] {
        width: 100%;
    }
}
/* /Components/Pages/EventListShared.razor.rz.scp.css */
.shared-eventlist-container[b-egn547z3wb] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

.loading-state[b-egn547z3wb],
.error-state[b-egn547z3wb] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-state h2[b-egn547z3wb],
.error-state h2[b-egn547z3wb] {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.loading-state p[b-egn547z3wb],
.error-state p[b-egn547z3wb] {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2rem;
}

.error-message[b-egn547z3wb] {
    font-size: 1rem;
}

.eventlist-preview-card[b-egn547z3wb] {
    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-egn547z3wb] {
    height: 6px;
    width: 100%;
}

.eventlist-preview-content[b-egn547z3wb] {
    padding: 2rem;
}

.eventlist-preview-content h1[b-egn547z3wb] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #111827);
}

.eventlist-preview-description[b-egn547z3wb] {
    font-size: 1.125rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.eventlist-preview-meta[b-egn547z3wb] {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 0.5rem;
}

.meta-item[b-egn547z3wb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary, #6b7280);
}

.meta-item .bi[b-egn547z3wb] {
    font-size: 1.25rem;
    color: var(--primary, #6366f1);
}

.preview-actions[b-egn547z3wb] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-lg[b-egn547z3wb] {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
}

.btn[b-egn547z3wb] {
    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-egn547z3wb] {
    width: 1rem;
    height: 1rem;
    border-width: 0.125rem;
}

@media (max-width: 768px) {
    .shared-eventlist-container[b-egn547z3wb] {
        padding: 1rem;
    }

    .eventlist-preview-content[b-egn547z3wb] {
        padding: 1.5rem;
    }

    .eventlist-preview-content h1[b-egn547z3wb] {
        font-size: 1.5rem;
    }

    .preview-actions[b-egn547z3wb] {
        flex-direction: column;
    }
}
/* /Components/Pages/Events.razor.rz.scp.css */
.events-page[b-h3b61cgbss] {
    padding: 2rem;
    min-height: calc(100vh - 60px);
    background: var(--bg-primary);
}

.events-container[b-h3b61cgbss] {
    max-width: 1600px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.events-header[b-h3b61cgbss] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.events-header h2[b-h3b61cgbss] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-color);
}

.events-actions[b-h3b61cgbss] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Menu Wrapper - Modern Design from Timeboxing */
.menu-wrapper[b-h3b61cgbss] {
    position: relative;
}

.action-btn[b-h3b61cgbss] {
    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-h3b61cgbss],
    .action-btn.active[b-h3b61cgbss] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.action-btn-text[b-h3b61cgbss] {
    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-h3b61cgbss],
    .action-btn-text.active[b-h3b61cgbss] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.modern-dropdown[b-h3b61cgbss] {
    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-h3b61cgbss 0.2s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-section[b-h3b61cgbss] {
    padding: 0.75rem;
}

.section-label[b-h3b61cgbss] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

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

.dropdown-action[b-h3b61cgbss] {
    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-h3b61cgbss] {
        background: var(--hover-bg);
    }
}

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

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

.country-select-custom[b-h3b61cgbss] {
    position: relative;
    width: 100%;
}

.country-select-trigger[b-h3b61cgbss] {
    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-h3b61cgbss] {
    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-h3b61cgbss] {
        border-color: var(--accent-primary);
    }
}

.country-chevron[b-h3b61cgbss] {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.country-chevron.open[b-h3b61cgbss] {
    transform: rotate(180deg);
}

.country-select-list[b-h3b61cgbss] {
    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-h3b61cgbss] {
    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-h3b61cgbss] {
        background: var(--hover-bg);
    }
}

.country-select-item.active[b-h3b61cgbss] {
    background: var(--hover-bg);
    font-weight: 600;
}

/* Use global button styles from app.css - no local override needed */
.btn[b-h3b61cgbss] {
    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-h3b61cgbss] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn:active[b-h3b61cgbss] {
    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-h3b61cgbss] {
    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-h3b61cgbss] {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-secondary);
    }
}

.btn-danger[b-h3b61cgbss] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

@media (hover: hover) {
    .btn-danger:hover[b-h3b61cgbss] {
        background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
    }
}

/* Sidebar layout */
.events-layout[b-h3b61cgbss] {
    display: flex;
    gap: 0;
    position: relative;
}

.calendar-area[b-h3b61cgbss] {
    flex: 1;
    min-width: 0;
}

.sidebar-backdrop[b-h3b61cgbss] {
    display: none;
}

/* View-only indicator */
.view-only-indicator[b-h3b61cgbss] {
    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-h3b61cgbss] {
    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-h3b61cgbss] {
    background: var(--card-bg);
    color: var(--text-color);
    min-height: 600px;
}

/* Modal Styles */
.modal-overlay[b-h3b61cgbss] {
    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: 1000;
    animation: fadeIn-b-h3b61cgbss 0.2s ease-out;
    padding: 1rem;
}

@keyframes fadeIn-b-h3b61cgbss {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content[b-h3b61cgbss] {
    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-h3b61cgbss 0.3s ease-out;
}

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

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-h3b61cgbss] {
    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-h3b61cgbss] {
    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-h3b61cgbss] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.close-button[b-h3b61cgbss] {
    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-h3b61cgbss] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

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

.modal-footer[b-h3b61cgbss] {
    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-h3b61cgbss] {
    margin-bottom: 2rem;
}

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

.section-header[b-h3b61cgbss] {
    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-h3b61cgbss] {
    color: var(--accent-primary);
    font-size: 1.1rem;
}

.form-group[b-h3b61cgbss] {
    margin-bottom: 1.25rem;
}

.form-group label[b-h3b61cgbss] {
    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-h3b61cgbss] {
    color: var(--accent-primary);
    font-size: 0.95rem;
}

.form-control[b-h3b61cgbss] {
    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-h3b61cgbss] {
    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-h3b61cgbss] {
        border-color: var(--accent-primary);
    }
}

select.form-control[b-h3b61cgbss] {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

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

.form-row[b-h3b61cgbss] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Toggle Switches */
.toggle-group[b-h3b61cgbss] {
    margin-bottom: 1.25rem;
}

.toggle-label[b-h3b61cgbss] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}

.toggle-input[b-h3b61cgbss] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-h3b61cgbss] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--border-color);
    border-radius: 24px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.toggle-slider[b-h3b61cgbss]::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-h3b61cgbss] {
    background: var(--accent-primary);
}

.toggle-input:checked+.toggle-slider[b-h3b61cgbss]::before {
    transform: translateX(20px);
}

.toggle-input:focus+.toggle-slider[b-h3b61cgbss] {
    box-shadow: 0 0 0 3px var(--hover-bg);
}

.toggle-text[b-h3b61cgbss] {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.95rem;
}

.checkbox-label[b-h3b61cgbss] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-h3b61cgbss] {
    width: auto;
}

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

.color-picker-compact[b-h3b61cgbss] {
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.color-option[b-h3b61cgbss] {
    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-h3b61cgbss] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    flex: 1;
    min-width: 0;
}

@media (hover: hover) {
    .color-option:hover[b-h3b61cgbss] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option.selected[b-h3b61cgbss] {
    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-h3b61cgbss] {
    background: var(--input-bg);
    border: 2px dashed var(--border-color);
}

.color-option-clear .bi[b-h3b61cgbss] {
    color: var(--text-secondary);
    text-shadow: none;
}

@media (hover: hover) {
    .color-option-clear:hover[b-h3b61cgbss] {
        border-color: var(--text-secondary);
    }
}

.color-option-clear.selected[b-h3b61cgbss] {
    border-style: solid;
    border-color: var(--text-color);
}

.custom-color-picker-wrapper[b-h3b61cgbss] {
    position: relative;
    width: 60px;
    height: 60px;
}

.custom-color-picker-compact[b-h3b61cgbss] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    flex: 1;
    min-width: 0;
}

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

.custom-color-button[b-h3b61cgbss] {
    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-h3b61cgbss] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border-width: 2px;
}

.custom-color-button span[b-h3b61cgbss] {
    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-h3b61cgbss] {
    font-size: 1rem;
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-h3b61cgbss] {
        border-color: var(--text-color);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option .bi[b-h3b61cgbss] {
    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-h3b61cgbss] {
    font-size: 1rem;
}

.modal-actions-right[b-h3b61cgbss] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* FullCalendar Theming - uses global accent colors (purple theme) */
[b-h3b61cgbss] .fc {
    --fc-border-color: var(--border-color);
    --fc-button-bg-color: var(--accent-primary);
    --fc-button-border-color: var(--accent-primary);
    --fc-button-hover-bg-color: var(--accent-secondary);
    --fc-button-hover-border-color: var(--accent-secondary);
    --fc-button-active-bg-color: var(--accent-secondary);
    --fc-button-active-border-color: var(--accent-secondary);
    --fc-event-bg-color: var(--accent-primary);
    --fc-event-border-color: var(--accent-primary);
    --fc-today-bg-color: var(--hover-bg);
}

[b-h3b61cgbss] .fc-toolbar {
    flex-wrap: wrap;
    position: relative;
}

[b-h3b61cgbss] .fc-toolbar-chunk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Center toolbar should have proper spacing and be truly centered */
[b-h3b61cgbss] .fc-toolbar-chunk:nth-child(2) {
    gap: 0.5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Left chunk (empty) */
[b-h3b61cgbss] .fc-toolbar-chunk:nth-child(1) {
    flex: 0;
}

/* Right chunk */
[b-h3b61cgbss] .fc-toolbar-chunk:nth-child(3) {
    flex: 0;
}

/* Fix title width to prevent repositioning */
[b-h3b61cgbss] .fc-toolbar-title {
    min-width: 250px;
    text-align: center;
    padding: 0 2rem;
    font-size: 1.5rem;
    font-weight: 600;
}

/* Fix button icons - hide default icons and use text/custom */
[b-h3b61cgbss] .fc-icon {
    font-family: Arial, sans-serif;
    font-style: normal;
    font-size: 1.4rem;
}



[b-h3b61cgbss] .fc-button {
    font-size: 0.875rem;
    padding: 0 1rem;
    height: 36px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

[b-h3b61cgbss] .fc-button:hover,
[b-h3b61cgbss] .fc-button-active {
    background: var(--hover-bg) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: none !important;
}

[b-h3b61cgbss] .fc-button:focus {
    box-shadow: 0 0 0 3px var(--hover-bg) !important;
}

[b-h3b61cgbss] .fc-button-primary:not(:disabled):active,
[b-h3b61cgbss] .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--hover-bg) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

[b-h3b61cgbss] .fc-prev-button,
[b-h3b61cgbss] .fc-next-button {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--text-color) !important;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[b-h3b61cgbss] .fc-prev-button:hover,
[b-h3b61cgbss] .fc-next-button:hover {
    background: var(--hover-bg) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

[b-h3b61cgbss] .fc-prev-button:active,
[b-h3b61cgbss] .fc-next-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[b-h3b61cgbss] .fc-prev-button:disabled,
[b-h3b61cgbss] .fc-next-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Hide default text content if any and use pseudo-elements for icons */
[b-h3b61cgbss] .fc-icon {
    display: none !important;
    /* Hide default FC icons */
}

/* Custom Icons using CSS arrows or font */
[b-h3b61cgbss] .fc-prev-button::after,
[b-h3b61cgbss] .fc-next-button::after {
    font-family: 'bootstrap-icons';
    font-size: 1.1rem;
    line-height: 1;
}

/* Chevron Left */
[b-h3b61cgbss] .fc-prev-button::after {
    content: '\F284';
    /* bi-chevron-left */
}

/* Chevron Right */
[b-h3b61cgbss] .fc-next-button::after {
    content: '\F285';
    /* bi-chevron-right */
}

[b-h3b61cgbss] .fc-theme-standard td,
[b-h3b61cgbss] .fc-theme-standard th {
    border-color: var(--border-color);
}

[b-h3b61cgbss] .fc-col-header-cell {
    background: var(--header-bg);
    color: var(--text-color);
}

[b-h3b61cgbss] .fc-daygrid-day-number {
    color: var(--text-color);
}

[b-h3b61cgbss] .fc-toolbar-title {
    color: var(--text-color);
}

[b-h3b61cgbss] .fc-daygrid-day {
    background: var(--card-bg);
    transition: background 0.2s ease;
}

[b-h3b61cgbss] .fc-daygrid-day.fc-day-today {
    background: var(--fc-today-bg-color);
}

@media (hover: hover) {
    [b-h3b61cgbss] .fc-daygrid-day:hover {
        background: var(--hover-bg);
        cursor: pointer;
    }
}

@media (hover: hover) {
    [b-h3b61cgbss] .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-h3b61cgbss] .fc-timegrid-slot,
[b-h3b61cgbss] .fc-timegrid-slot-lane {
    transition: background 0.2s ease;
}

@media (hover: hover) {

    [b-h3b61cgbss] .fc-timegrid-slot:hover,
    [b-h3b61cgbss] .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-h3b61cgbss] .fc-timeGridDay-view .fc-timegrid-col.fc-day-today {
    background: transparent !important;
}

[b-h3b61cgbss] .fc-timegrid-col {
    transition: background 0.2s ease;
}

/* Style the now indicator line to match project color scheme (purple) */
[b-h3b61cgbss] .fc-timegrid-now-indicator-line {
    border-color: var(--accent-primary);
}

[b-h3b61cgbss] .fc-timegrid-now-indicator-arrow {
    border-left-color: var(--accent-primary) !important;
}



[b-h3b61cgbss] .fc-event {
    cursor: pointer;
    transition: all 0.2s;
}

@media (hover: hover) {
    [b-h3b61cgbss] .fc-event:hover {
        filter: brightness(1.15);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 10;
    }
}

/* Days of week selector */
.days-of-week-selector[b-h3b61cgbss] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-h3b61cgbss] {
    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-h3b61cgbss] {
        background: var(--hover-bg);
    }
}

.day-checkbox input[type="checkbox"][b-h3b61cgbss] {
    width: auto;
    margin: 0;
}

.day-checkbox input[type="checkbox"]:checked+span[b-h3b61cgbss],
.day-checkbox:has(input[type="checkbox"]:checked)[b-h3b61cgbss] {
    background: var(--hover-bg);
    font-weight: 600;
}

/* Info button and tooltip */
.info-button-wrapper[b-h3b61cgbss] {
    position: relative;
    display: inline-block;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.info-button[b-h3b61cgbss] {
    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-h3b61cgbss] {
        color: var(--accent-secondary);
        transform: scale(1.15);
    }
}

.info-tooltip[b-h3b61cgbss] {
    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-h3b61cgbss]::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-h3b61cgbss] {
        visibility: visible;
        opacity: 1;
    }
}

@media (hover: none) {
    .info-tooltip[b-h3b61cgbss] {
        opacity: 1;
        visibility: visible;
    }
}

/* Monthly recurrence mode options */
.monthly-mode-options[b-h3b61cgbss] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radio-label[b-h3b61cgbss] {
    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-h3b61cgbss] {
        background: var(--hover-bg);
    }
}

.radio-label input[type="radio"][b-h3b61cgbss] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

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

.radio-label:has(input[type="radio"]:checked)[b-h3b61cgbss] {
    background: var(--hover-bg);
    border-color: var(--accent-primary);
}

.radio-label span[b-h3b61cgbss] {
    color: var(--text-color);
    font-size: 0.875rem;
}

.hint-text[b-h3b61cgbss] {
    color: var(--text-secondary, #6c757d);
}

.day-input[b-h3b61cgbss] {
    width: 70px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

.ordinal-select[b-h3b61cgbss],
.weekday-select[b-h3b61cgbss] {
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
    width: auto;
}

.ordinal-select[b-h3b61cgbss] {
    min-width: 85px;
}

.weekday-select[b-h3b61cgbss] {
    min-width: 110px;
}

.warning-text[b-h3b61cgbss] {
    color: #f59e0b;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
}

/* Recurrence end options */
.recurrence-end-options[b-h3b61cgbss] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.occurrence-input[b-h3b61cgbss] {
    width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.875rem;
}

/* Recurrence preview */
.recurrence-preview[b-h3b61cgbss] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.preview-header[b-h3b61cgbss] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.preview-header .bi[b-h3b61cgbss] {
    font-size: 1rem;
}

.preview-dates[b-h3b61cgbss] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.preview-date[b-h3b61cgbss] {
    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-h3b61cgbss] {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #6c757d);
    font-style: italic;
}

.preview-total[b-h3b61cgbss] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-color);
}

.preview-total strong[b-h3b61cgbss] {
    color: var(--accent-primary);
}

/* Birthday Modal Styles */
.birthday-modal[b-h3b61cgbss] {
    max-width: 600px;
}

.birthday-modal .modal-header[b-h3b61cgbss] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.birthday-modal .header-actions[b-h3b61cgbss] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-new-birthday[b-h3b61cgbss] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 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-h3b61cgbss] {
        background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn-new-birthday:active[b-h3b61cgbss] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.birthday-list[b-h3b61cgbss] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.birthday-item[b-h3b61cgbss] {
    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-h3b61cgbss] {
        background: rgba(236, 72, 153, 0.05);
        border-color: #ec4899;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(236, 72, 153, 0.15);
    }
}

.birthday-icon[b-h3b61cgbss] {
    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-h3b61cgbss] {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    overflow: hidden;
}

.birthday-name[b-h3b61cgbss] {
    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-h3b61cgbss] {
    color: var(--text-muted, #9ca3af);
    flex-shrink: 0;
}

.birthday-date[b-h3b61cgbss] {
    font-size: 0.85rem;
    color: var(--text-secondary, #6c757d);
    white-space: nowrap;
    flex-shrink: 0;
}

.birthday-age[b-h3b61cgbss] {
    font-size: 0.8rem;
    color: var(--text-muted, #9ca3af);
}

.birthday-calendar-badge[b-h3b61cgbss] {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #ec4899;
    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-h3b61cgbss] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* QuickAddRow with date input styling */
[b-h3b61cgbss] .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-h3b61cgbss] .add-birthday-row .add-form.with-date-input {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1rem;
    align-items: center;
}

[b-h3b61cgbss] .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-h3b61cgbss] .add-birthday-row .quick-add-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

[b-h3b61cgbss] .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-h3b61cgbss] .add-birthday-row .quick-add-date-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

[b-h3b61cgbss] .add-birthday-row .add-actions {
    display: flex;
    gap: 0.5rem;
}

[b-h3b61cgbss] .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-h3b61cgbss] .add-birthday-row .add-icon {
    color: #ec4899;
    font-size: 1rem;
}

.text-secondary[b-h3b61cgbss] {
    color: var(--text-secondary, #6c757d);
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .events-header[b-h3b61cgbss] {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .events-page[b-h3b61cgbss] {
        padding: 0.5rem;
    }

    .events-container[b-h3b61cgbss] {
        padding: 1rem;
        /* Mobile edge-to-edge look enhancement */
        max-width: 100%;
        border-radius: 8px;
        /* Keep radius but maybe smaller padding */
    }

    .events-header[b-h3b61cgbss] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .events-header h2[b-h3b61cgbss] {
        text-align: center;
        font-size: 1.35rem;
    }

    .sidebar-backdrop[b-h3b61cgbss] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        /* Slightly darker for better contrast */
        z-index: 1035;
        backdrop-filter: blur(2px);
    }

    /* Actions Bar - Compact grid/flex */
    .events-actions[b-h3b61cgbss] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    /* Sidebar Toggle & Menu buttons */
    .action-btn[b-h3b61cgbss] {
        width: 44px;
        /* Larger touch target */
        height: 44px;
        flex: 0 0 44px;
    }

    /* Primary Action Buttons (Add Event, Birthdays) */
    .events-actions .action-btn-text[b-h3b61cgbss] {
        flex: 1;
        /* Grow to fill space equitably */
        justify-content: center;
        padding: 0.6rem 0.5rem;
        font-size: 0.9rem;
        min-width: 100px;
        height: 44px;
        /* Match height of action buttons */
    }

    .menu-wrapper[b-h3b61cgbss] {
        display: contents;
        /* Allows button to participate in flex layout directly */
    }

    .modern-dropdown[b-h3b61cgbss] {
        width: calc(100vw - 2rem);
        /* Full width minus padding */
        max-width: 350px;
        right: -10px;
        /* Adjust for position relative to wrapper if needed, but display contents affects positioning context */
        /* Since display: contents removes the wrapper box, absolute positioning is relative to nearest positioned ancestor (.events-actions?? No, .events-header is flex) 
           Actually display: contents might break absolute positioning context.
           Better to keep menu-wrapper as block/flex but make it fit.
        */
    }
}

/* Fix for menu-wrapper and dropdown on mobile */
@media (max-width: 768px) {
    .menu-wrapper[b-h3b61cgbss] {
        display: block;
        flex: 0 0 44px;
        /* Same as action-btn */
        position: relative;
    }

    .modern-dropdown[b-h3b61cgbss] {
        right: 0;
        left: auto;
        width: 280px;
        max-width: 90vw;
    }

    /* FullCalendar Responsive Overrides */
    [b-h3b61cgbss] .fc-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: space-between;
        margin-bottom: 1rem !important;
    }

    [b-h3b61cgbss] .fc-toolbar-chunk:nth-child(2) {
        /* Title */
        order: -1;
        width: 100%;
        text-align: center;
        position: static;
        transform: none;
        margin-bottom: 0.25rem;
        display: flex;
        justify-content: center;
    }

    [b-h3b61cgbss] .fc-toolbar-chunk:nth-child(1) {
        /* Prev/Next/Today */
        order: 2;
        width: auto;
    }

    [b-h3b61cgbss] .fc-toolbar-chunk:nth-child(3) {
        /* Views */
        order: 3;
        width: auto;
    }

    /* On very narrow screens, stack nav and views too */
    @media (max-width: 400px) {

        [b-h3b61cgbss] .fc-toolbar-chunk:nth-child(1),
        [b-h3b61cgbss] .fc-toolbar-chunk:nth-child(3) {
            width: 100%;
            justify-content: center;
        }
    }

    [b-h3b61cgbss] .fc-toolbar-title {
        font-size: 1.25rem;
        padding: 0;
    }

    [b-h3b61cgbss] .fc-button {
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
    }

    /* Modals - Full Screen */
    .modal-overlay[b-h3b61cgbss] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-h3b61cgbss] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        animation: slideUp-b-h3b61cgbss 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .modal-header[b-h3b61cgbss] {
        padding: 1rem 1.25rem;
        flex-shrink: 0;
    }

    .modal-footer[b-h3b61cgbss] {
        padding: 1rem 1.25rem;
        flex-shrink: 0;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

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

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

    .form-row[b-h3b61cgbss] {
        grid-template-columns: 1fr;
    }

    /* Birthday List Items */
    .birthday-item[b-h3b61cgbss] {
        padding: 0.5rem 0.75rem;
    }

    .birthday-icon[b-h3b61cgbss] {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    [b-h3b61cgbss] .add-birthday-row .add-form.with-date-input {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .events-page[b-h3b61cgbss] {
        padding: 0;
    }

    .events-container[b-h3b61cgbss] {
        padding: 0.75rem;
        box-shadow: none;
    }

    /* Hide text on primary actions if needed, or reduce font */
    .events-actions .action-btn-text[b-h3b61cgbss] {
        font-size: 0.8rem;
        padding: 0.5rem;
        /* If we want to hide text: 
         span:not(.bi) { display: none; } 
         but keeping text is better for UX if space permits */
    }

    [b-h3b61cgbss] .fc-toolbar-title {
        font-size: 1.1rem;
    }

    .modal-footer[b-h3b61cgbss] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn[b-h3b61cgbss] {
        width: 100%;
        justify-content: center;
    }

    .modal-actions-right[b-h3b61cgbss] {
        width: 100%;
        flex-direction: column;
    }
}

/* Print Styles */
@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    *[b-h3b61cgbss] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html[b-h3b61cgbss],
    body[b-h3b61cgbss] {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Hide navigation and controls */
    .navbar-top[b-h3b61cgbss],
    .app-footer[b-h3b61cgbss],
    nav.navbar-top[b-h3b61cgbss],
    footer.app-footer[b-h3b61cgbss],
    .sidebar[b-h3b61cgbss],
    .events-actions[b-h3b61cgbss],
    .menu-wrapper[b-h3b61cgbss],
    .modern-dropdown[b-h3b61cgbss] {
        display: none !important;
    }

    .events-page[b-h3b61cgbss] {
        padding: 0 !important;
        background: white !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .events-container[b-h3b61cgbss] {
        box-shadow: none !important;
        padding: 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    .events-header[b-h3b61cgbss] {
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 2px solid #000 !important;
    }

    .events-header h2[b-h3b61cgbss] {
        color: #000 !important;
        font-size: 18pt !important;
        margin: 0 !important;
    }

    /* Optimize calendar for print - force full width */
    #calendar[b-h3b61cgbss] {
        min-height: 0 !important;
        background: white !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* FullCalendar print optimizations - using :global() to pierce scoping */
    :global(.fc)[b-h3b61cgbss] {
        font-size: 9pt !important;
        width: 100% !important;
    }

    :global(.fc-view-harness)[b-h3b61cgbss] {
        width: 100% !important;
    }

    :global(.fc-daygrid)[b-h3b61cgbss],
    :global(.fc-scrollgrid)[b-h3b61cgbss],
    :global(.fc-scrollgrid-sync-table)[b-h3b61cgbss] {
        width: 100% !important;
    }

    :global(.fc-toolbar)[b-h3b61cgbss] {
        margin-bottom: 0.5rem !important;
        display: flex !important;
        justify-content: center !important;
    }

    :global(.fc-toolbar-title)[b-h3b61cgbss] {
        color: #000 !important;
        font-size: 16pt !important;
    }

    :global(.fc-button)[b-h3b61cgbss] {
        display: none !important;
    }

    :global(.fc-toolbar-chunk)[b-h3b61cgbss] {
        display: none !important;
    }

    :global(.fc-toolbar-chunk:nth-child(2))[b-h3b61cgbss] {
        display: flex !important;
    }

    :global(.fc-col-header-cell)[b-h3b61cgbss] {
        background: #f0f0f0 !important;
        color: #000 !important;
        border-color: #000 !important;
        font-weight: bold !important;
        padding: 4px !important;
    }

    :global(.fc-daygrid-day)[b-h3b61cgbss] {
        background: white !important;
        min-height: 80px !important;
    }

    :global(.fc-daygrid-day-number)[b-h3b61cgbss] {
        color: #000 !important;
        padding: 4px !important;
    }

    :global(.fc-daygrid-day-top)[b-h3b61cgbss] {
        flex-direction: row !important;
    }

    :global(.fc-event)[b-h3b61cgbss] {
        page-break-inside: avoid !important;
        font-size: 8pt !important;
        padding: 2px 4px !important;
    }

    :global(.fc-event-title)[b-h3b61cgbss] {
        font-weight: 500 !important;
    }

    :global(.fc-theme-standard) td[b-h3b61cgbss],
    :global(.fc-theme-standard) th[b-h3b61cgbss] {
        border-color: #333 !important;
        border-width: 1px !important;
    }

    :global(.fc-scrollgrid)[b-h3b61cgbss] {
        border-color: #333 !important;
    }

    /* Ensure week view prints properly too */
    :global(.fc-timegrid)[b-h3b61cgbss] {
        width: 100% !important;
    }

    :global(.fc-timegrid-slot)[b-h3b61cgbss] {
        height: 2em !important;
    }
}
/* /Components/Pages/Habits.razor.rz.scp.css */
/* Modern Habits Page Styling */

.habits-page[b-mufzs1snjp] {
    padding: 2rem;
    max-width: 1600px; /* Wider for better calendar view */
    margin: 0 auto;
    min-height: 80vh;
}

/* --- Header Section --- */
.page-header[b-mufzs1snjp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: nowrap;
    gap: 1.5rem;
}

.header-content h1[b-mufzs1snjp] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.date-display[b-mufzs1snjp] {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

.header-stats[b-mufzs1snjp] {
    display: flex;
    gap: 2rem;
}

.stat-card[b-mufzs1snjp] {
    background: var(--card-bg);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    min-width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.stat-label[b-mufzs1snjp] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* --- Controls Bar --- */
.controls-bar[b-mufzs1snjp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    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-mufzs1snjp] {
    display: flex;
    background: var(--bg-primary);
    padding: 0.25rem;
    border-radius: 8px;
    gap: 0.25rem;
}

.view-toggle-btn[b-mufzs1snjp] {
    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-mufzs1snjp] {
        color: var(--text-primary);
        background: var(--hover-bg);
    }
}

.view-toggle-btn.active[b-mufzs1snjp] {
    background: var(--card-bg);
    color: var(--accent-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.nav-controls[b-mufzs1snjp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.period-label[b-mufzs1snjp] {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
}

.nav-arrow[b-mufzs1snjp] {
    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-mufzs1snjp] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.btn-new-habit[b-mufzs1snjp] {
    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);
}

@media (hover: hover) {
    .btn-new-habit:hover[b-mufzs1snjp] {
        background: var(--accent-secondary);
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
    }
}

/* --- Main Grid --- */
.habits-grid-container[b-mufzs1snjp] {
    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-mufzs1snjp] {
    overflow-x: auto;
    padding-bottom: 0.5rem;
    padding-right: 0;
}

/* Grid Layout Definition */
.habits-grid[b-mufzs1snjp] {
    display: grid;
    --habit-name-width: 280px;
}

/* Sticky Left Column (Habit Names) */
.grid-header-cell:first-child[b-mufzs1snjp],
.habit-row-cell:first-child[b-mufzs1snjp] {
    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-mufzs1snjp] {
    z-index: 20; 
}

/* Header Row */
.grid-header-row[b-mufzs1snjp] {
    display: contents; /* Use parent grid */
}

.grid-header-cell[b-mufzs1snjp] {
    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-mufzs1snjp] {
    color: var(--accent-primary);
    background: rgba(99, 102, 241, 0.05);
}

.day-name[b-mufzs1snjp] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    display: block;
}

.day-number[b-mufzs1snjp] {
    font-size: 1.125rem;
    font-weight: 700;
    display: block;
}

.habit-name-header[b-mufzs1snjp] {
    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-mufzs1snjp] {
    display: contents;
}

.habit-row-cell[b-mufzs1snjp] {
    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-mufzs1snjp] {
        background: var(--bg-primary);
    }
}

/* Habit Name Cell styling */
.habit-info-cell[b-mufzs1snjp] {
    justify-content: flex-start; /* Override center */
    padding-left: 1.5rem;
    padding-right: 1rem;
    position: relative;
}

/* Quick Add Cell styling */
.quick-add-cell[b-mufzs1snjp] {
    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-mufzs1snjp] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.habit-color-indicator[b-mufzs1snjp] {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    margin-right: 1rem;
}

.habit-details[b-mufzs1snjp] {
    flex: 1;
    overflow: hidden;
}

.habit-name-container[b-mufzs1snjp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

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

.habit-streak[b-mufzs1snjp] {
    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-mufzs1snjp] {
    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-mufzs1snjp] {
    font-size: 0.85rem;
}

/* Inline Edit Input */
.inline-edit-input[b-mufzs1snjp] {
    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-mufzs1snjp] {
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

@media (hover: hover) {
    .habit-row-cell:hover .habit-actions[b-mufzs1snjp] {
        opacity: 1;
    }
}

@media (hover: none) {
    .habit-actions[b-mufzs1snjp] {
        opacity: 1;
        visibility: visible;
    }
}

.action-btn[b-mufzs1snjp] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.25rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

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

/* Checkboxes */
.check-btn[b-mufzs1snjp] {
    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-mufzs1snjp] {
        border-color: var(--text-secondary);
        transform: scale(1.1);
    }
}

.check-btn.completed[b-mufzs1snjp] {
    border-color: transparent;
    transform: scale(1);
}

@media (hover: hover) {
    .check-btn.completed:hover[b-mufzs1snjp] {
        transform: scale(1.1);
    }
}

.check-btn:disabled[b-mufzs1snjp] {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--bg-primary);
    border-color: var(--border-light);
}

/* Today Column Highlight */
.habit-row-cell.today-cell[b-mufzs1snjp] {
    background: rgba(99, 102, 241, 0.02);
}

/* Empty State */
.empty-state-container[b-mufzs1snjp] {
    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-mufzs1snjp] {
    font-size: 4rem;
    color: var(--accent-primary);
    opacity: 0.2;
    margin-bottom: 1.5rem;
}

.empty-text h3[b-mufzs1snjp] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.empty-text p[b-mufzs1snjp] {
    color: var(--text-secondary);
    margin: 0;
}

/* Loading */
.loading-container[b-mufzs1snjp] {
    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-mufzs1snjp] {
    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-mufzs1snjp] {
    border-top: 2px solid var(--border-light);
}

.completion-stats-row .habit-row-cell[b-mufzs1snjp] {
    padding: 0.75rem 0;
}

.completion-stats-label[b-mufzs1snjp] {
    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-mufzs1snjp] {
    display: none; /* Hidden on desktop */
}

.completion-percentage[b-mufzs1snjp] {
    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-mufzs1snjp] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.completion-percentage.high[b-mufzs1snjp] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.completion-percentage.medium[b-mufzs1snjp] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.completion-percentage.low[b-mufzs1snjp] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.completion-percentage.zero[b-mufzs1snjp] {
    background: rgba(107, 114, 128, 0.1);
    color: var(--text-muted);
}

/* Streak Card Styling */
.streak-value[b-mufzs1snjp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #f59e0b;
}

.streak-value .fire-icon[b-mufzs1snjp] {
    font-size: 1.5rem;
}

/* Completion and Active stats styling */
.completion-value[b-mufzs1snjp],
.active-value[b-mufzs1snjp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-icon[b-mufzs1snjp] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.completion-value .stat-icon[b-mufzs1snjp] {
    color: #10b981;
}

.active-value .stat-icon[b-mufzs1snjp] {
    color: var(--accent-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .habits-page[b-mufzs1snjp] {
        padding: 1rem;
        padding-bottom: 5rem; /* Extra space for mobile usage */
    }

    .habits-grid[b-mufzs1snjp] {
        /* 160px gives enough room for name + 2 icons without being too wide */
        --habit-name-width: 160px;
    }

    /* Compact header stats - hide labels, show only icon + number */
    .page-header[b-mufzs1snjp] {
        align-items: center;
        gap: 1rem;
    }

    .header-stats[b-mufzs1snjp] {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .stat-card[b-mufzs1snjp] {
        min-width: 0;
        padding: 0.5rem 0.75rem;
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
    }

    .stat-label[b-mufzs1snjp] {
        display: none; /* Hide text labels on mobile */
    }

    .stat-value[b-mufzs1snjp] {
        font-size: 1rem;
    }

    .streak-value .fire-icon[b-mufzs1snjp] {
        font-size: 1rem;
    }

    .stat-icon[b-mufzs1snjp] {
        font-size: 1rem;
    }

    /* Controls bar - keep new habit button on same row as nav */
    .controls-bar[b-mufzs1snjp] {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .view-toggles[b-mufzs1snjp] {
        width: 100%;
        justify-content: center;
        order: 1;
    }

    .view-toggle-btn[b-mufzs1snjp] {
        flex: 1;
        text-align: center;
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }

    .nav-controls[b-mufzs1snjp] {
        flex: 1;
        justify-content: space-between;
        background: var(--bg-primary);
        padding: 0.5rem;
        border-radius: 8px;
        order: 2;
    }

    .btn-new-habit[b-mufzs1snjp] {
        flex-shrink: 0;
        padding: 0.5rem 0.75rem;
        order: 3;
    }

    .btn-new-habit span:last-child[b-mufzs1snjp] {
        display: none; /* Hide "New Habit" text, keep icon */
    }

    /* Habit Row Adjustments */
    .habit-name[b-mufzs1snjp] {
        font-size: 0.85rem;
    }

    .habit-info-cell[b-mufzs1snjp] {
        padding-left: 0.75rem;
        padding-right: 0.25rem; /* Reduced right padding to fit actions */
    }

    .habit-color-indicator[b-mufzs1snjp] {
        margin-right: 0.5rem;
        width: 3px;
    }

    .habit-streak[b-mufzs1snjp] {
        font-size: 0.75rem;
        padding: 0.1rem 0.3rem;
    }

    /* Make actions visible on mobile since there's no hover */
    .habit-actions[b-mufzs1snjp] {
        opacity: 1;
        position: static;
        background: transparent;
        margin-left: 0.25rem;
        flex-shrink: 0; /* Prevent actions from shrinking */
    }

    .action-btn[b-mufzs1snjp] {
        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-mufzs1snjp] {
        min-width: 0; /* Flexbox truncation fix */
    }

    /* Checkbox touch targets */
    .habit-row-cell[b-mufzs1snjp] {
        padding: 0.5rem 0.25rem;
    }

    .check-btn[b-mufzs1snjp] {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    /* Hide "Daily Completion" text on mobile, show icon instead */
    .stats-label-text[b-mufzs1snjp] {
        display: none;
    }

    .stats-label-icon[b-mufzs1snjp] {
        display: inline;
        font-size: 1rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .habits-grid[b-mufzs1snjp] {
        --habit-name-width: 150px; /* Slightly tighter on very small screens */
    }

    .header-content h1[b-mufzs1snjp] {
        font-size: 1.5rem;
    }

    .date-display[b-mufzs1snjp] {
        font-size: 0.875rem;
    }

    /* Even more compact stats on extra small */
    .stat-card[b-mufzs1snjp] {
        padding: 0.35rem 0.5rem;
    }

    .stat-value[b-mufzs1snjp] {
        font-size: 0.9rem;
    }

    .streak-value .fire-icon[b-mufzs1snjp],
    .stat-icon[b-mufzs1snjp] {
        font-size: 0.9rem;
    }

    .habit-streak[b-mufzs1snjp] {
        font-size: 0.7rem;
        padding: 0 0.2rem;
        gap: 0.15rem;
    }

    .habit-streak .fire-icon[b-mufzs1snjp] {
        font-size: 0.7rem;
    }

    .view-toggle-btn[b-mufzs1snjp] {
        font-size: 0.75rem;
        padding: 0.4rem 0.2rem;
    }

    .period-label[b-mufzs1snjp] {
        font-size: 0.85rem;
        min-width: 100px;
    }
}

/* Modal Overrides (inheriting basic structure but polishing) */
.modal-content[b-mufzs1snjp] {
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    border: 1px solid var(--border-light);
}

.color-option.selected[b-mufzs1snjp] {
    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-mufzs1snjp] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.layout-toggles[b-mufzs1snjp] {
    display: flex;
    background: var(--bg-primary);
    padding: 0.25rem;
    border-radius: 8px;
    gap: 0.25rem;
}

.layout-toggle-btn[b-mufzs1snjp] {
    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-mufzs1snjp] {
        color: var(--text-primary);
        background: var(--hover-bg);
    }
}

.layout-toggle-btn.active[b-mufzs1snjp] {
    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-mufzs1snjp] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .habits-card-grid[b-mufzs1snjp] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .habits-card-grid[b-mufzs1snjp] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Quick Add Section for Card View */
.quick-add-section[b-mufzs1snjp] {
    margin-top: 1.5rem;
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow);
}

/* Mobile Responsive for Layout Toggle */
@media (max-width: 768px) {
    .controls-left[b-mufzs1snjp] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        order: 1;
    }

    .layout-toggles[b-mufzs1snjp] {
        width: fit-content;
    }

    .controls-bar[b-mufzs1snjp] {
        flex-wrap: wrap;
    }

    .habits-card-grid[b-mufzs1snjp] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .habits-card-grid[b-mufzs1snjp] {
        grid-template-columns: 1fr;
    }
}

/* /Components/Pages/Home.razor.rz.scp.css */
/* Landing page styles adapted for HabitTracker with habit theme */
.landing-page[b-kqneee41vz] {
    /* Fill below the sticky 60px navbar */
    min-height: calc(100vh - 60px);
    background: var(--bg-primary);
}

/* Full-bleed so backgrounds span edge-to-edge despite article padding */
.full-bleed[b-kqneee41vz] { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* Hero Section */
.hero-section[b-kqneee41vz] {
    background: linear-gradient(135deg, #1a1b40 0%, #2d3561 50%, #3f51b5 100%);
    /* Viewport minus navbar height */
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
}

.hero-container[b-kqneee41vz] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.hero-content[b-kqneee41vz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    min-height: 80vh;
}

.hero-text[b-kqneee41vz] { color: white; }

.hero-title[b-kqneee41vz] {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.25rem;
    text-align: center;
}

.gradient-text[b-kqneee41vz] {
    background: linear-gradient(45deg, #ffffff 0%, #f0f4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle[b-kqneee41vz] {
    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-kqneee41vz] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}

.workout-buttons[b-kqneee41vz] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    max-width: 420px;
}

.btn-workout[b-kqneee41vz] {
    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-kqneee41vz]::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(92, 107, 192, 0.3), transparent);
    transition: left 0.5s ease;
}
@media (hover: hover) {
    .btn-workout:hover[b-kqneee41vz]::before { left: 100%; }
}

/* Sequential animation */
@keyframes buttonHighlight-b-kqneee41vz {
    0% { background: white; color: var(--accent-primary); transform: scale(1); }
    10% { background: #5c6bc0; color: white; transform: scale(1.05); }
    20% { background: #5c6bc0; 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-kqneee41vz] { animation: buttonHighlight-b-kqneee41vz 6s ease-in-out 0s infinite; }
.pull-btn[b-kqneee41vz] { animation: buttonHighlight-b-kqneee41vz 6s ease-in-out 2s infinite; }
.legs-btn[b-kqneee41vz] { animation: buttonHighlight-b-kqneee41vz 6s ease-in-out 4s infinite; }
@media (hover: hover) {
    .workout-buttons:hover .btn-workout[b-kqneee41vz] { animation: none !important; }
}
@media (hover: hover) {
    .btn-workout:hover[b-kqneee41vz] {
        background: #5c6bc0 !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-kqneee41vz] { display: flex; justify-content: center; align-items: center; overflow: visible; padding: 20px; }
.uncle-sam-container[b-kqneee41vz] {
    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-kqneee41vz] { transform: perspective(1000px) rotateY(-2deg) rotateX(2deg) scale(1.02); }
}
.uncle-sam-container:active[b-kqneee41vz] {
    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-kqneee41vz] { 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-kqneee41vz] { position: absolute; inset: 0; background: transparent; mix-blend-mode: multiply; }

/* Features Section */
.features-section[b-kqneee41vz] { padding: 6rem 0; background: var(--bg-primary); }
.container[b-kqneee41vz] { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.features-header[b-kqneee41vz] { text-align: center; margin-bottom: 4rem; }
.section-title[b-kqneee41vz] { font-size: 2.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.section-subtitle[b-kqneee41vz] { font-size: 1.1rem; color: var(--text-secondary); max-width: 640px; margin: 0 auto; }
.features-grid[b-kqneee41vz] { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.feature-card[b-kqneee41vz] { 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-kqneee41vz] { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(33, 37, 79, 0.25); }
}
.feature-icon[b-kqneee41vz] { 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-kqneee41vz] { font-size: 1.35rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.feature-card p[b-kqneee41vz] { color: var(--text-secondary); line-height: 1.6; }

/* CTA Section */
.cta-section[b-kqneee41vz] { background: linear-gradient(135deg, #1a1b40 0%, #2d3561 50%, #3f51b5 100%); padding: 5rem 0; text-align: center; }
.cta-content[b-kqneee41vz] { max-width: 800px; margin: 0 auto; }
.cta-title[b-kqneee41vz] { 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-kqneee41vz] { font-size: 1.1rem; color: rgba(255,255,255,0.9); margin-bottom: 2rem; }
.cta-actions[b-kqneee41vz] { display: flex; justify-content: center; gap: 1rem; }

/* Responsive - Tablet (Bootstrap lg breakpoint) */
@media (max-width: 992px) {
    .hero-content[b-kqneee41vz] { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
    .hero-title[b-kqneee41vz] { font-size: 2.5rem; }
    .uncle-sam-container[b-kqneee41vz] { max-width: 320px; }
    .features-grid[b-kqneee41vz] { grid-template-columns: 1fr; }
    .cta-actions[b-kqneee41vz] { flex-direction: column; align-items: center; }
}

/* Responsive - Mobile (Bootstrap md breakpoint) */
@media (max-width: 768px) {
    .hero-container[b-kqneee41vz] { padding: 0 1rem; }
    .hero-content[b-kqneee41vz] { min-height: 70vh; gap: 2rem; }
    .hero-title[b-kqneee41vz] { font-size: 2rem; }
    .hero-subtitle[b-kqneee41vz] { font-size: 1rem; }
    .btn-workout[b-kqneee41vz] { padding: 0.875rem 1.5rem; font-size: 0.95rem; }
    .features-section[b-kqneee41vz] { padding: 4rem 0; }
    .section-title[b-kqneee41vz] { font-size: 1.75rem; }
    .feature-card[b-kqneee41vz] { padding: 1.5rem; }
    .cta-section[b-kqneee41vz] { padding: 3rem 0; }
    .cta-title[b-kqneee41vz] { font-size: 1.75rem; }
}

/* Responsive - Extra small (360px min supported) */
@media (max-width: 480px) {
    .hero-container[b-kqneee41vz] { padding: 0 0.75rem; }
    .hero-content[b-kqneee41vz] { min-height: 60vh; gap: 1.5rem; padding: 1rem 0; }
    .hero-title[b-kqneee41vz] { font-size: 1.75rem; margin-bottom: 1rem; }
    .hero-subtitle[b-kqneee41vz] { font-size: 0.9rem; margin-bottom: 1.5rem; }
    .workout-buttons[b-kqneee41vz] { max-width: 100%; }
    .btn-workout[b-kqneee41vz] { padding: 0.75rem 1rem; font-size: 0.875rem; border-radius: 8px; }
    .uncle-sam-container[b-kqneee41vz] { max-width: 260px; }
    .container[b-kqneee41vz] { padding: 0 0.75rem; }
    .features-section[b-kqneee41vz] { padding: 3rem 0; }
    .features-header[b-kqneee41vz] { margin-bottom: 2rem; }
    .section-title[b-kqneee41vz] { font-size: 1.5rem; }
    .section-subtitle[b-kqneee41vz] { font-size: 0.9rem; }
    .feature-card[b-kqneee41vz] { padding: 1.25rem; border-radius: 12px; }
    .feature-icon[b-kqneee41vz] { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 14px; }
    .feature-card h3[b-kqneee41vz] { font-size: 1.15rem; }
    .cta-section[b-kqneee41vz] { padding: 2.5rem 0; }
    .cta-title[b-kqneee41vz] { font-size: 1.5rem; }
    .cta-subtitle[b-kqneee41vz] { font-size: 0.95rem; }
}
/* /Components/Pages/Pomodoro.razor.rz.scp.css */
.pomodoro-page[b-n2nfyoemro] {
    display: flex;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem);
    background: radial-gradient(circle at top right, rgba(132, 140, 220, 0.16), transparent 55%), var(--bg-primary);
}

.pomodoro-card[b-n2nfyoemro] {
    width: min(1080px, 100%);
    background: var(--card-bg);
    border-radius: 32px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(118, 131, 185, 0.16);
    padding: clamp(2.25rem, 6vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    position: relative;
}

.task-context[b-n2nfyoemro] {
    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-n2nfyoemro] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.task-label[b-n2nfyoemro] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

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

.clear-task-btn[b-n2nfyoemro] {
    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-n2nfyoemro] {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger);
    }
}

.task-stats[b-n2nfyoemro] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.task-stats .pomodoro-count[b-n2nfyoemro] {
    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-n2nfyoemro] {
    position: absolute;
    top: clamp(2.25rem, 6vw, 4rem);
    right: clamp(2.25rem, 6vw, 4rem);
    display: flex;
    gap: 0.6rem;
}

/* Menu Wrapper - Modern Design */
.menu-wrapper[b-n2nfyoemro] {
    position: relative;
}

.action-btn[b-n2nfyoemro], .action-btn-info[b-n2nfyoemro] {
    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-n2nfyoemro], .action-btn.active[b-n2nfyoemro],
    .action-btn-info:hover[b-n2nfyoemro] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.action-btn:focus-visible[b-n2nfyoemro],
.action-btn-info:focus-visible[b-n2nfyoemro] {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.modern-dropdown[b-n2nfyoemro] {
    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-n2nfyoemro 0.2s ease-out;
}

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

.dropdown-section[b-n2nfyoemro] {
    padding: 0.75rem;
}

.section-label[b-n2nfyoemro] {
    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-n2nfyoemro] {
    height: 1px;
    background: var(--border-light);
    margin: 0.5rem 0;
}

.menu-setting-group[b-n2nfyoemro] {
    padding: 0.5rem 0;
}

.menu-setting-group label[b-n2nfyoemro] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.setting-row[b-n2nfyoemro] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.input-inline[b-n2nfyoemro] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-inline input[type="number"][b-n2nfyoemro] {
    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-n2nfyoemro]::-webkit-outer-spin-button,
.input-inline input[type="number"][b-n2nfyoemro]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.input-inline .unit[b-n2nfyoemro] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.range-slider[b-n2nfyoemro] {
    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-n2nfyoemro]::-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-n2nfyoemro]::-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-n2nfyoemro]::-webkit-slider-thumb:hover {
        transform: scale(1.2);
    }
}

.range-slider[b-n2nfyoemro]::-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-n2nfyoemro]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--accent-primary);
}

.range-slider[b-n2nfyoemro]::-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-n2nfyoemro]::-moz-range-thumb:hover {
        transform: scale(1.2);
    }
}

/* For Microsoft Edge and IE */
.range-slider[b-n2nfyoemro]::-ms-track {
    width: 100%;
    height: 6px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.range-slider[b-n2nfyoemro]::-ms-fill-lower {
    background: var(--accent-primary);
    border-radius: 3px;
}

.range-slider[b-n2nfyoemro]::-ms-fill-upper {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.range-slider[b-n2nfyoemro]::-ms-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: none;
}

.timer-style-selector-menu[b-n2nfyoemro] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.timer-style-option-menu[b-n2nfyoemro] {
    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-n2nfyoemro] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.timer-style-option-menu.active[b-n2nfyoemro] {
    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-menu[b-n2nfyoemro] {
    width: 32px;
    height: 32px;
    color: var(--text-primary);
}

.timer-style-option-menu.active .style-preview-menu[b-n2nfyoemro] {
    color: var(--accent-primary);
}

.timer-style-option-menu span[b-n2nfyoemro] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
}

.timer-style-option-menu.active span[b-n2nfyoemro] {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Premium Section Styles */
.menu-setting-group.premium-section[b-n2nfyoemro] {
    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-n2nfyoemro] {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #f59e0b;
    margin-bottom: 0.5rem;
}

.premium-section-label .bi-stars[b-n2nfyoemro] {
    font-size: 1rem;
}

.timer-style-selector-menu.premium-grid[b-n2nfyoemro] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.premium-badge[b-n2nfyoemro] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.75rem;
    line-height: 1;
}

.dropdown-action[b-n2nfyoemro] {
    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-n2nfyoemro] {
        background: var(--hover-bg);
    }
}

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

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

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

/* Toggle Switch */
.toggle-switch[b-n2nfyoemro] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    margin: 0;
}

.toggle-switch input[b-n2nfyoemro] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-n2nfyoemro] {
    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-n2nfyoemro]: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-n2nfyoemro] {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input:checked + .toggle-slider[b-n2nfyoemro]:before {
    transform: translateX(22px);
}

@media (hover: hover) {
    .toggle-slider:hover[b-n2nfyoemro] {
        opacity: 0.9;
    }
}

.setting-description[b-n2nfyoemro] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 0.25rem;
}

.pomodoro-body[b-n2nfyoemro] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.loading-timer[b-n2nfyoemro] {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 1rem;
}

.timer-wrapper[b-n2nfyoemro] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.timer-toggle[b-n2nfyoemro] {
    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-n2nfyoemro] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle:hover[b-n2nfyoemro] {
        border-color: rgba(92, 107, 192, 0.45);
        transform: translateY(-3px);
    }
}

@media (hover: hover) {
    .timer-toggle.cup-timer:hover[b-n2nfyoemro] {
        transform: scale(1.02);
        border: none;
    }
}

.timer-toggle:focus-visible[b-n2nfyoemro] {
    outline: 2px solid rgba(92, 107, 192, 0.55);
    outline-offset: 6px;
}

.session-panel[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
}

.session-progress-wrapper[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.session-progress-label[b-n2nfyoemro] {
    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-n2nfyoemro] {
    color: var(--accent-primary);
    font-size: 1rem;
    font-weight: 700;
}

.session-indicators[b-n2nfyoemro] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.session-indicator[b-n2nfyoemro] {
    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-n2nfyoemro] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(92, 107, 192, 0.2);
    }
}

.session-indicator.completed[b-n2nfyoemro] {
    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-n2nfyoemro] {
    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-n2nfyoemro 2s ease-in-out infinite;
}

@keyframes pulse-border-b-n2nfyoemro {
    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-n2nfyoemro] {
    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-n2nfyoemro] {
    background: rgba(16, 185, 129, 0.25);
}

.session-indicator.active .indicator-dot[b-n2nfyoemro] {
    background: rgba(99, 102, 241, 0.25);
}

.check-icon[b-n2nfyoemro] {
    color: #10b981;
    font-size: 1rem;
    font-weight: 700;
}

.indicator-pulse[b-n2nfyoemro] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: pulse-dot-b-n2nfyoemro 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-b-n2nfyoemro {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.7;
    }
}

.indicator-number[b-n2nfyoemro] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.session-indicator.completed .indicator-number[b-n2nfyoemro] {
    color: #10b981;
}

.session-indicator.active .indicator-number[b-n2nfyoemro] {
    color: var(--accent-primary);
}

.next-phase[b-n2nfyoemro] {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.96rem;
}

.progress-ring[b-n2nfyoemro] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
}

.progress-svg[b-n2nfyoemro] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-bg[b-n2nfyoemro] {
    fill: none;
    stroke: rgba(92, 107, 192, 0.12);
    stroke-width: clamp(16px, 3.6vw, 22px);
}

.progress-bar[b-n2nfyoemro] {
    fill: none;
    stroke-width: clamp(16px, 3.6vw, 22px);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.45s ease;
}

.timer-overlay[b-n2nfyoemro] {
    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;
}

.time-display[b-n2nfyoemro] {
    font-size: clamp(4.75rem, 10vw, 7.5rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    min-width: 8ch;
    display: inline-flex;
    justify-content: center;
    transition: font-size 0.3s ease;
}

.time-display.long-format[b-n2nfyoemro] {
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    letter-spacing: 0.08em;
}

.phase-label[b-n2nfyoemro] {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.36em;
}

.timer-actions[b-n2nfyoemro] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.5rem);
}

.action-button[b-n2nfyoemro] {
    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-n2nfyoemro] {
        background: rgba(92, 107, 192, 0.1);
        border-color: rgba(92, 107, 192, 0.5);
        transform: scale(1.1);
    }
}

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

.action-button:focus-visible[b-n2nfyoemro] {
    outline: 2px solid rgba(92, 107, 192, 0.55);
    outline-offset: 4px;
}

@media (hover: hover) {
    .complete-button:hover[b-n2nfyoemro] {
        background: rgba(16, 185, 129, 0.1);
        border-color: rgba(16, 185, 129, 0.5);
        color: #10b981;
    }
}

@media (hover: hover) {
    .reset-button:hover[b-n2nfyoemro] {
        background: rgba(239, 68, 68, 0.1);
        border-color: rgba(239, 68, 68, 0.5);
        color: #ef4444;
    }
}

.play-toggle[b-n2nfyoemro] {
    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-n2nfyoemro] {
        background: rgba(92, 107, 192, 0.1);
        border-color: rgba(92, 107, 192, 0.65);
        transform: translateY(-3px);
    }
}

.play-toggle:focus-visible[b-n2nfyoemro] {
    outline: 2px solid rgba(92, 107, 192, 0.55);
    outline-offset: 4px;
}

.modal-backdrop[b-n2nfyoemro] {
    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-n2nfyoemro] {
    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-n2nfyoemro] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-n2nfyoemro] {
    margin: 0;
    font-size: 1.6rem;
}

.icon-circle[b-n2nfyoemro] {
    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-n2nfyoemro] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.modal-body[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.setting-group[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.setting-group label[b-n2nfyoemro] {
    font-weight: 600;
}

.control-pair[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.control-pair input[type="number"][b-n2nfyoemro] {
    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-n2nfyoemro] {
    accent-color: var(--accent-secondary);
}

.modal-footer[b-n2nfyoemro] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.reset-defaults[b-n2nfyoemro] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.35rem 0;
}

.modal-actions[b-n2nfyoemro] {
    display: flex;
    gap: 0.75rem;
}

.btn-cancel[b-n2nfyoemro],
.btn-confirm[b-n2nfyoemro] {
    border: none;
    border-radius: 999px;
    padding: 0.65rem 1.9rem;
    font-weight: 600;
}

.btn-cancel[b-n2nfyoemro] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.btn-confirm[b-n2nfyoemro] {
    background: var(--accent-gradient);
    color: var(--accent-contrast);
    box-shadow: var(--accent-glow);
}

.info-modal[b-n2nfyoemro] {
    max-width: 650px;
    max-height: 85vh;
    overflow-y: auto;
}

.info-content[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.info-intro p[b-n2nfyoemro] {
    font-size: 1.05rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
}

.info-cycle h3[b-n2nfyoemro],
.info-tips h3[b-n2nfyoemro] {
    font-size: 1.15rem;
    color: var(--text-primary);
    margin: 0 0 1rem;
}

.cycle-steps[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cycle-step[b-n2nfyoemro] {
    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-n2nfyoemro] {
    border-left-color: #f59e0b;
}

.step-icon[b-n2nfyoemro] {
    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-n2nfyoemro] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.break-icon[b-n2nfyoemro] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.repeat-icon[b-n2nfyoemro] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.long-break-icon[b-n2nfyoemro] {
    background: linear-gradient(135deg, #ec4899, #be185d);
    color: white;
}

.step-content[b-n2nfyoemro] {
    flex: 1;
}

.step-content h4[b-n2nfyoemro] {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}

.step-duration[b-n2nfyoemro] {
    font-size: 0.9rem;
    color: var(--accent-primary);
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.step-content p:last-child[b-n2nfyoemro] {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.cycle-arrow[b-n2nfyoemro] {
    display: flex;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 1.2rem;
    opacity: 0.5;
}

.info-tips ul[b-n2nfyoemro] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-tips li[b-n2nfyoemro] {
    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-n2nfyoemro]::before {
    content: "•";
    color: var(--accent-primary);
    font-weight: bold;
    font-size: 1.2rem;
}

.info-tips li strong[b-n2nfyoemro] {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.info-modal .modal-footer[b-n2nfyoemro] {
    justify-content: flex-end;
}

.pomodoro-title-input[b-n2nfyoemro] {
    width: 100%;
    max-width: 500px;
}

.pomodoro-title-input .title-input[b-n2nfyoemro] {
    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-n2nfyoemro] {
    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-n2nfyoemro]::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.pomodoro-title-display[b-n2nfyoemro] {
    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-n2nfyoemro] {
    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) {
    .progress-ring[b-n2nfyoemro] {
        width: 280px;
        height: 280px;
    }

    .header-actions[b-n2nfyoemro] {
        top: 1.5rem;
        right: 1.5rem;
    }
}

body.dark-theme .next-phase[b-n2nfyoemro] {
    color: var(--text-secondary);
}

body.dark-theme .indicator-dot[b-n2nfyoemro] {
    background: rgba(255, 255, 255, 0.85);
}

/* Coffee Cup Timer Styles */
.cup-timer-container[b-n2nfyoemro] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-cup-svg[b-n2nfyoemro] {
    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-n2nfyoemro] {
    transition: all 0.6s ease-out;
}

.cup-time-text[b-n2nfyoemro] {
    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-n2nfyoemro] {
    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-n2nfyoemro] {
    animation: fadeInOut-b-n2nfyoemro 2s ease-in-out infinite;
}

.steam[b-n2nfyoemro] {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

.steam-1[b-n2nfyoemro] {
    animation: steam-rise-b-n2nfyoemro 3s ease-in-out infinite;
}

.steam-2[b-n2nfyoemro] {
    animation: steam-rise-b-n2nfyoemro 3s ease-in-out infinite 0.5s;
}

.steam-3[b-n2nfyoemro] {
    animation: steam-rise-b-n2nfyoemro 3s ease-in-out infinite 1s;
}

@keyframes steam-rise-b-n2nfyoemro {
    0% {
        stroke-dashoffset: 40;
        opacity: 0;
    }
    25% {
        opacity: 0.6;
    }
    75% {
        opacity: 0.3;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes fadeInOut-b-n2nfyoemro {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

/* Timer Style Selector in Settings */
.timer-style-selector[b-n2nfyoemro] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.timer-style-option[b-n2nfyoemro] {
    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-n2nfyoemro] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.timer-style-option.active[b-n2nfyoemro] {
    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-n2nfyoemro] {
    width: 40px;
    height: 40px;
    color: var(--text-primary);
}

.timer-style-option span[b-n2nfyoemro] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.timer-style-option.active span[b-n2nfyoemro] {
    color: var(--accent-primary);
    font-weight: 600;
}

/* Responsive adjustments for cup timer */
@media (max-width: 768px) {
    .cup-timer-container[b-n2nfyoemro] {
        width: clamp(280px, 90vw, 380px);
    }

    .cup-time-text[b-n2nfyoemro] {
        font-size: 56px;
    }

    .cup-phase-text[b-n2nfyoemro] {
        font-size: 18px;
    }
}

/* Premium Timer Skins Styles */

/* Premium lock indicator */
.timer-style-option-menu.premium-locked[b-n2nfyoemro] {
    position: relative;
    opacity: 0.7;
}

@media (hover: hover) {
    .timer-style-option-menu.premium-locked:hover[b-n2nfyoemro] {
        opacity: 0.85;
    }
}

/* Hourglass Timer Styles */
.hourglass-timer-container[b-n2nfyoemro] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hourglass-svg[b-n2nfyoemro] {
    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-n2nfyoemro],
.hourglass-sand-bottom[b-n2nfyoemro] {
    transition: all 0.5s ease-out;
}

.sand-stream[b-n2nfyoemro] {
    animation: streamFlow-b-n2nfyoemro 1s ease-in-out infinite;
}

@keyframes streamFlow-b-n2nfyoemro {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.3;
    }
}

.sand-particle[b-n2nfyoemro] {
    animation: particleFall-b-n2nfyoemro 1.2s ease-in infinite;
}

.sand-p1[b-n2nfyoemro] {
    animation-delay: 0s;
}

.sand-p2[b-n2nfyoemro] {
    animation-delay: 0.25s;
}

.sand-p3[b-n2nfyoemro] {
    animation-delay: 0.5s;
}

@keyframes particleFall-b-n2nfyoemro {
    0% {
        transform: translateY(-3px);
        opacity: 1;
    }
    100% {
        transform: translateY(8px);
        opacity: 0;
    }
}

.hourglass-time-text[b-n2nfyoemro],
.hourglass-phase-text[b-n2nfyoemro] {
    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-n2nfyoemro] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.hourglass-content[b-n2nfyoemro] {
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: 150px 150px;
}

.hourglass-content.recharging[b-n2nfyoemro] {
    transform: rotate(180deg);
}


/* Plant Timer Styles */
.plant-timer-container[b-n2nfyoemro] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant-svg[b-n2nfyoemro] {
    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-n2nfyoemro] {
    transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.plant-leaf[b-n2nfyoemro] {
    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-n2nfyoemro],
.plant-leaf-left-2[b-n2nfyoemro] {
    animation-delay: 0s;
}

.plant-leaf-right[b-n2nfyoemro],
.plant-leaf-right-2[b-n2nfyoemro] {
    animation-delay: 2s;
}

@keyframes leafSway-b-n2nfyoemro {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

.plant-flower[b-n2nfyoemro] {
    animation: flowerPulse-b-n2nfyoemro 3s ease-in-out infinite;
}

@keyframes flowerPulse-b-n2nfyoemro {
    0%, 100% {
        opacity: 0.9;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

.plant-time-text[b-n2nfyoemro],
.plant-phase-text[b-n2nfyoemro] {
    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-n2nfyoemro] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle.plant-timer:hover[b-n2nfyoemro] {
        transform: scale(1.02);
        border: none;
    }
}

/* Battery Timer Styles */
.battery-timer-container[b-n2nfyoemro] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.battery-svg[b-n2nfyoemro] {
    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-n2nfyoemro] {
    transition: all 0.6s ease-out;
}

.battery-lightning[b-n2nfyoemro] {
    animation: lightningPulse-b-n2nfyoemro 0.8s ease-in-out infinite;
}

@keyframes lightningPulse-b-n2nfyoemro {
    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-n2nfyoemro],
.battery-phase-text[b-n2nfyoemro] {
    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-n2nfyoemro] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle.battery-timer:hover[b-n2nfyoemro] {
        transform: scale(1.02);
        border: none;
    }
}

/* Moon Timer Styles */
.moon-timer-container[b-n2nfyoemro] {
    position: relative;
    width: clamp(320px, 55vw, 520px);
    height: clamp(320px, 55vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.moon-svg[b-n2nfyoemro] {
    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-n2nfyoemro] {
    transition: all 0.3s ease;
}

.moon-body[b-n2nfyoemro] {
    transition: all 0.3s ease;
}

.moon-shadow[b-n2nfyoemro] {
    transition: all 0.7s ease-out;
}

.moon-glow[b-n2nfyoemro] {
    /* Removed pulse animation to allow phase-based opacity */
}

@keyframes glowPulse-b-n2nfyoemro {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

.stars .star[b-n2nfyoemro] {
    animation: starTwinkle-b-n2nfyoemro 3s ease-in-out infinite;
}

.star-1[b-n2nfyoemro] { animation-delay: 0s; }
.star-2[b-n2nfyoemro] { animation-delay: 0.4s; }
.star-3[b-n2nfyoemro] { animation-delay: 0.8s; }
.star-4[b-n2nfyoemro] { animation-delay: 1.2s; }
.star-5[b-n2nfyoemro] { animation-delay: 1.6s; }
.star-6[b-n2nfyoemro] { animation-delay: 2s; }
.star-7[b-n2nfyoemro] { animation-delay: 2.4s; }
.star-8[b-n2nfyoemro] { animation-delay: 2.8s; }

@keyframes starTwinkle-b-n2nfyoemro {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

.moon-time-text[b-n2nfyoemro],
.moon-phase-text[b-n2nfyoemro] {
    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-n2nfyoemro] {
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

@media (hover: hover) {
    .timer-toggle.moon-timer:hover[b-n2nfyoemro] {
        transform: scale(1.02);
        border: none;
    }
}

/* Premium Modal Styles */
.premium-modal[b-n2nfyoemro] {
    max-width: 500px;
}

.premium-content[b-n2nfyoemro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.premium-icon[b-n2nfyoemro] {
    margin-bottom: 0.5rem;
}

.premium-message[b-n2nfyoemro] {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin: 0;
}

.premium-description[b-n2nfyoemro] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.premium-note[b-n2nfyoemro] {
    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-n2nfyoemro],
    .plant-timer-container[b-n2nfyoemro],
    .battery-timer-container[b-n2nfyoemro],
    .moon-timer-container[b-n2nfyoemro] {
        width: clamp(280px, 90vw, 380px);
        height: clamp(280px, 90vw, 380px);
    }

    .hourglass-time-text[b-n2nfyoemro],
    .plant-time-text[b-n2nfyoemro],
    .battery-time-text[b-n2nfyoemro],
    .moon-time-text[b-n2nfyoemro] {
        font-size: 32px;
    }

    .hourglass-phase-text[b-n2nfyoemro],
    .plant-phase-text[b-n2nfyoemro],
    .battery-phase-text[b-n2nfyoemro],
    .moon-phase-text[b-n2nfyoemro] {
        font-size: 10px;
    }
}

/* Extra small screens (360px min supported) */
@media (max-width: 480px) {
    .pomodoro-page[b-n2nfyoemro] {
        padding: 1rem 0.5rem;
    }

    .pomodoro-card[b-n2nfyoemro] {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .header-actions[b-n2nfyoemro] {
        top: 1rem;
        right: 1rem;
    }

    .action-btn[b-n2nfyoemro], .action-btn-info[b-n2nfyoemro] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .modern-dropdown[b-n2nfyoemro] {
        min-width: 280px;
        max-width: calc(100vw - 2rem);
        right: -0.5rem;
    }

    .progress-ring[b-n2nfyoemro] {
        width: 260px;
        height: 260px;
    }

    .time-display[b-n2nfyoemro] {
        font-size: 3.5rem;
        letter-spacing: 0.08em;
    }

    .time-display.long-format[b-n2nfyoemro] {
        font-size: 2.5rem;
    }

    .session-indicator[b-n2nfyoemro] {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .indicator-dot[b-n2nfyoemro] {
        width: 20px;
        height: 20px;
    }

    .play-toggle[b-n2nfyoemro] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }

    .action-button[b-n2nfyoemro] {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .task-context[b-n2nfyoemro] {
        padding: 0.75rem 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .task-info[b-n2nfyoemro] {
        flex-direction: column;
        align-items: center;
    }

    .pomodoro-title-input[b-n2nfyoemro],
    .pomodoro-title-display[b-n2nfyoemro] {
        max-width: 100%;
    }

    /* Premium timers on extra small screens */
    .cup-timer-container[b-n2nfyoemro],
    .hourglass-timer-container[b-n2nfyoemro],
    .plant-timer-container[b-n2nfyoemro],
    .battery-timer-container[b-n2nfyoemro],
    .moon-timer-container[b-n2nfyoemro] {
        width: 260px;
        height: 260px;
    }

    /* Settings modal full-screen */
    .settings-modal[b-n2nfyoemro],
    .info-modal[b-n2nfyoemro] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}
/* /Components/Pages/PomodoroHistory.razor.rz.scp.css */
.history-container[b-9pbzlwlkzm] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.history-header[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1a1b40);
}

.btn-back[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
        background: var(--accent-secondary, #3f51b5);
        transform: translateY(-1px);
    }
}

/* Stats Section */
.stats-section[b-9pbzlwlkzm] {
    margin-bottom: 3rem;
}

.section-title[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
}

.stat-icon[b-9pbzlwlkzm] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.stat-value[b-9pbzlwlkzm] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary, #5c6bc0);
    margin-bottom: 0.25rem;
}

.stat-label[b-9pbzlwlkzm] {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    font-weight: 600;
}

/* Sessions Section */
.sessions-section[b-9pbzlwlkzm] {
    margin-top: 3rem;
}

.sessions-list[b-9pbzlwlkzm] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.date-group[b-9pbzlwlkzm] {
    background: white;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 12px;
    overflow: hidden;
}

.date-header[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
    display: flex;
    flex-direction: column;
}

.session-card[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
    border-bottom: none;
}

@media (hover: hover) {
    .session-card:hover[b-9pbzlwlkzm] {
        background: var(--hover-bg, #f5f5f5);
    }
}

.session-card.completed[b-9pbzlwlkzm] {
    opacity: 1;
}

.session-card.interrupted[b-9pbzlwlkzm] {
    opacity: 0.7;
}

.session-icon[b-9pbzlwlkzm] {
    font-size: 2rem;
    min-width: 50px;
    text-align: center;
}

.session-details[b-9pbzlwlkzm] {
    flex: 1;
}

.session-type[b-9pbzlwlkzm] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #1a1b40);
    margin-bottom: 0.25rem;
}

.session-task[b-9pbzlwlkzm] {
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
    margin-bottom: 0.5rem;
}

.session-meta[b-9pbzlwlkzm] {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.session-meta .time[b-9pbzlwlkzm],
.session-meta .duration[b-9pbzlwlkzm] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.session-status[b-9pbzlwlkzm] {
    margin-left: auto;
}

.status-badge[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
    background: #d4edda;
    color: #155724;
}

.status-badge.interrupted[b-9pbzlwlkzm] {
    background: #f8d7da;
    color: #721c24;
}

.status-badge.pending[b-9pbzlwlkzm] {
    background: #fff3cd;
    color: #856404;
}

/* Empty State */
.empty-state[b-9pbzlwlkzm] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-9pbzlwlkzm] {
    font-size: 4rem;
    color: var(--border-color, #ddd);
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-9pbzlwlkzm] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-9pbzlwlkzm] {
    color: var(--text-secondary, #666);
    margin: 0 0 1.5rem 0;
}

.btn-primary[b-9pbzlwlkzm] {
    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-9pbzlwlkzm] {
        background: var(--accent-secondary, #3f51b5);
    }
}

/* Loading Spinner */
.spinner-border[b-9pbzlwlkzm] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-primary[b-9pbzlwlkzm] {
    color: var(--accent-primary, #5c6bc0) !important;
}

/* Dark Mode */
:global(.dark-theme) .history-container[b-9pbzlwlkzm] {
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #444;
    --card-bg: #2a2a3e;
    --hover-bg: #363650;
}

:global(.dark-theme) .stat-card[b-9pbzlwlkzm],
:global(.dark-theme) .date-group[b-9pbzlwlkzm],
:global(.dark-theme) .session-card[b-9pbzlwlkzm] {
    background: #1e1e2e;
}

:global(.dark-theme) .date-header[b-9pbzlwlkzm] {
    background: #2a2a3e;
}

@media (hover: hover) {
    :global(.dark-theme) .session-card:hover[b-9pbzlwlkzm] {
        background: #363650;
    }
}

:global(.dark-theme) .status-badge.completed[b-9pbzlwlkzm] {
    background: #1e4620;
    color: #7dffb3;
}

:global(.dark-theme) .status-badge.interrupted[b-9pbzlwlkzm] {
    background: #4a1c1c;
    color: #ff9999;
}

:global(.dark-theme) .status-badge.pending[b-9pbzlwlkzm] {
    background: #4a3c1c;
    color: #ffd699;
}

@media (max-width: 768px) {
    .history-container[b-9pbzlwlkzm] {
        padding: 1rem;
    }

    .stats-grid[b-9pbzlwlkzm] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .history-header[b-9pbzlwlkzm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .history-header h1[b-9pbzlwlkzm] {
        font-size: 1.5rem;
    }

    .section-title[b-9pbzlwlkzm] {
        font-size: 1.25rem;
    }

    .session-card[b-9pbzlwlkzm] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }

    .session-status[b-9pbzlwlkzm] {
        margin-left: 0;
        align-self: flex-start;
    }

    .session-meta[b-9pbzlwlkzm] {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .history-container[b-9pbzlwlkzm] {
        padding: 0.75rem;
    }

    .stats-grid[b-9pbzlwlkzm] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-9pbzlwlkzm] {
        padding: 1rem;
    }

    .stat-icon[b-9pbzlwlkzm] {
        font-size: 2rem;
    }

    .stat-value[b-9pbzlwlkzm] {
        font-size: 1.5rem;
    }

    .history-header h1[b-9pbzlwlkzm] {
        font-size: 1.25rem;
    }

    .btn-back[b-9pbzlwlkzm] {
        padding: 0.5rem 1rem;
        width: 100%;
        justify-content: center;
    }

    .date-header[b-9pbzlwlkzm] {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .session-card[b-9pbzlwlkzm] {
        padding: 0.75rem 1rem;
    }

    .session-icon[b-9pbzlwlkzm] {
        font-size: 1.5rem;
        min-width: 40px;
    }

    .session-type[b-9pbzlwlkzm] {
        font-size: 0.9rem;
    }

    .status-badge[b-9pbzlwlkzm] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
}
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
.privacy-container[b-c2574rpuil] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.privacy-header[b-c2574rpuil] {
    text-align: center;
    margin-bottom: 3rem;
}

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

.page-subtitle[b-c2574rpuil] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.privacy-content[b-c2574rpuil] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.privacy-section[b-c2574rpuil] {
    margin-bottom: 2.5rem;
}

.privacy-section:last-of-type[b-c2574rpuil] {
    margin-bottom: 0;
}

.privacy-section h2[b-c2574rpuil] {
    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-c2574rpuil] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

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

.privacy-section ul[b-c2574rpuil] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.privacy-section li[b-c2574rpuil] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.privacy-section a[b-c2574rpuil] {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

@media (hover: hover) {
    .privacy-section a:hover[b-c2574rpuil] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.privacy-section strong[b-c2574rpuil] {
    color: var(--text-primary);
    font-weight: 600;
}

.privacy-footer[b-c2574rpuil] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
    text-align: center;
}

.privacy-footer p[b-c2574rpuil] {
    font-size: 0.938rem;
    color: var(--text-secondary);
    font-style: italic;
}

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

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

    .privacy-content[b-c2574rpuil] {
        padding: 1.5rem;
    }

    .privacy-section h2[b-c2574rpuil] {
        font-size: 1.5rem;
    }

    .privacy-section h3[b-c2574rpuil] {
        font-size: 1.125rem;
    }
}

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

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

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

    .privacy-content[b-c2574rpuil] {
        padding: 1rem;
        border-radius: 12px;
    }

    .privacy-section h2[b-c2574rpuil] {
        font-size: 1.25rem;
    }

    .privacy-section h3[b-c2574rpuil] {
        font-size: 1rem;
    }

    .privacy-section p[b-c2574rpuil],
    .privacy-section li[b-c2574rpuil] {
        font-size: 0.9rem;
    }
}
/* /Components/Pages/TaskListShared.razor.rz.scp.css */
.shared-tasklist-container[b-i2e5okjmcd] {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

.loading-state[b-i2e5okjmcd],
.error-state[b-i2e5okjmcd] {
    text-align: center;
    padding: 4rem 2rem;
}

.loading-state h2[b-i2e5okjmcd],
.error-state h2[b-i2e5okjmcd] {
    margin: 1.5rem 0 0.5rem;
    font-size: 1.75rem;
    font-weight: 600;
}

.loading-state p[b-i2e5okjmcd],
.error-state p[b-i2e5okjmcd] {
    color: var(--text-secondary, #6b7280);
    margin-bottom: 2rem;
}

.error-message[b-i2e5okjmcd] {
    font-size: 1rem;
}

.tasklist-preview-card[b-i2e5okjmcd] {
    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-i2e5okjmcd] {
    height: 6px;
    width: 100%;
}

.tasklist-preview-content[b-i2e5okjmcd] {
    padding: 2rem;
}

.tasklist-preview-content h1[b-i2e5okjmcd] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #111827);
}

.tasklist-preview-description[b-i2e5okjmcd] {
    font-size: 1.125rem;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.tasklist-preview-meta[b-i2e5okjmcd] {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--bg-secondary, #f3f4f6);
    border-radius: 0.5rem;
}

.meta-item[b-i2e5okjmcd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary, #6b7280);
}

.meta-item .bi[b-i2e5okjmcd] {
    font-size: 1.25rem;
    color: var(--primary, #6366f1);
}

.preview-actions[b-i2e5okjmcd] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn-lg[b-i2e5okjmcd] {
    padding: 0.75rem 2rem;
    font-size: 1.125rem;
}

.btn[b-i2e5okjmcd] {
    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-i2e5okjmcd] {
    width: 1rem;
    height: 1rem;
    border-width: 0.125rem;
}

@media (max-width: 768px) {
    .shared-tasklist-container[b-i2e5okjmcd] {
        padding: 1rem;
    }

    .tasklist-preview-content[b-i2e5okjmcd] {
        padding: 1.5rem;
    }

    .tasklist-preview-content h1[b-i2e5okjmcd] {
        font-size: 1.5rem;
    }

    .preview-actions[b-i2e5okjmcd] {
        flex-direction: column;
    }
}
/* /Components/Pages/Tasks.razor.rz.scp.css */
/* Wrapper to capture clicks on margin areas for closing dropdowns */
.tasks-page-wrapper[b-tjg7c2szf3] {
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tasks-page-wrapper.kanban-active[b-tjg7c2szf3] {
    flex: 1;
    overflow: hidden;
}

.tasks-container[b-tjg7c2szf3] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
}

.kanban-active .tasks-container[b-tjg7c2szf3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.kanban-active .tasks-content[b-tjg7c2szf3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Tab scroll wrapper */
.task-list-tabs-wrapper[b-tjg7c2szf3] {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.tab-scroll-btn[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
}

/* Add margin for scroll buttons and floating add button when there's overflow */
.task-list-tabs-wrapper.has-overflow[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    margin-right: 80px; /* Space for right scroll button (40px) + floating add button (40px) */
}

@media (hover: hover) {
    .tab-scroll-btn:hover:not(.disabled)[b-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--text-primary);
        border-color: var(--text-secondary);
    }
}

.tab-scroll-btn:active:not(.disabled)[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: none;
}

.tab-scroll-left[b-tjg7c2szf3] {
    left: -40px;
}

.tab-scroll-right[b-tjg7c2szf3] {
    right: -40px;
}

.task-list-tabs[b-tjg7c2szf3] {
    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-tjg7c2szf3]::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.filter-tab[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: hover) {
    .filter-tab:hover[b-tjg7c2szf3] {
        color: var(--text-primary);
        background: var(--hover-bg, #f3f4f6);
    }
}

.filter-tab.active[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    padding-right: 0.5rem;
}

/* Tab wrapper for positioning dropdown */
.filter-tab-wrapper[b-tjg7c2szf3] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Three-dot menu button inside active tab */
.tab-menu-btn[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: rgba(99, 102, 241, 0.2);
        color: var(--accent-primary, #6366f1);
    }
}

.filter-tab.active .tab-menu-btn[b-tjg7c2szf3] {
    color: var(--primary-color, #6366f1);
}

@media (hover: hover) {
    .filter-tab.active .tab-menu-btn:hover[b-tjg7c2szf3] {
        background: rgba(99, 102, 241, 0.25);
    }
}

/* Tab dropdown menu - using fixed to escape overflow:hidden parent */
.tab-dropdown-menu[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.tab-dropdown-menu .dropdown-item.text-danger[b-tjg7c2szf3] {
    color: var(--danger, #ef4444);
}

@media (hover: hover) {
    .tab-dropdown-menu .dropdown-item.text-danger:hover[b-tjg7c2szf3] {
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Highlight tab when section is dragged over it */
.filter-tab.section-drop-target[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    cursor: grab;
}

.filter-tab-wrapper:active[b-tjg7c2szf3] {
    cursor: grabbing;
}

/* Tab wrapper being dragged - original element hidden */
.filter-tab-wrapper.tab-dragging[b-tjg7c2szf3] {
    opacity: 0 !important;
    pointer-events: none;
}

/* Prevent drop settle animation on the dragged tab wrapper */
.filter-tab-wrapper.tab-drop-settle[b-tjg7c2szf3] {
    transition: none !important;
}

/* Transition for sliding tab wrappers during drag */
.filter-tab-wrapper.tab-shifting[b-tjg7c2szf3] {
    transition: transform 0.2s ease;
}

.filter-tab-container[b-tjg7c2szf3] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.inline-edit-tab-input[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.tab-menu-container[b-tjg7c2szf3] {
    position: relative;
    display: flex;
    align-items: center;
}

.tab-menu-button[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg);
        color: var(--text-primary);
        opacity: 1;
    }
}


.dropdown-item[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    border-bottom: none;
}

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

.dropdown-item.text-danger[b-tjg7c2szf3] {
    color: #ef4444;
}

.text-muted[b-tjg7c2szf3] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.btn-danger[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: #dc2626;
    }
}

.btn-add-list[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    display: none;
}

/* Floating add button - shown only when tabs overflow */
.btn-add-list-floating[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
}

@media (hover: hover) {
    .btn-add-list-floating:hover[b-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
        border-color: var(--primary-color, #6366f1);
    }
}

.section-header[b-tjg7c2szf3] {
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.btn-share-list[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    /* Inherits from .btn-action-primary in app.css */
}

/* Secondary action button - outline style matching project theme */
.btn-action-secondary[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    transform: translateY(0);
    box-shadow: none;
}

.btn-plan-goal .bi-stars[b-tjg7c2szf3] {
    color: var(--primary-color, #6366f1);
}

.section-menu-container[b-tjg7c2szf3] {
    position: relative;
    display: flex;
    align-items: center;
}

.section-menu-button[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    transform: translateY(0);
    box-shadow: none;
}

.section-dropdown-menu[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    margin-bottom: 1rem;
}

.completed-section-header h3[b-tjg7c2szf3] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    margin: 0;
}

.completed-tasks-list[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Deadline Sections */
.deadline-section[b-tjg7c2szf3] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.deadline-section:last-of-type[b-tjg7c2szf3] {
    margin-bottom: 0;
}

.deadline-section-title[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    color: #ef4444;
}

.today-section .deadline-section-title[b-tjg7c2szf3] {
    color: #f59e0b;
}

.tomorrow-section .deadline-section-title[b-tjg7c2szf3] {
    color: #10b981;
}

.task-deadline-time[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.tasks-list[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-item-container[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.task-item-wrapper[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
}

.nested-subtasks[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    background: var(--warning-light, #fef3c7);
}

.task-card.completed[b-tjg7c2szf3] {
    opacity: 0.6;
}

.task-card.dragging[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    align-items: center;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.task-card-checkbox[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .task-card-checkbox[b-tjg7c2szf3] {
        opacity: 1;
        visibility: visible;
    }
}

.task-card-checkbox span[b-tjg7c2szf3] {
    border-radius: 3px;
}

@media (hover: hover) {
    .task-card-checkbox:hover[b-tjg7c2szf3] {
        color: var(--primary-color, #6366f1);
    }
}

.task-card-title[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        transform: translateX(1.375rem);
    }
}

.task-card-title.completed[b-tjg7c2szf3] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Task Card Metadata */
.task-card-meta[b-tjg7c2szf3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.6875rem;
    margin-top: 2px;
}

.task-card-meta .due-date[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: rgba(59, 130, 246, 0.1);
    }
}

.task-card-meta .due-date.overdue[b-tjg7c2szf3] {
    color: #ef4444;
}

.task-card-meta .due-date.due-today[b-tjg7c2szf3] {
    color: #f59e0b;
}

.task-card-meta .priority[b-tjg7c2szf3] {
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.task-card-meta .priority.priority-medium[b-tjg7c2szf3] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.task-card-meta .priority.priority-high[b-tjg7c2szf3] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.task-card-meta .priority.priority-critical[b-tjg7c2szf3] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-card-meta .subtasks[b-tjg7c2szf3] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

.task-card-meta .description-indicator[b-tjg7c2szf3] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

/* List view task card pickers (CalendarPicker and PriorityPicker) */
[b-tjg7c2szf3] .list-due-date-picker .calendar-picker-btn,
[b-tjg7c2szf3] .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-tjg7c2szf3] .list-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-tjg7c2szf3] .list-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-tjg7c2szf3] .list-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-tjg7c2szf3] .list-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-tjg7c2szf3] .list-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-tjg7c2szf3] .list-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-tjg7c2szf3] .list-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-tjg7c2szf3] .list-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.75rem;
}

@media (hover: hover) {
    [b-tjg7c2szf3] .list-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Ensure dropdown panels appear above other elements */
[b-tjg7c2szf3] .list-due-date-picker .calendar-picker-panel,
[b-tjg7c2szf3] .list-priority-picker .priority-picker-panel {
    z-index: 1000;
}

/* Task Card Actions (for list view) */
.task-card-actions[b-tjg7c2szf3] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
    padding-left: 0.5rem;
}

.task-card-actions button[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

@media (hover: hover) {
    .task-card-actions .btn-favorite:hover[b-tjg7c2szf3] {
        color: #fbbf24;
    }
}

.task-card-actions .btn-favorite .bi-star-fill[b-tjg7c2szf3] {
    color: #fbbf24;
}

@media (hover: hover) {
    .task-card-actions .btn-plan:hover[b-tjg7c2szf3] {
        color: #10b981;
    }
}

@media (hover: hover) {
    .task-card-actions .btn-edit:hover[b-tjg7c2szf3] {
        color: var(--primary-color, #6366f1);
    }
}

@media (hover: hover) {
    .task-card-actions .btn-delete:hover[b-tjg7c2szf3] {
        color: var(--danger-color, #ef4444);
    }
}

/* List View Layout - horizontal with actions */
.task-card.list-view[b-tjg7c2szf3] {
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
}

.task-card.list-view .task-card-content[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}


/* Legacy .task-item support - alias to .task-card */
.task-item[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    margin-bottom: 1rem;
}

.task-item.dragging[b-tjg7c2szf3] {
    opacity: 0.5;
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.drag-handle[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        opacity: 0.8;
    }
}

@media (hover: hover) {
    .drag-handle:hover[b-tjg7c2szf3] {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary-color, #6366f1);
        opacity: 1;
    }
}

.drag-handle:active[b-tjg7c2szf3] {
    cursor: grabbing;
    background: rgba(99, 102, 241, 0.15);
    opacity: 1;
}

.task-item.dragging .drag-handle[b-tjg7c2szf3] {
    opacity: 1;
    color: var(--primary-color, #6366f1);
}

.drop-zone[b-tjg7c2szf3] {
    height: 8px;
    margin: 0;
    transition: all 0.2s ease;
    position: relative;
    pointer-events: auto;
    border-radius: 4px;
}

.drop-zone-above[b-tjg7c2szf3],
.drop-zone-below[b-tjg7c2szf3] {
    height: 8px;
    margin: 0;
}

.nested-subtasks .drop-zone[b-tjg7c2szf3] {
    margin-left: 0;
}

@media (hover: hover) {
    .drop-zone:hover[b-tjg7c2szf3] {
        background: rgba(99, 102, 241, 0.05);
    }
}

.drop-zone.active[b-tjg7c2szf3] {
    height: 20px;
    margin: 4px 0;
    background: rgba(99, 102, 241, 0.15);
    border: 2px dashed var(--primary-color, #6366f1);
}

.drop-zone.active[b-tjg7c2szf3]::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-tjg7c2szf3] {
    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-tjg7c2szf3]::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-tjg7c2szf3] {
    background: var(--warning-light, #fef3c7);
}

.task-item.completed[b-tjg7c2szf3] {
    opacity: 0.6;
}

.task-item.completed .task-title[b-tjg7c2szf3] {
    text-decoration: line-through;
    color: var(--text-muted);
}

.task-checkbox[b-tjg7c2szf3] {
    font-size: 1.5rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.task-main-info[b-tjg7c2szf3] {
    flex: 1;
    min-width: 0;
}

.task-title-section[b-tjg7c2szf3] {
    flex: 1;
}

.task-title[b-tjg7c2szf3] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}

.task-description[b-tjg7c2szf3] {
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
}

.task-meta-inline[b-tjg7c2szf3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.task-priority[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.priority-high[b-tjg7c2szf3] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.priority-critical[b-tjg7c2szf3] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-due-date.overdue[b-tjg7c2szf3] {
    color: var(--danger-color, #ef4444);
    font-weight: 600;
}

.task-due-date.due-soon[b-tjg7c2szf3] {
    color: var(--warning-color, #f59e0b);
    font-weight: 600;
}

.task-actions[b-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.btn-favorite-task[b-tjg7c2szf3],
.btn-plan-task[b-tjg7c2szf3],
.btn-edit-task[b-tjg7c2szf3],
.btn-delete-task[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        color: #fbbf24;
        transform: scale(1.1);
    }
}

.btn-favorite-task .bi-star-fill[b-tjg7c2szf3] {
    color: #fbbf24;
}

@media (hover: hover) {
    .btn-plan-task:hover[b-tjg7c2szf3] {
        color: #10b981;
        transform: scale(1.1);
    }
}

@media (hover: hover) {
    .btn-edit-task:hover[b-tjg7c2szf3] {
        color: var(--primary-color, #6366f1);
        transform: scale(1.1);
    }
}

@media (hover: hover) {
    .btn-delete-task:hover[b-tjg7c2szf3] {
        color: var(--danger-color, #ef4444);
        transform: scale(1.1);
    }
}

.loading-container[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.loading-text[b-tjg7c2szf3] {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.empty-state[b-tjg7c2szf3] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.empty-icon[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.color-option[b-tjg7c2szf3] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

.custom-color-picker-wrapper[b-tjg7c2szf3] {
    position: relative;
    width: 40px;
    height: 40px;
}

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

.custom-color-button[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
        border-color: var(--text-primary);
        transform: scale(1.1);
    }
}

/* Modal Styles - Matches Habits page */
.modal-overlay[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title-row[b-tjg7c2szf3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.modal-task-checkbox[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        color: var(--primary-color, #6366f1);
    }
}

.modal-task-checkbox .bi-check-square-fill[b-tjg7c2szf3] {
    color: var(--success-color, #10b981);
}

.modal-header h3[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

.modal-title-editable.completed[b-tjg7c2szf3] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.modal-title-input[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.btn-close[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg);
    }
}

.modal-body[b-tjg7c2szf3] {
    padding: 1.5rem;
}

.form-group[b-tjg7c2szf3] {
    margin-bottom: 1.5rem;
}

.form-group label[b-tjg7c2szf3] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.modal-footer[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
}

.modal-footer-right[b-tjg7c2szf3] {
    display: flex;
    gap: 1rem;
}

.btn-primary[b-tjg7c2szf3], .btn-secondary[b-tjg7c2szf3] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

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

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

.form-input[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

textarea.form-input[b-tjg7c2szf3] {
    resize: vertical;
    font-family: inherit;
}

.modal-content-large[b-tjg7c2szf3] {
    max-width: 700px;
}

/* Task Detail Modal - Quick Edit Properties */
.task-properties-row[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.property-label[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.priority-btn[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
        border-color: var(--text-secondary);
    }
}

.priority-btn.active[b-tjg7c2szf3] {
    color: white;
    border-color: transparent;
}

.priority-btn.priority-low.active[b-tjg7c2szf3] {
    background: #6b7280;
}

.priority-btn.priority-medium.active[b-tjg7c2szf3] {
    background: #f59e0b;
}

.priority-btn.priority-high.active[b-tjg7c2szf3] {
    background: #ef4444;
}

.priority-btn.priority-critical.active[b-tjg7c2szf3] {
    background: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.due-date-picker[b-tjg7c2szf3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.due-date-picker .date-input[b-tjg7c2szf3] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    min-width: 140px;
    max-width: 160px;
}

.btn-clear-date[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: #fee2e2;
        border-color: #fecaca;
        color: #dc2626;
    }
}

/* Responsive adjustments for task properties */
@media (max-width: 480px) {
    .task-properties-row[b-tjg7c2szf3] {
        flex-direction: column;
        gap: 1rem;
    }

    .priority-button-group[b-tjg7c2szf3] {
        flex-wrap: wrap;
    }

    .priority-btn[b-tjg7c2szf3] {
        flex: 1;
        min-width: 70px;
        text-align: center;
    }
}

/* Batch Add Tasks Modal */
.batch-add-modal[b-tjg7c2szf3] {
    max-width: 500px;
}

.batch-task-preview[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.batch-task-more[b-tjg7c2szf3] {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Subtasks Section */
.subtasks-section[b-tjg7c2szf3] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.subtasks-header[b-tjg7c2szf3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.subtasks-header h4[b-tjg7c2szf3] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.add-subtask-row[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    width: 100%;
}

@media (hover: hover) {
    .add-subtask-row:hover .add-icon[b-tjg7c2szf3] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon[b-tjg7c2szf3] {
        opacity: 1;
    }
}

.add-subtask-form[b-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.subtask-input[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-subtask-actions[b-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
}

.subtasks-list[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subtask-item[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg);
    }
}

.subtask-item.completed[b-tjg7c2szf3] {
    opacity: 0.6;
}

.subtask-checkbox[b-tjg7c2szf3] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
}

@media (hover: hover) {
    .subtask-checkbox:hover[b-tjg7c2szf3] {
        color: var(--accent-primary);
    }
}

.subtask-title[b-tjg7c2szf3] {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.subtask-title.completed[b-tjg7c2szf3] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.btn-delete-subtask[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        opacity: 1;
    }
}

@media (hover: none) {
    .btn-delete-subtask[b-tjg7c2szf3] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .btn-delete-subtask:hover[b-tjg7c2szf3] {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
    }
}

.no-subtasks-message[b-tjg7c2szf3] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.task-checkbox[b-tjg7c2szf3] {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

@media (hover: hover) {
    .task-checkbox:hover[b-tjg7c2szf3] {
        color: var(--accent-primary);
    }
}

/* Nested Subtasks in Task List */
.task-item-container[b-tjg7c2szf3] {
    display: flex;
    flex-direction: column;
}

.nested-subtasks[b-tjg7c2szf3] {
    margin-left: 2.5rem;
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Plan button states */
.btn-plan-task.generating[b-tjg7c2szf3] {
    color: #10b981;
}

.btn-plan-task.plan-ready[b-tjg7c2szf3] {
    color: #10b981;
}

.btn-plan-task.plan-ready .bi-diagram-3-fill[b-tjg7c2szf3] {
    color: #10b981;
}

/* Ping animation for plan ready state */
.btn-plan-task.plan-ping[b-tjg7c2szf3] {
    position: relative;
    animation: pulse-icon-b-tjg7c2szf3 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-plan-task.plan-ping[b-tjg7c2szf3]::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-tjg7c2szf3 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes ping-ring-b-tjg7c2szf3 {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    75%, 100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes pulse-icon-b-tjg7c2szf3 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Synchronized spinner animation - use global keyframe to ensure all spinners animate in sync */
.spinner-border[b-tjg7c2szf3],
.spinner-border-sm[b-tjg7c2szf3] {
    animation: spinner-border-sync-b-tjg7c2szf3 0.75s linear infinite !important;
    animation-delay: 0s !important;
}

@keyframes spinner-border-sync-b-tjg7c2szf3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Layout Toggle in Modal */
.layout-toggle[b-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-secondary, #f3f4f6);
    padding: 0.25rem;
    border-radius: 8px;
}

.layout-option[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        color: var(--text-primary);
        background: var(--card-bg, white);
    }
}

.layout-option.active[b-tjg7c2szf3] {
    background: var(--card-bg, white);
    color: var(--primary-color, #6366f1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-text[b-tjg7c2szf3] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

/* Section-based Layout */
.section-group[b-tjg7c2szf3] {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-group:last-of-type[b-tjg7c2szf3] {
    margin-bottom: 0;
}

.section-title[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    border-left-color: #6b7280;
    color: #6b7280;
}

.in-progress-section .section-title[b-tjg7c2szf3] {
    border-left-color: #3b82f6;
    color: #3b82f6;
}

.completed-section .section-title[b-tjg7c2szf3] {
    border-left-color: #10b981;
    color: #10b981;
}

.custom-section .section-title[b-tjg7c2szf3] {
    color: var(--text-secondary);
}

/* View Type Toggle (Icon Buttons) */
.view-type-toggle[b-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
}

.view-type-option[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        border-color: var(--primary-color, #6366f1);
        color: var(--primary-color, #6366f1);
    }
}

.view-type-option.active[b-tjg7c2szf3] {
    border-color: var(--primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color, #6366f1);
}

/* Kanban Board Styles */
.kanban-board[b-tjg7c2szf3] {
    display: flex;
    gap: 1rem;
    overflow: auto hidden;
    padding: 0.5rem 2rem;
    flex: 1;
    min-height: 400px;
    align-items: flex-start;
    justify-content: safe center;
    /* Breakout to full viewport width while keeping tabs constrained */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
}

.kanban-column[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    cursor: grab;
}

.kanban-column[draggable="true"]:active[b-tjg7c2szf3] {
    cursor: grabbing;
}

/* Section being dragged - hide original since we show a floating clone via JS */
.kanban-column.section-dragging[b-tjg7c2szf3] {
    opacity: 0;
    pointer-events: none;
}

.kanban-column.wip-exceeded .kanban-column-header[b-tjg7c2szf3] {
    background: rgba(239, 68, 68, 0.1);
}

.kanban-column-header[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.column-title[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        color: var(--primary-color, #6366f1);
    }
}

.section-title-input[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-section-add[b-tjg7c2szf3],
.btn-section-menu[b-tjg7c2szf3] {
    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-tjg7c2szf3],
    .btn-section-menu:hover[b-tjg7c2szf3] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

@media (hover: hover) {
    .btn-section-add:hover[b-tjg7c2szf3] {
        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. */
.section-menu-wrapper .section-dropdown-menu[b-tjg7c2szf3] {
    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;
}

.section-dropdown-menu .dropdown-item[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.section-dropdown-menu .dropdown-item.text-danger[b-tjg7c2szf3] {
    color: #ef4444;
}

@media (hover: hover) {
    .section-dropdown-menu .dropdown-item.text-danger:hover[b-tjg7c2szf3] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.section-dropdown-menu .dropdown-divider[b-tjg7c2szf3] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Move to submenu */
.dropdown-item-with-submenu[b-tjg7c2szf3] {
    position: relative;
}

.dropdown-item-with-submenu .dropdown-item .bi-chevron-right[b-tjg7c2szf3] {
    font-size: 0.75rem;
    opacity: 0.6;
}

.move-to-submenu[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.submenu-search-input[b-tjg7c2szf3] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.submenu-search-input[b-tjg7c2szf3]::placeholder {
    color: var(--text-secondary);
}

.submenu-list[b-tjg7c2szf3] {
    max-height: 200px;
    overflow-y: auto;
}

.submenu-item[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.submenu-item.current[b-tjg7c2szf3] {
    color: var(--primary-color, #6366f1);
    font-weight: 500;
}

.submenu-item:disabled[b-tjg7c2szf3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submenu-item .bi-check[b-tjg7c2szf3] {
    color: var(--primary-color, #6366f1);
}

.column-count[b-tjg7c2szf3] {
    color: var(--text-muted, #9ca3af);
    font-size: 0.8125rem;
    font-weight: 400;
}

.column-count.over-limit[b-tjg7c2szf3] {
    color: #ef4444;
    font-weight: 600;
}

.kanban-column-body[b-tjg7c2szf3] {
    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-tjg7c2szf3]::-webkit-scrollbar {
    width: 6px;
}

.kanban-column-body[b-tjg7c2szf3]::-webkit-scrollbar-track {
    background: transparent;
}

.kanban-column-body[b-tjg7c2szf3]::-webkit-scrollbar-thumb {
    background: var(--border-color, #e5e7eb);
    border-radius: 3px;
}

.kanban-column-body[b-tjg7c2szf3]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary, #6b7280);
}

/* View More pagination button */
.kanban-view-more[b-tjg7c2szf3] {
    padding: 0.5rem;
    text-align: center;
}

.btn-view-more[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    padding: 0.75rem 0;
    text-align: center;
}

.list-view-more .btn-view-more[b-tjg7c2szf3] {
    width: auto;
    padding: 0.5rem 1.5rem;
}

/* Top Quick Add Row - always rendered for iOS keyboard focus */
.kanban-top-quick-add[b-tjg7c2szf3] {
    padding: 0 0.375rem;
}

/* Collapsed state - hidden until expanded via "+" button */
.kanban-top-quick-add[b-tjg7c2szf3]  .kanban-quick-add:not(.expanded) {
    display: none;
}

/* Expanded state - styled form with separator */
.kanban-top-quick-add[b-tjg7c2szf3]  .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-tjg7c2szf3]  .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-tjg7c2szf3] {
    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-tjg7c2szf3]  .kanban-quick-add {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.kanban-column-footer[b-tjg7c2szf3]  .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-tjg7c2szf3]  .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-tjg7c2szf3]  .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-tjg7c2szf3]  .kanban-quick-add .name-input-wrapper {
    width: 100%;
    flex: none;
}

/* Textarea fills the wrapper width and can grow */
.kanban-column-footer[b-tjg7c2szf3]  .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-tjg7c2szf3]  .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-tjg7c2szf3]  .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-tjg7c2szf3]  .kanban-quick-add .description-hint {
    display: none;
}

/* Description mode container in kanban */
.kanban-column-footer[b-tjg7c2szf3]  .kanban-quick-add .description-mode-container {
    padding: 0;
}

.kanban-column-footer[b-tjg7c2szf3]  .kanban-quick-add .description-mode-footer {
    flex-wrap: wrap;
    gap: 0.375rem;
}

.kanban-column-footer[b-tjg7c2szf3]  .kanban-quick-add .add-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.25rem;
    width: 100%;
}

.kanban-column-footer[b-tjg7c2szf3]  .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-tjg7c2szf3] {
    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-tjg7c2szf3]  .kanban-add-section {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}

.kanban-add-section-column[b-tjg7c2szf3]  .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-tjg7c2szf3]  .kanban-add-section .add-prompt:hover {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.kanban-add-section-column[b-tjg7c2szf3]  .kanban-add-section .add-form {
    flex-direction: column;
    padding: 0;
    width: 100%;
}

.kanban-add-section-column[b-tjg7c2szf3]  .kanban-add-section .name-input-wrapper {
    width: 100%;
}

.kanban-add-section-column[b-tjg7c2szf3]  .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-tjg7c2szf3]  .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-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.add-section-form[b-tjg7c2szf3] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.section-name-input[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    outline: none;
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-section-buttons[b-tjg7c2szf3] {
    display: flex;
    gap: 0.5rem;
}

.btn-save-section[b-tjg7c2szf3],
.btn-cancel-section[b-tjg7c2szf3] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-save-section[b-tjg7c2szf3] {
    background: var(--primary-color, #6366f1);
    color: white;
}

@media (hover: hover) {
    .btn-save-section:hover[b-tjg7c2szf3] {
        background: var(--primary-hover, #4f46e5);
    }
}

.btn-cancel-section[b-tjg7c2szf3] {
    background: var(--bg-tertiary, #e5e7eb);
    color: var(--text-secondary);
}

@media (hover: hover) {
    .btn-cancel-section:hover[b-tjg7c2szf3] {
        background: var(--border-color, #d1d5db);
    }
}

.btn-add-kanban-task[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--primary-color, #6366f1);
    }
}

.kanban-card[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
    cursor: grabbing;
}

/* Old HTML5 drag style - kept for backwards compatibility */
.kanban-card.dragging[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3],
.kanban-column-header[b-tjg7c2szf3],
.filter-tab-wrapper[b-tjg7c2szf3],
.section-title[b-tjg7c2szf3] {
    touch-action: pan-x pan-y;
}

/* Applied by JS when drag is active (after hold completes) */
.touch-drag-active[b-tjg7c2szf3] {
    touch-action: none !important;
}

.kanban-card.favorite[b-tjg7c2szf3] {
    background: var(--warning-light, #fef3c7);
}

/* Kanban card wrapper for drop indicators */
.kanban-card-wrapper[b-tjg7c2szf3] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Drop indicator line above/below cards */
.kanban-drop-indicator[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    height: 3px;
    margin: 2px 0;
    opacity: 1;
    transform: scaleX(1);
    animation: pulse-drop-indicator-b-tjg7c2szf3 1s ease-in-out infinite;
}

@keyframes pulse-drop-indicator-b-tjg7c2szf3 {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    border-color: var(--primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.08);
}

.kanban-card-header[b-tjg7c2szf3] {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.card-checkbox[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .card-checkbox[b-tjg7c2szf3] {
        opacity: 1;
        visibility: visible;
    }
}

.card-checkbox span[b-tjg7c2szf3] {
    border-radius: 3px;
}

@media (hover: hover) {
    .card-checkbox:hover[b-tjg7c2szf3] {
        color: var(--primary-color, #6366f1);
    }
}

.card-title[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        transform: translateX(1.375rem);
    }
}

.card-title.completed[b-tjg7c2szf3] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.kanban-card-meta[b-tjg7c2szf3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-top: 2px;
}

.card-due-date[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: rgba(59, 130, 246, 0.1);
    }
}

.card-due-date.overdue[b-tjg7c2szf3] {
    color: #ef4444;
}

@media (hover: hover) {
    .card-due-date.overdue:hover[b-tjg7c2szf3] {
        background: rgba(239, 68, 68, 0.1);
    }
}

.card-due-date.due-today[b-tjg7c2szf3] {
    color: #f59e0b;
}

@media (hover: hover) {
    .card-due-date.due-today:hover[b-tjg7c2szf3] {
        background: rgba(245, 158, 11, 0.1);
    }
}

/* Hidden date input for date picker */
.card-due-date input[type="date"][b-tjg7c2szf3] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

.card-priority[b-tjg7c2szf3] {
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.card-priority.priority-medium[b-tjg7c2szf3] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.card-priority.priority-high[b-tjg7c2szf3] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.card-priority.priority-critical[b-tjg7c2szf3] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.card-subtasks[b-tjg7c2szf3] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

.card-description-indicator[b-tjg7c2szf3] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

/* Card metadata pickers (CalendarPicker and PriorityPicker in Kanban cards) */
[b-tjg7c2szf3] .card-meta-picker {
    position: relative;
}

[b-tjg7c2szf3] .card-meta-picker .calendar-picker-btn,
[b-tjg7c2szf3] .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-tjg7c2szf3] .card-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-tjg7c2szf3] .card-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-tjg7c2szf3] .card-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-tjg7c2szf3] .card-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-tjg7c2szf3] .card-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-tjg7c2szf3] .card-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-tjg7c2szf3] .card-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-tjg7c2szf3] .card-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.6875rem;
}

@media (hover: hover) {
    [b-tjg7c2szf3] .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-tjg7c2szf3] .card-meta-picker .calendar-picker-panel,
[b-tjg7c2szf3] .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-tjg7c2szf3] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

.kanban-empty-placeholder .bi[b-tjg7c2szf3] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.kanban-empty-placeholder p[b-tjg7c2szf3] {
    margin: 0;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .kanban-column[b-tjg7c2szf3] {
        flex: 0 0 260px;
        min-width: 240px;
    }

}


/* Tab View Icons and Shared Indicator */
.tab-view-icon[b-tjg7c2szf3] {
    font-size: 0.875rem;
    opacity: 0.7;
}

.shared-indicator[b-tjg7c2szf3] {
    font-size: 0.75rem;
    color: var(--primary-color, #6366f1);
    opacity: 0.8;
}

/* Owner-only Settings Notice */
.owner-only-notice[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    color: #3b82f6;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Disabled Settings */
.disabled-setting[b-tjg7c2szf3] {
    opacity: 0.6;
    pointer-events: none;
}

.disabled-setting label[b-tjg7c2szf3] {
    color: var(--text-secondary);
}

.disabled-setting .form-input[b-tjg7c2szf3],
.disabled-setting .view-type-option[b-tjg7c2szf3],
.disabled-setting .layout-option[b-tjg7c2szf3],
.disabled-setting .color-option[b-tjg7c2szf3] {
    cursor: not-allowed;
    background: var(--bg-tertiary, #f3f4f6);
}

/* ==========================================
   List View Drag-and-Drop Styles
   ========================================== */

/* Section header draggable - make it grabable */
.section-title-draggable[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.03));
    }
}

.section-title-draggable:active[b-tjg7c2szf3] {
    cursor: grabbing;
}

/* Section group during drag - hidden since we show a floating clone */
.section-group.section-dragging[b-tjg7c2szf3] {
    opacity: 0;
    pointer-events: none;
}

/* Section group as drop target */
.section-group.drag-target[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* List view drop indicator - horizontal line between tasks */
.list-drop-indicator[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    height: 3px;
    margin: 4px 0;
    opacity: 1;
    transform: scaleX(1);
    animation: pulse-drop-indicator-b-tjg7c2szf3 1s ease-in-out infinite;
}

/* Task card list view dragging state */
.task-card.list-view.dragging[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    background: rgba(99, 102, 241, 0.03);
    border-radius: 8px;
}

/* List view section header with add button */
.section-header-row[b-tjg7c2szf3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.section-header-row .section-title[b-tjg7c2szf3] {
    flex: 1;
    margin: 0;
}

.list-section-add-btn[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        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-tjg7c2szf3] {
        opacity: 1;
    }
}

@media (hover: none) {
    .list-section-add-btn[b-tjg7c2szf3] {
        opacity: 1;
        visibility: visible;
    }
}

/* List view quick add row inside sections - always rendered for iOS keyboard focus */
.list-section-quick-add[b-tjg7c2szf3] {
    padding: 0 0.25rem;
}

/* Collapsed state - hidden until expanded via "+" button */
.list-section-quick-add[b-tjg7c2szf3]  .list-quick-add:not(.expanded) {
    display: none;
}

/* Expanded state */
.list-section-quick-add[b-tjg7c2szf3]  .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-tjg7c2szf3]  .list-quick-add.expanded .add-form {
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.list-section-quick-add[b-tjg7c2szf3]  .list-quick-add .name-input-wrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.list-section-quick-add[b-tjg7c2szf3]  .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-tjg7c2szf3]  .list-quick-add .quick-add-input:focus {
    outline: none;
}

.list-section-quick-add[b-tjg7c2szf3]  .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-tjg7c2szf3]  .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-tjg7c2szf3] {
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin-top: auto;
}

.kanban-completed-header[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
        color: var(--text-primary, #111827);
    }
}

.kanban-completed-label[b-tjg7c2szf3] {
    font-weight: 500;
}

.kanban-completed-count[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    opacity: 0.7;
    background: var(--bg-secondary, #f9fafb);
    cursor: pointer;
}

@media (hover: hover) {
    .kanban-card.completed:hover[b-tjg7c2szf3] {
        opacity: 0.85;
    }
}

/* Mobile responsiveness - Tasks page */
@media (max-width: 768px) {
    .tasks-container[b-tjg7c2szf3] {
        padding: 1rem;
    }

    .task-list-tabs-wrapper[b-tjg7c2szf3] {
        margin-bottom: 1rem;
    }

    .filter-tab[b-tjg7c2szf3] {
        padding: 0.5rem 1rem;
        max-width: 160px;
    }

    .section-header[b-tjg7c2szf3] {
        margin-top: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .btn-action-secondary[b-tjg7c2szf3],
    .btn-share-list[b-tjg7c2szf3] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .kanban-board[b-tjg7c2szf3] {
        padding: 0.75rem;
        left: 0;
        margin-left: 0;
        width: auto;
        position: relative;
        justify-content: flex-start;
        min-height: 350px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .tasks-container[b-tjg7c2szf3] {
        padding: 0.5rem;
    }

    .task-list-tabs-wrapper[b-tjg7c2szf3] {
        gap: 0.25rem;
    }

    .filter-tab[b-tjg7c2szf3] {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        max-width: 120px;
    }

    .btn-add-list[b-tjg7c2szf3] {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }

    .btn-add-list-floating[b-tjg7c2szf3] {
        width: 28px;
        height: 28px;
        right: -70px;
    }

    .task-list-tabs-wrapper.has-overflow[b-tjg7c2szf3] {
        margin-right: 35px; /* Floating add button only */
    }

    .task-list-tabs-wrapper.has-overflow:not(.at-end)[b-tjg7c2szf3] {
        margin-right: 70px;
    }

    .section-header[b-tjg7c2szf3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .section-header > *[b-tjg7c2szf3] {
        width: 100%;
        justify-content: center;
    }

    .btn-action-secondary[b-tjg7c2szf3],
    .btn-share-list[b-tjg7c2szf3],
    .section-menu-button[b-tjg7c2szf3] {
        width: 100%;
    }

    .kanban-board[b-tjg7c2szf3] {
        padding: 0.5rem;
        min-height: 300px;
    }

    .kanban-column[b-tjg7c2szf3] {
        flex: 0 0 240px;
        min-width: 220px;
        max-width: 260px;
    }

    .kanban-column-header[b-tjg7c2szf3] {
        padding: 0.5rem;
    }

    .column-title[b-tjg7c2szf3] {
        font-size: 0.8125rem;
    }

    .kanban-column-body[b-tjg7c2szf3] {
        padding: 0.25rem;
    }

    .kanban-card[b-tjg7c2szf3],
    .task-card[b-tjg7c2szf3] {
        padding: 4px 8px;
    }

    .card-title[b-tjg7c2szf3],
    .task-card-title[b-tjg7c2szf3] {
        font-size: 0.8125rem;
    }

    .kanban-add-section-column[b-tjg7c2szf3] {
        flex: 0 0 200px;
        min-width: 180px;
    }

    /* Modal styles on mobile */
    .modal-content[b-tjg7c2szf3] {
        max-width: 100%;
        margin: 0.5rem;
    }

    .modal-header[b-tjg7c2szf3] {
        padding: 1rem;
    }

    .modal-body[b-tjg7c2szf3] {
        padding: 1rem;
    }

    .modal-footer[b-tjg7c2szf3] {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer-left[b-tjg7c2szf3],
    .modal-footer-right[b-tjg7c2szf3] {
        width: 100%;
        justify-content: center;
    }

    /* Task actions always visible on touch devices */
    .task-card-checkbox[b-tjg7c2szf3],
    .card-checkbox[b-tjg7c2szf3] {
        opacity: 1;
        transition: none;
    }

    .task-card .task-card-title[b-tjg7c2szf3],
    .kanban-card .card-title[b-tjg7c2szf3] {
        transform: translateX(1.375rem);
    }

    /* Delete button always visible on mobile */
    .btn-delete-subtask[b-tjg7c2szf3] {
        opacity: 1;
    }
}

/* Task Action Menu (three-dot dropdown) */
.task-action-menu-container[b-tjg7c2szf3] {
    position: relative;
    display: inline-flex;
}

.btn-task-menu[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.task-action-dropdown[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.task-action-dropdown .dropdown-item.text-danger[b-tjg7c2szf3] {
    color: #ef4444;
}

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

.task-action-dropdown .dropdown-divider[b-tjg7c2szf3] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Favorite icon in dropdown */
.task-action-dropdown .favorite-icon[b-tjg7c2szf3] {
    color: #fbbf24;
}

/* Plan menu item states */
.task-action-dropdown .dropdown-item.generating[b-tjg7c2szf3] {
    opacity: 0.7;
}

.task-action-dropdown .dropdown-item.plan-ready[b-tjg7c2szf3] {
    color: #10b981;
}

.task-action-dropdown .dropdown-item.plan-ready .bi-diagram-3-fill[b-tjg7c2szf3] {
    color: #10b981;
}

/* Task List Badge (clickable pill - matches TaskDetailModal move-to-badge) */
.task-list-badge[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        color: var(--text-primary);
        background: var(--hover-bg, #e5e7eb);
        border-color: var(--accent-primary, #6366f1);
    }
}

.task-list-badge:focus[b-tjg7c2szf3] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.task-list-badge .bi-kanban[b-tjg7c2szf3],
.task-list-badge .bi-list-task[b-tjg7c2szf3] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.task-list-badge-text[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3],
.kanban-column-header.drag-hold-pending[b-tjg7c2szf3],
.section-title.drag-hold-pending[b-tjg7c2szf3],
.filter-tab-wrapper.drag-hold-pending[b-tjg7c2szf3] {
    /* Uses shared .drag-hold-pending styles */
}

.kanban-card.drag-hold-ready[b-tjg7c2szf3],
.kanban-column-header.drag-hold-ready[b-tjg7c2szf3],
.section-title.drag-hold-ready[b-tjg7c2szf3],
.filter-tab-wrapper.drag-hold-ready[b-tjg7c2szf3] {
    /* Uses shared .drag-hold-ready styles */
}

/* ==========================================
   Tag Filter Bar
   ========================================== */

/* Tag filter toggle button in tab bar */
.tab-bar-tag-toggle[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        border-color: #3788d8;
        color: var(--text-primary);
    }
}

.tab-bar-tag-toggle.active[b-tjg7c2szf3] {
    border-color: #3788d8;
    background: rgba(55, 136, 216, 0.08);
    color: #3788d8;
}

.tab-bar-tag-toggle.has-filters[b-tjg7c2szf3] {
    border-color: #3788d8;
    color: #3788d8;
}

.tab-bar-tag-badge[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3] {
    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-tjg7c2szf3]::-webkit-scrollbar {
    display: none;
}

/* Tag pill scroll buttons */
.tag-pill-scroll-btn[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        border-color: #3788d8;
        color: #3788d8;
        background: rgba(55, 136, 216, 0.05);
    }
}

.tag-filter-pills-wrapper.has-overflow .tag-pill-scroll-btn[b-tjg7c2szf3] {
    display: flex;
}

.tag-filter-pills-wrapper.has-overflow .tag-pill-scroll-btn.disabled[b-tjg7c2szf3] {
    display: none;
}

.tag-filter-pill[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
    display: inline-block;
}

@media (hover: hover) {
    .tag-filter-pill:hover[b-tjg7c2szf3] {
        border-color: var(--tag-color, #6366f1);
        background: rgba(99, 102, 241, 0.05);
    }
}

.tag-filter-pill.selected[b-tjg7c2szf3] {
    border-color: var(--tag-color, #6366f1);
    background: rgba(99, 102, 241, 0.1);
    color: var(--text-primary);
}

.tag-filter-pill .tag-color-dot[b-tjg7c2szf3] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-manage-btn[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        border-color: #3788d8;
        border-style: solid;
        color: #3788d8;
    }
}

.clear-tag-filters[b-tjg7c2szf3] {
    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-tjg7c2szf3] {
        color: #ef4444;
    }
}

/* Mobile responsive styles for tag filter bar */
@media (max-width: 576px) {
    .tab-bar-tag-toggle[b-tjg7c2szf3] {
        width: 32px;
        height: 32px;
    }

    .tag-filter-pills-wrapper[b-tjg7c2szf3] {
        gap: 0.375rem;
        padding: 0.375rem 0;
    }

    .tag-filter-pill[b-tjg7c2szf3] {
        padding: 0.3125rem 0.625rem;
        font-size: 0.75rem;
    }

    .tag-filter-pill-text[b-tjg7c2szf3] {
        max-width: 90px;
    }

    .tag-manage-btn[b-tjg7c2szf3] {
        width: 28px;
        height: 28px;
    }

    .tag-pill-scroll-btn[b-tjg7c2szf3] {
        display: none !important;
    }
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
.terms-container[b-lj5e5vp5cb] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.terms-header[b-lj5e5vp5cb] {
    text-align: center;
    margin-bottom: 3rem;
}

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

.page-subtitle[b-lj5e5vp5cb] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.terms-content[b-lj5e5vp5cb] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.terms-section[b-lj5e5vp5cb] {
    margin-bottom: 2.5rem;
}

.terms-section:last-of-type[b-lj5e5vp5cb] {
    margin-bottom: 0;
}

.intro-section[b-lj5e5vp5cb] {
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 12px;
    border-left: 4px solid var(--accent-primary);
}

.terms-section h2[b-lj5e5vp5cb] {
    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-lj5e5vp5cb] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

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

.terms-section ul[b-lj5e5vp5cb] {
    margin: 1rem 0 1rem 1.5rem;
    padding: 0;
}

.terms-section li[b-lj5e5vp5cb] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.terms-section a[b-lj5e5vp5cb] {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

@media (hover: hover) {
    .terms-section a:hover[b-lj5e5vp5cb] {
        color: var(--accent-secondary);
        text-decoration: underline;
    }
}

.terms-section strong[b-lj5e5vp5cb] {
    color: var(--text-primary);
    font-weight: 600;
}

.important-notice[b-lj5e5vp5cb] {
    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-lj5e5vp5cb] {
    font-size: 1.5rem;
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.important-notice h3[b-lj5e5vp5cb] {
    color: #dc2626;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.important-notice p[b-lj5e5vp5cb] {
    color: var(--text-primary);
    font-size: 0.938rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.important-notice p:last-child[b-lj5e5vp5cb] {
    margin-bottom: 0;
}

.terms-footer[b-lj5e5vp5cb] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border-light);
    text-align: center;
}

.terms-footer p[b-lj5e5vp5cb] {
    font-size: 1rem;
    color: var(--text-primary);
}

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

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

    .terms-content[b-lj5e5vp5cb] {
        padding: 1.5rem;
    }

    .terms-section h2[b-lj5e5vp5cb] {
        font-size: 1.25rem;
    }

    .terms-section h3[b-lj5e5vp5cb] {
        font-size: 1.063rem;
    }

    .terms-section p[b-lj5e5vp5cb],
    .terms-section li[b-lj5e5vp5cb] {
        font-size: 0.938rem;
    }

    .important-notice[b-lj5e5vp5cb] {
        flex-direction: column;
        padding: 1.25rem;
    }

    .important-notice > span[b-lj5e5vp5cb] {
        font-size: 1.25rem;
    }
}

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

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

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

    .terms-content[b-lj5e5vp5cb] {
        padding: 1rem;
        border-radius: 12px;
    }

    .terms-section h2[b-lj5e5vp5cb] {
        font-size: 1.1rem;
    }

    .terms-section h3[b-lj5e5vp5cb] {
        font-size: 1rem;
    }

    .terms-section p[b-lj5e5vp5cb],
    .terms-section li[b-lj5e5vp5cb] {
        font-size: 0.875rem;
    }

    .important-notice[b-lj5e5vp5cb] {
        padding: 1rem;
    }

    .important-notice h3[b-lj5e5vp5cb] {
        font-size: 1rem;
    }

    .important-notice p[b-lj5e5vp5cb] {
        font-size: 0.875rem;
    }
}
/* /Components/Pages/Timeboxing.razor.rz.scp.css */
/* Timeboxing Page Styles */
.timeboxing-page[b-nuxggbo6gv] {
    min-height: calc(100vh - 60px);
    background: var(--bg-primary);
    padding: 2rem;
}

.timeboxing-container[b-nuxggbo6gv] {
    max-width: 1400px;
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 2rem;
    overflow: visible;
}

/* Main Content Grid - Flexbox Wrap for responsiveness */
.timeboxing-content[b-nuxggbo6gv] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

/* Wrappers to control flex behavior */
.tasks-wrapper[b-nuxggbo6gv] {
    flex: 1 1 350px; /* Grows, shrinks, basis 350px. Will wrap if container < ~350px*2 */
    min-width: 300px;
}

.grid-wrapper[b-nuxggbo6gv] {
    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-nuxggbo6gv] {
        padding: 0.5rem;
        min-height: calc(100vh - 50px);
    }

    .timeboxing-container[b-nuxggbo6gv] {
        padding: 1rem;
        border-radius: 0;
        box-shadow: none;
    }
    
    .timeboxing-content[b-nuxggbo6gv] {
        gap: 1rem;
    }

    /* Force full width on mobile */
    .tasks-wrapper[b-nuxggbo6gv], .grid-wrapper[b-nuxggbo6gv] {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Extra small screens (360px min supported) */
@media screen and (max-width: 480px) {
    .timeboxing-page[b-nuxggbo6gv] {
        padding: 0.25rem;
    }

    .timeboxing-container[b-nuxggbo6gv] {
        padding: 0.5rem;
        border-radius: 0;
    }

    .timeboxing-content[b-nuxggbo6gv] {
        gap: 0.75rem;
    }

    /* Allow horizontal scroll on very small screens if needed */
    .grid-wrapper[b-nuxggbo6gv] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Print Styles */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm 10mm; /* Slightly reduced margins */
    }

    *[b-nuxggbo6gv] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide nav and footer using their actual class names */
    .navbar-top[b-nuxggbo6gv],
    .app-footer[b-nuxggbo6gv],
    nav.navbar-top[b-nuxggbo6gv],
    footer.app-footer[b-nuxggbo6gv],
    .sidebar[b-nuxggbo6gv] {
        display: none !important;
    }

    /* Clean up page layout */
    body[b-nuxggbo6gv] {
        background: white;
        margin: 0;
        padding: 0;
    }

    .timeboxing-page[b-nuxggbo6gv] {
        padding: 0;
        background: white;
        min-height: 0;
        width: 100%;
    }

    .timeboxing-container[b-nuxggbo6gv] {
        box-shadow: none;
        padding: 0;
        max-width: 100%;
        width: 100%;
        border: none;
    }

    .timeboxing-content[b-nuxggbo6gv] {
        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-nuxggbo6gv] {
        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-nuxggbo6gv] {
        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-nuxggbo6gv] {
    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;
}

.task-option-row:last-child[b-nuxggbo6gv] {
    margin-bottom: 0;
}

.task-option-row.completed[b-nuxggbo6gv] {
    opacity: 0.6;
}

.task-option-row.completed .task-option-text[b-nuxggbo6gv] {
    text-decoration: line-through;
}

@media (hover: hover) {
    .task-option-row:hover[b-nuxggbo6gv] {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
    }
}

.task-option-checkbox[b-nuxggbo6gv] {
    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-nuxggbo6gv] {
        color: var(--accent-primary);
    }
}

.task-option-main[b-nuxggbo6gv] {
    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-nuxggbo6gv] {
    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-nuxggbo6gv] {
    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-nuxggbo6gv] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-weight: 600;
}

.task-option-due.due-today[b-nuxggbo6gv] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    font-weight: 600;
}

.task-option-due.due-tomorrow[b-nuxggbo6gv] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-weight: 600;
}

.task-option-actions[b-nuxggbo6gv] {
    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-nuxggbo6gv] {
        max-width: 200px;
    }
}

.btn-favorite-modal-task[b-nuxggbo6gv],
.btn-edit-modal-task[b-nuxggbo6gv],
.btn-delete-modal-task[b-nuxggbo6gv] {
    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-nuxggbo6gv] {
        color: #fbbf24;
        background: rgba(251, 191, 36, 0.1);
    }
}

.btn-favorite-modal-task .bi-star-fill[b-nuxggbo6gv] {
    color: #fbbf24;
}

@media (hover: hover) {
    .btn-edit-modal-task:hover[b-nuxggbo6gv] {
        color: var(--accent-primary);
        background: rgba(99, 102, 241, 0.1);
    }
}

@media (hover: hover) {
    .btn-delete-modal-task:hover[b-nuxggbo6gv] {
        color: #ef4444;
        background: rgba(239, 68, 68, 0.1);
    }
}

/* Habit Modal Item Styles (used in ItemTemplate) */
.habit-option[b-nuxggbo6gv] {
    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-nuxggbo6gv] {
    margin-bottom: 0;
}

@media (hover: hover) {
    .habit-option:hover[b-nuxggbo6gv] {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
        transform: translateX(4px);
    }
}

.habit-color-indicator[b-nuxggbo6gv] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.habit-name[b-nuxggbo6gv] {
    flex: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    padding-right: 2rem;
}

.add-icon-overlay[b-nuxggbo6gv] {
    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-nuxggbo6gv] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon-overlay[b-nuxggbo6gv] {
        opacity: 1;
    }
}
/* /Components/Pages/TimeboxingComponents/AddItemModal.razor.rz.scp.css */
.modal-overlay[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-ljwbxc3z4w] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

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

.header-actions[b-ljwbxc3z4w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new-item[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
        background: var(--accent-secondary);
    }
}

.btn-close[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
        background: var(--hover-bg);
    }
}

.modal-body[b-ljwbxc3z4w] {
    padding: 1.5rem;
}

/* Search and Filter Styles */
.search-filter-bar[b-ljwbxc3z4w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.search-row[b-ljwbxc3z4w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-input-wrapper[b-ljwbxc3z4w] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.search-input-wrapper i[b-ljwbxc3z4w] {
    position: absolute;
    left: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.search-input[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    outline: none;
    border-color: var(--accent-primary);
}

.filter-controls[b-ljwbxc3z4w] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-select[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    outline: none;
    border-color: var(--accent-primary);
}

.btn-clear-filters[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

.btn-toggle-filters[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    background: var(--hover-bg);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

@media (hover: hover) {
    .btn-toggle-filters:hover[b-ljwbxc3z4w] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

/* Item List Styles */
.item-list[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Additional Sections */
.recently-completed-section[b-ljwbxc3z4w] {
    margin-top: 1rem;
    padding-top: 0;
}

.recently-completed-header[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
        background: var(--hover-bg);
    }
}

.recently-completed-list[b-ljwbxc3z4w] {
    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-ljwbxc3z4w] {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Color scheme support */
.modal-content[b-ljwbxc3z4w] {
    --modal-accent-color: var(--accent-primary);
}

/* When modal has accent color, apply it to interactive elements */
.modal-content[style*="--modal-accent-color"] .search-input:focus[b-ljwbxc3z4w] {
    border-color: var(--modal-accent-color);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.modal-content[style*="--modal-accent-color"] .filter-select:focus[b-ljwbxc3z4w] {
    border-color: var(--modal-accent-color);
}

@media (hover: hover) {
    .modal-content[style*="--modal-accent-color"] .btn-clear-filters:hover[b-ljwbxc3z4w] {
        color: var(--modal-accent-color);
        border-color: var(--modal-accent-color);
    }
}

.modal-content[style*="--modal-accent-color"] .btn-toggle-filters.active[b-ljwbxc3z4w] {
    color: var(--modal-accent-color);
    border-color: var(--modal-accent-color);
}

@media (hover: hover) {
    .modal-content[style*="--modal-accent-color"] .btn-toggle-filters:hover[b-ljwbxc3z4w] {
        color: var(--modal-accent-color);
        border-color: var(--modal-accent-color);
    }
}

/* Birthday modal specific styles */
.birthday-modal[b-ljwbxc3z4w] {
    max-width: 600px;
}

.birthday-modal[b-ljwbxc3z4w]  .quick-add-row {
    background: var(--input-bg);
    border: 1.5px solid var(--modal-accent-color, #ec4899);
    border-radius: 8px;
    cursor: default;
}

.birthday-modal[b-ljwbxc3z4w]  .add-prompt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary, #6c757d);
    font-size: 0.9rem;
    cursor: pointer;
}

.birthday-modal[b-ljwbxc3z4w]  .add-icon {
    color: var(--modal-accent-color, #ec4899);
    font-size: 1rem;
}

.birthday-modal[b-ljwbxc3z4w]  .quick-add-input:focus {
    outline: none;
    border-color: var(--modal-accent-color, #ec4899);
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.birthday-modal[b-ljwbxc3z4w]  .btn-primary {
    background: var(--modal-accent-color, #ec4899);
    border-color: var(--modal-accent-color, #ec4899);
}

@media (hover: hover) {
    .birthday-modal[b-ljwbxc3z4w]  .btn-primary:hover {
        background: #db2777;
        border-color: #db2777;
    }
}

/* Tablet layout adjustments */
@media (max-width: 768px) {
    .item-list[b-ljwbxc3z4w] {
        height: auto;
        min-height: 200px;
        max-height: none;
        flex: 1;
    }

    .filter-controls[b-ljwbxc3z4w] {
        flex-wrap: wrap;
    }

    .filter-select[b-ljwbxc3z4w] {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
}

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

    .modal-content[b-ljwbxc3z4w],
    .birthday-modal[b-ljwbxc3z4w] {
        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-ljwbxc3z4w] {
        flex-shrink: 0;
        padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem 1rem;
    }

    .modal-body[b-ljwbxc3z4w] {
        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-ljwbxc3z4w] {
        min-width: 48px;
        min-height: 48px;
        width: 48px;
        height: 48px;
    }

    .btn-clear-filters[b-ljwbxc3z4w],
    .btn-toggle-filters[b-ljwbxc3z4w] {
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .btn-new-item[b-ljwbxc3z4w] {
        min-height: 48px;
    }

    .search-input[b-ljwbxc3z4w],
    .filter-select[b-ljwbxc3z4w] {
        font-size: 16px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header[b-ljwbxc3z4w] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-header h3[b-ljwbxc3z4w] {
        font-size: 1.1rem;
        flex: 1 1 100%;
        order: 1;
    }

    .header-actions[b-ljwbxc3z4w] {
        order: 2;
        width: 100%;
        justify-content: space-between;
    }

    .btn-new-item[b-ljwbxc3z4w] {
        flex: 1;
        justify-content: center;
    }

    .modal-body[b-ljwbxc3z4w] {
        padding: 0.75rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    }

    .search-filter-bar[b-ljwbxc3z4w] {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .filter-controls[b-ljwbxc3z4w] {
        gap: 0.375rem;
    }

    .filter-select[b-ljwbxc3z4w] {
        flex: 1 1 100%;
        padding: 0.5rem;
    }

    .modal-section-title[b-ljwbxc3z4w] {
        font-size: 0.8rem;
    }

    .recently-completed-header[b-ljwbxc3z4w] {
        font-size: 0.8rem;
        padding: 0.375rem;
    }
}
/* /Components/Pages/TimeboxingComponents/TimeboxingGrid.razor.rz.scp.css */
/* TimeboxingGrid.razor.css */

/* Right Column - Timebox Schedule */
.timebox-column[b-n7f1wxsbn3] {
    display: flex;
    flex-direction: column;
}

.timebox-header[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
    border-right: none;
}

.timebox-header .time-spacer[b-n7f1wxsbn3] {
    background: transparent;
}

.timebox-grid-wrapper[b-n7f1wxsbn3] {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.timebox-grid[b-n7f1wxsbn3] {
    display: flex;
    flex-direction: column;
}

.timebox-row[b-n7f1wxsbn3] {
    display: grid;
    grid-template-columns: 40px 1fr 1fr;
    border-bottom: 1px solid var(--border-light);
}

.timebox-row:last-child[b-n7f1wxsbn3] {
    border-bottom: none;
}

.time-label[b-n7f1wxsbn3] {
    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;
}

/* Time Settings */
.time-settings[b-n7f1wxsbn3] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.time-settings label[b-n7f1wxsbn3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

.time-input[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    pointer-events: none;
}

.time-line[b-n7f1wxsbn3] {
    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-n7f1wxsbn3]::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-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.habit-option[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        background: var(--bg-secondary);
        border-color: var(--accent-primary);
        transform: translateX(4px);
    }
}

.habit-color-indicator[b-n7f1wxsbn3] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}

.close-modal-btn[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
    }
}

/* Delete Confirmation Modal Styles */
.modal-small[b-n7f1wxsbn3] {
    max-width: 400px;
}

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

.modal-header h3[b-n7f1wxsbn3] {
    margin: 0;
    color: var(--text-primary);
}

.btn-close[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        background: var(--hover-bg);
    }
}

.modal-body[b-n7f1wxsbn3] {
    padding: 1.5rem;
}

.modal-body p[b-n7f1wxsbn3] {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}

.text-secondary[b-n7f1wxsbn3] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

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

.btn-secondary[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        background: var(--hover-bg);
    }
}

.btn-danger[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        background: #dc2626;
    }
}

/* New Habit Button in Modal Header */
.header-actions[b-n7f1wxsbn3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new-habit[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        background: var(--accent-secondary);
    }
}

.btn-new-habit .me-1[b-n7f1wxsbn3] {
    margin-right: 0.25rem;
}

.add-habit-row-timeboxing[b-n7f1wxsbn3] {
    margin-top: 1rem;
}

/* Recently Completed Section */
.recently-completed-section[b-n7f1wxsbn3] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.recently-completed-header[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        background: var(--hover-bg);
    }
}

.recently-completed-list[b-n7f1wxsbn3] {
    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-n7f1wxsbn3] {
        order: 1;
    }
}

@media screen and (max-width: 768px) {
    .timebox-column[b-n7f1wxsbn3] {
        /* Disable horizontal scroll on mobile in favor of stacked view */
        overflow-x: visible;
    }

    .timebox-grid-wrapper[b-n7f1wxsbn3] {
        min-width: 0;
        border: none;
    }
    
    /* Stack the header to match the row layout */
    .timebox-header[b-n7f1wxsbn3] {
        display: none; /* Hide traditional header on mobile */
    }
    
    /* Stack slots vertically */
    .timebox-row[b-n7f1wxsbn3] {
        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-n7f1wxsbn3] {
        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-n7f1wxsbn3] { /* :00 slot */
        border-bottom: 1px dashed var(--border-light);
    }
}

/* Extra small screens (360px min supported) */
@media screen and (max-width: 480px) {
    .time-label[b-n7f1wxsbn3] {
        font-size: 0.75rem;
        padding: 0.25rem;
    }

    .timebox-row[b-n7f1wxsbn3] {
        grid-template-columns: 32px 1fr;
        margin-bottom: 0.25rem;
    }

    .time-badge[b-n7f1wxsbn3] {
        left: 36px;
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }

    /* Modal full-screen on mobile */
    .modal-content[b-n7f1wxsbn3] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

@media print {
    .current-time-indicator[b-n7f1wxsbn3],
    .time-settings[b-n7f1wxsbn3],
    .timebox-header[b-n7f1wxsbn3] {
        display: none !important;
    }
    
    .timebox-grid-wrapper[b-n7f1wxsbn3] {
        border: 1px solid #bbb !important;
        border-bottom: none !important; /* Avoid double border at bottom */
        overflow: visible !important;
        border-radius: 0 !important;
    }

    .timebox-grid[b-n7f1wxsbn3] {
        gap: 0 !important;
        display: block !important; /* Ensure no flex/grid gap issues */
    }

    .timebox-row[b-n7f1wxsbn3] {
        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-n7f1wxsbn3] {
        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-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
    flex: 1;
    min-width: 200px;
}

.title-wrapper[b-y2ewl6qv7q] {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.modern-title-input[b-y2ewl6qv7q] {
    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-y2ewl6qv7q]::placeholder {
    color: var(--border-color);
    font-weight: 500;
}

.title-underline[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
        background: var(--border-light);
    }
}

.modern-title-input:focus + .title-underline[b-y2ewl6qv7q] {
    background: var(--accent-primary);
    height: 2px;
}

/* Middle: Events */
.header-middle-section[b-y2ewl6qv7q] {
    flex-shrink: 0;
    overflow: visible;
}

.events-row[b-y2ewl6qv7q] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    overflow: visible;
}

.event-pill[b-y2ewl6qv7q] {
    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);
}

@media (hover: hover) {
    .event-pill:hover[b-y2ewl6qv7q] {
        transform: translateY(-1px);
        background: var(--bg-tertiary);
    }
}

.event-pill .bi[b-y2ewl6qv7q] {
    font-size: 0.85rem;
}

/* Color variants - adapted for white background */
.event-pill.today[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

/* Save Indicator */
.save-indicator[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.save-indicator.saved[b-y2ewl6qv7q] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
    animation: fadeIn-b-y2ewl6qv7q 0.3s ease;
}

@keyframes fadeIn-b-y2ewl6qv7q {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

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

.save-indicator .spin[b-y2ewl6qv7q] {
    animation: spin-b-y2ewl6qv7q 1s linear infinite;
}

.save-text[b-y2ewl6qv7q] {
    white-space: nowrap;
}

/* Right: Date & Menu */
.header-right-section[b-y2ewl6qv7q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Date Navigator - Updated to match gemini-redesign structure */
.date-navigator[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
        background: var(--hover-bg);
        color: var(--accent-primary);
    }
}

.date-display-wrapper[b-y2ewl6qv7q] {
    position: relative;
    display: flex;
    align-items: baseline; /* Match gemini-redesign baseline alignment */
    gap: 0.4rem;
    padding: 0 0.5rem;
    cursor: pointer;
    user-select: none;
}

.day-name[b-y2ewl6qv7q] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    pointer-events: none; /* Allow clicks to pass through to hidden date input */
}

.date-full[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.today-btn[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
        color: var(--accent-primary);
    }
}

.today-btn.active[b-y2ewl6qv7q] {
    color: var(--accent-primary);
}

/* Menu - Settings Gear */
.menu-wrapper[b-y2ewl6qv7q] {
    position: relative;
}

.action-btn[b-y2ewl6qv7q] {
    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-y2ewl6qv7q], .action-btn.active[b-y2ewl6qv7q] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
    }
}

/* Dropdown & Tooltips (Reused) */
.modern-dropdown[b-y2ewl6qv7q] {
    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-y2ewl6qv7q 0.2s ease-out;
}

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

.dropdown-section[b-y2ewl6qv7q] { padding: 0.75rem; }
.section-label[b-y2ewl6qv7q] { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; margin-bottom: 0.5rem; }
.time-range-inputs[b-y2ewl6qv7q] { display: flex; gap: 0.75rem; }
.time-input-group[b-y2ewl6qv7q] { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.time-input-group label[b-y2ewl6qv7q] { font-size: 0.75rem; color: var(--text-secondary); }
.time-input-group input[b-y2ewl6qv7q] { width: 100%; padding: 0.4rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--input-bg); color: var(--text-primary); font-size: 0.9rem; text-align: center; }
.dropdown-divider[b-y2ewl6qv7q] { height: 1px; background: var(--border-light); margin: 0.5rem 0; }
.dropdown-action[b-y2ewl6qv7q] { 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-y2ewl6qv7q] { background: var(--hover-bg); }
}
.dropdown-action.text-danger[b-y2ewl6qv7q] { color: var(--danger); }
@media (hover: hover) {
    .dropdown-action.text-danger:hover[b-y2ewl6qv7q] { background: rgba(239, 68, 68, 0.1); }
}

/* Tooltips */
.event-tooltip[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
        opacity: 1;
        visibility: visible;
    }
}

.tooltip-header[b-y2ewl6qv7q] { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* Compact inline layout */
.tooltip-item-compact[b-y2ewl6qv7q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}
.tooltip-item-compact:last-child[b-y2ewl6qv7q] { margin-bottom: 0; }
.tooltip-color[b-y2ewl6qv7q] {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}
.tooltip-title-compact[b-y2ewl6qv7q] {
    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-y2ewl6qv7q] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
}

/* Legacy styles for backward compatibility */
.tooltip-item[b-y2ewl6qv7q] { display: flex; gap: 0.75rem; margin-bottom: 0.75rem; align-items: flex-start; }
.tooltip-item:last-child[b-y2ewl6qv7q] { margin-bottom: 0; }
.tooltip-details[b-y2ewl6qv7q] { display: flex; flex-direction: column; gap: 0.2rem; }
.tooltip-title[b-y2ewl6qv7q] { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.tooltip-time[b-y2ewl6qv7q], .tooltip-meta[b-y2ewl6qv7q] { font-size: 0.75rem; color: var(--text-secondary); }

/* Responsive */
@media (max-width: 992px) {
    .modern-timebox-header[b-y2ewl6qv7q] {
        flex-wrap: wrap;
        height: auto;
        gap: 1rem;
    }
    
    .header-left-section[b-y2ewl6qv7q] {
        order: 2;
        min-width: 100%;
    }
    
    .header-middle-section[b-y2ewl6qv7q] {
        order: 3;
        margin-left: 0;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .header-right-section[b-y2ewl6qv7q] {
        order: 1;
        width: 100%;
        justify-content: space-between;
    }

    .modern-title-input[b-y2ewl6qv7q] {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .modern-timebox-header[b-y2ewl6qv7q] {
        margin-bottom: 1rem;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .modern-title-input[b-y2ewl6qv7q] {
        font-size: 1.2rem;
    }

    .date-display-wrapper[b-y2ewl6qv7q] {
        padding: 0;
    }
    
    .date-full[b-y2ewl6qv7q] {
        font-size: 0.85rem;
    }
    
    .day-name[b-y2ewl6qv7q] {
        display: none; /* Save space */
    }
    
    .events-row[b-y2ewl6qv7q] {
        flex-wrap: nowrap;
    }
    
    /* Hide non-essential event info on very small screens */
    .pill-text[b-y2ewl6qv7q] {
        display: none;
    }
    
    .event-pill[b-y2ewl6qv7q] {
        padding: 0.4rem;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        justify-content: center;
    }
    
    .event-pill .bi[b-y2ewl6qv7q] {
        margin: 0;
    }
}

@media print {
    .modern-timebox-header[b-y2ewl6qv7q] {
        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-y2ewl6qv7q],
    .menu-wrapper[b-y2ewl6qv7q],
    .save-indicator[b-y2ewl6qv7q],
    .nav-btn[b-y2ewl6qv7q],
    .today-btn[b-y2ewl6qv7q],
    .hidden-date-input[b-y2ewl6qv7q] {
        display: none !important;
    }

    /* Title on Left */
    .header-left-section[b-y2ewl6qv7q] {
        order: 1;
        flex: 1;
        display: block !important;
    }

    /* Date on Right */
    .header-right-section[b-y2ewl6qv7q] {
        order: 2;
        display: flex !important;
        width: auto !important;
        justify-content: flex-end !important;
    }

    .date-navigator[b-y2ewl6qv7q] {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .date-display-wrapper[b-y2ewl6qv7q] {
        padding: 0 !important;
    }

    .day-name[b-y2ewl6qv7q], .date-full[b-y2ewl6qv7q] {
        color: black !important;
        font-size: 14pt !important; /* Larger for visibility */
    }
    
    .modern-title-input[b-y2ewl6qv7q] {
        font-size: 1.5rem;
        border-bottom: 2px solid #000 !important; /* Stronger line for print */
        color: black !important;
        width: 100%;
    }

    .modern-title-input[b-y2ewl6qv7q]::placeholder {
        color: transparent !important;
        opacity: 0;
    }
}
/* /Components/Pages/TimeboxingComponents/TimeboxingTaskColumn.razor.rz.scp.css */
/* TimeboxingTaskColumn.razor.css */

/* Left Column - Tasks */
.tasks-column[b-ddo76po5fs] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.task-section-header[b-ddo76po5fs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.task-section h3[b-ddo76po5fs],
.task-section-header h3[b-ddo76po5fs] {
    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 h3[b-ddo76po5fs] {
    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-ddo76po5fs] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-item[b-ddo76po5fs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    background: var(--bg-secondary);
}

/* Draggable task items */
.task-item[draggable="true"][b-ddo76po5fs] {
    cursor: grab;
}

.task-item[draggable="true"]:active[b-ddo76po5fs] {
    cursor: grabbing;
}

.task-item.dragging[b-ddo76po5fs] {
    opacity: 0.5;
    transform: scale(0.98);
}

.task-checkbox[b-ddo76po5fs] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.task-input[b-ddo76po5fs] {
    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-ddo76po5fs] {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Display text (non-editing mode) */
.task-text[b-ddo76po5fs] {
    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-ddo76po5fs] {
        color: var(--accent-primary, #6366f1);
    }
}

.task-text.completed[b-ddo76po5fs] {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Editing input (active edit mode) */
.task-input-editing[b-ddo76po5fs] {
    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-ddo76po5fs] {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    padding: 0.25rem;
    outline: none;
    min-width: 0;
}


.task-actions[b-ddo76po5fs] {
    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-ddo76po5fs] {
        max-width: 300px;
    }
}

.pomodoro-btn[b-ddo76po5fs] {
    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-ddo76po5fs] {
        background: var(--accent-primary);
        color: white;
        opacity: 1;
    }
}

.pomodoro-count[b-ddo76po5fs] {
    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-ddo76po5fs] {
    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-ddo76po5fs] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        opacity: 1;
    }
}

.remove-btn[b-ddo76po5fs] {
    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-ddo76po5fs] {
        opacity: 1;
    }
}

/* Add Task Quick Button (for empty slots) */
.add-task-quick-btn[b-ddo76po5fs] {
    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-ddo76po5fs] {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (hover: none) {
    .add-task-quick-btn[b-ddo76po5fs] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .add-task-quick-btn:hover[b-ddo76po5fs] {
        background: var(--hover-bg);
        color: var(--accent-primary);
        border-color: var(--accent-primary);
        transform: scale(1.05);
    }
}

.add-task-btn[b-ddo76po5fs] {
    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-ddo76po5fs] {
        background: var(--accent-primary);
        color: white;
        border-style: solid;
    }
}

/* Modern Header Add Button */
.add-task-btn-header[b-ddo76po5fs] {
    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-ddo76po5fs] {
        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 h3[b-ddo76po5fs] {
    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-ddo76po5fs] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-item[b-ddo76po5fs] {
    padding: 0.875rem;
    background: var(--input-bg);
    border-radius: 6px;
    border-left: 4px solid;
}

.event-item-header[b-ddo76po5fs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.event-item-title[b-ddo76po5fs] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.event-item-time[b-ddo76po5fs] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.event-item-description[b-ddo76po5fs] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Brain Dump */
.brain-dump-section[b-ddo76po5fs] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.brain-dump-textarea[b-ddo76po5fs] {
    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-ddo76po5fs] {
    outline: none;
    border-color: var(--border-color);
}

/* AI Button - matches btn-action-secondary style */
.btn-action-secondary[b-ddo76po5fs] {
    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-ddo76po5fs] {
        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-ddo76po5fs] {
    transform: translateY(0);
    box-shadow: none;
}

.btn-action-secondary .bi-stars[b-ddo76po5fs] {
    color: var(--primary-color, #6366f1);
}

/* Modal Styles */
.modal-overlay[b-ddo76po5fs] {
    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-ddo76po5fs] {
    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-ddo76po5fs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-ddo76po5fs] {
    margin: 0;
    color: var(--text-primary);
}

.btn-close[b-ddo76po5fs] {
    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-ddo76po5fs] {
        background: var(--hover-bg);
    }
}

.modal-body[b-ddo76po5fs] {
    padding: 1.5rem;
}

.btn-new-task[b-ddo76po5fs] {
    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-ddo76po5fs] {
        background: var(--accent-secondary);
    }
}

.btn-new-task .me-1[b-ddo76po5fs] {
    margin-right: 0.25rem;
}

.add-task-row-timeboxing[b-ddo76po5fs] {
    margin-top: 1rem;
}

/* Responsive */
@media screen and (max-width: 1200px) {
    .tasks-column[b-ddo76po5fs] {
        order: 0;
    }
}

@media screen and (max-width: 768px) {
    .task-item[b-ddo76po5fs] {
        flex-wrap: wrap;
        padding: 0.75rem;
    }

    .task-input[b-ddo76po5fs] {
        min-width: 200px; /* Force wrap if too narrow */
    }

    /* Make buttons larger for touch */
    .task-checkbox[b-ddo76po5fs],
    .remove-btn[b-ddo76po5fs],
    .pomodoro-btn[b-ddo76po5fs],
    .edit-task-btn[b-ddo76po5fs],
    .add-task-quick-btn[b-ddo76po5fs] {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Keep remove button visible on touch devices */
    .remove-btn[b-ddo76po5fs] {
        opacity: 1;
        color: var(--text-muted);
    }

    .pomodoro-btn[b-ddo76po5fs] {
        opacity: 1;
    }

    .edit-task-btn[b-ddo76po5fs] {
        opacity: 1;
    }
    
    .add-task-quick-btn[b-ddo76po5fs] {
        opacity: 1;
        pointer-events: auto;
    }

    /* Brain dump area */
    .brain-dump-textarea[b-ddo76po5fs] {
        min-height: 150px;
    }
}

/* Extra small screens (360px min supported) */
@media screen and (max-width: 480px) {
    .tasks-column[b-ddo76po5fs] {
        gap: 1rem;
    }

    .task-section-header[b-ddo76po5fs] {
        margin-bottom: 0.5rem;
    }

    .task-section h3[b-ddo76po5fs],
    .task-section-header h3[b-ddo76po5fs],
    .brain-dump-section h3[b-ddo76po5fs] {
        font-size: 0.8rem;
    }

    .task-item[b-ddo76po5fs] {
        padding: 0.5rem;
    }

    .task-input[b-ddo76po5fs],
    .task-text[b-ddo76po5fs] {
        font-size: 0.9rem;
        min-width: 120px;
    }

    /* Ensure buttons are always visible and touch-friendly */
    .task-actions[b-ddo76po5fs] {
        max-width: 200px;
    }

    .add-task-btn-header[b-ddo76po5fs] {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    /* Modal full-screen on mobile */
    .modal-content[b-ddo76po5fs] {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .modal-header[b-ddo76po5fs],
    .modal-body[b-ddo76po5fs] {
        padding: 1rem;
    }
}

@media print {
    .add-task-btn-header[b-ddo76po5fs],
    .remove-btn[b-ddo76po5fs],
    .pomodoro-btn[b-ddo76po5fs],
    .edit-task-btn[b-ddo76po5fs],
    .pomodoro-count[b-ddo76po5fs],
    .add-task-quick-btn[b-ddo76po5fs],
    .hide-on-print[b-ddo76po5fs] {
        display: none !important;
    }

    .task-section-header h3[b-ddo76po5fs],
    .brain-dump-section h3[b-ddo76po5fs] {
        font-size: 10pt;
        page-break-after: avoid;
        color: black !important;
        margin-bottom: 5px;
    }

    .task-list[b-ddo76po5fs] {
        gap: 0 !important; /* Remove gap, rely on borders */
    }

    .task-item[b-ddo76po5fs] {
        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-ddo76po5fs],
    .task-text[b-ddo76po5fs] {
        font-size: 10pt;
        color: black !important;
    }

    /* Ensure checkboxes are visible */
    .task-checkbox[b-ddo76po5fs] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        border: 1px solid #000;
        box-shadow: none !important;
    }

    .brain-dump-textarea[b-ddo76po5fs] {
        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-ddo76po5fs]::placeholder,
    .brain-dump-textarea[b-ddo76po5fs]::placeholder {
        color: transparent !important;
        opacity: 0;
    }
}
/* /Components/Pages/TimeboxingComponents/TimeSlot.razor.rz.scp.css */
/* TimeSlot.razor.css */

.time-slot[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
    justify-content: space-between;
}

@media (hover: hover) {
    .time-slot:hover[b-ykvaxjzitd] {
        background: var(--hover-bg);
    }
}

.time-slot.completed[b-ykvaxjzitd]::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-ykvaxjzitd] {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    padding: 0;
    cursor: text;
    position: relative;
    z-index: 2;
    width: 100%;
    flex-shrink: 0;
    resize: none;
    overflow: hidden;
    min-height: 1.2em;
    line-height: 1.2em;
    font-family: inherit;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.time-slot.completed .time-slot-input[b-ykvaxjzitd] {
    opacity: 0.5;
    text-decoration: line-through;
}

.time-slot.drag-over[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
    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-ykvaxjzitd],
.time-slot.current-slot .badge[b-ykvaxjzitd] {
    position: relative;
    z-index: 2;
}

@media (hover: hover) {
    .time-slot.current-slot:hover[b-ykvaxjzitd] {
        background: var(--bg-secondary);
        border-color: rgba(59, 130, 246, 0.5);
    }
}

.slot-progress-bar[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
    background: var(--bg-tertiary);
    position: relative;
    opacity: 0.5;
}

.time-slot.past-slot[b-ykvaxjzitd]::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-ykvaxjzitd],
.time-slot.past-slot .badge[b-ykvaxjzitd] {
    position: relative;
    z-index: 2;
}

@media (hover: hover) {
    .time-slot.past-slot:hover[b-ykvaxjzitd] {
        opacity: 0.8;
    }
}

.checkmark-section[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
        background: rgba(0, 0, 0, 0.05);
    }
}

.time-slot.completed .checkmark-section[b-ykvaxjzitd]::after {
    content: '✓';
    font-size: 1.5rem;
    color: var(--success);
    font-weight: 700;
}

/* Badge Styles */
.slot-badges[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
    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;
}

.habit-badge[b-ykvaxjzitd] {
    /* Border and text color comes from inline style */
}

.task-badge[b-ykvaxjzitd] {
    border-color: #6b7280;
    color: #6b7280;
}

.badge-checkbox[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
        opacity: 1;
    }
}

@media (hover: none) {
    .badge-checkbox[b-ykvaxjzitd] {
        opacity: 1;
        visibility: visible;
    }
}

.badge-text[b-ykvaxjzitd] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    transition: all 0.2s;
}

@media (hover: hover) {
    .badge-text:hover[b-ykvaxjzitd] {
        opacity: 0.7;
    }
}

.badge-remove[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
        opacity: 1;
    }
}

@media (hover: none) {
    .badge-remove[b-ykvaxjzitd] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .badge-remove:hover[b-ykvaxjzitd] {
        background: rgba(0, 0, 0, 0.1);
    }
}

@media (hover: hover) {
    .badge:hover[b-ykvaxjzitd] {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
}

.badge-more-container[b-ykvaxjzitd] {
    position: relative;
    display: inline-flex;
    z-index: 101;
}

.more-badge[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
        background: var(--bg-tertiary);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.badge-dropdown[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
    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-ykvaxjzitd] {
    border-bottom: none;
}

@media (hover: hover) {
    .badge-dropdown-item:hover[b-ykvaxjzitd] {
        background: var(--hover-bg);
    }
}

.task-dropdown-item[b-ykvaxjzitd] {
    border-left: 3px solid #6b7280;
}

.badge-dropdown-text[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
        opacity: 0.7;
    }
}

/* Dropdown item controls - always visible */
.badge-dropdown-item .badge-checkbox[b-ykvaxjzitd] {
    opacity: 1;
}

.badge-dropdown-item .badge-remove[b-ykvaxjzitd] {
    opacity: 1;
    color: var(--text-primary);
}

/* Modern Add Habit Button */
.add-habit-btn[b-ykvaxjzitd] {
    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-ykvaxjzitd] {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (hover: none) {
    .add-habit-btn[b-ykvaxjzitd] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (hover: hover) {
    .add-habit-btn:hover[b-ykvaxjzitd] {
        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-ykvaxjzitd] {
    transform: translateY(-50%) scale(0.95);
}

/* Responsive */
@media screen and (max-width: 768px) {
    /* Reduce time slot min-height on mobile */
    .time-slot[b-ykvaxjzitd] {
        min-height: 50px;
        padding: 0.35rem;
    }
    
    /* Always show actions on mobile since there is no hover */
    .add-habit-btn[b-ykvaxjzitd] {
        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-ykvaxjzitd] {
        opacity: 1;
        width: 24px;
        height: 24px;
    }
    
    @media (hover: hover) {
    
        .badge:hover[b-ykvaxjzitd] {
            transform: none;
        }
    
    }
}

@media print {
    .checkmark-section[b-ykvaxjzitd],
    .slot-progress-bar[b-ykvaxjzitd],
    .add-habit-btn[b-ykvaxjzitd],
    .badge-remove[b-ykvaxjzitd],
    .more-badge[b-ykvaxjzitd],
    .badge-dropdown[b-ykvaxjzitd] {
        display: none !important;
    }

    /* Remove progress indicators */
    .time-slot.current-slot[b-ykvaxjzitd]::before,
    .time-slot.past-slot[b-ykvaxjzitd]::before,
    .slot-progress-bar[b-ykvaxjzitd] {
        display: none !important;
    }

    .time-slot.current-slot[b-ykvaxjzitd],
    .time-slot.past-slot[b-ykvaxjzitd] {
        background: transparent !important;
        opacity: 1 !important;
    }
    
    .time-slot[b-ykvaxjzitd] {
        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-ykvaxjzitd] {
        font-size: 9pt;
        color: black !important;
        min-height: auto !important;
    }

    .habit-badge[b-ykvaxjzitd],
    .task-badge[b-ykvaxjzitd] {
        font-size: 7pt;
        border: 1px solid #000 !important;
        color: black !important;
        padding: 1px 4px;
        background: white !important;
    }
    
    .habit-badge[b-ykvaxjzitd] {
        border-color: currentColor !important;
    }
}
/* /Components/Pages/TimeboxingHistory.razor.rz.scp.css */
.history-container[b-8ucvyzcy47] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.history-header[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #1a1b40);
}

.btn-back[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
        background: var(--accent-secondary, #3f51b5);
        transform: translateY(-1px);
    }
}

/* Progress Section */
.progress-section[b-8ucvyzcy47] {
    margin-bottom: 3rem;
}

.progress-heading[b-8ucvyzcy47] {
    margin-bottom: 1rem;
}

.progress-kicker[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.25rem 0 0 0;
}

/* Timebox Cards */
.timebox-card[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

.timebox-card-today[b-8ucvyzcy47] {
    border: 2px solid var(--accent-primary, #5c6bc0);
    cursor: pointer;
}

@media (hover: hover) {
    .timebox-card-today:hover[b-8ucvyzcy47] {
        box-shadow: 0 6px 20px rgba(92, 107, 192, 0.15);
    }
}

.timebox-card-info[b-8ucvyzcy47] {
    padding: 1.5rem;
}

.timebox-card-info h3[b-8ucvyzcy47] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.timebox-meta[b-8ucvyzcy47] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: var(--text-secondary, #666);
}

.meta-item[b-8ucvyzcy47] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.timebox-card-actions[b-8ucvyzcy47] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.timebox-card-action[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
        background: var(--accent-secondary, #3f51b5);
    }
}

/* History List */
.section-title[b-8ucvyzcy47] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    display: flex;
    align-items: center;
}

.timeboxes-list[b-8ucvyzcy47] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.timebox-header[b-8ucvyzcy47] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

@media (hover: hover) {
    .timebox-header:hover[b-8ucvyzcy47] {
        background: var(--hover-bg, #f5f5f5);
    }
}

.timebox-info h3[b-8ucvyzcy47] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.expand-btn[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
        background: var(--hover-bg, #f5f5f5);
    }
}

/* Details */
.timebox-details[b-8ucvyzcy47] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color, #ddd);
}

.details-grid[b-8ucvyzcy47] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-top: 1.5rem;
}

.detail-column[b-8ucvyzcy47] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section h4[b-8ucvyzcy47] {
    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-8ucvyzcy47],
.timeslots-list[b-8ucvyzcy47] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-row[b-8ucvyzcy47],
.timeslot-row[b-8ucvyzcy47] {
    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-8ucvyzcy47],
.timeslot-row.completed .slot-text[b-8ucvyzcy47] {
    text-decoration: line-through;
    opacity: 0.6;
}

.task-text[b-8ucvyzcy47],
.slot-text[b-8ucvyzcy47] {
    flex: 1;
}

.time-label[b-8ucvyzcy47] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--accent-primary, #5c6bc0);
    min-width: 50px;
}

.brain-dump-display[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon[b-8ucvyzcy47] {
    font-size: 4rem;
    color: var(--border-color, #ddd);
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-8ucvyzcy47] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.empty-state p[b-8ucvyzcy47] {
    color: var(--text-secondary, #666);
    margin: 0 0 1.5rem 0;
}

.btn-primary[b-8ucvyzcy47] {
    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-8ucvyzcy47] {
        background: var(--accent-secondary, #3f51b5);
    }
}

/* Loading Spinner */
.spinner-border[b-8ucvyzcy47] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.text-primary[b-8ucvyzcy47] {
    color: var(--accent-primary, #5c6bc0) !important;
}

.text-success[b-8ucvyzcy47] {
    color: #28a745 !important;
}

.text-muted[b-8ucvyzcy47] {
    color: #6c757d !important;
}

/* Dark Mode */
[data-bs-theme="dark"] .history-container[b-8ucvyzcy47] {
    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --border-color: #374151;
    --card-bg: #1f2937;
    --hover-bg: #374151;
}

[data-bs-theme="dark"] .history-header[b-8ucvyzcy47] {
    border-bottom: 2px solid #374151;
}

[data-bs-theme="dark"] .history-header h1[b-8ucvyzcy47] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .progress-heading h2[b-8ucvyzcy47],
[data-bs-theme="dark"] .section-title[b-8ucvyzcy47] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .timebox-card[b-8ucvyzcy47] {
    background: #1f2937;
    border-color: #374151;
}

[data-bs-theme="dark"] .timebox-card-today[b-8ucvyzcy47] {
    border: 2px solid #6366f1;
}

[data-bs-theme="dark"] .timebox-card-info h3[b-8ucvyzcy47],
[data-bs-theme="dark"] .timebox-info h3[b-8ucvyzcy47] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .timebox-meta[b-8ucvyzcy47] {
    color: #9ca3af;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .timebox-header:hover[b-8ucvyzcy47],
    [data-bs-theme="dark"] .expand-btn:hover[b-8ucvyzcy47] {
        background: #374151;
    }
}

[data-bs-theme="dark"] .timebox-details[b-8ucvyzcy47] {
    border-top-color: #374151;
}

[data-bs-theme="dark"] .detail-section h4[b-8ucvyzcy47] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .task-row[b-8ucvyzcy47],
[data-bs-theme="dark"] .timeslot-row[b-8ucvyzcy47],
[data-bs-theme="dark"] .brain-dump-display[b-8ucvyzcy47] {
    background: #111827;
    color: #f3f4f6;
}

[data-bs-theme="dark"] .task-text[b-8ucvyzcy47],
[data-bs-theme="dark"] .slot-text[b-8ucvyzcy47] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .empty-state h3[b-8ucvyzcy47] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .empty-state p[b-8ucvyzcy47] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .empty-icon[b-8ucvyzcy47] {
    color: #374151;
}

[data-bs-theme="dark"] .spinner-border[b-8ucvyzcy47] {
    border-color: #6366f1;
    border-right-color: transparent;
}

@media (max-width: 768px) {
    .history-container[b-8ucvyzcy47] {
        padding: 1rem;
    }

    .details-grid[b-8ucvyzcy47] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .history-header[b-8ucvyzcy47] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .history-header h1[b-8ucvyzcy47] {
        font-size: 1.5rem;
    }

    .section-title[b-8ucvyzcy47] {
        font-size: 1.25rem;
    }

    .timebox-header[b-8ucvyzcy47] {
        padding: 1rem;
    }

    .timebox-card-info[b-8ucvyzcy47] {
        padding: 1rem;
    }

    .timebox-card-actions[b-8ucvyzcy47] {
        padding: 0 1rem 1rem 1rem;
        flex-wrap: wrap;
    }

    .timebox-details[b-8ucvyzcy47] {
        padding: 0 1rem 1rem 1rem;
    }

    .timebox-meta[b-8ucvyzcy47] {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .history-container[b-8ucvyzcy47] {
        padding: 0.75rem;
    }

    .history-header h1[b-8ucvyzcy47] {
        font-size: 1.25rem;
    }

    .btn-back[b-8ucvyzcy47] {
        padding: 0.5rem 1rem;
        width: 100%;
        justify-content: center;
    }

    .section-title[b-8ucvyzcy47] {
        font-size: 1.1rem;
    }

    .progress-heading h2[b-8ucvyzcy47] {
        font-size: 1.25rem;
    }

    .timebox-card-info h3[b-8ucvyzcy47],
    .timebox-info h3[b-8ucvyzcy47] {
        font-size: 1rem;
    }

    .timebox-card-action[b-8ucvyzcy47] {
        flex: 1;
        justify-content: center;
        font-size: 0.875rem;
    }

    .task-row[b-8ucvyzcy47],
    .timeslot-row[b-8ucvyzcy47] {
        padding: 0.375rem;
        gap: 0.5rem;
    }

    .time-label[b-8ucvyzcy47] {
        font-size: 0.8rem;
        min-width: 45px;
    }

    .brain-dump-display[b-8ucvyzcy47] {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}
/* /Components/Shared/CountdownTimer.razor.rz.scp.css */
.countdown-container[b-b1dbeh9shu] {
    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-b1dbeh9shu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.countdown-icon[b-b1dbeh9shu] {
    font-size: 1.25rem;
    color: #5c6bc0;
}

.countdown-label[b-b1dbeh9shu] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.countdown-timer[b-b1dbeh9shu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.countdown-segment[b-b1dbeh9shu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.countdown-value[b-b1dbeh9shu] {
    font-size: 2rem;
    font-weight: 700;
    color: #5c6bc0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-unit[b-b1dbeh9shu] {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.countdown-separator[b-b1dbeh9shu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(92, 107, 192, 0.5);
    margin-bottom: 1rem;
}

.countdown-message[b-b1dbeh9shu] {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

@media (max-width: 480px) {
    .countdown-segment[b-b1dbeh9shu] {
        min-width: 45px;
    }

    .countdown-value[b-b1dbeh9shu] {
        font-size: 1.5rem;
    }

    .countdown-separator[b-b1dbeh9shu] {
        font-size: 1.25rem;
    }
}
/* /Components/Shared/EventListSidebar.razor.rz.scp.css */
.eventlist-sidebar[b-bn2zmj3brn] {
    width: 260px;
    min-width: 260px;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    border-radius: 8px 0 0 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header[b-bn2zmj3brn] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.sidebar-header h4[b-bn2zmj3brn] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.sidebar-content[b-bn2zmj3brn] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.sidebar-item[b-bn2zmj3brn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 1rem;
    transition: background 0.15s;
}

@media (hover: hover) {
    .sidebar-item:hover[b-bn2zmj3brn] {
        background: var(--hover-bg);
    }

    .sidebar-item:hover .sidebar-action-btn[b-bn2zmj3brn] {
        opacity: 1;
    }
}

.sidebar-checkbox[b-bn2zmj3brn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}

.sidebar-checkbox input[type="checkbox"][b-bn2zmj3brn] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-color-dot[b-bn2zmj3brn] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-item-name[b-bn2zmj3brn] {
    font-size: 0.875rem;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.member-count-badge[b-bn2zmj3brn] {
    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-bn2zmj3brn] {
    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-bn2zmj3brn] {
        opacity: 0.6;
    }
}

@media (hover: hover) {
    .sidebar-action-btn:hover[b-bn2zmj3brn] {
        color: var(--accent-primary);
        background: rgba(0, 0, 0, 0.05);
    }
}

.sidebar-divider[b-bn2zmj3brn] {
    height: 1px;
    background: var(--border-color);
    margin: 0.375rem 1rem;
}

.sidebar-footer[b-bn2zmj3brn] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
}

.btn-new-calendar[b-bn2zmj3brn] {
    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-bn2zmj3brn] {
        border-color: var(--accent-primary);
        color: var(--accent-primary);
        background: var(--hover-bg);
    }
}

/* Mobile overlay mode */
@media (max-width: 768px) {
    .eventlist-sidebar[b-bn2zmj3brn] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        z-index: 1040;
        border-radius: 0;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        animation: slideInLeft-b-bn2zmj3brn 0.25s ease-out;
    }

    @keyframes slideInLeft-b-bn2zmj3brn {
        from { transform: translateX(-100%); }
        to { transform: translateX(0); }
    }

    .sidebar-header[b-bn2zmj3brn] {
        padding-top: calc(1rem + env(safe-area-inset-top));
    }

    .sidebar-footer[b-bn2zmj3brn] {
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    }
}
/* /Components/Shared/ListSettingsModal.razor.rz.scp.css */
.modal-overlay[b-s9tp12uvbu] {
    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-s9tp12uvbu] {
    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-s9tp12uvbu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.modal-header h3[b-s9tp12uvbu] {
    margin: 0;
    color: var(--text-primary, #111827);
}

.btn-close[b-s9tp12uvbu] {
    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-s9tp12uvbu] {
        color: var(--text-primary, #111827);
    }
}

.modal-body[b-s9tp12uvbu] {
    padding: 1.5rem;
}

.modal-footer[b-s9tp12uvbu] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.form-group[b-s9tp12uvbu] {
    margin-bottom: 1.25rem;
}

.form-group label[b-s9tp12uvbu] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #111827);
}

.form-input[b-s9tp12uvbu] {
    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-s9tp12uvbu] {
    outline: none;
    border-color: var(--accent-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input:disabled[b-s9tp12uvbu] {
    background: var(--bg-secondary, #f3f4f6);
    cursor: not-allowed;
    opacity: 0.7;
}

.color-picker[b-s9tp12uvbu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.color-option[b-s9tp12uvbu] {
    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-s9tp12uvbu] {
        transform: scale(1.1);
    }
}

.color-option.selected[b-s9tp12uvbu] {
    border-color: var(--text-primary, #111827);
    box-shadow: 0 0 0 2px white inset;
}

.color-option.disabled[b-s9tp12uvbu] {
    cursor: not-allowed;
    opacity: 0.5;
}

.custom-color-picker-wrapper[b-s9tp12uvbu] {
    position: relative;
    width: 32px;
    height: 32px;
}

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

.custom-color-button[b-s9tp12uvbu] {
    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-s9tp12uvbu],
.layout-toggle[b-s9tp12uvbu] {
    display: flex;
    gap: 0.5rem;
}

.view-type-option[b-s9tp12uvbu],
.layout-option[b-s9tp12uvbu] {
    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-s9tp12uvbu],
    .layout-option:hover[b-s9tp12uvbu] {
        border-color: var(--accent-color, #6366f1);
        color: var(--accent-color, #6366f1);
    }
}

.view-type-option.active[b-s9tp12uvbu],
.layout-option.active[b-s9tp12uvbu] {
    background: var(--accent-color, #6366f1);
    border-color: var(--accent-color, #6366f1);
    color: white;
}

.view-type-option.disabled[b-s9tp12uvbu],
.layout-option.disabled[b-s9tp12uvbu] {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-secondary[b-s9tp12uvbu] {
    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-s9tp12uvbu] {
        background: var(--bg-secondary, #f3f4f6);
    }
}

.btn-primary[b-s9tp12uvbu] {
    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-s9tp12uvbu] {
        background: var(--accent-color-hover, #4f46e5);
    }
}

.form-text[b-s9tp12uvbu] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.text-muted[b-s9tp12uvbu] {
    color: var(--text-secondary, #6b7280);
}

.owner-only-notice[b-s9tp12uvbu] {
    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-s9tp12uvbu] {
    opacity: 0.6;
}

.disabled-setting label[b-s9tp12uvbu] {
    color: var(--text-secondary, #6b7280);
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-s9tp12uvbu] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-s9tp12uvbu] {
        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-s9tp12uvbu] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

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

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

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

    .view-type-toggle[b-s9tp12uvbu],
    .layout-toggle[b-s9tp12uvbu] {
        flex-wrap: wrap;
    }

    .view-type-option[b-s9tp12uvbu],
    .layout-option[b-s9tp12uvbu] {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-s9tp12uvbu] {
        font-size: 1.1rem;
    }

    .modal-footer[b-s9tp12uvbu] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn-primary[b-s9tp12uvbu],
    .modal-footer .btn-secondary[b-s9tp12uvbu] {
        width: 100%;
        justify-content: center;
    }

    .view-type-option[b-s9tp12uvbu],
    .layout-option[b-s9tp12uvbu] {
        flex: 1 1 100%;
    }

    .color-picker[b-s9tp12uvbu] {
        justify-content: center;
    }
}
/* /Components/Shared/NewHabitModal.razor.rz.scp.css */
.modal-overlay[b-uhts8iwpty] {
    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-uhts8iwpty 0.2s ease-out;
    overscroll-behavior: contain;
}

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

.modal-content[b-uhts8iwpty] {
    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-uhts8iwpty 0.3s ease-out;
}

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

.modal-header[b-uhts8iwpty] {
    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-uhts8iwpty] {
    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-uhts8iwpty] {
    color: #3788d8;
    font-size: 1.1rem;
}

.close-button[b-uhts8iwpty] {
    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-uhts8iwpty] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.challenge-info-banner[b-uhts8iwpty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: rgba(99, 102, 241, 0.08);
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--accent-primary, #6366f1);
    font-size: 0.9rem;
}

.challenge-info-banner .bi[b-uhts8iwpty] {
    font-size: 1rem;
}

.challenge-info-banner strong[b-uhts8iwpty] {
    font-weight: 600;
}

.modal-body[b-uhts8iwpty] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections */
.form-section[b-uhts8iwpty] {
    margin-bottom: 2rem;
}

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

.section-header[b-uhts8iwpty] {
    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-uhts8iwpty] {
    color: #3788d8;
    font-size: 1.1rem;
}

.form-group[b-uhts8iwpty] {
    margin-bottom: 1.25rem;
}

.form-group label[b-uhts8iwpty] {
    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-uhts8iwpty] {
    color: #3788d8;
    font-size: 0.95rem;
}

.form-control[b-uhts8iwpty] {
    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-uhts8iwpty] {
    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-uhts8iwpty] {
        border-color: #3788d8;
    }
}

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

.color-picker-compact[b-uhts8iwpty] {
    gap: 0.375rem;
    flex-wrap: wrap;
}

.color-option[b-uhts8iwpty] {
    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-uhts8iwpty] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    flex: 0 0 auto;
    min-width: 28px;
}

@media (hover: hover) {
    .color-option:hover[b-uhts8iwpty] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option.selected[b-uhts8iwpty] {
    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-uhts8iwpty] {
    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-uhts8iwpty] {
    font-size: 1rem;
}

/* Clear/No color option */
.color-option-clear[b-uhts8iwpty] {
    background: var(--input-bg);
    border: 2px dashed var(--border-color);
}

.color-option-clear .bi[b-uhts8iwpty] {
    color: var(--text-secondary);
    text-shadow: none;
}

@media (hover: hover) {
    .color-option-clear:hover[b-uhts8iwpty] {
        border-color: var(--text-secondary);
    }
}

.color-option-clear.selected[b-uhts8iwpty] {
    border-style: solid;
    border-color: var(--text-color);
}

.custom-color-picker-wrapper[b-uhts8iwpty] {
    position: relative;
    width: 60px;
    height: 60px;
}

.custom-color-picker-compact[b-uhts8iwpty] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    flex: 0 0 auto;
    min-width: 28px;
}

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

.custom-color-button[b-uhts8iwpty] {
    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-uhts8iwpty] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border-width: 2px;
}

.custom-color-button span[b-uhts8iwpty] {
    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-uhts8iwpty] {
    font-size: 1rem;
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-uhts8iwpty] {
        border-color: var(--text-color);
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.modal-footer[b-uhts8iwpty] {
    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-uhts8iwpty] {
    flex: 1;
}

.btn-danger[b-uhts8iwpty] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

@media (hover: hover) {
    .btn-danger:hover[b-uhts8iwpty] {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    }
}

.btn[b-uhts8iwpty] {
    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-uhts8iwpty] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn:active[b-uhts8iwpty] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-uhts8iwpty] {
    background: linear-gradient(135deg, #3788d8 0%, #2d6fb3 100%);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-uhts8iwpty] {
        background: linear-gradient(135deg, #2d6fb3 0%, #2563a0 100%);
    }
}

.btn-secondary[b-uhts8iwpty] {
    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-uhts8iwpty] {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-secondary);
    }
}

.time-range-inputs[b-uhts8iwpty] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.time-input[b-uhts8iwpty] {
    flex: 1;
}

/* Ensure time input shows native browser controls (spinners/steppers) */
.time-input[b-uhts8iwpty]::-webkit-calendar-picker-indicator {
    cursor: pointer;
}

.time-input[b-uhts8iwpty]::-webkit-inner-spin-button,
.time-input[b-uhts8iwpty]::-webkit-outer-spin-button {
    opacity: 1;
}

.time-input[b-uhts8iwpty] {
    -moz-appearance: auto;
    -webkit-appearance: auto;
    appearance: auto;
}

.time-separator[b-uhts8iwpty] {
    color: var(--text-secondary);
    font-weight: 500;
}

.days-picker[b-uhts8iwpty] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.day-checkbox[b-uhts8iwpty] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--input-bg);
}

@media (hover: hover) {
    .day-checkbox:hover[b-uhts8iwpty] {
        background: var(--hover-bg);
    }
}

.day-checkbox input[type="checkbox"][b-uhts8iwpty] {
    margin: 0;
    cursor: pointer;
}

.day-checkbox span[b-uhts8iwpty] {
    font-size: 0.875rem;
    color: var(--text-primary);
    user-select: none;
}

.input-with-emoji[b-uhts8iwpty] {
    position: relative;
}

.input-with-emoji .form-input[b-uhts8iwpty] {
    padding-right: 3rem;
}

.emoji-picker-button[b-uhts8iwpty] {
    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-uhts8iwpty] {
        background: var(--hover-bg);
        color: var(--text-primary);
    }
}

.emoji-picker-dropdown[b-uhts8iwpty] {
    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-uhts8iwpty] {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: auto;
    }
    
    .emoji-more-hint[b-uhts8iwpty] {
        grid-column: span 5;
    }
}

.emoji-option[b-uhts8iwpty] {
    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-uhts8iwpty] {
        background: var(--hover-bg);
        transform: scale(1.1);
    }
}

.emoji-more-hint[b-uhts8iwpty] {
    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-uhts8iwpty] {
    font-size: 0.875rem;
}

.hint-text[b-uhts8iwpty] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.emoji-more-hint kbd[b-uhts8iwpty] {
    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-uhts8iwpty] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-uhts8iwpty] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

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

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

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

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

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

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-uhts8iwpty] {
        font-size: 1.1rem;
    }

    .color-picker[b-uhts8iwpty] {
        gap: 0.5rem;
    }

    .color-option[b-uhts8iwpty] {
        width: 40px;
        height: 40px;
    }

    .days-picker[b-uhts8iwpty] {
        gap: 0.375rem;
    }

    .day-checkbox[b-uhts8iwpty] {
        padding: 0.4rem 0.6rem;
    }

    .day-checkbox span[b-uhts8iwpty] {
        font-size: 0.8rem;
    }

    .time-range-inputs[b-uhts8iwpty] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .time-separator[b-uhts8iwpty] {
        display: none;
    }

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

    .modal-footer .btn[b-uhts8iwpty] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/PlanModal.razor.rz.scp.css */
.modal-overlay[b-joz5zjvu1l] {
    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-joz5zjvu1l] {
    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-joz5zjvu1l] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3[b-joz5zjvu1l] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close[b-joz5zjvu1l] {
    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-joz5zjvu1l] {
        color: var(--text-primary);
    }
}

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

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

.btn-secondary[b-joz5zjvu1l],
.btn-primary[b-joz5zjvu1l] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-secondary[b-joz5zjvu1l] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

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

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

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

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

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

.form-group label[b-joz5zjvu1l] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.form-input[b-joz5zjvu1l] {
    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-joz5zjvu1l]::placeholder {
    color: var(--text-muted);
}

.form-input:focus[b-joz5zjvu1l] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.plan-type-section[b-joz5zjvu1l] {
    margin-bottom: 1.5rem;
}

.section-label[b-joz5zjvu1l] {
    display: block;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

.plan-type-options[b-joz5zjvu1l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.plan-type-card[b-joz5zjvu1l] {
    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-joz5zjvu1l] {
        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-joz5zjvu1l] {
    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-joz5zjvu1l] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.plan-type-title[b-joz5zjvu1l] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.plan-type-description[b-joz5zjvu1l] {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.generating-state[b-joz5zjvu1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.generating-text[b-joz5zjvu1l] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.generating-subtext[b-joz5zjvu1l] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0 0;
}

.modal-generating[b-joz5zjvu1l] {
    pointer-events: auto;
}

.alert[b-joz5zjvu1l] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin: 0;
}

.alert-danger[b-joz5zjvu1l] {
    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-joz5zjvu1l] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-joz5zjvu1l] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-body[b-joz5zjvu1l] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

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

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

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

    .plan-type-options[b-joz5zjvu1l] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .plan-type-card[b-joz5zjvu1l] {
        padding: 1rem;
    }

    .plan-type-icon[b-joz5zjvu1l] {
        font-size: 2rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-joz5zjvu1l] {
        font-size: 1.1rem;
    }

    .modal-footer[b-joz5zjvu1l] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn-primary[b-joz5zjvu1l],
    .modal-footer .btn-secondary[b-joz5zjvu1l] {
        width: 100%;
        justify-content: center;
    }

    .plan-type-title[b-joz5zjvu1l] {
        font-size: 1rem;
    }

    .plan-type-description[b-joz5zjvu1l] {
        font-size: 0.8rem;
    }
}
/* /Components/Shared/PlanPreviewModal.razor.rz.scp.css */
.modal-overlay[b-257k8ybbbl] {
    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-257k8ybbbl] {
    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-257k8ybbbl] {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3[b-257k8ybbbl] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.btn-close[b-257k8ybbbl] {
    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-257k8ybbbl] {
        color: #111827;
    }
}

.modal-body[b-257k8ybbbl] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-257k8ybbbl] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-257k8ybbbl],
.btn-primary[b-257k8ybbbl] {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-secondary[b-257k8ybbbl] {
    background: white;
    border: 1px solid #d1d5db;
    color: #374151;
}

@media (hover: hover) {
    .btn-secondary:hover[b-257k8ybbbl] {
        background: #f9fafb;
    }
}

.btn-primary[b-257k8ybbbl] {
    background: #6366f1;
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-257k8ybbbl] {
        background: #4f46e5;
    }
}

.plan-preview-modal[b-257k8ybbbl] {
    max-width: 900px;
}

.modal-content-large[b-257k8ybbbl] {
    max-width: 900px;
}

.plan-preview-modal .modal-body[b-257k8ybbbl] {
    max-height: calc(90vh - 160px);
    overflow-y: auto;
}

.plan-summary[b-257k8ybbbl] {
    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-257k8ybbbl] {
    margin-bottom: 2rem;
}

.section-title[b-257k8ybbbl] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.tasks-tree[b-257k8ybbbl] {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
}

.task-item[b-257k8ybbbl] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.task-header[b-257k8ybbbl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.task-title-section[b-257k8ybbbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}

.task-checkbox-label[b-257k8ybbbl] {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.task-checkbox-label input[type="checkbox"][b-257k8ybbbl] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.task-bullet[b-257k8ybbbl] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-title[b-257k8ybbbl] {
    font-weight: 600;
    color: #111827;
    font-size: 0.95rem;
}

.task-description[b-257k8ybbbl] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

.task-priority[b-257k8ybbbl] {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
}

.priority-critical[b-257k8ybbbl] {
    background: #fef2f2;
    color: #991b1b;
}

.priority-high[b-257k8ybbbl] {
    background: #fef3c7;
    color: #92400e;
}

.priority-medium[b-257k8ybbbl] {
    background: #dbeafe;
    color: #1e40af;
}

.priority-low[b-257k8ybbbl] {
    background: #f3f4f6;
    color: #4b5563;
}

.task-deadline[b-257k8ybbbl] {
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
}

.subtasks-container[b-257k8ybbbl] {
    margin-top: 0.5rem;
}

.create-habits-option[b-257k8ybbbl] {
    margin-bottom: 1rem;
}

.checkbox-label[b-257k8ybbbl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-257k8ybbbl] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.habits-list[b-257k8ybbbl] {
    display: grid;
    gap: 0.75rem;
}

.habit-card[b-257k8ybbbl] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
}

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

.habit-checkbox-label[b-257k8ybbbl] {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.habit-checkbox-label input[type="checkbox"][b-257k8ybbbl] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin: 0;
}

.habit-name[b-257k8ybbbl] {
    font-weight: 600;
    color: #111827;
}

.habit-frequency[b-257k8ybbbl] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
}

.badge[b-257k8ybbbl] {
    background: #e0e7ff;
    color: #3730a3;
    text-transform: capitalize;
}

.habit-description[b-257k8ybbbl] {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.habit-days[b-257k8ybbbl] {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.day-badge[b-257k8ybbbl] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: #f3f4f6;
    color: #9ca3af;
}

.day-badge.active[b-257k8ybbbl] {
    background: #dbeafe;
    color: #1e40af;
    font-weight: 600;
}

.btn-outline[b-257k8ybbbl] {
    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-257k8ybbbl] {
        background: #f9fafb;
        border-color: #9ca3af;
    }
}

.modal-content-large[b-257k8ybbbl] {
    width: 90%;
}

.task-title-input[b-257k8ybbbl] {
    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-257k8ybbbl] {
        background: #f3f4f6;
    }
}

.task-title-input:focus[b-257k8ybbbl] {
    outline: none;
    background: white;
    box-shadow: 0 0 0 2px #6366f1;
}

.task-edit-btn[b-257k8ybbbl] {
    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-257k8ybbbl] {
        background: #f3f4f6;
        color: #6366f1;
    }
}

@media (hover: hover) {
    .task-item:hover .task-edit-btn[b-257k8ybbbl] {
        opacity: 1;
    }
}

@media (hover: none) {
    .task-edit-btn[b-257k8ybbbl] {
        opacity: 1;
        visibility: visible;
    }
}

/* Dark mode support */
[data-bs-theme="dark"] .modal-overlay[b-257k8ybbbl] {
    background: rgba(0, 0, 0, 0.7);
}

[data-bs-theme="dark"] .modal-content[b-257k8ybbbl] {
    background: #1f2937;
    color: #f3f4f6;
}

[data-bs-theme="dark"] .modal-header[b-257k8ybbbl] {
    border-bottom: 1px solid #374151;
}

[data-bs-theme="dark"] .modal-header h3[b-257k8ybbbl] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .btn-close[b-257k8ybbbl] {
    color: #9ca3af;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-close:hover[b-257k8ybbbl] {
        color: #f3f4f6;
    }
}

[data-bs-theme="dark"] .modal-footer[b-257k8ybbbl] {
    border-top: 1px solid #374151;
}

[data-bs-theme="dark"] .btn-secondary[b-257k8ybbbl] {
    background: #374151;
    border: 1px solid #4b5563;
    color: #f3f4f6;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-secondary:hover[b-257k8ybbbl] {
        background: #4b5563;
    }
}

[data-bs-theme="dark"] .btn-primary[b-257k8ybbbl] {
    background: #6366f1;
    color: white;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-primary:hover[b-257k8ybbbl] {
        background: #4f46e5;
    }
}

[data-bs-theme="dark"] .plan-summary[b-257k8ybbbl] {
    background: #1e3a5f;
    border-left: 4px solid #3b82f6;
    color: #93c5fd;
}

[data-bs-theme="dark"] .section-title[b-257k8ybbbl] {
    color: #f3f4f6;
    border-bottom: 2px solid #374151;
}

[data-bs-theme="dark"] .tasks-tree[b-257k8ybbbl] {
    background: #111827;
}

[data-bs-theme="dark"] .task-item[b-257k8ybbbl] {
    background: #1f2937;
    border: 1px solid #374151;
}

[data-bs-theme="dark"] .task-title[b-257k8ybbbl] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .task-title-input[b-257k8ybbbl] {
    color: #f3f4f6;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .task-title-input:hover[b-257k8ybbbl] {
        background: #374151;
    }
}

[data-bs-theme="dark"] .task-title-input:focus[b-257k8ybbbl] {
    background: #1f2937;
    box-shadow: 0 0 0 2px #6366f1;
}

[data-bs-theme="dark"] .task-description[b-257k8ybbbl] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .priority-critical[b-257k8ybbbl] {
    background: #7f1d1d;
    color: #fca5a5;
}

[data-bs-theme="dark"] .priority-high[b-257k8ybbbl] {
    background: #78350f;
    color: #fcd34d;
}

[data-bs-theme="dark"] .priority-medium[b-257k8ybbbl] {
    background: #1e3a8a;
    color: #93c5fd;
}

[data-bs-theme="dark"] .priority-low[b-257k8ybbbl] {
    background: #374151;
    color: #d1d5db;
}

[data-bs-theme="dark"] .task-deadline[b-257k8ybbbl] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .habit-card[b-257k8ybbbl] {
    background: #1f2937;
    border: 1px solid #374151;
}

[data-bs-theme="dark"] .habit-name[b-257k8ybbbl] {
    color: #f3f4f6;
}

[data-bs-theme="dark"] .badge[b-257k8ybbbl] {
    background: #312e81;
    color: #c7d2fe;
}

[data-bs-theme="dark"] .habit-description[b-257k8ybbbl] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .day-badge[b-257k8ybbbl] {
    background: #374151;
    color: #6b7280;
}

[data-bs-theme="dark"] .day-badge.active[b-257k8ybbbl] {
    background: #1e3a8a;
    color: #93c5fd;
}

[data-bs-theme="dark"] .btn-outline[b-257k8ybbbl] {
    background: #374151;
    border: 1px solid #4b5563;
    color: #f3f4f6;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .btn-outline:hover[b-257k8ybbbl] {
        background: #4b5563;
        border-color: #6b7280;
    }
}

[data-bs-theme="dark"] .task-edit-btn[b-257k8ybbbl] {
    color: #9ca3af;
}

@media (hover: hover) {
    [data-bs-theme="dark"] .task-edit-btn:hover[b-257k8ybbbl] {
        background: #374151;
        color: #6366f1;
    }
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-257k8ybbbl] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-257k8ybbbl],
    .modal-content-large[b-257k8ybbbl],
    .plan-preview-modal[b-257k8ybbbl] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .plan-preview-modal .modal-body[b-257k8ybbbl] {
        max-height: none;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

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

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

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

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

    .task-header[b-257k8ybbbl] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .task-title-section[b-257k8ybbbl] {
        flex-basis: 100%;
    }

    .task-title-input[b-257k8ybbbl] {
        min-width: 0;
        width: 100%;
    }

    .task-edit-btn[b-257k8ybbbl] {
        opacity: 1;
    }

    .habit-header[b-257k8ybbbl] {
        flex-wrap: wrap;
    }

    .habit-days[b-257k8ybbbl] {
        flex-wrap: wrap;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-257k8ybbbl] {
        font-size: 1.1rem;
    }

    .modal-body[b-257k8ybbbl] {
        padding: 1rem;
    }

    .modal-footer[b-257k8ybbbl] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn-primary[b-257k8ybbbl],
    .modal-footer .btn-secondary[b-257k8ybbbl],
    .modal-footer .btn-outline[b-257k8ybbbl] {
        width: 100%;
        text-align: center;
    }

    .section-title[b-257k8ybbbl] {
        font-size: 1rem;
    }

    .task-item[b-257k8ybbbl] {
        padding: 0.5rem;
    }

    .task-title[b-257k8ybbbl] {
        font-size: 0.9rem;
    }

    .habit-card[b-257k8ybbbl] {
        padding: 0.75rem;
    }

    .plan-summary[b-257k8ybbbl] {
        font-size: 0.875rem;
        padding: 0.75rem;
    }
}
/* /Components/Shared/PublicChallengesModal.razor.rz.scp.css */
.modal-overlay[b-gmstqrxp2f] {
    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-gmstqrxp2f] {
    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-gmstqrxp2f] {
    max-width: 700px;
}

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

.modal-header h3[b-gmstqrxp2f] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-color);
}

.btn-close[b-gmstqrxp2f] {
    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-gmstqrxp2f] {
        color: var(--text-color);
    }
}

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

.search-section[b-gmstqrxp2f] {
    margin-bottom: 1rem;
}

.input-group[b-gmstqrxp2f] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group-text[b-gmstqrxp2f] {
    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-gmstqrxp2f] {
    flex: 1;
    border-radius: 0;
    border-left: none;
    min-width: 0;
    width: auto;
}

.input-group .form-control:not(:last-child)[b-gmstqrxp2f] {
    border-right: none;
}

.input-group .form-control:last-child[b-gmstqrxp2f] {
    border-radius: 0 6px 6px 0;
}

.input-group .btn[b-gmstqrxp2f] {
    border-radius: 0 6px 6px 0;
    border-left: none;
    white-space: nowrap;
}

.loading-state[b-gmstqrxp2f],
.empty-state[b-gmstqrxp2f] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-icon[b-gmstqrxp2f] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.challenges-list[b-gmstqrxp2f] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.challenge-item[b-gmstqrxp2f] {
    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-gmstqrxp2f] {
        border-color: var(--primary-color);
        background-color: var(--hover-bg);
    }
}

.challenge-info[b-gmstqrxp2f] {
    flex: 1;
    min-width: 0;
}

.challenge-name-row[b-gmstqrxp2f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.challenge-name[b-gmstqrxp2f] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.challenge-details-row[b-gmstqrxp2f] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.challenge-description[b-gmstqrxp2f] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1;
}

.participant-count[b-gmstqrxp2f] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #5c6bc0;
    font-weight: 500;
}

.challenge-meta[b-gmstqrxp2f] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.meta-item[b-gmstqrxp2f] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.challenge-action[b-gmstqrxp2f] {
    margin-left: 1rem;
    flex-shrink: 0;
}

.load-more-trigger[b-gmstqrxp2f] {
    display: flex;
    justify-content: center;
    padding: 1rem;
    min-height: 40px;
}

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

.btn-secondary[b-gmstqrxp2f] {
    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-gmstqrxp2f] {
        background-color: var(--hover-bg);
    }
}

.btn-primary[b-gmstqrxp2f] {
    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-gmstqrxp2f] {
        opacity: 0.9;
    }
}

.form-control[b-gmstqrxp2f] {
    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-gmstqrxp2f] {
    outline: none;
    border-color: var(--border-color);
    box-shadow: none;
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-gmstqrxp2f] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-gmstqrxp2f],
    .modal-large[b-gmstqrxp2f] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .modal-body[b-gmstqrxp2f] {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

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

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

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

    .challenges-list[b-gmstqrxp2f] {
        max-height: none;
    }

    .challenge-item[b-gmstqrxp2f] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .challenge-action[b-gmstqrxp2f] {
        margin-left: 0;
        width: 100%;
    }

    .challenge-action .btn-primary[b-gmstqrxp2f] {
        width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-gmstqrxp2f] {
        font-size: 1.1rem;
    }

    .modal-footer[b-gmstqrxp2f] {
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .modal-footer .btn-secondary[b-gmstqrxp2f] {
        width: 100%;
    }

    .input-group[b-gmstqrxp2f] {
        flex-wrap: wrap;
    }

    .input-group-text[b-gmstqrxp2f] {
        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-gmstqrxp2f] {
        border-radius: 0;
        border-left: 1px solid var(--border-color);
    }

    .input-group .form-control:last-child[b-gmstqrxp2f],
    .input-group .btn[b-gmstqrxp2f] {
        border-radius: 0 0 6px 6px;
    }

    .challenge-name-row[b-gmstqrxp2f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .challenge-details-row[b-gmstqrxp2f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .challenge-meta[b-gmstqrxp2f] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
/* /Components/Shared/TagDisplay.razor.rz.scp.css */
/* TagDisplay component styles */

.tag-display[b-5xajjgotn3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.tag-pill[b-5xajjgotn3] {
    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-5xajjgotn3] {
        background: color-mix(in srgb, var(--tag-color, #6366f1) 20%, transparent);
        transform: translateY(-1px);
    }
}

.tag-pill-text[b-5xajjgotn3] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-overflow[b-5xajjgotn3] {
    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-5xajjgotn3] {
        background: #e5e7eb;
    }
}

.tag-collapse[b-5xajjgotn3] {
    color: var(--text-secondary);
}

/* Compact mode */
.tag-display.compact .tag-pill[b-5xajjgotn3] {
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    max-width: 72px;
}

.tag-display.compact .tag-overflow[b-5xajjgotn3] {
    padding: 0.0625rem 0.25rem;
    font-size: 0.5625rem;
}

/* Dark theme adjustments */
:root.dark-theme .tag-pill[b-5xajjgotn3] {
    background: color-mix(in srgb, var(--tag-color, #6366f1) 20%, transparent);
}

@media (hover: hover) {
    :root.dark-theme .tag-pill:hover[b-5xajjgotn3] {
        background: color-mix(in srgb, var(--tag-color, #6366f1) 30%, transparent);
    }
}

:root.dark-theme .tag-overflow[b-5xajjgotn3] {
    background: var(--bg-secondary);
}

@media (hover: hover) {
    :root.dark-theme .tag-overflow:hover[b-5xajjgotn3] {
        background: var(--border-color, #374151);
    }
}

/* Mobile responsive */
@media (max-width: 576px) {
    .tag-pill[b-5xajjgotn3] {
        padding: 0.1875rem 0.5rem;
        font-size: 0.75rem;
        max-width: 80px;
    }

    .tag-display.compact .tag-pill[b-5xajjgotn3] {
        font-size: 0.625rem;
        max-width: 64px;
    }
}
/* /Components/Shared/TagPicker.razor.rz.scp.css */
/* TagPicker component styles */

.tag-picker-container[b-ssmi1407e8] {
    position: relative;
    display: inline-flex;
}

.tag-picker-btn[b-ssmi1407e8] {
    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-ssmi1407e8] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.tag-picker-btn.has-tags[b-ssmi1407e8] {
    color: var(--primary-color, #6366f1);
}

.tag-picker-btn .tag-count[b-ssmi1407e8] {
    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-ssmi1407e8] {
    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-ssmi1407e8] {
    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-ssmi1407e8] {
    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-ssmi1407e8] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.btn-manage-tags[b-ssmi1407e8] {
    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-ssmi1407e8] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

/* Search input */
.tag-search-wrapper[b-ssmi1407e8] {
    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-ssmi1407e8] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tag-search-input[b-ssmi1407e8] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
}

.tag-search-input[b-ssmi1407e8]::placeholder {
    color: var(--text-secondary);
}

/* Tag list */
.tag-list[b-ssmi1407e8] {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.tag-loading[b-ssmi1407e8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tag-empty[b-ssmi1407e8] {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tag-option[b-ssmi1407e8] {
    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-ssmi1407e8] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.tag-option.selected[b-ssmi1407e8] {
    background: rgba(99, 102, 241, 0.08);
}

.tag-checkbox[b-ssmi1407e8] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1;
}

.tag-option.selected .tag-checkbox[b-ssmi1407e8] {
    color: var(--primary-color, #6366f1);
}

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

.tag-name[b-ssmi1407e8] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Create tag option */
.tag-create-option[b-ssmi1407e8] {
    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-ssmi1407e8] {
        background: rgba(99, 102, 241, 0.08);
    }
}

/* Error message */
.tag-error-message[b-ssmi1407e8] {
    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-ssmi1407e8] {
    font-size: 0.875rem;
}

/* Color picker overlay */
.tag-color-picker[b-ssmi1407e8] {
    padding: 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--bg-secondary, #f9fafb);
}

.color-picker-label[b-ssmi1407e8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.color-options[b-ssmi1407e8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.color-option[b-ssmi1407e8] {
    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-ssmi1407e8] {
        transform: scale(1.1);
    }
}

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

.color-picker-actions[b-ssmi1407e8] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Footer */
.tag-picker-footer[b-ssmi1407e8] {
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.btn-clear-tags[b-ssmi1407e8] {
    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-ssmi1407e8] {
        color: var(--danger-color, #ef4444);
    }
}

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

:root.dark-theme .tag-color-picker[b-ssmi1407e8] {
    background: var(--bg-secondary);
}

/* Mobile responsive */
@media (max-width: 576px) {
    .tag-picker-panel[b-ssmi1407e8] {
        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-ssmi1407e8] {
        max-height: 40vh;
    }
}
/* /Components/Shared/TaskCard.razor.rz.scp.css */
/* TaskCard component styles */

/* ==========================================================================
   List View Task Card
   ========================================================================== */

.task-item-container[b-5z9rdqz8es] {
}

.task-item-container:last-child[b-5z9rdqz8es] {
    margin-bottom: 0;
}

.task-item-wrapper[b-5z9rdqz8es] {
    position: relative;
}

.task-card[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        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-5z9rdqz8es] {
    background: var(--warning-light, #fef3c7);
}

.task-card.completed[b-5z9rdqz8es] {
    opacity: 0.6;
}

.task-card.dragging[b-5z9rdqz8es] {
    opacity: 0;
    transform: scale(0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color, #6366f1);
    z-index: 100;
    transition: none;
}

/* Task Card Header - checkbox + title */
.task-card-header[b-5z9rdqz8es] {
    display: flex;
    align-items: center;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.task-card-checkbox[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .task-card-checkbox[b-5z9rdqz8es] {
        opacity: 1;
        visibility: visible;
    }
}

.task-card-checkbox span[b-5z9rdqz8es] {
    border-radius: 3px;
}

@media (hover: hover) {
    .task-card-checkbox:hover[b-5z9rdqz8es] {
        color: var(--primary-color, #6366f1);
    }
}

.task-card-title[b-5z9rdqz8es] {
    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) {
    .task-card:hover .task-card-title[b-5z9rdqz8es] {
        padding-left: 1.375rem;
    }
}

@media (hover: none) {
    .task-card-title[b-5z9rdqz8es] {
        padding-left: 1.375rem;
    }
}

.task-card-title.completed[b-5z9rdqz8es] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Task Card Metadata */
.task-card-meta[b-5z9rdqz8es] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.6875rem;
    margin-top: 2px;
}

.task-card-meta .due-date[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        background: rgba(59, 130, 246, 0.1);
    }
}

.task-card-meta .due-date.overdue[b-5z9rdqz8es] {
    color: #ef4444;
}

.task-card-meta .due-date.due-today[b-5z9rdqz8es] {
    color: #f59e0b;
}

.task-card-meta .priority[b-5z9rdqz8es] {
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
}

.task-card-meta .priority.priority-medium[b-5z9rdqz8es] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.task-card-meta .priority.priority-high[b-5z9rdqz8es] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.task-card-meta .priority.priority-critical[b-5z9rdqz8es] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.task-card-meta .subtasks[b-5z9rdqz8es] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

.task-card-meta .description-indicator[b-5z9rdqz8es],
.task-card-meta .reminder[b-5z9rdqz8es],
.task-card-meta .recurring[b-5z9rdqz8es] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

/* List view task card pickers (CalendarPicker and PriorityPicker) */
[b-5z9rdqz8es] .list-due-date-picker .calendar-picker-btn,
[b-5z9rdqz8es] .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-5z9rdqz8es] .list-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-5z9rdqz8es] .list-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-5z9rdqz8es] .list-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-5z9rdqz8es] .list-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-5z9rdqz8es] .list-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-5z9rdqz8es] .list-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-5z9rdqz8es] .list-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-5z9rdqz8es] .list-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.75rem;
}

@media (hover: hover) {
    [b-5z9rdqz8es] .list-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Ensure dropdown panels appear above other elements */
[b-5z9rdqz8es] .list-due-date-picker .calendar-picker-panel,
[b-5z9rdqz8es] .list-priority-picker .priority-picker-panel {
    z-index: 1000;
}

/* Task Card Actions (for list view) */
.task-card-actions[b-5z9rdqz8es] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    margin-left: auto;
    padding-left: 0.5rem;
}

.task-card-actions button[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

@media (hover: hover) {
    .task-card-actions .btn-favorite:hover[b-5z9rdqz8es] {
        color: #fbbf24;
    }
}

.task-card-actions .btn-favorite .bi-star-fill[b-5z9rdqz8es] {
    color: #fbbf24;
}

@media (hover: hover) {
    .task-card-actions .btn-edit:hover[b-5z9rdqz8es] {
        color: var(--primary-color, #6366f1);
    }
}

@media (hover: hover) {
    .task-card-actions .btn-delete:hover[b-5z9rdqz8es] {
        color: var(--danger-color, #ef4444);
    }
}

/* List View Layout - horizontal with actions */
.task-card.list-view[b-5z9rdqz8es] {
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
}

.task-card.list-view .task-card-content[b-5z9rdqz8es] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

/* Task list badge for Inbox view */
.task-list-badge[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        color: var(--text-primary);
        background: var(--hover-bg, #e5e7eb);
        border-color: var(--accent-primary, #6366f1);
    }
}

.task-list-badge:focus[b-5z9rdqz8es] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.task-list-badge .bi-kanban[b-5z9rdqz8es],
.task-list-badge .bi-list-task[b-5z9rdqz8es] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.task-list-badge-text[b-5z9rdqz8es] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Task action menu */
.task-action-menu-container[b-5z9rdqz8es] {
    position: relative;
    display: inline-flex;
}

.btn-task-menu[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--text-primary);
    }
}

.task-action-dropdown[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
    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-5z9rdqz8es] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.task-action-dropdown .dropdown-item.text-danger[b-5z9rdqz8es] {
    color: var(--danger-color, #ef4444);
}

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

.task-action-dropdown .dropdown-item .favorite-icon[b-5z9rdqz8es] {
    color: #fbbf24;
}

.task-action-dropdown .dropdown-divider[b-5z9rdqz8es] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Plan menu item states */
.task-action-dropdown .dropdown-item.generating[b-5z9rdqz8es] {
    opacity: 0.7;
}

.task-action-dropdown .dropdown-item.plan-ready[b-5z9rdqz8es] {
    color: #10b981;
}

.task-action-dropdown .dropdown-item.plan-ready .bi-diagram-3-fill[b-5z9rdqz8es] {
    color: #10b981;
}

/* ==========================================================================
   Kanban Card
   ========================================================================== */

.kanban-card-wrapper[b-5z9rdqz8es] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.kanban-card[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        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-5z9rdqz8es] {
    cursor: grabbing;
}

.kanban-card.dragging[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
    opacity: 0 !important;
    pointer-events: none;
    transform: none;
    transition: none;
}

.kanban-card.favorite[b-5z9rdqz8es] {
    background: var(--warning-light, #fef3c7);
}

.kanban-card.completed[b-5z9rdqz8es] {
    opacity: 0.7;
    background: var(--bg-secondary, #f9fafb);
    cursor: pointer;
}

@media (hover: hover) {
    .kanban-card.completed:hover[b-5z9rdqz8es] {
        opacity: 0.85;
    }
}

.kanban-card-header[b-5z9rdqz8es] {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    min-height: 32px;
    position: relative;
    overflow: hidden;
}

.card-checkbox[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }
}

@media (hover: none) {
    .card-checkbox[b-5z9rdqz8es] {
        opacity: 1;
        visibility: visible;
    }
}

.card-checkbox span[b-5z9rdqz8es] {
    border-radius: 3px;
}

@media (hover: hover) {
    .card-checkbox:hover[b-5z9rdqz8es] {
        color: var(--primary-color, #6366f1);
    }
}

.card-title[b-5z9rdqz8es] {
    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-5z9rdqz8es] {
        padding-left: 1.375rem;
    }
}

@media (hover: none) {
    .card-title[b-5z9rdqz8es] {
        padding-left: 1.375rem;
    }
}

.card-title.completed[b-5z9rdqz8es] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.kanban-card-meta[b-5z9rdqz8es] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    font-size: 0.75rem;
    margin-top: 2px;
}

.card-description-indicator[b-5z9rdqz8es] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

.card-subtasks[b-5z9rdqz8es] {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
}

/* Generic card-meta-picker container (for kanban cards) */
[b-5z9rdqz8es] .card-meta-picker {
    position: relative;
}

[b-5z9rdqz8es] .card-meta-picker .calendar-picker-btn,
[b-5z9rdqz8es] .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-5z9rdqz8es] .card-meta-picker .calendar-picker-panel,
[b-5z9rdqz8es] .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-5z9rdqz8es] .card-due-date-picker .calendar-picker-btn,
[b-5z9rdqz8es] .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-5z9rdqz8es] .card-due-date-picker .calendar-picker-btn {
    color: var(--primary-color, #3b82f6);
}

@media (hover: hover) {
    [b-5z9rdqz8es] .card-due-date-picker .calendar-picker-btn:hover {
        background: rgba(59, 130, 246, 0.1);
    }
}

[b-5z9rdqz8es] .card-due-date-picker.overdue .calendar-picker-btn {
    color: #ef4444;
}

@media (hover: hover) {
    [b-5z9rdqz8es] .card-due-date-picker.overdue .calendar-picker-btn:hover {
        background: rgba(239, 68, 68, 0.1);
    }
}

[b-5z9rdqz8es] .card-due-date-picker.due-today .calendar-picker-btn {
    color: #f59e0b;
}

@media (hover: hover) {
    [b-5z9rdqz8es] .card-due-date-picker.due-today .calendar-picker-btn:hover {
        background: rgba(245, 158, 11, 0.1);
    }
}

[b-5z9rdqz8es] .card-priority-picker .priority-picker-btn {
    background: transparent;
}

[b-5z9rdqz8es] .card-priority-picker .priority-picker-btn .priority-label-text {
    font-size: 0.6875rem;
}

@media (hover: hover) {
    [b-5z9rdqz8es] .card-priority-picker .priority-picker-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Ensure dropdown panels appear above other elements */
[b-5z9rdqz8es] .card-due-date-picker .calendar-picker-panel,
[b-5z9rdqz8es] .card-priority-picker .priority-picker-panel {
    z-index: 1000;
}

/* ==========================================================================
   Nested Subtasks
   ========================================================================== */

.nested-subtasks[b-5z9rdqz8es] {
    margin-left: 1.5rem;
    border-left: 2px solid var(--border-color, #e5e7eb);
    padding-left: 0.5rem;
}

.nested-subtasks .task-item-container[b-5z9rdqz8es] {
    margin-bottom: 0.25rem;
}

.nested-subtasks .task-item-container:last-child[b-5z9rdqz8es] {
    margin-bottom: 0;
}

/* ==========================================================================
   Dark Theme Adjustments
   ========================================================================== */

:root.dark-theme .task-card[b-5z9rdqz8es],
:root.dark-theme .kanban-card[b-5z9rdqz8es] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

:root.dark-theme .task-card.favorite[b-5z9rdqz8es],
:root.dark-theme .kanban-card.favorite[b-5z9rdqz8es] {
    background: rgba(251, 191, 36, 0.15);
}

:root.dark-theme .task-action-dropdown[b-5z9rdqz8es] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media (max-width: 576px) {
    .task-card-checkbox[b-5z9rdqz8es],
    .card-checkbox[b-5z9rdqz8es] {
        opacity: 1;
    }

    .task-card-title[b-5z9rdqz8es],
    .card-title[b-5z9rdqz8es] {
        padding-left: 1.375rem;
    }

    @media (hover: hover) {
        .task-card:hover .task-card-title[b-5z9rdqz8es],
        .kanban-card:hover .card-title[b-5z9rdqz8es] {
            padding-left: 1.375rem;
        }
    }

    .task-list-badge[b-5z9rdqz8es] {
        max-width: 80px;
    }

    .task-action-dropdown[b-5z9rdqz8es] {
        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-5z9rdqz8es],
    .task-card[b-5z9rdqz8es] {
        padding: 4px 8px;
    }

    .card-title[b-5z9rdqz8es],
    .task-card-title[b-5z9rdqz8es] {
        font-size: 0.8125rem;
    }
}
/* /Components/Shared/TaskDetailModal.razor.rz.scp.css */
/* TaskDetailModal Styles */

/* Modal Base Styles */
.modal-overlay[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
    max-width: 700px;
}

.modal-header[b-9irc7p36zv] {
    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-9irc7p36zv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.modal-task-checkbox[b-9irc7p36zv] {
    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-9irc7p36zv] {
        color: var(--primary-color, #6366f1);
    }
}

.modal-task-checkbox .bi-check-square-fill[b-9irc7p36zv] {
    color: var(--success-color, #10b981);
}

.modal-header h3[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
    }
}

.modal-title-editable.completed[b-9irc7p36zv] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.modal-title-input[b-9irc7p36zv] {
    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-9irc7p36zv] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.btn-close[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
    }
}

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

.form-group[b-9irc7p36zv] {
    margin-bottom: 1.5rem;
}

.form-group label[b-9irc7p36zv] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.modal-footer[b-9irc7p36zv] {
    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-9irc7p36zv] {
    display: flex;
    gap: 0.5rem;
}

.modal-footer-right[b-9irc7p36zv] {
    display: flex;
    gap: 1rem;
}

.btn-primary[b-9irc7p36zv], .btn-secondary[b-9irc7p36zv] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

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

@media (hover: hover) {
    .btn-primary:hover[b-9irc7p36zv] {
        background: var(--accent-secondary);
    }
}

.btn-secondary[b-9irc7p36zv] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

@media (hover: hover) {
    .btn-secondary:hover[b-9irc7p36zv] {
        background: var(--hover-bg);
    }
}

.form-input[b-9irc7p36zv] {
    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-9irc7p36zv] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

textarea.form-input[b-9irc7p36zv] {
    resize: vertical;
    font-family: inherit;
}

/* Character Counter */
.character-counter[b-9irc7p36zv] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.character-counter-warning[b-9irc7p36zv] {
    color: #f59e0b;
}

/* Subtasks Section */
.subtasks-section[b-9irc7p36zv] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.subtasks-header[b-9irc7p36zv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.subtasks-header h4[b-9irc7p36zv] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.subtasks-count[b-9irc7p36zv] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.subtasks-header-actions[b-9irc7p36zv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-section-add[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
        color: var(--primary-color, #6366f1);
    }
}

.subtasks-scroll-container[b-9irc7p36zv] {
    border-radius: 6px;
    max-height: 275px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.btn-load-more[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
        border-color: var(--accent-primary);
        color: var(--accent-primary);
    }
}

.subtasks-limit-reached[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
        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-9irc7p36zv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    width: 100%;
}

@media (hover: hover) {
    .add-subtask-row:hover .add-icon[b-9irc7p36zv] {
        opacity: 1;
    }
}

@media (hover: none) {
    .add-icon[b-9irc7p36zv] {
        opacity: 1;
    }
}

.add-subtask-form[b-9irc7p36zv] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.subtask-input[b-9irc7p36zv] {
    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-9irc7p36zv] {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.add-subtask-actions[b-9irc7p36zv] {
    display: flex;
    gap: 0.5rem;
}

.subtasks-list[b-9irc7p36zv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subtask-item[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
    }
}

.subtask-item.completed[b-9irc7p36zv] {
    opacity: 0.6;
}

.subtask-checkbox[b-9irc7p36zv] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s;
}

@media (hover: hover) {
    .subtask-checkbox:hover[b-9irc7p36zv] {
        color: var(--accent-primary);
    }
}

.subtask-title[b-9irc7p36zv] {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.subtask-title.completed[b-9irc7p36zv] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Editable subtask title - click to edit inline */
.subtask-title-editable[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg, rgba(0, 0, 0, 0.05));
        color: var(--accent-primary);
    }
}

.subtask-title-editable.completed[b-9irc7p36zv] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

/* Subtask Action Menu */
.subtask-action-menu-container[b-9irc7p36zv] {
    position: relative;
    display: inline-flex;
}

.btn-subtask-menu[b-9irc7p36zv] {
    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-9irc7p36zv] {
        opacity: 1;
    }
}

@media (hover: none) {
    .btn-subtask-menu[b-9irc7p36zv] {
        opacity: 1;
        visibility: visible;
    }
}

@media (hover: hover) {
    .btn-subtask-menu:hover[b-9irc7p36zv] {
        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-9irc7p36zv] {
        opacity: 1;
    }
}

.subtask-action-dropdown[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg, #f3f4f6);
    }
}

.subtask-action-dropdown .dropdown-item.text-danger[b-9irc7p36zv] {
    color: #ef4444;
}

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

.subtask-action-dropdown .dropdown-divider[b-9irc7p36zv] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0;
}

/* Subtask Edit Input */
.subtask-edit-input[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
        background: #ef4444;
        color: white;
    }
}

.btn-outline-primary[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--accent-primary, #6366f1);
        color: white;
    }
}

/* Small button variants */
.btn-sm[b-9irc7p36zv] {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Mobile responsiveness - full-screen modal */
@media (max-width: 768px) {
    .modal-overlay[b-9irc7p36zv] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-9irc7p36zv],
    .modal-content-large[b-9irc7p36zv] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

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

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

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

/* Action Menu (Three-dot dropdown) */
.task-action-menu-container[b-9irc7p36zv] {
    position: relative;
}

.btn-task-menu[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
        color: var(--text-primary);
        border-color: var(--text-secondary);
    }
}

.task-action-dropdown[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
    }
}

.task-action-dropdown .dropdown-item.text-danger[b-9irc7p36zv] {
    color: var(--danger-color, #ef4444);
}

.task-action-dropdown .dropdown-item .favorite-icon[b-9irc7p36zv] {
    color: #f59e0b;
}

.task-action-dropdown .dropdown-divider[b-9irc7p36zv] {
    height: 1px;
    margin: 0.25rem 0;
    background: var(--border-color);
}

/* Move to List Badge & Dropdown */
.move-to-container[b-9irc7p36zv] {
    position: relative;
    display: inline-block;
}

.move-to-badge[b-9irc7p36zv] {
    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-9irc7p36zv] {
        color: var(--text-primary);
        background: var(--hover-bg);
        border-color: var(--accent-primary);
    }
}

.move-to-badge:focus[b-9irc7p36zv] {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.move-to-badge .bi-folder2[b-9irc7p36zv],
.move-to-badge .bi-kanban[b-9irc7p36zv],
.move-to-badge .bi-list-task[b-9irc7p36zv] {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.move-to-badge-text[b-9irc7p36zv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-to-dropdown-wrapper[b-9irc7p36zv] {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.5rem;
    z-index: 1200;
}

.move-to-dropdown[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.move-to-search input[b-9irc7p36zv] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
}

.move-to-search input[b-9irc7p36zv]::placeholder {
    color: var(--text-secondary);
}

.move-to-list[b-9irc7p36zv] {
    flex: 1;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem 0;
    display: flex;
    flex-direction: column;
}

.move-to-list-item[b-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
    }
}

.move-to-list-item.selected[b-9irc7p36zv] {
    background: var(--hover-bg);
    color: var(--accent-primary, #6366f1);
}

.move-to-list-item.current[b-9irc7p36zv] {
    background: rgba(99, 102, 241, 0.08);
}

.move-to-list-item .bi-list-ul[b-9irc7p36zv] {
    color: var(--text-secondary);
    font-size: 1rem;
    flex-shrink: 0;
}

.move-to-list-item .bi-chevron-right[b-9irc7p36zv] {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.move-to-list-name[b-9irc7p36zv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sections Submenu - absolutely positioned to the right of dropdown */
.move-to-sections-submenu[b-9irc7p36zv] {
    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-9irc7p36zv] {
    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-9irc7p36zv] {
        background: var(--hover-bg);
    }
}

.move-to-section-item.current[b-9irc7p36zv] {
    background: rgba(99, 102, 241, 0.08);
}

.move-to-section-item .bi-dash[b-9irc7p36zv],
.move-to-section-item .bi-list-ul[b-9irc7p36zv] {
    font-size: 1rem;
    flex-shrink: 0;
}

.move-to-section-name[b-9irc7p36zv] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-to-no-results[b-9irc7p36zv] {
    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-9irc7p36zv] {
        position: fixed;
        bottom: auto;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-bottom: 0;
    }

    .move-to-dropdown[b-9irc7p36zv] {
        width: 90vw;
        max-width: 280px;
    }

    .move-to-sections-submenu[b-9irc7p36zv] {
        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-ygtj2mwx0t] {
    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-ygtj2mwx0t 0.2s ease-out;
    overscroll-behavior: contain;
}

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

.modal-content[b-ygtj2mwx0t] {
    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-ygtj2mwx0t 0.3s ease-out;
}

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

.modal-header[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    color: #3788d8;
    font-size: 1.1rem;
}

.close-button[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-color);
    }
}

.modal-body[b-ygtj2mwx0t] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Form Sections */
.form-section[b-ygtj2mwx0t] {
    margin-bottom: 2rem;
}

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

.section-header[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    color: #3788d8;
    font-size: 1.1rem;
}

.form-group[b-ygtj2mwx0t] {
    margin-bottom: 1.25rem;
}

.form-group label[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    color: #3788d8;
    font-size: 0.95rem;
}

.form-control[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
        border-color: #3788d8;
    }
}

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

.form-row[b-ygtj2mwx0t] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-footer[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
}

.btn:active[b-ygtj2mwx0t] {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary[b-ygtj2mwx0t] {
    background: linear-gradient(135deg, #3788d8 0%, #2d6fb3 100%);
    color: white;
}

@media (hover: hover) {
    .btn-primary:hover[b-ygtj2mwx0t] {
        background: linear-gradient(135deg, #2d6fb3 0%, #2563a0 100%);
    }
}

.btn-secondary[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
        background: rgba(0, 0, 0, 0.05);
        border-color: var(--text-secondary);
    }
}

/* Color Picker */
.color-picker[b-ygtj2mwx0t] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.color-picker-compact[b-ygtj2mwx0t] {
    gap: 0.375rem;
    flex-wrap: wrap;
}

.color-option[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 6px;
    flex: 0 0 auto;
    min-width: 28px;
}

@media (hover: hover) {
    .color-option:hover[b-ygtj2mwx0t] {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
}

.color-option.selected[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    font-size: 1rem;
}

/* Clear/No color option */
.color-option-clear[b-ygtj2mwx0t] {
    background: var(--input-bg);
    border: 2px dashed var(--border-color);
}

.color-option-clear .bi[b-ygtj2mwx0t] {
    color: var(--text-secondary);
    text-shadow: none;
}

@media (hover: hover) {
    .color-option-clear:hover[b-ygtj2mwx0t] {
        border-color: var(--text-secondary);
    }
}

.color-option-clear.selected[b-ygtj2mwx0t] {
    border-style: solid;
    border-color: var(--text-color);
}

.custom-color-picker-wrapper[b-ygtj2mwx0t] {
    position: relative;
    width: 60px;
    height: 60px;
}

.custom-color-picker-compact[b-ygtj2mwx0t] {
    width: 32px;
    height: auto;
    aspect-ratio: 1;
    flex: 0 0 auto;
    min-width: 28px;
}

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

.custom-color-button[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border-width: 2px;
}

.custom-color-button span[b-ygtj2mwx0t] {
    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-ygtj2mwx0t] {
    font-size: 1rem;
}

@media (hover: hover) {
    .custom-color-picker-wrapper:hover .custom-color-button[b-ygtj2mwx0t] {
        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-ygtj2mwx0t] {
        padding: 0;
        align-items: stretch;
        touch-action: none;
    }

    .modal-content[b-ygtj2mwx0t] {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

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

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

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

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

    .form-row[b-ygtj2mwx0t] {
        grid-template-columns: 1fr;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .modal-header h3[b-ygtj2mwx0t] {
        font-size: 1.1rem;
    }

    .color-picker[b-ygtj2mwx0t] {
        gap: 0.5rem;
    }

    .color-option[b-ygtj2mwx0t] {
        width: 40px;
        height: 40px;
    }

    .modal-footer[b-ygtj2mwx0t] {
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .modal-footer .btn[b-ygtj2mwx0t] {
        width: 100%;
        justify-content: center;
    }
}

/* Tag picker form row */
.tag-picker-form-row[b-ygtj2mwx0t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tag-picker-form-row .tag-hint[b-ygtj2mwx0t] {
    font-size: 0.875rem;
}

.tag-picker-form-row[b-ygtj2mwx0t]  .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-ygtj2mwx0t]  .tag-picker-btn:hover {
        border-color: #3788d8;
    }
}