/* Bridge Internal Applications design system: the global stylesheet (delivery number:
 * project/RELEASES.md). Sainapsis Colombia S.A.S.
 *
 * Loaded after tokens.css. Colour, shadow, radius, spacing and motion values live in
 * tokens.json (tokens.css is compiled from it); this file holds the component sizes the
 * components read, the theme switches, the shadcn/ui dark bridge, the base reset, print
 * rules and the touch rules. The only literal colours here are the dark page ground (which
 * build/check-tokens.mjs keeps equal to the dark bg-app and text-primary) and print black.
 */

/* ── Native scheme ─────────────────────────────────────────────────────── */
:root { color-scheme: light; }
[data-theme='dark'] { color-scheme: dark; }
/* A light island inside a dark root (a logo plate, an embedded preview) gets the light
 * native scheme back, so its scrollbars and form controls match its colours. */
[data-theme='light'] { color-scheme: light; }

/* The dark attribute sits on a descendant of body, so reach body statically. */
body:has([data-theme='dark']) { background: #191A1D; color: #E7E8EB; }

/* ── Component sizes (build/check-tokens.mjs keeps --fs-* equal to the type styles) ── */
/* Weights 400 and 500 only. 600 and 700 are forbidden. Sentence case everywhere;
 * UPPERCASE only on table headers and menu section titles. */
:root {
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* @kind font */

  /* ── Size scale (10.0.0): one scale for web and Mobile, named by value. Roles
   * (body, label, caption…) are not tokens: README «Typography» says which step
   * each role takes on each platform. */
  --fs-10: 10px;        /* @kind font */
  --fs-10-5: 10.5px;    /* @kind font */
  --fs-11: 11px;        /* @kind font */
  --fs-11-5: 11.5px;    /* @kind font */
  --fs-12: 12px;        /* @kind font */
  --fs-12-5: 12.5px;    /* @kind font */
  --fs-13: 13px;        /* @kind font */
  --fs-13-5: 13.5px;    /* @kind font */
  --fs-14: 14px;        /* @kind font */
  --fs-16: 16px;        /* @kind font */
  --fs-17: 17px;        /* @kind font */
  --fs-18: 18px;        /* @kind font */
  --fs-22: 22px;        /* @kind font */
  --fs-30: 30px;        /* @kind font */
  --lh-menu: 1.3;  /* @kind other */
  --lh-body: 1.5;   /* @kind other */

  /* ── Tracking ──────────────────────────────────────────────────────── */
  --ls-metric: -0.5px; /* @kind other */
  --ls-th: 0.3px;  /* @kind other */
}

:root {   /* @kind other */

  /* ── Component padding, as shipped ─────────────────────────────────── */
  --pad-card: 16px 18px;        /* @kind spacing */
  --pad-th: 9px 18px;           /* @kind spacing */
  --pad-td: 11px 18px;          /* @kind spacing */
  /* Compact rows keep the 18px inset of the header cells and the card title, so a column
   * reads on one edge from the title down. */
  --pad-td-compact: 6px 18px;   /* @kind spacing */
  --pad-menu-item: 3px 6px;     /* @kind spacing */
  --pad-button: 8px 14px;       /* @kind spacing */
  --pad-main: 24px 28px;  /* @kind spacing */
}

/* ── Motion: animate only transform, opacity, max-height and colour ──────── */
@keyframes bridge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes bridge-spin { to { transform: rotate(360deg); } }
@keyframes bridge-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bridge-slide-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bridge-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Guide: each scene builds itself once, then its connectors keep flowing (guideMotion). */
.bridge-guide-in { animation: bridge-guide-in 420ms var(--ease-out) both; }
@keyframes bridge-guide-in { from { opacity: 0; transform: translateY(8px); } }
.bridge-guide-pop { animation: bridge-guide-pop 380ms var(--ease-out) both; }
@keyframes bridge-guide-pop { from { opacity: 0; transform: scale(0.88); } }
.bridge-guide-slide { animation: bridge-guide-slide 520ms var(--ease-out) both; }
@keyframes bridge-guide-slide { from { opacity: 0; transform: translateX(40px); } }
.bridge-guide-fade { animation: bridge-guide-fade 400ms ease-out both; }
@keyframes bridge-guide-fade { from { opacity: 0; } }
.bridge-guide-flow { stroke-dasharray: 5 7; animation: bridge-guide-fade 300ms ease-out both, bridge-guide-flow 1.1s linear infinite; }
@keyframes bridge-guide-flow { to { stroke-dashoffset: -24; } }
.bridge-guide-draw { stroke-dasharray: 800; animation: bridge-guide-draw 700ms var(--ease-out) both; }
@keyframes bridge-guide-draw { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }
.bridge-guide-hit { animation: bridge-guide-in 420ms var(--ease-out) both, bridge-guide-hit 900ms ease-in-out 1300ms both; }
@keyframes bridge-guide-hit { to { background: var(--brand-primary-subtle); } }
.bridge-guide-ring { animation: bridge-guide-ring 1.1s ease-out 2; }
@keyframes bridge-guide-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary) 55%, transparent); } 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand-primary) 0%, transparent); } }
/* A hero scene's parts drift gently and never stop (the intro of a guide). */
.bridge-guide-float { animation: bridge-guide-float 6s ease-in-out infinite; }
@keyframes bridge-guide-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, 6%) scale(1.06); } }
/* Closing a guide: a copy of the dialog shrinks into its GuideButton (the Guide sets the four values). */
.bridge-guide-fly { animation: bridge-guide-fly 560ms var(--ease-in-out) both; }
@keyframes bridge-guide-fly {
  0% { transform: none; opacity: 1; }
  55% { transform: translate(calc(var(--bridge-guide-fly-x) * 0.55), calc(var(--bridge-guide-fly-y) * 0.35)) scale(max(var(--bridge-guide-fly-sx), 0.35), 0.45); opacity: 0.9; }
  100% { transform: translate(var(--bridge-guide-fly-x), var(--bridge-guide-fly-y)) scale(var(--bridge-guide-fly-sx), var(--bridge-guide-fly-sy)); opacity: 0.15; }
}
/* The GuideButton glows for a moment after the guide flies into it. */
.bridge-guide-hint { animation: bridge-guide-hint 1.2s ease-out 2; }
@keyframes bridge-guide-hint { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary) 55%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand-primary) 0%, transparent); } }

