/* NOTE: Inventory page layout + management dialogs — prefix: mw-im */

/* NOTE: Variation E layout — sidebar + center + bottom strip */

.mw-im-layout {
    display: grid;
    grid-template-columns: var(--mw-im-sidebar-width, 220px) 6px 1fr;
    grid-template-rows: 1fr 6px var(--mw-im-bottom-height, 180px);
    /* NOTE: The app uses a DENSE MudAppBar, so MudMainContent's padding-top is
       (appbar - appbar/4) = appbar*0.75, not the full appbar. The shared --mw-full-height subtracts
       the FULL appbar, which leaves an appbar/4 (~16px) gap at the bottom — so subtract the dense
       padding here instead, to fill exactly to the viewport bottom. */
    height: calc(100vh - var(--mud-appbar-height) + var(--mud-appbar-height) / 4);
}

/* NOTE: The sidebar/content divider line lives on the resizer's right edge (col 2/3 boundary), NOT on the
   sidebar, so it is flush with the content column — the grid + bottom-strip horizontal borders meet it with
   no gap across the 6px resizer track. */
.mw-im-sidebar {
    grid-column: 1;
    grid-row: 1 / 4;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mw-im-sidebar-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mw-im-sidebar-panel + .mw-im-sidebar-panel {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mw-im-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.mw-im-sidebar-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 2px;
}

.mw-im-center {
    grid-column: 3;
    grid-row: 1;
    overflow: hidden;
}

/* NOTE: The embedded grid must not draw its own edge lines where the page already draws a divider —
   the page owns the grid↔bottom-strip divider (.mw-im-bottom's border-top) AND the sidebar↔grid
   divider (.mw-im-sidebar-resizer's border-right). The grid's own faint border segments next to those
   lines brighten some stretches and not others, which reads as gaps in the divider. Outer drop
   shadows go too (the inset top highlight stays). */
.mw-im-center .mw-dg-container {
    border-bottom: none;
    border-left: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mw-im-center .mw-dg-toolbar {
    border-left: none;
    border-top-left-radius: 0;
}

/* NOTE: The sidebar trees scroll; a default-width scrollbar sits directly against the divider line and
   its track/thumb segments read as interruptions of it — match the grid's thin transparent style. */
.mw-im-sidebar-tree {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.mw-im-bottom {
    grid-column: 3;
    grid-row: 3;
    --mw-im-bottom-header-height: 26px;
    border-top: 1px solid var(--mud-palette-lines-default);
    display: grid;
    grid-template-columns: calc(50% + var(--mw-im-bottom-offset, 0px)) 6px 1fr;
    overflow: hidden;
}

.mw-im-bottom-panel {
    overflow-y: auto;
}

/* NOTE: Single-line divider between the two bottom panels — one 1px line on the resizer's right edge,
   matching the sidebar↔grid divider (.mw-im-sidebar-resizer) so every divider on the page reads the same. */
.mw-im-bottom-resizer {
    position: relative;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* NOTE: Continue the header band + its underline across the 6px resizer track — without this the two
   panel headers' border-bottoms stop at the panel edges, leaving a notch around the divider line. */
.mw-im-bottom-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mw-im-bottom-header-height);
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    pointer-events: none;
}

/* NOTE: Draggable panel dividers (sidebar↔grid, bottom device-overview↔by-team). Pure Blazor pointer
   events; the 6px grabber fills its own grid track, transparent at rest, primary-tinted on hover/drag. */
.mw-im-col-resizer {
    cursor: col-resize;
    background: transparent;
    transition: background 0.15s;
    z-index: 5;
}

.mw-im-col-resizer:hover,
.mw-im-col-resizer.mw-im-resizing {
    background: var(--mud-palette-primary);
    opacity: 0.4;
}

.mw-im-sidebar-resizer {
    grid-column: 2;
    grid-row: 1 / 4;
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* NOTE: Horizontal divider (grid ↔ bottom strip) — drag vertically to resize the bottom-strip height.
   Lives in its own 6px row track in column 3; the strip's border-top is the rest-state line. The track
   itself is surface-coloured so the grid above flows seamlessly into the single 1px line (a transparent
   track shows the darker page background and reads as a fat double border). */
.mw-im-row-resizer {
    grid-column: 3;
    grid-row: 2;
    cursor: row-resize;
    background: var(--mud-palette-surface);
    transition: background 0.15s;
    z-index: 5;
}

.mw-im-row-resizer:hover,
.mw-im-row-resizer.mw-im-resizing {
    background: var(--mud-palette-primary);
    opacity: 0.4;
}

/* Full-screen surface that captures pointer moves during a resize drag so events aren't lost over the grid. */
.mw-im-resize-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    cursor: col-resize;
}

.mw-im-resize-overlay--row {
    cursor: row-resize;
}

/* NOTE: Fixed height (not padding-driven) so the resizer's ::after header-band continuation lines up
   with the underline pixel-exactly. */
.mw-im-bottom-header {
    height: var(--mw-im-bottom-header-height);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
}

.mw-im-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.78rem;
}

.mw-im-borrowed-row {
    display: grid;
    grid-template-columns: 1fr 1fr 40px;
    padding: 3px 10px;
    font-size: 0.75rem;
    align-items: center;
}

.mw-im-borrowed-team {
    font-weight: 500;
}

.mw-im-borrowed-cat {
    color: var(--mud-palette-text-secondary);
}

/* NOTE: Every borrowed-by-team row is a rented count → share the amber "rented" colour used by
   MwAvailabilityCount, so the number language reads consistently across the page. */
.mw-im-borrowed-count {
    font-family: 'JetBrains Mono', monospace;
    text-align: right;
    font-size: 0.72rem;
    color: var(--mud-palette-warning);
}

/* NOTE: Sidebar filter tree nodes */

.mw-im-filter-node {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px 3px 4px;
    border-radius: 4px;
    font-size: 0.78rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s;
}

/* NOTE: Fixed-width, centred chevron slot so the tree-connector trunk always emanates from the same X. */
.mw-im-expand {
    width: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mw-im-filter-node:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.mw-im-filter-node.active {
    background-color: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
}

.mw-im-filter-node .mw-im-dot {
    width: 8px;
    height: 8px;
}

/* NOTE: Nested tree connectors — mirrors the MwDataGrid tree (`└` at the last child, `├` + a through-line
   for the rest, and a trunk from each open chevron down to its children). Pure CSS: `:last-child` picks the
   `└` vs `├`, `:not(:empty)` gates the trunk to expanded nodes. The guide line sits under the parent's
   chevron centre (node padding-left 4 + chevron half 10 = 14; children indent 16 → guide at -2 of the child). */
.mw-im-filter-children {
    padding-left: 16px;
    position: relative;
}

.mw-im-cat-node,
.mw-im-loc-node {
    position: relative;
}

/* Incoming vertical (row top → row centre) for every child row. */
.mw-im-filter-children > .mw-im-cat-node > .mw-im-filter-node::before,
.mw-im-filter-children > .mw-im-loc-node > .mw-im-filter-node::before {
    content: "";
    position: absolute;
    left: -2px;
    top: -1px;
    height: calc(50% + 1px);
    width: 1px;
    background: var(--mud-palette-lines-default);
    pointer-events: none;
}

/* Horizontal elbow (row centre → chevron left edge). */
.mw-im-filter-children > .mw-im-cat-node > .mw-im-filter-node::after,
.mw-im-filter-children > .mw-im-loc-node > .mw-im-filter-node::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    width: 6px;
    height: 1px;
    background: var(--mud-palette-lines-default);
    pointer-events: none;
}

/* Leaf rows (no chevron) extend the elbow past the placeholder to almost reach the colour dot. */
.mw-im-filter-children > .mw-im-cat-node > .mw-im-filter-node:not(.mw-im-has-children)::after,
.mw-im-filter-children > .mw-im-loc-node > .mw-im-filter-node:not(.mw-im-has-children)::after {
    width: 24px;
}

/* Non-last children keep the vertical running full height (`├` trunk + through-line past their subtree). */
.mw-im-filter-children > .mw-im-cat-node:not(:last-child)::before,
.mw-im-filter-children > .mw-im-loc-node:not(:last-child)::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 12px;
    bottom: -1px;
    width: 1px;
    background: var(--mud-palette-lines-default);
    pointer-events: none;
}

