/*
 * ============================================================
 *  WealthNub Fintech Design System — v1.0
 *  Phase 1: Design Tokens + Component Layer
 *
 *  Strategy: overlay on top of Atlantis; never remove, only
 *  enhance. All variables are prefixed --wn- to avoid clashes.
 * ============================================================
 */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ---------------------------------------------------------------- */
:root {
  /* --- Colour Palette --- */
  --wn-bg-deep:       #0b0e14;    /* page background              */
  --wn-bg-surface:    #141820;    /* card / panel surface         */
  --wn-bg-elevated:   #1c2230;    /* elevated card / modal        */
  --wn-bg-input:      #181d28;    /* form input background        */
  --wn-border:        #252d3d;    /* default border               */
  --wn-border-subtle: #1e2636;    /* very subtle divider          */

  /* Accent — primary brand (electric blue) */
  --wn-accent:        #1eb3ff;
  --wn-accent-hover:  #36c4ff;
  --wn-accent-muted:  rgba(30, 179, 255, 0.12);
  --wn-accent-glow:   0 0 18px rgba(30, 179, 255, 0.25);

  /* Status */
  --wn-success:       #00c896;
  --wn-success-muted: rgba(0, 200, 150, 0.12);
  --wn-warning:       #f5a623;
  --wn-warning-muted: rgba(245, 166, 35, 0.12);
  --wn-danger:        #ff4d6a;
  --wn-danger-muted:  rgba(255, 77, 106, 0.12);
  --wn-pending:       #a78bfa;
  --wn-pending-muted: rgba(167, 139, 250, 0.12);

  /* Text */
  --wn-text-primary:  #f3f8ff;
  --wn-text-secondary:#c6d5ea;
  --wn-text-muted:    #9bb0cc;
  --wn-text-inverse:  #0b0e14;

  /* --- Typography Scale --- */
  --wn-font-sans:     'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --wn-font-mono:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --wn-text-xs:   0.70rem;   /* 11.2px  — captions, labels     */
  --wn-text-sm:   0.80rem;   /* 12.8px  — table cells, meta    */
  --wn-text-base: 0.875rem;  /* 14px    — body default         */
  --wn-text-md:   1rem;      /* 16px    — card titles          */
  --wn-text-lg:   1.125rem;  /* 18px    — section headings     */
  --wn-text-xl:   1.375rem;  /* 22px    — page headings        */
  --wn-text-2xl:  1.75rem;   /* 28px    — hero / balance       */
  --wn-text-3xl:  2.25rem;   /* 36px    — big numbers          */

  --wn-fw-normal: 400;
  --wn-fw-medium: 500;
  --wn-fw-semi:   600;
  --wn-fw-bold:   700;

  --wn-lh-tight:  1.2;
  --wn-lh-normal: 1.5;
  --wn-lh-loose:  1.75;

  /* --- Spacing Scale (4-point grid) --- */
  --wn-sp-1:  4px;
  --wn-sp-2:  8px;
  --wn-sp-3:  12px;
  --wn-sp-4:  16px;
  --wn-sp-5:  20px;
  --wn-sp-6:  24px;
  --wn-sp-8:  32px;
  --wn-sp-10: 40px;
  --wn-sp-12: 48px;

  /* --- Radius --- */
  --wn-radius-sm:  4px;
  --wn-radius-md:  8px;
  --wn-radius-lg:  12px;
  --wn-radius-xl:  16px;
  --wn-radius-pill:999px;

  /* --- Shadows --- */
  --wn-shadow-sm:  0 1px 4px rgba(0,0,0,0.35);
  --wn-shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --wn-shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --wn-shadow-glow-accent: 0 0 20px rgba(30, 179, 255, 0.2);

  /* --- Transitions --- */
  --wn-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --wn-duration-fast:  120ms;
  --wn-duration-base:  220ms;
  --wn-duration-slow:  380ms;

  /* --- Z-index stack --- */
  --wn-z-dropdown:  500;
  --wn-z-sticky:    700;
  --wn-z-modal:     1050;
  --wn-z-toast:     1200;
  --wn-z-overlay:   1400;
}


/* ----------------------------------------------------------------
   2. BASE OVERRIDES — make the Atlantis dark theme speak our palette
   ---------------------------------------------------------------- */
body,
.wrapper {
  background-color: var(--wn-bg-deep) !important;
  color: var(--wn-text-primary) !important;
  font-family: var(--wn-font-sans) !important;
  font-size: var(--wn-text-base) !important;
  line-height: var(--wn-lh-normal) !important;
}

/* Readability boost for dark dashboards */
.text-muted,
.wn-text-muted {
  color: var(--wn-text-muted) !important;
}

.card,
.card-body,
.main-panel,
.page-inner,
.table,
.table td,
.table th,
.form-control,
.input-group-text,
.list-group-item,
.modal-content {
  color: var(--wn-text-primary);
}

.card .text-muted,
.table .text-muted,
.list-group-item .text-muted,
.modal-content .text-muted {
  color: var(--wn-text-secondary) !important;
}

/* Preserve readability on hover/focus states */
.card:hover,
.card:focus-within,
.table-hover tbody tr:hover,
.list-group-item:hover {
  color: var(--wn-text-primary) !important;
}

.card:hover .text-muted,
.card:focus-within .text-muted,
.table-hover tbody tr:hover .text-muted,
.list-group-item:hover .text-muted,
.table thead th,
.table td,
.table th,
.card-title,
.card-category {
  color: var(--wn-text-secondary) !important;
}

.card-title,
.table thead th,
.table td strong,
.table th strong {
  color: var(--wn-text-primary) !important;
}

/* Legacy Blade compatibility layer (admin + user dashboard) */
.card-header.bg-white,
.card-header.bg-light,
.bg-white,
.bg-light,
.table thead,
.table thead tr {
  background: var(--wn-bg-elevated) !important;
  color: var(--wn-text-primary) !important;
  border-color: var(--wn-border) !important;
}

.card,
.trade-log-card,
.trade-panel,
.trade-header,
.wallet-card,
.dashboard-card,
.wn-risk-card,
.wn-ops-row {
  border-color: var(--wn-border) !important;
  background: var(--wn-bg-surface) !important;
}

