/**
 * Traqx - Tabler Theme Customization
 * Professional Light Theme for Pharma Industry
 *
 * Design Goals:
 * - Clean, professional appearance
 * - High readability and accessibility
 * - Blue accent color for brand identity (#026CFF)
 * - Light sidebar for navigation clarity
 */

/* ==========================================================================
   Google Fonts Import - DM Sans
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ==========================================================================
   CSS Custom Properties - Traqx Light Theme
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Brand Colors - Blue Spectrum (Traqx Brand #026CFF)
     ------------------------------------------------------------------------- */
  --traqx-blue-900: #01337A;
  --traqx-blue-800: #014199;
  --traqx-blue-700: #0256CC;
  --traqx-blue-600: #026CFF;
  --traqx-blue-500: #3385FF;
  --traqx-blue-400: #66A3FF;
  --traqx-blue-300: #99C2FF;
  --traqx-blue-200: #CCE0FF;
  --traqx-blue-100: #E5F0FF;
  --traqx-blue-50: #F0F7FF;

  /* -------------------------------------------------------------------------
     Shadows - Blue-tinted shadows matching slate spectrum
     Using blue-slate (128, 150, 181) for harmonious shadows
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgba(128, 150, 181, 0.2);
  --shadow-sm:
    0 1px 2px 0 rgba(128, 150, 181, 0.2);
  --shadow:
    0 1px 3px 0 rgba(128, 150, 181, 0.3),
    0 1px 2px -1px rgba(128, 150, 181, 0.3);
  --shadow-md:
    0 4px 6px -1px rgba(128, 150, 181, 0.35),
    0 2px 4px -2px rgba(128, 150, 181, 0.3);
  --shadow-lg:
    0 10px 15px -3px rgba(128, 150, 181, 0.35),
    0 4px 6px -4px rgba(128, 150, 181, 0.3);
  --shadow-xl:
    0 20px 25px -5px rgba(128, 150, 181, 0.35),
    0 8px 10px -6px rgba(128, 150, 181, 0.3);
  --shadow-2xl:
    0 25px 50px -12px rgba(128, 150, 181, 0.5);
  /* Directional cast for edge-docked chrome (collapsed sidebar strip) */
  --shadow-inline-end: 2px 0 10px rgba(128, 150, 181, 0.25);
  /* Downward-only cast: a header/toolbar visibly "above" the list below it */
  --shadow-below: 0 4px 8px -4px rgba(128, 150, 181, 0.4);
  /* Brand-tinted hover lift (collapse rails in the agent workspace) */
  --shadow-primary-md: 0 4px 10px rgba(2, 108, 255, 0.12);

  /* -------------------------------------------------------------------------
     Neutral Colors - Blue-tinted Slate Spectrum
     Harmonized with Traqx Blue for cohesive appearance
     ------------------------------------------------------------------------- */
  --gxp-slate-900: #0C1525;
  --gxp-slate-800: #162033;
  --gxp-slate-700: #2A3A4F;
  --gxp-slate-600: #3E5068;
  --gxp-slate-500: #566A8A;
  --gxp-slate-400: #8096B5;
  --gxp-slate-300: #B3C4DB;
  --gxp-slate-200: #D9E3EE;
  --gxp-slate-100: #EDF2F7;
  --gxp-slate-50: #F6F9FC;

  /* -------------------------------------------------------------------------
     Status Colors
     ------------------------------------------------------------------------- */
  --gxp-success: #10B981;
  --gxp-warning: #F59E0B;
  --gxp-warning-700: #B45309; /* readable warning text on light backgrounds */
  --gxp-warning-100: #FEF3C7; /* pending-badge background */
  --gxp-danger: #EF4444;
  --gxp-info: #0EA5E9;

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --tblr-font-sans-serif: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tblr-body-font-family: var(--tblr-font-sans-serif);

  /* -------------------------------------------------------------------------
     Border Radius (reduced by 25% for sharper appearance)
     ------------------------------------------------------------------------- */
  --tblr-border-radius: 4px;
  --tblr-border-radius-sm: 2px;
  --tblr-border-radius-lg: 6px;
  --tblr-border-radius-xl: 9px;
  --tblr-border-radius-pill: 9999px;

  /* -------------------------------------------------------------------------
     Z-Index Scale (below Tabler's modal range, 1050+)
     ------------------------------------------------------------------------- */
  --z-popover: 10;

  /* -------------------------------------------------------------------------
     Light Theme Colors (Default)
     ------------------------------------------------------------------------- */
  --tblr-body-color: var(--gxp-slate-800);
  --tblr-body-color-rgb: 30, 41, 59;
  --tblr-body-bg: var(--gxp-slate-50);
  --tblr-body-bg-rgb: 248, 250, 252;

  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-secondary: var(--gxp-slate-50);
  --tblr-bg-surface-tertiary: var(--gxp-slate-100);

  --tblr-secondary-bg: var(--gxp-slate-100);
  --tblr-tertiary-bg: var(--gxp-slate-50);

  --tblr-emphasis-color: var(--gxp-slate-900);
  --tblr-secondary-color: var(--gxp-slate-600);
  --tblr-tertiary-color: var(--gxp-slate-500);
  --tblr-muted: var(--gxp-slate-500);

  /* Primary - Traqx Blue */
  --tblr-primary: var(--traqx-blue-600);
  --tblr-primary-rgb: 2, 108, 255;
  --tblr-primary-text-emphasis: var(--traqx-blue-700);
  --tblr-primary-bg-subtle: var(--traqx-blue-50);
  --tblr-primary-border-subtle: var(--traqx-blue-200);

  /* Success */
  --tblr-success: var(--gxp-success);
  --tblr-success-rgb: 16, 185, 129;

  /* Warning */
  --tblr-warning: var(--gxp-warning);
  --tblr-warning-rgb: 245, 158, 11;

  /* Danger */
  --tblr-danger: var(--gxp-danger);
  --tblr-danger-rgb: 239, 68, 68;

  /* Info */
  --tblr-info: var(--gxp-info);
  --tblr-info-rgb: 14, 165, 233;

  /* Borders */
  --tblr-border-color: var(--gxp-slate-200);
  --tblr-border-color-translucent: rgba(0, 0, 0, 0.08);

  /* Links */
  --tblr-link-color: var(--traqx-blue-600);
  --tblr-link-hover-color: var(--traqx-blue-700);

  /* Shadows - using Tailwind-style multi-layer shadows */
  --tblr-shadow-input: none;
  --tblr-shadow-dropdown: var(--shadow-xl);
  --tblr-box-shadow: var(--shadow);
  --tblr-box-shadow-sm: var(--shadow-sm);
  --tblr-box-shadow-lg: var(--shadow-xl);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

/* Tabler ships `:root { margin-left: calc(-100% + 100vw) }` to keep
   content visually centred when a vertical scrollbar appears. The side
   effect: the moment a page becomes long enough to overflow, the
   entire html element shifts 15px right — and pages without overflow
   sit flush left. Inside a tabbed cockpit (where one tab fits the
   viewport and another doesn't) this jump is very visible.

   We turn it off and reserve the scrollbar gutter instead, so the
   layout stays stable regardless of content height. */
html {
  scrollbar-gutter: stable;
  margin-left: 0 !important;
}

body {
  background-color: var(--gxp-slate-50);
  color: var(--gxp-slate-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 450;
}

/* Ensure all text has better rendering */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Page Layout
   ========================================================================== */

.page-wrapper {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-wrapper > .container-xl {
  flex: 1;
}

.page-header {
  background-color: transparent;
}

.page-title {
  color: var(--gxp-slate-900);
  font-weight: 600;
  margin-bottom: 0;
  display: inline;
  background-image: linear-gradient(
    168deg,
    rgba(128, 150, 181, 0) 0%,
    rgba(128, 150, 181, 0.16) 4%,
    rgba(128, 150, 181, 0.13) 10%,
    rgba(128, 150, 181, 0.15) 50%,
    rgba(128, 150, 181, 0.13) 90%,
    rgba(128, 150, 181, 0.16) 96%,
    rgba(128, 150, 181, 0) 100%
  );
  background-size: 100% 45%;
  background-repeat: no-repeat;
  background-position: 0 85%;
  padding: 0 6px;
  margin-left: -6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.page-back-link {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gxp-slate-400);
  text-decoration: none;
  margin-bottom: -4px;
  margin-top: -16px;
  transition: color 0.15s ease;
}

.page-back-link:hover {
  color: var(--traqx-blue-600);
}

.page-subtitle {
  margin-top: -2px;
}

.page-header-actions {
  display: flex;
  gap: 8px;
}

.page-header-actions-highlighted {
  background-color: #ffffff;
  padding: 8px 12px;
  border-radius: var(--tblr-border-radius-xl);
  border: 1px solid var(--gxp-slate-200);
}

/* ==========================================================================
   Cards - Clean White with Refined Shadows
   ========================================================================== */

.card {
  --tblr-card-bg: #ffffff;
  --tblr-card-border-color: rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--shadow-md);
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--traqx-blue-100);
  color: var(--traqx-blue-700);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.card-footer {
  background-color: rgba(0, 0, 0, 0.02);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.card-title {
  color: var(--gxp-slate-900);
  font-weight: 600;
}

/* Card title inside card-header inherits header styling */
.card-header .card-title {
  color: inherit;
  font-weight: inherit;
  text-transform: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  margin-bottom: 0;
}

/* Collapsible card styles */
.card-header.cursor-pointer {
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s ease;
}

.card-header.cursor-pointer:hover {
  background-color: var(--gxp-slate-50);
}

.card-header[aria-expanded="false"] {
  border-bottom-color: transparent;
  border-bottom-left-radius: var(--tblr-card-border-radius);
  border-bottom-right-radius: var(--tblr-card-border-radius);
}

.card-header .collapse-indicator {
  transition: transform 0.2s ease;
  display: inline-block;
}

.card-header[aria-expanded="false"] .collapse-indicator {
  transform: rotate(90deg);
}

.card-header[aria-expanded="true"] .collapse-indicator {
  transform: rotate(0deg);
}

/* ==========================================================================
   Sidebar - Light Theme
   ========================================================================== */

.navbar-vertical {
  background-color: #FAFAFA;
  border-right: 1px solid #EBEBEB;
}

.navbar-vertical[data-bs-theme="dark"] {
  background-color: #FAFAFA;
}

.navbar-vertical .navbar-brand {
  color: var(--gxp-slate-900);
  font-weight: 700;
}

.navbar-vertical .nav-link {
  color: var(--gxp-slate-700);
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 12px 20px;
  transition: all 0.15s ease;
  position: relative;
  font-weight: 500;
}

.navbar-vertical .nav-link:hover {
  color: var(--gxp-slate-800);
  background-color: rgba(0, 0, 0, 0.04);
}

.navbar-vertical .nav-item.active .nav-link {
  color: var(--traqx-blue-700);
  background-color: var(--traqx-blue-50);
  font-weight: 600;
}

.navbar-vertical .nav-item.active .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--traqx-blue-400), var(--traqx-blue-600));
  border-radius: 0 2px 2px 0;
}


.navbar-vertical .nav-link .nav-link-icon {
  color: var(--gxp-slate-500);
  transition: all 0.15s ease;
}

.navbar-vertical .nav-link:hover .nav-link-icon {
  color: var(--gxp-slate-700);
}

.navbar-vertical .nav-item.active .nav-link-icon {
  color: var(--traqx-blue-600);
}

/* User Profile in Sidebar */
.navbar-vertical .dropdown .nav-link {
  color: var(--gxp-slate-800);
}

.navbar-vertical .dropdown .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.navbar-vertical .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid var(--gxp-slate-200);
  box-shadow: var(--shadow-lg);
}

.navbar-vertical .dropdown-item {
  color: var(--gxp-slate-700);
}

.navbar-vertical .dropdown-item:hover {
  background-color: var(--gxp-slate-100);
  color: var(--gxp-slate-900);
}

.navbar-vertical .avatar {
  background-color: var(--traqx-blue-100);
  color: var(--traqx-blue-700);
}

/* ==========================================================================
   Collapsible Sidebar
   ========================================================================== */

