/* ================================================================
   KP CORE UTILITIES (single source of truth)
   ------------------------------------------------
   Moved here in 1.0.7.31 to prevent duplicates across modules.
================================================================ */

.kp-hidden{ display:none; }

.kp-table{
  width:100%;
  border-collapse:collapse;
}

/* Main dashboard container (profile/dashboard pages) */
.kp-dashboard{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:var(--k-space-4);
  display:flex;
  flex-direction:column;
  gap:14px;
  --kp-shell-bg: var(--k-bg-card);
  --kp-shell-border: var(--k-border-default);
  --kp-shell-shadow: 0 8px 18px rgba(10,14,24,0.10);
  --kp-control-bg: var(--k-bg-elevated);
  --kp-control-border: var(--k-border-default);
  --kp-control-text: var(--k-text-primary);
  --kp-control-placeholder: var(--k-text-muted);
  --kp-control-shadow: 0 0 0 4px var(--k-primary-soft);
  --kp-control-label: var(--k-text-secondary);
  --kp-control-hint: var(--k-text-muted);
  --kp-choice-bg: color-mix(in srgb, var(--k-bg-elevated) 88%, transparent);
  --kp-choice-border: var(--k-border-default);
  --kp-choice-hover-bg: color-mix(in srgb, var(--k-primary-soft) 34%, var(--k-bg-card));
  --kp-choice-hover-border: color-mix(in srgb, var(--k-primary) 20%, var(--k-border-default));
  --kp-choice-active-bg: color-mix(in srgb, var(--k-primary-soft) 58%, var(--k-bg-card));
  --kp-choice-active-border: color-mix(in srgb, var(--k-primary) 44%, var(--k-border-default));
  --kp-choice-icon-bg: var(--k-bg-canvas);
  --kp-switch-track: color-mix(in srgb, var(--k-text-muted) 18%, transparent);
  --kp-switch-track-active: var(--k-gradient-primary);
  --kp-switch-knob: #ffffff;
  --kp-switch-shadow: 0 6px 14px rgba(0,0,0,.18);
  --kp-table-bg: color-mix(in srgb, var(--k-bg-card) 96%, transparent);
  --kp-table-head-bg: color-mix(in srgb, var(--k-bg-elevated) 92%, transparent);
  --kp-table-row-hover: color-mix(in srgb, var(--k-primary-soft) 34%, var(--k-bg-card));
  --kp-table-wrap-border: var(--k-border-default);
  --kp-badge-bg: var(--k-bg-elevated);
  --kp-badge-text: var(--k-text-secondary);
  --kp-badge-border: var(--k-border-default);
  --kp-pager-wrap-bg: color-mix(in srgb, var(--k-bg-card) 86%, transparent);
  --kp-pager-wrap-border: var(--k-border-subtle);
  --kp-pager-item-bg: color-mix(in srgb, var(--k-bg-card) 92%, transparent);
  --kp-pager-item-text: var(--k-text-secondary);
  --kp-pager-item-border: color-mix(in srgb, var(--k-border-default) 82%, transparent);
  --kp-pager-item-hover-bg: color-mix(in srgb, var(--k-primary-soft) 42%, var(--k-bg-card));
  --kp-pager-item-hover-border: color-mix(in srgb, var(--k-primary) 22%, var(--k-border-default));
  --kp-pager-item-active-bg: var(--k-gradient-primary);
  --kp-pager-item-active-text: var(--k-text-inverse);
  --kp-pager-item-active-shadow: 0 10px 24px color-mix(in srgb, var(--k-primary) 18%, transparent);
}
[data-theme="light"] .kp-dashboard{
  --kp-shell-bg: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,242,236,.98));
  --kp-shell-border: rgba(155,102,72,.12);
  --kp-shell-shadow: 0 10px 24px rgba(74,46,31,.06);
  --kp-control-bg: rgba(255,255,255,.94);
  --kp-control-border: rgba(155,102,72,.14);
  --kp-control-text: var(--k-text-primary);
  --kp-control-placeholder: color-mix(in srgb, var(--k-text-muted) 90%, transparent);
  --kp-control-label: color-mix(in srgb, var(--k-text-secondary) 94%, transparent);
  --kp-control-hint: color-mix(in srgb, var(--k-text-muted) 94%, transparent);
  --kp-choice-bg: rgba(255,255,255,.92);
  --kp-choice-border: rgba(155,102,72,.14);
  --kp-choice-hover-bg: rgba(246,233,223,.94);
  --kp-choice-hover-border: rgba(184,109,73,.24);
  --kp-choice-active-bg: linear-gradient(180deg, rgba(255,247,241,.96), rgba(248,236,227,.96));
  --kp-choice-active-border: rgba(184,109,73,.34);
  --kp-choice-icon-bg: rgba(248,241,234,.96);
  --kp-switch-track: rgba(167,124,94,.22);
  --kp-switch-track-active: linear-gradient(135deg, #c57d5b 0%, #af6545 100%);
  --kp-switch-knob: #ffffff;
  --kp-switch-shadow: 0 6px 14px rgba(74,46,31,.16);
  --kp-table-bg: rgba(255,255,255,.96);
  --kp-table-head-bg: rgba(248,241,234,.98);
  --kp-table-row-hover: rgba(247,236,227,.94);
  --kp-table-wrap-border: rgba(155,102,72,.14);
  --kp-badge-bg: rgba(255,255,255,.94);
  --kp-badge-text: var(--k-text-secondary);
  --kp-badge-border: rgba(155,102,72,.14);
  --kp-pager-wrap-bg: linear-gradient(180deg, rgba(255,255,255,.86), rgba(247,240,233,.96));
  --kp-pager-wrap-border: rgba(155,102,72,.14);
  --kp-pager-item-bg: rgba(255,255,255,.88);
  --kp-pager-item-text: var(--k-text-secondary);
  --kp-pager-item-border: rgba(155,102,72,.14);
  --kp-pager-item-hover-bg: rgba(246,233,223,.96);
  --kp-pager-item-hover-border: rgba(184,109,73,.24);
  --kp-pager-item-active-bg: linear-gradient(135deg, #c57d5b 0%, #af6545 100%);
  --kp-pager-item-active-text: #fff;
}
[data-theme="dark"] .kp-dashboard{
  --kp-shell-bg: linear-gradient(180deg, rgba(30,24,21,.92), rgba(22,18,16,.96));
  --kp-shell-border: rgba(255,235,210,.08);
  --kp-shell-shadow: 0 10px 24px rgba(6,10,18,.14);
  --kp-control-bg: rgba(255,255,255,.05);
  --kp-control-border: rgba(255,235,210,.10);
  --kp-control-text: var(--k-text-primary);
  --kp-control-placeholder: color-mix(in srgb, var(--k-text-muted) 92%, transparent);
  --kp-control-label: color-mix(in srgb, var(--k-text-secondary) 96%, transparent);
  --kp-control-hint: color-mix(in srgb, var(--k-text-muted) 96%, transparent);
  --kp-choice-bg: rgba(255,255,255,.05);
  --kp-choice-border: rgba(255,235,210,.10);
  --kp-choice-hover-bg: rgba(255,255,255,.08);
  --kp-choice-hover-border: rgba(255,187,120,.22);
  --kp-choice-active-bg: linear-gradient(180deg, rgba(255,187,120,.12), rgba(255,255,255,.06));
  --kp-choice-active-border: rgba(255,187,120,.32);
  --kp-choice-icon-bg: rgba(255,255,255,.07);
  --kp-switch-track: rgba(255,255,255,.10);
  --kp-switch-track-active: linear-gradient(135deg, #c57d5b 0%, #9e593d 100%);
  --kp-switch-knob: #ffffff;
  --kp-switch-shadow: 0 8px 18px rgba(0,0,0,.28);
  --kp-table-bg: rgba(24,19,16,.92);
  --kp-table-head-bg: rgba(31,25,22,.96);
  --kp-table-row-hover: rgba(255,255,255,.05);
  --kp-table-wrap-border: rgba(255,235,210,.08);
  --kp-badge-bg: rgba(255,255,255,.05);
  --kp-badge-text: var(--k-text-secondary);
  --kp-badge-border: rgba(255,235,210,.10);
  --kp-pager-wrap-bg: linear-gradient(180deg, rgba(30,24,21,.82), rgba(24,19,16,.92));
  --kp-pager-wrap-border: rgba(255,235,210,.08);
  --kp-pager-item-bg: rgba(255,255,255,.04);
  --kp-pager-item-text: var(--k-text-secondary);
  --kp-pager-item-border: rgba(255,235,210,.10);
  --kp-pager-item-hover-bg: rgba(255,255,255,.07);
  --kp-pager-item-hover-border: rgba(255,187,120,.20);
  --kp-pager-item-active-bg: linear-gradient(135deg, #c57d5b 0%, #9e593d 100%);
  --kp-pager-item-active-text: #fff;
}


/* ==========================================================
   Unified Page Shell (Home-style)
   Goal: make all pages look like / (feed) for logged users
   ========================================================== */
/* If a template only wraps with kp-dashboard, do NOT auto-card every first-level container.
   That global shell rule produced dark frame bleed around whole module pages.
   Page wrappers stay neutral by default; only explicit .kp-shell-auto blocks get shell chrome. */
.kp-dashboard:not(.kp-messages) > div:not(.kp-card),
.kp-dashboard:not(.kp-messages) > section:not(.kp-card),
.kp-dashboard:not(.kp-messages) > article:not(.kp-card),
.kp-dashboard:not(.kp-messages) > form:not(.kp-card),
.kp-dashboard:not(.kp-messages) > table:not(.kp-card),
.kp-dashboard:not(.kp-messages) > ul:not(.kp-card),
.kp-dashboard:not(.kp-messages) > ol:not(.kp-card){
  min-width: 0;
}

.kp-dashboard > .kp-shell-auto,
.kp-dashboard > [data-kp-shell="auto"]{
  background: var(--kp-shell-bg);
  border: 1px solid var(--kp-shell-border);
  border-radius: var(--k-radius-xl, 16px);
  padding: 16px 18px;
  box-shadow: var(--kp-shell-shadow);
}

/* Ensure kp-cards follow the same rhythm */
.kp-dashboard .kp-card{ margin-bottom: 0; }

/* Typography */
.kp-dashboard h1,
.kp-dashboard h2,
.kp-dashboard h3{
  margin: 0 0 10px 0;
  line-height: 1.15;
}

.kp-dashboard .kp-page-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  letter-spacing: .2px;
}

.kp-dashboard .kp-page-subtitle{
  margin: -6px 0 0 0;
  opacity: .8;
}

.kp-dashboard .kp-page-title i{
  opacity:.9;
}

/* Forms */
/* generic form/button overrides removed during canonical cleanup; base components now come from core/theme layers */

.kp-dashboard .kp-tableWrap,
.kp-dashboard .table-wrap,
.kp-dashboard .kp-earn-bank__table-wrap,
.kp-dashboard .admin-table-wrap{
  overflow-x:auto;
  border-radius:18px;
  border:1px solid var(--kp-table-wrap-border);
  background:var(--kp-table-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.kp-dashboard table,
.kp-dashboard .kp-table,
.kp-dashboard .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--kp-table-wrap-border);
  background: var(--kp-table-bg);
}

.kp-dashboard table thead th,
.kp-dashboard .kp-table thead th,
.kp-dashboard .table thead th,
.kp-dashboard table th,
.kp-dashboard .kp-table__th{
  text-align:left;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--k-text-muted);
  background:var(--kp-table-head-bg);
  padding:12px 14px;
  border-bottom:1px solid var(--kp-table-wrap-border);
}

.kp-dashboard table td,
.kp-dashboard .kp-table td,
.kp-dashboard .table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--k-border-subtle);
  vertical-align: middle;
}

.kp-dashboard table tbody tr,
.kp-dashboard .kp-table tbody tr,
.kp-dashboard .table tbody tr{
  transition: background .16s ease;
}

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

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

/* Alerts/messages */
.kp-dashboard .kp-alert{
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid var(--k-border-default);
  background: var(--k-bg-card);
}

.kp-dashboard .kp-alert--ok{border-color: color-mix(in srgb, var(--success-primary) 55%, transparent);}
.kp-dashboard .kp-alert--warn{ border-color: rgba(255,107,53,0.45); }
.kp-dashboard .kp-alert--err{ border-color: rgba(239,68,68,0.45); }



/* Shared segmented tabs — unified across dashboard modules */
.kp-dashboard{
  --kp-tabs-wrap-bg: color-mix(in srgb, var(--k-bg-card) 86%, transparent);
  --kp-tabs-wrap-border: var(--k-border-subtle);
  --kp-tabs-item-bg: color-mix(in srgb, var(--k-bg-card) 92%, transparent);
  --kp-tabs-item-text: var(--k-text-secondary);
  --kp-tabs-item-border: color-mix(in srgb, var(--k-border-default) 82%, transparent);
  --kp-tabs-item-hover-bg: color-mix(in srgb, var(--k-primary-soft) 42%, var(--k-bg-card));
  --kp-tabs-item-hover-border: color-mix(in srgb, var(--k-primary) 22%, var(--k-border-default));
  --kp-tabs-item-active-bg: var(--k-gradient-primary);
  --kp-tabs-item-active-text: var(--k-text-inverse);
  --kp-tabs-item-active-shadow: 0 10px 24px color-mix(in srgb, var(--k-primary) 18%, transparent);
}

