/* Базовый слой и компоненты в стиле Gravity UI, построенные на tokens.css */

/* База */
html, body {
  background: var(--g-color-base-background);
  color: var(--g-text-primary);
  font-family: var(--g-font-family);
  font-size: var(--g-font-size-m);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--g-color-brand); text-decoration: none; }
a:hover { color: var(--g-color-brand-hover); }

.g-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--g-space-5);
}

/* Иконки */
.g-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; overflow: visible !important; }
.g-icon svg { width: 20px; height: 20px; overflow: visible !important; }

/* Иконки в кнопках - обязательно visible и правильный размер */
.g-btn .g-icon,
.g-btn svg.g-icon {
  width: 20px;
  height: 20px;
  overflow: visible !important;
  flex-shrink: 0;
}

/* Кнопки */
.g-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2);
  height: var(--g-control-height-m);
  padding: 0 var(--g-control-padding-x);
  border-radius: var(--g-radius-s);
  border: var(--g-control-border);
  background: var(--g-surface-elevated);
  color: var(--g-text-primary);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.g-btn:hover { background: var(--g-surface-subtle); }
.g-btn:disabled { opacity: .6; cursor: not-allowed; }

.g-btn_primary {
  background: var(--g-color-brand);
  color: var(--g-color-brand-contrast);
  border-color: transparent;
}
.g-btn_primary:hover { background: var(--g-color-brand-hover); }
.g-btn_primary:active { background: var(--g-color-brand-pressed); }

.g-btn_flat {
  background: transparent;
  border-color: transparent;
  color: var(--g-color-brand);
}
.g-btn_flat:hover { background: rgba(79,70,229,0.08); }

.g-btn_l { height: var(--g-control-height-l); }
.g-btn_s { height: var(--g-control-height-s); }

/* Формы */
.g-form-group { margin-bottom: var(--g-space-4); }
.g-label { display: block; margin-bottom: var(--g-space-2); color: var(--g-text-secondary); font-size: var(--g-font-size-s); }
.g-input, .g-select, .g-textarea {
  width: 100%;
  height: var(--g-control-height-m);
  padding: 0 var(--g-control-padding-x);
  border-radius: var(--g-radius-s);
  border: var(--g-control-border);
  background: var(--g-surface-elevated);
  color: var(--g-text-primary);
}
.g-input:focus, .g-select:focus, .g-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.2);
  border-color: var(--g-color-brand);
}
.g-help { margin-top: var(--g-space-1); color: var(--g-text-muted); font-size: var(--g-font-size-s); }
.g-error { color: var(--g-color-danger); font-size: var(--g-font-size-s); }

/* Чекбоксы, радио, свитч (минималистично, через accent-color) */
input[type="checkbox"].g-checkbox,
input[type="radio"].g-radio {
  accent-color: var(--g-color-brand);
}

input[type="checkbox"].g-switch {
  width: 42px;
  height: 24px;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  background: #cfd6e4;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  transition: background .15s ease;
}
input[type="checkbox"].g-switch:checked { background: var(--g-color-brand); }
input[type="checkbox"].g-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--g-shadow-s);
  transition: left .15s ease;
}
input[type="checkbox"].g-switch:checked::after { left: 21px; }

/* Карточки/панели */
.g-card {
  background: var(--g-surface-elevated);
  border: 1px solid var(--g-color-line);
  border-radius: var(--g-radius-m);
  box-shadow: var(--g-shadow-s);
  padding: var(--g-space-4);
}
.g-card__header { padding: var(--g-space-4); border-bottom: 1px solid var(--g-color-line); font-weight: 600; }
.g-card__body { padding: var(--g-space-4); }

/* Небольшая доводка сайдбара */
.sidebar .sidebar-link { transition: background .15s ease, color .15s ease; }
.sidebar .sidebar-link.active { font-weight: 600; }
.sidebar .sidebar-section-header { user-select: none; }

/* Таблицы */
.g-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--g-surface-elevated); }
.g-table thead th { position: sticky; top: 0; background: var(--g-surface-elevated); z-index: 2; border-bottom: 1px solid var(--g-color-line); padding: 8px 10px; color: var(--g-text-secondary); text-align: left; font-weight: 600; }
.g-table tbody td { border-bottom: 1px solid var(--g-color-line); padding: 6px 10px; }
.g-table tbody tr:hover { background: var(--g-surface-subtle); }
.g-table_dense thead th { padding: 6px 8px; }
.g-table_dense tbody td { padding: 4px 8px; }

/* Сайдбар (адаптация под текущую разметку) */
.sidebar {
  width: 280px;
  background: var(--g-surface-elevated);
  border-right: 1px solid var(--g-color-line);
  box-shadow: var(--g-shadow-s);
}
.sidebar.expanded {}
.sidebar.collapsed { width: 64px; }

.sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--g-space-4); }
.sidebar-title { font-weight: 600; font-size: var(--g-font-size-l); color: var(--g-text-primary); }
.sidebar-toggle-btn { border: none; background: transparent; color: var(--g-text-secondary); cursor: pointer; }

.sidebar-nav { padding: var(--g-space-2) 0; }
.sidebar-menu { list-style: none; margin: 0; padding: 0; }
.sidebar-section-header {
  padding: var(--g-space-3) var(--g-space-4) var(--g-space-2);
  font-size: 11px;
  color: var(--g-text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sidebar-link {
  display: block;
  padding: 10px var(--g-space-4);
  color: var(--g-text-primary);
  border-radius: var(--g-radius-s);
}
.sidebar-link:hover { background: var(--g-surface-subtle); }
.sidebar-link.active { background: var(--g-color-brand); color: var(--g-color-brand-contrast); }

.sidebar-footer { border-top: 1px solid var(--g-color-line); padding: var(--g-space-4); color: var(--g-text-secondary); }

/* Логин */
.login-container { display: grid; place-items: center; min-height: 100vh; background: var(--g-surface-subtle); }
.login-box { width: 100%; max-width: 420px; background: var(--g-surface-elevated); border: 1px solid var(--g-color-line); border-radius: var(--g-radius-l); box-shadow: var(--g-shadow-m); padding: var(--g-space-5); }
.login-title { margin: 0 0 var(--g-space-2); font-size: 28px; }
.login-subtitle { margin: 0 0 var(--g-space-5); color: var(--g-text-secondary); }
.form-group { margin-bottom: var(--g-space-4); }

/* Утилиты */
.g-flex { display: flex; }
.g-center { display: grid; place-items: center; }
.g-mt-2 { margin-top: var(--g-space-2); }
.g-mt-4 { margin-top: var(--g-space-4); }