/*
 * Premium shared components.
 * These selectors intentionally enhance existing business classes without
 * changing DOM identifiers or interaction behavior.
 */

/* Surfaces and metric cards */
body.premium-ui :where(.card, .stat, .panel, .chart-card),
[data-ui-skin="premium"] :where(.card, .stat, .panel, .chart-card) {
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius-md);
  background: var(--wx-surface);
  box-shadow: var(--wx-shadow-card);
}

body.premium-ui :where(.card, .panel, .chart-card),
[data-ui-skin="premium"] :where(.card, .panel, .chart-card) {
  overflow: hidden;
}

body.premium-ui :where(.card-head, .panel-head, .chart-card__head),
[data-ui-skin="premium"] :where(.card-head, .panel-head, .chart-card__head) {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--wx-space-4);
  padding: 14px 18px;
  border-bottom: 1px solid var(--wx-divider);
  background: var(--wx-surface);
}

body.premium-ui :where(.card-head, .panel-head, .chart-card__head) h3,
[data-ui-skin="premium"] :where(.card-head, .panel-head, .chart-card__head) h3 {
  margin: 0;
  font-size: var(--wx-text-lg);
  font-weight: var(--wx-weight-semibold);
  line-height: var(--wx-leading-tight);
}

body.premium-ui .stat,
[data-ui-skin="premium"] .stat {
  position: relative;
  min-height: 116px;
  padding: var(--wx-space-5);
}

body.premium-ui .stat label,
[data-ui-skin="premium"] .stat label {
  color: var(--wx-text-muted);
  font-size: var(--wx-text-md);
  font-weight: var(--wx-weight-medium);
}

body.premium-ui .stat strong,
[data-ui-skin="premium"] .stat strong {
  display: block;
  margin-top: var(--wx-space-2);
  font-size: var(--wx-text-metric);
  font-weight: var(--wx-weight-bold);
  letter-spacing: -0.025em;
  line-height: var(--wx-leading-tight);
  font-variant-numeric: tabular-nums lining-nums;
}

body.premium-ui .stat.danger,
[data-ui-skin="premium"] .stat.danger {
  border-color: var(--wx-danger-border);
  background: linear-gradient(180deg, var(--wx-surface), var(--wx-danger-soft));
}

body.premium-ui .stat.warn,
[data-ui-skin="premium"] .stat.warn {
  border-color: var(--wx-warning-border);
  background: linear-gradient(180deg, var(--wx-surface), var(--wx-warning-soft));
}

/* Buttons and form controls */
body.premium-ui :where(.primary, .secondary, .danger-button),
[data-ui-skin="premium"] :where(.primary, .secondary, .danger-button) {
  display: inline-flex;
  min-height: var(--wx-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--wx-space-2);
  padding: 9px 15px;
  border-radius: var(--wx-radius-sm);
  font-size: var(--wx-text-md);
  font-weight: var(--wx-weight-semibold);
  line-height: 20px;
  cursor: pointer;
  transition: border-color var(--wx-duration-fast) var(--wx-ease),
    background-color var(--wx-duration-fast) var(--wx-ease),
    box-shadow var(--wx-duration-fast) var(--wx-ease),
    transform var(--wx-duration-fast) var(--wx-ease);
}

body.premium-ui .primary,
[data-ui-skin="premium"] .primary {
  border: 1px solid var(--wx-primary);
  color: #fff;
  background: var(--wx-primary);
  box-shadow: 0 2px 5px rgba(40, 95, 184, 0.18);
}

body.premium-ui .primary:hover,
[data-ui-skin="premium"] .primary:hover {
  border-color: var(--wx-primary-hover);
  background: var(--wx-primary-hover);
}

body.premium-ui .secondary,
[data-ui-skin="premium"] .secondary {
  border: 1px solid var(--wx-border-strong);
  color: var(--wx-text);
  background: var(--wx-surface);
}

body.premium-ui .secondary:hover,
[data-ui-skin="premium"] .secondary:hover {
  border-color: #94a3b8;
  background: var(--wx-surface-subtle);
}

body.premium-ui .danger-button,
[data-ui-skin="premium"] .danger-button {
  border: 1px solid var(--wx-danger);
  color: #fff;
  background: var(--wx-danger);
}

body.premium-ui .danger-button:hover,
[data-ui-skin="premium"] .danger-button:hover {
  background: var(--wx-danger-hover);
}

body.premium-ui :where(.primary, .secondary, .danger-button):active,
[data-ui-skin="premium"] :where(.primary, .secondary, .danger-button):active {
  transform: translateY(1px);
}

