/* Settings hub (/settings)
   ---------------------------------------------------------------------------------------------
   The single screen that replaced the Setup, Administration and System & Support nav groups.
   One search field, the user's starred settings, then a directory of group panels; each screen row
   carries the same favourite star the nav drawer uses.

   LAYOUT MODEL -- CSS columns, not a grid.
   The seven groups hold between four and ten rows each. A 12/6/4 MudGrid row-locks every panel to
   its tallest neighbour, so Asset Library (4 rows) grew ~120px of dead space to match People &
   Access (10 rows), and the page read as a wall of equal boxes with nothing leading it. Columns let
   each panel end where its content ends and let the browser balance the stack, which is what a
   directory of unequal lists actually is. Panels declare break-inside: avoid so a group is never
   split across the column gutter.

   Tokens are declared on .stg rather than :root: this sheet ships on every page, and the hub has no
   business defining app-wide values. --stg-fav-fg mirrors nav-menu.css's --nav-fav-fg (DEFEX cobalt,
   lifted for dark mode) because it IS the same affordance -- that token is scoped to
   .nav-menu-drawer, so it cannot simply be borrowed here. */

.stg {
    --stg-row-rule: rgba(15, 23, 43, 0.06);
    --stg-muted: var(--mud-palette-text-secondary, rgba(15, 23, 43, 0.6));
    --stg-fav-fg: #1747E8;
    /* Row links are NOT left to MudLink's default Color.Primary: --mud-palette-primary resolves
       to a near-black navy here, which reads as body text in light mode and is close to
       unreadable on the dark card. DEFEX cobalt is the value the drawer's star already uses. */
    --stg-link-fg: #1747E8;

    /* Spacing roles, on the house 4/8/16/24 rhythm (DESIGN.md -> Layout). Named by what they
       separate, so a future edit changes a relationship rather than a number. */
    --stg-region-gap: 24px;   /* between major regions: search -> starred -> directory */
    --stg-panel-pad: 16px;    /* a panel's internal padding */
    --stg-panel-gap: 16px;    /* between panels, horizontally and vertically */
    --stg-head-gap: 12px;     /* a panel's heading block to its first row */
    --stg-row-pad: 6px;       /* a row's own vertical padding -- the tight end of the rhythm */
}

.defex-theme-dark .stg,
.mud-theme-dark .stg {
    --stg-row-rule: rgba(255, 255, 255, 0.07);
    /* Brand cobalt is too dark to carry on a dark surface -- same tint nav-menu.css lifts to. */
    --stg-fav-fg: #5B8CFF;
    --stg-link-fg: #7CA9FF;
}

/* Search ------------------------------------------------------------------------------------- */

.stg-search {
    /* Sits in PageHeader's right-aligned actions slot, so no bottom margin and no wrap: the
       header row is a single line. */
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.stg-search__field {
    /* Narrower than the old body-width band -- long enough for any settings label, short enough
       to sit inside the header beside the title without crowding it. */
    flex: 0 1 320px;
    width: 320px;
    max-width: 100%;
}

/* The header panel is short; a dense outlined field still needs its own margins zeroed so the
   row stays vertically centred against the title block. */
.stg-search__field .mud-input-control {
    margin: 0;
}

/* Answers "did my search find anything" without moving the eye off the field. */
.stg-search__count {
    font-size: 0.8125rem;
    color: var(--stg-muted);
    white-space: nowrap;
}

/* Starred band ------------------------------------------------------------------------------- */

/* Full width above the columns: it is one short list about this user, and putting it in the column
   flow would bury it beside a product group of equal weight. */
.stg-pinned {
    padding: var(--stg-panel-pad);
    margin-bottom: var(--stg-region-gap);
}

.stg-pinned__title {
    margin: 0 0 var(--stg-head-gap);
    /* Section role (DESIGN.md -> Typography): 18px/500. Same heading role as a ruled record
       section, which is what each of these panels is. */
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
}

/* The starred list is short and wide, so it wraps into tracks instead of running one item per line
   across a 1600px panel. */
.stg-pinned__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 24px;
}

/* Directory --------------------------------------------------------------------------------- */

.stg-columns {
    column-count: 1;
    column-gap: var(--stg-panel-gap);
}

@media (min-width: 600px) {
    .stg-columns {
        column-count: 2;
    }
}

@media (min-width: 1280px) {
    .stg-columns {
        column-count: 3;
    }
}

/* Past ~1700px three columns leave the panels wider than their longest label needs, which is dead
   horizontal space rather than generosity. */
@media (min-width: 1700px) {
    .stg-columns {
        column-count: 4;
    }
}

/* Fill, rim, radius and shadow all come from .custom-border in utilities.css -- these are Design D
   SOLID cards, the same surface every list screen uses, and restating any of it here would fork
   the card language for one page. Only the box metrics belong to this file. */
.stg-group {
    padding: var(--stg-panel-pad);
    margin-bottom: var(--stg-panel-gap);
    /* A group is one unit; splitting its rows across the column gutter would break the grouping
       the page exists to provide. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.stg-group__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--stg-head-gap);
}

.stg-group__icon {
    color: var(--stg-fav-fg);
    flex: none;
}

.stg-group__heading {
    min-width: 0;
}

.stg-group__title {
    margin: 0;
    /* Section role, matching .stg-pinned__title. */
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
}

