/* ===== Workspace shell (Odoo-inspired, shared by every MainLayout page) =====
   Linked globally from Areas/Blazor/App.razor after ui-module.css.
   These are the shared workspace classes for every MainLayout module,
   including the Todo reference pages; the todo-* prefix is historical.
   Every selector is scoped to the workspace shell, page containers or the
   MudBlazor internals that live inside them. Shared .ui-* classes are not
   redefined globally. */

:root {
    --todo-shell-bg: #f5f6f8;
    --todo-border: #dee2e6;
    --todo-text: #1e293b;
    --todo-text-muted: #64748b;
}

/* ===== Shell ===== */
.mud-appbar.todo-shell-appbar {
    background-color: var(--todo-shell-bg);
}

.todo-appbrand {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
    margin-right: .25rem;
    text-decoration: none;
}

.todo-appbrand-name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-dark);
    white-space: nowrap;
}

/* Crown shortcut to the Modules landing page, left of the user avatar. */
.todo-crown-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-right: .15rem;
    border-radius: .5rem;
    color: #d97706;
    flex-shrink: 0;
    transition: color .15s, background-color .15s;
}

.todo-crown-link:hover {
    color: #b45309;
    background: rgba(217, 119, 6, .1);
}

.todo-crown-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary, var(--primary));
    outline-offset: -2px;
}

.todo-topnav {
    display: flex;
    align-items: stretch;
    gap: .15rem;
    height: 100%;
    margin-left: 1rem;
}

.todo-topnav-link {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 .8rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s, background-color .15s, border-color .15s;
}

/* Top navigation items are buttons (MudMenu activators), not links. */
button.todo-topnav-link {
    background: none;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    font-family: inherit;
    cursor: pointer;
}

.todo-topnav .mud-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
}

button.todo-topnav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary, var(--primary));
    outline-offset: -2px;
}

/* Active menu item inside the top-nav dropdowns. The popover renders in the
   app-root MudPopoverProvider, so this cannot be scoped under .todo-topnav. */
.mud-menu-item.active {
    color: var(--primary);
    background: var(--primary-light);
}

.todo-topnav-link:hover {
    color: var(--mud-palette-primary, var(--primary));
    background: rgba(79, 70, 229, .06);
}

.todo-topnav-link.active {
    color: var(--mud-palette-primary, var(--primary));
    border-bottom-color: var(--mud-palette-primary, var(--primary));
    background: rgba(79, 70, 229, .08);
}

.mud-main-content:has(.content-area.todo-shell-content) {
    min-height: 0;
}

.content-area.todo-shell-content {
    padding: 0;
    height: calc(100dvh - var(--mud-appbar-height, 60px));
    min-height: 0;
    overflow: hidden;
    background: var(--todo-shell-bg);
}

/* Non-list Todo pages (Detail) keep the fixed shell but scroll their own
   content instead of being clipped. Index and Create/Edit use dedicated
   containers and manage their own internal scroll regions. */
.content-area.todo-shell-content > .ui-page {
    height: 100%;
    overflow-y: auto;
    padding: 1.25rem;
}

.todo-index-page,
.todo-form-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--todo-shell-bg);
}

.todo-index-page.todo-workspace-loading,
.todo-form-page.todo-workspace-loading {
    align-items: center;
    justify-content: center;
}

/* ===== List header and toolbar ===== */
.todo-list-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: .5rem 1rem;
    background: #f8fafc;
}

.todo-list-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--todo-text);
}

.todo-list-title .mud-icon-root {
    color: var(--mud-palette-primary, var(--primary));
}

.todo-list-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.todo-list-head .todo-search {
    flex: 1 1 220px;
    max-width: 420px;
}

.todo-list-head .todo-search .mud-input {
    font-size: .8125rem;
}

/* ===== Non-table / non-form page body =====
   Dashboards, chat and viewers keep their specialized content inside this
   scrollable white area below the shared list header. */
.todo-page-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem;
    overflow-y: auto;
    background: #fff;
}

/* Dashboard sections: MudBlazor grid spacing only separates items inside one
   grid; consecutive grids and the trailing panel otherwise touch. */
