/* The server-rendered skin: login, password reset, admin 2FA, error pages, and
   the handful of legacy classes the React shell still reaches for.

   A file rather than an inline <style> in base.html, which is where it lived
   until 2026-09-09. Inline, all 26KB of it -- 5.7KB gzipped -- rode along on
   every HTML response, and the app shell's HTML is the ONLY part of a launch
   that is not already answered from the service worker's cache, so it was
   nearly half of what still crossed the network each time. Served from
   /static/ it is content-hashed, cached immutable, and precached by the
   worker, and the document that carries it shrinks by the same 5.7KB.

   It costs nothing in latency: every page that renders this also blocks on the
   app shell's own stylesheet, so the two fetch in parallel and the round trip
   was already being paid.

   Not merged into frontend/app-shell/src/styles.css on purpose. These rules
   are UNLAYERED and several of them win against Tailwind utilities by exactly
   that -- see the `th:not(#app-shell-root *)` skin below, and the pins in
   frontend/app-shell/src/styles.test.ts. Moving them under Tailwind's layers
   would change who wins, which is a different change from moving bytes. */

:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8faff;
  --text: #10253f;
  --muted: #4d6278;
  --border: #d6e2ef;
  --brand: #2563eb;
  --brand-dark: #1e4dc0;

  --success-bg: #ecfdf3;
  --success-border: #bfe8cf;
  --success-text: #136c3f;

  --info-bg: #eff6ff;
  --info-border: #c7ddff;
  --info-text: #1e4f9c;

  --warning-bg: #fff7e6;
  --warning-border: #f2d39c;
  --warning-text: #8a5a00;

  --danger-bg: #fff1f2;
  --danger-border: #f6c1c7;
  --danger-text: #a6172d;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07111f;
  --surface: #0f1d30;
  --surface-soft: #13243a;
  --text: #e7eef9;
  --muted: #a9b8cc;
  --border: #29415c;
  --brand: #78a8ff;
  --brand-dark: #4d8cff;

  --success-bg: #10291d;
  --success-border: #2f6b48;
  --success-text: #87e2aa;

  --info-bg: #10243d;
  --info-border: #345f93;
  --info-text: #a7cdfd;

  --warning-bg: #302817;
  --warning-border: #80642b;
  --warning-text: #f0cf82;

  --danger-bg: #3b1722;
  --danger-border: #a74452;
  --danger-text: #ff8794;
}

* { box-sizing: border-box; }

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  overflow: visible;
}

html {
  scrollbar-gutter: stable;
}

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

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(circle at top right, #e9f1ff 0%, var(--bg) 45%);
  color: var(--text);
}

.container {
  width: min(1620px, calc(100% - 48px));
  margin: 24px auto 40px;
}

/* Scoped out of the React shell, like the nav link rules just below.
   Unlayered, so it beat the breadcrumb's own utilities: `flex-wrap:
   wrap` broke "Tax / VAT Reconciliation" onto two lines instead of
   letting the page name ellipsise, and `width: 100%` stretched a
   content-width trail across the header. The app shell sets its own
   display/align/gap in App.tsx. */
