/*
 * StreamLinePro — Design System Utilities
 * =========================================
 * Classi utility leggere per sostituire inline style= ripetuti.
 * Tutte usano var() da tokens.css.
 *
 * REGOLA: aggiungere qui SOLO pattern che appaiono 3+ volte
 *         come inline style nei PHP.
 *
 * SEZIONI:
 *   1.  Spacing (margin, padding, gap)
 *   2.  Typography
 *   3.  Colors (text, background)
 *   4.  Display & flex
 *   5.  Border & radius
 *   6.  Visibility
 *   7.  Interactive states
 */

/* =============================================================
   1. SPACING
============================================================= */

/* Gap */
.sl-gap-1  { gap: var(--space-1, 8px); }
.sl-gap-2  { gap: var(--space-2, 12px); }
.sl-gap-3  { gap: var(--space-3, 16px); }
.sl-gap-4  { gap: var(--space-4, 20px); }

/* Padding */
.sl-p-1    { padding: var(--space-1); }
.sl-p-2    { padding: var(--space-2); }
.sl-p-3    { padding: var(--space-3); }
.sl-p-4    { padding: var(--space-4); }

.sl-px-1   { padding-left: var(--space-1); padding-right: var(--space-1); }
.sl-px-2   { padding-left: var(--space-2); padding-right: var(--space-2); }
.sl-px-3   { padding-left: var(--space-3); padding-right: var(--space-3); }

.sl-py-1   { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.sl-py-2   { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.sl-py-3   { padding-top: var(--space-3); padding-bottom: var(--space-3); }

/* Margin */
.sl-mt-1   { margin-top: var(--space-1); }
.sl-mt-2   { margin-top: var(--space-2); }
.sl-mt-3   { margin-top: var(--space-3); }
.sl-mb-1   { margin-bottom: var(--space-1); }
.sl-mb-2   { margin-bottom: var(--space-2); }
.sl-mb-3   { margin-bottom: var(--space-3); }
.sl-ml-auto { margin-left: auto; }

/* =============================================================
   2. TYPOGRAPHY
============================================================= */

.sl-text-title  { font-size: var(--fz-title); font-weight: 700; color: var(--text-main); }
.sl-text-h2     { font-size: var(--fz-h2);    font-weight: 700; color: var(--text-main); }
.sl-text-body   { font-size: var(--fz-body);  font-weight: 400; color: var(--text-main); }
.sl-text-meta   { font-size: var(--fz-meta);  font-weight: 700; color: var(--text-muted); }
.sl-text-small  { font-size: var(--fz-small); font-weight: 600; color: var(--text-muted); }

.sl-text-bold   { font-weight: 700; }
.sl-text-heavy  { font-weight: 700; }
.sl-text-upper  { text-transform: uppercase; letter-spacing: .06em; }

.sl-text-center { text-align: center; }
.sl-text-right  { text-align: right; }

.sl-text-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================
   3. COLORS
============================================================= */

/* Text colors */
.sl-c-main   { color: var(--text-main); }
.sl-c-muted  { color: var(--text-muted); }
.sl-c-blue   { color: var(--sl-blue); }
.sl-c-orange { color: var(--sl-orange); }
.sl-c-green  { color: var(--sl-green); }
.sl-c-red    { color: var(--sl-red); }
.sl-c-yellow { color: var(--sl-yellow); }
.sl-c-purple { color: var(--sl-purple); }
.sl-c-white  { color: #fff; }

/* Coach context */
.sl-c-coach-text  { color: var(--coach-text); }
.sl-c-coach-muted { color: var(--coach-muted); }
.sl-c-coach-blue  { color: var(--coach-blue); }

/* Background soft tints */
.sl-bg-blue   { background: var(--coach-blue-soft);   color: var(--sl-blue); }
.sl-bg-orange { background: var(--coach-orange-soft); color: var(--sl-orange); }
.sl-bg-green  { background: var(--coach-green-soft);  color: var(--sl-green); }
.sl-bg-red    { background: var(--coach-red-soft);    color: var(--sl-red); }
.sl-bg-card   { background: var(--bg-card); }
.sl-bg-soft   { background: var(--bg-soft); }

/* =============================================================
   4. DISPLAY & FLEX
============================================================= */

.sl-flex         { display: flex; }
.sl-flex-col     { display: flex; flex-direction: column; }
.sl-flex-wrap    { flex-wrap: wrap; }
.sl-items-center { align-items: center; }
.sl-items-start  { align-items: flex-start; }
.sl-justify-between { justify-content: space-between; }
.sl-justify-center  { justify-content: center; }
.sl-justify-end     { justify-content: flex-end; }
.sl-flex-1       { flex: 1 1 auto; min-width: 0; }
.sl-flex-shrink0 { flex-shrink: 0; }

.sl-grid-2   { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.sl-grid-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.sl-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }

.sl-w-full   { width: 100%; }
.sl-h-full   { height: 100%; }
.sl-min-w-0  { min-width: 0; }

/* =============================================================
   5. BORDER & RADIUS
============================================================= */

.sl-rounded      { border-radius: var(--radius-card); }
.sl-rounded-ctrl { border-radius: var(--radius-ctrl); }
.sl-rounded-sm   { border-radius: var(--radius-sm); }
.sl-rounded-pill { border-radius: var(--radius-pill); }
.sl-rounded-coach { border-radius: var(--coach-radius); }

.sl-border       { border: 1px solid var(--border-color); }
.sl-border-coach { border: 1px solid var(--coach-border); }
.sl-border-b     { border-bottom: 1px solid var(--border-color); }
.sl-border-t     { border-top: 1px solid var(--border-color); }

/* =============================================================
   6. VISIBILITY
============================================================= */

.sl-hidden           { display: none !important; }
.sl-visible          { display: block !important; }
.sl-sr-only          {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Responsive visibility */
@media (max-width: 991.98px) {
  .sl-hide-mobile { display: none !important; }
}
@media (min-width: 992px) {
  .sl-hide-desktop { display: none !important; }
}

/* =============================================================
   7. INTERACTIVE STATES
============================================================= */

.sl-clickable {
  cursor: pointer;
  transition: opacity .14s;
}
.sl-clickable:hover { opacity: .85; }

.sl-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ombra elevation per card interattive */
.sl-hover-raise {
  transition: transform .14s, box-shadow .14s;
}
.sl-hover-raise:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Focus ring accessibile */
.sl-focusable:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0,74,173,.22);
}

/* Scrollbar slim */
.sl-scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.sl-scroll-thin::-webkit-scrollbar       { width: 4px; height: 4px; }
.sl-scroll-thin::-webkit-scrollbar-track { background: transparent; }
.sl-scroll-thin::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; }

/* Dark mode per utility colors */
body.dark-mode .sl-bg-card,
html[data-theme="dark"] .sl-bg-card { background: var(--coach-surface); }

body.dark-mode .sl-bg-soft,
html[data-theme="dark"] .sl-bg-soft { background: var(--coach-surface-2); }

body.dark-mode .sl-border,
html[data-theme="dark"] .sl-border { border-color: var(--coach-border); }

body.dark-mode .sl-c-main,
html[data-theme="dark"] .sl-c-main { color: var(--coach-text); }

body.dark-mode .sl-c-muted,
html[data-theme="dark"] .sl-c-muted { color: var(--coach-muted); }