/**
 * App Consolidated CSS v1.1
 *
 * Combines enhanced_states.css + form_modes.css + theming infrastructure
 * Features:
 * - CSS custom properties for theming
 * - Light/Dark mode support
 * - Consolidated component styles
 * - Performance optimized (reduced HTTP requests)
 * - Markdown/prose styling for documentation portal
 *
 * Updated: 2025-09-29 - Added comprehensive markdown styling
 */

/* ===== THEME FOUNDATION ===== */

:root,
[data-theme="default"] {
  /* Default Theme (Original) - Using RGB values for alpha support */
  --color-primary: 59 130 246;          /* blue-500 */
  --color-primary-50: 239 246 255;      /* blue-50 */
  --color-primary-100: 219 234 254;     /* blue-100 */
  --color-primary-300: 147 197 253;     /* blue-300 */
  --color-primary-500: 59 130 246;      /* blue-500 */
  --color-primary-600: 37 99 235;       /* blue-600 */
  
  --color-success: 16 185 129;          /* emerald-500 */
  --color-success-50: 236 253 245;      /* emerald-50 */
  --color-success-100: 209 250 229;     /* emerald-100 */
  --color-success-300: 110 231 183;     /* emerald-300 */
  --color-success-600: 5 150 105;       /* emerald-600 */
  
  --color-danger: 239 68 68;            /* red-500 */
  --color-danger-50: 254 242 242;       /* red-50 */
  --color-danger-100: 254 226 226;      /* red-100 */
  
  --color-warning: 245 158 11;          /* amber-500 */
  --color-warning-50: 255 251 235;      /* amber-50 */
  
  /* Neutral colors */
  --color-background: 255 255 255;      /* white */
  --color-surface: 249 250 251;         /* gray-50 */
  --color-surface-secondary: 243 244 246; /* gray-100 */
  --color-border: 229 231 235;          /* gray-200 */
  --color-border-light: 243 244 246;    /* gray-100 */
  
  --color-text: 17 24 39;               /* gray-900 */
  --color-text-secondary: 107 114 128;  /* gray-500 */
  --color-text-muted: 156 163 175;      /* gray-400 */
  
  /* Component-specific colors */
  --color-selected-bg: var(--color-primary-100);
  --color-selected-border: var(--color-primary-500);
  --color-hover-bg: 191 219 254;           /* blue-200 for hover */
  --color-focus-ring: var(--color-primary-500);
  
  /* Form colors */
  --color-form-bg: var(--color-background);
  --color-form-border: var(--color-border);
  --color-input-bg: var(--color-background);
  --color-input-border: var(--color-border);
  
  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
}

[data-theme="light"] {
  /* Light Theme - Clean and bright */
  --color-primary: 59 130 246;          /* blue-500 */
  --color-primary-50: 248 250 252;      /* slate-50 */
  --color-primary-100: 241 245 249;     /* slate-100 */
  --color-primary-300: 147 197 253;     /* blue-300 */
  --color-primary-500: 59 130 246;      /* blue-500 */
  --color-primary-600: 37 99 235;       /* blue-600 */
  
  --color-success: 34 197 94;           /* green-500 */
  --color-success-50: 240 253 244;      /* green-50 */
  --color-success-100: 220 252 231;     /* green-100 */
  --color-success-300: 134 239 172;     /* green-300 */
  --color-success-600: 22 163 74;       /* green-600 */
  
  --color-danger: 239 68 68;            /* red-500 */
  --color-danger-50: 254 242 242;       /* red-50 */
  --color-danger-100: 254 226 226;      /* red-100 */
  
  --color-warning: 245 158 11;          /* amber-500 */
  --color-warning-50: 255 251 235;      /* amber-50 */
  
  /* Neutral colors - orange tint */
  --color-background: 254 215 170;      /* orange-200 */
  --color-surface: 251 191 36;          /* orange-300 */
  --color-surface-secondary: 245 158 11; /* orange-400 */
  --color-border: 226 232 240;          /* slate-200 */
  --color-border-light: 241 245 249;    /* slate-100 */
  
  --color-text: 15 23 42;               /* slate-900 */
  --color-text-secondary: 100 116 139;  /* slate-500 */
  --color-text-muted: 148 163 184;      /* slate-400 */
  
  /* Component-specific colors */
  --color-selected-bg: var(--color-primary-100);
  --color-selected-border: var(--color-primary-500);
  --color-hover-bg: var(--color-surface);
  --color-focus-ring: var(--color-primary-500);
  
  /* Form colors */
  --color-form-bg: var(--color-background);
  --color-form-border: var(--color-border);
  --color-input-bg: var(--color-background);
  --color-input-border: var(--color-border);
}

