/* AMD Gateway dashboard: everything css/gateway.css (the reference's compiled Tailwind v4 sheet) lacks.
   Tokens and every utility class come from gateway.css; this file adds the toaster (sonner in the
   reference injects its own CSS), the paper-shader host, phone-width padding, and a few states. */

:root {
  --font-inter: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-geist-mono: "GeistMono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
html, body { height: 100%; }
body { margin: 0; font-family: var(--font-inter); }
#app { min-height: 100%; }

/* the main column scrolls, the page keeps the reference padding from md up and breathes on phones */
@media (max-width: 767px) {
  .dash-page { padding: 1rem 1rem 2rem; }
  .dash-page h1.text-\[40px\] { font-size: 28px; }
  .dash-page .text-\[48px\] { font-size: 34px; }
}
@media (max-width: 479px) {
  .dash-page .grid-cols-\[100px_1fr_100px_32px\] { grid-template-columns: 1fr; }
}

/* the login shader host: the canvas is absolute inside (paper-shaders' own style handles it) */
[data-paper-shader] { width: 100%; height: 100%; }

/* focus rings on our own interactive rows */
[role="option"]:focus-visible, [role="button"]:focus-visible, a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, [role="radio"]:focus-visible, [role="switch"]:focus-visible, [role="checkbox"]:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.aw-dialog *:focus-visible { outline: none; }

/* Toaster (sonner markup, our styles) */
[data-sonner-toaster] {
  position: fixed;
  right: var(--offset-right, 24px);
  bottom: var(--offset-bottom, 24px);
  width: var(--width, 356px);
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--gap, 14px);
  pointer-events: none;
  font-family: var(--font-inter);
}
[data-sonner-toast] {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 40px 14px 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  animation: amd-toast-in .2s ease-out;
}
[data-sonner-toast][data-type="success"] [data-icon] { color: hsl(142 71% 45%); }
[data-sonner-toast][data-type="error"] [data-icon] { color: hsl(var(--destructive)); }
[data-sonner-toast][data-type="info"] [data-icon] { color: hsl(217 91% 60%); }
[data-sonner-toast] [data-icon] { display: flex; align-items: center; margin-top: 1px; flex: none; }
[data-sonner-toast] [data-content] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
[data-sonner-toast] [data-title] { font-weight: 500; }
[data-sonner-toast] [data-description] { color: hsl(var(--muted-foreground)); font-size: 12px; }
[data-sonner-toast] [data-close-button] {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  opacity: .6;
  cursor: pointer;
}
[data-sonner-toast] [data-close-button]:hover { opacity: 1; background: hsl(var(--muted)); }
@keyframes amd-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { [data-sonner-toast] { animation: none; } }

/* the chart surface fills its box */
.recharts-surface { display: block; width: 100%; height: 100%; }

/* keep long code and addresses inside their cells */
code, .font-mono { overflow-wrap: anywhere; }
pre { overflow-wrap: normal; }

/* the mobile sidebar sheet is 18rem wide (the reference's inline style) */
[data-slot="sheet-content"][data-side="left"] { width: var(--sidebar-width, 18rem); max-width: 85vw; }

/* number inputs: the reference hides the spinner through arbitrary variants */
input[type="number"].\[appearance\:textfield\] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"].\[appearance\:textfield\]::-webkit-inner-spin-button, input[type="number"].\[appearance\:textfield\]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------------------------------------------
   Utilities the reference sheet does not carry. css/gateway.css is the reference's compiled Tailwind v4
   output, so it only holds the classes the reference dashboard itself used; every class the AMD screens add
   (the revenue chart column, the trading grid, the agents table, the wallet stat strip) has to be written
   here by hand, in the same form Tailwind v4 emits. Checked by tools/app-layout.mjs, which fails on any
   class in the DOM that no stylesheet defines. */
