/**
 * Admin layout & components — только токены из tokens.css
 * Подключить после tokens.css
 */

/* ========== AppShell ========== */
.adm-app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--color-bg-base);
  font-family: var(--font-sans);
  font-size: var(--text-body-m);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
}

.adm-app-shell__sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border-subtle);
  padding: var(--space-6) var(--space-4);
}

.adm-app-shell__nav-link {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background 0.15s;
}

.adm-app-shell__nav-link:hover {
  background: var(--color-row-hover);
}

.adm-app-shell__nav-link:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.adm-app-shell__nav-link.is-active {
  background: var(--color-row-selected);
  color: var(--color-accent-primary);
}

.adm-app-shell__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.adm-app-shell__topbar {
  height: 56px;
  flex-shrink: 0;
  padding: 0 var(--space-6);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
}

.adm-app-shell__content {
  flex: 1;
  padding: var(--space-6);
  overflow-auto;
}

@media (max-width: 767px) {
  .adm-app-shell__sidebar { width: 64px; padding: var(--space-4); }
  .adm-app-shell__nav-link span { display: none; }
  .adm-app-shell__content { padding: var(--space-4); }
}

/* ========== PageContainer ========== */
.adm-page-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

@media (max-width: 767px) {
  .adm-page-container { padding: 0 var(--container-padding-sm); }
}

/* ========== PageHeader ========== */
.adm-page-header {
  margin-bottom: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.adm-page-header__title-block { flex: 1; min-width: 0; }
.adm-page-header__title {
  font-size: var(--text-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.adm-page-header__subtitle {
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
  margin: var(--space-1) 0 0;
}

.adm-page-header__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

/* ========== ContentSection / ContentCard ========== */
.adm-content-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.adm-content-card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.adm-content-card__body { padding: var(--space-6); }

/* ========== FiltersBar ========== */
.adm-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-4);
}

.adm-filters-bar__search { min-width: 200px; flex: 1; }
.adm-filters-bar__actions { display: flex; gap: var(--space-2); }

/* ========== Buttons (базовые по component-specs) ========== */
.adm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  height: var(--button-height-md);
  font-family: inherit;
  font-size: var(--text-body-m);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.adm-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.adm-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.adm-btn--primary {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.adm-btn--primary:hover:not(:disabled) { background: var(--color-accent-primary-hover); }
.adm-btn--primary:active:not(:disabled) { background: var(--color-accent-primary-active); }

.adm-btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.adm-btn--secondary:hover:not(:disabled) { background: var(--color-row-hover); }

.adm-btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
}

.adm-btn--ghost:hover:not(:disabled) { background: var(--color-row-hover); }

.adm-btn--danger {
  background: var(--color-semantic-error);
  color: var(--color-text-inverse);
}

.adm-btn--danger:hover:not(:disabled) { filter: brightness(1.1); }

.adm-btn--sm { height: var(--button-height-sm); padding: 6px var(--space-3); font-size: var(--text-body-s); }

/* ========== Input ========== */
.adm-input-wrap { display: block; }
.adm-input {
  width: 100%;
  min-height: var(--input-height-md);
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-body-m);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.15s;
}

.adm-input:hover:not(:disabled) { border-color: var(--color-text-tertiary); }
.adm-input:focus { outline: none; border-color: var(--color-accent-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); }
.adm-input--error { border-color: var(--color-semantic-error); }
.adm-input:disabled { opacity: 0.6; cursor: not-allowed; }

.adm-field__label {
  display: block;
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.adm-field__hint { font-size: var(--text-caption); color: var(--color-text-tertiary); margin-top: var(--space-1); }
.adm-field__error { font-size: var(--text-caption); color: var(--color-text-error); margin-top: var(--space-1); }

/* ========== DataTable ========== */
.adm-data-table-wrap { overflow-x: auto; }
.adm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-bg-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.adm-table__head { background: var(--color-bg-surface); }
.adm-table__head th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}

.adm-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.adm-table__sort:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.adm-table__body tr {
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background 0.1s;
}

.adm-table__body tr:hover { background: var(--color-row-hover); }

