/* AJAW Trade — owner dashboard (2026-09-21)

   Giuliano asked for "a panel only I can see where I see latest signups,
   approvals, SEO, clicks, top products, chats, all the metrics." This is the
   /admin?tab=overview screen (now the default admin tab).

   Rules this file follows:
   - Tokens only, no raw hex: var(--violet/--ink/--gray/--muted/--line/--canvas/--tint/--green).
   - Dense, not airy: KPI numbers 20-24px, section labels 11px uppercase,
     card padding 16-20px, 1px hairlines. See ajaw-ui skill / standing feedback.
   - available:false panels render the server's reason text via .ov-notice —
     never a confident zero. See app.js ovUnavailable().
   - No Gantt charts. The funnel is a plain horizontal step strip.
*/

.ov-section{border:1px solid var(--line);border-radius:10px;background:#fff;padding:16px 18px 18px;margin-bottom:14px}
.ov-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.ov-label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray)}
.ov-label .icon{width:14px;height:14px;color:var(--violet)}
.ov-count-pill{background:var(--tint);color:var(--violet);font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.ov-sub{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;margin:4px 0 8px}

.ov-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.ov-cols-2>div{min-width:0}

.ov-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:14px}
.ov-kpi{padding:9px 12px;border-right:1px solid var(--line)}
.ov-kpi:last-child{border-right:0}
.ov-kpi b{display:block;font-family:var(--display);font-weight:600;font-size:21px;line-height:1.1}
.ov-kpi span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ov-who{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.ov-who b{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-who small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ov-approve-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ov-approve-row:last-child{border-bottom:0}
.ov-row-actions{display:flex;gap:6px;flex-shrink:0}
/* The sitewide mobile rule `.btn{white-space:normal}` (max-width:760px, for full-width CTAs)
   would otherwise wrap "Approve"/"Reject" mid-word inside these tight inline rows. */
.ov-approve-row .btn,.ov-row-actions .btn{flex-shrink:0;white-space:nowrap!important;min-width:0}

.ov-list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.ov-list-row:last-child{border-bottom:0}
.ov-list-row .badge{flex-shrink:0}
.ov-list-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
.ov-trim{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:13px;font-weight:600}
.ov-count{font-size:11px;color:var(--muted);flex-shrink:0}

.ov-empty-line{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);padding:4px 0}
.ov-empty-line .icon{width:14px;height:14px}
.ov-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin-top:10px}
.ov-note .icon{width:13px;height:13px;flex-shrink:0}

.ov-bars{display:flex;flex-direction:column;gap:6px}
.ov-bar-row{display:flex;align-items:center;gap:10px;font-size:12px}
.ov-bar-label{flex:0 0 128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.ov-bar-track{flex:1;height:6px;border-radius:4px;background:var(--canvas);overflow:hidden}
.ov-bar-fill{display:block;height:100%;background:var(--violet);border-radius:4px}
.ov-bar-n{flex:0 0 32px;text-align:right;font-size:11px;color:var(--muted)}

.ov-funnel{display:flex;overflow-x:auto;scrollbar-width:none;border:1px solid var(--line);border-radius:9px}
.ov-funnel::-webkit-scrollbar{display:none}
.ov-funnel-step{flex:1 0 96px;padding:10px 14px}
.ov-funnel-step b{display:block;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.1}
.ov-funnel-step span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:4px;white-space:nowrap}
.ov-funnel-arrow{display:flex;align-items:center;color:var(--muted);flex:0 0 auto}
.ov-funnel-arrow .icon{width:14px;height:14px}

.ov-chat-row{padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.ov-chat-row:last-child{border-bottom:0}
.ov-chat-row b{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--violet)}
.ov-chat-row p{margin:3px 0 0;font-size:12px;color:var(--ink);line-height:1.4}
.ov-chat-row small{color:var(--muted)}

.ov-notice{display:flex;align-items:center;gap:8px;margin:0}
.ov-notice .icon{width:15px;height:15px;flex-shrink:0;color:var(--gray)}

@media (max-width:760px){
  .ov-cols-2{grid-template-columns:1fr;gap:14px 0}
  .ov-cols-2>div+div{margin-top:2px}
  .ov-bar-label{flex-basis:96px}
  .ov-section{padding:14px 14px 16px}
}