[data-theme="dark"] {
  /* Dark Theme - Modern dark mode */
  --color-primary: 96 165 250;          /* blue-400 - lighter in dark */
  --color-primary-50: 30 58 138;        /* blue-900 */
  --color-primary-100: 30 64 175;       /* blue-800 */
  --color-primary-300: 59 130 246;      /* blue-500 */
  --color-primary-500: 96 165 250;      /* blue-400 */
  --color-primary-600: 147 197 253;     /* blue-300 */
  
  --color-success: 52 211 153;          /* emerald-400 */
  --color-success-50: 6 95 70;          /* emerald-800 */
  --color-success-100: 6 78 59;         /* emerald-900 */
  --color-success-300: 16 185 129;      /* emerald-500 */
  --color-success-600: 110 231 183;     /* emerald-300 */
  
  --color-danger: 248 113 113;          /* red-400 */
  --color-danger-50: 127 29 29;         /* red-900 */
  --color-danger-100: 153 27 27;        /* red-800 */
  
  --color-warning: 251 191 36;          /* amber-400 */
  --color-warning-50: 146 64 14;        /* amber-800 */
  
  /* Neutral colors - lime tint */
  --color-background: 217 249 157;      /* lime-200 */
  --color-surface: 190 242 100;         /* lime-300 */
  --color-surface-secondary: 163 230 53; /* lime-400 */
  --color-border: 71 85 105;            /* slate-600 */
  --color-border-light: 51 65 85;       /* slate-700 */
  
  --color-text: 248 250 252;            /* slate-50 */
  --color-text-secondary: 148 163 184;  /* slate-400 */
  --color-text-muted: 100 116 139;      /* slate-500 */
  
  /* Component-specific colors */
  --color-selected-bg: var(--color-primary-100);
  --color-selected-border: var(--color-primary-500);
  --color-hover-bg: var(--color-surface);
  --color-focus-ring: var(--color-primary-500);
  
  /* Form colors */
  --color-form-bg: var(--color-surface);
  --color-form-border: var(--color-border);
  --color-input-bg: var(--color-surface-secondary);
  --color-input-border: var(--color-border);
}

/* Theme-aware utility classes */
.bg-theme-background { background-color: rgb(var(--color-background)); }
.bg-theme-surface { background-color: rgb(var(--color-surface)); }
.bg-theme-primary { background-color: rgb(var(--color-primary)); }
.bg-theme-success { background-color: rgb(var(--color-success)); }

.text-theme-primary { color: rgb(var(--color-text)); }
.text-theme-secondary { color: rgb(var(--color-text-secondary)); }
.text-theme-accent { color: rgb(var(--color-primary)); }

.border-theme-primary { border-color: rgb(var(--color-border)); }
.border-theme-accent { border-color: rgb(var(--color-primary)); }

/* ===== ENHANCED STATE MANAGEMENT ===== */

/* Enhanced row selection states */
.table-row.selected {
  background-color: rgb(var(--color-selected-bg)) !important;
  border: 2px solid rgb(var(--color-selected-border)) !important;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.table-row.selected:hover {
  background-color: rgb(var(--color-primary-300) / 0.3) !important;
}

/* Recently created row animation */
.table-row.recently-created {
  background-color: rgb(var(--color-success-100)) !important;
  border: 2px solid rgb(var(--color-success)) !important;
  border-radius: 4px;
  animation: highlight-fade 3s ease-out;
}

@keyframes highlight-fade {
  0% {
    background-color: rgb(var(--color-success-300));
    border-color: rgb(var(--color-success-600));
    transform: scale(1.02);
  }
  50% {
    background-color: rgb(var(--color-success-100));
    border-color: rgb(var(--color-success));
  }
  100% {
    background-color: rgb(var(--color-success-100));
    border-color: rgb(var(--color-success));
    transform: scale(1);
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* State preservation loading indicator */
.state-loading {
  position: relative;
}

.state-loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--color-primary) / 0.1),
    transparent
  );
  animation: shimmer 1.5s infinite;
  z-index: 1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Enhanced focus states for keyboard navigation */
.table-row:focus {
  outline: 2px solid rgb(var(--color-focus-ring));
  outline-offset: 2px;
}

/* State transition smoothing */
.table-row {
  transition: background-color var(--transition-fast), 
              border-color var(--transition-fast),
              transform 0.1s ease-in-out;
}

