/* ============================================================
   Khyaal Admin — redesign theme (global overrides)
   Applied via AdminJS `assets.styles: ['/custom.css']`.
   Design system: Pulse 2.0 — warm off-white canvas, terracotta primary,
   Inter body / Playfair display / DM Mono labels, 6-8-12-16 radius scale.
   Targets AdminJS stable `data-css="…"` and `.adminjs_*` hooks
   (class hashes `sc-*` are NOT stable — never target them).
   See docs/context/admin-redesign.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@400;500&family=Noto+Sans+Devanagari:wght@400;600;700&display=swap');

/* ---- Theme tokens (light = redesign mockup palette). Dark values live in
   the html[data-kx-theme='dark'] block below — the attribute is set by
   /theme-init.js (pre-render, from localStorage['kx-theme']) and toggled by
   the TopBar sun/moon button. Components consume these via var(--kx-*)
   (records/ui.tsx tokens + inline styles), so one attribute flip re-themes
   the whole console — same concept as the Pulse console's .dark class. ---- */
:root {
  color-scheme: light;
  /* Type system (Pulse): Inter for body+UI headings, Playfair Display for the
     few large display moments, Instrument Serif italic for brand accents,
     DM Mono for uppercase metadata labels. */
  --kx-font-body: 'Inter', 'Noto Sans Devanagari', system-ui, sans-serif;
  --kx-font-head: 'Inter', 'Noto Sans Devanagari', sans-serif;
  --kx-font-display: 'Playfair Display', Georgia, serif;
  --kx-font-display-it: 'Instrument Serif', Georgia, serif;
  --kx-font-mono: 'DM Mono', 'Courier New', monospace;
  /* Overlay backdrop (Pulse dialog/sheet: solid dark scrim, no blur) */
  --kx-scrim: rgba(0, 0, 0, 0.62);
  /* Pulse 2.0 warm palette (khyaal-pulse-console global.css) mapped onto the
     kx token names. "green" tokens now carry Pulse's TERRACOTTA primary
     (#D95B2B), "gold" carries hue-amber, "lime" carries hue-green — the names
     are kept so every var() consumer re-themes without another sweep. */
  --kx-bg: #FAF8F5;
  --kx-canvas: #FAF8F5;
  --kx-bg-grad: radial-gradient(1200px 600px at 78% -8%, #FFFFFF 0%, #FAF8F5 55%, #F4F1EC 100%);
  --kx-card: #FFFFFF;
  --kx-card-2: #F7F4EF; /* soft panels / hover rows */
  --kx-card-3: #F4F1EC; /* table headers / inset wells (Pulse secondary) */
  --kx-border: #E2D9CE;
  --kx-input-border: #E2D9CE;
  --kx-border-btn: #E2D9CE;
  --kx-ink: #1A1410;
  --kx-ink-strong: #1A1410;
  --kx-ink-2: #2A211B;
  --kx-muted: #9A8B7D;
  --kx-muted-2: #ABA093;
  --kx-muted-3: #BCB2A5;
  --kx-ghost-fg: #6E6154;
  --kx-walnut-1: #2A211B;
  --kx-walnut-2: #1E1A16;
  --kx-walnut-3: #151210;
  --kx-walnut-grad: linear-gradient(110deg, #2A211B, #3A2E24 60%, #1E1A16);
  --kx-green: #D95B2B;
  --kx-green-2: #E06A3B;
  --kx-green-grad: linear-gradient(180deg, #E06A3B, #D95B2B);
  --kx-green-ink: #B34A20;
  --kx-green-soft: #FAEAE2;
  --kx-lime: #3A9468;
  --kx-gold: #D18B1A;
  --kx-gold-2: #B87715;
  --kx-gold-ink: #A56E12;
  --kx-gold-warm: #B87715;
  --kx-gold-soft: #F5EDDD;
  --kx-danger: #E5484D;
  --kx-danger-soft: #FDECEC;
  --kx-danger-border: #F5CFCF;
  --kx-ref-bg: #EAF0FA;
  --kx-ref-fg: #4A7BD4;
  --kx-topbar-bg: rgba(250, 248, 245, 0.72);
  --kx-topbar-border: #E2D9CE;
  --kx-row-line: #EEE8DF;
  --kx-scrollbar: #DCD3C6;
  --kx-scrollbar-hover: #CCC1B2;
  --kx-shadow-card: 0 1px 2px rgba(26, 20, 16, 0.04), 0 18px 36px -26px rgba(26, 20, 16, 0.18);
  --kx-shadow-green: 0 10px 22px -12px rgba(217, 91, 43, 0.55);
  /* Sidebar — Pulse light sidebar (#F6F3EF, ink text, terracotta active) */
  --kx-sidebar-bg: #F6F3EF;
  --kx-sidebar-border: #E2D9CE;
  --kx-sidebar-text: #4A4238;
  --kx-sidebar-ink: #1A1410;
  --kx-sidebar-muted: #9A8B7D;
  --kx-sidebar-label: #ABA093;
  --kx-sidebar-active-bg: rgba(217, 91, 43, 0.1);
  --kx-sidebar-active-fg: #B34A20;
  --kx-sidebar-badge-bg: rgba(217, 91, 43, 0.12);
  --kx-sidebar-badge-fg: #B34A20;
}

/* ---- Dark theme (Pulse-style warm dark: near-black warm bg, dark-paper
   cards, brighter accents). The walnut sidebar keeps its own gradient —
   it is already dark and stays the brand anchor in both modes. ---- */
html[data-kx-theme='dark'] {
  color-scheme: dark;
  --kx-scrim: rgba(0, 0, 0, 0.72);
  /* Pulse dark tokens: bg hsl(20 14% 7%), card hsl(27 15% 10%), border
     hsl(20 12% 18%), fg hsl(30 50% 93%), primary hsl(17 66% 55%). */
  --kx-bg: #151210;
  --kx-canvas: #151210;
  --kx-bg-grad: radial-gradient(1200px 600px at 78% -8%, #1C1814 0%, #151210 55%, #100D0B 100%);
  --kx-card: #1E1A16;
  --kx-card-2: #262119;
  --kx-card-3: #242019;
  --kx-border: #332C25;
  --kx-input-border: #3A332B;
  --kx-border-btn: #3A332B;
  --kx-ink: #F2E7D8;
  --kx-ink-strong: #F6EDE1;
  --kx-ink-2: #EFE3D3;
  --kx-muted: #8C8177;
  --kx-muted-2: #756B61;
  --kx-muted-3: #63594F;
  --kx-ghost-fg: #C4B6A6;
  --kx-walnut-1: #2A211B;
  --kx-walnut-2: #1E1A16;
  --kx-walnut-3: #151210;
  --kx-walnut-grad: linear-gradient(110deg, #2A211B, #3A2E24 60%, #1E1A16);
  --kx-green: #DE6A3C;
  --kx-green-2: #E5794D;
  --kx-green-grad: linear-gradient(180deg, #E5794D, #D95B2B);
  --kx-green-ink: #EC9268;
  --kx-green-soft: #33221B;
  --kx-lime: #4CAF7D;
  --kx-gold: #D18B1A;
  --kx-gold-2: #E09B2D;
  --kx-gold-ink: #E0A23F;
  --kx-gold-warm: #D19A5D;
  --kx-gold-soft: #2E2517;
  --kx-danger: #E0564F;
  --kx-danger-soft: #331B1B;
  --kx-danger-border: #4C2828;
  --kx-ref-bg: #1D2836;
  --kx-ref-fg: #82B2E8;
  --kx-topbar-bg: rgba(21, 18, 16, 0.72);
  --kx-topbar-border: #2A241E;
  --kx-row-line: #2B2620;
  --kx-scrollbar: #3A332B;
  --kx-scrollbar-hover: #4A4238;
  --kx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25), 0 18px 36px -26px rgba(0, 0, 0, 0.6);
  --kx-shadow-green: 0 10px 22px -12px rgba(217, 91, 43, 0.4);
  /* Sidebar — Pulse dark sidebar hsl(20 12% 9%) */
  --kx-sidebar-bg: #1A1512;
  --kx-sidebar-border: #2A241E;
  --kx-sidebar-text: #C9BDB0;
  --kx-sidebar-ink: #F2E7D8;
  --kx-sidebar-muted: #8C8177;
  --kx-sidebar-label: #756B61;
  --kx-sidebar-active-bg: rgba(222, 106, 60, 0.14);
  --kx-sidebar-active-fg: #E88B5E;
  --kx-sidebar-badge-bg: rgba(222, 106, 60, 0.16);
  --kx-sidebar-badge-fg: #E88B5E;
}

/* The Khyaal wordmark asset is cream (drawn for the old walnut rail) — darken
   it on the light sidebar; untouched in dark where cream reads fine. */
html:not([data-kx-theme='dark']) .kx-logo-img {
  filter: brightness(0.38) saturate(1.3);
}

html { scroll-behavior: smooth; }
/* Anchors styled as buttons (Clone a series, New event, Browse files…) carry
   explicit heights + 1px borders; the mockup's global border-box reset keeps
   them at their set height, so mirror that for anchors (buttons/inputs are
   already border-box per the UA stylesheet). */
a { text-decoration: none; color: inherit; box-sizing: border-box; }
a.adminjs_Header { display: block; }

/* ---- Shared keyframes (mirror the mockup <style>, lines 28-35) ----
   Used by the dashboard live-Tambola banner (kxFloat/kxPulse), Live Now,
   Events Calendar, and the standalone board. Names kept identical so inline
   `animation:` values copied from the mockup resolve. */
@keyframes kxPop { 0% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes kxGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(209,139,26,.55), 0 18px 40px -12px rgba(209,139,26,.5); } 50% { box-shadow: 0 0 0 14px rgba(209,139,26,0), 0 18px 44px -10px rgba(209,139,26,.65); } }
@keyframes kxSpin { to { transform: rotate(360deg); } }
@keyframes kxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes kxFall { 0% { transform: translateY(-12vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: .9; } }
@keyframes kxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kxPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes kxSheen { to { background-position: 200% 0; } }
@keyframes kxNavIn { 0% { transform: translateX(-10px); opacity: .35; } 60% { transform: translateX(3px); } 100% { transform: translateX(0); opacity: 1; } }
@keyframes kxIconPop { 0% { transform: scale(.65) rotate(-10deg); } 55% { transform: scale(1.22) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes kxPageA { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kxPageB { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kxTitleA { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kxTitleB { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kxDrawerIn { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ---- Page transition (mockup pageAnim, kxPageA/B) ----
   TopBar alternates .kx-page-a / .kx-page-b on the stable app-content section
   on every route change; A and B are identical keyframes — swapping the name
   is what retriggers the animation. The class lives on the parent so page
   content mounted *after* the route change still animates in. The topbar and
   notice toast are excluded — only the page body slides up. */
[data-css='app-content'].kx-page-a > :not([data-css='topbar']):not([data-css='notice']) { animation: kxPageA .5s cubic-bezier(.22,1,.36,1); }
[data-css='app-content'].kx-page-b > :not([data-css='topbar']):not([data-css='notice']) { animation: kxPageB .5s cubic-bezier(.22,1,.36,1); }

/* ---- Base typography ---- */
body,
.adminjs_Box,
.adminjs_Text,
[data-css='app'] {
  font-family: var(--kx-font-body, 'Inter', system-ui, sans-serif);
}

/* AdminJS's global reset pins body line-height to 16px; the mockup relies on
   the browser default (`normal`, ≈1.4) everywhere except where set inline.
   This single default cascades into every heading/paragraph and is why blocks
   measured 8px shorter than the mockup. AdminJS's own controls set their
   line-height explicitly, so they are unaffected. */
body { line-height: normal; }
/* The app/app-content design-system Boxes re-pin line-height:16px (theme
   default) — neutralize at the shell level so pages inherit `normal`. */
[data-css='app'],
[data-css='app-content'] {
  line-height: normal !important;
}

h1, h2, h3, h4, h5,
.adminjs_H1, .adminjs_H2, .adminjs_H3, .adminjs_H4, .adminjs_H5,
[class*='adminjs_H1'], [class*='adminjs_H2'], [class*='adminjs_H3'],
[class*='adminjs_H4'], [class*='adminjs_H5'] {
  /* Pulse UI headings are Inter semibold; the serif display face (Playfair)
     is applied inline only on the few hero/display moments. */
  font-family: var(--kx-font-head, 'Inter', sans-serif) !important;
}
/* Display serif moments (Pulse hero style). The heading rule above is
   !important (it has to beat styled-components), so inline fontFamily loses —
   headings that want the serif carry this class instead. */
.kx-display,
h1.kx-display, h2.kx-display, h3.kx-display {
  font-family: var(--kx-font-display, 'Playfair Display', Georgia, serif) !important;
}

/* Form controls: theme.font covers design-system <Input>, but raw <input>s
   (e.g. react-select's internal text field) fall back to the UA font. Pin the
   base font on all form controls so nothing renders in Arial/Roboto. Scoped to
   form elements only — never display serif or mono IDs. */
input, select, textarea, button, optgroup {
  font-family: var(--kx-font-body, 'Inter', system-ui, sans-serif);
}

/* ---- App canvas ---- */
[data-css='app'],
[data-css='app-content'] {
  background: var(--kx-bg-grad) !important;
}
/* (no app-content top padding — the mockup header sits flush at y=0) */

/* ============================================================
   SIDEBAR (walnut)
   The rail is now a full component override (components/sidebar.tsx) with the
   mockup's exact inline styles — no CSS overrides needed here. Only the
   non-inlineable bits live in CSS: hidden nav scrollbar (mockup .kx-nav) and
   the main-content scrollbar (mockup .kx-scroll).
   ============================================================ */
.kx-nav::-webkit-scrollbar { width: 0; }
.kx-scroll::-webkit-scrollbar,
[data-css='app-content']::-webkit-scrollbar { width: 10px; height: 10px; }
.kx-scroll::-webkit-scrollbar-thumb,
[data-css='app-content']::-webkit-scrollbar-thumb {
  background: var(--kx-scrollbar);
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.kx-scroll::-webkit-scrollbar-thumb:hover,
[data-css='app-content']::-webkit-scrollbar-thumb:hover {
  background: var(--kx-scrollbar-hover);
  background-clip: padding-box;
  border: 3px solid transparent;
}

/* ============================================================
   TOP BAR
   ============================================================ */
[data-css='topbar'] {
  /* Mockup's header sits OUTSIDE the scroll area (only <main> scrolls); AdminJS
     scrolls the whole app-content column, so pin the header to the top of it. */
  position: sticky !important;
  top: 0 !important;
  min-height: 70px !important;
  background: var(--kx-topbar-bg) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border-bottom: 1px solid var(--kx-topbar-border) !important;
  box-shadow: none !important;
}
[data-css='topbar'] .adminjs_Text { color: var(--kx-ink) !important; }

/* ============================================================
   CARDS / BOXES  (white surfaces on the canvas)
   ============================================================ */
[data-css='app-content'] section[class*='adminjs_Box'] {
  border-radius: 12px;
}

/* Generic elevated container boxes inside content */
[data-css='app-content'] .adminjs_Box[bg='white'],
[data-css='app-content'] .adminjs_Box[variant='container'],
[data-css='app-content'] .adminjs_Box[variant='card'] {
  background: var(--kx-card) !important;
  border: 1px solid var(--kx-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--kx-shadow-card) !important;
}

/* ============================================================
   TABLES (records list)
   ============================================================ */
table thead th,
[data-css='app-content'] th {
  background: var(--kx-card-3) !important;
  color: var(--kx-muted) !important;
  font-family: var(--kx-font-body, 'Inter', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: none !important;
}
table tbody tr { border-top: 1px solid var(--kx-row-line) !important; }
table tbody tr:hover { background: var(--kx-card-2) !important; }
table tbody td { color: var(--kx-ink-2) !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
[data-css='app-content'] button[color='primary'],
[data-css='app-content'] a[color='primary'] {
  background: var(--kx-green-grad) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: var(--kx-shadow-green) !important;
  color: #fff !important;
  font-family: var(--kx-font-body, 'Inter', sans-serif) !important;
  font-weight: 600 !important;
}

/* ============================================================
   INPUTS
   ============================================================ */
[data-css='app-content'] input:not([type='checkbox']):not([type='radio']),
[data-css='app-content'] select,
[data-css='app-content'] textarea {
  border-radius: 8px !important;
  border: 1px solid var(--kx-border) !important;
  background: var(--kx-card) !important;
  color: var(--kx-ink-2) !important;
}
[data-css='app-content'] input:focus,
[data-css='app-content'] select:focus,
[data-css='app-content'] textarea:focus {
  border-color: var(--kx-green) !important;
  box-shadow: 0 0 0 3px rgba(217, 91, 43, 0.14) !important;
  outline: none !important;
}

/* Inputs that live INSIDE a styled wrapper (icon + input composed in one
   bordered pill — search boxes, OTP fields, composer bars…): the WRAPPER is
   the box. Mark the wrapper with .kx-inputwrap — the inner control loses the
   forced border/background above, and the focus ring moves to the wrapper. */
.kx-inputwrap input:not([type='checkbox']):not([type='radio']),
.kx-inputwrap select,
.kx-inputwrap textarea,
.kx-inputwrap input:focus,
.kx-inputwrap select:focus,
.kx-inputwrap textarea:focus {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.kx-inputwrap {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kx-inputwrap:focus-within {
  border-color: var(--kx-green) !important;
  box-shadow: 0 0 0 3px rgba(217, 91, 43, 0.14) !important;
}

/* ============================================================
   DARK-MODE LEFTOVERS — AdminJS design-system components read their colors
   from the static branding.theme (styled-components), which doesn't follow
   the --kx-* flip. These rules re-anchor the common DS text/surfaces onto the
   variables when dark is active. Scoped to the dark attribute so light mode
   keeps the theme-driven values untouched.
   ============================================================ */
html[data-kx-theme='dark'] [data-css='app-content'] {
  color: var(--kx-ink-2);
}
html[data-kx-theme='dark'] [data-css='app-content'] label,
html[data-kx-theme='dark'] [data-css='app-content'] .adminjs_Label,
html[data-kx-theme='dark'] [data-css$='filter-drawer'] label {
  color: var(--kx-muted) !important;
}
html[data-kx-theme='dark'] [data-css='app-content'] h1,
html[data-kx-theme='dark'] [data-css='app-content'] h2,
html[data-kx-theme='dark'] [data-css='app-content'] h3,
html[data-kx-theme='dark'] [data-css='app-content'] h4,
html[data-kx-theme='dark'] [data-css='app-content'] h5 {
  color: var(--kx-ink);
}
/* react-select (DS Select) paints its control/menu white from JS — pin the
   containers to the card surface in dark. Class names below are the stable
   react-select public classNames (adminjs sets classNamePrefix). */
html[data-kx-theme='dark'] [data-css='app-content'] [class*='__control'],
html[data-kx-theme='dark'] [data-css$='filter-drawer-content'] [class*='__control'],
html[data-kx-theme='dark'] [data-css='app-content'] .adminjs_Select [class*='-control'],
html[data-kx-theme='dark'] [data-css$='filter-drawer-content'] .adminjs_Select [class*='-control'] {
  background: var(--kx-card) !important;
  border-color: var(--kx-input-border) !important;
  color: var(--kx-ink-2) !important;
}
html[data-kx-theme='dark'] [class*='__menu'],
html[data-kx-theme='dark'] [class*='-menu'] {
  background: var(--kx-card-2) !important;
  color: var(--kx-ink-2) !important;
}
html[data-kx-theme='dark'] [class*='__single-value'],
html[data-kx-theme='dark'] [class*='__input-container'],
html[data-kx-theme='dark'] [class*='-singleValue'],
html[data-kx-theme='dark'] [class*='-Input'] {
  color: var(--kx-ink-2) !important;
}
html[data-kx-theme='dark'] [class*='__option']:hover,
html[data-kx-theme='dark'] [class*='__option--is-focused'],
html[data-kx-theme='dark'] [class*='-option']:hover {
  background: var(--kx-card-3) !important;
}

/* ============================================================
   BESPOKE RECORDS BROWSER (list / show / edit / new overrides)
   Scoped to .kx-records / .kx-records-form so it never leaks into
   the operational pages. See docs/context/admin-redesign.md.
   ============================================================ */
/* Native form inputs in the bespoke edit/new form → mockup pill inputs.
   (react-select renders its own container; those are left to the design system.) */
.kx-records-form .adminjs_FormGroup { margin-bottom: 14px !important; }
.kx-records-form .adminjs_FormGroup input:not([type='checkbox']):not([type='radio']):not([type='file']),
.kx-records-form .adminjs_FormGroup > div > input,
.kx-records-form .adminjs_FormGroup textarea {
  border-radius: 8px !important;
  border: 1px solid var(--kx-input-border, #eaddcb) !important;
  background: var(--kx-card) !important;
}
/* Inline validation messages in bespoke forms */
.kx-records-form .adminjs_FormMessage { color: var(--kx-danger) !important; font-weight: 700 !important; }
/* Array "add new item" sections + nested item cards, softened to the palette */
.kx-records-form section[class*='adminjs'] fieldset,
.kx-records-form .adminjs_Section {
  border-radius: 8px !important;
  border-color: var(--kx-border) !important;
  background: var(--kx-card-2) !important;
}
/* Keep property labels on-brand inside bespoke views */
.kx-records-form .adminjs_Label { color: var(--kx-muted) !important; }

/* ---- Records list: truncate cells instead of colliding with the next column.
   Grid tracks are minmax(120px,1fr); .kx-cell (min-width:0, overflow:hidden)
   caps the cell, and the innermost text nodes get nowrap+ellipsis. The full
   value is exposed via the cell's native title tooltip (set in list.tsx). ---- */
.kx-records .kx-cell,
.kx-records .kx-cell section {
  min-width: 0;
}
.kx-records .kx-cell section,
.kx-records .kx-cell a,
.kx-records .kx-cell > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badges / ref pills: keep the pill chrome, truncate the text inside so a long
   enum ("UNDER_MEDICAL_REVIEW") ellipsizes instead of clipping mid-glyph. */
.kx-records .kx-cell [class*='adminjs_Badge'],
.kx-records .kx-cell span[class*='Badge'] {
  display: inline-block;
  box-sizing: border-box; /* content-box would push the pill's padding past max-width */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- Stock AdminJS drawers (generic): any DrawerPortal drawer that is NOT
   the bespoke-themed filter drawer (e.g. record actions with showInDrawer)
   previously rendered with the default styled-components look — white-on-white
   in dark mode, square corners. Anchor every drawer to the theme. ---- */
[data-css$='drawer'] {
  background: var(--kx-canvas, #faf8f5) !important;
  border-left: 1px solid var(--kx-border) !important;
  box-shadow: -28px 0 60px -30px rgba(0, 0, 0, 0.45) !important;
  color: var(--kx-ink-2) !important;
}

/* ---- Filter drawer: re-skin the stock AdminJS drawer to the redesign
   palette (canvas surface, ink text, pill inputs, terracotta apply). Uses the
   stable data-css hooks from filter-drawer.tsx. ---- */
[data-css$='filter-drawer'] {
  background: var(--kx-canvas, #faf8f5) !important;
  border-left: 1px solid var(--kx-border) !important;
  box-shadow: -28px 0 60px -30px rgba(0, 0, 0, 0.45) !important;
}
[data-css$='filter-drawer'] h1,
[data-css$='filter-drawer'] h2,
[data-css$='filter-drawer'] h3,
[data-css$='filter-drawer'] label,
[data-css$='filter-drawer'] [class*='adminjs_Label'] {
  color: var(--kx-ink, #1a1410) !important;
  font-family: var(--kx-font-body, 'Inter', sans-serif) !important;
}
[data-css$='filter-drawer-content'] input,
[data-css$='filter-drawer-content'] select,
[data-css$='filter-drawer-content'] textarea {
  border-radius: 8px !important;
  border: 1px solid var(--kx-input-border, #e2d9ce) !important;
  background: var(--kx-card, #ffffff) !important;
  color: var(--kx-ink, #1a1410) !important;
}
/* react-select paints its own box (the control container) — its internal
   search <input> must NEVER receive the forced input skin above, or a second
   bordered pill appears inside the control. Two class conventions exist:
   classNamePrefix'd `…__control` and emotion `css-<hash>-control` /
   `css-<hash>-Input` (the stock AdminJS filter drawer + DS Select use the
   latter). Selectors are built to out-specify every forced-border rule
   (app-content, filter drawer, records form). */
[data-css='app-content'] [class*='__control'] input:not([type='checkbox']):not([type='radio']),
[data-css='app-content'] [class*='-Input'] input:not([type='checkbox']):not([type='radio']),
[data-css$='filter-drawer-content'] [class*='__control'] input:not([type='checkbox']):not([type='radio']),
[data-css$='filter-drawer-content'] [class*='-Input'] input:not([type='checkbox']):not([type='radio']),
.kx-records-form .adminjs_FormGroup [class*='__control'] input:not([type='checkbox']):not([type='radio']):not([type='file']),
.kx-records-form .adminjs_FormGroup [class*='-Input'] input:not([type='checkbox']):not([type='radio']):not([type='file']),
[class*='__control'] input,
[class*='-Input'] input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: inherit !important;
}
/* …and the control container itself gets the standard input skin (react-select
   ships an off-scale 2px radius + its own greys). :focus-within carries the
   terracotta ring, matching plain inputs. */
.adminjs_Select [class*='-control'],
.adminjs_Select [class*='__control'] {
  border: 1px solid var(--kx-input-border, #e2d9ce) !important;
  border-radius: 8px !important;
  background: var(--kx-card, #ffffff) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.adminjs_Select [class*='-control']:focus-within,
.adminjs_Select [class*='__control']:focus-within {
  border-color: var(--kx-green) !important;
  box-shadow: 0 0 0 3px rgba(217, 91, 43, 0.14) !important;
}

/* react-datepicker (DS DatePicker) — same "box inside a box" trap as
   react-select: AdminJS wraps the field in `.react-datepicker-wrapper` (its own
   1px border + 2px radius) AND the inner <input> then picks up the forced input
   skin above, so a rounded pill renders inside the wrapper box. Fix: the WRAPPER
   is the box (standard input skin + :focus-within ring); the inner input goes
   borderless/transparent. The strip selectors must OUT-SPECIFY the forced-border
   rules (app-content `:not()` chains, filter drawer, records form) — mirrors the
   react-select fix above. Scoped to app-content + filter drawer → all forms. */
[data-css='app-content'] .react-datepicker-wrapper,
[data-css$='filter-drawer-content'] .react-datepicker-wrapper {
  border: 1px solid var(--kx-input-border, #e2d9ce) !important;
  border-radius: 8px !important;
  background: var(--kx-card, #ffffff) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-css='app-content'] .react-datepicker-wrapper:focus-within,
[data-css$='filter-drawer-content'] .react-datepicker-wrapper:focus-within {
  border-color: var(--kx-green) !important;
  box-shadow: 0 0 0 3px rgba(217, 91, 43, 0.14) !important;
}
/* the input-container is inline-block by default → make it fill the wrapper so
   the field is clickable/typable across its full width. */
[data-css='app-content'] .react-datepicker__input-container,
[data-css$='filter-drawer-content'] .react-datepicker__input-container {
  display: block !important;
}
[data-css='app-content'] .react-datepicker-wrapper input:not([type='checkbox']):not([type='radio']),
[data-css$='filter-drawer-content'] .react-datepicker-wrapper input:not([type='checkbox']):not([type='radio']),
.kx-records-form
  .adminjs_FormGroup
  .react-datepicker-wrapper
  input:not([type='checkbox']):not([type='radio']):not([type='file']) {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px !important;
}

/* Both drawer buttons ship as color='primary', so these need to OUT-SPECIFY
   the generic `[data-css='app-content'] button[color='primary']` rule above —
   otherwise Reset renders as a second filled primary button. */
[data-css='app-content'] button[data-css$='filter-drawer-button-apply'],
button[data-css$='filter-drawer-button-apply'] {
  background: var(--kx-green-grad) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 600 !important;
}
[data-css='app-content'] button[data-css$='filter-drawer-button-reset'],
button[data-css$='filter-drawer-button-reset'] {
  background: var(--kx-card, #ffffff) !important;
  border: 1px solid var(--kx-border-btn, #e2d9ce) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--kx-ghost-fg, #6e6154) !important;
  font-weight: 600 !important;
}

/* ---- Events Calendar · Agenda row Edit/Clone actions ----
   Placement + motion referenced from the "Event List Actions" design (option 2a,
   the focused hover-reveal), adapted to the redesign tokens — NOT the mockup's
   palette verbatim. The actions share the seat-count slot instead of taking a
   reserved column, so the row never changes width on hover: at rest the count/
   progress meta shows; on pointer hover it fades left as Edit + Clone slide in
   over it (Clone trails Edit by 40ms). Touch devices (no hover) keep the buttons
   permanently visible. */
.kx-agenda-row {
  background: var(--kx-card, #fffdfa);
  border: 1px solid var(--kx-border, #efe6d8);
  box-shadow: 0 1px 2px rgba(74, 44, 26, 0.04);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.kx-agenda-meta {
  transition: opacity 0.13s ease, transform 0.15s cubic-bezier(0.2, 0, 0, 1);
}
.kx-agenda-actions {
  pointer-events: none;
}
.kx-agenda-btn {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity 0.15s cubic-bezier(0.2, 0, 0, 1), transform 0.15s cubic-bezier(0.2, 0, 0, 1),
    background 0.12s ease, border-color 0.12s ease;
}
.kx-agenda-btn--clone {
  transition-delay: 0.04s, 0.04s, 0s, 0s;
}
@media (hover: hover) {
  a.kx-agenda-row:hover {
    background: var(--kx-card-2, #fffdf8);
    border-color: var(--kx-border, #e4d9c4);
    box-shadow: 0 6px 20px rgba(80, 55, 20, 0.07);
  }
  a.kx-agenda-row:hover .kx-agenda-meta {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
  }
  a.kx-agenda-row:hover .kx-agenda-actions {
    pointer-events: auto;
  }
  a.kx-agenda-row:hover .kx-agenda-btn {
    opacity: 1;
    transform: translateX(0);
  }
  .kx-agenda-btn:hover {
    background: var(--kx-card-2, #fbf6ec) !important;
    border-color: var(--kx-border-btn, #d9cfbb) !important;
  }
}
@media (hover: none) {
  .kx-agenda-actions {
    pointer-events: auto;
  }
  .kx-agenda-btn {
    opacity: 1;
    transform: none;
  }
  .kx-agenda-meta {
    opacity: 0;
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kx-agenda-row,
  .kx-agenda-meta,
  .kx-agenda-btn {
    transition: none;
  }
}