/* Field-label role (DESIGN.md -> Typography): the blurb qualifies the title, it does not compete
   with the rows. 0.8125rem is the documented small step -- not an ad-hoc shrink. */
.stg-group__blurb {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    color: var(--stg-muted);
    line-height: 1.35;
}

/* Rows --------------------------------------------------------------------------------------- */

.stg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--stg-row-pad) 0;
    border-top: 1px solid var(--stg-row-rule);
}

/* The band's rows sit in grid tracks, so the first row of every track needs the rule that a single
   stacked list gets from its predecessor. Applying it to all of them is the simplest way to keep
   the tracks ruled identically however they wrap.

   The star does NOT go to the far edge here. In a group panel the right edge is a real column and
   pushing every star to it is what makes the list scannable; in a wide track it left a hand-span of
   dead space between a short label and its own star, so the star read as belonging to nothing. */
.stg-row--pinned {
    border-top: 1px solid var(--stg-row-rule);
    justify-content: flex-start;
}

.stg-row--pinned .stg-row__link {
    flex: 0 1 auto;
}

.stg-row__link {
    flex: 1;
    min-width: 0;
    /* Body floor (DESIGN.md -> The 14px Floor Rule). These rows are the page's primary content;
       they do not get to shrink so more of them fit. */
    font-size: 0.875rem;
}

/* MudLink's default Color.Primary lands `.mud-primary-text`, and MudBlazor declares that as
   `color: var(--mud-palette-primary) !important` -- which resolves to a near-black navy here, so
   every row read as body text rather than a link (and was close to unreadable on the dark card).
   Only !important beats !important; the extra classes keep it from leaking anywhere else. */
.stg .stg-row .stg-row__link.mud-link {
    color: var(--stg-link-fg) !important;
}

/* Unlike the drawer's star (opacity 0 until row hover) this one is always visible: a directory of
   forty rows whose only affordance appears on hover is not discoverable. Unstarred rows sit at low
   contrast so the starred ones still read as the exception. */
.stg-star {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* The icon is 20px; the target is 28px. The negative margin spends the difference on the row's
       own padding rather than on the rhythm, so the row stays 6px-tight while the hit area does
       not. */
    width: 28px;
    height: 28px;
    margin: -4px -4px -4px 0;
    /* UA reset: it is a <button>, not the drawer's <span>. There the star rides inside a focusable
       MudNavLink so the keyboard can reach the row; here it is a sibling of the link, and a span
       would be unreachable without a mouse. */
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    line-height: 0;
    opacity: 0.35;
    color: var(--stg-muted);
    transition: opacity 120ms ease, color 120ms ease;
}

.stg-star:hover,
.stg-star:focus-visible {
    opacity: 1;
    color: var(--stg-fav-fg);
}

.stg-star--on {
    opacity: 1;
    color: var(--stg-fav-fg);
}

/* Row help ----------------------------------------------------------------------------------- */

/* The info button sits between the label and the star, and matches the star's geometry exactly
   (28px target around a 20px icon, the 4px difference paid out of the row's padding) so the two
   read as one pair of affordances rather than two sizes of icon. Rows with no help copy keep the
   spacer, otherwise every star in the group would shift left by one icon on the rows that have
   none. */
.stg-help,
.stg-help--empty {
    flex: none;
    width: 28px;
    height: 28px;
    margin: -4px 0;
}

.stg-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.stg-help__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
    /* UA reset -- see .stg-star: it is a real <button> so the keyboard can reach it. */
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    line-height: 0;
    /* Same resting contrast as an unstarred star: present, but not competing with the link. */
    opacity: 0.35;
    color: var(--stg-muted);
    transition: opacity 120ms ease, color 120ms ease;
}

.stg-help__btn:hover,
.stg-help__btn:focus-visible {
    opacity: 1;
    color: var(--stg-link-fg);
}

/* MudMenu's popover would otherwise apply list padding and an item hover highlight to what is a
   card, not a menu. */
.stg-help__popover .mud-list,
.stg-help__popover .mud-list-padding {
    padding: 0;
}

.stg-help__popover .mud-list-item:hover {
    background-color: transparent;
}

/* The popover renders in MudBlazor's popover provider at the end of <body>, OUTSIDE .stg -- so the
   hub's tokens are not in scope here and have to be restated on the card itself. */
.stg-help__card {
    --stg-muted: var(--mud-palette-text-secondary, rgba(15, 23, 43, 0.6));
    --stg-row-rule: rgba(15, 23, 43, 0.06);
    width: min(340px, calc(100vw - 32px));
    padding: 16px;
    box-sizing: border-box;
    /* The popup is prose: it gets the body floor, not the row's compact step. */
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
    cursor: default;
    white-space: normal;
}

.defex-theme-dark .stg-help__card,
.mud-theme-dark .stg-help__card {
    --stg-row-rule: rgba(255, 255, 255, 0.07);
}

.stg-help__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.stg-help__title {
    font-size: 1rem;
    font-weight: 500;
}

.stg-help__body {
    margin: 0;
}

.stg-help__section {
    margin-top: 12px;
}

.stg-help__label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--stg-muted);
    margin-bottom: 4px;
}

.stg-help__list {
    margin: 0;
    padding-left: 18px;
}

.stg-help__tip {
    margin: 12px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--stg-row-rule);
    color: var(--stg-muted);
}

.stg-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--stg-muted);
    padding: 24px 0;
}