/* #29 colored fields — палитра типов полей редактора блока.
   Класс на wrapper'е: .kg-field.kg-field--{slug}. */

.kg-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: 0.5rem;
  background: var(--kg-field-bg, transparent);
  border: 1px solid var(--kg-field-border, rgba(255, 255, 255, 0.06));
  transition: border-color 0.15s ease, background 0.15s ease;
}

.kg-field:focus-within {
  border-color: var(--kg-primary, #6366f1);
}

.kg-field-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kg-field-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background: var(--kg-field-border, rgba(255, 255, 255, 0.08));
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.85);
}

.kg-field-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.kg-field-hint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Палитра по типу */
.kg-field--text     { --kg-field-bg: rgba(120, 120, 130, 0.05); }
.kg-field--textarea { --kg-field-bg: rgba(120, 120, 130, 0.05); }
.kg-field--color    { --kg-field-bg: rgba(244, 114, 182, 0.08); --kg-field-border: rgba(244, 114, 182, 0.25); }
.kg-field--url      { --kg-field-bg: rgba( 56, 189, 248, 0.08); --kg-field-border: rgba( 56, 189, 248, 0.25); }
.kg-field--email    { --kg-field-bg: rgba(167, 139, 250, 0.08); --kg-field-border: rgba(167, 139, 250, 0.25); }
.kg-field--tel      { --kg-field-bg: rgba(251, 191,  36, 0.08); --kg-field-border: rgba(251, 191,  36, 0.25); }
.kg-field--number   { --kg-field-bg: rgba(163, 230,  53, 0.08); --kg-field-border: rgba(163, 230,  53, 0.25); }
.kg-field--json     { --kg-field-bg: rgba(148, 163, 184, 0.10); --kg-field-border: rgba(148, 163, 184, 0.30); }
.kg-field--image    { --kg-field-bg: rgba( 45, 212, 191, 0.08); --kg-field-border: rgba( 45, 212, 191, 0.25); }
.kg-field--rich-text{ --kg-field-bg: rgba(120, 120, 130, 0.05); }
.kg-field--bool     { background: transparent; border: none; padding: 0.5rem 0; }

/* ===== Mobile-admin drawer overrides — НЕ зависят от Tailwind purge ===== */

/* Mobile (default <768px): sidebar — fixed drawer, скрыт. */
.kg-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  width: 18rem; /* 72 в Tailwind = 288px */
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}

.kg-sidebar--open {
  transform: translateX(0);
}

.kg-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.kg-hamburger {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 50;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: rgba(31, 41, 55, 0.95); /* gray-800/95 */
  border: 1px solid rgb(55, 65, 81);  /* gray-700 */
  color: rgb(229, 231, 235);          /* gray-200 */
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  cursor: pointer;
}

.kg-admin-content {
  padding: 1rem;
  padding-top: 3.5rem;  /* запас под hamburger */
  padding-left: 3.5rem; /* C6: чтобы текст topbar не заходил под hamburger */
}

/* Desktop (≥768px): sidebar статичный, hamburger/overlay скрыты. */
@media (min-width: 768px) {
  .kg-sidebar {
    position: relative !important;
    transform: none !important;
    z-index: auto !important;
    /* Layout-Fixer: width фиксируем флексом + явный flex-shrink:0, чтобы
       широкий main-контент (длинные URL, table, code в SEO/Header settings)
       не выталкивал sidebar за viewport → визуальный overlap. */
    flex: 0 0 18rem;
    transition: width 0.18s ease, padding 0.18s ease, flex-basis 0.18s ease;
  }
  /* Layout-Fixer: контейнер main-контента (sibling sidebar'а в kg-admin-root)
     должен корректно ужиматься. flex-1 без min-width:0 не работает с длинным
     контентом — раздувается за счёт sidebar. Селектор не привязан к классу,
     чтобы пережить будущие правки разметки. */
  .kg-admin-root > .flex-1 {
    min-width: 0 !important;
  }
  .kg-overlay,
  .kg-hamburger {
    display: none !important;
  }
  .kg-admin-content {
    padding: 2rem;
    padding-top: 2rem;
  }

  /* C14: collapse режим — узкая колонка только с иконками. */
  .kg-sidebar--collapsed {
    /* Layout-Fixer: переопределяем flex-basis из базы .kg-sidebar (18rem),
       чтобы collapsed реально сжимался. */
    flex: 0 0 4.5rem !important;
    width: 4.5rem !important;
  }
  .kg-sidebar--collapsed .kg-side-label,
  .kg-sidebar--collapsed .kg-side-section,
  .kg-sidebar--collapsed .kg-side-badge {
    display: none !important;
  }
  .kg-sidebar--collapsed .kg-side-btn {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .kg-sidebar--collapsed .kg-sidebar-header {
    padding: 1rem 0.5rem;
    justify-content: center;
  }
}

/* Mobile (<768px): collapse-toggle и collapsed класс игнорируются. */
@media (max-width: 767.98px) {
  .kg-collapse-btn { display: none !important; }
  .kg-sidebar--collapsed .kg-side-label,
  .kg-sidebar--collapsed .kg-side-section,
  .kg-sidebar--collapsed .kg-side-badge {
    /* На mobile collapsed-класс есть, но drawer всё равно полный */
    display: revert !important;
  }
}

/* ===== C7 light theme overrides — :root.kg-light переключает палитру админки ===== */
/* По умолчанию dark (Tailwind bg-gray-900). Light активируется классом kg-light на <html>. */

:root.kg-light body {
  background: #f8fafc !important; /* slate-50 */
  color: #0f172a !important;       /* slate-900 */
}
:root.kg-light .bg-gray-900,
:root.kg-light .bg-gray-900\/95,
:root.kg-light .bg-gray-900\/60 {
  background-color: #f8fafc !important;
}
:root.kg-light .bg-gray-800,
:root.kg-light .bg-gray-800\/95,
:root.kg-light .bg-gray-800\/80,
:root.kg-light .bg-gray-800\/50,
:root.kg-light .bg-gray-800\/40 {
  background-color: #ffffff !important;
}
:root.kg-light .border-gray-700,
:root.kg-light .border-gray-700\/60,
:root.kg-light .border-gray-700\/50 {
  border-color: #e2e8f0 !important; /* slate-200 */
}
:root.kg-light .text-white,
:root.kg-light .text-gray-100,
:root.kg-light .text-gray-200,
:root.kg-light .text-gray-300 {
  color: #0f172a !important;
}
:root.kg-light .text-gray-400,
:root.kg-light .text-gray-500 {
  color: #64748b !important; /* slate-500 */
}
:root.kg-light .text-gray-600 {
  color: #475569 !important; /* slate-600 */
}
:root.kg-light .hover\:bg-gray-700\/40:hover,
:root.kg-light .hover\:bg-gray-700:hover {
  background-color: #e2e8f0 !important;
}
:root.kg-light .shadow-2xl {
  box-shadow: 0 20px 25px -5px rgba(15,23,42,0.10), 0 10px 10px -5px rgba(15,23,42,0.04) !important;
}
/* kg-field в light теме */
:root.kg-light .kg-field {
  border-color: rgba(15,23,42,0.08);
}
:root.kg-light .kg-field-label {
  color: rgba(15,23,42,0.85);
}
:root.kg-light .kg-field-hint {
  color: rgba(15,23,42,0.5);
}