/**
 * Modern Admin Theme - Bootstrap 5 Enhancement
 * Generic reusable styles for Symfony 1.4 admin interfaces
 */

/* Alpine.js utilities */
[x-cloak] { display: none !important; }

/* AI Translation Input Groups */
.input-group .btn-outline-secondary:has(.fa-magic) {
  transition: all 0.2s ease;
  border-color: #dee2e6;
}

.input-group .btn-outline-secondary:hover:has(.fa-magic) {
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.15);
  border-color: #0d6efd;
}

.input-group input:focus ~ .btn-outline-secondary:has(.fa-magic) {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
}

/* Animation for magic icon */
@keyframes magicPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.1) rotate(-5deg); }
  75% { transform: scale(1.1) rotate(5deg); }
}

.btn:hover .fa-magic.fa-bounce {
  animation: magicPulse 0.6s ease-in-out;
}

/* Better input group styling for translation fields */
.translation-tabs-wrapper .input-group {
  position: relative;
  max-width: 800px;
}

.translation-tabs-wrapper .input-group .form-control:focus {
  border-color: #86b7fe;
  z-index: 2;
}

.translation-tabs-wrapper .input-group .btn {
  z-index: 1;
}

/* Make translation input fields match textarea width */
.translation-tabs-wrapper .form-control:not(trix-editor),
.translation-tabs-wrapper .form-select {
  max-width: 800px !important;
}

.translation-tabs-wrapper textarea.form-control {
  max-width: 800px !important;
}

/* Trix editor should be 100% width */
.translation-tabs-wrapper trix-editor.form-control {
  max-width: 100% !important;
  width: 100% !important;
}

/* Toast UI Editor should be 100% width */
.translation-tabs-wrapper .toastui-editor-defaultUI,
.translation-tabs-wrapper div[id$="_editor"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* AI-specific color scheme */
:root {
  --ai-primary: #7c3aed; /* Purple */
  --ai-primary-dark: #6d28d9;
  --ai-primary-light: #a78bfa;
  --ai-primary-bg: rgba(124, 58, 237, 0.1);
  --ai-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --ai-gradient-subtle: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

/* AI Translation toolbar styling */
.ai-translation-toolbar {
  background: var(--ai-gradient-subtle) !important;
  border: 1px solid var(--ai-primary-light) !important;
  border-radius: 0.5rem !important;
}

.ai-translation-toolbar label.form-label {
  white-space: nowrap;
  min-width: fit-content;
  color: var(--ai-primary-dark);
  font-weight: 600;
}

.ai-translation-toolbar .d-flex.gap-2 {
  flex-wrap: nowrap;
}

/* AI-themed select dropdown */
.ai-translation-toolbar select.form-select-sm {
  min-width: 140px !important;
  border-color: var(--ai-primary-light) !important;
}

.ai-translation-toolbar select.form-select-sm:focus {
  border-color: var(--ai-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.25) !important;
}

/* AI-themed buttons */
.btn-ai {
  background: var(--ai-gradient);
  color: white;
  border: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-ai:hover {
  background: linear-gradient(135deg, #5a67d8 0%, #6b4699 100%);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-ai-outline {
  background: transparent;
  color: var(--ai-primary);
  border: 1px solid var(--ai-primary);
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-ai-outline:hover {
  background: var(--ai-gradient);
  color: white;
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* AI Powered badge styling */
.badge-ai {
  background: var(--ai-gradient);
  color: white;
  font-weight: 600;
  padding: 0.35em 0.65em;
}

/* AI magic icon animation with purple color */
.fa-magic.text-ai {
  color: var(--ai-primary) !important;
}

/* Form authors user links - appear black, blue on hover */
.form-authors-link {
  color: #212529 !important; /* Bootstrap's dark color */
}

.form-authors-link:hover {
  color: #0d6efd !important; /* Bootstrap's primary color */
  text-decoration: none !important;
}

/* Cropper.js containment in modals */
.modal-body .cropper-container {
  position: relative !important;
  max-height: 60vh !important;
  width: 100% !important;
  overflow: hidden !important;
}

.modal-body .cropper-wrap-box,
.modal-body .cropper-canvas,
.modal-body .cropper-drag-box {
  position: absolute !important;
}

.modal-body .cropper-modal {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* Icon-only buttons - ensure proper alignment */
.btn-icon-only {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.25rem 0.5rem !important;
  line-height: 1 !important;
}

/* DateTime fields in monospace font */
.datetime-field {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 600;
}

.btn-icon-only i {
  margin: 0 !important;
  line-height: 1 !important;
}

/* Image Preview Tooltip */
.tooltip.image-preview-tooltip {
  opacity: 1 !important;
}

.tooltip.image-preview-tooltip .tooltip-inner {
  max-width: 320px;
  padding: 0.5rem;
  background-color: #ffffff !important;
  border: 1px solid var(--bs-gray-400);
  color: #000000 !important;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Override Bootstrap's arrow colors for all positions */
.tooltip.image-preview-tooltip .tooltip-arrow::before {
  border-color: transparent !important;
}

.tooltip.image-preview-tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.image-preview-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: #ffffff !important;
}

.tooltip.image-preview-tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.image-preview-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: #ffffff !important;
}

.tooltip.image-preview-tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.image-preview-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #ffffff !important;
}

.tooltip.image-preview-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.image-preview-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #ffffff !important;
}

/* Ensure text inside tooltip is black */
.tooltip.image-preview-tooltip .tooltip-inner * {
  color: #000000 !important;
}

/* Soft delete action buttons - Generic styles for any module */
.soft-delete-actions .btn-group {
  gap: 0.25rem;
}

.soft-delete-actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.2rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: 2rem;
}

.soft-delete-actions .btn i {
  font-size: 0.875rem;
  margin: 0;
  display: block;
}

.soft-delete-actions .btn-outline-warning:hover {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: var(--bs-dark);
}

.soft-delete-actions .btn-outline-danger:hover {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: var(--bs-white);
}

/* Make the buttons more subtle when not hovered */
.soft-delete-actions .btn-outline-warning {
  border-color: rgba(255, 193, 7, 0.5);
  color: var(--bs-warning);
}

.soft-delete-actions .btn-outline-danger {
  border-color: rgba(220, 53, 69, 0.5);
  color: var(--bs-danger);
}

/* Archive action buttons - Generic styles for any module */
.archive-actions .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.2rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: 2rem;
}

.archive-actions .btn i {
  font-size: 0.875rem;
  margin: 0;
  display: block;
}

.archive-actions .btn-outline-secondary:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
  color: var(--bs-white);
}

.archive-actions .btn-outline-warning:hover {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
  color: var(--bs-dark);
}

/* Make the buttons more subtle when not hovered */
.archive-actions .btn-outline-secondary {
  border-color: rgba(108, 117, 125, 0.5);
  color: var(--bs-secondary);
}

.archive-actions .btn-outline-warning {
  border-color: rgba(255, 193, 7, 0.5);
  color: var(--bs-warning);
}

/* Archived row styling - minimal approach */
tr.archived td {
  opacity: 0.7;
}

/* Custom badge colors for calculation box manager */
.badge.bg-purple {
  background-color: #6f42c1 !important;
  color: #fff !important;
}

.badge.bg-indigo {
  background-color: #6610f2 !important;
  color: #fff !important;
}

.badge.bg-teal {
  background-color: #20c997 !important;
  color: #fff !important;
}

/* Calculation box cards display */
.calculation-boxes-display {
  margin-top: 1rem;
}

.calculation-box-card {
  margin-bottom: 0.5rem;
  width: 100%;
  transition: all 0.3s ease;
}

.calculation-box-card.inactive-box {
  opacity: 0.5;
  background-color: rgba(220, 53, 69, 0.05);
}

.calculation-box-card.inactive-box .card-body {
  background-color: rgba(220, 53, 69, 0.02);
}

.box-position-number {
  font-size: 1.5rem;
  font-weight: bold;
  min-width: 3rem;
  text-align: center;
}

.calculation-box-card .badge {
  font-size: 0.75rem;
}

.calculation-box-card code {
  background-color: #f8f9fa;
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem;
  font-size: 0.8rem;
}

/* Deleted row styling - blur effect with hover interaction */
.deleted-row {
  opacity: 0.5;
  filter: blur(0.5px);
  transition: all 0.3s ease;
}

.deleted-row:hover {
  opacity: 0.9;
  filter: none;
  background-color: #f8f9fa;
}

/* Content Media Manager Drag & Drop */
.content-media-manager .media-item-card {
  transition: transform 0.2s;
}

.content-media-manager .media-item-card.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.content-media-manager .media-item-card:not(.dragging) {
  cursor: grab;
}

.content-media-manager .drag-handle {
  cursor: grab;
}

.content-media-manager .drag-handle:active {
  cursor: grabbing;
}

.content-media-manager .media-item-card.drag-over {
  border-top: 2px solid #0d6efd;
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.content-media-manager .media-item-card.deleting {
  animation: slideOutLeft 0.3s ease-out forwards;
  pointer-events: none;
}

/* List action buttons - Generic styles for all admin list actions */
.sf_admin_td_actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
}

.sf_admin_td_actions a.sf_admin_action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 0.2rem;
  min-width: 2rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  border: 1px solid;
}

.sf_admin_td_actions a.sf_admin_action i {
  font-size: 0.875rem;
  margin: 0;
  display: block;
}

/* Edit button styling */
.sf_admin_td_actions a.sf_admin_action_edit {
  color: var(--bs-primary);
  border-color: rgba(13, 110, 253, 0.5);
}

.sf_admin_td_actions a.sf_admin_action_edit:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white) !important;
}

/* Delete button styling */
.sf_admin_td_actions a.sf_admin_action_delete {
  color: var(--bs-danger);
  border-color: rgba(220, 53, 69, 0.5);
}

.sf_admin_td_actions a.sf_admin_action_delete:hover {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: var(--bs-white) !important;
}

/* Show button styling (if used) */
.sf_admin_td_actions a.sf_admin_action_show {
  color: var(--bs-info);
  border-color: rgba(13, 202, 240, 0.5);
}

.sf_admin_td_actions a.sf_admin_action_show:hover {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
  color: var(--bs-white) !important;
}

/* Override any conflicting link styles */
td .sf_admin_td_actions a.sf_admin_action {
  color: inherit;
}

/* Ensure proper display in table cells */
td.sf_admin_td_actions,
.sf_admin_list td:has(.sf_admin_td_actions) {
  text-align: center;
  vertical-align: middle;
}

/* Force override Bootstrap's default dark tooltip theme */
body .tooltip.image-preview-tooltip .tooltip-inner {
  --bs-tooltip-bg: #ffffff !important;
  --bs-tooltip-color: #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Relation Info Tooltip */
.tooltip.relation-info-tooltip {
  opacity: 1 !important;
}

.tooltip.relation-info-tooltip .tooltip-inner {
  max-width: 600px;
  padding: 0.5rem;
  background-color: #ffffff !important;
  border: 1px solid var(--bs-gray-400);
  color: #000000 !important;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  white-space: normal;
}

/* Override Bootstrap's arrow colors for all positions */
.tooltip.relation-info-tooltip .tooltip-arrow::before {
  border-color: transparent !important;
}

.tooltip.relation-info-tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.relation-info-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
  border-right-color: #ffffff !important;
}

.tooltip.relation-info-tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.relation-info-tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
  border-left-color: #ffffff !important;
}

.tooltip.relation-info-tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.relation-info-tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  border-top-color: #ffffff !important;
}

.tooltip.relation-info-tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.relation-info-tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
  border-bottom-color: #ffffff !important;
}

/* Ensure text inside tooltip is black */
.tooltip.relation-info-tooltip .tooltip-inner * {
  color: #000000 !important;
}

/* Force override Bootstrap's default dark tooltip theme */
body .tooltip.relation-info-tooltip .tooltip-inner {
  --bs-tooltip-bg: #ffffff !important;
  --bs-tooltip-color: #000000 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

/* Image Manager Modern Styles */
.image-manager-modern .image-preview {
  min-height: 100px;
  position: relative;
}

.image-manager-modern .badge-sm {
  font-size: 0.7rem;
  padding: 0.15rem 0.3rem;
}

/* Connector line pulse animation */
@keyframes connectorPulse {
  0%, 100% {
    opacity: 0.3;
    background-color: #dee2e6;
  }
  50% {
    opacity: 1;
    background-color: #adb5bd;
  }
}

.image-manager-modern .connector-line {
  animation: connectorPulse 2s ease-in-out infinite;
}

/* Alpine.js transition utilities */
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.translate-y-0 {
  transform: translateY(0);
}

.-translate-y-2 {
  transform: translateY(-0.5rem);
}



/* Toast notifications - Enhanced styling */
#toast-container {
  max-width: 600px !important;
  min-width: 400px !important;
  width: 100%;
}

#toast-container .toast {
  margin-bottom: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
  border-radius: 0.5rem;
  animation: slideUp 0.3s ease-out;
  max-width: 600px !important;
  min-width: 400px !important;
  width: 100% !important;
}

#toast-container .toast:last-child {
  margin-bottom: 0;
}

#toast-container .toast-body {
  font-size: 1.1rem;
  padding: 1rem 1.25rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

#toast-container .toast-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Toast animation */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Toast colors - solid colors, no gradients */
#toast-container .bg-success {
  background-color: #28a745 !important;
}

#toast-container .bg-danger {
  background-color: #dc3545 !important;
}

#toast-container .bg-warning {
  background-color: #ffc107 !important;
}

#toast-container .bg-info {
  background-color: #17a2b8 !important;
}

/* Utility Classes */
.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  opacity: 0.8;
}

/* Boolean Toggle Animations */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Smooth transitions for boolean toggles */
.cursor-pointer i {
  transition: color 0.3s ease, transform 0.2s ease;
}

.cursor-pointer:active i {
  transform: scale(0.9);
}

/* Custom CSS Variables - Override Bootstrap defaults if needed */
:root {
  /* Bootstrap color overrides */
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-white: #ffffff;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-border-color: #dee2e6;
  
  /* Admin theme specific colors */
  --admin-sidebar-bg: #f8f9fa;
  --admin-sidebar-border: #dee2e6;
  --admin-navbar-height: 65px; /* Navbar height with padding and border: ~38px content + 12px*2 padding + 3px border */
  --admin-nav-link-color: #495057;
  --admin-nav-link-bg: #ffffff;
  --admin-nav-link-border: #dee2e6;
  --admin-nav-link-hover-bg: #e9ecef;
  --admin-nav-link-hover-color: #212529;
  --admin-nav-link-hover-border: #6c757d;
  --admin-nav-link-active-bg: #e3e6ea;
  --admin-nav-link-active-color: #212529;
  --admin-nav-link-active-hover-bg: #d6dae0;
  --admin-nav-header-color: #6c757d;
  --admin-scrollbar-thumb: #cbd5e0;
  --admin-scrollbar-thumb-hover: #a0aec0;
  --admin-shadow-sm: rgba(0, 0, 0, 0.075);
  --admin-shadow-md: rgba(0, 0, 0, 0.1);
  --admin-shadow-lg: rgba(0, 0, 0, 0.15);
  --admin-shadow-primary: rgba(13, 110, 253, 0.25);
  
  /* Form colors */
  --admin-input-border: #ced4da;
  --admin-input-focus-border: #80bdff;
  --admin-input-focus-shadow: rgba(0, 123, 255, 0.25);
  --admin-input-text: #495057;
  --admin-label-color: #495057;
  
  /* Login form colors */
  --admin-login-title-color: #333333;
  --admin-login-submit-bg: #007bff;
  --admin-login-submit-hover-bg: #0056b3;
  --admin-login-submit-border: #004085;
  --admin-login-error: #dc3545;
}

/* Modern Navbar Styling */
.navbar {
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--admin-nav-link-active-hover-bg) 100%);
  box-shadow: 0 2px 8px var(--admin-shadow-md);
  padding: 0.75rem 0 !important;
  transition: all 0.3s ease;
}

