/* @qiiqa/bob-ui main entry point */

/* 1. Base styles (lowest priority) */

/* CSS Variables for Qiiqa UI - Compact 3/4 Scale */

:root {
  /* Colors */
  --q-primary: #2563eb;
  --q-primary-dark: #1e3a8a;
  --q-primary-hover: #1d4ed8;
  --q-primary-muted: color-mix(in srgb, var(--q-primary) 15%, transparent);
  /* use OKHSLA to brighten the primary color */
  --q-primary-dim: #1d4ed8;
  /* use OKHSLA to darken the primary color */

  --q-secondary: #64748b;
  --q-secondary-hover: #64748b;
  /* use OKHSLA to brighten the secondary color */
  --q-secondary-dim: #64748b;
  /* use OKHSLA to darken the secondary color */

  --q-danger: #ef4444;
  --q-success: #22c55e;
  --q-warning: #f59e0b;

  /* Backgrounds */
  --q-bg-base: #ffffff;
  --q-bg-hover: #f8fafc;
  --q-bg-dropdown: #ffffff;
  --q-surface: var(--q-bg-base);

  /* Borders */
  --q-border-color: #cbd5e1;
  --q-border-radius: 0.25rem;
  /* 4px at 16px base, scaled from 6px */

  /* Typography - Scaled to 3/4 */
  --q-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --q-font-size-base: 10.5px;
  /* 14px * 0.75 */
  --q-font-size-sm: 9px;
  /* 12px * 0.75 */

  /* Semantic Text Colors */
  --q-text-base: #0f172a;
  --q-text-edit: #f5f5f5;
  /* Smoke White */
  --q-text-readonly: #94a3b8;
  /* Light Gray */
  --q-text-muted: #64748b;
  --q-darktxt: #222;
  
  /* Typography Tokens */
  --q-font-size-heading: 1.875rem;
  --q-color-heading: var(--q-text-base);
  --q-font-size-label: var(--q-font-size-sm);
  --q-color-label: var(--q-text-base);
  --q-font-size-text: var(--q-font-size-base);
  --q-color-text: var(--q-text-base);

  /* Typography Component Specific Variables */
  --bob-heading-color: var(--q-color-heading, var(--q-text-base));
  --bob-heading-font-size: var(--q-font-size-heading, 1.875rem);
  --bob-heading-margin-bottom: var(--q-gap-base);

  --bob-label-color: var(--q-color-label, var(--q-text-base));
  --bob-label-font-size: var(--q-font-size-label, var(--q-font-size-sm));
  --bob-label-font-weight: 600;
  --bob-label-margin-bottom: calc(var(--q-gap-base) / 2);

  --bob-description-color: var(--q-color-text, var(--q-text-muted));
  --bob-description-font-size: var(--q-font-size-text, var(--q-font-size-sm));
  --bob-description-margin-top: calc(var(--q-gap-base) / 2);

  --bob-validation-color: var(--q-danger);
  --bob-validation-font-size: var(--q-font-size-sm);
  --bob-validation-margin-top: calc(var(--q-gap-base) / 2);

  /* Button Text Colors - default to white for contrast against standard bright colors */
  --q-primary-text: #ffffff;
  --q-secondary-text: #ffffff;
  --q-danger-text: #ffffff;
  --q-success-text: #ffffff;

  /* Text on dark / layout-mode backgrounds */
  --q-text-on-dark: #ffffff;

  /* Primary colour at reduced opacity — used for selections and drag overlays */
  --q-primary-alpha-15: color-mix(in srgb, var(--q-primary) 15%, transparent);
  --q-primary-alpha-20: color-mix(in srgb, var(--q-primary) 20%, transparent);
  --q-primary-alpha-50: color-mix(in srgb, var(--q-primary) 50%, transparent);
  --q-primary-alpha-inset: color-mix(in srgb,
      var(--q-primary) 10%,
      transparent);

  /* Dim overlay (drag handle background) */
  --q-overlay-bg: rgba(0, 0, 0, 0.05);

  /* Shadows */
  --q-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --q-shadow-container: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.4);
  --q-shadow-primary-inset: inset 0 0 10px var(--q-primary-alpha-inset);

  /* Sunken / tinted content area background */
  --q-bg-sunken: color-mix(in srgb, var(--q-bg-base) 95%, black);

  /* Spacing (Margin, Gap, Padding) - Scaled to 3/4 */
  --q-spacer: 0.75rem;
  /* 1rem * 0.75 */
  --q-gap-base: 0.375rem;
  /* 0.5rem * 0.75 */
  --q-padding-base: 0.5625rem;
  /* 0.75rem * 0.75 */
  --q-margin-base: 0.75rem;
  /* 1rem * 0.75 */

  /* Component Specific Tokens - Scaled */
  --q-input-height: 1.6875rem;
  /* 2.25rem * 0.75 */
  --q-control-gap: clamp(0.25rem, 1vw, 0.375rem);
  /* dynamic: ~4px-6px */

  /* Standard Icon Styles for inputs - Scaled */
  --q-icon-size: clamp(0.625rem, 1.5vw, 0.75rem);
  /* dynamic: ~10px-12px */
  --q-icon-color: var(--q-secondary);
  --q-icon-hover-color: var(--q-primary);

  /* Responsive Breakpoints — use these as reference values in media query comments */
  /* Note: CSS custom properties cannot currently be used inside @media rules directly. */
  /* small  = max-width: 768px  */
  /* medium = max-width: 1024px */
  --q-mobile-breakpoint: 768px;
  --q-tablet-breakpoint: 1024px;

  /* Button Sizing */
  --bob-btn-size-medium: var(--q-input-height);
  --bob-btn-size-small: calc(var(--bob-btn-size-medium) * 0.75);
  --bob-btn-size-large: calc(var(--bob-btn-size-medium) * 1.2);
  --q-btn-disabled-opacity: 0.5;
  --q-btn-loading-opacity: 0.7;

  /* Validation Icons */
  --bob-icon-val-success: "\f00c";
  --bob-icon-val-failure: "\f00d";
  --bob-color-val-success: var(--q-success);
  --bob-color-val-failure: var(--q-danger);

  /* App Layout Layout Heights */
  --q-appbar-height: 48px; /* Base height for standard BobAppBar */
  --q-toast-top-offset: calc(var(--q-appbar-height) + 40px); /* Pushed lower so toasts never appear behind the appbar */
}

/* Responsive Utilities and Breakpoints for Bob UI */

/* Define fluid spacing and containers */

:root {
  /* Fluid scaling factors */
  --bob-fluid-base: clamp(1rem, 0.8rem + 1vw, 1.25rem);
  --bob-fluid-padding: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --bob-screen-min: 320px;
  --bob-screen-max: 1440px;
}

/* responsive containers */

.bob-container-fluid {
  width: 100%;
  padding-inline: var(--q-padding-base);
  margin-inline: auto;
  max-width: var(--bob-screen-max);
}

/* Mobile-first Media Queries */

/* Tablet and up (768px+) */

@media screen and (min-width: 768px) {
  :root {
    --q-padding-base: 1rem;
    --q-gap-base: 0.5rem;
  }
}

/* Desktop and up (1024px+) */

@media screen and (min-width: 1024px) {
  :root {
    --q-padding-base: 1.5rem;
    --q-gap-base: 0.75rem;
  }
}

/* Orientation helpers if needed */

@media screen and (orientation: landscape) and (max-height: 500px) {
  .bob-hide-on-short-landscape {
    display: none !important;
  }
}

/* CSS Reset for Qiiqa UI */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Accessibility Focus Ring for Tabbing */

*:focus-visible {
  outline: 1.5px solid var(--q-primary);
  outline-offset: 2px;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-family: var(--q-font-family);
  font-size: var(--q-font-size-base);
  background-color: var(--q-bg-base);
  color: var(--q-text-base);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.container,
.q-input-wrapper,
.btn,
.q-select-wrapper {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

/* Typography for Qiiqa UI */

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--q-font-family);
  font-weight: 600;
  line-height: 1.25;
  /* margin-bottom: var(--q-gap-base); */
}

h1,
.h1 {
  font-size: var(--bob-heading-font-size);
}

h2,
.h2 {
  font-size: 1.5rem;
}

h3,
.h3 {
  font-size: 1.25rem;
}

h4,
.h4 {
  font-size: 1.125rem;
}

.text-sm {
  font-size: var(--q-font-size-sm);
}

.text-bold {
  font-weight: 600;
}

.text-secondary {
  color: var(--q-secondary);
}

/* Typography components */

.bob-heading {
  color: var(--bob-heading-color);
  margin-bottom: var(--bob-heading-margin-bottom);
  font-family: var(--q-font-family);
  font-weight: 600;
  line-height: 1.25;
}

.bob-heading-1 { font-size: var(--bob-heading-font-size); }

.bob-heading-2 { font-size: calc(var(--q-font-size-heading, 1.875rem) * 0.8); }

.bob-heading-3 { font-size: calc(var(--q-font-size-heading, 1.875rem) * 0.67); }

.bob-heading-4 { font-size: calc(var(--q-font-size-heading, 1.875rem) * 0.6); }

.bob-heading-5 { font-size: calc(var(--q-font-size-heading, 1.875rem) * 0.53); }

.bob-heading-6 { font-size: calc(var(--q-font-size-heading, 1.875rem) * 0.47); }

.bob-label {
  display: block;
  color: var(--q-color-label, var(--bob-label-color, var(--q-text-base)));
  font-size: var(--q-font-size-label, var(--bob-label-font-size, 0.9rem));
  font-weight: var(--bob-label-font-weight);
  margin-bottom: var(--bob-label-margin-bottom);
}

.bob-label-required::after {
  content: ' *';
  color: var(--q-danger);
}

.bob-description {
  display: block;
  color: var(--q-color-text, var(--bob-description-color, var(--q-text-muted)));
  font-size: var(--q-font-size-text, var(--bob-description-font-size, 0.95rem));
  margin-top: var(--bob-description-margin-top);
}

.bob-validation {
  display: block;
  color: var(--bob-validation-color);
  font-size: var(--bob-validation-font-size);
  margin-top: var(--bob-validation-margin-top);
  margin-bottom: 0;
}

.bob-validation-panel {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--bob-validation-font-size);
  margin-top: var(--bob-validation-margin-top);
  color: var(--q-text-base);
}

.bob-validation-icon {
  font-size: 1.1em;
}

.bob-validation-icon::before {
  content: var(--bob-icon-content);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.bob-validation-icon.success {
  color: var(--bob-color-val-success);
}

.bob-validation-icon.failure {
  color: var(--bob-color-val-failure);
}

mark {
  background-color: var(--q-primary-dark, var(--q-primary));
  color: var(--q-text-on-dark, #fff);
  padding: 0 0.2em;
  border-radius: 2px;
}

/* 2. Layout */

/* Layout for Qiiqa UI */

.q-container {
    display: grid;
    gap: var(--q-gap-base);
    padding: var(--q-padding-base);
}

.q-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--q-gap-base);
}

/* Base utility for vertical expansion */

.q-expand-vertical {
    height: 100%;
    align-self: stretch;
}

.q-dashboard-container {
    padding: var(--q-spacing-xl, 2rem);
    padding-bottom: calc(var(--q-spacing-xl, 2rem) * 2);
    max-width: 75rem;
    margin: 0 auto;
}

.q-dashboard-panel {
    margin-top: calc(var(--q-spacing-xl, 2rem) * 1.5);
    padding: var(--q-spacing-xl, 2rem);
    border-radius: 1rem;
    background-color: var(--q-bg-sunken);
    border: 1px solid var(--q-border-color);
    box-shadow: var(--q-shadow-sm);
}

.q-dashboard-content {
    /* Slot for content within a panel or container */
    margin-top: var(--q-spacing-base, 1rem);
}

.q-dashboard-actions {
    display: flex;
    gap: var(--q-gap-small, 0.5rem);
}

.q-dashboard-filter {
    min-width: 9.375rem;
}

.q-dashboard-filters {
    display: flex;
    gap: var(--q-gap-medium, 0.75rem);
    align-items: center;
}

/* src/css/bob-react-layout.css */

.bob-react-form {
  display: flex;
  flex-direction: column;
  gap: var(--q-spacer, 16px);
  width: 100%;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.bob-react-page {
  display: grid;
  column-gap: var(--q-spacer);
  row-gap: 0;
  grid-auto-rows: 1px; /* 1px height baseline for pixel-perfect Masonry */
  align-content: start;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Panel header and caption */

.bob-react-panel-header {
  margin: 0 0 var(--q-spacer) 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  width: 100%;
}

.bob-react-panel-caption {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bob-heading-color);
}

/* Layout-mode controls inside the panel header */

.bob-react-panel-design-controls {
  display: flex;
  align-items: center;
  margin-right: clamp(4px, 1vw, 12px);
  gap: var(--q-control-gap);
}

.bob-react-panel-drag-handle {
  cursor: grab;
  color: var(--q-icon-color);
}

.bob-react-panel-resize-controls {
  display: flex;
  gap: 4px;
  align-items: center;
}

.bob-react-panel-resize-btn {
  background: var(--q-bg-hover);
  border: 1px solid var(--q-border-color);
  border-radius: 4px;
  width: clamp(16px, 2vw, 20px);
  height: clamp(16px, 2vw, 20px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bob-react-panel-span-label {
  font-size: 0.75rem;
  color: var(--q-text-muted);
  padding: 0 4px;
  user-select: none;
}

/* Fields layout row used in layout-fields mode */

.bob-react-panel-fields-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--panel-columns, 12), 1fr);
  width: 100%;
}

/* Panel is just a nested grid container that spans columns itself */

.bob-react-panel {
  display: grid;
  flex-grow: 1;
  gap: 0;
  align-content: start;
  align-items: start;
  position: relative;
  padding: var(--q-spacer);
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  background: var(--q-bg-base);
  box-shadow: var(--q-shadow-sm);
  width: 100%;
  min-width: 0;
  grid-column: span var(--bob-col-span, 12);
}

.bob-react-panel-layout-mode {
  border: 2px solid var(--q-primary);
  background-color: var(--q-primary-dark);
  color: var(--q-text-on-dark);
  padding-bottom: 40px;
  /* Space for dropping at bottom */
}

.bob-react-panel-layout-mode .bob-react-panel-caption {
  color: var(--q-text-on-dark);
}

.bob-react-panel-row-controls {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  z-index: 30;
  background: var(--q-bg-base);
  border: 1px solid var(--q-primary);
  border-radius: 4px;
  padding: 1px;
  box-shadow: var(--q-shadow-sm);
}

.bob-react-item-row-controls {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  z-index: 30;
  background: var(--q-bg-base);
  border: 1px solid var(--q-primary);
  border-radius: 4px;
  padding: 1px;
  box-shadow: var(--q-shadow-sm);
}

.bob-react-panel.bob-react-panel-dragover {
  background-color: var(--q-bg-hover);
  box-shadow: var(--q-shadow-primary-inset);
  border-color: var(--q-primary);
}

div.bob-react-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* gap: var(--q-control-gap, 4px); */
  margin-bottom: 8px; /* Standardize vertical field distance */
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  padding: 0; /* Rely on container padding for edges */
  grid-column: span var(--bob-col-span, 6);
  gap: 2px; /* Standardize 2px gap from caption to field */
}

.bob-react-item-expand-vertical {
  align-self: stretch;
  height: 100%;
}

.bob-react-item-caption {
  font-size: var(--q-font-size-base);
  font-weight: 500;
  color: var(--q-color-label, var(--q-text-muted));
  margin-bottom: 0; /* Use container gap: 2px instead */
  word-break: break-word;
}

.bob-react-item-horizontal {
  display: grid;
  align-items: center;
  gap: var(--q-spacer, 12px);
  width: 100%;
}

.bob-react-item-horizontal-caption {
  font-size: var(--q-font-size-base);
  font-weight: 500;
  color: var(--q-color-label, var(--q-text-base));
  word-break: break-word;
}

.bob-react-item-horizontal-content {
  min-width: 0;
}

.bob-react-item-row-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  font-size: 12px;
  font-weight: bold;
  color: var(--q-primary);
}

/* GapDropZone: 20px gap before, between and after each BobItem in layout mode */

.bob-react-panel .bob-react-gap-zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 100%;
  min-height: 30px;
  background: var(--q-bg-sunken, #f8fafc);
  border-left: 1px dashed var(--q-border-color);
  border-right: 1px dashed var(--q-border-color);
  transition: all 0.15s ease;
  flex-shrink: 0;
  cursor: cell;
  /* Don't participate in grid spanning */
  grid-column: unset;
}

.bob-react-gap-zone.start {
  border-radius: 4px 0 0 4px;
}

.bob-react-gap-zone.end {
  border-radius: 0 4px 4px 0;
}

.bob-react-panel .bob-react-gap-zone.bob-react-gap-zone-active {
  background-color: rgba(59, 130, 246, 0.4) !important;
  box-shadow: inset 0 0 0 2px var(--q-primary, #3b82f6) !important;
  border-radius: 4px !important;
  border-style: solid !important;
  border-color: var(--q-primary, #3b82f6) !important;
  z-index: 25 !important;
}

.bob-react-gap-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--q-bg-base);
  border: 1px solid var(--q-primary);
  border-radius: 4px;
  padding: 1px;
  box-shadow: var(--q-shadow-sm);
  z-index: 20;
  pointer-events: all;
}

.bob-react-gap-btn {
  background: transparent;
  color: var(--q-primary);
  border: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 11px;
  font-weight: bold;
  border-radius: 2px;
  transition: background 0.1s;
}

.bob-react-gap-btn:hover {
  background: var(--q-bg-hover);
}

.bob-react-gap-span-label {
  font-size: 0.55rem;
  color: var(--q-text-muted);
  padding: 0;
  user-select: none;
  text-align: center;
  font-weight: 700;
  min-width: 12px;
  line-height: 1;
}

.bob-react-item-selected .bob-react-overlay {
  background-color: var(--q-primary-alpha-15);
  /* light primary blue */
  border: 2px solid var(--q-primary);
}

.bob-react-item-selected .bob-react-overlay::after {
  content: "SELECTED";
  background: var(--q-primary-dark);
}

/* Tab Strip — scroller wrapper handles scrolling so the inner strip is never an overflow container */

.bob-react-tab-strip-scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbar for a clean look */
  scrollbar-width: none;
  margin-bottom: 16px;
  margin-left: 3px;
}

.bob-react-tab-strip-scroller::-webkit-scrollbar {
  display: none;
}

/* Inner strip — stays exactly as originally defined, no overflow changes */

.bob-react-tab-strip {
  display: flex;
  gap: var(--q-control-gap);
  flex-wrap: nowrap;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin-top: 4px;
  margin-left: 4px;
}

.bob-react-tab {
  padding: clamp(4px, 1vh, 8px) clamp(8px, 2vw, 16px);
  border: 1px solid transparent;
  border-bottom: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--q-text-muted);
  transition: all 0.2s;
  margin-bottom: -1px;
  /* Overlap border */
  border-radius: 6px 6px 0 0;
  background: transparent;
  /* Prevent tabs from shrinking when the strip is wider than the scroller */
  flex-shrink: 0;
}

.bob-react-tab:hover {
  color: var(--q-primary) !important;
  background: var(--q-bg-hover) !important;
}

.bob-react-tab-active {
  background: var(--q-bg-base);
  color: var(--q-color-heading, var(--q-primary));
  border-color: var(--q-border-color);
  border-bottom: 2px solid var(--q-color-heading, var(--q-primary));
  z-index: 10;
}

/* Theme Variant Rules for Tabs */

.theme-variant-clean button.bob-react-tab {
  border-color: transparent;
}

.theme-variant-clean button.bob-react-tab-active {
  border-color: transparent !important;
  border-bottom: none !important;
}

/* Overlays / Resizing placeholders */

.bob-react-overlay {
  position: absolute;
  inset: 4px;
  background-color: var(--q-overlay-bg);
  /* very light */
  z-index: 10;
  cursor: move;
  border-radius: 4px;
  border: 1px dashed var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bob-react-overlay::after {
  content: "DRAG";
  font-size: 0.75rem;
  color: var(--q-bg-base);
  background: var(--q-primary);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Drop Indicators */

.bob-react-drop-indicator {
  position: absolute;
  background: var(--q-primary);
  z-index: 50;
  pointer-events: none;
}

.bob-react-drop-indicator.left {
  left: 0px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
}

.bob-react-drop-indicator.right {
  right: 0px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
}

.bob-react-drop-indicator.top {
  top: 0px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
}

.bob-react-drop-indicator.bottom {
  bottom: 0px;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
}

/* Compact Layouts */

.bob-react-panel.bob-react-panel-compact {
  padding: 8px;
  gap: 4px;
}

.bob-react-panel.bob-react-panel-compact .bob-react-panel-header {
  margin-bottom: 8px;
}

.bob-react-panel.bob-react-panel-compact .bob-react-panel-caption {
  font-size: 0.9rem;
}

.bob-react-panel.bob-react-panel-compact .bob-react-item {
  padding: 4px 4px 4px 0;
}

/* Responsiveness config component */

.bob-react-responsiveness {
  position: relative;
  display: flex;
  align-items: center;
}

.bob-react-responsiveness-display {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--q-border-color);
  background: var(--q-bg-base);
  color: var(--q-text-base);
}

.bob-react-responsiveness-display span:first-child {
  font-weight: 600;
}

.bob-react-responsiveness-display span:nth-child(2) {
  opacity: 0.6;
}

.bob-react-responsiveness-display i {
  font-size: 10px;
  margin-left: 2px;
}

.bob-react-responsiveness-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1000;
  background-color: var(--q-bg-sunken);
  border: 1px solid var(--q-border-color);
  border-radius: 12px;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  padding: 12px;
  width: min(280px, 90vw);
}

.bob-react-responsiveness-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bob-react-responsiveness-popup-header span {
  font-weight: 600;
  font-size: 16px;
  color: var(--q-text-base);
}

.bob-react-responsiveness-popup-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--q-text-muted);
  font-size: 18px;
}

.bob-react-responsiveness-panel {
  border: 1px solid var(--q-border-color);
  background: var(--q-bg-base);
  box-shadow: none;
  margin-bottom: 4px;
}

/* .bob-react-responsiveness-panel.resp-panel-active {
  border: 1px solid var(--q-primary);
  box-shadow: inset 0 0 0 1px var(--q-primary);
} */

.bob-react-responsiveness-input {
  width: 100%;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--q-border-color);
  border-radius: 4px;
  background-color: var(--q-bg-sunken);
  color: var(--q-primary);
}

/* Added for BobLayoutTabPage */

.bob-react-tab-page-active {
  display: block;
}

.bob-react-tab-page-hidden {
  display: none;
}

/* Drag handle color mapping */

