/* ═══════════════════════════════════════════════════════════════
   AOPS Dashboard v2.0.0 — Login + Founder Dashboard CSS
   Design: Linear · Attio CRM · Stripe Dashboard · Modern SaaS
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --ad-bg:          #f4f5fb;
  --ad-surface:     #ffffff;
  --ad-surface-2:   #f8f9fd;
  --ad-border:      #e4e8f0;
  --ad-border-soft: #edf0f7;
  --ad-text-1:      #111827;
  --ad-text-2:      #374151;
  --ad-text-3:      #6b7280;
  --ad-text-4:      #9ca3af;

  --ad-purple:      #6c56f0;
  --ad-purple-d:    #5a45de;
  --ad-purple-l:    #f0edff;
  --ad-blue:        #2563eb;
  --ad-blue-l:      #eff6ff;
  --ad-green:       #10b981;
  --ad-green-l:     #ecfdf5;
  --ad-amber:       #f59e0b;
  --ad-amber-l:     #fff7ed;
  --ad-red:         #ef4444;
  --ad-red-l:       #fef2f2;
  --ad-teal:        #14b8a6;
  --ad-teal-l:      #f0fffe;

  --ad-radius-sm:   8px;
  --ad-radius:      12px;
  --ad-radius-lg:   16px;
  --ad-radius-xl:   20px;

  --ad-shadow-sm:   0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --ad-shadow:      0 4px 16px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --ad-shadow-lg:   0 8px 32px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);

  --ad-transition:  all .18s cubic-bezier(.4,0,.2,1);
  --ad-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Full-screen reset for blank template ────────────────────── */
