/**
 * 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 {
  /* Legacy --color-* tokens, now single-sourced as thin aliases over the
     class-driven --c-* system (server/templates/base/includes/_theme.html).
     Replaces the former :root + [data-theme="light"] + [data-theme="dark"|ocean|
     charcoal|emerald] triple definitions keyed on the [data-theme] ATTRIBUTE —
     the class-vs-attribute split that caused theme-switch white-on-white. --c-*
     is themed per <html> class and CSS var indirection is live, so these aliases
     follow every theme automatically with no per-theme blocks. Only tokens still
     consumed via var() are kept; the unused --color-danger/-warning/-50 scales,
     --color-hover-bg, and --color-form-*/--color-input-* were dropped. */
  --color-text:              var(--c-body);
  --color-text-secondary:    var(--c-muted);
  --color-background:        var(--c-surface);
  --color-surface:           var(--c-surface-dim);
  --color-surface-secondary: var(--c-surface-alt);
  --color-border:            var(--c-rule);
  --color-border-light:      var(--c-rule-dim);

  --color-primary:           var(--c-accent);
  --color-primary-100:       var(--c-selected);
  --color-primary-300:       var(--c-selected);
  --color-primary-500:       var(--c-accent);
  --color-primary-600:       var(--c-accent-hl);

  --color-success:           var(--c-success);

  --color-selected-bg:       var(--c-selected);
  --color-selected-border:   var(--c-accent);
  --color-focus-ring:        var(--c-accent);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-normal: 0.2s ease-in-out;
  --transition-slow: 0.3s ease-in-out;
}

/* ===== 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: color-mix(in srgb, rgb(var(--c-success)) 15%, rgb(var(--c-surface))) !important;
  border: 2px solid rgb(var(--color-success)) !important;
  border-radius: 4px;
  animation: highlight-fade 3s ease-out;
}

@keyframes highlight-fade {
  0% {
    background-color: color-mix(in srgb, rgb(var(--c-success)) 22%, rgb(var(--c-surface)));
    border-color: rgb(var(--color-success));
    transform: scale(1.02);
  }
  50% {
    background-color: color-mix(in srgb, rgb(var(--c-success)) 15%, rgb(var(--c-surface)));
    border-color: rgb(var(--color-success));
  }
  100% {
    background-color: color-mix(in srgb, rgb(var(--c-success)) 15%, rgb(var(--c-surface)));
    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(--c-surface-strong));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
}

/* 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 */
/* Nested / scoped (L1+) table wrapper. Use the --c-* tokens (NOT the legacy
   --color-* namespace, whose neutrals are stuck at :root white because the
   theme picker sets html.dark, not [data-theme]) so nested tables match the
   L0 table's bg-surface in every theme. */
.inline-table-container {
  border: 1px solid rgb(var(--c-rule));
  border-radius: 0.5rem;
  background: rgb(var(--c-surface));
}

/* 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;
}

/* Restore Tailwind's "hidden sm:*" responsive-reveal pattern (used app-wide —
   e.g. table_and_pagination.html's desktop-only summary/page-size controls,
   report title bars, list_unified.html) against the blanket .hidden rule
   above. Since Tailwind's CDN-generated .sm\:block/.sm\:flex/etc. utilities
   are NOT !important, they can never win against `.hidden { !important }` at
   any viewport width — !important always wins regardless of source order or
   specificity. This re-asserts the correct display value, matching
   !important, only at >=640px and only on elements carrying both classes. */
@media (min-width: 640px) {
  .hidden.sm\:block   { display: block !important; }
  .hidden.sm\:flex    { display: flex !important; }
  .hidden.sm\:inline  { display: inline !important; }
  .hidden.sm\:inline-flex { display: inline-flex !important; }
}

/* Responsive table reflow rules moved to server/static/css/responsive-table.css
   (linked from every base template directly, including this file's own
   docs/portal.html and unified_base.html) — kept out of this 900+ line
   stylesheet so it doesn't drag this file's other broad, !important-heavy
   rules onto templates that never loaded it before. */

.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;
}

/* 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 ===== */

:is(html.dark, html.ocean, html.charcoal, html.emerald) .table-row:hover:not(.selected) {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
}

:is(html.dark, html.ocean, html.charcoal, html.emerald) .inline-form-slot .expanded-inline-form {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.3);
}

:is(html.dark, html.ocean, html.charcoal, html.emerald) .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;
}
*/

:is(html.dark, html.ocean, html.charcoal, html.emerald) .prose code {
  background-color: rgb(var(--color-surface-secondary));
  border-color: rgb(var(--color-border));
}

:is(html.dark, html.ocean, html.charcoal, html.emerald) .prose pre {
  background-color: rgb(var(--color-surface-secondary));
  border-color: rgb(var(--color-border));
}

/*
:is(html.dark, html.ocean, html.charcoal, html.emerald) .prose .codehilite {
  background-color: rgb(var(--color-surface-secondary));
  border-color: rgb(var(--color-border));
}
*/