/* MezaDDS application screens (D-82): layout, forms, tables, dashboard. Tokens only. */
main { max-width: var(--w-app); margin: 0 auto; padding: 0 var(--s-4) var(--s-8); }
h1, h2, h3, p, li, .flash { overflow-wrap: break-word; }  /* a long file name must not widen the page (WCAG 1.4.10) */

/* the demo banner sits above the top bar, full width */
.demo-banner { margin: 0; text-align: center; }

/* forms */
.field { margin: var(--s-4) 0; max-width: 34rem; }
.field label { display: block; font-weight: 600; margin-bottom: var(--s-1); }
.field.check { display: flex; gap: var(--s-2); align-items: flex-start; }
.field.check label { font-weight: 400; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=search],
input[type=file], select, textarea { width: 100%; font: inherit; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--muted); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--err); border-width: 2px; }
.field-error { color: var(--err); font-weight: 600; margin: var(--s-1) 0 0; }
.req { color: var(--err); }
.errors { background: var(--err-bg); border-left: 5px solid var(--err); padding: var(--s-3) var(--s-4); margin: var(--s-4) 0;
  border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm); }
.errors:focus { outline: 3px solid var(--err); outline-offset: 2px; }
.errors h2 { margin: 0 0 var(--s-1); font-size: var(--t-lg); }
.errors ul { margin: 0; padding-left: var(--s-5); }
details { margin: var(--s-3) 0; }
summary { cursor: pointer; font-weight: 600; }

/* tables */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); margin: var(--s-3) 0;
  /* scroll shadows (no script): a soft edge shows on a side while there is more to scroll to that side */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 2rem 100% no-repeat local,
    linear-gradient(to right, var(--muted), transparent) left center / 0.6rem 100% no-repeat scroll,
    linear-gradient(to left, var(--muted), transparent) right center / 0.6rem 100% no-repeat scroll,
    var(--surface);
}
table { border-collapse: collapse; width: 100%; margin: 0; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; padding: var(--s-2) var(--s-3); }
th, td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--panel); font-size: var(--t-sm); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.sev { font-weight: 700; padding: 0 var(--s-2); border-radius: var(--r-sm); }
.sev.error { background: var(--err-bg); color: var(--err); }
.sev.warning { background: var(--warn-bg); color: var(--warn); }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); }
dl.facts dt { font-weight: 600; }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }

/* start page: tiles and shortcuts */
.cards, .shortcuts { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.cards li, .shortcuts li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--s-4) var(--s-5); }
.shortcuts a { font-weight: 600; text-decoration: none; }
.tile { display: flex; flex-direction: column; gap: var(--s-1); }
.tile .count { font-size: var(--t-4xl); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tile a { color: var(--fg); text-decoration: none; font-weight: 600; }
.tile a:hover { color: var(--accent); text-decoration: underline; }
.tile.attention { border-color: var(--warn); background: var(--warn-bg); }
.tile.calm .count { color: var(--muted); }
.lead { font-size: var(--t-lg); color: var(--muted); margin: 0 0 var(--s-4); }
.start { margin: var(--s-4) 0; }
.start h2 { margin-top: 0; }

@media (max-width: 40rem) { dl.facts { grid-template-columns: 1fr; } .tools { margin-left: 0; } }

/* login */
body.auth { background: linear-gradient(180deg, var(--hero-from), var(--hero-to)); min-height: 100vh; }
body.auth main { max-width: 30rem; padding-top: var(--s-6); }
.login { padding: var(--s-5) var(--s-5) var(--s-6); box-shadow: var(--sh-3); }
.login h1 { margin-top: 0; }
.login .field { max-width: none; }
button.large { padding: var(--s-3) var(--s-5); font-size: var(--t-lg); border-radius: var(--r-lg); width: 100%; }

/* step 15: page head, tables, alerts, stepper, empty states, filters, forms (D-95 to D-99) */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin: var(--s-5) 0 var(--s-3); }
.page-head h1 { margin: 0; }
.page-head .lead { margin: var(--s-1) 0 0; }
.page-head .actions { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
tbody tr:hover { background: var(--panel); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.alert-prefix { font-weight: 700; }
.stepper { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: 0; margin: var(--s-3) 0 var(--s-5); }
.stepper li { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); }
.stepper .n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--r-pill); border: 1px solid var(--muted); font-size: var(--t-sm); font-weight: 600; }
.stepper li.current { color: var(--fg); font-weight: 700; }
.stepper li.current .n { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.stepper li.done { color: var(--fg); }
.stepper li.done .n { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin: var(--s-3) 0; }
.filters .field { margin: 0; max-width: 16rem; flex: 1 1 12rem; }
.filters button, .filters .button { align-self: flex-end; }
form[role=search] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); margin: var(--s-3) 0; }
form[role=search] .field { margin: 0; max-width: 24rem; flex: 1 1 14rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-3) var(--s-5) var(--s-4); margin: var(--s-4) 0; background: var(--surface); }
legend { font-weight: 700; padding: 0 var(--s-2); }
.form-grid { display: grid; gap: 0 var(--s-5); }
@media (min-width: 56rem) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .field { max-width: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0; }
.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; }
.section h2 { margin-top: 0; }
dl.facts { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); box-shadow: var(--sh-1); }
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2) var(--s-4); }
details[open] > summary { margin-bottom: var(--s-2); }
input::file-selector-button { font: inherit; font-weight: 600; margin-right: var(--s-3); padding: var(--s-1) var(--s-3); border: 1px solid var(--muted); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); cursor: pointer; }
.pager { display: flex; gap: var(--s-4); margin: var(--s-3) 0; }