.form-text,
.small,
small,
.label,
.nk-iv-scheme-value,
.card-category,
.text-secondary {
  color: var(--wn-text-secondary) !important;
}

.table,
.table td,
.table th,
.table-hover tbody tr:hover,
.table-active {
  color: var(--wn-text-primary) !important;
  border-color: var(--wn-border-subtle) !important;
}

.table-hover tbody tr:hover {
  background: rgba(30, 179, 255, 0.08) !important;
}

.badge,
.badge-secondary,
.badge-light {
  color: var(--wn-text-primary) !important;
}

.btn-outline-secondary,
.btn-light {
  color: var(--wn-text-secondary) !important;
  border-color: var(--wn-border) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover,
.btn-light:hover {
  color: var(--wn-text-primary) !important;
  border-color: var(--wn-accent) !important;
  background: var(--wn-accent-muted) !important;
}

/* Global link */
a { color: var(--wn-accent); transition: color var(--wn-duration-fast) var(--wn-ease); }
a:hover { color: var(--wn-accent-hover); text-decoration: none; }


/* ----------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ---------------------------------------------------------------- */
.wn-heading-1 { font-size: var(--wn-text-2xl); font-weight: var(--wn-fw-bold);  color: var(--wn-text-primary); line-height: var(--wn-lh-tight); }
.wn-heading-2 { font-size: var(--wn-text-xl);  font-weight: var(--wn-fw-semi);  color: var(--wn-text-primary); line-height: var(--wn-lh-tight); }
.wn-heading-3 { font-size: var(--wn-text-lg);  font-weight: var(--wn-fw-semi);  color: var(--wn-text-primary); }
.wn-heading-4 { font-size: var(--wn-text-md);  font-weight: var(--wn-fw-medium);color: var(--wn-text-primary); }
.wn-body      { font-size: var(--wn-text-base); color: var(--wn-text-secondary); }
.wn-caption   { font-size: var(--wn-text-xs);   color: var(--wn-text-muted); letter-spacing: 0.03em; }
.wn-label     { font-size: var(--wn-text-sm);   font-weight: var(--wn-fw-medium); color: var(--wn-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.wn-mono      { font-family: var(--wn-font-mono) !important; }

.wn-text-accent   { color: var(--wn-accent)   !important; }
.wn-text-success  { color: var(--wn-success)  !important; }
.wn-text-warning  { color: var(--wn-warning)  !important; }
.wn-text-danger   { color: var(--wn-danger)   !important; }
.wn-text-muted    { color: var(--wn-text-muted) !important; }
.wn-text-secondary{ color: var(--wn-text-secondary) !important; }
.wn-text-primary  { color: var(--wn-text-primary) !important; }

/* Big balance / price number */
.wn-price {
  font-family: var(--wn-font-mono);
  font-size: var(--wn-text-2xl);
  font-weight: var(--wn-fw-bold);
  color: var(--wn-text-primary);
  letter-spacing: -0.02em;
}
.wn-price--sm { font-size: var(--wn-text-lg); }
.wn-price--lg { font-size: var(--wn-text-3xl); }

/* Positive / negative tick colors */
.wn-tick-up   { color: var(--wn-success); }
.wn-tick-down { color: var(--wn-danger);  }


/* ----------------------------------------------------------------
   4. CARD SYSTEM
   ---------------------------------------------------------------- */

/* Base card */
.wn-card {
  background: var(--wn-bg-surface);
  border: 1px solid var(--wn-border);
  border-radius: var(--wn-radius-lg);
  padding: var(--wn-sp-6);
  box-shadow: var(--wn-shadow-sm);
  transition: box-shadow var(--wn-duration-base) var(--wn-ease),
              border-color var(--wn-duration-base) var(--wn-ease);
  position: relative;
  overflow: hidden;
}

/* Elevated card */
.wn-card--elevated {
  background: var(--wn-bg-elevated);
  box-shadow: var(--wn-shadow-md);
}

/* Glass card */
.wn-card--glass {
  background: rgba(28, 34, 48, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.06);
}

/* Accent-bordered card */
.wn-card--accent {
  border-color: var(--wn-accent);
  box-shadow: var(--wn-shadow-glow-accent);
}

/* Stat/metric card */
.wn-card--stat {
  padding: var(--wn-sp-5);
}
.wn-card--stat:hover {
  border-color: var(--wn-accent);
  box-shadow: var(--wn-shadow-glow-accent);
}

/* Card sub-elements */
.wn-card__label {
  font-size: var(--wn-text-xs);
  font-weight: var(--wn-fw-medium);
  color: var(--wn-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--wn-sp-2);
}
.wn-card__value {
  font-size: var(--wn-text-xl);
  font-weight: var(--wn-fw-bold);
  color: var(--wn-text-primary);
  line-height: var(--wn-lh-tight);
  font-family: var(--wn-font-mono);
}
.wn-card__subvalue {
  font-size: var(--wn-text-sm);
  color: var(--wn-text-secondary);
  margin-top: var(--wn-sp-1);
}
.wn-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--wn-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.wn-card__icon--accent  { background: var(--wn-accent-muted);  color: var(--wn-accent);  }
.wn-card__icon--success { background: var(--wn-success-muted); color: var(--wn-success); }
.wn-card__icon--warning { background: var(--wn-warning-muted); color: var(--wn-warning); }
.wn-card__icon--danger  { background: var(--wn-danger-muted);  color: var(--wn-danger);  }
.wn-card__icon--pending { background: var(--wn-pending-muted); color: var(--wn-pending); }

/* Card header row */
.wn-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--wn-sp-5);
  padding-bottom: var(--wn-sp-4);
  border-bottom: 1px solid var(--wn-border-subtle);
}
.wn-card__title {
  font-size: var(--wn-text-md);
  font-weight: var(--wn-fw-semi);
  color: var(--wn-text-primary);
  margin: 0;
}

/* Stripe accent at card top */
.wn-card--accent-stripe::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wn-accent), var(--wn-success));
  border-radius: var(--wn-radius-lg) var(--wn-radius-lg) 0 0;
}


/* ----------------------------------------------------------------
   5. BUTTON SYSTEM
   ---------------------------------------------------------------- */
.wn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wn-sp-2);
  font-family: var(--wn-font-sans);
  font-size: var(--wn-text-sm);
  font-weight: var(--wn-fw-semi);
  line-height: 1;
  padding: 0.6rem 1.25rem;
  border-radius: var(--wn-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--wn-duration-fast) var(--wn-ease),
    border-color var(--wn-duration-fast) var(--wn-ease),
    box-shadow var(--wn-duration-fast) var(--wn-ease),
    transform var(--wn-duration-fast) var(--wn-ease);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}
.wn-btn:active { transform: translateY(1px); }
.wn-btn:focus  { outline: 2px solid var(--wn-accent); outline-offset: 2px; }
.wn-btn:disabled,
.wn-btn[disabled] { opacity: 0.45; pointer-events: none; }

/* Primary */
.wn-btn--primary {
  background: var(--wn-accent);
  border-color: var(--wn-accent);
  color: #000;
}
.wn-btn--primary:hover {
  background: var(--wn-accent-hover);
  border-color: var(--wn-accent-hover);
  box-shadow: var(--wn-shadow-glow-accent);
  color: #000;
}

/* Secondary */
.wn-btn--secondary {
  background: transparent;
  border-color: var(--wn-border);
  color: var(--wn-text-secondary);
}
.wn-btn--secondary:hover {
  border-color: var(--wn-accent);
  color: var(--wn-accent);
  background: var(--wn-accent-muted);
}

/* Ghost */
.wn-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--wn-text-secondary);
}
.wn-btn--ghost:hover {
  background: var(--wn-bg-elevated);
  color: var(--wn-text-primary);
}

/* Danger */
.wn-btn--danger {
  background: var(--wn-danger-muted);
  border-color: var(--wn-danger);
  color: var(--wn-danger);
}
.wn-btn--danger:hover {
  background: var(--wn-danger);
  color: #fff;
}

/* Success */
.wn-btn--success {
  background: var(--wn-success);
  border-color: var(--wn-success);
  color: #000;
}
.wn-btn--success:hover {
  background: #00e0a8;
  box-shadow: 0 0 16px rgba(0,200,150,0.3);
  color: #000;
}

/* Sizes */
.wn-btn--xs  { font-size: var(--wn-text-xs);  padding: 0.3rem 0.65rem; border-radius: var(--wn-radius-sm); }
.wn-btn--sm  { font-size: var(--wn-text-xs);  padding: 0.45rem 0.9rem; }
.wn-btn--lg  { font-size: var(--wn-text-base); padding: 0.8rem 1.75rem; border-radius: var(--wn-radius-lg); }
.wn-btn--xl  { font-size: var(--wn-text-md);  padding: 1rem 2rem;     border-radius: var(--wn-radius-lg); }
.wn-btn--full{ width: 100%; }
.wn-btn--pill{ border-radius: var(--wn-radius-pill); }

/* Icon button */
.wn-btn--icon {
  width: 36px; height: 36px;
  padding: 0;
  border-radius: var(--wn-radius-md);
}
.wn-btn--icon.wn-btn--lg { width: 44px; height: 44px; }


/* ----------------------------------------------------------------
   6. INPUT / FORM SYSTEM
   ---------------------------------------------------------------- */
.wn-form-group {
  margin-bottom: var(--wn-sp-5);
}
.wn-form-label {
  display: block;
  font-size: var(--wn-text-sm);
  font-weight: var(--wn-fw-medium);
  color: var(--wn-text-secondary);
  margin-bottom: var(--wn-sp-2);
  letter-spacing: 0.02em;
}
.wn-form-label .required { color: var(--wn-danger); margin-left: 2px; }

.wn-input {
  display: block;
  width: 100%;
  background: var(--wn-bg-input);
  border: 1px solid var(--wn-border);
  border-radius: var(--wn-radius-md);
  padding: 0.65rem var(--wn-sp-4);
  font-family: var(--wn-font-sans);
  font-size: var(--wn-text-base);
  color: var(--wn-text-primary);
  line-height: 1.5;
  transition:
    border-color var(--wn-duration-fast) var(--wn-ease),
    box-shadow    var(--wn-duration-fast) var(--wn-ease),
    background    var(--wn-duration-fast) var(--wn-ease);
  -webkit-appearance: none;
  appearance: none;
}
.wn-input::placeholder { color: var(--wn-text-muted); }
.wn-input:focus {
  outline: none;
  border-color: var(--wn-accent);
  box-shadow: 0 0 0 3px rgba(30,179,255,0.15);
  background: var(--wn-bg-elevated);
}
.wn-input:disabled { opacity: 0.5; cursor: not-allowed; }
.wn-input--error   { border-color: var(--wn-danger) !important; }
.wn-input--success { border-color: var(--wn-success) !important; }

/* Input with icon */
.wn-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.wn-input-wrap .wn-input-icon {
  position: absolute;
  left: var(--wn-sp-4);
  color: var(--wn-text-muted);
  pointer-events: none;
  font-size: 0.9rem;
  line-height: 1;
}
.wn-input-wrap .wn-input { padding-left: 2.75rem; }
.wn-input-wrap .wn-input-icon--right { left: auto; right: var(--wn-sp-4); }
.wn-input-wrap .wn-input--with-right { padding-right: 2.75rem; }

/* Validation messages */
.wn-field-error {
  font-size: var(--wn-text-xs);
  color: var(--wn-danger);
  margin-top: var(--wn-sp-1);
  display: flex;
  align-items: center;
  gap: var(--wn-sp-1);
}
.wn-field-hint {
  font-size: var(--wn-text-xs);
  color: var(--wn-text-muted);
  margin-top: var(--wn-sp-1);
}

/* Select */
.wn-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a95a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--wn-sp-4) center;
  padding-right: 2.5rem;
}

/* Checkbox & Radio */
.wn-check {
  display: flex;
  align-items: flex-start;
  gap: var(--wn-sp-3);
  cursor: pointer;
}
.wn-check input[type="checkbox"],
.wn-check input[type="radio"] {
  width: 16px; height: 16px;
  margin-top: 2px;
  accent-color: var(--wn-accent);
  cursor: pointer;
  flex-shrink: 0;
}
.wn-check__label {
  font-size: var(--wn-text-sm);
  color: var(--wn-text-secondary);
  line-height: var(--wn-lh-normal);
}


/* ----------------------------------------------------------------
   7. BADGE / STATUS SYSTEM
   ---------------------------------------------------------------- */
.wn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.2em 0.6em;
  border-radius: var(--wn-radius-pill);
  font-size: var(--wn-text-xs);
  font-weight: var(--wn-fw-semi);
  line-height: 1.4;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Dot indicator inside badge */
.wn-badge::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.wn-badge--no-dot::before { display: none; }

.wn-badge--success { background: var(--wn-success-muted); color: var(--wn-success); }
.wn-badge--warning { background: var(--wn-warning-muted); color: var(--wn-warning); }
.wn-badge--danger  { background: var(--wn-danger-muted);  color: var(--wn-danger);  }
.wn-badge--accent  { background: var(--wn-accent-muted);  color: var(--wn-accent);  }
.wn-badge--pending { background: var(--wn-pending-muted); color: var(--wn-pending); }
.wn-badge--muted   { background: rgba(138,149,168,0.12);  color: var(--wn-text-muted); }

/* Outlined variant */
.wn-badge--outline-success { background: transparent; border: 1px solid var(--wn-success); color: var(--wn-success); }
.wn-badge--outline-danger  { background: transparent; border: 1px solid var(--wn-danger);  color: var(--wn-danger);  }
.wn-badge--outline-warning { background: transparent; border: 1px solid var(--wn-warning); color: var(--wn-warning); }
.wn-badge--outline-accent  { background: transparent; border: 1px solid var(--wn-accent);  color: var(--wn-accent);  }


/* ----------------------------------------------------------------
   8. TABLE SYSTEM
   ---------------------------------------------------------------- */
.wn-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--wn-radius-lg);
  border: 1px solid var(--wn-border);
}
.wn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wn-text-sm);
  color: var(--wn-text-secondary);
}
.wn-table thead th {
  background: var(--wn-bg-elevated);
  color: var(--wn-text-muted);
  font-size: var(--wn-text-xs);
  font-weight: var(--wn-fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: var(--wn-sp-3) var(--wn-sp-4);
  border-bottom: 1px solid var(--wn-border);
  white-space: nowrap;
}
.wn-table tbody tr {
  border-bottom: 1px solid var(--wn-border-subtle);
  transition: background var(--wn-duration-fast) var(--wn-ease);
}
.wn-table tbody tr:last-child { border-bottom: none; }
.wn-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.wn-table td {
  padding: var(--wn-sp-3) var(--wn-sp-4);
  vertical-align: middle;
  color: var(--wn-text-primary);
}

/* Skeleton loader row */
.wn-table .wn-skel-row td { padding: var(--wn-sp-3) var(--wn-sp-4); }


/* ----------------------------------------------------------------
   9. SKELETON LOADERS
   ---------------------------------------------------------------- */
@keyframes wn-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.wn-skeleton {
  background: linear-gradient(
    90deg,
    var(--wn-bg-elevated) 25%,
    rgba(255,255,255,0.04) 50%,
    var(--wn-bg-elevated) 75%
  );
  background-size: 1200px 100%;
  animation: wn-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--wn-radius-sm);
  display: block;
}
.wn-skeleton--text { height: 14px; margin-bottom: var(--wn-sp-2); border-radius: 4px; }
.wn-skeleton--title{ height: 20px; width: 60%; border-radius: 4px; }
.wn-skeleton--avatar{ width: 40px; height: 40px; border-radius: 50%; }
.wn-skeleton--badge { height: 22px; width: 80px; border-radius: var(--wn-radius-pill); }
.wn-skeleton--card  { height: 96px; border-radius: var(--wn-radius-lg); }
.wn-skeleton--btn   { height: 36px; width: 100px; border-radius: var(--wn-radius-md); }


/* ----------------------------------------------------------------
   10. DIVIDER
   ---------------------------------------------------------------- */
.wn-divider {
  border: none;
  border-top: 1px solid var(--wn-border-subtle);
  margin: var(--wn-sp-6) 0;
}
.wn-divider--label {
  display: flex;
  align-items: center;
  gap: var(--wn-sp-3);
  color: var(--wn-text-muted);
  font-size: var(--wn-text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.wn-divider--label::before,
.wn-divider--label::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--wn-border-subtle);
}


/* ----------------------------------------------------------------
   11. INLINE SPINNER
   ---------------------------------------------------------------- */
@keyframes wn-spin { to { transform: rotate(360deg); } }
.wn-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--wn-accent);
  border-radius: 50%;
  animation: wn-spin 0.7s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}
.wn-spinner--sm  { width: 14px; height: 14px; border-width: 2px; }
.wn-spinner--lg  { width: 28px; height: 28px; border-width: 3px; }
.wn-spinner--xl  { width: 44px; height: 44px; border-width: 4px; }
.wn-spinner--success { border-top-color: var(--wn-success); }
.wn-spinner--danger  { border-top-color: var(--wn-danger);  }


/* ----------------------------------------------------------------
   12. TOAST NOTIFICATION SYSTEM
   ---------------------------------------------------------------- */
#wn-toast-container {
  position: fixed;
  top: var(--wn-sp-5);
  right: var(--wn-sp-5);
  z-index: var(--wn-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--wn-sp-3);
  pointer-events: none;
  max-width: 380px;
  width: calc(100vw - 40px);
}

.wn-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--wn-sp-3);
  background: var(--wn-bg-elevated);
  border: 1px solid var(--wn-border);
  border-left: 3px solid var(--wn-accent);
  border-radius: var(--wn-radius-lg);
  padding: var(--wn-sp-4);
  box-shadow: var(--wn-shadow-lg);
  pointer-events: all;
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity var(--wn-duration-base) var(--wn-ease),
    transform var(--wn-duration-base) var(--wn-ease);
  will-change: opacity, transform;
}
.wn-toast.wn-toast--visible {
  opacity: 1;
  transform: translateX(0);
}
.wn-toast.wn-toast--hiding {
  opacity: 0;
  transform: translateX(20px);
}