.todo-dashboard-body > .mud-grid {
    margin-bottom: 1.5rem;
}

/* ===== Optional index filters region =====
   Rendered between the list header and the table panel. It sizes to its
   content so the grid keeps its remaining height, and caps very tall filter
   sets with its own scrollbar. */
.todo-index-filters {
    flex: 0 0 auto;
    padding: .75rem 1rem;
    background: var(--todo-shell-bg);
    border-bottom: 1px solid var(--todo-border);
    max-height: 40dvh;
    overflow-y: auto;
}

/* ===== Table panel ===== */
.todo-table-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
}

.ui-todo-grid.mud-table {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: auto;
    min-height: 0;
    background: #fff;
    border-radius: 0;
}

.ui-todo-grid .mud-table-container {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
}

.ui-todo-grid .mud-table-pagination {
    flex: 0 0 auto;
    background: #fff;
}

.ui-todo-grid .mud-table-pagination-toolbar {
    min-height: 48px;
    padding-right: .5rem;
    padding-left: .5rem;
}

.ui-todo-grid .mud-table-head .mud-table-row .mud-table-cell,
.ui-todo-grid.mud-table-sticky-header .mud-table-head .mud-table-cell {
    padding: .55rem 1rem;
    background: #f8fafc;
    color: #475569;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--todo-border);
}

.ui-todo-grid .mud-table-body .mud-table-row .mud-table-cell {
    padding: .55rem 1rem;
    font-size: .8125rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.ui-todo-grid .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

/* Vertical DOM scrollbar (grid-hscroll.js). Same rationale as the horizontal
   bar in ui-module.css: Chromium paints the arrow cursor over native
   scrollbar rects, so the vertical bar is a real DOM element that honours
   cursor:pointer. The track overlays the grid's right edge instead of
   reserving layout space, keeping the grid full-bleed. */
.js-vscroll-bar,
.js-vscroll-hide {
    scrollbar-width: none;
}

.js-vscroll-bar::-webkit-scrollbar:vertical,
.js-vscroll-hide::-webkit-scrollbar:vertical {
    display: none;
    width: 0;
}

.grid-vscroll-track {
    position: fixed;
    display: none;
    width: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    cursor: pointer;
    z-index: 500;
    user-select: none;
    touch-action: none;
}

.grid-vscroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 3px;
    cursor: pointer;
}

.grid-vscroll-thumb:hover {
    background: #94a3b8;
}

/* ===== Form toolbar ===== */
.todo-form-page .todo-form-shell {
    flex: 1 1 auto;
}

.todo-form-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.todo-form-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
    padding: .45rem 1.25rem;
    border-bottom: 1px solid var(--todo-border);
    background: var(--todo-shell-bg);
}

.todo-form-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.todo-form-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    margin-left: auto;
    font-size: .8rem;
    color: var(--todo-text-muted);
}

.todo-form-breadcrumb a {
    color: var(--todo-text-muted);
    text-decoration: none;
}

.todo-form-breadcrumb a:hover {
    color: var(--mud-palette-primary, var(--primary));
}

.todo-breadcrumb-current {
    max-width: 260px;
    overflow: hidden;
    color: var(--todo-text);
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ===== Form workspace ===== */
.todo-form-workspace {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 320px;
    min-height: 0;
}

.todo-form-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    background: #fff;
    border-right: 0;
}

.todo-form-alert {
    flex: 0 0 auto;
    padding: .75rem 1.25rem 0;
}

.todo-form-head {
    flex: 0 0 auto;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 0;
    border-radius: 0;
}

.todo-form-module {
    margin: 0 0 .15rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--todo-text);
}

.todo-form-heading {
    margin: 0 0 .85rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--todo-text);
}

/* Property labels are bold in the header grid and all tab panels */
.todo-form-main .ui-field-label {
    font-weight: 600;
}

/* Item dialog property labels match the form */
.todo-item-dialog .ui-field-label {
    font-weight: 600;
}

/* Control values and placeholders match the label size, without the bold weight. */
.todo-form-main .mud-input,
.todo-form-main .mud-input-slot,
.todo-form-main .mud-input-control input,
.todo-form-main .mud-input-control textarea,
.todo-item-dialog .mud-input,
.todo-item-dialog .mud-input-slot,
.todo-item-dialog .mud-input-control input,
.todo-item-dialog .mud-input-control textarea {
    font-size: .8rem;
    font-weight: 400;
}

