/* /Layout/MainLayout.razor.rz.scp.css */
/* Cleared for custom landing page design */
/* /Layout/NavMenu.razor.rz.scp.css */
/* Cleared for custom landing page design */
/* /Pages/TasksPage.razor.rz.scp.css */
#container[b-qz6543du5n] {
    width: 100%;
    display: inline-block !important;
    margin: auto;
    padding: 0; /* remove all padding to maximize room for columns */
}

.pin[b-qz6543du5n] {
    align-self: center;
    visibility: hidden;
    cursor: pointer;
    position: absolute;
    top: 1px;
    right: 1px;
}

.item:hover .pin[b-qz6543du5n] {
    visibility: visible;
}

.card-title:focus ~ .pin[b-qz6543du5n] {
    visibility: hidden;
}

.masonry[b-qz6543du5n] {
    column-count: 3;
    column-gap: 16px;
    padding: 16px;
}

#items-wrapper[b-qz6543du5n],
#completed-wrapper[b-qz6543du5n],
#failed-items-container[b-qz6543du5n] {
    padding: 0;
    margin: 0 auto;
    position: relative;
    width: 100%;
    min-height: 50px;
}

/* Force smaller card width only on Tasks page to allow 4 columns */

/* Nudge the editable title and the input a bit upward on the Tasks page */
.new-task-editor-wrapper .card-header-row[b-qz6543du5n] {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: -4px;
    margin-bottom: 8px;
}