.bob-react-tab-drag-handle {
  margin-right: 8px;
  cursor: grab;
  color: var(--q-text-muted, #94a3b8);
}

/* Added for BobLayoutGapDropZone */

.bob-react-gap-btn-newline {
  margin-top: 2px;
  color: var(--q-text-muted, #94a3b8);
}

.bob-react-gap-btn-newline[data-newline="true"] {
  color: var(--q-primary, #2563eb);
}

/* Added for Layout Items and Grids */

.bob-react-item-design-fields {
  flex: 1 1 0;
  min-width: 0;
}

[data-bob-col-span="1"] {
  grid-column: span 1;
}

[data-bob-newline="true"][data-bob-col-span="1"] {
  grid-column: 1 / span 1;
}

[data-bob-col-span="2"] {
  grid-column: span 2;
}

[data-bob-newline="true"][data-bob-col-span="2"] {
  grid-column: 1 / span 2;
}

[data-bob-col-span="3"] {
  grid-column: span 3;
}

[data-bob-newline="true"][data-bob-col-span="3"] {
  grid-column: 1 / span 3;
}

[data-bob-col-span="4"] {
  grid-column: span 4;
}

[data-bob-newline="true"][data-bob-col-span="4"] {
  grid-column: 1 / span 4;
}

[data-bob-col-span="5"] {
  grid-column: span 5;
}

[data-bob-newline="true"][data-bob-col-span="5"] {
  grid-column: 1 / span 5;
}

[data-bob-col-span="6"] {
  grid-column: span 6;
}

[data-bob-newline="true"][data-bob-col-span="6"] {
  grid-column: 1 / span 6;
}

[data-bob-col-span="7"] {
  grid-column: span 7;
}

[data-bob-newline="true"][data-bob-col-span="7"] {
  grid-column: 1 / span 7;
}

[data-bob-col-span="8"] {
  grid-column: span 8;
}

[data-bob-newline="true"][data-bob-col-span="8"] {
  grid-column: 1 / span 8;
}

[data-bob-col-span="9"] {
  grid-column: span 9;
}

[data-bob-newline="true"][data-bob-col-span="9"] {
  grid-column: 1 / span 9;
}

[data-bob-col-span="10"] {
  grid-column: span 10;
}

[data-bob-newline="true"][data-bob-col-span="10"] {
  grid-column: 1 / span 10;
}

[data-bob-col-span="11"] {
  grid-column: span 11;
}

[data-bob-newline="true"][data-bob-col-span="11"] {
  grid-column: 1 / span 11;
}

[data-bob-col-span="12"] {
  grid-column: span 12;
}

[data-bob-newline="true"][data-bob-col-span="12"] {
  grid-column: 1 / span 12;
}

[data-bob-col-span="13"] {
  grid-column: span 13;
}

[data-bob-newline="true"][data-bob-col-span="13"] {
  grid-column: 1 / span 13;
}

[data-bob-col-span="14"] {
  grid-column: span 14;
}

[data-bob-newline="true"][data-bob-col-span="14"] {
  grid-column: 1 / span 14;
}

[data-bob-col-span="15"] {
  grid-column: span 15;
}

[data-bob-newline="true"][data-bob-col-span="15"] {
  grid-column: 1 / span 15;
}

[data-bob-col-span="16"] {
  grid-column: span 16;
}

[data-bob-newline="true"][data-bob-col-span="16"] {
  grid-column: 1 / span 16;
}

[data-bob-col-span="17"] {
  grid-column: span 17;
}

[data-bob-newline="true"][data-bob-col-span="17"] {
  grid-column: 1 / span 17;
}

[data-bob-col-span="18"] {
  grid-column: span 18;
}

[data-bob-newline="true"][data-bob-col-span="18"] {
  grid-column: 1 / span 18;
}

[data-bob-col-span="19"] {
  grid-column: span 19;
}

[data-bob-newline="true"][data-bob-col-span="19"] {
  grid-column: 1 / span 19;
}

[data-bob-col-span="20"] {
  grid-column: span 20;
}

[data-bob-newline="true"][data-bob-col-span="20"] {
  grid-column: 1 / span 20;
}

[data-bob-col-span="21"] {
  grid-column: span 21;
}

[data-bob-newline="true"][data-bob-col-span="21"] {
  grid-column: 1 / span 21;
}

[data-bob-col-span="22"] {
  grid-column: span 22;
}

[data-bob-newline="true"][data-bob-col-span="22"] {
  grid-column: 1 / span 22;
}

[data-bob-col-span="23"] {
  grid-column: span 23;
}

[data-bob-newline="true"][data-bob-col-span="23"] {
  grid-column: 1 / span 23;
}

[data-bob-col-span="24"] {
  grid-column: span 24;
}

[data-bob-newline="true"][data-bob-col-span="24"] {
  grid-column: 1 / span 24;
}

[data-bob-row-span="1"] {
  grid-row: span 1;
}

[data-bob-row-span="2"] {
  grid-row: span 2;
}

[data-bob-row-span="3"] {
  grid-row: span 3;
}

[data-bob-row-span="4"] {
  grid-row: span 4;
}

[data-bob-row-span="5"] {
  grid-row: span 5;
}

[data-bob-row-span="6"] {
  grid-row: span 6;
}

[data-bob-row-span="7"] {
  grid-row: span 7;
}

[data-bob-row-span="8"] {
  grid-row: span 8;
}

[data-bob-row-span="9"] {
  grid-row: span 9;
}

[data-bob-row-span="10"] {
  grid-row: span 10;
}

[data-bob-row-span="11"] {
  grid-row: span 11;
}

[data-bob-row-span="12"] {
  grid-row: span 12;
}

.bob-react-item-horizontal {
  grid-template-columns: var(--bob-label-width, min(120px, 30vw)) 1fr;
}

[data-bob-page-cols] {
  display: grid;
  gap: 0 var(--q-spacer, 16px); /* Use horizontal gap only; vertical managed by item margin */
  grid-template-columns: repeat(var(--panel-columns, 1), minmax(0, 1fr));
  max-width: 100%;
}

.bob-react-page-dynamic[data-bob-page-cols] {
  grid-template-columns: repeat(var(--panel-columns, 1), minmax(0, var(--bob-page-col-width, 450px)));
}

.bob-react-page-dynamic {
  --bob-page-col-width: 450px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[data-bob-page-cols="1"] {
  --panel-columns: 1;
}

[data-bob-page-cols="2"] {
  --panel-columns: 2;
}

[data-bob-page-cols="3"] {
  --panel-columns: 3;
}

[data-bob-page-cols="4"] {
  --panel-columns: 4;
}

[data-bob-page-cols="5"] {
  --panel-columns: 5;
}

[data-bob-page-cols="6"] {
  --panel-columns: 6;
}

[data-bob-page-cols="7"] {
  --panel-columns: 7;
}

[data-bob-page-cols="8"] {
  --panel-columns: 8;
}

[data-bob-page-cols="9"] {
  --panel-columns: 9;
}

[data-bob-page-cols="10"] {
  --panel-columns: 10;
}

[data-bob-page-cols="11"] {
  --panel-columns: 11;
}

[data-bob-page-cols="12"] {
  --panel-columns: 12;
}

[data-bob-page-cols="13"] {
  --panel-columns: 13;
}

[data-bob-page-cols="14"] {
  --panel-columns: 14;
}

[data-bob-page-cols="15"] {
  --panel-columns: 15;
}

[data-bob-page-cols="16"] {
  --panel-columns: 16;
}

[data-bob-page-cols="17"] {
  --panel-columns: 17;
}

[data-bob-page-cols="18"] {
  --panel-columns: 18;
}

[data-bob-page-cols="19"] {
  --panel-columns: 19;
}

[data-bob-page-cols="20"] {
  --panel-columns: 20;
}

[data-bob-page-cols="21"] {
  --panel-columns: 21;
}

[data-bob-page-cols="22"] {
  --panel-columns: 22;
}

[data-bob-page-cols="23"] {
  --panel-columns: 23;
}

[data-bob-page-cols="24"] {
  --panel-columns: 24;
}

.bob-react-panel-dragging {
  opacity: 0.5;
  z-index: 100;
}

.bob-react-item-dragging {
  opacity: 0.4;
  z-index: 100;
}

.bob-react-item-no-pointer {
  pointer-events: none;
}

.bob-react-panel-base {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

.bob-react-panel-pair {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
  box-sizing: border-box;
}

/* Fix for BobLayoutItem overlay overlapping on the left due to padding-left: 0 */

.bob-react-item .bob-react-overlay {
  left: -4px;
}

/* Mobile Responsiveness */

@media (max-width: 480px) {
  [data-bob-page-cols="2"],
  [data-bob-page-cols="3"],
  [data-bob-page-cols="4"],
  [data-bob-page-cols="5"],
  [data-bob-page-cols="6"],
  [data-bob-page-cols="7"],
  [data-bob-page-cols="8"],
  [data-bob-page-cols="9"],
  [data-bob-page-cols="10"],
  [data-bob-page-cols="11"],
  /* data-bob-page-cols="12" intentional omission here to allow grid fields side-by-side */
  [data-bob-page-cols="13"],
  [data-bob-page-cols="14"],
  [data-bob-page-cols="15"],
  [data-bob-page-cols="16"] {
    grid-template-columns: 1fr !important;
  }

  .bob-react-item {
    padding: var(--q-gap-base) !important;
  }

  /* Horizontal label items stack on mobile */
  .bob-react-item-horizontal {
    grid-template-columns: 1fr !important;
    gap: 4px;
  }

  .bob-react-item-horizontal-content {
    width: 100%;
  }

  /* Tab strip — ensure it's scrollable and has better touch targets */
  .bob-react-tab-strip-scroller {
    margin-bottom: 8px;
  }

  .bob-react-tab {
    padding: 10px 16px; /* Slightly taller for touch */
  }
}

.bob-area-zone-title {
  color: var(--q-text-edit, var(--q-text-base));
}

/* 3. Components */

/* Component Base Styles for @qiiqa/bob-ui */

/* Standard Button Class */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.363281235rem;
  font-size: var(--q-font-size-text, 0.875rem);
  font-weight: 500;
  border-radius: var(--q-border-radius);
  border: 1px solid var(--q-border-color);
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--q-text-base);
  outline: none;
  gap: var(--q-gap-base);
  min-height: var(--bob-btn-size-medium);
  height: auto;
  white-space: nowrap;
  text-align: center;
}

.btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

html body .btn i,
html body .btn span,
html body .btn .fa-solid,
html body .btn .fa-regular,
html body .btn .q-icon {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Icons often look slightly smaller than text of the same font size.
   We boost them to 1.1em to match perceived text height. */

html body .btn i:not(.bob-validation-icon),
html body .btn .fa-solid:not(.bob-validation-icon),
html body .btn .fa-regular:not(.bob-validation-icon),
html body .btn .q-icon:not(.bob-validation-icon) {
  font-size: 1.1em;
}

.btn:hover {
  background-color: var(--q-bg-hover);
  border-color: var(--q-primary);
}

.btn:focus-visible {
  outline: none;
  border-color: var(--q-primary);
  box-shadow: 0 0 0 1px var(--q-primary);
}

.btn:active,
.btn.active,
.btn.btn-active {
  color: var(--q-primary);
  background: var(--q-bg-base);
  border-color: var(--q-border-color);
  position: relative;
}

.btn:active::after,
.btn.active::after,
.btn.btn-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  right: 0.5rem;
  height: 0.125rem;
  background-color: var(--q-primary);
  border-radius: 0.125rem 0.125rem 0 0;
}

.btn:disabled:not(.btn-loading) {
  opacity: var(--q-btn-disabled-opacity, 0.5);
  cursor: not-allowed;
}

.btn.btn-loading {
  opacity: var(--q-btn-loading-opacity, 0.7);
  cursor: default;
}

/* Button Group */

.btn-group {
  display: inline-flex;
  gap: var(--q-control-gap);
  /* flex-wrap: wrap; */
  margin-top: 3px;
  margin-bottom: 3px;
}

@media (max-width: 768px) {
  .btn-group.responsive {
    flex-direction: column;
    width: 100%;
  }
  .btn-group.responsive button.btn {
    border: 1px solid var(--q-border-color);
  }
}

/* Size Modifiers */

.btn-small {
  min-height: var(--bob-btn-size-small);
  font-size: var(--q-font-size-sm);
  padding: 0 0.5rem; /* Reduced padding */
}

.btn-medium {
  min-height: var(--bob-btn-size-medium);
}

button.btn.btn-large {
  min-height: var(--bob-btn-size-large);
  font-size: calc(var(--q-font-size-base) * 1.25);
  padding: 0 1.25rem;
  border: 1px solid var(--q-border-color);
}

/* Icon Button Base */

.btn-icon {
  padding: 0;
  width: var(--bob-btn-size-medium);
  height: var(--bob-btn-size-medium);
  border-radius: var(--q-border-radius);
  border: none !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  flex-shrink: 0;
}

button.btn-icon:not(.active):not(.btn-active):not(.btn-is-primary) {
  background-color: var(--q-icon-btn-bg, transparent);
  color: var(
    --q-icon-btn-color,
    var(--q-icon-color-unselected, var(--q-icon-color))
  );
}

button.btn-icon.btn-is-primary {
  color: var(--q-primary);
  background-color: transparent;
}

button.btn-icon.active,
button.btn-icon.btn-active {
  color: var(--q-primary);
  background-color: var(--q-bg-hover);
}

/* Success and Danger icon buttons SHOULD remain solid blocks */

button.btn-icon.btn-danger,
button.btn-icon.btn-is-primary.btn-danger {
  color: var(--q-danger-text, #ffffff);
  background-color: var(--q-danger);
  border: none !important;
}

button.btn-icon.btn-success,
button.btn-icon.btn-is-primary.btn-success {
  color: var(--q-success-text, #ffffff);
  background-color: var(--q-success);
  border: none !important;
}

/* Icon Button Size Overrides */

.btn-icon.btn-small {
  width: var(--bob-btn-size-small);
  height: var(--bob-btn-size-small);
}

.btn-icon.btn-large {
  width: var(--bob-btn-size-large);
  height: var(--bob-btn-size-large);
}

/* Variants - Using higher specificity to ensure theme colors take precedence over structural styles */

button.btn.btn-primary,
button.btn.btn-is-primary {
  background-color: var(--q-primary);
  border: 1px solid var(--q-primary);
  color: var(--q-primary-text);
}

button.btn.btn-primary i,
button.btn.btn-primary span,
button.btn.btn-primary .fa-solid,
button.btn.btn-primary .fa-regular,
button.btn.btn-is-primary i,
button.btn.btn-is-primary span,
button.btn.btn-is-primary .fa-solid,
button.btn.btn-is-primary .fa-regular {
  color: inherit;
}

button.btn.btn-primary:hover,
button.btn.btn-is-primary:hover {
  background-color: var(--q-primary-hover);
  border-color: var(--q-primary);
  opacity: 0.9;
}

button.btn.btn-secondary {
  background-color: var(--q-secondary);
  border: 1px solid var(--q-secondary);
  color: var(--q-secondary-text);
}

button.btn.btn-secondary i,
button.btn.btn-secondary .fa-solid,
button.btn.btn-secondary .fa-regular {
  color: inherit;
}

button.btn.btn-secondary:hover {
  background-color: var(--q-secondary-hover, var(--q-secondary));
  opacity: 0.9;
}

button.btn.btn-danger {
  background-color: var(--q-danger);
  border: 1px solid var(--q-danger);
  color: var(--q-danger-text);
}

button.btn.btn-danger:hover {
  opacity: 0.9;
  background-color: var(--q-danger);
}

button.btn.btn-success {
  background-color: var(--q-success);
  border: 1px solid var(--q-success);
  color: var(--q-success-text);
}

button.btn.btn-success:hover {
  opacity: 0.9;
  background-color: var(--q-success);
}

/* Ghost Variant */

button.btn.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--q-text-muted);
}

button.btn.btn-ghost:hover {
  background-color: var(--q-bg-hover);
  color: var(--q-text);
}

/* Ensure icon buttons with variants have transparent backgrounds by default to avoid color clashes */

/* EXCEPT for Success and Danger which should show their background as per Phase 7 */

.btn-icon.btn-secondary {
  background-color: transparent;
  border-color: var(--q-border-color);
}

/* Icon button primary/secondary color defaults */

button.btn-icon.btn-primary:not(.active):not(.btn-active),
button.btn-icon.btn-is-primary:not(.active):not(.btn-active) {
  color: var(--q-primary);
}

button.btn-icon.btn-secondary:not(.active):not(.btn-active) {
  color: var(--q-secondary, var(--q-text-muted));
}

.btn-icon.btn-primary:hover,
.btn-icon.btn-is-primary:hover,
.btn-icon.btn-secondary:hover {
  background-color: var(--q-primary);
  color: var(--q-bg-base);
  border-color: var(--q-primary);
}

.btn-icon.btn-primary:hover *,
.btn-icon.btn-is-primary:hover *,
.btn-icon.btn-secondary:hover * {
  color: inherit;
}

button.btn-icon.btn-danger:hover {
  background-color: var(--q-danger);
  opacity: 0.9;
  border-color: var(--q-danger);
}

button.btn-icon.btn-success:hover {
  background-color: var(--q-success);
  opacity: 0.9;
  border-color: var(--q-success);
}

/* Theme Variant Rules */

.theme-variant-clean
  .btn:not(.btn-success):not(.btn-danger):not(.btn-is-primary):not(
    .btn-active
  ):not(.active) {
  border-color: transparent;
  background-color: transparent;
}

.theme-variant-clean
  .btn:not(.btn-success):not(.btn-danger):not(.btn-is-primary):not(
    .btn-active
  ):not(.active).btn-secondary {
  color: var(--q-secondary);
}

.theme-variant-clean
  .btn:not(.btn-success):not(.btn-danger):not(.btn-is-primary):not(
    .btn-active
  ):not(.active).btn-primary {
  color: var(--q-primary);
}

.theme-variant-clean
  .btn-icon:not(.btn-is-primary):not(.btn-active):not(.active) {
  border-color: transparent;
  background-color: transparent;
}

/* Ensure btn-is-primary overrides ANY other variant class (e.g. secondary) if they happen to both be present */

/* Use button tag to increase specificity and avoid !important */

button.btn.btn-is-primary,
button.btn-icon.btn-is-primary {
  background-color: var(--q-primary);
  border-color: var(--q-primary);
  color: var(--q-primary-text, var(--q-bg-base));
}

button.btn.btn-is-primary:hover,
button.btn-icon.btn-is-primary:hover {
  background-color: var(--q-primary-hover);
  border-color: var(--q-primary);
  opacity: 0.9;
}

/* Utilities */

.q-btn-ghost-padding-0 {
  padding: 0;
}

/* Input Styles for @qiiqa/bob-ui */

.q-input-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  background-color: var(--q-bg-base);
  height: var(--q-input-height);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.q-input-wrapper:focus-within {
  border-color: var(--q-primary);
  outline: none;
  box-shadow: 0 0 0 1px var(--q-primary);
}

.q-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0 var(--q-padding-base);
  height: 100%;
  width: 100%;
  min-width: 0;
  outline: none;
  color: var(--q-text-edit);
  /* Default to dark gray/black fallback */
  font-size: var(--q-font-size-text, 0.875rem);
}

.q-input:focus-visible {
  outline: none;
}

input::placeholder,
textarea::placeholder,
.q-input::placeholder,
.q-currency-input::placeholder,
.q-input-wrapper textarea.q-input::placeholder,
.q-input-wrapper .q-input::placeholder {
  color: var(--q-text-placeholder, var(--q-text-readonly));
  opacity: 1;
}

/* Light theme: always use dark text regardless of any inherited or inline CSS variable values. */

.theme-light .q-input-wrapper .q-input,
.theme-light input,
.theme-light textarea {
  color: var(--q-text-edit);
}

.theme-light .q-currency-wrapper .q-currency-input {
  color: var(--q-text-edit);
}

/* Placeholder defaults per theme class.
   The VariantDesigner overrides these via its injected <style> tag when a custom color is chosen. */

.theme-light .q-input::placeholder,
.theme-light input::placeholder,
.theme-light textarea::placeholder,
.theme-light .q-currency-input::placeholder {
  color: var(--q-text-readonly);
}

.theme-dark .q-input::placeholder,
.theme-dark input::placeholder,
.theme-dark textarea::placeholder,
.theme-dark .q-currency-input::placeholder {
  color: var(--q-text-readonly);
}

/* ReadOnly & Disabled States */

div.q-input-wrapper.q-readonly,
div.q-input-wrapper.q-disabled {
  /* background-color: transparent;
  border-style: dotted; */
  border-color: var(--q-border-color);
}

div.q-input-wrapper.q-readonly .q-input,
div.q-input-wrapper.q-readonly .q-input[readonly] {
  color: var(--q-text-edit);
  opacity: 0.85;
}

.q-input:disabled,
.q-input[readonly] {
  cursor: default;
  background: transparent;
}

.q-input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Standard Right Icon for inputs (F4/Popup indicator) */

.q-input-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--q-input-height);
  height: 100%;
  cursor: pointer;
  color: var(--q-icon-color);
  transition: color 0.2s;
  border-left: 1px solid var(--q-border-color);
}

.q-input-icon:hover {
  color: var(--q-icon-hover-color);
  background-color: var(--q-bg-hover);
}

/* Multiline/Memo variant */

.q-input-wrapper.multiline {
  height: auto;
  min-height: calc(var(--q-input-height) * 3);
  align-items: flex-start;
}

.q-input-wrapper.multiline .q-input {
  padding: var(--q-padding-base);
  resize: vertical;
}

textarea.q-input.q-expand-vertical {
  height: 100%;
  flex: 1;
}

/* Currency Wrapper */

.q-currency-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  background-color: var(--q-bg-base);
  height: var(--q-input-height, 2.25rem);
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.q-currency-wrapper:focus-within {
  border-color: var(--q-primary);
  outline: none;
  box-shadow: 0 0 0 1px var(--q-primary);
}

div.q-currency-wrapper.q-readonly,
div.q-currency-wrapper.q-disabled {
  background-color: transparent;
  border-style: dotted;
  border-color: var(--q-border-color);
}

div.q-currency-wrapper.q-readonly .q-input,
div.q-currency-wrapper.q-readonly .q-input[readonly],
div.q-currency-wrapper.q-disabled .q-input {
  color: var(--q-text-edit);
  opacity: 0.85;
}

/* Currency Inputs: hide arrows */

.q-currency-input::-webkit-outer-spin-button,
.q-currency-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.q-currency-input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.q-currency-symbol-area {
  display: flex;
  align-items: center;
  position: relative;
  height: calc(100% - 6px); /* Inset lightly for a modern 'pill' feel */
  margin: 3px 0 3px 3px;
  border-radius: calc(var(--q-border-radius) - 2px);
  transition: background-color 0.2s, border-color 0.2s;
}

.q-currency-changeable .q-currency-symbol-area {
  cursor: pointer;
  background-color: transparent;
  padding: 0 0.5rem;
}

.q-currency-changeable .q-currency-symbol-area:hover {
  background-color: var(--q-bg-hover);
}

/* Subtle vertical divider */

.q-currency-changeable .q-currency-symbol-area::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: var(--q-border-color);
  opacity: 0.6;
}

.q-currency-symbol {
  color: var(--q-text-dropdown, var(--q-text-base));
  font-weight: 500;
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}

.q-currency-chevron {
  font-size: 0.625rem;
  color: var(--q-text-placeholder, var(--q-text-readonly));
  margin-left: 0.25rem;
  pointer-events: none;
  transition: color 0.15s ease;
}

.q-currency-changeable .q-currency-symbol-area:hover .q-currency-chevron {
  color: var(--q-text-base);
}

.q-currency-select-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.q-currency-input {
  flex: 1;
  border: none;
  background: transparent;
  height: 100%;
  width: 100%;
  outline: none;
  color: var(--q-text-edit);
  font-size: var(--q-font-size-text, 0.875rem);
  padding: 0 var(--q-padding-base, 0.75rem);
}

.q-currency-input:focus-visible {
  outline: none;
}

/* Validation Statuses */

.q-input-wrapper.q-error {
  border-color: var(--q-danger);
}

.q-input-wrapper.q-validating::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: calc(50% - 0.375rem);
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--q-primary);
  border-radius: 50%;
  border-top-color: transparent;
  animation: q-spin 0.6s linear infinite;
  pointer-events: none;
}

@keyframes q-spin {
  to {
    transform: rotate(360deg);
  }
}

.q-input-wrapper.q-valid::after {
  content: "✓";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--q-success);
  font-weight: bold;
  pointer-events: none;
}

/* Adjust padding if status icon is present */

.q-input-wrapper.q-validating .q-input,
.q-input-wrapper.q-valid .q-input {
  padding-right: 2rem;
}

/* Validation Panel used in BobValidation */

.bob-validation-panel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  font-size: var(--q-font-size-sm);
}

.bob-validation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  font-size: 0.625rem;
  border-radius: 50%;
  font-style: normal;
}

.bob-validation-icon.success {
  background-color: var(--q-success);
  color: var(--q-bg-base);
}

.bob-validation-icon.success::before {
  content: var(--bob-icon-val-success, "✓");
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.bob-validation-icon.failure {
  background-color: var(--q-danger);
  color: var(--q-bg-base);
}

.bob-validation-icon.failure::before {
  content: var(--bob-icon-val-failure, "✕");
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.bob-validation {
  color: var(--q-danger);
  font-size: var(--q-font-size-sm);
}

/* Standalone BobText input style */

.bob-text-input {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  background-color: var(--q-bg-base);
  height: var(--q-input-height);
  padding: 0 var(--q-padding-base);
  font-size: var(--q-font-size-text, 0.875rem);
  color: var(--q-text-edit);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
  box-sizing: border-box;
}

.bob-text-input:focus {
  border-color: var(--q-primary);
  outline: none;
  box-shadow: 0 0 0 1px var(--q-primary);
}

.bob-text-input::placeholder {
  font-size: inherit;
  color: var(--q-text-placeholder, var(--q-text-readonly));
}

.q-input-readonly-tokens {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Upload input field: make it look and feel clickable */

.q-upload-input-field:not(.q-upload-readonly-mode) .q-input {
  cursor: pointer;
}

.q-upload-input-field:not(.q-upload-readonly-mode):hover {
  background-color: var(--q-bg-hover);
}

.q-upload-input-field:not(.q-upload-readonly-mode):active {
  background-color: rgba(var(--q-primary-rgb, 37, 99, 235), 0.1);
}

/* Select and Checkbox Styles for @qiiqa/bob-ui */

/* Select */

.q-select-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  background-color: var(--q-bg-base);
  height: var(--q-input-height);
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.q-select-wrapper:focus-within {
  border-color: var(--q-primary);
  outline: none;
  box-shadow: 0 0 0 1px var(--q-primary);
}

.q-select {
  flex: 1;
  border: none;
  background-color: var(--q-bg-base);
  padding: 0 var(--q-input-height) 0 var(--q-padding-base); /* Add padding right so text doesn't overlap icon */
  height: 100%;
  width: 100%;
  outline: none;
  color: var(--q-text-dropdown, var(--q-text-edit, var(--q-text-base)));
  font-size: 0.875rem;
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  position: relative;
  z-index: 1; /* Floats above the absolute icon to catch clicks natively */
  margin-right: 6px;
  margin-left: -3px;
}

.q-select:focus-visible {
  outline: none;
}

/* Force OS-level dropdown menus to respect dynamic theme contrast */

html.theme-light .q-select-wrapper .q-select option,
html.theme-light .q-select:focus option,
html.theme-light .q-select option,
html.theme-light select option {
  background-color: var(--q-bg-dropdown, #ffffff) !important;
  color: var(--q-text-base, #1a1a1a) !important;
}

html.theme-dark .q-select-wrapper .q-select option,
html.theme-dark .q-select:focus option,
html.theme-dark .q-select option,
html.theme-dark select option {
  background-color: var(--q-bg-dropdown, #1e293b) !important;
  color: var(--q-text-base, #f8fafc) !important;
}

.q-select-wrapper.q-disabled .q-select {
  color: var(--q-text-edit);
  opacity: 0.85;
  cursor: not-allowed;
}

/* Standard Look for Select Dropdown Icon (Matches q-input-icon) */

.q-select-icon {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2; /* Ensure it stays above the border and background of the select box */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--q-input-height);
  height: 100%;
  pointer-events: none;
  color: var(--q-icon-color);
  border-left: 1px solid var(--q-border-color);
  font-size: 8px;
  /* Scaled */
}

.q-select-wrapper.q-disabled .q-select-icon {
  opacity: 0.6;
}

/* Choice Icons Wrapper */

.q-choice-icons-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--q-control-gap);
  flex-wrap: wrap;
}

.q-choice-icons-wrapper button.btn.q-selected:hover {
  background-color: var(--q-bg-hover);
  color: var(--q-primary);
  border-color: var(--q-primary);
}

/* Ensure the icon itself also follows the primary color on hover if selected */

.q-choice-icons-wrapper button.btn.q-selected:hover i {
  color: var(--q-primary);
}

/* Checkbox */

.q-checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  gap: var(--q-control-gap);
  cursor: pointer;
  user-select: none;
}

.q-checkbox {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  aspect-ratio: 1/1;
  border: 1px solid var(--q-border-color);
  border-radius: 4px;
  background-color: var(--q-bg-hover);
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative;
  outline: none;
}

input.q-checkbox:focus-visible {
  outline: none;
  border-color: var(--q-primary);
  box-shadow: 0 0 0 1px var(--q-primary);
}

.q-checkbox[data-state="unchecked"]::after {
  content: "✕";
  color: var(--q-text-muted);
  font-size: 10px;
  font-weight: bold;
  opacity: 0.8;
}

.q-checkbox[data-state="unset"]::after {
  content: "?";
  color: var(--q-warning);
  font-size: 12px;
  font-weight: bold;
}

.q-checkbox[data-state="checked"] {
  background-color: var(--q-text-edit);
  border-color: var(--q-text-edit);
}

.q-checkbox[data-state="checked"]::after {
  content: "";
  width: 5px;
  height: 10px;
  border: solid var(--q-checkbox-tick-color, var(--q-text-on-dark));
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  display: block;
  margin-top: -2px;
}

.q-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--q-text-base);
}

.q-checkbox-wrapper.q-readonly .q-checkbox-label,
.q-checkbox-wrapper.q-disabled .q-checkbox-label {
  color: var(--q-text-edit);
  opacity: 0.85;
}

/* Choice / Radio */

.q-choice-wrapper {
  display: flex;
  /* flex-direction: column; */
  gap: 8px;
  flex-wrap: wrap;
}

.q-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-control-gap);
}

.q-choice-item,
.q-choice-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Scaled */
  cursor: pointer;
}

.q-choice-label {
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--q-text-base);
}

.q-choice-group.q-disabled .q-choice-label {
  color: var(--q-text-edit);
  opacity: 0.85;
}

/* Ensure global read-only class applies if group-level */

.q-choice-group.q-readonly .q-choice-label {
  color: var(--q-text-edit);
  opacity: 0.85;
}

.q-choice-item input[type="radio"],
.q-choice-option input[type="radio"],
.q-choice-input {
  margin: 0;
  cursor: pointer;
  accent-color: var(--q-text-edit);
}

/* Modal and Popup Styles for @qiiqa/bob-ui */

.q-dialog {
  border-radius: 8px;
  border: 3px solid var(--q-border-color);
  padding: 3px;
  overflow: hidden;
  background-color: var(--q-surface);
  box-shadow: var(--q-shadow-container);
}

.q-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.q-dialog-inner {
  border-radius: 6px;
  background-color: var(--q-surface);
  padding: var(--q-padding-base, 12px);
  display: flex;
  flex-direction: column;
}

.q-dialog-header {
  border-bottom: 1px solid var(--q-border-color);
  padding-bottom: 12px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.q-dialog-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--q-color-heading, var(--q-text-base));
}

.q-dialog-content {
  display: flex;
  flex-direction: column;
  gap: var(--q-gap-base, 8px);
  color: var(--q-text-base);
}

.q-dialog-footer {
  border-top: 1px solid var(--q-border-color);
  padding-top: 12px;
  margin-top: 12px;
}

.q-dialog-footer .btn-group {
  margin-top: 0;
  justify-content: flex-end;
}

.q-dialog-footer .btn-group.btn-group-spread {
  justify-content: space-between;
  width: 100%;
}

.q-dialog-header-close {
  padding: 0;
  min-width: 24px;
  height: 24px;
}

