/* _content/MeninGate.Composition.Web.UI/CompositionEditor.razor.rz.scp.css */
/* Scoped to the component. Deliberately reuses the host's CSS variables (--ink, --line, --surface,
   --accent-ink, ...) with a fallback, so the editor inherits whatever palette the app already has
   instead of importing a second look. Drop it into RM or the Outsourcer and it matches both.

   Density over decoration: tight gutters, no wasted strips, everything visible without scrolling
   a panel. No bold on data - weight is reserved for accents (section headings). */

.comp[b-w6ot669awa] {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: .8rem;
    color: var(--ink, #1c2430);
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.comp__note[b-w6ot669awa] {
    margin: 0;
    padding: .3rem .45rem;
    font-size: .7rem;
    color: var(--accent-ink, #5b6472);
    background: var(--surface, #f6f8fa);
    border-left: 2px solid var(--line-strong, #c8d0da);
}

.comp__sec[b-w6ot669awa] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.comp__h[b-w6ot669awa] {
    margin: 0;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-ink, #5b6472);
}

/* Auto-fit, but with a CEILING as well as a floor: on a wide screen `1fr` stretched every cell to
   ~25rem, so a two-digit count sat alone in a huge box with its label a hand's width away. Fields
   keep a sane reading width and the row simply fits more of them. */
.comp__grid[b-w6ot669awa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 15rem));
    justify-content: start;
    gap: .25rem .5rem;
}

.comp__cell[b-w6ot669awa] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.comp__lbl[b-w6ot669awa] {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .66rem;
    color: var(--ink-soft, #67717f);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comp__in[b-w6ot669awa] {
    width: 100%;
    min-width: 0;
    padding: .16rem .3rem;
    font: inherit;
    font-size: .78rem;
    color: var(--ink, #1c2430);
    background: #fff;
    border: 1px solid var(--line, #dde3ea);
    border-radius: 2px;
}

.comp__in:focus[b-w6ot669awa] {
    outline: none;
    border-color: var(--accent, #2b6cb0);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #2b6cb0) 18%, transparent);
}

.comp__in--area[b-w6ot669awa] {
    resize: vertical;
    line-height: 1.3;
}

/* Counts read as numbers: right-aligned, tabular figures, so a column of them scans vertically. */
.comp__cell--count .comp__in[b-w6ot669awa] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.comp__ro[b-w6ot669awa] {
    padding: .16rem .3rem;
    font-size: .78rem;
    color: var(--ink, #1c2430);
    background: var(--surface, #f6f8fa);
    border: 1px solid transparent;
    border-radius: 2px;
    min-height: 1.35rem;
    white-space: pre-wrap;
}

.comp--ro .comp__ro[b-w6ot669awa] {
    background: transparent;
    border-bottom: 1px dotted var(--line, #dde3ea);
    border-radius: 0;
}

/* The refusal sits under the cell it belongs to - never a banner at the top that leaves you
   hunting for which field it meant. */
.comp__err[b-w6ot669awa] {
    font-size: .64rem;
    line-height: 1.25;
    color: var(--warn, #b3541e);
}

.comp__cell:has(.comp__err) .comp__in[b-w6ot669awa] {
    border-color: var(--warn, #b3541e);
}

.comp__sec--sum .comp__ro[b-w6ot669awa] {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------------------------------------------------------------------------------------------
   DENSE — the bar above a working grid.

   The sectioned layout is right for a dossier you sit in, and wrong above a table you work in: it
   costs ~8 headed rows of height and leaves the right-hand side empty. Dense drops the headings and
   lets the cells flow as one strip across the full width, so the grid underneath stays visible.
   --------------------------------------------------------------------------------------------- */

.comp--dense[b-w6ot669awa] {
    gap: .15rem;
    font-size: .74rem;
}

.comp--dense .comp__sec[b-w6ot669awa] {
    gap: 0;
}

/* One continuous flow: sections stop being blocks and their cells line up beside each other. */
.comp--dense .comp__grid[b-w6ot669awa] {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .5rem;
}

.comp--dense .comp__cell[b-w6ot669awa] {
    flex: 0 0 auto;
    width: 4.6rem;
    gap: 0;
}

/* Counts are the majority and are 1-3 characters wide; giving them a text field's width is what
   made the old layout sprawl. */
.comp--dense .comp__cell--count[b-w6ot669awa] {
    width: 3.1rem;
}

.comp--dense .comp__cell--text[b-w6ot669awa],
.comp--dense .comp__cell--time[b-w6ot669awa],
.comp--dense .comp__cell--code[b-w6ot669awa] {
    width: 7.5rem;
}

.comp--dense .comp__lbl[b-w6ot669awa] {
    font-size: .58rem;
    line-height: 1.15;
}

.comp--dense .comp__in[b-w6ot669awa],
.comp--dense .comp__ro[b-w6ot669awa] {
    padding: .05rem .22rem;
    font-size: .74rem;
    min-height: 0;
    line-height: 1.3;
}

.comp--dense .comp__note[b-w6ot669awa] {
    padding: .12rem .3rem;
    font-size: .62rem;
}

/* A number that changed by itself must never be a surprise: say so, right above the totals it
   affected, and keep it quiet enough not to nag. */
.comp__balance[b-w6ot669awa] {
    margin: 0;
    padding: .12rem .35rem;
    font-size: .64rem;
    color: var(--accent-ink, #5b6472);
    background: color-mix(in srgb, var(--accent, #2b6cb0) 8%, transparent);
    border-left: 2px solid var(--accent, #2b6cb0);
    border-radius: 2px;
}

/* Totals lead, so give them a touch more presence than the fields below them. */
.comp--dense .comp__sec--sum .comp__cell[b-w6ot669awa] {
    width: 4.2rem;
}

.comp__sec--sum .comp__ro[b-w6ot669awa] {
    background: var(--surface, #f6f8fa);
    font-weight: 600;
}

/* Safety text wants width, not a column: allergies and remarks read as sentences and are the one
   thing the kitchen must not have to guess at. Full row, side by side. */
.comp__sec--wide .comp__grid[b-w6ot669awa] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
}

.comp__sec--wide .comp__cell[b-w6ot669awa] {
    flex: 1 1 22rem;
    width: auto;
    min-width: 0;
}

.comp--dense .comp__sec--wide .comp__cell[b-w6ot669awa] {
    width: auto;
}

.comp__sec--wide .comp__in--area[b-w6ot669awa] {
    min-height: 2.2rem;
}