.wn-toast--success { border-left-color: var(--wn-success); }
.wn-toast--warning { border-left-color: var(--wn-warning); }
.wn-toast--danger  { border-left-color: var(--wn-danger);  }
.wn-toast--info    { border-left-color: var(--wn-accent);  }

.wn-toast__icon {
  width: 32px; height: 32px;
  border-radius: var(--wn-radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.wn-toast--success .wn-toast__icon { background: var(--wn-success-muted); color: var(--wn-success); }
.wn-toast--warning .wn-toast__icon { background: var(--wn-warning-muted); color: var(--wn-warning); }
.wn-toast--danger  .wn-toast__icon { background: var(--wn-danger-muted);  color: var(--wn-danger);  }
.wn-toast--info    .wn-toast__icon { background: var(--wn-accent-muted);  color: var(--wn-accent);  }

.wn-toast__body { flex: 1; min-width: 0; }
.wn-toast__title {
  font-size: var(--wn-text-sm);
  font-weight: var(--wn-fw-semi);
  color: var(--wn-text-primary);
  margin-bottom: 2px;
}
.wn-toast__msg {
  font-size: var(--wn-text-xs);
  color: var(--wn-text-secondary);
  line-height: var(--wn-lh-normal);
}
.wn-toast__close {
  background: none;
  border: none;
  color: var(--wn-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  transition: color var(--wn-duration-fast) var(--wn-ease);
  flex-shrink: 0;
}
.wn-toast__close:hover { color: var(--wn-text-primary); }

/* Progress bar under toast */
.wn-toast__progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  border-radius: 0 0 var(--wn-radius-lg) var(--wn-radius-lg);
  transition: width linear;
}


/* ----------------------------------------------------------------
   13. FULL-SCREEN PAGE LOADER
   ---------------------------------------------------------------- */
#wn-page-loader {
  position: fixed;
  inset: 0;
  background: var(--wn-bg-deep);
  z-index: var(--wn-z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wn-sp-5);
  transition: opacity var(--wn-duration-slow) var(--wn-ease);
}
#wn-page-loader.wn-loader--hidden { opacity: 0; pointer-events: none; }
#wn-page-loader .wn-loader-logo { opacity: 0.9; max-height: 40px; }
#wn-page-loader .wn-loader-bar-track {
  width: 160px; height: 2px;
  background: var(--wn-border);
  border-radius: var(--wn-radius-pill);
  overflow: hidden;
}
#wn-page-loader .wn-loader-bar-fill {
  height: 100%;
  background: var(--wn-accent);
  border-radius: var(--wn-radius-pill);
  animation: wn-bar-slide 1.2s ease-in-out infinite;
}
@keyframes wn-bar-slide {
  0%   { transform: translateX(-100%) scaleX(0.4); }
  50%  { transform: translateX(0%)    scaleX(0.7); }
  100% { transform: translateX(100%)  scaleX(0.4); }
}


/* ----------------------------------------------------------------
   14. GLOBAL LAYOUT OVERRIDES — Sidebar + Header
   ---------------------------------------------------------------- */

/* Sidebar base overhaul */
.sidebar {
  background: var(--wn-bg-surface) !important;
  border-right: 1px solid var(--wn-border) !important;
}
.sidebar .sidebar-wrapper {
  background: transparent !important;
}

/* Sidebar logo header */
.logo-header {
  background: var(--wn-bg-surface) !important;
  border-bottom: 1px solid var(--wn-border) !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
}
.logo-header .logo img { max-height: 38px; }

/* Nav items */
.sidebar .nav-primary > .nav-item > a {
  display: flex !important;
  align-items: center !important;
  gap: var(--wn-sp-3) !important;
  padding: 0.6rem var(--wn-sp-5) !important;
  border-radius: var(--wn-radius-md) !important;
  margin: 1px var(--wn-sp-3) !important;
  color: var(--wn-text-secondary) !important;
  font-size: var(--wn-text-sm) !important;
  font-weight: var(--wn-fw-medium) !important;
  transition:
    background var(--wn-duration-fast) var(--wn-ease),
    color var(--wn-duration-fast) var(--wn-ease) !important;
}
.sidebar .nav-primary > .nav-item > a:hover {
  background: var(--wn-bg-elevated) !important;
  color: var(--wn-text-primary) !important;
}
.sidebar .nav-primary > .nav-item.active > a,
.sidebar .nav-primary > .nav-item > a.active {
  background: var(--wn-accent-muted) !important;
  color: var(--wn-accent) !important;
  font-weight: var(--wn-fw-semi) !important;
}
.sidebar .nav-primary > .nav-item.active > a i,
.sidebar .nav-primary > .nav-item > a.active i {
  color: var(--wn-accent) !important;
}

