/**
 * TextShelf Component Library
 *
 * Modern component styles using the TextShelf Design System.
 * All styles use CSS custom properties from generated themes.
 */

/* ========================================
   RESET & BASE STYLES
   ======================================== */

* {
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--foreground);
  background-color: var(--background);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  /* Prevent pull-to-refresh conflicts on mobile */
  overscroll-behavior: contain;
}

/* ========================================
   MOBILE TOUCH TARGET ENHANCEMENTS
   Apple HIG: 44pt minimum, WCAG: 44px minimum
   ======================================== */

:root {
  --touch-target-min: 44px;
  --mobile-font-min: 16px;
  --mobile-spacing: 12px;
}

/* Mobile-specific button enhancements */
@media (max-width: 767px) {
  /* Ensure buttons meet touch target minimum */
  .btn,
  .btn-theme,
  button[type="submit"],
  button[type="button"] {
    min-height: var(--touch-target-min);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* Navigation links need adequate touch targets */
  .nav-link,
  .dropdown-item,
  .list-group-item a {
    min-height: var(--touch-target-min);
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  /* Form inputs - prevent iOS zoom on focus (requires 16px min) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: max(var(--mobile-font-min), 1rem);
    min-height: var(--touch-target-min);
  }

  /* Ensure adequate spacing between interactive elements */
  .btn + .btn,
  .btn + form,
  form + .btn {
    margin-top: var(--mobile-spacing);
  }

  .d-flex.gap-2 > .btn,
  .d-flex.gap-2 > form .btn {
    margin-top: 0; /* Reset when using flex gap */
  }
}

/* ========================================
   BUTTONS
   ======================================== */

.btn-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radii-2);
  font-size: var(--fontSize-1);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 150ms ease;
  white-space: nowrap;
}

.btn-theme:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.btn-theme:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary-theme {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary-theme:hover:not(:disabled) {
  background-color: var(--primary-hover);
}

.btn-secondary-theme {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-secondary-theme:hover:not(:disabled) {
  background-color: var(--secondary-hover);
}

.btn-destructive-theme {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.btn-destructive-theme:hover:not(:disabled) {
  background-color: var(--destructive-hover);
}

.btn-outline-theme {
  background-color: transparent;
  border: var(--borders-1) solid var(--border);
  color: var(--foreground);
}

.btn-outline-theme:hover:not(:disabled) {
  background-color: var(--muted);
}

.btn-ghost-theme {
  background-color: transparent;
  color: var(--foreground);
}

.btn-ghost-theme:hover:not(:disabled) {
  background-color: var(--muted);
}

/* Button sizes */
.btn-sm-theme {
  padding: var(--spacing-1) var(--spacing-3);
  font-size: var(--fontSize-0);
}

.btn-lg-theme {
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--fontSize-1);
}

/* Bootstrap button overrides for dark mode */

/* Base button - for buttons without color class */
.btn {
  background-color: var(--muted);
  color: var(--foreground);
  border-color: var(--border);
}

.btn:hover {
  background-color: var(--slate-6);
  color: var(--foreground);
  border-color: var(--border);
}

/* Bootstrap semantic color buttons */
.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

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

.btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--secondary);
}

.btn-secondary:hover {
  background-color: var(--secondary-hover);
  color: var(--secondary-foreground);
  border-color: var(--secondary-hover);
}

.btn-success {
  background-color: var(--success);
  color: var(--success-foreground);
  border-color: var(--success);
}

.btn-success:hover {
  background-color: var(--green-3);
  color: var(--success-foreground);
  border-color: var(--green-3);
}

.btn-danger {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}

.btn-danger:hover {
  background-color: var(--destructive-hover);
  color: var(--destructive-foreground);
  border-color: var(--destructive-hover);
}

.btn-warning {
  background-color: var(--warning);
  color: var(--warning-foreground);
  border-color: var(--warning);
}

.btn-warning:hover {
  background-color: var(--amber-3);
  color: var(--warning-foreground);
  border-color: var(--amber-3);
}

.btn-info {
  background-color: var(--info);
  color: var(--info-foreground);
  border-color: var(--info);
}

.btn-info:hover {
  background-color: var(--blue-3);
  color: var(--info-foreground);
  border-color: var(--blue-3);
}

.btn-light {
  background-color: var(--muted);
  color: var(--foreground);
  border-color: var(--border);
}

