:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202b29; background: #f4f6f3; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
.tool { width: 100%; max-width: 500px; margin: 0 auto; padding: 32px 16px; }
header { margin: 0 0 26px; }
.eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: #52645b; }
h1 { font-size: 2.4rem; letter-spacing: -.05em; margin: 8px 0 2px; line-height: 1.15; }
.subtitle { margin: 8px 0 0; color: #53635b; font-size: 1rem; }
.panel { background: #fff; border: 1px solid #dce3dc; border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.status-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .875rem; }
.status-row + .status-row { border-top: 1px solid #edf0eb; padding-top: 16px; margin-top: 16px; }
.badge { padding: 5px 9px; border-radius: 6px; font-size: .75rem; }
.ok { background: #e3f2e8; color: #245a38; }
.neutral { background: #eef0ec; color: #535e55; }
.error { background: #fce9e6; color: #9a3025; }
.device { font-size: .85rem; margin: 16px 0 0; overflow-wrap: anywhere; }
label { display: block; font-size: .9rem; font-weight: 650; margin-bottom: 10px; }
textarea { width: 100%; resize: vertical; min-height: 104px; font: inherit; font-size: 1rem; line-height: 1.5; padding: 12px; border: 1px solid #9caea1; border-radius: 8px; color: inherit; background: #fcfdfb; }
.hint, footer { color: #566359; font-size: .78rem; line-height: 1.55; }
.hint { margin: 8px 0 20px; }
.actions { display: grid; gap: 10px; }
button { min-height: 50px; width: 100%; padding: 12px 16px; border-radius: 8px; font: inherit; font-weight: 650; cursor: pointer; border: 1px solid transparent; }
.primary { background: #245a3e; color: white; }
.primary:hover:enabled { background: #19442e; }
.print { background: #edf5ed; border-color: #b7cdbb; color: #245a3e; }
.secondary { background: white; color: #46544a; border-color: #cbd5cc; }
button:disabled { opacity: .48; cursor: not-allowed; }
:focus-visible { outline: 3px solid #b0641b; outline-offset: 3px; }
.feedback, .notice { font-size: .85rem; line-height: 1.55; overflow-wrap: anywhere; }
.feedback { margin: 16px 0 0; }
.notice { padding: 12px; border-left: 3px solid #b0641b; background: #fff4e5; }
h2 { font-size: .95rem; margin: 0 0 12px; }
.diagnostics ol { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow-y: auto; font-family: ui-monospace, Consolas, monospace; font-size: .72rem; line-height: 1.6; overflow-wrap: anywhere; }
.diagnostics li + li { margin-top: 8px; padding-top: 8px; border-top: 1px solid #edf0eb; }
footer { padding: 0 8px; text-align: center; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; padding: 16px; width: 100%; background: #fff4e5; color: #732c1e; }
@media (max-width: 360px) { .panel { padding: 16px; } .tool { padding: 24px 12px; } }

body:has(.printer-overlay) { overflow: hidden; }
.printer-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgb(20 32 25 / 65%); overflow-y: auto; }
.printer-modal { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; padding: 24px; border-radius: 14px; background: #fff; color: #202b29; box-shadow: 0 16px 48px rgb(0 0 0 / 20%); overflow-wrap: anywhere; }
.printer-modal h2 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 12px; }
.printer-modal > p { font-size: 1rem; line-height: 1.5; margin: 0 0 24px; }
.printer-modal button { min-height: 56px; }

/* Authentication and Master screens share the operational palette and controls. */
.auth-page { padding-top: clamp(32px, 10vh, 100px); }
.auth-page h1, .master-page h1 { letter-spacing: -.03em; margin-bottom: 24px; }
.auth-page form { margin-top: 32px; }
.auth-page input, .master-page input:not([type=checkbox]), .master-page select { width: 100%; min-height: 48px; padding: 12px; border: 1px solid #9caea1; border-radius: 8px; font: inherit; color: inherit; background: #fff; margin-bottom: 20px; }
.auth-page input { caret-color: #245a3e; }
.master-page { max-width: 800px; }
.master-page > button, .company-choice { margin-block: 8px; }
.account-bar { max-width: 1100px; margin: 0 auto; padding: 12px 16px; font-size: .85rem; overflow-wrap: anywhere; }
.account-bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 8px; }
.account-bar a, .master-page a { color: #245a3e; text-underline-offset: .2em; }
.account-bar button { width: auto; min-height: 44px; padding: 8px 14px; }
.master-list { margin-top: 24px; }
.master-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #dce3dc; overflow-wrap: anywhere; }
.master-row > div { min-width: 0; }
.master-row p { font-size: .875rem; margin: 6px 0 0; }
.master-row button { width: auto; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.check-label { display: flex; align-items: center; gap: 10px; margin-block: 8px 24px; }
.check-label input { width: 22px; height: 22px; accent-color: #245a3e; }
.master-page .admin-overlay { position: fixed; inset: 0; z-index: 1100; background: rgb(20 32 25 / 65%); padding: 16px; display: grid; place-items: center; overflow-y: auto; }
.master-page .admin-dialog { width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto; background: #fff; padding: 24px; border-radius: 14px; }
.master-page .admin-dialog h2 { font-size: 1.35rem; margin-bottom: 24px; }
.master-page .admin-actions { display: flex; gap: 12px; margin-top: 24px; }
@media (max-width: 480px) { .master-row { align-items: flex-start; flex-direction: column; gap: 12px; } }

/* Keep focused controls clear of the fixed operational navigation. */
html:has(.app-frame) { scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
html:has(.with-bottom-navigation) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }