/* ==========================================================================
   CRYPTALIST — новый дизайн: дополняющие утилиты + слой совместимости
   Подключается ПОСЛЕ style-new.css, index.css и courses.css.
   ========================================================================== */

/* ---------- Типографика и базовые переменные ---------- */
:root {
  --font-heading: "Wix Madefor Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Wix Madefor Text", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --accent: 172 66% 50%;
  --accent-2: 160 84% 49%;
}

html {
  scroll-behavior: smooth;
}

html.dark {
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-heading {
  font-family: var(--font-heading);
}

/* ---------- Недостающие утилиты из нового макета ---------- */
.glass-header {
  background-color: hsl(var(--background) / 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.glow-teal {
  box-shadow: 0 0 12px hsl(var(--accent) / 0.55), 0 0 28px hsl(var(--accent) / 0.25);
}

.glow-teal-text {
  text-shadow: 0 0 12px hsl(var(--accent) / 0.55);
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.text-balance {
  text-wrap: balance;
}

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.h-4\.5 { height: 1.125rem; }
.w-4\.5 { width: 1.125rem; }

/* ---------- Брендовые акцентные цвета ---------- */
.text-\[\#f7931a\], .cl-text-bitcoin { color: #f7931a; }
.text-\[\#FF3B69\], .cl-text-urgent, .cl-text-down { color: #ff3b69; }
.text-\[\#00FF94\], .cl-text-up { color: #00ff94; }
.text-\[\#a855f7\], .cl-text-nft { color: #a855f7; }

.bg-\[\#FF3B69\]\/15 { background-color: rgba(255, 59, 105, 0.15); }
.bg-\[\#FF3B69\]\/10 { background-color: rgba(255, 59, 105, 0.10); }
.bg-\[\#00FF94\]\/15 { background-color: rgba(0, 255, 148, 0.15); }
.bg-\[\#00FF94\]\/10 { background-color: rgba(0, 255, 148, 0.10); }

.border-\[\#FF3B69\]\/30 { border-color: rgba(255, 59, 105, 0.30); }

.cl-badge-bitcoin { background-color: rgba(247, 147, 26, 0.12); border: 1px solid rgba(247, 147, 26, 0.28); color: #f7931a; }
.cl-badge-urgent { background-color: rgba(255, 59, 105, 0.12); border: 1px solid rgba(255, 59, 105, 0.28); color: #ff3b69; }
.cl-badge-up { background-color: rgba(0, 255, 148, 0.12); border: 1px solid rgba(0, 255, 148, 0.28); color: #00ff94; }
.cl-badge-nft { background-color: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.28); color: #a855f7; }

/* ---------- Раскладка контентной сетки ---------- */
.cl-container {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 1024px) {
  .cl-container { padding-inline: 2rem; }
}

.cl-layout {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .cl-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

.cl-card {
  background-color: hsl(var(--card) / 0.6);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-2xl, 16px);
}

/* ---------- Слой совместимости для старых AdminLTE/Bootstrap страниц ---------- */
body.sidebar-mini .content-wrapper,
body.sidebar-mini .main-footer,
.wrapper .content-wrapper,
.content-wrapper {
  margin-left: 0 !important;
}

.wrapper {
  min-height: 100vh;
  background-color: hsl(var(--background));
}

.content-wrapper {
  background: transparent !important;
  min-height: 0 !important;
  padding: 0 1rem 3rem;
  max-width: 1400px;
  margin-inline: auto;
}

.content-header {
  background: transparent !important;
  padding: 1.5rem 0 1rem;
}
.content-header h1,
.content-header h2 {
  color: hsl(var(--foreground)) !important;
  font-family: var(--font-heading);
}

.content {
  padding-top: 0.5rem;
}

/* Карточки */
.card {
  background-color: hsl(var(--card) / 0.7) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius-2xl, 16px) !important;
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.04);
}
.card-header {
  background-color: transparent !important;
  border-bottom-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground));
}
.card-primary.card-outline { border-top: 2px solid hsl(var(--primary)) !important; }
.card-primary:not(.card-outline) > .card-header {
  background-color: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--foreground)) !important;
}

/* Таблицы */
.table {
  color: hsl(var(--foreground)) !important;
}
.table th {
  border-top: none !important;
  border-bottom-color: hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.table td {
  border-color: hsl(var(--border)) !important;
  vertical-align: middle;
}
.table-hover tbody tr:hover {
  background-color: hsl(var(--primary) / 0.05);
  color: hsl(var(--foreground));
}
.table-bordered, .table-bordered th, .table-bordered td {
  border-color: hsl(var(--border)) !important;
}
.table thead th { border-bottom-width: 1px; }

/* Кнопки */
.btn {
  border-radius: 10px;
  font-weight: 600;
}
.btn-primary {
  background-color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.btn-primary:hover {
  opacity: 0.88;
}
.btn-outline-secondary, .btn-default {
  background-color: transparent !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}
.btn-outline-secondary:hover, .btn-default:hover {
  border-color: hsl(var(--primary) / 0.5) !important;
  color: hsl(var(--foreground)) !important;
  background-color: hsl(var(--primary) / 0.05) !important;
}

/* Формы */
.form-control {
  background-color: hsl(var(--background) / 0.6) !important;
  border: 1px solid hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
  border-radius: 10px;
}
.form-control:focus {
  border-color: hsl(var(--primary) / 0.5) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12) !important;
}
.form-control::placeholder { color: hsl(var(--muted-foreground)); }

/* Навигация-табы */
.nav-tabs {
  border-bottom-color: hsl(var(--border)) !important;
}
.nav-tabs .nav-link {
  color: hsl(var(--muted-foreground)) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}
.nav-tabs .nav-link:hover {
  color: hsl(var(--foreground)) !important;
}
.nav-tabs .nav-link.active {
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  border-bottom: 2px solid hsl(var(--primary)) !important;
}

/* Дропдауны */
.dropdown-menu {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
}
.dropdown-item {
  color: hsl(var(--foreground)) !important;
}
.dropdown-item:hover, .dropdown-item.active {
  background-color: hsl(var(--primary) / 0.08) !important;
  color: hsl(var(--foreground)) !important;
}

/* Бейджи */
.badge {
  font-weight: 600;
}
.badge-info { background-color: hsl(var(--primary) / 0.15) !important; color: hsl(var(--foreground)) !important; }
.badge-success { background-color: rgba(0, 255, 148, 0.15) !important; color: #00ff94 !important; }
.badge-danger { background-color: rgba(255, 59, 105, 0.15) !important; color: #ff3b69 !important; }
.badge-warning { background-color: rgba(247, 147, 26, 0.15) !important; color: #f7931a !important; }

/* Ссылки и утилиты текста */
a { color: inherit; }
a:hover { color: inherit; }
.content a:not(.btn):not(.nav-link):not(.dropdown-item) { color: hsl(var(--foreground)); }
.content a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: hsl(var(--accent)); }

.text-muted { color: hsl(var(--muted-foreground)) !important; }
.bg-white { background-color: hsl(var(--card)) !important; }
.bg-light { background-color: hsl(var(--secondary)) !important; }

.green { color: #00ff94 !important; }
.red { color: #ff3b69 !important; }
.yellow { color: #f7931a !important; }

/* Прогресс */
.progress { background-color: hsl(var(--border)) !important; }

/* Алерты */
.alert {
  border-radius: 12px;
  background-color: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground));
}

/* Выделение */
::selection { background-color: hsl(var(--primary) / 0.25); }

/* Тонкий скроллбар */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background-color: hsl(var(--border)); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Главный логотип-плитка в шапке */
.cl-logo-tile {
  background-color: hsl(var(--primary) / 0.12);
  border: 1px solid hsl(var(--primary) / 0.35);
  border-radius: 10px;
}
.cl-logo-dot {
  background-color: hsl(var(--primary));
  border-radius: 3px;
}

/* Футер */
.cl-footer-link {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.15s ease;
}
.cl-footer-link:hover {
  color: hsl(var(--foreground));
}

/* Кнопка темы */
.cl-theme-btn {
  transition: color 0.15s ease, background-color 0.15s ease;
}
.cl-theme-btn:hover {
  color: hsl(var(--foreground));
  background-color: hsl(var(--primary) / 0.08);
}

/* ---------- Недостающие адаптивные утилиты (style-new.css их не содержит) ---------- */
@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-end { align-items: flex-end; }
}

@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:inline-flex { display: inline-flex; }
}

@media (min-width: 1280px) {
  .xl\:flex { display: flex; }
}