body.premium-ui :where(.primary, .secondary, .danger-button):disabled,
[data-ui-skin="premium"] :where(.primary, .secondary, .danger-button):disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

body.premium-ui :where(input, select, textarea),
[data-ui-skin="premium"] :where(input, select, textarea) {
  width: 100%;
  min-height: var(--wx-control-height);
  padding: 9px 11px;
  border: 1px solid var(--wx-border-strong);
  border-radius: var(--wx-radius-sm);
  outline: none;
  color: var(--wx-text);
  background: var(--wx-surface);
  font-size: var(--wx-text-md);
  line-height: 20px;
  transition: border-color var(--wx-duration-fast) var(--wx-ease),
    box-shadow var(--wx-duration-fast) var(--wx-ease);
}

body.premium-ui :where(input, textarea)::placeholder,
[data-ui-skin="premium"] :where(input, textarea)::placeholder {
  color: var(--wx-text-faint);
}

body.premium-ui :where(.primary, .secondary, .danger-button, .link, input, select, textarea):focus-visible,
[data-ui-skin="premium"] :where(.primary, .secondary, .danger-button, .link, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--wx-focus);
}

body.premium-ui textarea,
[data-ui-skin="premium"] textarea {
  min-height: 88px;
  resize: vertical;
  line-height: var(--wx-leading-base);
}

body.premium-ui .field label,
[data-ui-skin="premium"] .field label {
  display: block;
  margin-bottom: 6px;
  color: #526176;
  font-size: var(--wx-text-sm);
  font-weight: var(--wx-weight-semibold);
}

/* Filters */
body.premium-ui :where(.toolbar, .filters, [class*="-filters"]),
[data-ui-skin="premium"] :where(.toolbar, .filters, [class*="-filters"]) {
  gap: var(--wx-space-2);
}

body.premium-ui :where(.filters, [class*="-filters"]),
[data-ui-skin="premium"] :where(.filters, [class*="-filters"]) {
  padding: var(--wx-space-3) var(--wx-space-4);
  border: 1px solid var(--wx-border);
  border-radius: var(--wx-radius-md);
  background: var(--wx-surface);
}

/* Tables */
body.premium-ui .table-wrap,
[data-ui-skin="premium"] .table-wrap {
  width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--wx-border-strong) var(--wx-surface-subtle);
}

body.premium-ui table,
[data-ui-skin="premium"] table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

body.premium-ui :where(th, td),
[data-ui-skin="premium"] :where(th, td) {
  height: var(--wx-row-height);
  padding: 11px 14px;
  border-bottom: 1px solid var(--wx-divider);
  text-align: left;
  vertical-align: middle;
}

body.premium-ui th,
[data-ui-skin="premium"] th {
  height: 44px;
  color: var(--wx-text-muted);
  background: var(--wx-surface-subtle);
  font-size: var(--wx-text-xs);
  font-weight: var(--wx-weight-semibold);
  letter-spacing: 0.025em;
  white-space: nowrap;
}

body.premium-ui td,
[data-ui-skin="premium"] td {
  color: var(--wx-text);
  font-size: var(--wx-text-md);
}

body.premium-ui tbody tr:hover > td,
[data-ui-skin="premium"] tbody tr:hover > td {
  background: #fafcff;
}

body.premium-ui tbody tr:last-child > td,
[data-ui-skin="premium"] tbody tr:last-child > td {
  border-bottom: 0;
}

/* Status tags */
body.premium-ui :where(.tag, .status-tag, .badge),
[data-ui-skin="premium"] :where(.tag, .status-tag, .badge) {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--wx-info-border);
  border-radius: var(--wx-radius-pill);
  color: var(--wx-info);
  background: var(--wx-info-soft);
  font-size: var(--wx-text-xs);
  font-weight: var(--wx-weight-semibold);
  line-height: 16px;
  white-space: nowrap;
}

body.premium-ui :where(.tag, .status-tag, .badge):where(.green, .success, [data-status="success"]),
[data-ui-skin="premium"] :where(.tag, .status-tag, .badge):where(.green, .success, [data-status="success"]) {
  border-color: var(--wx-success-border);
  color: var(--wx-success);
  background: var(--wx-success-soft);
}

body.premium-ui :where(.tag, .status-tag, .badge):where(.orange, .warn, .warning, [data-status="warning"]),
[data-ui-skin="premium"] :where(.tag, .status-tag, .badge):where(.orange, .warn, .warning, [data-status="warning"]) {
  border-color: var(--wx-warning-border);
  color: var(--wx-warning);
  background: var(--wx-warning-soft);
}

