/* =====================================================================
   TEBA Agent Portal Theme — Design Tokens
   Ported verbatim from the Claude Design mockup (TEBA Agent Portal.html)
   ===================================================================== */

:root {
  --ap-accent: #D62246;
  --ap-gold:   #E0C36A;
  --ap-green:  #2ECC8A;
  --ap-blue:   #5B9AEF;
  --ap-amber:  #E8A84A;
  --ap-red:    #E05555;

  --ap-bg:        #0E1218;
  --ap-sidebar:   #0A0E13;
  --ap-surface:   #151B23;
  --ap-surface-2: #1C242E;

  --ap-border:   #232B36;
  --ap-border-2: #303A47;

  --ap-ink:   #EDEFF2;
  --ap-ink-2: #AEB6C2;
  --ap-mute:  #6B7585;

  --ap-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif;
  --ap-ui:      'Archivo', system-ui, sans-serif;
  --ap-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --ap-sidebar-width: 230px;
  --ap-topbar-height: 56px;
  --ap-content-max: 1160px;
}

body {
  background: var(--ap-bg);
  color: var(--ap-ink);
  font-family: var(--ap-ui);
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   Low-risk resets. Keep these intentionally surgical: previous builds used
   a global list reset (`ul, ol { list-style:none }`), which fixed raw
   wp_nav_menu() bullets but could also remove bullets from shortcode and
   WPBakery content. Lists are now reset only in theme navigation/footer
   containers below.
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; display: block; }

.ap-public-nav a,
.ap-public-footer a,
.ap-sidebar a,
.ap-topbar a,
.ap-login a,
.ap-btn {
  color: inherit;
  text-decoration: none;
}

.ap-public-nav a:hover,
.ap-public-footer a:hover,
.ap-sidebar a:hover,
.ap-topbar a:hover,
.ap-login a:hover {
  color: var(--ap-ink);
}

.ap-public-nav ul,
.ap-public-footer ul,
.ap-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }

/* Logo — every template uses the_custom_logo() or a fallback <img>
   inside these containers; constrain it everywhere */
.ap-public-nav__brand img,
.ap-public-footer__brand img,
.ap-sidebar__logo img,
.ap-login__brand-top img,
.custom-logo {
  height: 36px;
  width: auto;
  max-width: none;
}


button { font-family: var(--ap-ui); }
button:hover { filter: brightness(1.12); }
button:active { transform: translateY(1px); }
input, select, textarea { font-family: var(--ap-ui); }
::selection { background: var(--ap-accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ap-sidebar); }
::-webkit-scrollbar-thumb { background: var(--ap-border-2); border: 2px solid var(--ap-sidebar); }
::-webkit-scrollbar-thumb:hover { background: var(--ap-mute); }

@keyframes apPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes apFade  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ap-fade-in { opacity: 1; }

select option { background: var(--ap-surface-2); color: var(--ap-ink); }

/* ---------------------------------------------------------------------
   Shared primitives (ported from agent-portal-primitives.jsx)
   --------------------------------------------------------------------- */

/* Kicker */
.ap-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ap-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ap-accent);
}
.ap-kicker::before { content: ''; width: 14px; height: 2px; background: currentColor; display: inline-block; }
.ap-kicker--gold { color: var(--ap-gold); }

/* Card */
.ap-card {
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
}

/* Buttons */
.ap-btn {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ap-mono); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: none; outline: none; transition: filter .12s, transform .08s, opacity .1s;
}
.ap-btn:disabled { opacity: .5; cursor: not-allowed; }
.ap-btn--full { width: 100%; }
.ap-btn--primary   { background: var(--ap-accent); color: #fff; }
.ap-btn--secondary { background: var(--ap-surface-2); color: var(--ap-ink); border: 1px solid var(--ap-border-2); }
.ap-btn--ghost     { background: transparent; color: var(--ap-ink-2); border: 1px solid var(--ap-border); }
.ap-btn--gold      { background: rgba(224,195,106,.12); color: var(--ap-gold); border: 1px solid rgba(224,195,106,.3); }
.ap-btn--danger    { background: rgba(224,85,85,.1); color: var(--ap-red); border: 1px solid rgba(224,85,85,.3); }
.ap-btn--green     { background: rgba(46,204,138,.12); color: var(--ap-green); border: 1px solid rgba(46,204,138,.3); }
.ap-btn--lg { font-size: 13px;   padding: 13px 24px; }
.ap-btn--md { font-size: 11.5px; padding: 10px 18px; }
.ap-btn--sm { font-size: 10.5px; padding: 7px 13px; }

/* Status badges — full 18-state map from AP_STATUS_COLORS */
.ap-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ap-mono); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.ap-badge--sm { font-size: 10.5px; padding: 3px 9px; }
.ap-badge--md { font-size: 11px;   padding: 3px 9px; }
.ap-badge--lg { font-size: 12px;   padding: 5px 12px; }
.ap-badge__dot { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 5px; background: currentColor; }

