/* ============================================================
   Lex Hex Background — unified hex grid aesthetic
   Canvas sits at z:0. Sidebar, topbar, cards, and grids are
   all semi-transparent so the hex grid shows through.
   ============================================================ */

/* ── Canvas layer ────────────────────────────────────────── */
#lex-hex-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ── Shell sits above canvas ─────────────────────────────── */
.shell {
  position: relative;
  z-index: 1;
}

/* ── Sidebar — transparent enough that hex shows through ─── */
.sidebar {
  background: rgba(var(--lex-surface-rgb), 0.6) !important;
  border-right-color: rgba(var(--lex-glow-rgb), 0.1) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sidebar-brand {
  background: rgba(var(--lex-surface-rgb), 0.3) !important;
}

.sidebar-footer {
  background: rgba(var(--lex-surface-rgb), 0.3) !important;
}

/* Seam glow */
.sidebar::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--lex-glow-rgb), 0.3) 35%,
    rgba(var(--lex-glow-rgb), 0.6) 55%,
    rgba(var(--lex-glow-rgb), 0.3) 75%,
    transparent 100%
  ) !important;
  animation: lex-seam-subtle 6s ease-in-out infinite !important;
}

@keyframes lex-seam-subtle {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.3; }
}

/* ── Topbar — transparent enough that hex shows through ──── */
.topbar {
  background: rgba(var(--lex-surface-rgb), 0.6) !important;
  border-bottom-color: rgba(var(--lex-glow-rgb), 0.09) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.topbar::after {
  animation: lex-scanH-subtle 7s ease-in-out infinite !important;
}

@keyframes lex-scanH-subtle {
  0%, 100% { opacity: 0.08; }
  50%      { opacity: 0.25; }
}

/* ── Page content — solid dark, let hex canvas show through ─── */
.page-content {
  background: rgba(var(--lex-base-rgb), 0.80) !important;
}

/* ── Cards — rich gradient panels with emerald top accent ─── */
.lex-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--lex-surface-rgb), 0.95), rgba(var(--lex-surface-deep-rgb), 0.98)) !important;
  border-color: rgba(var(--lex-glow-rgb), 0.13) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(var(--lex-glow-rgb), 0.16),
    0 0 1px rgba(var(--lex-glow-rgb), 0.12),
    0 4px 20px rgba(0, 0, 0, 0.30) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

.lex-card:hover {
  border-color: rgba(var(--lex-glow-rgb), 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--lex-glow-rgb), 0.22),
    0 0 2px rgba(var(--lex-glow-rgb), 0.18),
    0 8px 28px rgba(0, 0, 0, 0.36) !important;
}

.lex-card.lex-card--clickable:hover {
  background: linear-gradient(180deg, rgba(var(--lex-glow-rgb), 0.06), rgba(var(--lex-surface-deep-rgb), 0.98)) !important;
}

/* ── Metric cards — clean gradient matching .roles-metric ──── */
.lex-metric-card {
  background: linear-gradient(180deg, rgba(var(--lex-surface-rgb), 0.94), rgba(var(--lex-surface-deep-rgb), 0.98)) !important;
  border-color: rgba(var(--lex-glow-rgb), 0.1) !important;
  border-radius: 0.95rem;
}

/* ── Alerts — semi-transparent with emerald border ───────── */
.lex-alert {
  background: rgba(var(--lex-surface-rgb), 0.8) !important;
  border-color: rgba(var(--lex-glow-rgb), 0.1) !important;
}

/* Card header/footer — slightly darker transparent layer */
.lex-card .lex-card__header {
  background: rgba(var(--lex-surface-rgb), 0.3) !important;
  border-bottom-color: rgba(var(--lex-glow-rgb), 0.08) !important;
}

.lex-card .lex-card__footer {
  background: rgba(var(--lex-surface-rgb), 0.3) !important;
  border-top-color: rgba(var(--lex-glow-rgb), 0.08) !important;
}