/* Force consistent navbar padding on all pages */
.navbar.navbar-expand-lg {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Ensure container doesn't affect navbar height */
.navbar .container-fluid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.navbar.bg-primary {
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--admin-nav-link-active-hover-bg) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar Brand Styling */
.navbar-brand {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 !important;
  transition: all 0.2s ease;
}

.navbar-brand:hover {
  transform: translateY(-1px);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.navbar-brand .badge {
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  letter-spacing: 0.05em;
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--bs-white) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Navbar User Info */
.navbar-text {
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-text i {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* Navbar Logout Button */
.navbar .btn-outline-light {
  border: 2px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: 500;
  padding: 0.375rem 1rem;
  transition: all 0.2s ease;
}

.navbar .btn-outline-light:hover {
  background-color: var(--bs-body-bg);
  color: var(--bs-primary) !important;
  border-color: var(--bs-white);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.navbar .btn-outline-light i {
  transition: transform 0.2s ease;
}

.navbar .btn-outline-light:hover i {
  transform: translateX(2px);
}

/* Ensure navbar text is visible */
.navbar-dark .navbar-brand,
.navbar-dark .navbar-text,
.navbar-dark .navbar-nav .nav-link {
  color: var(--bs-white) !important;
}

/* Mobile Toggle Button */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.5rem;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  line-height: 1;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.navbar-toggler-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Rotate animation when sidebar is open */
.sidebar-open .navbar-toggler-icon {
  transform: rotate(90deg);
}

.navbar-toggler:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);
}

/* Ensure proper navbar alignment */
.navbar > .container-fluid {
  display: flex;
  align-items: center;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

/* Fixed Navbar Spacing */
.fixed-top + * {
  padding-top: var(--admin-navbar-height);
}

/* Admin sidebar navigation styling */
.admin-sidebar {
  background-color: var(--admin-sidebar-bg);
  min-height: calc(100vh - var(--admin-navbar-height));
  padding: 0;
  margin-top: 0;
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: margin-left, opacity, transform;
}

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
  padding: 0.375rem 0.75rem;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  transition: all 0.3s ease;
  border-radius: 0.25rem;
}

.sidebar-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: scale(1.05);
}

.sidebar-toggle-btn:focus {
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.sidebar-toggle-btn i {
  transition: transform 0.3s ease;
  display: inline-block;
  width: 20px;
  text-align: center;
}

/* Main content transition */
.admin-main-content {
  transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: margin-left, width;
}

/* Collapsed State */
body.sidebar-collapsed .admin-sidebar {
  margin-left: -280px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-20px);
}

body.sidebar-collapsed .admin-main-content {
  margin-left: 0 !important;
  width: 100%;
}

/* Show collapsed indicator on toggle button */
body.sidebar-collapsed .sidebar-toggle-btn {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Prevent layout shift and icon animation on initial page load */
body:not(.sidebar-initialized) .admin-sidebar,
body:not(.sidebar-initialized) .admin-main-content {
  transition: none !important;
}

body:not(.sidebar-initialized) .sidebar-toggle-btn i {
  transition: none !important;
}

/* Sticky sidebar positioning */
.admin-sidebar .position-sticky {
  top: 0;
  height: calc(100vh - var(--admin-navbar-height) - 0.5rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem;
}

/* Custom scrollbar for sidebar */
.admin-sidebar .position-sticky::-webkit-scrollbar {
  width: 6px;
}

.admin-sidebar .position-sticky::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.admin-sidebar .position-sticky::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.admin-sidebar .position-sticky::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Main content area with constrained width for readability */
.admin-main-content {
  position: relative;
  padding-top: 0 !important;
  min-height: calc(100vh - var(--admin-navbar-height));
  flex: 1 1 auto !important;
  width: 100% !important;
  overflow-x: auto;
}

/* Border that extends to navbar */
.admin-main-content::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(-1 * var(--admin-navbar-height));
  bottom: 0;
  width: 1px;
  background-color: var(--admin-sidebar-border);
}

.admin-main-content > .container-fluid {
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
}


/* Navigation sections */
.nav-section {
  margin-bottom: 0.75rem !important;
  min-width: 0;
}


.nav-section ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
}

/* Ensure nav flex-column has no extra spacing */
.nav-section .nav.flex-column {
  padding: 0;
  margin: 0;
}

/* Remove any default Bootstrap spacing */
.admin-sidebar .nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0;
}

.nav-section li {
  margin-bottom: 0.125rem;
}

/* Navigation headers */
.nav-header {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--admin-nav-header-color) !important;
  padding: 0 0.5rem !important;
  margin-bottom: 0.1875rem !important;
  min-width: 0;
}

/* Nav header text container */
.nav-header-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}

.nav-header i {
  font-size: 0.875rem;
  width: 1.5rem;
  text-align: center;
  display: inline-block;
  flex-shrink: 0;
}

/* Collapsible navigation header styling */
.nav-section-toggle {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-section-toggle:hover {
  color: var(--bs-dark) !important;
}

/* Item count styling */
.nav-item-count {
  font-weight: 400;
  margin-left: 0.25rem;
  color: var(--bs-gray-600);
  font-size: 0.75rem;
}

/* Toggle icon animation */
.nav-toggle-icon {
  transition: transform 0.3s ease-in-out;
  font-size: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 0.25rem;
  line-height: 1;
  width: 0.6rem;
  height: 0.6rem;
  text-align: center;
  transform-origin: center center;
}

.nav-section-toggle[aria-expanded="false"] .nav-toggle-icon {
  transform: rotate(-90deg);
}

/* Ensure proper rotation on collapsed state */
.nav-section-toggle.collapsed .nav-toggle-icon {
  transform: rotate(-90deg);
}

/* Hide toggle icon when sidebar is too narrow */
@media (max-width: 250px) {
  .admin-sidebar .nav-toggle-icon {
    display: none;
  }
  
  /* Make sections always expanded on very narrow screens */
  .admin-sidebar .collapse {
    display: block !important;
  }
}

/* Smooth collapse animation - Let Bootstrap handle it */

/* Fade effect for menu items - Removed to prevent blinking
.nav-section .collapse.show ul {
  animation: fadeIn 0.3s ease-in-out;
}

.nav-section .collapse:not(.show) ul {
  animation: fadeOut 0.3s ease-in-out;
}
*/

/* Fix for navigation blinking */
.nav-section .collapse {
  overflow: hidden;
}

.nav-section .collapsing {
  overflow: hidden;
  transition: height 0.2s ease;
}

/* Hide nav items initially to prevent blinking */
.nav-section .collapse:not(.show) .nav-link {
  visibility: hidden;
  opacity: 0;
}

.nav-section .collapse.show .nav-link {
  visibility: visible;
  opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Navigation links styled as buttons */
.admin-sidebar ul li {
  list-style: none;
  margin-bottom: 0.1rem;
}

.admin-sidebar .nav-link,
.admin-sidebar ul li a.nav-link,
.admin-sidebar a.nav-link {
  display: block !important;
  color: var(--admin-nav-link-color) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  border: 1px solid var(--admin-nav-link-border) !important;
  background-color: var(--admin-nav-link-bg) !important;
  margin: 0 0.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar ul li a.nav-link:hover {
  background-color: var(--admin-nav-link-hover-bg) !important;
  color: var(--admin-nav-link-hover-color) !important;
  text-decoration: none !important;
  border-color: #d1d5db !important;
  /* transform: translateY(-1px); - Removed to fix blinking */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.admin-sidebar .nav-link.active,
.admin-sidebar ul li a.nav-link.active {
  background-color: var(--admin-nav-link-active-bg) !important;
  color: var(--admin-nav-link-active-color) !important;
  border-color: #c8cdd3 !important;
  box-shadow: inset 3px 0 0 var(--bs-primary), inset 0 1px 2px rgba(0, 0, 0, 0.08);
}


.admin-sidebar .nav-link.active:hover,
.admin-sidebar ul li a.nav-link.active:hover {
  background-color: var(--admin-nav-link-active-hover-bg) !important;
  border-color: #b8bfc7 !important;
  color: var(--admin-nav-link-active-color) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Search form styling */
.search-form {
  max-width: 300px;
}

.search-form .form-control {
  border-radius: 20px;
}

/* Header Styles */
.sf_admin_header {
  background: linear-gradient(135deg, var(--bs-gray-100) 0%, var(--bs-gray-200) 100%);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px var(--admin-shadow-sm);
  border: 1px solid var(--bs-gray-300);
}

.sf_admin_header_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.sf_admin_title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bs-dark);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.sf_admin_actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* Compact buttons in header */
.sf_admin_header .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.sf_admin_header .btn-outline-secondary,
.sf_admin_header .btn-group .btn {
  border: 1px solid var(--bs-gray-600);
  background-color: var(--bs-gray-600);
  color: var(--bs-white);
}

.sf_admin_header .btn-outline-secondary:hover,
.sf_admin_header .btn-group .btn:hover {
  background-color: var(--bs-gray-700);
  border-color: var(--bs-gray-700);
  color: var(--bs-white);
}

.sf_admin_header .btn-outline-secondary:hover i,
.sf_admin_header .btn-group .btn:hover i {
  color: var(--bs-white);
}

.sf_admin_header .btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.sf_admin_header .btn-primary:hover {
  background-color: var(--admin-nav-link-active-hover-bg);
  border-color: var(--admin-nav-link-active-hover-bg);
}

/* Button group styling - proper Bootstrap button group */
.sf_admin_header .btn-group > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.sf_admin_header .btn-group > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0;
}

.sf_admin_header .btn-group > .btn,
.sf_admin_header .btn-group > .btn.btn-outline-secondary {
  border: 1px solid var(--bs-gray-600);
  background-color: var(--bs-gray-600);
  color: var(--bs-white);
}

.sf_admin_header .btn-group > .btn:hover,
.sf_admin_header .btn-group > .btn.btn-outline-secondary:hover {
  background-color: var(--bs-gray-700);
  border-color: var(--bs-gray-700);
  color: var(--bs-white);
  z-index: 1;
}

.sf_admin_header .btn-group > .btn:hover i,
.sf_admin_header .btn-group > .btn.btn-outline-secondary:hover i {
  color: var(--bs-white);
}

/* Table improvements */
.table th {
  background-color: var(--bs-light);
  border-top: none;
  font-weight: 600;
  color: var(--bs-dark);
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.025em;
}

/* Don't uppercase the first row with variant names */
.data-table-wrapper.hierarchical .table thead:first-child th,
.compact-data-table.hierarchical thead:first-child th,
#product_data thead:first-child th {
  text-transform: none;
  letter-spacing: normal;
}

/* Don't uppercase category items in tbody */
.data-table-wrapper.hierarchical .table tbody th,
.compact-data-table.hierarchical tbody th,
#product_data tbody th {
  text-transform: none !important;
  letter-spacing: normal;
}

.table-hover tbody tr:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  transition: all 0.2s ease-in-out;
}

/* Form improvements */
.form-label {
  font-weight: 600;
  color: var(--bs-dark);
  margin-bottom: 0.5rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Card styling */
.card {
  border: none;
  box-shadow: 0 0.125rem 0.25rem var(--admin-shadow-sm);
}

.card-header {
  background-color: var(--bs-light);
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 600;
  color: var(--bs-dark);
}

/* Alert improvements */
.alert {
  border: none;
  border-radius: 0.5rem;
}

/* Badge styling */
.badge {
  font-size: 0.75em;
}

/* Pagination styling */
.pagination .page-link {
  color: var(--bs-primary);
  border-color: var(--bs-border-color);
}

.pagination .page-link:hover {
  background-color: var(--bs-light);
  border-color: var(--bs-primary);
}

.pagination .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Dropdown menu improvements */
.dropdown-menu {
  border: none;
  box-shadow: 0 0.5rem 1rem var(--admin-shadow-lg);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

/* Loading spinner */
.spinner-primary {
  color: var(--bs-primary);
}

/* Icon styling in navigation */
.admin-sidebar .nav-link i {
  width: 1.25rem;
  text-align: center;
  margin-right: 0.5rem;
  font-size: 0.875rem;
}

/* Sidebar Overlay - separate element for better control */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  display: none;
}

.sidebar-overlay.show {
  opacity: 1;
  visibility: visible;
  display: block;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .admin-sidebar {
    position: fixed;
    top: var(--admin-navbar-height);
    left: 0;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    height: calc(100vh - var(--admin-navbar-height));
    z-index: 1050;
    overflow-y: auto;
    background-color: var(--admin-sidebar-bg);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }

  /* Mobile collapsed state */
  body.sidebar-collapsed .admin-sidebar {
    transform: translateX(-100%);
    margin-left: 0;
  }

  body:not(.sidebar-collapsed) .admin-sidebar {
    transform: translateX(0);
  }

  /* Mobile backdrop when sidebar is open */
  body:not(.sidebar-collapsed)::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Prevent body scroll when sidebar is open */
  body.sidebar-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  
  .admin-main-content {
    margin-left: 0 !important;
    width: 100%;
  }
  
  /* Mobile navigation styling */
  .admin-sidebar .nav-section {
    margin-bottom: 0.5rem;
  }
  
  .admin-sidebar .nav-header {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .admin-sidebar .nav-link {
    padding: 0.5rem 1rem !important;
    font-size: 0.9375rem !important;
    margin: 0 0.5rem !important;
  }
  
  /* Mobile content adjustments */
  .admin-content {
    padding: 0.5rem;
  }
  
  /* Compact cards on mobile */
  .card {
    margin-bottom: 0.75rem;
  }
  
  .card-body {
    padding: 0.75rem;
  }
  
  /* Mobile table container */
  .table-responsive {
    margin: 0 -0.5rem;
  }
  
  /* Mobile pagination layout */
  .pagination-wrapper .row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .pagination-wrapper .col-md-4 {
    width: 100%;
    text-align: center !important;
  }
  
  .pagination-wrapper .pagination {
    justify-content: center !important;
  }
  
  /* Mobile header layout */
  .sf_admin_header_content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .sf_admin_title {
    font-size: 1.25rem;
  }
  
  .sf_admin_actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  /* Button groups on mobile */
  .sf_admin_actions .btn-group {
    flex: 0 1 auto;
  }
  
  .sf_admin_actions .btn {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
  }
}

/* Scrollbar styling for sidebar */
.admin-sidebar::-webkit-scrollbar {
  width: 6px;
}

.admin-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: var(--admin-scrollbar-thumb);
  border-radius: 3px;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--admin-scrollbar-thumb-hover);
}

/* Ensure light theme is properly applied */
body.bg-light {
  background-color: var(--bs-light) !important;
}

/* Remove dark mode auto-detection to prevent issues */
/* Dark mode can be added as an explicit theme option later if needed */

/* Login form styling - style the form itself as a card */
.login-container form,
.sf_guard_signin {
  background: var(--bs-body-bg);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem var(--admin-shadow-lg);
  padding: 2rem;
}

.sf_guard_signin h1 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--admin-login-title-color);
  text-align: center;
}

.sf_guard_signin label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--admin-label-color);
  display: block;
}

.sf_guard_signin input[type="text"],
.sf_guard_signin input[type="password"] {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--admin-input-text);
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: 1px solid var(--admin-input-border);
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sf_guard_signin input[type="text"]:focus,
.sf_guard_signin input[type="password"]:focus {
  color: var(--admin-input-text);
  background-color: var(--bs-body-bg);
  border-color: var(--admin-input-focus-border);
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--admin-input-focus-shadow);
}

.sf_guard_signin input[type="submit"] {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  background-color: var(--admin-login-submit-bg);
  border: 1px solid var(--admin-login-submit-bg);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  color: var(--bs-white);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  cursor: pointer;
  width: 100%;
  margin-top: 1rem;
}

.sf_guard_signin input[type="submit"]:hover {
  background-color: var(--admin-login-submit-hover-bg);
  border-color: var(--admin-login-submit-border);
}

.sf_guard_signin .error_list {
  color: var(--admin-login-error);
  font-size: 0.875rem;
  margin-top: 0.25rem;
  list-style: none;
  padding: 0;
}

/* Form field groups */
.sf_guard_signin > div,
.sf_guard_signin .form-group {
  margin-bottom: 1rem;
}

/* Remember me checkbox styling */
.sf_guard_signin input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* If sfGuard form has its own box, remove our styling */
.login-container .box,
.login-container .ui-widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ========================================
   Admin List/Index View Improvements
   ======================================== */

/* Main list container styling */
.sf_admin_list {
  background: var(--bs-body-bg);
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.25rem var(--admin-shadow-sm);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* List table improvements */
.sf_admin_list table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

.sf_admin_list table thead th {
  background-color: var(--bs-gray-100);
  border-bottom: 2px solid var(--bs-gray-300);
  color: var(--bs-gray-800);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding: 0.5rem 0.75rem;
  position: sticky;
  top: 0;
  z-index: 10;
  white-space: nowrap;
}

/* Sort links in headers */
.sf_admin_list th a {
  color: var(--bs-gray-800);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s ease-in-out;
}

.sf_admin_list th a:hover {
  color: var(--bs-primary);
}


/* Table row styling */
.sf_admin_list tbody tr {
  transition: background-color 0.15s ease-in-out;
  border-bottom: 1px solid var(--bs-gray-200);
}

.sf_admin_list tbody tr:hover {
  background-color: var(--bs-gray-50);
}

.sf_admin_list tbody td {
  padding: 0.4rem 0.75rem;
  vertical-align: middle;
  color: var(--bs-gray-700);
  font-size: 0.875rem;
  line-height: 1.3;
}

/* First and last column special styling */
.sf_admin_list tbody td:first-child {
  font-weight: 500;
  color: var(--bs-gray-900);
}

/* Remove link styling in table cells */
.sf_admin_list tbody td a {
  color: inherit;
  text-decoration: none;
}

.sf_admin_list tbody td a:hover {
  color: var(--bs-primary);
  text-decoration: none;
}

/* Action column styling */
.sf_admin_list th.sf_admin_actions {
  white-space: nowrap;
  min-width: fit-content;
  width: auto;
}

.sf_admin_list td.sf_admin_actions {
  white-space: nowrap;
  text-align: right;
  padding-right: 0.75rem;
}

/* Action buttons in lists - neutral style */
.sf_admin_list .sf_admin_action {
  display: inline-block;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 0.2rem;
  text-decoration: none;
  margin-left: 0.15rem;
  transition: all 0.15s ease-in-out;
  background-color: transparent;
  border: 1px solid var(--bs-gray-300);
  color: var(--bs-gray-600);
}

.sf_admin_list .sf_admin_action:hover {
  background-color: var(--bs-gray-100);
  border-color: var(--bs-gray-400);
  color: var(--bs-gray-800);
}

.sf_admin_list .sf_admin_action_edit {
  color: var(--bs-primary);
  border-color: var(--bs-gray-300);
}

.sf_admin_list .sf_admin_action_edit:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  color: var(--bs-white);
}