.btn-light:hover {
  background-color: var(--slate-7);
  color: var(--foreground);
  border-color: var(--border);
}

.btn-dark {
  background-color: var(--slate-2);
  color: var(--slate-9);
  border-color: var(--border);
}

.btn-dark:hover {
  background-color: var(--slate-3);
  color: var(--slate-9);
}

/* Outline buttons */
.btn-outline-primary {
  background-color: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.btn-outline-secondary {
  background-color: transparent;
  color: var(--foreground);
  border-color: var(--border);
}

.btn-outline-secondary:hover {
  background-color: var(--muted);
  color: var(--foreground);
  border-color: var(--border);
}

/* Custom button classes */
.btn-transparent {
  background-color: transparent;
  color: var(--foreground);
  border: none;
}

.btn-transparent:hover {
  background-color: var(--muted);
  color: var(--foreground);
}

/* ========================================
   CARDS
   ======================================== */

.card-theme {
  background-color: var(--card);
  color: var(--card-foreground);
  border: var(--borders-1) solid var(--border);
  border-radius: var(--radii-3);
  padding: var(--spacing-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease;
}

.card-theme:hover {
  box-shadow: var(--shadow-md);
}

.card-header-theme {
  font-size: var(--fontSize-2);
  font-weight: 600;
  margin-bottom: var(--spacing-3);
  padding-bottom: var(--spacing-2);
  border-bottom: var(--borders-1) solid var(--border);
}

.card-body-theme {
  padding: var(--spacing-3) 0;
}

.card-footer-theme {
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-2);
  border-top: var(--borders-1) solid var(--border);
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
}

/* ========================================
   FORMS
   ======================================== */

.form-group-theme {
  margin-bottom: var(--spacing-4);
}

.form-label-theme {
  display: block;
  font-size: var(--fontSize-1);
  font-weight: 500;
  margin-bottom: var(--spacing-1);
  color: var(--foreground);
}

.form-input-theme,
.form-textarea-theme,
.form-select-theme {
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--fontSize-1);
  line-height: 1.5;
  color: var(--foreground);
  background-color: var(--background);
  border: var(--borders-1) solid var(--input-border);
  border-radius: var(--radii-2);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input-theme:focus,
.form-textarea-theme:focus,
.form-select-theme:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form-input-theme::placeholder {
  color: var(--muted-foreground);
}

.form-textarea-theme {
  min-height: 120px;
  resize: vertical;
}

.form-error-theme {
  color: var(--destructive);
  font-size: var(--fontSize-0);
  margin-top: var(--spacing-1);
}

.form-help-theme {
  color: var(--muted-foreground);
  font-size: var(--fontSize-0);
  margin-top: var(--spacing-1);
}

/* Form validation states for theme inputs */
.form-input-theme.is-invalid,
.form-textarea-theme.is-invalid,
.form-select-theme.is-invalid {
  border-color: var(--destructive);
}

.form-input-theme.is-invalid:focus,
.form-textarea-theme.is-invalid:focus,
.form-select-theme.is-invalid:focus {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}

.form-input-theme.is-valid,
.form-textarea-theme.is-valid,
.form-select-theme.is-valid {
  border-color: var(--success);
}

.form-input-theme.is-valid:focus,
.form-textarea-theme.is-valid:focus,
.form-select-theme.is-valid:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
}

/* ========================================
   CHECKBOX & RADIO (Theme)
   ======================================== */

.form-check-theme {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

.form-check-input-theme {
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.125em;
  flex-shrink: 0;
  background-color: var(--background);
  border: 2px solid var(--input-border);
  border-radius: var(--radii-1);
  appearance: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.form-check-input-theme[type="radio"] {
  border-radius: 50%;
}

.form-check-input-theme:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

.form-check-input-theme:checked::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 100% 100%;
}

.form-check-input-theme[type="radio"]:checked::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input-theme:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form-check-input-theme:hover:not(:checked):not(:disabled) {
  border-color: var(--primary);
}

.form-check-input-theme:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-check-input-theme.is-invalid {
  border-color: var(--destructive);
}

.form-check-input-theme.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}

.form-check-input-theme.is-valid {
  border-color: var(--success);
}

.form-check-input-theme.is-valid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
}

.form-check-label-theme {
  font-size: var(--fontSize-1);
  color: var(--foreground);
  cursor: pointer;
  line-height: 1.5;
}

/* ========================================
   SELECT MULTIPLE (Theme)
   ======================================== */

