/* ========================================
   Akfix Planner - Icon System (Cursor Style)
   ========================================
   
   Тонкие линии (1.25px stroke), округлённые концы.
   Использование: <span class="icon icon--name"></span>
   ======================================== */

:root {
  /* Icon sizing */
  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;
}

/* Base icon styles */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-md);
  height: var(--icon-md);
  color: currentColor;
  flex-shrink: 0;
}

.icon svg {
  width: 100%;
  height: 100%;
}

/* Icon sizes */
.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--md { width: var(--icon-md); height: var(--icon-md); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ========================================
   SVG Icon Definitions
   Cursor-style: thin lines (1.25), rounded caps
   ======================================== */

/* Chevron Right - для раскрытия проектов */
.icon--chevron-right svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Chevron Down - для dropdown */
.icon--chevron-down svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Plus - добавление */
.icon--plus svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  fill: none;
}

/* X / Close - закрытие, удаление */
.icon--x svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  fill: none;
}

/* Check - галочка */
.icon--check svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Edit / Pencil - редактирование */
.icon--edit svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Trash - удаление */
.icon--trash svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Play - активация */
.icon--play svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Folder - проекты */
.icon--folder svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Users - команда */
.icon--users svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Star - North Star метрика */
.icon--star svg {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Dot - индикатор статуса */
.icon--dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.icon--dot-pulse {
  animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ========================================
   Icon Helper Functions (JS will use these)
   ======================================== */

/*
  Usage in JS:
  
  const icons = {
    chevronRight: `<span class="icon icon--chevron-right"><svg viewBox="0 0 16 16"><path d="M6 3L11 8L6 13"/></svg></span>`,
    chevronDown: `<span class="icon icon--chevron-down"><svg viewBox="0 0 16 16"><path d="M4 6L8 10L12 6"/></svg></span>`,
    plus: `<span class="icon icon--plus"><svg viewBox="0 0 16 16"><path d="M8 3V13M3 8H13"/></svg></span>`,
    x: `<span class="icon icon--x"><svg viewBox="0 0 16 16"><path d="M4 4L12 12M12 4L4 12"/></svg></span>`,
    check: `<span class="icon icon--check"><svg viewBox="0 0 16 16"><path d="M3 8L6.5 11.5L13 5"/></svg></span>`,
    edit: `<span class="icon icon--edit"><svg viewBox="0 0 16 16"><path d="M11.5 2.5L13.5 4.5L5 13H3V11L11.5 2.5Z"/></svg></span>`,
    trash: `<span class="icon icon--trash"><svg viewBox="0 0 16 16"><path d="M3 4H13M5 4V3C5 2.5 5.5 2 6 2H10C10.5 2 11 2.5 11 3V4M6 7V12M10 7V12M4 4L5 14H11L12 4"/></svg></span>`,
    play: `<span class="icon icon--play"><svg viewBox="0 0 16 16"><path d="M5 3L12 8L5 13V3Z"/></svg></span>`,
    folder: `<span class="icon icon--folder"><svg viewBox="0 0 16 16"><path d="M2 4V12C2 12.5 2.5 13 3 13H13C13.5 13 14 12.5 14 12V6C14 5.5 13.5 5 13 5H8L6 3H3C2.5 3 2 3.5 2 4Z"/></svg></span>`,
    users: `<span class="icon icon--users"><svg viewBox="0 0 16 16"><circle cx="6" cy="5" r="2"/><circle cx="11" cy="6" r="1.5"/><path d="M2 13C2 10.5 4 9 6 9C8 9 10 10.5 10 13"/><path d="M10 13C10 11 11 10 11 10C12.5 10 14 11 14 13"/></svg></span>`,
    star: `<span class="icon icon--star"><svg viewBox="0 0 16 16"><path d="M8 2L9.5 6H14L10.5 9L12 14L8 11L4 14L5.5 9L2 6H6.5L8 2Z"/></svg></span>`,
  };
*/