/* Enhanced hover states */
.table-row:hover:not(.selected) {
  background-color: rgb(var(--color-hover-bg));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
}

/* Visual feedback for state restoration */
.state-restored {
  animation: pulse-success 1s ease-out;
}

@keyframes pulse-success {
  0% {
    background-color: rgb(var(--color-success-100));
    transform: scale(1);
  }
  50% {
    background-color: rgb(var(--color-success-300));
    transform: scale(1.01);
  }
  100% {
    background-color: rgb(var(--color-success-100));
    transform: scale(1);
  }
}

/* Inline CRUD Button Styles */
.inline-crud-btn {
  transition: all var(--transition-fast);
}

.inline-crud-btn:disabled {
  transform: none !important;
}

.inline-crud-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}

/* Selected row styling for inline tables */
.selected-row-inline {
  background-color: rgb(var(--color-selected-bg)) !important;
}

.selected-row-inline:hover {
  background-color: rgb(var(--color-primary-300) / 0.3) !important;
}

/* Compact table for inline display */
.inline-table-container {
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  overflow: hidden;
  background: rgb(var(--color-background));
}

/* Inline form container styling */
.inline-form-slot {
  border-bottom: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
  transition: all var(--transition-slow);
}

.inline-form-slot.htmx-added {
  display: block !important;
  animation: slideDown var(--transition-slow);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 400px;
  }
}

.inline-form-slot .expanded-inline-form {
  margin: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
}

/* Hidden element utilities */
.hidden {
  display: none !important;
}

.inline-crud-btn.hidden {
  display: none !important;
}

.inline-table-container .hidden {
  display: none !important;
}

.inline-table-container .flex.items-center.gap-1 > .hidden {
  display: none !important;
}

/* Specific hidden button targeting */
#restore-button-inline-lineitem.hidden,
#permanent-delete-button-inline-lineitem.hidden,
button[id*="restore-button-inline"].hidden,
button[id*="permanent-delete-button-inline"].hidden {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: none !important;
  position: absolute !important;
  left: -9999px !important;
}

.inline-table-container .flex.items-center.gap-1 {
  display: flex;
  gap: 0.25rem;
}

.inline-table-container .flex.items-center.gap-1 > *:not(.hidden) {
  margin-right: 0.25rem;
}

.inline-table-container .flex.items-center.gap-1 > *:not(.hidden):last-child {
  margin-right: 0;
}

.inline-table-container button.hidden,
.inline-table-container .hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -10000px !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== FORM DISPLAY MODES ===== */

/* Radio Button Enhanced Styling for Form Mode Selector */
.form-mode-selector-container input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: rgb(var(--color-primary));
}

.form-mode-selector-container input[type="radio"]:checked + div {
  background-color: rgb(var(--color-primary) / 0.05);
  border-color: rgb(var(--color-primary));
}

.form-mode-selector-container label {
  border: 2px solid transparent;
  transition: all var(--transition-fast);
}

/* Modern browsers with :has() support */
.form-mode-selector-container label:has(input:checked) {
  background-color: rgb(var(--color-primary) / 0.05);
  border-color: rgb(var(--color-primary));
  box-shadow: 0 0 0 1px rgb(var(--color-primary) / 0.2);
}

/* Fallback for browsers without :has() support */
.form-mode-selector-container input[type="radio"]:checked + div {
  background-color: rgb(var(--color-primary) / 0.05);
}

.form-mode-selector-container input[type="radio"]:checked {
  border-color: rgb(var(--color-primary));
}

.form-mode-selector-container label:hover {
  border-color: rgb(var(--color-border));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
}

.form-mode-selector-container label.selected-mode {
  background-color: rgb(var(--color-primary) / 0.08) !important;
  border-color: rgb(var(--color-primary)) !important;
  box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.2) !important;
}

.form-mode-selector-container label.selected-mode:hover {
  background-color: rgb(var(--color-primary) / 0.1) !important;
}

/* Modal Form Styles */
.modal-backdrop {
  transition: opacity var(--transition-fast);
}

.modal-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-container {
  transition: transform var(--transition-fast);
  max-height: 90vh;
  overflow: hidden;
}

.modal-backdrop.hidden .modal-container {
  transform: scale(0.9);
}

.modal-body {
  max-height: 60vh;
}

/* Slider Form Styles */
.slider-backdrop {
  transition: opacity var(--transition-slow);
}

.slider-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.slider-panel {
  transition: transform var(--transition-slow);
}

.slider-panel.slide-in {
  transform: translateX(0);
}

.slider-panel.slide-out {
  transform: translateX(100%);
}