.sf_admin_list .sf_admin_action_delete {
  color: var(--bs-danger);
  border-color: var(--bs-gray-300);
}

.sf_admin_list .sf_admin_action_delete:hover {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
  color: var(--bs-white);
}

/* Ensure icons in action buttons are properly sized */
.sf_admin_list .sf_admin_action i {
  font-size: 0.75rem;
  margin-right: 0;
}


/* Empty list state */
.sf_admin_list tbody tr.sf_admin_row_empty td {
  text-align: center;
  padding: 3rem;
  color: var(--bs-gray-600);
  font-style: italic;
}

/* Pagination styling */
.sf_admin_pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background-color: var(--bs-gray-50);
  border-top: 1px solid var(--bs-gray-200);
}

.sf_admin_pagination_info {
  color: var(--bs-gray-600);
  font-size: 0.875rem;
}

/* Table header sort indicators */
.sf_admin_list thead th a {
  color: var(--bs-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.sf_admin_list thead th a:hover {
  color: var(--bs-primary);
}

/* Sort icons using ::after pseudo-elements - only in thead */
.sf_admin_list thead th a::after {
  content: '\f0dc'; /* Font Awesome sort icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 0.75rem;
  margin-left: 0.5rem;
  opacity: 0.3;
  transition: opacity 0.15s ease-in-out;
}

.sf_admin_list thead th a:hover::after {
  opacity: 0.6;
}

/* Enhanced styling for sorted columns */
.sf_admin_list thead th.sorted {
  background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
  font-weight: 700;
  position: relative;
  transition: background-color 0.2s ease;
}

.sf_admin_list thead th.sorted:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
}

.sf_admin_list thead th.sorted a {
  color: var(--bs-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

/* Hide the default sort icon on sorted columns */
.sf_admin_list thead th.sorted a::after {
  display: none;
}

/* Enhanced pagination */
.pagination {
  margin: 0;
}

.pagination-wrapper {
  padding: 1rem 0;
}

.pagination-wrapper .row {
  margin: 0;
}

/* Pagination info boxes */
.pagination-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--bs-gray-300);
  border-radius: 0.25rem;
  background-color: var(--bs-body-bg);
  color: var(--bs-gray-700);
  font-size: 0.875rem;
  min-height: 38px;
  transition: all 0.15s ease-in-out;
}

.pagination-info:hover {
  background-color: var(--bs-gray-50);
  border-color: var(--bs-gray-400);
}

.page-link {
  color: var(--bs-gray-700);
  border-color: var(--bs-gray-300);
  padding: 0.375rem 0.75rem;
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-link i {
  font-size: 0.875rem;
  vertical-align: middle;
}

.page-link:hover {
  color: var(--bs-primary);
  background-color: var(--bs-gray-100);
  border-color: var(--bs-gray-400);
}

.page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.page-item.disabled .page-link {
  color: var(--bs-gray-400);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-gray-300);
  cursor: not-allowed;
}

/* Sort icons - only visible when they have the sort-icon class */
i.sort-icon {
  font-size: 0.9rem;
  color: var(--bs-primary);
  margin-left: 0.4rem;
  font-weight: 900;
  vertical-align: middle;
  animation: sortIconAppear 0.3s ease-in-out;
  display: inline-block;
}

/* Animation for sort icon appearance */
@keyframes sortIconAppear {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Filter section improvements */
.sf_admin_filter {
  margin-bottom: 1.5rem;
}

.sf_admin_filter .card-header {
  background-color: var(--bs-gray-50);
  border-bottom: 1px solid var(--bs-gray-200);
  padding: 0.75rem 1.25rem;
}

.sf_admin_filter .btn-link {
  color: var(--bs-gray-700);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 0;
}

.sf_admin_filter .btn-link:hover {
  color: var(--bs-primary);
}

.sf_admin_filter .btn-link::before {
  content: '\f0b0'; /* Font Awesome filter icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  margin-right: 0.5rem;
}

/* Filter form styling */
.sf_admin_filter form {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.sf_admin_filter .form-group {
  margin-bottom: 0;
}

.sf_admin_filter label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bs-gray-700);
  margin-bottom: 0.25rem;
}

.sf_admin_filter .form-control,
.sf_admin_filter .form-select {
  font-size: 0.875rem;
}


/* List actions (New button etc) - now in header */

.sf_admin_actions .btn-toolbar {
  justify-content: flex-end;
  margin: 0;
}

.sf_admin_actions .btn-group {
  margin: 0;
}

/* Ensure consistent button heights in header */
.d-flex.gap-2 .btn,
.sf_admin_actions .btn {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}

.sf_admin_actions .btn i,
.d-flex.gap-2 .btn i {
  margin-right: 0.25rem;
}

/* Boolean field display */
.sf_admin_boolean_true,
.sf_admin_boolean_false {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.75rem;
}

.sf_admin_boolean_true {
  background-color: var(--bs-success);
  color: var(--bs-white);
}

.sf_admin_boolean_true::before {
  content: '\f00c'; /* Font Awesome check */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

.sf_admin_boolean_false {
  background-color: var(--bs-danger);
  color: var(--bs-white);
}

.sf_admin_boolean_false::before {
  content: '\f00d'; /* Font Awesome times */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

/* Date/Time field styling */
.sf_admin_date,
.sf_admin_datetime {
  color: var(--bs-gray-600);
  font-size: 0.875rem;
}

/* Status badges */
.sf_admin_list .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  font-weight: 500;
}

/* Responsive table wrapper */
.sf_admin_list_table_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* Filter Modal Styling */
#filterModal .modal-header {
  background-color: var(--bs-light);
  border-bottom: 2px solid var(--bs-gray-300);
}

#filterModal .modal-title {
  color: var(--bs-gray-800);
  font-weight: 600;
}

#filterModal .modal-body {
  padding: 1.5rem;
}

#filterModal .modal-footer {
  background-color: var(--bs-gray-50);
  border-top: 2px solid var(--bs-gray-300);
  gap: 0.5rem;
}

/* Filter form in modal */
#filterModal form {
  margin: 0;
}

#filterModal .filter-form-container {
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem 0;
}

#filterModal .modal-body {
  padding: 1rem;
}

#filterModal .row {
  --bs-gutter-x: 0.5rem;
  margin: 0;
}

#filterModal .col-form-label,
#filterModal .col-sm-4 label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bs-gray-700);
  padding-top: 0.375rem !important;
  padding-bottom: 0.25rem;
  text-align: right !important;
  display: block;
  width: 100%;
}

#filterModal .form-control-sm,
#filterModal .form-select-sm {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  height: calc(1.5em + 0.5rem + 2px);
  width: 100%;
  max-width: 400px;
}

/* Ensure all form controls have same width */
#filterModal .col-sm-8 input[type="text"],
#filterModal .col-sm-8 input[type="number"],
#filterModal .col-sm-8 input[type="email"],
#filterModal .col-sm-8 input[type="date"],
#filterModal .col-sm-8 select,
#filterModal .col-sm-8 textarea {
  width: 100%;
  max-width: 400px;
}

/* Filter field container - only apply flex when there's a checkbox */
#filterModal .col-sm-8:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

/* Checkbox styling in filters */
#filterModal input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
}

#filterModal input[type="checkbox"] + label {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: normal;
  vertical-align: middle;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Filter field with text + checkbox - keep same width as other fields */
#filterModal .col-sm-8:has(input[type="checkbox"]) input[type="text"] {
  flex: 0 1 auto;
  width: 100%;
  max-width: 400px;
}

#filterModal .form-control-sm:focus,
#filterModal .form-select-sm:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

#filterModal .sf_admin_form_row {
  position: relative;
}

#filterModal .sf_admin_form_row.mb-2 {
  margin-bottom: 0.5rem !important;
}

#filterModal .form-text {
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

/* Scrollbar styling for filter container */
#filterModal .filter-form-container::-webkit-scrollbar {
  width: 6px;
}

#filterModal .filter-form-container::-webkit-scrollbar-track {
  background: var(--bs-gray-100);
}

#filterModal .filter-form-container::-webkit-scrollbar-thumb {
  background: var(--bs-gray-400);
  border-radius: 3px;
}

#filterModal .filter-form-container::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gray-500);
}

/* Mobile adjustments for filter modal */
@media (max-width: 576px) {
  #filterModal .col-sm-4,
  #filterModal .col-sm-8 {
    width: 100%;
    max-width: 100%;
    padding: 0 0.5rem;
  }
  
  #filterModal .col-form-label {
    text-align: left !important;
    margin-bottom: 0.25rem;
  }
}

/* Search button styling */
.btn i {
  margin-right: 0.25rem;
}

/* Gap utility for flexbox (Bootstrap 5.1+) */
.gap-2 {
  gap: 0.5rem !important;
}

/* Filter button enhancements */
.sf_admin_header .btn-outline-secondary:has(.badge) {
  position: relative;
}

.sf_admin_header .btn-outline-secondary .badge,
.sf_admin_header .btn-group .btn .badge {
  font-size: 0.65rem;
  padding: 0.125rem 0.375rem;
}

.sf_admin_header .btn-outline-secondary .badge.bg-primary,
.sf_admin_header .btn-group .btn .badge.bg-primary {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-dark) !important;
  animation: pulse 2s infinite;
}

.sf_admin_header .btn-outline-secondary .badge.bg-danger,
.sf_admin_header .btn-group .btn .badge.bg-danger {
  background-color: var(--bs-danger) !important;
  color: var(--bs-white) !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Active filter indicator - solid buttons already styled above */

/* ========================================
   Enhanced Visual Effects
   ======================================== */

/* Glassmorphism effect for cards */
.card.glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Enhanced shadows */
.shadow-soft {
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
}

.shadow-hover {
  transition: box-shadow 0.3s ease-in-out;
}

.shadow-hover:hover {
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.15);
}

/* Gradient buttons */
.btn-gradient-primary {
  background: linear-gradient(135deg, var(--bs-primary) 0%, #0056b3 100%);
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-gradient-primary:hover {
  background: linear-gradient(135deg, #0056b3 0%, var(--bs-primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.3);
}

/* Animated underline for links */
.link-animated {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--bs-primary);
  transition: width 0.3s ease;
}

.link-animated:hover::after {
  width: 100%;
}

/* Enhanced form controls */
.form-control-modern {
  border: 2px solid transparent;
  background-color: var(--bs-gray-100);
  transition: all 0.3s ease;
}

.form-control-modern:focus {
  background-color: white;
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.1);
}

/* Set max-width for all form controls to improve readability */
.sf_admin_form .form-control,
.sf_admin_form .form-select {
  max-width: 600px;
}

/* Smaller max-width for compact controls */
.sf_admin_form .form-control-sm,
.sf_admin_form .form-select-sm {
  max-width: 500px;
}

/* Different max-widths for specific input types */
.sf_admin_form input[type="number"].form-control,
.sf_admin_form input[type="tel"].form-control,
.sf_admin_form input[type="date"].form-control,
.sf_admin_form input[type="datetime-local"].form-control,
.sf_admin_form input[type="time"].form-control,
.sf_admin_form input[type="month"].form-control,
.sf_admin_form input[type="week"].form-control {
  max-width: 250px;
}

/* Wider for textareas to accommodate more content */
.sf_admin_form textarea.form-control {
  max-width: 800px;
}

/* Full width for specific widgets that need it */
.sf_admin_form .widget-transfer-data .form-control,
.sf_admin_form .widget-object-manager .form-control {
  max-width: 100%;
}

/* Skeleton loader animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background-color: var(--bs-gray-200);
  background-image: linear-gradient(
    90deg,
    var(--bs-gray-200),
    var(--bs-gray-100),
    var(--bs-gray-200)
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  animation: skeleton-loading 1.4s ease-in-out infinite;
}

/* Progress indicator */
.progress-thin {
  height: 4px;
}

.progress-animated {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-bar-stripes 1s linear infinite;
}

/* Custom scrollbar for all scrollable elements */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--bs-gray-100);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--bs-gray-400);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--bs-gray-600);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Navbar mobile adjustments */
  .navbar {
    padding: 0.5rem 0;
  }
  
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  .navbar-brand .badge {
    font-size: 0.5rem;
    padding: 0.125rem 0.375rem;
  }
  
  .navbar .btn-outline-light {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
  }
  
  .navbar-text {
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
  }
  
  .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0.5rem -1rem -0.5rem -1rem;
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .navbar-nav {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }
  /* Header responsiveness */
  .sf_admin_header {
    padding: 0.75rem;
  }
  
  .sf_admin_header_content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .sf_admin_title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  .sf_admin_actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .sf_admin_actions .btn-group {
    flex: 1 1 auto;
  }
  
  .sf_admin_actions .btn {
    flex: 1 1 auto;
  }
  .sf_admin_list table {
    font-size: 0.875rem;
  }
  
  .sf_admin_list th,
  .sf_admin_list td {
    padding: 0.5rem;
  }
  
  .sf_admin_actions .sf_admin_action_new a {
    width: 100%;
    justify-content: center;
  }
  
  .sf_admin_filter form {
    grid-template-columns: 1fr;
  }
  
  .sf_admin_pagination {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  #filterModal .modal-dialog {
    margin: 0.5rem;
  }
  
  /* Mobile-specific table layout */
  @media (max-width: 576px) {
    .sf_admin_list table {
      display: block;
    }
    
    .sf_admin_list thead {
      display: none;
    }
    
    .sf_admin_list tbody {
      display: block;
    }
    
    .sf_admin_list tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid var(--bs-gray-300);
      border-radius: 0.5rem;
      padding: 1rem;
      background: white;
    }
    
    .sf_admin_list td {
      display: block;
      text-align: right;
      padding-left: 50%;
      position: relative;
      border: none;
    }
    
    .sf_admin_list td::before {
      content: attr(data-label);
      position: absolute;
      left: 0;
      width: 45%;
      padding-left: 1rem;
      font-weight: 600;
      text-align: left;
    }
  }
}

/* ========================================
   Favorites Feature Styling
   ======================================== */

.favorite-toggle {
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.list-group-item:hover .favorite-toggle {
  opacity: 1;
}

.favorite-toggle:hover {
  color: var(--bs-warning) !important;
}

.favorite-toggle:focus {
  outline: none;
  box-shadow: none;
}

.favorite-toggle i {
  font-size: 0.875rem;
  transition: transform 0.2s ease;
}

.favorite-toggle:hover i {
  transform: scale(1.2);
}

.favorite-toggle i.fas {
  color: var(--bs-warning);
}

/* Dashboard favorites container */
#dashboard-favorites-container .list-group-item {
  background-color: transparent;
  border: none;
}

#dashboard-favorites-container .list-group-item:hover {
  background-color: var(--bs-gray-100);
}

#dashboard-favorites-container .remove-favorite {
  opacity: 0;
  transition: opacity 0.2s ease;
}

#dashboard-favorites-container .list-group-item:hover .remove-favorite {
  opacity: 1;
}

/* Navigation favorites */
#nav-favorites-section {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}

#nav-favorites-section .nav-link {
  font-size: 0.875rem;
  padding: 0.375rem 3rem 0.375rem 2.5rem;
  position: relative;
}

/* Drag and drop styling */
.favorite-item {
  cursor: move;
  transition: all 0.2s ease;
  position: relative;
}

.favorite-item:hover .drag-handle {
  opacity: 0.5 !important;
}

.favorite-item.dragging {
  opacity: 0.4;
  cursor: grabbing;
  background-color: var(--bs-gray-200);
  transform: scale(0.95);
}

.favorite-item.dragging .nav-link {
  background-color: transparent;
}

.favorite-item .drag-handle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
  cursor: grab;
}

.favorite-item:active .drag-handle {
  cursor: grabbing;
}

/* Drop zone indicators */
.favorite-item.drag-over-top::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--bs-primary);
  border-radius: 2px;
  animation: dropZonePulse 0.5s ease-in-out infinite;
}

.favorite-item.drag-over-bottom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--bs-primary);
  border-radius: 2px;
  animation: dropZonePulse 0.5s ease-in-out infinite;
}

@keyframes dropZonePulse {
  0%, 100% {
    opacity: 0.5;
    transform: scaleX(0.95);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Placeholder for empty favorites during drag */
#nav-favorites-section ul:empty::after {
  content: 'Drop here to add favorite';
  display: block;
  padding: 0.5rem 1rem;
  color: var(--bs-gray-600);
  font-style: italic;
  font-size: 0.875rem;
  text-align: center;
  border: 2px dashed var(--bs-gray-400);
  border-radius: 0.25rem;
  margin: 0.25rem;
}

/* Language selector styling */
footer form[action*="change_culture"] {
  margin: 0;
}

footer form[action*="change_culture"] .form-select-sm {
  padding: 0.25rem 2rem 0.25rem 0.5rem;
  font-size: 0.875rem;
  min-width: 120px;
}

footer form[action*="change_culture"] .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Responsive language selector */
@media (max-width: 768px) {
  footer .row {
    text-align: center !important;
  }
  
  footer .col-md-6 {
    text-align: center !important;
    margin-bottom: 0.5rem;
  }
  
  footer .col-md-6:last-child {
    margin-bottom: 0;
  }
  
  footer form[action*="change_culture"] {
    justify-content: center !important;
  }
}

/* Favorites animations */
@keyframes favoriteAdded {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.3) rotate(-15deg);
  }
  50% {
    transform: scale(1.3) rotate(15deg);
  }
  75% {
    transform: scale(1.3) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes favoriteRemoved {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.8) rotate(180deg);
    opacity: 0.5;
  }
}

/* ========================================
   Compact Form Styles
   ======================================== */

/* Compact form tabs */
.sf_admin_form .nav-tabs {
  --bs-nav-tabs-link-padding-y: 0.25rem;
  --bs-nav-tabs-link-padding-x: 0.75rem;
}

.sf_admin_form .nav-tabs .nav-link {
  font-size: 0.875rem;
}

.sf_admin_form .tab-content {
  padding-top: 0.5rem;
}

/* Compact form controls */
.form-control-sm,
.form-select-sm {
  min-height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* Ensure select boxes have consistent height */
.form-select-sm {
  padding-right: 2.25rem;
  background-size: 16px 12px;
}

/* Compact labels */
.form-label.small {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Compact fieldsets */
.sf_admin_form .card {
  --bs-card-spacer-y: 0.5rem;
  --bs-card-spacer-x: 0.75rem;
}

/* Compact action buttons in header */
.sf_admin_header .sf_admin_actions .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.75rem;
  font-size: 0.875rem;
}

/* Single checkbox styling */
.sf_admin_form .form-check-single {
  min-height: 1.5rem;
  display: flex;
  align-items: center;
}

.sf_admin_form .form-check-single .form-check-input {
  margin-top: 0;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* Checkbox list styling - remove bullets */
.sf_admin_form .form-check-list ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.sf_admin_form .form-check-list li {
  list-style: none;
  margin-bottom: 0.25rem;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
}

.sf_admin_form .form-check-list li:last-child {
  margin-bottom: 0;
}

.sf_admin_form .form-check-list label {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: normal;
  margin-bottom: 0;
}

.sf_admin_form .form-check-list input[type="checkbox"],
.sf_admin_form .form-check-list input[type="radio"] {
  margin-right: 0.5rem;
  margin-top: 0;
  flex-shrink: 0;
}

/* Ensure consistent checkbox size */
.sf_admin_form .form-check-input {
  width: 1em;
  height: 1em;
}

/* ========================================
   Media Manager Styles
   ======================================== */

/* Media gallery cards */
.media-card {
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--bs-gray-300);
}

.media-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  border-color: var(--bs-primary);
}

.media-card .card-img-top {
  height: 200px;
  object-fit: cover;
  background-color: var(--bs-gray-100);
}

.media-card .form-check-input {
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--bs-gray-600);
}

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

/* Media preview thumbnails */
.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-gray-300);
  border-radius: var(--bs-border-radius);
  transition: all 0.2s ease;
}

.img-thumbnail:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

/* Media list view */
.media-list-item {
  transition: background-color 0.2s ease;
}

.media-list-item:hover {
  background-color: var(--bs-gray-100);
}

/* Media upload area */
.media-upload-zone {
  border: 2px dashed var(--bs-gray-400);
  border-radius: var(--bs-border-radius-lg);
  padding: 2rem;
  text-align: center;
  background-color: var(--bs-gray-100);
  transition: all 0.3s ease;
}

.media-upload-zone:hover {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.media-upload-zone.dragging {
  border-color: var(--bs-success);
  background-color: rgba(var(--bs-success-rgb), 0.1);
}

/* Media filters */
.media-filter-tags .badge {
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-filter-tags .badge:hover {
  transform: scale(1.1);
}

/* Remove hover effects from badges in user list (groups and regions columns) */
.sf_admin_list td .badge {
  cursor: default !important;
  pointer-events: none;
  margin: 0.25rem !important;  /* Consistent margin for all badges */
}

/* But allow expand buttons to be clickable */
.sf_admin_list td .badge.expand-badge-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
  background-color: transparent !important;
  color: #6c757d !important; /* Gray text */
  border: 1px solid #6c757d !important;
  transition: all 0.2s ease;
}

/* Hover effect for expand button - fill with gray */
.sf_admin_list td .badge.expand-badge-btn:hover {
  background-color: #6c757d !important; /* Fill with gray */
  color: white !important;
  border-color: #6c757d !important;
}

/* Filter button active state enhancement */
.btn-primary .fa-filter {
  animation: filterPulse 2s ease-in-out infinite;
}

@keyframes filterPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Reset filter button styling - specific to filter reset button */
.btn-filter-reset .fa-times-circle {
  transition: transform 0.3s ease;
}

.btn-filter-reset:hover .fa-times-circle {
  transform: rotate(90deg);
}

/* Filter active badge styling */
.btn-primary .badge.bg-white {
  font-weight: bold;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
  animation: badgeGlow 2s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.3);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
  }
}

/* Badge fade-in animation */
@keyframes badgeFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.badge-fade-in {
  animation: badgeFadeIn 0.3s ease-out forwards;
  display: inline-block !important;
}


.sf_admin_list td .badge:hover {
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Expandable badge toggle button styling */
.expandable-badge-toggle {
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.expandable-badge-toggle:hover {
  transform: translateY(-1px) !important;
  opacity: 0.9 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.expandable-badge-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

/* Container for mandant badges */
.mandant-badges-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.mandant-badges-container .badge {
  margin-bottom: 0 !important;
}

/* Lightbox enhancement */
[data-bs-toggle="lightbox"] {
  cursor: zoom-in;
}

/* Media type icons */
.media-type-icon {
  font-size: 3rem;
  color: var(--bs-gray-500);
}

.media-type-icon.fa-file-pdf {
  color: #dc3545;
}

.media-type-icon.fa-file-word {
  color: #0d6efd;
}

.media-type-icon.fa-file-excel {
  color: #198754;
}

.media-type-icon.fa-file-video {
  color: #6f42c1;
}

/* ========================================
   HTML5 Date/DateTime Input Styles
   ======================================== */

/* Constrain HTML5 date inputs to appropriate width */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="month"].form-control,
input[type="week"].form-control {
  max-width: 220px;
}

input[type="date"].form-control-sm,
input[type="datetime-local"].form-control-sm,
input[type="time"].form-control-sm,
input[type="month"].form-control-sm,
input[type="week"].form-control-sm {
  max-width: 180px;
}

/* Ensure date inputs don't stretch in flex containers */
.row input[type="date"],
.row input[type="datetime-local"],
.row input[type="time"],
.row input[type="month"],
.row input[type="week"] {
  width: auto !important;
  flex: 0 0 auto;
}

/* ========================================
   Translation Tabs - Nested i18n tabs
   ======================================== */

.translation-tabs-wrapper {
  background-color: #f8f9fa;
  border-radius: 0.25rem;
  padding: 0.125rem;
  margin-top: 0;
}

.translation-tabs-wrapper .nav-tabs {
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 0.125rem;
}

.translation-tabs-wrapper .nav-tabs .nav-link {
  color: #6c757d;
  background-color: transparent;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  padding: 0.25rem 0.5rem !important; /* Override sf_admin_form padding */
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: -1px;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.translation-tabs-wrapper .nav-tabs .nav-link:hover {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  border-color: transparent transparent #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
}

.translation-tabs-wrapper .nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background-color: white;
  border-color: #dee2e6 #dee2e6 white !important;
  border-bottom: 1px solid var(--bs-primary) !important;
}

.translation-tabs-wrapper .tab-content {
  background-color: white;
  border: 1px solid #dee2e6;
  border-radius: 0 0 0.25rem 0.25rem;
  padding: 0.5rem;
  margin-top: -1px;
}

/* Special handling for tab-content containing Trix editors */
.translation-tabs-wrapper .tab-content:has(trix-editor) {
  padding-left: 0.5rem;
  padding-right: 0;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Language-specific icons/flags - removed to save space */

/* Responsive adjustments for translation tabs */
@media (max-width: 768px) {
  .translation-tabs-wrapper {
    padding: 0.375rem;
  }
  
  .translation-tabs-wrapper .nav-tabs .nav-link {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem;
  }
  
  .translation-tabs-wrapper .tab-content {
    padding: 0.75rem;
  }
}

/* Make tabs more compact for many languages */
.translation-tabs-wrapper .nav-tabs {
  flex-wrap: wrap;
  gap: 0;
}

.translation-tabs-wrapper .nav-tabs .nav-item {
  flex: 0 0 auto;
}

/* Remove Bootstrap's default margins and padding */
.translation-tabs-wrapper .nav-tabs .nav-item {
  margin: 0 !important;
}

.translation-tabs-wrapper .nav-tabs {
  padding-left: 0;
  margin-bottom: 0;
}

/* ========================================
   Nested Tab Styles
   ======================================== */

/* Main form tabs */
.sf_admin_form .nav-tabs {
  border-bottom: 2px solid var(--bs-gray-300);
  margin-bottom: 1.5rem;
}

.sf_admin_form .nav-tabs .nav-link {
  color: var(--bs-gray-700);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.sf_admin_form .nav-tabs .nav-link:hover {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-gray-400);
  background-color: transparent;
}

.sf_admin_form .nav-tabs .nav-link.active {
  color: var(--bs-primary);
  background-color: transparent;
  border: none;
  border-bottom: 3px solid var(--bs-primary);
}

/* Nested translation tabs */
.translation-tabs-initialized .nav-pills {
  background-color: var(--bs-gray-100);
  border-radius: var(--bs-border-radius);
  padding: 0.25rem;
}

.translation-tabs-initialized .nav-pills .nav-link {
  color: var(--bs-gray-700);
  background-color: transparent;
  border-radius: var(--bs-border-radius);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.translation-tabs-initialized .nav-pills .nav-link:hover {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.translation-tabs-initialized .nav-pills .nav-link.active {
  color: var(--bs-white);
  background-color: var(--bs-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Tab content spacing */
.translation-tabs-initialized .tab-content {
  padding: 1rem 0;
}

/* Language flag icons */
.translation-tabs-initialized .nav-link i {
  opacity: 0.8;
}

.translation-tabs-initialized .nav-link.active i {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .translation-tabs-initialized .nav-pills {
    flex-direction: column;
  }
  
  .translation-tabs-initialized .nav-pills .nav-link {
    width: 100%;
    text-align: center;
    margin-bottom: 0.25rem;
  }
  
  .translation-tabs-initialized .nav-pills .nav-link:last-child {
    margin-bottom: 0;
  }
}

/* Form field adjustments in tabs */
.translation-tabs-wrapper .form-control,
.translation-tabs-wrapper .form-select {
  max-width: 600px;
}

.translation-tabs-wrapper .form-control-sm,
.translation-tabs-wrapper .form-select-sm {
  max-width: 500px;
}

.translation-tabs-wrapper textarea.form-control {
  max-width: 800px;
}

/* Nested tab animations */
.translation-tabs-initialized .tab-pane {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================
   Login Page Styles
   ============================================ */

/* Login container centering */
.login-container {
  max-width: 400px;
  margin: 0 auto;
}

/* Consistent card styling with other modules */
.login-container .card {
  border: 1px solid rgba(0,0,0,.125);
  border-radius: 0.25rem;
}

.login-container .card-header {
  background-color: #f8f9fa;
  border-bottom: 1px solid rgba(0,0,0,.125);
}

/* ========================================
   Navigation and Layout Styles
   ======================================== */

/* Navigation section headers - responsive sizing */
.nav-header {
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  padding: 0.1875rem 0.5rem !important;
}

.nav-header .nav-item-count {
  font-size: 0.75rem; /* 12px */
  font-weight: 400;
  opacity: 0.7;
}

.nav-header i {
  font-size: 0.75rem !important; /* 12px */
}

/* Make navigation more compact on smaller screens */
@media (max-width: 1400px) {
  .nav-header {
    font-size: 0.875rem; /* 14px */
    padding: 0.125rem 0.5rem !important;
  }
  
  .nav-header i {
    font-size: 0.6875rem !important; /* 11px */
  }
  
  .nav-item-count {
    font-size: 0.6875rem !important; /* 11px */
  }
}

@media (max-width: 1200px) {
  .nav-header {
    font-size: 0.8125rem; /* 13px */
    padding: 0.125rem 0.5rem !important;
  }
  
  .admin-sidebar {
    font-size: 0.875rem;
  }
  
  .nav-section {
    margin-bottom: 0.5rem !important;
  }
}

@media (max-width: 992px) {
  .nav-header {
    font-size: 0.75rem; /* 12px */
    padding: 0.125rem 0.375rem !important;
  }
  
  .nav-header-text {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.125rem;
  }
  
  /* Hide icon on very small screens to save space */
  @media (max-width: 768px) {
    .nav-header i.me-2 {
      display: none;
    }
  }
}

/* Navigation links responsive sizing */
.admin-sidebar .nav-link {
  padding: 0.375rem 0.75rem 0.375rem 2rem;
  font-size: 0.875rem; /* 14px */
}

@media (max-width: 1400px) {
  .admin-sidebar .nav-link {
    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
    font-size: 0.8125rem; /* 13px */
  }
}

@media (max-width: 1200px) {
  .admin-sidebar .nav-link {
    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
    font-size: 0.75rem; /* 12px */
  }
}

@media (max-width: 992px) {
  .admin-sidebar .nav-link {
    padding: 0.1875rem 0.375rem 0.1875rem 1.25rem;
    font-size: 0.6875rem; /* 11px */
  }
}

/* Adjust chevron icon size on smaller screens */
.nav-toggle-icon {
  font-size: 0.625rem !important; /* 10px */
}

@media (max-width: 1200px) {
  .nav-toggle-icon {
    font-size: 0.5625rem !important; /* 9px */
  }
}

/* Form Position List Styles */
.position-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.position-item {
  display: flex;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  position: relative;
}

.position-item.current {
  background-color: var(--bs-primary-bg-subtle);
  margin: 0 -0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

.position-number {
  color: var(--bs-gray-600);
  margin-right: 0.5rem;
  min-width: 1.5rem;
}

.position-name {
  flex: 1;
}

.position-indicator {
  margin-left: 0.5rem;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Quick-move control strip shown above long sortable position lists. */
.position-quick-move {
  font-size: 0.8125rem;
}
.position-quick-move .btn {
  padding: 0.15rem 0.45rem;
  line-height: 1.2;
}
.position-quick-move .input-group {
  flex: 0 1 auto;
}
.position-quick-move input[type=number] {
  -moz-appearance: textfield;
  max-width: 6rem;
}
.position-quick-move input[type=number]::-webkit-inner-spin-button,
.position-quick-move input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Suppress transitions on the item being dragged — avoids style-recalc storms
   when dragover fires ~60 Hz across hundreds of siblings. */
.position-item.dragging {
  opacity: 0.5;
  transition: none;
}

/* Compact Data Tables - Generic Styles */
.data-table-wrapper {
  background-color: var(--bs-gray-50, #fafafa);
  border-radius: 0.25rem;
  overflow: hidden;
}

.data-table-wrapper table,
.compact-data-table {
  margin-bottom: 0;
  font-size: 0.8125rem; /* 13px */
}

.data-table-wrapper table th,
.data-table-wrapper table td,
.compact-data-table th,
.compact-data-table td {
  padding: 0.2rem 0.4rem;
  line-height: 1.3;
}

/* Even more compact variant */
.data-table-wrapper.extra-compact table,
.compact-data-table.extra-compact {
  font-size: 0.75rem; /* 12px */
}

.data-table-wrapper.extra-compact table th,
.data-table-wrapper.extra-compact table td,
.compact-data-table.extra-compact th,
.compact-data-table.extra-compact td {
  padding: 0.15rem 0.3rem;
  line-height: 1.2;
}

/* Value cells styling */
.data-table-wrapper table td.value,
.compact-data-table td.value {
  background-color: var(--bs-gray-100);
  text-align: center;
  font-weight: 500;
}

/* Remove borders for cleaner look in wrapper */
.data-table-wrapper table {
  border: none;
}

.data-table-wrapper table > :not(:first-child) {
  border-top: 1px solid var(--bs-gray-300);
}

/* Clean row borders for better readability */
.compact-data-table tbody tr,
.data-table-wrapper table tbody tr {
  border-bottom: 1px solid var(--bs-gray-200);
}

.compact-data-table tbody tr:last-child,
.data-table-wrapper table tbody tr:last-child {
  border-bottom: none;
}

/* Hierarchical data tables (like product data) - Category headers */
.data-table-wrapper.hierarchical table thead.table-secondary th,
.compact-data-table.hierarchical thead.table-secondary th {
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding-top: 0.4rem;
  padding-bottom: 0.2rem;
  background-color: var(--bs-gray-200);
  border-bottom: 1px solid var(--bs-gray-400);
}

/* First column styling for hierarchical tables */
.data-table-wrapper.hierarchical table tbody th,
.compact-data-table.hierarchical tbody th {
  font-weight: normal;
  background-color: transparent;
  padding-right: 2rem;
  text-align: left;
  min-width: 250px;
}

/* Fixed width value columns */
.data-table-wrapper.fixed-columns table tbody td.value,
.compact-data-table.fixed-columns tbody td.value {
  width: 200px;
  max-width: 200px;
}

/* Icon-only action columns */
.compact-data-table th.actions,
.compact-data-table td.actions {
  width: 50px;
  text-align: center;
}

/* Edit icons on hover */
.compact-data-table .fa-edit,
.data-table-wrapper table .fa-edit {
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 0.75rem;
}

.compact-data-table tr:hover .fa-edit,
.data-table-wrapper table tr:hover .fa-edit {
  opacity: 1;
}

/* Cards containing data tables */
.card .data-table-wrapper {
  background-color: transparent;
}

/* Generic data frame styling - consistent appearance for all data frames */
.data-frame .card-body {
  background-color: var(--bs-gray-50, #fafafa);
  padding: 0.5rem;
}

.data-frame .data-table-wrapper {
  background-color: transparent;
}

/* Specific styling for product data frames (kept for backward compatibility) */
#product_data_frame .card-body,
#product_priceoptions_frame .card-body {
  background-color: var(--bs-gray-50, #fafafa);
}

/* Product data table enhancements */
#product_data {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

/* Remove all default borders first */
#product_data th,
#product_data td {
  border: none !important;
}

/* Variant column headers */
#product_data > thead > tr > th:not(:first-child) {
  border-left: 1px solid #dee2e6 !important;
  text-align: center;
  background-color: var(--bs-gray-100);
  font-weight: 600;
  min-width: 150px;
}

/* Center all value cells */
#product_data td.value {
  text-align: center !important;
  vertical-align: middle;
}

/* Add light gray borders to all cells in all rows (including category headers) */
#product_data th:not(:first-child),
#product_data td:not(:first-child) {
  border-left: 1px solid #dee2e6 !important;
}

/* Highlight cells that apply to all variants */
#product_data tbody td[colspan] {
  background-color: var(--bs-blue-100);
  border: 1px solid var(--bs-blue-200);
  text-align: center !important;
}

/* Ensure proper spacing for value display */
#product_data td.value > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

#product_data td.value span {
  flex: 1;
}

/* ============================================
   Image Manager Modern Styles
   ============================================ */

.image-manager-modern {
  margin: 0.5rem 0;
}

.image-manager-modern .image-preview {
  min-width: 150px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-manager-modern .image-preview img {
  object-fit: contain;
}

.image-manager-modern .image-preview .bg-light {
  background-color: #f8f9fa !important;
}

.image-manager-modern .image-actions button {
  white-space: nowrap;
}

.image-manager-modern .spinner-border {
  width: 1.5rem;
  height: 1.5rem;
}

.image-manager-modern .alert {
  font-size: 0.875rem;
}


/* ============================================
   Media Library Components Styling
   ============================================ */

/* Media Search Container */
.media-search-container {
  padding: 0.5rem;
}

/* Media Filter Form */
.media-filter-form .row {
  margin: 0;
}

.media-filter-form .form-label {
  font-weight: 500;
  color: var(--bs-gray-700);
  margin-bottom: 0.25rem;
}

.media-filter-form .form-label-sm {
  font-size: 0.8125rem;
}

.media-filter-form .form-control,
.media-filter-form .form-select {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

.media-filter-form .form-control-sm,
.media-filter-form .form-select-sm {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  height: calc(1.5em + 0.5rem + 2px);
}

.media-filter-form .form-text {
  font-size: 0.75rem;
  color: var(--bs-gray-600);
}

/* Compact filter layout */
.media-filter-form .mb-2:last-child {
  margin-bottom: 0 !important;
}

/* Inline filter layout */
.media-filter-form .d-flex > .flex-fill {
  min-width: 0; /* Allow flex items to shrink */
}

.media-filter-form .d-flex .form-control-sm {
  min-width: 120px;
}

/* Remove margins from filter fields in inline layout */
.media-filter-form .d-flex .mb-2 {
  margin-bottom: 0 !important;
}

/* Filter form button group */
.media-filter-form .btn-group .btn {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* Modal specific adjustments */
.modal-lg .media-search-container {
  padding: 0;
}

.modal-lg .media-filter-form .card {
  border: none;
  box-shadow: none;
}

.modal-lg .media-filter-form .card-header {
  background-color: var(--bs-gray-100);
  border-bottom: 1px solid var(--bs-gray-300);
}

/* Sort controls styling */
.media-search-container .btn-group-sm .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
}

.media-search-container .btn-group-sm .btn i {
  font-size: 0.625rem;
}

/* Media grid enhancements */
.media-search-container .media-card {
  border: 1px solid var(--bs-gray-300);
  transition: all 0.2s ease;
}

.media-search-container .media-card:hover {
  border-color: var(--bs-primary);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.media-search-container .media-card .btn {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Responsive grid adjustments for modal */
@media (min-width: 992px) {
  .modal-lg .media-search-container .col-lg-3 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 1200px) {
  .modal-lg .media-search-container .col-lg-3 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
}

/* Pagination styling in modal */
.media-search-container .pagination-wrapper {
  background-color: var(--bs-gray-100);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.media-search-container .pagination-info {
  font-size: 0.875rem;
  color: var(--bs-gray-700);
}

.media-search-container .pagination .page-link {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

/* Media card image consistency */
.media-search-container .card-img-top {
  background-color: var(--bs-gray-100);
  border-bottom: 1px solid var(--bs-gray-200);
}

/* Filter field spacing */
.media-filter-form .mb-3:last-child {
  margin-bottom: 0 !important;
}

/* Compact styling for modal display */
.modal-lg .media-search-container .card-body {
  padding: 1rem;
}

.modal-lg .media-search-container .form-label {
  font-size: 0.8125rem;
}

.modal-lg .media-search-container .form-control,
.modal-lg .media-search-container .form-select {
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
}

/* Make modal wider when showing media library */
.modal-xl-custom {
  max-width: 90vw;
}

.modal-xl-custom .modal-dialog {
  max-width: 90vw;
}

/* Ensure proper spacing in media modal */
.modal-xl-custom .modal-body {
  padding: 0.5rem;
}

/* Grid view toggle button styling */
.media-search-container .btn-outline-secondary.active {
  background-color: var(--bs-gray-200);
  border-color: var(--bs-gray-400);
  color: var(--bs-gray-800);
}

/* Combined filter and pagination layout */
.media-search-container .row > .col-lg-8,
.media-search-container .row > .col-lg-4 {
  margin-bottom: 0;
}

/* Ensure cards have same height in row */
.media-search-container .row > div > .card {
  height: 100%;
}

/* Pagination card in sidebar */
.media-search-container .pagination-wrapper {
  background-color: transparent;
  padding: 0;
}

/* Responsive layout for filter/pagination combination */
@media (max-width: 991px) {
  .media-search-container .row > .col-lg-8,
  .media-search-container .row > .col-lg-4 {
    margin-bottom: 1rem;
  }
  
  .media-search-container .row > .col-lg-4:last-child {
    margin-bottom: 0;
  }
}

/* ============================================
   Media Library Component Styles
   ============================================ */

/* Compact Filter and Pagination Cards */
.media-library-filter .card,
.media-library-pagination .card {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.media-library-filter .card-header,
.media-library-pagination .card-header {
  height: 2rem;
  min-height: 2rem;
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
}

/* Hide BR tags that Symfony 1.x form widgets add */
.media-library-filter br,
.media-library-pagination br {
  display: none !important;
}

/* Reduce card body padding */
.media-library-filter .card-body {
  padding: 0.25rem !important;
}

.media-library-pagination .card-body {
  padding: 0.5rem 0.25rem !important;
}

.media-library-filter .btn-sm,
.media-library-pagination .btn-sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Make sort buttons match filter buttons */
.media-library-pagination .btn-group-sm .btn {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* File type buttons in filter header - same style as sort buttons */
.media-library-filter .btn-group-sm .btn {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Active filter state visual feedback */
.media-library-filter .btn-group-sm .btn.btn-primary {
  font-weight: 600;
}

.media-library-filter .btn-group-sm .btn .fa-check {
  font-size: 0.625rem;
}

/* All pagination buttons - same height as form fields */
.media-library-pagination .pagination-sm .page-link,
.media-library-pagination .pagination-sm .page-item .page-link {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.75rem !important;
  line-height: 1.5 !important;
  min-height: calc(1.5rem + 2px) !important;
  height: calc(1.5rem + 2px) !important;
}

/* Page count styling */
.media-library-pagination .text-center small {
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem !important;
}

.media-library-filter .form-label {
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
}

.media-library-filter .form-control-sm {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}

/* Media Grid Items */
.media-library-grid .media-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 1px solid #dee2e6;
  overflow: visible !important;
}

.media-library-grid .media-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.media-library-grid .media-card .card-img-top {
  height: 120px;
  object-fit: cover;
  background-color: #f8f9fa;
}

.media-library-grid .media-card .form-check-input {
  cursor: pointer;
  width: 0.875rem;
  height: 0.875rem;
}

.media-library-grid .media-card .card-body {
  padding: 0.5rem;
}

.media-library-grid .media-card .card-title {
  font-size: 0.75rem;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.media-library-grid .media-card .btn {
  font-size: 0.7rem;
  padding: 0.125rem 0.25rem;
}

/* ========================================
   Image Preview Placeholders
   ======================================== */

/* Placeholder container for list views */
.image-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-300);
  border-radius: 0.25rem;
  position: relative;
  overflow: hidden;
}

/* Placeholder icon styling */
.image-placeholder i {
  font-size: 0.875rem;
  color: var(--bs-gray-400);
  opacity: 0.5;
}

/* Subtle pattern background */
.image-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.03) 10px,
    rgba(0, 0, 0, 0.03) 20px
  );
  pointer-events: none;
}


/* Make placeholder match thumbnail styling */
.image-placeholder.img-thumbnail {
  padding: 0;
  background-color: var(--bs-gray-100);
  cursor: default;
}

/* Disable hover effects for placeholders */
.image-placeholder.img-thumbnail:hover {
  border-color: var(--bs-gray-300);
  box-shadow: none;
}



/* Sortable position list enhancements */
.position-list.sortable .position-item {
  transition: background-color 0.2s ease;
  user-select: none;
}

.position-list.sortable .drag-handle {
  cursor: grab;
  margin-right: 0.5rem;
  opacity: 0.3;
  transition: opacity 0.2s ease;
  display: inline-block;
  padding: 0.25rem;
}

.position-list.sortable .position-item:hover .drag-handle {
  opacity: 1;
}

.position-list.sortable .drag-handle:active {
  cursor: grabbing;
}

.position-list.sortable .position-item[draggable="true"] {
  cursor: move;
}

.position-list.sortable .position-item.dragging {
  opacity: 0.4;
  background-color: var(--bs-gray-100);
}

.position-list.sortable .position-item.placeholder {
  list-style: none;
  background-color: var(--bs-gray-200);
  border: 2px dashed var(--bs-gray-400);
  opacity: 0.5;
}


/* Sortable Position List */
.position-list.sortable {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0.5rem;
}

.position-list.sortable .position-item {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-300);
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.position-list.sortable .position-item[draggable="true"] {
  cursor: move;
}

.position-list.sortable .position-item:hover {
  background-color: var(--bs-gray-200);
}

.position-list.sortable .position-item.current {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary);
  font-weight: 600;
}

.position-list.sortable .position-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.position-list.sortable .drag-handle {
  cursor: grab;
  margin-right: 0.5rem;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

.position-list.sortable .position-item:hover .drag-handle {
  opacity: 0.7;
}

.position-list.sortable .position-number {
  margin-right: 0.5rem;
  color: var(--bs-gray-600);
  font-size: 0.875rem;
}

.position-list.sortable .position-name {
  flex-grow: 1;
}

.position-list.sortable .position-indicator {
  margin-left: 0.5rem;
  color: var(--bs-primary);
}


/* Position save success animation */
.position-list.sortable .position-item.save-success {
  animation: saveSuccess 0.6s ease-out;
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success);
}

@keyframes saveSuccess {
  0% {
    transform: translateX(0) scale(1);
    background-color: var(--bs-gray-100);
  }
  50% {
    transform: translateX(3px) scale(1.02);
    background-color: var(--bs-success-bg-subtle);
    box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
  }
  100% {
    transform: translateX(0) scale(1);
    background-color: var(--bs-success-bg-subtle);
  }
}

/* Optional: Add a checkmark that appears briefly */
.position-list.sortable .position-item.save-success::after {
  content: "✓";
  position: absolute;
  right: 10px;
  color: var(--bs-success);
  font-size: 1.2rem;
  font-weight: bold;
  animation: checkFade 0.6s ease-out;
}

@keyframes checkFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}


/* Ensure position items have relative positioning for the checkmark */
.position-list.sortable .position-item {
  position: relative;
}

/* Children form element styling */
.list-group-item-action {
  transition: background-color 0.15s ease-in-out;
}

.list-group-item-action:hover {
  background-color: var(--bs-gray-100);
}

.list-group-item-action .fas {
  font-size: 0.875rem;
}

.list-group-item-action .fa-chevron-right {
  font-size: 0.75rem;
  transition: transform 0.15s ease-in-out;
}

.list-group-item-action:hover .fa-chevron-right {
  transform: translateX(3px);
}

/* ========================================
   Media Browser File Preview Enhancements
   ======================================== */

/* File Preview Container - ensures consistent height */
.file-preview-container {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  overflow: hidden;
  position: relative;
}

/* File Icon Container - consistent height for all file types */
.file-icon-container {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.file-icon-container i {
  margin-bottom: 0.5rem;
}

.file-icon-container .small {
  font-size: 0.75rem;
  color: #6c757d;
  text-align: center;
  padding: 0 0.5rem;
}

/* Ensure images maintain aspect ratio without breaking layout */
.media-library-grid .file-preview-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* Error state styling for broken images */
.file-icon-container .fa-image-slash {
  color: #dc3545;
}

/* File Type Badge Overlay */
.file-type-badge {
  font-size: 0.625rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Ensure badge stays visible on hover */
.media-card:hover .file-type-badge {
  opacity: 1;
}

/* Badge positioning adjustments for small screens */
@media (max-width: 576px) {
  .file-type-badge {
    font-size: 0.5625rem;
    padding: 0.2rem 0.4rem;
    margin: 0.5rem !important;
  }
}

/* =============================================
   Content Media Manager
   ============================================= */

.content-media-manager {
  min-height: 100px;
}

.content-media-actions {
  margin-bottom: 1rem;
}

.content-media-actions .btn {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.content-media-items {
  min-height: 60px;
}

/* Media Item Card */
.media-item-card {
  transition: all 0.2s ease;
  border: 1px solid #dee2e6;
  margin-bottom: 0.5rem;
  cursor: move;
}

.media-item-card.dragging {
  opacity: 0.5;
  transform: rotate(2deg);
}

.media-item-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #adb5bd;
}

.media-item-card .card-body {
  padding: 0.75rem;
}

/* Drag Handle */
.drag-handle {
  cursor: move;
  color: #adb5bd;
  transition: color 0.2s ease;
}

.drag-handle:hover {
  color: #6c757d;
}

/* Media Preview */
.media-preview {
  width: 80px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
  overflow: hidden;
}

.media-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.media-preview i {
  font-size: 2rem;
}

/* Media Content */
.media-item-card h6 {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.media-item-card .small {
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Action Buttons */
.media-item-card .btn-group-sm .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* Loading Overlay */
.content-media-manager [x-cloak] {
  display: none !important;
}

/* Drag Over Effect */
.content-media-items.drag-over {
  background-color: #e7f3ff;
  border: 2px dashed #0d6efd;
  border-radius: 0.375rem;
  padding: 1rem;
}

/* Empty State */
.content-media-items .alert-info {
  background-color: #cfe2ff;
  border-color: #b6d4fe;
  color: #084298;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
  .media-preview {
    width: 60px;
    height: 45px;
  }
  
  .media-item-card .card-body {
    padding: 0.5rem;
  }
  
  .media-item-card h6 {
    font-size: 0.8125rem;
  }
  
  .content-media-actions .btn {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
  }
}

/* =================================================================
   Trix Editor Styles
   ================================================================= */

/* Make Trix editor wider and more consistent with form styling */
.trix-content {
  min-height: 200px;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

trix-editor.form-control {
  width: 100%;
  max-width: none;
}

/* Full width wrapper */
.trix-editor-wrapper {
  width: 100%;
  max-width: none;
  margin-top: 0;
  margin-left: 0;
}

/* Make the editor take full available width */
.trix-editor-wrapper trix-editor {
  width: 100% !important;
  max-width: none !important;
}

/* Improve Trix editor appearance */
trix-editor {
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
  max-height: 600px;
  margin: 0;
}

/* When height is explicitly set, ensure overflow is handled */
trix-editor[style*="height"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Hide toolbar items we don't want */
.trix-button-group--file-tools {
  display: none !important;
}

/* Improve toolbar styling */
trix-toolbar {
  width: 100%;
  margin: 0;
}

trix-toolbar .trix-button-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  border-bottom: 1px solid #dee2e6;
  padding: 0.5rem 1rem;
  background-color: #f8f9fa;
  border-radius: 0.25rem 0.25rem 0 0;
}

/* Custom button styling */
.trix-button-row--custom {
  border: 1px solid #dee2e6;
  border-bottom: 0;
  background-color: #f8f9fa;
  padding: 0.5rem;
  border-radius: 0.25rem 0.25rem 0 0;
}

/* Target rows containing Trix editor */
.row:has(trix-editor) > .col-md-3,
.row:has(trix-editor) > .col-lg-2 {
  display: none !important;
}

.row:has(trix-editor) > .col-md-9,
.row:has(trix-editor) > .col-lg-10 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
}

/* Make form rows with Trix full width */
.form-group:has(trix-editor) label {
  display: none !important;
}

.form-group:has(trix-editor) > div {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
}

/* Tab form specific adjustments */
.tab-pane .form-group:has(trix-editor) {
  margin-left: 0;
  margin-right: 0;
}

/* Trix editor in translation tabs */
.tab-pane .trix-editor-wrapper {
  margin-left: 0;
  margin-top: 0;
}

.tab-pane trix-editor {
  margin-left: 0;
  margin-top: 0;
}

/* Row containing Trix editor in translations */
.tab-pane .row:has(trix-editor) {
  margin-left: 0;
  margin-right: 0;
}

/* Column containing Trix editor in translations */
.tab-pane .row:has(trix-editor) > div {
  padding-left: 0;
}

/* Remove any padding that might be added by form formatters */
.sf_admin_form_row:has(trix-editor) > div > div {
  padding-left: 0 !important;
}

/* ========================================
   Hotspot Manager Widget - Full Width Layout
   ======================================== */

/* Target rows containing hotspot manager widget */
.row:has(.hotspot-manager-modern) > .col-md-3,
.row:has(.hotspot-manager-modern) > .col-lg-2 {
  display: none !important;
}

.row:has(.hotspot-manager-modern) > .col-md-9,
.row:has(.hotspot-manager-modern) > .col-lg-10 {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
}

/* Make form rows with hotspot manager full width */
.form-group:has(.hotspot-manager-modern) label {
  display: none !important;
}

.form-group:has(.hotspot-manager-modern) > div {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: 0;
}

/* Tab form specific adjustments */
.tab-pane .form-group:has(.hotspot-manager-modern) {
  margin-left: 0;
  margin-right: 0;
}

/* Remove any padding that might be added by form formatters */
.sf_admin_form_row:has(.hotspot-manager-modern) > div > div {
  padding-left: 0 !important;
}

/* Support for nested modals - Fixed z-index stacking */

/* First modal (hotspot edit) - needs to be above its backdrop */
#adminGenericModal {
  z-index: 1060 !important;  /* Above first backdrop (1050) */
}

/* Default Bootstrap backdrop is at 1050 */
.modal-backdrop {
  z-index: 1050;
}

/* When there are multiple modals, ensure proper stacking */
.modal-backdrop.show ~ .modal-backdrop.show {
  z-index: 1065 !important;  /* Second backdrop above first modal */
}

/* Media browser modal (second modal) should be on top of everything */
#mediaBrowserModal {
  z-index: 1070 !important;  /* Above second backdrop (1065) */
}

/* Ensure all modals are properly visible */
.modal.show {
  overflow-y: auto;
}

/* Fix for ensuring first modal stays above first backdrop */
body.modal-open #adminGenericModal.show {
  z-index: 1060 !important;
}


/* Translation form field widths - ensure full width */
.translation-tabs-wrapper .input-group {
  width: 100% !important;
  max-width: 100% !important;
}

.translation-tabs-wrapper .input-group .form-control,
.translation-tabs-wrapper .input-group .form-select,
.translation-tabs-wrapper textarea.form-control {
  flex: 1 1 auto;
  width: 100% !important;
}

/* Ensure consistent widths for fields without AI buttons */
.translation-tabs-wrapper .form-control:not(.rounded-start),
.translation-tabs-wrapper .form-select:not(.rounded-start) {
  width: 100% !important;
}


/* Magic wand animation for AI translation */
@keyframes magicPulse {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  25% {
    transform: rotate(-5deg) scale(1.1);
    opacity: 0.9;
  }
  50% {
    transform: rotate(5deg) scale(1.2);
    opacity: 1;
  }
  75% {
    transform: rotate(-3deg) scale(1.1);
    opacity: 0.9;
  }
  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

.fa-magic.fa-pulse {
  animation: magicPulse 1s ease-in-out infinite;
  transform-origin: center;
  display: inline-block;
}

/* Trix editor - 100% width */
.trix-editor-wrapper {
  width: 100% !important;
}

.trix-editor-wrapper trix-editor,
trix-editor.trix-content,
trix-editor.form-control,
trix-editor[contenteditable],
#product_option_de_description_editor,
#product_option_en_description_editor,
#product_option_fr_description_editor,
#product_option_nl_description_editor {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Override any default Trix width limitations */
trix-editor {
  max-width: none !important;
  width: 100% !important;
}

/* Hide file attachment button in Trix toolbars */
.trix-button-group--file-tools,
trix-toolbar .trix-button[data-trix-action="attachFiles"],
trix-toolbar [data-trix-button-group="file-tools"] {
  display: none !important;
}

/* ========================================
   Toast UI Editor - Bootstrap 5 Integration
   ======================================== */

/* Toast UI Editor container */
.toastui-editor-defaultUI {
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Toast UI Editor toolbar */
.toastui-editor-toolbar {
  background-color: #f8f9fa !important;
  border-bottom: 1px solid #dee2e6 !important;
  padding: 0.5rem !important;
}

/* Toast UI Editor buttons */
.toastui-editor-toolbar-icons button {
  color: #212529 !important;
  border: none !important;
  background-color: transparent !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  transition: background-color 0.2s !important;
}

.toastui-editor-toolbar-icons button:hover {
  background-color: #e9ecef !important;
}

.toastui-editor-toolbar-icons button.active {
  background-color: #dee2e6 !important;
}

/* Toast UI Editor content area */
.toastui-editor-contents {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #212529 !important;
  padding: 1rem !important;
}

/* Tables in Toast UI Editor */
.toastui-editor-contents table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1rem 0 !important;
  border: 1px solid #dee2e6 !important;
}

.toastui-editor-contents table th,
.toastui-editor-contents table td {
  border: 1px solid #dee2e6 !important;
  padding: 0.5rem 0.75rem !important;
  text-align: left !important;
}

.toastui-editor-contents table th {
  background-color: #f8f9fa !important;
  font-weight: 600 !important;
  color: #212529 !important;
}

.toastui-editor-contents table thead th {
  background-color: #e9ecef !important;
  border-bottom: 2px solid #dee2e6 !important;
}

.toastui-editor-contents table tbody tr:nth-child(even) {
  background-color: #f8f9fa !important;
}

.toastui-editor-contents table tbody tr:hover {
  background-color: #e9ecef !important;
}

/* Toast UI Editor scrollbar */
.toastui-editor-contents::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

.toastui-editor-contents::-webkit-scrollbar-thumb {
  background-color: #dee2e6 !important;
  border-radius: 4px !important;
}

.toastui-editor-contents::-webkit-scrollbar-thumb:hover {
  background-color: #ced4da !important;
}

/* Hide mode switch if configured */
.toastui-editor-mode-switch {
  display: none !important;
}

/* ========================================
   Trix Editor - Table Display Support
   ======================================== */

/* Style tables displayed in Trix content areas */
trix-editor table,
.trix-content table {
  width: auto;
  max-width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

trix-editor table th,
trix-editor table td,
.trix-content table th,
.trix-content table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
  text-align: left;
  vertical-align: top;
}

trix-editor table th,
.trix-content table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #212529;
}

trix-editor table thead th,
.trix-content table thead th {
  background-color: #e9ecef;
  border-bottom: 2px solid #dee2e6;
}

trix-editor table tbody tr:nth-child(even),
.trix-content table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

trix-editor table tbody tr:hover,
.trix-content table tbody tr:hover {
  background-color: #e9ecef;
}

/* Responsive table wrapper for smaller screens */
trix-editor table,
.trix-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 768px) {
  trix-editor table,
  .trix-content table {
    display: table;
  }
}

/* ============================================================================
   Fixed Header/Footer with Scrollable List Content
   ============================================================================ */

/* Main container for list views with sticky positioning */
.sf-admin-container-fixed {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--admin-navbar-height, 56px) - 2rem);
  position: relative;
  overflow: hidden;
}

/* Header section - not sticky, just fixed in flex layout */
.sf-admin-header-fixed {
  flex-shrink: 0;
  z-index: 100;
  background: white;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* Scrollable content area */
.sf-admin-list-scrollable {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 0; /* Important for Chrome flex children */
  position: relative;
}

/* Footer section - not sticky, just fixed in flex layout */
.sf-admin-footer-fixed {
  flex-shrink: 0;
  z-index: 100;
  background: white;
  border-top: 1px solid #dee2e6;
  padding-top: 1rem;
}

/* Override pagination wrapper padding in footer */
.sf-admin-footer-fixed .pagination-wrapper {
  padding: 0;
  margin: 0;
}

/* Ensure table is responsive within scrollable area */
.sf-admin-list-scrollable .table-responsive {
  overflow-x: auto;
}

/* Custom scrollbar styling */
.sf-admin-list-scrollable::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.sf-admin-list-scrollable::-webkit-scrollbar-track {
  background: #f8f9fa;
}

.sf-admin-list-scrollable::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.sf-admin-list-scrollable::-webkit-scrollbar-thumb:hover {
  background: #6c757d;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sf-admin-container-fixed {
    height: calc(100vh - var(--admin-navbar-height, 56px) - 1rem);
  }
}

/* Chrome-specific fixes for scrolling issues */
@supports (-webkit-appearance:none) {
  /* Prevent body from expanding beyond viewport */
  body:has(.sf-admin-container-fixed) {
    overflow: hidden;
    height: 100vh;
  }

  /* Ensure main content area doesn't exceed viewport */
  .admin-content:has(.sf-admin-container-fixed) {
    height: calc(100vh - var(--admin-navbar-height, 56px));
    overflow: hidden;
  }
}

/* ============================================================================
   Dashboard Language Selector
   ============================================================================ */

/* Language selector card in dashboard */
.dashboard-language-selector {
  /* Currently using default Bootstrap card styles */
}

/* ============================================================================
   Media Browser Multiple Selection Styles
   ============================================================================ */

/* Selected button styling for multiple selection mode */
.media-select-button.btn-outline-success {
  border-color: #198754;
  color: #198754;
  background-color: #d1e7dd;
}

/* Selected badge positioning */
.media-select-button .selected-badge {
  margin-top: -8px;
  margin-right: -8px;
}

/* Modal footer for multiple selection */
#media-browser-footer {
  position: sticky;
  bottom: 0;
  z-index: 1050;
  margin: -1rem -1rem 0 -1rem;
  padding: 1rem;
}

/* Selection counter styling */
#selection-counter {
  font-size: 0.95rem;
  font-weight: 500;
}

/* ============================================================================
   PIA "Refined Classic" Redesign (Strautmann | PIA) — June 2026
   Full-replacement skin layered on top of the existing theme. The blocks below
   are appended last so they win on equal specificity; scoped under
   .pia-shell / .pia-side / .pia-main to stay contained.
   CI green/black is mandant-driven via _mandantStyles.php (overrides :root).
   ============================================================================ */

/* ---- 1. Design tokens + Bootstrap bridge --------------------------------- */
:root {
  /* Functional accent — neutral graphite/slate, CI-independent. Drives every
     interactive element (primary/outline/link buttons, links, nav hover/active,
     pagination, tabs, list actions). NOT the CI colour — see --mandant below. */
  --brand: #2f373c;
  --brand-600: #272d31;
  --brand-700: #20262a;
  --brand-800: #181c1f;
  --brand-tint: #eef0f1;
  --brand-tint-2: #e3e6e8;
  /* Mandant CI colour (e.g. GRIMME red) — applied ONLY to the brand logo mark,
     wordmark and environment badge. Overridden per-Mandant in
     _mandantStyles.php; falls back to the PIA house green when unset. */
  --mandant: #3f8f3d;
  --mandant-rgb: 63, 143, 61;
  --ink: #14181a;
  --ink-2: #1c2225;
  --text: #1b1f22;
  --text-2: #5d666b;
  --text-3: #8b9499;
  --line: #e4e8e6;
  --line-2: #eef1ef;
  --bg: #f4f6f4;
  --card: #ffffff;
  --surface: #ffffff;     /* opaque panel surface: list / form body / footer / sidebar / popover */
  --surface-2: #fbfcfb;   /* slightly raised: table head, user rail, header outline button */
  --scrollbar: #c7cec8;   /* sidebar nav scrollbar thumb */
  --logout-hover-bg: #fdf2f1;
  --logout-hover-fg: #c33;
  --logout-hover-bd: #f0c9c6;
  --blue: #2f6fed;
  --status-ok: #2f8a3e;
  --status-off: #d6dad6;
  --fav: #e3a019;
  --fm: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --pia-radius: 12px;
  --pia-rail-h: 56px; /* shared height: sidebar user/logout rail == list pagination bar (bottom) */
  --pia-railtop-h: 60px; /* shared height: sidebar brand == list header bar (top) */
  --pia-shadow-sm: 0 1px 2px rgba(20, 30, 20, .06), 0 1px 3px rgba(20, 30, 20, .05);
  --pia-shadow-md: 0 6px 20px -6px rgba(20, 40, 20, .18);
  --pia-shadow-lg: 0 24px 60px -18px rgba(20, 40, 20, .34);

  /* Bridge accent → Bootstrap so existing components recolor automatically.
     Neutral graphite — Bootstrap's "primary" is intentionally NOT a CI colour. */
  --bs-primary: #2f373c;
  --bs-primary-rgb: 47, 55, 60;
  --bs-link-color: #20262a;
  --bs-link-color-rgb: 32, 38, 42;
  --bs-link-hover-color: #181c1f;
  --bs-body-bg: #f4f6f4;
  --bs-body-color: #1b1f22;
  --bs-font-sans-serif: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-monospace: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Neutralise the (now removed) top navbar height + recolour the shell */
  --admin-navbar-height: 0px;
  --admin-sidebar-bg: #ffffff;
}

body.pia-app,
body.pia-app.bg-light {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* Primary / outline / link buttons → brand (Bootstrap btn vars are literal hex) */
.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
}
.btn-outline-primary {
  --bs-btn-color: var(--brand-700);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
}
.btn-link { --bs-btn-color: var(--brand-700); --bs-btn-hover-color: var(--brand-800); }
.bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand-700) !important; }
.badge.bg-primary { background-color: var(--brand) !important; }

/* ---- 2. Full-height shell (no global top header) ------------------------- */
.pia-shell { display: flex; min-height: 100vh; width: 100%; }

.pia-main.admin-main-content {
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}
.pia-main.admin-main-content::before { display: none; } /* drop the old navbar border */
/* List pages manage their own internal scroll (.sf-admin-list-scrollable); keep .pia-main
   from adding a second scrollbar so the sticky header/footer behave. Dashboard/edit (no
   .sf-admin-container-fixed) keep the normal .pia-main scroll above. */
body:has(.sf-admin-container-fixed) .pia-main.admin-main-content { overflow: hidden; }
.pia-main > .pia-content {
  margin: 0;
  max-width: none;
  padding: 1rem 1.5rem;
}

/* ---- 3. Sidebar: brand top · scrolling nav · user bottom ----------------- */
.pia-side.admin-sidebar {
  width: 264px !important;
  min-width: 264px !important;
  max-width: 264px !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--line);
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}
.pia-side .pia-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 6px;
}
.pia-side .pia-nav::-webkit-scrollbar { width: 8px; }
.pia-side .pia-nav::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

