/* MudBlazor supplies the component styling; this file carries only what is specific to the
   explorer. Keeping it small is the point — anything that belongs to a theme belongs in
   MudThemeProvider instead, where both light and dark get it. */

html,
body {
    height: 100%;
}

/* A long file name must not widen the table past the viewport. */
.mud-table-cell {
    word-break: break-word;
}

/* The folder tree's own scroll region. MudTable bounds its own height with a Height parameter;
   MudTreeView has one too, but it clips the scrollbar inside the tree's padding, so the pane
   around it carries the bound instead. Without one, a deep tree and a long listing share a single
   page scrollbar and neither is usable.

   60vh is the bound the file table already uses, so neither pane can grow the page on its own.
   Below MudBlazor's md breakpoint the grid stacks them, and a tree still claiming 60vh would push
   the file list most of the way off a phone screen — hence the shorter bound there. A long folder
   name scrolls sideways inside the pane rather than widening the page. */
.explorer-tree-pane {
    height: 60vh;
    overflow: auto;
}

@media (max-width: 959.98px) {
    .explorer-tree-pane {
        height: 40vh;
    }
}

/* The drop target inside a tree node's label. It takes the label's place, so mud-treeview-item-label
   gives it flex-grow and it reaches from the folder icon to the right edge of the pane.

   pointer-events on the children is the load-bearing line. dragleave fires when the pointer
   crosses onto a child element as well as when it leaves the zone, so with the label text as a
   target of its own the highlight would flicker off and on across every word — and on a Blazor
   Server circuit each of those is a round trip. With the children transparent to the pointer,
   every drag event in the zone addresses the zone. Clicks are unaffected: an event on a
   pointer-events:none child is retargeted to this div, which has no click handler of its own and
   lets it bubble to the tree item that does. */
.explorer-drop-zone {
    display: flex;
    align-items: center;
    min-width: 0;
    border-radius: 4px;
}

.explorer-drop-zone > * {
    pointer-events: none;
}

/* A dashed outline rather than a border: a border would resize the row as it appears and make the
   tree twitch under the pointer. */
.explorer-drop-zone-over {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -2px;
    background-color: var(--mud-palette-primary-hover);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1200;
    padding: 0.75rem 1.25rem;
    background: #fdf0d5;
    color: #3a2c00;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Icon colour, taken from the theme rather than written as a literal, so the file list and the
   folder tree cannot drift to two different yellows. The tree sets IconColor="Color.Warning" on a
   folder node; these classes are the file list saying the same thing through the only hook MudIcon
   offers there. */
.rf-icon-folder {
    color: var(--mud-palette-warning);
}

/* Quieter than a folder on purpose. The glyph has already said what the file is, and a second
   loud colour in the row would leave the eye nothing to land on. */
.rf-icon-file {
    color: var(--mud-palette-text-secondary);
}

/* Tabular figures down the Size column, so 8.1 MB and 128 KB line up on the decimal instead of
   drifting by the width of a '1'. Deliberately not a monospace face: switching families for one
   column is louder than the problem, and the UI face already has the numerals.

   Right-aligned as the other half of the same decision: with the units flush right, magnitudes
   are comparable down the column without reading a single digit. The inner rule reaches the drag
   wrapper, which is a flex container and would otherwise ignore text-align. */
.rf-size {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
}

.rf-size > div {
    justify-content: flex-end;
}

/* The tree pane reads as its own surface rather than a region of the page. One hairline on the
   side it meets the file list, because that is the only edge where the two panes need separating —
   a full border would box in a pane that is already bounded by the viewport. */
.explorer-tree-pane {
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
}

/* The error banner belongs to the palette too. It is the one piece of chrome Blazor renders
   without asking, and in the default cream it looks like a different application has crashed. */
#blazor-error-ui {
    background: var(--mud-palette-warning);
    color: #241c00;
}

/* Blazor's FocusOnNavigate puts focus on the page heading so a screen reader starts there, and
   marks it tabindex="-1" to do so. The browser then rings it, which reads as a rendering fault —
   invisible on a white page, obvious on a dark one.

   Matched on the tabindex rather than on :focus-visible: Chrome applies :focus-visible to this
   programmatic focus anyway, so the :not(:focus-visible) form removed nothing. tabindex="-1" is
   exactly the statement that the element is focusable by script but not reachable by Tab, so
   nothing is lost by taking the ring off it — a keyboard user cannot land here. */
[tabindex="-1"]:focus {
    outline: none;
}

/* And when a ring is genuinely wanted, it belongs to this palette rather than to the browser's
   default blue. lightseagreen is the colour of everything interactive here, so focus is simply
   the keyboard's version of the same signal. */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}