.q-dialog-message {
  margin-top: 4px;
  color: var(--q-text-base);
}

/* Input text inside dialogs should match the dialog's text colour scheme */

.q-dialog-content .q-input,
.q-dialog-content input {
  color: var(--q-text-base);
}

.q-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--q-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

div.q-modal {
  background-color: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  box-shadow: var(--q-shadow-container);
  width: 100%;
  max-width: min(500px, 95vw);
  padding: var(--q-padding-base);
  display: flex;
  flex-direction: column;
  gap: var(--q-spacer);
}

.q-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--q-border-color);
  padding-bottom: var(--q-gap-base);
}

.q-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--q-color-heading, var(--q-text-base));
}

.q-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--q-gap-base);
  color: var(--q-text-base);
}

.q-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--q-gap-base);
  border-top: 1px solid var(--q-border-color);
  padding-top: var(--q-gap-base);
}

/* Popup - A more advanced modal type */

div.q-popup {
  padding: 0;
  border: 1px solid var(--q-border-color);
  background-color: var(--q-bg-base);
  box-shadow: var(
    --q-shadow-modal,
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1)
  );
  overflow: hidden;
  flex-direction: column;
}

.q-popup[open] {
  display: flex;
}

.q-popup:not([open]) {
  display: none;
}

.q-popup-large {
  width: 90vw;
  height: 90vh;
}

.q-popup-medium {
  width: 60vw;
  height: 60vh;
}

.q-popup-small {
  width: 40vw;
  height: 40vh;
}

.q-popup-full {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

.q-popup-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.q-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 2vh, 16px) clamp(10px, 2.5vw, 20px);
  border-bottom: 1px solid var(--q-border-color);
  background: var(--q-bg-subtle);
}

.q-popup-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--q-color-heading, var(--q-text-base));
}

.q-popup-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--q-text-muted, #64748b);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: all 0.2s;
}

.q-popup-close-btn:hover {
  background-color: var(--q-bg-hover, rgba(0, 0, 0, 0.05));
  color: var(--q-text-base);
}

.q-popup-content {
  flex: 1;
  padding: clamp(12px, 3vw, 24px);
  overflow-y: auto;
  color: var(--q-text-base);
}

.q-popup-footer {
  padding: clamp(6px, 1.5vh, 12px) clamp(10px, 2.5vw, 20px);
  border-top: 1px solid var(--q-border-color);
  background: var(--q-bg-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--q-control-gap);
}

/* === Validation / Error Dialog State === */

@keyframes bob-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 var(--q-danger); }
  50%       { box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-danger) 40%, transparent); }
}

.q-dialog-validation {
  border-color: var(--q-danger);
  animation: bob-pulse-red 1.6s ease-in-out infinite;
}

.q-dialog-error-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--q-danger);
  margin-bottom: var(--q-gap-base);
}

.q-dialog-error-code {
  font-size: var(--q-font-size-sm);
  color: var(--q-danger);
  font-weight: 600;
  margin-bottom: calc(var(--q-gap-base) / 2);
  text-align: center;
}

.q-dialog-error-hint {
  font-size: var(--q-font-size-base);
  color: var(--q-text-base);
  text-align: center;
}

/* Pulse the title text red when in validation mode */

.q-dialog-validation .q-dialog-title {
  color: var(--q-danger);
}

/* Mobile Responsiveness for Modals/Popups */

@media (max-width: 768px) {
  .q-popup-large {
    width: 98vw;
    height: 95vh;
  }
  .q-popup-medium {
    width: 95vw;
    height: 80vh;
  }
  .q-popup-small {
    width: 92vw;
    height: auto;
    max-height: 80vh;
  }
  .q-popup-full {
    width: 100vw;
    height: 100vh;
  }
  .q-popup-content {
    padding: 12px;
  }
}

/* TabStrip Styles for @qiiqa/bob-ui */

.q-tab-strip {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--q-border-color);
  margin-bottom: var(--q-spacer);
  padding-bottom: 0;
}

.q-tab {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* overlap the strip border */
  transition: color 0.15s, background-color 0.15s, border-bottom-color 0.15s;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--q-tab-text-inactive, var(--q-text-muted));
  background-color: transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.q-tab:hover {
  background-color: var(--q-bg-hover);
  color: var(--q-text-base);
  border-bottom-color: var(--q-border-color);
}

.q-tab.active {
  border-bottom-color: var(--q-primary);
  color: var(--q-primary);
  background-color: var(--q-bg-hover);
}

/* Active tab hover: keep the primary indicator, just brighten slightly */

.q-tab.active:hover {
  background-color: var(--q-bg-subtle, var(--q-bg-hover));
  border-bottom-color: var(--q-primary);
  color: var(--q-primary);
}

/* Theme Variant Rules */

.theme-variant-clean .q-tab {
  border-color: transparent;
}

.theme-variant-clean .q-tab.active {
  border-bottom-color: var(--q-primary);
}

/* Toast Styles for @qiiqa/bob-ui */

.q-toast-container {
  position: fixed;
  top: var(--q-toast-top-offset, 1rem);
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 2000;
}

.q-toast {
  min-width: 300px;
  padding: 1rem;
  background-color: var(--q-bg-base);
  border-left: 4px solid var(--q-primary);
  border-radius: var(--q-border-radius);
  box-shadow: var(--q-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideIn 0.3s ease-out;
  color: var(--q-text-toast, var(--q-text-demo-label, var(--q-text-muted)));
}

.q-toast.success {
  border-left-color: var(--q-success);
}

.q-toast.danger {
  border-left-color: var(--q-danger);
}

.q-toast.warning {
  border-left-color: var(--q-warning);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.q-toast-content {
  flex: 1;
}

.q-toast-close {
  cursor: pointer;
  padding: 0.25rem;
  opacity: 0.5;
}

.q-toast-close:hover {
  opacity: 1;
}

/* Pagination Styles for @qiiqa/bob-ui */

.q-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--q-spacer);
}

.q-pagination-btn {
  padding: 0.25rem 0.5rem;
  min-width: 2rem;
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  background: var(--q-bg-hover); /* Match q-tab */
  color: var(--q-text-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--q-font-size-sm);
  transition: all 0.2s;
}

.q-pagination-btn:hover {
  background-color: var(--q-bg-hover);
  color: var(--q-primary);
}

.q-pagination-btn.active {
  background: transparent;
  color: var(--q-primary);
  border-color: transparent;
  border-bottom: 2px solid var(--q-primary);
  border-radius: var(--q-border-radius) var(--q-border-radius) 0 0;
}

/* Theme Variant Rules */

.theme-variant-clean .q-pagination-btn {
  border-color: transparent;
  background: transparent; /* Clean theme usually has transparent backgrounds */
}

.theme-variant-clean .q-pagination-btn.active {
  border-bottom-color: var(--q-primary);
  background: transparent;
}

.q-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--q-bg-base); /* Faded out */
}

/* Bob Table Styles */

.q-table-container {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--q-border-color);
    border-radius: var(--q-border-radius);
    background: var(--q-bg);
}

.q-table-container::-webkit-scrollbar {
    height: 4px;
}

.q-table-container::-webkit-scrollbar-thumb {
    background: var(--q-border-color);
    border-radius: 10px;
}

.q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.q-table th {
    text-align: left;
    padding: 0.75rem;
    width: var(--col-width, auto);
    background: var(--q-bg-hover);
    border-bottom: 1px solid var(--q-border-color);
    cursor: pointer;
    user-select: none;
    position: relative;
    font-weight: 600;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.q-table th:hover {
    background: var(--q-bg-active);
}

.q-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--q-border-color);
    vertical-align: middle;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.q-table td .bob-react-item {
    margin-bottom: 0 !important;
    gap: 0 !important;
}

.q-table tr:last-child td {
    border-bottom: none;
}

.q-table tr:hover {
    background: var(--q-bg-hover);
    cursor: pointer;
}

.q-table-empty-message {
    text-align: center;
    padding: 2rem;
    color: var(--q-text-muted);
}

@media (max-width: 768px) {
  .q-table {
    font-size: 0.75rem;
  }
  .q-table th,
  .q-table td {
    padding: 4px 2px;
    min-width: 0;
  }
}

/* ==========================================================================
   Icon Mappings - Master mapping for component icons
   Allows themes to override these variables to change icons globally.
   Usage: <i className="fa-solid bob-icon-nav-prev"></i>
   ========================================================================== */

:root {
  --bob-icon-nav-prev: "\f077"; /* fa-chevron-up */
  --bob-icon-nav-next: "\f078"; /* fa-chevron-down */
  --bob-icon-back: "\f060"; /* fa-arrow-left */
  --bob-icon-edit: "\f044"; /* fa-pen-to-square */
  --bob-icon-save: "\f0c7"; /* fa-floppy-disk */
  --bob-icon-undo: "\f2ea"; /* fa-rotate-left */
  --bob-icon-delete: "\f2ed"; /* fa-trash-can */
  --bob-icon-refresh: "\f021"; /* fa-arrows-rotate */
  --bob-icon-col-far-left: "\f100"; /* fa-angles-left */
  --bob-icon-col-left: "\f104"; /* fa-angle-left */
  --bob-icon-col-center: "\f111"; /* fa-circle */
  --bob-icon-col-right: "\f105"; /* fa-angle-right */
  --bob-icon-col-far-right: "\f101"; /* fa-angles-right */
}

.bob-icon-nav-prev::before { content: var(--bob-icon-nav-prev) !important; }

.bob-icon-nav-next::before { content: var(--bob-icon-nav-next) !important; }

.bob-icon-back::before { content: var(--bob-icon-back) !important; }

.bob-icon-edit::before { content: var(--bob-icon-edit) !important; }

.bob-icon-save::before { content: var(--bob-icon-save) !important; }

.bob-icon-undo::before { content: var(--bob-icon-undo) !important; }

.bob-icon-delete::before { content: var(--bob-icon-delete) !important; }

.bob-icon-refresh::before { content: var(--bob-icon-refresh) !important; }

.bob-icon-col-far-left::before { content: var(--bob-icon-col-far-left) !important; }

.bob-icon-col-left::before { content: var(--bob-icon-col-left) !important; }

.bob-icon-col-center::before { content: var(--bob-icon-col-center) !important; }

.bob-icon-col-right::before { content: var(--bob-icon-col-right) !important; }

.bob-icon-col-far-right::before { content: var(--bob-icon-col-far-right) !important; }

/* Choice Group */

.q-choice-group {
  display: flex;
  gap: var(--q-control-gap);
  flex-wrap: wrap;
}

.q-choice-item {
  display: flex;
  align-items: center;
  gap: var(--q-control-gap, 4px);
  cursor: pointer;
}

/* Picture Box */

.q-picture-box {
  border: 1px dashed var(--q-border-color);
  border-radius: var(--q-border-radius);
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 9.375rem;
  background: var(--q-bg-hover);
  aspect-ratio: 1 / 1;
  max-height: 25rem;
  max-width: 25rem;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}

.q-picture-dragover {
  border-color: var(--q-primary);
  background: var(--q-primary-alpha-15);
  /* A bit of a tint */
}

.q-picture-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--q-gap-base);
}

/* Placeholder (no image yet) — fills the box so the upload button is bounded */

.q-picture-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 80px;
  overflow: hidden;
}

/* Constrain the button to the placeholder width */

.q-picture-placeholder .btn {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: auto;
  min-height: var(--bob-btn-size-medium, 36px);
  padding-block: 0.375rem;
}

/* Allow each word to sit on its own line */

.q-picture-placeholder .btn span {
  display: block;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  min-width: 0;
}

/* 4. Utilities (highest priority) - Empty for now, as per plan to skip Bootstrap-like utilities */

.q-picture-controls {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.q-picture-remove-group {
  display: flex;
  gap: 0.5rem;
}

.q-picture-placeholder-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: 1rem;
}

.q-picture-placeholder-text {
  font-size: 0.8rem;
  color: var(--q-text-muted);
  text-align: center;
}/* src/components/BobDevAuthPanel.css */
.bob-dev-auth-initials {
  border-radius: 20px !important;
  padding: 5px;
}
.premium-card {
  background-color: var(--q-bg-surface, var(--bob-bg-surface)) !important;
  border: 1px solid var(--q-border-color, var(--bob-border, rgba(0, 0, 0, 0.08))) !important;
  border-radius: var(--q-border-radius, var(--bob-radius, 4px)) !important;
}
.bob-auth-dev-cards-grid-flow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* src/components/BobAuthProfilePanel.css */
.bob-auth-profile-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: var(--bob-bg-surface);
  border-radius: var(--bob-radius);
  overflow: hidden;
}
.bob-auth-profile-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}
.bob-auth-profile-panel .bob-react-page {
  column-gap: 8px !important;
  padding: 0 !important;
}
.bob-auth-profile-panel .bob-react-panel {
  padding: 12px !important;
  margin: 0 !important;
  border-radius: 8px;
  background-color: var(--bob-bg-surface);
}
.bob-auth-profile-panel .bob-react-panel-header {
  margin-bottom: 12px !important;
}
.bob-auth-profile-panel .bob-react-page {
  overflow: visible !important;
}
.bob-auth-profile-panel .bob-form-page {
  padding: 1.5rem;
}
.bob-auth-profile-panel .bob-bar {
  border-bottom: 1px solid var(--bob-border);
  background-color: var(--bob-bg-base);
}
.bob-auth-profile-panel .bob-form-group {
  margin-bottom: 1.5rem;
}
.bob-auth-profile-panel .bob-form-field {
  margin-bottom: 1rem;
}
.bob-popup-area-content:has(.bob-auth-profile-panel) {
  max-height: 90vh;
}