/* CSS Variable for sidebar width */
:root {
  --sidebar-width: 15rem;
  --sidebar-width-collapsed: 4rem;
  /* Collapsed resting strip (26px) — the page reserves only this. */
  --sidebar-width-strip: 1.625rem;
  /* Layering scale for floating chrome */
  --traqx-z-flyout: 1030;   /* in-page flyouts (stage tab overflow) */
  --traqx-z-rail: 1035;     /* edge-docked rails (collapsed sidebar) */
  --traqx-z-toast: 1080;    /* floating toasts/widgets above page chrome, below tooltips */
  --traqx-z-tooltip: 1100;  /* hover labels above everything page-local */
  /* Rendered-document canvas behind viewer pages (matches word_viewer) */
  --traqx-doc-canvas: #ECEEF1;
}

/* Sidebar Header with Logo and Toggle */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0;
}

.sidebar-header .navbar-brand {
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Logo toggle: full logo vs icon */
.sidebar-logo-icon {
  display: none;
}

/* Toggle Button */
.sidebar-toggle {
  width: 28px;
  height: 28px;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--tblr-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--gxp-slate-400);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: var(--gxp-slate-300);
  color: var(--gxp-slate-700);
}

.sidebar-toggle svg {
  width: 16px;
  height: 16px;
}

/* Toggle icon visibility */
.sidebar-toggle .icon-collapse {
  display: block;
}

.sidebar-toggle .icon-expand {
  display: none;
}

.sidebar-collapsed .sidebar-toggle .icon-collapse {
  display: none;
}

.sidebar-collapsed .sidebar-toggle .icon-expand {
  display: block;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Primary Button - Traqx Blue */
.btn-primary {
  --tblr-btn-color: #ffffff;
  --tblr-btn-bg: var(--traqx-blue-600);
  --tblr-btn-border-color: var(--traqx-blue-600);
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-hover-bg: var(--traqx-blue-700);
  --tblr-btn-hover-border-color: var(--traqx-blue-700);
  --tblr-btn-active-color: #ffffff;
  --tblr-btn-active-bg: var(--traqx-blue-700);
  --tblr-btn-active-border-color: var(--traqx-blue-700);
  font-weight: 500;
}

/* Secondary Button */
.btn-secondary {
  --tblr-btn-color: var(--gxp-slate-700);
  --tblr-btn-bg: var(--gxp-slate-100);
  --tblr-btn-border-color: var(--gxp-slate-200);
  --tblr-btn-hover-color: var(--gxp-slate-800);
  --tblr-btn-hover-bg: var(--gxp-slate-200);
  --tblr-btn-hover-border-color: var(--gxp-slate-300);
  font-weight: 500;
}

/* Outline Primary */
.btn-outline-primary {
  --tblr-btn-color: var(--traqx-blue-600);
  --tblr-btn-border-color: var(--traqx-blue-500);
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-hover-bg: var(--traqx-blue-600);
  --tblr-btn-hover-border-color: var(--traqx-blue-600);
  font-weight: 500;
}

/* Outline Secondary */
.btn-outline-secondary {
  --tblr-btn-color: var(--gxp-slate-600);
  --tblr-btn-border-color: var(--gxp-slate-300);
  --tblr-btn-hover-color: var(--gxp-slate-800);
  --tblr-btn-hover-bg: var(--gxp-slate-100);
  --tblr-btn-hover-border-color: var(--gxp-slate-400);
  font-weight: 500;
}

/* Ghost Buttons */
.btn-ghost-primary {
  --tblr-btn-color: var(--traqx-blue-600);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--traqx-blue-600);
  --tblr-btn-hover-bg: var(--traqx-blue-50);
  --tblr-btn-hover-border-color: transparent;
}

.btn-ghost-secondary {
  --tblr-btn-color: var(--gxp-slate-600);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--gxp-slate-800);
  --tblr-btn-hover-bg: var(--gxp-slate-100);
  --tblr-btn-hover-border-color: transparent;
  --tblr-btn-active-color: var(--gxp-slate-800);
  --tblr-btn-active-bg: var(--gxp-slate-100);
  --tblr-btn-active-border-color: transparent;
}

.btn-ghost-secondary:focus,
.btn-ghost-secondary:active,
.btn-ghost-secondary.show {
  color: var(--gxp-slate-800);
  background-color: var(--gxp-slate-100);
  border-color: transparent;
  box-shadow: none;
}

.btn-ghost-danger {
  --tblr-btn-color: var(--gxp-danger);
  --tblr-btn-bg: transparent;
  --tblr-btn-border-color: transparent;
  --tblr-btn-hover-color: var(--gxp-danger);
  --tblr-btn-hover-bg: rgba(239, 68, 68, 0.1);
  --tblr-btn-hover-border-color: transparent;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  font-weight: 500;
  padding: 0.35em 0.75em;
  border-radius: var(--tblr-border-radius-pill);
}

/* Solid status badges: backgrounds come from the --tblr-* token mappings
   above (Tabler's .bg-* utilities consume them); only the badge default
   text color (--tblr-secondary gray) needs lifting to white. */
.badge.bg-primary,
.badge.bg-success,
.badge.bg-warning,
.badge.bg-danger {
  color: #ffffff;
}

/* Light badges: Tabler derives .bg-*-lt colors from the same tokens
   (background = 10% mix of the status color) — no rules needed for
   success/danger/info. Where our palette departs from that derived mix,
   we set the -lt variable the utility consumes instead of fighting its
   !important declaration. */
.badge.bg-primary-lt {
  --tblr-primary-lt: var(--traqx-blue-100);
}

.badge.bg-warning-lt {
  --tblr-warning-lt: var(--gxp-warning-100);
  /* every other badge renders at 550 via the later ".badge" rule;
     this one was pinned to 500 before the refactor — keep parity */
  font-weight: 500;
}

