:root {
  --bg: #0d1118;
  --bg-2: #0f1520;

  --panel: #121826;
  --panel-2: #171f30;
  --panel-3: #0f1624;

  --line: #263246;
  --line-2: #31405a;

  --text: #eef4ff;
  --muted: #93a1b7;

  --accent: #5b8def;
  --accent-2: #7aa5ff;

  --ok-bg: rgba(91,141,239,0.12);
  --ok-line: rgba(91,141,239,0.28);

  --manager-bg: #24364f;
  --manager-line: #6f9ff0;

  --employee-bg: #223a2a;
  --employee-line: #6fb983;

  --off-bg: #402126;
  --off-line: #d26a78;

  --silent-bg: #101722;
  --silent-line: #334257;

  --auto-bg: #3b3218;
  --auto-line: #c9a74a;

  --problem-bg: #1a2233;
  --problem-line: #34445f;

  --warn-bg: #3a3218;
  --warn-line: #9e8240;

  --critical-bg: #402126;
  --critical-line: #b86472;

  --success-bg: #203626;
  --success-line: #4d9961;

  --radius: 14px;
  --shadow: 0 10px 26px rgba(0,0,0,0.22);

  /* 🔥 добавили систему плавности */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 160ms;
  --normal: 260ms;
  --slow: 420ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  color: var(--text);
  font-family: Arial, sans-serif;
}

body {
  min-height: 100vh;
}

/* ================== ПЛАВНЫЙ СТАРТ ================== */

body.app-loading .app {
  opacity: 0;
  transform: translateY(10px);
}

.app {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--slow) var(--ease),
    transform var(--slow) var(--ease);
}

/* ================== ГЛОБАЛЬНЫЕ TRANSITION ================== */

button,
input,
select,
textarea,
.day-pill,
.slot-btn,
.mini-btn,
.summary-day-card,
.day-column,
.slot-card,
.candidate-card,
.stat,
.badge,
.day-cell,
.sidebar-section,
.modal,
.toast {
  transition:
    background-color var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),
    box-shadow var(--normal) var(--ease),
    transform var(--normal) var(--ease),
    opacity var(--normal) var(--ease);
}

/* ================== HOVER / PRESS ================== */

button:hover,
.mini-btn:hover,
.day-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

button:active,
.mini-btn:active,
.day-pill:active {
  transform: scale(0.97);
}

/* ================== АНИМАЦИИ ================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInSoft {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideLeftSoft {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================== КЛАССЫ ДЛЯ JS ================== */

.fade-up {
  animation: fadeUp var(--normal) var(--ease);
}

.fade-in {
  animation: fadeInSoft var(--normal) var(--ease);
}

.slide-in {
  animation: slideLeftSoft var(--normal) var(--ease);
}

/* stagger эффект */
.stagger-item {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp var(--normal) var(--ease) forwards;
}

/* ================== СКРОЛЛ ================== */

.main::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.main::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: #2c3950;
  border-radius: 999px;
  transition: background var(--fast) var(--ease);
}

.main::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover {
  background: #3a4a66;
}