/* Read-only item dialog: values are normal weight and reserve the same vertical
   space as the edit-mode controls (dense outlined input = 40px + 2x4px margin,
   medium switch = 38px) so both modes render the same dialog height. */
.todo-item-dialog .detail-value {
    font-weight: 400;
    min-height: 3rem;
    display: flex;
    align-items: center;
}

.todo-item-dialog .detail-status {
    min-height: 2.375rem;
    display: flex;
    align-items: center;
}

/* Form fields: label left, control right (header and tab panels) */
.todo-form-main .mud-grid-item.todo-field {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: start;
    column-gap: .9rem;
}

.todo-form-main .todo-field > .ui-field-label {
    margin-bottom: 0;
    padding-top: .6rem;
}

.todo-form-main .todo-field > .ui-ticks,
.todo-form-main .todo-field > .ui-help-text,
.todo-form-main .todo-field > .ui-field-error {
    grid-column: 2;
}

/* Read-only Progress: static bar centered against the dense 40px inputs */
.todo-form-head .todo-progress-readonly {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
}

.todo-tab-content .todo-progress-readonly {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
}

.todo-form-tabs.mud-tabs {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 0;
    margin-top: 1.5rem;
    background: #fff;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.todo-form-tabs .mud-tabs-tabbar {
    flex: 0 0 auto;
    padding: 0 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--todo-border);
    border-radius: 0;
}

/* MudBlazor gives the tabbar a 48px min-height. The folder tabs are shorter,
   so that extra space would stop the active tab's -1px notch from reaching
   the tabbar border. Let the tab row size itself from the tabs instead. */
.todo-form-tabs .mud-tabs-tabbar-inner {
    min-height: 0;
}

.todo-form-tabs .mud-tabs-tabbar-content {
    overflow: visible;
}

.todo-form-tabs .mud-tabs-tabbar-wrapper {
    align-items: flex-end;
}

.todo-form-tabs .mud-tabs-tabbar-wrapper > .mud-tooltip-root,
.todo-form-tabs .mud-tabs-tabbar-wrapper > .d-inline-block {
    display: flex;
    align-items: flex-end;
}

.todo-form-tabs .mud-tabs-panels {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.todo-form-tabs .mud-tab {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    min-width: auto;
    min-height: 40px;
    margin-top: .4rem;
    margin-bottom: -1px;
    padding: 0 1.1rem;
    color: var(--todo-text-muted);
    background: #eef2f6;
    border: 1px solid var(--todo-border);
    border-bottom: 0;
    border-radius: 0;
    font-size: .8125rem;
    font-weight: 500;
    text-transform: none;
}

.todo-form-tabs .mud-tab:hover {
    color: var(--todo-text);
    background: #e2e8f0;
}

.todo-form-tabs .mud-tab.mud-tab-active,
.todo-form-tabs .mud-tab.mud-tab-active:hover {
    color: var(--mud-palette-primary, var(--primary));
    background: #fff;
    border-color: var(--todo-border);
    border-bottom-color: #fff;
    border-top: 3px solid var(--mud-palette-primary, var(--primary));
    font-weight: 600;
}

.todo-tab-content {
    min-width: 0;
    padding: 1rem 1.25rem 2rem;
}

.todo-tab-content .ui-category-card {
    padding: .9rem .75rem;
}

.todo-tab-content .ui-category-icon {
    width: 34px;
    height: 34px;
    margin-bottom: .5rem;
}

.todo-form-main .ui-category-card.readonly {
    cursor: default;
}

.todo-form-main .ui-category-card.readonly:not(.selected):hover {
    border-color: #e2e8f0;
}

/* Nested components (items editor and attachments) already render their own
   .ui-panel root. Flatten those cards inside the form without touching the
   shared ui-module.css definitions. */
.todo-form-main .ui-panel {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.todo-form-main .ui-panel-header {
    padding: .25rem 0 .6rem;
    border-bottom: 1px solid #f1f5f9;
}

.todo-form-main .ui-panel-body {
    padding: .75rem 0 0;
}

.todo-form-main .ui-panel + .ui-panel {
    margin-top: 1.25rem;
}

.todo-form-main .ui-panel-title {
    font-size: .9rem;
}

.todo-form-main .ui-quick-add {
    padding: .75rem;
    margin-bottom: .85rem;
}

/* ===== Audit panel ===== */
.todo-form-audit {
    min-height: 0;
    padding: 1rem;
    overflow-y: auto;
    background: var(--todo-shell-bg);
    border-left: 1px solid var(--todo-border);
}

.todo-form-audit > .ui-panel {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.todo-form-audit > .ui-panel > .ui-panel-header {
    padding: 0 0 .6rem;
    border-bottom: 1px solid var(--todo-border);
}

.todo-form-audit > .ui-panel > .ui-panel-body {
    padding: .85rem 0 0;
}

.todo-form-audit .detail-label {
    text-transform: none;
    font-weight: 600;
}

.todo-form-audit .detail-value {
    font-weight: 400;
}

/* ===== Create result ===== */
.todo-form-result {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem;
    overflow-y: auto;
}

/* ===== Disabled buttons =====
   MudBlazor paints the label/icon with --mud-palette-action-disabled (#cbd5e1)
   on the disabled fill, which is almost invisible. Variant-scoped variable
   overrides keep loading labels, icons and inline spinners legible through
   normal specificity. Selectors are global because dialogs render under
   MudDialogProvider at app root. */
.mud-button-filled:disabled,
.mud-button-filled.mud-disabled {
    --mud-palette-action-disabled: #475569;
    --mud-palette-action-disabled-background: #e2e8f0;
}

.mud-button-outlined:disabled,
.mud-button-outlined.mud-disabled {
    --mud-palette-action-disabled: #64748b;
}

.mud-button-text:disabled:not(.mud-icon-button),
.mud-button-text.mud-disabled:not(.mud-icon-button) {
    --mud-palette-action-disabled: #64748b;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
    .content-area.todo-shell-content {
        height: auto;
        min-height: calc(100dvh - var(--mud-appbar-height, 60px));
        overflow: visible;
    }

    .content-area.todo-shell-content > .ui-page {
        height: auto;
        overflow: visible;
    }

    .todo-index-page,
    .todo-form-page {
        height: auto;
        min-height: 0;
    }

    .todo-form-shell {
        height: auto;
    }

    .todo-form-workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .todo-form-main {
        padding: 0;
        overflow: visible;
    }

    .todo-form-tabs.mud-tabs,
    .todo-form-tabs .mud-tabs-panels {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .todo-form-audit {
        overflow: visible;
        border-top: 1px solid var(--todo-border);
        border-left: 0;
    }

    .todo-index-filters {
        max-height: none;
        overflow: visible;
    }

    .todo-table-panel {
        height: auto;
        min-height: 0;
    }

    .todo-page-body {
        height: auto;
        overflow: visible;
    }

    .ui-todo-grid.mud-table {
        height: auto;
    }

    .ui-todo-grid .mud-table-container {
        max-height: 65dvh;
        overflow: auto;
    }

    .todo-list-head .todo-search {
        max-width: none;
    }

    .todo-form-result {
        flex: 0 0 auto;
        overflow: visible;
    }
}

@media (max-width: 600px) {
    .todo-appbrand-name {
        display: none;
    }

    .todo-topnav {
        margin-left: .35rem;
    }

    .todo-topnav-link {
        padding: 0 .5rem;
        font-size: .75rem;
    }

    .todo-form-toolbar {
        padding: .45rem .85rem;
    }

    .todo-form-breadcrumb {
        width: 100%;
        margin-left: 0;
    }

    .todo-form-main .mud-grid-item.todo-field {
        grid-template-columns: minmax(0, 1fr);
    }

    .todo-form-main .todo-field > .ui-field-label {
        padding-top: 0;
        margin-bottom: .35rem;
    }

    .todo-form-main .todo-field > .ui-ticks,
    .todo-form-main .todo-field > .ui-help-text,
    .todo-form-main .todo-field > .ui-field-error {
        grid-column: 1;
    }
}