/* ========================================================================
   AST-326 Utility Classes
   Source: AST-326 Dashboard Comp (dashboard-comp.html)
   ======================================================================== */

/* ---- Flex ---- */
.ast-flex { display: flex; }
.ast-flex-col { display: flex; flex-direction: column; }
.ast-flex-center { display: flex; align-items: center; justify-content: center; }
.ast-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ast-flex-wrap { flex-wrap: wrap; }
.ast-flex-1 { flex: 1 1 0%; }

/* ---- Gap ---- */
.ast-gap-1 { gap: var(--space-1); }
.ast-gap-2 { gap: var(--space-2); }
.ast-gap-3 { gap: var(--space-3); }
.ast-gap-4 { gap: var(--space-4); }
.ast-gap-5 { gap: var(--space-5); }
.ast-gap-6 { gap: var(--space-6); }
.ast-gap-8 { gap: var(--space-8); }

/* ---- Margin Bottom ---- */
.ast-mb-0 { margin-bottom: 0; }
.ast-mb-2 { margin-bottom: var(--space-2); }
.ast-mb-3 { margin-bottom: var(--space-3); }
.ast-mb-4 { margin-bottom: var(--space-4); }
.ast-mb-5 { margin-bottom: var(--space-5); }
.ast-mb-6 { margin-bottom: var(--space-6); }
.ast-mb-8 { margin-bottom: var(--space-8); }
.ast-mb-10 { margin-bottom: var(--space-10); }
.ast-mb-12 { margin-bottom: var(--space-12); }

/* ---- Margin Top ---- */
.ast-mt-0 { margin-top: 0; }
.ast-mt-1 { margin-top: var(--space-1); }
.ast-mt-2 { margin-top: var(--space-2); }
.ast-mt-3 { margin-top: var(--space-3); }
.ast-mt-4 { margin-top: var(--space-4); }
.ast-mt-5 { margin-top: var(--space-5); }
.ast-mt-6 { margin-top: var(--space-6); }
.ast-mt-8 { margin-top: var(--space-8); }

/* ---- Width / Max-Width ---- */
.ast-mx-auto { margin-left: auto; margin-right: auto; }
.ast-w-full { width: 100%; }
.ast-max-w-400 { max-width: 400px; }
.ast-max-w-600 { max-width: 600px; }
.ast-min-w-250 { min-width: 250px; }
.ast-min-w-300 { min-width: 300px; }

/* ---- Text Alignment ---- */
.ast-text-left { text-align: left; }
.ast-text-center { text-align: center; }

/* ---- Text Sizes ---- */
.ast-text-xs { font-size: var(--text-xs); }
.ast-text-sm { font-size: var(--text-sm); }
.ast-text-base { font-size: var(--text-base); }
.ast-text-lg { font-size: var(--text-lg); }
.ast-text-xl { font-size: var(--text-xl); }
.ast-text-xxl { font-size: var(--text-xxl); }

/* ---- Text Colors ---- */
.ast-text-primary { color: var(--text-primary); }
.ast-text-secondary { color: var(--text-secondary); }
.ast-text-muted { color: var(--text-muted); }
.ast-text-accent { color: var(--clr-primary-base); }
.ast-text-success { color: var(--clr-success-base); }
.ast-text-danger { color: var(--clr-danger-base); }
.ast-text-warning { color: var(--clr-warning-base); }
.ast-text-link { color: var(--text-link); }

/* ---- Font Weight ---- */
.ast-font-medium { font-weight: var(--weight-medium); }
.ast-font-semibold { font-weight: var(--weight-semibold); }
.ast-font-bold { font-weight: var(--weight-bold); }

/* ---- Overflow / Scroll ---- */
.ast-overflow-x-auto { overflow-x: auto; }
.ast-overflow-x-clip { overflow-x: clip; }
.ast-overflow-x-hidden { overflow-x: hidden; }
.ast-overflow-y-auto { overflow-y: auto; }

/* ---- Truncate ---- */
.ast-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ast-truncate--2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ast-truncate--3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Responsive Visibility (AST-212) ---- */

/* Hide on very narrow viewports */
@media (max-width: 360px) {
  .ast-hide-narrow { display: none !important; }
}

/* Hide on narrow viewports */
@media (max-width: 480px) {
  .ast-hide-mobile { display: none !important; }
}

/* Hide on tablets */
@media (max-width: 768px) {
  .ast-hide-tablet { display: none !important; }
}

/* Show only on very narrow viewports */
.ast-show-narrow { display: none !important; }
@media (max-width: 360px) {
  .ast-show-narrow { display: block !important; }
}

/* Show only on mobile */
.ast-show-mobile { display: none !important; }
@media (max-width: 480px) {
  .ast-show-mobile { display: block !important; }
}

/* ---- Word Break (long content edge case) ---- */
.ast-break-word { word-break: break-word; overflow-wrap: break-word; }
.ast-break-all { word-break: break-all; }

/* ---- Print Utilities ---- */
@media print {
  .ast-no-print { display: none !important; }
}

/* ---- Alignment ---- */
.ast-align-center { align-items: center; }
.ast-align-start { align-items: flex-start; }
.ast-align-end { align-items: flex-end; }
.ast-justify-center { justify-content: center; }
.ast-justify-between { justify-content: space-between; }

/* ---- Margin End (right in LTR) ---- */
.ast-me-1 { margin-right: var(--space-1); }
.ast-me-2 { margin-right: var(--space-2); }
.ast-me-3 { margin-right: var(--space-3); }

/* ---- Margin Start (left in LTR) ---- */
.ast-ms-1 { margin-left: var(--space-1); }
.ast-ms-2 { margin-left: var(--space-2); }
.ast-ms-3 { margin-left: var(--space-3); }

/* ---- Grid ---- */
.ast-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 768px) {
  .ast-grid-2 { grid-template-columns: 1fr; }
}

/* ---- Progress ---- */
.ast-progress { background: var(--clr-neutral-100); border-radius: var(--radius-md); height: 8px; overflow: hidden; }
.ast-progress__bar { background: var(--clr-primary-base); height: 100%; border-radius: var(--radius-md); transition: width 0.3s var(--ease-out); }