/* ═══════════════════════════════════════════════════════════════
   CubeMP UI Kit — дизайн-система кабинета по мотивам лендинга v2
   Подключается ПОСЛЕ DaisyUI. Только оформление, без логики.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Типографика ── */
body{
  font-family:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* заголовки страниц и карточек — как их реально размечает кабинет (Tailwind-утилиты) */
h1,h2,.page-title,.card-title,
.text-2xl,.text-3xl{
  font-family:'Unbounded','Onest',sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
}
h1,.text-3xl{font-weight:700;}
/* KPI-значения (text-xl font-bold в карточках) — дисплейный шрифт + табличные цифры */
.text-xl.font-bold,.stat-value,.kpi-value{
  font-family:'Unbounded','Onest',sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
/* деньги и количества в таблицах не «пляшут» при обновлении */
table td,table th,.stat,.badge,.tabular{
  font-variant-numeric:tabular-nums;
}

/* ── 2. Палитра: тёмная тема — фирменный чернильный вместо сине-серого ── */
[data-theme="cubemp"]{
  --color-base-100:#151a1f;
  --color-base-200:#10141a;
  --color-base-300:#1f262e;
  --color-base-content:#e6eae2;
  --color-primary:#8bc34a;
  --color-primary-content:#16230c;
  --color-accent:#aeea00;
  --color-accent-content:#16230c;
  --color-neutral:#242c35;
  --color-neutral-content:#cfd5cc;
}
[data-theme="cubemp-light"]{
  --color-base-200:#f4f6f2;
  --color-base-300:#e7ece2;
  --color-primary:#7cb342;
  --color-primary-content:#ffffff;
  --color-accent:#8bc34a;
  --color-accent-content:#1c2b10;
}

/* ── 3. Радиусы и тени — как на лендинге ── */
:root{
  --radius-box:1rem;
  --radius-field:0.65rem;
  --radius-selector:0.5rem;
  --ck-ease:cubic-bezier(.16,1,.3,1);
}
.card{border-radius:16px;}
.btn{border-radius:12px;}

/* ── 4. Фирменное движение: отклик без цирка ── */
.btn{
  transition:transform .22s var(--ck-ease),box-shadow .22s ease,
    background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px);}
.btn:active:not(:disabled){transform:translateY(0);}
.btn-primary:hover:not(:disabled),.btn-accent:hover:not(:disabled){
  box-shadow:0 8px 22px -8px rgba(139,195,74,.55);
}
.card{
  transition:transform .25s var(--ck-ease),box-shadow .25s ease,border-color .2s ease;
}
.card.card-hover:hover,a.card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px -18px rgba(20,40,10,.25);
}
/* строки таблиц: мягкая подсветка */
tbody tr{transition:background-color .15s ease;}

/* ── 5. Ссылки и фокус ── */
a{transition:color .18s ease;}
:focus-visible{
  outline:2px solid rgba(139,195,74,.65);
  outline-offset:2px;
  border-radius:6px;
}

/* ── 6. Появление контента: лёгкий фирменный fade страниц ── */
@media (prefers-reduced-motion: no-preference){
  main,.page-enter{animation:ck-page-in .35s var(--ck-ease) both;}
  @keyframes ck-page-in{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:none;}
  }
}

/* ── 7. Скроллбар в тон (WebKit) ── */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{
  background:rgba(124,150,110,.35);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background-color:rgba(124,150,110,.55);}
[data-theme="cubemp"] ::-webkit-scrollbar-thumb{background-color:rgba(139,195,74,.28);}

/* ═══ 8. Компонентный слой: перенос дизайна лендинга в кабинет ═══ */

/* ── Сайдбар как объект лендинга ── */
.sidebar{border-right:1px solid var(--color-base-300);}
[data-theme="cubemp-light"] .sidebar{background:#f7f8f6;}
[data-theme="cubemp"] .sidebar{background:#10141a;}
/* активный пункт: лаймовая полоса слева + мягкая подложка (вместо серой справа) */
.sidebar nav a.border-primary{
  border-right-width:0!important;
  box-shadow:inset 3px 0 0 var(--color-primary);
  background:rgba(139,195,74,.10)!important;
}
.sidebar nav a{border-radius:0 10px 10px 0;margin-right:6px;}
.sidebar nav a:hover{background:rgba(139,195,74,.08)!important;}

/* ── Карточки: тонкий бордер и глубокая мягкая тень, как на лендинге ── */
.card{
  border:1px solid rgba(30,50,20,.09);
  box-shadow:0 10px 28px -20px rgba(20,40,10,.18);
}
[data-theme="cubemp"] .card{
  border-color:rgba(255,255,255,.07);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.55);
}

/* ── Таблицы: шапка в стиле лендинговых подписей ── */
table thead th{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--color-base-content) 55%,transparent);
}
tbody tr:hover{background:rgba(139,195,74,.06);}

/* ── Формы ── */
.input,.select,.textarea{border-radius:10px;}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(139,195,74,.18);
  outline:none;
}

/* ── Бейджи-пилюли ── */
.badge{border-radius:999px;font-weight:600;}

/* ── 9. Карточные лейблы: фирменная подпись лендинга (мелкий капс с разрядкой) ── */
.card-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--color-base-content) 55%,transparent);
}

/* ── 10. Кнопки подсказок страниц: тихие, в фирменном лайме ── */
.ph-hide,.ph-open{
  cursor:pointer;flex:none;background:none;
  font:500 13px 'Onest',system-ui,sans-serif;
  color:color-mix(in srgb,var(--color-base-content,#1c2126) 60%,transparent);
  border:1px solid var(--color-base-300,#e7ece2);
  padding:8px 16px;border-radius:10px;
  display:inline-flex;align-items:center;gap:6px;
  align-self:center;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.ph-hide:hover,.ph-open:hover{
  color:color-mix(in srgb,var(--color-base-content,#1c2126) 90%,transparent);
  border-color:color-mix(in srgb,var(--color-base-content,#1c2126) 25%,transparent);
  background:color-mix(in srgb,var(--color-base-content,#1c2126) 5%,transparent);
}
.ph-open{border-style:dashed;}
.ph-open{opacity:.75;}
.ph-open:hover{opacity:1;}
/* текст подсказки не разбегается на широких мониторах */
.ph-card .font-semibold{max-width:96ch;}
.ph-card p{max-width:96ch;}