/* Agent portal layout. Base tokens and form styles live in /shared/portal.css. */
.loading { padding:6rem 2rem; text-align:center; color:var(--muted); }

/* Sign in */
.auth { min-height:100vh; display:grid; place-items:center; padding:2rem;
  background:radial-gradient(ellipse at top, rgba(201,169,110,0.10), transparent 60%); }
.auth-card { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); padding:2.5rem; }
.auth-logo { height:44px; margin-bottom:1.5rem; }
.auth-card h1 { font-size:2.4rem; margin-bottom:0.6rem; }
.auth-card p { margin-bottom:1.5rem; font-size:0.92rem; }
.auth-card form .btn { width:100%; margin-top:1rem; }
.auth-card form .btn + .btn { margin-top:0.6rem; }
.auth-card .notice { margin-top:1.25rem; }
.auth-card .back { display:inline-block; margin-top:1.5rem; font-size:0.8rem; color:var(--muted); text-decoration:none; }

/* Top bar */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:2rem; padding:0.9rem 2rem;
  background:rgba(12,12,12,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--cream); }
.brand img { height:30px; }
.brand span { font-family:'Cormorant Garant',serif; font-size:1.2rem; font-weight:600; white-space:nowrap; }
.brand em { color:var(--gold); font-weight:400; }
.tabs { display:flex; gap:0.25rem; flex:1; overflow-x:auto; }
.tabs button { font:inherit; font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--cream-dim);
  background:none; border:none; border-bottom:2px solid transparent; padding:0.6rem 0.9rem; cursor:pointer; white-space:nowrap; }
.tabs button:hover { color:var(--gold); }
.tabs button[aria-selected="true"] { color:var(--gold); border-bottom-color:var(--gold); }
.who { display:flex; align-items:center; gap:0.9rem; font-size:0.8rem; color:var(--muted); }

.content { max-width:1200px; margin:0 auto; padding:2.5rem 2rem 5rem; }
.panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.panel-head h2 { font-size:2.3rem; }
.intro { margin:-0.5rem 0 1.5rem; font-size:0.9rem; }
.empty { padding:3rem 1rem; text-align:center; color:var(--muted); border:1px dashed var(--line); }
.card { background:var(--panel); border:1px solid var(--line); padding:1.5rem; }
.small { font-size:0.82rem; }

/* Stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:1.5rem; }
.stat { background:var(--panel); padding:1.1rem 1.25rem; }
.stat span { display:block; font-size:0.66rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted); }
.stat strong { font-family:'Cormorant Garant',serif; font-size:1.9rem; font-weight:400; color:var(--white); }

/* Tables */
.toolbar { display:flex; gap:0.75rem; margin-bottom:1rem; }
.toolbar input { flex:1; }
.toolbar select { width:200px; }
.table-wrap { overflow-x:auto; }
.table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.table th { text-align:left; font-size:0.64rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
  padding:0.7rem 0.75rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.table td { padding:0.8rem 0.75rem; border-bottom:1px solid rgba(201,169,110,0.08); vertical-align:middle; }
.table tbody tr:hover { background:rgba(201,169,110,0.04); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }
.table .row-actions { text-align:right; white-space:nowrap; }
.table .row-actions .btn { margin-left:0.35rem; }
.table td strong { color:var(--white); font-weight:500; }
.table td .sub { display:block; color:var(--muted); font-size:0.8rem; }
.status-select { width:auto; padding:0.35rem 0.5rem; font-size:0.8rem; }

.badge { display:inline-block; font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; padding:0.3rem 0.6rem; border:1px solid var(--line); color:var(--cream-dim); }
.badge.won { color:var(--green); border-color:rgba(127,179,138,0.5); }
.badge.lost { color:var(--red); border-color:rgba(217,130,111,0.4); }

/* Goals */
.goal-list { display:grid; gap:1rem; }
.goal { background:var(--panel); border:1px solid var(--line); padding:1.5rem; }
.goal-top { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.1rem; }
.goal h3 { font-size:1.5rem; }
.goal .meta { font-size:0.8rem; color:var(--muted); margin-top:0.2rem; }
.goal-figures { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:0.6rem; flex-wrap:wrap; }
.goal-figures .current { font-family:'Cormorant Garant',serif; font-size:2rem; color:var(--white); }
.goal-figures .target { color:var(--muted); font-size:0.9rem; }
.goal-figures .pct { font-size:0.9rem; color:var(--gold); font-variant-numeric:tabular-nums; }
.bar { position:relative; height:14px; background:rgba(255,255,255,0.06); border:1px solid var(--line); overflow:hidden; }
.bar-fill { height:100%; background:linear-gradient(90deg, var(--gold-dim), var(--gold)); transition:width .8s ease; }
.bar-fill.complete { background:linear-gradient(90deg, #5e9a6b, var(--green)); }
.bar-pace { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--cream); opacity:0.55; }
.goal-foot { display:flex; justify-content:space-between; gap:1rem; margin-top:0.6rem; font-size:0.8rem; color:var(--muted); flex-wrap:wrap; }

/* Comp calculator */
.comp { display:grid; grid-template-columns:minmax(260px,360px) 1fr; gap:1.25rem; margin-bottom:1.25rem; }
.comp .card > label, .comp .card > .group-label { margin-top:1.1rem; }
.comp .card > label:first-child { margin-top:0; }
.money-input { display:flex; align-items:center; border:1px solid rgba(201,169,110,0.22); }
.money-input span { padding:0 0.2rem 0 0.9rem; color:var(--gold); font-size:1.4rem; font-family:'Cormorant Garant',serif; }
.money-input input { border:none; font-size:1.4rem; padding:0.6rem 0.8rem 0.6rem 0.3rem; }
.segmented { display:flex; border:1px solid rgba(201,169,110,0.22); }
.segmented button { flex:1; font:inherit; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; background:none; border:none;
  color:var(--cream-dim); padding:0.6rem; cursor:pointer; }
.segmented button + button { border-left:1px solid rgba(201,169,110,0.22); }
.segmented button.active { background:rgba(201,169,110,0.15); color:var(--gold); }
.comp .small { margin-top:1.25rem; }
.result .big { font-family:'Cormorant Garant',serif; font-size:clamp(2.8rem,6vw,4rem); color:var(--gold); line-height:1; margin:0.3rem 0 1.25rem; font-variant-numeric:tabular-nums; }
.mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:1rem; }
.mini-stats span { display:block; font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
.mini-stats strong { font-size:1.1rem; font-weight:500; color:var(--white); font-variant-numeric:tabular-nums; }
.schedule td, .schedule th { padding:0.45rem 0.6rem; }
.tag-box { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.tag-box label { margin-top:0.9rem; }
.tag-box .btn { width:100%; margin-top:1.1rem; }
.tag-box .notice { margin-top:0.9rem; }
.tracked { margin-bottom:1.25rem; }
.payouts { margin-bottom:1.25rem; }
.org-totals { margin-bottom:1.5rem; }
.org-totals h3 { font-size:1.6rem; margin-bottom:0.4rem; }
.org-totals .small { margin-bottom:1rem; }
.org-totals .org-sub { font-family:'Cormorant Garant',serif; font-size:1.25rem; font-weight:400; color:var(--white); margin:1.5rem 0 0.5rem; }
.org-totals tr.highlight td { color:var(--gold); font-weight:500; }
.org-totals tr.indent td:first-child { padding-left:1.75rem; color:var(--muted); }
.payouts h3 { font-size:1.6rem; margin-bottom:0.5rem; }
.payouts .small { margin-bottom:1rem; }
.tracked h3 { font-size:1.6rem; margin-bottom:1rem; }
.tracked .stats { margin-bottom:1rem; }
.tag-lead { cursor:pointer; }
.tag-lead .caret { display:inline-block; width:1rem; color:var(--gold); transition:transform .2s; }
.tag-lead.open .caret { transform:rotate(90deg); }
.tag-detail td { background:rgba(255,255,255,0.02); padding:0.5rem 0.75rem 0.5rem 2.25rem; font-size:0.85rem; }
.tag-detail .sub { display:inline; margin-left:0.5rem; }
.table tfoot td { border-top:1px solid var(--line); border-bottom:none; font-weight:500; color:var(--white); }
.hint { display:block; margin-top:0.35rem; font-size:0.75rem; color:var(--muted); }
.book p { font-size:1rem; }
.book strong { color:var(--gold); }

/* Team */
.team-table td:first-child { white-space:nowrap; }
.team-table .indent { display:inline-block; }
.team-table .caret-btn { background:none; border:none; color:var(--gold); cursor:pointer; width:1.2rem; font-size:1rem; transition:transform .2s; }
.team-table .caret-btn.open { transform:rotate(90deg); }
.team-table .caret-spacer { display:inline-block; width:1.2rem; }
.team-table tr.inactive td { opacity:0.5; }
.team-table tr.self td:first-child strong::after { content:" (you)"; color:var(--muted); font-weight:400; }
.badge.executive { color:var(--gold); border-color:var(--gold); }
.badge.regional_manager { color:#C7B6E0; border-color:rgba(199,182,224,0.45); }
.badge.market_manager { color:#9FC4D9; border-color:rgba(159,196,217,0.45); }
.badge.pending { color:var(--muted); }

/* Dialogs */
dialog { margin:auto; width:min(640px, calc(100% - 2rem)); background:var(--charcoal); color:var(--cream); border:1px solid var(--line); padding:2rem; }
dialog.wide-dialog { width:min(980px, calc(100% - 2rem)); }
dialog::backdrop { background:rgba(0,0,0,0.7); }
dialog h3 { font-size:1.7rem; margin-bottom:1.25rem; }
dialog .muted { margin:-0.5rem 0 1rem; font-size:0.9rem; }
.dialog-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; }
.dialog-grid .wide { grid-column:1 / -1; }
.dialog-actions { display:flex; gap:0.6rem; margin-top:1.5rem; align-items:center; }
.dialog-actions .spacer { flex:1; }
dialog .notice { margin-top:1rem; }
.email-change { margin-top:1.25rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.email-change .small { margin:0.5rem 0 0; }
.email-change .small.pending { color:var(--gold); }
.inline-row { display:flex; gap:0.5rem; }
.inline-row .btn { white-space:nowrap; }

.toast { position:fixed; bottom:1.5rem; left:50%; transform:translate(-50%, 20px); opacity:0; pointer-events:none; background:var(--gold); color:var(--black);
  padding:0.7rem 1.2rem; font-size:0.85rem; transition:opacity .25s, transform .25s; z-index:50; }
.toast.show { opacity:1; transform:translate(-50%, 0); }

@media (max-width: 900px) {
  .topbar { flex-wrap:wrap; gap:0.75rem; padding:0.75rem 1rem; }
  .tabs { order:3; flex-basis:100%; }
  .who #who-email { display:none; }
  .who { margin-left:auto; }
  .content { padding:1.75rem 1rem 4rem; }
  .comp { grid-template-columns:1fr; }
}
@media (max-width: 560px) { .dialog-grid, .mini-stats { grid-template-columns:1fr; } .toolbar { flex-direction:column; } .toolbar select { width:100%; } }