.badge.bg-secondary-lt {
  --tblr-secondary-lt: var(--gxp-slate-100);
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

.form-control,
.form-select {
  background-color: #ffffff;
  border: 1px solid var(--gxp-slate-300);
  color: var(--gxp-slate-800);
  border-radius: var(--tblr-border-radius);
}

.form-control:focus,
.form-select:focus {
  background-color: #ffffff;
  border-color: var(--traqx-blue-500);
  box-shadow: 0 0 0 3px rgba(2, 108, 255, 0.15);
  color: var(--gxp-slate-900);
}

.form-control::placeholder {
  color: var(--gxp-slate-400);
}

.form-label {
  color: var(--gxp-slate-700);
  font-weight: 500;
}

.form-hint {
  color: var(--gxp-slate-500);
}

.form-control-plaintext {
  color: var(--gxp-slate-800);
}

/* Input Group */
.input-group-text {
  background-color: var(--gxp-slate-50);
  border-color: var(--gxp-slate-300);
  color: var(--gxp-slate-500);
}

/* Form Validation States - remove green glow */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--gxp-slate-300);
  background-image: none;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--traqx-blue-500);
  box-shadow: 0 0 0 3px rgba(2, 108, 255, 0.15);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--gxp-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--gxp-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
  border-radius: var(--tblr-border-radius-sm) var(--tblr-border-radius-lg) var(--tblr-border-radius-lg) var(--tblr-border-radius-sm);
  border: none;
}

.alert-success {
  background-color: #ECFDF5;
  color: #047857;
  border-left: 4px solid var(--gxp-success);
}

.alert-warning {
  background-color: #FFFBEB;
  color: #92400E;
  border-left: 4px solid var(--gxp-warning);
}

.alert-danger {
  background-color: #FEF2F2;
  color: #B91C1C;
  border-left: 4px solid var(--gxp-danger);
}

.alert-info {
  background-color: rgba(2, 108, 255, 0.1);
  color: var(--traqx-blue-700);
  border-left: 4px solid var(--traqx-blue-600);
}

.alert-slate {
  background-color: var(--gxp-slate-100);
  color: var(--gxp-slate-700);
  border-left: 4px solid var(--gxp-slate-500);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
  --tblr-table-bg: transparent;
  --tblr-table-color: var(--gxp-slate-700);
  --tblr-table-border-color: var(--traqx-blue-100);
  --tblr-table-striped-bg: var(--traqx-blue-50);
  --tblr-table-hover-bg: var(--traqx-blue-50);
}

.table thead th {
  color: var(--traqx-blue-700);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--traqx-blue-100);
  background-color: var(--traqx-blue-50);
  padding-top: 12px;
  padding-bottom: 12px;
}

.table td {
  border-bottom-color: var(--traqx-blue-50);
  vertical-align: middle;
  color: var(--gxp-slate-700);
}

.table-vcenter td {
  vertical-align: middle;
}

/* Agent member row actions — the theme has no generic .btn-icon sizing, so
   icon-only buttons collapse to ~2px inside this flex row and their glyphs
   overlap. Pin the buttons to a square and keep the inline forms from shrinking. */
.agent-member-actions form {
  flex: 0 0 auto;
}

.agent-member-actions .btn-icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
}

/* Table Action Icons */
.table .btn-ghost-secondary,
.table .btn-icon {
  color: var(--gxp-slate-400);
}

.table .btn-ghost-secondary:hover,
.table .btn-icon:hover {
  color: var(--traqx-blue-600);
  background-color: var(--traqx-blue-50);
}

.table .btn-ghost-danger:hover {
  color: var(--gxp-danger);
  background-color: rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */

.dropdown-menu {
  background-color: #ffffff;
  border: 1px solid var(--gxp-slate-200);
  box-shadow: var(--shadow-lg);
  border-radius: var(--tblr-border-radius-lg);
}

.dropdown-item {
  color: var(--gxp-slate-700);
  border-radius: var(--tblr-border-radius-sm);
  margin: 2px 4px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--gxp-slate-100);
  color: var(--gxp-slate-900);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--traqx-blue-600);
  color: #ffffff;
}

.dropdown-divider {
  border-top-color: var(--gxp-slate-200);
}

