@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Layout/HeaderAuthControls.razor.rz.scp.css */
@media (max-width: 600px) {
  .logout-label[b-f225gqvxur] {
    display: none;
  }

  /* With the label hidden above, the logout control is icon-only — make it a
     compact square with the icon centered, instead of a wide pill. ::deep
     pierces the CSS-isolation scope into FluentButton's rendered
     <fluent-button>, and ::part reaches the chrome inside its shadow root.
     The button lays out start/content/end slots inside the control:
       - The empty content slot still reserves space on the icon's right, so
         hide it (::part(content) display:none) and center the rest.
       - The start slot (the IconStart wrapper) carries margin-inline-end:11px
         from the component's base styles; with the label gone that margin
         shoves the icon left of center even under justify-content:center, so
         zero it (::part(start)) to truly center the glyph. */
  form[b-f225gqvxur]  fluent-button::part(control) {
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    justify-content: center;
  }

  form[b-f225gqvxur]  fluent-button::part(content) {
    display: none;
  }

  form[b-f225gqvxur]  fluent-button::part(start) {
    margin-inline-end: 0;
  }
}

@media (max-width: 600px) {
  .login-label[b-f225gqvxur] {
    display: none;
  }
}
/* /Components/ResponsiveDataGrid.razor.rz.scp.css */
/* Per-cell labels are redundant on wide screens (the column header names the
   value) and only appear in the mobile card layout below. */
[b-5ofdsq8nh1] .cell-label {
    display: none;
}

/* Rows the consumer marks via RowClass (e.g. ShiftsView's "Totals Only") stay
   hidden on every screen size. This must live in this scoped file rather than
   globally: CSS isolation stamps a scope attribute onto the compiled selector,
   so the mobile `tbody tr { display: block !important }` rule below would
   out-specify a plain global `.hidden` rule and un-hide the row on phones.
   Kept outside the media query — media queries add no specificity, so this
   `tr.hidden` selector beats both the mobile `tr` rule and the desktop
   default in one place. */
[b-5ofdsq8nh1] .responsive-grid tbody tr.hidden {
    display: none !important;
}

.responsive-grid-scroll[b-5ofdsq8nh1] {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-foreground-hint) var(--neutral-fill-rest);
}

.responsive-grid-scroll[b-5ofdsq8nh1]::-webkit-scrollbar {
    height: 10px;
}

.responsive-grid-scroll[b-5ofdsq8nh1]::-webkit-scrollbar-track {
    background: var(--neutral-fill-rest);
    border-radius: 5px;
}

.responsive-grid-scroll[b-5ofdsq8nh1]::-webkit-scrollbar-thumb {
    background: var(--neutral-foreground-hint);
    border-radius: 5px;
}

/* On phones the multi-column grid is unreadable and forces a lot of horizontal
   scrolling. Below the app's mobile breakpoint, collapse each grid row into a
   stacked card: the first column becomes the card heading and every other
   column becomes a "Label  value" line. !important is needed because
   FluentDataGrid drives its grid/table layout from library CSS classes. */
@media (max-width: 600px) {
    [b-5ofdsq8nh1] .responsive-grid {
        display: block !important;
        min-width: 0 !important;
    }

    [b-5ofdsq8nh1] .responsive-grid thead {
        display: none !important;   /* headers move into each cell's label */
    }

    [b-5ofdsq8nh1] .responsive-grid tbody {
        display: block !important;
    }

    [b-5ofdsq8nh1] .responsive-grid tbody tr {
        display: block !important;
        padding: 0.35rem 0.6rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--neutral-stroke-rest, rgba(0,0,0,0.12));
        border-radius: 6px;
    }

    [b-5ofdsq8nh1] .responsive-grid tbody td {
        display: flex !important;
        justify-content: space-between;
        gap: 1rem;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.1rem 0;
        border: none;
    }

    /* First cell = row heading → full-width. */
    [b-5ofdsq8nh1] .responsive-grid tbody td:first-child {
        display: block !important;
        margin-bottom: 0.25rem;
        padding-bottom: 0.25rem;
        font-weight: 700;
        border-bottom: 1px solid var(--neutral-stroke-divider-rest, rgba(0,0,0,0.08));
    }

    [b-5ofdsq8nh1] .cell-label {
        display: inline;
        font-weight: 600;
        color: var(--neutral-foreground-hint);
    }
}