body.aops-blank-page {
  margin: 0 !important;
  padding: 0 !important;
  background: #f4f5fb !important;
  min-height: 100vh;
}
/* Hide WP admin bar entirely on our pages for all users for true full-screen */
body.aops-blank-page #wpadminbar {
  display: none !important;
}
/* Reset html top offset WP sets for admin bar */
html.wp-toolbar { padding-top: 0 !important; }
body.aops-blank-page #aops-login-root,
body.aops-blank-page #aops-dash-root {
  min-height: 100vh;
}
/* Kill any leftover theme wrapper padding/margins */
body.aops-blank-page .site-content,
body.aops-blank-page .site,
body.aops-blank-page #page,
body.aops-blank-page #content,
body.aops-blank-page #main,
body.aops-blank-page .entry-content,
body.aops-blank-page article {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* ══════════════════════════════════════════════════════════════
   LOGIN PAGE
══════════════════════════════════════════════════════════════ */

#aops-login-root {
  font-family: var(--ad-font);
  min-height: 100vh;
  background: #0a0a14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Animated background orbs */
.aops-login-bg { position: absolute; inset: 0; pointer-events: none; }

.aops-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .15;
  animation: aops-orb-pulse 7s ease-in-out infinite alternate;
}
.aops-orb-1 { width: 420px; height: 420px; background: #6c56f0; top: -100px; left: -80px; animation-delay: 0s; }
.aops-orb-2 { width: 320px; height: 320px; background: #3b82f6; bottom: -80px; right: -60px; animation-delay: 2.5s; }
.aops-orb-3 { width: 220px; height: 220px; background: #8b5cf6; top: 55%; left: 50%; transform: translate(-50%,-50%); animation-delay: 1.2s; }

@keyframes aops-orb-pulse {
  from { opacity: .10; transform: scale(1); }
  to   { opacity: .20; transform: scale(1.08); }
}
.aops-orb-3 { animation-name: aops-orb3-pulse; }
@keyframes aops-orb3-pulse {
  from { opacity: .10; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: .20; transform: translate(-50%,-50%) scale(1.08); }
}

.aops-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(108,86,240,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108,86,240,.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Brand row */
.aops-login-brand-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px; z-index: 2;
  animation: aops-fade-down .6s ease both;
}
.aops-login-triangle {
  width: 0; height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 19px solid #6c56f0;
  filter: drop-shadow(0 0 8px rgba(108,86,240,.8));
}
.aops-login-brand-name {
  font-size: 21px; font-weight: 600; letter-spacing: 3px;
  color: #e8e8f4; text-transform: uppercase;
  text-shadow: 0 0 20px rgba(108,86,240,.4);
}

@keyframes aops-fade-down {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Login card */
.aops-login-card {
  width: 100%; max-width: 420px; z-index: 2;
  background: rgba(14,14,28,.88);
  border: 1px solid rgba(108,86,240,.22);
  border-radius: var(--ad-radius-xl);
  padding: 36px 36px 30px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(108,86,240,.08), 0 24px 60px rgba(0,0,0,.55);
  animation: aops-fade-up .7s ease .15s both;
}
@keyframes aops-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Status badge */
.aops-login-status-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(108,86,240,.14); border: 1px solid rgba(108,86,240,.28);
  border-radius: 100px; padding: 4px 13px; margin-bottom: 18px;
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  color: #9c8ef0; text-transform: uppercase;
}
.aops-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6c56f0; box-shadow: 0 0 6px #6c56f0;
  animation: aops-blink 2s ease-in-out infinite;
}
@keyframes aops-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.aops-login-title { font-size: 21px; font-weight: 600; color: #f0f0fa; margin-bottom: 5px; }
.aops-login-sub   { font-size: 13px; color: rgba(200,200,220,.5); margin-bottom: 24px; }

/* Alerts */
.aops-login-alert {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 13px; border-radius: 10px;
  font-size: 12px; margin-bottom: 16px; line-height: 1.4;
}
.aops-alert-error { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.aops-alert-ok    { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); }

/* Form */
.aops-login-form  { display: flex; flex-direction: column; gap: 16px; }
.aops-login-field { display: flex; flex-direction: column; gap: 6px; }
.aops-login-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  color: rgba(200,200,220,.5); text-transform: uppercase;
}
.aops-login-input-wrap { position: relative; }
.aops-input-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: rgba(140,140,180,.45); pointer-events: none;
}
.aops-login-input {
  width: 100%; height: 44px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(108,86,240,.18);
  border-radius: 10px;
  padding: 0 42px;
  font-size: 14px; color: #e0e0f0; font-family: var(--ad-font);
  outline: none; transition: var(--ad-transition);
}
.aops-login-input::placeholder { color: rgba(160,160,200,.32); }
.aops-login-input:focus {
  border-color: rgba(108,86,240,.55);
  background: rgba(108,86,240,.06);
  box-shadow: 0 0 0 3px rgba(108,86,240,.12);
}

.aops-eye-btn {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: rgba(140,140,180,.4); padding: 0; transition: color .2s;
}
.aops-eye-btn:hover { color: rgba(140,140,180,.8); }

/* Aux row */
.aops-login-row-aux {
  display: flex; align-items: center; justify-content: space-between;
}
.aops-login-remember {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; color: rgba(180,180,210,.55);
}
.aops-login-remember input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: #6c56f0; cursor: pointer;
}
.aops-login-forgot { font-size: 12px; color: #8b82d0; text-decoration: none; transition: color .2s; }
.aops-login-forgot:hover { color: #a99af0; }

/* Submit button */
.aops-login-btn {
  width: 100%; height: 46px;
  border: none; border-radius: 12px;
  background: linear-gradient(135deg, #6c56f0 0%, #8b5cf6 50%, #6c56f0 100%);
  background-size: 200% 200%;
  font-size: 14px; font-weight: 600; color: #fff;
  cursor: pointer; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ad-font);
  transition: transform .18s, box-shadow .18s;
  animation: aops-gradient-shift 4s ease infinite;
}
@keyframes aops-gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.aops-login-btn:hover  { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(108,86,240,.45); }
.aops-login-btn:active { transform: translateY(0) scale(.99); }
.aops-login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.aops-btn-shimmer {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  animation: aops-shimmer 3s infinite linear;
}
@keyframes aops-shimmer { to { left: 160%; } }

/* Footer */
.aops-login-footer {
  display: flex; align-items: center; gap: 5px; justify-content: center;
  margin-top: 18px; font-size: 10px; color: rgba(160,160,200,.32); line-height: 1.5;
}
.aops-login-site-label {
  margin-top: 20px; font-size: 11px; color: rgba(160,160,200,.22); z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════════ */

#aops-dash-root {
  font-family: var(--ad-font);
  background: var(--ad-bg);
  min-height: 100vh;
  color: var(--ad-text-1);
  -webkit-font-smoothing: antialiased;
  width: 100%;
}

/* ── Top Bar ─────────────────────────────────────────────────── */
.aops-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: var(--ad-surface);
  border-bottom: 1px solid var(--ad-border);
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  /* Prevent theme styles from collapsing it */
  min-height: 56px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.aops-topbar-left { flex-shrink: 0; }
.aops-topbar-logo  { display: flex; align-items: center; gap: 8px; }
.aops-logo-tri {
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid var(--ad-purple);
}
.aops-logo-text    { font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--ad-text-1); }
.aops-logo-divider { color: var(--ad-border); font-weight: 300; }
.aops-logo-sub     { font-size: 12px; color: var(--ad-text-4); }

.aops-topbar-center { flex: 1; display: flex; justify-content: center; }
.aops-topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--ad-bg); border: 1px solid var(--ad-border);
  border-radius: 8px; padding: 0 14px; height: 34px; max-width: 340px; width: 100%;
  font-size: 12px; color: var(--ad-text-4); cursor: text;
}