.form-select-multiple-theme {
  height: auto;
  min-height: 8rem;
}

/* ========================================
   FILE INPUT (Theme)
   ======================================== */

.form-file-theme {
  display: block;
  width: 100%;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--fontSize-1);
  color: var(--foreground);
  background-color: var(--background);
  border: 2px solid var(--input-border);
  border-radius: var(--radii-2);
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-file-theme::file-selector-button {
  padding: var(--spacing-1) var(--spacing-3);
  margin-right: var(--spacing-3);
  font-size: var(--fontSize-1);
  color: var(--foreground);
  background-color: var(--muted);
  border: none;
  border-radius: var(--radii-1);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.form-file-theme::file-selector-button:hover {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.form-file-theme:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.form-file-theme.is-invalid {
  border-color: var(--destructive);
}

.form-file-theme.is-invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}

.form-file-theme.is-valid {
  border-color: var(--success);
}

.form-file-theme.is-valid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
}

/* Bootstrap overrides for dark mode compatibility */

/* Form controls */
.form-control,
.form-select {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--input-border);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent);
}

.form-control::placeholder {
  color: var(--muted-foreground);
}

.form-label {
  color: var(--foreground);
  font-weight: 500;
}

.form-text {
  color: var(--muted-foreground);
}

.invalid-feedback {
  color: var(--destructive);
}

.valid-feedback {
  color: var(--success);
}

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

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--destructive);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--destructive) 20%, transparent);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--success);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--success) 20%, transparent);
}

.input-group-text {
  background-color: var(--muted);
  color: var(--foreground);
  border-color: var(--input-border);
}

/* Dropdowns */
.dropdown-menu {
  background-color: var(--card);
  border-color: var(--border);
}

.dropdown-item {
  color: var(--foreground);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--muted);
  color: var(--foreground);
}

.dropdown-item.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* Background utilities */
.bg-light {
  background-color: var(--muted) !important;
}

/* Cards */
.card {
  background-color: var(--card);
  border-color: var(--border);
  color: var(--card-foreground);
}

.card-header,
.card-footer {
  background-color: var(--muted);
  border-color: var(--border);
}

.card-body {
  color: var(--foreground);
}

/* Modals */
.modal-content {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

.modal-header,
.modal-footer {
  border-color: var(--border);
}

/* Alerts */
.alert {
  border-color: var(--border);
}

/* List groups */
.list-group-item {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--border);
}

.list-group-item:hover {
  background-color: var(--muted);
}

.list-group-item.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

/* Trix Editor - Dark mode support */
trix-editor {
  background-color: var(--card);
  color: var(--foreground);
  border-color: var(--border) !important;
}

trix-toolbar .trix-button-group {
  border-color: var(--border) !important;
  border-top-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}

trix-toolbar .trix-button {
  color: var(--foreground) !important;
  border-bottom-color: var(--border) !important;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left-color: var(--border) !important;
}

trix-toolbar .trix-button.trix-active {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

trix-toolbar .trix-button:disabled {
  color: var(--muted-foreground) !important;
  opacity: 0.5;
}

/* Trix dialogs (link, etc.) */
trix-toolbar .trix-dialog {
  background: var(--card) !important;
  border-top-color: var(--border) !important;
  box-shadow: 0 0.3em 1em var(--border) !important;
}

trix-toolbar .trix-input--dialog {
  background-color: var(--card) !important;
  color: var(--foreground) !important;
  border-color: var(--input-border) !important;
}

trix-toolbar .trix-input--dialog:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent) !important;
}

trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: var(--destructive) 0px 0px 1.5px 1px !important;
}

/* Dark mode: Invert Trix icon colors since they're black SVGs */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) trix-toolbar .trix-button--icon::before {
    filter: invert(1);
  }

  :root:not(.light-mode) trix-toolbar .trix-button--icon.trix-active::before {
    filter: invert(0);
  }
}

/* Dark mode (user preference override) - Trix icons */
:root.dark-mode trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

:root.dark-mode trix-toolbar .trix-button--icon.trix-active::before {
  filter: invert(0);
}

/* Text utilities - Bootstrap overrides for better dark mode contrast */
.text-secondary {
  color: var(--muted-foreground) !important;
}

.text-muted {
  color: var(--muted-foreground) !important;
}

.text-body-secondary {
  color: var(--muted-foreground) !important;
}