nav:not(#app-shell-root *) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

nav:not(#app-shell-root *) a svg{
  vertical-align: -2px;
  margin-right: 4px;
  flex-shrink: 0;
}

/* The legacy nav-link skin is UNLAYERED, so inside the React shell it
   beats every Tailwind utility: the header breadcrumb rendered white on a
   white bar, wearing a pill it never asked for. Scope it out of
   #app-shell-root, same rule as th:not(#app-shell-root *) above and
   button:not([data-slot]). The app shell owns its own nav link styling. */
nav:not(#app-shell-root *) a:not(#app-shell-root *){
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

nav:not(#app-shell-root *) a:hover:not(#app-shell-root *){
  background: rgba(255, 255, 255, 0.18);
}

nav:not(#app-shell-root *) a:active:not(#app-shell-root *){
  transform: scale(0.95);
}

main {
  margin-top: 16px;
}

body.app-shell-page {
  background: #f6f8fb;
}

html[data-theme="dark"] body.app-shell-page {
  background: #07111f;
}

body.app-shell-page .container,
body.app-shell-page .app-shell-container {
  width: 100%;
  max-width: none;
  margin: 0;
}

body.app-shell-page #main-content,
body.app-shell-page #page-content,
body.app-shell-page #app-shell-root {
  margin-top: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 8px 22px rgba(15, 39, 69, 0.05);
  margin-bottom: 16px;
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: 0 10px 30px rgba(15, 39, 69, 0.09);
}

h1, h2 {
  margin: 0 0 12px;
  line-height: 1.2;
}

p, li { color: #213a57; }

ul { margin: 8px 0 0; padding-left: 20px; }

.actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-form-strip {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 12px;
  box-shadow: none;
}

.inline-form-strip > div,
.inline-form-strip > p {
  min-width: 0;
}

.inline-form-strip .actions > div {
  flex: 1 1 220px;
  min-width: 220px;
}

/* Focus-visible ring for all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Touch optimization */
a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

.btn,
button:not([data-slot]) {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.btn:active,
button:not([data-slot]):active {
  transform: scale(0.97);
}

.btn svg,
button:not([data-slot]) svg {
  vertical-align: -2px;
  margin-right: 4px;
}

/* 44px touch target for primary / standalone buttons only */
.card > form > button[type="submit"]{
  min-height: 44px;
}

.btn-primary,
button:not([data-slot]) {
  background: var(--brand);
  color: #fff;
}

.btn-primary:hover,
button:not([data-slot]):hover {
  background: var(--brand-dark);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

.btn-secondary {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface-soft);
}

.btn-secondary:hover {
  border-color: #b8ccdf;
  background: #eef4ff;
  box-shadow: 0 2px 6px rgba(15, 39, 69, 0.08);
}

/* Unlayered, so it beats every Tailwind text-* utility no matter the
   specificity. Scope it out of the React shell, which colours its own
   links (the header breadcrumb wants muted, not brand). The shell is
   bigger than #app-shell-root: Radix portals (drawers, dialogs,
   menus) mount on <body>, so shell-owned anchors are also excluded by
   the [data-slot] tree they always ride in - same marker as
   button:not([data-slot]) above. Without it, the invoice drawer's
   download chips wore this brand blue over their own text-success. */
a:not(#app-shell-root *):not([data-slot]):not([data-slot] *) { color: var(--brand); }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}

@keyframes shake-pulse {
  0%   { transform: translateX(0);    box-shadow: 0 0 0 0   rgba(231,76,60,0.0); }
  10%  { transform: translateX(-6px); box-shadow: 0 0 0 4px rgba(231,76,60,0.35); }
  20%  { transform: translateX(5px);  }
  30%  { transform: translateX(-4px); box-shadow: 0 0 0 6px rgba(231,76,60,0.25); }
  50%  { transform: translateX(3px);  }
  65%  { transform: translateX(-2px); box-shadow: 0 0 0 4px rgba(231,76,60,0.15); }
  100% { transform: translateX(0);    box-shadow: 0 0 0 0   rgba(231,76,60,0.0); }
}

/* ── Inline doc upload/delete (shared) ── */
/* ── Tablet (≤980px) ── */
@media (max-width: 980px) {
  .container {
    width: calc(100% - 24px);
    margin: 16px auto 32px;
  }

  .inline-form-strip .actions > div {
    flex: 1 1 160px;
    min-width: 140px;
  }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 640px) {
  .container {
    width: calc(100% - 16px);
    margin: 10px auto 24px;
  }

  nav {
    gap: 6px;
    row-gap: 8px;
  }

  /* Compact cards */
  .card {
    padding: 14px 12px;
    border-radius: 10px;
  }

  /* Legacy pages only. Unlayered, so inside the React shell it beat
     the header title's `text-inherit` and rendered the page name at
     1.2rem against the section crumb's 1rem — the title read as the
     bigger of two words that are meant to be one heading. */
  h1:not(#app-shell-root *) {
    font-size: 1.2rem;
  }

  h2:not(#app-shell-root *) {
    font-size: 1.05rem;
  }

  /* Stack filter forms */
  .inline-form-strip .actions {
    flex-direction: column;
    gap: 8px;
  }

  .inline-form-strip .actions > div {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .inline-form-strip .actions > button,
  .inline-form-strip .actions > a.btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Toast — full width */
  .toast-stack {
    right: 8px;
    left: 8px;
    bottom: 8px;
  }

  .toast {
    max-width: none;
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface);
}

/* The legacy th skin below (hardcoded light fill, centered, sticky) is
   UNLAYERED, so inside the React shell it would beat every Tailwind
   utility — its dark-mode override only exists for .business-shell, so
   raw <th> cells there (e.g. the P&L label rail) rendered light-on-dark.
   Scope it out of #app-shell-root entirely: app-shell tables own their
   th styling, same rule as button:not([data-slot]). */
th:not(#app-shell-root *), td {
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  font-size: 0.88rem;
  vertical-align: middle;
  white-space: nowrap;
}

th:not(#app-shell-root *) {
  background: #eef4ff;
  color: #1a3658;
  font-weight: 650;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--border);
}

/* Two-row sticky headers: second row sticks below the first */
thead:has(tr:nth-child(2)) tr:first-child th:not(#app-shell-root *) {
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
thead tr:nth-child(2) th:not(#app-shell-root *) {
  top: var(--header-row-h, 36px);
  box-shadow: 0 1px 0 var(--border);
}

td {
  text-align: center;
}

tr:last-child td { border-bottom: none; }

tbody tr {
  transition: background 0.15s ease;
}

tbody tr:hover td {
  background-color: #f3f7ff;
}

form p {
  margin: 0 0 12px;
  display: grid;
  gap: 6px;
}

/* Unlayered, so it beat every Tailwind utility on the shell's own
   <Input data-slot="input">: a 10px radius, the legacy border colour
   and 9px of vertical padding over its rounded-lg / border-input /
   py-1, so a dialog's Date and Amount fields wore a different box from
   the Select trigger beside them (a <button data-slot>, which the
   button:not([data-slot]) rule above already leaves alone). Same
   marker here: shell controls carry data-slot, legacy forms never do. */
input:not([type="checkbox"]):not([type="radio"]):not([data-slot]),
select:not([data-slot]),
textarea:not([data-slot]) {
  width: 100%;
  max-width: none;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 9px 10px;
  font: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([data-slot]):focus-visible,
select:not([data-slot]):focus-visible,
textarea:not([data-slot]):focus-visible {
  border-color: #95b8f5;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--brand);
  cursor: pointer;
  vertical-align: middle;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.messages {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.messages li {
  padding: 10px 12px;
  border: 1px solid var(--info-border);
  border-radius: 10px;
  background: var(--info-bg);
  color: var(--info-text);
}

.messages li.success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}

.messages li.warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.messages li.error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.messages li.info,
.messages li.debug {
  border-color: var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
}

.toast-stack {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
}

.toast {
  min-width: 220px;
  max-width: 360px;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--info-border);
  background: var(--info-bg);
  color: var(--info-text);
  box-shadow: 0 8px 22px rgba(15, 39, 69, 0.12);
  font-size: 0.88rem;
  animation: toast-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.toast-out {
  animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.96); }
}

.toast.success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}

.toast.error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.toast.warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
}

.muted { color: var(--muted); }

.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.business-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: 70px minmax(0, 1fr);
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background: #f6f8fb;
}

#app-shell-root[data-admin-auth-shell] > #main-content {
  display: grid;
  grid-area: main;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  width: 100%;
  max-width: none;
  min-width: 0;
  gap: 20px;
  padding: 24px 32px 40px;
}

#app-shell-root[data-admin-auth-shell] > #main-content > #page-content {
  width: 100%;
  min-width: 0;
}