/* Trunk from an open chevron down to its children's branch lines (only when the group is expanded). */
.mw-im-filter-children:not(:empty)::before {
    content: "";
    position: absolute;
    left: 14px;
    top: -14px;
    height: 14px;
    width: 1px;
    background: var(--mud-palette-lines-default);
    pointer-events: none;
}

.mw-im-filter-count {
    margin-left: auto;
    font-size: 0.68rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--mud-palette-text-secondary);
}

/* NOTE: Editable sidebar tree — rename input, hover Add/Color/Delete menu, drag drop-zones */
.mw-im-filter-node {
    position: relative;
}

.mw-im-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mw-im-filter-node .mw-im-node-actions {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    gap: 2px;
    background: var(--mud-palette-surface);
    padding: 0 2px;
    border-radius: 4px;
}

.mw-im-filter-node:hover .mw-im-node-actions {
    opacity: 1;
}

/* Empty child zones become droppable targets only while a tree drag is active */
.mw-im-tree-dragging .mw-im-filter-children:empty {
    min-height: 12px;
    outline: 1px dashed var(--mud-palette-primary);
    outline-offset: -3px;
    border-radius: 4px;
}

/* NOTE: Filter chip bar */

.mw-im-filter-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-wrap: wrap;
    min-height: 30px;
}