/* src/components/AuthComponents.css */
.bob-auth-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 0.25rem;
  background-color: var(--bob-primary-subtle, rgba(0, 123, 255, 0.1));
  color: var(--bob-primary, #007bff);
}
.bob-auth-badge--primary {
  background-color: var(--bob-primary-subtle, rgba(0, 123, 255, 0.1));
  color: var(--bob-primary, #007bff);
}
.bob-auth-badge--subtle {
  background-color: var(--bob-primary-subtle, rgba(0, 123, 255, 0.05));
}
.bob-auth-header-content {
  text-align: left;
  margin-bottom: 1rem;
}
.bob-auth-welcome-title {
  font-family: var(--q-font-family, inherit);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--bob-auth-text-primary, inherit);
}
.bob-auth-welcome-desc {
  font-family: var(--q-font-family, inherit);
  font-size: 0.85rem;
  color: var(--bob-auth-text-secondary, #aaa);
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.bob-auth-footer-text {
  text-align: center;
  font-size: 0.85rem;
  color: var(--bob-auth-text-secondary, #aaa);
  font-family: var(--q-font-family, inherit);
}
.bob-auth-form-content {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
}
.bob-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bob-auth-form-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}
.bob-auth-form-row .bob-form-field {
  flex: 1;
  min-width: 0;
}
.bob-auth-field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bob-auth-text-primary, inherit);
  font-family: var(--q-font-family, inherit);
}
.bob-auth-form .bob-auth-controls-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.bob-auth-forgot-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: -0.5rem;
  margin-bottom: 0.5rem;
}
.bob-auth-spacer {
  flex: 1;
}
.bob-auth-forgot-link,
.bob-auth-footer-description,
.bob-auth-footer-description a,
.bob-auth-footer-description .bob-box-link {
  font-size: 0.85rem !important;
  color: var(--bob-auth-text-secondary, #aaa) !important;
  font-family: var(--q-font-family, inherit) !important;
}
.bob-auth-footer-description .bob-box-link {
  color: var(--q-primary, #2563eb) !important;
  font-weight: 900;
}
html.theme-light .bob-auth-footer-description .bob-box-link {
  font-weight: 900;
  background-color: var(--color-brand-ink, #1a1a1a);
  border-radius: 8px;
  padding: 2px 4px;
  -webkit-font-smoothing: antialiased;
}
.bob-auth-error {
  margin-bottom: 1rem;
  color: var(--q-danger-500);
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 0.85rem;
}
.bob-auth-connections-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bob-auth-center {
  text-align: center;
}
.bob-auth-margin-bottom-1 {
  margin-bottom: 1rem;
}
.bob-auth-success {
  margin-bottom: 1rem;
  color: var(--q-success-500);
}
.bob-auth-success-icon-container {
  width: 4rem;
  height: 4rem;
  background-color: color-mix(in srgb, var(--q-success) 10%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.bob-auth-success-icon {
  stroke: #10b981;
}
.bob-auth-flex-center {
  display: flex;
  justify-content: center;
}
.bob-auth-margin-bottom-1-5 {
  margin-bottom: 1.5rem;
}
.bob-auth-full-width-btn {
  width: 100%;
}
.bob-auth-tab-strip-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
  width: 100%;
}
.bob-auth-tab-strip-container {
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 1px solid var(--bob-auth-border);
  gap: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
}
.bob-auth-tab-strip-container::-webkit-scrollbar {
  display: none;
}
.bob-auth-tab-btn {
  flex: 1 1 auto;
  min-width: 5rem;
  padding: 0.75rem 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 0.125rem solid transparent;
  color: var(--bob-auth-text-secondary);
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s;
  white-space: normal;
  font-size: 0.85rem;
}
.bob-auth-tab-btn.active {
  background: var(--bob-auth-bg-secondary);
  border-bottom: 0.125rem solid var(--bob-auth-accent-primary);
  color: var(--bob-auth-text-primary);
  font-weight: 600;
}
.bob-auth-connection-info {
  font-size: 0.75rem;
  color: var(--q-danger-500);
  text-align: center;
  margin-top: 5px;
}
.bob-auth-icon-info {
  margin-left: 4px;
  color: var(--q-text-muted);
}
.bob-auth-icon-error {
  margin-right: 4px;
}
.bob-auth-test-card {
  padding: 1.25rem;
}
.bob-auth-test-title {
  margin-bottom: 1rem;
  color: var(--text-color, #fff);
}
.bob-auth-test-desc {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted, #aaa);
}
.bob-auth-test-empty {
  text-align: center;
}
.bob-auth-test-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-height: 21.875rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}
.bob-auth-test-user-btn {
  text-align: left;
  padding: 10px;
  width: 100%;
}
.bob-auth-user-summary-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
.bob-auth-user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--q-primary-100);
  color: var(--q-primary-800);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bob-auth-user-info-name {
  font-weight: 600;
}
.bob-auth-user-info-email {
  font-size: 0.85rem;
  color: var(--q-text-muted);
}
.bob-auth-menu-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bob-auth-menu-signout-container {
  margin-top: 0.5rem;
  border-top: 1px solid var(--q-border-subtle);
  padding-top: 1rem;
}
.bob-auth-full-width-start {
  width: 100%;
  justify-content: flex-start;
}
.bob-auth-sub-view-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  overflow-y: auto;
}
.bob-auth-back-button-container {
  margin-bottom: 1rem;
}
.bob-auth-management-card {
  padding: 0;
  width: 100%;
  max-width: 60rem;
  height: 90vh;
  max-height: 50rem;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
@media (max-width: 450px) {
  .bob-auth-management-card {
    height: 100vh;
    max-height: none;
    border-radius: 0;
  }
}
.bob-auth-submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.bob-auth-button-full {
  width: 180px;
  padding: 0.625rem;
  margin-top: 0.5rem;
}
.bob-auth-subscription-container {
  width: 100%;
  padding: 1rem;
}
.bob-auth-subscription-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.5rem;
}
.bob-auth-subscription-card {
  border: 1px solid var(--bob-auth-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  background: var(--bob-auth-bg-secondary);
  transition: border-color 0.2s ease;
}
.bob-auth-subscription-card.is-current {
  border: 2px solid var(--bob-auth-bg-primary);
}
.bob-auth-plan-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.bob-auth-plan-price {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}
.bob-auth-plan-price span {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--bob-auth-text-secondary);
}
.bob-auth-plan-desc {
  font-size: 0.875rem;
  color: var(--bob-auth-text-secondary);
  margin-bottom: 1rem;
  flex: 1;
}
.bob-auth-plan-features {
  padding: 0;
  margin: 0 0 1.5rem;
  list-style: none;
  font-size: 0.875rem;
}
.bob-auth-plan-features li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bob-auth-feature-check {
  color: var(--q-success);
}
.bob-auth-current-plan-badge {
  text-align: center;
  color: var(--q-success);
  font-weight: bold;
  padding: 0.5rem;
}
.bob-auth-cancel-section {
  margin-top: 2rem;
  border-top: 1px solid var(--bob-auth-border);
  padding-top: 1rem;
}
.bob-auth-btn-danger {
  color: var(--q-danger);
}
.bob-auth-section-title {
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  border-bottom: 1px solid var(--bob-auth-border);
  padding-bottom: 0.75rem;
}
.bob-auth-invite-form {
  margin-bottom: 2.5rem;
  max-width: 25rem;
}
.bob-auth-input-group {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.bob-auth-input-group > div {
  flex: 1;
}
.bob-auth-user-table-container {
  overflow-x: auto;
  width: 100%;
}
.bob-auth-user-table {
  width: 100%;
  border-collapse: collapse;
}
.bob-auth-user-table th {
  text-align: left;
  border-bottom: 1px solid var(--bob-auth-border);
  padding: 0.75rem 0.5rem;
  color: var(--bob-auth-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}
.bob-auth-user-table td {
  padding: 0.75rem 0.5rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--bob-border);
}
.bob-auth-user-table tr:last-child td {
  border-bottom: none;
}
.bob-auth-text-right {
  text-align: right;
}
.bob-auth-margin-top-1 {
  margin-top: 1rem;
}
.bob-auth-margin-top-2 {
  margin-top: 1.5rem;
}
.bob-auth-margin-bottom-1 {
  margin-bottom: 1rem;
}
.bob-auth-margin-bottom-2 {
  margin-bottom: 1.5rem;
}
.bob-auth-management-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.bob-auth-management-layout .bob-dynamic-form-container {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.bob-auth-management-layout .bob-dynamic-form-main {
  padding: 1.5rem;
  padding-bottom: 4rem;
}
.bob-auth-management-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--q-text);
  font-size: 14px;
}
.bob-auth-user-menu {
  width: 280px;
  background: var(--q-bg-overlay);
  border: 1px solid var(--q-border-subtle);
  border-radius: 12px;
  box-shadow: var(--q-shadow-popup);
  overflow: hidden;
  color: var(--q-text);
  margin-top: 4px;
}
.bob-auth-user-menu-header {
  padding: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--q-border-subtle);
  background: var(--q-bg-sunken);
}
.bob-auth-user-menu-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--q-primary-alpha-10);
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  overflow: hidden;
  border: 2px solid var(--q-primary-alpha-20);
}
.bob-auth-user-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bob-auth-user-menu-info {
  flex: 1;
  min-width: 0;
}
.bob-auth-user-menu-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--q-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bob-auth-user-menu-email {
  font-size: 12px;
  color: var(--q-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.bob-auth-user-menu-role {
  margin-top: 6px;
}
.bob-auth-user-menu-actions {
  padding: 8px 0;
}
.bob-auth-user-menu-item {
  width: 100%;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  color: var(--q-text);
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: all 0.2s ease;
}
.bob-auth-user-menu-item:hover {
  background: var(--q-bg-hover);
  color: var(--q-primary);
}
.bob-auth-user-menu-item i {
  width: 18px;
  text-align: center;
  color: var(--q-text-muted);
  font-size: 14px;
  transition: color 0.2s ease;
}
.bob-auth-user-menu-item:hover i {
  color: var(--q-primary);
}
.bob-auth-user-avatar-symbol {
  width: 100%;
  height: 100%;
  background: var(--q-primary);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 50%;
}
.bob-auth-modal-content {
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.bob-auth-modal-content.mode-signin {
  padding: 0;
}
.bob-auth-user-menu-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--q-border-subtle);
  background: var(--q-bg-sunken);
}
.bob-auth-dev-container {
  padding: 24px;
  width: min(92vw, 1200px);
  margin: 0 auto;
  box-sizing: border-box;
}
.bob-auth-dev-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  margin-bottom: 32px;
  padding: 8px;
  justify-items: center;
}
.bob-auth-dev-title {
  margin: 0 0 4px 0 !important;
  font-size: 20px !important;
}
.bob-auth-dev-description {
  font-size: 13px !important;
  opacity: 0.8;
  margin: 0 !important;
}
.bob-auth-dev-cards-grid::-webkit-scrollbar {
  width: 6px;
}
.bob-auth-dev-cards-grid::-webkit-scrollbar-track {
  background: transparent;
}
.bob-auth-dev-cards-grid::-webkit-scrollbar-thumb {
  background: var(--q-primary-alpha-20);
  border-radius: 10px;
}
.bob-auth-dev-cards-grid::-webkit-scrollbar-thumb:hover {
  background: var(--q-primary-alpha-40);
}
.bob-auth-dev-card {
  background: var(--q-bg-sunken);
  border: 1px solid var(--q-border-subtle);
  border-radius: 10px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
  min-width: 0;
  width: 100%;
  max-width: 130px;
  height: 100%;
}
.bob-auth-dev-card:hover {
  border-color: var(--q-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
  background: var(--q-bg-hover);
}
.bob-auth-dev-card:active {
  transform: translateY(-1px);
}
.bob-auth-dev-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--q-primary-alpha-10);
  color: var(--q-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  border: 1.5px solid var(--q-primary-alpha-20);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.bob-auth-dev-card:hover .bob-auth-dev-card-avatar {
  background: var(--q-primary);
  color: #000;
}
.bob-auth-dev-card-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  flex: 1;
}
.bob-auth-dev-card-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--q-text);
  line-height: 1.2;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bob-auth-dev-card-role {
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
  font-weight: 800;
  color: var(--q-primary);
  opacity: 0.9;
  margin-top: 4px;
}
.bob-auth-dev-card-email {
  display: block;
  font-size: 8px;
  color: var(--q-text-muted);
  opacity: 0.6;
  margin-top: 2px;
  word-break: break-all;
}
.bob-auth-dev-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--q-border-subtle);
  padding-top: 20px;
}
.bob-auth-dev-footer-text {
  font-size: 12px;
  color: var(--q-text-muted);
}
.bob-auth-side-panel {
  position: relative;
  height: 100%;
  min-height: 250px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(
      to bottom,
      #e3cd9c 0%,
      var(--q-primary, #c5a059) 40%,
      #111 100%);
  border: 1px solid var(--q-border-subtle);
}
.bob-auth-side-panel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  z-index: 1;
}
.bob-auth-side-panel-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 0%,
      transparent 100%);
}
.bob-auth-side-title {
  color: var(--q-primary, #f59e0b) !important;
  font-size: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.bob-auth-side-desc {
  color: #fff !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin: 0 !important;
}
.q-popup-layout-split .bob-auth-split-right {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bob-auth-panel-inline.q-popup-layout-split {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 750px;
}
.bob-auth-panel-inline.q-popup-layout-split .q-popup-area-middle {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2rem;
  flex: 1;
  align-items: center;
}
.bob-auth-panel-inline.hide-side-panel .bob-auth-side-panel,
.bob-auth-panel-inline.hide-side-panel .bob-auth-side-panel-content,
.bob-auth-panel-inline.hide-side-panel .bob-auth-side-panel-bg {
  display: none !important;
}
.bob-auth-panel-inline.hide-side-panel .q-popup-area-middle {
  grid-template-columns: 1fr !important;
}
@media (max-width: 767px) {
  .bob-auth-side-panel,
  .bob-auth-side-panel-bg,
  .bob-auth-side-panel-content {
    display: none !important;
  }
  .bob-auth-panel-inline.q-popup-layout-split .q-popup-area-middle {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .q-popup-layout-split .bob-auth-split-left {
    border-right: none;
    border-bottom: 1px solid var(--q-border-subtle);
    padding-right: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .q-popup-layout-split .bob-auth-split-right {
    padding-left: 0;
  }
}
.bob-auth-error-view {
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  width: 100%;
}
.bob-auth-error-view-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bob-auth-error-icon-wrapper {
  font-size: 3rem;
  color: var(--q-danger-500, #ef4444);
  margin-bottom: 1rem;
}
.bob-auth-error-title-main {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.bob-auth-error-message-box {
  background: var(--q-bg-sunken, rgba(255,255,255,0.05));
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--q-border-subtle, rgba(255,255,255,0.1));
  margin-bottom: 2rem;
  width: 100%;
}
.bob-auth-error-text-full {
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
  color: var(--bob-auth-text-primary, inherit);
  margin: 0;
}
.bob-auth-error-close-btn {
  width: 100%;
  max-width: 200px;
}
.bob-auth-dev-error-footer {
  margin-top: 8px !important;
}

/* src/bob-auth.css */
:root {
  --bob-primary: var(--bob-primary, #3b82f6);
  --bob-primary-hover: var(--bob-primary-hover, #2563eb);
  --bob-secondary: var(--bob-secondary, #64748b);
  --bob-bg-base: var(--bob-bg-base, #0f172a);
  --bob-bg-surface: var(--bob-bg-surface, #1e293b);
  --bob-text-main: var(--bob-text-main, #f8fafc);
  --bob-text-muted: var(--bob-text-muted, #94a3b8);
  --bob-text-inverse: var(--bob-text-inverse, #ffffff);
  --bob-error: var(--bob-error, #ef4444);
  --bob-success: var(--bob-success, #10b981);
  --bob-warning: var(--bob-warning, #f59e0b);
  --bob-border: var(--bob-border, #334155);
  --bob-radius: var(--bob-radius, 8px);
  --bob-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --bob-font-family: var(--bob-font-family, "Inter", -apple-system, sans-serif);
  --bob-transition: 0.2s ease-in-out;
  --bob-auth-bg-primary: var(--bob-auth-bg-primary, var(--bg-primary, #0a0a0c));
  --bob-auth-bg-secondary: var( --bob-auth-bg-secondary, var(--bg-secondary, #141416) );
  --bob-auth-accent-primary: var( --bob-auth-accent-primary, var(--accent, #bb86fc) );
  --bob-auth-accent-secondary: var( --bob-auth-accent-secondary, var(--secondary, #03dac6) );
  --bob-auth-text-primary: var( --bob-auth-text-primary, var(--text-primary, #e1e1e6) );
  --bob-auth-text-secondary: var( --bob-auth-text-secondary, var(--text-secondary, #a1a1aa) );
  --bob-auth-border: var(--bob-auth-border, var(--glass-border, #27272a));
  --bob-auth-text-on-accent: var( --bob-auth-text-on-accent, var(--text-on-accent, #ffffff) );
}
.bob-auth-panel-inline {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bob-auth-header-content {
  text-align: center;
  margin-bottom: 24px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
.bob-auth-card {
  background-color: var(--bob-auth-bg-secondary);
  border: 1px solid var(--bob-auth-border);
  border-radius: 1rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 1000px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--bob-auth-text-primary);
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  box-sizing: border-box;
  overflow: hidden;
  word-wrap: break-word;
}
@media (max-width: 480px) {
  .bob-auth-card {
    padding: 1rem;
    border-radius: 0.75rem;
  }
}
.bob-auth-card-sm {
  max-width: 500px;
}
.bob-auth-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5rem;
  background:
    linear-gradient(
      to right,
      var(--bob-auth-accent-primary),
      var(--bob-auth-accent-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bob-auth-subtitle {
  color: var(--bob-auth-text-secondary);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.bob-auth-form-group {
  margin-bottom: 0.75rem;
  text-align: left;
}
.bob-auth-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
  color: var(--bob-auth-text-secondary);
}
.bob-auth-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background-color: var(--bob-auth-bg-primary);
  border: 1px solid var(--bob-auth-border);
  border-radius: 0.5rem;
  color: var(--bob-auth-text-primary);
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.bob-auth-input:focus {
  outline: none;
  border-color: var(--bob-auth-accent-primary);
  box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.2);
}
.bob-auth-button {
  width: auto;
  padding: 0.6rem 1.2rem;
  background:
    linear-gradient(
      to right,
      var(--bob-auth-accent-primary),
      var(--bob-auth-accent-secondary));
  color: #000;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  white-space: normal;
  word-break: break-word;
}
.bob-auth-button:hover {
  opacity: 0.9;
}
.bob-auth-button:active {
  transform: scale(0.98);
}
.bob-auth-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bob-auth-link-button {
  background: none;
  border: none;
  color: var(--bob-auth-accent-primary);
  cursor: pointer;
  padding: 0;
  font-size: 0.875rem;
  text-decoration: underline;
  transition: opacity 0.2s;
}
.bob-auth-error {
  color: #f87171;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.bob-auth-success {
  color: var(--bob-auth-accent-secondary);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.bob-auth-icon-button {
  background: none;
  border: none;
  color: var(--bob-auth-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  transition: color 0.2s;
}
.bob-auth-icon-button:hover {
  color: var(--bob-auth-text-primary);
}
.bob-auth-grid {
  display: grid;
}
.bob-auth-grid > * {
  min-width: 0;
}
@media (max-width: 768px) {
  .bob-auth-grid {
    gap: 0.75rem;
  }
}
@media (max-width: 480px) {
  .bob-auth-grid {
    gap: 0.5rem;
  }
}
.bob-auth-col-1 {
  grid-column: span 1;
}
.bob-auth-col-2 {
  grid-column: span 2;
}
.bob-auth-col-3 {
  grid-column: span 3;
}
.bob-auth-col-4 {
  grid-column: span 4;
}
.bob-auth-col-5 {
  grid-column: span 5;
}
.bob-auth-col-6 {
  grid-column: span 6;
}
.bob-auth-col-7 {
  grid-column: span 7;
}
.bob-auth-col-8 {
  grid-column: span 8;
}
.bob-auth-col-9 {
  grid-column: span 9;
}
.bob-auth-col-10 {
  grid-column: span 10;
}
.bob-auth-col-11 {
  grid-column: span 11;
}
.bob-auth-col-12 {
  grid-column: span 12;
}
@media (max-width: 1024px) {
  .bob-auth-col-md-1 {
    grid-column: span 1;
  }
  .bob-auth-col-md-2 {
    grid-column: span 2;
  }
  .bob-auth-col-md-3 {
    grid-column: span 3;
  }
  .bob-auth-col-md-4 {
    grid-column: span 4;
  }
  .bob-auth-col-md-5 {
    grid-column: span 5;
  }
  .bob-auth-col-md-6 {
    grid-column: span 6;
  }
  .bob-auth-col-md-7 {
    grid-column: span 7;
  }
  .bob-auth-col-md-8 {
    grid-column: span 8;
  }
  .bob-auth-col-md-9 {
    grid-column: span 9;
  }
  .bob-auth-col-md-10 {
    grid-column: span 10;
  }
  .bob-auth-col-md-11 {
    grid-column: span 11;
  }
  .bob-auth-col-md-12 {
    grid-column: span 12;
  }
}
@media (max-width: 768px) {
  .bob-auth-col-1,
  .bob-auth-col-2,
  .bob-auth-col-3,
  .bob-auth-col-4,
  .bob-auth-col-5,
  .bob-auth-col-6,
  .bob-auth-col-7,
  .bob-auth-col-8,
  .bob-auth-col-9,
  .bob-auth-col-10,
  .bob-auth-col-11,
  .bob-auth-col-12 {
    grid-column: span 12;
  }
  .bob-auth-col-sm-1 {
    grid-column: span 1;
  }
  .bob-auth-col-sm-2 {
    grid-column: span 2;
  }
  .bob-auth-col-sm-3 {
    grid-column: span 3;
  }
  .bob-auth-col-sm-4 {
    grid-column: span 4;
  }
  .bob-auth-col-sm-5 {
    grid-column: span 5;
  }
  .bob-auth-col-sm-6 {
    grid-column: span 6;
  }
  .bob-auth-col-sm-7 {
    grid-column: span 7;
  }
  .bob-auth-col-sm-8 {
    grid-column: span 8;
  }
  .bob-auth-col-sm-9 {
    grid-column: span 9;
  }
  .bob-auth-col-sm-10 {
    grid-column: span 10;
  }
  .bob-auth-col-sm-11 {
    grid-column: span 11;
  }
  .bob-auth-col-sm-12 {
    grid-column: span 12;
  }
}
@media (max-width: 480px) {
  .bob-auth-card .bob-auth-grid {
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    display: grid;
  }
  .bob-auth-card .bob-auth-grid > * {
    width: 100%;
    max-width: 100%;
    grid-column: span 1;
  }
}
.bob-auth-row {
  display: grid;
  gap: 1.5rem;
}
.bob-auth-row-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
@media (min-width: 769px) {
  .bob-auth-row-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .bob-auth-row-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .bob-auth-row-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 768px) {
  .bob-auth-card .bob-auth-row-cols-2,
  .bob-auth-card .bob-auth-row-cols-3,
  .bob-auth-card .bob-auth-row-cols-4 {
    grid-template-columns: 1fr;
  }
}
.bob-auth-stack-mobile {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .bob-auth-card .bob-auth-stack-mobile {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .bob-auth-card .bob-auth-stack-mobile > div {
    flex: 1 1 auto;
    width: 100%;
  }
  .bob-auth-card .bob-auth-stack-mobile button {
    width: 100%;
  }
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
.bob-auth-form-content .q-input-wrapper,
.bob-auth-form-content .q-box-wrapper,
.bob-auth-form-content .q-input {
  width: 100%;
}
/* src/bob-box.css */
.q-check-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  gap: var(--q-control-gap);
  padding: 2px 0;
}
.q-check-wrapper.q-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.q-check-wrapper.q-readonly {
  cursor: default;
}
.q-check-label {
  font-family: inherit;
  font-size: var(--q-font-size-base);
}
button.btn {
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}
button.btn:hover:not(:disabled) {
  border-color: var(--q-border-base);
}
button.btn.btn-is-primary {
  background: var(--q-primary);
  color: var(--q-primary-text);
  border-color: var(--q-primary);
}
button.btn.btn-is-primary:hover:not(:disabled) {
  opacity: 0.9;
  border-color: var(--q-primary);
}
.q-choice-icons-wrapper {
  display: flex;
  align-items: stretch;
  gap: var(--q-control-gap);
}
.q-choice-icons-wrapper button.btn:not(.btn-success):not(.btn-danger) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.q-choice-icons-wrapper button.btn:hover:not(:disabled) {
  background-color: var(--q-bg-hover);
  border-color: var(--q-border-color);
}
.q-choice-icons-wrapper button.btn i,
.q-choice-icons-wrapper button.btn.btn-secondary i {
  color: var(--q-icon-color, var(--q-text-muted)) !important;
}
.q-choice-icons-wrapper .btn span {
  color: var(--q-text-base);
}
.q-choice-icons-wrapper button.btn.q-selected i,
.q-choice-icons-wrapper button.btn.btn-primary i,
.q-choice-icons-wrapper button.btn.btn-is-primary i {
  color: var(--q-primary) !important;
}
.q-choice-icons-wrapper button.btn.btn-primary span,
.q-choice-icons-wrapper button.btn.btn-is-primary span,
.q-choice-icons-wrapper button.btn.q-selected span {
  color: var(--q-primary);
}
.q-choice-icons-wrapper .btn.btn-primary,
.q-choice-icons-wrapper .btn.btn-is-primary,
.q-choice-icons-wrapper .btn.q-selected {
  position: relative;
  border-bottom: 2px solid var(--q-primary) !important;
  border-radius: 0;
}
.theme-light .q-choice-icons-wrapper button.btn i,
.theme-light .q-choice-icons-wrapper button.btn.btn-primary i,
.theme-light .q-choice-icons-wrapper button.btn.btn-is-primary i,
.theme-light .q-choice-icons-wrapper button.btn.q-selected i {
  color: var(--q-secondary);
}
.q-choice-icons-wrapper.q-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.q-memo-popup {
  background: var(--q-bg-base);
  padding: 8px;
  box-sizing: border-box;
}
.q-memo-popup div.q-input-wrapper.multiline {
  border: none;
  padding: 0;
  height: 100%;
}
.q-memo-popup .q-input {
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  width: 100%;
  min-height: 150px;
  resize: vertical;
  background: var(--q-bg-base);
}
.q-address-popup {
  padding: 12px;
  box-sizing: border-box;
  min-width: 320px;
  max-width: 480px;
}
.q-form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.q-form-field-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.q-form-field-row .q-form-field {
  flex: 1;
  margin-bottom: 0;
}
.q-form-label {
  font-size: 0.75rem;
  color: var(--q-text-muted);
  font-weight: 500;
}
.q-address-popup-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--q-border-color);
}
.q-input-wrapper.q-readonly,
.q-box-wrapper.q-readonly,
.q-readonly.q-input,
.q-readonly.q-box-wrapper-inner {
  border-color: transparent !important;
  background-color: transparent !important;
}
.q-text-upload-container .q-input-wrapper.q-upload-input-field:not(.q-upload-readonly-mode) {
  border-color: var(--q-border-color) !important;
  background-color: var(--q-bg-base) !important;
}
.q-popup-portal-content {
  background: var(--q-bg-base);
  border: 1px solid var(--q-primary);
  border-radius: var(--q-border-radius);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
.q-popup-portal-content .q-calendar,
.q-popup-portal-content .q-choice-popup-list,
.q-popup-portal-content .q-autocomplete-popup,
.q-popup-portal-content .q-lookup-popup {
  border: none;
  box-shadow: none;
}
.q-date-popup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: var(--q-gap-base);
  box-sizing: border-box;
}
.q-date-popup .q-popup-apply-footer {
  align-self: stretch;
  padding-inline: var(--q-gap-base);
}
.q-popup-apply-footer {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--q-border-color);
}
button.q-popup-apply-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--q-border-radius);
  color: var(--q-text-base);
  cursor: pointer;
  font-size: var(--q-font-size-base);
  line-height: 1;
  margin-left: auto;
  padding: 3px 10px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-popup-apply-btn--left {
  margin-right: auto;
}
.q-popup-apply-btn i {
  color: inherit;
  font-size: 14px;
}
button.q-popup-apply-btn:hover:not(:disabled) {
  background-color: var(--q-bg-hover);
  border-color: var(--q-border-color);
}
.q-popup-apply-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.q-time-popup {
  min-width: max-content;
  padding: 8px;
  box-sizing: border-box;
  user-select: none;
}
.q-time-body {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.q-time-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.q-time-col-header {
  color: var(--q-text-muted);
  font-size: var(--q-font-size-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding-bottom: 3px;
  text-align: center;
  text-transform: uppercase;
}
.q-time-hours-grid {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 2px;
}
.q-time-minutes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.q-time-cell {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--q-border-radius);
  color: var(--q-text-base);
  cursor: pointer;
  font-family: var(--q-font-family, inherit);
  font-size: var(--q-font-size-base);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 3px 5px;
  text-align: center;
  transition: background 0.1s, border-color 0.1s;
}
.q-time-cell:hover:not(:disabled) {
  background: var(--q-bg-hover);
  border-color: var(--q-border-color);
}
.q-time-cell--selected {
  background: var(--q-primary);
  border-color: var(--q-primary);
  color: var(--q-bg-base);
  font-weight: 700;
}
.q-time-cell--minute {
  padding: 6px 10px;
}
.q-box-popup-container {
  position: relative;
  width: 100%;
  display: block;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.q-autocomplete-popup,
.q-lookup-popup {
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 280px;
}
.q-autocomplete-popup {
  padding: 4px;
  max-height: 250px;
}
.q-lookup-popup {
  padding: 8px;
  gap: 6px;
  max-height: 320px;
}
.q-autocomplete-results-list,
.q-lookup-results-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.q-lookup-results-list {
  max-height: 220px;
}
.q-autocomplete-item,
.q-lookup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  color: var(--q-text-base);
}
.q-autocomplete-item {
  padding: 6px 8px;
}
.q-lookup-item {
  padding: 4px 8px;
}
.q-autocomplete-item.active,
.q-lookup-item.active {
  background: var(--q-primary);
  color: var(--q-primary-text);
}
.q-autocomplete-label,
.q-lookup-label {
  color: inherit;
  font-size: 0.85rem;
}
.q-lookup-id {
  color: var(--q-text-muted, #777);
  font-size: 0.75rem;
}
.q-autocomplete-no-results,
.q-lookup-no-results {
  color: var(--q-text-muted);
  font-size: 0.8rem;
  padding: 8px;
  text-align: center;
}
.q-autocomplete-loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.q-autocomplete-spinner {
  animation: spin 1s linear infinite;
  color: var(--q-primary);
}
.q-lookup-spinner {
  animation: spin 1s linear infinite;
  color: var(--q-primary);
  font-size: 1rem;
}
.q-autocomplete-has-more {
  color: var(--q-text-muted);
  font-size: 0.75rem;
  padding: 6px 8px;
  text-align: center;
  border-top: 1px solid var(--q-border-color);
  font-style: italic;
}
.q-lookup-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.q-lookup-search-input {
  flex: 1;
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: 4px;
  color: var(--q-text-base);
  font-size: 0.85rem;
  padding: 4px 8px;
}
.q-lookup-footer {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.q-input-wrapper.q-input-wrapper--inline {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: var(--q-input-height);
  padding: 0 var(--q-padding-base);
  align-items: center;
  flex-wrap: wrap;
  gap: var(--q-control-gap);
}
.q-box-wrapper-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--q-control-gap, 8px);
  min-height: 100%;
  width: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.q-choice-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-height: var(--q-input-height);
}
.q-choice-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: var(--q-font-size-base);
  color: var(--q-text-base);
}
.q-choice-input {
  cursor: pointer;
  width: 16px;
  height: 16px;
  margin: 0;
}
.q-choice-wrapper.q-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.q-choice-wrapper.q-readonly {
  cursor: default;
}
.q-box-grid-container {
  width: 100%;
}
.q-box-grid {
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
}
.q-box-grid th,
.q-box-grid td {
  padding: var(--q-gap-base, 6px);
  border: 1px solid var(--q-border-color, #e2e8f0);
}
.q-box-grid-header {
  background: transparent;
  color: var(--q-text-muted, #64748b);
  font-size: var(--q-font-size-sm, 0.8125rem);
  font-weight: 600;
  text-align: left;
}
.q-box-grid-caption {
  font-weight: 500;
  color: var(--q-text-base, #1e293b);
  background: transparent;
  vertical-align: middle;
}
.q-box-grid-cell {
  background: transparent;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-box-grid-cell-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--q-input-height, 27px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-box-grid-cell > * {
  margin-bottom: 4px;
}
.q-box-grid-cell > *:last-child {
  margin-bottom: 0;
}
.q-grid-popup {
  padding: 8px;
  min-width: max-content;
}
.q-upload-popup {
  padding: 8px;
  min-width: 300px;
  max-width: 450px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}
.q-upload-header {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--q-border-color);
}
.q-upload-title {
  font-weight: 600;
  font-size: var(--q-font-size-sm);
  color: var(--q-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.q-upload-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}
.q-upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  background: var(--q-bg-subtle);
  border-radius: var(--q-border-radius);
  transition: background 0.1s;
}
.q-upload-item:hover {
  background: var(--q-bg-hover);
}
.q-upload-filename {
  flex: 1;
  font-size: var(--q-font-size-base);
  color: var(--q-text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-upload-empty {
  padding: 12px;
  text-align: center;
  color: var(--q-text-muted);
  font-style: italic;
  font-size: var(--q-font-size-sm);
}
.q-upload-popup-portal {
  min-width: 320px;
}
.q-upload-clear-btn {
  margin-right: 8px;
}
.q-upload-add-btn {
  margin-right: auto;
}
.q-upload-input-hidden {
  display: none;
}
.q-text-upload-container {
  position: relative;
  width: 100%;
  border-radius: inherit;
}
.q-text-upload-container.q-picture-dragover .q-input-wrapper {
  border-color: var(--q-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--q-primary-rgb, 37, 99, 235), 0.2);
}
.q-upload-input-field .q-input-icon {
  position: relative;
  z-index: 10;
}
.q-pointer-events-none {
  pointer-events: none !important;
}
.q-pointer-events-auto {
  pointer-events: auto !important;
}
.q-cursor-pointer {
  cursor: pointer;
}
.q-cursor-default {
  cursor: default;
}
.q-upload-input-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.q-text-upload-container {
  position: relative;
  width: 100%;
}
.q-picture-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.q-picture-box.q-picture-dragover .q-picture-container {
  border-color: var(--q-primary) !important;
  box-shadow: 0 0 0 2px rgba(var(--q-primary-rgb, 37, 99, 235), 0.2);
}
.q-picture-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 400px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.q-picture-container {
  position: relative;
  width: 100%;
  min-height: 140px;
  height: 100%;
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}
.q-picture-inner-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.q-picture-preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100% - 50px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.q-picture-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.q-picture-file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.q-picture-pdf-icon {
  font-size: 3rem;
  opacity: 0.5;
  color: var(--q-danger);
}
.q-picture-pdf-label {
  font-size: 11px;
  margin-top: 8px;
  color: var(--q-text-muted);
}
.q-picture-carousel-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}
.q-picture-carousel-btn {
  pointer-events: auto;
  margin: 4px;
  background: rgba(var(--q-bg-base-rgb, 255, 255, 255), 0.7);
  border-radius: 50%;
  color: var(--q-carousel-default-color, #b4c1ca) !important;
}
.q-picture-carousel-dots {
  text-align: center;
  z-index: 10;
  margin-bottom: 10px;
}
.q-picture-carousel-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 4px;
}
.q-picture-carousel-dot.active {
  background: var(--q-primary);
}
.q-picture-carousel-dot.inactive {
  background: var(--q-border-color);
}
.q-picture-placeholder {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  box-sizing: border-box;
  color: var(--q-text-muted);
  gap: 8px;
  min-width: 80px;
  overflow: hidden;
}
.q-picture-placeholder-icon {
  height: auto;
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: 0.3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-picture-placeholder-text {
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
  margin-top: 1vh;
}
.q-picture-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}
.q-picture-remove-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-picture-controls button.btn:not(.btn-danger):not(.btn-success),
.q-upload-popup button.btn:not(.btn-danger):not(.btn-success),
.q-upload-list button.btn:not(.btn-danger):not(.btn-success),
.q-popup-apply-footer button.btn:not(.btn-danger):not(.btn-success),
.q-lookup-footer button.btn:not(.btn-danger):not(.btn-success),
.q-address-popup-footer button.btn:not(.btn-danger):not(.btn-success) {
  background: transparent;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--q-text-base);
}
.q-picture-controls button.btn.btn-danger,
.q-upload-popup button.btn.btn-danger,
.q-upload-list button.btn.btn-danger,
.q-popup-apply-footer button.btn.btn-danger,
.q-lookup-footer button.btn.btn-danger,
.q-address-popup-footer button.btn.btn-danger {
  background-color: var(--q-danger);
  color: var(--q-danger-text, #ffffff);
  border-color: var(--q-danger);
}
.q-picture-controls button.btn.btn-success,
.q-upload-popup button.btn.btn-success,
.q-upload-list button.btn.btn-success,
.q-popup-apply-footer button.btn.btn-success,
.q-lookup-footer button.btn.btn-success,
.q-address-popup-footer button.btn.btn-success {
  background-color: var(--q-success);
  color: var(--q-success-text, #ffffff);
  border-color: var(--q-success);
}
.q-picture-controls button.btn i,
.q-upload-popup button.btn i,
.q-upload-list button.btn i,
.q-popup-apply-footer button.btn i,
.q-lookup-footer button.btn i,
.q-address-popup-footer button.btn i {
  color: inherit;
}
.q-picture-controls button.btn.btn-primary,
.q-upload-popup button.btn.btn-primary,
.q-upload-add-btn {
  color: var(--q-text-base);
}
.q-picture-controls button.btn.btn-danger,
.q-upload-popup button.btn.btn-danger,
.q-upload-list button.btn.btn-danger,
.q-popup-apply-footer button.btn.btn-danger,
.q-lookup-footer button.btn.btn-danger,
.q-address-popup-footer button.btn.btn-danger {
  color: var(--q-danger-text, #ffffff);
}
.q-picture-controls button.btn.btn-danger i,
.q-upload-popup button.btn.btn-danger i,
.q-upload-list button.btn.btn-danger i,
.q-popup-apply-footer button.btn.btn-danger i,
.q-lookup-footer button.btn.btn-danger i,
.q-address-popup-footer button.btn.btn-danger i {
  color: var(--q-danger-text, #ffffff);
}
button.btn.btn-success.q-upload-add-btn span {
  color: var(--q-success-text, #ffffff);
}
.q-picture-controls button.btn:hover:not(:disabled),
.q-upload-popup button.btn:hover:not(:disabled),
.q-upload-list button.btn:hover:not(:disabled),
.q-popup-apply-footer button.btn:hover:not(:disabled),
.q-lookup-footer button.btn:hover:not(:disabled),
.q-address-popup-footer button.btn:hover:not(:disabled) {
  background-color: var(--q-bg-hover);
  border-color: var(--q-border-color);
}
.q-picture-controls button.btn:not(.btn-danger):not(.btn-success):hover:not(:disabled) i,
.q-upload-popup button.btn:not(.btn-danger):not(.btn-success):hover:not(:disabled) i,
.q-popup-apply-footer button.btn:not(.btn-danger):not(.btn-success):hover:not(:disabled) i,
.q-lookup-footer button.btn:not(.btn-danger):not(.btn-success):hover:not(:disabled) i {
  color: var(--q-primary);
}
.q-error .q-picture-container {
  border-color: var(--q-error-border, #fecaca);
}
.q-disabled .q-picture-container {
  opacity: 0.6;
  background: var(--q-bg-subtle);
}
.bob-heading {
  margin: 0;
  font-weight: 700;
  color: var(--q-color-heading, var(--q-text-base));
}
.bob-heading-1 {
  font-size: var(--q-font-size-heading, 2.2rem);
  margin-bottom: 1.5rem;
}
.bob-heading-2 {
  font-size: calc(var(--q-font-size-heading, 2.2rem) * 0.85);
  margin-bottom: 1.2rem;
}
.bob-heading-3 {
  font-size: calc(var(--q-font-size-heading, 2.2rem) * 0.7);
  margin-bottom: 1rem;
}
.bob-heading-4 {
  font-size: calc(var(--q-font-size-heading, 2.2rem) * 0.6);
  margin-bottom: 0.8rem;
}
.bob-heading-5 {
  font-size: calc(var(--q-font-size-heading, 2.2rem) * 0.5);
  margin-bottom: 0.6rem;
}
.bob-heading-6 {
  font-size: calc(var(--q-font-size-heading, 2.2rem) * 0.45);
  margin-bottom: 0.5rem;
}
.bob-label {
  display: block;
  font-weight: 600;
  font-size: var(--q-font-size-label, 0.85rem);
  color: var(--q-color-label, var(--q-primary));
  margin-bottom: 0.25rem;
}
.bob-description {
  display: block;
  font-size: var(--q-font-size-text, 0.95rem);
  color: var(--q-color-text, var(--q-text-base));
  opacity: 0.8;
  line-height: 1.5;
}
.bob-validation {
  display: block;
  font-size: 0.75rem;
  color: var(--q-danger);
  min-height: 1rem;
  margin-top: 0.25rem;
}
.q-choice-popup-list {
  display: flex;
  flex-direction: column;
  padding: 4px;
  max-height: 250px;
  overflow-y: auto;
  gap: 2px;
}
.q-choice-popup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.1s;
  color: var(--q-text-base);
}
.q-choice-popup-item:hover {
  background: var(--q-bg-hover);
}
.q-choice-popup-item.q-selected,
.q-choice-popup-item.q-active {
  background: var(--q-primary);
  color: var(--q-primary-text);
}
.q-choice-popup-label {
  font-size: 0.85rem;
  user-select: none;
}
.q-choice-popup-check {
  font-size: 0.8rem;
  opacity: 0.9;
}
.q-choice-text-input .q-input {
  caret-color: transparent;
  cursor: pointer;
}
.q-box-tags-popup {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  background: var(--q-color-surface, var(--q-bg-base));
  border: 1px solid var(--q-color-border, var(--q-border-color));
  border-radius: var(--q-radius-md, 6px);
  box-shadow: var(--q-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
  min-width: 200px;
}
.q-box-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.q-tag {
  display: flex;
  align-items: center;
  background: var(--q-color-primary-10, rgba(37, 99, 235, 0.1));
  color: var(--q-color-primary-60, var(--q-primary));
  padding: 2px 8px;
  border-radius: var(--q-radius-sm, 4px);
  font-size: 0.875rem;
}
.q-tag-remove-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: 4px;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
}
.q-tag-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--q-color-border, var(--q-border-color));
  border-radius: var(--q-radius-sm, 4px);
  background: var(--q-color-background, var(--q-bg-base));
  color: var(--q-color-text, var(--q-text-base));
}
.q-choice-color-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.q-choice-color-btn {
  border-radius: 50%;
  box-shadow: var(--q-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.1));
  transition: all 0.2s;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-choice-color-btn-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: var(--q-error, red);
  cursor: pointer;
  z-index: 5;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.q-choice-color-palette-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--q-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.q-choice-color-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--q-text-base);
  font-size: 14px;
  padding: 4px;
}
.q-choice-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: center;
}
.q-choice-color-more-btn {
  border-radius: 50%;
  background-color: var(--q-bg-subtle, #f1f5f9);
  border: 1px solid var(--q-border-color, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--q-text-base);
  font-size: 12px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  padding-bottom: 6px;
}
.q-reset-anchors {
  color: inherit;
  text-decoration: none;
}
.q-reset-buttons {
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  padding: 0;
}
.q-scroll-hor {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
}
.q-scroll-hor::-webkit-scrollbar {
  display: none;
}
.q-choice-popup-container {
  max-width: 100%;
  min-width: 0;
}
.q-choice-popup-container.w-full {
  width: 100% !important;
  display: flex !important;
}
.q-choice-popup-trigger {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.q-choice-popup-trigger span {
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* src/app-shell.css */
.bob-main-panels {
  display: flex;
  flex: 1;
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
  padding-right: 10px;
}
.bob-main-panels-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100vw;
  overflow: visible;
}
.bob-panel {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  background-color: var(--q-bg-base);
  margin-left: 10px;
}
.bob-panel-left,
.bob-panel-right {
  display: none;
  width: 0;
}
.bob-panel-left.show,
.bob-panel-right.show {
  display: flex;
  width: var(--bob-panel-width, 300px);
}
.bob-panel-left {
  border-right: 1px solid var(--q-border-color);
}
.bob-panel-right {
  border-left: 1px solid var(--q-border-color);
}
.bob-panel-middle {
  flex: 1;
  min-width: 0;
}
.bob-panel-content {
  flex: 1;
  overflow-y: visible;
}
.bob-panel-resizer {
  width: 4px;
  height: 100%;
  cursor: col-resize;
  position: absolute;
  top: 0;
  z-index: 10;
  background-color: transparent;
  transition: background-color 0.2s;
}
.bob-panel-resizer:hover,
.bob-panel-resizer.resizing {
  background-color: var(--q-primary);
}
.bob-panel-resizer-left {
  right: -2px;
}
.bob-panel-resizer-right {
  left: -2px;
}
.bob-split-hoz {
  width: 6px;
  cursor: col-resize;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  z-index: 10;
  background-color: transparent;
  transition: all 0.2s;
  position: relative;
}
.bob-split-hoz-line {
  width: 2px;
  height: 100%;
  background-color: var(--q-border-color, #ccc);
  margin: 0 2px;
  transition: background-color 0.2s;
  border-radius: 1px;
}
.bob-split-hoz.resizing .bob-split-hoz-line {
  background-color: var(--q-primary);
}
@media (max-width: 768px) {
  .bob-split-hoz {
    display: none !important;
  }
}
.bob-panel-toggle-button {
  position: fixed;
  bottom: 20px;
  z-index: 2000;
  background-color: var(--q-bg-sunken);
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s, background-color 0.2s;
}
.bob-panel-toggle-button:hover {
  background-color: var(--q-bg-subtle);
  transform: scale(1.1);
}
.bob-panel-toggle-left {
  left: 10px;
}
.bob-panel-toggle-right {
  right: 10px;
}
@media (max-width: 768px) {
  .bob-panel-left,
  .bob-panel-right {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1500;
    width: 85% !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out;
  }
  .bob-panel-left {
    left: 0;
    transform: translateX(-100%);
  }
  .bob-panel-left.show {
    transform: translateX(0);
  }
  .bob-panel-right {
    right: 0;
    transform: translateX(100%);
  }
  .bob-panel-right.show {
    transform: translateX(0);
  }
  .bob-panel-resizer {
    display: none;
  }
}

/* src/components/BobTable.css */
.q-table-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.q-table-scroll-container {
  flex: 1;
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
}
.q-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  background-color: transparent;
  table-layout: auto;
}
@media (max-width: 768px) {
  .q-table th,
  .q-table td {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
}
.q-table th,
.q-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--q-border-color);
  white-space: normal;
  word-break: break-all;
  min-width: 5rem;
  max-width: 12rem;
  vertical-align: middle;
}
.q-table th {
  font-weight: 600;
  color: var(--q-text-edit, var(--q-text-base));
  font-size: 0.83rem;
  background-color: var(--q-bg-sunken);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  min-width: 6.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.q-table th.q-table-tools-col {
  min-width: unset;
  width: 1%;
  white-space: nowrap;
}
.q-table th:hover {
  background-color: var(--q-bg-hover);
}
.q-table td {
  font-size: 0.9rem;
  color: var(--q-text-base);
}
.q-table tr:hover {
  background-color: var(--q-bg-subtle, rgba(0, 0, 0, 0.02));
  cursor: pointer;
}
.q-table tr.q-table-row-active td {
  background-color: var(--q-bg-active, rgba(120, 120, 120, 0.15));
}
.q-table tr.q-table-row-active:hover td {
  background-color: var(--q-bg-active, rgba(120, 120, 120, 0.25));
}
.q-table-tools-col {
  width: 1%;
  white-space: nowrap;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.q-table-tools-row-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.q-table-tools-row-container .row-icons {
  margin-top: 0 !important;
}
.q-table-check-icon {
  cursor: pointer;
  font-size: 1rem;
  color: var(--q-text-muted);
  display: flex;
  align-items: center;
}
.q-table-header-selection-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.q-table-selection-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--q-primary);
  background-color: var(--q-bg-sunken);
  padding: 0.1rem 0.35rem;
  border-radius: 0.5rem;
  border: 1px solid var(--q-primary-muted, var(--q-primary));
  line-height: 1.2;
}
.q-table-check-icon.selected {
  color: var(--q-primary);
}
.q-table-header-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: 0;
}
.q-table-empty-message {
  padding: 2rem;
  text-align: center;
  color: var(--q-text-muted);
  font-style: italic;
}

/* src/components/BobDebugBlock.css */
.bob-debug-block {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
  padding: 6px;
  box-sizing: border-box;
}
.bob-debug-title {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--q-border-color, #ccc);
  font-size: 1.1rem;
  font-weight: 600;
}
.bob-debug-textarea {
  flex: 1;
  margin-top: 16px;
  font-family: monospace;
  resize: none;
  padding: 8px;
  border: 1px solid var(--q-border-color, #ccc);
  border-radius: 4px;
  background-color: var(--q-bg-sunken, #fff);
  color: var(--q-text-base, #333);
  font-size: 0.85rem;
}
.bob-debug-error {
  color: var(--q-error-color, red);
  font-size: 12px;
}
.bob-debug-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* src/components/BobBoxPINSelfie.css */
.bob-pin-selfie-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.bob-pin-selfie-input {
  width: 176px;
  background-color: var(--brand-card, #1c1a16);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 12px;
  padding: 12px 0;
  font-size: 1.125rem;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.25em;
  color: var(--brand-gold, #c5a059);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bob-pin-selfie-input:focus {
  outline: none;
  border-color: var(--brand-gold, #c5a059);
  box-shadow: 0 0 10px rgba(197, 160, 89, 0.2);
}
.bob-pin-selfie-row-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.bob-pin-selfie-side-container {
  position: relative;
  width: 36px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bob-pin-selfie-preview-side {
  width: 36px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--brand-gold, #c5a059);
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.2);
  background-color: #000;
}
.bob-pin-selfie-thumbnail-side {
  position: relative;
  width: 36px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--brand-gold, #c5a059);
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.2);
}
.bob-pin-selfie-placeholder-side {
  width: 36px;
  height: 48px;
  border-radius: 8px;
  border: 1px dashed rgba(197, 160, 89, 0.15);
  background-color: rgba(197, 160, 89, 0.02);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background-color 0.2s;
}
.bob-pin-selfie-badge-side {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background-color: #22c55e;
  color: #fff;
  border-radius: 50%;
  padding: 1.5px;
  border: 1px solid var(--brand-card, #1c1a16);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.bob-pin-selfie-badge-icon {
  width: 7px;
  height: 7px;
  fill: currentColor;
}
.bob-pin-boxes-container {
  display: flex;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  position: relative;
}
.bob-pin-box {
  width: 36px;
  height: 48px;
  background-color: var(--brand-card, #1c1a16);
  border: 1px solid rgba(197, 160, 89, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--brand-gold, #c5a059);
  position: relative;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
.bob-pin-box.entered {
  border-color: rgba(197, 160, 89, 0.3);
  background-color: rgba(197, 160, 89, 0.05);
}
.bob-pin-box.active {
  border-color: var(--brand-gold, #c5a059);
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.3);
  background-color: rgba(197, 160, 89, 0.02);
}
.bob-pin-box-cursor {
  width: 2px;
  height: 20px;
  background-color: var(--brand-gold, #c5a059);
  animation: bob-pin-cursor-blink 1s step-end infinite;
}
@keyframes bob-pin-cursor-blink {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: var(--brand-gold, #c5a059);
  }
}
.bob-pin-confidential-pulse {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--q-text-base, #fff);
  transition: transform 0.2s;
  animation: bob-pin-text-glow 2s ease-in-out infinite alternate;
}
@media (min-width: 768px) {
  .bob-pin-confidential-pulse {
    font-size: 1.15rem;
  }
}
@keyframes bob-pin-text-glow {
  from {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.15), 0 0 16px rgba(255, 255, 255, 0.05);
    opacity: 0.85;
  }
  to {
    text-shadow: 0 0 16px rgba(197, 160, 89, 0.4), 0 0 24px rgba(197, 160, 89, 0.2);
    opacity: 1;
  }
}
html.theme-light .bob-pin-confidential-pulse {
  color: var(--q-text-base, #1a1a1a) !important;
  animation: bob-pin-text-glow-light 2s ease-in-out infinite alternate;
}
@keyframes bob-pin-text-glow-light {
  from {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.05), 0 0 16px rgba(0, 0, 0, 0.02);
    opacity: 0.85;
  }
  to {
    text-shadow: 0 0 16px rgba(197, 160, 89, 0.2), 0 0 24px rgba(197, 160, 89, 0.1);
    opacity: 1;
  }
}
html.theme-light .bob-pin-box {
  background-color: #e5e7eb !important;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
html.theme-light .bob-pin-box.entered {
  background-color: #d1d5db !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
}
html.theme-light .bob-pin-box.active {
  background-color: #f3f4f6 !important;
  border-color: #000000 !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) !important;
}
html.theme-light .bob-pin-box-cursor {
  background-color: #000000 !important;
  animation: bob-pin-cursor-blink-light 1s step-end infinite !important;
}
@keyframes bob-pin-cursor-blink-light {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: #000000;
  }
}
.bob-pin-selfie-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 12px;
  background-color: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  width: 100%;
  max-width: 320px;
  text-align: center;
}
.bob-pin-selfie-error-icon {
  width: 24px;
  height: 24px;
  color: #ef4444;
}
.bob-pin-selfie-error-message {
  font-size: 0.75rem;
  font-weight: 600;
  color: #f87171;
  line-height: 1.4;
}

/* src/components/BobPopupMenu.css */
.bob-popup-menu {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0;
  min-width: 12.5rem;
  width: var(--bob-menu-width, auto);
  background: transparent;
}
.bob-popup-menu-divider {
  height: 1px;
  background-color: var(--q-border-color, #303040);
  margin: 0.25rem 0;
  width: 100%;
  border: none;
}
.bob-popup-menu-header {
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.85em;
  color: var(--q-text-muted);
  display: flex;
  align-items: center;
  background: transparent;
}
.bob-popup-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  color: var(--q-text-edit);
  text-align: left;
  font-size: var(--q-font-size-sm, 0.8125rem);
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
  width: 100%;
  font-family: inherit;
}
.bob-popup-menu-item:hover:not(:disabled) {
  background-color: var(--q-primary);
  color: var(--q-primary-text, #fff);
}
.bob-popup-menu-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bob-popup-menu-item.danger {
  color: var(--q-danger, #e74c3c);
}
.bob-popup-menu-item.danger:hover:not(:disabled) {
  background-color: var(--q-danger, #e74c3c);
  color: var(--q-danger-text, #fff);
}
.bob-popup-menu-item-content {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}
.bob-popup-menu-icon {
  width: 1rem;
  margin-right: 0.75rem;
  text-align: center;
  font-size: 0.875rem;
  opacity: 0.8;
  color: var(--bob-menu-icon-color, inherit);
}
.bob-popup-menu-caption {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bob-popup-menu-chevron {
  font-size: 0.6875rem;
  opacity: 0.6;
  margin-left: 0.75rem;
  transition: transform 0.2s ease;
}
.bob-popup-menu-subitems {
  background-color: var(--q-bg-surface-subtle, rgba(0, 0, 0, 0.1));
}
.bob-popup-menu--nested {
  min-width: unset;
  width: 100%;
  padding: 0;
}
.bob-popup-menu--nested .bob-popup-menu-item {
  padding-left: 2rem;
}

/* src/components/BobIconMenu.css */
.bob-icon-menu {
  display: inline-flex;
  position: relative;
}
.bob-icon-menu-btn {
  background: none;
  border: none;
  color: var(--q-text-muted, #9090a0);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  transition: color 0.2s;
  border-radius: var(--q-border-radius, 4px);
}
.bob-icon-menu-btn:hover:not(:disabled) {
  color: var(--q-text-base, #e0e0e0);
  background-color: var(--q-bg-hover, #36364a);
}
.bob-icon-menu-dropdown {
  background-color: var(--q-bg-surface-elevated, #2a2a3e);
  border: 1px solid var(--q-border-color, #303040);
  border-radius: var(--q-border-radius, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 160px;
  display: flex;
  flex-direction: column;
  padding: 0;
  max-height: 50vh;
  overflow-y: auto;
}

/* src/components/BobTooltip.css */
.bob-tooltip-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.bob-tooltip-bubble {
  position: fixed;
  z-index: 2147483647;
  background-color: var(--q-bg-surface, #ffffff);
  color: var(--q-secondary, var(--q-text-main, #333333));
  border: 1px solid var(--q-border-dim, #e2e8f0);
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  font-size: 0.875rem;
  white-space: normal;
  word-wrap: break-word;
  max-width: 600px;
  width: max-content;
  pointer-events: none;
  line-height: 1.4;
  transition: opacity 0.3s ease-in-out;
}
.bob-tooltip-bubble::after,
.bob-tooltip-bubble::before {
  content: "";
  position: absolute;
  border-style: solid;
}
.bob-tooltip-pos-bottom {
  transform: translate(calc(-50% + var(--shift-x, 0px)), var(--shift-y, 0px));
}
.bob-tooltip-pos-bottom::after {
  bottom: 100%;
  left: calc(50% - var(--shift-x, 0px));
  transform: translateX(-50%);
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent var(--q-bg-surface, #ffffff) transparent;
}
.bob-tooltip-pos-bottom::before {
  bottom: 100%;
  left: calc(50% - var(--shift-x, 0px));
  transform: translateX(-50%);
  border-width: 0 7px 7px 7px;
  border-color: transparent transparent var(--q-border-dim, #e2e8f0) transparent;
  margin-bottom: 1px;
}
.bob-tooltip-pos-top {
  transform: translate(calc(-50% + var(--shift-x, 0px)), var(--shift-y, 0px));
}
.bob-tooltip-pos-top::after {
  top: 100%;
  left: calc(50% - var(--shift-x, 0px));
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: var(--q-bg-surface, #ffffff) transparent transparent transparent;
}
.bob-tooltip-pos-top::before {
  top: 100%;
  left: calc(50% - var(--shift-x, 0px));
  transform: translateX(-50%);
  border-width: 7px 7px 0 7px;
  border-color: var(--q-border-dim, #e2e8f0) transparent transparent transparent;
  margin-top: 1px;
}
.bob-tooltip-pos-right {
  transform: translate(var(--shift-x, 0px), calc(-50% + var(--shift-y, 0px)));
}
.bob-tooltip-pos-right::after {
  right: 100%;
  top: calc(50% - var(--shift-y, 0px));
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent var(--q-bg-surface, #ffffff) transparent transparent;
}
.bob-tooltip-pos-right::before {
  right: 100%;
  top: calc(50% - var(--shift-y, 0px));
  transform: translateY(-50%);
  border-width: 7px 7px 7px 0;
  border-color: transparent var(--q-border-dim, #e2e8f0) transparent transparent;
  margin-right: 1px;
}
.bob-tooltip-pos-left {
  transform: translate(var(--shift-x, 0px), calc(-50% + var(--shift-y, 0px)));
}
.bob-tooltip-pos-left::after {
  left: 100%;
  top: calc(50% - var(--shift-y, 0px));
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent var(--q-bg-surface, #ffffff);
}
.bob-tooltip-pos-left::before {
  left: 100%;
  top: calc(50% - var(--shift-y, 0px));
  transform: translateY(-50%);
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent var(--q-border-dim, #e2e8f0);
  margin-left: 1px;
}

/* src/components/BobPopupPanel.css */
.bob-popup-panel-container {
  display: inline-flex;
}
.bob-popup-panel-container:not(.q-disabled) {
  cursor: pointer;
}
.bob-popup-panel-container.q-disabled {
  cursor: default;
}

/* src/components/BobBar.css */
.bob-bar-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}
.bob-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0 0.25rem;
  box-sizing: border-box;
  gap: 0.25rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.bob-bar i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.bob-bar.overflow-strip {
  background-color: var(--q-bg-sunken, #f7f7f7);
  border-top: 1px solid var(--q-border-color, #e0e0e0);
  position: relative;
  z-index: 100;
}
.bob-bar-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  overflow: visible;
  gap: 0.25rem;
  min-width: 0;
  flex-shrink: 0;
  height: 100%;
}
.bob-bar-section.expanded {
  flex: 1 0 auto;
}
.bob-bar-left {
  display: flex;
  justify-content: flex-start;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin: 0;
}
.bob-bar-far-left {
  display: flex;
  justify-content: flex-start;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-left: 0.4rem;
}
.bob-bar-center {
  display: flex;
  justify-content: flex-start;
  flex: 1 0 auto;
  flex-shrink: 0;
  margin: 0;
  margin-left: 0.5rem;
}
.bob-bar-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-shrink: 0;
}
.bob-bar-far-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-shrink: 0;
}
.bob-bar-right,
.bob-bar-far-right,
.bob-bar-user {
  margin-left: auto;
}
.bob-bar-right + .bob-bar-right,
.bob-bar-right + .bob-bar-far-right,
.bob-bar-far-right + .bob-bar-right,
.bob-bar-far-right + .bob-bar-far-right {
  margin-left: 1.5rem;
}
.bob-bar-right + .bob-bar-user,
.bob-bar-far-right + .bob-bar-user,
.bob-bar-user + .bob-bar-right,
.bob-bar-user + .bob-bar-far-right,
.bob-bar-user + .bob-bar-user {
  margin-left: 0;
}
.bob-bar .tt-flex-gap-small {
  gap: 3px;
}
.bob-bar-user {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 0.5rem;
  border-left: 0.0625rem solid var(--q-border-color, rgba(128, 128, 128, 0.2));
}
.bob-bar.overflow-strip .bob-bar-section {
  flex: 1;
  justify-content: flex-start;
  width: 100%;
}
.bob-bar.overflow-strip .bob-bar-center {
  flex-grow: 1;
  justify-content: center;
  min-width: 0;
}
.main-strip[data-collapse-level="3"] {
  gap: 0 !important;
}
.main-strip[data-collapse-level="3"] .bob-bar-section {
  gap: 0 !important;
}
.main-strip[data-collapse-level="3"] .bob-bar-left,
.main-strip[data-collapse-level="3"] .bob-bar-far-left,
.main-strip[data-collapse-level="3"] .bob-bar-center,
.main-strip[data-collapse-level="3"] .bob-bar-right,
.main-strip[data-collapse-level="3"] .bob-bar-far-right,
.main-strip[data-collapse-level="3"] .bob-bar-user {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}
.main-strip[data-collapse-level="3"] .bob-bar-section-content {
  padding: 0 !important;
}
.bob-bar-measure,
.bob-bar-measure-compact {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  gap: 0.25rem;
  padding: 0 0.25rem;
  white-space: nowrap;
}
.bob-bar.bob-sublist-bar,
.bob-bar-measure.bob-sublist-bar {
  justify-content: flex-start;
  gap: 0.25rem;
  display: flex;
  flex-direction: row;
}
.bob-bar-section-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  height: 100%;
}
.bob-bar-section-bg-tint {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  background-color: transparent !important;
  opacity: 0 !important;
}
.bob-bar .bob-bar-section-toggle-btn.bob-bar-section-toggle-btn {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.bob-bar .bob-bar-section-toggle-btn i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
}
.bob-bar .bob-bar-section-toggle-btn.bob-bar-section-toggle-btn:hover {
  background-color: rgba(128, 128, 128, 0.15);
}
.bob-bar-section:not(.collapsed-placeholder) .bob-bar-section-toggle-btn {
  opacity: 0.3;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.bob-bar-section:not(.collapsed-placeholder):hover .bob-bar-section-toggle-btn {
  opacity: 1;
}
.bob-bar-section-content.is-fixed {
  flex-shrink: 0;
}
.bob-bar .bob-master-keyword-filter.bob-master-keyword-filter,
.bob-bar .bob-master-keyword-filter input.bob-master-keyword-filter-input {
  min-width: 0;
}
.bob-bar-section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--q-text-muted, #888);
  font-size: 0.875rem;
  z-index: 1;
  flex-shrink: 0;
  margin-right: 0;
}
.bob-bar-section-divider-wrapper {
  display: flex;
  align-items: center;
  padding-left: 0.625rem;
  margin-left: 0.125rem;
  height: 1.5rem;
  border-left: 0.0625rem solid var(--q-border-subtle, rgba(128,128,128,0.2));
  z-index: 1;
}
.bob-bar-section-icon {
  opacity: 0.9;
  font-size: 0.875rem;
}
.bob-bar-compact .bob-bar {
  padding: 0.375rem 0.5rem;
  gap: 0.25rem;
}
.bob-bar-compact .bob-bar-section {
  gap: 0.25rem;
}
.bob-bar-compact .bob-bar-section-header {
  margin-right: 0;
  gap: 0;
}
.bob-bar-compact .bob-bar-section-caption {
  display: none;
}
.bob-bar-compact .bob-bar-section-icon {
  font-size: 0.875rem;
  margin-right: 0.25rem;
}
.bob-bar-compact .bob-form-bar-divider {
  margin: 0 0.125rem;
}
.bob-bar.bob-bar-measuring {
  width: max-content;
  display: inline-flex;
}
.bob-bar.bob-bar-measuring .bob-bar-section {
  flex: 0 0 auto;
  margin-left: 0;
}
.bob-bar-section-pin-btn {
  z-index: 1;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.bob-bar-section-pin-btn--left {
  padding-right: 0.25rem;
}
.bob-bar-section-pin-btn--right {
  padding-left: 0.25rem;
}
.bob-bar-section-pin-btn:hover {
  opacity: 1;
}
.bob-bar-section-pin-icon {
  font-size: 0.75rem;
  color: var(--tint-color, inherit);
}
.bob-bar .btn {
  border: none !important;
}
.bob-bar-section-caption {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--q-text-edit, var(--q-text-base));
  font-family: inherit;
  line-height: 1;
  display: flex;
  align-items: center;
}
.bob-bar-section-open {
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
  height: 100%;
  gap: 0.5rem;
}
.bob-bar-overflow-popup-content {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  min-width: max-content;
  align-items: center;
}
.bob-bar-section-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 100%;
  z-index: 1;
}
.bob-bar-flex-items {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.bob-bar-isolated-back-btn {
  margin-right: 0.5rem;
  padding: 0 0.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bob-bar .bob-heading {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-family: inherit !important;
}
.bob-bar {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

/* src/components/BobStatusBar.css */
.bob-status-bar {
  height: var(--bob-status-bar-height, 28px);
  background: var(--q-bg-sunken);
  border-top: 1px solid var(--q-border-color);
  font-size: 0.75rem;
  color: var(--q-text-muted);
  padding: 0 10px;
}
.bob-status-bar-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bob-status-bar-icon {
  font-size: 0.7rem;
  color: var(--q-primary);
}
.bob-status-bar-status {
  color: var(--q-text-main);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.bob-status-bar-separator {
  margin: 0 4px;
  opacity: 0.5;
}
.bob-status-bar-instruction {
  font-style: normal;
  opacity: 0.9;
}
.bob-status-bar-shortcut-spacer {
  display: inline-block;
  width: 24px;
}
.bob-status-bar-shortcut {
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--q-font-family-mono, monospace);
  font-size: 0.7rem;
  box-shadow: var(--q-shadow-sm);
}
.bob-status-bar-shortcut-key {
  color: var(--q-primary);
  font-weight: bold;
}

/* src/components/BobSublistBar.css */

/* src/components/BobBarGroup.css */
.bob-bar-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.bob-bar-group.q-align-right {
  justify-content: flex-end;
}
.bob-bar-group.q-align-center {
  justify-content: center;
}
.bob-bar-group.q-align-left {
  justify-content: flex-start;
}
.bob-bar-group.is-collapsible:not(.is-menu-open) {
  overflow: hidden;
}
.bob-bar-measure,
.bob-bar-measure-compact {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}
.bob-bar-group-overflow-anchor {
  display: flex;
  align-items: center;
}
.bob-bar-overflow-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 0.5rem 1rem;
  background-color: var(--q-bg-sunken);
  border-bottom: 1px solid var(--q-border-color);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  z-index: 10000;
  animation: bob-dropdown-fade 0.2s ease-out;
}
@keyframes bob-dropdown-fade {
  from {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* src/components/BobAppBar.css */
.bob-app-bar {
  border-bottom: 1px solid var(--q-border-color);
  background-color: var(--q-bg-subtle, var(--q-bg-sunken));
  color: var(--q-text-base);
  padding: 4px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
.bob-app-bar-wrapper {
  position: relative;
  z-index: 1000;
}
.bob-app-bar-stacked {
  display: flex;
  flex-direction: column;
}
.bob-app-bar-stacked .bob-app-bar-top-layer {
  border-bottom: none;
}
.bob-app-bar-stacked .bob-app-bar-bottom-layer {
  border-top: 1px solid var(--q-border-subtle, rgba(128, 128, 128, 0.2));
}
.bob-app-bar-fixed {
  position: sticky;
  top: 0;
}
.bob-design-bar {
  border: none;
}
.bob-app-bar-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.bob-appbar-divider {
  width: 1px;
  height: 24px;
  background-color: var(--q-border-subtle, rgba(128, 128, 128, 0.2));
  margin: 0 8px;
}
.bob-app-bar-actions-right {
  gap: 16px !important;
}
.bob-app-bar-left-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bob-app-bar-left-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--q-border-subtle, rgba(128, 128, 128, 0.2));
}
.bob-app-bar-app-icon {
  font-size: 1.25rem;
  color: var(--q-primary);
  margin-right: 4px;
}
#appbar-theme-settings {
  margin-right: 0.4rem;
}
.bob-app-bar-portal {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bob-app-bar-layout-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bob-design-bar-active {
  border-top: 1px solid var(--q-border-subtle);
  background: var(--q-bg-sunken);
}
.bob-app-nav-menu-container {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 200px;
}
.bob-app-nav-menu-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--q-text-muted);
  font-size: 1rem;
  z-index: 10;
  padding: 4px;
}
.bob-app-nav-menu-close:hover {
  color: var(--q-text-base);
}
@media (max-width: 1000px) {
  .bob-app-nav-menu-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: var(--q-bg-base);
    z-index: 2000;
  }
  .bob-app-nav-menu-popup .bob-app-nav-menu-container {
    width: 100% !important;
    height: 100%;
  }
  .bob-app-nav-menu-popup .bob-popup-menu {
    width: 100% !important;
    height: 100%;
    border: none;
    border-radius: 0;
    padding-top: 40px;
  }
}
.bob-app-bar-center-cluster {
  min-width: 0;
  flex: 1 1 auto;
}

/* src/components/BobNavigationPanel.css */
.bob-navigation-panel {
  display: flex;
  flex-direction: column;
  background-color: var(--q-bg-subtle, var(--q-bg-sunken));
  color: var(--q-text-base);
  padding: 1rem;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}
.bob-navigation-panel h4 {
  margin: 0 0 1rem 0;
  color: var(--q-text-base);
  font-size: 1.125rem;
}
.bob-navigation-panel-floating {
  position: absolute;
  top: calc(var(--q-input-height) * 2 + 0.625rem);
  left: clamp(0.25rem, 1vw, 0.625rem);
  border: 1px solid var(--q-border-color);
  z-index: 1000;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  border-radius: var(--q-border-radius);
}
@media (max-width: 768px) {
  .bob-navigation-panel {
    top: calc(var(--q-input-height) * 3);
    left: 0;
    right: 0;
    min-width: 100%;
    border-radius: 0;
  }
}
.bob-navigation-panel-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.bob-navigation-panel-empty {
  color: var(--q-text-muted);
}
.bob-navigation-panel-link {
  text-decoration: none;
  justify-content: flex-start;
  text-align: left;
  border: 1px solid transparent;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bob-navigation-panel .bob-navigation-panel-link:not(.btn-is-primary) {
  color: var(--q-text-base);
}
.bob-navigation-panel .bob-navigation-panel-link.btn-is-primary {
  background-color: var(--q-primary-alpha, rgba(var(--q-primary-rgb), 0.15));
  color: var(--q-primary);
  border-color: var(--q-primary-alpha);
}

/* src/components/BobUserPanel.css */
.bob-user-panel {
  position: absolute;
  top: 50px;
  right: 10px;
  background-color: var(--q-bg-subtle, var(--q-bg-sunken));
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
  padding: 16px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 200px;
  border-radius: var(--q-border-radius);
}
.bob-user-panel-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* src/components/bob-dialog.css */
.q-dialog,
.q-dialog * {
  box-sizing: border-box;
}
.q-dialog {
  margin: auto;
  padding: 0;
  width: fit-content;
  min-width: min(480px, 95vw);
  max-width: 95vw;
  max-height: 95vh;
  border: 1px solid var(--bob-border-subtle, #334155);
  background-color: var(--bob-bg-surface, #1e293b);
  color: var(--bob-text-main, #f8fafc);
  border-radius: var(--bob-radius-lg, 12px);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
  overflow: hidden;
  transition: width 0.2s ease-out, height 0.2s ease-out;
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  .q-dialog {
    width: 100vw !important;
    height: 100vh !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 2000;
  }
  .q-popup-content {
    padding: 0 !important;
  }
}
.q-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.q-popup-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
}
.q-popup-small {
  width: 400px;
  height: 300px;
}
.q-popup-medium {
  width: 600px;
  height: 450px;
}
.q-popup-large {
  width: 90vw;
  height: 85vh;
}
.q-popup-full {
  width: 100vw;
  height: 100vh;
}
.q-popup-auto {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(95vw, 100%) !important;
  margin: auto !important;
}
.q-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bob-border-subtle, #334155);
  background-color: var(--bob-bg-surface, #1e293b);
}
.q-popup-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--q-color-heading, var(--q-text-base));
}
.q-popup-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;
}
.q-popup-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--bob-border-subtle, #334155);
  background-color: var(--bob-bg-surface, #1e293b);
}

/* src/components/BobKeywordFilter.css */
.bob-keyword-filter {
  display: flex;
  align-items: center;
  gap: var(--q-control-gap);
  width: auto;
}
.bob-keyword-filter-input {
  width: clamp(80px, 15vw, 150px);
  padding: 3px;
}
.bob-keyword-filter-advanced-dialog-content {
  padding: var(--q-padding-base);
  color: var(--q-text-base);
}
@media (max-width: 768px) {
  .bob-keyword-filter {
    flex: 1;
  }
  .bob-keyword-filter-input {
    width: 100%;
    flex: 1;
  }
}

/* src/components/BobAppFooterBar.css */
.bob-footer-bar-wrapper {
  border-top: 1px solid var(--q-border-color);
  background-color: var(--q-bg-subtle, var(--q-bg-sunken));
  color: var(--q-text-base);
}
.bob-footer-bar {
  padding: 4px 16px;
  min-height: 32px;
}

/* src/components/BobBoxTextTags.css */
.q-tag-popup {
  display: flex;
  flex-direction: column;
  gap: var(--q-control-gap);
  padding: var(--q-padding-base);
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  box-shadow: var(--q-shadow-sm);
  min-width: 200px;
}
.q-tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.q-tag {
  display: inline-flex;
  align-items: center;
  background: var(--q-primary-alpha-15);
  color: var(--q-primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--q-font-size-sm);
}
.q-tag-remove {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 4px;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.q-tag-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  background: var(--q-bg-base);
  color: var(--q-text-edit);
  font-size: var(--q-font-size-base);
  outline: none;
}
.q-tag-input:focus {
  border-color: var(--q-primary);
}

/* src/components/BobBoxCheck.css */
.q-check-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  gap: 0.5rem;
}
.q-check-variant-circle .q-check-icon {
  font-size: 1.2rem;
}
.q-check-variant-circle .q-check-true,
.q-check-true {
  color: var(--q-text-edit);
}
.q-check-variant-circle .q-check-false,
.q-check-false {
  color: var(--q-text-edit);
}
.q-check-variant-circle .q-check-null {
  color: var(--q-text-muted);
  opacity: 0.5;
}
.q-check-variant-circle .q-check-label {
  margin-left: 0.25rem;
}
.q-check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.q-check-null-placeholder {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.q-readonly,
.q-disabled {
  cursor: default;
  opacity: 0.6;
}

/* src/components/BobBoxChoiceKeys.css */
.q-choice-keys-wrapper {
  display: flex;
  align-items: stretch;
  gap: var(--q-control-gap, 6px);
  width: 100%;
  background: var(--q-bg-base, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--q-border-color, rgba(255, 255, 255, 0.05));
  border-radius: var(--q-border-radius, 12px);
  padding: 4px;
  min-height: 42px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.q-choice-keys-wrapper:focus {
  outline: none;
  border-color: var(--q-primary, #bda15f);
  box-shadow: 0 0 0 2px rgba(189, 161, 95, 0.2);
}
.q-choice-keys-wrapper.q-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.q-choice-keys-wrapper button.q-choice-key-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: calc(var(--q-border-radius, 12px) - 4px);
  color: var(--q-text-muted, rgba(255, 255, 255, 0.5));
  font-size: var(--q-font-size-base, 12px);
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.q-choice-keys-wrapper button.q-choice-key-btn:hover:not(:disabled) {
  color: var(--q-text-base, #ffffff);
  background-color: var(--q-bg-hover, rgba(255, 255, 255, 0.05));
}
.q-choice-keys-wrapper button.q-choice-key-btn.q-selected {
  background-color: rgba(189, 161, 95, 0.15);
  border-color: rgba(189, 161, 95, 0.3);
  color: var(--q-primary, #bda15f);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.q-choice-keys-wrapper button.q-choice-key-btn:focus-visible {
  background-color: rgba(189, 161, 95, 0.08);
}
.q-choice-key-btn .q-key-badge {
  font-size: 8px;
  opacity: 0.4;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--q-bg-base, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--q-border-color, rgba(255, 255, 255, 0.05));
  font-family: monospace;
  margin-left: auto;
}

/* src/components/BobBoxChoiceColor.css */
.q-choice-color-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
.q-choice-color-inline-swatches {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  overflow: hidden;
  flex: 1;
  padding-left: 1rem;
}
.q-choice-color-btn-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.q-choice-color-wrapper.q-size-small,
.q-color-palette-popup-inner.q-size-small {
  --size-px: 1.5em;
  --icon-size: 0.8em;
}
.q-choice-color-wrapper.q-size-medium,
.q-color-palette-popup-inner.q-size-medium {
  --size-px: 2em;
  --icon-size: 1em;
}
.q-choice-color-wrapper.q-size-large,
.q-color-palette-popup-inner.q-size-large {
  --size-px: 2.5em;
  --icon-size: 1.25em;
}
.q-color-palette-popup-inner {
}
.q-choice-color-btn {
  border-radius: 0;
  padding: 0;
  margin: 0;
  transition: transform 0.1s ease, border-color 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--size-px);
  height: var(--size-px);
  background-color: var(--swatch-color);
  border: 2px solid transparent;
  outline-offset: -0.25rem;
  color: var(--q-text-muted);
}
.q-choice-color-btn.q-selected {
  border-color: var(--q-text-edit);
}
.q-choice-color-btn.q-selected:not(.q-reset) {
  outline: 2px solid var(--q-bg-base);
}
.q-choice-color-btn.q-reset {
  background-color: var(--q-bg-subtle);
}
.q-choice-color-btn.q-transparent {
  background-color: var(--q-bg-base);
  border-color: var(--q-border-subtle);
}
.q-choice-color-btn:hover:not(:disabled) {
  transform: scale(1.1);
}
.q-choice-color-btn:active:not(:disabled) {
  transform: scale(0.95);
}
.q-choice-color-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.q-choice-color-btn-icon {
  pointer-events: none;
  font-size: var(--icon-size);
}
.q-choice-color-btn-remove {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  z-index: 10;
}
.q-choice-color-readonly-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  height: var(--size-px);
}
.q-choice-color-readonly-swatch {
  width: var(--size-px);
  height: var(--size-px);
  border-radius: 0;
  box-shadow: var(--q-shadow-sm);
  border: 1px solid var(--q-border-subtle);
  box-sizing: border-box;
  background-color: var(--swatch-color);
}
.q-choice-color-readonly-empty {
  color: var(--q-text-muted);
  font-size: 0.9rem;
}
.q-choice-color-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: var(--size-px);
  height: var(--size-px);
  min-width: var(--size-px);
}
.q-choice-color-hidden-input {
  display: none;
}
.q-color-palette-popup {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min-content;
}
.q-choice-color-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--q-text-muted);
  border-bottom: 1px solid var(--q-border-subtle);
  padding-bottom: 0.5rem;
  gap: 1rem;
}
.q-choice-color-palette-header-right {
  position: relative;
}
.q-choice-color-grid {
  display: grid;
  grid-template-columns: repeat(8, var(--size-px, 2rem));
  grid-auto-rows: var(--size-px, 2rem);
  gap: 0.25rem;
  justify-content: center;
  width: max-content;
}
.q-color-palette-popup-inner {
  background-color: var(--q-bg-base);
  border: 1px solid var(--q-border-subtle);
  border-radius: var(--q-radius-md);
  box-shadow: var(--q-shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.q-color-palette-bob-bar {
  border-bottom: 1px solid var(--q-border-subtle);
  padding: 0 0.25rem;
}
.q-choice-color-divider {
  width: 1px;
  height: 1.5em;
  background-color: var(--q-border-subtle);
  margin: 0 0.25rem;
}
.q-choice-color-palette-title {
  font-weight: 600;
  padding-left: 0.5rem;
}
.q-color-palette-grid-container {
  padding: 1rem;
}
.q-choice-color-palette-trigger {
  display: flex;
}

/* src/components/BobCalendar.css */
.q-calendar {
  --q-cal-cell-size: 36px;
  --q-cal-num-size: 28px;
  display: inline-flex;
  flex-direction: column;
  gap: var(--q-gap-base, 6px);
  padding: var(--q-gap-base, 6px);
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  user-select: none;
  font-family: var(--q-font-family, inherit);
  font-size: var(--q-font-size-base);
}
.q-calendar--disabled {
  opacity: 0.5;
  pointer-events: none;
}
.q-calendar--read-only {
  border-style: dotted;
  border-width: 2px;
}
.q-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
}
.q-cal-nav-btn {
  background: transparent;
  border: none;
  color: var(--q-text-muted);
  cursor: pointer;
  font-size: var(--q-font-size-base);
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--q-border-radius);
  transition: color 0.15s, background 0.15s;
}
.q-cal-nav-btn:hover {
  color: var(--q-text-base);
  background: var(--q-bg-hover);
}
.q-cal-month-label {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--q-text-base);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--q-font-size-base);
  font-weight: 600;
  text-align: center;
  padding: 2px 4px;
  border-radius: var(--q-border-radius);
  transition: background 0.15s;
}
.q-cal-month-label:hover {
  background: var(--q-bg-hover);
}
.q-cal-title-label {
  flex: 1;
  color: var(--q-text-base);
  font-family: inherit;
  font-size: var(--q-font-size-base);
  font-weight: 700;
  text-align: center;
  padding: 6px 12px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.q-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, var(--q-cal-cell-size));
  gap: 4px;
}
.q-cal-day-name {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  color: var(--q-text-muted);
  font-size: var(--q-font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.q-cal-blank {
  width: var(--q-cal-cell-size);
  height: var(--q-cal-cell-size);
}
.q-cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--q-cal-cell-size);
  height: var(--q-cal-cell-size);
  padding: 1px 0;
  cursor: pointer;
  border-radius: var(--q-border-radius);
  transition: background 0.1s;
  position: relative;
}
.q-cal-day:not(.q-cal-day--disabled):hover {
  background: var(--q-bg-hover);
}
.q-cal-day--disabled {
  cursor: default;
  opacity: 0.3;
}
.q-calendar--read-only .q-cal-day--disabled {
  opacity: 1;
}
.q-cal-day--blocked,
.q-calendar--read-only .q-cal-day--blocked {
  opacity: 0.3;
}
.q-cal-day--in-range {
  background: color-mix(in srgb, var(--q-primary) 12%, transparent);
  border-radius: 0;
}
.q-cal-day--range-edge {
  background: color-mix(in srgb, var(--q-primary) 12%, transparent);
}
.q-cal-day-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--q-cal-num-size);
  height: var(--q-cal-num-size);
  border-radius: 50%;
  color: var(--q-text-base);
  font-size: var(--q-font-size-base);
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, color 0.15s;
}
.q-cal-day-num--disabled {
  color: var(--q-text-muted);
}
.q-calendar--read-only .q-cal-day-num--disabled {
  color: var(--q-text-base);
}
.q-cal-day-num--blocked,
.q-calendar--read-only .q-cal-day-num--blocked {
  color: var(--q-text-muted);
}
.q-calendar .q-cal-day-num--today {
  border: 1.5px solid var(--q-primary);
  color: var(--q-primary);
  font-weight: 700;
}
.q-calendar .q-cal-day-num--selected {
  background: var(--q-primary);
  color: var(--q-bg-base, #ffffff);
  font-weight: 700;
}
.q-cal-markers {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-top: 1px;
  height: 4px;
}
.q-cal-marker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.q-cal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--q-gap-base, 6px);
  border-top: 1px solid var(--q-border-color);
  padding-top: var(--q-gap-base, 6px);
  margin-top: 2px;
}
.q-cal-footer-hint {
  flex: 1;
  color: var(--q-text-muted);
  font-size: var(--q-font-size-sm);
}
.q-cal-footer-range {
  flex: 1;
  color: var(--q-primary);
  font-size: var(--q-font-size-base);
  font-variant-numeric: tabular-nums;
}
.q-cal-clear-btn {
  background: transparent;
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  color: var(--q-text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--q-font-size-sm);
  padding: 2px 8px;
  transition: color 0.15s, border-color 0.15s;
}
.q-cal-clear-btn:hover {
  color: var(--q-text-base);
  border-color: var(--q-text-muted);
}
@media (max-width: 768px) {
  .q-cal-grid {
    gap: 4px;
  }
  .q-cal-day-num {
    width: clamp(28px, 8vw, 36px);
    height: clamp(28px, 8vw, 36px);
    font-size: clamp(11px, 3.5vw, 14px);
  }
}
.q-no-spin {
  -moz-appearance: textfield !important;
}
.q-no-spin::-webkit-outer-spin-button,
.q-no-spin::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.q-date-popup {
  overflow: hidden;
  box-sizing: border-box;
}
.q-date-popup .q-calendar {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.q-date-popup .q-cal-header {
  width: 100%;
  box-sizing: border-box;
}
.q-date-popup .q-cal-header-selectors {
  width: 100%;
  box-sizing: border-box;
}
.q-date-popup .q-cal-grid {
  width: 100%;
  grid-template-columns: repeat(7, 1fr);
  box-sizing: border-box;
}
.q-date-popup .q-cal-blank,
.q-date-popup .q-cal-day {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

/* src/components/BobBoxTime.css */
.q-time-popup {
  width: 320px;
}
.q-time-body {
  display: flex;
  gap: 16px;
  padding: 12px;
}
.q-time-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-time-col-header {
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--q-text-muted);
  text-align: center;
  text-transform: uppercase;
}
.q-time-hours-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.q-time-minutes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 140px;
  overflow-y: auto;
}
.q-time-cell {
  padding: 0 !important;
  min-width: 32px !important;
}
.q-time-cell--minute {
  min-width: 100% !important;
  margin-bottom: 2px;
}
.q-time-cell--selected {
  font-weight: bold;
}

/* src/components/BobBoxLookup.css */
.q-lookup-popup {
  display: flex;
  flex-direction: column;
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  border-radius: var(--q-border-radius);
  box-shadow: var(--q-shadow-lg);
  min-width: var(--lookup-min-width, 280px);
}
.q-lookup-search-row {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--q-border-subtle);
}
.q-lookup-search-input {
  flex: 1;
}
.q-lookup-spinner {
  font-size: 1.2rem;
  color: var(--q-primary);
  animation: q-spin 1s linear infinite;
}
@keyframes q-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.q-lookup-results-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}
.q-lookup-no-results {
  padding: 12px;
  color: var(--q-text-muted);
  text-align: center;
}
.q-lookup-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.q-lookup-item:hover,
.q-lookup-item.active {
  background: var(--q-bg-sunken);
}
.q-lookup-item.disabled {
  opacity: 0.5;
  cursor: default;
}
.q-lookup-label {
  flex: 1;
}
.q-lookup-id {
  font-size: 0.75rem;
  color: var(--q-text-muted);
  font-family: var(--q-font-family-mono);
}
.q-lookup-footer {
  padding: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--q-border-subtle);
  background: var(--q-bg-sunken);
}

/* src/components/BobBoxGrid.css */
.q-box-grid-container {
  width: 100%;
  overflow-x: auto;
}
.q-box-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.q-box-grid-header {
  background-color: var(--q-bg-subtle);
  border-bottom: 2px solid var(--q-border-color);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--q-color-label);
}
.q-box-grid-caption {
  background-color: var(--q-bg-sunken);
  border-right: 2px solid var(--q-border-color);
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.85em;
  color: var(--q-color-label);
  width: 1%;
  white-space: nowrap;
}
.q-box-grid-cell {
  border: 1px solid var(--q-border-subtle);
  padding: 4px;
  vertical-align: top;
}

/* src/components/BobBoxTextUpload.css */
.q-text-upload-container {
  position: relative;
  width: 100%;
}
.q-upload-hidden-input {
  display: none;
}
.q-upload-popup {
  padding: 12px;
  min-width: 280px;
  background: var(--q-bg-base);
}
.q-upload-header {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--q-border-subtle);
  padding-bottom: 8px;
}
.q-upload-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--q-text-muted);
}
.q-upload-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q-upload-empty {
  color: var(--q-text-muted);
  font-size: 0.85rem;
  text-align: center;
  padding: 12px 0;
}
.q-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  background: var(--q-bg-subtle);
  border-radius: 4px;
  border: 1px solid var(--q-border-subtle);
}
.q-upload-filename {
  font-size: 0.85rem;
  color: var(--q-text-edit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.q-upload-clear-btn {
  margin-right: auto;
}
.q-popup-apply-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--q-border-subtle);
  padding-top: 12px;
}

/* src/components/BobBoxFile.css */
.q-file-container {
  position: relative;
  width: 100%;
}
.q-file-hidden-input {
  display: none;
}
.q-file-popup {
  padding: 16px;
  min-width: 320px;
  max-width: 400px;
  background: var(--q-bg-base);
  border-radius: var(--q-border-radius);
  box-shadow: var(--q-shadow-large);
}
.q-file-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--q-border-subtle);
  padding-bottom: 12px;
}
.q-file-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--q-text-base);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.q-file-uploading-spinner {
  color: var(--q-primary);
  font-size: 1.1rem;
}
.q-file-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-right: 4px;
}
.q-file-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.q-file-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  color: var(--q-text-muted);
  background: var(--q-bg-sunken);
  border-radius: var(--q-border-radius);
  border: 1px dashed var(--q-border-subtle);
}
.q-file-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.5;
}
.q-file-empty p {
  margin: 0;
  font-size: 0.9rem;
}
.q-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--q-bg-subtle);
  border-radius: 6px;
  border: 1px solid var(--q-border-subtle);
  transition: all 0.2s ease;
}
.q-file-item:hover {
  border-color: var(--q-border-color);
  background: var(--q-bg-hover);
}
.q-file-item-icon {
  font-size: 1.4rem;
  color: var(--q-primary);
  width: 32px;
  display: flex;
  justify-content: center;
}
.q-file-item-info {
  flex: 1;
  min-width: 0;
}
.q-file-filename {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--q-text-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.q-file-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.q-file-clear-btn {
  margin-right: auto;
}
.q-file-add-btn {
  font-weight: 600;
}
.q-file-readonly-mode .q-input-group {
  background: var(--q-bg-sunken);
  opacity: 0.8;
}
.q-file-popup-portal {
  z-index: 10000;
}

/* src/components/BobBoxSlider.css */
.bob-box-slider-container {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 0;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.bob-box-slider-native-wrapper {
  width: 120px;
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  position: relative;
  height: 32px;
}
#input-slider-custom {
  width: 120px;
  max-width: 120px;
}
.bob-box-slider-native-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: transparent;
  outline: none;
  margin: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: background 0.1s ease;
  touch-action: none;
}
.bob-box-slider-native-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  background:
    linear-gradient(
      to right,
      var(--min-color) 0%,
      var(--max-color) 100%);
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bob-box-slider-native-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 6px solid var(--slider-color);
  cursor: pointer;
  margin-top: -9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: border-color 0.1s ease;
}
.bob-box-slider-native-input::-moz-range-track {
  width: 100%;
  height: 10px;
  background:
    linear-gradient(
      to right,
      var(--min-color) 0%,
      var(--max-color) 100%);
  border-radius: 5px;
  cursor: pointer;
}
.bob-box-slider-native-input::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 6px solid var(--slider-color);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  transition: border-color 0.1s ease;
}
.bob-box-slider-native-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bob-box-slider-native-input:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
}
.bob-box-slider-native-input:disabled::-moz-range-thumb {
  cursor: not-allowed;
}
.bob-box-slider-number {
  width: 120px;
  flex: 0 0 120px;
  height: 32px;
  border: 2px solid var(--slider-color);
  border-radius: 8px;
  background: var(--slider-color);
  text-align: center;
  font-size: var(--q-font-size-base);
  font-weight: 500;
  color: var(--q-darktxt);
  margin-bottom: 2px;
  word-break: break-word;
}
.bob-box-slider-number:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bob-box-slider-number:focus {
  border-color: var(--q-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--q-primary-rgb, 37, 99, 235), 0.2);
}
.bob-box-slider-view {
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  background-color: var(--slider-color);
  border: 2px solid var(--slider-color);
  color: white;
}

/* src/components/BobBoxSlider2.css */
.bob-box-slider2-container {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding: 8px 0;
  box-sizing: border-box;
}
.bob-box-slider2-container.is-readonly {
  cursor: default;
}
.bob-box-slider2-container.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bob-box-slider2-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  outline: none;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--q-border-subtle);
  border-radius: 4px;
  touch-action: none;
}
.bob-box-slider2-input::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  background:
    linear-gradient(
      to right,
      var(--min-color) 0%,
      var(--mid-color) var(--mid-percent),
      var(--max-color) 100%);
  border-radius: 4px;
}
.bob-box-slider2-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 24px;
  background: var(--slider-thumb-color, var(--q-primary));
  border: 2px solid white;
  cursor: pointer;
  margin-top: -9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  transition: transform 0.1s ease;
}
.bob-box-slider2-input:active::-webkit-slider-thumb {
  transform: scaleX(1.1);
}
.bob-box-slider2-input::-moz-range-track {
  width: 100%;
  height: 6px;
  background:
    linear-gradient(
      to right,
      var(--min-color) 0%,
      var(--mid-color) var(--mid-percent),
      var(--max-color) 100%);
  border-radius: 4px;
}
.bob-box-slider2-input::-moz-range-thumb {
  width: 10px;
  height: 24px;
  background: var(--slider-thumb-color, var(--q-primary));
  border: 2px solid white;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}
.is-readonly .bob-box-slider2-input {
  cursor: default;
  pointer-events: none;
}

/* src/components/BobBoxProgress.css */
.bob-box-progress {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  padding: 8px 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
}
.bob-box-progress.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.bob-box-progress.is-readonly {
  cursor: default;
}
.bob-box-progress.is-editable:not(.is-disabled) {
  cursor: pointer;
}
.bob-box-progress-track {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  border-radius: 4px;
  outline: none;
}
.bob-box-progress.is-editable .bob-box-progress-track {
  cursor: pointer;
}
.bob-box-progress.is-editable .bob-box-progress-track:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--q-primary-rgb, 37, 99, 235), 0.35);
}
.bob-box-progress-segment {
  flex: 1 1 0;
  height: 6px;
  border-radius: 2px;
  transition: background-color 0.15s ease;
  pointer-events: none;
  background-color: var(--segment-color, #ccc);
}
.bob-box-progress-segment:first-child {
  border-radius: 4px 2px 2px 4px;
}
.bob-box-progress-segment:last-child {
  border-radius: 2px 4px 4px 2px;
}
.bob-box-progress.is-editable .bob-box-progress-track:hover .bob-box-progress-segment {
  height: 8px;
}
.bob-box-progress-indicator {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 24px;
  background: var(--q-text-base, #ffffff);
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: left 0.15s ease;
  z-index: 2;
  left: var(--indicator-percent, 0%);
}
.bob-box-progress-label {
  flex: 0 0 auto;
  font-size: var(--q-font-size-sm, 12px);
  font-weight: 500;
  color: var(--q-text-muted, #888);
  min-width: 32px;
  text-align: right;
  white-space: nowrap;
}

/* src/components/BobBoxMapMarker.css */
.bob-box-map-container {
  width: 100%;
}
.bob-box-map-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--q-bg-sunken);
  border: 1px solid var(--q-border-color);
  border-radius: 12px;
}
.bob-map-status-card {
  text-align: center;
  color: var(--q-text-muted);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.bob-map-status-card i {
  color: var(--q-primary-alpha-50);
}
.bob-map-view {
  height: 300px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--q-shadow-sm);
}
.bob-map-view-inner {
  flex: 1;
}
.bob-map-hint {
  margin-top: 8px;
  text-align: center;
  color: var(--q-text-muted);
}

/* src/components/BobSliderPromptDialog.css */
.q-slider-prompt-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.q-slider-prompt-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.q-slider-prompt-limit {
  font-size: 12px;
  color: var(--q-text-muted);
}
.q-slider-prompt-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--q-text);
}
.q-slider-prompt-input {
  width: 100%;
  cursor: pointer;
}

/* src/components/BobPopupArea.css */
.q-popup-area-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.q-popup-area-top {
  padding: 1rem 1rem 0.5rem 1rem;
  flex-shrink: 0;
}
.q-popup-area-middle {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0.25rem 1rem;
}
@media (min-width: 768px) {
  .q-popup-layout-split .q-popup-area-middle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
  }
}
.q-popup-nested {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: auto;
}
.q-popup-nested .q-popup-area-top {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0.5rem;
}
.q-popup-nested .q-popup-area-middle {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.q-popup-nested .q-popup-area-bottom {
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0.5rem;
}
@media (max-width: 480px) {
  .q-popup-area-middle {
    padding: 0.5rem;
  }
}
.q-popup-area-bottom {
  padding: 0.5rem 1rem 1rem 1rem;
  flex-shrink: 0;
}

/* src/components/BobStoryPage.css */
.bob-story-page-edit,
.bob-story-page-view {
  padding: 24px;
  background-color: var(--q-bg-base);
  border-left: var(--story-border-left, 1px solid var(--q-border-color));
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bob-story-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.bob-story-title-group {
  flex: 1;
  margin-right: 16px;
}
.bob-story-title {
  margin: 0 0 8px 0;
  word-break: break-word;
}
.bob-story-status-wrapper {
  margin-top: 8px;
}
.bob-story-status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  background-color: var(--story-status-bg, var(--q-border-color));
  color: var(--story-status-color, var(--q-text-muted));
}
.bob-story-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.bob-story-content {
  flex: 1;
  overflow-y: auto;
}
.bob-story-description {
  white-space: pre-wrap;
  line-height: 1.6;
}
.bob-story-no-desc {
  opacity: 0.5;
  font-style: italic;
}
.bob-story-memo-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bob-story-memo {
  min-height: 300px;
}

/* src/components/BobSideNav.css */
.bob-side-nav {
  position: relative;
  height: 100%;
  background: var(--q-bg-base);
  border-right: 1px solid var(--q-border-color);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: visible;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bob-side-nav--collapsed {
  width: 60px;
}
.bob-side-nav--expanded {
  width: 240px;
}
.bob-side-nav--locked.bob-side-nav--expanded {
  width: 60px;
}
.bob-side-nav--locked.bob-side-nav--expanded .bob-side-nav-content {
  width: 240px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--q-bg-base);
  border-right: 1px solid var(--q-border-color);
  box-shadow: var(--q-shadow-lg);
  z-index: 101;
}
.bob-side-nav--floating:not(.bob-side-nav--locked) {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}
.bob-side-nav--floating:not(.bob-side-nav--locked).bob-side-nav--mobile-visible {
  transform: translateX(0);
  box-shadow: var(--q-shadow-lg);
}
.bob-side-nav--mobile {
  position: absolute;
  left: 0;
  transform: translateX(-100%);
  top: 0;
  bottom: 0;
  width: 280px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
}
.bob-side-nav--mobile-visible {
  transform: translateX(0);
  box-shadow: var(--q-shadow-container);
}
.bob-side-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  z-index: 99;
}
.bob-side-nav-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--q-border-color);
  flex-shrink: 0;
  overflow: hidden;
}
.bob-side-nav-footer {
  padding: 12px 0;
  border-top: 1px solid var(--q-border-color);
  flex-shrink: 0;
  overflow: hidden;
}
.bob-side-nav-items {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
}
.bob-side-nav-lock-btn,
.bob-side-nav-close-btn {
  background: transparent;
  border: none;
  color: var(--q-secondary);
  cursor: pointer;
  font-size: 1rem;
  padding: 8px;
  border-radius: var(--q-border-radius);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bob-side-nav-lock-btn:hover,
.bob-side-nav-close-btn:hover {
  background: var(--q-bg-hover);
  color: var(--q-primary);
}
.bob-side-nav-lock-btn.is-active {
  color: var(--q-primary);
  transform: rotate(45deg);
}
.bob-side-nav-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.bob-side-nav-close-btn {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 10;
}
.bob-side-nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  height: 48px;
  color: var(--q-text-base);
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.bob-side-nav-item:hover {
  background: var(--q-bg-hover);
}
.bob-side-nav-item.is-active {
  background: var(--q-primary-alpha-15);
  color: var(--q-primary);
}
.bob-side-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--q-primary);
}
.bob-side-nav-item-icon {
  width: 60px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.bob-side-nav-item-caption {
  font-size: var(--q-font-size-base);
  font-weight: 500;
  padding-left: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.bob-side-nav--expanded .bob-side-nav-item-caption,
.bob-side-nav--mobile .bob-side-nav-item-caption {
  opacity: 1;
  pointer-events: auto;
}
/* src/default-themes.css */
html.theme-variant-clean .btn:not(:focus-visible):not(:active):not(.active):not(.btn-success):not(.btn-danger),
html.theme-variant-clean .bob-react-tab:not(:focus-visible):not(.bob-react-tab-active),
html.theme-variant-clean .q-tab:not(:focus-visible):not(.active),
html.theme-variant-clean .q-pagination-btn:not(:focus-visible):not(.active),
html.theme-variant-clean .q-checkbox:not(:focus-visible),
html.theme-variant-clean .q-picture-box:not(:focus-visible) {
  border-color: transparent;
  box-shadow: none;
}
html.theme-variant-clean .q-choice-icons-wrapper .btn {
  border-color: var(--q-border-color);
  border-width: 1px;
  box-shadow: none;
}
.q-theme-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}
.q-theme-selector-label {
  font-size: 0.75rem;
  opacity: 0.7;
}
.q-theme-selector-ctrl-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
.q-theme-selector-ctrl {
  min-width: 140px;
}
html.theme-variant-forge .btn,
html.theme-variant-forge .bob-react-tab,
html.theme-variant-forge .q-tab,
html.theme-variant-forge .q-pagination-btn,
html.theme-variant-forge .bob-react-panel,
html.theme-variant-forge .q-card,
html.theme-variant-forge .q-modal-content {
  border: 1px solid var(--q-border-color);
  box-shadow: none;
  border-radius: 6px;
}
html.theme-variant-forge .bob-react-tab {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  font-weight: normal !important;
  border-bottom: 1px solid transparent !important;
}
html.theme-variant-forge .bob-react-tab-strip-scroller,
html.theme-variant-forge .q-tab-strip {
  border-bottom: 1px solid var(--q-border-color);
}
html.theme-variant-forge .bob-react-tab span {
  font-weight: normal !important;
}
html.theme-variant-forge .bob-react-tab:not(.bob-react-tab-active),
html.theme-variant-forge .bob-react-tab:not(.bob-react-tab-active) span {
  color: var(--q-text-base) !important;
}
html.theme-variant-forge .bob-react-tab-active,
html.theme-variant-forge .q-tab.active {
  background-color: var(--q-bg-subtle) !important;
  color: var(--q-primary) !important;
  border-bottom: 1px solid var(--q-bg-subtle) !important;
}
html.theme-variant-forge .bob-react-tab-active span,
html.theme-variant-forge .q-tab.active span {
  color: var(--q-primary) !important;
}
html.theme-variant-forge .q-pagination-btn.active {
  border-bottom: 2px solid var(--q-primary) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
html.theme-variant-forge .btn-primary,
html.theme-variant-forge .btn.btn-is-primary {
  background-color: transparent !important;
  color: var(--q-primary) !important;
  border: 1px solid var(--q-primary);
}
html.theme-variant-forge .btn-primary:hover,
html.theme-variant-forge .btn.btn-is-primary:hover {
  background-color: var(--q-primary) !important;
  color: var(--q-primary-text, #ffffff) !important;
}
html.theme-variant-forge .btn-secondary {
  background-color: transparent !important;
  color: var(--q-secondary) !important;
  border: 1px solid var(--q-secondary);
}
html.theme-variant-forge .btn-secondary:hover {
  background-color: var(--q-secondary) !important;
  color: var(--q-secondary-text, var(--q-text-base, #ffffff)) !important;
}
html.theme-variant-forge .btn-danger {
  background-color: transparent !important;
  color: var(--q-danger) !important;
  border: 1px solid var(--q-danger);
}
html.theme-variant-forge .btn-danger:hover {
  background-color: var(--q-danger) !important;
  color: var(--q-danger-text, #ffffff) !important;
}
html.theme-variant-forge .btn-success {
  background-color: transparent !important;
  color: var(--q-success) !important;
  border: 1px solid var(--q-success);
}
html.theme-variant-forge .btn-success:hover {
  background-color: var(--q-success) !important;
  color: var(--q-success-text, #ffffff) !important;
}
html.theme-variant-gold .btn,
html.theme-variant-gold .bob-react-tab,
html.theme-variant-gold .q-tab,
html.theme-variant-gold .q-pagination-btn,
html.theme-variant-gold .bob-react-panel,
html.theme-variant-gold .q-card,
html.theme-variant-gold .q-modal-content {
  border: 1px solid var(--q-border-color);
  box-shadow: none;
  border-radius: 4px;
}
html.theme-variant-gold .q-input-wrapper {
  background-color: var(--q-bg-sunken) !important;
  border: 1px solid var(--q-border-color);
  border-radius: 4px;
}
html.theme-variant-gold .q-input-wrapper:focus-within {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
}
html.theme-variant-gold .q-input:not(.portal-field-input),
html.theme-variant-gold input:not(.portal-field-input) {
  background-color: transparent !important;
  color: var(--q-text-base) !important;
}

/* src/ThemeDesigner.css */
.bob-theme-designer {
  display: flex;
  flex-direction: column;
  gap: min(1.5rem, 4vw);
  padding: min(1.5rem, 4vw);
  background: var(--q-bg-subtle, #1e293b);
  color: var(--q-text-base, #f8fafc);
  border-radius: 1rem;
  width: 100%;
  max-width: min(850px, 95vw);
  margin: 0 auto;
  border: 1px solid var(--q-primary, #3b82f6);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.bob-theme-designer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bob-theme-designer-header h2 {
  margin: 0;
  font-size: 1.5rem;
}
.bob-theme-designer-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
  line-height: 1;
}
.bob-theme-designer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: min(2rem, 5vw);
}
.bob-theme-designer-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bob-theme-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.bob-theme-input {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--q-border-color, #444);
  background: var(--q-bg-base, #0f172a);
  color: var(--q-text-base, #ffffff);
  font-family: inherit;
}
select.bob-theme-input {
  appearance: auto;
  cursor: pointer;
}
select.bob-theme-input option {
  background: var(--q-bg-base, #0f172a);
  color: var(--q-text-base, #ffffff);
}
.bob-theme-input-row {
  display: flex;
  gap: 1rem;
}
.bob-theme-icon-input {
  width: 80px;
}
.bob-theme-icon-input input {
  text-align: center;
}
.bob-theme-colors-scroll {
  flex: 1;
  overflow-y: clip;
  margin-top: 1rem;
  padding-right: 0.5rem;
  max-height: 350px;
}
.bob-theme-colors-section {
  margin-bottom: 1.5rem;
}
.bob-theme-colors-section h4 {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--q-border-color, #444);
  padding-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--q-primary, #3b82f6);
}
.bob-theme-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.bob-theme-color-label {
  font-size: 0.75rem;
  opacity: 0.8;
  text-transform: capitalize;
}
.bob-theme-color-input {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 36px;
  height: 24px;
}
.bob-theme-typography-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.bob-theme-typography-row .bob-theme-input {
  padding: 0.4rem;
  font-size: 0.8rem;
}
.bob-theme-designer-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--q-border-color, #333);
}
.bob-btn-publish {
  flex: 1;
  padding: 0.75rem;
  background: var(--q-success, #22c55e);
  color: var(--q-success-text, #ffffff);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}
.bob-btn-download {
  flex: 1;
  padding: 0.75rem;
  background: var(--q-primary, #3b82f6);
  color: var(--q-primary-text, #ffffff);
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}
[data-theme=theme-moonlit] .bob-btn-publish,
[data-theme=theme-moonlit] .bob-btn-download {
  color: var(--q-bg-base);
}
.bob-btn-publish:hover,
.bob-btn-download:hover {
  opacity: 0.9;
}
.bob-theme-preview-panel {
  padding: 1.5rem;
  background: var(--q-bg-base, #0a0a0c);
  border-radius: 0.75rem;
  border: 1px solid var(--q-border-color, #333);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 450px;
  overflow-y: auto;
}
.bob-theme-preview-panel h4 {
  color: var(--q-text-base);
  margin: 0;
  font-size: 0.95rem;
}
.bob-theme-preview-card {
  background: var(--q-bg-subtle);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
}
.bob-theme-preview-text {
  color: var(--q-text-readonly);
  font-size: 0.85rem;
}
.bob-theme-preview-btn {
  background: var(--q-primary);
  color: var(--q-primary-text, #ffffff);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  font-weight: 600;
  width: 100%;
  margin-top: 1rem;
}
.bob-theme-preview-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.5rem;
}
.bob-theme-preview-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.bob-theme-preview-btn-grid button.bob-btn {
  width: 100%;
}
.bob-theme-color-swatches {
  display: flex;
  gap: 0.5rem;
}
.bob-theme-swatch {
  flex: 1;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent, #000000);
  font-size: 0.65rem;
  font-weight: 600;
}
.bob-theme-swatch-primary {
  background: var(--q-primary);
  color: white;
}
.bob-theme-swatch-secondary {
  background: var(--q-secondary);
  color: white;
}
.bob-theme-swatch-success {
  background: var(--q-success);
  color: white;
}
.bob-theme-swatch-danger {
  background: var(--q-danger);
  color: white;
}
.bob-theme-preview-footer {
  font-size: 0.8rem;
  opacity: 0.8;
}
.bob-theme-settings-panel {
  padding: var(--q-gap, 8px);
  height: auto;
}
.bob-theme-settings-section {
  margin-bottom: 16px;
}
.bob-panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.bob-panel-section-title {
  display: block;
  margin: 16px 0 8px 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--q-primary);
}
.bob-theme-designer-footer {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 1rem;
  text-align: center;
}
.q-theme-structural-selector button.btn.q-selected {
  background-color: var(--q-primary);
  border-color: var(--q-primary);
  color: var(--q-primary-text, #ffffff);
}
.q-theme-structural-selector button.btn.q-selected i {
  color: var(--q-primary-text, #ffffff);
}
.q-theme-structural-selector button.btn.q-selected:hover i {
  color: var(--q-bg-base);
}
.q-theme-structural-selector button.btn:not(.q-selected):hover {
  background-color: var(--q-primary);
  color: var(--q-primary-text, #ffffff);
  opacity: 0.8;
}
.q-theme-structural-selector button.btn:not(.q-selected):hover i {
  color: var(--q-primary-text, #ffffff);
}
.bob-theme-accents-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* src/VariantDesigner.css */
.bob-variant-designer {
  display: flex;
  flex-direction: column;
  gap: min(1.5rem, 4vw);
  padding: min(1.5rem, 4vw);
  background: var(--q-bg-subtle, #1e293b);
  color: var(--q-text-base, #f8fafc);
  border-radius: 1rem;
  width: 100%;
  max-width: min(850px, 95vw);
  margin: 0 auto;
  border: 1px solid var(--q-primary, #3b82f6);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.bob-variant-designer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bob-variant-designer-header h2 {
  margin: 0;
  font-size: 1.5rem;
}
.bob-variant-designer-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  padding: 0.5rem;
  line-height: 1;
}
.theme-light .bob-variant-designer-close {
  color: var(--q-secondary);
}
.bob-variant-designer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: min(2rem, 5vw);
  align-items: start;
}
.bob-variant-designer-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bob-variant-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.bob-vd-dark-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.bob-vd-dark-toggle-row .bob-label {
  margin: 0;
}
.bob-variant-input {
  width: 100%;
  padding: 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid var(--q-border-color, #444);
  background: var(--q-bg-base, #0f172a);
  color: var(--q-text-base, #ffffff);
  font-family: inherit;
}
select.bob-variant-input {
  appearance: auto;
  cursor: pointer;
}
select.bob-variant-input option {
  background: var(--q-bg-base, #0f172a);
  color: var(--q-text-base, #ffffff);
}
.bob-variant-input-row {
  display: flex;
  gap: 1rem;
}
.bob-variant-icon-input {
  width: 80px;
}
.bob-variant-icon-input input {
  text-align: center;
}
.bob-variant-colors-scroll {
  flex: 1;
  overflow-y: auto;
  margin-top: 1rem;
  padding-right: 0.5rem;
  max-height: 480px;
}
.bob-variant-colors-section {
  margin-bottom: 1.5rem;
}
.bob-variant-colors-section h4 {
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--q-border-color, #444);
  padding-bottom: 0.25rem;
  font-size: 0.9rem;
  color: var(--q-primary, #3b82f6);
}
.bob-variant-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.bob-variant-color-label {
  font-size: 0.75rem;
  opacity: 0.8;
  text-transform: capitalize;
}
.bob-variant-color-input {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 36px;
  height: 24px;
}
.bob-validation-icon::before {
  content: var(--bob-icon-content);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.bob-variant-typography-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.bob-vd-typography-input-size {
  width: 80px;
}
.bob-variant-typography-group .bob-variant-input {
  padding: 0.4rem;
  font-size: 0.8rem;
}
.bob-variant-preview-input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid var(--q-border-color);
  background: var(--q-bg-base);
  color: var(--q-text-base);
  font-size: var(--q-font-size-text, 0.9rem);
}
.bob-btn-reset {
  background: transparent;
  color: var(--q-danger);
  border: 1px solid var(--q-danger);
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: opacity 0.2s;
}
.bob-btn-reset:hover {
  opacity: 0.8;
}
.bob-variant-designer-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--q-border-color, #333);
}
.bob-btn-publish,
.bob-btn-download {
  flex: 1;
  padding: 0.75rem;
  background: transparent;
  color: var(--q-primary);
  border: 1px solid var(--q-primary);
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}
.theme-light .bob-btn-publish,
.theme-light .bob-btn-download {
  color: var(--q-secondary);
  border-color: var(--q-secondary);
}
[data-theme=theme-moonlit] .bob-btn-publish,
[data-theme=theme-moonlit] .bob-btn-download {
  color: var(--q-bg-base);
}
.bob-btn-publish:hover,
.bob-btn-download:hover {
  opacity: 0.9;
}
.bob-variant-preview-panel {
  padding: 1.25rem;
  background: var(--q-bg-base, #0a0a0c);
  border-radius: 0.75rem;
  border: 1px solid var(--q-border-color, #333);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}
.bob-vd-preview-heading {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--q-text-base);
  border-bottom: 1px solid var(--q-border-color, #333);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}
.bob-vd-preview-heading span {
  opacity: 0.6;
  font-weight: 400;
}
.bob-vd-preview-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bob-vd-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--q-primary, #3b82f6);
  font-weight: 600;
}
.bob-vd-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1.5rem;
}
.bob-vd-validation-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--q-bg-sunken);
  border-radius: 4px;
}
.bob-vd-btn {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.bob-vd-btn:hover {
  opacity: 0.85;
}
.bob-vd-input-card {
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bob-vd-text-sample {
  margin: 0;
  font-size: 0.82rem;
}
.bob-vd-input-sample {
  width: 100%;
  padding: 5px 8px;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  font-size: 0.82rem;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
}
.bob-vd-surface-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 1.5rem;
}
.bob-vd-surface-tile {
  border-radius: 4px;
  padding: 8px 6px;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
}
.bob-vd-status-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bob-vd-status-badge {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.bob-vd-icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bob-vd-checkbox-demo {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border-width: 2px;
  border-style: solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--q-primary);
  border-color: var(--q-primary);
}
.bob-vd-checkbox-tick {
  color: var(--q-checkbox-tick-color, #fff);
  font-size: 10px;
  font-weight: 900;
}
.bob-vd-checkbox-label {
  color: var(--q-text-base);
  font-size: 0.78rem;
}
.bob-vd-icon-row i {
  color: var(--q-icon-color, #888);
  font-size: 1.1rem;
}
.bob-vd-preview-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bob-vd-preview-content h1 {
  color: var(--q-color-heading, var(--q-text-base));
  font-size: var(--q-font-size-heading, 1.8rem);
  margin: 0;
}
.bob-vd-preview-content .bob-label {
  color: var(--q-color-label, var(--q-primary));
  font-size: var(--q-font-size-label, 0.85rem);
}
.bob-vd-preview-content .bob-description {
  color: var(--q-color-text, var(--q-text-base));
  font-size: var(--q-font-size-text, 0.95rem);
}
.bob-vd-input-card {
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
}
.bob-vd-text-sample.primary {
  color: var(--q-text-base);
  font-weight: 600;
}
.bob-vd-text-sample.readonly {
  color: var(--q-text-readonly);
  font-style: italic;
}
.bob-vd-input-sample {
  background: var(--q-bg-base);
  border-color: var(--q-border-color);
  color: var(--q-text-edit);
}
.bob-vd-tile-base {
  background: var(--q-bg-base);
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
}
.bob-vd-tile-subtle {
  background: var(--q-bg-subtle);
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
}
.bob-vd-tile-hover {
  background: var(--q-bg-hover);
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
}
.bob-vd-tile-dropdown {
  background: var(--q-bg-dropdown);
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
}
.bob-vd-tile-border {
  background: var(--q-bg-base);
  border: 3px solid var(--q-border-color);
  color: var(--q-text-base);
}
.bob-vd-tile-primary {
  background: var(--q-primary);
  color: var(--q-primary-text, #fff);
}
.bob-vd-tile-secondary {
  background: var(--q-secondary);
  color: var(--q-secondary-text, #fff);
}
.bob-vd-status-success {
  background: var(--q-success);
  color: var(--q-success-text, #fff);
}
.bob-vd-status-danger {
  background: var(--q-danger);
  color: var(--q-danger-text, #fff);
}
.bob-vd-status-warning {
  background: var(--q-warning);
  color: #222;
}
.bob-variant-designer-footer {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 1rem;
  text-align: center;
}
.bob-variant-preview-panel h4 {
  color: var(--q-text-base);
  margin: 0;
  font-size: 0.95rem;
}
.bob-variant-preview-card {
  background: var(--q-bg-subtle);
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--q-border-color);
  color: var(--q-text-base);
}
.bob-variant-preview-text {
  color: var(--q-text-readonly);
  font-size: 0.85rem;
}
.bob-variant-preview-btn {
  background: var(--q-primary);
  color: var(--q-primary-text, #ffffff);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  font-weight: 600;
  width: 100%;
  margin-top: 1rem;
}
.bob-variant-preview-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.5rem;
}
.bob-variant-preview-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.bob-variant-preview-btn-grid button.bob-btn {
  width: 100%;
}
.bob-variant-color-swatches {
  display: flex;
  gap: 0.5rem;
}
.bob-variant-swatch {
  flex: 1;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-accent, #000000);
  font-size: 0.65rem;
  font-weight: 600;
}
.bob-variant-designer-footer {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 1rem;
  text-align: center;
}
#q-global-variant-edit:hover {
  background-color: var(--q-primary);
  color: var(--q-bg-base);
}
#q-global-variant-edit:hover i {
  color: var(--q-bg-base);
}
/* 
 * GOLD Structural Theme
 * 
 * DESIGN PHILOSOPHY:
 * - Premium, elegant, high-contrast.
 * - Based on 'Forge' structure but with luxury flourishes.
 * - Sharp borders with gold accents.
 *
 * SPECIFICITY STRATEGY:
 * - No !important is used anywhere in this file.
 * - Higher specificity is achieved by chaining html element + theme class + body + component class.
 * - For inputs: the long :not() attribute chain already provides very high specificity.
 */

html.theme-variant-gold {
    --q-border-radius: 4px;
    --q-font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    --q-spacer: 1rem;
    --q-btn-disabled-opacity: 0.35;

    /* Map universal bob UI variables to q theme variables */
    --bob-primary: var(--q-primary);
    --bob-secondary: var(--q-secondary);
    --bob-bg-base: var(--q-bg-base);
    --bob-bg-surface: var(--q-bg-surface);
    --bob-text-main: var(--q-text-base);
    --bob-text-muted: var(--q-text-muted);
    --bob-border: var(--q-border-color);
    --bob-radius: var(--q-border-radius);
    --bob-error: var(--q-error);
    --bob-success: var(--q-success);
    --bob-border-light: rgba(197, 160, 89, 0.15);
    --bob-bg-surface-hover: rgba(197, 160, 89, 0.05);

    /* Map bob auth context variables */
    --bob-auth-bg-primary: var(--q-bg-sunken);
    --bob-auth-bg-secondary: var(--q-bg-surface);
    --bob-auth-accent-primary: var(--q-primary);
    --bob-auth-text-primary: var(--q-text-base);
    --bob-auth-text-secondary: var(--q-text-muted);
    --bob-auth-border: var(--q-border-color);
}

html.theme-variant-gold body,
html.theme-variant-gold input,
html.theme-variant-gold select,
html.theme-variant-gold textarea,
html.theme-variant-gold button {
    font-family: var(--q-font-family);
    line-height: 1.5;
}

/* Surfaces */
html.theme-variant-gold .bob-react-panel,
html.theme-variant-gold .q-card,
html.theme-variant-gold .q-modal-content {
    background-color: var(--q-bg-surface);
    border: 1px solid var(--q-border-color);
    border-radius: var(--q-border-radius);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* Interactive Elements */
html.theme-variant-gold body .btn,
html.theme-variant-gold .q-input-wrapper,
html.theme-variant-gold .q-select-wrapper,
html.theme-variant-gold .q-checkbox-wrapper {
    border: 1px solid var(--q-border-color);
    border-radius: var(--q-border-radius);
    transition: all 0.2s ease;
}

html.theme-variant-gold .q-input-wrapper:focus-within {
    border-color: var(--q-primary);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
}

/* Buttons — html + body + .btn chains give specificity (0,2,1) beating single-class rules */
html.theme-variant-gold body button.btn,
html.theme-variant-gold body a.btn,
html.theme-variant-gold body div.btn {
    background-color: var(--q-btn-bg, rgba(197, 160, 89, 0.1));
    color: var(--q-btn-text, var(--gold));
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.2s ease;
}

html.theme-variant-gold body button.btn.btn-primary,
html.theme-variant-gold body button.btn.btn-is-primary {
    background-color: var(--q-btn-primary-bg, var(--q-btn-bg));
    color: var(--q-btn-primary-text, var(--q-btn-text));
    border: 1px solid var(--q-btn-primary-border, var(--q-primary));
}

html.theme-variant-gold body button.btn.btn-primary:hover,
html.theme-variant-gold body button.btn.btn-is-primary:hover {
    background-color: var(--q-btn-primary-hover-bg, rgba(197, 160, 89, 0.2));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--q-btn-shadow, rgba(197, 160, 89, 0.1));
}

html.theme-variant-gold body button.btn.btn-secondary {
    background-color: var(--q-btn-secondary-bg, var(--q-btn-bg));
    color: var(--q-btn-secondary-text, var(--q-btn-text));
    border: 1px solid var(--q-btn-secondary-border, var(--q-secondary));
}

html.theme-variant-gold body button.btn.btn-secondary:hover {
    background-color: var(--q-btn-secondary-hover-bg, rgba(197, 160, 89, 0.2));
    border-color: var(--q-btn-secondary-hover-border, var(--q-secondary));
}

html.theme-variant-gold body button.btn.btn-danger {
    background-color: var(--q-btn-danger-bg, var(--q-btn-bg));
    color: var(--q-btn-danger-text, var(--q-danger));
    border: 1px solid var(--q-btn-danger-border, var(--q-danger));
}

html.theme-variant-gold body button.btn.btn-success {
    background-color: var(--q-btn-success-bg, var(--q-btn-bg));
    color: var(--q-btn-success-text, var(--q-success));
    border: 1px solid var(--q-btn-success-border, var(--q-success));
}

/* Ghost variant in gold theme — uses --bg-cream instead of gold tint (LIGHT MODE ONLY) */
html.theme-light.theme-variant-gold body button.btn.btn-ghost {
    background-color: var(--bg-cream);
    border: 1px solid var(--gold);
    color: var(--q-btn-text, var(--gold));
}

html.theme-light.theme-variant-gold body button.btn.btn-ghost:hover {
    background-color: var(--bg-white);
    border-color: var(--gold);
}

/* Inputs - FIX FOR WHITE SQUARES & UNIFY INPUT STYLING FOR GOLD THEME
   The .q-input selector inside the wrapper context gives sufficient specificity */
html.theme-variant-gold .q-input-wrapper > .q-input,
html.theme-variant-gold .q-input-wrapper .q-input {
    background-color: var(--q-bg-sunken, #090908);
    color: var(--q-text-base);
    border: none;
    outline: none;
}

html.theme-variant-gold div.q-input-wrapper {
    background-color: var(--q-bg-sunken);
}

/* Global rule to make all text-like inputs match the luxury field specifications.
   The long :not() attribute selector chain already scores very high specificity naturally. */
html.theme-variant-gold body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="image"]),
html.theme-variant-gold body select {
    height: var(--q-input-height, 1.6875rem);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--q-padding-base, 0.75rem);
    padding-right: var(--q-padding-base, 0.75rem);
    border-radius: var(--q-border-radius, 4px);
    border: 1px solid var(--q-border-color, rgba(245, 242, 237, 0.1));
    background-color: var(--q-bg-sunken, #090908);
    font-size: var(--q-font-size-base, 11px);
    color: var(--q-text-base);
    line-height: normal;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.theme-variant-gold body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="image"]):focus,
html.theme-variant-gold body select:focus {
    border-color: var(--q-primary, #c5a059);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
    outline: none;
}

/* Checkbox fix — element + parent chain */
html.theme-variant-gold span.q-check-icon,
html.theme-variant-gold i.q-check-icon,
html.theme-variant-gold .q-checkbox-wrapper .q-check-icon {
    color: var(--q-primary);
}

/* BobBoxChoiceKeys override for Gold Theme to match field height and borders */
html.theme-variant-gold body div.q-choice-keys-wrapper {
    height: var(--q-input-height, 1.6875rem);
    min-height: var(--q-input-height, 1.6875rem);
    padding: 2px;
    border-radius: var(--q-border-radius, 4px);
    border: 1px solid var(--q-border-color, rgba(245, 242, 237, 0.1));
    background-color: var(--q-bg-sunken, #090908);
    align-items: center;
    box-sizing: border-box;
}

html.theme-variant-gold body div.q-choice-keys-wrapper button.q-choice-key-btn {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: calc(var(--q-border-radius, 4px) - 2px);
    font-size: var(--q-font-size-base, 11px);
    line-height: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Disabled & Loading state styling for Gold Theme
   element + class + pseudo-class chains provide specificity without !important */
html.theme-variant-gold body button.btn:disabled:not(.btn-loading) {
    opacity: var(--q-btn-disabled-opacity, 0.35);
}

html.theme-variant-gold body button.btn.btn-loading {
    opacity: var(--q-btn-loading-opacity, 0.7);
}

/* Table & repeating group overrides for Gold Theme */
html.theme-variant-gold .bob-table-col-header {
    color: var(--q-text-base);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

html.theme-variant-gold .bob-repeating-group-row,
html.theme-variant-gold .bob-table-group-row {
    border-bottom-color: rgba(197, 160, 89, 0.15);
}

/* Auth Form Gold Overrides */
html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper,
html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper > .q-input,
html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper .q-input {
    background-color: #ffffff !important;
    color: #1a1a18 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input::placeholder {
    color: rgba(0, 0, 0, 0.45) !important;
    opacity: 0.7 !important;
}

html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill,
html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:hover,
html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:focus,
html.theme-light.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:active {
    -webkit-text-fill-color: #1a1a18 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    box-shadow: 0 0 0px 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Dark Mode Overrides (default for dark theme) */
html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper,
html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper > .q-input,
html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper .q-input,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper > .q-input,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper .q-input {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #f5f2ed !important;
    border-color: rgba(197, 160, 89, 0.3) !important;
}

html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input::placeholder,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input::placeholder {
    color: rgba(245, 242, 237, 0.5) !important;
    opacity: 0.8 !important;
}

html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill,
html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:hover,
html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:focus,
html:not(.theme-light).theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:active,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:hover,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:focus,
html.theme-dark.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f5f2ed !important;
    -webkit-box-shadow: 0 0 0px 1000px #121210 inset !important;
    box-shadow: 0 0 0px 1000px #121210 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

html.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"],
html.theme-variant-gold div.bob-auth-header-content[title="auth-header-content"] {
    background-color: rgba(18, 18, 16, 0.85) !important;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
    color: #f5f2ed !important;
}

html.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .bob-label,
html.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] label,
html.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .bob-auth-field-label {
    color: #f5f2ed !important;
}

html.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] a.bob-auth-forgot-link,
html.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .bob-auth-forgot-link,
html.theme-variant-gold div.bob-auth-form-content[title="auth-form-content"] .bob-box-link {
    color: #c5a059 !important;
}


html.theme-variant-gold .bob-auth-split-right {
    /* Kept transparent because .bob-auth-form-content will hold the background */
    background-color: transparent;
}
/* Gold Day Theme Color Variant - Light Luxury */
html.theme-light.theme-variant-gold {
  /* Internal Variables */
  --gold: #c5a059;
  
  --bg-white: #f5f2ed;
  --bg-cream: #ffffff;
  --bg-sunken: #ede9e1;
  
  --text-main: #1a1a1a;
  --text-dim: #666666;
  
  --border-subtle: rgba(26, 26, 26, 0.08);

  /* Qiiqa Mappings */
  --q-primary: var(--gold);
  --q-primary-text: #1a1a1a; /* Dark charcoal text for contrast on gold button */
  
  --q-secondary: #1a1a1a;
  --q-secondary-text: #ffffff;

  --q-bg-base: var(--bg-cream);
  --q-bg-surface: var(--bg-white);
  --q-bg-subtle: var(--bg-white);
  --q-bg-sunken: var(--bg-sunken);
  --q-bg-hover: rgba(197, 160, 89, 0.05);
  --q-bg-dropdown: var(--bg-white);

  --q-text-base: var(--text-main);
  --q-text-muted: var(--text-dim);
  --q-text-edit: var(--text-main); /* Input text should be main text, not gold */
  --q-text-readonly: var(--q-text-muted);
  
  --q-border-color: var(--border-subtle);

  /* Button Variables */
  --q-btn-bg: rgba(197, 160, 89, 0.05);
  --q-btn-text: #5c4f3c; /* Dark readable gold/brown */
  --q-btn-shadow: rgba(197, 160, 89, 0.05);

  --q-btn-primary-bg: var(--q-primary);
  --q-btn-primary-text: var(--q-primary-text);
  --q-btn-primary-border: var(--q-primary);
  --q-btn-primary-hover-bg: #b48e47;

  --q-btn-secondary-bg: rgba(197, 160, 89, 0.05);
  --q-btn-secondary-text: #5c4f3c; /* Dark gold/brown */
  --q-btn-secondary-border: var(--gold);
  --q-btn-secondary-hover-bg: rgba(197, 160, 89, 0.1);

  --q-btn-danger-bg: rgba(239, 68, 68, 0.05);
  --q-btn-danger-text: #d92727;
  --q-btn-danger-border: #ef4444;

  --q-btn-success-bg: rgba(34, 197, 94, 0.05);
  --q-btn-success-text: #1b873f;
  --q-btn-success-border: #22c55e;

  --q-btn-disabled-opacity: 0.3;

  /* Status Color Adjustments */
  --status-orange: #c2410c; /* dark orange */
}
/* Gold Night Theme Color Variant - Dark Luxury */
html.theme-dark.theme-variant-gold {
  /* Internal Variables */
  --gold: #c5a059;
  --gold-muted: #8a6d3b;
  
  --bg-deep: #0f0f0e;
  --bg-panel: #1a1a18;
  --bg-sunken: #090908;
  
  --text-main: #f5f2ed;
  --text-dim: #a1a1aa;
  
  --border-subtle: rgba(245, 242, 237, 0.1);
  --border-strong: rgba(197, 160, 89, 0.3);

  /* Qiiqa Mappings */
  --q-primary: var(--gold);
  --q-primary-hover: #d4b375;
  --q-primary-text: #000000;
  
  --q-secondary: #ffffff;
  --q-secondary-text: #000000;

  --q-bg-base: var(--bg-deep);
  --q-bg-surface: var(--bg-panel);
  --q-bg-subtle: var(--bg-panel);
  --q-bg-sunken: var(--bg-sunken);
  --q-bg-hover: rgba(197, 160, 89, 0.1);
  --q-bg-dropdown: var(--bg-panel);

  --q-text-base: var(--text-main);
  --q-text-muted: var(--text-dim);
  --q-text-edit: var(--q-primary);
  --q-text-readonly: var(--q-text-muted);
  
  --q-border-color: var(--border-subtle);
  --q-border-active: var(--gold);

  --q-error: #ef4444;
  --q-success: #22c55e;

  /* Button Variables */
  --q-btn-bg: rgba(197, 160, 89, 0.1);
  --q-btn-text: var(--gold);
  --q-btn-shadow: rgba(197, 160, 89, 0.1);
  
  --q-btn-primary-bg: var(--q-primary);
  --q-btn-primary-text: var(--q-primary-text);
  --q-btn-primary-border: var(--q-primary);
  --q-btn-primary-hover-bg: #d4b375;

  --q-btn-secondary-bg: var(--q-btn-bg);
  --q-btn-secondary-text: var(--q-btn-text);
  --q-btn-secondary-border: var(--q-secondary);
  --q-btn-secondary-hover-bg: rgba(197, 160, 89, 0.2);

  --q-btn-danger-bg: var(--q-btn-bg);
  --q-btn-danger-text: var(--q-danger);
  --q-btn-danger-border: var(--q-danger);

  --q-btn-success-bg: var(--q-btn-bg);
  --q-btn-success-text: var(--q-success);
  --q-btn-success-border: var(--q-success);

  --q-btn-disabled-opacity: 0.15;

  /* Status Color Adjustments */
  --status-orange: #ff9f43; /* bright orange */
}
/* 
 * GOLD Structural Theme
 * 
 * DESIGN PHILOSOPHY:
 * - Premium, elegant, high-contrast.
 * - Based on 'Forge' structure but with luxury flourishes.
 * - Sharp borders with gold accents.
 *
 * SPECIFICITY STRATEGY:
 * - No !important is used anywhere in this file.
 * - Higher specificity is achieved by chaining html element + theme class + body + component class.
 * - For inputs: the long :not() attribute chain already provides very high specificity.
 */

html.theme-variant-moonlit {
    --q-border-radius: 4px;
    --q-font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
    --q-spacer: 1rem;
    --q-btn-disabled-opacity: 0.35;

    /* Map universal bob UI variables to q theme variables */
    --bob-primary: var(--q-primary);
    --bob-secondary: var(--q-secondary);
    --bob-bg-base: var(--q-bg-base);
    --bob-bg-surface: var(--q-bg-surface);
    --bob-text-main: var(--q-text-base);
    --bob-text-muted: var(--q-text-muted);
    --bob-border: var(--q-border-color);
    --bob-radius: var(--q-border-radius);
    --bob-error: var(--q-error);
    --bob-success: var(--q-success);
    --bob-border-light: rgba(197, 160, 89, 0.15);
    --bob-bg-surface-hover: rgba(197, 160, 89, 0.05);

    /* Map bob auth context variables */
    --bob-auth-bg-primary: var(--q-bg-sunken);
    --bob-auth-bg-secondary: var(--q-bg-surface);
    --bob-auth-accent-primary: var(--q-primary);
    --bob-auth-text-primary: var(--q-text-base);
    --bob-auth-text-secondary: var(--q-text-muted);
    --bob-auth-border: var(--q-border-color);
}

html.theme-variant-moonlit body,
html.theme-variant-moonlit input,
html.theme-variant-moonlit select,
html.theme-variant-moonlit textarea,
html.theme-variant-moonlit button {
    font-family: var(--q-font-family);
    line-height: 1.5;
}

/* Surfaces */
html.theme-variant-moonlit .bob-react-panel,
html.theme-variant-moonlit .q-card,
html.theme-variant-moonlit .q-modal-content {
    background-color: var(--q-bg-surface);
    border: 1px solid var(--q-border-color);
    border-radius: var(--q-border-radius);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* Interactive Elements */
html.theme-variant-moonlit body .btn,
html.theme-variant-moonlit .q-input-wrapper,
html.theme-variant-moonlit .q-select-wrapper,
html.theme-variant-moonlit .q-checkbox-wrapper {
    border: 1px solid var(--q-border-color);
    border-radius: var(--q-border-radius);
    transition: all 0.2s ease;
}

html.theme-variant-moonlit .q-input-wrapper:focus-within {
    border-color: var(--q-primary);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
}

/* Buttons — html + body + .btn chains give specificity (0,2,1) beating single-class rules */
html.theme-variant-moonlit body button.btn,
html.theme-variant-moonlit body a.btn,
html.theme-variant-moonlit body div.btn {
    background-color: var(--q-btn-bg, rgba(197, 160, 89, 0.1));
    color: var(--q-btn-text, var(--gold));
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.2s ease;
}

html.theme-variant-moonlit body button.btn.btn-primary,
html.theme-variant-moonlit body button.btn.btn-is-primary {
    background-color: var(--q-btn-primary-bg, var(--q-btn-bg));
    color: var(--q-btn-primary-text, var(--q-btn-text));
    border: 1px solid var(--q-btn-primary-border, var(--q-primary));
}

html.theme-variant-moonlit body button.btn.btn-primary:hover,
html.theme-variant-moonlit body button.btn.btn-is-primary:hover {
    background-color: var(--q-btn-primary-hover-bg, rgba(197, 160, 89, 0.2));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--q-btn-shadow, rgba(197, 160, 89, 0.1));
}

html.theme-variant-moonlit body button.btn.btn-secondary {
    background-color: var(--q-btn-secondary-bg, var(--q-btn-bg));
    color: var(--q-btn-secondary-text, var(--q-btn-text));
    border: 1px solid var(--q-btn-secondary-border, var(--q-secondary));
}

html.theme-variant-moonlit body button.btn.btn-secondary:hover {
    background-color: var(--q-btn-secondary-hover-bg, rgba(197, 160, 89, 0.2));
    border-color: var(--q-btn-secondary-hover-border, var(--q-secondary));
}

html.theme-variant-moonlit body button.btn.btn-danger {
    background-color: var(--q-btn-danger-bg, var(--q-btn-bg));
    color: var(--q-btn-danger-text, var(--q-danger));
    border: 1px solid var(--q-btn-danger-border, var(--q-danger));
}

html.theme-variant-moonlit body button.btn.btn-success {
    background-color: var(--q-btn-success-bg, var(--q-btn-bg));
    color: var(--q-btn-success-text, var(--q-success));
    border: 1px solid var(--q-btn-success-border, var(--q-success));
}

/* Ghost variant in gold theme — uses --bg-cream instead of gold tint (LIGHT MODE ONLY) */
html.theme-light.theme-variant-moonlit body button.btn.btn-ghost {
    background-color: var(--bg-cream);
    border: 1px solid var(--gold);
    color: var(--q-btn-text, var(--gold));
}

html.theme-light.theme-variant-moonlit body button.btn.btn-ghost:hover {
    background-color: var(--bg-white);
    border-color: var(--gold);
}

/* Inputs - FIX FOR WHITE SQUARES & UNIFY INPUT STYLING FOR GOLD THEME
   The .q-input selector inside the wrapper context gives sufficient specificity */
html.theme-variant-moonlit .q-input-wrapper > .q-input,
html.theme-variant-moonlit .q-input-wrapper .q-input {
    background-color: var(--q-bg-sunken, #090908);
    color: var(--q-text-base);
    border: none;
    outline: none;
}

html.theme-variant-moonlit div.q-input-wrapper {
    background-color: var(--q-bg-sunken);
}

/* Global rule to make all text-like inputs match the luxury field specifications.
   The long :not() attribute selector chain already scores very high specificity naturally. */
html.theme-variant-moonlit body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="image"]),
html.theme-variant-moonlit body select {
    height: var(--q-input-height, 1.6875rem);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--q-padding-base, 0.75rem);
    padding-right: var(--q-padding-base, 0.75rem);
    border-radius: var(--q-border-radius, 4px);
    border: 1px solid var(--q-border-color, rgba(245, 242, 237, 0.1));
    background-color: var(--q-bg-sunken, #090908);
    font-size: var(--q-font-size-base, 11px);
    color: var(--q-text-base);
    line-height: normal;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html.theme-variant-moonlit body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="image"]):focus,
html.theme-variant-moonlit body select:focus {
    border-color: var(--q-primary, #c5a059);
    box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
    outline: none;
}

/* Checkbox fix — element + parent chain */
html.theme-variant-moonlit span.q-check-icon,
html.theme-variant-moonlit i.q-check-icon,
html.theme-variant-moonlit .q-checkbox-wrapper .q-check-icon {
    color: var(--q-primary);
}

/* BobBoxChoiceKeys override for Gold Theme to match field height and borders */
html.theme-variant-moonlit body div.q-choice-keys-wrapper {
    height: var(--q-input-height, 1.6875rem);
    min-height: var(--q-input-height, 1.6875rem);
    padding: 2px;
    border-radius: var(--q-border-radius, 4px);
    border: 1px solid var(--q-border-color, rgba(245, 242, 237, 0.1));
    background-color: var(--q-bg-sunken, #090908);
    align-items: center;
    box-sizing: border-box;
}

html.theme-variant-moonlit body div.q-choice-keys-wrapper button.q-choice-key-btn {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: calc(var(--q-border-radius, 4px) - 2px);
    font-size: var(--q-font-size-base, 11px);
    line-height: normal;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Disabled & Loading state styling for Gold Theme
   element + class + pseudo-class chains provide specificity without !important */
html.theme-variant-moonlit body button.btn:disabled:not(.btn-loading) {
    opacity: var(--q-btn-disabled-opacity, 0.35);
}

html.theme-variant-moonlit body button.btn.btn-loading {
    opacity: var(--q-btn-loading-opacity, 0.7);
}

/* Table & repeating group overrides for Gold Theme */
html.theme-variant-moonlit .bob-table-col-header {
    color: var(--q-text-base);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

html.theme-variant-moonlit .bob-repeating-group-row,
html.theme-variant-moonlit .bob-table-group-row {
    border-bottom-color: rgba(197, 160, 89, 0.15);
}

/* Auth Form Moonlit Overrides */
html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper,
html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper > .q-input,
html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper .q-input {
    background-color: #ffffff !important;
    color: #1a1a18 !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input::placeholder {
    color: rgba(0, 0, 0, 0.45) !important;
    opacity: 0.7 !important;
}

html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill,
html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:hover,
html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:focus,
html.theme-light.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:active {
    -webkit-text-fill-color: #1a1a18 !important;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    box-shadow: 0 0 0px 1000px #ffffff inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Dark Mode Overrides (default for dark theme) */
html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper,
html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper > .q-input,
html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper .q-input,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper > .q-input,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input-wrapper .q-input {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: #f5f2ed !important;
    border-color: rgba(197, 160, 89, 0.3) !important;
}

html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input::placeholder,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input::placeholder {
    color: rgba(245, 242, 237, 0.5) !important;
    opacity: 0.8 !important;
}

html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill,
html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:hover,
html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:focus,
html:not(.theme-light).theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:active,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:hover,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:focus,
html.theme-dark.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .q-input:-webkit-autofill:active {
    -webkit-text-fill-color: #f5f2ed !important;
    -webkit-box-shadow: 0 0 0px 1000px #121210 inset !important;
    box-shadow: 0 0 0px 1000px #121210 inset !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

html.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"],
html.theme-variant-moonlit div.bob-auth-header-content[title="auth-header-content"] {
    background: rgba(18, 18, 16, 0.85) !important;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
    color: #f5f2ed !important;
}

html.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .bob-label,
html.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] label,
html.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .bob-auth-field-label {
    color: #f5f2ed !important;
}

html.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] a.bob-auth-forgot-link,
html.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .bob-auth-forgot-link,
html.theme-variant-moonlit div.bob-auth-form-content[title="auth-form-content"] .bob-box-link {
    color: #c5a059 !important;
}


html.theme-variant-moonlit .bob-auth-split-right {
    /* Kept transparent because .bob-auth-form-content will hold the background */
    background-color: transparent;
}
/* Moonlit Day Theme Color Variant - Light Luxury */
html.theme-light.theme-variant-moonlit {
  /* Internal Variables */
  --gold: #c5a059;
  --gold-muted: #8a6d3b;
  
  --bg-deep: #ffffff;
  --bg-panel: #f5f2ed;
  --bg-sunken: #ede9e1;
  
  --text-main: #0f0f0e;
  --text-dim: #666666;
  
  --border-subtle: rgba(15, 15, 14, 0.1);
  --border-strong: rgba(197, 160, 89, 0.3);

  /* Qiiqa Mappings */
  --q-primary: var(--gold);
  --q-primary-hover: #b48e47;
  --q-primary-text: #ffffff;
  
  --q-secondary: #0f0f0e;
  --q-secondary-text: #ffffff;

  --q-bg-base: var(--bg-deep);
  --q-bg-surface: var(--bg-panel);
  --q-bg-subtle: var(--bg-panel);
  --q-bg-sunken: var(--bg-sunken);
  --q-bg-hover: rgba(197, 160, 89, 0.1);
  --q-bg-dropdown: var(--bg-panel);

  --q-text-base: var(--text-main);
  --q-text-muted: var(--text-dim);
  --q-text-edit: var(--q-primary);
  --q-text-readonly: var(--q-text-muted);
  
  --q-border-color: var(--border-subtle);
  --q-border-active: var(--gold);

  --q-error: #ef4444;
  --q-success: #22c55e;

  /* Button Variables */
  --q-btn-bg: rgba(197, 160, 89, 0.05);
  --q-btn-text: var(--gold);
  --q-btn-shadow: rgba(197, 160, 89, 0.05);
  
  --q-btn-primary-bg: var(--q-primary);
  --q-btn-primary-text: var(--q-primary-text);
  --q-btn-primary-border: var(--q-primary);
  --q-btn-primary-hover-bg: #b48e47;

  --q-btn-secondary-bg: var(--q-btn-bg);
  --q-btn-secondary-text: var(--q-btn-text);
  --q-btn-secondary-border: var(--q-secondary);
  --q-btn-secondary-hover-bg: rgba(197, 160, 89, 0.15);

  --q-btn-danger-bg: rgba(239, 68, 68, 0.05);
  --q-btn-danger-text: var(--q-error);
  --q-btn-danger-border: var(--q-error);

  --q-btn-success-bg: rgba(34, 197, 94, 0.05);
  --q-btn-success-text: var(--q-success);
  --q-btn-success-border: var(--q-success);

  --q-btn-disabled-opacity: 0.3;

  /* Status Color Adjustments */
  --status-orange: #c2410c; /* dark orange */
}
/* Gold Night Theme Color Variant - Dark Luxury */
html.theme-dark.theme-variant-moonlit {
  /* Internal Variables */
  --gold: #c5a059;
  --gold-muted: #8a6d3b;
  
  --bg-deep: #0f0f0e;
  --bg-panel: #1a1a18;
  --bg-sunken: #090908;
  
  --text-main: #f5f2ed;
  --text-dim: #a1a1aa;
  
  --border-subtle: rgba(245, 242, 237, 0.1);
  --border-strong: rgba(197, 160, 89, 0.3);

  /* Qiiqa Mappings */
  --q-primary: var(--gold);
  --q-primary-hover: #d4b375;
  --q-primary-text: #000000;
  
  --q-secondary: #ffffff;
  --q-secondary-text: #000000;

  --q-bg-base: var(--bg-deep);
  --q-bg-surface: var(--bg-panel);
  --q-bg-subtle: var(--bg-panel);
  --q-bg-sunken: var(--bg-sunken);
  --q-bg-hover: rgba(197, 160, 89, 0.1);
  --q-bg-dropdown: var(--bg-panel);

  --q-text-base: var(--text-main);
  --q-text-muted: var(--text-dim);
  --q-text-edit: var(--q-primary);
  --q-text-readonly: var(--q-text-muted);
  
  --q-border-color: var(--border-subtle);
  --q-border-active: var(--gold);

  --q-error: #ef4444;
  --q-success: #22c55e;

  /* Button Variables */
  --q-btn-bg: rgba(197, 160, 89, 0.1);
  --q-btn-text: var(--gold);
  --q-btn-shadow: rgba(197, 160, 89, 0.1);
  
  --q-btn-primary-bg: var(--q-primary);
  --q-btn-primary-text: var(--q-primary-text);
  --q-btn-primary-border: var(--q-primary);
  --q-btn-primary-hover-bg: #d4b375;

  --q-btn-secondary-bg: var(--q-btn-bg);
  --q-btn-secondary-text: var(--q-btn-text);
  --q-btn-secondary-border: var(--q-secondary);
  --q-btn-secondary-hover-bg: rgba(197, 160, 89, 0.2);

  --q-btn-danger-bg: var(--q-btn-bg);
  --q-btn-danger-text: var(--q-danger);
  --q-btn-danger-border: var(--q-danger);

  --q-btn-success-bg: var(--q-btn-bg);
  --q-btn-success-text: var(--q-success);
  --q-btn-success-border: var(--q-success);

  --q-btn-disabled-opacity: 0.15;

  /* Status Color Adjustments */
  --status-orange: #ff9f43; /* bright orange */
}