.aops-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.aops-date-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px; background: var(--ad-surface);
  border: 1px solid var(--ad-border); border-radius: 8px;
  font-size: 11px; font-weight: 500; color: var(--ad-text-2);
  white-space: nowrap;
}

.aops-notif-btn {
  position: relative; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ad-surface); border: 1px solid var(--ad-border);
  border-radius: 8px; cursor: pointer; color: var(--ad-text-3);
  transition: var(--ad-transition);
}
.aops-notif-btn:hover { background: var(--ad-bg); }
.aops-notif-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; border-radius: 8px;
  background: #ef4444; color: #fff; font-size: 9px;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--ad-surface);
}

.aops-topbar-user { display: flex; align-items: center; gap: 8px; }
.aops-user-avatar { border-radius: 50%; border: 2px solid var(--ad-border); }
.aops-user-name   { display: block; font-size: 12px; font-weight: 600; color: var(--ad-text-1); white-space: nowrap; }
.aops-user-role   { display: block; font-size: 10px; color: var(--ad-text-4); }
.aops-logout-btn  {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  color: var(--ad-text-4); text-decoration: none;
  border: 1px solid var(--ad-border); transition: var(--ad-transition);
}
.aops-logout-btn:hover { background: var(--ad-bg); color: var(--ad-text-2); }

.aops-quick-add {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 13px; background: var(--ad-purple);
  border: none; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.aops-quick-add:hover { background: var(--ad-purple-d); color: #fff; }

/* ── Content ─────────────────────────────────────────────────── */
.aops-content {
  max-width: 1400px; margin: 0 auto;
  /* 56px topbar + 20px breathing room */
  padding: 76px 24px 48px;
}

/* Greeting */
.aops-greeting-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.aops-greeting-title { font-size: 22px; font-weight: 700; color: var(--ad-text-1); margin-bottom: 4px; }
.aops-greeting-sub   { font-size: 13px; color: var(--ad-text-3); line-height: 1.5; }
.aops-greeting-sub strong { color: var(--ad-text-2); }
.aops-compare-pill {
  font-size: 11px; color: var(--ad-text-3);
  padding: 5px 11px; background: var(--ad-surface);
  border: 1px solid var(--ad-border); border-radius: 8px;
  white-space: nowrap; flex-shrink: 0; margin-top: 4px;
}

/* ── KPI Grid ────────────────────────────────────────────────── */
.aops-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px; margin-bottom: 14px;
}
.aops-kpi-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius-lg);
  padding: 16px; text-decoration: none; display: flex;
  flex-direction: column; gap: 4px; cursor: pointer;
  transition: var(--ad-transition); overflow: hidden;
  position: relative;
}
.aops-kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ad-border);
  transition: opacity .2s;
}
.aops-kpi-card:hover { box-shadow: var(--ad-shadow); transform: translateY(-1px); }
.aops-kpi-card:hover::before { opacity: 1; }

/* Color accents */
.aops-kpi-purple::before { background: var(--ad-purple); }
.aops-kpi-blue::before   { background: var(--ad-blue); }
.aops-kpi-green::before  { background: var(--ad-green); }
.aops-kpi-amber::before  { background: var(--ad-amber); }
.aops-kpi-red::before    { background: var(--ad-red); }
.aops-kpi-teal::before   { background: var(--ad-teal); }

.aops-kpi-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.aops-kpi-purple .aops-kpi-icon { background: var(--ad-purple-l); color: var(--ad-purple); }
.aops-kpi-blue   .aops-kpi-icon { background: var(--ad-blue-l);   color: var(--ad-blue); }
.aops-kpi-green  .aops-kpi-icon { background: var(--ad-green-l);  color: var(--ad-green); }
.aops-kpi-amber  .aops-kpi-icon { background: var(--ad-amber-l);  color: var(--ad-amber); }
.aops-kpi-red    .aops-kpi-icon { background: var(--ad-red-l);    color: var(--ad-red); }
.aops-kpi-teal   .aops-kpi-icon { background: var(--ad-teal-l);   color: var(--ad-teal); }

.aops-kpi-top   { display: flex; align-items: flex-start; justify-content: space-between; }
.aops-kpi-label { font-size: 10px; color: var(--ad-text-4); font-weight: 400; text-align: right; line-height: 1.3; }
.aops-kpi-value { font-size: 18px; font-weight: 700; color: var(--ad-text-1); line-height: 1.1; margin-bottom: 2px; }
.aops-kpi-accent { color: var(--ad-purple); }
.aops-kpi-growth { display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; }
.aops-kpi-sub    { font-size: 10px; color: var(--ad-text-4); }

