/* Shared web shell; native controls work without JavaScript. */
:root {
    font-family: system-ui, sans-serif;
    color: #17332e;
    background: #f7faf9;
    line-height: 1.5;
    accent-color: #165c4d;
}
body { margin: 0; }
header, main { padding: 1.5rem; }
header, nav, [data-testid="language-switcher"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
header { justify-content: space-between; border-block-end: 1px solid #bacbc5; }
main { max-inline-size: 65ch; margin-inline: auto; overflow-wrap: anywhere; }
h1 { line-height: 1.2; text-wrap: balance; }
a { color: #165c4d; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; padding: 0.6rem 0.8rem; min-block-size: 44px; box-sizing: border-box; }
button { background: #165c4d; color: #fff; border: 1px solid #165c4d; border-radius: 4px; cursor: pointer; }
button:hover { background: #104538; }
input, select { color: inherit; background: #fff; border: 1px solid #607a70; border-radius: 4px; max-inline-size: 100%; }
:focus-visible { outline: 3px solid #286da8; outline-offset: 3px; }
::selection { background: #cce6dc; color: #17332e; }
input { caret-color: #165c4d; }
.login-form { display: grid; gap: 0.75rem; }
.login-form button { margin-block-start: 0.75rem; justify-self: start; }
dt { font-weight: 600; margin-block-start: 1rem; }
dd { margin-inline-start: 0; }
[role="alert"] { color: #9f2222; }

/* Organization admin (E1.1). Server-rendered forms; the hall preview is a table because a CSS
   grid would need inline placement styles, which the CSP forbids. */
.organization { max-inline-size: 80ch; }
.subnav { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-end: 1rem; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flash { padding: 0.75rem 1rem; border-radius: 4px; border: 1px solid; }
.flash-error { background: #fdecec; border-color: #9f2222; }
.flash-success { color: #104538; background: #e6f3ee; border-color: #165c4d; }
.entity-list { padding-inline-start: 0; list-style: none; display: grid; gap: 0.5rem; }
.entity-list li { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; }
.stacked-form { display: grid; gap: 0.5rem; margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 1px solid #bacbc5; }
.stacked-form button { justify-self: start; }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.field-help { margin: 0; font-size: 0.9rem; color: #47655d; }
.button-danger { background: #9f2222; border-color: #9f2222; }
.button-danger:hover { background: #7a1919; }
.data-table { border-collapse: collapse; inline-size: 100%; margin-block: 1rem; }
.data-table th, .data-table td { text-align: start; padding: 0.5rem; border-block-end: 1px solid #bacbc5; }
.data-table caption { text-align: start; font-weight: 600; padding-block: 0.5rem; }
.hall-grid { border-collapse: separate; border-spacing: 0.5rem; margin-block: 1rem; }
.hall-grid caption { text-align: start; font-weight: 600; }
.hall-grid td { min-inline-size: 5.5rem; block-size: 4.5rem; text-align: center; vertical-align: middle; border-radius: 6px; }
.hall-tank { border: 2px solid #165c4d; background: #fff; }
.hall-tank a { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.hall-tank-occupied { background: #e6f3ee; }
.hall-orientation { display: block; line-height: 1; }
.hall-batch { display: block; font-size: 0.85rem; color: #47655d; }
.hall-cell-empty { border: 2px dashed #bacbc5; }
.hall-entrance { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; border-block-start: 3px solid #17332e; }