/* Nav icons */
.sidebar .nav-primary > .nav-item > a i {
  font-size: 0.95rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Sidebar user block */
.sidebar .user {
  padding: var(--wn-sp-5) var(--wn-sp-5) var(--wn-sp-4) !important;
  border-bottom: 1px solid var(--wn-border-subtle) !important;
  background: var(--wn-bg-elevated) !important;
  margin-bottom: var(--wn-sp-2) !important;
}
.sidebar .user .info span {
  color: var(--wn-text-primary) !important;
  font-weight: var(--wn-fw-semi) !important;
  font-size: var(--wn-text-sm) !important;
}
.sidebar .user .user-level {
  color: var(--wn-text-muted) !important;
  font-size: var(--wn-text-xs) !important;
}
.sidebar-balance-text {
  color: var(--wn-accent) !important;
  font-weight: var(--wn-fw-bold) !important;
  font-family: var(--wn-font-mono) !important;
}

/* Nav section labels */
.nav-section .text-section {
  font-size: var(--wn-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--wn-text-muted) !important;
  padding: var(--wn-sp-4) var(--wn-sp-5) var(--wn-sp-2) !important;
  font-weight: var(--wn-fw-semi) !important;
}

/* Top navbar */
.main-header .navbar {
  background: var(--wn-bg-surface) !important;
  border-bottom: 1px solid var(--wn-border) !important;
  box-shadow: none !important;
  height: 64px !important;
}
.main-header {
  box-shadow: none !important;
}

/* Main panel */
.main-panel {
  background: var(--wn-bg-deep) !important;
}
.main-panel .content-wrapper {
  padding: var(--wn-sp-6) !important;
}

/* Bootstrap card overrides inside millage */
.main-panel .card {
  background: var(--wn-bg-surface) !important;
  border: 1px solid var(--wn-border) !important;
  border-radius: var(--wn-radius-lg) !important;
  box-shadow: var(--wn-shadow-sm) !important;
  color: var(--wn-text-primary) !important;
}
.main-panel .card-header {
  background: var(--wn-bg-elevated) !important;
  border-bottom: 1px solid var(--wn-border) !important;
  padding: var(--wn-sp-4) var(--wn-sp-5) !important;
  font-weight: var(--wn-fw-semi) !important;
  color: var(--wn-text-primary) !important;
}
.main-panel .card-body {
  padding: var(--wn-sp-5) !important;
  color: var(--wn-text-secondary) !important;
}

/* Table overrides in main-panel */
.main-panel .table {
  color: var(--wn-text-secondary) !important;
  border-color: var(--wn-border-subtle) !important;
}
.main-panel .table thead th {
  background: var(--wn-bg-elevated) !important;
  color: var(--wn-text-muted) !important;
  border-color: var(--wn-border) !important;
  font-size: var(--wn-text-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: var(--wn-fw-semi) !important;
}
.main-panel .table tbody tr:hover {
  background: rgba(255,255,255,0.02) !important;
}
.main-panel .table td, .main-panel .table th {
  border-color: var(--wn-border-subtle) !important;
  vertical-align: middle !important;
  padding: var(--wn-sp-3) var(--wn-sp-4) !important;
}

/* Bootstrap btn overrides to inherit our palette */
.main-panel .btn-primary {
  background: var(--wn-accent) !important;
  border-color: var(--wn-accent) !important;
  color: #000 !important;
}
.main-panel .btn-primary:hover {
  background: var(--wn-accent-hover) !important;
  border-color: var(--wn-accent-hover) !important;
}
.main-panel .btn-success {
  background: var(--wn-success) !important;
  border-color: var(--wn-success) !important;
  color: #000 !important;
}
.main-panel .btn-danger {
  background: var(--wn-danger) !important;
  border-color: var(--wn-danger) !important;
}
.main-panel .btn-warning {
  background: var(--wn-warning) !important;
  border-color: var(--wn-warning) !important;
  color: #000 !important;
}

/* Badge overrides */
.main-panel .badge-success { background: var(--wn-success-muted) !important; color: var(--wn-success) !important; }
.main-panel .badge-danger  { background: var(--wn-danger-muted)  !important; color: var(--wn-danger)  !important; }
.main-panel .badge-warning { background: var(--wn-warning-muted) !important; color: var(--wn-warning) !important; }
.main-panel .badge-info    { background: var(--wn-accent-muted)  !important; color: var(--wn-accent)  !important; }
.main-panel .badge-primary { background: var(--wn-accent-muted)  !important; color: var(--wn-accent)  !important; }

/* Form overrides in main-panel */
.main-panel .form-control {
  background: var(--wn-bg-input) !important;
  border-color: var(--wn-border) !important;
  color: var(--wn-text-primary) !important;
  border-radius: var(--wn-radius-md) !important;
}
.main-panel .form-control:focus {
  background: var(--wn-bg-elevated) !important;
  border-color: var(--wn-accent) !important;
  box-shadow: 0 0 0 3px rgba(30,179,255,0.15) !important;
}
.main-panel .form-control::placeholder { color: var(--wn-text-muted) !important; }
.main-panel label { color: var(--wn-text-secondary) !important; font-size: var(--wn-text-sm) !important; }

/* Alert overrides */
.main-panel .alert {
  border-radius: var(--wn-radius-md) !important;
  border: 1px solid transparent !important;
  font-size: var(--wn-text-sm) !important;
}
.main-panel .alert-success { background: var(--wn-success-muted) !important; color: var(--wn-success) !important; border-color: var(--wn-success) !important; }
.main-panel .alert-danger  { background: var(--wn-danger-muted)  !important; color: var(--wn-danger)  !important; border-color: var(--wn-danger)  !important; }
.main-panel .alert-warning { background: var(--wn-warning-muted) !important; color: var(--wn-warning) !important; border-color: var(--wn-warning) !important; }
.main-panel .alert-info    { background: var(--wn-accent-muted)  !important; color: var(--wn-accent)  !important; border-color: var(--wn-accent)  !important; }

/* Modals */
.main-panel .modal-content,
.modal-content {
  background: var(--wn-bg-elevated) !important;
  border: 1px solid var(--wn-border) !important;
  border-radius: var(--wn-radius-xl) !important;
  color: var(--wn-text-primary) !important;
}
.main-panel .modal-header,
.modal-header {
  background: var(--wn-bg-elevated) !important;
  border-bottom: 1px solid var(--wn-border) !important;
  padding: var(--wn-sp-5) var(--wn-sp-6) !important;
}
.main-panel .modal-body,
.modal-body { padding: var(--wn-sp-6) !important; }
.main-panel .modal-footer,
.modal-footer {
  background: var(--wn-bg-elevated) !important;
  border-top: 1px solid var(--wn-border) !important;
  padding: var(--wn-sp-4) var(--wn-sp-6) !important;
}
.modal-title { font-weight: var(--wn-fw-semi) !important; }


/* ----------------------------------------------------------------
   15. STATS ROW — dashboard summary cards
   ---------------------------------------------------------------- */
.wn-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--wn-sp-5);
  margin-bottom: var(--wn-sp-6);
}