/* ── Data grids — same frosted glass aesthetic ───────────── */
.lex-data-grid {
  position: relative;
  background: linear-gradient(180deg, rgba(var(--lex-surface-rgb), 0.95), rgba(var(--lex-surface-deep-rgb), 0.98)) !important;
  border-color: rgba(var(--lex-glow-rgb), 0.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(var(--lex-glow-rgb), 0.12),
    0 0 1px rgba(var(--lex-glow-rgb), 0.15),
    0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Grid toolbar */
.lex-data-grid .lex-data-grid__toolbar {
  background: rgba(var(--lex-surface-rgb), 0.35) !important;
  border-bottom-color: rgba(var(--lex-glow-rgb), 0.08) !important;
}

/* Grid header row */
.lex-data-grid .lex-data-grid__thead {
  background: rgba(var(--lex-surface-rgb), 0.4) !important;
  border-bottom-color: rgba(var(--lex-glow-rgb), 0.1) !important;
}

/* Grid body rows */
.lex-data-grid .lex-data-grid__tbody {
  background: transparent !important;
}

.lex-data-grid .lex-data-grid__cell {
  border-bottom-color: rgba(var(--lex-glow-rgb), 0.05) !important;
}

/* Row hover — green tint instead of grey */
.lex-data-grid .lex-data-grid__row:hover {
  background: rgba(var(--lex-glow-rgb), 0.06) !important;
}

/* Grid footer/pager */
.lex-data-grid .lex-data-grid__footer,
.lex-data-grid .lex-data-grid-pager {
  background: rgba(var(--lex-surface-rgb), 0.35) !important;
  border-top-color: rgba(var(--lex-glow-rgb), 0.08) !important;
}

/* No SVG/grid overlay on cards or data grids — clean gradient only */

/* ── PageHeader — match the transparent aesthetic ────────── */
.page-header,
.lex-page-header {
  background: transparent !important;
}

/* ── Form inputs inside cards — transparent theme ────────── */
.lex-card .form-input,
.lex-card input.form-input,
.lex-card select.form-input {
  background: rgba(var(--lex-surface-rgb), 0.5) !important;
  border-color: rgba(var(--lex-glow-rgb), 0.1) !important;
}

.lex-card .form-input:focus,
.lex-card input.form-input:focus,
.lex-card select.form-input:focus {
  border-color: rgba(var(--lex-glow-rgb), 0.35) !important;
  box-shadow: 0 0 0 2px rgba(var(--lex-glow-rgb), 0.1) !important;
}

/* Grid search input */
.lex-data-grid .lex-data-grid__search-input {
  background: rgba(var(--lex-surface-rgb), 0.5) !important;
  border-color: rgba(var(--lex-glow-rgb), 0.1) !important;
}

.lex-data-grid .lex-data-grid__search-input:focus {
  border-color: rgba(var(--lex-glow-rgb), 0.35) !important;
  box-shadow: 0 0 0 2px rgba(var(--lex-glow-rgb), 0.1) !important;
}

/* ── Links — emerald green ───────────────────────────────── */
.lex-card a.link,
.lex-data-grid a.link {
  color: rgb(var(--lex-glow-rgb)) !important;
}

.lex-card a.link:hover,
.lex-data-grid a.link:hover {
  color: #6ef5c5 !important;
}

/* ── Description lists inside cards ──────────────────────── */
.lex-card .description-list dt {
  color: var(--lex-text-secondary);
}

.lex-card .description-list dd {
  color: var(--lex-text-primary);
}

/* ── Body base ────────────────────────────────────────────── */
html, body {
  background: rgb(var(--lex-base-rgb)) !important;
}

/* ── Global layout classes — studio / hero / panel / kanban ── */

.lex-studio {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Hero band: gradient panel with hex grid texture + top accent */
.lex-hero {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 2rem 1.75rem;
  border: 1px solid rgba(var(--lex-glow-rgb), 0.1);
  border-radius: 1rem;
  background:
    radial-gradient(circle at top left, rgba(var(--lex-glow-rgb), 0.1), transparent 36%),
    linear-gradient(180deg, rgba(var(--lex-base-rgb), 0.98), rgba(var(--lex-surface-rgb), 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Hex grid texture underneath hero gradient */
.lex-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--lex-glow-rgb), 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--lex-glow-rgb), 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent 92%);
  pointer-events: none;
}

/* Top accent glow line */
.lex-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--lex-glow-rgb), 0.7), transparent);
  opacity: 0.85;
  pointer-events: none;
}