#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] {
  grid-template-columns: 72px minmax(0, 1fr);
}

@media (min-width: 761px) {
  #app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] {
    grid-template-columns: 78px minmax(0, 1fr);
  }
}

#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] #app-workspace-sidebar {
  gap: 22px;
  padding-right: 8px;
  padding-left: 8px;
}

#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] [data-sidebar="brand"],
#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] [data-sidebar="menu-button"] {
  justify-content: center;
  width: 100%;
  gap: 0;
  padding-right: 8px !important;
  padding-left: 8px !important;
}

#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] [data-sidebar="label"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] [data-app-sidebar-extra-nav="true"] {
  width: 100%;
  padding-top: 12px;
  margin-top: 12px;
}

#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] [data-app-sidebar-toggle-bar="true"]:first-child,
#app-shell-root[data-admin-auth-shell][data-sidebar-state="collapsed"] [data-app-sidebar-toggle-bar="true"]:last-child {
  width: 12px;
  transform: translateX(-3px);
}

html[data-theme="dark"] [data-admin-theme-icon-dark="true"],
html[data-theme="light"] [data-admin-theme-icon-light="true"] {
  display: none;
}

.business-shell #main-content {
  display: grid;
  grid-area: main;
  align-content: start;
  gap: 24px;
  min-width: 0;
  margin-top: 0;
  padding: 30px 36px 28px;
}

.business-shell #page-content {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.business-shell .card {
  margin-bottom: 0;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgb(38 75 125 / 5%);
}

.business-shell .card:hover {
  box-shadow: 0 10px 26px rgb(38 75 125 / 5%);
}

