/* ACCESS — Clearing Desk
   Night-shift treasury clearing: charcoal rail, cool paper workspace,
   electric amber as the sole live signal. Local fonts only. Logical CSS for RTL. */

:root {
  --rail-deep: #0a0e14;
  --rail: #121821;
  --rail-line: rgba(255, 255, 255, .08);
  --rail-text: #c5ced9;
  --rail-muted: rgba(197, 206, 217, .55);

  --paper: #f3f5f8;
  --paper-deep: #e8ecf1;
  --surface: #ffffff;
  --ink: #10141c;
  --ink-soft: #1c2430;
  --muted: #5a6573;
  --line: #d4dae3;
  --line-strong: #b0b9c6;

  --amber: #f5a524;
  --amber-bright: #ffb84a;
  --amber-soft: #fff4e0;
  --amber-ink: #7a4a00;

  --ok: #1b7a3d;
  --ok-soft: #e6f5eb;
  --ok-line: #9dceb0;
  --danger: #c02828;
  --danger-soft: #fdeaea;
  --danger-line: #e8a8a8;
  --cancelled: #6b7583;
  --cancelled-soft: #eef1f4;

  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 0 rgba(16, 20, 28, .04), 0 8px 22px rgba(16, 20, 28, .07);
  --sidebar: 15.25rem;
  --content: 78rem;
  --control-h: 2.35rem;

  --font-chrome: Bahnschrift, "Franklin Gothic Medium", "Segoe UI", Tahoma, sans-serif;
  --font-body: "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;
  --font-data: "Cascadia Mono", Consolas, "Courier New", monospace;

  /* Back-compat aliases used by legacy rules */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--amber);
  --accent-fg: #141008;
  --warn: var(--amber-ink);
  --gap: .75rem;
  --panel: var(--surface);
  --panel-raised: var(--surface);
  --text: var(--ink);
  --granted: var(--ok);
  --granted-soft: var(--ok-soft);
  --rejected: var(--danger);
  --rejected-soft: var(--danger-soft);
  --pending: var(--amber-ink);
  --pending-soft: var(--amber-soft);
  --teal: var(--amber);
  --teal-bright: var(--amber-bright);
  --teal-soft: var(--amber-soft);
  --ink-line: var(--rail-line);
  --canvas: var(--paper);
  --canvas-deep: var(--paper-deep);
}

* { box-sizing: border-box; }

html {
  color-scheme: light;
  font-size: 16px;
}

body {
  margin: 0;
  min-inline-size: 20rem;
  color: var(--ink);
  font: 400 .925rem/1.4 var(--font-body);
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(243, 245, 248, .92) 0%, rgba(232, 236, 241, .96) 100%),
    linear-gradient(rgba(16, 20, 28, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 20, 28, .035) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  background-attachment: fixed;
}

[dir="rtl"] body {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", Bahnschrift, sans-serif;
}

button, input, select, .btn, label, th, .pill, .eyebrow, .copy-hint,
.page-heading h1, .brand-block strong, .primary-nav a, .login-form-head h2 {
  font-family: var(--font-chrome);
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Shell ------------------------------------------------------------------ */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-block-size: 100dvh;
}

.app-sidebar {
  position: sticky;
  inset-block-start: 0;
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: .9rem .75rem;
  background:
    linear-gradient(165deg, #161d28 0%, var(--rail) 42%, var(--rail-deep) 100%);
  color: var(--rail-text);
  border-inline-end: 1px solid var(--rail-line);
  overflow: auto;
  z-index: 2;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .35rem .4rem .7rem;
  text-decoration: none;
  color: inherit;
  border-block-end: 1px solid var(--rail-line);
}

.brand-block strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.brand-block small {
  display: block;
  margin-block-start: .15rem;
  color: var(--rail-muted);
  font-size: .7rem;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-family: var(--font-body);
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  inline-size: 2.05rem;
  block-size: 2.05rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--amber-bright), var(--amber));
  color: #1a1200;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.brand-mark-large {
  inline-size: 3.2rem;
  block-size: 3.2rem;
  font-size: 1.35rem;
  border-radius: var(--radius);
}