/* brand region */
.pia-side .pia-brand {
  flex: none;
  height: var(--pia-railtop-h);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
.pia-side .pia-brand .mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--mandant); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; flex: none;
}
.pia-side .pia-brand .name { font-weight: 800; font-size: 15px; letter-spacing: -.2px; line-height: 1; white-space: nowrap; }
.pia-side .pia-brand .name b { color: var(--mandant); }
.pia-side .pia-brand .env {
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  color: var(--mandant); background: rgba(var(--mandant-rgb), .12);
  padding: 3px 7px; border-radius: 5px; margin-left: auto;
}

/* user region */
.pia-side .pia-user {
  position: relative;
  flex: none;
  height: var(--pia-rail-h);
  border-top: 1px solid var(--line);
  padding: 0 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
}
.pia-side .pia-user .av {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; flex: none;
}
.pia-side .pia-user .who { line-height: 1.25; min-width: 0; flex: 1; }
.pia-side .pia-user .who b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pia-side .pia-user .who small { font-size: 11px; color: var(--text-3); font-family: var(--fm); }
.pia-side .pia-user .lo {
  width: 34px; height: 34px; border-radius: 9px;
  color: var(--text-2); border: 1px solid var(--line); background: var(--surface);
  flex: none; display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.pia-side .pia-user .lo:hover { background: var(--logout-hover-bg); color: var(--logout-hover-fg); border-color: var(--logout-hover-bd); }
/* dark-mode toggle button: same 34px chrome as .lo, but a neutral (non-destructive) hover */
.pia-side .pia-user .pia-theme-toggle:hover { background: var(--surface-2); color: var(--text); border-color: var(--line); }
[data-bs-theme="dark"] .pia-side .pia-user .pia-theme-toggle:hover { background: var(--brand-tint); color: var(--text); }

/* user details popover — appears above the bottom rail on hover / keyboard focus */
.pia-side .pia-user .pia-user-pop {
  position: absolute;
  left: 10px; right: 10px;
  bottom: calc(100% + 8px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--pia-shadow-lg);
  padding: 14px;
  z-index: 1200;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  pointer-events: none;
}
.pia-side .pia-user:hover .pia-user-pop,
.pia-side .pia-user:focus-within .pia-user-pop {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.pia-side .pia-user-pop .pup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pia-side .pia-user-pop .pup-name { font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.2; }
.pia-side .pia-user-pop .pup-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.pia-side .pia-user-pop .pup-row:last-child { margin-bottom: 0; }
.pia-side .pia-user-pop .pup-row i { width: 14px; text-align: center; color: var(--text-3); margin-top: 2px; flex: none; }
.pia-side .pia-user-pop .pup-row span { word-break: break-word; min-width: 0; }
.pia-side .pia-user-pop .pup-mail span { font-family: var(--fm); font-size: 11.5px; }
.pia-side .pia-user-pop .pup-groups { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.pia-side .pia-user-pop .pup-chip { font-size: 11px; background: var(--brand-tint); color: var(--brand-700); padding: 3px 8px; border-radius: 6px; line-height: 1.4; }

/* nav groups — reuse existing .nav-section / .nav-section-toggle / collapse */
.pia-side .nav-section { margin-bottom: 2px !important; }
.pia-side .nav-header {
  padding: 9px 11px !important;
  margin-bottom: 0 !important;
  border-radius: 9px;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
}
.pia-side .nav-section-toggle { gap: 11px; border-radius: 9px; }
.pia-side .nav-section-toggle:hover { background: var(--brand-tint); color: var(--brand-700) !important; }
.pia-side .nav-header i { color: var(--text-3); font-size: 0.95rem; }
.pia-side .nav-section-toggle:hover .nav-header i { color: var(--brand-700); }
.pia-side .nav-item-count { font-family: var(--fm); font-size: 11px; color: var(--text-3); margin-left: auto; padding-right: 4px; }
.pia-side .nav-toggle-icon { color: var(--text-3); }

/* sub-items — strip the old "button" look, make clean indented rows */
.pia-side .nav-link,
.pia-side ul li a.nav-link,
.pia-side a.nav-link {
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 7px 12px 7px 42px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-2) !important;
  box-shadow: none !important;
}
.pia-side .nav-link:hover,
.pia-side ul li a.nav-link:hover {
  background: var(--brand-tint) !important;
  color: var(--brand-700) !important;
  box-shadow: none !important;
}
.pia-side .nav-link.active,
.pia-side ul li a.nav-link.active {
  background: var(--brand-tint-2) !important;
  color: var(--brand-800) !important;
  font-weight: 600 !important;
  box-shadow: inset 2px 0 0 var(--brand) !important;
}
.pia-side .nav-link i { color: inherit; }

/* favorites — present as a normal scrolling group (gold star, no special chrome) */
.pia-side #nav-favorites-section { margin-bottom: 2px; }
.pia-side #nav-favorites-section .nav-header { display: flex; align-items: center; }
.pia-side #nav-favorites-section .nav-header .fa-star { color: var(--fav) !important; }
.pia-side .favorite-item { display: flex; align-items: center; }
.pia-side .favorite-item .nav-link { flex: 1; }
.pia-side .favorite-item .nav-link .fa-star { color: var(--fav) !important; }
.pia-side .favorite-item .drag-handle { opacity: 0; margin-right: 8px; }
.pia-side .favorite-item:hover .drag-handle { opacity: .5; }

/* floating sidebar toggle — shown on small screens only (the old top navbar is gone) */
.pia-mobile-toggle {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 1060;
  width: 42px; height: 42px; border-radius: 10px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  box-shadow: var(--pia-shadow-md);
}
/* Desktop: the sidebar is fixed (collapse was retired with the top navbar). Never let a
   stale "sidebar_collapsed" cookie/localStorage strand the user with a hidden sidebar. */
@media (min-width: 769px) {
  body.sidebar-collapsed .pia-side.admin-sidebar {
    margin-left: 0 !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
}
/* Mobile: the sidebar slides in as an overlay; #sidebar-toggle (JS) toggles .show + .sidebar-overlay */
@media (max-width: 768px) {
  .pia-mobile-toggle { display: inline-flex; }
  .pia-side.admin-sidebar {
    position: fixed; top: 0; left: 0; z-index: 1055;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .18);
  }
  .pia-side.admin-sidebar.show { transform: translateX(0); }
  /* the JS-managed .sidebar-overlay is the backdrop; disable the old pseudo-element backdrop */
  body:not(.sidebar-collapsed)::after { content: none !important; display: none !important; }
}

/* ---- 4. List view: slim head bar · sticky table · sticky footer ---------- */
/* No card: the list is full-bleed. Header / table / footer span the whole content
   column, borders run edge-to-edge, and the footer's bottom aligns with the sidebar
   user/logout rail. So on list pages drop the .pia-content gutter and let the fixed
   container fill the viewport height exactly. */
/* List pages: .pia-content is a full-height flex column so the fixed container fills
   the viewport exactly. The empty .alert-container is hidden so it adds NO vertical
   offset — this makes the header top align with the sidebar brand (top rail) and the
   footer bottom align with the sidebar user/logout rail (bottom rail). */
body:has(.sf-admin-container-fixed) .pia-main > .pia-content {
  padding: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
body:has(.sf-admin-container-fixed) .pia-main > .pia-content > .alert-container { flex: 0 0 auto; margin: 0; }
body:has(.sf-admin-container-fixed) .pia-main > .pia-content > .alert-container:empty { display: none; }
.pia-main .sf-admin-container-fixed { flex: 1 1 auto; height: auto; min-height: 0; }
/* top rail: header bar height == sidebar brand height, content vertically centred */
.pia-main .sf_admin_header.sf-admin-header-fixed {
  height: var(--pia-railtop-h);
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  border-radius: 0;
  padding: 0 1.5rem;
  margin: 0;
}
.pia-main .sf_admin_header.sf-admin-header-fixed .sf_admin_header_content {
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
}
.pia-main .sf_admin_title { font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--text); }
.pia-main .sf_admin_title .crumb { color: var(--text-3); font-weight: 500; }
/* favorites star toggle in the list header — same star + hover animation as the dashboard,
   but always visible here (base .favorite-toggle is opacity:0, only revealed on row hover). */
/* always visible (base .favorite-toggle is opacity:0) and NO link underline (btn-link adds one) */
.pia-main .sf_admin_header .favorite-toggle,
.pia-main .sf_admin_header .favorite-toggle:hover,
.pia-main .sf_admin_header .favorite-toggle:focus { opacity: 1; flex: none; text-decoration: none; box-shadow: none; }
.pia-main .sf_admin_header .favorite-toggle i { font-size: 1rem; }
/* header action buttons → the design's ~38px pill buttons (Filter outline, Neu green) */
/* action buttons in any fixed header bar (list: Filter/Neu — edit: Save/Delete) → 38px pills */
.pia-main .sf-admin-header-fixed .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 13px;
  padding: 0 15px;
}
.pia-main .sf-admin-header-fixed .btn-group > .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pia-main .sf-admin-header-fixed .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pia-main .sf-admin-header-fixed .btn-outline-secondary {
  --bs-btn-color: var(--text); --bs-btn-border-color: var(--line); --bs-btn-bg: var(--surface);
  --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--line); --bs-btn-hover-color: var(--text);
}
.pia-main .sf_admin_list {
  background: var(--surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0; /* kill the base .sf_admin_list margin-bottom:1.5rem so the table reaches the footer */
}
.pia-main .sf_admin_list table { margin-bottom: 0; --bs-table-striped-bg: transparent; --bs-table-striped-color: var(--text); }
.pia-main .sf_admin_list thead th {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--line) !important;
  border-top: 0 !important;
  padding: .55rem .75rem !important;
  height: 42px;
  vertical-align: middle !important; /* Bootstrap sets thead to bottom — center the labels in the 42px row */
}
/* keep the sort link (label + caret) centered within the header cell too */
.pia-main .sf_admin_list thead th a { vertical-align: middle; }
.pia-main .sf_admin_list thead th.sorted { background: var(--brand-tint) !important; }
.pia-main .sf_admin_list thead th.sorted a,
.pia-main .sf_admin_list th a:hover { color: var(--brand-700) !important; }
.pia-main .sf_admin_list tbody tr { border-bottom: 1px solid var(--line-2); }
.pia-main .sf_admin_list tbody tr:hover { background: var(--brand-tint); }
.pia-main .sf_admin_list tbody td { padding: .55rem .75rem; font-size: 13.5px; color: var(--text); }
.pia-main .sf_admin_list tbody td a:hover { color: var(--brand-700); }
/* edge gutters so table content lines up with the header title + footer at 1.5rem */
.pia-main .sf_admin_list thead th:first-child,
.pia-main .sf_admin_list tbody td:first-child { padding-left: 1.5rem; }
.pia-main .sf_admin_list thead th:last-child,
.pia-main .sf_admin_list tbody td:last-child { padding-right: 1.5rem; }
/* monospace technical columns (ids / dates) read as data */
.pia-main .sf_admin_list td.sf_admin_integer,
.pia-main .sf_admin_list td.sf_admin_date,
.pia-main .sf_admin_list td.sf_admin_timestamp { font-family: var(--fm); font-size: 12.5px; color: var(--text-2); }
/* status dots (boolean fields) → brand green / neutral grey */
.pia-main .sf_admin_list .text-success { color: var(--status-ok) !important; }
.pia-main .sf_admin_list .fa-times-circle.text-muted { color: var(--status-off) !important; }
/* hover-revealed row actions */
.pia-main .sf_admin_list .sf_admin_td_actions { display: flex; gap: 4px; justify-content: flex-end; opacity: .35; transition: opacity .12s; }
.pia-main .sf_admin_list tbody tr:hover .sf_admin_td_actions { opacity: 1; }
.pia-main .sf_admin_list .sf_admin_action { border-radius: 8px; }
.pia-main .sf_admin_list .sf_admin_action_edit { color: var(--brand-700); }
.pia-main .sf_admin_list .sf_admin_action_edit:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* sticky footer — exact same height as the sidebar user/logout rail (--pia-rail-h),
   vertically centred, full-width gutter matching the header/table (1.5rem). */