/* Mini sparkline bars */
.aops-kpi-bar {
  display: flex; align-items: flex-end; gap: 2px;
  height: 24px; margin-top: 6px;
}
.aops-mini-bar { flex: 1; border-radius: 2px; transition: height .3s; }
.aops-kpi-purple .aops-mini-bar { background: rgba(108,86,240,.25); }
.aops-kpi-blue   .aops-mini-bar { background: rgba(37,99,235,.25); }
.aops-kpi-green  .aops-mini-bar { background: rgba(16,185,129,.25); }
.aops-kpi-amber  .aops-mini-bar { background: rgba(245,158,11,.25); }
.aops-kpi-red    .aops-mini-bar { background: rgba(239,68,68,.25); }
.aops-kpi-teal   .aops-mini-bar { background: rgba(20,184,166,.25); }

/* ── Growth indicators ───────────────────────────────────────── */
.aops-up   { color: var(--ad-green); }
.aops-down { color: var(--ad-red); }

/* ── Section Cards ───────────────────────────────────────────── */
.aops-section-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius-lg);
  padding: 18px; box-shadow: var(--ad-shadow-sm);
}
.aops-sec-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.aops-sec-title  { font-size: 13px; font-weight: 700; color: var(--ad-text-1); }
.aops-sec-sub    { font-size: 11px; color: var(--ad-text-4); margin-top: 2px; }
.aops-view-link  { font-size: 11px; color: var(--ad-purple); text-decoration: none; font-weight: 500; white-space: nowrap; }
.aops-view-link:hover { text-decoration: underline; }

/* ── Projection Row ──────────────────────────────────────────── */
.aops-proj-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px; margin-bottom: 14px;
}
.aops-proj-nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.aops-pnum-label { font-size: 10px; color: var(--ad-text-4); margin-bottom: 2px; }
.aops-pnum-val   { font-size: 15px; font-weight: 700; color: var(--ad-text-1); }
.aops-accent     { color: var(--ad-purple); }

.aops-chart-canvas { width: 100% !important; height: 100px !important; display: block; }
.aops-chart-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 10px; color: var(--ad-text-4); }
.aops-leg-solid::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--ad-purple); margin-right: 4px; vertical-align: middle; border-radius: 2px; }
.aops-leg-dash::before  { content: ''; display: inline-block; width: 20px; height: 2px; background: repeating-linear-gradient(90deg, var(--ad-blue) 0,var(--ad-blue) 4px,transparent 4px,transparent 7px); margin-right: 4px; vertical-align: middle; }

/* Opportunity */
.aops-opp-amount { font-size: 24px; font-weight: 700; color: var(--ad-red); margin-bottom: 4px; }
.aops-opp-risk   { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: var(--ad-red-l); border-radius: 100px; padding: 2px 8px; margin-bottom: 12px; }
.aops-opp-row    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; font-size: 12px; }
.aops-opp-label  { display: flex; align-items: center; gap: 6px; color: var(--ad-text-2); }
.aops-opp-dot    { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.aops-opp-val    { font-weight: 600; color: var(--ad-text-1); }
.aops-opp-pct    { color: var(--ad-text-4); font-size: 10px; margin-left: 4px; }

.aops-conv-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ad-border-soft); text-align: center; }
.aops-conv-num   { font-size: 28px; font-weight: 700; color: var(--ad-purple); }
.aops-conv-label { font-size: 11px; color: var(--ad-text-3); margin-top: 2px; }
.aops-conv-avg   { font-size: 10px; color: var(--ad-text-4); margin-top: 3px; }

/* ── Four Column Grid ────────────────────────────────────────── */
.aops-four-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 12px; margin-bottom: 14px;
}

/* Donut */
.aops-donut-canvas { width: 100px !important; height: 100px !important; display: block; margin: 0 auto 10px; }