/* Improve sidebar navigation contrast in dark mode (OS preference) */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .nav-link.text-secondary {
    color: var(--slate-7) !important;
  }

  :root:not(.light-mode) .nav-link.text-secondary i {
    opacity: 0.9;
  }

  :root:not(.light-mode) .nav-link.active {
    color: var(--foreground) !important;
  }

  :root:not(.light-mode) .badge.text-secondary {
    color: var(--slate-7) !important;
  }

  /* Make navbar brand more prominent in dark mode */
  :root:not(.light-mode) .navbar-brand {
    font-weight: 500 !important;
    color: var(--foreground) !important;
  }

  /* Mobile offcanvas navigation - dark mode */
  :root:not(.light-mode) .offcanvas {
    background-color: var(--card) !important;
    color: var(--foreground);
  }

  :root:not(.light-mode) .offcanvas-header {
    background-color: var(--muted);
    border-color: var(--border) !important;
  }

  :root:not(.light-mode) .offcanvas-body {
    background-color: var(--card);
  }

  :root:not(.light-mode) .offcanvas .list-group-item.bg-light {
    background-color: var(--muted) !important;
  }

  :root:not(.light-mode) .offcanvas .text-muted {
    color: var(--slate-6) !important;
  }

  :root:not(.light-mode) .offcanvas .bg-success-subtle {
    background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
    color: var(--foreground) !important;
  }

  :root:not(.light-mode) .offcanvas .list-group-item {
    background-color: var(--card);
    border-color: var(--border);
  }

  :root:not(.light-mode) .offcanvas .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }
}

/* Dark mode (user preference override) - Navigation and offcanvas */
:root.dark-mode .nav-link.text-secondary {
  color: var(--slate-7) !important;
}

:root.dark-mode .nav-link.text-secondary i {
  opacity: 0.9;
}

:root.dark-mode .nav-link.active {
  color: var(--foreground) !important;
}

:root.dark-mode .badge.text-secondary {
  color: var(--slate-7) !important;
}

:root.dark-mode .navbar-brand {
  font-weight: 500 !important;
  color: var(--foreground) !important;
}

:root.dark-mode .offcanvas {
  background-color: var(--card) !important;
  color: var(--foreground);
}

:root.dark-mode .offcanvas-header {
  background-color: var(--muted);
  border-color: var(--border) !important;
}

:root.dark-mode .offcanvas-body {
  background-color: var(--card);
}

:root.dark-mode .offcanvas .list-group-item.bg-light {
  background-color: var(--muted) !important;
}

:root.dark-mode .offcanvas .text-muted {
  color: var(--slate-6) !important;
}

:root.dark-mode .offcanvas .bg-success-subtle {
  background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  color: var(--foreground) !important;
}

:root.dark-mode .offcanvas .list-group-item {
  background-color: var(--card);
  border-color: var(--border);
}

:root.dark-mode .offcanvas .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ========================================
   NAVIGATION
   ======================================== */

.nav-theme {
  display: flex;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 0;
  border-bottom: var(--borders-1) solid var(--border);
}

.nav-item-theme {
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--muted-foreground);
  text-decoration: none;
  border-radius: var(--radii-1);
  transition: all 150ms ease;
  font-weight: 500;
}

.nav-item-theme:hover {
  color: var(--foreground);
  background-color: var(--muted);
}