.business-shell .admin-auth-panel {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d8e2ef;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgb(15 39 69 / 18%);
}

.business-shell .admin-auth-panel:hover {
  box-shadow: 0 24px 70px rgb(15 39 69 / 18%);
}

.business-shell .admin-auth-header {
  padding: 20px 22px 16px;
  background: linear-gradient(180deg, var(--surface-soft) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
}

.business-shell .admin-auth-header h1 {
  margin: 0 0 8px;
  color: #0f2138;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.business-shell .admin-auth-kicker {
  margin: 0 0 6px;
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.business-shell .admin-auth-body {
  display: grid;
  gap: 14px;
  padding: 18px 22px 22px;
}

.business-shell .admin-auth-form,
.business-shell .admin-auth-setup {
  display: grid;
  gap: 14px;
  margin: 0;
}

.business-shell .admin-auth-field {
  display: grid;
  gap: 7px;
}

.business-shell .admin-auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.business-shell .admin-auth-qr {
  width: 210px;
  height: 210px;
  background: #ffffff;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
}

.business-shell .admin-auth-code {
  display: block;
  max-width: 100%;
  padding: 10px 12px;
  color: #172a45;
  overflow-wrap: anywhere;
  background: #f6f8fb;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
}

.business-shell .admin-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
  padding-top: 14px;
}

.business-shell .inline-form-strip{
  border-radius: 8px;
}

.business-shell .inline-form-strip {
  background: #ffffff;
}

.business-shell th {
  background: #f3f7ff;
  color: #18385f;
}

.business-shell tbody tr:hover td {
  background-color: #f8fbfa;
}

html[data-theme="dark"] body {
  background: #07111f;
  color: var(--text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] li {
  color: #c7d3e4;
}

html[data-theme="dark"] .business-shell {
  background: #07111f;
}

html[data-theme="dark"] .business-shell .card,
html[data-theme="dark"] .business-shell .inline-form-strip{
  color: var(--text);
  background: #0f1d30;
  border-color: var(--border);
  box-shadow: 0 12px 30px rgb(0 0 0 / 24%);
}

html[data-theme="dark"] .business-shell h1,
html[data-theme="dark"] .business-shell h2,
html[data-theme="dark"] .business-shell h3,
html[data-theme="dark"] .business-shell strong,
html[data-theme="dark"] .business-shell .value{
  color: var(--text);
}
html[data-theme="dark"] .business-shell tbody tr:hover td {
  background: #172941;
}

html[data-theme="dark"] .business-shell .admin-auth-header {
  color: var(--text);
  background: linear-gradient(180deg, var(--surface-soft) 0%, var(--surface) 100%);
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .business-shell .admin-auth-kicker {
  color: #9cc1ff;
}
html[data-theme="dark"] .business-shell .btn-secondary{
  color: #b7d3ff;
  background: #13243a;
  border-color: #3c5d86;
}
/* The dark --brand is a light blue (#78a8ff); white on it is 2.4:1, below
   the 4.5:1 the 2FA Verify button's text needs. The page background as
   text reads at 9:1 on it and 5.5:1 on the --brand-dark hover. */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] button:not([data-slot]) {
  color: var(--bg);
}

html[data-theme="dark"] .business-shell .muted,
html[data-theme="dark"] .business-shell small,
html[data-theme="dark"] .business-shell .label{
  color: var(--muted);
}

html[data-theme="dark"] .business-shell table,
html[data-theme="dark"] .business-shell td {
  color: #dbe7f7;
  background: #0f1d30;
  border-color: var(--border);
}

html[data-theme="dark"] .business-shell th {
  color: #dbeafe;
  background: #172941;
  border-color: var(--border);
  box-shadow: 0 1px 0 var(--border);
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([data-slot]),
html[data-theme="dark"] select:not([data-slot]),
html[data-theme="dark"] textarea:not([data-slot]) {
  color: var(--text);
  background: #0b1728;
  border-color: #36516f;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([data-slot]):focus-visible,
html[data-theme="dark"] select:not([data-slot]):focus-visible,
html[data-theme="dark"] textarea:not([data-slot]):focus-visible {
  border-color: #78a8ff;
  box-shadow: 0 0 0 3px rgb(120 168 255 / 18%);
}

@media (max-width: 980px) {
  .business-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .business-shell #main-content {
    padding: 24px 20px;
  }
}

@media (max-width: 640px) {
  .business-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "header"
      "sidebar"
      "main";
  }

  .business-shell #main-content {
    padding: 20px 12px 24px;
  }
}