/* Legend */
.aops-legend { display: flex; flex-direction: column; gap: 6px; }
.aops-leg-item { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.aops-leg-dot  { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.aops-leg-src  { flex: 1; color: var(--ad-text-2); }
.aops-leg-val  { color: var(--ad-text-1); font-weight: 500; font-size: 10px; }

/* PPC */
.aops-ppc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.aops-ppc-item { background: var(--ad-bg); border-radius: var(--ad-radius-sm); padding: 10px; }
.aops-ppc-label { font-size: 10px; color: var(--ad-text-4); margin-bottom: 3px; }
.aops-ppc-val   { font-size: 16px; font-weight: 700; color: var(--ad-text-1); }
.aops-ppc-delta { font-size: 10px; margin-top: 2px; font-weight: 500; }
.aops-ppc-highlight {
  background: var(--ad-purple-l); border-radius: var(--ad-radius-sm);
  padding: 10px; font-size: 11px; color: var(--ad-purple);
}
.aops-ppc-hl-title { font-size: 12px; font-weight: 600; color: #4a35cc; margin-bottom: 2px; }

/* Work overview */
.aops-work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.aops-work-item { background: var(--ad-bg); border-radius: var(--ad-radius-sm); padding: 10px; text-align: center; }
.aops-work-val  { font-size: 20px; font-weight: 700; color: var(--ad-text-1); }
.aops-work-label { font-size: 9px; color: var(--ad-text-4); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }
.aops-val-success { color: var(--ad-green); }
.aops-val-danger  { color: var(--ad-red); }

/* Capacity */
.aops-cap-block { margin-bottom: 12px; }
.aops-cap-top   { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.aops-cap-label { font-size: 11px; color: var(--ad-text-3); }
.aops-cap-right { font-size: 12px; font-weight: 600; color: var(--ad-text-1); }
.aops-cap-bar-bg {
  height: 6px; background: var(--ad-bg);
  border: 1px solid var(--ad-border); border-radius: 100px; overflow: hidden;
}
.aops-cap-bar   { height: 100%; border-radius: 100px; transition: width .6s ease; }
.aops-cap-purple { background: linear-gradient(90deg, var(--ad-purple), #3b82f6); }
.aops-cap-blue   { background: linear-gradient(90deg, var(--ad-green), var(--ad-blue)); }
.aops-cap-pct   { font-size: 10px; color: var(--ad-text-4); margin-top: 3px; }
.aops-cap-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.aops-cap-stat  { background: var(--ad-bg); border-radius: var(--ad-radius-sm); padding: 8px; text-align: center; }
.aops-cap-stat-val   { font-size: 14px; font-weight: 700; color: var(--ad-purple); }
.aops-cap-stat-label { font-size: 9px; color: var(--ad-text-4); margin-top: 2px; }

/* Team table */
.aops-team-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.aops-team-table th {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ad-text-4);
  padding: 4px 6px; border-bottom: 1px solid var(--ad-border);
  text-align: left;
}
.aops-team-table td { padding: 7px 6px; border-bottom: 1px solid var(--ad-border-soft); color: var(--ad-text-2); }
.aops-team-table td:first-child { font-weight: 600; color: var(--ad-text-1); }
.aops-team-table tr:last-child td { border-bottom: none; }
.aops-td-ok     { color: var(--ad-green); font-weight: 600; }
.aops-td-danger { color: var(--ad-red);   font-weight: 700; }

/* ── Two Column ──────────────────────────────────────────────── */
.aops-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

/* Transactions */
.aops-txn-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ad-border-soft); }
.aops-txn-row:last-child { border-bottom: none; }
.aops-txn-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--ad-purple-l); color: var(--ad-purple);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.aops-txn-info  { flex: 1; min-width: 0; }
.aops-txn-name  { font-size: 12px; font-weight: 600; color: var(--ad-text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aops-txn-type  { font-size: 10px; color: var(--ad-text-4); }
.aops-txn-amount { font-size: 13px; font-weight: 700; color: var(--ad-text-1); white-space: nowrap; }

/* Status badges */
.aops-status-badge, .aops-badge {
  font-size: 10px; font-weight: 600; padding: 2px 8px;
  border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.aops-s-paid     { background: var(--ad-green-l); color: #065f46; }
.aops-s-pending  { background: var(--ad-amber-l); color: #92400e; }
.aops-s-progress { background: var(--ad-blue-l);  color: #1d4ed8; }
.aops-s-sent     { background: var(--ad-purple-l); color: var(--ad-purple); }
.aops-badge-blue  { background: var(--ad-blue-l);   color: #1d4ed8; }
.aops-badge-amber { background: var(--ad-amber-l);  color: #92400e; }
.aops-badge-green { background: var(--ad-green-l);  color: #065f46; }

/* ── Quick Access Nav ────────────────────────────────────────── */
.aops-section-heading {
  font-size: 11px; font-weight: 700; color: var(--ad-text-4);
  text-transform: uppercase; letter-spacing: .7px;
  margin: 0 0 12px;
}
.aops-nav-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-bottom: 14px;
}
.aops-nav-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--ad-surface); border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius); padding: 14px 16px;
  text-decoration: none; transition: var(--ad-transition);
}
.aops-nav-card:hover { border-color: var(--ad-purple); box-shadow: 0 4px 12px rgba(108,86,240,.1); transform: translateY(-1px); }
.aops-nav-icon  { font-size: 22px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--ad-bg); border-radius: var(--ad-radius-sm); flex-shrink: 0; }
.aops-nav-info  { flex: 1; min-width: 0; }
.aops-nav-label { font-size: 13px; font-weight: 600; color: var(--ad-text-1); }
.aops-nav-desc  { font-size: 11px; color: var(--ad-text-4); margin-top: 1px; }
.aops-nav-arrow { color: var(--ad-text-4); flex-shrink: 0; transition: color .15s; }
.aops-nav-card:hover .aops-nav-arrow { color: var(--ad-purple); }

/* ── Empty states ────────────────────────────────────────────── */
.aops-empty-state { text-align: center; padding: 20px 10px; }
.aops-empty-icon  { font-size: 28px; margin-bottom: 8px; }
.aops-empty-state p { font-size: 12px; color: var(--ad-text-4); }

/* Footer */
.aops-dash-footer {
  text-align: center; font-size: 11px; color: var(--ad-text-4);
  padding-top: 20px; border-top: 1px solid var(--ad-border-soft);
  margin-top: 8px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .aops-kpi-grid  { grid-template-columns: repeat(3,1fr); }
  .aops-four-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .aops-kpi-grid  { grid-template-columns: repeat(2,1fr); }
  .aops-proj-row  { grid-template-columns: 1fr; }
  .aops-two-col   { grid-template-columns: 1fr; }
  .aops-nav-grid  { grid-template-columns: repeat(2,1fr); }
  .aops-topbar-center { display: none; }
}
@media (max-width: 600px) {
  .aops-kpi-grid  { grid-template-columns: 1fr 1fr; }
  .aops-four-grid { grid-template-columns: 1fr; }
  .aops-nav-grid  { grid-template-columns: 1fr; }
  .aops-login-card { padding: 28px 22px; }
  .aops-content   { padding: 14px 14px 40px; }
}
@media (max-width: 400px) {
  .aops-kpi-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   v3 NEW COMPONENTS
══════════════════════════════════════════════════════════════ */

/* ── Filter Bar ───────────────────────────────────────────── */
.aops-filter-bar {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  padding: .5rem 1rem;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.aops-filter-label { font-size: 11px; color: var(--ad-text-4); font-weight: 500; }
.aops-filter-btns  { display: flex; gap: 4px; }
.aops-fb {
  font-size: 11px; font-weight: 500;
  padding: 5px 12px; border-radius: 7px;
  border: 1px solid var(--ad-border);
  text-decoration: none; color: var(--ad-text-3);
  background: var(--ad-surface);
  transition: var(--ad-transition);
}
.aops-fb:hover     { background: var(--ad-bg); color: var(--ad-text-2); }
.aops-fb-active    { background: var(--ad-purple) !important; color: #fff !important; border-color: var(--ad-purple) !important; }
.aops-filter-sep   { width: 1px; height: 20px; background: var(--ad-border); flex-shrink: 0; }

/* ── Funnel ───────────────────────────────────────────────── */
.aops-funnel-row     { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.aops-funnel-label   { font-size: 11px; color: var(--ad-text-3); width: 100px; flex-shrink: 0; }
.aops-funnel-bar-bg  { flex: 1; height: 24px; background: var(--ad-bg); border-radius: 5px; overflow: hidden; }
.aops-funnel-fill    { height: 100%; border-radius: 5px; transition: width .4s ease; display: flex; align-items: center; padding: 0 8px; }
.aops-funnel-stat    { font-size: 11px; font-weight: 600; color: var(--ad-text-1); min-width: 80px; text-align: right; }
.aops-funnel-pct     { font-weight: 400; color: var(--ad-text-4); font-size: 10px; }

/* ── Category bar ─────────────────────────────────────────── */
.aops-cat-row      { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.aops-cat-name     { font-size: 11px; color: var(--ad-text-2); width: 90px; flex-shrink: 0; text-transform: capitalize; }
.aops-cat-bar-bg   { flex: 1; height: 6px; background: var(--ad-bg); border-radius: 3px; overflow: hidden; }
.aops-cat-fill     { height: 100%; border-radius: 3px; transition: width .4s ease; }
.aops-cat-pct      { font-size: 10px; font-weight: 600; color: var(--ad-text-1); width: 36px; text-align: right; }
.aops-cat-amt      { font-size: 10px; color: var(--ad-text-4); width: 55px; text-align: right; }

/* ── AI Insight strips ────────────────────────────────────── */
.aops-ai-insight {
  border-radius: var(--ad-radius-sm);
  padding: 8px 12px;
  font-size: 11px;
  display: flex; align-items: flex-start; gap: 7px;
  line-height: 1.5;
}
.aops-ai-insight strong { font-weight: 600; }
.aops-ai-success { background: var(--ad-green-l);  color: #065f46; }
.aops-ai-warn    { background: var(--ad-amber-l);  color: #92400e; }
.aops-ai-info    { background: var(--ad-blue-l);   color: #1d4ed8; }

/* ── Divider ──────────────────────────────────────────────── */
.aops-divider { border: none; border-top: 1px solid var(--ad-border-soft); margin: .75rem 0; }

/* ── Heatmap container ────────────────────────────────────── */
#aops-heatmap-quote {
  display: flex; gap: 2px; overflow-x: auto;
  padding-bottom: 4px;
}
.aops-hm-labels {
  display: flex; flex-direction: column;
  gap: 2px; margin-right: 4px;
}
.aops-hm-day-label {
  height: 14px; font-size: 8px; color: var(--ad-text-4);
  display: flex; align-items: center;
}
.aops-hm-cols-wrap { display: flex; flex-direction: column; gap: 2px; }
.aops-hm-hour-labels {
  display: flex; gap: 2px; height: 14px; margin-bottom: 4px;
}
.aops-hm-hour-label {
  width: 24px; font-size: 8px; color: var(--ad-text-4);
  text-align: center;
}
.aops-hm-row    { display: flex; gap: 2px; }
.aops-hm-cell   { width: 24px; height: 14px; border-radius: 2px; }

/* ── Monthly table overrides ──────────────────────────────── */
.aops-team-table th:not(:first-child),
.aops-team-table td:not(:first-child) { text-align: right; }

/* ── Responsive v3 ────────────────────────────────────────── */
@media (max-width: 1280px) {
  .aops-filter-btns { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .aops-filter-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .aops-filter-sep { display: none; }
  .aops-hm-cell    { width: 18px; height: 12px; }
  .aops-hm-hour-label { width: 18px; }
}

/* ══════════════════════════════════════════════════════════════
   v4 Role-Based UI Additions
══════════════════════════════════════════════════════════════ */

/* Role pill in topbar */
.aops-user-role {
  display: block;
  font-size: 10px;
  font-weight: 500;
}

/* KPI card — used across all role dashboards */
.aops-kpi-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius-lg);
  padding: 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: var(--ad-transition);
}
.aops-kpi-card:hover {
  box-shadow: var(--ad-shadow);
  transform: translateY(-1px);
}

/* Prevent layout break on very small KPI grids */
.aops-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

/* CS / Designer / HR top bar quick actions colors */
.aops-quick-add:hover { opacity: .9; }

/* Role-aware footer */
.aops-dash-footer {
  text-align: center;
  font-size: 11px;
  color: var(--ad-text-4);
  padding-top: 20px;
  border-top: 1px solid var(--ad-border-soft);
  margin-top: 8px;
}

/* Responsive adjustments for role dashboards */
@media (max-width: 1200px) {
  .aops-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .aops-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .aops-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   v4.1 Critical Layout Fixes — All Role Dashboards
══════════════════════════════════════════════════════════════ */

/* Ensure #aops-dash-root fills viewport on all role dashboards */
#aops-dash-root {
  width: 100% !important;
  min-height: 100vh !important;
  background: var(--ad-bg) !important;
  font-family: var(--ad-font) !important;
  -webkit-font-smoothing: antialiased;
}

/* Topbar — must be on top of everything */
.aops-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  height: 56px !important;
  min-height: 56px !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
}

/* Content must start below fixed topbar */
.aops-content {
  padding-top: 76px !important;
}

/* Quick fix: KPI value font scaling for small cards */
.aops-kpi-value {
  font-size: clamp(16px, 2vw, 22px) !important;
  font-weight: 700 !important;
}
.aops-kpi-label {
  font-size: 10px !important;
  color: var(--ad-text-4) !important;
}

/* Work grid — 3-column consistent */
.aops-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* Nav grid — 4-column for all roles */
.aops-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

/* Quick action buttons in topbar */
.aops-quick-add {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 13px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
  white-space: nowrap !important;
}
.aops-quick-add:hover { opacity: .88 !important; }

/* Ensure logout btn visible */
.aops-logout-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--ad-border) !important;
  text-decoration: none !important;
  color: var(--ad-text-3) !important;
  flex-shrink: 0 !important;
}

/* Role badge text in topbar */
.aops-user-name {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ad-text-1) !important;
  white-space: nowrap !important;
}
.aops-user-role {
  display: block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
}
.aops-user-avatar {
  border-radius: 50% !important;
  border: 2px solid var(--ad-border) !important;
  flex-shrink: 0 !important;
}

/* KPI card for role dashboards */
.aops-kpi-card {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius-lg) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Section cards base */
.aops-section-card {
  background: var(--ad-surface) !important;
  border: 1px solid var(--ad-border) !important;
  border-radius: var(--ad-radius-lg) !important;
  padding: 16px !important;
}

/* Ensure section headings are visible */
.aops-section-heading {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ad-text-4) !important;
  text-transform: uppercase !important;
  letter-spacing: .7px !important;
  margin: 0 0 12px !important;
}

/* Status badges */
.aops-status-badge, .aops-badge {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 100px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* TXN row layout */
.aops-txn-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--ad-border-soft) !important;
}
.aops-txn-row:last-child { border-bottom: none !important; }
.aops-txn-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.aops-txn-info { flex: 1; min-width: 0; }
.aops-txn-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--ad-text-1) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.aops-txn-type { font-size: 10px !important; color: var(--ad-text-4) !important; }

/* OPP rows in CS dashboard */
.aops-opp-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--ad-border-soft) !important;
  font-size: 12px !important;
}
.aops-opp-row:last-child { border-bottom: none !important; }
.aops-opp-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--ad-text-2) !important;
}
.aops-opp-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; flex-shrink: 0 !important; }
.aops-opp-val { font-weight: 600 !important; color: var(--ad-text-1) !important; }