.nav-item-theme.active {
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Unified active state for all navigation (mobile and desktop) */
.active-nav {
  background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
  color: var(--foreground) !important;
  font-weight: 600;
  transition: background-color 200ms ease, color 200ms ease;
}

/* Override Bootstrap's bg-success-subtle in all contexts with theme-aware active state */
.bg-success-subtle.active-nav,
.list-group-item.active-nav {
  background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important;
}

/* Mobile nav item transitions */
.offcanvas .list-group-item a {
  transition: background-color 200ms ease, color 200ms ease, transform 150ms ease;
}

.offcanvas .list-group-item a:hover:not(.active-nav) {
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  transform: translateX(2px);
}

/* Sidebar icon transitions */
.nav-link.custom-leftnav i {
  transition: color 200ms ease;
}

/* Focus states for accessibility */
.offcanvas .list-group-item a:focus-visible,
.nav-link.custom-leftnav:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Sidebar navigation - Force vertical layout */
.sticky-top[role="navigation"] .nav {
  display: flex;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: 100%;
}

/* Override flex-fill for sidebar navigation to prevent vertical expansion */
.sticky-top[role="navigation"] .nav-item.flex-fill {
  flex: 0 0 auto; /* Don't grow or shrink, just use natural/min size */
  width: 100%;
}

.nav-link.custom-leftnav {
  display: flex;
  align-items: center;
  min-height: 48px; /* Consistent clickable area height */
  padding-top: 0.625rem;    /* ~10px for more vertical space */
  padding-bottom: 0.625rem; /* ~10px for more vertical space */
  transition: all 0.2s ease;
}

.nav-link.custom-leftnav i.fa-fw {
  font-size: 1.125rem; /* Slightly larger icons for better visibility */
}

/* Add subtle hover effect for better UX */
.nav-link.custom-leftnav:not(.active):hover {
  background-color: color-mix(in srgb, var(--primary) 8%, transparent) !important;
}

/* Improve badge visibility */
.badge.badge-muted {
  background-color: color-mix(in srgb, var(--foreground) 15%, transparent);
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  min-width: 1.25rem;
  text-align: center;
}

/* Workspace navigation section - continuous accent border */
.workspace-nav-section {
  position: relative;
  margin-left: 0.5rem; /* Align with nav items' ms-2 */
  padding-left: 0.5rem; /* Padding for visual separation */
}

/* Continuous border using pseudo-element - very subtle for inactive state */
.workspace-nav-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--primary);
  opacity: 0.25; /* Very subtle - matches original inactive state */
}

/* Remove individual borders from workspace nav items since we have continuous border */
.workspace-nav-section .nav-link.custom-leftnav {
  border-left: none !important;
}

/* Active state - brighten the continuous border at active item position */
.workspace-nav-section .nav-link.custom-leftnav.active {
  position: relative;
}

/* Active overlay - positioned to align exactly with continuous border */
.workspace-nav-section .nav-link.custom-leftnav.active::before {
  content: '';
  position: absolute;
  left: -1.25rem; /* Offset: ms-1 (0.25rem) + ms-2 (0.5rem) + padding-left (0.5rem) = 1.25rem */
  top: 0;
  bottom: 0;
  width: 4px; /* Same width as continuous border for perfect overlay */
  background-color: var(--primary);
  opacity: 1; /* Full solid opacity - brightens the continuous border */
}

/* ========================================
   BADGES
   ======================================== */

.badge-theme {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--fontSize-1);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--radii-4);
  white-space: nowrap;
}

.badge-primary-theme {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.badge-secondary-theme {
  background-color: var(--muted);
  color: var(--muted-foreground);
}

.badge-success-theme {
  background-color: var(--success);
  color: var(--success-foreground);
}

.badge-warning-theme {
  background-color: var(--warning);
  color: var(--warning-foreground);
}

.badge-destructive-theme {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.badge-info-theme {
  background-color: var(--info);
  color: var(--info-foreground);
}

/* Bootstrap badge color overrides for theme consistency */
.badge.bg-primary {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.badge.bg-secondary {
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
}

.badge.bg-success {
  background-color: var(--success) !important;
  color: var(--success-foreground) !important;
}

.badge.bg-danger {
  background-color: var(--destructive) !important;
  color: var(--destructive-foreground) !important;
}

.badge.bg-warning {
  background-color: var(--warning) !important;
  color: var(--warning-foreground) !important;
}

.badge.bg-info {
  background-color: var(--info) !important;
  color: var(--info-foreground) !important;
}

.badge.bg-light {
  background-color: var(--muted) !important;
  color: var(--muted-foreground) !important;
}

.badge.bg-dark {
  background-color: var(--foreground) !important;
  color: var(--background) !important;
}

/* ========================================
   ALERTS
   ======================================== */

.alert-theme {
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radii-2);
  border-left: var(--borders-3) solid;
  margin-bottom: var(--spacing-4);
}

.alert-info-theme {
  background-color: color-mix(in srgb, var(--info) 10%, transparent);
  border-left-color: var(--info);
  color: var(--info-foreground);
}

.alert-success-theme {
  background-color: color-mix(in srgb, var(--success) 10%, transparent);
  border-left-color: var(--success);
  color: var(--success-foreground);
}

.alert-warning-theme {
  background-color: color-mix(in srgb, var(--warning) 10%, transparent);
  border-left-color: var(--warning);
  color: var(--warning-foreground);
}

.alert-destructive-theme {
  background-color: color-mix(in srgb, var(--destructive) 10%, transparent);
  border-left-color: var(--destructive);
  color: var(--destructive-foreground);
}

/* Unified Alert Notifications (toast-style messages) */
.alert-notification {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radii-2);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
  max-width: min(90vw, 400px);
}

.alert-notification .alert-icon {
  font-size: 1.25rem;
}

.alert-notification .alert-message {
  flex: 1;
  font-weight: 500;
}

.alert-notification .alert-close {
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  padding: 0.25rem;
}

.alert-notification .alert-close:hover {
  opacity: 1;
}

/* Alert color variants using MESSAGE_TAGS */
.alert-notification.bg-success-subtle {
  background-color: color-mix(in srgb, var(--success) 15%, var(--card));
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}

.alert-notification.bg-warning-subtle {
  background-color: color-mix(in srgb, var(--warning) 15%, var(--card));
  color: var(--warning-foreground);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}

.alert-notification.bg-danger-subtle {
  background-color: color-mix(in srgb, var(--destructive) 15%, var(--card));
  color: var(--destructive);
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
}

.alert-notification.bg-info-subtle {
  background-color: color-mix(in srgb, var(--info) 15%, var(--card));
  color: var(--info);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
}

/* ========================================
   TABLES
   ======================================== */

.table-theme {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table-theme th,
.table-theme td {
  padding: var(--spacing-2) var(--spacing-3);
  text-align: left;
  border-bottom: var(--borders-1) solid var(--border);
}

.table-theme th {
  font-weight: 600;
  color: var(--foreground);
  background-color: var(--muted);
}

.table-theme tbody tr:hover {
  background-color: var(--muted);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Spacing */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }

.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }

/* Text */
.text-primary-theme { color: var(--primary); }
.text-secondary-theme { color: var(--secondary); }
.text-muted-theme { color: var(--muted-foreground); }
.text-destructive-theme { color: var(--destructive); }

/* Background */
.bg-card-theme { background-color: var(--card); }
.bg-muted-theme { background-color: var(--muted); }
.bg-primary-theme { background-color: var(--primary); }

/* Display */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }

/* Border */
.rounded-theme { border-radius: var(--radii-2); }
.rounded-full-theme { border-radius: 9999px; }
.border-theme { border: var(--borders-1) solid var(--border); }

/* Shadow */
.shadow-sm-theme { box-shadow: var(--shadow-sm); }
.shadow-md-theme { box-shadow: var(--shadow-md); }
.shadow-lg-theme { box-shadow: var(--shadow-lg); }

/* ========================================
   LAYOUT
   ======================================== */