.pia-main .sf-admin-footer-fixed {
  height: var(--pia-rail-h);
  min-height: var(--pia-rail-h);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.pia-main .sf-admin-footer-fixed .pagination-wrapper { width: 100%; padding: 0; margin: 0; }
/* reflow the 3-col pagination row to match the prototype: result count pinned LEFT,
   then "Seite X von Y" + the page buttons grouped together on the RIGHT. */
.pia-main .pagination-wrapper .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin: 0; width: 100%; }
.pia-main .pagination-wrapper .row > [class*="col-"] { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
.pia-main .pagination-wrapper .row > [class*="col-"]:first-child { margin-right: auto; }
.pia-main .pagination-wrapper .col-md-4.text-center { text-align: right !important; }
.pia-main .pagination-info { color: var(--text-2); font-size: 12.5px; }
.pia-main .pagination { margin: 0; }
.pia-main .pagination .page-link {
  color: var(--brand-700); border-color: var(--line); border-radius: 8px; margin: 0 2px;
  font-family: var(--fm); min-width: 32px; height: 32px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
}
.pia-main .pagination .page-link:hover { border-color: var(--brand); background: var(--brand-tint); }
.pia-main .pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---- 5. Edit view: full-height fixed header bar + scrollable white form body (no card) --- */
/* The edit <form> fills the flex .pia-content so its .sf-admin-container-fixed gets the same
   fixed-header / scroll-body treatment as the list (header bar aligned with the sidebar brand). */
body:has(.sf-admin-container-fixed) .pia-main > .pia-content > form {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.pia-main .pia-form-body { background: var(--surface); padding: 22px 24px; }
/* "Zurück zur Liste" — quiet neutral back link. Muted by default (reads as a
   control next to the dark title), with a clear, CI-independent hover affordance:
   light pill + darker text + arrow nudges left. */
.pia-main .sf-admin-header-fixed .ev-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap;
  padding: 5px 10px; margin: -5px -6px; border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.pia-main .sf-admin-header-fixed .ev-back i { transition: transform .15s ease; }
.pia-main .sf-admin-header-fixed .ev-back:hover {
  color: var(--text); background: var(--brand-tint); text-decoration: none;
}
.pia-main .sf-admin-header-fixed .ev-back:hover i { transform: translateX(-2px); }
.pia-main .sf-admin-header-fixed .ev-back:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 2px;
}
.pia-main .sf-admin-header-fixed .sf_admin_actions_left { min-width: 0; flex: 0 1 auto; }
.pia-main .sf-admin-header-fixed .sf_admin_actions_right { flex: none; }
.pia-main .sf-admin-header-fixed .sf_admin_actions_left .sf_admin_title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.pia-main .sf-admin-header-fixed .ev-sep { flex: none; width: 1px; height: 24px; background: var(--text-3); opacity: .55; }
.pia-main .sf_admin_form .nav-tabs { border-bottom: 1px solid var(--line); }
.pia-main .sf_admin_form .nav-tabs .nav-link { color: var(--text-2); font-weight: 600; border: 0; border-bottom: 2px solid transparent; padding: 0.5rem 1.1rem; }
.pia-main .sf_admin_form .nav-tabs .nav-link:hover { color: var(--brand-700); border-color: transparent transparent var(--brand-tint-2); }
.pia-main .sf_admin_form .nav-tabs .nav-link.active {
  color: var(--brand-700) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--brand) !important;
}
.pia-main .sf_admin_form .form-control,
.pia-main .sf_admin_form .form-select { border-color: var(--line); border-radius: 10px; }
.pia-main .sf_admin_form .form-control:focus,
.pia-main .sf_admin_form .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint-2); }
/* "Back to list" rendered as a quiet brand link instead of a grey button */
.pia-main .sf_admin_actions_left .btn-secondary {
  background: transparent; border-color: transparent; color: var(--brand-700);
  font-weight: 600; padding-left: 0;
}
.pia-main .sf_admin_actions_left .btn-secondary:hover { background: transparent; color: var(--brand-800); text-decoration: underline; }

/* ---- 6. Dashboard: hero + module tiles ----------------------------------- */
/* hero header (dashboard only — not the fixed list header) */
.pia-main .sf_admin_header:not(.sf-admin-header-fixed) {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 22px;
}
.pia-main .sf_admin_header:not(.sf-admin-header-fixed) h1 { font-size: 32px; font-weight: 700; letter-spacing: -.6px; }
/* Module tiles keep the template's column-count masonry (each card its natural height,
   flowing into columns) — no grid override here. Only the card chrome below is themed. */
/* flat cards: border only (no shadow), unified light border, and a radius set via
   --bs-card-border-radius so the header's inner corners match the card. overflow:hidden
   clips the header background + borders to the rounded corners (no poking-out edges). */
.pia-main .compact-card {
  box-shadow: none !important;
  border: 1px solid var(--line);
  --bs-card-border-radius: 14px;
  overflow: hidden;
}
/* not clickable as a whole — no hover lift (beats the template's inline !important). */
.pia-main .compact-card:hover { transform: none; box-shadow: none !important; border-color: var(--line); }
.pia-main .dashboard-grid .compact-card .card-header { background: var(--surface); border-bottom: 1px solid var(--line-2); }
.pia-main .dashboard-grid .compact-card .card-header i { color: var(--brand-700); }
.pia-main .dashboard-grid .list-group-item-action:hover { background: var(--brand-tint); }
.pia-main .dashboard-grid .list-group-item-action:hover i { color: var(--brand-700) !important; }
/* App-Status: a single panel with 3 divided sections (no nested cards) */
@media (min-width: 992px) {
  .pia-main .app-status-grid > .col-lg-4 + .col-lg-4 { border-left: 1px solid var(--line-2); }
}
@media (max-width: 991.98px) {
  .pia-main .app-status-grid > [class*="col-"] + [class*="col-"] { border-top: 1px solid var(--line-2); }
}
/* App-Status: white panel surface + soft, brand-aligned status badges (match the design).
   Scoped to the panel via its Alpine component so other modules' badges stay untouched.
   The tiny 8px reachability dots keep their solid fill (only .badge pills are softened). */
.pia-main [x-data^="appStatusModule"] .card { --bs-card-bg: var(--surface); }
.pia-main [x-data^="appStatusModule"] .card-header { background: var(--surface) !important; }
.pia-main [x-data^="appStatusModule"] .badge { font-weight: 600; }
/* Version / status currency uses semantic colours, NOT the CI/brand colour:
   solid green = up-to-date / current, solid red = outdated. Kept legible
   (solid fills) per the design feedback that the soft green was hard to read. */