.wn-stat-card {
  background: var(--wn-bg-surface);
  border: 1px solid var(--wn-border);
  border-radius: var(--wn-radius-lg);
  padding: var(--wn-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--wn-sp-3);
  transition:
    border-color var(--wn-duration-base) var(--wn-ease),
    box-shadow   var(--wn-duration-base) var(--wn-ease);
  position: relative;
  overflow: hidden;
}
.wn-stat-card:hover {
  border-color: var(--wn-accent);
  box-shadow: var(--wn-shadow-glow-accent);
}
.wn-stat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wn-stat-card__amount {
  font-family: var(--wn-font-mono);
  font-size: var(--wn-text-xl);
  font-weight: var(--wn-fw-bold);
  color: var(--wn-text-primary);
  line-height: 1;
  margin: var(--wn-sp-1) 0;
}
.wn-stat-card__delta {
  font-size: var(--wn-text-xs);
  font-weight: var(--wn-fw-medium);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wn-stat-card__delta.up   { color: var(--wn-success); }
.wn-stat-card__delta.down { color: var(--wn-danger);  }

/* Decorative glow corner */
.wn-stat-card::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--wn-accent-muted);
  filter: blur(20px);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--wn-duration-slow) var(--wn-ease);
}
.wn-stat-card:hover::after { opacity: 1; }


/* ----------------------------------------------------------------
   16. PAGE HEADER — consistent page title + breadcrumb row
   ---------------------------------------------------------------- */
.wn-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wn-sp-4);
  margin-bottom: var(--wn-sp-6);
  padding-bottom: var(--wn-sp-5);
  border-bottom: 1px solid var(--wn-border-subtle);
}
.wn-page-header__title {
  font-size: var(--wn-text-xl);
  font-weight: var(--wn-fw-bold);
  color: var(--wn-text-primary);
  margin: 0;
  line-height: 1.2;
}
.wn-page-header__sub {
  font-size: var(--wn-text-sm);
  color: var(--wn-text-muted);
  margin-top: var(--wn-sp-1);
}
.wn-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--wn-sp-2);
  font-size: var(--wn-text-xs);
  color: var(--wn-text-muted);
}
.wn-breadcrumb a { color: var(--wn-text-muted); }
.wn-breadcrumb a:hover { color: var(--wn-accent); }
.wn-breadcrumb .sep { opacity: 0.4; }
.wn-breadcrumb .current { color: var(--wn-text-secondary); }


/* ----------------------------------------------------------------
   17. TRANSITIONS — smooth page content reveal
   ---------------------------------------------------------------- */
@keyframes wn-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.wn-animate {
  animation: wn-fade-up var(--wn-duration-slow) var(--wn-ease) both;
}
.wn-animate--d1 { animation-delay: 50ms;  }
.wn-animate--d2 { animation-delay: 100ms; }
.wn-animate--d3 { animation-delay: 150ms; }
.wn-animate--d4 { animation-delay: 200ms; }
.wn-animate--d5 { animation-delay: 280ms; }

/* Stagger items in a list */
.wn-stagger > * { animation: wn-fade-up var(--wn-duration-slow) var(--wn-ease) both; }
.wn-stagger > *:nth-child(1) { animation-delay: 30ms; }
.wn-stagger > *:nth-child(2) { animation-delay: 80ms; }
.wn-stagger > *:nth-child(3) { animation-delay: 130ms; }
.wn-stagger > *:nth-child(4) { animation-delay: 180ms; }
.wn-stagger > *:nth-child(5) { animation-delay: 230ms; }
.wn-stagger > *:nth-child(6) { animation-delay: 280ms; }


/* ----------------------------------------------------------------
   18. SCROLLBAR COSMETICS
   ---------------------------------------------------------------- */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--wn-bg-deep); }
::-webkit-scrollbar-thumb  { background: var(--wn-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--wn-text-muted); }


/* ----------------------------------------------------------------
   19. UTILITY HELPERS
   ---------------------------------------------------------------- */
.wn-flex         { display: flex; align-items: center; }
.wn-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wn-flex-end     { display: flex; align-items: center; justify-content: flex-end; }
.wn-flex-center  { display: flex; align-items: center; justify-content: center; }
.wn-flex-col     { display: flex; flex-direction: column; }
.wn-gap-1  { gap: var(--wn-sp-1); }
.wn-gap-2  { gap: var(--wn-sp-2); }
.wn-gap-3  { gap: var(--wn-sp-3); }
.wn-gap-4  { gap: var(--wn-sp-4); }
.wn-gap-5  { gap: var(--wn-sp-5); }
.wn-gap-6  { gap: var(--wn-sp-6); }

.wn-mt-0  { margin-top: 0 !important; }
.wn-mt-2  { margin-top: var(--wn-sp-2) !important; }
.wn-mt-4  { margin-top: var(--wn-sp-4) !important; }
.wn-mt-6  { margin-top: var(--wn-sp-6) !important; }
.wn-mb-0  { margin-bottom: 0 !important; }
.wn-mb-2  { margin-bottom: var(--wn-sp-2) !important; }
.wn-mb-4  { margin-bottom: var(--wn-sp-4) !important; }
.wn-mb-6  { margin-bottom: var(--wn-sp-6) !important; }

.wn-p-4   { padding: var(--wn-sp-4) !important; }
.wn-p-5   { padding: var(--wn-sp-5) !important; }
.wn-p-6   { padding: var(--wn-sp-6) !important; }

.wn-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn-no-wrap  { white-space: nowrap; }
.wn-w-full   { width: 100%; }
.wn-h-full   { height: 100%; }