.dropdown-header {
  color: var(--gxp-slate-500);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal-content {
  background-color: #ffffff;
  border: 1px solid var(--gxp-slate-200);
  border-radius: var(--tblr-border-radius-xl);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  border-bottom-color: var(--gxp-slate-200);
}

.modal-footer {
  border-top-color: var(--gxp-slate-200);
}

.modal-backdrop {
  background-color: rgba(15, 23, 42, 0.5);
}

/* ==========================================================================
   List Groups
   ========================================================================== */

.list-group-item {
  background-color: transparent;
  border-color: var(--gxp-slate-200);
  color: var(--gxp-slate-800);
}

.list-group-item:hover {
  background-color: var(--gxp-slate-50);
}

.list-group-item.active {
  background-color: var(--traqx-blue-50);
  border-color: var(--traqx-blue-100);
  color: var(--traqx-blue-600);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.nav-tabs {
  border-bottom-color: var(--gxp-slate-200);
}

.nav-tabs .nav-link {
  color: var(--gxp-slate-600);
  border-color: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--gxp-slate-900);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--traqx-blue-600);
  background-color: transparent;
  border-color: transparent transparent var(--traqx-blue-600);
  font-weight: 500;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.page-link {
  background-color: #ffffff;
  border-color: var(--gxp-slate-300);
  color: var(--gxp-slate-700);
}

.page-link:hover {
  background-color: var(--gxp-slate-100);
  border-color: var(--gxp-slate-400);
  color: var(--gxp-slate-900);
}

.page-item.active .page-link {
  background-color: var(--traqx-blue-600);
  border-color: var(--traqx-blue-600);
  color: #ffffff;
}

.page-item.disabled .page-link {
  background-color: var(--gxp-slate-50);
  border-color: var(--gxp-slate-200);
  color: var(--gxp-slate-400);
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumb-item a {
  color: var(--gxp-slate-500);
}

.breadcrumb-item a:hover {
  color: var(--traqx-blue-600);
}

.breadcrumb-item.active {
  color: var(--gxp-slate-900);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--gxp-slate-400);
}

/* ==========================================================================
   Avatars
   ========================================================================== */

.avatar {
  background-color: var(--gxp-slate-200);
  color: var(--gxp-slate-600);
}

/* Tabler's .bg-blue-lt (!important) consumes these variables:
   --tblr-blue feeds the text color, --tblr-blue-lt the background. */
.avatar.bg-blue-lt {
  --tblr-blue: var(--traqx-blue-700);
  --tblr-blue-lt: var(--traqx-blue-100);
}

.avatar-list-stacked .avatar {
  border-color: #ffffff;
}

/* ==========================================================================
   Text Utilities
   ========================================================================== */

/* Tabler's text-color utilities are !important but consume --tblr-*
   variables — we set the variable instead of fighting the declaration.
   .text-primary/.text-success/.text-danger need no rule at all: the
   :root token mappings above already feed them. */
.text-secondary {
  --tblr-secondary: var(--gxp-slate-500);
  font-weight: 450;
}

.text-muted {
  /* color comes from --tblr-muted, mapped in the token block */
  font-weight: 450;
}

/* Ensure small text is still readable */
small, .small {
  font-weight: 450;
}

.text-warning {
  --tblr-warning: var(--gxp-warning-700);
}

/* ==========================================================================
   Subheader / Stats
   ========================================================================== */

.subheader {
  color: var(--gxp-slate-500);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Tom Select - Light Mode Styles
   ========================================================================== */

.ts-wrapper.form-control {
  padding: 0;
  background: transparent;
  box-shadow: none !important;
  border: 1px solid var(--gxp-slate-300);
  border-radius: var(--tblr-border-radius);
  min-height: 40px;
}

.ts-wrapper .ts-control {
  background-color: #ffffff;
  border: none;
  color: var(--gxp-slate-800);
  min-height: 38px;
  padding: 0.5rem 0.75rem;
}

.ts-wrapper .ts-control .item {
  color: var(--gxp-slate-800);
}

.ts-wrapper .ts-control input {
  color: var(--gxp-slate-800);
}

.ts-wrapper .ts-control input::placeholder {
  color: var(--gxp-slate-400);
}

.ts-wrapper .ts-dropdown {
  background-color: #ffffff;
  border-color: var(--gxp-slate-200);
  color: var(--gxp-slate-800);
  box-shadow: var(--shadow-lg);
}

.ts-wrapper .ts-dropdown .option {
  color: var(--gxp-slate-700);
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
  background-color: var(--traqx-blue-50);
}

.ts-wrapper .ts-dropdown .option:hover .tom-select-option-label,
.ts-wrapper .ts-dropdown .option.active .tom-select-option-label {
  color: var(--traqx-blue-600);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--traqx-blue-500);
  box-shadow: 0 0 0 3px rgba(2, 108, 255, 0.15);
}

.tom-select-option-description {
  color: var(--gxp-slate-500);
}

/* Optgroup headers — make them read as section separators instead of
   greyish labels that blend into the first option below them. */
.ts-wrapper .ts-dropdown .optgroup-header {
  background-color: var(--gxp-slate-50);
  color: var(--gxp-slate-500);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--gxp-slate-200);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ts-wrapper .ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0;
}

.ts-wrapper .ts-dropdown .optgroup + .optgroup .optgroup-header {
  margin-top: 0.25rem;
}

/* Tom Select Validation States */
.ts-wrapper.form-control.is-valid,
.ts-wrapper.form-control.is-invalid {
  background-image: none;
}

.ts-wrapper.form-control.is-valid {
  border-color: var(--gxp-slate-300);
}

.ts-wrapper.form-control.focus,
.ts-wrapper.form-control.is-valid.focus,
.ts-wrapper.form-control.dropdown-active,
.ts-wrapper.form-control.input-active {
  border-color: var(--traqx-blue-500) !important;
  box-shadow: 0 0 0 3px rgba(2, 108, 255, 0.15) !important;
}

.ts-wrapper.form-control.is-invalid {
  border-color: var(--gxp-danger);
}

.ts-wrapper.form-control.is-invalid.focus {
  border-color: var(--gxp-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   Scrollbar Styling
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--gxp-slate-100);
}

::-webkit-scrollbar-thumb {
  background: var(--gxp-slate-300);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gxp-slate-400);
}

/* ==========================================================================
   Selection Styling
   ========================================================================== */

::selection {
  background-color: var(--traqx-blue-100);
  color: var(--traqx-blue-600);
}

/* ==========================================================================
   HR / Dividers
   ========================================================================== */

hr {
  border-color: var(--gxp-slate-200);
  opacity: 1;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--traqx-blue-600);
}

a:hover {
  color: var(--traqx-blue-500);
}

.text-reset {
  color: inherit !important;
}

/* ==========================================================================
   Code Blocks
   ========================================================================== */

code {
  color: var(--traqx-blue-600);
  background-color: var(--gxp-slate-100);
  padding: 0.125rem 0.375rem;
  border-radius: var(--tblr-border-radius-sm);
}

pre {
  background-color: var(--gxp-slate-900);
  color: var(--gxp-slate-100);
  border-radius: var(--tblr-border-radius);
  padding: 1rem;
}

pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.empty {
  color: var(--gxp-slate-500);
}

.empty-title {
  color: var(--gxp-slate-700);
}

.empty-subtitle {
  color: var(--gxp-slate-500);
}

/* ==========================================================================
   Auth Pages Background Pattern
   ========================================================================== */

.bg-pattern {
  background-color: var(--gxp-slate-50);
  background-image:
    radial-gradient(circle at 1px 1px, var(--gxp-slate-200) 1px, transparent 0);
  background-size: 24px 24px;
}

.bg-pattern-dots {
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.25) 1.2px, transparent 0);
  background-size: 12px 12px;
}

.bg-pattern-dots-subtle {
  background-color: #ffffff;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.17) 1px, transparent 0);
  background-size: 14px 14px;
}

/* ==========================================================================
   Project Cards
   ========================================================================== */

.project-card {
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid var(--gxp-slate-200);
  position: relative;
  overflow: hidden;
}