.pia-main [x-data^="appStatusModule"] .badge.bg-success { background: #2f8a3e !important; color: #fff !important; }
.pia-main [x-data^="appStatusModule"] .badge.bg-danger { background: #c0392b !important; color: #fff !important; }
.pia-main [x-data^="appStatusModule"] .badge.bg-warning { background: #fdf0d8 !important; color: #8a5a00 !important; }
.pia-main [x-data^="appStatusModule"] .badge.bg-secondary { background: #eceeec !important; color: var(--text-2) !important; }
.pia-main [x-data^="appStatusModule"] .badge.bg-dark { background: var(--ink) !important; color: #fff !important; }
/* clean, borderless, transparent table rows inside the panel.
   (Bootstrap's --bs-table-bg defaults to --bs-body-bg, i.e. the soft page colour — clear it so
   cells show the white panel; also drop the default per-cell dividers.) */
.pia-main [x-data^="appStatusModule"] .table { --bs-table-bg: transparent; }
.pia-main [x-data^="appStatusModule"] .table > :not(caption) > * > * { background-color: transparent; border-bottom-width: 0; vertical-align: middle; }

/* ============================================================================
   8. Dark mode — PIA Refined Classic (graphite / green CI)
   The light-mode surfaces above were routed through tokens (--surface,
   --surface-2, --line, --text…), so flipping the tokens here repaints every
   .pia-* surface in one place. Placed LAST so it beats the :root token block
   on equal specificity via source order. Toggled by data-bs-theme="dark" on
   <html> (set pre-paint by the inline script in layout.php; persisted by
   ThemeManager in admin-bootstrap.js under the 'grimme-theme' localStorage key).
   ============================================================================ */
[data-bs-theme="dark"] {
  /* surfaces */
  --bg: #14181a;          /* page */
  --surface: #1b2023;     /* panels: list / form body / footer / sidebar / popover */
  --surface-2: #20262a;   /* raised: table head, user rail, header outline button */
  --card: #1b2023;
  /* text */
  --text: #e7ebe9;
  --text-2: #a4adab;
  --text-3: #6f7a78;
  --ink: #0f1416;         /* avatar chip stays the darkest surface */
  --ink-2: #0b0f10;
  /* lines + scrollbar */
  --line: #2b3236;
  --line-2: #232a2d;
  --scrollbar: #3a4347;
  /* brand accents — lifted so graphite reads on a dark ground; link/active text light */
  --brand: #5b6b72;
  --brand-600: #6a7a81;
  --brand-700: #cdd6d3;
  --brand-800: #e7ebe9;
  --brand-tint: #232c2f;     /* nav/row/page hover + active fills */
  --brand-tint-2: #2b3539;
  /* status / favourite */
  --status-ok: #4caf63;
  --status-off: #3a4347;
  --fav: #e3a019;
  /* logout hover — dark-safe red wash */
  --logout-hover-bg: #3a2422;
  --logout-hover-fg: #ff8a80;
  --logout-hover-bd: #5a3330;
  /* Bridge → Bootstrap so base components (modals, dropdowns, form controls) follow */
  --bs-body-bg: #14181a;
  --bs-body-color: #e7ebe9;
  --bs-primary: #5b6b72;
  --bs-primary-rgb: 91, 107, 114;
  --bs-link-color: #cdd6d3;
  --bs-link-color-rgb: 205, 214, 211;
  --bs-link-hover-color: #e7ebe9;
  --bs-border-color: #2b3236;
  --bs-emphasis-color: #e7ebe9;
  --admin-sidebar-bg: #1b2023;
  /* ROOT-CAUSE FIX: invert Bootstrap's raw gray scale + --bs-light in dark mode.
     Lots of custom admin CSS uses var(--bs-gray-100..900) / var(--bs-light)
     directly as colours, and Bootstrap never re-defines the raw scale per theme —
     so they stayed light. Inverting here flips every such usage at once, and also
     makes the .bg-light / .border-light / .btn-light utilities theme-aware via
     --bs-light-rgb. --bs-white / --bs-dark are left as literal white/dark (used
     as text-on-coloured-fill). */
  --bs-gray-50: #1b2023;
  --bs-gray-100: #20262a;
  --bs-gray-200: #2b3236;
  --bs-gray-300: #3a4347;
  --bs-gray-400: #4a5458;
  --bs-gray-500: #6f7a78;
  --bs-gray-600: #a4adab;
  --bs-gray-700: #c2cac8;
  --bs-gray-800: #d8dddb;
  --bs-gray-900: #e7ebe9;
  --bs-light: #20262a;
  --bs-light-rgb: 32, 38, 42;
  /* soften the big light shadows so panels don't glow on dark */
  --pia-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --pia-shadow-md: 0 6px 20px -6px rgba(0, 0, 0, .6);
  --pia-shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, .7);
  color-scheme: dark; /* native scrollbars, form controls, autofill follow dark */
}
/* App-Status soft badges: keep solid green/red fills (semantic), darken the muted ones */
[data-bs-theme="dark"] .pia-main [x-data^="appStatusModule"] .badge.bg-warning   { background: #3a2f12 !important; color: #f0c060 !important; }
[data-bs-theme="dark"] .pia-main [x-data^="appStatusModule"] .badge.bg-secondary { background: #272d31 !important; color: var(--text-2) !important; }

/* Cards + form labels in dark mode. Several base/template rules pin colours to
   light values that ignore data-bs-theme: the dashboard template's inline
   <style> (#f8f9fa headers, rgba(0,0,0,.1) borders, gray-100 hover); the base
   `.card-header { background:var(--bs-light); color:var(--bs-dark) }`; the edit
   form's `.form-label { color:var(--bs-dark) }`; and Bootstrap's .bg-light
   utility. These overrides win on specificity (+ !important for .bg-light) so
   cards, headers and labels go dark — light mode is untouched. */
/* NOTE: not scoped to .pia-main — Bootstrap modals (media browser, hotspot edit,
   generic admin modal) are appended to <body>, outside .pia-main. They still sit
   under <html data-bs-theme="dark">, so global selectors reach them; the login
   screen is forced light, so it never matches. */
[data-bs-theme="dark"] .card { --bs-card-bg: var(--surface); border-color: var(--line); }
/* `.card > .card-header` (not bare `.card-header`) so it outranks the dashboard
   template's inline `<style> .compact-card .card-header{#f8f9fa}` (equal
   specificity but later in source order would otherwise win). */
[data-bs-theme="dark"] .card > .card-header { background-color: var(--surface-2); border-bottom-color: var(--line); color: var(--text); }
[data-bs-theme="dark"] .bg-light { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-bs-theme="dark"] .list-group-item { background-color: transparent; border-color: var(--line-2); }
[data-bs-theme="dark"] .list-group-item-action:hover { background-color: var(--brand-tint); }
[data-bs-theme="dark"] .card-body hr { border-color: var(--line) !important; }
[data-bs-theme="dark"] .color-box { border-color: rgba(255, 255, 255, .25); }
/* Form labels: base rules pin them to --bs-dark / --bs-gray-700 (invisible on dark). */
[data-bs-theme="dark"] .form-label { color: var(--text); }
[data-bs-theme="dark"] .sf_admin_filter label { color: var(--text-2); }

/* Translation sub-tabs (i18n language tabs in the form): base rules hardcode
   #f8f9fa / white panels + #dee2e6 borders that ignore data-bs-theme. Keep the
   active tab's accent underline; only repaint the white surfaces + borders. */
[data-bs-theme="dark"] .translation-tabs-wrapper { background-color: var(--surface-2); }
[data-bs-theme="dark"] .translation-tabs-wrapper .nav-tabs { border-bottom-color: var(--line); }
[data-bs-theme="dark"] .translation-tabs-wrapper .nav-tabs .nav-link { color: var(--text-2); }
[data-bs-theme="dark"] .translation-tabs-wrapper .nav-tabs .nav-link:hover { border-bottom-color: var(--line) !important; }
[data-bs-theme="dark"] .translation-tabs-wrapper .nav-tabs .nav-link.active {
  background-color: var(--surface);
  border-top-color: var(--line) !important;
  border-left-color: var(--line) !important;
  border-right-color: var(--line) !important;
}
[data-bs-theme="dark"] .translation-tabs-wrapper .tab-content { background-color: var(--surface); border-color: var(--line); }
[data-bs-theme="dark"] .translation-tabs-initialized .nav-pills { background-color: var(--surface-2); }
[data-bs-theme="dark"] .translation-tabs-initialized .nav-pills .nav-link { color: var(--text-2); }

/* Filter modal: header/footer hardcode --bs-light / gray surfaces and the title
   is pinned to --bs-gray-800 (dark-on-dark). Modal body is dark natively. */
[data-bs-theme="dark"] #filterModal .modal-header { background-color: var(--surface-2); border-bottom-color: var(--line); }
[data-bs-theme="dark"] #filterModal .modal-footer { background-color: var(--surface-2); border-top-color: var(--line); }
[data-bs-theme="dark"] #filterModal .modal-title { color: var(--text); }
[data-bs-theme="dark"] #filterModal .col-form-label,
[data-bs-theme="dark"] #filterModal .col-sm-4 label { color: var(--text-2); }

/* ---- Dark mode: form widgets -----------------------------------------------
   The rich-text editors and media/file pickers ship hardcoded light chrome
   (#fff / #f8f9fa panels, #dee2e6 borders, #212529 text); Toast also paints its
   own white editable area via its CDN CSS. Repaint the editable surfaces +
   tables to dark tokens. The editor TOOLBARS are deliberately left light — their
   icons are dark glyph sprites that would disappear on a dark bar. Dark-only. */

/* Trix editor: editable area + content tables (toolbar kept light) */
[data-bs-theme="dark"] trix-editor { background-color: var(--surface); color: var(--text); }
[data-bs-theme="dark"] trix-editor table,
[data-bs-theme="dark"] .trix-content table { background-color: var(--surface); border-color: var(--line); }
[data-bs-theme="dark"] trix-editor table th,
[data-bs-theme="dark"] .trix-content table th { background-color: var(--surface-2); color: var(--text); border-color: var(--line); }
[data-bs-theme="dark"] trix-editor table thead th,
[data-bs-theme="dark"] .trix-content table thead th { background-color: var(--brand-tint); border-color: var(--line); }
[data-bs-theme="dark"] trix-editor table td,
[data-bs-theme="dark"] .trix-content table td { border-color: var(--line); }
[data-bs-theme="dark"] trix-editor table tbody tr:nth-child(even),
[data-bs-theme="dark"] .trix-content table tbody tr:nth-child(even) { background-color: var(--surface-2); }
[data-bs-theme="dark"] trix-editor table tbody tr:hover,
[data-bs-theme="dark"] .trix-content table tbody tr:hover { background-color: var(--brand-tint); }

/* Toast UI editor: editable/preview containers + content tables (toolbar kept light) */
[data-bs-theme="dark"] .toastui-editor-defaultUI { border-color: var(--line) !important; }
[data-bs-theme="dark"] .toastui-editor-main,
[data-bs-theme="dark"] .toastui-editor-ww-container,
[data-bs-theme="dark"] .toastui-editor-md-container,
[data-bs-theme="dark"] .toastui-editor-contents,
[data-bs-theme="dark"] .toastui-editor-defaultUI .ProseMirror { background-color: var(--surface) !important; color: var(--text) !important; }
[data-bs-theme="dark"] .toastui-editor-contents table th { background-color: var(--surface-2) !important; color: var(--text) !important; border-color: var(--line) !important; }
[data-bs-theme="dark"] .toastui-editor-contents table thead th { background-color: var(--brand-tint) !important; border-color: var(--line) !important; }
[data-bs-theme="dark"] .toastui-editor-contents table td { border-color: var(--line) !important; }
[data-bs-theme="dark"] .toastui-editor-contents table tbody tr:nth-child(even) { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .toastui-editor-contents table tbody tr:hover { background-color: var(--brand-tint) !important; }
/* Editor TOOLBARS: darken the bar to match the editor, and invert the dark glyph
   icons (Trix & Toast ship near-black SVG/sprite icons) so they stay visible. */
[data-bs-theme="dark"] trix-toolbar .trix-button-row { background-color: var(--surface-2); border-bottom-color: var(--line); }
[data-bs-theme="dark"] .trix-button-row--custom { background-color: var(--surface-2); border-color: var(--line); }
[data-bs-theme="dark"] trix-toolbar .trix-button { filter: invert(1) hue-rotate(180deg); }
[data-bs-theme="dark"] trix-toolbar .trix-button.trix-active { background: var(--brand-tint); filter: none; }
[data-bs-theme="dark"] .toastui-editor-toolbar { background-color: var(--surface-2) !important; border-bottom-color: var(--line) !important; }
[data-bs-theme="dark"] .toastui-editor-toolbar-group { border-color: var(--line) !important; }
[data-bs-theme="dark"] .toastui-editor-toolbar-icons { filter: invert(1) hue-rotate(180deg); }
[data-bs-theme="dark"] .toastui-editor-toolbar-icons:hover { background-color: var(--brand-tint) !important; filter: none !important; }

/* Media / file pickers: preview tiles + thumbnails hardcode #f8f9fa / #dee2e6 */
[data-bs-theme="dark"] .file-preview-container,
[data-bs-theme="dark"] .file-icon-container,
[data-bs-theme="dark"] .media-preview,
[data-bs-theme="dark"] .media-library-grid .media-card .card-img-top { background-color: var(--surface-2); }
[data-bs-theme="dark"] .file-icon-container,
[data-bs-theme="dark"] .media-item-card { border-color: var(--line); }

/* ============================================================================
   UNIFIED WIDGET / DATA TABLES (dark mode) — ONE definition for every <table> in
   the admin content + modals. Widgets variously use .table-light / -secondary
   theads, .compact-data-table custom colours, .table-bordered and inline #f8f9fa,
   all hardcoded light + not theme-aware. Rather than patch each widget, this
   repaints every table from tokens with one rule set — DIRECT cell
   background-color (+ !important) so it beats Bootstrap's contextual utilities
   and inline styles regardless of the --bs-table-bg variable mechanism.
   .sf_admin_list (the list view) keeps its own, more specific styling.
   ============================================================================ */
[data-bs-theme="dark"] .pia-main .table,
[data-bs-theme="dark"] .modal .table {
  --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--brand-tint); --bs-table-hover-color: var(--text);
  color: var(--text);
}
/* headers + contextual/section rows → one consistent raised surface */
[data-bs-theme="dark"] .pia-main .table > thead > tr > th,
[data-bs-theme="dark"] .pia-main .table > thead > tr > td,
[data-bs-theme="dark"] .modal .table > thead > tr > th,
[data-bs-theme="dark"] .pia-main .table tr.table-light > *,
[data-bs-theme="dark"] .pia-main .table tr.table-secondary > *,
[data-bs-theme="dark"] .pia-main .table tr.table-primary > *,
[data-bs-theme="dark"] .pia-main .table thead.table-light > tr > *,
[data-bs-theme="dark"] .pia-main .table thead.table-secondary > tr > * {
  background-color: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
/* product technical-data + price-option tables: value cells, variant headers, frame surfaces */
[data-bs-theme="dark"] .pia-main .compact-data-table td.value,
[data-bs-theme="dark"] .pia-main #product_data > thead > tr > th { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .pia-main .data-frame .card-body,
[data-bs-theme="dark"] .pia-main #product_data_frame .card-body,
[data-bs-theme="dark"] .pia-main #product_priceoptions_frame .card-body { background-color: var(--surface-2) !important; }
[data-bs-theme="dark"] .pia-main #product_data th,
[data-bs-theme="dark"] .pia-main #product_data td { border-color: var(--line) !important; }
/* force every cell + label (incl. tbody <th> row labels) to the body text colour
   — some <th> labels otherwise inherit a dark --bs-table-color on the dark surface */
[data-bs-theme="dark"] .pia-main .compact-data-table th,
[data-bs-theme="dark"] .pia-main .compact-data-table td,
[data-bs-theme="dark"] .pia-main #product_data th,
[data-bs-theme="dark"] .pia-main #product_data td { color: var(--text) !important; }
/* `.text-dark` is a non-theme-aware Bootstrap utility (= var(--bs-dark), and it
   carries !important) used for labels throughout the widgets → dark-on-dark and
   unreadable. Flip it to the body text colour, EXCEPT on coloured badges
   (bg-warning / bg-info etc.) where dark text on the light badge fill is still
   correct. Same idea for the legacy --bs-gray-700/800 label colours. */
[data-bs-theme="dark"] .text-dark:not(.badge) { color: var(--text) !important; }
[data-bs-theme="dark"] .badge .text-dark { color: inherit !important; }

/* Hotspot manager admin chrome (own stylesheet, loaded after this file → need
   higher specificity). The iPad mockup + the .hotspot-item markers stay light
   by design (they simulate the real light app); only the editor popover +
   toolbar are admin chrome. */
[data-bs-theme="dark"] .hotspot-actions { background: var(--surface); border-color: var(--line); }
[data-bs-theme="dark"] .hotspot-actions::after { border-top-color: var(--surface); }
[data-bs-theme="dark"] .hotspot-actions::before { border-top-color: var(--line); }
[data-bs-theme="dark"] .hotspot-controls { background: var(--surface); border-color: var(--line); }
/* the panel BEHIND the iPad (var(--bs-gray-100), not theme-aware) — recess it to
   the page colour so the (intentionally light) iPad mockup pops. The iPad screen
   area (.hotspot-image-container) is left light on purpose. */
[data-bs-theme="dark"] .hotspot-manager-modern { background: var(--bg); }
[data-bs-theme="dark"] .hotspot-stats { background: var(--surface-2); color: var(--text-2); }