/* Form Field Enhancements */
.form-field.focused {
  transform: scale(1.01);
  z-index: 10;
  transition: all var(--transition-fast);
}

/* Action Button States */
.modal-action-btn:disabled,
.slider-action-btn:disabled,
.compact-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Success notification styles */
.form-success-notification {
  animation: slideInRight var(--transition-slow);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Loading states */
.form-loading {
  position: relative;
}

.form-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background) / 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.form-loading::after {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  font-weight: 500;
  color: rgb(var(--color-text-secondary));
}

/* ===== RESPONSIVE DESIGN ===== */

/* Responsive adjustments - Keep 800px width until browser edge collision, then reduce columns */
@media (max-width: 1200px) {
  .slider-panel .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .slider-panel .md\\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .slider-panel .lg\\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .slider-panel .grid-cols-3,
  .slider-panel .grid-cols-2,
  .slider-panel .md\\:grid-cols-3,
  .slider-panel .md\\:grid-cols-2,
  .slider-panel .lg\\:grid-cols-3,
  .slider-panel .lg\\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .slider-panel {
    width: 95vw !important;
    max-width: 750px;
  }
}

@media (max-width: 640px) {
  .modal-container {
    width: 95vw !important;
    max-width: none !important;
    margin: 10px;
  }
  
  .slider-panel {
    width: 90vw !important;
  }
}

/* ===== DARK MODE SPECIFIC ADJUSTMENTS ===== */

[data-theme="dark"] .table-row:hover:not(.selected) {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
}

[data-theme="dark"] .inline-form-slot .expanded-inline-form {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
}

[data-theme="dark"] .form-mode-selector-container label:hover {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
}

/* ===== MARKDOWN/PROSE STYLING ===== */

.prose {
  color: rgb(var(--color-text));
  max-width: none;
  line-height: 1.6;
}

.prose h1 {
  color: rgb(var(--color-text));
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
  border-bottom: 2px solid rgb(var(--color-border));
  padding-bottom: 0.5rem;
}

.prose h2 {
  color: rgb(var(--color-text));
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgb(var(--color-border-light));
  padding-bottom: 0.25rem;
}

.prose h3 {
  color: rgb(var(--color-text));
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.4;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.prose h4 {
  color: rgb(var(--color-text));
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.prose h5, .prose h6 {
  color: rgb(var(--color-text));
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.5;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.prose p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.prose strong {
  color: rgb(var(--color-text));
  font-weight: 600;
}

.prose em {
  font-style: italic;
}

.prose code {
  color: rgb(var(--color-text));
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.375rem;
  font-size: 0.875rem;
  padding: 0.125rem 0.375rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.prose pre {
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.prose pre code {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.875rem;
  color: inherit;
}

.prose ul, .prose ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.prose ul > li {
  list-style-type: disc;
}

.prose ol > li {
  list-style-type: decimal;
}

.prose blockquote {
  font-style: italic;
  border-left: 4px solid rgb(var(--color-border));
  padding-left: 1rem;
  margin: 1rem 0;
  color: rgb(var(--color-text-secondary));
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.875rem;
}

.prose th {
  background-color: rgb(var(--color-surface));
  color: rgb(var(--color-text));
  font-weight: 600;
  padding: 0.75rem;
  text-align: left;
  border: 1px solid rgb(var(--color-border));
}

.prose td {
  padding: 0.75rem;
  border: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-text));
}

.prose a {
  color: rgb(var(--color-primary));
  text-decoration: underline;
  transition: color 0.2s ease;
}

.prose a:hover {
  color: rgb(var(--color-primary-600));
}

.prose hr {
  border: none;
  border-top: 1px solid rgb(var(--color-border));
  margin: 2rem 0;
}

/* Syntax highlighting for code blocks */
/*
.prose .codehilite {
  background-color: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}
*/

/* Dark mode adjustments for prose */
[data-theme="dark"] .prose {
  color: rgb(var(--color-text));
}

[data-theme="dark"] .prose h1,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4,
[data-theme="dark"] .prose h5,
[data-theme="dark"] .prose h6 {
  color: rgb(var(--color-text));
}

[data-theme="dark"] .prose code {
  background-color: rgb(var(--color-surface-secondary));
  border-color: rgb(var(--color-border));
}

[data-theme="dark"] .prose pre {
  background-color: rgb(var(--color-surface-secondary));
  border-color: rgb(var(--color-border));
}

/*
[data-theme="dark"] .prose .codehilite {
  background-color: rgb(var(--color-surface-secondary));
  border-color: rgb(var(--color-border));
}
*/