/* =============================================================================
   Cibrai Dealroom — UI Polish (v2)
   Strategy: target Papermark's actual Tailwind class patterns with judicious
   !important on key visual properties (gradients, radius, shadow, transitions).
   ============================================================================= */

:root {
  --cib-indigo: #6366F1;
  --cib-violet: #8B5CF6;
  --cib-grad: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --cib-grad-hover: linear-gradient(135deg, #4F52E8 0%, #7C46F0 100%);
  --cib-danger-grad: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  --cib-wash: color-mix(in oklab, #6366F1 6%, transparent);
  --cib-wash-strong: color-mix(in oklab, #6366F1 12%, transparent);
  --cib-ring: color-mix(in oklab, #6366F1 35%, transparent);
  --cib-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cib-dur: 200ms;
  --cib-dur-xform: 300ms;
  --cib-shadow-md:
    0 2px 4px -2px rgb(17 24 39 / 0.08),
    0 8px 16px -4px rgb(17 24 39 / 0.08);
  --cib-shadow-lg:
    0 4px 8px -4px rgb(17 24 39 / 0.10),
    0 16px 32px -8px rgb(17 24 39 / 0.12);
  --cib-shadow-modal:
    0 4px 12px rgba(15, 23, 42, 0.08),
    0 24px 56px -12px rgba(15, 23, 42, 0.25);
}

/* ---- Typography + global refinement ---- */
html, body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
h1, h2, h3, .text-2xl, .text-3xl, .text-4xl {
  letter-spacing: -0.018em !important;
}
main h1, [role="main"] h1, .text-3xl, .text-4xl {
  font-weight: 650 !important;
  letter-spacing: -0.022em !important;
}
td, th, time {
  font-variant-numeric: tabular-nums;
}
::selection {
  background: color-mix(in oklab, #8B5CF6 35%, transparent);
}

/* ---- Custom scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, #6366F1 28%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, #6366F1 22%, transparent);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, #6366F1 40%, transparent); background-clip: padding-box; }

/* =============================================================================
   PRIMARY BUTTONS — target both bg-black (admin) and bg-white (visitor) CTAs
   ============================================================================= */
button[type="submit"].bg-black,
button[type="submit"].bg-gray-900,
button[type="submit"].bg-white,
button.bg-black:not([data-variant="outline"]):not([data-variant="ghost"]):not([data-variant="destructive"]),
button.bg-gray-900,
[class*="bg-black"]:is(button),
.bg-foreground:is(button) {
  background: var(--cib-grad) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: var(--cib-shadow-md), 0 0 0 1px rgb(99 102 241 / 0.5) inset !important;
  transition: transform var(--cib-dur-xform) var(--cib-ease),
              box-shadow var(--cib-dur) var(--cib-ease),
              filter var(--cib-dur) var(--cib-ease) !important;
}
button[type="submit"].bg-black:hover:not(:disabled),
button[type="submit"].bg-white:hover:not(:disabled),
button.bg-black:hover:not(:disabled),
button.bg-gray-900:hover:not(:disabled) {
  background: var(--cib-grad-hover) !important;
  transform: translateY(-1px);
  filter: brightness(1.04) saturate(1.05);
  box-shadow: var(--cib-shadow-lg), 0 8px 20px -6px color-mix(in oklab, #6366F1 50%, transparent) !important;
}
button[type="submit"]:active:not(:disabled),
button.bg-black:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
  transition-duration: 90ms !important;
}

/* =============================================================================
   VISITOR EMAIL GATE — frosted card on dark background
   ============================================================================= */
body:has(input[type="email"]:not([data-input-otp])) main > div > div:has(input[type="email"]) {
  padding: 36px 40px !important;
  border-radius: 18px !important;
  background: color-mix(in oklab, #ffffff 4%, transparent);
  border: 1px solid color-mix(in oklab, #8B5CF6 22%, transparent);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 24px 48px -8px rgba(99, 102, 241, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* =============================================================================
   INPUTS — soften corners, brand focus
   ============================================================================= */
input[type="email"],
input[type="text"]:not([data-input-otp]),
input[type="password"],
input[type="search"] {
  border-radius: 10px !important;
  transition: border-color var(--cib-dur) var(--cib-ease),
              box-shadow var(--cib-dur) var(--cib-ease) !important;
}
input[type="email"]:focus,
input[type="text"]:focus:not([data-input-otp]),
input[type="password"]:focus,
input[type="search"]:focus {
  border-color: var(--cib-indigo) !important;
  box-shadow: 0 0 0 4px var(--cib-ring) !important;
  outline: none !important;
}

/* =============================================================================
   CARDS / TABLES (admin pages) — subtle lift, refined borders
   ============================================================================= */
[class*="rounded-lg"][class*="border"]:is(div, article, section),
[class*="rounded-xl"][class*="border"]:is(div, article, section),
.card {
  border-radius: 14px !important;
  border-color: color-mix(in oklab, #6366F1 8%, #e5e7eb) !important;
  transition: transform var(--cib-dur-xform) var(--cib-ease),
              border-color var(--cib-dur) var(--cib-ease),
              box-shadow var(--cib-dur) var(--cib-ease) !important;
}
table { border-collapse: separate; border-spacing: 0; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in oklab, #ffffff 85%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid color-mix(in oklab, #6366F1 10%, #e5e7eb);
}
tbody tr {
  transition: background-color var(--cib-dur) var(--cib-ease),
              box-shadow var(--cib-dur) var(--cib-ease);
}
tbody tr:hover {
  background: var(--cib-wash) !important;
  box-shadow: inset 2px 0 0 var(--cib-indigo);
}

/* =============================================================================
   DATAROOM FILE LIST — subtle hover lift on link rows
   ============================================================================= */
li:has(> div > button), li:has([data-radix-collection-item]),
[role="row"]:has(a[href*="/d/"]) {
  border-radius: 12px;
  transition: background-color var(--cib-dur) var(--cib-ease),
              transform var(--cib-dur-xform) var(--cib-ease);
}

/* =============================================================================
   MODALS / DIALOGS — glass backdrop + refined shadow
   ============================================================================= */
[data-radix-dialog-overlay],
[role="dialog"] + [data-state],
.fixed.inset-0:has(+ [role="dialog"]) {
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}
[role="dialog"][data-state="open"],
[role="dialog"][data-state="open"] > div {
  border-radius: 16px !important;
  box-shadow: var(--cib-shadow-modal), 0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
  border: 1px solid color-mix(in oklab, #6366F1 8%, #e5e7eb) !important;
}

/* =============================================================================
   DROPDOWN MENUS — backdrop blur + brand-tinted hover
   ============================================================================= */
[role="menu"],
[data-radix-popper-content-wrapper] > div[role="menu"] {
  background: color-mix(in oklab, #ffffff 92%, transparent) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid color-mix(in oklab, #6366F1 10%, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
}
[role="menuitem"]:hover, [role="menuitem"][data-highlighted] {
  background: color-mix(in oklab, #6366F1 10%, transparent) !important;
  color: color-mix(in oklab, #6366F1 80%, #111827) !important;
}

/* =============================================================================
   SWITCHES (Radix) — brand gradient when checked
   ============================================================================= */
[role="switch"][data-state="checked"] {
  background: var(--cib-grad) !important;
  box-shadow: 0 0 0 4px color-mix(in oklab, #6366F1 18%, transparent);
}

/* =============================================================================
   TABS — pill indicator
   ============================================================================= */
html:not(.dark) [role="tablist"] {
  background: color-mix(in oklab, #6366F1 5%, #f3f4f6);
  border-radius: 10px;
  padding: 4px;
}
html.dark [role="tablist"] {
  background: color-mix(in oklab, #6366F1 8%, rgb(15 23 42));
  border-radius: 10px;
  padding: 4px;
}
html:not(.dark) [role="tab"][data-state="active"] {
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px -4px rgba(99, 102, 241, 0.25);
}

/* =============================================================================
   TOASTS (sonner)
   ============================================================================= */
[data-sonner-toast] {
  border-radius: 12px !important;
  border: 1px solid color-mix(in oklab, #6366F1 14%, #e5e7eb) !important;
  box-shadow: 0 8px 28px -8px rgba(15, 23, 42, 0.2), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  position: relative;
  overflow: hidden;
}
[data-sonner-toast]::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--cib-grad);
}

/* =============================================================================
   FOCUS RINGS — brand-tinted
   ============================================================================= */
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--cib-ring) !important;
  outline-offset: 2px;
  border-radius: 8px;
}

/* =============================================================================
   SIDEBAR — active-state indigo accent + hover wash
   Papermark sidebar uses data-active="true" + bg-gray-200 for active item.
   ============================================================================= */
a.bg-gray-100, a.bg-gray-200, a.bg-muted, a[aria-current="page"],
a[data-active="true"],
button[data-active="true"],
.peer\/menu-button[data-active="true"],
[data-sidebar-menu-button][data-active="true"] {
  background: var(--cib-wash-strong) !important;
  color: var(--cib-indigo) !important;
  position: relative;
}
a[data-active="true"]::before,
a.bg-gray-100::before,
a.bg-gray-200::before,
button[data-active="true"]::before,
[data-sidebar-menu-button][data-active="true"]::before {
  content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px; background: var(--cib-grad);
}
a:hover:not(.bg-gray-100):not(.bg-gray-200):not([aria-current="page"]):not([data-active="true"]):where(nav a, aside a, [data-sidebar] a) {
  background: var(--cib-wash) !important;
}

/* =============================================================================
   PDF VIEWER (visitor) — premium dark header
   ============================================================================= */
[class*="viewer"] header, [class*="viewer"] [class*="toolbar"] {
  border-bottom: 1px solid color-mix(in oklab, #8B5CF6 14%, transparent) !important;
}
[class*="viewer"] button:hover, [class*="viewer"] [role="button"]:hover {
  background: color-mix(in oklab, #8B5CF6 16%, transparent) !important;
  border-radius: 8px;
}

/* =============================================================================
   LINKS — subtle brand underline
   ============================================================================= */
a:not([role="button"]):not([class*="btn"]):not(.bg-black) {
  text-underline-offset: 3px;
  transition: text-decoration-color var(--cib-dur) var(--cib-ease);
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    transform: none !important;
  }
}

/* =============================================================================
   MOBILE POLISH (≤ 768px) — fix overflow, bigger tap targets, refined layout
   ============================================================================= */
@media (max-width: 768px) {
  /* Better hairlines on retina */
  :where(html, body) { -webkit-text-size-adjust: 100%; }

  /* Visitor dataroom banner — avoid title overlap.
     The banner is an aspect-ratio image; on mobile, force it to letterbox down
     rather than stretching, and ensure the Pinnacle title sits below. */
  :where([class*="dataroom"]) :where(img[alt*="Banner" i], img[alt*="banner" i]) {
    object-fit: cover !important;
    object-position: center !important;
    height: 100px !important;
    max-height: 30vh !important;
    width: 100% !important;
    border-radius: 12px !important;
  }
  /* Dataroom landing top section: stack vertically with spacing */
  :where(nav):has(img[alt*="Banner" i]) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  /* Force the title to be readable + not overlap */
  :where(nav):has(img[alt*="Banner" i]) :where(time, .text-xs) {
    color: rgba(255,255,255,0.7) !important;
  }

  /* Table cells: prevent horizontal overflow */
  :where(td, th) {
    max-width: 70vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  :where(td):has(a[href*="dealroom.cibrai.com"]),
  :where(td):has([class*="copy"]) {
    overflow: visible;
  }

  /* Bigger tap targets on icon buttons + menu items */
  :where(button[aria-label], button:has(svg:only-child), .icon-button, [role="menuitem"]) {
    min-height: 44px;
    min-width: 44px;
  }

  /* Bottom navigation: smoother gradient FAB */
  :where(nav):has(a[href="/datarooms"]) {
    border-top: 1px solid color-mix(in oklab, var(--cib-indigo) 12%, #e5e7eb);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    background: color-mix(in oklab, #ffffff 88%, transparent);
  }
  /* Active bottom-nav tab indicator */
  :where(nav a[aria-current="page"]):not([class*="data-active"]) :where(svg) {
    color: var(--cib-indigo) !important;
  }

  /* Modals: full-width with bottom-sheet feel */
  :where([role="dialog"][data-state="open"]) {
    border-radius: 20px 20px 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    bottom: 0 !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    animation: cib-sheet-up 280ms var(--cib-ease) !important;
  }
  @keyframes cib-sheet-up {
    from { opacity: 0; transform: translateX(-50%) translateY(40%); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* Forms: larger inputs for thumbs */
  :where(input[type="email"], input[type="text"], input[type="password"]) {
    padding: 14px 16px !important;
    font-size: 16px !important; /* prevents iOS auto-zoom on focus */
  }

  /* Primary CTAs full-width on mobile */
  :where(form button[type="submit"]) {
    width: 100% !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }

  /* Headings: tighter on mobile */
  :where(main h1, .text-3xl, .text-4xl) {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.18 !important;
  }
  :where(main h2) {
    font-size: clamp(1.125rem, 4.5vw, 1.5rem) !important;
  }

  /* Sidebar drawer (when open via toggle) — frosted edge */
  :where([data-sidebar][data-state="open"]) {
    box-shadow: 0 0 0 1px rgba(99,102,241,0.08), 4px 0 24px -4px rgba(15,23,42,0.18) !important;
  }

  /* PDF viewer header: compact */
  :where([class*="viewer"]) :where(header, [class*="toolbar"]) {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  /* Cards: edge-to-edge with smaller radius */
  :where(.card, [class*="rounded-lg"][class*="border"]:is(div, article, section)) {
    border-radius: 12px !important;
  }

  /* Hide hover-only effects (no hover state on touch) */
  @media (hover: none) {
    :where(button[type="submit"]):hover {
      transform: none !important;
    }
    :where(.card, [class*="rounded-lg"]):hover {
      transform: none !important;
    }
  }
}

/* =============================================================================
   SMALLER PHONES (≤ 480px)
   ============================================================================= */
@media (max-width: 480px) {
  :where(main, [role="main"]) {
    padding-inline: 12px !important;
  }
  :where(form):has(input[type="email"]) {
    padding: 24px 20px !important;
    margin: 12px !important;
  }
}

/* =============================================================================
   DARK-MODE READABILITY FIXES
   Papermark/next-themes sets class="dark" on <html>. Several upstream
   components ship with light-only Tailwind classes (bg-white, text-black,
   gray-50/100 etc.) that become unreadable on a dark page. Restore contrast
   without changing layout.
   ============================================================================= */

/* Sidebar bottom-left "Connect Slack" card (role=complementary) — the most
   obvious offender Andrew flagged. Switch its white bg + dark text to a dark
   slate surface so it reads against the dark sidebar. */
html.dark :where([role="complementary"], aside) {
  background-color: rgb(15 23 42) !important;  /* slate-800/60 */
  border-color: rgb(51 65 85) !important;            /* slate-700 */
  color: rgb(241 245 249) !important;                /* slate-100 */
}
html.dark :where([role="complementary"], aside) :where(p, span, div) {
  color: rgb(203 213 225) !important;                /* slate-300 */
}
html.dark :where([role="complementary"], aside) :where(button) {
  background-color: rgb(51 65 85) !important;        /* slate-700 */
  color: rgb(241 245 249) !important;
  border-color: rgb(71 85 105) !important;
}
html.dark :where([role="complementary"], aside) :where(button:hover) {
  background-color: rgb(71 85 105) !important;       /* slate-600 */
}

/* Tables — header row + hover. shadcn ships bg-gray-50/hover:bg-gray-100
   which are nearly white in dark mode. */
html.dark :where(table thead tr) {
  background-color: rgb(30 41 59) !important;
}
html.dark :where(table thead th, table thead [role="columnheader"]) {
  color: rgb(226 232 240) !important;                /* slate-200 */
}
html.dark :where(table tbody tr) {
  border-color: rgb(51 65 85 / 0.6) !important;
}
html.dark :where(table tbody tr:hover) {
  background-color: rgb(30 41 59 / 0.4) !important;
}
html.dark :where(table tbody td) {
  color: rgb(203 213 225) !important;
}

/* Cards using bg-white that should be dark. Conservative — only swap when
   it's not a dialog/menu/tooltip surface (those already get their own bg). */
html.dark :where(
  div[class*="bg-white"]:not([class*="bg-white/0"]):not([role="dialog"]):not([role="menu"]):not([role="tooltip"])
) {
  background-color: rgb(15 23 42) !important;        /* slate-900 */
  color: rgb(226 232 240) !important;
}

/* Card borders + hairlines that disappear in dark mode. */
html.dark :where([class*="rounded-lg"][class*="border"]) {
  border-color: rgb(51 65 85) !important;            /* slate-700 */
}

/* Inputs. */
html.dark :where(input[type="email"], input[type="text"], input[type="password"], input[type="search"], textarea) {
  background-color: rgb(15 23 42) !important;
  color: rgb(241 245 249) !important;
  border-color: rgb(51 65 85) !important;
}
html.dark :where(input::placeholder, textarea::placeholder) {
  color: rgb(100 116 139) !important;                /* slate-500 */
}

/* Dropdown / popover menus. */
html.dark :where([role="menu"], [role="listbox"]) {
  background-color: rgb(15 23 42) !important;
  border-color: rgb(51 65 85) !important;
  color: rgb(226 232 240) !important;
}
html.dark :where([role="menuitem"]:hover, [role="menuitemradio"]:hover, [role="option"]:hover) {
  background-color: rgb(30 41 59) !important;
}

/* Labels + muted text that were too dim against dark canvas. */
html.dark :where(label, .text-muted-foreground) {
  color: rgb(203 213 225) !important;
}


/* DARK-MODE PASS 2 (table cells, tabs, inputs) */
/* Table cells — <th> and <td> often have their own bg-card/bg-gray classes
   that override our <tr> rule. Set transparent so the parent <tr>/thead bg
   shows through, and force a readable text color. */
html.dark :where(table thead th, table thead [role="columnheader"]) {
  background-color: rgb(30 41 59) !important;   /* slate-800 (one step lighter than slate-900) */
  color: rgb(241 245 249) !important;           /* slate-100 */
  border-color: rgb(51 65 85) !important;
}
html.dark :where(table tbody td) {
  background-color: transparent !important;
  color: rgb(203 213 225) !important;           /* slate-300 */
}
html.dark :where(table thead) {
  background-color: rgb(30 41 59) !important;
}

/* Radix Tabs — active tab gets aria-selected="true" OR data-state="active".
   Without our override, the active style is `bg-white` which is invisible
   over a near-white surrounding container. */
html.dark :where([role="tab"][data-state="active"], [role="tab"][aria-selected="true"]) {
  background-color: rgb(15 23 42) !important;
  color: rgb(241 245 249) !important;
  border-color: rgb(99 102 241) !important;     /* indigo-500 accent for the active edge */
}
html.dark :where([role="tab"]:not([data-state="active"]):not([aria-selected="true"])) {
  color: rgb(148 163 184) !important;           /* slate-400 inactive */
}
html.dark :where([role="tab"]:hover) {
  color: rgb(226 232 240) !important;
  background-color: rgb(30 41 59 / 0.5) !important;
}

/* Search inputs and any input still rendered translucent. */
html.dark :where(
  input[type="search"], input[placeholder*="earch"], input[placeholder*="Search"],
  [role="searchbox"], input[type="text"]:not([readonly])
) {
  background-color: rgb(15 23 42) !important;
  color: rgb(241 245 249) !important;
  border-color: rgb(51 65 85) !important;
}

/* Tailwind bg-card semantic class — used in shadcn for card surfaces.
   The CSS variable --card resolves to white in some Papermark scopes
   that don't pick up the .dark class properly. Force dark. */
html.dark :where(.bg-card, [class~="bg-card"]) {
  background-color: rgb(15 23 42) !important;
  color: rgb(226 232 240) !important;
}

/* Modal/dialog dark surface (Radix uses [role="dialog"]). Many Papermark
   modals show as white because Tailwind --background is set per-portal. */
html.dark :where([role="dialog"]) {
  background-color: rgb(15 23 42) !important;
  color: rgb(241 245 249) !important;
  border-color: rgb(51 65 85) !important;
}
html.dark :where([role="dialog"] :where(div, p, span, label)) {
  color: inherit;
}

/* Sortable column-header buttons inside thead — they ship with their own
   text-foreground class that should resolve dark text in dark mode but
   sometimes doesn't. Force slate-200. */
html.dark :where(thead button) {
  color: rgb(226 232 240) !important;
}

/* "+ Add Document" / generic primary buttons with bg-primary that, in
   Papermark's dark theme, resolve to a near-white surface — give them
   the indigo gradient we already use elsewhere so they pop on the dark
   canvas instead of camouflaging. */
html.dark :where(button[class*="bg-primary"]):not([disabled]) {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
  color: white !important;
  border: 0 !important;
  box-shadow: 0 1px 3px rgba(99,102,241,0.4), 0 1px 2px rgba(0,0,0,0.3) !important;
}
html.dark :where(button[class*="bg-primary"]:not([disabled]):hover) {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
  transform: translateY(-1px);
}

/* "Tags" / pill-style outline buttons in dark mode need a visible border. */
html.dark :where(button[class*="bg-secondary"], button[variant="outline"], button.outline) {
  background-color: rgb(30 41 59) !important;
  color: rgb(226 232 240) !important;
  border: 1px solid rgb(51 65 85) !important;
}