[data-theme="light"] .kp-dashboard{
  --kp-tabs-wrap-bg: linear-gradient(180deg, rgba(255,255,255,.86), rgba(247,240,233,.96));
  --kp-tabs-wrap-border: rgba(155,102,72,.14);
  --kp-tabs-item-bg: rgba(255,255,255,.88);
  --kp-tabs-item-text: var(--k-text-secondary);
  --kp-tabs-item-border: rgba(155,102,72,.14);
  --kp-tabs-item-hover-bg: rgba(246,233,223,.96);
  --kp-tabs-item-hover-border: rgba(184,109,73,.24);
  --kp-tabs-item-active-bg: linear-gradient(135deg, #c57d5b 0%, #af6545 100%);
  --kp-tabs-item-active-text: #fff;
}

[data-theme="dark"] .kp-dashboard{
  --kp-tabs-wrap-bg: linear-gradient(180deg, rgba(30,24,21,.82), rgba(24,19,16,.92));
  --kp-tabs-wrap-border: rgba(255,235,210,.08);
  --kp-tabs-item-bg: rgba(255,255,255,.04);
  --kp-tabs-item-text: var(--k-text-secondary);
  --kp-tabs-item-border: rgba(255,235,210,.10);
  --kp-tabs-item-hover-bg: rgba(255,255,255,.07);
  --kp-tabs-item-hover-border: rgba(255,187,120,.20);
  --kp-tabs-item-active-bg: linear-gradient(135deg, #c57d5b 0%, #9e593d 100%);
  --kp-tabs-item-active-text: #fff;
}

/* Tabs (Home-style) */
/* generic tab/chip overrides removed during canonical cleanup; route/module tabs own their styles */

/* ═══════════════════════════════════════════════════════════════════════════
   KP v5 DASHBOARD SHELL — Deep Visual Refresh
   ═══════════════════════════════════════════════════════════════════════════ */

.kp-dashboard {
  animation: kp-fadeIn 0.35s ease both !important;
}

.kp-dashboard .kp-h1,
.kp-dashboard h1 {
  font-family: var(--k-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
}

.kp-dashboard .kp-card {
  border-radius: var(--k-radius-2xl) !important;
  transition: all 0.25s var(--k-ease-default) !important;
}

.kp-dashboard .kp-btn--primary,
.kp-dashboard .kp-btn.is-primary {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--k-primary) 22%, transparent) !important;
  position: relative !important;
  overflow: hidden !important;
}

.kp-dashboard .kp-btn--primary::after,
.kp-dashboard .kp-btn.is-primary::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent) !important;
  transform: translateX(-100%) !important;
  transition: transform 0.4s !important;
}