.primary-nav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1;
}

.primary-nav a {
  display: flex;
  align-items: center;
  min-block-size: 2.4rem;
  padding: .5rem .7rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: rgba(197, 206, 217, .78);
  border-inline-start: 3px solid transparent;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .015em;
}

.primary-nav a:hover {
  background: rgba(255, 255, 255, .05);
  color: #fff;
}

.primary-nav a[aria-current="page"] {
  background: rgba(245, 165, 36, .12);
  color: #fff;
  border-inline-start-color: var(--amber);
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-block-start: auto;
  padding-block-start: .8rem;
  border-block-start: 1px solid var(--rail-line);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.user-avatar {
  display: inline-grid;
  place-items: center;
  inline-size: 2.05rem;
  block-size: 2.05rem;
  border-radius: 999px;
  background: rgba(245, 165, 36, .16);
  color: var(--amber-bright);
  font-size: .82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.user-chip strong {
  display: block;
  color: #fff;
  font-size: .84rem;
  font-weight: 650;
  font-family: var(--font-chrome);
}

.user-chip small {
  display: block;
  color: var(--rail-muted);
  font-size: .7rem;
  font-family: var(--font-body);
}

.utility-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem;
}

.utility-links .btn-quiet {
  color: rgba(197, 206, 217, .72);
  border-color: transparent;
  background: transparent;
  min-block-size: 2.15rem;
  padding-inline: .5rem;
}

.utility-links .btn-quiet:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}

.app-workspace {
  min-inline-size: 0;
  position: relative;
}

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem 1rem;
  background: var(--rail-deep);
  color: var(--rail-text);
}

.mobile-brand {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--font-chrome);
}

main,
.app-workspace > main,
.public-main {
  max-inline-size: var(--content);
  margin-inline: auto;
  padding: 1.25rem 1.25rem 2.25rem;
}

.public-main {
  min-block-size: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, #eef1f5 0%, var(--paper) 55%, var(--paper-deep)),
    linear-gradient(rgba(16, 20, 28, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 20, 28, .04) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

/* Page chrome ------------------------------------------------------------ */

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  margin-block-end: .9rem;
}

.page-heading h1 {
  margin: .1rem 0 0;
  font-size: clamp(1.3rem, 1.7vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
}

.eyebrow {
  display: block;
  margin: 0;
  color: var(--amber-ink);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}

.live-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-block-size: 1.9rem;
  padding: .28rem .6rem .28rem .5rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(16, 20, 28, .03);
}

.live-status::before {
  content: "";
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 999px;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(245, 165, 36, .45);
}

.live-status::after { content: "Live"; }

.live-status.refreshed::before {
  background: var(--amber-bright);
  box-shadow: 0 0 0 .28rem rgba(245, 165, 36, .22);
}

.panel,
.card,
.form-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 1px);
  box-shadow: var(--shadow);
  padding: .9rem 1rem;
  margin-block-end: .9rem;
}

.card.narrow,
.state-panel { max-inline-size: 28rem; }

.card.login { margin-block-start: 8vh; }

.card-head {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-block-end: .75rem;
}

.card-head h1 { margin: 0; font-size: 1.15rem; }
.card-head .btn,
.card-head span { margin-inline-start: auto; }

.workflow-panel { padding: .7rem .85rem .85rem; }

h1 {
  margin-block: 0 .55rem;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-chrome);
}

.muted { color: var(--muted); }
.small { font-size: .8rem; }
.nowrap { white-space: nowrap; }

.empty {
  color: var(--muted);
  padding: 2rem 1rem;
  text-align: center;
  font-weight: 500;
}

/* Forms ------------------------------------------------------------------ */

label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: .28rem;
}

input, select, textarea, button { border-radius: var(--radius-sm); }

input, select, textarea {
  inline-size: 100%;
  min-block-size: var(--control-h);
  padding: .45rem .65rem;
  border: 1px solid var(--line-strong);
  background: #f8f9fb;
  color: var(--ink);
  margin-block-end: .7rem;
  font-family: var(--font-body);
}