/* print (D-100): the content on white, without the menu, buttons and forms; useful for a mandate, a batch and the audit log */
@media print {
  :root, :root[data-theme] { color-scheme: light; }  /* paper is white even if the visitor chose the dark theme (D-133) */
  body, body.auth { background: Canvas; color: CanvasText; }
  .rail { display: none !important; }
  html[data-layout] .shell { display: block; }
  h1, h2, h3, p, li, td, th, dt, dd, caption, legend, a, strong, span, code, .badge, .flash, .errors, .draft { color: CanvasText !important; background: transparent !important; }  /* paper is white: never print the dark theme's pale text */
  header.top, .skip, .actions, form, button, .button, .stepper { display: none !important; }
  details > *:not(summary) { display: block; }
  main { max-width: none; padding: 0; }
  .section, dl.facts, .table-wrap, .card { box-shadow: none; border-color: var(--muted); }
  .table-wrap { overflow: visible; }
  tr, .section { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* menu placement and theme switch (D-133). The visitor's choice is an attribute on <html> (data-layout, data-theme) set from one cookie. */
.shell { max-width: var(--w-app); margin: 0 auto; }
.shell > main { max-width: none; margin: 0; }
html[data-layout="rail"] .shell { max-width: 90rem; display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); align-items: start; }
html[data-layout="rail"] .shell > main { max-width: var(--w-app); padding-left: var(--s-5); }
html[data-layout="top"] .shell > main { margin: 0 auto; }
.rail { padding: var(--s-4) var(--s-3) var(--s-6) var(--s-4); border-right: 1px solid var(--line); min-height: 60vh; background: var(--panel); }
.rail ul { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: block; }
.rail a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); width: 100%; border-radius: var(--r-md); padding: var(--s-2) var(--s-3); }
.rail-group { margin: var(--s-4) 0 var(--s-1) var(--s-3); font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.count-badge { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); border-radius: var(--r-pill); padding: 0 var(--s-2); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 60rem) {
  html[data-layout="rail"] .shell { display: block; }
  html[data-layout="rail"] .shell > main { padding-left: var(--s-4); }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: var(--s-2) var(--s-4); }
  .rail ul { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; }
  .rail a { width: auto; }
  .rail-group { display: none; }
}
.topnav details.menu { margin: 0; position: relative; }
.topnav details.menu > summary { list-style: none; cursor: pointer; font-weight: 400; font-size: var(--t-sm); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); }
.topnav details.menu > summary::-webkit-details-marker { display: none; }
.topnav details.menu > summary::after { content: " \25BE"; }
.topnav details.menu > summary:hover, .topnav details.menu[open] > summary { background: var(--panel); }
.topnav details.menu > ul { position: absolute; z-index: 20; top: 100%; left: 0; min-width: 14rem; display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh-2); padding: var(--s-1); margin-top: var(--s-1); }
.topnav details.menu > ul a { display: block; border-radius: var(--r-sm); }
.prefs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.seg button { font: inherit; font-size: var(--t-xs); background: transparent; color: var(--muted); border: 0; border-radius: 0; padding: var(--s-1) var(--s-3); cursor: pointer; font-weight: 400; }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.seg button:hover { background: var(--panel); }
.seg button[aria-pressed="true"]:hover { background: var(--accent-soft); }
.topnav details.menu { border: 0; background: none; padding: 0; box-shadow: none; }
.topnav details.menu > summary { display: inline-block; }
.topnav details.menu[open] > ul { margin-top: 0; }
.topnav details.menu[open] > summary { margin-bottom: 0; }
.topnav details.menu { margin: 0; }