.project-status-ribbon {
  position: absolute;
  top: 10px;
  right: -28px;
  padding: 3px 36px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transform: rotate(45deg);
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.project-status-ribbon.ribbon-success {
  background-color: var(--gxp-success);
  color: #ffffff;
}

.project-status-ribbon.ribbon-warning {
  background-color: var(--gxp-warning);
  color: #ffffff;
}

.project-status-ribbon.ribbon-secondary {
  background-color: var(--gxp-slate-400);
  color: #ffffff;
}

.project-card:hover {
  border-color: var(--traqx-blue-300);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.project-card:hover .card-title {
  color: var(--traqx-blue-600);
}

.project-card:hover .project-icon {
  background-color: var(--traqx-blue-100);
  color: var(--traqx-blue-600);
}

.project-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tblr-border-radius-lg);
  background-color: var(--gxp-slate-100);
  color: var(--gxp-slate-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.project-stats {
  font-size: 0.85rem;
}

.project-card .card-footer {
  font-size: 0.85rem;
}

.project-collaborators .avatar {
  font-size: 0.65rem;
  font-weight: 600;
}

.project-collaborators .avatar-list-stacked .avatar {
  margin-left: -0.5rem;
  box-shadow: 0 0 0 2px #ffffff;
}

.project-collaborators .avatar-list-stacked .avatar:first-child {
  margin-left: 0;
}

.min-width-0 {
  min-width: 0;
}

/* ==========================================================================
   Quick Action Cards (Dashboard)
   ========================================================================== */

/* ==========================================================================
   Section Headers (for grids outside of cards)
   ========================================================================== */

.section-header {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--traqx-blue-100);
}

.section-title {
  color: var(--traqx-blue-700);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

/* ==========================================================================
   Quick Action Cards (Dashboard)
   ========================================================================== */

.quick-action-card {
  transition: all 0.2s ease;
  background-color: #ffffff;
  border-color: var(--gxp-slate-200) !important;
}

.quick-action-card:hover {
  border-color: var(--traqx-blue-300) !important;
  background-color: var(--traqx-blue-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.quick-action-card:hover .quick-action-icon {
  transform: scale(1.1);
}

.quick-action-icon {
  transition: transform 0.2s ease;
}

a:has(.quick-action-card) {
  text-decoration: none;
  color: inherit;
}

/* ==========================================================================
   Version Badge
   ========================================================================== */

.version-badge {
  font-size: 0.65rem;
  color: var(--gxp-slate-400);
  background-color: rgba(255, 255, 255, 0.8);
  padding: 2px 8px;
  border-radius: var(--tblr-border-radius-pill);
  border: 1px solid var(--gxp-slate-200);
}

/* ==========================================================================
   Chat / Conversation Styles
   ========================================================================== */

.chat {
  background-color: var(--gxp-slate-50);
  background-image: radial-gradient(circle at 1px 1px, rgba(148, 163, 184, 0.12) 1px, transparent 0);
  background-size: 16px 16px;
}

.chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-bubble {
  background-color: #ffffff;
  border-radius: var(--tblr-border-radius-lg);
  padding: 1rem 1.25rem;
  max-width: 85%;
  min-width: 200px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gxp-slate-100);
  position: relative;
}

/* User messages - right aligned with blue tint */
.chat-bubble.chat-bubble-me {
  margin-left: auto;
  background: linear-gradient(135deg, var(--traqx-blue-50) 0%, #ffffff 100%);
  border-color: var(--traqx-blue-100);
}

/* Assistant messages - left aligned */
.chat-bubble:not(.chat-bubble-me) {
  margin-right: auto;
  background-color: #ffffff;
}

.chat-bubble-title {
  margin-bottom: 0.5rem;
}

.chat-bubble-author {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--gxp-slate-700);
}

.chat-bubble.chat-bubble-me .chat-bubble-author {
  color: var(--traqx-blue-700);
}

.chat-bubble-date {
  font-size: 0.75rem;
  color: var(--gxp-slate-400);
  font-weight: 450;
}

.chat-bubble-body {
  color: var(--gxp-slate-700);
  line-height: 1.6;
}

.chat-bubble-body p {
  margin-bottom: 0;
}

.chat-bubble-body p + p {
  margin-top: 0.75rem;
}

.chat-bubble-footer {
  border-color: var(--gxp-slate-100) !important;
}

/* Star rating improvements */
.chat-bubble-footer .btn-icon {
  width: 28px;
  height: 28px;
  transition: all 0.15s ease;
}

.chat-bubble-footer .btn-icon:hover {
  transform: scale(1.15);
}

.chat-bubble-footer .btn-icon.text-warning {
  color: #F59E0B !important;
}

.chat-bubble-footer .btn-icon.text-muted:hover {
  color: #FBBF24 !important;
}

/* Chat input improvements */
.card-footer .input-group {
  background-color: #ffffff;
  border-radius: var(--tblr-border-radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gxp-slate-200);
  overflow: hidden;
}

.card-footer .input-group .form-control {
  border: none;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  background-color: transparent;
}

.card-footer .input-group .form-control:focus {
  box-shadow: none;
}

.card-footer .input-group .btn {
  border-radius: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border: none;
  margin: 4px;
  border-radius: var(--tblr-border-radius) !important;
}

/* Details collapse section */
.chat-bubble .collapse .rounded {
  background-color: var(--gxp-slate-50) !important;
  border: 1px solid var(--gxp-slate-100);
}

/* ==========================================================================
   Document List Styles
   ========================================================================== */

.document-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-left: none;
  border-right: none;
  transition: all 0.2s ease;
}

.document-item:hover {
  background-color: var(--gxp-slate-50);
}

/* Ghost effect for processing documents */
.document-item.document-processing .document-icon,
.document-item.document-processing .document-info {
  opacity: 0.6;
}

.document-item.document-processing .document-icon {
  background-color: var(--gxp-slate-200);
  color: var(--gxp-slate-400);
}

.document-item.document-processing .document-name {
  color: var(--gxp-slate-500);
}

/* Failed documents */
.document-item.document-failed .document-icon {
  background-color: #FEE2E2;
  color: #DC2626;
}

.document-icon {
  width: 40px;
  height: 40px;
  background-color: var(--traqx-blue-50);
  color: var(--traqx-blue-600);
  border-radius: var(--tblr-border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.75rem;
  position: relative;
}

/* Processing indicator on icon */
.document-processing-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  background-color: #F59E0B;
  border-radius: 50%;
  border: 2px solid white;
  animation: pulse-indicator 1.5s ease-in-out infinite;
}

@keyframes pulse-indicator {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.7;
  }
}

.document-info {
  flex: 1;
  min-width: 0;
}

.document-name {
  font-weight: 500;
  color: var(--gxp-slate-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  display: block;
}

.document-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
}

.document-size {
  font-size: 0.75rem;
  color: var(--gxp-slate-500);
}

.document-status {
  font-size: 0.75rem;
  font-weight: 500;
}

.document-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Dropdown styling for document actions */
.document-actions .dropdown-item {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

.document-actions .dropdown-item svg {
  opacity: 0.7;
}

.document-actions .dropdown-item:hover svg {
  opacity: 1;
}


/* Processing animation */
@keyframes pulse-processing {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.badge.processing {
  animation: pulse-processing 1.5s ease-in-out infinite;
}

/* Superseded documents — de-emphasized */
.document-item.document-superseded {
  opacity: 0.55;
}

.document-item.document-superseded .document-name {
  text-decoration: line-through;
  color: var(--gxp-slate-400);
}

/* Ghost values — AI-prefilled but not yet confirmed by user */
.ghost-value {
  color: var(--gxp-slate-400);
  font-style: italic;
}

.ghost-value-input {
  color: var(--gxp-slate-400);
  border-style: dashed;
}

.ghost-value-input:focus {
  color: var(--gxp-slate-800);
  border-style: solid;
}

/* Document metadata display */
.document-description {
  line-height: 1.3;
}

.document-metadata-date {
  display: flex;
  align-items: center;
  color: var(--gxp-slate-500);
}

/* Upload dropzone */
.upload-form {
  margin-bottom: 1rem;
}

.upload-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--gxp-slate-300);
  border-radius: var(--tblr-border-radius);
  background-color: var(--gxp-slate-50);
  cursor: pointer;
  transition: all 0.15s ease;
}

.upload-dropzone--compact {
  padding: 0.5rem 0.75rem;
  border-width: 1px;
  font-size: 0.8125rem;
}

.upload-dropzone--compact .upload-label {
  font-size: 0.8125rem;
}

.upload-dropzone:hover {
  border-color: var(--traqx-blue-400);
  background-color: var(--traqx-blue-50);
}

.upload-dropzone:hover .upload-icon {
  color: var(--traqx-blue-500);
}

.upload-dropzone--dragover {
  border-color: var(--traqx-blue-500);
  background-color: var(--traqx-blue-50);
  box-shadow: 0 0 0 3px rgba(2, 108, 255, 0.15);
}

.upload-dropzone--dragover .upload-icon {
  color: var(--traqx-blue-500);
}

.upload-dropzone--uploading {
  pointer-events: none;
  opacity: 0.6;
}

.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.upload-icon {
  color: var(--gxp-slate-400);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.upload-label {
  font-size: 0.875rem;
  color: var(--gxp-slate-600);
}

/* ==========================================================================
   Typography Weight Improvements
   ========================================================================== */

/* Card content */
.card-body {
  font-weight: 450;
}

/* List items */
.list-group-item {
  font-weight: 450;
}

/* Form controls */
.form-control,
.form-select {
  font-weight: 450;
}

/* Table cells */
.table td {
  font-weight: 450;
}

/* Dropdown items */
.dropdown-item {
  font-weight: 450;
}

/* Navbar links */
.navbar-vertical .nav-link {
  font-weight: 500;
}

/* Page subtitle */
.page-subtitle {
  font-weight: 450;
}

/* Project card stats */
.project-stats {
  font-weight: 500;
}

/* Badge text */
.badge {
  font-weight: 550;
}

/* Button text */
.btn {
  font-weight: 500;
}

/* ==========================================================================
   Modal Styles (Turbo Frame Modals)
   ========================================================================== */

/* Ensure modal-open prevents body scroll */
body.modal-open {
  overflow: hidden;
}

/* Turbo frame modal container */
turbo-frame#modal {
  display: contents;
}

/* Modal positioning and backdrop */
turbo-frame#modal .modal {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1055;
  overflow-x: hidden;
  overflow-y: auto;
}