.ap-badge--active, .ap-badge--approved, .ap-badge--current, .ap-badge--online,
.ap-badge--passed, .ap-badge--sent-to-draft-manager {
  background: rgba(46,204,138,.12); border: 1px solid rgba(46,204,138,.28); color: var(--ap-green);
}
.ap-badge--pending, .ap-badge--needs-changes {
  background: rgba(232,168,74,.12); border: 1px solid rgba(232,168,74,.28); color: var(--ap-amber);
}
.ap-badge--expired, .ap-badge--not-submitted, .ap-badge--locked,
.ap-badge--draft, .ap-badge--not-started {
  background: rgba(122,132,148,.12); border: 1px solid rgba(122,132,148,.28); color: #9AA3B5;
}
.ap-badge--suspended {
  background: rgba(232,149,110,.12); border: 1px solid rgba(232,149,110,.28); color: #E8956E;
}
.ap-badge--revoked, .ap-badge--not-current, .ap-badge--rejected,
.ap-badge--failed, .ap-badge--api-failed, .ap-badge--offline {
  background: rgba(224,85,85,.12); border: 1px solid rgba(224,85,85,.28); color: var(--ap-red);
}
.ap-badge--submitted, .ap-badge--in-progress {
  background: rgba(91,154,239,.12); border: 1px solid rgba(91,154,239,.28); color: var(--ap-blue);
}

/* Tables */
.ap-table { width: 100%; border-collapse: collapse; font-family: var(--ap-ui); font-size: 13.5px; }
.ap-table th {
  padding: 10px 14px; text-align: left; font-family: var(--ap-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ap-mute);
  border-bottom: 1px solid var(--ap-border); white-space: nowrap; background: var(--ap-surface-2);
}
.ap-table td { padding: 12px 14px; color: var(--ap-ink); vertical-align: middle; border-bottom: 1px solid var(--ap-border); }
.ap-table tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.ap-table .ap-table__empty { padding: 32px; text-align: center; color: var(--ap-mute); font-size: 14px; }

/* Form fields */
.ap-field { display: flex; flex-direction: column; gap: 6px; }
.ap-field--span2 { grid-column: span 2; }
.ap-field label, .ap-select label, .ap-textarea label {
  font-family: var(--ap-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ap-ink-2);
}
.ap-required { color: var(--ap-accent); margin-left: 4px; }
.ap-field input, .ap-select select, .ap-textarea textarea {
  background: var(--ap-surface-2); border: 1px solid var(--ap-border-2); color: var(--ap-ink);
  font-family: var(--ap-ui); font-size: 14px; padding: 10px 13px; outline: none; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.ap-field input:focus, .ap-select select:focus, .ap-textarea textarea:focus {
  border-color: var(--ap-accent); box-shadow: 0 0 0 3px rgba(214,34,70,.1);
}
.ap-field input[disabled] { background: rgba(255,255,255,.03); color: var(--ap-mute); }
.ap-hint { font-size: 11.5px; color: var(--ap-mute); line-height: 1.4; }
.ap-error { font-family: var(--ap-mono); font-size: 10.5px; font-weight: 700; color: var(--ap-red); letter-spacing: .06em; }

/* Form section */
.ap-form-section { display: flex; flex-direction: column; gap: 18px; }
.ap-form-section__head { padding-bottom: 12px; border-bottom: 1px solid var(--ap-border); }
.ap-form-section__head h3 {
  font-family: var(--ap-display); font-size: 16px; font-weight: 900; color: var(--ap-ink);
  letter-spacing: -.01em; text-transform: uppercase; margin: 0;
}
.ap-form-section__head p { margin: 5px 0 0; font-size: 13px; color: var(--ap-ink-2); line-height: 1.5; }
.ap-form-section__grid { display: grid; gap: 16px; }
.ap-form-section__grid--cols-1 { grid-template-columns: 1fr; }
.ap-form-section__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ap-form-section__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Page header */
.ap-page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px;
}
.ap-page-header h1 {
  font-family: var(--ap-display); font-size: 28px; font-weight: 900; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--ap-ink); margin: 0; line-height: 1;
}
.ap-page-header__subtitle { margin: 8px 0 0; font-size: 14px; color: var(--ap-ink-2); line-height: 1.5; }
.ap-page-header__action { flex: 0 0 auto; padding-top: 4px; }

