/* App-specific additions. Load after mobile-ui.css and stylist-ui.css; use their tokens only. */

/* Admin area: same kit, wider container (spec §10). */
.m-app--wide { max-width: 960px; }
.m-app--wide .m-tabs { max-width: 960px; }

/* Screens without bottom tabs (sign-in, admin) don't need the tab bar's bottom padding. */
.m-app--no-tabs .m-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* Label left, amount right, on one line (pay cards and bonus cards). */
.s-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.s-line .m-row__main { flex: 1; min-width: 0; }

/* A whole card that links somewhere. */
.m-card--link { color: inherit; text-decoration: none; }

/* Wrapping row of salon chips (hours per salon on Schedule). */
.s-line--wrap { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; }

/* One colour per salon in a week (Schedule): brand colours, never the only cue (the salon name is always shown). */
.s-store__mark--1 { background: var(--jade); }
.s-store__mark--2 { background: var(--peacock); }
.s-store__mark--3 { background: var(--marigold); }
.s-store__mark--4 { background: var(--lime); }

/* Legend squares reuse the bar mark colours; keep them square, not bar-height. */
.s-store .s-bar__mark { position: static; width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* Salon board: a plain ordered list of .s-rank rows. */
.s-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.s-rank__pos { width: 20px; text-align: right; }
.s-rank .s-avatar { width: auto; min-width: 34px; padding: 0 6px; }

/* Manager screens drawn from SalonOps sections: label left, value (+ grade, + sub) right. */
.s-screen-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.s-screen-row__value { text-align: right; }
.m-card > summary { cursor: pointer; }
.m-card > summary.s-line { list-style: none; }
.s-block { display: block; }

/* Messages: the envelope in the header's top-right corner, and the conversation bubbles. */
.s-header-icon--corner { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: var(--pad); }
.m-header:has(.s-header-icon--corner) { padding-right: calc(var(--pad) + 56px); }
.s-thread { display: flex; flex-direction: column; gap: 10px; }
.s-bubble__body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* A tappable line under a list row (e.g. "Ask my manager to review"); 48px tall for touch. */
.s-row-link { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* Admin: a checkbox with its label on one line, 48px tall for touch. */
.s-check { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; }
.s-check input { width: 22px; height: 22px; accent-color: var(--primary); }

/* Right-aligned value in a label/value line (e.g. an address on My info). */
.s-text-end { text-align: right; }