.kp-dashboard .kp-btn--primary:hover::after,
.kp-dashboard .kp-btn.is-primary:hover::after {
  transform: translateX(100%) !important;
}

.kp-dashboard .kp-btn--primary:hover,
.kp-dashboard .kp-btn.is-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--k-primary) 28%, transparent) !important;
}

/* Dashboard alert animations */
.kp-dashboard .kp-alert {
  animation: kp-fadeUp 0.3s ease both !important;
}

.kp-dashboard .kp-alert--danger,
.kp-dashboard .alert-danger {
  animation: kp-shake 0.5s ease both !important;
}

/* Dashboard input focus */
.kp-dashboard input:focus,
.kp-dashboard select:focus,
.kp-dashboard textarea:focus {
  border-color: var(--k-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-primary) 10%, transparent) !important;
}

/* Dashboard stat values */
.kp-dashboard .kp-v,
.kp-dashboard [class*="stat__value"],
.kp-dashboard [class*="__val"],
.kp-dashboard [class*="-value"] {
  font-family: var(--k-font-display) !important;
  font-weight: 800 !important;
}

/* Dashboard titles */
.kp-dashboard [class*="__title"],
.kp-dashboard [class*="__heading"] {
  font-family: var(--k-font-display) !important;
  font-weight: 700 !important;
}