/* Progress tracker */
.ap-progress { display: flex; flex-direction: column; }
.ap-progress__step { display: flex; gap: 12px; align-items: flex-start; }
.ap-progress__node {
  display: flex; flex-direction: column; align-items: center; width: 22px; flex: 0 0 22px;
}
.ap-progress__circle {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 22px;
  border: 2px solid var(--ap-mute); background: var(--ap-surface-2);
  font-family: var(--ap-mono); font-size: 9px; font-weight: 800; color: var(--ap-mute);
}
.ap-progress__step--done .ap-progress__circle { background: var(--ap-green); border-color: var(--ap-green); color: #000; }
.ap-progress__step--active .ap-progress__circle { background: rgba(232,168,74,.15); border-color: var(--ap-amber); color: var(--ap-amber); }
.ap-progress__line { width: 2px; flex: 1; min-height: 16px; background: var(--ap-border); margin: 2px 0; }
.ap-progress__step--done .ap-progress__line { background: rgba(46,204,138,.25); }
.ap-progress__body { padding-bottom: 14px; padding-top: 2px; }
.ap-progress__title {
  font-family: var(--ap-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ap-mute);
}
.ap-progress__step--done .ap-progress__title { color: var(--ap-green); }
.ap-progress__step--active .ap-progress__title { color: var(--ap-amber); }
.ap-progress__desc { font-size: 12px; color: var(--ap-mute); margin-top: 2px; line-height: 1.4; }

/* Locked message */
.ap-locked {
  background: rgba(122,132,148,.06); border: 1px solid var(--ap-border-2);
  padding: 24px 28px; display: flex; flex-direction: column; gap: 16px;
}
.ap-locked__head { display: flex; align-items: center; gap: 16px; }
.ap-locked__icon {
  width: 46px; height: 46px; background: var(--ap-surface-2); border: 1px solid var(--ap-border-2);
  display: grid; place-items: center; flex: 0 0 46px; color: var(--ap-mute);
}
.ap-locked__title {
  font-family: var(--ap-display); font-size: 16px; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.01em; color: var(--ap-ink-2);
}
.ap-locked__sub { font-size: 13px; color: var(--ap-mute); margin-top: 3px; }
.ap-locked__reasons { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ap-locked__reason { display: flex; align-items: center; gap: 10px; }
.ap-locked__reason::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ap-red); flex: 0 0 5px; }
.ap-locked__reason span { font-size: 13.5px; color: var(--ap-ink-2); }

/* Stat card */
.ap-stat { padding: 20px 22px; }
.ap-stat__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.ap-stat__icon {
  width: 36px; height: 36px; background: var(--ap-surface-2); border: 1px solid var(--ap-border);
  display: grid; place-items: center; color: var(--ap-mute);
}
.ap-stat__value { font-family: var(--ap-display); font-size: 22px; font-weight: 900; letter-spacing: -.02em; color: var(--ap-ink); line-height: 1; }
.ap-stat__label {
  font-family: var(--ap-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ap-mute); margin-top: 6px;
}
.ap-stat__sub { font-size: 12px; color: var(--ap-ink-2); margin-top: 4px; line-height: 1.4; }

/* Alert banners */
.ap-alert { padding: 14px 18px; margin-bottom: 28px; display: flex; align-items: flex-start; gap: 12px; }
.ap-alert--amber { background: rgba(232,168,74,.08); border: 1px solid rgba(232,168,74,.25); }
.ap-alert--red   { background: rgba(224,85,85,.08);  border: 1px solid rgba(224,85,85,.25); }
.ap-alert--blue  { background: rgba(91,154,239,.08); border: 1px solid rgba(91,154,239,.25); }
.ap-alert p { font-size: 13.5px; color: var(--ap-ink-2); margin: 0; line-height: 1.5; }
.ap-alert--amber .ap-alert__icon { color: var(--ap-amber); }
.ap-alert--red .ap-alert__icon { color: var(--ap-red); }
.ap-alert--blue .ap-alert__icon { color: var(--ap-blue); }

/* Divider */
.ap-divider { display: flex; align-items: center; gap: 14px; }
.ap-divider::before, .ap-divider::after { content: ''; flex: 1; height: 1px; background: var(--ap-border); }
.ap-divider__label {
  font-family: var(--ap-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ap-mute);
}

@media (max-width: 768px) {
  .ap-form-section__grid--cols-2,
  .ap-form-section__grid--cols-3 { grid-template-columns: 1fr; }
}