.mw-im-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    background: var(--mud-palette-primary-lighten);
    color: var(--mud-palette-primary);
    cursor: pointer;
    transition: background-color 0.1s;
}

.mw-im-filter-chip:hover {
    background: var(--mud-palette-primary-hover);
}

/* NOTE: Management dialogs */

.mw-im-tree-zone {
    min-height: 40px;
    padding: 4px 0;
}

.mw-im-node {
    margin-left: 0;
}

.mw-im-node-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
}

.mw-im-drag-handle {
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}

.mw-im-node-content:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.mw-im-node-selected {
    background-color: var(--mud-palette-primary-lighten) !important;
}

.mw-im-child-zone {
    margin-left: 24px;
    min-height: 8px;
    border-left: 1px dashed var(--mud-palette-lines-default);
    padding-left: 8px;
}

.mw-im-color-dot {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.mw-im-color-dot::-webkit-color-swatch-wrapper {
    padding: 0;
}

.mw-im-color-dot::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.mw-im-color-dot::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.mw-im-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mw-im-name {
    flex: 1;
    min-width: 0;
}

.mw-im-name-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 4px;
    color: inherit;
    font: inherit;
    padding: 2px 6px;
    outline: none;
    user-select: text;
    cursor: text;
}

.mw-im-count {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-left: auto;
    flex-shrink: 0;
}

.mw-im-node-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}

.mw-im-node-content:hover .mw-im-node-actions {
    opacity: 1;
}

/* NOTE: Responsive layout — the page's C# viewport observer adds the modifier classes at MudBlazor's
   breakpoints (narrow = below Md/960px, phone = Xs/below 600px); these rules restyle what that render
   tree needs. Overlay panel + bottom nav sizes are shared via variables. */

.mw-im-layout {
    --mw-im-bottom-nav-height: 56px;
}

/* Narrow (tablet + phone): no sidebar column — everything spans the single track. */
.mw-im-layout--narrow {
    grid-template-columns: 1fr;
}

.mw-im-layout--narrow .mw-im-center,
.mw-im-layout--narrow .mw-im-row-resizer,
.mw-im-layout--narrow .mw-im-bottom {
    grid-column: 1;
}

/* Phone: no bottom strip rows either, and the fixed bottom nav eats its height off the layout. */
.mw-im-layout--phone {
    grid-template-rows: 1fr;
    height: calc(100vh - var(--mud-appbar-height) + var(--mud-appbar-height) / 4 - var(--mw-im-bottom-nav-height));
}

/* NOTE: Narrow bottom strip — the two dashboard panels share one full-width panel behind tabs. */
.mw-im-bottom--tabbed {
    display: flex;
    flex-direction: column;
}

.mw-im-bottom-tabs {
    display: flex;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.mw-im-bottom-tab {
    appearance: none;
    border: none;
    background: none;
    font-family: inherit;
    padding: 5px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    position: relative;
}

.mw-im-bottom-tab--active {
    color: var(--mud-palette-primary);
}

.mw-im-bottom-tab--active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -1px;
    height: 2px;
    background: var(--mud-palette-primary);
}

.mw-im-bottom--tabbed .mw-im-bottom-panel {
    flex: 1;
    min-height: 0;
}

/* NOTE: Overlay filter panel (narrow viewports) — a left drawer on tablets; the phone media query
   below re-presents the same element as a bottom sheet. */
.mw-im-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1299;
}

.mw-im-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 300px;
    max-width: 85vw;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
    z-index: 1300;
    display: flex;
    flex-direction: column;
}

.mw-im-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 6px 6px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.mw-im-drawer-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 599.98px) {
    .mw-im-drawer {
        top: auto;
        right: 0;
        bottom: 0;
        width: auto;
        max-width: none;
        height: 70vh;
        border-right: none;
        border-top: 1px solid var(--mud-palette-lines-default);
        border-radius: 14px 14px 0 0;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.55);
    }
}

/* NOTE: Phone Dashboard view — the bottom strip's two panels stacked as full-width cards. */
.mw-im-phone-dash {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mw-im-dash-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    padding-bottom: 4px;
}

/* NOTE: Phone bottom navigation — fixed to the viewport bottom, switches Items <-> Dashboard. */
.mw-im-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mw-im-bottom-nav-height, 56px);
    display: flex;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    z-index: 1200;
}

.mw-im-bottom-nav-item {
    flex: 1;
    appearance: none;
    border: none;
    background: none;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.mw-im-bottom-nav-item--active {
    color: var(--mud-palette-primary);
}