/* Reduced motion: every duration to zero. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-loop: 0ms; /* @kind other */
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
  }
  /* A guide shows each scene whole at once, and the button it closes into keeps a still ring. */
  [data-bridge-guide] *, [data-bridge-guide-scene] * { animation: none !important; }
  .bridge-guide-hint { animation: none !important; box-shadow: 0 0 0 var(--border-width-ring) var(--brand-primary); }
}

/* ── shadcn/ui bridge: space-separated HSL channels, for projects on shadcn/ui ── */
/* The light values are in tokens.css (:root). */
[data-theme='dark'] {
  --background: 225 8% 11%;       /* @kind other */ --foreground: 225 12% 91%; /* @kind other */
  --card: 225 8% 11%;             /* @kind other */ --card-foreground: 225 20% 96%; /* @kind other */
  --popover: 225 9% 14%;          /* @kind other */ --popover-foreground: 225 12% 91%; /* @kind other */
  --primary: 222 64% 55%;         /* @kind other */ --primary-foreground: 0 0% 100%; /* @kind other */
  --secondary: 225 10% 15%;       /* @kind other */ --secondary-foreground: 225 12% 91%; /* @kind other */
  --muted: 225 10% 15%;           /* @kind other */ --muted-foreground: 218 17% 70%; /* @kind other */
  --accent: 225 10% 15%;          /* @kind other */ --accent-foreground: 225 12% 91%; /* @kind other */
  --destructive-hsl: 0 47% 54%;   /* @kind other */ --destructive-foreground: 0 0% 100%; /* @kind other */
  --border: 222 9% 20%;           /* @kind other */ --input: 222 9% 20%; /* @kind other */
  --ring: 222 64% 55%;            /* @kind other */
}

/* A light island inside a dark root takes the light bridge values back, the same
 * channels tokens.json gives :root (build/check-tokens.mjs keeps the two equal). */
[data-theme='light'] {
  --background: 0 0% 100%;        /* @kind other */ --foreground: 240 28% 14%; /* @kind other */
  --card: 0 0% 100%;              /* @kind other */ --card-foreground: 205 65% 15%; /* @kind other */
  --popover: 0 0% 100%;           /* @kind other */ --popover-foreground: 240 28% 14%; /* @kind other */
  --primary: 223 60% 33%;         /* @kind other */ --primary-foreground: 0 0% 100%; /* @kind other */
  --secondary: 213 60% 98%;       /* @kind other */ --secondary-foreground: 240 28% 14%; /* @kind other */
  --muted: 213 60% 98%;           /* @kind other */ --muted-foreground: 217 19% 44%; /* @kind other */
  --accent: 213 60% 98%;          /* @kind other */ --accent-foreground: 240 28% 14%; /* @kind other */
  --destructive-hsl: 0 56% 41%;   /* @kind other */ --destructive-foreground: 0 0% 100%; /* @kind other */
  --border: 213 40% 91%;          /* @kind other */ --input: 213 40% 91%; /* @kind other */
  --ring: 223 60% 33%;            /* @kind other */
}

