/**
 * Arbeitsblatt-Studio - Icon Styles
 * Lucide Icons (stroke-based) Integration
 * Version: 2.0 - Migrated from Phosphor fill-based to Lucide stroke-based
 */

/* ===== BASE ICON STYLES ===== */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
  transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}

.icon svg {
  width: 100%;
  height: 100%;
  /* Lucide stroke-based icons */
  stroke: currentColor;
  stroke-width: calc(2 + var(--icon-stroke-adjust, 0));
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ===== ICON SIZES ===== */
.icon-xs {
  width: 0.875rem;
  height: 0.875rem;
}
.icon-xs svg {
  stroke-width: 1.75;
}

.icon-sm {
  width: 1rem;
  height: 1rem;
}
.icon-sm svg {
  stroke-width: 1.85;
}

.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-xl {
  width: 2rem;
  height: 2rem;
}

/* Icon in headings - contextual sizing */
h1 .icon {
  width: 1.1em;
  height: 1.1em;
}

h2 .icon {
  width: 1.1em;
  height: 1.1em;
}

h3 .icon,
.card-title .icon {
  width: 1.15em;
  height: 1.15em;
}

/* Icon in legends */
legend .icon {
  width: 1.1em;
  height: 1.1em;
}

/* ===== ICON SPACING ===== */
.btn .icon:first-child,
.nav-link .icon,
h1 .icon,
h2 .icon,
h3 .icon,
.card-title .icon,
legend .icon,
.tab .icon {
  margin-right: 0.35em;
}

/* Icon-only buttons */
.btn-icon {
  padding: var(--spacing-xs) var(--spacing-sm);
  line-height: 1;
}

.btn-icon .icon {
  margin-right: 0;
  width: 1.25em;
  height: 1.25em;
}

/* Icon in tabs - size adjustment */
.tab .icon {
  width: 1.1em;
  height: 1.1em;
}

/* ===== SEMANTIC ICON COLORS ===== */
.icon-primary {
  color: var(--primary);
}

.icon-secondary {
  color: var(--text-muted);
}

.icon-success {
  color: var(--success);
}

.icon-danger {
  color: var(--danger);
}

.icon-warning {
  color: var(--warning);
}

.icon-info {
  color: var(--secondary, var(--primary));
}

.icon-muted {
  color: var(--text-muted);
}

/* ===== ICON VARIANTS ===== */
/* For filled icons (rare cases) */
.icon-filled svg {
  fill: currentColor;
  stroke: none;
}

/* ===== ICON STATES ===== */
button:hover .icon,
a:hover .icon,
.nav-link:hover .icon {
  transform: scale(1.08);
}

.icon-disabled,
[disabled] .icon,
.disabled .icon {
  opacity: 0.4;
  pointer-events: none;
}

/* ===== DARK MODE ADJUSTMENT ===== */
/* Slightly thicker strokes in dark mode for better visibility */
[data-theme="dark"] {
  --icon-stroke-adjust: 0.1;
}

/* ===== CSS PSEUDO-ELEMENT ICONS (SVG Background) ===== */
/* Used where JS icon injection isn't possible */

/* Check icon (success) - used in validation states */
.icon-check-bg::before,
.json-valid .json-status-icon::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* X icon (error) - used in validation states */
.icon-x-bg::before,
.json-invalid .json-status-icon::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Lock icon - used for backend-only features */
.icon-lock-bg::before,
[data-requires-backend].disabled::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 0.3em;
}

/* Pencil icon - used for edit status */
.icon-pencil-bg::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== DARK MODE PSEUDO-ELEMENT ADJUSTMENTS ===== */
[data-theme="dark"] .icon-lock-bg::before,
[data-theme="dark"] [data-requires-backend].disabled::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* ===== PRINT STYLES ===== */
@media print {
  .icon svg {
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
  }

  .icon-filled svg {
    fill: currentColor !important;
    stroke: none !important;
  }
}