/**
 * KOLOPLUS Legacy UI bridge v1.0.0
 * Maps older utility/class names to the current theme-aware design system.
 * Extended for legacy tables, pagers and pills in v1.0.1.
 * Extended for badges, meta rows and stat chips in v1.0.2.
 */

:root,
[data-theme="light"] {
  --kp-legacy-card-bg: color-mix(in srgb, var(--k-surface-1) 96%, #fff 4%);
  --kp-legacy-card-border: var(--k-border-subtle);
  --kp-legacy-card-shadow: var(--k-shadow-card);
  --kp-legacy-card-subtitle: var(--k-text-muted);
  --kp-legacy-control-bg: color-mix(in srgb, var(--k-surface-2) 92%, #fff 8%);
  --kp-legacy-control-bg-hover: color-mix(in srgb, var(--k-surface-2) 80%, #fff 20%);
  --kp-legacy-control-border: var(--k-border-default);
  --kp-legacy-control-focus: color-mix(in srgb, var(--k-primary) 18%, transparent);
  --kp-legacy-pill-bg: color-mix(in srgb, var(--k-surface-2) 88%, #fff 12%);
  --kp-legacy-pill-bg-hover: color-mix(in srgb, var(--k-surface-2) 76%, #fff 24%);
  --kp-legacy-pill-border: var(--k-border-subtle);
  --kp-legacy-pill-text: var(--k-text-secondary);
  --kp-legacy-pill-active-bg: color-mix(in srgb, var(--k-primary) 18%, var(--k-surface-1));
  --kp-legacy-pill-active-text: var(--k-text-primary);
  --kp-legacy-pill-active-shadow: 0 10px 24px rgba(74,46,31,.10);
  --kp-legacy-table-wrap-bg: color-mix(in srgb, var(--k-surface-1) 96%, #fff 4%);
  --kp-legacy-table-wrap-border: var(--k-border-subtle);
  --kp-legacy-table-head-bg: color-mix(in srgb, var(--k-surface-2) 82%, #fff 18%);
  --kp-legacy-table-row-hover: color-mix(in srgb, var(--k-primary) 8%, var(--k-surface-1));
  --kp-legacy-badge-bg: color-mix(in srgb, var(--k-surface-2) 88%, #fff 12%);
  --kp-legacy-badge-border: var(--k-border-subtle);
  --kp-legacy-badge-text: var(--k-text-secondary);
  --kp-legacy-badge-accent-bg: color-mix(in srgb, var(--k-primary) 16%, var(--k-surface-1));
  --kp-legacy-badge-accent-text: var(--k-text-primary);
  --kp-legacy-meta-bg: color-mix(in srgb, var(--k-surface-2) 84%, #fff 16%);
  --kp-legacy-meta-border: var(--k-border-subtle);
  --kp-legacy-meta-label: var(--k-text-muted);
  --kp-legacy-meta-value: var(--k-text-primary);
}

[data-theme="dark"] {
  --kp-legacy-card-bg: color-mix(in srgb, var(--k-surface-1) 96%, #000 4%);
  --kp-legacy-card-border: var(--k-border-subtle);
  --kp-legacy-card-shadow: var(--k-shadow-card);
  --kp-legacy-card-subtitle: var(--k-text-muted);
  --kp-legacy-control-bg: color-mix(in srgb, var(--k-surface-2) 94%, #000 6%);
  --kp-legacy-control-bg-hover: color-mix(in srgb, var(--k-surface-2) 84%, #000 16%);
  --kp-legacy-control-border: var(--k-border-default);
  --kp-legacy-control-focus: color-mix(in srgb, var(--k-primary) 24%, transparent);
  --kp-legacy-pill-bg: color-mix(in srgb, var(--k-surface-2) 90%, #000 10%);
  --kp-legacy-pill-bg-hover: color-mix(in srgb, var(--k-surface-2) 78%, #000 22%);
  --kp-legacy-pill-border: var(--k-border-subtle);
  --kp-legacy-pill-text: var(--k-text-secondary);
  --kp-legacy-pill-active-bg: color-mix(in srgb, var(--k-primary) 18%, var(--k-surface-1));
  --kp-legacy-pill-active-text: var(--k-text-primary);
  --kp-legacy-pill-active-shadow: 0 12px 28px rgba(0,0,0,.22);
  --kp-legacy-table-wrap-bg: color-mix(in srgb, var(--k-surface-1) 96%, #000 4%);
  --kp-legacy-table-wrap-border: var(--k-border-subtle);
  --kp-legacy-table-head-bg: color-mix(in srgb, var(--k-surface-2) 90%, #000 10%);
  --kp-legacy-table-row-hover: color-mix(in srgb, var(--k-primary) 10%, var(--k-surface-1));
  --kp-legacy-badge-bg: color-mix(in srgb, var(--k-surface-2) 90%, #000 10%);
  --kp-legacy-badge-border: var(--k-border-subtle);
  --kp-legacy-badge-text: var(--k-text-secondary);
  --kp-legacy-badge-accent-bg: color-mix(in srgb, var(--k-primary) 18%, var(--k-surface-1));
  --kp-legacy-badge-accent-text: var(--k-text-primary);
  --kp-legacy-meta-bg: color-mix(in srgb, var(--k-surface-2) 92%, #000 8%);
  --kp-legacy-meta-border: var(--k-border-subtle);
  --kp-legacy-meta-label: var(--k-text-muted);
  --kp-legacy-meta-value: var(--k-text-primary);
}

.card {
  background: var(--kp-legacy-card-bg);
  border: 1px solid var(--kp-legacy-card-border);
  border-radius: 22px;
  box-shadow: var(--kp-legacy-card-shadow);
  overflow: hidden;
}

.card-header,
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--kp-legacy-card-border);
  background: color-mix(in srgb, var(--kp-legacy-card-bg) 86%, var(--k-surface-2) 14%);
}

.card-body {
  padding: 16px 18px;
}

.card-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--kp-legacy-card-border);
  background: color-mix(in srgb, var(--kp-legacy-card-bg) 78%, var(--k-surface-2) 22%);
}

.card-title,
.card-head .title {
  color: var(--k-text-primary);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.card-subtitle,
.card-head .subtitle {
  margin-top: 4px;
  color: var(--kp-legacy-card-subtitle);
  font-size: .875rem;
  line-height: 1.45;
}

.field,
.kp-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field + .field,
.kp-field + .kp-field,
.kp-field + .field,
.field + .kp-field {
  margin-top: 14px;
}

.label,
.field > label:not([class]),
label.label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--k-text-secondary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.input,
select.input,
textarea.input,
input.input,
.field > input:not([class]),
.field > select:not([class]),
.field > textarea:not([class]) {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--kp-legacy-control-border);
  background: var(--kp-legacy-control-bg);
  color: var(--k-text-primary);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea.input,
.field > textarea:not([class]) {
  min-height: 120px;
  resize: vertical;
}

.input:hover,
select.input:hover,
textarea.input:hover,
input.input:hover,
.field > input:not([class]):hover,
.field > select:not([class]):hover,
.field > textarea:not([class]):hover {
  background: var(--kp-legacy-control-bg-hover);
  border-color: var(--k-border-strong);
}

.input:focus,
select.input:focus,
textarea.input:focus,
input.input:focus,
.field > input:not([class]):focus,
.field > select:not([class]):focus,
.field > textarea:not([class]):focus {
  outline: none;
  border-color: color-mix(in srgb, var(--k-primary) 56%, var(--kp-legacy-control-border));
  box-shadow: 0 0 0 4px var(--kp-legacy-control-focus);
}

.help-text,
.field small,
.input-help {
  color: var(--k-text-muted);
  font-size: .85rem;
  line-height: 1.45;
}

.btn,
button.btn,
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: var(--k-gradient-primary);
  color: var(--k-text-inverse);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

.btn:hover,
button.btn:hover,
a.btn:hover,
.kp-btn.btn-outline:hover,
.kp-btn.btn-small:hover {
  transform: translateY(-1px);
}

.btn:disabled,
button.btn:disabled,
a.btn[aria-disabled="true"] {
  opacity: .56;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-outline,
.btn.btn-outline,
.kp-btn.btn-outline {
  background: var(--kp-legacy-control-bg);
  color: var(--k-text-primary);
  border-color: var(--kp-legacy-control-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.btn-outline:hover,
.btn.btn-outline:hover,
.kp-btn.btn-outline:hover {
  background: var(--kp-legacy-control-bg-hover);
  border-color: var(--k-border-strong);
  color: var(--k-text-primary);
}

.btn-small,
.btn.btn-small,
.kp-btn.btn-small {
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: .82rem;
}

.btn.is-primary,
.kp-btn.is-primary,
.btn-primary,
.kp-btn.btn-primary {
  background: var(--k-gradient-primary);
  color: var(--k-text-inverse);
  border-color: transparent;
  box-shadow: var(--k-shadow-glow-sm);
}

.btn.is-ghost,
.btn-ghost,
.kp-btn.is-ghost {
  background: transparent;
  color: var(--k-text-secondary);
  border-color: var(--kp-legacy-control-border);
}

.btn.is-ghost:hover,
.btn-ghost:hover,
.kp-btn.is-ghost:hover {
  background: var(--kp-legacy-control-bg-hover);
  color: var(--k-text-primary);
}

@media (max-width: 640px) {
  .card-header,
  .card-head,
  .card-body,
  .card-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .btn,
  button.btn,
  a.btn {
    min-height: 40px;
    padding: 10px 14px;
  }
}


:root,
[data-theme="light"] {
  --kp-legacy-pill-bg: color-mix(in srgb, var(--k-surface-2) 88%, #fff 12%);
  --kp-legacy-pill-bg-hover: color-mix(in srgb, var(--k-surface-2) 72%, #fff 28%);
  --kp-legacy-pill-border: var(--k-border-default);
  --kp-legacy-pill-text: var(--k-text-secondary);
  --kp-legacy-pill-active-bg: linear-gradient(135deg, #c57d5b 0%, #af6545 100%);
  --kp-legacy-pill-active-text: #fff;
  --kp-legacy-pill-active-shadow: 0 12px 24px rgba(184,109,73,.20);
  --kp-legacy-table-wrap-bg: linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,240,233,.98));
  --kp-legacy-table-wrap-border: rgba(155,102,72,.14);
  --kp-legacy-table-head-bg: rgba(249,241,234,.92);
  --kp-legacy-table-row-hover: rgba(246,233,223,.76);
}

[data-theme="dark"] {
  --kp-legacy-pill-bg: color-mix(in srgb, var(--k-surface-2) 92%, #000 8%);
  --kp-legacy-pill-bg-hover: color-mix(in srgb, var(--k-surface-2) 78%, #000 22%);
  --kp-legacy-pill-border: var(--k-border-default);
  --kp-legacy-pill-text: var(--k-text-secondary);
  --kp-legacy-pill-active-bg: linear-gradient(135deg, #c57d5b 0%, #9e593d 100%);
  --kp-legacy-pill-active-text: #fff;
  --kp-legacy-pill-active-shadow: 0 14px 28px rgba(0,0,0,.28);
  --kp-legacy-table-wrap-bg: linear-gradient(180deg, rgba(30,24,21,.82), rgba(24,19,16,.92));
  --kp-legacy-table-wrap-border: rgba(255,235,210,.08);
  --kp-legacy-table-head-bg: rgba(255,255,255,.04);
  --kp-legacy-table-row-hover: rgba(255,255,255,.05);
}

.table-wrap,
.tableWrap,
.table-responsive,
.admin-table-wrap {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--kp-legacy-table-wrap-border);
  background: var(--kp-legacy-table-wrap-bg);
  box-shadow: var(--k-shadow-card);
}

.table,
.kp-table,
table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--k-text-primary);
}

.table thead th,
.kp-table thead th,
table.table thead th {
  padding: 12px 14px;
  background: var(--kp-legacy-table-head-bg);
  color: var(--k-text-muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  border-bottom: 1px solid var(--kp-legacy-table-wrap-border);
}

.table tbody td,
.kp-table tbody td,
table.table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--kp-legacy-table-wrap-border);
  vertical-align: middle;
}

.table tbody tr:hover,
.kp-table tbody tr:hover,
table.table tbody tr:hover {
  background: var(--kp-legacy-table-row-hover);
}

.table tbody tr:last-child td,
.kp-table tbody tr:last-child td,
table.table tbody tr:last-child td {
  border-bottom: 0;
}

.pagination,
.pager,
.nav-pills,
.nav-tabs,
.tab-nav,
.pill-nav,
.tabs-legacy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pagination,
.pager,
.nav-pills,
.nav-tabs,
.tab-nav,
.pill-nav {
  padding: 6px;
  border-radius: 18px;
  border: 1px solid var(--kp-legacy-pill-border);
  background: color-mix(in srgb, var(--kp-legacy-pill-bg) 90%, transparent);
}

.nav-pills > a,
.nav-pills > button,
.nav-tabs > a,
.nav-tabs > button,
.tab-nav > a,
.tab-nav > button,
.pill-nav > a,
.pill-nav > button,
.pagination a,
.pagination button,
.pager a,
.pager button,
.page-link,
.page-item > a,
.page-item > button,
.pill,
.chip,
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--kp-legacy-pill-border);
  background: var(--kp-legacy-pill-bg);
  color: var(--kp-legacy-pill-text);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.nav-pills > a:hover,
.nav-pills > button:hover,
.nav-tabs > a:hover,
.nav-tabs > button:hover,
.tab-nav > a:hover,
.tab-nav > button:hover,
.pill-nav > a:hover,
.pill-nav > button:hover,
.pagination a:hover,
.pagination button:hover,
.pager a:hover,
.pager button:hover,
.page-link:hover,
.page-item > a:hover,
.page-item > button:hover,
.pill:hover,
.chip:hover,
.nav-link:hover {
  transform: translateY(-1px);
  background: var(--kp-legacy-pill-bg-hover);
  border-color: var(--k-border-strong);
  color: var(--k-text-primary);
}

.nav-pills > .active,
.nav-pills > .is-active,
.nav-tabs > .active,
.nav-tabs > .is-active,
.tab-nav > .active,
.tab-nav > .is-active,
.pill-nav > .active,
.pill-nav > .is-active,
.pagination .active,
.pagination .is-active,
.pager .active,
.pager .is-active,
.page-item.active > a,
.page-item.active > button,
.page-item.is-active > a,
.page-item.is-active > button,
.page-link.active,
.page-link.is-active,
.pill.active,
.pill.is-active,
.chip.active,
.chip.is-active,
.nav-link.active,
.nav-link.is-active {
  color: var(--kp-legacy-pill-active-text);
  background: var(--kp-legacy-pill-active-bg);
  border-color: transparent;
  box-shadow: var(--kp-legacy-pill-active-shadow);
}

.nav-pills > .active:hover,
.nav-pills > .is-active:hover,
.nav-tabs > .active:hover,
.nav-tabs > .is-active:hover,
.tab-nav > .active:hover,
.tab-nav > .is-active:hover,
.pill-nav > .active:hover,
.pill-nav > .is-active:hover,
.pagination .active:hover,
.pagination .is-active:hover,
.pager .active:hover,
.pager .is-active:hover,
.page-item.active > a:hover,
.page-item.active > button:hover,
.page-item.is-active > a:hover,
.page-item.is-active > button:hover,
.page-link.active:hover,
.page-link.is-active:hover,
.pill.active:hover,
.pill.is-active:hover,
.chip.active:hover,
.chip.is-active:hover,
.nav-link.active:hover,
.nav-link.is-active:hover {
  color: var(--kp-legacy-pill-active-text);
  background: var(--kp-legacy-pill-active-bg);
}

.page-item {
  list-style: none;
}

.page-item.disabled > a,
.page-item.disabled > button,
.page-link[aria-disabled="true"],
.page-link:disabled {
  opacity: .48;
  pointer-events: none;
  box-shadow: none;
}

@media (max-width: 720px) {
  .pagination,
  .pager,
  .nav-pills,
  .nav-tabs,
  .tab-nav,
  .pill-nav,
  .tabs-legacy {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .nav-pills > a,
  .nav-pills > button,
  .nav-tabs > a,
  .nav-tabs > button,
  .tab-nav > a,
  .tab-nav > button,
  .pill-nav > a,
  .pill-nav > button,
  .pagination a,
  .pagination button,
  .pager a,
  .pager button,
  .page-link,
  .page-item > a,
  .page-item > button,
  .pill,
  .chip,
  .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}


.badge,
.pill-badge,
.stat-chip,
.counter-chip,
.meta-chip,
.tag,
.label-chip,
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--kp-legacy-badge-border);
  background: var(--kp-legacy-badge-bg);
  color: var(--kp-legacy-badge-text);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
}

.badge.badge-primary,
.badge.badge-accent,
.pill-badge.is-accent,
.stat-chip.is-accent,
.counter-chip.is-accent,
.meta-chip.is-accent,
.tag.is-accent,
.label-chip.is-accent,
.status-chip.is-accent,
.badge.active,
.badge.is-active {
  background: var(--kp-legacy-badge-accent-bg);
  color: var(--kp-legacy-badge-accent-text);
  border-color: color-mix(in srgb, var(--k-primary) 34%, var(--kp-legacy-badge-border));
}

.badge.badge-success,
.status-chip.is-success,
.tag.is-success {
  background: color-mix(in srgb, var(--k-success) 16%, var(--k-surface-1));
  color: color-mix(in srgb, var(--k-success) 76%, var(--k-text-primary));
  border-color: color-mix(in srgb, var(--k-success) 26%, var(--kp-legacy-badge-border));
}

.badge.badge-warning,
.status-chip.is-warning,
.tag.is-warning {
  background: color-mix(in srgb, var(--k-warning) 16%, var(--k-surface-1));
  color: color-mix(in srgb, var(--k-warning) 78%, var(--k-text-primary));
  border-color: color-mix(in srgb, var(--k-warning) 28%, var(--kp-legacy-badge-border));
}

.badge.badge-danger,
.badge.badge-error,
.status-chip.is-danger,
.status-chip.is-error,
.tag.is-danger,
.tag.is-error {
  background: color-mix(in srgb, var(--k-danger) 16%, var(--k-surface-1));
  color: color-mix(in srgb, var(--k-danger) 78%, var(--k-text-primary));
  border-color: color-mix(in srgb, var(--k-danger) 28%, var(--kp-legacy-badge-border));
}

.stats,
.stats-row,
.stat-list,
.meta-row,
.meta-bar,
.info-row,
.info-bar,
.kv-list,
.keyvals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stats > *,
.stats-row > *,
.stat-list > *,
.meta-row > *,
.meta-bar > *,
.info-row > *,
.info-bar > *,
.kv-list > *,
.keyvals > * {
  min-width: 0;
}

.stat,
.stat-item,
.stat-card-mini,
.meta-item,
.info-item,
.kv,
.keyval {
  display: grid;
  gap: 4px;
  min-width: 120px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--kp-legacy-meta-border);
  background: var(--kp-legacy-meta-bg);
}

.stat-label,
.meta-label,
.info-label,
.key,
.kv-key,
.keyval-key {
  color: var(--kp-legacy-meta-label);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stat-value,
.meta-value,
.info-value,
.value,
.kv-value,
.keyval-value {
  color: var(--kp-legacy-meta-value);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.25;
}

.meta-stack,
.info-stack {
  display: grid;
  gap: 10px;
}

.meta-inline,
.info-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--kp-legacy-meta-label);
  font-size: .86rem;
}

.meta-inline strong,
.info-inline strong,
.meta-inline b,
.info-inline b {
  color: var(--kp-legacy-meta-value);
}

@media (max-width: 640px) {
  .stats,
  .stats-row,
  .stat-list,
  .meta-row,
  .meta-bar,
  .info-row,
  .info-bar,
  .kv-list,
  .keyvals {
    gap: 8px;
  }

  .stat,
  .stat-item,
  .stat-card-mini,
  .meta-item,
  .info-item,
  .kv,
  .keyval {
    width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border-radius: 14px;
  }

  .badge,
  .pill-badge,
  .stat-chip,
  .counter-chip,
  .meta-chip,
  .tag,
  .label-chip,
  .status-chip {
    min-height: 28px;
    padding: 6px 10px;
  }
}