/* Responsive display */
@media (max-width: 768px) {
  .wn-hide-mobile { display: none !important; }
  .main-panel .content-wrapper { padding: var(--wn-sp-4) !important; }
  .wn-stats-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .wn-stats-row { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   20. STABILIZATION ALIGNMENT LAYER
   ---------------------------------------------------------------- */
.main-header .logo-header,
.main-header .navbar-header {
  min-height: 64px;
}

.main-header .navbar-header {
  border-bottom: 1px solid var(--wn-border-subtle);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.sidebar .nav.nav-primary > .nav-item > a {
  border-radius: var(--wn-radius-md);
  margin: 2px 8px;
  transition: background var(--wn-duration-fast) var(--wn-ease), color var(--wn-duration-fast) var(--wn-ease);
}

.sidebar .nav.nav-primary > .nav-item > a:hover,
.sidebar .nav.nav-primary > .nav-item.active > a {
  background: var(--wn-accent-muted) !important;
  color: var(--wn-accent) !important;
}

.sidebar .nav.nav-primary > .nav-item.active > a i,
.sidebar .nav.nav-primary > .nav-item > a:hover i {
  color: var(--wn-accent) !important;
}

.main-panel .btn,
.main-header .btn,
.sidebar .btn {
  transition: transform var(--wn-duration-fast) var(--wn-ease), box-shadow var(--wn-duration-fast) var(--wn-ease), background var(--wn-duration-fast) var(--wn-ease);
}

.main-panel .btn:hover,
.main-header .btn:hover,
.sidebar .btn:hover {
  transform: translateY(-1px);
}

.main-panel .form-control.is-invalid,
.main-panel .was-validated .form-control:invalid {
  border-color: var(--wn-danger) !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 106, 0.16) !important;
}

.main-panel .form-control.is-valid,
.main-panel .was-validated .form-control:valid {
  border-color: var(--wn-success) !important;
  box-shadow: 0 0 0 2px rgba(0, 200, 150, 0.16) !important;
}

.crypto-ajax-loader,
.wn-route-loader {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ----------------------------------------------------------------
   21. GLOBAL CRUD CONSISTENCY + MOBILE CHUNK CONTROLS
   ---------------------------------------------------------------- */
.main-panel .card,
.main-content .card,
.page-inner .card,
.content .card,
.container-fluid .card {
  background: linear-gradient(180deg, rgba(20, 24, 32, 0.98), rgba(17, 22, 30, 0.98)) !important;
  border: 1px solid var(--wn-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
}

.main-panel .card-header,
.main-content .card-header,
.page-inner .card-header,
.content .card-header {
  background: rgba(28, 34, 48, 0.86) !important;
  border-bottom: 1px solid var(--wn-border-subtle) !important;
}

.main-panel .card-title,
.main-content .card-title,
.page-inner .card-title,
.content .card-title,
.main-panel .card h1,
.main-panel .card h2,
.main-panel .card h3,
.main-panel .card h4,
.main-panel .card h5,
.main-panel .card h6,
.main-content .card h1,
.main-content .card h2,
.main-content .card h3,
.main-content .card h4,
.main-content .card h5,
.main-content .card h6 {
  color: var(--wn-text-primary) !important;
}

.main-panel .card p,
.main-panel .card span,
.main-panel .card li,
.main-content .card p,
.main-content .card span,
.main-content .card li,
.page-inner .card p,
.page-inner .card span,
.page-inner .card li {
  color: var(--wn-text-secondary) !important;
}

.main-panel .card .text-muted,
.main-content .card .text-muted,
.page-inner .card .text-muted,
.content .card .text-muted {
  color: var(--wn-text-muted) !important;
}

.main-panel form .form-control,
.main-panel form .custom-select,
.main-panel form .form-select,
.main-content form .form-control,
.main-content form .custom-select,
.main-content form .form-select,
.page-inner form .form-control,
.page-inner form .custom-select,
.page-inner form .form-select {
  background: #161d29 !important;
  color: var(--wn-text-primary) !important;
  border: 1px solid #2a3448 !important;
  border-radius: 10px !important;
}

.main-panel form .form-control:focus,
.main-panel form .custom-select:focus,
.main-panel form .form-select:focus,
.main-content form .form-control:focus,
.main-content form .custom-select:focus,
.main-content form .form-select:focus,
.page-inner form .form-control:focus,
.page-inner form .custom-select:focus,
.page-inner form .form-select:focus {
  border-color: var(--wn-accent) !important;
  box-shadow: 0 0 0 3px rgba(30, 179, 255, 0.16) !important;
}

.main-panel .btn,
.main-content .btn,
.page-inner .btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

.main-panel .btn-primary,
.main-content .btn-primary,
.page-inner .btn-primary {
  background: linear-gradient(135deg, #118ad6, #1eb3ff) !important;
  border-color: #1eb3ff !important;
  color: #061421 !important;
}

.main-panel .btn-primary:hover,
.main-content .btn-primary:hover,
.page-inner .btn-primary:hover {
  background: linear-gradient(135deg, #22a6f4, #43c8ff) !important;
  border-color: #43c8ff !important;
}

.main-panel .btn-danger,
.main-content .btn-danger,
.page-inner .btn-danger {
  background: linear-gradient(135deg, #d63f59, #ff4d6a) !important;
  border-color: #ff4d6a !important;
}

.main-panel .table,
.main-content .table,
.page-inner .table {
  background: transparent !important;
}

.main-panel .table thead th,
.main-content .table thead th,
.page-inner .table thead th {
  color: #cfe0f7 !important;
  border-bottom: 1px solid #2a3448 !important;
}

.main-panel .table td,
.main-panel .table th,
.main-content .table td,
.main-content .table th,
.page-inner .table td,
.page-inner .table th {
  color: #e8f2ff !important;
  border-top: 1px solid #202a3b !important;
}

.main-panel .table a:not(.btn),
.main-content .table a:not(.btn),
.page-inner .table a:not(.btn) {
  color: #5ec8ff;
}

.main-panel .table .fa-trash,
.main-content .table .fa-trash,
.page-inner .table .fa-trash,
.main-panel .table .fa-trash-alt,
.main-content .table .fa-trash-alt,
.page-inner .table .fa-trash-alt {
  color: #ff657d !important;
}

.wn-mobile-chunk-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px 4px;
}

.wn-mobile-chunk-controls .wn-mobile-chunk-meta {
  color: var(--wn-text-muted) !important;
  font-size: 0.78rem;
}

@media (max-width: 767.98px) {
  .wn-mobile-chunk-hidden {
    display: none !important;
  }

  .wn-mobile-chunk-controls {
    padding-left: 2px;
    padding-right: 2px;
  }

  .wn-mobile-chunk-controls .btn {
    padding: 0.35rem 0.72rem;
  }
}