textarea {
  min-block-size: 10rem;
  resize: vertical;
  line-height: 1.45;
  font-family: var(--font-data);
  font-size: .95rem;
}

input:hover, select:hover, textarea:hover { border-color: #8e99a8; }

input:focus, select:focus {
  border-color: var(--amber);
  background: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 165, 36, .18);
}

.grid-form { max-inline-size: 26rem; }
.inline { display: inline; }

.inline-label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.inline-label input {
  margin-block-end: 0;
  inline-size: auto;
  min-block-size: 2.05rem;
}

.filters,
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-block-end: .75rem;
  padding: .55rem;
  background: linear-gradient(180deg, #eef1f5, #e7ebf0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filters select,
.filters input,
.filter-bar select,
.filter-bar input {
  inline-size: auto;
  margin-block-end: 0;
  min-block-size: var(--control-h);
  background: #fff;
}

.row-form {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-wrap: wrap;
  padding-block: .65rem;
  border-block-end: 1px solid var(--line);
}

.row-form input,
.row-form select {
  margin-block-end: 0;
  inline-size: auto;
  min-block-size: var(--control-h);
  background: #fff;
}

.checks {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-block-end: .65rem;
}

.check {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--ink);
  margin: 0;
  min-block-size: 2.15rem;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-body);
}

.check input {
  inline-size: auto;
  margin: 0;
  min-block-size: auto;
}

.user-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 .8rem;
  margin-block-end: .5rem;
  background: #f8f9fb;
}

.user-row summary,
.user-summary {
  cursor: pointer;
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  padding-block: .65rem;
  list-style: none;
}

.user-row summary::-webkit-details-marker { display: none; }

.user-forms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem;
  padding-block: 0 .85rem;
}

.form-section { min-inline-size: 0; }

.admin-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
}

.admin-create,
.admin-records { margin-block-end: 0; }

.request-composer { max-inline-size: 34rem; }

.form-step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin-block-end: .9rem;
}

.step-number {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: var(--rail-deep);
  color: var(--amber);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  font-family: var(--font-data);
}

.field-group { min-inline-size: 0; }
.field-group input,
.field-group select { margin-block-end: 0; background: #fff; }

#invoice_no {
  font-family: var(--font-data);
  font-weight: 650;
  letter-spacing: .03em;
  font-size: 1.05rem;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--line);
}

.login-lang { margin-block-start: 1rem; text-align: center; }

/* Login — control desk entry -------------------------------------------- */

.login-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  inline-size: min(100%, 52rem);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface);
}

.login-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .65rem;
  padding: 2.1rem 1.65rem;
  min-block-size: 22rem;
  background:
    linear-gradient(180deg, transparent 40%, rgba(10, 14, 20, .55)),
    radial-gradient(circle at 12% 18%, rgba(245, 165, 36, .22), transparent 40%),
    linear-gradient(155deg, #1a222e, var(--rail), var(--rail-deep));
  color: var(--rail-text);
  position: relative;
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.login-brand-panel > * { position: relative; }

.login-brand-panel .eyebrow { color: var(--amber); }

.login-brand-panel h1 {
  margin: 0;
  max-inline-size: 14ch;
  color: #fff;
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  line-height: 1.15;
  font-family: var(--font-chrome);
}

.login-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.85rem 1.5rem;
  background: linear-gradient(180deg, #fbfcfd, #f4f6f9);
}

.login-form-head { margin-block-end: 1rem; }

.login-form-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}

.login-form-panel .btn-primary {
  inline-size: 100%;
  margin-block-start: .15rem;
}

.state-shell {
  display: flex;
  justify-content: center;
  width: 100%;
}

.state-panel { width: min(100%, 28rem); }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-block-size: var(--control-h);
  padding: .4rem .85rem;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  font-size: .86rem;
  font-weight: 650;
}