/* ── Base reset ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

button {
  border: none; background: none; padding: 0; margin: 0;
  font-family: inherit; font-size: inherit; color: inherit; cursor: pointer;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

/* Weights 400 and 500 only. 600 and 700 are forbidden. */
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-medium); margin: 0; color: var(--text-heading); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Input appearance="variable": the empty variable reads its name in brand (9.1.0). */
input[data-appearance='variable']::placeholder { color: var(--text-brand); opacity: 1; }

code, kbd, samp, pre { font-family: var(--mono); }

table { border-collapse: collapse; width: 100%; }
input, select, textarea { font-family: inherit; }

/* ── Conversation screens fill the frame ───────────────────────────────── */
/* AppShell screen="conversation" (Bridge App) is a row as wide and tall as the frame. A
 * screen that hands it ONE child (a wrapper holding the chat list and the conversation)
 * gets that child stretched to the whole row, so the conversation column, its header,
 * the thread and the floating composer reach the right edge instead of stopping at the
 * width of their content. Several children keep the widths they declare (the chat list
 * 0 0 auto, the conversation 1 1 auto). Inline styles still win. */
[data-bridge='main'][data-screen='conversation'] > :only-child {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/* ── Touch screens (a tablet) ───────────────────────────────────────────── */
/* A tap acts at once: no double-tap-to-zoom wait on controls, and no grey flash, since
 * every control paints its own pressed, selected and focus states. */
a, button, label, summary, input, select, textarea,
[role='button'], [role='tab'], [role='option'], [role='menuitem'], [role='menuitemradio'],
[role='switch'], [role='checkbox'], [role='radio'], [role='combobox'] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Menu rows (Navbar, both surfaces, open and in the rail) take the pointer across the
 * whole menu column and the 2px between rows, not only their ground: the gutter beside the
 * ground (--space-6, or --nav-hit-x where a row sits further in) and 1px above and below
 * belong to the row. It draws nothing; hover and click follow it. */
[data-bridge-nav-hit] { position: relative; }
[data-bridge-nav-hit]::before {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(-1 * var(--nav-hit-x, var(--space-6)));
  right: calc(-1 * var(--nav-hit-x, var(--space-6)));
}

/* On a finger, small controls take taps over a larger area around their centre; they look
 * and lay out exactly as with a mouse. The area never reaches into a neighbour:
 *   data-bridge-hit=""      a control on its own (close buttons, the help "i", a checkbox,
 *                           a month arrow): at least 44 x 44 px
 *   data-bridge-hit="y"     one of a row of controls (a toolbar, pagination arrows): 44 px
 *                           tall, its own width
 *   data-bridge-hit="x"     one of a stack of rows (a file list's remove buttons): 44 px
 *                           wide, its own height
 *   data-bridge-hit="near"  inside dense content (a pill's or chip's remove, a field's
 *                           clear button): 4 px more on every side */
@media (pointer: coarse) {
  [data-bridge-hit] { position: relative; }
  [data-bridge-hit]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  [data-bridge-hit='y']::after { width: 100%; }
  [data-bridge-hit='x']::after { height: 100%; }
  [data-bridge-hit='near']::after { width: calc(100% + 8px); height: calc(100% + 8px); }
  /* Rows in menus and lists (the Navbar's option and child rows too, both surfaces), and days
   * in a calendar, grow to a finger's height. */
  [data-bridge-tap='row'] { min-height: 40px; }
  [data-bridge-tap='cell'] { min-height: 36px; }
}

/* ── Print: chrome disappears, data survives the break ─────────────────── */
/* Tag markup with data-bridge="top-strip|toolbar|pagination|main|card|chart|pill". */
@media print {
  @page { margin: 12mm; }

  html, body { background: #fff !important; color: #000 !important; font-size: 10pt; }

  [data-bridge='top-strip'],
  [data-bridge='pagination'],
  [data-bridge='toolbar'],
  [data-print='hide'] { display: none !important; }

  [data-bridge='main'] { padding: 0 !important; }

  * { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  [data-bridge='pill'], [data-bridge='chart'] * { print-color-adjust: exact; }

  thead { display: table-header-group; }
  tr, [data-bridge='chart'], [data-bridge='card'] { break-inside: avoid; }

  a[href]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
}

/* ── navbar lockup ── */
/* Navbar and NavbarBrand render the colour lockup and its light version side by
 * side; the theme shows one, so the colour lockup never sits on a dark ground. */
[data-bridge-lockup] { display: block; }
[data-bridge-lockup='dark-ground'] { display: none; }
[data-theme='dark'] [data-bridge-lockup='light-ground'] { display: none; }
[data-theme='dark'] [data-bridge-lockup='dark-ground'] { display: block; }
[data-theme='dark'] [data-theme='light'] [data-bridge-lockup='light-ground'] { display: block; }
[data-theme='dark'] [data-theme='light'] [data-bridge-lockup='dark-ground'] { display: none; }