/* --- 5. DEBUG & PRINT MODES --- */

/* Feature Support Detection */
@supports (view-transition-name: none) {
  .feature-view-transitions::after {
    content: "Supported";
    color: var(--accent);
  }
}
@supports not (view-transition-name: none) {
  .feature-view-transitions::after {
    content: "Not Supported";
    color: var(--txt);
  }
}

@supports (container-type: inline-size) {
  .feature-container-queries::after {
    content: "Supported";
    color: var(--accent);
  }
}
@supports not (container-type: inline-size) {
  .feature-container-queries::after {
    content: "Not Supported";
    color: var(--txt);
  }
}

/* Debug Grid Visualization */
body.debug * {
  outline: 1px solid rgba(255, 0, 85, 0.5);
  background: rgba(255, 0, 85, 0.02);
}
body.debug .grid {
  background-image: repeating-linear-gradient(45deg, rgba(255,0,85,0.05) 25%, transparent 25%, transparent 75%, rgba(255,0,85,0.05) 75%, rgba(255,0,85,0.05));
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

/* Print Preview Mode */
body.print-preview {
  background: white !important;
  color: black !important;
}
body.print-preview .no-print,
body.print-preview .btn,
body.print-preview header,
body.print-preview footer {
  display: none !important;
}
body.print-preview .sidebar,
body.print-preview .sidebar[data-direction="rtl"] {
  display: block !important;
  flex-wrap: nowrap !important;
}
body.print-preview .sidebar > * {
  flex-basis: auto !important;
  flex-grow: 0 !important;
}
body.print-preview main {
  max-inline-size: 100% !important;
}
body.print-preview .sticky-module {
  position: relative !important;
  max-height: none !important;
}

/* Layout Density Mode */
body.density-compact .flow[data-flow-loose="true"] {
  --flow-space: var(--s0);
}
body.density-compact .flow:not([data-flow-loose="true"]):not([data-flow-tight="true"]) {
  --flow-space: var(--s-1);
}
body.density-compact .box {
  --box-padding: var(--s-1);
}
body.density-compact h1 {
  font-size: var(--step-3);
}
body.density-compact h2 {
  font-size: var(--step-2);
}

/* Print Optimization */
@media print {
  .no-print, .btn, header, footer {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .sidebar, .sidebar[data-direction="rtl"] {
    display: block;
  }
}