turbo-frame#modal .modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: rgba(15, 23, 42, 0.5);
}

turbo-frame#modal .modal-dialog {
  position: relative;
  z-index: 1056;
}

/* Near-fullscreen variant toggled by data-action="modal#toggleFullscreen".
   Leaves a small gutter so the backdrop is still visible at the edges,
   which keeps the "escape via backdrop click" affordance. */
turbo-frame#modal .modal-dialog.modal-dialog--fullscreen {
  max-width: 98vw;
  width: 98vw;
  height: 95vh;
  margin: 2.5vh auto;
}
turbo-frame#modal .modal-dialog.modal-dialog--fullscreen .modal-content {
  height: 100%;
}
turbo-frame#modal .modal-dialog.modal-dialog--fullscreen .modal-body {
  overflow: auto;
}

/* Modal animations */
turbo-frame#modal .modal.fade .modal-dialog {
  animation: modalSlideIn 0.2s ease-out;
}

turbo-frame#modal .modal-backdrop.fade {
  animation: backdropFadeIn 0.15s ease-out;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   Project Type Selection Cards (New Project Modal)
   ========================================================================== */

.project-type-card {
  display: block;
  cursor: pointer;
  height: 100%;
}

.project-type-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-type-card-inner {
  padding: 0.75rem;
  border: 1px solid var(--gxp-slate-200);
  border-radius: var(--tblr-border-radius-lg);
  background-color: #ffffff;
  transition: all 0.15s ease;
  height: 100%;
}

.project-type-card:hover:not(.disabled) .project-type-card-inner {
  border-color: var(--traqx-blue-300);
  background-color: var(--traqx-blue-50);
}

.project-type-radio:checked ~ .project-type-card-inner {
  border-color: var(--traqx-blue-500);
  background-color: var(--traqx-blue-50);
  box-shadow: 0 0 0 1px var(--traqx-blue-500);
}

