/* ============================================================
   RD Control Admin — Design System
   Stack: Tailwind CSS (CDN) + Alpine.js + Chart.js + Lucide
   ============================================================ */

/* Alpine.js: hide until initialized */
[x-cloak] { display: none !important; }

/* --- Sidebar transitions --- */
.sidebar { transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* --- Progress bar --- */
.progress { height: 6px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a5b4fc);
  border-radius: 9999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .progress { background: #334155; }

/* --- Stat card accent borders --- */
.stat-indigo  { border-top: 3px solid #6366f1; }
.stat-emerald { border-top: 3px solid #10b981; }
.stat-amber   { border-top: 3px solid #f59e0b; }
.stat-red     { border-top: 3px solid #ef4444; }
.stat-rose    { border-top: 3px solid #f43f5e; }
.stat-green   { border-top: 3px solid #22c55e; }
.stat-blue    { border-top: 3px solid #3b82f6; }
.stat-violet  { border-top: 3px solid #8b5cf6; }

/* --- Toast animations --- */
@keyframes toast-in  { from { transform: translateX(calc(100% + 1rem)); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(calc(100% + 1rem)); opacity: 0; } }
.toast-enter { animation: toast-in  0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.toast-leave { animation: toast-out 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* --- Flash messages --- */
.flash-success { background: #f0fdf4; border-left: 4px solid #22c55e; color: #15803d; }
.flash-error   { background: #fef2f2; border-left: 4px solid #ef4444; color: #dc2626; }
.flash-info    { background: #eff6ff; border-left: 4px solid #3b82f6; color: #1d4ed8; }
.flash-warning { background: #fffbeb; border-left: 4px solid #f59e0b; color: #d97706; }
.dark .flash-success { background: rgba(21,128,61,.12);  border-color: #22c55e; color: #86efac; }
.dark .flash-error   { background: rgba(220,38,38,.12);  border-color: #ef4444; color: #fca5a5; }
.dark .flash-info    { background: rgba(29,78,216,.12);  border-color: #3b82f6; color: #93c5fd; }
.dark .flash-warning { background: rgba(180,83,9,.12);   border-color: #f59e0b; color: #fde68a; }

/* --- Status badges --- */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.badge-new        { background: #f1f5f9; color: #475569; }
.badge-accepted   { background: #dbeafe; color: #1d4ed8; }
.badge-in_progress{ background: #e0e7ff; color: #4338ca; }
.badge-review     { background: #ede9fe; color: #7c3aed; }
.badge-rework     { background: #ffedd5; color: #c2410c; }
.badge-blocked    { background: #fee2e2; color: #dc2626; }
.badge-problem    { background: #ffe4e6; color: #e11d48; }
.badge-done       { background: #dcfce7; color: #16a34a; }
.badge-cancelled  { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
/* Канонические статусы машины состояний, у которых бейджа не было: базовый
   .badge фона не задаёт, поэтому они рисовались бесцветным пятном везде, где
   вызывается _macros.html::status_badge(). Цвета совпадают по смыслу с
   window.STATUS_COLORS (static/app.js) — тем же набором, которым те же статусы
   красит Alpine-рендер. */
.badge-planned              { background: #dbeafe; color: #1d4ed8; }
.badge-submitted_for_review { background: #ede9fe; color: #7c3aed; }
.badge-returned_for_revision{ background: #ffedd5; color: #c2410c; }
.badge-waiting_dependency   { background: #fef3c7; color: #92400e; }
.badge-ready_to_start       { background: #dcfce7; color: #16a34a; }
.badge-active     { background: #dcfce7; color: #16a34a; }
.badge-paused     { background: #fef9c3; color: #a16207; }
.badge-employee   { background: #e0e7ff; color: #4338ca; }
.badge-manager    { background: #ede9fe; color: #7c3aed; }
.badge-admin      { background: #fae8ff; color: #a21caf; }
.badge-blocked-role { background: #fee2e2; color: #dc2626; }
/* dark variants */
.dark .badge-new        { background: #1e293b; color: #94a3b8; }
.dark .badge-accepted   { background: #1e3a5f; color: #93c5fd; }
.dark .badge-in_progress{ background: #1e1b4b; color: #a5b4fc; }
.dark .badge-review     { background: #2e1065; color: #c4b5fd; }
.dark .badge-rework     { background: #431407; color: #fdba74; }
.dark .badge-blocked    { background: #450a0a; color: #fca5a5; }
.dark .badge-problem    { background: #4c0519; color: #fda4af; }
.dark .badge-done       { background: #052e16; color: #86efac; }
.dark .badge-cancelled  { background: #0f172a; color: #475569; }
.dark .badge-planned              { background: #1e3a5f; color: #93c5fd; }
.dark .badge-submitted_for_review { background: #2e1065; color: #c4b5fd; }
.dark .badge-returned_for_revision{ background: #431407; color: #fdba74; }
.dark .badge-waiting_dependency   { background: #451a03; color: #fcd34d; }
.dark .badge-ready_to_start       { background: #052e16; color: #86efac; }
.dark .badge-active     { background: #052e16; color: #86efac; }
.dark .badge-paused     { background: #3d3700; color: #fde68a; }
.dark .badge-employee   { background: #1e1b4b; color: #a5b4fc; }
.dark .badge-manager    { background: #2e1065; color: #c4b5fd; }
.dark .badge-admin      { background: #4a044e; color: #f0abfc; }
.dark .badge-blocked-role { background: #450a0a; color: #fca5a5; }

/* New canonical task statuses — badges */
.badge-planned              { background: #dbeafe; color: #1d4ed8; }
.badge-submitted_for_review { background: #ede9fe; color: #7c3aed; }
.badge-returned_for_revision{ background: #ffedd5; color: #c2410c; }
.dark .badge-planned              { background: #1e3a5f; color: #93c5fd; }
.dark .badge-submitted_for_review { background: #2e1065; color: #c4b5fd; }
.dark .badge-returned_for_revision{ background: #431407; color: #fdba74; }
.badge-waiting_dependency { background: #fef3c7; color: #92400e; }
.badge-ready_to_start     { background: #dcfce7; color: #15803d; }
.dark .badge-waiting_dependency { background: #451a03; color: #fde68a; }
.dark .badge-ready_to_start     { background: #052e16; color: #86efac; }

/* --- Priority dots --- */
.dot-high     { width:8px; height:8px; border-radius:50%; background:#ef4444; display:inline-block; flex-shrink:0; }
.dot-normal   { width:8px; height:8px; border-radius:50%; background:#6366f1; display:inline-block; flex-shrink:0; }
.dot-low      { width:8px; height:8px; border-radius:50%; background:#94a3b8; display:inline-block; flex-shrink:0; }
.dot-critical { width:8px; height:8px; border-radius:50%; background:#e11d48; display:inline-block; flex-shrink:0; }

/* --- Sidebar nav active indicator --- */
.nav-active::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: #6366f1;
  border-radius: 0 9999px 9999px 0;
}

/* --- Card hover lift --- */
.card-hover { transition: transform 150ms ease, box-shadow 150ms ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -5px rgba(0,0,0,.10); }

/* --- Table row hover --- */
.tr-hover { transition: background 100ms ease; }
.tr-hover:hover { background: #f8fafc; }
.dark .tr-hover:hover { background: rgba(255,255,255,.025); }

/* --- Form inputs (supplement Tailwind) --- */
.input {
  width: 100%;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #0f172a;
  transition: border-color 150ms, box-shadow 150ms;
}
.input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.dark .input { background: #1e293b; border-color: #334155; color: #f1f5f9; }
.dark .input:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.15); }

/* --- Button styles --- */
.btn        { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; transition:all 150ms; }
.btn-primary{ background:#6366f1; color:#fff; border:none; }
.btn-primary:hover{ background:#4f46e5; }
.btn-secondary{ background:#f1f5f9; color:#334155; border:none; }
.btn-secondary:hover{ background:#e2e8f0; }
.btn-danger{ background:#ef4444; color:#fff; border:none; }
.btn-danger:hover{ background:#dc2626; }
.btn-ghost { background:transparent; color:#64748b; border:none; }
.btn-ghost:hover { background:#f1f5f9; color:#334155; }
.btn-sm { padding:5px 10px; font-size:12px; border-radius:6px; }
.btn-xs { padding:3px 8px; font-size:11px; border-radius:5px; }
/* Неактивная кнопка обязана ВЫГЛЯДЕТЬ неактивной: на правиле «публикация ждёт
   сохранения» (CLAUDE.md, «Обязательный контракт документа») погасшая кнопка —
   это сообщение, а не украшение. Без этих строк `disabled` у .btn не менял вид
   вовсе — фон задан своим правилом, и браузеру нечего гасить, — то есть человек
   нажимал бы на кнопку, которая молча не срабатывает. `:hover` тоже гасится:
   иначе неактивная кнопка меняет цвет под курсором и выглядит рабочей. */
.btn:disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn-primary:disabled:hover   { background:#6366f1; }
.btn-secondary:disabled:hover { background:#f1f5f9; }
.dark .btn-secondary:disabled:hover { background:#334155; }
.btn-danger:disabled:hover    { background:#ef4444; }
.btn-ghost:disabled:hover     { background:transparent; color:#64748b; }
.dark .btn-secondary { background:#334155; color:#e2e8f0; }
.dark .btn-secondary:hover { background:#475569; }
.dark .btn-ghost { color:#94a3b8; }
.dark .btn-ghost:hover { background:#1e293b; color:#e2e8f0; }

/* --- Modal --- */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(3px); z-index:40; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal { background:#fff; border-radius:16px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); width:100%; max-width:500px; max-height:90vh; overflow-y:auto; }
.dark .modal { background:#1e293b; }

/* --- Chart container sizing --- */
.chart-wrap { position:relative; width:100%; }

/* --- Gradient text --- */
.gradient-text { background:linear-gradient(135deg,#6366f1,#8b5cf6); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* --- Avatar circle --- */
.avatar { width:32px; height:32px; border-radius:50%; background:#6366f1; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }

/* --- Responsive table wrapper --- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- Workload badges --- */
.badge-free       { background: #f0fdf4; color: #16a34a; }
.badge-normal     { background: #dcfce7; color: #15803d; }
.badge-busy       { background: #fef3c7; color: #b45309; }
.badge-overloaded { background: #fee2e2; color: #dc2626; }
.badge-critical   { background: #fee2e2; color: #dc2626; }
.dark .badge-free       { background: #052e16; color: #86efac; }
.dark .badge-normal     { background: #052e16; color: #4ade80; }
.dark .badge-busy       { background: #451a03; color: #fcd34d; }
.dark .badge-overloaded { background: #450a0a; color: #fca5a5; }
.dark .badge-critical   { background: #450a0a; color: #fca5a5; }

/* --- Workload progress bar variants --- */
.progress-bar-free     { background: linear-gradient(90deg, #22c55e, #86efac); }
.progress-bar-normal   { background: linear-gradient(90deg, #10b981, #34d399); }
.progress-bar-busy     { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.progress-bar-overloaded { background: linear-gradient(90deg, #ef4444, #fca5a5); }
.progress-bar-critical { background: linear-gradient(90deg, #ef4444, #fca5a5); }

/* --- stat-orange --- */
.stat-orange { border-top: 3px solid #f97316; }

/* --- Utility text clamp --- */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Workspace urgency cues --- */
.deadline-urgent {
  box-shadow: 0 0 24px -14px rgba(245, 158, 11, 0.95);
}

.risk-high {
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}