.container-theme {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

@media (min-width: 640px) {
  .container-theme {
    padding: 0 var(--spacing-6);
  }
}

.grid-theme {
  display: grid;
  gap: var(--spacing-4);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

.hidden { display: none; }

@media (min-width: 640px) {
  .sm\:block { display: block; }
}

@media (min-width: 768px) {
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
}

/* ========================================
   LAYOUT-SPECIFIC VARIANTS
   ======================================== */

/* Minimal Layout - Clean, reduced chrome */
body[data-layout="minimal"] {
  --spacing-scale: 0.9; /* Slightly tighter spacing */
}

body[data-layout="minimal"] .card-theme {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

body[data-layout="minimal"] .nav-theme {
  border-bottom: none;
}

body[data-layout="minimal"] .container-theme {
  max-width: 960px; /* Narrower content for focus */
}

/* Blog Layout - Typography-focused */
body[data-layout="blog"] {
  --fontSize-scale: 1.1; /* Slightly larger text */
  line-height: 1.7; /* More generous line height */
}

body[data-layout="blog"] .card-theme {
  max-width: 720px; /* Optimal reading width */
  margin-left: auto;
  margin-right: auto;
}

body[data-layout="blog"] .container-theme {
  max-width: 960px;
}

body[data-layout="blog"] h1,
body[data-layout="blog"] h2,
body[data-layout="blog"] h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Marketing Layout - Bold, centered */
body[data-layout="marketing"] {
  text-align: center;
}

body[data-layout="marketing"] .btn-primary-theme,
body[data-layout="marketing"] .btn-primary {
  padding: var(--spacing-3) var(--spacing-6);
  font-size: var(--fontSize-2);
  font-weight: 600;
}

body[data-layout="marketing"] .card-theme {
  text-align: left; /* Reset for cards */
}

body[data-layout="marketing"] h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

body[data-layout="marketing"] .container-theme {
  max-width: 1440px; /* Wider for marketing content */
}

/* Standard Layout - Default balanced styling */
body[data-layout="standard"] {
  /* Uses default values from design system */
}

/* ========================================
   MARKETING PAGE COMPONENTS
   ======================================== */

/* Marketing Hero Section */
.hero-marketing {
  padding: var(--spacing-8) 0;
  text-align: center;
}

.hero-marketing h1 {
  font-family: var(--font-heading, 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
  margin-bottom: var(--spacing-4);
}

.hero-marketing .lead {
  font-size: var(--fontSize-3);
  color: var(--muted-foreground);
  max-width: 65ch;
  margin: 0 auto var(--spacing-6);
  line-height: 1.6;
}

/* Feature Grid - Unified styling for feature showcases */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-6);
}

.feature-card {
  padding: var(--spacing-5);
  background: var(--card);
  border-radius: var(--radii-3);
  border: 1px solid var(--border);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.feature-card:hover {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

.feature-card .icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: var(--radii-2);
  margin-bottom: var(--spacing-3);
  font-size: 1.25rem;
}

.feature-card h3 {
  font-size: var(--fontSize-2);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.feature-card p {
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

/* Pricing Grid */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-5);
}

.pricing-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radii-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pricing-card.featured {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}

.pricing-card-header {
  padding: var(--spacing-5);
  background: var(--muted);
  text-align: center;
}

.pricing-card-header.featured {
  background: var(--primary);
  color: var(--primary-foreground);
}

.pricing-card-header h3 {
  font-size: var(--fontSize-2);
  font-weight: 600;
  margin-bottom: var(--spacing-2);
}

.pricing-card-header .price {
  font-size: var(--fontSize-4);
  font-weight: 700;
}

.pricing-card-body {
  padding: var(--spacing-5);
  flex: 1;
}

.pricing-card-footer {
  padding: var(--spacing-4) var(--spacing-5);
  border-top: 1px solid var(--border);
}

/* Section Spacing for Marketing Pages */
.section-marketing {
  padding: var(--spacing-8) 0;
}

.section-marketing + .section-marketing {
  border-top: 1px solid var(--border);
}

.section-marketing h2 {
  font-size: var(--fontSize-4);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--spacing-5);
}

/* Value Proposition Cards (simpler than feature cards) */
.value-card {
  padding-left: var(--spacing-4);
  border-left: 3px solid var(--primary);
}

.value-card h3 {
  font-size: var(--fontSize-2);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.value-card p {
  color: var(--muted-foreground);
  line-height: 1.6;
  margin: 0;
}

/* Use Case List (checkmark items) */
.use-case-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.use-case-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  color: var(--foreground);
}

.use-case-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;
  margin-top: 2px;
}

/* CTA Section */
.cta-section {
  text-align: center;
  padding: var(--spacing-5);
  background: var(--muted);
  border-radius: var(--radii-3);
}

.cta-section h2 {
  font-size: var(--fontSize-2);
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: var(--spacing-2);
}

.cta-section p {
  color: var(--muted-foreground);
  margin-bottom: var(--spacing-3);
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--fontSize-0);
}

.cta-section .btn-group {
  display: flex;
  gap: var(--spacing-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ========================================
   MOBILE NAV OVERLAY
   ======================================== */

/* Mobile-only styles (below sm breakpoint) */
@media (max-width: 575.98px) {
  /* Make navbar container position relative for absolute dropdown */
  .navbar .container-fluid {
    position: relative;
  }

  /* Style the collapsed menu as overlay */
  .navbar .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-3) var(--spacing-4);
    z-index: 1000;
  }

  /* Dark mode shadow adjustment */
  [data-theme="dark"] .navbar .navbar-collapse {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  /* Style nav items in mobile menu */
  .navbar .navbar-collapse .navbar-nav {
    flex-direction: column;
    gap: var(--spacing-1);
  }

  .navbar .navbar-collapse .nav-item {
    padding: 0;
  }

  .navbar .navbar-collapse .nav-link {
    padding: var(--spacing-2) 0;
    font-size: var(--fontSize-1);
  }

  /* Solutions dropdown in mobile - show inline */
  .navbar .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: var(--spacing-4);
  }

  .navbar .navbar-collapse .dropdown-menu .dropdown-item {
    padding: var(--spacing-1) 0;
    font-size: var(--fontSize-0);
  }
}