.btn:hover { background: #eef1f5; }

.btn-primary {
  background: var(--rail-deep);
  border-color: var(--rail-deep);
  color: #fff;
}

.btn-primary:hover {
  background: #1a222e;
  border-color: #1a222e;
  box-shadow: inset 0 -2px 0 var(--amber);
}

.btn-ok {
  background: var(--ok);
  border-color: var(--ok);
  color: #fff;
}

.btn-ok:hover {
  filter: brightness(1.06);
  background: var(--ok);
}

.btn-danger {
  background: #fff;
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:hover {
  background: var(--danger);
  color: #fff;
}

.btn-quiet {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}

.btn-quiet:hover {
  color: var(--ink);
  background: #e8ecf1;
}

/* Tables — dense clearing rows ------------------------------------------ */

.table-scroll {
  overflow-x: auto;
  margin-inline: -.1rem;
  padding-inline: .1rem;
}

table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  text-align: start;
  padding: .55rem .5rem;
  border-block-end: 1px solid var(--line);
  vertical-align: middle;
}

th {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 750;
  background: #eef1f5;
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

tbody tr:hover,
tbody tr:focus-within {
  background: rgba(245, 165, 36, .04);
}

.task-row td {
  padding-block: .35rem;
  vertical-align: middle;
  max-block-size: 53px;
  overflow: hidden;
}

.task-row .invoice-cell {
  min-inline-size: 11.5rem;
  max-block-size: 53px;
  overflow: auto;
}

.task-row .note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-block-start: .2rem;
}

.meta-stack {
  display: flex;
  flex-direction: column;
  gap: .08rem;
}

td.actions { white-space: nowrap; }

td.actions form {
  display: inline-flex;
  gap: .25rem;
  align-items: center;
}

td.actions form + form { margin-inline-start: .3rem; }

.decision-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}

.decision-cluster form {
  display: inline-flex;
  gap: .3rem;
  align-items: center;
  margin: 0;
}

.reject-form input {
  inline-size: 10.25rem;
  margin-block-end: 0;
  min-block-size: var(--control-h);
  background: #fff;
}

.legacy-heading td {
  background: #e8ecf1;
  font-weight: 700;
  border-block-end-color: var(--line-strong);
}

.legacy-row td { color: var(--muted); }

/* Invoice copy — the visual hero ---------------------------------------- */

.invoice {
  font-family: var(--font-data);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.invoice-copy {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .65rem;
  min-block-size: var(--control-h);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #f8f9fb, #eef1f5);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.invoice-copy:hover {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.copy-hint {
  font-size: .68rem;
  color: var(--muted);
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.invoice-copy.copied {
  border-color: var(--ok);
  background: var(--ok-soft);
}

.invoice-copy.copied .copy-hint { color: var(--ok); }

/* Status pills ----------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .14rem .5rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  background: #eef1f5;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.pill::before {
  content: "";
  inline-size: .4rem;
  block-size: .4rem;
  border-radius: 999px;
  background: currentColor;
}

.pill-pending {
  background: var(--amber-soft);
  border-color: #f0c987;
  color: var(--amber-ink);
}

.pill-granted {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}

.pill-rejected {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.pill-cancelled {
  background: var(--cancelled-soft);
  border-color: #c5d0dd;
  color: var(--cancelled);
}

.tag {
  font-size: .7rem;
  color: var(--muted);
  margin-inline-start: .3rem;
  font-weight: 650;
}

.note {
  font-size: .76rem;
  color: var(--muted);
  margin-block-start: .28rem;
  max-inline-size: 28rem;
  line-height: 1.35;
}

.note-warn { color: var(--amber-ink); font-weight: 650; }

/* Flashes & language ----------------------------------------------------- */

.flash {
  padding: .65rem .85rem;
  border-radius: var(--radius);
  margin-block-end: .8rem;
  border: 1px solid var(--line);
  font-size: .88rem;
  font-weight: 600;
}

.flash-ok {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}

.flash-bad {
  background: var(--danger-soft);
  border-color: var(--danger-line);
  color: var(--danger);
}

.langswitch a,
.language-link {
  color: inherit;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  padding: .35rem .5rem;
  border-radius: var(--radius-sm);
  min-block-size: 2.15rem;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-chrome);
}

.langswitch a:hover,
.language-link:hover {
  background: rgba(255, 255, 255, .08);
  text-decoration: none;
}

.utility-links .langswitch a,
.mobile-header .langswitch a {
  color: rgba(197, 206, 217, .78);
}

.login-lang .langswitch a { color: var(--muted); }

.login-lang .langswitch a:hover {
  color: var(--ink);
  background: #e8ecf1;
}

/* Legacy topbar kept for safety ------------------------------------------ */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: .7rem 1.2rem;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--fg);
  letter-spacing: .06em;
  font-family: var(--font-chrome);
}

