/* Copyright ExaOps Pty Ltd 2026. All rights reserved. */

/* Desktop and mobile, as two densities of the same components.
   ============================================================

   MudBlazor sizes everything for a finger: list rows around 48px, generous padding, large hit
   areas. That is right on a phone and wrong with a mouse, where it reads as a website rather than
   an application and a menu of six entries fills half the screen.

   The test is `(hover: hover) and (pointer: fine)` - does this device have a mouse - and not a
   width breakpoint. Width gets it wrong in both directions: a tablet held in landscape is wide and
   still a touch device, and a desktop window dragged narrow is still driven by a mouse. Asking
   about the pointer asks the question we actually mean.

   Nothing here is global. A component opts in by taking the `exa-compact` class, so a page that
   wants MudBlazor's own sizing keeps it by saying nothing. That is deliberate: making every list in
   the platform compact is a decision to take deliberately and see, not a side effect of wanting a
   smaller menu.

   To compact something else, add a block below and put `exa-compact` on the component.

   The sizes below are not the tightest that would fit. A first pass ran a point smaller on both
   the text and the vertical padding and read as cramped rather than dense - compact is meant to
   look like a desktop application, not like a page that failed to load its stylesheet. */

@media (hover: hover) and (pointer: fine) {

    /* Menus and their popovers - the waffle switcher is the first caller.

       Both .mud-menu-item and .mud-list-item are named: MudBlazor 8 renders a menu entry as
       .mud-menu-item and a list entry as .mud-list-item, and a component that opts in could be
       either. Targeting only the one the first caller happened to use is how the next caller finds
       that this does nothing. */
    .exa-compact.mud-popover,
    .exa-compact .mud-list,
    .exa-compact .mud-menu-list {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .exa-compact .mud-menu-item,
    .exa-compact .mud-list-item {
        /* min-height, not height: MudBlazor sets a min-height that padding alone cannot undo. */
        min-height: 0;
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 11px;
        padding-right: 15px;
    }

    .exa-compact .mud-menu-item-text,
    .exa-compact .mud-list-item-text,
    .exa-compact .mud-typography-body2 {
        font-size: .875rem;
        line-height: 1.3;
    }

    /* MudBlazor gives the text inside a menu entry `margin: 4px 0`, which is where most of the
       height of a "dense" menu actually comes from - its dense padding is already 2px. Zeroing the
       padding without this changes nothing visible, which is what the first attempt did. */
    .exa-compact .mud-menu-item-text {
        margin-top: 0;
        margin-bottom: 0;
    }

    .exa-compact .mud-list-item-icon {
        min-width: 0;
        margin-right: 8px;
    }

    .exa-compact .mud-icon-root {
        font-size: 1.15rem;
        width: 1.15rem;
        height: 1.15rem;
    }

    .exa-compact .mud-divider {
        margin-top: 3px;
        margin-bottom: 3px;
    }

    /* A heading inside a compact menu - "Views" above the list.

       !important, reluctantly, and only here. MudBlazor's spacing utilities (px-4, py-2) carry it
       themselves, so a rule without it loses to a class the markup needs for the touch case. The
       alternative is dropping the utility classes and hard-coding both densities in this file,
       which moves the mobile layout somewhere nobody would look for it. */
    /* Quick-filter slugs. Six of them sit beside the search box on a list screen, and at
       MudBlazor's own Size.Small they take about 105px each - three fit, and the other three
       wrap onto a second line, which is the thing the row was made compact to avoid. The label
       is one or two short words carrying a count, so the padding is what has to give.

       Desktop only, deliberately: on a phone the same six chips are a wrapped block either way,
       and shrinking a tap target to save a line there trades the wrong thing. */
    .exa-compact-slug.mud-chip {
        height: 24px;
        font-size: .72rem;
        margin: 1px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .exa-compact .exa-compact-heading {
        padding: 5px 11px 3px 11px !important;
        font-size: .75rem !important;
        letter-spacing: .04em;
        text-transform: uppercase;
        opacity: .55;
    }

    /* Row controls: the checkbox, the icon button and the chip.
       ---------------------------------------------------------

       These three are what actually set the height of a list row, and none of them can be
       brought down from the markup. `Dense="true"` and `Size="Size.Small"` leave a checkbox
       around 38px and an icon button around 34px, because what remains is padding on the
       button element inside them. So a row of one line of text measures about 48px and the
       text is a third of it.

       That is the same lesson the menu rules above record - zeroing the padding somewhere
       that was not carrying the height changes nothing visible - applied to the other half
       of the problem. The menu rules tighten the container; these tighten what is in it.
       A list needs both.

       Scoped to `exa-compact` on an ancestor, so a panel opts in once and every row inside
       it follows. That is the shape the menu rules already use.

       The checkbox is named through `.mud-checkbox`, not on its own: MudBlazor builds it
       out of the same `.mud-icon-button` as a real icon button, and a checkbox and a
       button in the same row want different numbers - the checkbox can go tighter because
       nothing is drawn in its corners. */
    .exa-compact .mud-checkbox .mud-icon-button {
        padding: 2px;
    }

    .exa-compact .mud-icon-button {
        padding: 3px;
    }

    /* The chip carries !important because it has to.

       `Marketly/wwwroot/css/site.css` sets `.mud-chip { height: 26px !important }` for the
       whole application, and !important wins over a more specific selector regardless of
       which stylesheet loads first. The `.exa-compact-slug` rule above is the proof: three
       of its five declarations - the height and both paddings - are overridden by that one
       line today, so the chips it was written to fit onto a single row are still 26px and
       still wrap. It has never done what its comment says it does.

       This is the wrong way round and it is worth saying so plainly: a global rule with no
       device test is beating an opt-in rule that has one. The fix is to move that global
       block behind this same media query, at which point the !important here can go. Until
       then, a compact chip has to shout to be heard. */
    .exa-compact .mud-chip {
        height: 18px !important;
        font-size: .68rem;
        margin: 1px;
    }
}

/* Touch, and anything that cannot answer the question. MudBlazor's own sizing already applies, so
   this only has to undo nothing - it is here to say the omission is deliberate rather than
   forgotten. */