/* === ULTRA: базовые переменные (легко подружить с твоей темой) === */
:root{
  --ultra-bg: #fff;
  --ultra-bg-subtle: #f6f7fb;
  --ultra-border: rgba(3, 7, 18, .12);
  --ultra-border-strong: rgba(3, 7, 18, .18);
  --ultra-text: #0f172a;
  --ultra-text-dim: #475569;
  --ultra-primary: #2563eb;
  --ultra-primary-10: rgba(37, 99, 235, .10);
  --ultra-primary-15: rgba(37, 99, 235, .15);
  --ultra-success: #16a34a;
  --ultra-danger: #dc2626;
  --ultra-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(2,6,23,.06);

  --ultra-radius: 1px;
  --ultra-radius-lg: 1px;
  --ultra-pad-y: .625rem;
  --ultra-pad-x: .875rem;
  --ultra-gap: 12px;
  --ultra-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* === Сетка и карточки (мягкая визуалка) === */
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: var(--ultra-gap); }
@media (max-width: 960px){ .grid-2{ grid-template-columns: 1fr; } }

.card{
  background: var(--ultra-bg);
  border: 1px solid var(--ultra-border);
  border-radius: var(--ultra-radius-lg);
  box-shadow: var(--ultra-shadow);
  padding: 16px;
}
.form-fieldset{
  border:1px solid var(--ultra-border);
  border-radius: var(--ultra-radius);
  padding: 12px;
  background: #fff;
}
.form-fieldset>legend{
  padding: 0 .5rem; font-weight: 600; color: var(--ultra-text-dim);
}

/* === Общая база для инпутов/селектов/текстовых областей === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="tel"],
textarea,
select{
  width: 100%;
  font: 500 14px/1.35 var(--ultra-font);
  color: var(--ultra-text);
  background: var(--ultra-bg);
  border:1px solid var(--ultra-border);
  border-radius: var(--ultra-radius);
  padding: var(--ultra-pad-y) calc(var(--ultra-pad-x) + 26px) var(--ultra-pad-y) var(--ultra-pad-x);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  outline: 0;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
}

input::placeholder, textarea::placeholder{ color: #94a3b8; }
textarea{ min-height: 110px; resize: vertical; }

/* Фокус / ховер */
input:focus, textarea:focus, select:focus{
  border-color: var(--ultra-primary);
  box-shadow: 0 0 0 3px var(--ultra-primary-10);
}
input:hover, textarea:hover, select:hover{
  border-color: var(--ultra-border-strong);
}

/* Ошибки/успех — вешай класс .is-invalid / .is-valid на конкретный элемент */
.is-invalid{
  border-color: var(--ultra-danger) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}
.is-valid{
  border-color: var(--ultra-success) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.12) !important;
}

/* Disabled */
input[disabled], textarea[disabled], select[disabled]{
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* === Красивый селект (чистый CSS, без JS) === */
select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background:
    /* стрелка */
    url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 18px 18px,
    var(--ultra-bg);
}

/* Убираем стандартную стрелку в IE */
select::-ms-expand{ display:none; }

/* Варианты размеров: добавляй класс к select */
.select--sm{ min-height: 34px; font-size: 13px; padding-top: .45rem; padding-bottom: .45rem; }
.select--lg{ min-height: 46px; font-size: 15px; }

/* Компактная раскладка полей в одной строке */
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row.inline{ flex-direction:row; gap: var(--ultra-gap); }
.form-row.inline > *{ flex:1 1 0; min-width: 0; }

/* Метки и подсказки */
label{ font: 600 13px/1.2 var(--ultra-font); color: var(--ultra-text-dim); }
.form-subtext{ color:#6b7280; font-size:12px; margin-top:6px; }

/* Кнопки */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height: 38px;
  padding: .55rem .9rem;
  background: var(--ultra-primary);
  color: #fff; border:0; border-radius: 1px;
  font: 600 14px/1 var(--ultra-font);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 14px rgba(37,99,235,.20);
  cursor:pointer; transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn.secondary{
  background: #eef2ff; color:#3730a3; box-shadow: none; border:1px solid #e0e7ff;
}
.btn.ghost{
  background: transparent; color: var(--ultra-text); border:1px solid var(--ultra-border);
  box-shadow: none;
}

/* Бейджи/таблица — чуть живее вид */
.badge{
  display:inline-block; padding: .2rem .5rem; border-radius: 999px;
  background: #eef2f7; color:#334155; font: 600 12px/1 var(--ultra-font);
  border:1px solid var(--ultra-border);
}

/* Табличка */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table thead th{
  text-align:left; font: 700 12px/1.2 var(--ultra-font); color:#64748b; padding:10px;
  background: var(--ultra-bg-subtle);
  border-bottom:1px solid var(--ultra-border);
}
.table tbody td{
  padding:10px; border-bottom:1px solid var(--ultra-border);
  font: 500 14px/1.35 var(--ultra-font); color: var(--ultra-text);
}
.table tbody tr:hover{ background: #fafbff; }

/* Пагинация */
.pagination{ display:flex; align-items:center; gap:10px; margin-top:12px; }

/* Мелкие анимации, но уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

/* Темноватый фон карточек, если у тебя общий body сероватый */
body{ background: var(--ultra-bg-subtle); }