/* Content sits above pseudo-elements */
.lex-hero > * {
  position: relative;
  z-index: 1;
}

/* Content panel: rich gradient container */
.lex-panel {
  border: 1px solid rgba(var(--lex-glow-rgb), 0.1);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(var(--lex-surface-rgb), 0.96), rgba(var(--lex-surface-deep-rgb), 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 28px rgba(0, 0, 0, 0.18);
  padding: 1.1rem;
  display: grid;
  gap: 1rem;
}

/* Cards inside panels get a subtle hover lift */
.lex-panel .lex-card:hover {
  transform: translateY(-1px);
}

/* Kanban layout */
.lex-kanban {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.lex-kanban-col {
  min-width: 280px;
  flex: 1;
}

/* Responsive */
@media (max-width: 720px) {
  .lex-hero {
    padding: 1rem;
  }

  .lex-panel {
    padding: 0.85rem;
  }
}

/* ── Icon buttons in data grid rows — always legible ─────── */
.lex-data-grid .lex-icon-btn {
  border-color: rgba(var(--lex-glow-rgb), 0.18) !important;
  background: rgba(var(--lex-surface-rgb), 0.55) !important;
  color: rgba(var(--lex-glow-rgb), 0.82) !important;
}

.lex-data-grid .lex-icon-btn:hover:not(:disabled) {
  border-color: rgba(var(--lex-glow-rgb), 0.42) !important;
  background: rgba(var(--lex-glow-rgb), 0.1) !important;
  color: rgb(var(--lex-glow-rgb)) !important;
}

.lex-data-grid .lex-icon-btn.lex-icon-btn--danger {
  color: rgba(var(--lex-canvas-danger-rgb), 0.78) !important;
  border-color: rgba(var(--lex-canvas-danger-rgb), 0.18) !important;
  background: rgba(var(--lex-surface-rgb), 0.55) !important;
}

.lex-data-grid .lex-icon-btn.lex-icon-btn--danger:hover:not(:disabled) {
  border-color: rgba(var(--lex-canvas-danger-rgb), 0.42) !important;
  background: rgba(var(--lex-canvas-danger-rgb), 0.1) !important;
  color: rgb(var(--lex-canvas-danger-rgb)) !important;
}

.lex-data-grid .lex-icon-btn.lex-icon-btn--success {
  color: rgba(var(--lex-glow-rgb), 0.78) !important;
  border-color: rgba(var(--lex-glow-rgb), 0.18) !important;
  background: rgba(var(--lex-surface-rgb), 0.55) !important;
}

.lex-data-grid .lex-icon-btn.lex-icon-btn--success:hover:not(:disabled) {
  border-color: rgba(var(--lex-glow-rgb), 0.42) !important;
  background: rgba(var(--lex-glow-rgb), 0.1) !important;
  color: rgb(var(--lex-glow-rgb)) !important;
}

.lex-data-grid .lex-icon-btn.lex-icon-btn--warning {
  color: rgba(var(--lex-canvas-warning-rgb), 0.78) !important;
  border-color: rgba(var(--lex-canvas-warning-rgb), 0.18) !important;
  background: rgba(var(--lex-surface-rgb), 0.55) !important;
}

.lex-data-grid .lex-icon-btn.lex-icon-btn--warning:hover:not(:disabled) {
  border-color: rgba(var(--lex-canvas-warning-rgb), 0.42) !important;
  background: rgba(var(--lex-canvas-warning-rgb), 0.1) !important;
  color: rgb(var(--lex-canvas-warning-rgb)) !important;
}