.new-task-editor-wrapper .header-center[b-qz6543du5n] {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.new-task-editor-wrapper .title-input[b-qz6543du5n] {
    margin: 0 !important;
    width: 100%;
}

.new-task-editor-wrapper[b-qz6543du5n]  .title-input input,
.new-task-editor-wrapper[b-qz6543du5n]  .title-input textarea {
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    text-align: center;
    color: var(--slack-text, #1f1f1f) !important;
}

.temp-title-input[b-qz6543du5n] {
    margin-top: -6px !important;
}

.temp-title-input[b-qz6543du5n]  input {
    text-align: center !important;
}

/* Section boundary and title styling */
.section-boundary[b-qz6543du5n] {
    margin-top: 28px;
}

.section-boundary .section-title[b-qz6543du5n] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 0 8px;
}

/* Optional placeholder for future tweaks specific to completed grid */

.tasks-header-container[b-qz6543du5n] {
    margin: 24px 0 32px 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
    padding: 0 32px;
    min-height: 80px;
    gap: 24px;
}

.new-task-editor-wrapper[b-qz6543du5n] {
    grid-column: 2;
    width: 560px !important;
    margin: 0 auto;
    z-index: 5;
    border-radius: 28px !important; /* Gemini-style rounded corners */
    padding: 10px 24px !important; /* Thinner vertical padding */
    position: relative !important;
}

.new-task-editor-wrapper[b-qz6543du5n]  .mud-input-control {
    margin: 0 !important;
}

.new-task-editor-wrapper[b-qz6543du5n]  .mud-input-input {
    padding: 4px 0 !important;
}

.editor-hint-absolute[b-qz6543du5n] {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.90rem;
    color: var(--slack-text-secondary, #64748b);
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.new-task-editor-wrapper:focus-within .editor-hint-absolute[b-qz6543du5n] {
    opacity: 0.75;
    transform: translateY(0);
}

.status-badges-wrapper[b-qz6543du5n] {
    grid-column: 3;
    justify-self: end;
    position: relative;
    z-index: 100;
    width: fit-content;
    margin: 0;
}

.status-badges-wrapper[b-qz6543du5n]  .mud-chipset {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

@media (min-width: 1150px) and (max-width: 1399.98px) {
    .status-badges-wrapper[b-qz6543du5n] {
        margin-top: 4px; /* Slight alignment shift for grid layout */
    }
    .status-badges-wrapper[b-qz6543du5n]  .mud-chipset {
        display: grid !important;
        grid-template-columns: repeat(2, 105px) !important;
        gap: 8px !important;
        width: fit-content !important;
    }
    .status-badges-wrapper[b-qz6543du5n]  .mud-chip {
        margin: 0 !important;
        width: 100% !important;
        display: inline-flex !important;
        justify-content: center !important;
    }
}
.random-color-switch[b-qz6543du5n]  .mud-typography {
    font-weight: 500 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.3px;
    text-transform: none;
    color: var(--slack-text-secondary, #64748b) !important;
}

.random-color-switch-container[b-qz6543du5n] {
    grid-column: 1;
    justify-self: start;
    transform: scale(0.85);
    transform-origin: left center;
    background: transparent;
    border: none;
    height: 32px;
    padding: 0;
    width: fit-content;
    display: flex;
    align-items: center;
    z-index: 10;
    opacity: 0.45;
    transition: opacity 0.2s ease-in-out;
}

.random-color-switch-container:hover[b-qz6543du5n] {
    opacity: 0.9;
}

@media (max-width: 1149.98px) {
    .random-color-switch-container[b-qz6543du5n] {
        grid-column: unset;
        justify-self: unset;
        position: static;
        transform: none;
        margin: 8px auto 0 auto;
        opacity: 0.8;
    }

    .tasks-header-container[b-qz6543du5n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px 0 12px 0;
        padding: 0 16px;
        min-height: auto;
        gap: 12px;
    }

    .new-task-editor-wrapper[b-qz6543du5n] {
        grid-column: unset;
        width: 100% !important;
        margin: 0;
        max-width: 560px;
    }

    .status-badges-wrapper[b-qz6543du5n] {
        grid-column: unset;
        justify-self: unset;
        position: relative;
        z-index: 100;
        width: 100%;
        margin: 4px 0 16px 0 !important;
        display: flex;
        justify-content: center;
        padding: 8px 0;
    }

    /* Show priority star button on active or focused focus-item-row on mobile/tablet */
    .focus-item-row:focus-within .priority-star-btn:not(.is-priority)[b-qz6543du5n],
    .focus-item-row.active .priority-star-btn:not(.is-priority)[b-qz6543du5n] {
        opacity: 0.8 !important;
        pointer-events: auto !important;
    }
}

/* Priority star button micro-animation */
.priority-star-btn[b-qz6543du5n] {
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out !important;
}
.priority-star-btn:hover[b-qz6543du5n] {
    transform: scale(1.18) !important;
}

/* Hide normal star button by default, show on hover */
.focus-item-row .priority-star-btn:not(.is-priority)[b-qz6543du5n] {
    opacity: 0;
    pointer-events: none;
}
.focus-item-row:hover .priority-star-btn:not(.is-priority)[b-qz6543du5n] {
    opacity: 0.4;
    pointer-events: auto;
}
.focus-item-row:hover .priority-star-btn:not(.is-priority):hover[b-qz6543du5n] {
    opacity: 1;
}

/* Checklist Progress Bar Styles inside Focus Session Pop Up */
.card-progress-bar-container[b-qz6543du5n] {
    display: flex;
    flex-direction: column;
}

.progress-track[b-qz6543du5n] {
    height: 8px;
    width: 100%;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    padding: 1px;
}

.progress-fill[b-qz6543du5n] {
    height: 100%;
    border-radius: 5px;
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1.5px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

/* Glass shine highlight for watery gel effect */
.progress-fill[b-qz6543du5n]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Glowing light tip highlight that travels with the progress */
.progress-fill[b-qz6543du5n]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.45);
    filter: blur(0.5px);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    z-index: 3;
}

.progress-fill.is-done[b-qz6543du5n]::after {
    display: none;
}

/* Align checkbox and star in Focus overlay checklist rows */
.focus-item-row .focus-item-content[b-qz6543du5n] {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.focus-item-row .focus-item-content[b-qz6543du5n]  .mud-checkbox {
    margin: 0 !important;
    margin-top: 1px !important;
    margin-left: -8px !important;
}

.focus-item-row .focus-item-content[b-qz6543du5n]  .mud-checkbox .mud-icon-button {
    padding: 2px !important;
    margin-right: 4px !important;
}

.focus-item-row .focus-item-content .focus-item-text[b-qz6543du5n] {
    display: block;
    line-height: 1.4;
    padding-top: 3px !important;
    font-weight: 540 !important;
    flex: 1;
    min-width: 0;
    user-select: none;
}

.focus-item-row.active .focus-item-text[b-qz6543du5n] {
    font-weight: 700 !important;
    color: var(--mud-palette-primary);
}


/* /Pages/ToDoCard.razor.rz.scp.css */
/* Scoped geometry removed - now global in app.css */


/* Clean 40% opacity for done cards to distinguish them clearly on the Task page */
[b-18ty6o2d37] .todo-card-textfield.done-card {
    opacity: 1;
    transform: scale(0.985);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important; /* soften elevation */
}

[b-18ty6o2d37] .todo-card-textfield.done-card:hover {
    opacity: 1;
    transform: scale(0.992);
}

/* FAILED CARD: Re-introducing failure theme but 'less dull' than before */
[b-18ty6o2d37] .todo-card-textfield.failed-card {
    filter: grayscale(0.7) brightness(0.95);
    opacity: 1; /* Clearly visible but still 'off' */
    border: 1px solid rgba(239, 68, 68, 0.5) !important; /* Defined red border */
    transform: scale(0.985);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1) !important;
}

[b-18ty6o2d37] .todo-card-textfield.failed-card:hover {
    filter: grayscale(0.3) brightness(1);
    opacity: 1;
}

/* LIMIT LOCKED CARD: Premium frosted theme with indigo highlight */
[b-18ty6o2d37] .todo-card-textfield.limit-locked-card {
    filter: grayscale(0.4) brightness(0.97);
    opacity: 0.85;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    transform: scale(0.985);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.05) !important;
    transition: all 0.25s ease-in-out;
}

[b-18ty6o2d37] .todo-card-textfield.limit-locked-card:hover {
    filter: grayscale(0.2) brightness(1);
    opacity: 0.95;
    border: 1px solid rgba(99, 102, 241, 0.55) !important;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.1) !important;
}

/* Show pin and footer actions only when card is hovered */
[b-18ty6o2d37] .todo-card-textfield .pin-on-hover,
[b-18ty6o2d37] .todo-card-textfield .actions-on-hover {
    opacity: 0;
    transition: opacity .15s ease-in-out;
}

/* Default: show on hover */
[b-18ty6o2d37] .todo-card-textfield:hover .pin-on-hover,
[b-18ty6o2d37] .todo-card-textfield:hover .actions-on-hover {
    opacity: 1;
}

/* Hide hover actions while editing any text inside the card (but keep it interactive if hovering) */
[b-18ty6o2d37] .todo-card-textfield:focus-within .pin-on-hover,
[b-18ty6o2d37] .todo-card-textfield:focus-within .actions-on-hover {
    opacity: 0; /* no !important so hover can override */
}

/* Allow showing the actions when hovering the card even during edit */
[b-18ty6o2d37] .todo-card-textfield:focus-within:hover .pin-on-hover,
[b-18ty6o2d37] .todo-card-textfield:focus-within:hover .actions-on-hover {
    opacity: 1;
}

[b-18ty6o2d37] .no-color-text input {
    display: none !important;
}

/* Keep the picker in the DOM for Popover anchoring but don't show the inline element */
[b-18ty6o2d37] .color-picker {
    visibility: hidden;
    height: 0;
    width: 0;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

[b-18ty6o2d37] .todo-card-textfield .mud-input,
[b-18ty6o2d37] .todo-card-textfield .mud-input input,
[b-18ty6o2d37] .todo-card-textfield .mud-input textarea {
    color: inherit !important;
    opacity: 1 !important;
    font-weight: 540 !important;
}

[b-18ty6o2d37] .todo-card-textfield .todo-item.done .mud-input input,
[b-18ty6o2d37] .todo-card-textfield .todo-item.done .mud-input textarea,
[b-18ty6o2d37] .todo-card-textfield .todo-item.done .task-item-display {
    text-decoration: line-through;
    opacity: 1 !important;
}

/* Bigger, centered title text */
[b-18ty6o2d37] .todo-card-textfield .title-input .mud-input input,
[b-18ty6o2d37] .todo-card-textfield .title-input .mud-input textarea {
    font-size: 1.25rem; /* ~20px */
    font-weight: 700;
    text-align: center;
}

/* Single header row: meta + title + countdown/pin all on one line */
[b-18ty6o2d37] .todo-card-textfield .card-header-row {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: -4px;
    margin-bottom: 8px;
}

[b-18ty6o2d37] .todo-card-textfield .card-header-row .header-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: -12px;
}

[b-18ty6o2d37] .todo-card-textfield .card-header-row .header-center {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

[b-18ty6o2d37] .todo-card-textfield .card-header-row .header-center .title-input {
    margin: 0 !important;
    width: 100%;
}

[b-18ty6o2d37] .todo-card-textfield .card-header-row .header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-right: -12px;
}

/* Ensure title boldness parity for non-active states - medium weight for legacy cards */
[b-18ty6o2d37] .todo-card-textfield.done-card .title-input .mud-input input,
[b-18ty6o2d37] .todo-card-textfield.failed-card .title-input .mud-input input {
    font-weight: 500 !important;
}

/* Item-level hover actions wrapper & centering */
[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

[b-18ty6o2d37] .todo-card-textfield .todo-item:hover .item-actions-wrapper,
[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper.always-visible {
    opacity: 1;
    pointer-events: auto;
}

/* Make item icon buttons compact */
[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper .mud-icon-button {
    padding: 2px !important;
}

[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper .mud-icon-button .mud-icon-root {
    font-size: 1.125rem !important; /* 18px */
}

/* Ensure inner wrappers (like tooltips and menus) align their children as flex items to prevent vertical drift */
[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper .mud-tooltip-root,
[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper .mud-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Semi-opaque on menu hover for clean visual balance */
[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper .item-pomodoro-menu {
    opacity: 0.6;
    transition: opacity 0.15s ease-in-out;
}

[b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper .item-pomodoro-menu:hover {
    opacity: 1;
}


/* Spacing between todo items for better multi-line readability */
[b-18ty6o2d37] .todo-card-textfield .todo-item {
    margin-bottom: 4px;
    align-items: flex-start !important; /* Align checkbox to top for multi-line tasks */
    position: relative;
    padding-right: 32px; /* Space for absolute hover buttons */
}

/* Done/completed items and failed cards don't have hover actions, so they don't need the extra padding */
[b-18ty6o2d37] .todo-card-textfield .todo-item.done {
    padding-right: 8px;
}

[b-18ty6o2d37] .todo-card-textfield.failed-card .todo-item {
    padding-right: 8px;
}

[b-18ty6o2d37] .todo-card-textfield .todo-item .mud-checkbox {
    margin: 0 !important;
    margin-top: 3px !important;
}

[b-18ty6o2d37] .todo-card-textfield .todo-item .mud-checkbox .mud-icon-button {
    padding: 2px !important;
    margin-right: 4px !important;
}

[b-18ty6o2d37] .todo-card-textfield .todo-item .task-item-display {
    line-height: 1.4;
    padding-top: 2px;
    font-weight: 540 !important;
    flex: 1;
    min-width: 0;
}

/* Active Pomodoro Pulse */
@keyframes pulse-timer-b-18ty6o2d37 {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}
[b-18ty6o2d37] .pulse-animation {
    animation: pulse-timer-b-18ty6o2d37 2s infinite ease-in-out;
}

/* Dopamine Checkbox Pop */
[b-18ty6o2d37] .todo-item .mud-checkbox.mud-checked {
    animation: checkbox-pop-b-18ty6o2d37 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkbox-pop-b-18ty6o2d37 {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Remove browser focus outline on the card */
[b-18ty6o2d37] .todo-card-textfield:focus {
    outline: none !important;
}

@media (max-width: 959.98px) {
    /* Show card-level actions by default on mobile/tablet */
    [b-18ty6o2d37] .todo-card-textfield .pin-on-hover,
    [b-18ty6o2d37] .todo-card-textfield .actions-on-hover {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Hide item-level actions by default on mobile/tablet, unless always-visible is set */
    [b-18ty6o2d37] .todo-card-textfield .todo-item .item-actions-wrapper:not(.always-visible) {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Show item-level actions ONLY when the specific todo-item is focused */
    [b-18ty6o2d37] .todo-card-textfield .todo-item:focus-within .item-actions-wrapper {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    [b-18ty6o2d37] .todo-card-textfield .todo-item:focus-within .item-actions-wrapper .item-pomodoro-menu {
        opacity: 0.8 !important;
    }

    /* Show priority star button on mobile/tablet when the specific todo-item is focused */
    [b-18ty6o2d37] .todo-card-textfield .todo-item:focus-within .priority-star-btn:not(.is-priority) {
        opacity: 0.8 !important;
        pointer-events: auto !important;
    }
}

/* Priority star button micro-animation */
[b-18ty6o2d37] .todo-card-textfield .priority-star-btn {
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out !important;
}
[b-18ty6o2d37] .todo-card-textfield .priority-star-btn:hover {
    transform: scale(1.18) !important;
}

/* Hide normal star button by default, show on hover */
[b-18ty6o2d37] .todo-card-textfield .todo-item .priority-star-btn:not(.is-priority) {
    opacity: 0;
    pointer-events: none;
}
[b-18ty6o2d37] .todo-card-textfield .todo-item:hover .priority-star-btn:not(.is-priority) {
    opacity: 0.4;
    pointer-events: auto;
}
[b-18ty6o2d37] .todo-card-textfield .todo-item:hover .priority-star-btn:not(.is-priority):hover {
    opacity: 1;
}

/* Premium In-Card Progress Bar Styles */
.card-progress-bar-container[b-18ty6o2d37] {
    display: flex;
    flex-direction: column;
}

.progress-track[b-18ty6o2d37] {
    height: 8px;
    width: 100%;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    padding: 1px;
}

.progress-fill[b-18ty6o2d37] {
    height: 100%;
    border-radius: 5px;
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1.5px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

/* Glass shine highlight for watery gel effect */
.progress-fill[b-18ty6o2d37]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Glowing light tip highlight that travels with the progress */
.progress-fill[b-18ty6o2d37]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: rgba(255, 255, 255, 0.45);
    filter: blur(0.5px);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
    z-index: 3;
}

/* Dark mode overrides */
.mud-theme-dark .progress-track[b-18ty6o2d37] {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 2.5px rgba(0, 0, 0, 0.25);
}

/* Completed Card progress bar overrides */
[b-18ty6o2d37] .done-card .progress-fill {
    transform: translateX(0) !important;
}

[b-18ty6o2d37] .done-card .progress-fill::after {
    display: none;
}