.project-type-radio:checked ~ .project-type-card-inner .project-type-label {
  color: var(--traqx-blue-700);
}

.project-type-card.disabled {
  cursor: not-allowed;
}

.project-type-card.disabled .project-type-card-inner {
  background-color: var(--gxp-slate-50);
  opacity: 0.6;
}

.project-type-label {
  font-size: 0.8125rem;
  color: var(--gxp-slate-800);
}

.project-type-description {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--gxp-slate-500);
  line-height: 1.3;
}

/* ==========================================================================
   AI Oracle Styles
   ========================================================================== */

:root {
  --oracle-700: #6D28D9;
  --oracle-600: #7C3AED;
  --oracle-500: #8B5CF6;
  --oracle-400: #A78BFA;
  --oracle-50: #F5F3FF;
}

.badge-sm {
  font-size: 0.6875rem;
  padding: 0.125rem 0.375rem;
  font-weight: 500;
}

.btn-xs {
  font-size: 0.75rem;
  padding: 0.1875rem 0.5rem;
  line-height: 1.4;
}

/* AI section within question card */
.ai-section {
  background-color: var(--oracle-50);
}

.ai-suggestion-icon {
  color: var(--oracle-500);
  flex-shrink: 0;
}

.ai-suggestion-value {
  font-size: 0.875rem;
  color: var(--oracle-700);
}

.ai-suggestion-reasoning {
  margin: 0.25rem 0 0 1.625rem;
  font-size: 0.8125rem;
  color: var(--gxp-slate-500);
  font-style: italic;
  line-height: 1.4;
}

/* AI reasoning toggle (sparkles icon after accept) */
.ai-reasoning-toggle {
  cursor: help;
  color: var(--oracle-400);
  transition: color 0.15s ease;
}

.ai-reasoning-toggle:hover {
  color: var(--oracle-600);
}

/* AI action button */
.btn-ghost-ai {
  color: var(--oracle-600);
  background-color: var(--oracle-50);
  border: 1px solid rgba(139, 92, 246, 0.25);
  transition: all 0.2s ease;
}

.btn-ghost-ai:hover {
  color: #fff;
  background-color: var(--oracle-600);
  border-color: var(--oracle-600);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

.btn-ghost-ai:focus {
  box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.2);
}

/* Oracle analyzing banner */
.oracle-analyzing {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: var(--oracle-50);
  border-left: 3px solid var(--oracle-500);
  border-radius: 0 0.25rem 0.25rem 0;
  color: var(--oracle-700);
  font-size: 0.875rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.oracle-analyzing::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, var(--oracle-500), var(--oracle-400), transparent);
  animation: oracleSlide 2s ease-in-out infinite;
}

.oracle-analyzing-icon {
  color: var(--oracle-500);
  animation: oraclePulse 2.5s ease-in-out infinite;
}

@keyframes oracleSlide {
  0% { left: -30%; }
  100% { left: 100%; }
}

@keyframes oraclePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Generation progress steps */
.generation-steps {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}

.generation-step {
  display: flex;
  gap: 0.75rem;
}

.generation-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.generation-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.generation-step-icon--completed {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--gxp-success);
}

.generation-step-icon--active {
  background-color: var(--oracle-50);
  color: var(--oracle-500);
  animation: oraclePulse 2.5s ease-in-out infinite;
}

.generation-step-icon--upcoming {
  background-color: var(--gxp-slate-100);
  color: var(--gxp-slate-400);
}

.generation-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gxp-slate-300);
}

.generation-step-line {
  width: 2px;
  flex: 1;
  min-height: 12px;
  margin: 4px 0;
  background-color: var(--gxp-slate-200);
}

.generation-step-line--completed {
  background-color: var(--gxp-success);
}

.generation-step-label {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding-bottom: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gxp-slate-800);
}

.generation-step--upcoming .generation-step-label {
  color: var(--gxp-slate-400);
}

.generation-step--active .generation-step-label {
  color: var(--oracle-700);
}

/* ==========================================================================
   Cockpit - Project Dashboard
   ========================================================================== */

/* Banner */
.cockpit-banner {
  padding: 1.25rem 1.5rem;
  border-radius: var(--tblr-border-radius-lg);
  background-color: #ffffff;
  border: 1px solid var(--gxp-slate-200);
  box-shadow: var(--shadow-sm);
}

.cockpit-banner--info {
  border-left: 4px solid var(--traqx-blue-600);
  background-color: var(--traqx-blue-50);
}

.cockpit-banner--primary {
  border-left: 4px solid var(--traqx-blue-500);
  background-color: var(--traqx-blue-50);
}

/* Process Timeline */
.cockpit-timeline {
  display: flex;
  flex-direction: column;
}

.cockpit-timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 48px;
}

.cockpit-timeline-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 28px;
}

.cockpit-timeline-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cockpit-timeline-icon--completed {
  background-color: rgba(16, 185, 129, 0.15);
  color: var(--gxp-success);
}

.cockpit-timeline-icon--in-progress {
  background-color: rgba(2, 108, 255, 0.15);
  color: var(--traqx-blue-600);
  animation: oraclePulse 2.5s ease-in-out infinite;
}

.cockpit-timeline-icon--locked {
  background-color: var(--gxp-slate-200);
  color: var(--gxp-slate-600);
}

.cockpit-timeline-icon--upcoming {
  background-color: var(--gxp-slate-100);
  color: var(--gxp-slate-400);
}

.cockpit-timeline-line {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background-color: var(--gxp-slate-200);
  margin: 4px 0;
}

.cockpit-timeline-content {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding-bottom: 12px;
}

.cockpit-timeline-step:last-child .cockpit-timeline-content {
  padding-bottom: 0;
}

.cockpit-timeline-label {
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--gxp-slate-800);
}

.cockpit-timeline-step--upcoming .cockpit-timeline-label {
  color: var(--gxp-slate-500);
}

/* Help popover (shared/_help_popover) — Tabler defaults give the header
   1rem of horizontal padding and the body 0.5rem, which makes the title
   sit further in than the body text. Match them so the headline aligns
   with the body's left edge. */
.popover.help-popover .popover-header {
  padding-inline: var(--tblr-popover-body-padding-x);
}