/* =====================================================================
   TEBA Agent Portal — Mockup Skin (Option C: Hybrid Re-skin)
   Loads AFTER assets/css/teba-agent-portal.css (v2.4.0) and overrides
   only color tokens, fonts, and a few high-impact visual details to
   match the Claude Design "TEBA Agent Portal" mockup. All layout,
   grid structure, and responsive breakpoints from the plugin's own
   stylesheet are left intact.

   Enqueue in the theme AFTER the plugin stylesheet:
     wp_enqueue_style('teba-agent-portal'); // plugin, runs first
     wp_enqueue_style('teba-agent-portal-mockup-skin',
       get_theme_file_uri('assets/css/teba-agent-portal-mockup-skin.css'),
       array('teba-agent-portal'), THEME_VERSION);
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fonts — match the mockup's type system
   --------------------------------------------------------------------- */
/* Enqueue separately in functions.php:
   https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Archivo+Expanded:wght@800;900&family=IBM+Plex+Mono:wght@500;600;700&display=swap
*/

/* ---------------------------------------------------------------------
   2. Token re-map — plugin vars -> mockup palette
   The plugin defines these on .teba-agent-portal. We override the same
   custom properties so every rule that already consumes them (cards,
   buttons, badges, progress, tables, locked messages, etc.) repaints
   automatically with zero structural changes.
   --------------------------------------------------------------------- */
.teba-agent-portal {
  /* base palette -> TEBA red/gold/dark-navy system */
  --teba-bg:        #0E1218;  /* was #0b1220 */
  --teba-card:      #151B23;  /* was #121b2d  (== --ap-surface) */
  --teba-border:    #232B36;  /* was #243249  (== --ap-border) */
  --teba-text:      #EDEFF2;  /* was #eef4ff  (== --ap-ink) */
  --teba-muted:     #AEB6C2;  /* was #93a4bd  (== --ap-ink-2) */
  --teba-accent:    #E0C36A;  /* was #d4af37  (== --ap-gold) */
  --teba-blue:      #5B9AEF;  /* was #2f80ed  (close to mockup's "in progress" blue) */

  /* v2.2.0 additions */
  --teba-success:   #2ECC8A;  /* was #1ca05a  (== --ap-green) */
  --teba-warning:   #E8A84A;  /* was #d4af37  (mockup's "pending" amber) */
  --teba-danger:    #E05555;  /* was #eb5757  (== mockup danger) */
  --teba-surface:   #1C242E;  /* was #0f1a2c  (== --ap-surface-2) */
  --teba-surface-2: #1C242E;  /* was #101d33 */

  /* New tokens consumed only by this skin (not in plugin CSS) */
  --ap-accent2: #D62246;      /* mockup's true primary red, used for CTAs/links */

  font-family: 'Archivo', system-ui, sans-serif; /* was Inter */
  background: var(--teba-bg);
}

.teba-agent-portal a {
  color: var(--ap-accent2);
}

/* ---------------------------------------------------------------------
   3. Squared-off corners — mockup uses 0 border-radius throughout.
   Plugin uses 18px/14px/12px/999px radii. We zero these out on the
   primary surfaces while leaving the plugin's spacing/grid untouched.
   --------------------------------------------------------------------- */
.teba-agent-portal .teba-agent-hero,
.teba-agent-portal .teba-agent-card,
.teba-agent-portal .teba-agent-form input,
.teba-agent-portal .teba-agent-form textarea,
.teba-agent-portal .teba-agent-form select,
.teba-agent-portal .teba-agent-button,
.teba-agent-portal .teba-agent-locked-message,
.teba-agent-portal .teba-agent-note,
.teba-agent-portal .teba-agent-notice,
.teba-agent-portal .teba-agent-renewal-alert,
.teba-agent-portal .teba-agent-table,
.teba-agent-portal .teba-agent-progress li,
.teba-agent-portal .teba-agent-exam-question,
.teba-agent-portal .teba-agent-license-card {
  border-radius: 0;
}

.teba-agent-portal .teba-agent-status-badge {
  border-radius: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .1em;
}

/* Drop the soft drop-shadows the plugin uses — mockup is flat/square */
.teba-agent-portal .teba-agent-hero,
.teba-agent-portal .teba-agent-card,
.teba-agent-portal .teba-agent-card:hover {
  box-shadow: none;
  background: var(--teba-card);
}

/* ---------------------------------------------------------------------
   4. Headings — Archivo Expanded, 900 weight, uppercase, tight tracking
   (mockup's --ap-display treatment)
   --------------------------------------------------------------------- */
.teba-agent-portal h1,
.teba-agent-portal h2,
.teba-agent-portal h3,
.teba-agent-portal .teba-agent-license-card h3 {
  font-family: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   5. Labels / mono elements — IBM Plex Mono, uppercase, wide tracking
   (mockup's --ap-mono treatment for card labels, table headers, status text)
   --------------------------------------------------------------------- */
.teba-agent-portal .teba-agent-card-label,
.teba-agent-portal .teba-agent-table th,
.teba-agent-portal .teba-agent-muted {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   6. Buttons — primary action uses TEBA red, square, mono uppercase
   --------------------------------------------------------------------- */
.teba-agent-portal .teba-agent-button {
  background: var(--ap-accent2);
  color: #fff;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: none;
}
.teba-agent-portal .teba-agent-button:hover,
.teba-agent-portal .teba-agent-button:focus {
  filter: brightness(1.12);
  transform: none; /* mockup buttons don't lift on hover */
  color: #fff;
}

/* ---------------------------------------------------------------------
   7. Progress tracker — keep plugin's counter-circle structure, recolor
   to mockup's green(done)/amber(active)/mute(upcoming) scheme
   --------------------------------------------------------------------- */
.teba-agent-portal .teba-agent-progress li {
  background: rgba(255,255,255,.02);
  border-color: var(--teba-border);
}
.teba-agent-portal .teba-agent-progress li:before {
  background: var(--teba-surface-2);
  color: var(--teba-muted);
  border-radius: 50%; /* keep circular step indicators — mockup also uses circles here */
}
.teba-agent-portal .teba-agent-progress li.is-complete {
  background: rgba(46,204,138,.06);
  border-color: rgba(46,204,138,.25);
}
.teba-agent-portal .teba-agent-progress li.is-complete:before {
  background: var(--teba-success);
}

/* ---------------------------------------------------------------------
   8. Locked / note / renewal banners — square, left accent bar (mockup
   uses full-tint backgrounds with thin borders, not inset shadows)
   --------------------------------------------------------------------- */
.teba-agent-portal .teba-agent-locked-message {
  background: rgba(224,85,85,.08);
  border: 1px solid rgba(224,85,85,.25);
  box-shadow: none;
  color: var(--teba-text);
}
.teba-agent-portal .teba-agent-note,
.teba-agent-portal .teba-agent-notice {
  background: rgba(91,154,239,.08);
  border: 1px solid rgba(91,154,239,.25);
  box-shadow: none;
  color: var(--teba-text);
}
.teba-agent-portal .teba-agent-renewal-alert {
  background: rgba(232,168,74,.08);
  border: 1px solid rgba(232,168,74,.25);
  box-shadow: none;
  color: var(--teba-text);
}

/* ---------------------------------------------------------------------
   9. License card — remove the giant translucent "TEBA" watermark glyph
   (mockup uses the real logo + court photo background instead)
   --------------------------------------------------------------------- */
.teba-agent-portal .teba-agent-license-card:after {
  content: none;
}
.teba-agent-portal .teba-agent-license-card {
  background: var(--ap-sidebar, #0A0E13);
  border: 1px solid var(--teba-border);
}

/* ---------------------------------------------------------------------
   10. Status badge color corrections — align plugin's pill states to
   the mockup's exact AP_STATUS_COLORS map (see conversion plan §3).
   Plugin already groups most of these correctly; we only correct hues
   that diverge (plugin uses solid fills for some "table" badges).
   --------------------------------------------------------------------- */
.teba-agent-status-active,
.teba-agent-status-current,
.teba-agent-status-passed,
.teba-agent-status-approved,
.teba-agent-status-enabled,
.teba-agent-status-sent_to_draft_manager {
  background: rgba(46,204,138,.12) !important;
  color: var(--teba-success) !important;
  border: 1px solid rgba(46,204,138,.28);
}
.teba-agent-status-pending,
.teba-agent-status-submitted,
.teba-agent-status-not_started,
.teba-agent-status-pending_review,
.teba-agent-status-needs_changes,
.teba-agent-status-renewal_due {
  background: rgba(232,168,74,.12) !important;
  color: var(--teba-warning) !important;
  border: 1px solid rgba(232,168,74,.28);
}
.teba-agent-status-expired,
.teba-agent-status-revoked,
.teba-agent-status-suspended,
.teba-agent-status-failed,
.teba-agent-status-locked,
.teba-agent-status-not_current,
.teba-agent-status-rejected,
.teba-agent-status-api_failed {
  background: rgba(224,85,85,.12) !important;
  color: var(--teba-danger) !important;
  border: 1px solid rgba(224,85,85,.28);
}
.teba-agent-status-waitlisted,
.teba-agent-status-not_submitted {
  background: rgba(122,132,148,.12) !important;
  color: #9AA3B5 !important;
  border: 1px solid rgba(122,132,148,.28);
}
.teba-agent-status-approved_to_test {
  background: rgba(91,154,239,.12) !important;
  color: var(--teba-blue) !important;
  border: 1px solid rgba(91,154,239,.28);
}

/* ---------------------------------------------------------------------
   11. Public landing hero — drop the gold/blue radial glow, use the
   mockup's red glow + dotted texture instead (texture image optional)
   --------------------------------------------------------------------- */
.teba-agent-public .teba-agent-hero:before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(214,34,70,.18) 0%, transparent 70%);
}

/* ---------------------------------------------------------------------
   12. Mobile — plugin's existing breakpoints (640/800/900px) are kept
   as-is; only re-affirming square corners survive into mobile sizes.
   --------------------------------------------------------------------- */
@media (max-width: 800px) {
  .teba-agent-portal .teba-agent-hero,
  .teba-agent-portal .teba-agent-card {
    border-radius: 0;
  }
}