/* Team table */
.aops-team-table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.aops-team-table th {
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .4px !important;
  color: var(--ad-text-4) !important;
  padding: 4px 6px !important;
  border-bottom: 1px solid var(--ad-border) !important;
  text-align: left !important;
}
.aops-team-table td {
  padding: 7px 6px !important;
  border-bottom: 1px solid var(--ad-border-soft) !important;
  color: var(--ad-text-2) !important;
  font-size: 11px !important;
}
.aops-team-table tr:last-child td { border-bottom: none !important; }
.aops-td-ok { color: var(--ad-green) !important; font-weight: 600 !important; }
.aops-td-danger { color: var(--ad-red) !important; font-weight: 700 !important; }

/* Empty state */
.aops-empty-state { text-align: center !important; padding: 20px 10px !important; }
.aops-empty-icon { font-size: 28px !important; margin-bottom: 8px !important; }
.aops-empty-state p { font-size: 12px !important; color: var(--ad-text-4) !important; }

/* Funnel (CS dashboard) */
.aops-funnel-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.aops-funnel-label {
  font-size: 11px !important;
  color: var(--ad-text-3) !important;
  width: 90px !important;
  flex-shrink: 0 !important;
}
.aops-funnel-bar-bg {
  flex: 1 !important;
  height: 22px !important;
  background: var(--ad-bg) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
}
.aops-funnel-fill {
  height: 100% !important;
  border-radius: 5px !important;
  transition: width .4s ease !important;
}
.aops-funnel-stat {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ad-text-1) !important;
  min-width: 60px !important;
  text-align: right !important;
}

