/* Локальные стили — нативный CSS (без @apply). Tailwind Play CDN
   обрабатывает только utility-классы в HTML. Для semantic-классов вроде
   .btn-primary используем явные значения. */

.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem; border-radius: 0.375rem;
  font-size: 0.875rem; font-weight: 500;
  transition: background-color 0.15s, color 0.15s; cursor: pointer; border: 0;
  text-decoration: none; line-height: 1.25rem;
}
.btn-primary { background-color: rgb(79 70 229); color: white; }
.btn-primary:hover { background-color: rgb(67 56 202); }
.btn-primary:disabled { background-color: rgb(165 180 252); cursor: not-allowed; }
.btn-secondary { background-color: white; color: rgb(51 65 85); border: 1px solid rgb(203 213 225); }
.btn-secondary:hover { background-color: rgb(248 250 252); }
.btn-danger { background-color: rgb(220 38 38); color: white; }
.btn-danger:hover { background-color: rgb(185 28 28); }
.btn-ghost { background: transparent; color: rgb(71 85 105); padding: 0.25rem 0.5rem; }
.btn-ghost:hover { background-color: rgb(241 245 249); }

.input {
  display: block; width: 100%;
  border-radius: 0.375rem; border: 1px solid rgb(203 213 225);
  padding: 0.5rem 0.75rem; font-size: 0.875rem;
  background: white; color: rgb(15 23 42);
  font-family: inherit;
}
.input:focus {
  outline: none; border-color: rgb(99 102 241);
  box-shadow: 0 0 0 1px rgb(99 102 241);
}

.label { display: block; font-size: 0.875rem; font-weight: 500; color: rgb(51 65 85); margin-bottom: 0.25rem; }
.card { background: white; border-radius: 0.5rem; border: 1px solid rgb(226 232 240); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }

.badge {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.5rem; border-radius: 0.25rem;
  font-size: 0.75rem; font-weight: 500; line-height: 1rem;
}
.badge-admin { background-color: rgb(224 231 255); color: rgb(55 48 163); padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; display: inline-flex; align-items: center; }
.badge-user { background-color: rgb(241 245 249); color: rgb(51 65 85); padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; display: inline-flex; align-items: center; }
.badge-warn { background-color: rgb(254 243 199); color: rgb(146 64 14); padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; display: inline-flex; align-items: center; }
.badge-ok { background-color: rgb(209 250 229); color: rgb(6 95 70); padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; display: inline-flex; align-items: center; }

.nav-item, .nav-item-active {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  font-size: 0.875rem; font-weight: 500;
  text-decoration: none; color: rgb(51 65 85);
}
.nav-item:hover { background-color: rgb(241 245 249); }
.nav-item-active { background-color: rgb(238 242 255); color: rgb(67 56 202); }
.nav-item i, .nav-item-active i { font-size: 1.125rem; }

table.data { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
table.data thead { background-color: rgb(241 245 249); color: rgb(71 85 105);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.025em; }
table.data th { padding: 0.5rem 0.75rem; text-align: left; font-weight: 500; }
table.data tbody tr { border-top: 1px solid rgb(241 245 249); }
table.data tbody tr:hover { background-color: rgb(248 250 252); }
table.data td { padding: 0.5rem 0.75rem; }

.modal-backdrop {
  position: fixed; inset: 0; background-color: rgb(15 23 42 / 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 1rem;
}
.modal { background: white; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 100%; max-width: 28rem; padding: 1.5rem; }

.toast-success, .toast-error {
  position: fixed; bottom: 1rem; right: 1rem;
  padding: 0.75rem 1rem; border-radius: 0.375rem;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  z-index: 50; display: flex; align-items: center; gap: 0.5rem;
  max-width: 28rem; color: white;
}
.toast-success { background-color: rgb(5 150 105); }
.toast-error { background-color: rgb(220 38 38); }

details summary { cursor: pointer; }
details[open] summary i.chev { transform: rotate(90deg); }
i.chev { transition: transform 0.15s; display: inline-block; }

body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }