/* PENDING THE FOUNDATIONS REVIEW (D-100). Layout foundation (R-208, 08 task 4); the one look (R-271 row 2).
   Direction-neutral (CSS logical properties) so it works LTR and RTL; NO fixed px layout widths
   (max-inline-size / min-inline-size / %, fr, rem only), so it renders at 1366, 390 and 360 px
   without the page scrolling sideways; wide tables scroll inside their own box, never the page.
   (Gate G23 forbids `width:<n>px`; gate G15 checks no page overflow at the three widths.)
   Every colour and the font come from theme.css (R-271 row 2; D-221), so the look changes from ONE file. */
@import "theme.css";

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-sans); line-height: 1.4; color: var(--color-text); background: var(--color-bg); }

/* R-271 row 2: the frame. .app holds the dark side menu beside the screen's content; on a phone the menu
   becomes a scrollable row of tabs above the content. No fixed-px widths (G23); logical properties so it
   mirrors correctly in RTL; the menu text stays readable on the dark fill both ways. */
.app { max-inline-size: 80rem; margin-inline: auto; display: flex; flex-direction: column; gap: 0; }

.frame-menu { background: var(--color-menu-bg); color: var(--color-menu-text); display: flex; flex-direction: row; overflow-x: auto; }
.frame-menu-item { display: block; padding-block: 0.75rem; padding-inline: 1rem; color: var(--color-menu-text); text-decoration: none; white-space: nowrap; border-block-end: 3px solid transparent; min-block-size: 2.75rem; }
.frame-menu-item:hover { color: var(--color-on-dark); background: var(--color-menu-current-bg); }
.frame-menu-item.current { color: var(--color-menu-current-text); background: var(--color-menu-current-bg); border-block-end-color: var(--color-accent); font-weight: 600; }
.frame-main { flex: 1 1 auto; min-inline-size: 0; padding-inline: 1rem; }
.frame-search { display: flex; flex: 1 1 14rem; justify-content: flex-end; min-inline-size: 0; }
.frame-search-input { inline-size: 100%; max-inline-size: 24rem; padding-block: 0.5rem; padding-inline: 0.75rem; min-block-size: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; }

@media (min-width: 48rem) {
  .app { flex-direction: row; }
  .frame-menu { flex-direction: column; overflow-x: visible; flex: 0 0 13rem; padding-block: 1rem; }
  .frame-menu-item { border-block-end: 0; border-inline-start: 3px solid transparent; }
  .frame-menu-item.current { border-block-end: 0; border-inline-start-color: var(--color-accent); }
}

.appbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding-block: 1rem; }
.brand { font-weight: 700; }
.mainnav { display: flex; flex-wrap: wrap; gap: 0.5rem; }

button { padding-block: 0.5rem; padding-inline: 1rem; font: inherit; cursor: pointer; }

main { padding-block: 1rem; }

/* The one table component: it scrolls inside its own box, so a wide table never makes the page
   scroll sideways. The inner table is deliberately wider than a phone (min-inline-size in rem). */
.table-scroll { overflow-x: auto; max-inline-size: 100%; }
table { border-collapse: collapse; min-inline-size: 60rem; }
th, td { text-align: start; padding-inline: 0.75rem; padding-block: 0.4rem; border-block-end: 1px solid var(--color-border); white-space: nowrap; }
.empty { text-align: center; color: var(--color-text-muted); white-space: normal; }

/* D-336 (c): the not-active banner (web/not-active.js), shown when the company is suspended, closed,
   archived or cut off. No fixed px width — the inline size follows its container; logical properties for
   RTL. Write controls ([data-write]) are disabled alongside it. */
.not-active-banner {
  margin-block: 0.75rem;
  padding-block: 0.6rem;
  padding-inline: 1rem;
  border: 1px solid var(--color-banner-border);
  border-radius: 0.25rem;
  background: var(--color-banner-bg);
  color: var(--color-banner-text);
}
[data-write]:disabled, [data-write][aria-disabled="true"] { opacity: 0.5; }

@media (max-width: 30rem) { .app { padding-inline: 0.5rem; } }

/* R-271 rows 5 / 6 / 12: the shell's own fixed UI — the save state, the no-connection banner, the discard
   strip and the keyboard-shortcuts panel. Theme tokens only, no fixed px (G23); logical properties for RTL. */
.shell-layer { position: fixed; inset-block-start: 0; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.5rem; pointer-events: none; z-index: 50; }
.shell-layer > *:not([hidden]) { pointer-events: auto; max-inline-size: 40rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; border-radius: 0.5rem; padding-block: 0.5rem; padding-inline: 0.75rem; }
.shell-conn { background: var(--color-note-bad-bg); color: var(--color-note-bad-text); border: 1px solid var(--color-note-bad-text); }
.shell-discard { background: var(--color-note-warn-bg); color: var(--color-banner-text); }
.shell-save { background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 0.9rem; border-radius: 1rem; }
.shell-save.saved { background: var(--color-note-ok-bg); color: var(--color-note-ok-text); }
.shell-save.error { background: var(--color-note-bad-bg); color: var(--color-note-bad-text); }
.shell-keys { display: block; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); max-block-size: 80vh; overflow: auto; }
.shell-keys h2 { font-size: 1.1rem; margin-block: 0 0.5rem; }
.shell-keys dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0; }
.shell-keys dt { font-variant-numeric: tabular-nums; font-weight: 700; }
.shell-keys dd { margin: 0; }
.shell-keys .muted { color: var(--color-text-muted); }
.shell-layer button { min-block-size: 2.25rem; border-radius: 0.4rem; }
.shell-go { background: var(--color-primary); color: var(--color-on-primary); border: 0; padding-inline: 1rem; } /* the discard strip's confirm; not a screen primary */