/* Responsive */
@media (max-width: 768px) {
  .aops-nav-grid { grid-template-columns: 1fr 1fr !important; }
  .aops-work-grid { grid-template-columns: 1fr 1fr !important; }
  .aops-topbar-center { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   v4.2 — Functional UI: Tabs, Modals, Action Buttons
══════════════════════════════════════════════════════════════ */

/* Task filter tabs */
.aops-task-tab { transition: all .15s !important; }
.aops-task-tab:hover { background: var(--ad-bg) !important; color: var(--ad-purple) !important; }
.aops-tab-active { background: var(--ad-purple) !important; color: #fff !important; border-color: var(--ad-purple) !important; }

/* Inline action buttons in tables */
button[onclick*="aopsQcRequest"],
button[onclick*="aopsPushCS"],
button[onclick*="aopsApprovLeave"] {
  transition: opacity .15s;
}
button[onclick*="aopsQcRequest"]:hover,
button[onclick*="aopsPushCS"]:hover,
button[onclick*="aopsApprovLeave"]:hover { opacity: .8; }

/* Suggestion textarea */
#aops-suggestion-text:focus {
  border-color: var(--ad-purple) !important;
  box-shadow: 0 0 0 2px rgba(108,86,240,.1);
}

/* Leave modal backdrop */
#aops-leave-modal { animation: aops-fade-in .15s ease; }
@keyframes aops-fade-in { from{opacity:0} to{opacity:1} }
#aops-leave-modal input:focus,
#aops-leave-modal select:focus,
#aops-leave-modal textarea:focus {
  border-color: #6c56f0 !important;
  box-shadow: 0 0 0 2px rgba(108,86,240,.12);
}

/* Sr Designer topbar right section */
.aops-hr-quick-actions { display: flex; align-items: center; }

/* Productivity score ring label */
.aops-prod-ring-wrap { position: relative; }

/* KPI mini sparkline for role dashboards — ensure display */
.aops-kpi-card canvas { display: block !important; }

/* Backend access button */
.aops-backend-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  border: 1px solid var(--ad-border) !important;
  background: var(--ad-bg) !important;
  color: var(--ad-text-3) !important;
  text-decoration: none !important;
  transition: var(--ad-transition) !important;
  flex-shrink: 0 !important;
}
.aops-backend-btn:hover {
  background: var(--ad-purple) !important;
  color: #fff !important;
  border-color: var(--ad-purple) !important;
}