/* Dashboard eyebrows */
.kp-dashboard [class*="__eyebrow"] {
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--k-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v1.1.1.212 — FOUNDATION UI CANONICALIZATION
   Shared page shell, cards, buttons, forms, toolbars, tabs, alerts, modals.
   Keep global UI primitives here instead of route-level patches.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --kp-foundation-shell-max: min(1240px, calc(100vw - 32px));
  --kp-foundation-gap: clamp(14px, 2vw, 24px);
  --kp-foundation-sticky-offset: calc(env(safe-area-inset-top, 0px) + 84px);
  --kp-foundation-surface: color-mix(in srgb, var(--k-bg-card) 94%, transparent);
  --kp-foundation-surface-strong: color-mix(in srgb, var(--k-bg-elevated) 90%, transparent);
  --kp-foundation-border: color-mix(in srgb, var(--k-border-default) 88%, transparent);
  --kp-foundation-border-strong: color-mix(in srgb, var(--k-primary) 18%, var(--k-border-default));
  --kp-foundation-shadow: 0 18px 48px rgba(7, 12, 20, .14);
  --kp-foundation-shadow-soft: 0 10px 28px rgba(7, 12, 20, .10);
}

[data-theme="light"] {
  --kp-foundation-surface: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,242,236,.98));
  --kp-foundation-surface-strong: rgba(255,255,255,.94);
  --kp-foundation-border: rgba(155,102,72,.14);
  --kp-foundation-border-strong: rgba(184,109,73,.28);
  --kp-foundation-shadow: 0 20px 44px rgba(74, 46, 31, .08);
  --kp-foundation-shadow-soft: 0 12px 28px rgba(74, 46, 31, .06);
}

[data-theme="dark"] {
  --kp-foundation-surface: linear-gradient(180deg, rgba(30,24,21,.92), rgba(22,18,16,.96));
  --kp-foundation-surface-strong: rgba(255,255,255,.05);
  --kp-foundation-border: rgba(255,235,210,.10);
  --kp-foundation-border-strong: rgba(255,187,120,.24);
  --kp-foundation-shadow: 0 22px 52px rgba(3, 6, 12, .24);
  --kp-foundation-shadow-soft: 0 12px 30px rgba(3, 6, 12, .18);
}

.app-page-wrapper {
  width: 100%;
  min-width: 0;
  padding-top: clamp(16px, 2.2vw, 28px);
}

.container,
.kp-dashboard {
  min-width: 0;
}

.kp-dashboard {
  width: min(100%, var(--kp-foundation-shell-max));
  gap: var(--kp-foundation-gap);
}

.kp-page-shell,
.kp-shell,
[data-kp-shell="page"] {
  width: min(100%, var(--kp-foundation-shell-max));
  margin-inline: auto;
  display: grid;
  gap: var(--kp-foundation-gap);
}

.kp-page-header,
.kp-section-header,
[data-kp-block="page-header"] {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--kp-foundation-border);
  border-radius: var(--k-radius-2xl);
  background: var(--kp-foundation-surface);
  box-shadow: var(--kp-foundation-shadow-soft);
}

.kp-sticky-panel,
[data-kp-sticky="panel"] {
  position: sticky;
  top: var(--kp-foundation-sticky-offset);
}

.kp-overflow-x,
[data-kp-overflow="x"] {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
  .kp-form-row,
  .kp-form-grid,
  [data-kp-block="form-grid"] {
    grid-template-columns: 1fr;
  }

  .kp-page-header,
  .kp-section-header,
  [data-kp-block="page-header"] {
    padding: 18px;
  }
}

@media (max-width: 640px) {
  :root {
    --kp-foundation-shell-max: min(100vw - 16px, 100%);
    --kp-foundation-gap: 12px;
    --kp-foundation-sticky-offset: calc(env(safe-area-inset-top, 0px) + 74px);
  }

  .app-page-wrapper {
    padding-top: 12px;
  }

  .kp-dashboard {
    padding-inline: 0;
  }

  .kp-page-header,
  .kp-section-header,
  [data-kp-block="page-header"],
  .kp-toolbar,
  [data-kp-block="toolbar"],
  .kp-empty,
  .kp-empty-state,
  [data-kp-block="empty"] {
    border-radius: 20px;
  }

  .kp-btn,
  .kp-input,
  .kp-select,
  .kp-textarea {
    min-height: 42px;
  }
}


.kp-safety-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.kp-safety-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--k-border-default) 82%, transparent);background:color-mix(in srgb,var(--k-bg-elevated) 88%, transparent);color:var(--k-text-secondary);font-size:.72rem;font-weight:700;line-height:1.1}.kp-safety-badges--compact{margin-top:10px}.kp-safety-badges--overlay{position:absolute;left:8px;right:8px;bottom:8px;margin-top:0;pointer-events:none}.kp-safety-badges--overlay .kp-safety-badge{max-width:100%;justify-content:center;background:color-mix(in srgb,var(--k-bg-card) 90%, transparent);backdrop-filter:blur(8px)}