.pl-5 { padding-left: calc(var(--spacing) * 5); }
.pr-5 { padding-right: calc(var(--spacing) * 5); }
.min-w-\[760px\] { min-width: 760px; }
.min-h-\[280px\] { min-height: 280px; }
.bg-emerald-500\/15 { background-color: #00bb7f26; }
.text-emerald-300 { color: var(--color-emerald-300); }
@media (min-width: 48rem) {
  :where(.md\:divide-x > :not(:last-child)) { border-inline-style: var(--tw-border-style); border-inline-start-width: 0; border-inline-end-width: 1px; }
}
@media (min-width: 64rem) {
  .lg\:w-\[300px\] { width: 300px; }
  .lg\:border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; }
  .lg\:border-b-0 { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_320px\] { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* second batch: classes only reachable in a dialog, a popover, an accordion or a detail screen */
.rotate-180 { rotate: 180deg; }
.top-full { top: 100%; }
.w-11 { width: calc(var(--spacing) * 11); }
.rounded-r-lg { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.text-\[28px\] { font-size: 28px; }
.grid-cols-\[140px_minmax\(0\,1fr\)\] { grid-template-columns: 140px minmax(0, 1fr); }
.\[\&\>\*\:not\(\:last-child\)\]\:border-b > :not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; }
@media (min-width: 48rem) {
  .md\:\[\&\>\*\:not\(\:last-child\)\]\:border-b-0 > :not(:last-child) { border-bottom-style: var(--tw-border-style); border-bottom-width: 0; }
}

/* The reference's transactions table is `min-w-[1040px]` with `gap-3`: the sum of its fixed columns plus
   the gaps and the row padding leaves the flexible Endpoint column 42px at 1440 and 0px at its own minimum,
   so the "ENDPOINT" and "PROTOCOL" header labels touch (the reference has the same collision). The grid
   itself is unchanged; the row gap is 8px instead of 12px and the minimum is 1072px, which is exactly the
   fixed columns plus the padding plus room for the widest header label. */
.min-w-\[1072px\] { min-width: 1072px; }

/* spacing steps the reference sheet stops short of */
.mb-6 { margin-bottom: calc(var(--spacing) * 6); }
.mb-8 { margin-bottom: calc(var(--spacing) * 8); }
.mt-8 { margin-top: calc(var(--spacing) * 8); }
.mr-4 { margin-right: calc(var(--spacing) * 4); }

/* ---------------------------------------------------------------------------------------------------
   Phone layer. The reference dashboard is desktop-dense: its controls are h-6 to h-9 (24 to 36px) and its
   icon buttons 16 to 32px square, under the 40px tap target docs/SPEC.md asks for. Below md every control
   that is not an inline link inside a sentence gets a 40px tap area: text controls grow in height only,
   square icon controls grow to 40x40, and a switch or a checkbox keeps its drawn size and takes its area
   from a transparent ::after (growing those would stretch the track or the box). From 768px up every pixel
   is the reference's. Checked by tools/app-layout.mjs at 320, 360, 390, 414 and 768. */
@media (max-width: 768px) {
  [data-slot="sheet-content"] [data-sidebar="menu-button"] { min-height: 40px; }
  /* the sidebar collapse handle hangs off <main>, outside .dash-page */
  [aria-label="Collapse sidebar"], [aria-label="Expand sidebar"] { width: 40px; height: 40px; }
  .dash-page button,
  .dash-page a[data-slot="button"],
  .dash-page [role="button"],
  .dash-page [role="tab"],
  .dash-page [role="radio"],
  .dash-page [role="combobox"],
  .dash-page select,
  .dash-page input:not([type="hidden"]):not([type="checkbox"]),
  [data-qa-modal] button,
  [data-qa-modal] a[data-slot="button"],
  [data-qa-modal] [role="button"],
  [data-qa-modal] [role="tab"],
  [data-qa-modal] [role="radio"],
  [data-qa-modal] [role="combobox"],
  [data-qa-modal] select,
  [data-qa-modal] input:not([type="hidden"]):not([type="checkbox"]) {
    min-height: 40px;
    min-width: 40px;
  }
  /* an input or a textarea must still be able to shrink with its column */
  .dash-page input, .dash-page textarea, .dash-page select,
  [data-qa-modal] input, [data-qa-modal] textarea, [data-qa-modal] select { min-width: 0; }
  /* square icon controls: 40x40, so two of them side by side each own their half */
  .dash-page [data-slot="button"].size-5, .dash-page [data-slot="button"].size-6,
  .dash-page [data-slot="button"].size-7, .dash-page [data-slot="button"].size-8,
  .dash-page [data-slot="button"].size-9,
  .dash-page button.size-5, .dash-page button.size-6, .dash-page button.size-7, .dash-page button.size-8,
  .dash-page button.h-6.w-6, .dash-page button.h-7.w-7, .dash-page button.h-8.w-8,
  [data-qa-modal] [data-slot="button"].size-5, [data-qa-modal] [data-slot="button"].size-6,
  [data-qa-modal] [data-slot="button"].size-7, [data-qa-modal] [data-slot="button"].size-8,
  [data-qa-modal] button.size-7, [data-qa-modal] button.size-8,
  [data-slot="dialog-close"], [data-slot="sheet-close"] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  /* the close button is 40px now, so the header text keeps clear of it */
  [data-qa-modal] [data-slot="dialog-header"], [data-qa-modal] [data-slot="sheet-header"] { padding-right: 2.5rem; }
  /* a switch and a checkbox keep their drawn size: the tap area comes from a transparent ::after */
  .dash-page [role="switch"], .dash-page [role="checkbox"],
  [data-qa-modal] [role="switch"], [data-qa-modal] [role="checkbox"] { position: relative; min-width: 0; min-height: 0; }
  /* the switch track is 36px wide: 40 gives the probe room next to the copy button beside it */
  .dash-page [role="switch"], [data-qa-modal] [role="switch"] { min-width: 40px; }
  /* a wrapped address link is the whole line, so it carries its own 40px */
  .dash-page a.break-all { display: inline-block; min-height: 40px; }
  .dash-page [role="switch"]::after, .dash-page [role="checkbox"]::after,
  [data-qa-modal] [role="switch"]::after, [data-qa-modal] [role="checkbox"]::after {
    content: "";
    position: absolute;
    /* the containing block is the padding box, so a 16px checkbox with a 1px border needs 16px on every
       side to clear the 40px probe with room to spare; its row is 48px tall so two neighbours never share
       the same point */
    inset: -16px;
  }
  /* a link that is a whole row or a back link is a target of its own */
  .dash-page a.inline-flex { min-height: 40px; }
  /* the value column of a detail row: the link is the whole line, so it carries the tap area */
  .dash-page .grid-cols-\[140px_minmax\(0\,1fr\)\] a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* The sideways scrollers the endpoints and sessions cards get on narrow screens. The minimum is the rows' fixed
   columns plus their gaps and padding plus room for the one flexible column: endpoints 72 + 220 + 140 + 3x16 +
   40 = 520, plus 120 for the path and its description; sessions 72 + 120 + 120 + 160 + 4x16 + 40 = 576, plus 144
   for the owner. At 480 and 600 the flexible column was 0px and 24px wide, so no path could be read at any
   scroll position below 1024. */
.min-w-\[640px\] { min-width: 640px; }
.min-w-\[720px\] { min-width: 720px; }
.min-h-\[44px\] { min-height: 44px; }
.min-h-\[48px\] { min-height: 48px; }

/* A grid or column-flex item is min-width:auto by default, so its content's minimum width can push a card
   (and the whole page) wider than the viewport: a long "TICKER · Name • Robinhood Token" option label, or
   a table that scrolls sideways on purpose. The dashboard never wants that, at any width. */
.dash-page .grid > *, [data-qa-modal] .grid > * { min-width: 0; }
.dash-page .flex-col > *, [data-qa-modal] .flex-col > * { min-width: 0; }

/* A dialog is never taller than the viewport: the reference sets max-h per call site, this is the floor
   for the ones that do not (the subscription form on a 320px screen). */
.amd-dialog-fit { max-height: calc(100vh - 1.5rem); overflow-y: auto; }

/* Recent activity keeps the reference's five-column row, but from lg instead of md: at exactly 768px the
   256px sidebar leaves 432px of page, and the reference's own md grid (436px of fixed columns plus the
   gaps) is cut off by the card. */
@media (min-width: 64rem) {
  .lg\:grid-cols-\[88px_76px_minmax\(0\,1fr\)_140px_132px\] { grid-template-columns: 88px 76px minmax(0, 1fr) 140px 132px; }
}

@media (min-width: 64rem) {
  .lg\:grid-cols-\[280px_minmax\(0\,1fr\)\] { grid-template-columns: 280px minmax(0, 1fr); }
}

/* Below lg the inset sidebar leaves a stat cell about 200px wide, and the reference's 40px stat value plus
   its USDG suffix needs more than that once the number has thousands in it. */
@media (max-width: 1023px) {
  .dash-page .text-\[40px\] { font-size: 32px; }
}

/* ---------------------------------------------------------------------------------------------------
   Two contrast fixes in the dark theme, both measured by tools/app-layout.mjs against the background the
   browser paints (WCAG AA, 4.5:1 for this type size):
   1. the reference's dark `--destructive` (0 62.8% 30.6%) is a background tint, not a text colour: an
      error message or a "Delete endpoint" label in it lands at 1.99:1 on the near-black page. Text gets a
      brighter red; every bg-destructive tint keeps the reference's value.
   2. a disabled endpoint row is dimmed with opacity-50, which takes its 11px description to 3.91:1. */
:root.dark .text-destructive,
:root.dark .hover\:text-destructive:hover { color: hsl(0 80% 68%); }
/* every dimmed row in the dashboard (a disabled endpoint, a closed session, a revoked agent, an unchecked
   import row) is dimmed to 72% instead of 50% in the dark theme */
:root.dark .dash-page .opacity-50,
:root.dark [data-qa-modal] .opacity-50 { opacity: .72; }

/* A label next to a permanently disabled control (the one enabled network) is dimmed to 50% by Tailwind's
   peer-disabled variant, which puts its 12px hint at 3.91:1 on the card. 78% clears AA and still reads as
   locked. */
:root.dark label.peer-disabled\:opacity-50 { opacity: .78; }

/* The service row wraps its meta cluster below the name instead of squeezing the gateway pill: with
   min-width 0 the name column shrinks to nothing and the pill's copy button escapes it. */
.min-w-\[220px\] { min-width: 220px; }

/* ---------------------------------------------------------------------------------------------------
   The same passes in the light theme (/dashboard/settings offers System, Light and Dark, and
   `node tools/app-layout.mjs --theme light` measures it now):
   1. `--destructive` is 0 84.2% 60.2% here, rgb(239,68,68), and as text it lands at 3.76:1 on the white
      card ("Revoke", 12px) and 3.61:1 on the muted page ("Clear all", 11px). A deeper red clears AA;
      every bg-destructive and border-destructive tint keeps the reference's value.
   2. amber text on a light card is the reference's warning colour (the "not deployed" banner, the thin
      pool note): amber-600 is 3.4:1 on white, amber-700 is 5.0:1 and reads the same. */
:root:not(.dark) .text-destructive,
:root:not(.dark) .hover\:text-destructive:hover { color: hsl(0 74% 44%); }
:root:not(.dark) .text-amber-600 { color: var(--color-amber-700); }
/* 3. the same dimmed rows (a disabled endpoint, a closed session, an unchecked import row): opacity-50 on
      the white card takes the 11px muted line to 2.35:1 and the 13px path to 3.74:1. 82% clears AA for
      both (4.84:1 and 7.7:1) and still reads as switched off. */
:root:not(.dark) .dash-page .opacity-50,
:root:not(.dark) [data-qa-modal] .opacity-50 { opacity: .82; }
:root:not(.dark) label.peer-disabled\:opacity-50 { opacity: .82; }

/* ---------------------------------------------------------------------------------------------------
   AA passes found once the gate measured oklch()/oklab() text (Tailwind v4 computes every palette colour and
   every /NN opacity modifier to those, and the contrast pass used to skip them):
   1. the endpoint row prints a free price in `text-muted-foreground/70` and its USDG in `/50` (the reference's
      classes). Inside a dimmed (disabled) row that is 2.74:1 and 1.98:1 on the light card and 3.97:1 and
      2.64:1 on the dark one; the prepaid sessions `hdr` label in /70 is 3.54:1 in light. The text keeps the
      muted colour at full strength instead, which clears AA in both themes and still reads as secondary.
   2. `text-emerald-600` ("Published", "Configured") is 3.65:1 on white: emerald-700 in the light theme.
   3. the "Paused" plan pill is `bg-gray-100 text-gray-500`, 4.39:1: gray-600 text on the same tint. */
.dash-page .text-muted-foreground\/70,
.dash-page .text-muted-foreground\/50,
[data-qa-modal] .text-muted-foreground\/70,
[data-qa-modal] .text-muted-foreground\/50 { color: hsl(var(--muted-foreground)); }
:root:not(.dark) .text-emerald-600 { color: var(--color-emerald-700); }
:root:not(.dark) .bg-gray-100.text-gray-500 { color: #4a5565; }