/* Global rules only; component looks come from the MudBlazor theme (Theme/CmsTheme.cs). */
html, body { background: #F7F8FA; color: #343849; font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; }
.tabular { font-variant-numeric: tabular-nums; }
/* Tabs read in sentence case, like buttons; MudBlazor hard-codes Material 2 capitals on tabs, outside the theme */
.mud-tab { text-transform: none; letter-spacing: normal; }

/* Sign-in and change password: today's AdminLTE login card, unchanged to the eye. */
.account-page { min-height: 100vh; background: #EEEFFD; display: flex; align-items: center; justify-content: center; padding: 16px; }
.account-card { background: #fff; border-radius: 10px; padding: 20px; width: 100%; max-width: 420px; }
.account-card .logo { display: block; margin: 0 auto; max-width: 300px; width: 100%; }
.account-card .msg { text-align: center; color: #666; margin: 10px 0 0; }
.account-card hr { border: 0; border-top: 1px solid #e5e7eb; margin: 12px 0; }
.account-card label { display: block; font-weight: 700; color: #212529; margin: 10px 0 6px; }
.account-card input { width: 100%; box-sizing: border-box; border: 1px solid #ced4da; border-radius: 4px; padding: 8px 12px; font-size: 1rem; }
.account-card button { width: 100%; margin-top: 16px; background: #4f4fcb; color: #fff; border: 0; border-radius: 4px; padding: 8px; font-size: 18px; cursor: pointer; }
.account-card .error { color: #c62a2f; margin-top: 10px; }
.account-card .done { color: #18794E; margin-top: 10px; }
/* Sign-in (2026-10-20 design): a brand panel and the form; on a phone only the logo and the form. */
.signin-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-wrap: wrap; background: #FFFFFF; color: #101828; }
.signin-brand { flex: 11 1 560px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; padding: 48px 64px 56px; background: #FAFBFC; border-right: 1px solid #EAECF0; overflow: hidden; }
.signin-wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; align-self: flex-start; }
.signin-logo { display: block; height: 32px; width: auto; }
.signin-product { padding-left: 0.22em; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; color: #475467; }
.signin-pitch { display: flex; flex-direction: column; gap: 16px; margin-top: 72px; max-width: 620px; }
.signin-headline { margin: 0; font-size: 64px; line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; color: #101828; }
.signin-tagline { margin: 0; font-size: 20px; line-height: 1.4; color: #475467; }
.signin-art { display: block; margin-top: auto; margin-left: -64px; width: 620px; max-width: calc(100% + 64px); height: auto; }
.signin-main { flex: 9 1 420px; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 48px 32px; }
.signin-phone-head { display: none; }
.signin-card { width: 100%; max-width: 400px; }
.signin-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.signin-heading { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.signin-heading h1 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: #101828; }
.signin-heading p { margin: 0; font-size: 16px; color: #475467; }
.signin-alert { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #B42318; }
.signin-alert svg, .signin-caps svg { flex: none; }
.signin-alert-dot { fill: #D92D20; }
.signin-field { display: flex; flex-direction: column; gap: 6px; }
.signin-field label { font-size: 14px; font-weight: 500; color: #344054; }
.signin-field input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 14px; border: 1px solid #D0D5DD; border-radius: 8px; font: inherit; font-size: 16px; color: #101828; background: #FFFFFF; }
.signin-field input::placeholder { color: #667085; }
.signin-field input:focus { outline: 2px solid #4F4FCB; outline-offset: 1px; border-color: #4F4FCB; }
.signin-field .account-password input { padding-right: 48px; }
.signin-field .account-reveal { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: transparent; color: #475467; border: 0; border-radius: 0 8px 8px 0; cursor: pointer; }
.signin-field .account-reveal:hover { color: #101828; }
.signin-field .account-reveal:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.signin-caps { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 13px; color: #8A5300; }
.signin-caps[hidden] { display: none; }
.signin-caps-mark { fill: #DC8B00; }
.signin-caps-line { stroke: #FFFFFF; }
.signin-caps-dot { fill: #FFFFFF; }
.signin-remember { display: flex; gap: 10px; align-items: center; min-height: 24px; font-size: 14px; color: #344054; cursor: pointer; }
.signin-remember input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: #4F4FCB; cursor: pointer; }
.signin-remember input:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.signin-button { height: 44px; margin-top: 4px; border: 0; border-radius: 8px; background: #4F4FCB; color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.signin-button:hover { background: #4040B0; }
.signin-button:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.signin-help { width: 100%; max-width: 400px; margin: 0; font-size: 14px; line-height: 1.5; color: #475467; }
/* On a phone (idea B, 2026-10-20): an indigo brand area (a soft gradient, no picture) with the white logo and tagline, and the
   form on a white card lifted into the middle of the screen. */
@media (max-width: 959.98px) { .signin-brand { display: none; } .signin-phone-head { display: flex; } }
@media (max-width: 959.98px) {
    /* Option O (2026-10-22, after option A): one centred column on the desktop's light panel — wordmark, staff badges, headline, line — then the form. */
    .signin-page { background: #FAFBFC; }
    .signin-main { position: relative; justify-content: flex-start; gap: 12px; min-height: 100vh; min-height: 100dvh; padding: 0 24px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .signin-phone-head { position: relative; flex-direction: column; align-items: center; gap: 6px; width: calc(100% + 48px); box-sizing: border-box; margin: 0 -24px; padding: 20px 24px 0; background: #FAFBFC; text-align: center; }
    .signin-phone-head .signin-wordmark { align-self: center; }
    .signin-phone-headline { margin: 4px 0 0; font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; color: #101828; }
    .signin-phone-tagline { margin: 0; font-size: 14px; line-height: 1.4; color: #475467; }
    .signin-phone-logo { display: block; height: 22px; width: auto; }
    .signin-phone-head .signin-product { font-size: 10px; }
    .signin-phone-art { display: block; width: 150px; height: auto; }
    .signin-card { position: relative; }
    .signin-card .signin-form { max-width: none; box-sizing: border-box; padding: 0; gap: 12px; }
    .signin-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* no visible heading in option O; "Sign in" stays for screen readers */
    .signin-help { position: relative; text-align: center; font-size: 13px; line-height: 1.4; }
    /* Install the CMS (option A, 2026-10-22): a quiet card under the form, phones only. */
    .signin-install { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 400px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #E4E7EC; border-radius: 14px; background: #FFFFFF; }
    .signin-install-icon img { display: block; width: 36px; height: 36px; border-radius: 9px; }
    .signin-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .signin-install-title { font-size: 14px; font-weight: 600; color: #101828; }
    .signin-install-sub { font-size: 12.5px; line-height: 1.35; color: #475467; }
    .signin-install-button { flex: none; height: 36px; padding: 0 14px; border: 1px solid #4F4FCB; border-radius: 8px; background: #FFFFFF; color: #3B3BA8; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
    .signin-install-button:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
}
@media (min-width: 960px) { .signin-install { display: none; } }   /* desktop: no card; the phone rule above shows it */
.signin-install[hidden], .signin-ios[hidden] { display: none !important; }
@media (max-width: 959.98px) and (max-height: 640px) { .signin-phone-tagline, .signin-install-sub { display: none; } .signin-phone-art { width: 110px; } }   /* an SE-size screen: the second lines go and the badges shrink so it all fits */
/* The iPhone steps (2026-10-22): a bottom sheet over a dim backdrop; Got it, the backdrop or Escape closes it. */
.signin-ios { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(16, 24, 40, 0.45); }
.signin-ios-sheet { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; background: #FFFFFF; color: #101828; }
.signin-ios-grab { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: #D0D5DD; }
.signin-ios-sheet h2 { margin: 0; font-size: 18px; font-weight: 600; }
.signin-ios-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.signin-ios-steps li { display: flex; align-items: center; gap: 12px; }
.signin-ios-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #EEEEFC; color: #3B3BA8; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.signin-ios-share { vertical-align: -2px; stroke: #007AFF; }
.signin-ios-note { margin: 0; font-size: 13px; color: #475467; }
html.cms-dark .signin-install { background: #1A1C2E; border-color: #2C3050; }
html.cms-dark .signin-install-title { color: #E8E9F5; }
html.cms-dark .signin-install-sub, html.cms-dark .signin-ios-note { color: #A3A7C6; }
html.cms-dark .signin-install-button { background: transparent; border-color: #A5A4FA; color: #C9C8FD; }
html.cms-dark .signin-install-button:focus-visible { outline-color: #A5A4FA; }
html.cms-dark .signin-ios-sheet { background: #1A1C2E; color: #E8E9F5; }
html.cms-dark .signin-ios-grab { background: #3A3F63; }
html.cms-dark .signin-ios-num { background: #26285A; color: #C9C8FD; }
html.cms-dark .signin-ios-share { stroke: #4DA3FF; }
@media (max-width: 599.98px) { .signin-heading h1 { font-size: 26px; } .signin-field input, .signin-button, .signin-field .account-reveal { height: 48px; } }
/* Change password inside the app (2026-10-13): one card, the boxes stacked, Cancel and the one filled button at the right */
/* Change password (2026-10-13; layout 2026-10-14 from Irfan's password asset pack): the security panel beside the form, and the
   requirements beside the fields, ticked as each is met. Narrower: the panel goes on top and the requirements under the fields. */
.cms-password-card { max-width: 1040px; margin: 24px auto 0; padding: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; }
@media (max-width: 599.98px) { .cms-password-card { margin-top: 0; } }
.mud-paper.mud-paper-outlined.cms-password-card { border-color: #E3E5EA; }
.cms-password-hero { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 28px; background: #F5F4FF; text-align: center; }
.cms-password-hero-art { width: 100%; max-width: 260px; height: auto; }
.cms-password-hero-copy { display: grid; gap: 6px; }
.cms-password-hero-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: #0F1222; }
.cms-password-hero-text { margin: 0; max-width: 32ch; font-size: 0.875rem; line-height: 1.5; color: #5C6275; }
.cms-password-main { grid-column: 2; grid-row: 1; padding: 28px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.cms-password-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.cms-password-lead { margin: -6px 0 4px; }
.cms-password-user { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.cms-password-form { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px 24px; align-items: start; }
.cms-password-fields { display: grid; gap: 12px; min-width: 0; }
.cms-password-field { margin: 0; }
.cms-password-message { font-size: 0.875rem; }
.cms-password-rules { padding: 16px; border-radius: 12px; background: #F5F4FF; display: grid; gap: 12px; }
.cms-password-rules-head { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; font-weight: 600; color: #0F1222; }
.cms-password-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cms-password-rules li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8125rem; line-height: 1.4; color: #343849; }
.cms-rule-mark { flex: none; width: 18px; height: 18px; margin-top: 1px; background: url("img/password/rule-empty.svg") center / contain no-repeat; }
.cms-password-rules [data-met="true"] .cms-rule-mark { background-image: url("img/password/check.svg"); }
/* Each picture in a light and a dark copy, swapped by the theme (2026-10-14). */
.cms-art-dark { display: none; }
.cms-password-rules [data-met="true"] { color: #18794E; }
.cms-password-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cms-password-signout { margin: 0; }
.cms-password-signout button { background: none; border: 0; padding: 4px 0; font: inherit; cursor: pointer; }
@media (max-width: 1099.98px) {
    .cms-password-card { max-width: 720px; grid-template-columns: minmax(0, 1fr); }
    .cms-password-hero { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: flex-start; gap: 16px; padding: 20px 24px; text-align: left; }
    .cms-password-hero-art { width: 160px; flex: none; }
    .cms-password-main { grid-column: 1; grid-row: 2; }
    .cms-password-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
    .cms-password-hero { flex-direction: column; align-items: center; gap: 4px; padding: 16px; text-align: center; }
    .cms-password-hero-art { width: 200px; }
    .cms-password-main { padding: 20px 16px; }
}
.cms-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Feedback option C (2026-10-12): success is a small white card in the corner with a countdown that pauses while pointed at;
   warnings and errors are popups (FeedbackDialog). Icons draw once, in under half a second. */
.mud-snackbar { background: #FFFFFF; color: #0F1222; border: 1px solid #E3E5EA; border-radius: 8px; box-shadow: 0 12px 32px rgb(15 18 34 / 18%); padding: 10px 8px 13px 14px; }
.mud-snackbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #18794E; transform-origin: left center; animation: cms-fb-count 4s linear forwards; }
.mud-snackbar:hover::after, .mud-snackbar:focus-within::after { animation-play-state: paused; }
.mud-snackbar .mud-snackbar-icon { color: #18794E; }
.mud-snackbar.mud-alert-outlined-info::after { background: #0D6AB5; }
.mud-snackbar.mud-alert-outlined-info .mud-snackbar-icon { color: #0D6AB5; }
.mud-snackbar .mud-snackbar-content-message { font-size: 0.875rem; font-weight: 600; }
@keyframes cms-fb-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.cms-fb-ring, .cms-fb-mark { stroke-dasharray: 100; stroke-dashoffset: 100; }
.cms-fb-ring { animation: cms-fb-draw 220ms ease-out forwards; }
.cms-fb-mark { animation: cms-fb-draw 160ms ease-out 200ms forwards; }
.cms-fb-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: cms-fb-pop 160ms ease-out 340ms forwards; }
@keyframes cms-fb-draw { to { stroke-dashoffset: 0; } }
@keyframes cms-fb-pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cms-fb-ring, .cms-fb-mark { animation: none; stroke-dashoffset: 0; } .cms-fb-dot { animation: none; transform: none; } .mud-snackbar::after { animation: none; } }
.cms-feedback-dialog.mud-dialog { border-radius: 8px; }
.cms-feedback { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 4px 4px; text-align: center; }
.cms-feedback-warning .cms-feedback-icon { color: #B7791F; }
.cms-feedback-error .cms-feedback-icon { color: #C62A2F; }
.cms-feedback-message { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; color: #0F1222; overflow-wrap: anywhere; }
.cms-feedback-dialog .mud-dialog-actions { padding: 8px 24px 20px; }
.cms-feedback-ok.mud-button-root { min-height: 44px; }
.cms-feedback-detail { margin: -4px 0 0; font-size: 0.875rem; line-height: 1.5; color: #5C6275; overflow-wrap: anywhere; }
.cms-feedback-cancel.mud-button-root, .cms-feedback-confirm.mud-button-root { flex: 1 1 0; min-height: 44px; }
/* The sign-in eye sits inside the password box (2026-10-12); js/reveal.js flips it */
.account-password { position: relative; }
.account-card .account-password input { padding-right: 44px; }
.account-card .account-reveal { position: absolute; top: 0; right: 0; width: 40px; height: 100%; margin: 0; padding: 0; display: grid; place-items: center; background: transparent; color: #5C6275; border: 0; border-radius: 0 4px 4px 0; font-size: inherit; }
.account-card .account-reveal:hover { color: #0F1222; }
.account-card .account-reveal:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.account-reveal .account-eye-off, .account-reveal[aria-pressed="true"] .account-eye { display: none; }
.account-reveal[aria-pressed="true"] .account-eye-off { display: block; }

/* Shell: sidebar and top bar in ink indigo #1C1D3B (shell colour option 1, 2026-10-12; was navy-black #12131A),
   greyer page #F7F8FA; selected item solid #4F4FCB */
.cms-drawer { background: #1C1D3B !important; }
.cms-sidebar-toggle.mud-icon-button { display: none; position: fixed; top: 50%; left: var(--mud-drawer-width-left, 240px);
    transform: translateY(-50%); z-index: calc(var(--mud-zindex-drawer, 1100) + 1); width: 24px; height: 56px; padding: 0;
    border-radius: 0 6px 6px 0; background: #1C1D3B; color: #D6D7F0; opacity: 0; visibility: hidden;
    transition: left 225ms ease, opacity 0s linear 1.5s, visibility 0s linear 1.5s; }
.cms-desktop-sidebar-region:hover .cms-sidebar-toggle,
.cms-desktop-sidebar-region:has(:focus-visible) .cms-sidebar-toggle { opacity: 1; visibility: visible;
    transition: left 225ms ease, opacity 0s, visibility 0s; }
.cms-sidebar-toggle.mud-icon-button:hover { background: #33356E; color: #FFFFFF; }
.cms-sidebar-toggle.mud-icon-button:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-sidebar-toggle-collapsed.mud-icon-button { left: var(--mud-drawer-width-mini-left, 56px); }
@media (min-width: 960px) { .cms-sidebar-toggle.mud-icon-button { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) {
    .cms-sidebar-toggle.mud-icon-button { transition: opacity 0s linear 1.5s, visibility 0s linear 1.5s; }
    .cms-desktop-sidebar-region:hover .cms-sidebar-toggle,
    .cms-desktop-sidebar-region:has(:focus-visible) .cms-sidebar-toggle { transition: none; }
}
.cms-brand { display: block; padding: 14px 12px 12px; margin-bottom: 6px; text-align: center; }
.cms-brand-logo { width: 150px; }
.cms-drawer-swipe { min-height: 100%; }
.cms-brand-monogram { display: block; height: 31px; line-height: 31px; color: #FFFFFF; font-size: 1.5rem; font-weight: 700; }
.cms-nav-collapsed .mud-nav-link { height: 40px; padding: 8px; justify-content: center; }
.cms-nav-collapsed .mud-nav-link-icon { margin-inline-end: 0; }
.cms-nav-hint { display: block; }
.cms-nav-collapsed .cms-nav-parent { width: 40px; height: 40px; padding: 8px; margin: 1px 8px; border-radius: 5px; color: #D6D7F0; }
.cms-nav-collapsed .cms-nav-parent:hover { background: #33356E; color: #FFFFFF; }
.cms-nav-collapsed .cms-nav-parent.active, .cms-nav-collapsed .cms-nav-parent.active:hover { background: #C9CAF7; color: #2E2F7A; }
.cms-nav-collapsed .cms-nav-parent:focus-visible { outline: 2px solid #D6D7F0; outline-offset: -2px; }
.cms-nav .mud-nav-link { color: #D6D7F0; border-radius: 5px; margin: 1px 8px; }
.cms-nav .mud-nav-link-expand-icon { width: 20px; height: 20px; font-size: 20px; flex-shrink: 0; align-self: center; }
/* Icons and group arrows take the label's colour in every state (2026-10-11). */
.cms-nav.mud-navmenu .mud-nav-link .mud-nav-link-icon { color: inherit; }
.cms-nav.mud-navmenu .mud-nav-link-expand-icon,
.cms-nav.mud-navmenu .mud-nav-link-expand-icon.mud-transform { color: inherit; fill: currentColor; }
.cms-nav.mud-navmenu .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) { background: #33356E; color: #fff; }
.cms-nav.mud-navmenu .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) .mud-nav-link-icon,
.cms-nav.mud-navmenu .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) .mud-nav-link-expand-icon { color: inherit; fill: currentColor; }
/* MudBlazor's own active rule (.mud-navmenu.mud-navmenu-default .mud-nav-link.active…) outranks a plain one. */
.cms-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.cms-drawer .cms-nav.mud-navmenu .mud-nav-link.active:hover:not(.mud-nav-link-disabled) { background: #4F4FCB; color: #fff; }
.cms-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: inherit; }
.cms-topbar { background: transparent !important; color: #fff !important; }
/* Blur the background layer only, keeping fixed search results anchored to the viewport. */
.cms-topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: #1C1D3B; border-bottom: 1px solid transparent; box-sizing: border-box;
    transition: background-color 180ms ease, border-color 180ms ease; }
.cms-scroll-marker { position: absolute; top: 8px; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 599.98px) {
    .cms-topbar { transition: transform 180ms ease; }
    .cms-topbar[data-scroll-hidden="true"]:not(.cms-search-open):not(:focus-within) { transform: translateY(-100%); pointer-events: none; }
}
/* Glass on scroll for tablet and desktop only; on a phone the bar slides away and stays solid. */
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    @media (min-width: 600px) {
        .cms-topbar[data-scrolled="true"]::before { background: rgb(28 29 59 / 85%); border-bottom-color: rgb(255 255 255 / 10%);
            -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    .cms-topbar[data-scrolled="true"]::before { background: #1C1D3B; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .cms-topbar, .cms-topbar::before { transition: none; } }
.cms-crumbs { padding: 0 8px; }
/* On a phone the top bar names the screen's parent menu page (PhoneTitle.cs) in place of the crumbs. */
.cms-topbar-phone-title { display: none; }
.cms-topbar .cms-crumbs .mud-breadcrumb-item a, .cms-topbar .cms-crumbs .cms-crumb-text, .cms-topbar .cms-crumbs .mud-breadcrumb-separator { color: #B4B7C3; }
.cms-topbar .cms-crumbs .mud-breadcrumb-item a:hover { color: #fff; }
.cms-topbar .cms-crumbs .mud-breadcrumb-item .mud-icon-root { font-size: 18px; width: 18px; height: 18px; margin-inline-end: 4px; vertical-align: -3px; }
.cms-topbar .cms-crumbs .cms-crumb-chevron { font-size: 20px; width: 20px; height: 20px; vertical-align: -5px; }
/* Thicken the arrow only: Material icons carry an invisible 24px box path that a stroke would outline as a square. */
.cms-topbar .cms-crumbs .cms-crumb-chevron path:not([fill="none"]) { stroke: currentColor; stroke-width: 1px; }
/* The current screen (last item) in a lighter grey than the way back; MudBlazor renders it as a link too. */
.cms-topbar .cms-crumbs .mud-breadcrumb-item:last-child, .cms-topbar .cms-crumbs .mud-breadcrumb-item:last-child a, .cms-topbar .cms-crumbs .mud-breadcrumb-item:last-child .cms-crumb-text { color: #E3E4EA; }
/* Phone top bar: 56px, up from MudBlazor's dense 48 (2026-10-11). The dense bar is 3/4 of this variable, and the page
   padding and dialog heights follow it; html:root outranks the theme provider's :root. */
@media (max-width: 599.98px) { html:root { --mud-appbar-height: 74.667px; } }
/* Phone top bar: the current screen only, as a title. */
@media (max-width: 599.98px) {
    .cms-topbar .cms-crumbs .mud-breadcrumb-item:not(:last-child), .cms-topbar .cms-crumbs .mud-breadcrumb-separator { display: none; }
    .cms-topbar .cms-crumbs { flex-wrap: nowrap; min-width: 0; padding: 0 4px; }
    .cms-topbar .cms-crumbs .mud-breadcrumb-item:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 600; color: #FFFFFF; }
    .cms-topbar .cms-crumbs { display: none; }
    .cms-topbar .cms-topbar-phone-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; font-size: 1rem; font-weight: 600; color: #FFFFFF; }
}
.cms-page { padding: 16px; }
/* On a phone every page sits closer to the screen edges: 6px at the sides, about 60% less than 16 (2026-10-14). */
@media (max-width: 599.98px) { .cms-page { padding-left: 6px; padding-right: 6px; } }
.cms-signout { margin: 0; }
.cms-signout button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 16px; font: inherit; color: inherit; cursor: pointer; }
.cms-signout button:hover { background: #F1F2F6; }

/* Shared patterns (Design.md) */
.cms-link { color: #4F4FCB; font-weight: 600; text-decoration: none; }
.cms-link:hover { text-decoration: underline; }
.cms-strong { font-weight: 600; color: #0F1222; }
.cms-sub { color: #5C6275; font-size: 0.75rem; }
.cms-section { font-size: 0.875rem; font-weight: 600; color: #4D5366; margin: 4px 0 12px; }
.cms-section:not(:first-child) { margin-top: 28px; padding-top: 20px; border-top: 1px solid #E8EAEF; }
/* NRIC hidden until Show: a masked text field, not a password field, so browsers never offer to save it as a password. */
.cms-masked input { -webkit-text-security: disc; }
.cms-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.cms-employee-form .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after { color: #C62A2F; margin-left: 2px; }
.cms-status-wrap { display: inline-flex; align-items: center; gap: 6px; }
.cms-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cms-status { font-weight: 600; font-size: 0.75rem; }
.cms-chip { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; margin: 1px 3px 1px 0; }
.cms-chip-outlet { background: #fff; color: #343849; border: 1px solid #9CA0AE; font-weight: 500; }
.cms-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.cms-title { font-size: 1.25rem; font-weight: 600; color: #0F1222; margin: 0; }
.cms-count { font-size: 0.875rem; color: #5C6275; font-weight: 400; margin-left: 6px; }
.cms-actions { display: flex; gap: 8px; align-items: center; } /* centred (2026-10-27): "3 members" beside Delete on a role */
.cms-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cms-search-category { max-width: 170px; }
.cms-search-category div.mud-input-slot { display: block !important; }
.cms-search-text { max-width: 320px; }
.cms-filter-button { position: relative; border: 1px solid #D3D6DE; background: #fff; border-radius: 6px; width: 36px; height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cms-filter-count { position: absolute; top: -6px; right: -6px; background: #4F4FCB; color: #fff; border-radius: 9px; font-size: 0.75rem; padding: 0 5px; }
.cms-filter-summary { color: #5C6275; }
.cms-search-controls { display: contents; }
.cms-list-toolbar { display: flex; align-items: flex-start; gap: 12px; padding: 12px; flex-wrap: wrap; }
.cms-list-description { flex: 1 0 100%; margin: 0; font-size: 0.8125rem; color: #5C6275; }
html.cms-dark .cms-list-description { color: #A3A7C6; }
.cms-list-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; min-height: 40px; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }
.cms-list-actions .mud-button-root { white-space: nowrap; }
.cms-list-actions .mud-button-filled, .cms-list-actions .mud-button-outlined { font-size: 0.75rem; line-height: 1.5; padding: 6px 14px; }
.cms-columns-toggle .mud-icon-button { width: 40px; height: 40px; }
.cms-search-unified { flex: 1 1 420px; min-width: 0; max-width: 680px; flex-direction: column; align-items: stretch; gap: 6px; }
.cms-search-unified .cms-search-controls { display: flex; align-items: center; height: 40px; min-width: 0; border: 1px solid #D3D6DE; border-radius: 6px; background: #F9FAFB; }
.cms-search-unified .cms-search-controls:focus-within { border-color: #5C6275; }
.cms-search-unified .mud-input-control { margin: 0; }
.cms-search-unified .mud-input.mud-input-outlined { height: 38px; border-radius: 0; background: transparent; }
.cms-search-unified .mud-input.mud-input-outlined > .mud-input-outlined-border { display: none; }
.cms-search-unified .cms-search-controls > .mud-select { width: 150px; flex: 0 0 150px; }
.cms-search-unified .cms-search-category { width: 150px; max-width: 150px; flex: 0 0 150px; border-right: 1px solid #D3D6DE; }
.cms-search-unified .cms-search-text { flex: 1 1 auto; min-width: 0; max-width: none; }
.cms-search-unified .cms-search-text input { min-width: 0; }
.cms-search-unified .cms-filter-button { flex: 0 0 40px; height: 38px; width: 40px; border: 0; border-left: 1px solid #D3D6DE; border-radius: 0 5px 5px 0; background: transparent; }
.cms-search-unified .cms-filter-button:hover { background: #E3E5EA; }
.cms-search-unified .cms-filter-button:focus-visible { outline: 2px solid #5C6275; outline-offset: -3px; }
.cms-search-unified .cms-filter-count { top: 1px; right: 1px; font-size: 0.625rem; }
.cms-search-unified .cms-filter-summary { font-size: 0.75rem; overflow-wrap: anywhere; }
.cms-list-grid .mud-table-toolbar { display: block; padding: 0; height: auto; min-height: 0; }
.cms-list-pager-top { border-top: 1px solid #E8EAEF; border-bottom: 1px solid #E8EAEF; }
.cms-list-grid .mud-table-pagination-toolbar { height: auto; min-height: 48px; flex-wrap: wrap; gap: 0 8px; padding: 0 12px; margin: 0; }
.cms-list-mobile { display: none; }
.cms-list-mobile-items { list-style: none; margin: 0; padding: 0; }
.cms-list-mobile-items > li { border-bottom: 1px solid #E8EAEF; }
.cms-list-mobile-items > li:last-child { border-bottom: 0; }
.cms-list-mobile-loading { padding: 0 12px; }
.cms-employee-mobile-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; padding: 12px 16px; border: 0; border-radius: 0; background: #FFFFFF; color: #343849; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.cms-employee-mobile-row:hover { background: #F9FAFB; }
/* A tapped row shades at once, before the server's reply opens anything (2026-10-14); a row that only reads stays as it is. */
.cms-employee-mobile-row { -webkit-tap-highlight-color: transparent; }
button.cms-employee-mobile-row:active, a.cms-employee-mobile-row:active { background: #F1F2F6; }
.cms-employee-mobile-row:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
a.cms-employee-mobile-row { text-decoration: none; }
.cms-employee-mobile-row .cms-bc { font-size: 0.75rem; }
.cms-mobile-row-static { cursor: default; }
.cms-mobile-row-static:hover { background: #FFFFFF; }
/* Phone rows, option A (tight stack): name and status, then code · meta, then one detail line; long text ends in "…". */
.cms-employee-mobile-name { font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
.cms-mobile-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.cms-mobile-line1 .cms-employee-mobile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-mobile-dot { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; margin-right: -4px; }
/* History on a phone (option B, 2026-10-13): two-line rows, details in a bottom sheet */
.cms-history-mobile { list-style: none; margin: 0; padding: 0; }
.cms-history-mobile-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 3px; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid #E3E5EA; background: #FFFFFF; color: #0F1222; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.cms-history-mobile-row:active { background: #F3F4F7; }
/* The phone list already draws a line between rows */
.cms-list-mobile-items .cms-history-mobile-row { border-bottom: 0; }
.cms-history-mobile-record { font-weight: 600; color: #343849; }
.cms-history-mobile-row:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-history-mobile-line1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cms-history-mobile-action { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.875rem; line-height: 1.4; }
.cms-history-mobile-chevron.mud-icon-root { flex: none; color: #5C6275; }
.cms-history-mobile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.75rem; color: #5C6275; }
.cms-history-mobile-meta .mud-icon-root { font-size: 1rem; width: 1rem; height: 1rem; }
.cms-history-mobile-count { color: #4F4FCB; font-weight: 500; }
.cms-history-sheet-facts { display: grid; grid-template-columns: 72px 1fr; gap: 6px 12px; margin: 0 20px 12px; font-size: 0.875rem; }
.cms-history-sheet-facts dt { color: #5C6275; }
.cms-history-sheet-facts dd { margin: 0; overflow-wrap: anywhere; }
.cms-history-sheet .cms-history-fields { width: calc(100% - 40px); margin: 0 20px 16px; table-layout: fixed; font-size: 0.8125rem; }
.cms-history-sheet .cms-history-fields th { text-align: left; }
.cms-history-sheet .cms-history-fields td { overflow-wrap: anywhere; vertical-align: top; }
.cms-mobile-line1 .cms-status-wrap { flex: none; white-space: nowrap; }
.cms-mobile-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: #5C6275; }
.cms-mobile-code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.cms-mobile-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 0.75rem; color: #5C6275; }
.cms-mobile-detail > .cms-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-employee-mobile-row .cms-chip { max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-employee-action-button.mud-button-root { justify-content: flex-start; min-height: 44px; text-transform: none; }
.cms-employee-actions-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 8px 0; text-align: center; }
.cms-employee-actions-avatar.mud-avatar { width: 72px; height: 72px; flex-shrink: 0; background: #E3E5EA; color: #343849; font-size: 1.5rem; }
.cms-employee-actions-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cms-employee-actions-name { margin: 0; font-size: 1rem; font-weight: 600; color: #0F1222; overflow-wrap: anywhere; }
.cms-employee-form-profile { padding: 0 0 16px; }
/* Assign a device: the typed field and the scan button sit side by side, as on the Devices page */
.cms-assign-pick { display: flex; align-items: flex-start; gap: 8px; min-width: min(420px, 100%); }
.cms-assign-pick .cms-assign-field { flex: 1 1 auto; min-width: 0; }
.cms-assign-pick .cms-assign-scan { flex: none; width: 40px; height: 40px; margin-top: 6px; border-radius: 4px; }
@media (max-width: 599.98px) {
    .cms-list-grid-mobile .cms-list-mobile { display: block; }
    .cms-list-grid-mobile .mud-table-container { display: none; }
    .cms-columns-toggle { display: none; }
    /* Same 16px gutter as the rows, top and bottom pager alike; outranks MudBlazor's phone rule, which dropped the bottom one's left padding */
    .cms-list-grid.mud-table .mud-toolbar.mud-table-pagination-toolbar { min-height: 0; gap: 8px; padding: 8px 16px; }
    .cms-list-grid .mud-table-pagination-toolbar > .mud-select + .mud-table-pagination-caption { margin-inline-start: auto; }
    .cms-list-grid .mud-table-pagination-spacer { display: none; }
    .cms-list-grid .mud-table-pagination-toolbar > .mud-select { margin: 0 !important; }
    .cms-list-grid .mud-table-pagination-select .mud-select-input { padding-inline-start: 0 !important; }
    .cms-list-grid .mud-table-pagination-toolbar .mud-table-pagination-caption { padding: 0; }
    .cms-list-grid .mud-table-pagination-select .mud-input { min-height: 44px; align-items: center; }
    .cms-list-grid .mud-table-pagination-select .mud-input-root { min-height: 0; height: auto; margin-top: 0; }
    /* One row (2026-10-14): the page size dropdown without its "Rows per page" words, the count, then four small bordered
       buttons at the right, never wrapping. */
    .cms-list-grid .mud-table-pagination-toolbar > .mud-table-pagination-caption:has(+ .mud-select) { display: none; }
    .cms-list-grid.mud-table .mud-toolbar.mud-table-pagination-toolbar { flex-wrap: nowrap; }
    .cms-list-grid .mud-toolbar.mud-table-pagination-toolbar .mud-table-pagination-actions { display: flex; flex: none; gap: 4px; margin: 0; margin-inline: 0; }
    .cms-list-grid .mud-table-pagination-actions .mud-icon-button { width: 32px; height: 32px; padding: 0; border: 1px solid #D3D6DE; border-radius: 8px; }
    .cms-list-grid .mud-table-pagination-toolbar .mud-table-pagination-caption, .cms-list-grid .mud-table-pagination-select .mud-select-input { font-size: 0.8125rem; }
    html.cms-dark .cms-list-grid .mud-table-pagination-actions .mud-icon-button { border-color: #2C3050; }
    .cms-search-unified { flex-basis: 100%; max-width: none; }
    .cms-search-unified .cms-search-controls > .mud-select { width: 108px; flex-basis: 108px; }
    .cms-search-unified .cms-search-category { width: 108px; max-width: 108px; flex-basis: 108px; }
}
/* A list's card splits above the table on a phone (2026-10-14): the search and everything above the table in one block, a
   small gap, then the table starting with its pager in its own block; the card goes see-through so the gap shows the page. */
@media (max-width: 599.98px) {
    .cms-card:has(> .cms-list-grid) { background: transparent; }
    .cms-card:has(> .cms-list-grid) > :not(.cms-list-grid):not(.mud-drawer) { background: var(--mud-palette-surface); }
    .cms-card:has(> .cms-list-grid) > :first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
    .cms-card:has(> .cms-list-grid) > :has(+ .cms-list-grid) { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
    .cms-card > .cms-list-grid { margin-top: 8px; border-radius: 8px; overflow: hidden; }
    .cms-card > .cms-user-chips { margin: 0; padding: 12px; }
}

/* An email recipient's Name or Email box on a phone (2026-10-14): while it has the cursor it lifts over the top of the screen,
   full width, the page greyed out behind; the wrapper stays out of the table's layout. */
.cms-recipient-field { display: contents; }
.cms-field-backdrop { display: none; }
@media (max-width: 599.98px) {
    .cms-field-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--mud-zindex-appbar) + 1); background: rgb(15 18 34 / 45%); }
    .cms-recipient-field.cms-field-popped > .mud-input-control { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--mud-zindex-appbar) + 2); margin: 0; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--mud-palette-surface); box-shadow: 0 4px 16px rgb(15 18 34 / 18%); }
}

/* Search by on a phone (2026-10-14): the category leaves the narrow row for an outlined chip under the box (option 3), opening its choices. */
.cms-search-by { display: none; }
@media (max-width: 599.98px) { .cms-search-by { display: block; } .cms-search-unified .cms-search-controls > .mud-select { display: none; } }
.cms-search-by-chip { display: inline-flex; align-items: center; gap: 1px; min-height: 24px; padding: 0 4px 0 8px; border: 1px solid #4F4FCB; border-radius: 6px; background: transparent; color: #4F4FCB; font: inherit; font-size: 0.6875rem; font-weight: 600; cursor: pointer; }
.cms-search-by-chip:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-search-by-chip:active { background: #ECECFB; }
.cms-search-by-chip .mud-icon-root { width: 16px; height: 16px; }
.cms-search-by-chip .cms-search-by-icon { margin-right: 3px; }
.cms-search-by-title { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; }
.cms-search-by-sheet .cms-search-by-option { justify-content: space-between; min-height: 48px; padding: 0 20px; border-radius: 0; text-transform: none; font-weight: 500; }
.cms-search-by-sheet .cms-search-by-option-current { color: #3F3FB0; font-weight: 600; }
html.cms-dark .cms-search-by-sheet .cms-search-by-option-current { color: #C9C8FD; }
html.cms-dark .cms-search-by-chip { border-color: #8A89F0; color: #C9C8FD; }
html.cms-dark .cms-search-by-chip:active { background: #26285A; }

/* The popped search bar (2026-10-13): on a phone, focusing a list's search box lifts just the box over the top of the
   screen, full width, with the page dimmed behind it; Search in and the filter button stay in the row below. Above 600 px
   nothing changes. */
.cms-search-typing { display: contents; }
.cms-search-backdrop { display: none; }
@media (max-width: 599.98px) {
    .cms-search-backdrop { display: block; position: fixed; inset: 0; z-index: calc(var(--mud-zindex-appbar) + 1); background: rgb(15 18 34 / 45%); }
    .cms-search-unified .cms-search-popped .cms-search-text { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--mud-zindex-appbar) + 2);
        height: auto; padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: #FFFFFF; box-shadow: 0 4px 16px rgb(15 18 34 / 18%); }
    .cms-search-unified .cms-search-popped .cms-search-text .mud-input.mud-input-outlined { height: 40px; border: 1px solid #5C6275; border-radius: 6px; background: #F9FAFB; }
}
@media (max-width: 359.98px) {
    .cms-search-unified .cms-search-text .mud-input-adornment-start { display: none; }
    .cms-search-unified .cms-search-text .mud-input.mud-input-outlined { padding-inline-start: 8px; }
}
/* The filter panel is a MudDrawer, which takes the theme's dark sidebar colour; it is a light panel (contrast, spec §5). */
.mud-drawer.cms-filter-panel { background: #FFFFFF !important; color: #343849 !important; }
.cms-filter-panel .flex-column > * { flex: 0 0 auto; } /* MudBlazor fields stretch in a column; keep them stacked */
/* The title is a band in the top bar's colour and height (2026-10-14): the dense bar is 3/4 of --mud-appbar-height, as
   MudBlazor computes it; the panel's 16px padding is undone around it. */
.cms-filter-panel .flex-column > .mud-typography-h2:first-child { display: flex; align-items: center; height: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4); margin: -16px -16px 0; padding: 0 16px; background: #1C1D3B; color: #FFFFFF; }
/* Advanced filters on a phone (2026-10-14): Clear all / Apply share the panel's full width. */
@media (max-width: 599.98px) {
    .cms-filter-panel .mt-auto { gap: 8px; }
    .cms-filter-panel .mt-auto > .mud-button-root { flex: 1 1 0; }
}
.cms-history { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cms-history th { text-align: left; color: #4D5366; font-weight: 600; padding: 8px; border-bottom: 1px solid #E8EAEF; }
.cms-history td { padding: 8px; border-bottom: 1px solid #F1F2F6; vertical-align: top; }
.cms-history-detail td table { width: 100%; background: #F9FAFB; border-radius: 6px; }
.cms-before { color: #B42318; text-decoration: line-through; }
.cms-after { color: #067647; }
.cms-who { display: inline-flex; align-items: center; gap: 6px; }
.cms-initials { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #EEEFFD; color: #4040B0; font-size: 0.6875rem; font-weight: 700; align-items: center; justify-content: center; }
.cms-link-button { background: none; border: 0; padding: 0; color: #4F4FCB; font-weight: 600; cursor: pointer; font: inherit; }
.cms-columns-menu { display: flex; flex-direction: column; padding: 4px 12px 4px 4px; }
.cms-state { padding: 24px; text-align: center; color: #5C6275; }
.cms-state-error { color: #b42318; }
.cms-card { border-radius: 8px; }
/* Containers stand apart from the page by fill alone, no border, in light and dark (2026-10-12). Fields, buttons,
   chips, menus, dashed drop areas and warning notes keep their borders. */
.mud-paper.mud-paper-outlined { border-color: transparent; }
.cms-row-actions { text-align: right; white-space: nowrap; }
.cms-list-grid .cms-row-actions, .cms-roles .cms-row-actions { vertical-align: middle; }
.cms-row-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 2px; width: 100%; }
.cms-row-buttons .mud-menu, .cms-row-buttons > span { display: inline-flex; align-items: center; }
/* Delete is always red, in a menu as on its own (2026-10-12); the theme's error colour suits both modes */
.mud-menu-item.cms-menu-danger { color: var(--mud-palette-error); }
.cms-company-outlet { display: flex; flex-direction: column; width: 200px; max-width: 100%; min-width: 0; flex: 0 1 200px; }
.cms-company-outlet > .cms-chip { display: block; width: 100%; margin: 0; padding: 3px 8px; border-radius: 0; white-space: normal; overflow-wrap: anywhere; }
.cms-company-outlet > .cms-chip:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.cms-company-outlet > .cms-chip:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.cms-company-outlet > .cms-chip-outlet:not(:first-child) { border-top: 0; }
@media (min-width: 600px) {
    .cms-employees-grid .cms-company-outlet-column { width: 240px; }
}
.cms-system { text-align: center; padding: 48px 16px; color: #4D5366; }
.cms-system .cms-title { margin: 12px 0 6px; }
.cms-system-home { color: #4F4FCB; font-weight: 600; text-decoration: none; }
/* Employee record (spec §7.1) */
.cms-record-header { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.cms-record-main { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cms-avatar { width: 56px; height: 56px; border-radius: 50%; background: #EEEFFD; color: #4040B0; font-weight: 700; font-size: 1.125rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* The record header's circle is the shared avatar (2026-10-21): its photo, else initials, in the same 56px indigo look. */
.cms-record-header .cms-avatar.mud-avatar { width: 56px; height: 56px; background: #EEEFFD; color: #4040B0; font-weight: 700; font-size: 1.125rem; }
.cms-record-header .cms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cms-record-photo { flex: 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: none; cursor: zoom-in; }
.cms-record-photo:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; } html.cms-dark .cms-record-photo:focus-visible { outline-color: #A5A4FA; }
.cms-photo-full { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; object-fit: contain; }
.cms-checklist { margin: 16px 0 0; }
.cms-checklist-title { font-weight: 600; color: #343849; margin-bottom: 8px; }
.cms-checklist-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 960px) { .cms-checklist-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cms-checklist-boxes { grid-template-columns: 1fr; } }
.cms-step { border: 2px solid; border-radius: 8px; padding: 4px; color: #FFFFFF; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 128px; }
.cms-step-content { flex: 1; width: 100%; padding: 8px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.cms-step-done { background: #18794E; border-color: #18794E; color: #FFFFFF; }
.cms-step-check { color: inherit; width: 32px; height: 32px; flex-shrink: 0; }
.cms-step-open { background: #343A40; border-color: #212529; }
.cms-step-title { font-weight: 600; }
.cms-step-detail { font-size: 0.8125rem; padding: 0 8px; }
.cms-step-button { margin-top: auto; width: 100%; background: #FFFFFF; color: #0F1222; border: 0; border-radius: 5px; padding: 8px; font-weight: 600; cursor: pointer; font: inherit; }
.cms-step-mobile-title, .cms-step-mobile-state, .cms-step-mobile-action.mud-icon-button { display: none; }
.cms-record-tab-label { display: inline-flex; align-items: center; justify-content: center; }
.cms-record-tab-icon.mud-icon-root, .cms-record-section-title { display: none; }
.cms-asset-mobile-meta { display: none; }
.cms-compact-missing { color: #975A00; }
.cms-assets .cms-compact-missing { display: none; }
.cms-asset-return-heading, .cms-asset-return-icon.mud-icon-root { display: none; }
.cms-system-mobile-meta, .cms-system-status-mobile, .cms-system-remove-heading, .cms-system-remove-icon.mud-icon-root { display: none; }
.cms-system-view-icon.mud-icon-root { display: none; }
.cms-systems .cms-compact-missing { display: none; }
@media (max-width: 599px) {
    .cms-checklist-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .cms-step { position: relative; min-width: 0; min-height: 112px; border-radius: 6px; padding: 4px; }
    .cms-step-content { padding: 4px 0; min-width: 0; }
    .cms-step-title, .cms-step-detail, .cms-step-button { display: none; }
    .cms-step-mobile-title, .cms-step-mobile-state { display: block; font-size: 0.75rem; line-height: 1.4; overflow-wrap: anywhere; }
    .cms-step-mobile-title { font-weight: 600; }
    .cms-step-mobile-action.mud-icon-button { display: inline-flex; flex-shrink: 0; width: 44px; height: 44px; padding: 10px; margin: 0; border-radius: 4px; background: transparent; color: inherit; position: static; overflow: visible; }
    /* The whole box is the tap target: the action's hit area stretches over it, anchored to the box */
    .cms-step-mobile-action.mud-icon-button::before { content: ""; position: absolute; inset: 0; border-radius: 6px; cursor: pointer; }
    .cms-step:has(.cms-step-mobile-action:active) { filter: brightness(1.15); }
    .cms-step-mobile-action.mud-icon-button:hover { background: transparent; }
    .cms-step-mobile-action.mud-icon-button:focus-visible { outline: none; }
    .cms-step-mobile-action.mud-icon-button:focus-visible::before { outline: 2px solid #C9CAF7; outline-offset: 2px; }
    .cms-employee-record-tabs { min-width: 0; max-width: 100%; }
    .cms-employee-record-tabs .mud-tabs-tabbar-content { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
    .cms-employee-record-tabs .mud-tabs-tabbar-wrapper { transform: none !important; transition: none; }
    .cms-employee-record-tabs .mud-tabs-scroll-button, .cms-employee-record-tabs .mud-tab-slider { display: none; }
    .cms-employee-record-tabs .cms-record-tab-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .cms-employee-record-tabs .mud-tab { flex: 0 0 64px; width: 64px; min-width: 64px !important; min-height: 48px; padding: 0; }
    .cms-employee-record-tabs .mud-tab.mud-tab-active { background: #EEEFFD; color: #4040B0; box-shadow: inset 0 -2px #4F4FCB; }
    .cms-employee-record-tabs .cms-record-tab-icon.mud-icon-root { display: block; width: 24px; height: 24px; }
    .cms-employee-record-tabs .cms-record-panels { padding: 12px !important; min-width: 0; }
    .cms-employee-record-tabs .cms-record-section-title { display: block; margin: 0 0 16px; font-size: 1rem; font-weight: 600; color: #0F1222; overflow-wrap: anywhere; }
    .cms-assets { table-layout: fixed; font-size: 0.75rem; }
    .cms-assets th, .cms-assets td { padding: 8px 6px; vertical-align: middle; }
    .cms-assets .cms-asset-secondary { display: none; }
    .cms-store-staff .cms-store-staff-tap { cursor: pointer; }   /* the DM's staff row opens its actions on a phone (2026-10-22) */
    .cms-assets .cms-asset-item { overflow-wrap: anywhere; }
    .cms-assets .cms-asset-name { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
    .cms-assets .cms-asset-mobile-meta { display: block; margin-top: 2px; color: #5C6275; line-height: 1.4; }
    .cms-assets .cms-compact-missing { display: inline; }
    .cms-assets .cms-asset-status { width: 88px; overflow-wrap: anywhere; }
    .cms-assets .cms-row-actions { width: 60px; padding: 4px; text-align: center; }
    .cms-assets .cms-row-actions .mud-button-root { min-width: 44px; min-height: 44px; padding: 0 4px; font-size: 0.75rem; text-transform: none; }
    .cms-assets .cms-asset-return-heading { display: inline; }
    .cms-assets .cms-asset-return-text { display: none; }
    .cms-assets .cms-asset-return-icon.mud-icon-root { display: block; width: 24px; height: 24px; color: #4F4FCB; }
    .cms-assets .cms-asset-return.mud-button-root { width: 44px; height: 44px; }
    .cms-assets:not(:has(.cms-row-actions button)) .cms-row-actions { display: none; }
    .cms-systems { table-layout: fixed; font-size: 0.75rem; }
    .cms-systems th, .cms-systems td { padding: 8px 6px; vertical-align: middle; }
    .cms-systems .cms-system-item { overflow-wrap: anywhere; }
    .cms-systems .cms-system-name { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
    .cms-systems .cms-system-mobile-meta { display: block; margin-top: 2px; color: #5C6275; line-height: 1.4; }
    .cms-systems .cms-system-status { width: 88px; overflow-wrap: anywhere; }
    .cms-systems .cms-system-status-desktop, .cms-systems .cms-system-remove-text { display: none; }
    .cms-systems .cms-system-status-mobile { display: block; }
    .cms-systems .cms-compact-missing { display: inline; }
    .cms-systems .cms-row-actions { width: 60px; padding: 4px; text-align: center; }
    .cms-systems .cms-system-remove-heading { display: inline; }
    .cms-systems .cms-system-remove-icon.mud-icon-root { display: block; width: 24px; height: 24px; color: #C62A2F; }
    .cms-systems .cms-system-remove.mud-button-root { min-width: 44px; width: 44px; height: 44px; padding: 0 4px; }
    .cms-systems .cms-system-view-text { display: none; }
    .cms-systems .cms-system-view-icon.mud-icon-root { display: block; width: 24px; height: 24px; color: #4F4FCB; }
    .cms-systems .cms-system-view.mud-button-root { min-width: 44px; width: 44px; height: 44px; padding: 0 4px; }
    .cms-systems:has(.cms-system-view) .cms-row-actions { width: 104px; }
    .cms-systems:not(:has(.cms-row-actions button)) .cms-row-actions { display: none; }
}
.cms-profile { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 0; }
.cms-profile dt { color: #5C6275; }
.cms-profile dd { margin: 0; color: #0F1222; }
@media (max-width: 600px) { .cms-profile { grid-template-columns: 1fr; } .cms-profile dd { margin-bottom: 8px; } }
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; background: #FEF3F2; color: #B42318; border-top: 1px solid #FDA29B; padding: 10px 16px; font-weight: 600; }
#blazor-error-ui .reload { color: #4F4FCB; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* Home (spec §8): today's five tiles, solid, a darker View bar; the colours pass 4.5:1 (§5) */
.cms-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cms-tile { display: flex; flex-direction: column; min-height: 112px; border-radius: 8px; overflow: hidden; color: #fff; text-decoration: none; }
.cms-tile-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 0; }
.cms-tile-number { display: block; font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cms-tile-label { display: block; font-size: 0.875rem; font-weight: 600; margin-top: 2px; }
.cms-tile-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.cms-tile-context { flex: 1; padding: 4px 14px 10px; font-size: 0.75rem; }
.cms-tile-bar { display: block; text-align: center; padding: 6px 0; font-size: 0.75rem; font-weight: 600; transition: box-shadow 120ms ease; }
.cms-tile-joining { background: #0D6AB5; }
.cms-tile-joining .cms-tile-bar { background: #0A5592; }
.cms-tile-all { background: #4F4FCB; }
.cms-tile-all .cms-tile-bar { background: #4040B0; }
.cms-tile-active { background: #18794E; }
.cms-tile-active .cms-tile-bar { background: #13603E; }
.cms-tile-leaving { background: #C2410C; color: #FFFFFF; }
.cms-tile-leaving .cms-tile-bar { background: #9A3412; }
.cms-tile-resigned { background: #C62A2F; }
.cms-tile-resigned .cms-tile-bar { background: #A52226; }
a.cms-tile:hover .cms-tile-bar { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.22); }
/* Soft waves over each tile's colour, above the 28px View bar (2026-10-14); 4% white per layer keeps the 12px text at 4.5:1 */
.cms-tiles .cms-tile { background-image: url("img/tiles/waves.svg"); background-repeat: no-repeat; background-position: left 0 bottom 28px; background-size: 100% 70%; }
.cms-tiles .cms-tile-all, .cms-tiles .cms-tile-leaving { background-image: url("img/tiles/waves-mirrored.svg"); }
.cms-tiles .cms-tile-bar { line-height: 16px; }
a.cms-tile:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-home-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.cms-panel { background: #fff; border: 1px solid transparent; border-radius: 8px; }
.cms-panel-title { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #F1F2F6; font-size: 1rem; font-weight: 600; color: #0F1222; }
.cms-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #F1F2F6; }
.cms-line:last-child { border-bottom: 0; }
@media (max-width: 959px) {
  .cms-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-home-grid { grid-template-columns: 1fr; }
}

/* The bell (spec §4) */
.cms-bell-empty { padding: 8px 16px; color: #5C6275; font-size: 0.875rem; }

/* The top bar search (spec §4); .cms-search is the list search bar's */
.cms-find { position: relative; width: 320px; margin-right: 8px; }
.cms-find .mud-input-control { margin: 0; }
.cms-find-hint { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: #9CA0AE; pointer-events: none; }
/* Search runs on Enter and shows its results on /search (2026-10-13); the box only says when the text is too short. */
.cms-find-short { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1400; padding: 8px 12px; font-size: 0.75rem; color: #5C6275;
  background: #fff; border: 1px solid #E3E5EA; border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); }
.cms-search-form { display: flex; gap: 8px; align-items: center; padding: 12px; flex-wrap: wrap; }
.cms-search-form .cms-search-field { flex: 1 1 260px; max-width: 480px; margin: 0; }
.cms-search-page .cms-access-tabs { margin-bottom: 4px; }
.cms-search-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cms-topbar-search { flex: 0 1 auto; width: 360px; min-width: 0; margin-left: 8px; animation: cms-search-expand 180ms ease-out; }
.cms-topbar-search .cms-find { width: 100%; margin: 0; }
/* Ink well (search colour option D, 2026-10-12): sunk darker than the bar, the ring keeps it visible */
.cms-topbar-search .mud-input.mud-input-outlined { height: 32px; background: #14152B; color: #E3E4EA; border-radius: 4px; }
.cms-topbar-search .mud-input.mud-input-outlined > .mud-input-outlined-border, .cms-topbar-search .mud-input.mud-input-outlined:hover > .mud-input-outlined-border { border-color: #7577BA; }
.cms-topbar-search .mud-input.mud-input-outlined:focus-within > .mud-input-outlined-border { border-color: #C5C7EE; }
.cms-topbar-search .mud-input.mud-input-outlined > input { min-width: 0; padding-top: 6px; padding-bottom: 6px; color: inherit; }
@media (min-width: 600px) { .cms-topbar-search .mud-input.mud-input-outlined > input { padding-right: 52px; } }
.cms-topbar-search .mud-input input::placeholder { color: #A3A5CC; opacity: 1; }
.cms-topbar-search .mud-input-adornment, .cms-topbar-search .cms-find-hint { color: #A3A5CC; }
.cms-topbar-search .mud-input-adornment .mud-icon-root { color: inherit; }
.cms-topbar-search .cms-find-short { top: calc(100% + 8px); border-radius: 0 0 4px 4px; }
.cms-topbar-search-closing { width: 0; overflow: hidden; pointer-events: none; animation: cms-search-collapse 180ms ease-in forwards; }
.cms-topbar-search-closing .cms-find-short { display: none; }
.cms-search-open .cms-crumbs { min-width: 0; overflow: hidden; white-space: nowrap; }
@keyframes cms-search-expand { from { width: 0; opacity: 0; } to { width: 360px; opacity: 1; } }
@keyframes cms-search-collapse { from { width: 360px; opacity: 1; } to { width: 0; opacity: 0; } }
@media (max-width: 599.98px) {
    .cms-topbar.cms-search-open .cms-topbar-menu-toggle,
    .cms-topbar.cms-search-open .cms-crumbs,
    .cms-topbar.cms-search-open .cms-topbar-phone-title,
    .cms-topbar.cms-search-open .cms-topbar-spacer,
    .cms-topbar.cms-search-open [data-cms-search-toggle],
    .cms-topbar.cms-search-open .cms-bell,
    .cms-topbar.cms-search-open .cms-account,
    .cms-topbar-search .cms-find-hint { display: none; }
    .cms-topbar-search { flex: 1 1 100%; width: 100%; margin-left: 0; animation: none; }
    .cms-topbar-search-closing { display: none; }
    .cms-topbar-search .cms-find-short { position: fixed; top: 56px; left: 16px; right: 16px; width: auto; }
}
@media (max-width: 359.98px) {
    .cms-topbar-search .mud-input-adornment-start { display: none; }
    .cms-topbar-search .mud-input.mud-input-outlined { padding-left: 8px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .cms-topbar-search { animation: none; } }

/* Roles & Permissions (Plan 4) */
.cms-perms .mud-expand-panel { border: 1px solid transparent; border-radius: 8px; margin-bottom: 12px; }
.cms-perm-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; width: 100%; }
.cms-perm-area { font-weight: 600; color: #1F2D3D; }
.cms-perm-sensitive { font-size: 0.75rem; color: #975A00; }
.cms-perm-count { margin-left: auto; font-size: 0.75rem; color: #4D5366; }
.cms-perm-scroll { overflow-x: auto; max-width: 100%; }
.cms-perm-table { border-collapse: collapse; width: 100%; min-width: 680px; }
.cms-perm-table th, .cms-perm-table td { padding: 2px 8px; text-align: center; border-bottom: 1px solid #E8EAEF; font-size: 0.8125rem; }
.cms-perm-table thead th { font-weight: 600; color: #4D5366; }
.cms-perm-table th[scope=row], .cms-perm-table thead th:first-child { position: sticky; left: 0; z-index: 1; min-width: 180px; text-align: left; background: #FFFFFF; }
.cms-perm-none { color: #9CA0AE; }
.cms-perm-search { max-width: 320px; margin-bottom: 12px; }
@media (max-width: 599px) { .cms-perm-search { max-width: none; } }
.cms-role-summary { margin: 16px 0 4px; padding: 12px 16px; background: #F8FAFC; border-radius: 8px; font-size: 0.875rem; line-height: 1.5; color: #1F2D3D; }
.cms-role-members th, .cms-role-members td { font-size: 0.875rem; }

/* Shell design fixes (2026-10-08): avatar and small bell in the top bar */
.cms-avatar-button { min-width: 0 !important; padding: 4px !important; border-radius: 50% !important; }
.cms-avatar-sm { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background: #E0EAFF; color: #4040B0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; }
.cms-avatar-sm::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cms-photo, none) center / cover no-repeat; }
.cms-account-head { padding: 10px 16px 8px; min-width: 220px; }
.cms-account-name { font-weight: 600; color: #0F1222; }
.cms-bell-count { font-size: 0.75rem !important; height: 18px !important; min-width: 18px !important; padding: 0 4px !important; line-height: 18px !important; }

.cms-topbar .cms-bell, .cms-topbar .cms-account { align-self: stretch; display: flex; align-items: center; margin-left: 12px; }
@media (max-width: 599.98px) { .cms-topbar .cms-bell, .cms-topbar .cms-account { margin-left: 6px; } }
.mud-popover.cms-topbar-dropdown { background: #FFFFFF; color: #343849; border: 1px solid #E3E5EA; border-top: 0; border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgb(16 24 40 / 12%); max-width: calc(100vw - 24px); }
.cms-topbar-dropdown .cms-account-head { min-width: 0; width: 260px; max-width: 100%; overflow-wrap: anywhere; }
.cms-topbar-dropdown .cms-account-name { color: #0F1222; }
.cms-topbar-dropdown .cms-sub, .cms-topbar-dropdown .cms-bell-empty { color: #5C6275; }
.cms-topbar-dropdown .mud-menu-list, .cms-topbar-dropdown .mud-menu-item { color: inherit; }
.cms-topbar-dropdown .mud-divider { border-color: #E3E5EA; }
.cms-topbar-dropdown .mud-menu-item:hover, .cms-topbar-dropdown .mud-menu-item:focus-visible { background: #F1F2F6; color: #0F1222; }
.cms-topbar-dropdown .cms-signout button { color: #C62A2F; }
.cms-theme-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cms-theme-label { flex: 1; }
.cms-theme-toggle:hover, .cms-theme-toggle:focus-visible { background: #F1F2F6; color: #0F1222; }
.cms-theme-toggle:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-theme-switch { position: relative; flex: none; width: 32px; height: 18px; border-radius: 9px; background: #8A8FA0; transition: background-color 160ms ease; }
.cms-theme-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: transform 160ms ease; }
.cms-theme-toggle[aria-checked="true"] .cms-theme-switch { background: #4F4FCB; }
.cms-theme-toggle[aria-checked="true"] .cms-theme-switch::after { transform: translateX(14px); }
/* The moon lights up while dark mode is on; it stays yellow on hover too (the rule sets the icon, not the row). */
.cms-theme-toggle[aria-checked="true"] .mud-icon-root { color: #FFC83D; }
@media (prefers-reduced-motion: reduce) { .cms-theme-switch, .cms-theme-switch::after { transition: none; } }
.cms-topbar-dropdown .cms-signout button:hover, .cms-topbar-dropdown .cms-signout button:focus-visible { background: #FEF3F2; color: #B42318; }

/* History (Plan 5) */
.cms-area { display: inline-block; padding: 0 8px; border: 1px solid #D3D6DE; border-radius: 999px; font-size: 0.75rem; line-height: 1.6; color: #4D5366; white-space: nowrap; }
.cms-history-order { max-width: 180px; }
.cms-list-actions .cms-history-order { width: 180px; margin: 0; }
.cms-history-order .mud-input.mud-input-outlined { height: 40px; }
.cms-history-grid .cms-history-when { white-space: nowrap; }
.cms-history-changes { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cms-history-grid .cms-history-detail { padding: 8px 0; }
.cms-history-grid .cms-history-detail .cms-history { min-width: 420px; background: #F9FAFB; }

/* Guided import (Plan 6a) */
.cms-import-title { display: flex; align-items: center; gap: 4px; }
.cms-import-name { font-size: 1.125rem; font-weight: 600; margin-right: auto; }
.cms-import-steps { display: flex; justify-content: center; gap: 48px; list-style: none; margin: 0 0 16px; padding: 0; }
.cms-import-step { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600; font-size: 0.8125rem; }
/* Every Excel upload pop-up takes 80% of the screen on a desktop (Irfan) (2026-10-20). */
@media (min-width: 960px) { .cms-import-dialog { min-height: 80vh; } }
.cms-import-circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.cms-import-step-done .cms-import-circle { background: #18794E; }
.cms-import-step-current .cms-import-circle { background: #343A40; }
.cms-import-step-next .cms-import-circle { background: #D3D6DE; color: #4D5366; }
.cms-import-step-next { color: #9CA0AE; }
.cms-import-guide { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 0.8125rem; }
.cms-import-guide th, .cms-import-guide td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #E8EAEF; }
.cms-import-guide-scroll { max-height: 60vh; overflow: auto; }
.cms-import-guide-dialog .cms-import-guide { min-width: 480px; margin-bottom: 0; }
.cms-import-guide-dialog .cms-import-guide th { position: sticky; top: 0; background: #F9FAFB; white-space: nowrap; }
.cms-import-guide-dialog .cms-import-guide td { vertical-align: top; }
.cms-dropzone { position: relative; border: 2px dashed #D3D6DE; border-radius: 8px; padding: 32px 16px; text-align: center; color: #4D5366; background: #F9FAFB; }
.cms-dropzone-active, .cms-dropzone:hover { border-color: #4F4FCB; background: #EEEFFD; }
.cms-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* On a desktop the drop area fills the taller pop-up (every Excel upload, 2026-10-20); after the base rules so it wins. */
@media (min-width: 960px) { .cms-import-dialog .mud-dialog-content:has(.cms-dropzone) { flex: 1 1 auto; display: flex; flex-direction: column; } }
@media (min-width: 960px) { .cms-import-dialog .cms-dropzone { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } }
.cms-import-upload-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.cms-import-status { display: inline-flex; align-items: center; gap: 8px; color: #4D5366; }
.cms-import-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.cms-import-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cms-import-percent { position: absolute; font-weight: 700; font-size: 0.875rem; }
.cms-import-headline { font-size: 1rem; font-weight: 600; color: #0F1222; }
.cms-import-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cms-import-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.cms-import-confirm { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.cms-import-tab { border: 1px solid #D3D6DE; background: #fff; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 0.8125rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
/* Selected (2026-10-27): an indigo tint, so it never matches a count badge (All rows' is near-black). */
.cms-import-tab-on { background: #EEEFFD; border-color: #4F4FCB; color: #2E2E9A; font-weight: 600; }
.cms-import-count { min-width: 20px; padding: 0 6px; border-radius: 999px; color: #fff; font-size: 0.75rem; font-weight: 700; text-align: center; }
.cms-count-red { background: #C62A2F; }
.cms-count-yellow { background: #FFC107; color: #1F2D3D; }
.cms-count-green { background: #18794E; }
.cms-count-dark { background: #212529; }
.cms-import-remove { border: 0; background: none; color: #975A00; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; padding: 0; margin-left: auto; }
.cms-import-scroll { overflow: auto; max-height: 55vh; border: 1px solid #E3E5EA; border-radius: 8px; }
.cms-import-table { border-collapse: collapse; font-size: 0.8125rem; min-width: 100%; }
.cms-import-table th { position: sticky; top: 0; background: #F9FAFB; text-align: left; padding: 6px 8px; white-space: nowrap; font-weight: 600; color: #4D5366; }
.cms-import-table td { padding: 6px 8px; border-top: 1px solid #F1F2F6; white-space: nowrap; vertical-align: top; }
.cms-import-issues td { border-top: 0; padding-top: 0; white-space: normal; }
.cms-import-cell { border: 0; background: #fff; border-radius: 3px; padding: 1px 4px; font: inherit; cursor: pointer; outline-offset: 1px; }
.cms-cell-error .cms-import-cell { outline: 2px solid #C62A2F; }
.cms-cell-warning .cms-import-cell { outline: 2px solid #FFC107; }
.cms-import-input { font: inherit; padding: 2px 4px; border: 1px solid #4F4FCB; border-radius: 3px; min-width: 120px; }
.cms-import-error { color: #B42318; }
.cms-import-warning { color: #975A00; }
.cms-import-error .cms-link-button, .cms-import-warning .cms-link-button { margin-left: 8px; }
.cms-import-empty { padding: 24px; text-align: center; color: #4D5366; }
.cms-import-result { display: flex; flex-direction: column; gap: 12px; }
.cms-import-leftout { font-size: 0.8125rem; color: #B42318; max-height: 30vh; overflow: auto; }
.cms-import-created { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.8125rem; }
@media (max-width: 599px) { .cms-import-steps { gap: 16px; } .cms-import-remove { margin-left: 0; } }
/* Settings › Email recipients (Plan 7a) */
.cms-history-activity { white-space: pre-line; }
.cms-asset-remark { display: block; white-space: normal; }
.cms-handover-reason { margin-top: 4px; padding: 6px 10px; border-left: 3px solid #C62A2F; background: #FFF7F7; color: #7A2023; border-radius: 4px; font-size: 0.8rem; }
html.cms-dark .cms-handover-reason { background: #2A1517; color: #FFB4B9; border-left-color: #FF7A85; }
.cms-handover-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
/* 2026-10-29: devices not signed for yet, above the forms; amber as the bulk scan's warning status. */
.cms-handover-pending { margin-bottom: 12px; color: #7A4B00; font-size: 0.875rem; }
.cms-handover-pending ul { margin: 6px 0 10px; padding-left: 18px; }
html.cms-dark .cms-handover-pending { color: #FFD995; }
.cms-handover-pending-group { display: block; margin-top: 8px; }
.cms-handover-pending-group:first-child { margin-top: 0; }
.cms-handover-pending-send + .cms-handover-pending-group { margin-top: 14px; }
p.cms-handover-note { margin-top: 0; }
.cms-assign-pending { margin: 8px 0 0; padding-left: 18px; }
.cms-assign-pending .cms-send-note { margin-top: 4px; }
.cms-handover-record-note { margin-top: 2px; }
.cms-past-devices-title { display: block; margin: 24px 0 8px; font-size: 0.875rem; font-weight: 600; }
.cms-device-types-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; flex-wrap: wrap; }
.cms-device-types-table { width: 100%; }
.cms-device-types-search { max-width: 320px; padding: 0 16px 12px; }
@media (max-width: 599px) { .cms-device-types-search { max-width: none; } }
.cms-recipients-note { background: #FFFAEB; border: 1px solid #F5C26B; color: #7A5200; border-radius: 6px; padding: 8px 12px; font-size: 0.8125rem; }
.cms-recipients-head { padding: 12px 16px; border-bottom: 1px solid #E3E5EA; }
.cms-recipients-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
.cms-recipients-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.cms-recipients-table th { text-align: left; color: #4D5366; font-weight: 600; padding: 8px 16px; background: #F9FAFB; border-bottom: 1px solid #E3E5EA; }
.cms-recipients-table td { padding: 4px 16px; vertical-align: middle; }
.cms-recipients-line-error td { color: #B42318; font-size: 0.8125rem; padding-top: 0; }
.cms-recipients-error { color: #B42318; padding: 8px 16px 0; font-size: 0.875rem; }
.cms-recipients-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 16px 12px; flex-wrap: wrap; }
@media (max-width: 599px) { .cms-recipients-table th, .cms-recipients-table td { padding-left: 8px; padding-right: 8px; } }
/* Access Request (Plan 7a) */
.cms-access-tabs { display: flex; gap: 20px; padding: 0 12px; border-bottom: 1px solid #E3E5EA; }
.cms-access-tab { border: 0; background: none; font: inherit; font-size: 0.875rem; color: #5C6275; padding: 8px 0 7px; cursor: pointer; border-bottom: 2px solid transparent; }
/* Four tabs on a phone (Transfers' Waiting for IT, 2026-10-28) wrapped each label onto two lines: they keep one line and the
   row scrolls sideways, as the employee record's tabs. */
.cms-access-tabs { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
.cms-access-tab { flex: none; white-space: nowrap; }
.cms-access-tab-on { color: #0F1222; font-weight: 600; border-bottom-color: #4F4FCB; }
/* System set-up count (option D, 2026-10-12): a segmented bar in the accent, then the names, waiting ones in amber */
.cms-access-systems { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cms-access-progress { display: flex; align-items: center; gap: 10px; }
.cms-access-bar { display: flex; flex: none; gap: 2px; }
.cms-access-seg { width: 16px; height: 6px; border-radius: 2px; background: #E3E5EA; }
.cms-access-seg-on { background: #4F4FCB; }
.cms-access-count { font-size: 0.8125rem; font-weight: 600; color: #343849; white-space: nowrap; }
.cms-access-names { font-size: 0.75rem; color: #5C6275; overflow-wrap: anywhere; }
.cms-access-waiting { color: #8A5300; font-weight: 500; }
.cms-chip-held { background: #F1F2F6; color: #343849; border: 1px solid #D3D6DE; font-weight: 500; }
.cms-access-grid .mud-table-body .mud-table-row { cursor: pointer; }
.cms-access-open { color: #9CA0AE; font-size: 1.25rem; text-decoration: none; padding: 0 4px; }
.cms-access-section { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #E3E5EA; font-weight: 600; color: #0F1222; }
.cms-access-table td { vertical-align: middle; }
.cms-access-password { font: inherit; font-size: 0.875rem; width: 200px; max-width: 100%; height: 30px; padding: 4px 8px; border: 1px solid #D3D6DE; border-radius: 6px; }
.cms-access-password:focus { outline: none; border-color: #5C6275; }
.cms-access-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 16px; flex-wrap: wrap; }
.cms-access-record-link { font-size: 0.75rem; margin-left: 8px; }
/* Phone (F-12, 2026-11-02): each system is two lines, the name and status, then the password and Complete; a table scrolling
   sideways put Complete past the edge, and scrolling to it hid the names. */
@media (max-width: 599px) {
    .cms-access-table, .cms-access-table tbody { display: block; }
    .cms-access-table thead { display: none; }
    .cms-access-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 8px; border-bottom: 1px solid #F1F2F6; }
    .cms-access-table td, html.cms-dark .cms-history.cms-access-table td { padding: 0; border-bottom: 0; min-width: 0; }
    .cms-access-table td:first-child { font-weight: 600; }
    .cms-access-table .cms-access-password { width: 100%; }
}

.cms-access-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border: 1px solid transparent; border-radius: 8px; background: #F3F4F7; }
.cms-access-summary-sent { color: #18794E; font-size: 0.875rem; }
.cms-access-summary-error { color: #B42318; font-size: 0.875rem; }

/* Pickers render in the popover provider, not beside the field's DOM element. */
@media (max-width: 599px) {
    .mud-popover:has(.mud-picker-container) {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: max-content !important;
        max-width: calc(100vw - 8px) !important;
        max-height: calc(100dvh - 16px);
        overflow: auto;
    }
}

/* Device list and page (Plan 8) — tabs reuse .cms-access-tab */
.cms-device-grid .mud-table-body .mud-table-row { cursor: pointer; }
/* Lists whose row opens its details page on a click (2026-10-13) */
.cms-row-opens .mud-table-body .mud-table-row { cursor: pointer; }
.cms-device-name { font-weight: 600; }
.cms-device-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.cms-device-header-tag { margin-left: 8px; }
.cms-device-clash { display: inline-block; font-size: 0.8125rem; margin-bottom: 4px; }
/* Plan 33: the Business Central item on Add / Edit device — the lookup row, a match to link, the link once made */
.cms-device-item-find { display: flex; align-items: center; gap: 8px; }
.cms-device-item-find .mud-input-control { flex: 1 1 auto; margin: 0; }
.cms-device-item-found, .cms-device-item-linked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 8px; font-size: 0.875rem; }
.cms-device-item-found { margin-top: 8px; background: #F4F4FE; border: 1px solid #D9D8FB; color: #26285A; }
.cms-device-item-linked { background: #F7F8FA; border: 1px solid #E3E5EA; color: #0F1222; }
.cms-device-item-choices { display: flex; gap: 8px; }
html.cms-dark .cms-device-item-found { background: #26285A; border-color: #3A3D78; color: #E4E4FD; }
.cms-device-items { max-width: 720px; }
.cms-device-items-run { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cms-device-items-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.cms-device-items-head { font-size: 0.9375rem; font-weight: 600; margin-bottom: 2px; }
.cms-bulk-bc { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 10px; font-size: 0.75rem; line-height: 18px; background: #EEEEFD; color: #3B3BA8; white-space: nowrap; }
html.cms-dark .cms-bulk-bc { background: #26285A; color: #C9C8FD; }
html.cms-dark .cms-device-item-linked { background: var(--cms-dark-card); border-color: #2C3050; color: #E4E6F2; }
.cms-device-holder { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.cms-device-holder-actions { flex: 1 0 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cms-device-holder-photo .mud-avatar { width: 48px; height: 48px; font-size: 16px; }
/* Phone: the holder box's actions (Mark returned, Assign to, Release) are full-width buttons, stacked (2026-10-13) */
@media (max-width: 599px) {
    .cms-device-holder-actions { flex-direction: column; align-items: stretch; }
    .cms-device-holder-actions .mud-button-root { width: 100%; min-height: 44px; }
}

/* Companies (Plan 11b) */
.cms-bc { display: inline-flex; align-items: center; gap: 6px; }
.cms-bc-dot { width: 8px; height: 8px; border-radius: 50%; background: #9CA0AE; display: inline-block; }
.cms-bc-on .cms-bc-dot { background: #4F4FCB; }
.cms-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.cms-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #D3D6DE; cursor: pointer; padding: 0; }
.cms-swatch-on { box-shadow: 0 0 0 2px #12131A; }
.cms-swatch:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-company-outlets { margin: 4px 0 0; padding-left: 18px; max-height: 160px; overflow-y: auto; font-size: 0.8125rem; color: #4D5366; }

/* Company Asset (Plan 10) */
.cms-asset-group { font-weight: 600; color: #4D5366; }
.cms-asset-secret-note { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: 0.75rem; color: #975A00; }
.cms-sheet-column { display: flex; align-items: flex-start; gap: 4px; }
.cms-sheet-column .mud-input-control { flex: 1; }
/* Centre the X on the 40px box, below the field's 8px top margin; stays put when an error shows under the field. */
.cms-sheet-column > .mud-icon-button { margin-top: 15px; }
.cms-asset-mobile-row { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 64px; padding: 12px; color: #343849; text-decoration: none; overflow-wrap: anywhere; }
.cms-asset-mobile-row:hover { background: #F9FAFB; }
.cms-asset-mobile-row:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-asset-mobile-title { font-size: 0.875rem; font-weight: 600; color: #0F1222; }
.cms-asset-secret-info { margin-top: 8px; padding: 0 4px; }
.cms-sort-button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-align: left; }
.cms-sort-button:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-secret-cell { display: inline-flex; align-items: center; gap: 2px; }
.cms-secret-mask { letter-spacing: 2px; color: #5C6275; }
.cms-secret-empty { color: #975A00; font-size: 0.75rem; }
.cms-secret-shown { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.cms-row-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; margin: 0; }
.cms-row-field-name { color: #5C6275; font-size: 0.75rem; }
.cms-row-field-value { margin: 0; overflow-wrap: anywhere; }
.cms-columns-row { display: flex; align-items: center; gap: 4px; }
.cms-columns-row .mud-input-control { flex: 1; }

/* Users list (Plan 12) */
.cms-user-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 8px 12px; }
.cms-user-linked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #F3F4F7; border-radius: 8px; padding: 8px 8px 8px 12px; }
.cms-user-linked-text { min-width: 0; overflow-wrap: anywhere; }
/* With Employees view the box opens their record: the name in the accent, a chevron at the right (clickable looks clickable) */
.cms-user-linked-link { text-decoration: none; color: inherit; }
.cms-user-linked-link .cms-user-linked-text { color: #4F4FCB; font-weight: 500; }
.cms-user-linked-link .cms-user-linked-text .cms-sub { font-weight: 400; }
.cms-user-linked-chevron.mud-icon-root { margin-left: auto; color: #5C6275; flex: none; }
.cms-user-linked-link:hover { background: #ECEEF3; }
.cms-user-linked-link:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-role-members-bar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 12px; }
.cms-role-member-remove { text-align: right; width: 1%; white-space: nowrap; }
.cms-member-picks { display: grid; max-height: 360px; overflow-y: auto; }
.cms-member-pick { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-bottom: 1px solid #F1F2F6; }
.cms-member-pick-text { display: grid; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cms-user-linked-avatar.mud-avatar { width: 32px; height: 32px; font-size: 12px; }
.cms-user-chip { border: 1px solid #D3D6DE; background: #fff; color: #343849; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.cms-user-chip-left { border-color: #D8A405; color: #975A00; }
.cms-user-chip-on { border-color: #4F4FCB; color: #4F4FCB; font-weight: 600; }
.cms-user-name { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.cms-user-role { display: inline-block; border: 1px solid #9CA0AE; color: #343849; border-radius: 4px; padding: 0 6px; font-size: 12px; margin: 0 4px 2px 0; }
.cms-user-flag { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: 12px; font-weight: 600; margin-top: 2px; }
.cms-user-flag-left { color: #975A00; background: #FFF4D6; }
.cms-user-flag-locked { color: #A52226; background: #FDECEE; }
.cms-user-missing { color: #5C6275; }
.cms-user-suggestion { color: #975A00; }
.cms-user-link { background: none; border: 0; padding: 0 0 0 6px; font: inherit; font-weight: 600; cursor: pointer; }
.cms-user-password { display: flex; justify-content: space-between; align-items: center; background: #F7F8FA; border: 1px solid #E3E5EA; border-radius: 6px; padding: 10px 12px; }
.cms-user-password-value { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 18px; letter-spacing: .06em; user-select: all; }
.cms-user-password-warn { color: #975A00; font-size: 12px; margin-top: 8px; }

/* Secondary buttons (outlined, default colour): hover and press borrow the indigo edge; the fill stays (2026-10-11). */
.mud-button-outlined.mud-button-outlined-default { transition: color 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .mud-button-outlined.mud-button-outlined-default:not(:disabled):hover { background-color: transparent; border-color: #4F4FCB; color: #4040B0; } }
.mud-button-outlined.mud-button-outlined-default:not(:disabled):active { background-color: transparent; border-color: #4F4FCB; color: #4040B0; }
@media (prefers-reduced-motion: reduce) { .mud-button-outlined.mud-button-outlined-default { transition: none; } }

/* Borderless buttons (employee checklist and text buttons): an inset ring draws the same edge without shifting layout; Remove access takes it in red. */
.cms-hover-edge, .cms-hover-edge-danger { transition: color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .cms-hover-edge:not(:disabled):hover { box-shadow: inset 0 0 0 1px #4F4FCB; color: #4040B0; } }
.cms-hover-edge:not(:disabled):active { box-shadow: inset 0 0 0 1px #4F4FCB; color: #4040B0; }
@media (hover: hover) and (pointer: fine) { .cms-hover-edge-danger:not(:disabled):hover { box-shadow: inset 0 0 0 1px #C62A2F; } }
.cms-hover-edge-danger:not(:disabled):active { box-shadow: inset 0 0 0 1px #C62A2F; }
@media (hover: hover) and (pointer: fine) { .mud-button-root.cms-hover-edge:not(:disabled):hover, .mud-button-root.cms-hover-edge-danger:not(:disabled):hover { background-color: transparent; } }
.mud-button-root.cms-hover-edge:not(:disabled):active, .mud-button-root.cms-hover-edge-danger:not(:disabled):active { background-color: transparent; }
@media (prefers-reduced-motion: reduce) { .cms-hover-edge, .cms-hover-edge-danger { transition: none; } }
/* Row More menus: MudMenu draws its own button, so the edge is set on the shared row instead of a class. */
.cms-row-buttons .mud-menu .mud-icon-button { transition: color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .cms-row-buttons .mud-menu .mud-icon-button:not(:disabled):hover { background-color: transparent; box-shadow: inset 0 0 0 1px #4F4FCB; color: #4040B0; } }
.cms-row-buttons .mud-menu .mud-icon-button:not(:disabled):active { background-color: transparent; box-shadow: inset 0 0 0 1px #4F4FCB; color: #4040B0; }
@media (prefers-reduced-motion: reduce) { .cms-row-buttons .mud-menu .mud-icon-button { transition: none; } }

/* Phone Home (design A2, 2026-10-12): the total as a heading, four small tiles with bare icons, grouped needs. */
.cms-home-phone { display: none; }
@media (max-width: 599.98px) { .cms-home-phone { display: flex; } }
.cms-home-phone { flex-direction: column; gap: 12px; }
/* The total as a line under the tiles, with See all (option E, 2026-10-12). */
/* Home quick actions (2026-10-15, Irfan): the duotone pictures as Primary cards and More rows, under the figures; each picture has a light and a dark file */
.cms-home-actions { display: grid; gap: 10px; margin-bottom: 16px; }
.cms-home-actions-title { margin: 0; font-size: 1rem; font-weight: 600; color: #0F1222; }
.cms-home-actions-sub { margin: 0; font-size: 0.8125rem; color: #5C6275; }
.cms-home-actions-panels { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.cms-home-actions-primary, .cms-home-actions-more { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 8px; background: #FFFFFF; }
.cms-home-actions-more { gap: 8px; }
.cms-home-actions-panels.cms-home-actions-cards-only { grid-template-columns: minmax(0, 1fr); }
.cms-home-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cms-home-panel-title { font-weight: 600; color: #0F1222; }
.cms-home-panel-note { font-size: 0.75rem; font-weight: 400; color: #5C6275; }
.cms-home-actions-primary-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cms-home-card-action { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px 14px 14px; border: 1px solid #E3E5EA; border-radius: 10px; background: #F7F8FA; color: #343849; text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }
.cms-home-card-action .cms-home-action-img, .cms-home-card-action .cms-home-action-img-dark { width: 108px; height: 72px; margin: -4px 0 4px -8px; }
.cms-home-card-action-title { font-size: 1rem; font-weight: 600; color: #0F1222; }
.cms-home-card-action-detail { font-size: 0.8125rem; font-weight: 400; line-height: 1.4; color: #5C6275; }
.cms-home-card-action-go { display: flex; align-self: stretch; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 0.8125rem; font-weight: 600; color: #4F4FCB; }
.cms-home-card-action-arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid #4F4FCB; border-radius: 50%; }
.cms-home-row-action { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; min-height: 56px; padding: 6px 10px 6px 6px; border: 1px solid #E3E5EA; border-radius: 10px; background: #F7F8FA; text-decoration: none; transition: border-color 120ms ease, transform 120ms ease; }
.cms-home-row-action .cms-home-action-img, .cms-home-row-action .cms-home-action-img-dark { width: 60px; height: 40px; }
.cms-home-row-action-text { display: grid; min-width: 0; }
.cms-home-row-action-title { font-weight: 600; color: #0F1222; }
.cms-home-row-action-hint { font-size: 0.75rem; font-weight: 400; color: #5C6275; }
.cms-home-row-action-chevron.mud-icon-root { color: #5C6275; }
.cms-home-card-action:hover, .cms-home-row-action:hover { border-color: #4F4FCB; }
.cms-home-card-action:active, .cms-home-row-action:active { transform: scale(0.98); }
.cms-home-card-action:focus-visible, .cms-home-row-action:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-home-action-img-dark { display: none; }
html.cms-dark .cms-home-action-img { display: none; } html.cms-dark .cms-home-action-img-dark { display: block; }
.cms-home-action-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #4F4FCB; color: #FFFFFF; font-size: 0.75rem; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .cms-home-actions-panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .cms-home-actions { gap: 8px; margin-bottom: 12px; } .cms-home-actions-sub, .cms-home-panel-note, .cms-home-card-action-detail, .cms-home-card-action-go { display: none; } .cms-home-actions-primary, .cms-home-actions-more { padding: 10px; } .cms-home-actions-primary-cards { gap: 6px; } .cms-home-card-action { align-items: center; padding: 6px 4px 10px; text-align: center; } .cms-home-card-action .cms-home-action-img, .cms-home-card-action .cms-home-action-img-dark { width: 84px; height: 56px; margin: 0; } .cms-home-card-action-title { font-size: 0.75rem; } }
@media (prefers-reduced-motion: reduce) { .cms-home-card-action, .cms-home-row-action { transition: none; } .cms-home-card-action:active, .cms-home-row-action:active { transform: none; } }
html.cms-dark .cms-home-actions-primary, html.cms-dark .cms-home-actions-more { background: var(--cms-dark-card); } html.cms-dark .cms-home-card-action, html.cms-dark .cms-home-row-action { border-color: #2C3050; background: #0E0F1A; color: #D2D4E8; }
html.cms-dark .cms-home-actions-title, html.cms-dark .cms-home-panel-title, html.cms-dark .cms-home-card-action-title, html.cms-dark .cms-home-row-action-title { color: #E8E9F5; } html.cms-dark .cms-home-actions-sub, html.cms-dark .cms-home-panel-note, html.cms-dark .cms-home-card-action-detail, html.cms-dark .cms-home-row-action-hint, html.cms-dark .cms-home-row-action-chevron.mud-icon-root { color: #A3A7C6; }
html.cms-dark .cms-home-card-action-go { color: #A5A4FA; } html.cms-dark .cms-home-card-action-arrow { border-color: #A5A4FA; } html.cms-dark .cms-home-card-action:hover, html.cms-dark .cms-home-row-action:hover { border-color: #A5A4FA; } html.cms-dark .cms-home-card-action:focus-visible, html.cms-dark .cms-home-row-action:focus-visible { outline-color: #A5A4FA; } html.cms-dark .cms-home-action-count { background: #A5A4FA; color: #0E0F1A; }
/* Phone Home figures as a donut card (option B, 2026-10-16, Irfan): the total in the middle, a row per status; colours are the KPI cards' own */
.cms-home-donut-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #FFFFFF; }
.cms-home-donut { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.cms-home-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cms-home-donut-slice { fill: none; stroke-width: 18; }
.cms-home-donut-centre { display: grid; justify-items: center; line-height: 1.1; }
.cms-home-donut-number { font-size: 1.5rem; font-weight: 700; color: #0F1222; font-variant-numeric: tabular-nums; }
.cms-home-donut-label { font-size: 0.6875rem; font-weight: 600; color: #5C6275; }
.cms-home-donut-legend { display: grid; min-width: 0; }
.cms-home-donut-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 44px; border-top: 1px solid #E3E5EA; color: #343849; font-size: 0.8125rem; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cms-home-donut-row:first-child { border-top: 0; }
.cms-home-donut-row:active { background: #F1F2F6; }
.cms-home-donut-row:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-home-donut-swatch { width: 10px; height: 10px; border-radius: 3px; }
.cms-home-donut-count { font-weight: 700; color: #0F1222; font-variant-numeric: tabular-nums; }
.cms-home-donut-joining { stroke: #086FC6; background: #086FC6; } .cms-home-donut-active { stroke: #098560; background: #098560; } .cms-home-donut-leaving { stroke: #BB5B15; background: #BB5B15; } .cms-home-donut-resigned { stroke: #BA2738; background: #BA2738; } .cms-home-donut-other { stroke: #C9CCD6; background: #C9CCD6; }
html.cms-dark .cms-home-donut-card { background: var(--cms-dark-card); } html.cms-dark .cms-home-donut-number, html.cms-dark .cms-home-donut-count { color: #E8E9F5; } html.cms-dark .cms-home-donut-label { color: #A3A7C6; }
html.cms-dark .cms-home-donut-row { border-top-color: #2C3050; color: #D2D4E8; } html.cms-dark .cms-home-donut-row:active { background: #1C1F36; } html.cms-dark .cms-home-donut-row:focus-visible { outline-color: #A5A4FA; } html.cms-dark .cms-home-donut-other { stroke: #3A3F63; background: #3A3F63; }
.cms-home-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: -4px; font-size: 0.8125rem; color: #5C6275; }
.cms-home-total-number { font-weight: 600; color: #0F1222; font-variant-numeric: tabular-nums; }
.cms-home-total-context { color: #5C6275; }
.cms-home-total-all { flex: none; font-weight: 600; color: #4F4FCB; text-decoration: none; }
html.cms-dark .cms-home-total { color: #A3A7C6; }
html.cms-dark .cms-home-total-all { color: #A5A4FA; }
/* Phone Home's status tiles are KPI cards (2026-10-14): small, four in one row, each on its gradient card from Irfan's asset pack (420 × 400,
   so the shape keeps 1.05) with its round badge; the number and label are text on top. */
.cms-home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cms-home-tile { display: flex; flex-direction: column; aspect-ratio: 420 / 400; padding: 8px; border-radius: 7px; color: #FFFFFF; text-decoration: none; background: center / 100% 100% no-repeat; }
.cms-home-tile:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-home-kpi-joining { background-image: url("img/home/kpi-joining.svg"); }
.cms-home-kpi-active { background-image: url("img/home/kpi-active.svg"); }
.cms-home-kpi-leaving { background-image: url("img/home/kpi-leaving.svg"); }
.cms-home-kpi-resigned { background-image: url("img/home/kpi-resigned.svg"); }
.cms-home-tile-badge { width: 22px; height: 22px; align-self: flex-end; }
.cms-home-tile-number { margin-top: auto; font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cms-home-tile-label { font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-home-card { background: #FFFFFF; border: 1px solid transparent; border-radius: 8px; overflow: hidden; }
.cms-home-card-title { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px; font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
.cms-home-card-title small { font-size: 0.75rem; font-weight: 500; color: #5C6275; }
.cms-home-group { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 16px; border-top: 1px solid #E3E5EA; color: #343849; text-decoration: none; }
.cms-home-group > .mud-icon-root { color: #5C6275; flex: none; }
/* Each need kind's drawn icon (2026-10-14): a solid object in the kind's colour with a cut-out action badge (+ give, clock wait,
   arrow return, − take away, → has left); no background, light and dark files. */
.cms-need-icon { flex: none; width: 22px; height: 22px; background: center / contain no-repeat; }
.cms-need-icon[data-kind="signed-in"] { background-image: url("img/needs/signed-in.svg"); }
.cms-need-icon[data-kind="device"] { background-image: url("img/needs/device.svg"); }
.cms-need-icon[data-kind="access"] { background-image: url("img/needs/access.svg"); }
.cms-need-icon[data-kind="it"] { background-image: url("img/needs/it.svg"); }
.cms-need-icon[data-kind="returns"] { background-image: url("img/needs/returns.svg"); }
.cms-need-icon[data-kind="removal"] { background-image: url("img/needs/removal.svg"); }
.cms-home-group-title { display: block; font-size: 0.875rem; font-weight: 600; color: #0F1222; }
.cms-home-group-detail { font-size: 0.75rem; color: #5C6275; }
.cms-home-group-count { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 1rem; font-weight: 700; color: #0F1222; font-variant-numeric: tabular-nums; }
.cms-home-group-count .mud-icon-root { color: #5C6275; }
.cms-panel-title + .cms-home-group { border-top: 0; } /* desktop Needs attention: the title's own line is enough (2026-10-14) */
.cms-home-person { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-top: 1px solid #E3E5EA; }
.cms-home-person-name { display: block; font-size: 0.875rem; font-weight: 600; text-decoration: none; color: #0F1222; }
.cms-home-person-meta { font-size: 0.75rem; color: #5C6275; }
.cms-home-more { display: block; width: 100%; min-height: 44px; padding: 12px 16px; border: 0; border-top: 1px solid #E3E5EA; background: none; color: #4F4FCB; font: inherit; font-size: 0.8125rem; font-weight: 600; text-align: left; cursor: pointer; }
.cms-home-card .cms-state { padding: 12px 16px; border-top: 1px solid #E3E5EA; }
/* Home for someone without Employee view: the logo in the middle and why (2026-10-13) */
.cms-home-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: calc(100vh - 200px); padding: 24px 16px; text-align: center; }
.cms-home-empty-logo { width: 160px; max-width: 60%; height: auto; margin-bottom: 8px; }
.cms-home-empty-title { margin: 0; font-size: 1.25rem; font-weight: 600; color: #0F1222; }
.cms-home-empty-text { margin: 0; max-width: 420px; line-height: 1.5; color: #5C6275; }
.cms-home-shortcuts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; max-width: 740px; }
.cms-home-shortcut { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 236px; padding: 12px 14px;
    background: #FFFFFF; border-radius: 8px; text-align: left; text-decoration: none; color: inherit; transition: background-color 150ms ease; }
.cms-home-shortcut:hover { background: #F3F4F7; }
.cms-home-shortcut:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-home-shortcut-icon.mud-icon-root { color: #4F4FCB; }
.cms-home-shortcut-text { display: grid; min-width: 0; }
.cms-home-shortcut-title { font-weight: 600; color: #0F1222; }
.cms-home-shortcut-summary { font-size: 12px; color: #5C6275; }
.cms-home-shortcut-chevron.mud-icon-root { color: #5C6275; }
@media (max-width: 599px) { .cms-home-shortcuts { flex-direction: column; width: 100%; max-width: 420px; } .cms-home-shortcut { width: 100%; min-height: 56px; } }

/* Phone-only controls: shown at phone width, where they stand in for the desktop's row of buttons. */
.cms-phone-only { display: none !important; }
.cms-sheet-actions { display: contents; }

/* Action sheets (CMS Phone Upgrades row 1, 2026-10-12): phone action lists rise from the bottom with a grab handle, the row's
   name on top and full-width rows; close by tapping outside, swiping down, Escape or the ✕. Options: ActionSheet.cs. */
.mud-dialog-container.mud-dialog-bottomcenter:has(.cms-action-sheet) { padding-bottom: 0; }
.mud-dialog.cms-action-sheet { width: 100%; max-width: 600px; margin: 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.mud-dialog.cms-action-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: #D3D6DE; }
.mud-dialog.cms-action-sheet { animation: cms-sheet-rise 160ms cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes cms-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .mud-dialog.cms-action-sheet { animation: cms-sheet-fade 120ms ease-out both; } }
@keyframes cms-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
.cms-action-sheet .mud-dialog-title { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 20px; border-bottom: 1px solid #E3E5EA; }
.cms-action-sheet .cms-employee-actions-profile { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0; text-align: left; flex: 1; }
.cms-action-sheet .cms-employee-actions-avatar.mud-avatar { width: 40px; height: 40px; font-size: 0.875rem; }
.cms-action-sheet .cms-action-sheet-close { margin-left: auto; color: #5C6275; }
.cms-action-sheet .mud-dialog-content { padding: 6px 0 12px; }
.cms-action-sheet .mud-dialog-content .mud-button-root.mud-button-text { justify-content: flex-start; min-height: 52px; padding: 0 20px; border-radius: 0; font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cms-action-sheet .mud-dialog-content .mud-button-text-default { color: #0F1222; }
.cms-action-sheet .mud-dialog-content .mud-button-text-default .mud-button-icon-start { color: #5C6275; }
.cms-action-sheet .mud-button-icon-start { margin-right: 16px; }
.mud-dialog.cms-action-sheet .mud-button-root.cms-hover-edge:not(:disabled):active, .mud-dialog.cms-action-sheet .mud-button-root.cms-hover-edge-danger:not(:disabled):active { box-shadow: none; background-color: #F1F2F6; }
.cms-action-sheet .cms-row-fields { padding: 4px 20px 8px; }

/* Scan a device tag (row 4): the camera sits in a dark frame with an indigo read line; typing is the fallback. */
.cms-scan-content { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 20px 4px; }
.cms-scan-frame { position: relative; width: 100%; max-width: 360px; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #0A0B14; }
.cms-scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cms-scan-line { position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: #A5A4FA; box-shadow: 0 0 0 1px rgb(165 164 250 / 25%); }
.cms-scan-hint { margin: 0; text-align: center; font-size: 0.875rem; color: #5C6275; }
.cms-scan-typed { width: 100%; }
.cms-scan-sheet .mud-dialog-actions { padding: 8px 20px 16px; }

/* Phone bottom bar (option A, 2026-10-11): a screen's action row docks at the bottom on the page surface with a hairline.
   It hides with the top bar (topbar.js sets html[data-cms-bars-hidden]); forms pin it. Desktop keeps the row where it is. */
@media (max-width: 599.98px) {
    .cms-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--mud-zindex-drawer) - 1); display: flex; gap: 8px; margin: 0; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid #E3E5EA; transition: transform 180ms ease; }
    html[data-cms-bars-hidden="true"] .cms-mobile-bar:not(.cms-mobile-bar-pinned):not(:focus-within) { transform: translateY(100%); }
    .cms-mobile-bar > * { flex: 1 1 0; min-width: 0; }
    .cms-mobile-bar .mud-button-root { width: 100%; min-height: 44px; }
    .cms-mobile-bar .mud-button-filled { order: 1; }
    .cms-mobile-bar > .mud-menu > * { flex: 1 1 auto; }
    .cms-mobile-bar > .mud-menu:has(> .mud-icon-button), .cms-mobile-bar > .mud-menu:has(.mud-menu-activator > .mud-icon-button) { flex: 0 0 44px; }
    .cms-mobile-bar .mud-icon-button { border: 1px solid #D3D6DE; border-radius: 8px; color: #343849; }
    .cms-page:has(.cms-mobile-bar) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    html:has(.cms-mobile-bar) .mud-snackbar-location-bottom-right, html:has(.cms-mobile-bar) .mud-snackbar-location-bottom-center, html:has(.cms-mobile-bar) .mud-snackbar-location-bottom-left { bottom: calc(84px + env(safe-area-inset-bottom)); }
    /* Setup's docked buttons too: "Employee added" covered Not needed, Skip and Assign (test round 2, 2026-11-03, K1). */
    html:has(.cms-setup-footer) .mud-snackbar-location-bottom-right, html:has(.cms-setup-footer) .mud-snackbar-location-bottom-center, html:has(.cms-setup-footer) .mud-snackbar-location-bottom-left { bottom: calc(84px + env(safe-area-inset-bottom)); }
    .cms-phone-hide { display: none !important; }
    .cms-phone-only.mud-button-root { display: inline-flex !important; }
    .cms-list-actions:has(> .cms-mobile-bar) { display: contents; }
}
@media (prefers-reduced-motion: reduce) { .cms-mobile-bar { transition: none; } }

/* ===== Dark mode: Midnight Indigo (design/palettes.md midnight-indigo) — generated from the light rules above by gen_dark_css.py ===== */
html.cms-dark { color-scheme: dark; }
html.cms-dark, html.cms-dark body { background: #0E0F1A; color: #D2D4E8; }
html.cms-dark .account-page { background: #0E0F1A; }
/* Dark containers (2026-10-14): #121424 everywhere, except Home on a tablet or desktop, which keeps #15172A. Every dark card
   rule reads this variable; the Home rule swaps it and MudBlazor's own surface for that page only. */
html.cms-dark { --cms-dark-card: #121424; }
@media (min-width: 600px) { html.cms-dark .cms-page:has(.cms-home-grid), html.cms-dark .cms-page:has(.cms-home-empty) { --cms-dark-card: #15172A; --mud-palette-surface: #15172A; } }
html.cms-dark .mud-snackbar { background: var(--cms-dark-card); color: #E8E9F5; border-color: #2C3050; }
html.cms-dark .mud-snackbar .mud-snackbar-icon { color: #4ADE9B; }
html.cms-dark .mud-snackbar::after { background: #4ADE9B; }
html.cms-dark .cms-feedback-warning .cms-feedback-icon { color: #F5BE55; }
html.cms-dark .cms-feedback-error .cms-feedback-icon { color: #C62A2F; }
html.cms-dark .cms-feedback-message { color: #E8E9F5; }
html.cms-dark .cms-feedback-detail { color: #A3A7C6; }
html.cms-dark .account-card { background: var(--cms-dark-card); }
html.cms-dark .account-card .msg { color: #A3A7C6; }
html.cms-dark .account-card hr { border-top: 1px solid #2C3050; }
html.cms-dark .account-card label { color: #E8E9F5; }
html.cms-dark .account-card input { border: 1px solid #3A3F63; }
html.cms-dark .account-card button { background: #A5A4FA; color: #0E0F1A; }
html.cms-dark .account-card .account-reveal { background: transparent; color: #A3A7C6; }
html.cms-dark .account-card .account-reveal:hover { color: #E8E9F5; }
html.cms-dark .account-card .account-reveal:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .account-card .error { color: #FF7A85; }
html.cms-dark .account-card .done { color: #4ADE9B; }
html.cms-dark .signin-page { background: #121424; color: #E8E9F5; color-scheme: dark; }
html.cms-dark .signin-brand { background: #0E0F1A; border-right-color: #2C3050; }
html.cms-dark .signin-logo { content: url("img/machineslogo-white.png"); }
html.cms-dark .signin-headline, html.cms-dark .signin-heading h1 { color: #E8E9F5; }
html.cms-dark .signin-product, html.cms-dark .signin-tagline, html.cms-dark .signin-heading p, html.cms-dark .signin-help { color: #A3A7C6; }
html.cms-dark .signin-field label { color: #C7CAE2; }
html.cms-dark .signin-field input { background: #0E0F1A; border-color: #3A3F63; color: #E8E9F5; }
html.cms-dark .signin-field input::placeholder { color: #8B8FB0; }
html.cms-dark .signin-field input:focus { outline-color: #A5A4FA; border-color: #A5A4FA; }
html.cms-dark .signin-field .account-reveal { color: #A3A7C6; }
html.cms-dark .signin-field .account-reveal:hover { color: #E8E9F5; }
html.cms-dark .signin-field .account-reveal:focus-visible { outline-color: #A5A4FA; }
html.cms-dark .signin-alert { color: #FF7A85; }
html.cms-dark .signin-alert-dot { fill: #C62A2F; }
html.cms-dark .signin-caps { color: #F5BE55; }
html.cms-dark .signin-caps-mark { fill: #F5BE55; }
html.cms-dark .signin-caps-line { stroke: #0E0F1A; }
html.cms-dark .signin-caps-dot { fill: #0E0F1A; }
html.cms-dark .signin-remember { color: #C7CAE2; }
html.cms-dark .signin-remember input { accent-color: #A5A4FA; }
html.cms-dark .signin-remember input:focus-visible { outline-color: #A5A4FA; }
html.cms-dark .signin-button { background: #A5A4FA; color: #0E0F1A; }
html.cms-dark .signin-button:hover { background: #BDBCFC; }
html.cms-dark .signin-button:focus-visible { outline-color: #A5A4FA; }
@media (max-width: 959.98px) {
    html.cms-dark .signin-page { background: #0E0F1A; }
    html.cms-dark .signin-phone-head { background: #0E0F1A; }
    html.cms-dark .signin-phone-headline { color: #E8E9F5; }
    html.cms-dark .signin-phone-tagline { color: #A3A7C6; }
    html.cms-dark .signin-phone-logo { content: url("img/machineslogo-white.png"); }
    html.cms-dark .signin-phone-art { content: url("img/login/badges-dark.png"); }   /* lavender badges made for the navy, cut out of it (2026-10-22) */
}
html.cms-dark .cms-drawer { background: #0A0B14 !important; }
html.cms-dark .cms-sidebar-toggle.mud-icon-button { background: #0A0B14; }
html.cms-dark .cms-sidebar-toggle.mud-icon-button:hover { background: #22254A; }
html.cms-dark .cms-sidebar-toggle.mud-icon-button:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .cms-nav-collapsed .cms-nav-parent:hover { background: #22254A; }
html.cms-dark .cms-nav-collapsed .cms-nav-parent.active, html.cms-dark .cms-nav-collapsed .cms-nav-parent.active:hover { color: #0E0F1A; }
html.cms-dark .cms-nav-collapsed .cms-nav-parent:focus-visible { outline: 2px solid #3A3F63; }
html.cms-dark .cms-nav.mud-navmenu .mud-nav-link:hover:not(.active):not(.mud-nav-link-disabled) { background: #22254A; }
html.cms-dark .cms-nav.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled), html.cms-dark .cms-drawer .cms-nav.mud-navmenu .mud-nav-link.active:hover:not(.mud-nav-link-disabled) { background: #A5A4FA; color: #0E0F1A; }
html.cms-dark .cms-topbar::before { background: #0A0B14; }
@media (min-width: 600px) { html.cms-dark .cms-topbar[data-scrolled="true"]::before { background: rgb(10 11 20 / 85%); } }
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
    html.cms-dark .cms-topbar[data-scrolled="true"]::before { background: #0A0B14; }
}
html.cms-dark .cms-signout button:hover { background: #1C1F36; }
html.cms-dark .cms-link { color: #A5A4FA; }
html.cms-dark .cms-strong { color: #E8E9F5; }
html.cms-dark .cms-sub { color: #A3A7C6; }
html.cms-dark .cms-section { color: #B7BADA; }
html.cms-dark .cms-section:not(:first-child) { border-top: 1px solid #2C3050; }
html.cms-dark .cms-employee-form .mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after { color: #FF7A85; }
html.cms-dark .cms-chip-outlet { background: var(--cms-dark-card); color: #D2D4E8; border: 1px solid #5D6188; }
html.cms-dark .cms-title { color: #E8E9F5; }
html.cms-dark .cms-count { color: #A3A7C6; }
html.cms-dark .cms-filter-button { border: 1px solid #3A3F63; background: var(--cms-dark-card); }
html.cms-dark .cms-filter-count { background: #A5A4FA; color: #0E0F1A; }
html.cms-dark .cms-filter-summary { color: #A3A7C6; }
html.cms-dark .cms-search-unified .cms-search-controls { border: 1px solid #3A3F63; background: #1C1F36; }
html.cms-dark .cms-search-unified .cms-search-controls:focus-within { border-color: #7E82A6; }
html.cms-dark .cms-search-unified .cms-search-category { border-right: 1px solid #3A3F63; }
html.cms-dark .cms-search-unified .cms-filter-button { border-left: 1px solid #3A3F63; }
html.cms-dark .cms-search-unified .cms-filter-button:hover { background: #2C3050; }
html.cms-dark .cms-search-unified .cms-filter-button:focus-visible { outline: 2px solid #7E82A6; }
html.cms-dark .cms-list-pager-top { border-top: 1px solid #2C3050; border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-list-mobile-items > li { border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-employee-mobile-row { background: var(--cms-dark-card); color: #D2D4E8; }
html.cms-dark .cms-employee-mobile-row:hover { background: #1C1F36; }
html.cms-dark button.cms-employee-mobile-row:active, html.cms-dark a.cms-employee-mobile-row:active { background: #1C1F36; }
html.cms-dark .cms-mobile-row-static:hover { background: var(--cms-dark-card); }
html.cms-dark .cms-employee-mobile-row:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .cms-employee-mobile-name { color: #E8E9F5; }
html.cms-dark .cms-mobile-meta, html.cms-dark .cms-mobile-detail { color: #A3A7C6; }
html.cms-dark .cms-employee-actions-avatar.mud-avatar { background: #2C3050; color: #D2D4E8; }
html.cms-dark .cms-employee-actions-name { color: #E8E9F5; }
html.cms-dark .cms-filter-panel .flex-column > .mud-typography-h2:first-child { background: #0A0B14; }
html.cms-dark .mud-drawer.cms-filter-panel { background: var(--cms-dark-card) !important; color: #D2D4E8 !important; }
html.cms-dark .cms-history th { color: #B7BADA; border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-history td { border-bottom: 1px solid #1C1F36; }
html.cms-dark .cms-history-detail td table { background: #1C1F36; }
html.cms-dark .cms-before { color: #FF7A85; }
html.cms-dark .cms-after { color: #4ADE9B; }
html.cms-dark .cms-initials { background: #25285A; color: #BDBCFC; }
html.cms-dark .cms-link-button { color: #A5A4FA; }
html.cms-dark .cms-state { color: #A3A7C6; }
html.cms-dark .cms-state-error { color: #FF7A85; }
html.cms-dark .cms-home-empty-logo { content: url("img/machineslogo-white.png"); }
html.cms-dark .cms-home-empty-title { color: #E8E9F5; }
html.cms-dark .cms-home-empty-text { color: #A3A7C6; }
html.cms-dark .cms-home-shortcut { background: var(--cms-dark-card); }
html.cms-dark .cms-home-shortcut:hover { background: #1C1F36; }
html.cms-dark .cms-home-shortcut:focus-visible { outline-color: #A5A4FA; }
html.cms-dark .cms-home-shortcut-icon.mud-icon-root { color: #A5A4FA; }
html.cms-dark .cms-home-shortcut-title { color: #E8E9F5; }
html.cms-dark .cms-home-shortcut-summary, html.cms-dark .cms-home-shortcut-chevron.mud-icon-root { color: #A3A7C6; }
html.cms-dark .cms-system { color: #B7BADA; }
html.cms-dark .cms-system-home { color: #A5A4FA; }
html.cms-dark .cms-avatar { background: #25285A; color: #BDBCFC; }
html.cms-dark .cms-record-header .cms-avatar.mud-avatar { background: #25285A; color: #BDBCFC; }
html.cms-dark .cms-checklist-title { color: #D2D4E8; }
html.cms-dark .cms-step-done { border-color: #4ADE9B; }
html.cms-dark .cms-step-button { background: var(--cms-dark-card); color: #E8E9F5; }
html.cms-dark .cms-compact-missing { color: #F5BE55; }
@media (max-width: 599px) {
    html.cms-dark .cms-step-mobile-action.mud-icon-button:focus-visible::before { outline: 2px solid #A5A4FA; }
    html.cms-dark .cms-employee-record-tabs .mud-tab.mud-tab-active { background: #25285A; color: #BDBCFC; box-shadow: inset 0 -2px #A5A4FA; }
    html.cms-dark .cms-employee-record-tabs .cms-record-section-title { color: #E8E9F5; }
    html.cms-dark .cms-assets .cms-asset-mobile-meta { color: #A3A7C6; }
    html.cms-dark .cms-assets .cms-asset-return-icon.mud-icon-root { color: #A5A4FA; }
    html.cms-dark .cms-systems .cms-system-mobile-meta { color: #A3A7C6; }
    html.cms-dark .cms-systems .cms-system-remove-icon.mud-icon-root { color: #C62A2F; }
    html.cms-dark .cms-systems .cms-system-view-icon.mud-icon-root { color: #A5A4FA; }
}
html.cms-dark .cms-profile dt { color: #A3A7C6; }
html.cms-dark .cms-profile dd { color: #E8E9F5; }
html.cms-dark #blazor-error-ui { background: #3C1820; color: #FF7A85; border-top: 1px solid #7A3038; }
html.cms-dark #blazor-error-ui .reload { color: #A5A4FA; }
html.cms-dark a.cms-tile:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .cms-panel { background: var(--cms-dark-card); border-color: transparent; }
html.cms-dark .cms-panel-title { border-bottom: 1px solid #1C1F36; color: #E8E9F5; }
html.cms-dark .cms-line { border-bottom: 1px solid #1C1F36; }
html.cms-dark .cms-bell-empty { color: #A3A7C6; }
html.cms-dark .cms-find-hint { color: #8F93B5; }
html.cms-dark .mud-paper.mud-paper-outlined.cms-password-card { border-color: #2C3050; }
html.cms-dark .cms-password-hero, html.cms-dark .cms-password-rules { background: #1C1F36; }
html.cms-dark .cms-art-light { display: none; }
html.cms-dark .cms-art-dark { display: block; }
html.cms-dark .cms-rule-mark { background-image: url("img/password/rule-empty-dark.svg"); }
html.cms-dark .cms-password-rules [data-met="true"] .cms-rule-mark { background-image: url("img/password/check-dark.svg"); }
html.cms-dark .cms-password-hero-title, html.cms-dark .cms-password-rules-head { color: #E8E9F5; }
html.cms-dark .cms-password-hero-text { color: #A3A7C6; }
html.cms-dark .cms-password-rules li { color: #D2D4E8; }
html.cms-dark .cms-password-rules [data-met="true"] { color: #4ADE9B; }
html.cms-dark .cms-find-short { background: var(--cms-dark-card); border: 1px solid #2C3050; color: #A3A7C6; }
html.cms-dark .cms-perms .mud-expand-panel { border-color: transparent; }
html.cms-dark .cms-perm-area { color: #D2D4E8; }
html.cms-dark .cms-perm-sensitive { color: #F5BE55; }
html.cms-dark .cms-perm-count { color: #B7BADA; }
html.cms-dark .cms-perm-table th, html.cms-dark .cms-perm-table td { border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-perm-table thead th { color: #B7BADA; }
html.cms-dark .cms-perm-table th[scope=row], html.cms-dark .cms-perm-table thead th:first-child { background: var(--cms-dark-card); }
html.cms-dark .cms-perm-none { color: #8F93B5; }
html.cms-dark .cms-role-summary { background: #1C1F36; color: #D2D4E8; }
html.cms-dark .cms-avatar-sm { background: #2A2D5E; color: #BDBCFC; }
html.cms-dark .cms-account-name { color: #E8E9F5; }
html.cms-dark .mud-popover.cms-topbar-dropdown { background: var(--cms-dark-card); color: #D2D4E8; border: 1px solid #2C3050; }
html.cms-dark .cms-topbar-dropdown .cms-account-name { color: #E8E9F5; }
html.cms-dark .cms-topbar-dropdown .cms-sub, html.cms-dark .cms-topbar-dropdown .cms-bell-empty { color: #A3A7C6; }
html.cms-dark .cms-topbar-dropdown .mud-divider { border-color: #2C3050; }
html.cms-dark .cms-topbar-dropdown .mud-menu-item:hover, html.cms-dark .cms-topbar-dropdown .mud-menu-item:focus-visible { background: #1C1F36; color: #E8E9F5; }
html.cms-dark .cms-topbar-dropdown .cms-signout button { color: #FF7A85; }
html.cms-dark .cms-theme-toggle:hover, html.cms-dark .cms-theme-toggle:focus-visible { background: #1C1F36; color: #E8E9F5; }
html.cms-dark .cms-theme-toggle:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .cms-theme-toggle[aria-checked="true"] .cms-theme-switch { background: #A5A4FA; }
html.cms-dark .cms-theme-toggle[aria-checked="true"] .cms-theme-switch::after { background: #0E0F1A; }
html.cms-dark .cms-topbar-dropdown .cms-signout button:hover, html.cms-dark .cms-topbar-dropdown .cms-signout button:focus-visible { background: #3C1820; color: #FF7A85; }
html.cms-dark .cms-area { border: 1px solid #3A3F63; color: #B7BADA; }
html.cms-dark .cms-history-grid .cms-history-detail .cms-history { background: #1C1F36; }
html.cms-dark .cms-import-step-next .cms-import-circle { background: #3A3F63; color: #B7BADA; }
html.cms-dark .cms-import-step-next { color: #8F93B5; }
html.cms-dark .cms-import-guide th, html.cms-dark .cms-import-guide td { border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-import-guide-dialog .cms-import-guide th { background: #1C1F36; }
html.cms-dark .cms-dropzone { border: 2px dashed #3A3F63; color: #B7BADA; background: #1C1F36; }
html.cms-dark .cms-dropzone-active, html.cms-dark .cms-dropzone:hover { border-color: #A5A4FA; background: #25285A; }
html.cms-dark .cms-import-status { color: #B7BADA; }
html.cms-dark .cms-import-headline { color: #E8E9F5; }
html.cms-dark .cms-import-tab { border: 1px solid #3A3F63; background: var(--cms-dark-card); }
html.cms-dark .cms-import-tab.cms-import-tab-on { background: #2B2A55; border-color: #A5A4FA; color: #E8E9F5; }
html.cms-dark .cms-count-dark { background: #4A4F75; }
html.cms-dark .cms-import-remove { color: #F5BE55; }
html.cms-dark .cms-import-scroll { border: 1px solid #2C3050; }
html.cms-dark .cms-import-table th { background: #1C1F36; color: #B7BADA; }
html.cms-dark .cms-import-table td { border-top: 1px solid #1C1F36; }
html.cms-dark .cms-import-cell { background: var(--cms-dark-card); }
html.cms-dark .cms-cell-error .cms-import-cell { outline: 2px solid #C62A2F; }
html.cms-dark .cms-import-input { border: 1px solid #A5A4FA; }
html.cms-dark .cms-import-error { color: #FF7A85; }
html.cms-dark .cms-import-warning { color: #F5BE55; }
html.cms-dark .cms-import-empty { color: #B7BADA; }
html.cms-dark .cms-import-leftout { color: #FF7A85; }
html.cms-dark .cms-recipients-note { background: #352A12; border: 1px solid #7A5E26; color: #F5BE55; }
html.cms-dark .cms-recipients-head { border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-recipients-title { color: #E8E9F5; }
html.cms-dark .cms-recipients-table th { color: #B7BADA; background: #1C1F36; border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-recipients-line-error td { color: #FF7A85; }
html.cms-dark .cms-recipients-error { color: #FF7A85; }
html.cms-dark .cms-access-tabs { border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-access-tab { color: #A3A7C6; }
html.cms-dark .cms-access-tab-on { color: #E8E9F5; border-bottom-color: #A5A4FA; }
html.cms-dark .cms-access-seg { background: #2C3050; }
html.cms-dark .cms-access-seg-on { background: #A5A4FA; }
html.cms-dark .cms-access-count { color: #D2D4E8; }
html.cms-dark .cms-access-names { color: #A3A7C6; }
html.cms-dark .cms-access-waiting { color: #F5BE55; }
html.cms-dark .cms-chip-held { background: #1C1F36; color: #D2D4E8; border: 1px solid #3A3F63; }
html.cms-dark .cms-access-open { color: #8F93B5; }
html.cms-dark .cms-access-section { border-bottom: 1px solid #2C3050; color: #E8E9F5; }
html.cms-dark .cms-access-password { border: 1px solid #3A3F63; }
html.cms-dark .cms-access-password:focus { border-color: #7E82A6; }
html.cms-dark .cms-access-table tr { border-bottom-color: #1C1F36; }
html.cms-dark .cms-access-summary { border-color: transparent; background: #1C1F36; }
html.cms-dark .cms-access-summary-sent { color: #4ADE9B; }
html.cms-dark .cms-access-summary-error { color: #FF7A85; }
html.cms-dark .cms-bc-dot { background: #5D6188; }
html.cms-dark .cms-bc-on .cms-bc-dot { background: #A5A4FA; }
html.cms-dark .cms-swatch { border: 2px solid var(--cms-dark-card); box-shadow: 0 0 0 1px #3A3F63; }
html.cms-dark .cms-swatch-on { box-shadow: 0 0 0 3px #FFFFFF; }
html.cms-dark .cms-swatch:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .cms-company-outlets { color: #B7BADA; }
html.cms-dark .cms-asset-group { color: #B7BADA; }
html.cms-dark .cms-asset-secret-note { color: #F5BE55; }
html.cms-dark .cms-asset-mobile-row { color: #D2D4E8; }
html.cms-dark .cms-asset-mobile-row:hover { background: #1C1F36; }
html.cms-dark .cms-asset-mobile-row:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .cms-asset-mobile-title { color: #E8E9F5; }
html.cms-dark .cms-sort-button:focus-visible { outline: 2px solid #A5A4FA; }
html.cms-dark .cms-secret-mask { color: #A3A7C6; }
html.cms-dark .cms-secret-empty { color: #F5BE55; }
html.cms-dark .cms-row-field-name { color: #A3A7C6; }
html.cms-dark .cms-user-chip { border: 1px solid #3A3F63; background: var(--cms-dark-card); color: #D2D4E8; }
html.cms-dark .cms-user-chip-left { color: #F5BE55; }
html.cms-dark .cms-user-chip-on { border-color: #A5A4FA; color: #A5A4FA; }
html.cms-dark .cms-user-role { border: 1px solid #5D6188; color: #D2D4E8; }
html.cms-dark .cms-user-flag-left { color: #F5BE55; background: #352A12; }
html.cms-dark .cms-user-flag-locked { color: #FF7A85; background: #3C1820; }
html.cms-dark .cms-user-missing { color: #A3A7C6; }
html.cms-dark .cms-user-suggestion { color: #F5BE55; }
html.cms-dark .cms-user-password { background: #0E0F1A; border: 1px solid #2C3050; }
html.cms-dark .cms-user-password-warn { color: #F5BE55; }
html.cms-dark .cms-user-linked { background: #1C1F36; }
html.cms-dark .cms-user-linked-link .cms-user-linked-text { color: #A5A4FA; }
html.cms-dark .cms-user-linked-chevron.mud-icon-root { color: #A3A7C6; }
html.cms-dark .cms-user-linked-link:hover { background: #24284A; }
html.cms-dark .cms-member-pick { border-bottom-color: #1C1F36; }
/* Sign-in and change password: white logo, dark fields (native inputs set no colours of their own). */
html.cms-dark .account-card .logo { content: url("img/machineslogo-white.png"); }
html.cms-dark .account-card input { background: #1C1F36; color: #E8E9F5; }
/* Status colours are inline (StatusColours); dark mode needs the lifted set, hence !important. */
html.cms-dark .cms-status-wrap .cms-status[data-kind="Joining"] { color: #7DBEFF !important; }
html.cms-dark .cms-status-wrap .cms-dot[data-kind="Joining"] { background: #7DBEFF !important; }
html.cms-dark .cms-status-wrap .cms-status[data-kind="Active"] { color: #4ADE9B !important; }
html.cms-dark .cms-status-wrap .cms-dot[data-kind="Active"] { background: #4ADE9B !important; }
html.cms-dark .cms-status-wrap .cms-status[data-kind="Leaving"] { color: #F5BE55 !important; }
html.cms-dark .cms-status-wrap .cms-dot[data-kind="Leaving"] { background: #F5BE55 !important; }
html.cms-dark .cms-status-wrap .cms-status[data-kind="Inactive"] { color: #FF7A85 !important; }
html.cms-dark .cms-status-wrap .cms-dot[data-kind="Inactive"] { background: #FF7A85 !important; }
html.cms-dark .cms-status-wrap .cms-status[data-kind="Held"] { color: #BDBCFC !important; }
html.cms-dark .cms-status-wrap .cms-dot[data-kind="Held"] { background: #BDBCFC !important; }
html.cms-dark .cms-status-wrap .cms-status[data-kind="Unknown"] { color: #A3A7C6 !important; }
html.cms-dark .cms-status-wrap .cms-dot[data-kind="Unknown"] { background: #A3A7C6 !important; }
html.cms-dark .cms-status-wrap .cms-status[data-kind="Retired"] { color: #C4ABA6 !important; }
html.cms-dark .cms-status-wrap .cms-dot[data-kind="Retired"] { background: #C4ABA6 !important; }
/* Secondary buttons: the lifted indigo edge. */
@media (hover: hover) and (pointer: fine) { html.cms-dark .mud-button-outlined.mud-button-outlined-default:not(:disabled):hover { border-color: #A5A4FA; color: #BDBCFC; } }
html.cms-dark .mud-button-outlined.mud-button-outlined-default:not(:disabled):active { border-color: #A5A4FA; color: #BDBCFC; }
@media (hover: hover) and (pointer: fine) { html.cms-dark .cms-hover-edge:not(:disabled):hover { box-shadow: inset 0 0 0 1px #A5A4FA; color: #BDBCFC; } }
html.cms-dark .cms-hover-edge:not(:disabled):active { box-shadow: inset 0 0 0 1px #A5A4FA; color: #BDBCFC; }
@media (hover: hover) and (pointer: fine) { html.cms-dark .cms-hover-edge-danger:not(:disabled):hover { box-shadow: inset 0 0 0 1px #C62A2F; } }
html.cms-dark .cms-hover-edge-danger:not(:disabled):active { box-shadow: inset 0 0 0 1px #C62A2F; }
/* Dark mode (2026-10-28): the trash icon itself is red, no disc behind it (Irfan). #C62A2F was too faint on the dark card, so it
   takes the readable red of dark mode's red words; hover and press keep the red edge above. */
html.cms-dark .mud-icon-button.cms-hover-edge-danger:not(:disabled) { color: #FF7A85 !important; }
/* Dark mode uses light mode's red #C62A2F for solid buttons, icons and outlines (2026-10-13). Red words would read only
   ~3.2:1 on a dark card, so text keeps the lighter #FF7A85: text and outlined buttons' labels, error lines, menu items. */
html.cms-dark .mud-button-text-error, html.cms-dark .mud-button-outlined-error { color: #FF7A85; }
html.cms-dark .mud-button-outlined-error { border-color: #C62A2F; }
html.cms-dark .mud-typography.mud-error-text { color: #FF7A85 !important; }
html.cms-dark .mud-alert-text-error { color: #FF7A85; } html.cms-dark .mud-alert-text-error .mud-alert-icon { color: #FF7A85; }
/* Field errors: MudBlazor colours the message and label with !important, so these need it too. */
html.cms-dark .mud-input-helper-text.mud-input-error { color: #FF7A85 !important; }
html.cms-dark .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol.mud-input-error { color: #FF7A85 !important; }
html.cms-dark .mud-menu-item.cms-menu-danger { color: #FF7A85; }
html.cms-dark .cms-history-mobile-row { background: var(--cms-dark-card); color: #E8E9F5; border-bottom-color: #2C3050; }
html.cms-dark .cms-history-mobile-row:active { background: #1C1F36; }
html.cms-dark .cms-history-mobile-meta, html.cms-dark .cms-history-mobile-chevron.mud-icon-root, html.cms-dark .cms-history-sheet-facts dt { color: #A3A7C6; }
html.cms-dark .cms-history-mobile-count { color: #A5A4FA; }
html.cms-dark .cms-history-mobile-record { color: #D2D4E8; }
/* One red for red words in dark mode: #FF7A85 everywhere (2026-10-13), replacing #FF9A9A and #FF9AA2. */
@media (hover: hover) and (pointer: fine) { html.cms-dark .cms-row-buttons .mud-menu .mud-icon-button:not(:disabled):hover { box-shadow: inset 0 0 0 1px #A5A4FA; color: #BDBCFC; } }
html.cms-dark .cms-row-buttons .mud-menu .mud-icon-button:not(:disabled):active { box-shadow: inset 0 0 0 1px #A5A4FA; color: #BDBCFC; }
/* Company/outlet box: in dark mode the outlet half takes the list search bar's colour, with no border (2026-10-12). */
html.cms-dark .cms-company-outlet > .cms-chip-outlet { background: #1C1F36; color: #D2D4E8; border-color: transparent; }
html.cms-dark .cms-mobile-bar { background: var(--cms-dark-card); border-top-color: #2C3050; }
@media (max-width: 599.98px) {
    html.cms-dark .cms-search-unified .cms-search-popped .cms-search-text { background: var(--cms-dark-card); box-shadow: 0 4px 16px rgb(0 0 0 / 50%); }
    html.cms-dark .cms-search-unified .cms-search-popped .cms-search-text .mud-input.mud-input-outlined { background: #1C1F36; border-color: #8A8FB0; }
}
@media (max-width: 599.98px) { html.cms-dark .cms-mobile-bar .mud-icon-button { border-color: #3A3F63; color: #D2D4E8; } }
html.cms-dark .mud-dialog.cms-action-sheet::before { background: #3A3F63; }
html.cms-dark .cms-action-sheet .mud-dialog-title { border-bottom-color: #2C3050; }
html.cms-dark .cms-action-sheet .cms-action-sheet-close { color: #A3A7C6; }
html.cms-dark .cms-action-sheet .mud-dialog-content .mud-button-text-default { color: #E8E9F5; }
html.cms-dark .cms-action-sheet .mud-dialog-content .mud-button-text-default .mud-button-icon-start { color: #A3A7C6; }
html.cms-dark .mud-dialog.cms-action-sheet .mud-button-root.cms-hover-edge:not(:disabled):active, html.cms-dark .mud-dialog.cms-action-sheet .mud-button-root.cms-hover-edge-danger:not(:disabled):active { background-color: #1C1F36; }
html.cms-dark .cms-scan-hint { color: #A3A7C6; }
html.cms-dark .cms-home-total-number, html.cms-dark .cms-home-card-title, html.cms-dark .cms-home-group-title, html.cms-dark .cms-home-group-count, html.cms-dark .cms-home-person-name { color: #E8E9F5; }
html.cms-dark .cms-home-total-context, html.cms-dark .cms-home-card-title small, html.cms-dark .cms-home-group-detail, html.cms-dark .cms-home-person-meta, html.cms-dark .cms-home-group > .mud-icon-root, html.cms-dark .cms-home-group-count .mud-icon-root { color: #A3A7C6; }
html.cms-dark .cms-home-card { background: var(--cms-dark-card); border-color: transparent; }
html.cms-dark .cms-home-group, html.cms-dark .cms-home-person, html.cms-dark .cms-home-more, html.cms-dark .cms-home-card .cms-state { border-top-color: #2C3050; }
html.cms-dark .cms-home-group { color: #D2D4E8; }
html.cms-dark .cms-need-icon[data-kind="signed-in"] { background-image: url("img/needs/signed-in-dark.svg"); }
html.cms-dark .cms-need-icon[data-kind="device"] { background-image: url("img/needs/device-dark.svg"); }
html.cms-dark .cms-need-icon[data-kind="access"] { background-image: url("img/needs/access-dark.svg"); }
html.cms-dark .cms-need-icon[data-kind="it"] { background-image: url("img/needs/it-dark.svg"); }
html.cms-dark .cms-need-icon[data-kind="returns"] { background-image: url("img/needs/returns-dark.svg"); }
html.cms-dark .cms-need-icon[data-kind="removal"] { background-image: url("img/needs/removal-dark.svg"); }
html.cms-dark .cms-home-more { color: #A5A4FA; }
/* ===== End dark mode ===== */
/* Employee setup (spec §11i): step bar, step card, footer. Phone: progress line, docked footer. */
.cms-setup { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
/* The page's header (title, ID, joining date, company) sits in its own card, like the record's (2026-10-12). */
.cms-setup-head { padding: 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.cms-setup-head .cms-page-header { margin-bottom: 0; }
.cms-add-head { margin-bottom: 16px; } /* Add employee sits outside .cms-setup, so its own gap */
/* Title and step bar share the header card, split by a hairline (header style B, 2026-10-12). */
.cms-setup-split { height: 1px; background: #E3E5EA; margin: 12px -24px; }
html.cms-dark .cms-setup-split { background: #2C3050; }
.cms-setup-meta { color: #555B6E; font-size: 13px; }
.cms-setup-steps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.cms-setup-step { flex: 1 1 0; min-width: 0; display: flex; gap: 12px; align-items: flex-start; }
.cms-setup-mark { width: 28px; height: 28px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid #C9CCD6; color: #555B6E; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.cms-setup-step.done .cms-setup-mark { background: #4F4FCB; border-color: #4F4FCB; color: #FFFFFF; }
.cms-setup-step.current .cms-setup-mark { border-color: #4F4FCB; color: #4F4FCB; }
.cms-setup-text { display: flex; flex-direction: column; min-width: 0; }
.cms-setup-name { font-weight: 600; }
.cms-setup-step.current .cms-setup-name { color: #4F4FCB; }
.cms-setup-result { font-size: 12px; color: #555B6E; }
.cms-setup-progress { display: none; }
.cms-setup-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cms-setup-title { margin: 0; font-size: 16px; font-weight: 600; }
.cms-setup-lead { margin: -12px 0 0; color: #555B6E; }
.cms-setup-label { font-size: 12px; font-weight: 600; color: #344054; }
.cms-setup-muted { color: #555B6E; }
.cms-setup-kinds { display: inline-flex; align-self: flex-start; border: 1px solid #C9CCD6; border-radius: 8px; overflow: hidden; }
.cms-setup-kind { min-height: 36px; padding: 0 16px; border: 0; background: #FFFFFF; color: #0F1222; font: inherit; cursor: pointer; }
.cms-setup-kind + .cms-setup-kind { border-left: 1px solid #C9CCD6; }
.cms-setup-kind[aria-pressed="true"] { background: #EEEFFD; color: #2E2F7A; font-weight: 500; }
.cms-setup-kind:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-setup-find { display: flex; gap: 8px; align-items: center; }
.cms-setup-find > .mud-input-control { flex: 1; }
.cms-setup-none { margin: 0; color: #555B6E; font-size: 13px; }
.cms-setup-assigned, .cms-setup-given { margin: 0; padding: 12px 16px; list-style: none; background: #F7F8FA; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cms-setup-assigned li, .cms-setup-given-item { display: inline-flex; align-items: center; gap: 4px; color: #18794E; font-weight: 500; }
.cms-setup-mail { border: 1px solid transparent; border-radius: 8px; overflow: hidden; background: #F7F8FA; }
.cms-setup-mail-head { margin: 0; padding: 12px 16px; background: #EEF0F4; border-bottom: 1px solid #E3E5EA; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.cms-setup-mail-head dt, .cms-setup-mail-list dt { color: #555B6E; }
.cms-setup-mail-head dd, .cms-setup-mail-list dd { margin: 0; }
.cms-setup-mail-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cms-setup-mail-body p { margin: 0; }
.cms-setup-mail-list { margin: 0; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px 16px; }
.cms-setup-footer { display: flex; align-items: center; gap: 12px; }
.cms-setup-gap { flex: 1; }
.cms-setup-label-short { display: none; }
html.cms-dark .cms-setup-meta, html.cms-dark .cms-setup-result, html.cms-dark .cms-setup-lead, html.cms-dark .cms-setup-none,
html.cms-dark .cms-setup-muted, html.cms-dark .cms-setup-mail-head dt, html.cms-dark .cms-setup-mail-list dt { color: #A3A7C2; }
html.cms-dark .cms-setup-mark { border-color: #3A3F63; color: #A3A7C2; }
html.cms-dark .cms-setup-step.done .cms-setup-mark { background: #A5A4FA; border-color: #A5A4FA; color: #0E0F1A; }
html.cms-dark .cms-setup-step.current .cms-setup-mark, html.cms-dark .cms-setup-step.current .cms-setup-name { border-color: #A5A4FA; color: #A5A4FA; }
html.cms-dark .cms-setup-label { color: #C7CAE2; }
html.cms-dark .cms-setup-kinds, html.cms-dark .cms-setup-kind + .cms-setup-kind { border-color: #3A3F63; }
html.cms-dark .cms-setup-kind { background: var(--cms-dark-card); color: #E6E7F2; }
html.cms-dark .cms-setup-kind[aria-pressed="true"] { background: #2A2B55; color: #D9D9FF; }
html.cms-dark .cms-setup-assigned, html.cms-dark .cms-setup-given, html.cms-dark .cms-setup-mail-head { background: #1A1C33; border-color: #2C3050; }
html.cms-dark .cms-setup-assigned, html.cms-dark .cms-setup-given { border-color: transparent; }
html.cms-dark .cms-setup-assigned li, html.cms-dark .cms-setup-given-item { color: #4ADE9B; }
html.cms-dark .cms-setup-mail { border-color: transparent; background: #1C1F36; }
@media (max-width: 599.98px) {
    .cms-setup-steps { display: none; }
    .cms-setup-progress { display: flex; flex-direction: column; gap: 8px; }
    .cms-setup-progress-line { display: flex; justify-content: space-between; font-size: 13px; }
    .cms-setup-progress-line span:first-child { font-weight: 600; }
    .cms-setup-progress-line span:last-child { color: #555B6E; }
    .cms-setup-progress-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
    .cms-setup-progress-bar span { height: 4px; border-radius: 2px; background: #E3E5EA; }
    .cms-setup-progress-bar span.on { background: #4F4FCB; }
    .cms-setup-head { padding: 16px; }
    .cms-setup-split { margin: 10px -16px; }
    .cms-setup-card { padding: 16px; }
    /* Buttons dock at the bottom like other phone screens, always in view, but in the page's own colour with no bar or line (2026-10-12). */
    .cms-setup { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
    .cms-setup-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--mud-zindex-drawer) - 1); gap: 8px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: #F7F8FA; }
    html.cms-dark .cms-setup-footer { background: #0E0F1A; }
    .cms-setup-footer .cms-setup-gap { display: none; }
    .cms-setup-footer > .mud-button-root { flex: 1 1 0; min-width: 0; min-height: 44px; }
    .cms-setup-footer > .cms-setup-back { flex: 0 0 48px; min-width: 48px; }
    .cms-setup-back-text { display: none; }
    .cms-setup-label-wide { display: none; }
    .cms-setup-label-short { display: inline; }
    .cms-setup-back .mud-button-icon-start { margin: 0; }
    .cms-setup-mail-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .cms-setup-mail-list dd { margin-bottom: 10px; }
    html.cms-dark .cms-setup-progress-bar span { background: #2C3050; }
    html.cms-dark .cms-setup-progress-bar span.on { background: #A5A4FA; }
    html.cms-dark .cms-setup-progress-line span:last-child { color: #A3A7C2; }
}

/* Org chart (Plan 17): one card; template choices as three tiles; departments with up/down moves */
.cms-org-card { padding: 20px; display: grid; gap: 12px; }
.cms-org-pick { min-width: 220px; margin: 0; }
.cms-org-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cms-org-heading { font-size: 0.875rem; font-weight: 600; margin: 8px 0 0; }
.cms-org-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.cms-org-template { display: grid; gap: 4px; justify-items: start; padding: 12px; border: 1px solid #D3D6DE; border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cms-org-template-on { border-color: #4F4FCB; box-shadow: inset 0 0 0 1px #4F4FCB; }
.cms-org-template:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-org-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cms-org-departments { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cms-org-department { border-radius: 8px; padding: 4px 8px; }
.cms-org-department-on { background: #F3F4F7; }
.cms-org-department-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cms-org-department-name { display: grid; flex: 1; min-width: 160px; }
.cms-org-positions { margin: 4px 0 4px 40px; padding: 0; display: grid; gap: 2px; }
.cms-org-positions li { display: flex; align-items: center; gap: 4px; }
.cms-org-positions li > span { flex: 1; }
.cms-org-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
html.cms-dark .cms-org-department-on { background: #1C1F36; }
html.cms-dark .cms-org-template, html.cms-dark .cms-org-thumb { border-color: #2C3050; }
/* Template tiles sketch each leader page (Plan 19): C navy side + grid, D frames, E rings, F photo top + grid. */
.cms-org-thumb { display: grid; gap: 3px; padding: 5px; box-sizing: border-box; align-content: start; width: 48px; height: 64px; border: 1px solid #D3D6DE; border-radius: 4px; background: #F3F4F7; }
.cms-org-thumb-swiss { width: 64px; height: 48px; grid-template-columns: 16px repeat(3, 1fr); }
.cms-org-thumb-pinboard, .cms-org-thumb-rings, .cms-org-thumb-spotlight { grid-template-columns: repeat(3, 1fr); }
.cms-org-sketch-panel, .cms-org-sketch-card, .cms-org-sketch-lead, .cms-org-sketch-frame, .cms-org-sketch-ring, .cms-org-sketch-ring-lead, .cms-org-sketch-hero { background: #C5C9D3; border-radius: 1px; }
.cms-org-sketch-panel { grid-row: 1 / span 2; background: #12131A; }
.cms-org-sketch-card, .cms-org-sketch-frame { aspect-ratio: 3 / 4; }
.cms-org-sketch-frame { box-shadow: inset 0 0 0 1.5px #fff; }
.cms-org-sketch-lead { grid-column: 2; aspect-ratio: 3 / 4; }
.cms-org-sketch-ring { aspect-ratio: 1; border-radius: 50%; }
.cms-org-sketch-ring-lead { grid-column: 1 / -1; justify-self: center; width: 16px; height: 16px; border-radius: 50%; }
.cms-org-sketch-hero { grid-column: 1 / -1; height: 22px; background: #12131A; }
.cms-org-template-on .cms-org-sketch-card, .cms-org-template-on .cms-org-sketch-lead, .cms-org-template-on .cms-org-sketch-frame, .cms-org-template-on .cms-org-sketch-ring, .cms-org-template-on .cms-org-sketch-ring-lead { background: #A5A4FA; }
html.cms-dark .cms-org-thumb { background: #121424; }
html.cms-dark .cms-org-sketch-card, html.cms-dark .cms-org-sketch-lead, html.cms-dark .cms-org-sketch-frame, html.cms-dark .cms-org-sketch-ring, html.cms-dark .cms-org-sketch-ring-lead { background: #3A3F63; }
html.cms-dark .cms-org-sketch-panel, html.cms-dark .cms-org-sketch-hero { background: #6E6CD8; }
html.cms-dark .cms-org-template-on .cms-org-sketch-card, html.cms-dark .cms-org-template-on .cms-org-sketch-lead, html.cms-dark .cms-org-template-on .cms-org-sketch-frame, html.cms-dark .cms-org-template-on .cms-org-sketch-ring, html.cms-dark .cms-org-template-on .cms-org-sketch-ring-lead { background: #A5A4FA; }
/* Photo treatment choice and the leader picker (decisions 184, 187). */
.cms-org-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-org-photo-choice { min-height: 36px; padding: 0 14px; border: 1px solid #D3D6DE; border-radius: 8px; background: none; font: inherit; font-weight: 500; color: inherit; cursor: pointer; }
.cms-org-photo-choice-on { border-color: #4F4FCB; box-shadow: inset 0 0 0 1px #4F4FCB; color: #3F3FB0; font-weight: 600; }
.cms-org-photo-choice:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-org-photos-hint { margin: 0; }
.cms-org-leader-select { flex: 0 1 240px; min-width: 180px; margin: 0; }
html.cms-dark .cms-org-photo-choice { border-color: #3A3F63; }
html.cms-dark .cms-org-photo-choice-on { border-color: #A5A4FA; box-shadow: inset 0 0 0 1px #A5A4FA; color: #C9C8FD; }
/* Preview (decision 188): the toolbar, then each A4 sheet on the grey ground, scaled to fit by js/orgchart.js. */
.cms-org-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cms-org-toolbar-count { flex: 1; color: #555B6E; font-size: 0.875rem; }
@media (max-width: 599.98px) { .cms-org-toolbar .cms-org-toolbar-count { display: none; } } /* docked on phones: just the two buttons */
.cms-org-note { margin-bottom: 12px; }
.cms-org-preview { display: grid; justify-items: center; gap: 24px; padding: 8px 0 24px; }
.cms-org-sheet { width: 100%; display: flex; justify-content: center; overflow: hidden; }
.cms-org-sheet .cms-org-page { flex: none; }
html.cms-dark .cms-org-toolbar-count { color: #A3A7C6; }
html.cms-dark .cms-org-thumb { background: #121424; }
html.cms-dark .cms-org-template-on { border-color: #A5A4FA; box-shadow: inset 0 0 0 1px #A5A4FA; }

/* People calendar (2026-10-14, spec decisions 171–180): a month grid with name chips and a side panel for the chosen day; the
   quarter overview and the phone's icon counts build on it. Kind colours as Home's tiles. */
.cms-calendar { padding: 0; }
.cms-calendar-toolbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #E3E5EA; }
.cms-calendar-title { margin: 0; font-size: 1.125rem; font-weight: 700; color: #0F1222; min-width: 150px; }
.cms-calendar-nav { display: inline-flex; gap: 2px; }
.cms-calendar-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.cms-calendar-kind { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid #D3D6DE; border-radius: 14px; background: transparent; color: #343849; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.cms-calendar-kind[aria-pressed="false"] { opacity: 0.5; text-decoration: line-through; }
.cms-calendar-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cms-calendar-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.cms-calendar-filters .mud-select { width: 190px; margin: 0; }
.cms-calendar-views { display: inline-flex; margin-left: auto; border: 1px solid #D3D6DE; border-radius: 6px; overflow: hidden; }
.cms-calendar-view { padding: 5px 12px; border: 0; background: transparent; font: inherit; font-size: 0.75rem; font-weight: 600; color: #5C6275; cursor: pointer; }
.cms-calendar-view[aria-selected="true"] { background: #ECECFB; color: #4F4FCB; }
.cms-calendar-empty { margin: 12px 16px 0; color: #5C6275; font-size: 0.875rem; }
.cms-calendar-month { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.cms-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-right: 1px solid #E3E5EA; }
.cms-calendar-dow { padding: 6px 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #5C6275; border-bottom: 1px solid #E3E5EA; }
.cms-calendar-day { display: grid; align-content: start; gap: 3px; min-height: 96px; padding: 6px; border: 0; border-right: 1px solid #E3E5EA; border-bottom: 1px solid #E3E5EA; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; min-width: 0; }
.cms-calendar-day:nth-child(7n) { border-right: 0; }
.cms-calendar-day:hover { background: #F9FAFB; }
.cms-calendar-day:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-calendar-chosen { background: #ECECFB; }
.cms-calendar-n { font-size: 0.75rem; font-weight: 600; color: #5C6275; font-variant-numeric: tabular-nums; justify-self: start; }
.cms-calendar-outside .cms-calendar-n { color: #9CA0AE; }
.cms-calendar-today .cms-calendar-n { padding: 0 6px; border-radius: 10px; background: #4F4FCB; color: #FFFFFF; }
.cms-calendar-chips { display: grid; gap: 3px; min-width: 0; }
.cms-calendar-chip { padding: 2px 6px; border-radius: 4px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-calendar-more { padding-left: 4px; font-size: 0.6875rem; font-weight: 600; color: #5C6275; }
.cms-calendar-icons { display: none; }
.cms-calendar-joining.cms-calendar-chip, .cms-calendar-joining.cms-calendar-status { background: #E6F1FB; color: #0D6AB5; }
.cms-calendar-leaving.cms-calendar-chip, .cms-calendar-leaving.cms-calendar-status { background: #FDEDE3; color: #C2410C; }
.cms-calendar-left.cms-calendar-chip, .cms-calendar-left.cms-calendar-status { background: #FDECEE; color: #C62A2F; }
.cms-calendar-joining .cms-calendar-dot { background: #0D6AB5; }
.cms-calendar-leaving .cms-calendar-dot { background: #C2410C; }
.cms-calendar-left .cms-calendar-dot { background: #C62A2F; }
.cms-calendar-side { padding: 16px; display: grid; gap: 10px; align-content: start; }
.cms-calendar-side h2 { margin: 0; font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
.cms-calendar-none { margin: 0; color: #5C6275; font-size: 0.875rem; }
.cms-calendar-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cms-calendar-person { display: flex; align-items: center; gap: 10px; }
.cms-calendar-person a { flex: 1; min-width: 0; display: grid; padding: 6px 8px; border-radius: 6px; text-decoration: none; }
.cms-calendar-person a:hover { background: #F4F5F8; }
.cms-calendar-person-name { font-size: 0.875rem; font-weight: 600; color: #4F4FCB; }
.cms-calendar-person-meta { font-size: 0.75rem; color: #5C6275; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-calendar-status { flex: none; padding: 2px 8px; border-radius: 10px; font-size: 0.6875rem; font-weight: 700; }
@media (max-width: 959.98px) { .cms-calendar-month { grid-template-columns: minmax(0, 1fr); } .cms-calendar-grid { border-right: 0; } .cms-calendar-side { border-top: 1px solid #E3E5EA; } }
html.cms-dark .cms-calendar-toolbar, html.cms-dark .cms-calendar-dow, html.cms-dark .cms-calendar-day, html.cms-dark .cms-calendar-grid, html.cms-dark .cms-calendar-side { border-color: #2C3050; }
html.cms-dark .cms-calendar-title, html.cms-dark .cms-calendar-side h2 { color: #E8E9F5; }
html.cms-dark .cms-calendar-kind, html.cms-dark .cms-calendar-views { border-color: #3A3F63; color: #D2D4E8; }
html.cms-dark .cms-calendar-view[aria-selected="true"], html.cms-dark .cms-calendar-chosen { background: #26285A; color: #A5A4FA; }
html.cms-dark .cms-calendar-day:hover, html.cms-dark .cms-calendar-person a:hover { background: #1C1F36; }
html.cms-dark .cms-calendar-today .cms-calendar-n { background: #A5A4FA; color: #0E0F1A; }
html.cms-dark .cms-calendar-person-name { color: #A5A4FA; }
html.cms-dark .cms-calendar-n, html.cms-dark .cms-calendar-dow, html.cms-dark .cms-calendar-more, html.cms-dark .cms-calendar-person-meta, html.cms-dark .cms-calendar-mini-day, html.cms-dark .cms-calendar-mini-head small, html.cms-dark .cms-calendar-total small, html.cms-dark .cms-calendar-none, html.cms-dark .cms-calendar-empty { color: #A3A7C6; }
html.cms-dark .cms-calendar-joining.cms-calendar-chip, html.cms-dark .cms-calendar-joining.cms-calendar-status { background: #12304A; color: #6CB8F5; }
html.cms-dark .cms-calendar-leaving.cms-calendar-chip, html.cms-dark .cms-calendar-leaving.cms-calendar-status { background: #3A2014; color: #F59A6B; }
html.cms-dark .cms-calendar-left.cms-calendar-chip, html.cms-dark .cms-calendar-left.cms-calendar-status { background: #3A1C26; color: #FF8A95; }
html.cms-dark .cms-calendar-joining .cms-calendar-dot { background: #6CB8F5; }
html.cms-dark .cms-calendar-leaving .cms-calendar-dot { background: #F59A6B; }
html.cms-dark .cms-calendar-left .cms-calendar-dot { background: #FF8A95; }
/* People calendar on a phone (decision 178): Month only, each day a coloured person icon and count per kind; a tapped day opens a
   sheet of names (CalendarDayDialog). */
.cms-calendar-count svg { width: 12px; height: 12px; fill: currentColor; }
.cms-calendar-count { display: inline-flex; align-items: center; justify-content: center; gap: 1px; font-size: 0.625rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cms-calendar-count[data-kind="joining"] { color: #0D6AB5; }
.cms-calendar-count[data-kind="leaving"] { color: #C2410C; }
.cms-calendar-count[data-kind="left"] { color: #C62A2F; }
html.cms-dark .cms-calendar-count[data-kind="joining"] { color: #6CB8F5; }
html.cms-dark .cms-calendar-count[data-kind="leaving"] { color: #F59A6B; }
html.cms-dark .cms-calendar-count[data-kind="left"] { color: #FF8A95; }
.cms-calendar-sheet-title { flex: 1; margin: 0; font-size: 1rem; font-weight: 600; }
.cms-calendar-filter-toggle { display: none; }
@media (max-width: 599.98px) { .cms-calendar-filter-toggle { display: inline-flex; } .cms-calendar-filters { display: none; flex-basis: 100%; } .cms-calendar-filters.cms-calendar-filters-open { display: flex; } }
.cms-calendar-sheet .cms-calendar-people { padding: 4px 12px 8px; }
@media (max-width: 599.98px) { .cms-calendar-chips, .cms-calendar-side, .cms-calendar-views { display: none; } .cms-calendar-icons { display: grid; } .cms-calendar-month { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599.98px) {
    .cms-calendar-toolbar { padding: 10px; }
    .cms-calendar-title { min-width: 0; font-size: 1rem; }
    .cms-calendar-dow { padding: 4px 0; text-align: center; }
    .cms-calendar-day { min-height: 58px; padding: 3px 2px; justify-items: center; border-right: 0; }
    .cms-calendar-today .cms-calendar-n, .cms-calendar-n { justify-self: center; }
    .cms-calendar-icons { gap: 1px; justify-items: center; }
}
/* People calendar, Quarter view (decision 177): totals, three small months with dots, the chosen month as a list. */
.cms-calendar-quarter { padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; gap: 12px; align-items: start; }
.cms-calendar-totals { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cms-calendar-total { display: grid; gap: 2px; padding: 12px 14px; border-radius: 8px; background: #F4F5F8; }
.cms-calendar-total-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; }
.cms-calendar-total b { font-size: 1.5rem; color: #0F1222; font-variant-numeric: tabular-nums; }
.cms-calendar-total small { font-size: 0.75rem; color: #5C6275; }
.cms-calendar-total.cms-calendar-joining .cms-calendar-total-label { color: #0D6AB5; }
.cms-calendar-total.cms-calendar-leaving .cms-calendar-total-label { color: #C2410C; }
.cms-calendar-total.cms-calendar-left .cms-calendar-total-label { color: #C62A2F; }
.cms-calendar-minis { display: contents; }
.cms-calendar-mini { display: grid; gap: 8px; padding: 12px; border: 1px solid #E3E5EA; border-radius: 8px; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cms-calendar-mini-on { border-color: #4F4FCB; box-shadow: inset 0 0 0 1px #4F4FCB; }
.cms-calendar-mini:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-calendar-mini-head { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; color: #0F1222; }
.cms-calendar-mini-head small { color: #5C6275; font-weight: 500; }
.cms-calendar-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cms-calendar-mini-day { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 4px; font-size: 0.625rem; color: #5C6275; font-variant-numeric: tabular-nums; }
.cms-calendar-mini-today { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-calendar-mini-dots { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; justify-content: center; gap: 2px; }
.cms-calendar-mini-dot { width: 4px; height: 4px; border-radius: 50%; }
.cms-calendar-mini-dot[data-kind="joining"] { background: #0D6AB5; }
.cms-calendar-mini-dot[data-kind="leaving"] { background: #C2410C; }
.cms-calendar-mini-dot[data-kind="left"] { background: #C62A2F; }
.cms-calendar-month-list { display: grid; gap: 10px; align-content: start; padding: 4px; }
.cms-calendar-month-list h2 { margin: 0; font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
@media (max-width: 1099.98px) { .cms-calendar-quarter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cms-calendar-month-list { grid-column: 1 / -1; } }
@media (max-width: 599.98px) { .cms-calendar-quarter { display: none; } }
html.cms-dark .cms-calendar-total { background: #1C1F36; }
html.cms-dark .cms-calendar-total b, html.cms-dark .cms-calendar-mini-head, html.cms-dark .cms-calendar-month-list h2 { color: #E8E9F5; }
html.cms-dark .cms-calendar-total.cms-calendar-joining .cms-calendar-total-label { color: #6CB8F5; }
html.cms-dark .cms-calendar-total.cms-calendar-leaving .cms-calendar-total-label { color: #F59A6B; }
html.cms-dark .cms-calendar-total.cms-calendar-left .cms-calendar-total-label { color: #FF8A95; }
html.cms-dark .cms-calendar-mini { border-color: #2C3050; }
html.cms-dark .cms-calendar-mini-on { border-color: #A5A4FA; box-shadow: inset 0 0 0 1px #A5A4FA; }
html.cms-dark .cms-calendar-mini-today { outline-color: #A5A4FA; }
html.cms-dark .cms-calendar-mini-dot[data-kind="joining"] { background: #6CB8F5; }
html.cms-dark .cms-calendar-mini-dot[data-kind="leaving"] { background: #F59A6B; }
html.cms-dark .cms-calendar-mini-dot[data-kind="left"] { background: #FF8A95; }
/* Home's way into the people calendar (decision 171): a drawn calendar icon at the right of the joining-and-leaving header. */
.cms-calendar-link { display: inline-flex; width: 28px; height: 28px; margin-left: auto; border-radius: 6px; background: url("img/home/calendar.svg") center / 20px 20px no-repeat; }
.cms-calendar-link:hover { background-color: #ECECFB; }
.cms-calendar-link:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-panel-title:has(.cms-calendar-link), .cms-home-card-title:has(.cms-calendar-link) { align-items: center; gap: 8px; }
html.cms-dark .cms-calendar-link { background-image: url("img/home/calendar-dark.svg"); }
html.cms-dark .cms-calendar-link:hover { background-color: #26285A; }

/* Org chart pages (Plan 19, decisions 181–190): A4 sheets drawn at 595 × 841 CSS px (842 × 594 landscape) as in the photo
   templates page, printed at zoom 1.3333 to fill A4. Paper stays white in dark mode; sizes inside a sheet are print sizes. */
.cms-org-page { background: #fff; color: #0F1222; font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif; display: flex; flex-direction: column; position: relative; overflow: hidden; transform-origin: 0 0; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(15, 18, 34, .08), 0 6px 18px rgba(15, 18, 34, .10); }
.cms-org-page { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.cms-org-portrait { width: 595px; height: 841px; }
.cms-org-landscape { width: 842px; height: 594px; }
.cms-org-top { display: flex; align-items: center; gap: 10px; padding: 20px 26px 0; font-size: 9.5px; color: #555B6E; }
.cms-org-logo { height: 13px; width: auto; }
.cms-org-sp { flex: 1; }
.cms-org-co { display: inline-block; font-size: 9px; font-weight: 600; color: #fff; border-radius: 5px; padding: 2px 7px; }
.cms-org-dname { margin: 6px 26px 0; font-size: 30px; font-weight: 700; letter-spacing: -.015em; line-height: 1.05; }
.cms-org-dname small { font-size: 13px; font-weight: 500; color: #555B6E; letter-spacing: 0; margin-left: 8px; }
.cms-org-bottom { margin-top: auto; padding: 0 26px 14px; display: flex; justify-content: space-between; font-size: 8.5px; color: #555B6E; }
.cms-org-grid { flex: none; display: grid; gap: 10px; padding: 16px 26px; align-content: start; }
.cms-org-nm { display: block; font-weight: 600; line-height: 1.2; }
.cms-org-ps { display: block; line-height: 1.25; }
/* Photos keep a square frame of a set size (2026-10-14): a frame that grew to fill its cell blew small photos up. */
.cms-org-photo { position: relative; overflow: hidden; background: #DDE0EA; aspect-ratio: 1 / 1; flex: none; }
.cms-org-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Photo treatments (decision 187); duotone leaves the leader in colour. */
.cms-org-page[data-photos="greyscale"] .cms-org-img, .cms-org-page[data-photos="duotone"] .cms-org-person .cms-org-img { filter: grayscale(1) contrast(1.05); }
.cms-org-page[data-photos="duotone"] .cms-org-person .cms-org-photo::after { content: ""; position: absolute; inset: 0; background: #4F4FCB; mix-blend-mode: screen; opacity: .55; }

/* C Swiss sidebar */
.cms-org-swiss { flex-direction: row; }
.cms-org-swiss .cms-org-side { width: 250px; flex: none; background: #12131A; color: #fff; padding: 22px 22px 16px; display: flex; flex-direction: column; gap: 10px; }
.cms-org-swiss .cms-org-side:not(:has(.cms-org-leader)) { width: 150px; }
.cms-org-swiss .cms-org-side .cms-org-logo { align-self: flex-start; }
.cms-org-swiss .cms-org-dname { margin: 0; font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; font-weight: 700; font-size: 34px; line-height: .98; letter-spacing: -.01em; color: #fff; }
.cms-org-swiss .cms-org-side:not(:has(.cms-org-leader)) .cms-org-dname { font-size: 22px; }
.cms-org-swiss .cms-org-dname small { display: block; margin: 6px 0 0; font-family: "IBM Plex Sans", sans-serif; font-size: 11px; font-weight: 600; color: #A5A4FA; }
.cms-org-swiss .cms-org-leader .cms-org-photo { border-radius: 6px; margin-top: 6px; }
.cms-org-swiss .cms-org-leader .cms-org-nm { font-size: 15px; margin-top: 8px; }
.cms-org-swiss .cms-org-leader .cms-org-ps { font-size: 10.5px; color: #C9CAF0; }
.cms-org-swiss .cms-org-meta { margin-top: auto; display: grid; gap: 4px; font-size: 8.5px; color: #9EA3C0; }
.cms-org-swiss .cms-org-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cms-org-swiss .cms-org-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 12px; padding: 22px; }
.cms-org-swiss:not(:has(.cms-org-leader)) .cms-org-grid { grid-template-columns: repeat(4, 1fr); }
.cms-org-swiss .cms-org-person { display: flex; flex-direction: column; min-height: 0; border-top: 2px solid #0F1222; padding-top: 6px; }
.cms-org-swiss .cms-org-person .cms-org-photo { margin: 4px 0 6px; }
.cms-org-swiss .cms-org-person .cms-org-nm { font-size: 11px; }
.cms-org-swiss .cms-org-person .cms-org-ps { font-size: 9.5px; color: #555B6E; }

/* D Pinboard */
.cms-org-pinboard { background: #F1F1F7; }
.cms-org-pinboard .cms-org-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cms-org-pinboard:not(:has(.cms-org-leader)) .cms-org-grid { grid-template-columns: repeat(4, 1fr); }
.cms-org-print { background: #fff; padding: 8px 8px 0; display: flex; flex-direction: column; min-height: 0; box-shadow: 0 1px 2px rgba(15, 18, 34, .10), 0 4px 10px rgba(15, 18, 34, .06); }
.cms-org-cap { padding: 7px 2px 9px; font-size: 10.5px; }
.cms-org-cap .cms-org-ps { font-size: 9px; color: #555B6E; }
.cms-org-print.cms-org-leader { grid-column: 1 / -1; justify-self: center; width: 200px; padding: 10px 10px 0; }
.cms-org-print.cms-org-leader .cms-org-cap { font-size: 14px; text-align: center; }
.cms-org-print.cms-org-leader .cms-org-ps { font-size: 10px; }

/* E Rings */
.cms-org-rings .cms-org-grid { grid-template-columns: repeat(3, 1fr); gap: 22px 10px; justify-items: center; align-items: start; }
.cms-org-rings:not(:has(.cms-org-leader)) .cms-org-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 6px; align-items: center; }
.cms-org-ring { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.cms-org-ring .cms-org-photo { width: 118px; height: 118px; border-radius: 50%; }
.cms-org-rings:not(:has(.cms-org-leader)) .cms-org-ring { flex-direction: row; text-align: left; gap: 14px; justify-self: start; padding-left: 20px; }
.cms-org-rings:not(:has(.cms-org-leader)) .cms-org-ring .cms-org-photo { width: 132px; height: 132px; }
.cms-org-ring .cms-org-nm { font-size: 12px; }
.cms-org-ring .cms-org-ps { display: inline-block; margin-top: 4px; font-size: 8.5px; font-weight: 600; color: #3F3FB0; background: #ECECFB; border-radius: 999px; padding: 2px 8px; }
.cms-org-ring.cms-org-leader { grid-column: 1 / -1; }
.cms-org-ring.cms-org-leader .cms-org-photo { width: 190px; height: 190px; box-shadow: 0 0 0 4px #fff, 0 0 0 7px #4F4FCB; }
.cms-org-ring.cms-org-leader .cms-org-nm { font-size: 17px; }
.cms-org-ring.cms-org-leader .cms-org-ps { font-size: 10px; background: #4F4FCB; color: #fff; }

/* F Spotlight */
.cms-org-hero { position: relative; height: 300px; flex: none; background: #12131A; }
.cms-org-hero > .cms-org-photo { position: absolute; top: 56px; right: 24px; width: 220px; border-radius: 10px; }
.cms-org-hero .cms-org-top { position: absolute; inset: 0 0 auto 0; padding: 18px 24px; color: #fff; }
.cms-org-hero-text { position: absolute; inset: auto 268px 24px 24px; color: #fff; }
.cms-org-hero .cms-org-dname { margin: 0; font-size: 40px; letter-spacing: -.02em; line-height: 1; color: #fff; }
.cms-org-hero .cms-org-dname small { display: block; margin: 8px 0 0; color: #C9CAF0; }
.cms-org-hero .cms-org-nm { font-size: 15px; margin-top: 10px; }
.cms-org-hero .cms-org-ps { font-size: 10.5px; color: #C9CAF0; }
.cms-org-spotlight .cms-org-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding: 16px 24px 14px; }
.cms-org-spotlight:not(:has(.cms-org-leader)) .cms-org-grid { grid-template-columns: repeat(4, 1fr); }
.cms-org-spotlight .cms-org-person { display: flex; flex-direction: column; min-height: 0; }
.cms-org-spotlight .cms-org-person .cms-org-photo { border-radius: 10px; }
.cms-org-spotlight .cms-org-person .cms-org-nm { font-size: 11px; margin-top: 6px; }
.cms-org-spotlight .cms-org-person .cms-org-ps { font-size: 9.5px; color: #555B6E; }

/* Printing (decision 189): only the sheets, at A4, in colour; the inline @page rule sets the orientation. */
@media print { .mud-appbar, .mud-drawer, .cms-desktop-sidebar-region, .mud-snackbar-provider, .cms-org-toolbar, .cms-org-note { display: none !important; } .mud-main-content, .cms-page, .cms-org-preview { padding: 0 !important; margin: 0 !important; background: #fff !important; } html, body { background: #fff !important; } }
@media print { .cms-org-sheet { height: auto !important; margin: 0 !important; } .cms-org-page { transform: none !important; box-shadow: none !important; zoom: 1.3333; } .cms-org-sheet:not(:last-child) .cms-org-page { break-after: page; } }

/* Authorising screen (2026-10-14): the whole window while the router checks access; the logo blinks slowly. */
.cms-authorizing { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #F7F8FA; }
@keyframes cms-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.cms-authorizing-logo { width: 180px; height: auto; animation: cms-blink 1.4s ease-in-out infinite; }
.cms-authorizing-text { margin: 4px 0 0; font-size: 0.9375rem; font-weight: 500; color: #343849; }
.cms-authorizing-sub { margin: -8px 0 0; font-size: 0.75rem; color: #5C6275; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .cms-authorizing-logo { animation: none; } }
html.cms-dark .cms-authorizing { background: #0E0F1A; }
html.cms-dark .cms-authorizing-text { color: #E8E9F5; }
html.cms-dark .cms-authorizing-sub { color: #A3A7C6; }

/* Welcome after signing in (2026-10-14, option G): js/welcome.js shows it; the logo fades in and holds a second, turns white
   with a soft shadow, then flies into the sidebar's logo spot while the page shows through (phones: a fade). */
.cms-welcome { display: none; position: fixed; inset: 0; z-index: 2100; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #F7F8FA; opacity: 1; transition: opacity 400ms ease; }
html.cms-welcoming .cms-welcome { display: flex; }
html.cms-welcome-out .cms-welcome { opacity: 0; }
@keyframes cms-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cms-welcome-fly { position: relative; display: block; width: 180px; height: 38px; animation: cms-fade-in 400ms ease-out both; transform-origin: center; transition: transform 700ms cubic-bezier(.65, 0, .35, 1), opacity 400ms ease; }
.cms-welcome-ink, .cms-welcome-white { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 300ms ease, filter 300ms ease; }
.cms-welcome-white { opacity: 0; }
html.cms-dark .cms-welcome-ink { opacity: 0; } html.cms-dark .cms-welcome-white { opacity: 1; }
.cms-welcome-brand { margin: -6px 0 0; font-size: 0.75rem; letter-spacing: .04em; color: #5C6275; }
.cms-welcome-brand { transition: opacity 400ms ease; }
@media (prefers-reduced-motion: reduce) { .cms-welcome { transition: none; } .cms-welcome-fly { animation: none; transition: none; } }
html.cms-dark .cms-welcome { background: #0E0F1A; }
html.cms-dark .cms-welcome-brand { color: #A3A7C6; }
/* The flight: after the dark-mode rules, so the clearing background wins in both themes. */
html.cms-welcome-flying .cms-welcome { background-color: transparent; transition: background-color 900ms ease; }
html.cms-welcome-leaving .cms-welcome-brand, html.cms-welcome-flying .cms-welcome-brand { opacity: 0; transition: opacity 400ms ease; }
html.cms-welcome-turning:not(.cms-welcome-to-m) .cms-welcome-ink { opacity: 0; } html.cms-welcome-turning .cms-welcome-white { opacity: 1; filter: drop-shadow(0 2px 8px rgba(15, 18, 34, .35)); }
html.cms-welcome-to-m:not(.cms-dark) .cms-welcome-white { clip-path: inset(0 80.3% 0 0); }
html.cms-welcome-landed .cms-welcome-white { filter: none; }
/* The sidebar's own logo stays hidden (its space kept, so the landing spot still measures) until the flying m lands (2026-10-16) */
html.cms-welcoming:not(.cms-welcome-landed) .cms-desktop-sidebar-region :is(.cms-brand-logo, .cms-brand-monogram) { opacity: 0; }
html.cms-welcome-handed .cms-welcome-fly { opacity: 0; }
/* Sidebar collapsed: only the m (the first 19.7% of the artwork) turns white, and the logo is trimmed to it as it flies onto
   the rail's m. */
html.cms-welcome-to-m.cms-welcome-flying .cms-welcome-fly { clip-path: inset(0 80.3% 0 0); transition: transform 700ms cubic-bezier(.65, 0, .35, 1), opacity 400ms ease, clip-path 300ms ease; }

/* The shared action button (2026-10-14): label and progress share one cell so the width holds; a small turning ring. */
.cms-busy-content { display: inline-grid; } .cms-busy-content > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.cms-busy-progress { visibility: hidden; } .cms-busy-showing .cms-busy-label { visibility: hidden; } .cms-busy-showing .cms-busy-progress { visibility: visible; }
@keyframes cms-spin { to { transform: rotate(360deg); } }
.cms-busy-ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: cms-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .cms-busy-ring { animation: none; border-right-color: currentColor; opacity: .6; } }
.cms-busy-progress::after { content: attr(data-busy-text); }

/* Reconnect screen (2026-10-14): Blazor adds components-reconnect-show while it retries, and -failed or -rejected when it
   gives up; the page stays faintly visible behind. */
.cms-reconnect { display: none; position: fixed; inset: 0; z-index: 2200; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(247, 248, 250, .92); backdrop-filter: blur(3px); }
.cms-reconnect.components-reconnect-show, .cms-reconnect.components-reconnect-failed, .cms-reconnect.components-reconnect-rejected { display: flex; }
.cms-reconnect-ring { position: relative; width: 76px; height: 76px; display: grid; place-items: center; color: #12131A; }
.cms-reconnect-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #E3E5EA; border-top-color: #4F4FCB; animation: cms-spin .9s linear infinite; }
.cms-reconnect-mark { width: 40px; height: 40px; background: currentColor; -webkit-mask: url("img/m-mark.svg") center / contain no-repeat; mask: url("img/m-mark.svg") center / contain no-repeat; }
.cms-reconnect-text { margin: 4px 0 0; font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
.cms-reconnect-sub { margin: -6px 0 0; font-size: 0.8125rem; color: #5C6275; text-align: center; max-width: 30ch; }
/* MudBlazor styles "#components-reconnect-modal button" (theme text colour, uppercase, 40px margin !important); the id keeps Reload ours */
#components-reconnect-modal .cms-reconnect-reload { margin: 4px 0 0 !important; min-width: 0; min-height: 40px; padding: 0 22px; border: 0; border-radius: 8px; background: #4F4FCB; color: #FFFFFF; font: inherit; font-weight: 600; line-height: normal; letter-spacing: normal; text-transform: none; cursor: pointer; }
#components-reconnect-modal .cms-reconnect-reload:hover { background: #4040B0; }
.cms-reconnect-reload:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-reconnect-lost { display: none; } .cms-reconnect.components-reconnect-failed .cms-reconnect-trying, .cms-reconnect.components-reconnect-rejected .cms-reconnect-trying { display: none; } .cms-reconnect.components-reconnect-failed .cms-reconnect-lost, .cms-reconnect.components-reconnect-rejected .cms-reconnect-lost { display: block; }
.cms-reconnect.components-reconnect-failed .cms-reconnect-ring::before, .cms-reconnect.components-reconnect-rejected .cms-reconnect-ring::before { animation: none; border-top-color: #E3E5EA; }
@media (prefers-reduced-motion: reduce) { .cms-reconnect-ring::before { animation-duration: 3s; } }
html.cms-dark .cms-reconnect { background: rgba(14, 15, 26, .92); }
html.cms-dark .cms-reconnect-ring { color: #FFFFFF; }
html.cms-dark .cms-reconnect-ring::before { border-color: #2C3050; border-top-color: #A5A4FA; }
html.cms-dark .cms-reconnect.components-reconnect-failed .cms-reconnect-ring::before, html.cms-dark .cms-reconnect.components-reconnect-rejected .cms-reconnect-ring::before { border-top-color: #2C3050; }
html.cms-dark .cms-reconnect-text { color: #E8E9F5; }
html.cms-dark .cms-reconnect-sub { color: #A3A7C6; }
html.cms-dark #components-reconnect-modal .cms-reconnect-reload { background: #4F4FCB; color: #FFFFFF; }
html.cms-dark #components-reconnect-modal .cms-reconnect-reload:hover { background: #5E5ED6; }
/* 2026-10-15: bulk scan's tag chips (Enter adds, Backspace or × removes) */
.cms-tag-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 4px 8px; border: 1px solid #C9CCD6; border-radius: 4px; background: #FFFFFF; }
.cms-tag-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; background: #EEEEFB; color: #3B3BA8; font-size: 0.8125rem; font-weight: 500; }
.cms-tag-chip button { border: 0; background: none; color: inherit; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; font: inherit; line-height: 1; }
.cms-tag-input { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; padding: 6px 2px; }
html.cms-dark .cms-tag-chips { background: #1C1F36; border-color: #2C3050; }
html.cms-dark .cms-tag-chip { background: #23264A; color: #C9C8FF; }
/* 2026-10-15: bulk scan's preview: errors red, warnings amber; on a phone the table scrolls inside its card */
.cms-bulk-error { color: #C62A2F; }
.cms-bulk-warning { color: #9A5B00; }
html.cms-dark .cms-bulk-error { color: #FF7A7F; }
html.cms-dark .cms-bulk-warning { color: #F2B45C; }
.cms-bulk-table-wrap { overflow-x: auto; }
/* 2026-10-15 (revised): bulk scan asks one question at a time: the camera first, the steps above, the answers so far */
/* Bulk scan card, layout C "device tag" (2026-10-15): five lines, the current one tinted; the list beside it on wide screens */
.cms-bulk-scanning { display: grid; gap: 12px; align-items: start; }
.cms-bulk-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cms-bulk-tags .cms-chip { margin: 0; }
.cms-bulk-table-wrap { border: 1px solid #D3D6DE; border-radius: 8px; }
.cms-bulk-table th { background: #4F4FCB; color: #FFFFFF; border-bottom: 0; }
.cms-bulk-table tbody tr:last-child td { border-bottom: 0; }
html.cms-dark .cms-bulk-table-wrap { border-color: #2C3050; } html.cms-dark .cms-bulk-table th { background: #0E0F1A; color: #A5A4FA; border-bottom: 1px solid #2C3050; }
.cms-bulk-line-now .cms-bulk-field { width: 100%; }
.cms-bulk-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.cms-bulk-list-head .cms-bulk-title { margin: 0; }
.cms-bulk-search { flex: 0 1 260px; }
@media (max-width: 599px) { .cms-bulk-search { flex-basis: 100%; } }
.cms-bulk-list-tools { display: flex; align-items: center; gap: 8px; flex: 0 1 320px; }
.cms-bulk-table-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.cms-bulk-short { display: none; }
@media (max-width: 599px) { .cms-bulk-wide { display: none; } .cms-bulk-short { display: inline; } }
.cms-bulk-list-tools .cms-bulk-search { flex: 1 1 auto; }
@media (max-width: 599px) { .cms-bulk-list-tools { flex-basis: 100%; } }
.cms-bulk-scan-foot { justify-content: space-between; }
.cms-bulk-scan-foot .cms-bulk-finish { margin-left: auto; }
.cms-bulk-scanning > .cms-card { margin: 0; }
.cms-bulk-entry { display: grid; gap: 4px; }
.cms-bulk-lines { display: grid; margin: 0; padding: 0; list-style: none; }
.cms-bulk-line { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 44px; padding: 6px 0; border-bottom: 1px solid #E3E5EA; }
.cms-bulk-line:last-child { border-bottom: 0; }
.cms-bulk-line-now { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 4px 0; padding: 12px; border-bottom: 0; border-radius: 8px; background: #ECECFB; }
.cms-bulk-line-key { font-size: 0.75rem; font-weight: 600; color: #5C6275; }
.cms-bulk-line-now .cms-bulk-line-key { font-size: 1rem; color: #4040B0; }
.cms-bulk-line-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-bulk-line-done .cms-bulk-line-key::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #18794E; vertical-align: 1px; }
.cms-bulk-line-later .cms-bulk-line-value { color: #5C6275; }
.cms-bulk-line-now .cms-scan-frame { justify-self: center; max-width: 440px; }
.cms-bulk-line-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.cms-bulk-line-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.cms-bulk-entry-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; min-height: 36px; }
@media (max-width: 599px) { .cms-bulk-line { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 8px; } .cms-bulk-line-now { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .cms-bulk-line-actions:has(.cms-bulk-type-instead) { flex-direction: column; align-items: stretch; text-align: center; } .cms-bulk-type-instead.mud-button-root { width: 100%; min-height: 44px; margin-top: 4px; } }
html.cms-dark .cms-bulk-line { border-bottom-color: #262A40; } html.cms-dark .cms-bulk-line-now { background: #1E2042; } html.cms-dark .cms-bulk-line-key, html.cms-dark .cms-bulk-line-later .cms-bulk-line-value { color: #A3A7C6; } html.cms-dark .cms-bulk-line-now .cms-bulk-line-key { color: #B9B8FC; } html.cms-dark .cms-bulk-line-done .cms-bulk-line-key::before { background: #5FD39A; }
/* Bulk scan list on phones (2026-10-15, Irfan): numbered cards, the serial as a coloured header; a tap opens Edit and Delete */
.cms-bulk-list { padding: 16px; }
.cms-bulk-title { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: #0F1222; }
html.cms-dark .cms-bulk-title { color: #E8E9F5; }
.cms-bulk-cards { display: none; }
@media (max-width: 599px) { .cms-bulk-cards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } }
@media (max-width: 599px) { .cms-bulk-list.mud-paper, html.cms-dark .cms-bulk-list.mud-paper, .cms-bulk-preview.mud-paper, html.cms-dark .cms-bulk-preview.mud-paper { padding-inline: 0; border: 0; background: transparent; box-shadow: none; } }
.cms-bulk-card { display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; width: 100%; padding: 0; border: 1px solid #E3E5EA; border-radius: 8px; overflow: hidden; background: #FFFFFF; color: #343849; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cms-bulk-card:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-bulk-card-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: #4F4FCB; color: #FFFFFF; }
.cms-bulk-card-number { font-size: 0.75rem; font-weight: 600; }
.cms-bulk-card-serial { font-weight: 600; overflow-wrap: anywhere; }
.cms-bulk-card-counts { display: flex; gap: 10px; margin-left: auto; align-self: center; }
.cms-bulk-card-count { display: inline-flex; align-items: center; gap: 3px; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.cms-bulk-card-count .mud-icon-root { width: 16px; height: 16px; }
.cms-bulk-card-count-error { color: #FFD6DA; } .cms-bulk-card-count-warning { color: #FFE2A8; }
html.cms-dark .cms-bulk-card-count-error { color: #FF7A85; } html.cms-dark .cms-bulk-card-count-warning { color: #F5BE55; }
.cms-bulk-card-body { display: grid; gap: 2px; padding: 10px 12px; }
.cms-bulk-card-name { font-weight: 600; color: #0F1222; overflow-wrap: anywhere; }
.cms-bulk-card-meta { font-size: 0.75rem; color: #5C6275; overflow-wrap: anywhere; }
.cms-bulk-card:active { background: #F1F2F6; }
html.cms-dark .cms-bulk-card { background: var(--cms-dark-card); border-color: #2C3050; color: #D2D4E8; } html.cms-dark .cms-bulk-card-head { background: #0E0F1A; color: #A5A4FA; border-bottom: 1px solid #2C3050; } html.cms-dark .cms-bulk-card-meta { color: #A3A7C6; } html.cms-dark .cms-bulk-card:active { background: #1C1F36; }
html.cms-dark .cms-bulk-card-name { color: #E8E9F5; } html.cms-dark .cms-bulk-card:focus-visible { outline-color: #A5A4FA; }
.cms-bulk-card:disabled { cursor: default; opacity: 0.7; }
/* Bulk scan summary (2026-10-15, Irfan): Scanned, Valid and Invalid boxes; each card's status under it with little padding */
.cms-bulk-preview { padding: 16px; }
/* Overview boxes, style D (2026-10-16, Irfan): white box, word and icon on top, the number, a share of the batch */
.cms-bulk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 140px)); justify-content: center; gap: 8px; margin-bottom: 12px; }
.cms-bulk-stat { display: grid; gap: 6px; padding: 10px 12px 12px; border: 1px solid #E3E5EA; border-radius: 8px; background: #FFFFFF; color: #0B4F87; --cms-stat: #0D6AB5; }
.cms-bulk-stat-valid { color: #135E3D; --cms-stat: #18794E; } .cms-bulk-stat-invalid { color: #8E1B20; --cms-stat: #C62A2F; }
.cms-bulk-stat-label { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cms-bulk-stat-icon.mud-icon-root { width: 20px; height: 20px; }
.cms-bulk-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; color: #0F1222; }
.cms-bulk-stat-bar { height: 5px; border-radius: 999px; background: #E3E5EA; overflow: hidden; } .cms-bulk-stat-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--cms-stat); }
.cms-bulk-stat-share { font-size: 0.75rem; color: #5C6275; }
html.cms-dark .cms-bulk-stat { background: var(--cms-dark-card); border-color: #2C3050; color: #7DBEFF; --cms-stat: #7DBEFF; } html.cms-dark .cms-bulk-stat-valid { color: #4ADE9B; --cms-stat: #4ADE9B; } html.cms-dark .cms-bulk-stat-invalid { color: #FF7A85; --cms-stat: #FF7A85; }
html.cms-dark .cms-bulk-stat-value { color: #E8E9F5; } html.cms-dark .cms-bulk-stat-bar { background: #2C3050; } html.cms-dark .cms-bulk-stat-share { color: #A3A7C6; }
.cms-bulk-status.mud-alert { box-sizing: border-box; width: 100%; margin: 0 0 12px; }
/* Bulk scan statuses (2026-10-16): own colours in both modes, no thick left edge; MudBlazor's dark tints vanished on the dark card */
.cms-bulk-status.mud-alert { border: 1px solid transparent; border-radius: 8px; }
.cms-bulk-status.mud-alert-text-error { background: #FDECEC; color: #8E1B20; border-color: #F3C1C3; } .cms-bulk-status.mud-alert-text-error .mud-alert-icon { color: #C62A2F; }
.cms-bulk-status.mud-alert-text-warning { background: #FFF4DE; color: #7A4B00; border-color: #F5D79A; } .cms-bulk-status.mud-alert-text-warning .mud-alert-icon { color: #B26A00; }
.cms-bulk-status.mud-alert-text-info { background: #E7F1FB; color: #0B4F87; border-color: #BBD6F0; } .cms-bulk-status.mud-alert-text-info .mud-alert-icon { color: #0D6AB5; }
.cms-bulk-status.mud-alert-text-success { background: #E6F4EC; color: #135E3D; border-color: #B5DEC8; } .cms-bulk-status.mud-alert-text-success .mud-alert-icon { color: #18794E; }
html.cms-dark .cms-bulk-status.mud-alert-text-error { background: #3A1519; color: #FFB3B9; border-color: #6B252C; } html.cms-dark .cms-bulk-status.mud-alert-text-error .mud-alert-icon { color: #FF7A85; }
html.cms-dark .cms-bulk-status.mud-alert-text-warning { background: #3A2A0E; color: #FFD995; border-color: #6A4D17; } html.cms-dark .cms-bulk-status.mud-alert-text-warning .mud-alert-icon { color: #F5BE55; }
html.cms-dark .cms-bulk-status.mud-alert-text-info { background: #10283F; color: #B9DBFF; border-color: #22476B; } html.cms-dark .cms-bulk-status.mud-alert-text-info .mud-alert-icon { color: #7DBEFF; }
html.cms-dark .cms-bulk-status.mud-alert-text-success { background: #0F2E21; color: #A7F0CB; border-color: #1F5A3F; } html.cms-dark .cms-bulk-status.mud-alert-text-success .mud-alert-icon { color: #4ADE9B; }
.cms-bulk-stat-label { font-size: 0.75rem; font-weight: 600; }
.cms-bulk-card-status { display: grid; gap: 2px; padding: 4px 12px; border-top: 1px solid #E3E5EA; font-size: 0.75rem; }
.cms-bulk-card-status > span { display: flex; align-items: flex-start; gap: 4px; overflow-wrap: anywhere; }
.cms-bulk-card-status .mud-icon-root { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.cms-bulk-ready { color: #18794E; }
html.cms-dark .cms-bulk-ready { color: #5FD39A; } html.cms-dark .cms-bulk-card-status { border-top-color: #2C3050; }
.cms-bulk-excel.mud-icon-button:not(:disabled) { color: #18794E; border-color: #18794E; }
html.cms-dark .cms-bulk-excel.mud-icon-button:not(:disabled) { color: #5FD39A; border-color: #5FD39A; }
.cms-bulk-review { display: grid; gap: 12px; }
.cms-bulk-review > .cms-card { margin: 0; }
/* Bulk scan "Set up your batch" (2026-10-16, Irfan's mockup): guide "?" top right, a selectable card per kept field, a note, Cancel / Start scanning; a waiting draft asks first with a nodding "?" */
.cms-bulk-draft-dialog .mud-dialog-title { display: flex; justify-content: flex-end; padding: 8px 8px 0; }
.cms-bulk-draft { display: grid; justify-items: center; gap: 4px; padding-top: 4px; text-align: center; }
.cms-bulk-draft-title { margin: 6px 0 0; font-size: 1rem; font-weight: 600; color: #0F1222; }
.cms-bulk-draft-text { margin: 0; font-size: 0.875rem; color: #5C6275; }
.cms-bulk-ask-icon.mud-icon-root { width: 48px; height: 48px; color: #4F4FCB; transform-origin: 50% 80%; animation: cms-bulk-ask-nod 2.8s ease-in-out infinite; }
@keyframes cms-bulk-ask-nod { 0%, 62%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-12deg); } 78% { transform: rotate(10deg); } 86% { transform: rotate(-5deg); } 93% { transform: rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .cms-bulk-ask-icon.mud-icon-root { animation: none; } }
.cms-bulk-guide { display: grid; gap: 10px; margin: 0; padding-left: 20px; color: #343849; }
.cms-bulk-guide strong { color: #0F1222; }
.cms-bulk-setup-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding-bottom: 16px; border-bottom: 1px solid #E3E5EA; }
.cms-bulk-setup-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 10px; background: #ECECFB; color: #4F4FCB; }
.cms-bulk-setup-icon .mud-icon-root { width: 26px; height: 26px; }
.cms-bulk-setup-head .cms-bulk-title { margin: 0; font-size: 1.125rem; }
.cms-bulk-setup-sub { margin: 4px 0 0; max-width: 62ch; color: #5C6275; }
.cms-bulk-help.mud-icon-button { margin: -6px -6px 0 0; color: #4F4FCB; }
.cms-bulk-keep-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 10px; }
.cms-bulk-keep-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
.cms-bulk-keep-count { font-size: 0.8125rem; color: #5C6275; font-variant-numeric: tabular-nums; }
.cms-bulk-options { display: grid; gap: 8px; }
.cms-bulk-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; min-height: 64px; padding: 12px 16px; border: 1px solid #E3E5EA; border-radius: 10px; background: #FFFFFF; cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.cms-bulk-option:hover { border-color: #CDD1DA; }
.cms-bulk-option-on, .cms-bulk-option-on:hover { border-color: #4F4FCB; background: #F4F4FD; }
.cms-bulk-option:has(.cms-bulk-option-input:focus-visible) { outline: 2px solid #4F4FCB; outline-offset: 2px; }
.cms-bulk-option-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cms-bulk-option-tick { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid #CDD1DA; border-radius: 50%; color: transparent; }
.cms-bulk-option-tick .mud-icon-root { width: 16px; height: 16px; }
.cms-bulk-option-on .cms-bulk-option-tick { border-color: #4F4FCB; background: #4F4FCB; color: #FFFFFF; }
.cms-bulk-option-words { display: grid; gap: 1px; min-width: 0; }
.cms-bulk-option-title { font-weight: 600; color: #0F1222; }
.cms-bulk-option-text { font-size: 0.8125rem; color: #5C6275; }
.cms-bulk-setup-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; background: #F1F2F6; color: #343849; font-size: 0.8125rem; }
.cms-bulk-setup-note .mud-icon-root { flex: none; margin-top: 1px; color: #5C6275; }
.cms-bulk-setup-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #E3E5EA; }
.cms-bulk-setup-foot-note { font-size: 0.8125rem; color: #5C6275; }
.cms-bulk-setup-foot .cms-actions { margin: 0; }
@media (prefers-reduced-motion: reduce) { .cms-bulk-option { transition: none; } }
html.cms-dark .cms-bulk-setup-head, html.cms-dark .cms-bulk-setup-foot { border-color: #2C3050; } html.cms-dark .cms-bulk-setup-icon { background: #1E2042; color: #A5A4FA; } html.cms-dark .cms-bulk-help.mud-icon-button, html.cms-dark .cms-bulk-ask-icon.mud-icon-root { color: #A5A4FA; }
html.cms-dark .cms-bulk-keep-title, html.cms-dark .cms-bulk-option-title, html.cms-dark .cms-bulk-draft-title, html.cms-dark .cms-bulk-guide strong { color: #E8E9F5; } html.cms-dark .cms-bulk-setup-sub, html.cms-dark .cms-bulk-keep-count, html.cms-dark .cms-bulk-option-text, html.cms-dark .cms-bulk-setup-foot-note, html.cms-dark .cms-bulk-draft-text, html.cms-dark .cms-bulk-setup-note .mud-icon-root { color: #A3A7C6; }
html.cms-dark .cms-bulk-option { border-color: #2C3050; background: #0E0F1A; } html.cms-dark .cms-bulk-option:hover { border-color: #3A3F63; } html.cms-dark .cms-bulk-option-on, html.cms-dark .cms-bulk-option-on:hover { border-color: #A5A4FA; background: #1E2042; } html.cms-dark .cms-bulk-option:has(.cms-bulk-option-input:focus-visible) { outline-color: #A5A4FA; }
html.cms-dark .cms-bulk-option-tick { border-color: #3A3F63; } html.cms-dark .cms-bulk-option-on .cms-bulk-option-tick { border-color: #A5A4FA; background: #A5A4FA; color: #0E0F1A; } html.cms-dark .cms-bulk-setup-note { background: #0E0F1A; color: #D2D4E8; } html.cms-dark .cms-bulk-guide { color: #D2D4E8; }
/* Bulk scan step bar (2026-10-16, Irfan): 1 Set up · 2 Scan · 3 Review and create on top of each screen; smaller on phones */
.cms-bulk-progress { display: flex; align-items: center; margin: 0 0 12px; padding: 0; list-style: none; }
.cms-bulk-progress-step { display: flex; flex: 1 1 0; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; color: #5C6275; }
.cms-bulk-progress-step:last-child { flex: 0 1 auto; }
.cms-bulk-progress-step:not(:last-child)::after { content: ""; flex: 1 1 16px; height: 2px; margin: 0 10px; border-radius: 1px; background: #E3E5EA; }
.cms-bulk-progress-done:not(:last-child)::after { background: #4F4FCB; }
.cms-bulk-progress-number { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1.5px solid #CDD1DA; border-radius: 50%; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cms-bulk-progress-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cms-bulk-progress-now { font-weight: 600; color: #0F1222; }
.cms-bulk-progress-now .cms-bulk-progress-number { border-color: #4F4FCB; background: #4F4FCB; color: #FFFFFF; }
.cms-bulk-progress-done .cms-bulk-progress-number { border-color: #ECECFB; background: #ECECFB; color: #4040B0; }
@media (max-width: 599px) { .cms-bulk-progress { margin-bottom: 8px; } .cms-bulk-progress-step { gap: 5px; font-size: 0.6875rem; } .cms-bulk-progress-number { width: 20px; height: 20px; font-size: 0.6875rem; } .cms-bulk-progress-step:not(:last-child)::after { margin: 0 6px; } }
html.cms-dark .cms-bulk-progress-step { color: #A3A7C6; } html.cms-dark .cms-bulk-progress-step:not(:last-child)::after { background: #2C3050; } html.cms-dark .cms-bulk-progress-done:not(:last-child)::after { background: #A5A4FA; } html.cms-dark .cms-bulk-progress-number { border-color: #3A3F63; }
html.cms-dark .cms-bulk-progress-now { color: #E8E9F5; } html.cms-dark .cms-bulk-progress-now .cms-bulk-progress-number { border-color: #A5A4FA; background: #A5A4FA; color: #0E0F1A; } html.cms-dark .cms-bulk-progress-done .cms-bulk-progress-number { border-color: #1E2042; background: #1E2042; color: #B9B8FC; }

/* Staff hand-over form (Plan 24, spec 2026-10-19 §3.3): its own light page, outside the shell; phone width first. */
.cms-form-page { min-height: 100vh; background: #F7F8FA; color: #343849; color-scheme: light; }
.cms-form-top { background: #fff; border-bottom: 1px solid #E3E5EC; padding: 14px 18px; }
.cms-form-top img { height: 22px; display: block; }
.cms-form-body { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; }
.cms-form-pill { display: inline-block; font-size: 0.75rem; padding: 2px 8px; border-radius: 99px; background: #EEF0FF; color: #4F4FCB; font-weight: 600; margin-bottom: 10px; }
.cms-form-pill-leaver { background: #FFF4E0; color: #975A00; }
.cms-form-h1 { font-size: 1.25rem; margin: 0 0 6px; color: #0F1222; }
.cms-form-help { margin: 0 0 12px; font-size: 0.875rem; line-height: 1.45; color: #5C6275; }
.cms-form-items { list-style: none; margin: 0 0 14px; padding: 0; background: #fff; border: 1px solid #E3E5EC; border-radius: 10px; }
.cms-form-items li { padding: 11px 14px; border-top: 1px solid #E3E5EC; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; }
.cms-form-items li:first-child { border-top: 0; }
.cms-form-item-name { font-weight: 600; font-size: 0.9rem; }
.cms-form-item-meta { grid-column: 1; font-size: 0.78rem; color: #5C6275; margin-top: 2px; }
.cms-form-item-state { grid-column: 2; grid-row: 1; font-size: 0.75rem; color: #5C6275; white-space: nowrap; }
.cms-form-item-ok { color: #18794E; font-weight: 600; }
.cms-form-item-note { grid-column: 1; font-size: 0.78rem; color: #7A4B00; margin-top: 2px; }
.cms-form-statement { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; margin: 4px 0 14px; cursor: pointer; }
.cms-form-statement input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #4F4FCB; flex: none; }
.cms-form-button { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 12px; border-radius: 8px; font: inherit; font-weight: 600; font-size: 0.95rem; border: 1px solid #4F4FCB; cursor: pointer; text-decoration: none; }
.cms-form-primary { background: #4F4FCB; color: #fff; }
.cms-form-primary:disabled { background: #C9C9EE; border-color: #C9C9EE; cursor: default; }
.cms-form-secondary { background: #fff; color: #4F4FCB; margin-top: 8px; }
.cms-form-link { background: none; border: 0; color: #4F4FCB; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; padding: 0; }
.cms-form-problem { display: block; text-align: center; margin-top: 14px; font-size: 0.9rem; }
.cms-form-note { font-size: 0.75rem; color: #5C6275; text-align: center; margin-top: 18px; line-height: 1.45; }
.cms-form-alert { background: #FFF7F7; border: 1px solid #F3D0D0; color: #7A2023; border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; }
.cms-form-label { display: block; font-weight: 600; font-size: 0.82rem; margin-bottom: 6px; }
.cms-form-reject textarea { width: 100%; box-sizing: border-box; border: 1px solid #B8BBC9; border-radius: 8px; padding: 9px; font: inherit; font-size: 0.875rem; margin-bottom: 12px; }
.cms-form-reason { margin: 0; padding: 10px 12px; background: #fff; border-left: 3px solid #C62A2F; border-radius: 4px; }
.cms-form-done { text-align: center; padding: 30px 6px 10px; }
.cms-form-tick { display: block; width: 56px; height: 56px; border-radius: 50%; background: #E6F4EC; margin: 0 auto 14px; position: relative; }
.cms-form-tick::after { content: ""; position: absolute; left: 20px; top: 12px; width: 12px; height: 24px; border: solid #18794E; border-width: 0 4px 4px 0; transform: rotate(45deg); }
.cms-form-dialog { width: min(560px, 100vw); max-width: 100vw; box-sizing: border-box; border: 0; border-radius: 18px 18px 0 0; padding: 18px; margin: auto auto 0; }
.cms-form-dialog::backdrop { background: rgba(15, 18, 34, 0.45); }
.cms-form-dialog h2 { margin: 0 0 4px; font-size: 1.05rem; }
.cms-form-name-input { width: 100%; box-sizing: border-box; border: 1px solid #B8BBC9; border-radius: 8px; padding: 10px; font: inherit; font-size: 1rem; margin-bottom: 12px; }
.cms-form-pad { position: relative; border: 1.5px dashed #B8BBC9; border-radius: 12px; height: 300px; background: #fff; touch-action: none; }
.cms-form-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.cms-form-pad-line { position: absolute; left: 18px; right: 18px; bottom: 44px; border-bottom: 1px solid #D5D7E0; pointer-events: none; }
.cms-form-pad-hint { position: absolute; left: 18px; bottom: 16px; font-size: 0.75rem; color: #5C6275; pointer-events: none; }
.cms-form-pad-clear { position: absolute; right: 14px; top: 10px; }
.cms-form-two { display: flex; gap: 10px; margin-top: 12px; }
.cms-form-two .cms-form-button { margin-top: 0; }
@media (min-width: 600px) { .cms-form-dialog { border-radius: 14px; margin: auto; } }

/* Signed hand-over record (Plan 24): the pop-up and the print page. */
.cms-handover-record-title { font-size: 1.1rem; margin: 0 0 2px; }
.cms-handover-facts { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 12px 0; font-size: 0.875rem; }
.cms-handover-facts dt { color: #5C6275; } .cms-handover-facts dd { margin: 0; }
html.cms-dark .cms-handover-facts dt { color: #A3A7C6; }
.cms-handover-signature-box { margin-top: 12px; border: 1px solid #E3E5EC; border-radius: 8px; background: #fff; padding: 8px; text-align: center; }
html.cms-dark .cms-handover-signature-box { border-color: #2E3150; }
.cms-handover-signature { max-width: 100%; max-height: 160px; }
.cms-handover-signed-name { text-align: center; margin-top: 6px; font-weight: 600; font-size: 0.9375rem; }
.cms-handover-print-actions { justify-content: space-between; margin-bottom: 12px; }
.cms-handover-print { max-width: 760px; margin: 0 auto; }
.cms-handover-print-logo { height: 26px; margin-bottom: 14px; }
.cms-handover-print-footer { margin-top: 16px; }
@media print { .cms-handover-print-actions { display: none !important; } .cms-handover-print { border: 0 !important; max-width: none; } }
html.cms-dark .cms-handover-print-logo { content: url("img/machineslogo-white.png"); }
@media print { html.cms-dark .cms-handover-print-logo { content: url("img/machineslogo.png"); } .cms-handover-print, .cms-handover-print * { color: #000 !important; background: transparent !important; } .cms-handover-signature-box { background: #fff !important; border-color: #999 !important; } }

/* Stores (Plan 25): the store page's facts, DM row, batches on the way and the assign pop-up's picked list. */
.cms-store-facts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cms-store-dm { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cms-store-dm-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600;
    background: #E8E8F8; color: #343849; flex: none; }
.cms-store-dm-avatar.mud-avatar { width: 32px; height: 32px; font-size: 12px; }
.cms-avatar-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cms-store-blocked { flex-basis: 100%; text-align: right; font-size: 12px; }
/* A batch on the way (2026-10-27): a tinted header band over a plain body, so the header reads apart from its devices. */
.cms-store-batch { border: 1px solid #DCDDF0; border-radius: 8px; background: #FFFFFF; margin-bottom: 12px; overflow: hidden; }
.cms-store-batch-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; background: #ECECFA; border-bottom: 1px solid #DCDDF0; }
.cms-store-batch .cms-store-table td { vertical-align: middle; }
.cms-store-batch .cms-store-table td:first-child { padding-left: 12px; }
.cms-store-batch .cms-store-table td:last-child { padding-right: 12px; }
.cms-store-batch .cms-store-table tr:last-child td { border-bottom: 0; }
.cms-store-remove .cms-asset-return-icon.mud-icon-root { display: inline-block; width: 18px; height: 18px; margin-right: 4px; color: inherit; }
.cms-store-batch-head > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cms-store-table { width: 100%; }
.cms-store-picked { list-style: none; margin: 12px 0 0; padding: 0; border-radius: 8px; background: #F4F4FB; }
.cms-store-picked li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 12px; }
.cms-store-picked li + li { border-top: 1px solid #E3E5EA; }
.cms-store-dm-note { color: #5C6275; }
html.cms-dark .cms-store-dm-avatar { background: #2C2F55; color: #E8E9F5; }
html.cms-dark .cms-store-picked { background: #17192D; }
html.cms-dark .cms-store-batch { background: #17192D; border-color: #2C3050; }
html.cms-dark .cms-store-batch-head { background: #232650; border-bottom-color: #2C3050; }
html.cms-dark .cms-store-picked li + li { border-top-color: #2C3050; }
html.cms-dark .cms-store-dm-note { color: #A3A7C6; }
/* Assign to…: the Person | Store switch and the store options (Plan 25). */
.cms-segmented { display: inline-flex; border: 1px solid #D0D5DD; border-radius: 8px; overflow: hidden; }
.cms-segment { border: 0; background: transparent; padding: 6px 16px; font: inherit; font-size: 13px; font-weight: 500; color: #5C6275; cursor: pointer; }
.cms-segment + .cms-segment { border-left: 1px solid #D0D5DD; }
.cms-segment-on { background: #EEEFFD; color: #4040B0; }
.cms-segment:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-select-group { font-size: 12px; font-weight: 600; color: #5C6275 !important; opacity: 1 !important; }
.cms-store-option { display: flex; justify-content: space-between; gap: 12px; width: 100%; }
html.cms-dark .cms-segmented, html.cms-dark .cms-segment + .cms-segment { border-color: #3A3F63; }
html.cms-dark .cms-segment { color: #A3A7C6; }
html.cms-dark .cms-segment-on { background: #26284A; color: #E8E9F5; }
html.cms-dark .cms-select-group { color: #A3A7C6 !important; }
/* Store assign pop-up: the outlined field keeps a top margin for its label; drop it so the scan button centres on the box. */
.cms-store-pick-row .mud-input-control { margin-top: 0; }
/* Staff tab (2026-10-20): photo beside the name; a line under the ranked people (Store Leader, Supervisor, …). */
.cms-store-staff-person { display: flex; align-items: center; gap: 10px; }
.cms-store-staff-note { display: block; margin-top: 2px; line-height: 1.4; }
.cms-store-staff td { vertical-align: middle; }
.cms-reports td { vertical-align: middle; }
.cms-reports-to { display: inline-flex; align-items: center; gap: 8px; }
.cms-reports-to-avatar.mud-avatar { width: 28px; height: 28px; font-size: 0.6875rem; flex: none; } .cms-reports-to-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cms-store-staff-avatar.mud-avatar { width: 32px; height: 32px; font-size: 0.75rem; flex: none; }
/* Company and department pages (2026-10-21): rows with the head's or DM's photo and a tag. cms-unit-: the org chart owns cms-org-. */
.cms-unit-table td { vertical-align: middle; }
.cms-unit-title { display: flex; align-items: center; gap: 10px; }
.cms-unit-mark { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cms-unit-head { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cms-unit-tag { display: inline-block; border-radius: 4px; padding: 1px 7px; font-size: 0.75rem; font-weight: 500; background: #EEEFFD; color: #4040B0; white-space: nowrap; }
html.cms-dark .cms-unit-tag { background: #2C2F55; color: #C9CBF5; }
.cms-unit-more { margin-left: 6px; font-size: 0.75rem; font-weight: 600; color: #5C6275; cursor: help; }
.cms-unit-table { table-layout: fixed; }
.cms-unit-col-count { width: 64px; }
@media (min-width: 600px) { .cms-unit-col-name { width: 30%; } .cms-unit-col-person { width: 40%; } .cms-unit-col-count { width: 120px; } .cms-unit-col-code { width: 120px; } .cms-unit-col-status { width: 180px; } }
.cms-unit-table .cms-asset-name + .cms-status-wrap { margin-left: 8px; }
.cms-unit-company { text-decoration: none; }
.cms-unit-people .cms-unit-tag { margin-left: 6px; }
.cms-store-staff tr.cms-store-staff-first-unranked td { border-top: 2px solid #C9CDD8; }
html.cms-dark .cms-store-staff tr.cms-store-staff-first-unranked td { border-top-color: #3A3F63; }
.cms-store-pick-help { display: block; margin: 4px 0 0 8px; color: #5C6275; }
html.cms-dark .cms-store-pick-help { color: #A3A7C6; }
/* Store page on a phone: the employee record's compact tables (cms-assets); the type line under a name is desktop only there. */
.cms-store-desktop-meta { display: block; }
@media (max-width: 599px) {
    .cms-store-desktop-meta { display: none; }
    .cms-store-batch-head { align-items: flex-start; padding: 8px; }
    .cms-store-batch-head .cms-store-batch-confirm.mud-button-root { flex-basis: 100%; min-height: 44px; }
    .cms-store-batch .cms-store-table td:first-child { padding-left: 8px; }
    .cms-store-batch .cms-store-table td:last-child { padding-right: 8px; }
    .cms-assets .cms-store-remove .cms-asset-return-icon.mud-icon-root { width: 24px; height: 24px; margin-right: 0; color: inherit; }
    html.cms-dark .cms-assets .cms-store-remove .cms-asset-return-icon.mud-icon-root { color: inherit; }
}
/* Hand-over forms on a phone: up to two action icons side by side (Resend + Copy link), and the short status. */
.cms-handover-status-short { display: none; }
@media (max-width: 599px) {
    .cms-handover-forms.cms-assets .cms-handover-status { display: none; }
    .cms-handover-forms.cms-assets .cms-handover-status-short { display: inline; }
    /* Two 44px icons; Status shares the rest with Form so a rejection reason isn't a word per line (2026-11-02). The note on a
       rejected row is left to the row above, which already reads "replaces the rejected one". */
    .cms-handover-forms.cms-assets .cms-row-actions { width: 96px; white-space: nowrap; }
    .cms-handover-forms.cms-assets .cms-asset-status { width: auto; }
    .cms-handover-forms.cms-assets .cms-handover-reason { font-size: 0.75rem; }
    .cms-handover-forms.cms-assets .cms-handover-replaced-note { display: none; }
}

/* Settings › Microsoft 365 (Plan 22a) */
.cms-ms-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; }
.cms-ms-synced { font-size: 0.8125rem; color: #5C6275; }
.cms-ms-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cms-ms-chip { border: 1px solid #D3D6DE; border-radius: 999px; background: #FFFFFF; color: #343849; padding: 4px 12px; font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.cms-ms-chip-on { border-color: #4F4FCB; background: #ECECFB; color: #3B3BA8; }
.cms-ms-search { max-width: 320px; margin-bottom: 12px; }
.cms-ms-table-wrap { border: 1px solid #D3D6DE; border-radius: 8px; overflow-x: auto; }
.cms-ms-table th { background: #4F4FCB; color: #FFFFFF; border-bottom: 0; }
.cms-ms-pill { display: inline-flex; border-radius: 999px; padding: 1px 8px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.cms-ms-pill-linked { background: #E6F4EC; color: #135E3D; } .cms-ms-pill-pairing { background: #FFF4DE; color: #7A4B00; } .cms-ms-pill-gone { background: #FDECEC; color: #8E1B20; }
.cms-ms-pill-notlinked { background: #F1F2F6; color: #343849; } .cms-ms-pill-none { background: transparent; color: #5C6275; border: 1px solid #D3D6DE; }
.cms-ms-picks { display: grid; gap: 6px; margin-top: 10px; }
.cms-ms-pick { display: grid; text-align: left; gap: 2px; padding: 8px 10px; border: 1px solid #E3E5EA; border-radius: 8px; background: #FFFFFF; font: inherit; cursor: pointer; }
html.cms-dark .cms-ms-synced { color: #A3A7C6; } html.cms-dark .cms-ms-chip { background: #121424; border-color: #2C3050; color: #D2D4E8; } html.cms-dark .cms-ms-chip-on { background: #1E2042; border-color: #A5A4FA; color: #B9B8FC; }
html.cms-dark .cms-ms-table-wrap { border-color: #2C3050; } html.cms-dark .cms-ms-table th { background: #0E0F1A; color: #A5A4FA; border-bottom: 1px solid #2C3050; }
html.cms-dark .cms-ms-pill-linked { background: #0F2E21; color: #A7F0CB; } html.cms-dark .cms-ms-pill-pairing { background: #3A2A0E; color: #FFD995; } html.cms-dark .cms-ms-pill-gone { background: #3A1519; color: #FFB3B9; }
html.cms-dark .cms-ms-pill-notlinked { background: #1C1F36; color: #D2D4E8; } html.cms-dark .cms-ms-pill-none { color: #A3A7C6; border-color: #2C3050; }
html.cms-dark .cms-ms-pick { background: #121424; border-color: #2C3050; }
@media (max-width: 599px) { .cms-ms-search { max-width: none; } }
.cms-ms-tab-select { display: none; width: 100%; padding: 8px 10px; border: 1px solid #C9CCD6; border-radius: 4px; background: #FFFFFF; color: #343849; font: inherit; }
html.cms-dark .cms-ms-tab-select { background: #121424; border-color: #3A3F63; color: #D2D4E8; }
@media (max-width: 599px) { .cms-ms-tabs .mud-tabs-tabbar { display: none; } .cms-ms-tab-select { display: block; margin-bottom: 12px; } }
@media (max-width: 599px) { .cms-ms-table-wrap { border: 0; } .cms-ms-table, .cms-ms-table tbody { display: block; } .cms-ms-table thead { display: none; } .cms-ms-table tr { display: grid; gap: 4px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #E3E5EA; border-radius: 8px; background: #FFFFFF; } .cms-ms-table td { padding: 0; border: 0; } }
@media (max-width: 599px) { html.cms-dark .cms-ms-table tr { background: #121424; border-color: #2C3050; } html.cms-dark .cms-ms-table td { border: 0; } }
.cms-ms-pill-signin { background: #FDECEC; color: #8E1B20; }
html.cms-dark .cms-ms-pill-signin { background: #3A1519; color: #FFB3B9; }
.cms-ms-note { margin: 0 0 12px; font-size: 0.875rem; color: #5C6275; }
html.cms-dark .cms-ms-note { color: #A3A7C6; }
.cms-ms-subtitle { margin: 16px 0 8px; font-size: 0.9375rem; font-weight: 600; color: #0F1222; }
.cms-ms-gap-list { display: grid; gap: 6px; }
.cms-ms-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border: 1px solid #E3E5EA; border-radius: 8px; background: #FFFFFF; }
html.cms-dark .cms-ms-subtitle { color: #E8E9F5; } html.cms-dark .cms-ms-gap { background: #121424; border-color: #2C3050; }
.cms-ms-diff-link { font-weight: 600; color: #4F4FCB; }
html.cms-dark .cms-ms-diff-link { color: #A5A4FA; }
.cms-ms-from { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #C9C9F2; border-radius: 8px; background: #F7F7FD; }
.cms-ms-from-title { font-size: 0.8125rem; font-weight: 600; color: #3B3BA8; }
.cms-ms-pick:disabled { cursor: default; opacity: 0.6; }
.cms-ms-pick { color: #0F1222; } html.cms-dark .cms-ms-pick { color: #E8E9F5; }
html.cms-dark .cms-ms-from { background: #16182E; border-color: #3A3F7A; } html.cms-dark .cms-ms-from-title { color: #B9B8FC; }
/* Plan 22c: Add employee, the picked Microsoft 365 account and Don't link */
.cms-ms-picked { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; } .cms-ms-picked > span { display: grid; gap: 2px; color: #0F1222; }
html.cms-dark .cms-ms-picked > span { color: #E8E9F5; }
.cms-ms-pick { justify-content: start; }
.cms-ms-add-employee { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: #4F4FCB; text-decoration: none; } .cms-ms-add-employee:hover { text-decoration: underline; }
html.cms-dark .cms-ms-add-employee { color: #A5A4FA; }
.cms-ms-badge-menu { display: inline-flex; align-items: center; }
.cms-ms-badge { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 32px; height: 32px; margin-left: 2px; padding: 0 4px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.cms-ms-badge:hover { background: #F1F1FC; } .cms-ms-badge:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 1px; }
.cms-ms-badge-logo { display: block; width: 18px; height: 18px; }
.cms-ms-badge-dot { align-self: flex-end; width: 8px; height: 8px; margin-bottom: 7px; border-radius: 50%; }
.cms-ms-badge-dot-linked { background: #18794E; } .cms-ms-badge-dot-ready { background: #4F4FCB; } .cms-ms-badge-dot-attention { background: #B26B00; } .cms-ms-badge-dot-blocked { background: #C62A2F; } .cms-ms-badge-dot-none { background: transparent; box-shadow: inset 0 0 0 2px #8A8FA3; }
.cms-ms-badge-head { display: grid; gap: 2px; max-width: 300px; padding: 8px 16px 10px; border-bottom: 1px solid #E3E5EA; }
.cms-ms-badge-title { font-weight: 600; color: #0F1222; } .cms-ms-badge-detail { font-size: 0.8125rem; color: #5C6275; overflow-wrap: anywhere; } .cms-ms-badge-note { font-size: 0.8125rem; color: #5C6275; }
.cms-ms-badge-note-linked { color: #18794E; } .cms-ms-badge-note-ready { color: #3B3BA8; } .cms-ms-badge-note-blocked { color: #C62A2F; } .cms-ms-badge-danger, .cms-ms-badge-danger .mud-menu-item-text { color: #C62A2F; }
html.cms-dark .cms-ms-badge:hover { background: #1E2046; } html.cms-dark .cms-ms-badge:focus-visible { outline-color: #A5A4FA; } html.cms-dark .cms-ms-badge-dot-none { box-shadow: inset 0 0 0 2px #A3A7C6; } html.cms-dark .cms-ms-badge-head { border-color: #2C3050; }
html.cms-dark .cms-ms-badge-title { color: #E8E9F5; } html.cms-dark .cms-ms-badge-detail, html.cms-dark .cms-ms-badge-note { color: #A3A7C6; } html.cms-dark .cms-ms-badge-note-linked { color: #5FD39A; } html.cms-dark .cms-ms-badge-note-ready { color: #BDBCFC; } html.cms-dark .cms-ms-badge-note-blocked, html.cms-dark .cms-ms-badge-danger, html.cms-dark .cms-ms-badge-danger .mud-menu-item-text { color: #F2A0A3; }
@media (max-width: 599px) { .cms-ms-badge { min-width: 44px; height: 44px; } .cms-ms-badge-dot { margin-bottom: 13px; } }
.cms-record-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
/* Plan 26 (spec §3.6): the Pair warning, its company row, the change list and the department / outlet prompts. */
.cms-ms-warning { display: grid; gap: 12px; }
.mud-dialog.cms-ms-pair-dialog { max-width: 1200px; }
.cms-ms-pair-avatar.mud-avatar { width: 56px; height: 56px; background: #EEEFFD; color: #4040B0; font-weight: 700; } .cms-ms-pair-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cms-ms-warning-sub { margin: 0; font-size: 0.8125rem; color: #5C6275; }
.cms-ms-pair-table { display: grid; border: 1px solid #E3E5EA; border-radius: 8px; overflow: hidden; }
.cms-ms-pair-head, .cms-ms-pair-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; align-items: start; }
.cms-ms-pair-head { padding: 8px 12px; background: #F7F8FA; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #5C6275; }
.cms-ms-pair-row { border-top: 1px solid #E3E5EA; } .cms-ms-pair-row-field { font-size: 0.8125rem; font-weight: 600; color: #5C6275; } .cms-ms-pair-row-cms, .cms-ms-pair-row-ms { min-width: 0; overflow-wrap: anywhere; } .cms-ms-pair-row-ms { display: grid; gap: 4px; }
.cms-ms-change { background: #F1F1FC; } .cms-ms-change-from { color: #5C6275; text-decoration: line-through; } .cms-ms-change-to { font-weight: 600; color: #0F1222; }
.cms-ms-new { justify-self: start; padding: 1px 6px; border-radius: 10px; background: #E6E6FA; color: #3B3BA8; font-size: 0.75rem; font-weight: 500; }
.cms-ms-pair-row-choice { background: #FFF8EA; } .cms-ms-pair-row .cms-ms-prompt, .cms-ms-pair-row .cms-ms-note-box { padding: 0; border: 0; background: none; } .cms-ms-pair-row-error { font-size: 0.75rem; font-weight: 500; color: #A61F24; }
.cms-ms-same-toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-top: 1px solid #E3E5EA; color: #5C6275; }
.cms-ms-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.75rem; color: #5C6275; } .cms-ms-legend-swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -2px; }
.cms-ms-legend-change { background: #F1F1FC; border: 1px solid #C9C9F0; } .cms-ms-legend-choice { background: #FFF8EA; border: 1px solid #F0D49A; }
.cms-ms-prompt { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #F0D49A; border-radius: 8px; background: #FFF8EA; }
.cms-ms-note-box { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #E3E5EA; border-radius: 8px; background: #F7F8FA; }
.cms-ms-prompt-text { margin: 0; font-size: 0.875rem; color: #343849; }
.cms-ms-prompt-code { flex: 0 1 10rem; min-width: 7rem; }
.cms-ms-prompt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 0.875rem; } .cms-ms-prompt .mud-button-root, .cms-ms-note-box .mud-button-root { justify-self: start; }
html.cms-dark .cms-ms-pair-table, html.cms-dark .cms-ms-pair-row, html.cms-dark .cms-ms-same-toggle { border-color: #2C3050; } html.cms-dark .cms-ms-pair-head { background: #16182E; color: #A3A7C6; }
html.cms-dark .cms-ms-warning-sub, html.cms-dark .cms-ms-pair-row-field, html.cms-dark .cms-ms-change-from, html.cms-dark .cms-ms-same-toggle, html.cms-dark .cms-ms-legend { color: #A3A7C6; } html.cms-dark .cms-ms-change-to { color: #E8E9F5; }
html.cms-dark .cms-ms-change, html.cms-dark .cms-ms-legend-change { background: #1E2046; } html.cms-dark .cms-ms-pair-row-choice, html.cms-dark .cms-ms-legend-choice { background: #2A2210; } html.cms-dark .cms-ms-new { background: #25285A; color: #BDBCFC; } html.cms-dark .cms-ms-pair-row-error { color: #F2A0A3; }
html.cms-dark .cms-ms-prompt { background: #2A2210; border-color: #6B5320; } html.cms-dark .cms-ms-note-box { background: #16182E; border-color: #2C3050; } html.cms-dark .cms-ms-prompt-text { color: #D2D4E8; }
@media (max-width: 599px) { .cms-ms-pair-head { display: none; } .cms-ms-pair-row { grid-template-columns: minmax(0, 1fr); } .cms-ms-pair-row-cms::before { content: "In the CMS"; } .cms-ms-pair-row-ms::before { content: "From Microsoft 365"; } .cms-ms-pair-row-cms::before, .cms-ms-pair-row-ms::before { display: block; font-size: 0.75rem; font-weight: 400; color: #5C6275; } }
/* Plan 26 (spec §3.8): Ready to link, and the reasons under Gaps › Needs attention. */
.cms-ms-pill-ready { background: #ECECFB; color: #3B3BA8; } html.cms-dark .cms-ms-pill-ready { background: #1E2042; color: #B9B8FC; }
.cms-ms-reason { flex-basis: 100%; font-size: 0.8125rem; color: #8A4B00; } html.cms-dark .cms-ms-reason { color: #FFD995; }
.cms-ms-form-prompts { display: grid; gap: 8px; margin: 16px 0 0; }
/* Plan 27: transfer rows (a location's Transfers tab since Plan 28), the transfer form and request sheets. Rows follow the phone list rows. */
.cms-transfer-mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.cms-transfer-list { margin-top: 12px; }
.cms-transfer-list.cms-card { padding: 0; overflow: hidden; }
.cms-transfer-section { font-size: 0.75rem; font-weight: 600; color: #5C6275; padding: 12px 4px 6px; }
.cms-transfer-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 16px; border: 0; background: #FFFFFF;
    color: #343849; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cms-transfer-row + .cms-transfer-row { border-top: 1px solid #EEF0F4; }
.cms-transfer-row:hover { background: #F9FAFB; }
.cms-transfer-row:active { background: #F1F2F6; }
.cms-transfer-row:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-transfer-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cms-transfer-name { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-transfer-line { font-size: 0.8125rem; }
.cms-transfer-new { background: #EEEFFD; }
.cms-transfer-avatar.mud-avatar { width: 32px; height: 32px; font-size: 0.75rem; flex: none; }
.cms-transfer-avatar-lg.mud-avatar { width: 40px; height: 40px; font-size: 0.875rem; flex: none; }
.cms-transfer-person { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: #F7F8FA; margin-bottom: 16px; }
.cms-transfer-field { margin-bottom: 16px; }
.cms-transfer-label { font-size: 0.75rem; font-weight: 600; margin-bottom: 6px; }
.cms-transfer-choice { width: 100%; margin: 0 0 8px; border: 1px solid #D0D5DD; border-radius: 8px; min-height: 52px; }
.cms-transfer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; width: 100%; }
.cms-transfer-problem { flex-basis: 100%; color: #C62A2F; font-size: 0.8125rem; }
.cms-transfer-steps { padding: 0 16px 8px; }
.cms-transfer-quote { margin-top: 6px; font-size: 0.8125rem; }
.cms-transfer-step-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 0.8125rem; }
@media (max-width: 599px) {
    .cms-transfer-form .cms-transfer-send { flex: 1; height: 48px; }
}
html.cms-dark .cms-transfer-row { background: var(--cms-dark-card); color: #D2D4E8; }
html.cms-dark .cms-transfer-row + .cms-transfer-row { border-top-color: #2C3050; }
html.cms-dark .cms-transfer-row:hover { background: #1C1F36; }
html.cms-dark .cms-transfer-row:focus-visible { outline-color: #A5A4FA; }
html.cms-dark .cms-transfer-new { background: #1E2042; }
html.cms-dark .cms-transfer-section { color: #A3A7C6; }
html.cms-dark .cms-transfer-person { background: #17192D; }
html.cms-dark .cms-transfer-choice { border-color: #3A3F63; }
html.cms-dark .cms-transfer-problem { color: #FF7A85; }
/* Plan 27: HR's review dialog (hr-transfers.html A) and IT's Transfers tab on Access Request. */
.cms-transfer-review-name { margin: 0; font-size: 1rem; font-weight: 600; }
.cms-transfer-review .cms-sub { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cms-transfer-facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 12px 0; font-size: 0.875rem; }
.cms-transfer-facts dt { color: #5C6275; }
.cms-transfer-facts dd { margin: 0; }
.cms-transfer-quote-box { border-radius: 8px; background: #F7F8FA; padding: 8px 12px; font-size: 0.875rem; margin-bottom: 12px; }
.cms-transfer-note { margin-top: 12px; background: #FFFAEB; border: 1px solid #F5C26B; color: #7A5200; border-radius: 6px; padding: 8px 12px; font-size: 0.8125rem; }
.cms-transfer-actions-gap { flex: 1; }
.cms-transfer-remark { display: block; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cms-transfer-it { padding: 0; }
.cms-transfer-it-row { cursor: default; }
@media (max-width: 599px) { .cms-transfer-facts { grid-template-columns: 1fr; gap: 0 0; } .cms-transfer-facts dd { margin-bottom: 8px; } }
html.cms-dark .cms-transfer-facts dt { color: #A3A7C6; }
html.cms-dark .cms-transfer-quote-box { background: #17192D; }
html.cms-dark .cms-transfer-note { background: #352A12; border: 1px solid #7A5E26; color: #F5BE55; }
@media (max-width: 599px) { .cms-transfer-it-sheet.cms-phone-only { display: flex !important; } }
/* Add user (2026-10-22, option C): the From an employee | Without an employee switch, and the chosen employee with Change. */
.cms-user-chosen { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cms-user-chosen > .cms-user-linked { flex: 1; min-width: 0; }
.cms-user-mode { display: flex; border: 1px solid #D0D5DD; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }
.cms-user-mode > button { flex: 1; min-height: 36px; padding: 6px 8px; border: 0; background: #FFFFFF; color: #555B6E; font: inherit; font-weight: 600; font-size: 0.8125rem; cursor: pointer; }
.cms-user-mode > button + button { border-left: 1px solid #D0D5DD; }
.cms-user-mode > button:hover:not(.cms-user-mode-on) { background: #F3F4F7; }
.cms-user-mode > button:focus-visible { outline: 2px solid #4F4FCB; outline-offset: -2px; }
.cms-user-mode > button.cms-user-mode-on { background: #4F4FCB; color: #FFFFFF; }
html.cms-dark .cms-user-mode { border-color: #2C3050; }
html.cms-dark .cms-user-mode > button { background: transparent; color: #A3A7C6; }
html.cms-dark .cms-user-mode > button + button { border-left-color: #2C3050; }
html.cms-dark .cms-user-mode > button:hover:not(.cms-user-mode-on) { background: #1C1E33; }
html.cms-dark .cms-user-mode > button:focus-visible { outline-color: #A5A4FA; }
html.cms-dark .cms-user-mode > button.cms-user-mode-on { background: #A5A4FA; color: #0E0F1A; }
/* Add user, roles (2026-10-22): search, a tick list four roles tall then scrolling, the chosen roles as chips. */
.cms-user-roles-search { margin: 4px 0 6px; }
.cms-user-roles { display: flex; flex-direction: column; border: 1px solid #D0D5DD; border-radius: 8px; max-height: calc(4 * 37px); overflow-y: auto; margin-bottom: 4px; }
.cms-user-roles > label { display: flex; align-items: center; gap: 10px; min-height: 36px; box-sizing: border-box; padding: 0 12px; cursor: pointer; font-weight: 500; flex: none; }
.cms-user-roles > label + label { border-top: 1px solid #EEF0F4; }
.cms-user-roles > label:hover { background: #F7F7FD; }
.cms-user-roles > label.cms-user-role-on { background: #F1F1FC; }
.cms-user-roles input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: #4F4FCB; cursor: pointer; }
.cms-user-roles-none { padding: 8px 12px; color: #555B6E; }
.cms-user-roles.cms-user-roles-error { border-color: #C62A2F; }
.cms-user-roles-problem { color: #C62A2F; font-size: 12px; margin: 0 0 4px 2px; }
.cms-user-roles-selected { margin: 8px 0 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.cms-user-roles-selected-title { font-weight: 600; }
.cms-user-roles-selected-none { color: #555B6E; }
.cms-user-role-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cms-user-role-chip { display: inline-flex; align-items: center; gap: 2px; background: #E6E6FA; color: #3A3A8C; border-radius: 999px; padding: 2px 4px 2px 10px; font-weight: 600; font-size: 12.5px; }
.cms-user-role-chip > button { border: 0; background: transparent; color: inherit; width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; }
.cms-user-role-chip > button:hover { background: #D4D4F7; }
.cms-user-role-chip > button:focus-visible { outline: 2px solid #4F4FCB; outline-offset: 0; }
html.cms-dark .cms-user-roles { border-color: #2C3050; }
html.cms-dark .cms-user-roles > label + label { border-top-color: #232640; }
html.cms-dark .cms-user-roles > label:hover { background: #1C1E33; }
html.cms-dark .cms-user-roles > label.cms-user-role-on { background: #26285A; }
html.cms-dark .cms-user-roles input[type=checkbox] { accent-color: #A5A4FA; }
html.cms-dark .cms-user-roles-none, html.cms-dark .cms-user-roles-selected-none { color: #A3A7C6; }
html.cms-dark .cms-user-roles.cms-user-roles-error { border-color: #F2A0A3; }
html.cms-dark .cms-user-roles-problem { color: #F2A0A3; }
html.cms-dark .cms-user-role-chip { background: #26285A; color: #C9C8FD; }
html.cms-dark .cms-user-role-chip > button:hover { background: #34377A; }
html.cms-dark .cms-user-role-chip > button:focus-visible { outline-color: #A5A4FA; }
/* A field that can't be edited is greyed out (2026-10-22): grey fill, muted text, no text cursor. */
.cms-field-locked .mud-input.mud-input-outlined { background: #F3F4F7; border-radius: var(--mud-default-borderradius); }
.cms-field-locked .mud-input input { color: #555B6E; cursor: default; }
html.cms-dark .cms-field-locked .mud-input.mud-input-outlined { background: #1C1E33; }
html.cms-dark .cms-field-locked .mud-input input { color: #A3A7C6; }
/* 2026-10-15: a system CMS sets up in Middleware shows what it creates after its name */
.cms-system-kind { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: #EEEEFB; color: #3B3BA8; vertical-align: middle; }
html.cms-dark .cms-system-kind { background: #23264A; color: #C9C8FF; }
/* 2026-10-15: the POS form — a found account to link, and a new cashier's PIN shown once */
.cms-pos-found { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #E3E5EA; border-radius: 8px; margin-bottom: 8px; }
.cms-pos-pin { display: inline-block; margin: 8px 0; padding: 8px 14px; border-radius: 8px; background: #F1F2F6; font-family: "IBM Plex Mono", monospace; font-size: 1.5rem; letter-spacing: 0.15em; }
html.cms-dark .cms-pos-found { border-color: #2C3050; }
html.cms-dark .cms-pos-pin { background: #1C1F36; }
/* 2026-10-23: a location's POS sign-ins tab — sign-ins in the mono face, wrapping on a phone */
.cms-pos-signin-email { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.cms-pos-signins-source { margin: -4px 0 12px; }
.cms-pos-signins-staff { margin-top: 12px; }
@media (max-width: 599px) { .cms-pos-signins-staff-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } }

/* Price and device tags (2026-11-03): the price tag app's 56 × 32 mm tags, drawn in pt and mm so the screen shows them as
   they print. Paper is white with black ink in both modes; only the page around the tags follows dark mode. Its fonts are
   the app's own (SIL Open Font License), loaded only where a tag is shown. */
@font-face { font-family: "Tag Detail"; src: url("fonts/frankRuhlLibreMedium.ttf") format("truetype"); font-weight: 500; font-display: block; }
@font-face { font-family: "Tag Bold"; src: url("fonts/robotoCondensedBold.ttf") format("truetype"); font-weight: 700; font-display: block; }
.cms-tag-page { padding: 16px; }
.cms-tag-intro { margin: 0 0 8px; }
.cms-tag-page .cms-access-tabs { padding: 0; margin-bottom: 16px; }
.cms-tag-page .cms-access-tab { display: inline-flex; align-items: center; gap: 6px; }
.cms-tag-tab-icon.mud-icon-root { font-size: 18px; }
.cms-tag-form { max-width: 760px; }
.cms-tag-heading { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: #0F1222; }
/* Price tag and Barcode label (option A, 2026-11-04): the form, and beside it the tag as it will print with Copies, Clear
   and Print under it (LiveTag). On a phone the tag sits above the form and the buttons dock at the bottom. */
.cms-tag-two-pane { display: grid; grid-template-columns: minmax(300px, 440px) minmax(0, 1fr); gap: 24px; align-items: start; }
.cms-tag-form-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cms-tag-form-pane .cms-tag-heading { margin: 0; }
.cms-tag-search-row { display: flex; gap: 8px; align-items: center; }
.cms-tag-search-row .cms-tag-code-field { flex: 1 1 auto; }
.cms-tag-search-row .cms-tag-code-field input { text-transform: uppercase; }
.cms-tag-search-hint { margin: -4px 0 0; }
.cms-tag-also { margin: 8px 0 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cms-tag-live-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cms-tag-live { box-sizing: border-box; min-height: 320px; padding: 24px; border-radius: 8px; background: #ECEEF3; display: flex; align-items: center; justify-content: center; }
.cms-tag-live .cms-tag { zoom: var(--cms-tag-zoom, 1); }
.cms-tag-live-empty, .cms-tag-live-note { margin: 0; text-align: center; }
.cms-tag-live-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cms-tag-copies { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.cms-tag-copies-label { font-size: 0.875rem; color: #555B6E; }
.cms-tag-copies-count { min-width: 28px; text-align: center; color: #0F1222; }
.cms-tags-print-job { display: none; }
.cms-tag-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.cms-tag-buttons-end { justify-content: flex-end; }
.cms-tag-result { min-height: 72px; padding: 12px; border: 1px solid #E3E5EA; border-radius: 8px; background: #F9FAFB; }
.cms-tag-result-empty { margin: 0; }
.cms-tag-error { margin: 0; color: #C62A2F; font-size: 0.875rem; }
.cms-tag-result .cms-tag-error + .cms-tag-error, .cms-tag-found + .cms-tag-error, .cms-tag-manual-fields + .cms-tag-error { margin-top: 8px; }
.cms-tag-found { margin: 0; display: grid; gap: 6px; font-size: 0.9375rem; }
.cms-tag-found > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cms-tag-found dt { flex: 0 0 96px; margin: 0; color: #5C6275; font-weight: 500; }
.cms-tag-found dd { margin: 0; color: #0F1222; overflow-wrap: anywhere; }
.cms-tag-found-price dd:has(.cms-tag-price-field) { flex: 0 1 220px; }
.cms-tag-manual-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cms-tag-manual-item { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; min-width: 0; }
.cms-tag-manual-item legend { padding: 0; margin-bottom: 4px; font-size: 0.8125rem; font-weight: 600; color: #343849; }
.cms-tag-multi-intro p { margin: 0 0 4px; }
.cms-tag-multi-intro { margin-bottom: 12px; }
.cms-tag-reading { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: #5C6275; }
.cms-tag-no-file { margin: 8px 0 0; }
.cms-tag-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.cms-tag-review-file { overflow-wrap: anywhere; color: #0F1222; }
/* Row warnings (2026-11-04): amber, as the bulk scan's; they never stop the print. Workbook errors stay red. */
.cms-tag-chip-warning { background: #FFF4DE; color: #7A4B00; border: 1px solid #F5D79A; }
.cms-tag-warning { color: #975A00; }
.cms-tag-warning .cms-tag-warning-icon { vertical-align: -4px; margin-right: 4px; color: #B26A00; }
.cms-tag-workbook-errors { margin-bottom: 12px; padding: 12px; border-radius: 8px; background: #FDECEC; color: #7A1518; font-size: 0.875rem; }
.cms-tag-workbook-errors ul { margin: 4px 0 0; padding-left: 20px; }
.cms-tag-review-scroll { max-height: 60vh; overflow: auto; border: 1px solid #E3E5EA; border-radius: 8px; }
.cms-tag-review thead th { position: sticky; top: 0; background: #F4F5F8; z-index: 1; }
.cms-tag-review-warning td { background: #FFF8E6; }
/* From Excel, fix in place (option A, 2026-11-04), measured from the canvas mockup: a file line with ready and to-fix as a
   dot and coloured text; a bordered table (12 px header on #F4F5F8, 8 × 12 px cells, codes in Plex Mono, a one-border
   copies stepper, a bare red bin); the selected row tinted with an accent edge and its description and price as fields;
   rows to fix amber, their name asked for in place; and beside it a grey panel with the selected row's tag. */
.cms-tag-review-head { gap: 10px; }
.cms-tag-file-icon.mud-icon-root { color: #555B6E; }
.cms-tag-review-count { color: #555B6E; }
.cms-tag-review-head-gap { flex: 1 1 auto; }
.cms-tag-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; }
.cms-tag-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cms-tag-state-ready { color: #18794E; }
.cms-tag-state-fix { color: #975A00; }
.cms-tag-state-fix::before { background: #B26A00; }
.cms-tag-replace.mud-button-root { height: 34px; }
.cms-tag-template-link { font-size: 0.8125rem; font-weight: 500; }
.cms-tag-fix { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.cms-tag-fix > .cms-tag-review-scroll { flex: 3 1 600px; min-width: 0; }
.cms-tag-review { width: 100%; border-collapse: collapse; font-size: 0.875rem; color: #0F1222; }
.cms-tag-review thead th { padding: 9px 12px; text-align: left; font-size: 0.75rem; font-weight: 600; color: #555B6E; border: 0; }
.cms-tag-review tbody tr { border-top: 1px solid #E3E5EA; cursor: pointer; }
.cms-tag-review tbody td { padding: 8px 12px; border: 0; vertical-align: middle; }
.cms-tag-review .cms-tag-cell-row { width: 36px; color: #555B6E; }
.cms-tag-review .cms-tag-cell-remove { width: 36px; padding-left: 4px; padding-right: 8px; }
.cms-tag-review .cms-tag-num { text-align: right; }
.cms-tag-cell-code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 0.8125rem; font-weight: 500; }
.cms-tag-edited, .cms-tag-note-phone, .cms-tag-head-break { display: none; }
.cms-tag-review-selected .cms-tag-cell-view { display: none; } /* a wide screen edits the selected row */
/* A phone's row edit form (TagRowDialog, 2026-11-04): the tag on top, the fields, copies, then Remove row beside Done. */
.cms-tag-row-dialog .mud-dialog-content { display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; }
.cms-tag-row-dialog .mud-dialog-content > * { flex: 0 0 auto; margin: 0; }
.cms-tag-row-dialog .cms-tag-live { min-height: 0; padding: 16px 8px; }
.cms-tag-row-title { font-weight: 600; }
.cms-tag-row-copies { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cms-tag-row-copies .cms-tag-stepper button { width: 44px; height: 44px; font-size: 1.125rem; font-weight: 500; color: #0F1222; }
.cms-tag-row-note { margin: 0; }
.cms-tag-row-price-bad .mud-input-helper-text { color: #975A00; }
.cms-tag-row-actions { display: flex; align-items: center; gap: 8px; width: 100%; }
.cms-tag-row-actions > .mud-button-filled { flex: 1 1 auto; min-height: 44px; }
.cms-tag-row-actions > .mud-button-text { min-height: 44px; }
html.cms-dark .cms-tag-row-copies .cms-tag-stepper button { color: #E8E9F5; }
html.cms-dark .cms-tag-row-price-bad .mud-input-helper-text { color: #F5BE55; }
/* Preview all (2026-11-04): option C's strip of every row's tag under the table; the selected row's is outlined. */
.cms-tag-strip-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; outline: 0; }
.cms-tag-strip-head { font-size: 0.75rem; font-weight: 600; color: #555B6E; }
.cms-tag-strip { display: flex; gap: 16px; overflow-x: auto; padding: 14px; border-radius: 8px; background: #ECEEF3; }
.cms-tag-strip-item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.cms-tag-strip-item .cms-tag { zoom: 0.9; }
.cms-tag-strip-item-on .cms-tag { outline: 3px solid #4F4FCB; outline-offset: 2px; }
.cms-tag-strip-caption { min-height: 24px; padding: 2px 6px; border: 0; border-radius: 4px; background: none; font: inherit; font-size: 0.75rem; color: #555B6E; cursor: pointer; }
.cms-tag-strip-item-on .cms-tag-strip-caption { color: #2E2E9A; font-weight: 600; }
.cms-tag-muted { color: #555B6E; }
.cms-tag-review-selected td { background: #EEEFFD; }
.cms-tag-review-selected td:first-child { box-shadow: inset 3px 0 0 #4F4FCB; }
.cms-tag-review-warning td { background: #FFF8E6; }
.cms-tag-review-warning .cms-tag-cell-row { color: #975A00; }
.cms-tag-cell-input { width: 100%; box-sizing: border-box; height: 32px; border: 1px solid #D0D5DD; border-radius: 6px; padding: 0 8px; font: inherit; color: #0F1222; background: #FFFFFF; }
.cms-tag-cell-input:focus, .cms-tag-cell-focus { border-color: #4F4FCB; outline: 0; }
.cms-tag-cell-name .cms-tag-cell-input { width: 120px; }
.cms-tag-money { display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; width: 120px; height: 32px; padding: 0 8px; border: 1px solid #D0D5DD; border-radius: 6px; background: #FFFFFF; cursor: text; }
.cms-tag-money:focus-within { border-color: #4F4FCB; }
.cms-tag-money-unit { color: #555B6E; user-select: none; }
.cms-tag-money input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; color: #0F1222; text-align: right; font-variant-numeric: tabular-nums; }
.cms-tag-cell-input.cms-tag-cell-warning, .cms-tag-money.cms-tag-cell-warning { border-color: #B26A00; }
.cms-tag-row-warning { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; }
.cms-tag-cell-price .cms-tag-row-warning { display: flex; justify-content: flex-end; margin-top: 2px; font-size: 0.75rem; }
.cms-tag-row-warning .cms-tag-warning-icon.mud-icon-root { margin: 0; color: #B26A00; }
.cms-tag-stepper { display: inline-flex; align-items: center; border: 1px solid #D0D5DD; border-radius: 6px; background: #FFFFFF; }
.cms-tag-stepper button { width: 28px; height: 28px; border: 0; background: none; color: #343849; font: inherit; font-size: 1rem; cursor: pointer; }
.cms-tag-stepper button:disabled { color: #B3B8C5; cursor: default; }
.cms-tag-stepper > span { min-width: 24px; text-align: center; }
.cms-tag-bin { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 0; border-radius: 6px; background: none; color: #C62A2F; font: inherit; cursor: pointer; }
.cms-tag-bin .mud-icon-root { font-size: 18px; color: #C62A2F; }
.cms-tag-bin:hover { background: #FDECEC; }
.cms-tag-bin-label { display: none; }
.cms-tag-fix-side { flex: 1 1 280px; min-width: 0; box-sizing: border-box; padding: 16px; border-radius: 8px; background: #ECEEF3; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cms-tag-fix-side .cms-tag-live { width: 100%; min-height: 0; padding: 0; background: transparent; }
.cms-tag-fix-side .cms-tag-live .cms-tag { zoom: 1.6; } /* a set size, a little over the mockup's 1.3, not the fill */
.cms-tag-fix-side-head { align-self: flex-start; font-size: 0.75rem; font-weight: 600; color: #555B6E; }
.cms-tag-fix-side-note { margin: 0; font-size: 0.75rem; color: #555B6E; text-align: center; }
.cms-tag-fix-hint { display: none; }
.cms-tag-fix-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.cms-tag-fix-total { flex: 1 1 auto; color: #0F1222; }
@media (max-width: 599.98px) {
    .cms-tag-page { padding: 12px; }
    .cms-tag-manual-fields { grid-template-columns: minmax(0, 1fr); }
    .cms-tag-two-pane { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .cms-tag-live-pane { order: -1; }
    .cms-tag-live { min-height: 0; padding: 16px 8px; }
    /* The code box's height and middle: its dense margins are 8 px above, 4 px below. */
    .cms-tag-search-row .cms-tag-search-icon { flex: 0 0 40px; width: 40px; height: 40px; margin-top: 4px; border-radius: 8px; }
    .cms-tag-live-actions.cms-mobile-bar { flex-wrap: wrap; }
    .cms-tag-live-actions.cms-mobile-bar > .cms-tag-copies { flex: 1 0 100%; justify-content: center; gap: 12px; margin-right: 0; }
    .cms-tag-live-actions.cms-mobile-bar .cms-tag-copies .mud-button-root { width: 44px; min-width: 44px; min-height: 44px; }
    .cms-tag-live-actions.cms-mobile-bar > .cms-tag-clear-icon { flex: 0 0 48px; width: 48px; min-height: 44px; }
    .cms-page:has(.cms-tag-live-actions) { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
    .cms-tag-buttons > .mud-button-root { flex: 1 1 auto; }
    .cms-tag-review-scroll { max-height: none; border: 0; }
    .cms-tag-review thead { display: none; }
    .cms-tag-review tr { display: block; padding: 8px 0; border-bottom: 1px solid #E8EAEF; }
    .cms-tag-review td { display: flex; gap: 8px; padding: 2px 4px; border: 0; }
    .cms-tag-review td::before { content: attr(data-label); flex: 0 0 92px; color: #5C6275; font-weight: 600; }
    /* From Excel on a phone (mockup "A · Fix in place, phone"): each row the code, description and price beside its copies,
       rows to fix first; the selected row's fields and Remove row open in it. */
    .cms-tag-review tbody { display: flex; flex-direction: column; }
    /* Measured against the mockup (2026-11-04): rows run to the card's edges, content 16 px from the screen's edge each side
       (card 7 px + 9 px), an 82 px row: code 17, description 17, price 19, 2 px apart, 12 px above and below. */
    .cms-tag-fix > .cms-tag-review-scroll { margin: 0 -12px; }
    .cms-tag-review tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 12px 9px; border-top: 0; border-bottom: 1px solid #E3E5EA; }
    .cms-tag-review tbody tr.cms-tag-review-warning { order: -1; background: #FFF8E6; }
    /* A phone edits a row in its form (TagRowDialog), never in the list. */
    .cms-tag-review .cms-tag-cell-edit { display: none; }
    .cms-tag-review .cms-tag-review-selected .cms-tag-cell-view { display: inline; }
    .cms-tag-review tbody td, .cms-tag-review-selected td, .cms-tag-review-warning td { display: block; grid-column: 1; padding: 0; background: none; box-shadow: none; text-align: left; }
    .cms-tag-review td::before { content: none; }
    .cms-tag-review .cms-tag-cell-row { display: none; }
    .cms-tag-review .cms-tag-cell-desc { font-size: 0.8125rem; line-height: 17px; color: #555B6E; }
    .cms-tag-review .cms-tag-cell-name, .cms-tag-review .cms-tag-cell-code { line-height: 17px; }
    .cms-tag-review .cms-tag-cell-price { line-height: 19px; }
    .cms-tag-review .cms-tag-num { text-align: left; }
    .cms-tag-review .cms-tag-cell-copies { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
    .cms-tag-review .cms-tag-cell-note { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4px; }
    .cms-tag-cell-price .cms-tag-row-warning { justify-content: flex-start; }
    .cms-tag-review .cms-tag-cell-remove { display: none; grid-column: 1 / -1; width: auto; padding: 0; margin-top: 6px; }
    .cms-tag-bin-label { display: inline; font-weight: 500; }
    .cms-tag-bin { min-height: 44px; padding: 0 4px; }
    .cms-tag-review .cms-tag-cell-input, .cms-tag-cell-name .cms-tag-cell-input, .cms-tag-money { width: 100%; height: 44px; margin-top: 4px; font-size: 16px; text-align: left; }
    .cms-tag-money input { font-size: 16px; text-align: left; }
    .cms-tag-stepper button { width: 44px; height: 44px; font-size: 1.125rem; font-weight: 500; color: #0F1222; }
    .cms-tag-fix-hint { display: block; margin: 12px 0 0; font-size: 0.75rem; color: #555B6E; }
    /* A row to fix reads as the mockup: "Row 5 needs a name for its barcode", its description, then the name field; no price
       line. The file line is the name with Replace beside it, ready and to-fix under them. */
    .cms-tag-note-wide { display: none; }
    .cms-tag-note-phone { display: inline; }
    .cms-tag-review-head > .cms-tag-file-icon { order: 1; }
    .cms-tag-review-head > .cms-tag-review-file { order: 2; }
    .cms-tag-review-head > .cms-tag-review-head-gap { order: 3; }
    .cms-tag-review-head > .cms-tag-replace { order: 4; }
    .cms-tag-review-head > .cms-tag-head-break { order: 5; display: block; flex: 1 0 100%; height: 0; }
    .cms-tag-review-head > .cms-tag-state { order: 6; }
    .cms-tag-review-head > .cms-tag-review-count { display: none; }
    .cms-tag-replace.mud-button-root { height: 32px; min-width: 0; padding: 0 4px; border: 0; background: none; color: #4F4FCB; font-weight: 600; }
    .cms-tag-strip { padding: 12px; gap: 12px; }
    .cms-tag-edited { display: inline; font-size: 0.75rem; color: #555B6E; }
    .cms-tag-review tr[data-prints="false"] .cms-tag-cell-desc { grid-row: 2; font-size: 0.875rem; color: #0F1222; }
    .cms-tag-review tr[data-prints="false"] .cms-tag-cell-name { grid-row: 3; }
    .cms-tag-review tr[data-prints="false"] .cms-tag-cell-price { display: none; }
    .cms-tag-review tr[data-prints="false"] .cms-tag-cell-remove { grid-row: 4; }
    .cms-tag-fix-actions.cms-mobile-bar { flex-wrap: wrap; }
    .cms-tag-fix-actions.cms-mobile-bar > .cms-tag-fix-total { flex: 1 0 100%; font-size: 0.8125rem; }
}
html.cms-dark .cms-tag-heading, html.cms-dark .cms-tag-found dd, html.cms-dark .cms-tag-review-file { color: #E8E9F5; }
html.cms-dark .cms-tag-found dt, html.cms-dark .cms-tag-reading { color: #A3A7C6; }
html.cms-dark .cms-tag-manual-item legend { color: #D2D4E8; }
html.cms-dark .cms-tag-result { background: #17192D; border-color: #2C3050; }
html.cms-dark .cms-tag-live { background: #0B0C16; }
html.cms-dark .cms-tag-copies-label { color: #A3A7C6; }
html.cms-dark .cms-tag-copies-count { color: #E8E9F5; }
html.cms-dark .cms-tag-error { color: #F2A0A3; }
html.cms-dark .cms-tag-chip-warning { background: #3A2A0E; color: #FFD995; border-color: #6A4D17; }
html.cms-dark .cms-tag-warning, html.cms-dark .cms-tag-warning .cms-tag-warning-icon { color: #F5BE55; }
html.cms-dark .cms-tag-workbook-errors { background: #3A1B22; color: #F6C9CB; }
html.cms-dark .cms-tag-review-scroll { border-color: #2C3050; }
html.cms-dark .cms-tag-review thead th { background: #1C1F36; }
html.cms-dark .cms-tag-review-warning td { background: #2E2410; }
html.cms-dark .cms-tag-state-ready { color: #6CCB9A; }
html.cms-dark .cms-tag-state-fix { color: #F5BE55; }
html.cms-dark .cms-tag-state-fix::before { background: #F5BE55; }
html.cms-dark .cms-tag-file-icon.mud-icon-root, html.cms-dark .cms-tag-review-count, html.cms-dark .cms-tag-muted { color: #A3A7C6; }
html.cms-dark .cms-tag-review { color: #E8E9F5; }
html.cms-dark .cms-tag-review thead th { color: #A3A7C6; }
html.cms-dark .cms-tag-review tbody tr { border-color: #2C3050; }
html.cms-dark .cms-tag-review .cms-tag-cell-row { color: #A3A7C6; }
html.cms-dark .cms-tag-review-selected td { background: #26284A; }
html.cms-dark .cms-tag-review-selected td:first-child { box-shadow: inset 3px 0 0 #A5A4FA; }
html.cms-dark .cms-tag-review-warning .cms-tag-cell-row { color: #F5BE55; }
html.cms-dark .cms-tag-cell-input { background: #17192D; border-color: #3A3F63; color: #E8E9F5; }
html.cms-dark .cms-tag-cell-input:focus, html.cms-dark .cms-tag-cell-focus { border-color: #A5A4FA; }
html.cms-dark .cms-tag-cell-input.cms-tag-cell-warning, html.cms-dark .cms-tag-money.cms-tag-cell-warning { border-color: #F5BE55; }
html.cms-dark .cms-tag-money { background: #17192D; border-color: #3A3F63; }
html.cms-dark .cms-tag-money:focus-within { border-color: #A5A4FA; }
html.cms-dark .cms-tag-money-unit { color: #A3A7C6; }
html.cms-dark .cms-tag-money input { color: #E8E9F5; }
html.cms-dark .cms-tag-row-warning .cms-tag-warning-icon.mud-icon-root { color: #F5BE55; }
html.cms-dark .cms-tag-stepper { background: #17192D; border-color: #3A3F63; }
html.cms-dark .cms-tag-stepper button { color: #D2D4E8; }
html.cms-dark .cms-tag-stepper button:disabled { color: #4A4F72; }
html.cms-dark .cms-tag-bin, html.cms-dark .cms-tag-bin .mud-icon-root { color: #FF7A85; }
html.cms-dark .cms-tag-bin:hover { background: #3A1B22; }
html.cms-dark .cms-tag-fix-side { background: #0B0C16; }
html.cms-dark .cms-tag-fix-side-head, html.cms-dark .cms-tag-fix-side-note, html.cms-dark .cms-tag-fix-hint { color: #A3A7C6; }
html.cms-dark .cms-tag-fix-total { color: #E8E9F5; }
html.cms-dark .cms-tag-strip { background: #0B0C16; }
html.cms-dark .cms-tag-strip-head, html.cms-dark .cms-tag-strip-caption { color: #A3A7C6; }
html.cms-dark .cms-tag-strip-item-on .cms-tag { outline-color: #A5A4FA; }
html.cms-dark .cms-tag-strip-item-on .cms-tag-strip-caption { color: #C9C8FF; }
@media (max-width: 599.98px) {
    html.cms-dark .cms-tag-review tbody tr { border-bottom-color: #2C3050; }
    html.cms-dark .cms-tag-review tbody tr.cms-tag-review-warning { background: #2E2410; }
    html.cms-dark .cms-tag-review-selected td { background: none; box-shadow: none; }
    html.cms-dark .cms-tag-review .cms-tag-cell-desc { color: #A3A7C6; }
    html.cms-dark .cms-tag-review tr[data-prints="false"] .cms-tag-cell-desc { color: #E8E9F5; }
    html.cms-dark .cms-tag-edited { color: #A3A7C6; }
    html.cms-dark .cms-tag-replace.mud-button-root { color: #A5A4FA; }
}
@media (max-width: 599.98px) { html.cms-dark .cms-tag-review tr { border-bottom-color: #2C3050; } html.cms-dark .cms-tag-review td::before { color: #A3A7C6; } }

/* The tags as they print: a toolbar off paper, then each tag on its own 56 × 32 mm page (the inline @page sets the size). */
.cms-tags-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cms-tags-toolbar-text { flex: 1 1 auto; display: inline-flex; align-items: baseline; gap: 8px; color: #0F1222; font-size: 0.875rem; }
.cms-tags-toolbar .mud-button-filled { order: 1; }
.cms-tags-note { margin-bottom: 12px; }
.cms-tags-skipped { margin: 4px 0 0; padding-left: 20px; }
.cms-tags { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; border-radius: 8px; background: #ECEEF3; }
.cms-tags-none p { margin: 8px 0; }
.cms-tags-pager { display: inline-flex; align-items: center; gap: 8px; }
.cms-tags-pager-text { min-width: 64px; text-align: center; font-size: 0.875rem; color: #343849; }
html.cms-dark .cms-tags-pager-text { color: #D2D4E8; }
@media (min-width: 600px) {
    .cms-tags-fit { box-sizing: border-box; min-height: var(--cms-tags-height, auto); align-items: center; justify-content: center; }
    .cms-tags-fit .cms-tag { zoom: var(--cms-tag-zoom, 1); }
}
@media (max-width: 599.98px) { .cms-tags-toolbar .cms-tags-toolbar-text { display: none; } .cms-tags { justify-content: center; padding: 12px; } }
html.cms-dark .cms-tags-toolbar-text { color: #E8E9F5; }
html.cms-dark .cms-tags { background: #0B0C16; }
.cms-tag { box-sizing: border-box; flex: none; width: 56mm; height: 32mm; overflow: hidden; display: flex; flex-direction: column; align-items: center;
    background: #FFFFFF; color: #000000; box-shadow: 0 1px 3px rgba(15, 18, 34, .18); border-radius: 2px; line-height: 1.15; }
html.cms-dark .cms-tag { background: #FFFFFF; color: #000000; box-shadow: 0 0 0 1px #3A3F63; }
.cms-tag-single, .cms-tag-multi { padding: 0 2mm; }
.cms-tag-single { justify-content: flex-start; padding-top: 25pt; }
.cms-tag-multi { justify-content: center; }
.cms-tag-barcode { box-sizing: border-box; flex: none; width: 130pt; height: 25pt; padding: 1pt 0 1pt 4pt; }
.cms-tag-bars { display: block; width: 100%; height: 100%; }
.cms-tag-code { font-family: "Tag Detail", Georgia, serif; font-weight: 500; font-size: 7pt; white-space: nowrap; }
.cms-tag-title { max-width: 100%; max-height: calc(2 * 1.15 * 8pt); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-family: "Tag Bold", "Arial Narrow", sans-serif; font-weight: 700; font-size: 8pt; text-align: center; overflow-wrap: anywhere; }
.cms-tag-price { align-self: flex-end; font-family: "Tag Bold", "Arial Narrow", sans-serif; font-weight: 700; font-size: 9pt; white-space: nowrap; }
.cms-tag-manual { padding: calc(1mm + 20pt) 1mm 1mm; font-family: Helvetica, Arial, sans-serif; }
.cms-tag-manual-two { padding-top: calc(1mm + 17pt); justify-content: space-evenly; }
.cms-tag-manual:not(.cms-tag-manual-two) .cms-tag-line { flex: 1 1 auto; justify-content: center; }
.cms-tag-line { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cms-tag-line-price { font-size: 7pt; font-weight: 700; margin-bottom: 1pt; white-space: nowrap; }
.cms-tag-line-barcode { box-sizing: border-box; width: 100%; height: 28pt; padding: 0 12pt; }
.cms-tag-manual-two .cms-tag-line-barcode { height: 14pt; }
.cms-tag-line-code { max-width: 100%; margin-top: 1pt; padding: 0 4pt; font-size: 6.5pt; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.cms-tag-rule { flex: none; align-self: stretch; height: 0.5pt; margin: 0 12pt; background: #BDBDBD; }
@media print {
    .cms-tags-toolbar, .cms-tags-note, .cms-tag-work { display: none !important; }
    .mud-main-content, .cms-page, .cms-tags { padding: 0 !important; margin: 0 !important; gap: 0 !important; background: #fff !important; border-radius: 0 !important; }
    .cms-tags { display: block !important; min-height: 0 !important; }
    .cms-tags-print-job { display: block !important; }
    .cms-tag { zoom: 1 !important; box-shadow: none !important; border-radius: 0 !important; break-after: page; break-inside: avoid; }
    .cms-tag:last-child { break-after: auto; }
    html.cms-dark .cms-tags, html.cms-dark .cms-tag { background: #fff !important; color: #000 !important; }
}
/* Print tags on the device list (2026-11-03): tick devices, then print their tags together. */
.cms-tag-pick-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 12px 0; padding: 8px 12px; border-radius: 8px; background: #EEEFFD; color: #2E2E9A; font-size: 0.875rem; }
.cms-tag-pick-text { flex: 1 1 240px; }
.cms-tag-pick-cell { width: 44px; }
.cms-tag-pick { width: 18px; height: 18px; margin: 0; accent-color: #4F4FCB; cursor: pointer; vertical-align: middle; }
.cms-tag-pick:disabled { cursor: not-allowed; opacity: .45; }
.cms-employee-mobile-row.cms-tag-pick-row { flex-direction: row; align-items: center; gap: 12px; }
.cms-tag-pick-lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.cms-tag-pick-row:has(.cms-tag-pick:checked) { background: #F4F4FB; }
html.cms-dark .cms-tag-pick-bar { background: #26284A; color: #E8E9F5; }
html.cms-dark .cms-tag-pick { accent-color: #A5A4FA; }
html.cms-dark .cms-tag-pick-row:has(.cms-tag-pick:checked) { background: #1C1E33; }