body.premium-ui :where(.tag, .status-tag, .badge):where(.red, .danger, .error, [data-status="danger"]),
[data-ui-skin="premium"] :where(.tag, .status-tag, .badge):where(.red, .danger, .error, [data-status="danger"]) {
  border-color: var(--wx-danger-border);
  color: var(--wx-danger);
  background: var(--wx-danger-soft);
}

body.premium-ui :where(.tag, .status-tag, .badge):where(.ai, [data-status="ai"]),
[data-ui-skin="premium"] :where(.tag, .status-tag, .badge):where(.ai, [data-status="ai"]) {
  border-color: var(--wx-ai-border);
  color: var(--wx-ai);
  background: var(--wx-ai-soft);
}

/* Empty, error and loading states */
body.premium-ui :where(.empty, .error, .loading-state),
[data-ui-skin="premium"] :where(.empty, .error, .loading-state) {
  padding: var(--wx-space-12) var(--wx-space-6);
  color: var(--wx-text-muted);
  text-align: center;
}

body.premium-ui :where(.empty, .error, .loading-state) :where(h2, h3, b),
[data-ui-skin="premium"] :where(.empty, .error, .loading-state) :where(h2, h3, b) {
  display: block;
  margin: 0 0 var(--wx-space-2);
  font-size: var(--wx-text-lg);
  font-weight: var(--wx-weight-semibold);
}

body.premium-ui :where(.empty, .error, .loading-state) p,
[data-ui-skin="premium"] :where(.empty, .error, .loading-state) p {
  max-width: 560px;
  margin: var(--wx-space-2) auto;
  line-height: var(--wx-leading-relaxed);
}

body.premium-ui .error,
[data-ui-skin="premium"] .error {
  border: 1px solid var(--wx-danger-border);
  border-radius: var(--wx-radius-md);
  color: var(--wx-danger);
  background: var(--wx-danger-soft);
}

body.premium-ui :where(.skeleton, [data-loading="true"]),
[data-ui-skin="premium"] :where(.skeleton, [data-loading="true"]) {
  overflow: hidden;
  border-radius: var(--wx-radius-xs);
  color: transparent;
  background: #e9eef5;
  opacity: 0.78;
  user-select: none;
}

body.premium-ui .skeleton,
[data-ui-skin="premium"] .skeleton {
  min-height: 14px;
  margin-bottom: var(--wx-space-3);
}

body.premium-ui .skeleton.tall,
[data-ui-skin="premium"] .skeleton.tall {
  min-height: 112px;
}

/* Modal and drawer foundations */
body.premium-ui .modal,
[data-ui-skin="premium"] .modal,
body.premium-ui .drawer-backdrop,
[data-ui-skin="premium"] .drawer-backdrop {
  background: rgba(11, 22, 38, 0.58);
}

body.premium-ui .modal,
[data-ui-skin="premium"] .modal {
  padding: var(--wx-space-6);
}

body.premium-ui .modal-card,
[data-ui-skin="premium"] .modal-card {
  width: min(var(--wx-modal-width), 96vw);
  max-height: 92vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--wx-radius-lg);
  background: var(--wx-surface-raised);
  box-shadow: var(--wx-shadow-float);
}

body.premium-ui .modal-head,
[data-ui-skin="premium"] .modal-head,
body.premium-ui .drawer-head,
[data-ui-skin="premium"] .drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: var(--wx-space-4);
  padding: 15px var(--wx-space-5);
  border-bottom: 1px solid var(--wx-border);
  background: rgba(255, 255, 255, 0.98);
}

body.premium-ui .drawer,
[data-ui-skin="premium"] .drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 110;
  width: var(--wx-drawer-width);
  max-width: 100%;
  overflow: auto;
  border-left: 1px solid var(--wx-border);
  background: var(--wx-surface-raised);
  box-shadow: var(--wx-shadow-drawer);
}

body.premium-ui :where(.modal-body, .drawer-body),
[data-ui-skin="premium"] :where(.modal-body, .drawer-body) {
  padding: var(--wx-space-5);
}

@media (max-width: 760px) {
  body.premium-ui .modal,
  [data-ui-skin="premium"] .modal {
    padding: var(--wx-space-2);
  }

  body.premium-ui .modal-card,
  [data-ui-skin="premium"] .modal-card {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: var(--wx-radius-md);
  }

  body.premium-ui :where(.card-head, .panel-head, .chart-card__head),
  [data-ui-skin="premium"] :where(.card-head, .panel-head, .chart-card__head) {
    align-items: flex-start;
    flex-direction: column;
  }

  body.premium-ui :where(.filters, [class*="-filters"]),
  [data-ui-skin="premium"] :where(.filters, [class*="-filters"]) {
    grid-template-columns: 1fr;
  }
}