/* admin.css — theme-aware (без хардкодов цветов) */
:root {
  /* на случай отсутствия theme.css дадим мягкие фолбэки */
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --muted: 210 24% 96%;
  --muted-foreground: 215 20% 45%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --primary: 225 85% 64%;
  --primary-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --ring: 225 85% 64%;
  --radius: 10px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* ссылки в контенте — нейтральные, а акцент на hover */
a { color: hsl(var(--foreground)); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: hsla(var(--ring), .6); }

header {
  background: hsl(var(--card));
  border-bottom: 1px solid hsl(var(--border));
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
}
header .brand { font-weight: 700; letter-spacing: .3px; }
nav a {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 10px; margin-right: 8px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: color-mix(in oklab, hsl(var(--foreground)) 85%, transparent);
}
nav a:hover {
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
nav a[aria-current="page"], nav a.is-active {
  background: hsl(var(--muted));
  border-color: hsl(var(--input));
  color: hsl(var(--foreground));
  box-shadow: 0 0 0 3px hsla(var(--ring), .22) inset;
}

.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

h1, h2 { margin: 0 0 12px; }

table {
  width: 100%;
  border-collapse: collapse; border-spacing: 0;
  margin-top: 8px;
}
th, td {
  border-bottom: 1px solid hsl(var(--border));
  padding: 8px; text-align: left;
}
table thead th {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}
tr:hover td { background: hsl(var(--muted)); }

input, select, button, textarea {
  font: inherit;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: 8px;
  padding: 8px 10px;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px hsla(var(--ring), .35);
}
button {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--border));
  cursor: pointer;
}
button:hover { opacity: .92; }
.btn-danger {
  background: color-mix(in oklab, hsl(var(--destructive)) 26%, hsl(var(--card)) 74%);
  color: hsl(var(--destructive-foreground));
  border-color: hsl(var(--border));
}

.form-row { display: flex; gap: 10px; margin: 8px 0; }
.actions { display: flex; gap: 8px; }

.alert {
  padding: 10px 12px;
  border-left: 3px solid hsl(var(--ring));
  background: hsl(var(--muted));
  margin-bottom: 12px;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  font-size: 12px; font-weight: 600;
}

hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 12px 0; }

.footer {
  color: hsl(var(--muted-foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 12px;
}

.success { color: color-mix(in oklab, hsl(var(--foreground)) 60%, green 40%); }
.small { color: hsl(var(--muted-foreground)); font-size: 12px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 6px 8px;
  border: 1px solid hsl(var(--input));
  border-radius: 8px;
  background: hsl(var(--card));
}
.icon-btn svg { display: block; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.btn-reset { display: inline-flex; align-items: center; padding: 8px 10px; border: 1px solid hsl(var(--input)); border-radius: 8px; }

.edit-row { background: hsl(var(--muted)); }
.edit-form .form-row { gap: 8px; }

/* === Actions bar + поиск в карточке === */
.card .actions-bar {
  display: grid;
  grid-template-columns: minmax(240px,1fr) auto; /* поиск тянется, кнопка справа */
  gap: 12px; align-items: center;
}
.card .actions-bar > * { min-width: 0; }

.card .searchBar {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 90px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 6px 8px;
}
.card .searchBar .searchIcon { flex: 0 0 auto; opacity: .7; }
.card .searchBar .searchInput {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: hsl(var(--foreground));
  padding: 4px 0; font: inherit;
}
.card .searchBar .searchInput::-webkit-search-cancel-button,
.card .searchBar .searchInput::-webkit-search-decoration {
  -webkit-appearance: none; appearance: none;
}
.card #add-toggle { white-space: nowrap; line-height: 1; }

@media (max-width: 640px) {
  .card .actions-bar { grid-template-columns: 1fr; }
  .card #add-toggle { justify-self: start; }
}

/* === Buttons contrast boost (~20%) === */

/* базовые кнопки */
html:not(.theme-ink) button,
html:not(.theme-ink) .btn {
  background: color-mix(in oklab, hsl(var(--primary)) 82%, black 18%);
  border-color: color-mix(in oklab, hsl(var(--primary)) 55%, black 45%);
  color: hsl(var(--primary-foreground));
  font-weight: 600;
}
html:not(.theme-ink) button:hover,
html:not(.theme-ink) .btn:hover {
  background: color-mix(in oklab, hsl(var(--primary)) 72%, black 28%);
}

/* dark-тема: делаем кнопки светлее к белому (иначе “тонут”) */
html.theme-ink button,
html.theme-ink .btn {
  background: color-mix(in oklab, hsl(var(--primary)) 88%, white 12%);
  border-color: color-mix(in oklab, hsl(var(--primary)) 60%, white 40%);
  color: hsl(var(--primary-foreground));
  font-weight: 600;
}
html.theme-ink button:hover,
html.theme-ink .btn:hover {
  background: color-mix(in oklab, hsl(var(--primary)) 78%, white 22%);
}

/* опасные действия — делаем заметными и читаемыми */
html:not(.theme-ink) .btn-danger {
  background: color-mix(in oklab, hsl(var(--destructive)) 85%, black 15%);
  border-color: color-mix(in oklab, hsl(var(--destructive)) 55%, black 45%);
  color: hsl(var(--destructive-foreground));
  font-weight: 700;
}
html:not(.theme-ink) .btn-danger:hover {
  background: color-mix(in oklab, hsl(var(--destructive)) 70%, black 30%);
}

/* в тёмной теме – чуть светлее к белому */
html.theme-ink .btn-danger {
  background: color-mix(in oklab, hsl(var(--destructive)) 88%, white 12%);
  border-color: color-mix(in oklab, hsl(var(--destructive)) 60%, white 40%);
  color: hsl(var(--destructive-foreground));
  font-weight: 700;
}
html.theme-ink .btn-danger:hover {
  background: color-mix(in oklab, hsl(var(--destructive)) 78%, white 22%);
}

/* икон-кнопки — тоже контрастнее, но остаются “вторичными” */
.icon-btn, .btn-reset {
  background: hsl(var(--card));
  border-color: color-mix(in oklab, hsl(var(--input)) 70%, black 30%);
  color: hsl(var(--foreground));
}
.icon-btn:hover, .btn-reset:hover {
  background: hsl(var(--muted));
}