.topbar nav { display: flex; gap: .25rem; flex-wrap: wrap; }

.topbar nav a {
  padding: .35rem .7rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--muted);
}

.topbar nav a:hover { background: var(--bg); color: var(--fg); }
.topbar nav a[aria-current="page"] {
  background: var(--rail-deep);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--amber);
}
.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: .75rem; }
.whoami { color: var(--muted); font-size: .88rem; }

/* Motion ----------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .invoice-copy,
  .primary-nav a,
  .live-status::before {
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .25s ease;
  }

  .live-status.refreshed::before {
    animation: pulse-amber .55s ease;
  }

  .app-workspace > main > .page-heading,
  .app-workspace > main > .panel,
  .app-workspace > main > .form-panel,
  .app-workspace > main > .admin-layout,
  .public-main > .login-shell,
  .public-main > .state-shell {
    animation: rise .26s ease both;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(.3rem); }
  to { opacity: 1; transform: none; }
}

@keyframes pulse-amber {
  0% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .4); }
  100% { box-shadow: 0 0 0 .35rem rgba(245, 165, 36, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* RTL -------------------------------------------------------------------- */

[dir="rtl"] .brand-mark,
[dir="rtl"] .invoice,
[dir="rtl"] input[inputmode="latin"],
[dir="rtl"] textarea[inputmode="latin"] {
  direction: ltr;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
  .app-shell { display: block; }

  .app-sidebar {
    position: static;
    block-size: auto;
    inline-size: 100%;
    padding: .7rem .8rem .8rem;
    gap: .55rem;
  }

  .brand-block {
    border-block-end: 0;
    padding-block-end: .3rem;
  }

  .brand-block small { display: none; }

  .mobile-header { display: none; }

  .primary-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: .2rem;
  }

  .primary-nav a {
    white-space: nowrap;
    border-inline-start: 0;
    border-block-end: 3px solid transparent;
    padding-inline: .75rem;
  }

  .primary-nav a[aria-current="page"] {
    border-inline-start-color: transparent;
    border-block-end-color: var(--amber);
  }

  .sidebar-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
  }

  .user-chip { flex: 1 1 auto; min-inline-size: 10rem; }

  .admin-layout,
  .login-shell { grid-template-columns: 1fr; }

  .login-brand-panel {
    min-block-size: 10.5rem;
    padding: 1.3rem 1.2rem;
  }
}

@media (max-width: 640px) {
  main,
  .app-workspace > main,
  .public-main { padding: .85rem; }

  .page-heading,
  .card-head,
  .form-step {
    align-items: stretch;
    flex-direction: column;
  }

  .form-step { display: flex; }

  .filter-bar,
  .filters,
  .decision-cluster,
  .row-form {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-bar > *,
  .filters > *,
  .decision-cluster input,
  .decision-cluster .btn,
  .row-form input,
  .row-form select,
  .row-form .btn,
  .page-actions .btn,
  .reject-form input {
    inline-size: 100%;
  }

  .topbar { gap: .5rem; }
  .topbar-end { inline-size: 100%; margin-inline-start: 0; }
}

/* Print ------------------------------------------------------------------ */

@media print {
  .app-sidebar,
  .mobile-header,
  .filters,
  .filter-bar,
  .page-actions,
  td.actions { display: none !important; }

  .app-shell { display: block; }

  body,
  main,
  .app-workspace > main {
    background: #fff;
    padding: 0;
  }

  .panel,
  .card,
  .form-panel {
    border: 0;
    box-shadow: none;
  }
}