.adm-table__body td {
  padding: 0 var(--space-4);
  height: var(--table-row-height);
  font-size: var(--text-body-m);
  color: var(--color-text-primary);
}

.adm-table__cell--actions { white-space: nowrap; }
.adm-table__cell--actions .adm-btn { margin-right: var(--space-2); }

/* Skeleton */
.adm-table-skeleton .adm-table__body td { vertical-align: middle; }
.adm-skeleton {
  height: 20px;
  background: var(--color-skeleton);
  border-radius: var(--radius-sm);
  animation: adm-skeleton-shine 1.2s ease-in-out infinite;
}

@keyframes adm-skeleton-shine {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Empty state */
.adm-empty-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.adm-empty-state__icon {
  font-size: 48px;
  color: var(--color-icon-default);
  margin-bottom: var(--space-4);
  line-height: 1;
}

.adm-empty-state__title {
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.adm-empty-state__text {
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4);
}

/* Error state */
.adm-error-state {
  padding: var(--space-6);
  text-align: center;
  background: var(--color-semantic-error-bg);
  border: 1px solid var(--color-semantic-error);
  border-radius: var(--radius-md);
  color: var(--color-text-error);
}

.adm-error-state__text { margin-bottom: var(--space-4); }

/* Pagination */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

.adm-pagination__info { font-size: var(--text-body-s); color: var(--color-text-secondary); margin-right: var(--space-4); }

/* ========== FormLayout ========== */
.adm-form-layout {
  display: grid;
  gap: var(--space-6);
  max-width: 640px;
}

.adm-form-layout--two-cols {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 639px) {
  .adm-form-layout--two-cols { grid-template-columns: 1fr; }
}

.adm-form-group { display: block; }
.adm-form-group + .adm-form-group { margin-top: var(--space-4); }

/* ========== Alert / Toast ========== */
.adm-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
  margin-bottom: var(--space-4);
}

.adm-alert--error { background: var(--color-semantic-error-bg); border-color: var(--color-semantic-error); color: var(--color-text-error); }
.adm-alert--success { background: var(--color-semantic-success-bg); border-color: var(--color-semantic-success); color: var(--color-text-success); }
.adm-alert--warning { background: var(--color-semantic-warning-bg); border-color: var(--color-semantic-warning); color: var(--color-semantic-warning); }
.adm-alert--info { background: var(--color-semantic-info-bg); border-color: var(--color-semantic-info); color: var(--color-semantic-info); }

.adm-alert__content { flex: 1; }
.adm-alert__title { font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-1); }
.adm-alert__text { margin: 0; font-size: var(--text-body-s); }

.adm-toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 360px;
}

.adm-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
}

.adm-toast--success { border-left: 4px solid var(--color-semantic-success); }
.adm-toast--error { border-left: 4px solid var(--color-semantic-error); }
.adm-toast--warning { border-left: 4px solid var(--color-semantic-warning); }
.adm-toast--info { border-left: 4px solid var(--color-semantic-info); }

.adm-toast__text { flex: 1; font-size: var(--text-body-s); }

/* ========== ModalConfirm ========== */
.adm-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: var(--space-4);
}
.adm-modal-overlay[hidden] {
  display: none !important;
}

.adm-modal {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.adm-modal__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.adm-modal__icon--warning { color: var(--color-semantic-warning); font-size: 24px; line-height: 1; }

.adm-modal__title { font-size: var(--text-h3); font-weight: var(--font-weight-semibold); margin: 0; }

.adm-modal__body {
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
}

.adm-modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Badge */
.adm-badge {
  display: inline-flex;
  padding: 2px 6px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

.adm-badge--success { background: var(--color-semantic-success-bg); color: var(--color-semantic-success); }
.adm-badge--neutral { background: var(--color-border-subtle); color: var(--color-text-secondary); }
.adm-badge--warning { background: var(--color-semantic-warning-bg); color: var(--color-semantic-warning); }

/* Breadcrumbs */
.adm-breadcrumbs {
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.adm-breadcrumbs a { color: var(--color-text-link); text-decoration: none; }
.adm-breadcrumbs a:hover { text-decoration: underline; }
.adm-breadcrumbs__sep { margin: 0 var(--space-2); color: var(--color-text-tertiary); }