/* ==========================================================================
   PLATYPUSS — TWENTY DESIGN LANGUAGE
   --------------------------------------------------------------------------
   A token-only layer that blends the visual system of twentyhq/twenty into
   the Command Office without touching its structure, its data, or a single
   existing element.

   Loaded AFTER the inline <style> block, so it wins on equal specificity.

   What is borrowed from Twenty:
     - a neutral 12-step gray ramp instead of a blue-tinted one
     - hairline borders (alpha .09) instead of heavy shadows
     - compact density: 32px rows, 24px chips, 48px header
     - ONE focus rule: a 2px accent outline at 1px offset, no glow
     - hover paint gated behind @media (hover: hover) so touch never sticks
     - a small, deliberate motion set
     - hierarchy from size and colour rather than from bold weights

   What is NOT borrowed: Twenty's blue accent. Africa is Watching green is
   the brand and the status colours carry meaning (emerald = live, gold =
   pending, crimson = failure), so the accent stays green and only the
   neutrals, the density and the borders change.

   NOTE ON THE 13px ROOT: Twenty sets html{font-size:13px} and calibrates
   its own rem scale to it. Platypuss's existing type scale is authored in
   rem against a 16px root, so switching the root would silently shrink
   every label by 19%. The same compact result is reached by tuning the
   pixel values below instead. The root font size is left alone.
   ========================================================================== */

:root {
  /* --- Twenty's scale, expressed in the units this codebase uses ------- */
  --tw-row-h: 32px;          /* record table row height */
  --tw-cell-pad: 8px;        /* record table cell padding */
  --tw-chip-h: 24px;         /* filter chip height */
  --tw-header-h: 48px;       /* application header height */
  --tw-viewbar-h: 39px;      /* view bar height */
  --tw-min-col: 104px;       /* minimum record column width */
  --tw-checkbox-w: 28px;     /* row-select column width */
  --tw-panel-w: 500px;       /* record side panel width */
  --tw-panel-min: 320px;
  --tw-panel-max: 600px;

  /* --- Twenty's radii --------------------------------------------------- */
  --tw-radius-xs: 2px;
  --tw-radius-sm: 4px;
  --tw-radius-md: 8px;
  --tw-radius-lg: 16px;
  --tw-radius-xl: 20px;
  --tw-radius-pill: 999px;

  /* --- Twenty's motion set ---------------------------------------------- */
  --tw-motion-instant: 0.075s;
  --tw-motion-fast: 0.15s;
  --tw-motion-normal: 0.3s;
  --tw-motion-slow: 1.5s;
  --tw-ease: ease;
}

/* ==========================================================================
   1. SURFACES — Twenty's gray ramp
   --------------------------------------------------------------------------
   Dark: gray4 .114 / gray5 .133 for the two card levels, gray6 .282 for a
   raised control, gray9 .506 for a pressed control.
   Light: gray1 #fff / gray3 .976 / gray4 .945 / gray5 .922.
   ========================================================================== */

html[data-theme="dark"], body.dark {
  --bg: #131314;
  --bg-card: #1d1d1f;
  --surface: #1d1d1f;
  --surface-2: #222224;
  --surface-3: #2a2a2c;
  --surface-4: #3a3a3e;

  --border: rgba(255, 255, 255, 0.09);
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-focus: rgba(255, 255, 255, 0.22);

  --fg: #ebebec;
  --text: #ebebec;
  --text-muted: #a1a1a4;
  --text-dim: #7c7c80;

  --header-glass: color-mix(in srgb, #131314 96%, transparent);
  --card-glass: rgba(29, 29, 31, 0.88);
  --triage-bg: #1d1d1f;
  --input-bg: #222224;
  --overlay-bg: rgba(19, 19, 20, 0.82);

  /* Hairline, not shadow. Twenty keeps elevation under .08 alpha. */
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.039), 0 0 4px 0 rgba(0, 0, 0, 0.078);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] {
  --bg: #f4f4f4;
  --bg-card: #ffffff;
  --surface: #ffffff;
  --surface-2: #f9f9f9;
  --surface-3: #f1f1f1;
  --surface-4: #ebebeb;

  --border: rgba(0, 0, 0, 0.09);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-focus: rgba(0, 0, 0, 0.22);

  --fg: #1a1a1a;
  --text: #1a1a1a;
  --text-muted: #5f6b76;
  --text-dim: #8899a6;

  --header-glass: color-mix(in srgb, #f4f4f4 96%, transparent);
  --card-glass: rgba(255, 255, 255, 0.88);
  --triage-bg: #ffffff;
  --input-bg: #f9f9f9;
  --overlay-bg: rgba(15, 20, 25, 0.6);

  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.039), 0 0 4px 0 rgba(0, 0, 0, 0.078);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
}

/* Radii follow Twenty's scale. 2xl stays at 28px rather than Twenty's
   40px: it is applied to the modals, and 40px reads as a lozenge on the
   wide dialogs this app already has. */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
}

/* ==========================================================================
   2. FOCUS — one rule, exactly as Twenty does it
   --------------------------------------------------------------------------
   The old treatment was a 3px coloured glow on :focus, which fires on mouse
   clicks and reads as an error state. A 2px outline at 1px offset, only on
   :focus-visible, is the keyboard affordance and nothing else.
   ========================================================================== */

:where(button, a, input, select, textarea, [tabindex], .btn, .admin-nav-item):focus-visible {
  outline: 2px solid var(--emerald-bright);
  outline-offset: 1px;
  border-radius: var(--tw-radius-sm);
}

/* The glow is replaced, not stacked with the outline. */
:where(input, select, textarea, button):focus {
  box-shadow: none;
}
:where(input, select, textarea):focus-visible {
  border-color: var(--border-focus);
}

/* ==========================================================================
   3. HOVER — only where a real pointer exists
   --------------------------------------------------------------------------
   Without this, a tap on a touch device leaves the hover paint stuck, which
   is the single most common complaint about a dense admin table on a phone.
   ========================================================================== */

@media (hover: none) {
  .btn:hover,
  .admin-nav-item:hover,
  .nav-item:hover,
  .table-row:hover,
  .triage-card:hover,
  .preset-chip:hover,
  .grants-sector-pill:hover {
    transform: none;
  }
  .btn:hover { background: var(--surface-2); }
  .btn-primary:hover { background: var(--emerald); }
  .triage-card:hover { border-color: var(--border); }
}

/* ==========================================================================
   4. DENSITY
   --------------------------------------------------------------------------
   Twenty reads "compact" because everything is smaller: 32px rows, 8px
   cell padding, a 48px header. The same numbers here.
   ========================================================================== */

.admin-header { min-height: var(--tw-header-h); }

/* The record tables: the CRM contact list, the grants radar, the outbox,
   the goals board, the org chart. All of them use .admin-table-scroll. */
.admin-table-scroll table { width: 100%; }

.admin-table-scroll thead th {
  height: var(--tw-row-h);
  padding: 0 var(--tw-cell-pad);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.admin-table-scroll tbody td {
  height: var(--tw-row-h);
  padding: 0 var(--tw-cell-pad);
  font-size: 0.8rem;
  vertical-align: middle;
}

/* Hierarchy from colour, not from weight. The table body stops shouting. */
.admin-table-scroll tbody td { font-weight: 400; }
.admin-table-scroll tbody td strong,
.admin-table-scroll tbody td b { font-weight: 600; }

/* A cell that is mostly whitespace is wasted horizontal space. */
.admin-table-scroll tbody td:first-child,
.admin-table-scroll tbody th:first-child { padding-left: var(--tw-cell-pad); }

/* ==========================================================================
   5. MOTION
   --------------------------------------------------------------------------
   Four durations and one easing curve. Anything slower than .3s on a
   data surface is a response-time problem, not a flourish.
   ========================================================================== */

.btn,
.admin-nav-item,
.nav-item,
.pill-score,
.preset-chip,
.grants-sector-pill,
.triage-card,
.table-row {
  transition-duration: var(--tw-motion-fast);
  transition-timing-function: var(--tw-ease);
}

.table-row { transition-property: background-color, border-color; }
.triage-card { transition-property: background-color, border-color, transform; }

@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;
  }
}

/* ==========================================================================
   6. HAIRLINE BORDERS
   --------------------------------------------------------------------------
   Twenty separates surfaces with a one-pixel line at low alpha rather than
   with a shadow. Cards keep a shadow; the borders do the work.
   ========================================================================== */

.triage-card,
.admin-card,
.stat-card {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   7. CONTINUOUS CORNERS
   --------------------------------------------------------------------------
   Twenty sets corner-shape: round on chips, buttons and skeletons. It is a
   progressive enhancement: browsers that do not support it fall back to the
   ordinary border-radius above, so this block is safe to ship.
   ========================================================================== */

@supports (corner-shape: round) {
  .pill-score,
  .btn,
  .brand-badge-pill,
  .preset-chip,
  .grants-sector-pill,
  .nav-item {
    corner-shape: round;
  }
}

/* ==========================================================================
   8. ROW ACTIONS AND THE HEADER
   --------------------------------------------------------------------------
   Twenty renders a record row's actions as 28px controls so the row fits in
   32px. In this app the row actions carry labels rather than icons, so the
   label stays and the control is made compact instead of the row being
   allowed to grow. The scope is table cells on purpose: the tier filters
   are .btn too, and those are chips, not buttons.
   ========================================================================== */

.admin-table-scroll tbody td .btn {
  border-radius: var(--tw-radius-sm);
  padding: 0.16rem 0.38rem;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

.admin-table-scroll tbody td .btn:hover { transform: none; }

/* Twenty truncates a long cell rather than widening the table, and keeps
   the full value in a tooltip. Scoped to the contact table because the
   other tables in the app have a different column order. The email is the
   widest cell there; the full address stays in the title attribute. */
#crm-table-body td:nth-child(2) code {
  display: inline-block;
  max-width: 215px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* The header is Twenty's 48px. Its own controls are the tallest thing in
   it, so they are compacted rather than the bar being clipped. */
.admin-header .btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
}

.admin-header { min-height: var(--tw-header-h); }