/* ═══════════════════════════════════════════════════════════════════
   portal.css — Selection-Connection Shop-Client Portal
   Shared stylesheet for all 5 portal pages.
   SC blue/gold theme. No build system — plain CSS.
═══════════════════════════════════════════════════════════════════ */

:root {
  --black: #0a0b0f;
  --dark: #111111;
  --card: #1a1a1a;
  --card2: #1f1f1f;
  --border: #2a2a2a;
  --border2: #333;
  --accent: #5bb8f0;
  --accent-bright: #4da8ff;
  --accent-dim: rgba(91,184,240,0.15);
  --gold: #d4a017;
  --gold-dim: rgba(212,160,23,0.15);
  --green: #3de0a0;
  --green-dim: rgba(61,224,160,0.12);
  --red: #e05555;
  --red-dim: rgba(224,85,85,0.12);
  --blue: #5b9bd5;
  --blue-dim: rgba(91,155,213,0.12);
  --steel: #8a9bb0;
  --white: #e0e2ea;
  --muted: #666;
  --muted2: #888;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--black); color:var(--white); font-family:'DM Sans',sans-serif; min-height:100vh; overflow-x:hidden; }

/* ── SCREENS ── */
.screen { display:none; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

/* ── TOP NAV ── */
nav { display:flex; justify-content:space-between; align-items:center; padding:16px 32px; border-bottom:1px solid var(--border); background:var(--black); position:sticky; top:0; z-index:100; }
.logo { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:3px; color:var(--white); }
.logo span { color:var(--accent); }
.logo sub { font-size:10px; color:var(--muted); letter-spacing:1px; font-family:'DM Mono',monospace; vertical-align:bottom; margin-left:8px; }
.nav-tabs { display:flex; gap:0; }
.nav-tab { padding:16px 24px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted2); cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; }
.nav-tab:hover { color:var(--white); }
.nav-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:16px; }
.shop-badge { display:flex; align-items:center; gap:8px; background:var(--card); padding:6px 14px; border-radius:4px; border:1px solid var(--border); }
.shop-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--green); }
.shop-badge span { font-size:12px; color:var(--steel); font-family:'DM Mono',monospace; }

/* ── PORTAL SUB-NAV ── */
.portal-sub-nav { display:flex; gap:0; padding:0 32px; border-bottom:1px solid var(--border); background:var(--black); }
.portal-tab { padding:12px 20px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted2); text-decoration:none; border-bottom:2px solid transparent; transition:all .2s; }
.portal-tab:hover { color:var(--white); }
.portal-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── SECTION LAYOUT ── */
.content { flex:1; padding:32px; max-width:1400px; margin:0 auto; width:100%; }
.section-header { margin-bottom:24px; }
.section-header h2 { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:2px; color:var(--white); }
.section-header p { font-size:13px; color:var(--muted2); margin-top:4px; }

/* ── CARDS ── */
.card { background:var(--card); border:1px solid var(--border); padding:24px; margin-bottom:16px; transition:border-color .2s; }
.card:hover { border-color:var(--border2); }
.card-title { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.card-row { display:flex; gap:16px; flex-wrap:wrap; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:11px; color:var(--muted2); letter-spacing:1px; text-transform:uppercase; font-family:'DM Mono',monospace; margin-bottom:6px; }
.form-group input, .form-group select { width:100%; background:var(--dark); border:1px solid var(--border); color:var(--white); padding:10px 12px; font-family:'DM Sans',sans-serif; font-size:14px; outline:none; transition:border-color .2s; }
.form-group input:focus, .form-group select:focus { border-color:var(--accent); }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }

/* ── TOGGLE ── */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); }
.toggle-row:last-child { border-bottom:none; }
.toggle-label { font-size:13px; color:var(--white); }
.toggle-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.toggle { position:relative; width:44px; height:24px; cursor:pointer; flex-shrink:0; }
.toggle input { display:none; }
.toggle .slider { position:absolute; inset:0; background:var(--border2); border-radius:12px; transition:.2s; }
.toggle .slider::before { content:''; position:absolute; width:18px; height:18px; left:3px; bottom:3px; background:var(--muted); border-radius:50%; transition:.2s; }
.toggle input:checked + .slider { background:var(--accent-dim); }
.toggle input:checked + .slider::before { transform:translateX(20px); background:var(--accent); }

/* ── BUTTONS ── */
.btn { border:none; padding:12px 28px; font-family:'DM Mono',monospace; font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.btn-primary { background:var(--accent); color:var(--black); }
.btn-primary:hover { background:var(--accent-bright); }
.btn-ghost { background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn-ghost:hover { background:var(--accent-dim); }
.btn-sm { padding:8px 16px; font-size:10px; }
.btn-block { width:100%; }

/* ── GRID ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }

/* ── MATERIAL CHIP ── */
.chip-grid { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:flex; align-items:center; gap:6px; padding:6px 12px; background:var(--dark); border:1px solid var(--border); font-size:12px; color:var(--white); cursor:pointer; transition:all .2s; user-select:none; }
.chip.selected { border-color:var(--accent); background:var(--accent-dim); }
.chip .swatch { width:14px; height:14px; border-radius:2px; border:1px solid var(--border2); }
.chip .remove { margin-left:4px; color:var(--muted); cursor:pointer; font-size:14px; }

/* ── CLIENT LIST ── */
.client-row { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--border); }
.client-row:last-child { border-bottom:none; }
.client-avatar { width:36px; height:36px; border-radius:50%; background:var(--border2); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--accent); font-family:'DM Mono',monospace; flex-shrink:0; }
.client-info { flex:1; }
.client-info .name { font-size:14px; font-weight:500; }
.client-info .meta { font-size:11px; color:var(--muted2); margin-top:2px; }
.client-status { font-size:10px; font-family:'DM Mono',monospace; letter-spacing:1px; padding:4px 10px; border-radius:2px; }
.status-active { background:var(--green-dim); color:var(--green); }
.status-pending { background:var(--gold-dim); color:var(--gold); }
.status-draft { background:var(--blue-dim); color:var(--blue); }

/* ── INVITE MODAL ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:200; }
.modal-overlay.show { display:flex; }
.modal { background:var(--card); border:1px solid var(--border); padding:32px; width:480px; max-width:90vw; }
.modal h3 { font-family:'Bebas Neue',sans-serif; font-size:24px; letter-spacing:2px; margin-bottom:16px; }
.modal .close { position:absolute; top:16px; right:16px; color:var(--muted); cursor:pointer; font-size:18px; }

/* ── LD TILES (CLIENT VIEW) ── */
.ld-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:16px; }
.ld-tile { background:var(--card); border:1px solid var(--border); padding:16px; text-align:center; cursor:pointer; transition:all .25s; position:relative; }
.ld-tile:hover { border-color:var(--accent); transform:translateY(-2px); }
.ld-tile.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.ld-tile svg { width:100%; height:120px; margin-bottom:10px; }
.ld-tile .ld-name { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:1px; color:var(--white); }
.ld-tile .ld-desc { font-size:11px; color:var(--muted); margin-top:4px; }
.ld-tile .ld-badge { position:absolute; top:8px; right:8px; font-size:9px; font-family:'DM Mono',monospace; padding:2px 6px; background:var(--accent-dim); color:var(--accent); letter-spacing:1px; }

/* ── CONFIGURATOR ── */
.config-layout { display:grid; grid-template-columns:320px 1fr; gap:24px; min-height:500px; }
.config-sidebar { display:flex; flex-direction:column; gap:16px; }
.config-preview { background:var(--dark); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; position:relative; min-height:400px; }
.config-preview .tier-badge { position:absolute; top:12px; right:12px; padding:6px 12px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; }
.tier-basic { background:var(--border2); color:var(--muted2); }
.tier-premium { background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent); }

/* ── 3D COMPARISON ── */
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.compare-box { background:var(--dark); border:1px solid var(--border); padding:20px; text-align:center; }
.compare-box h4 { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; margin-bottom:12px; }
.compare-box .render-area { height:280px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; border:1px solid var(--border); background:var(--card); }
.compare-box .tag { font-size:10px; font-family:'DM Mono',monospace; color:var(--muted2); letter-spacing:1px; }

/* ── STEP INDICATOR ── */
.steps { display:flex; align-items:center; gap:0; margin-bottom:32px; }
.step { display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:11px; font-family:'DM Mono',monospace; letter-spacing:1px; color:var(--muted); position:relative; }
.step .num { width:24px; height:24px; border-radius:50%; border:1px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:10px; }
.step.active { color:var(--accent); }
.step.active .num { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); }
.step.done { color:var(--green); }
.step.done .num { border-color:var(--green); background:var(--green-dim); color:var(--green); }
.step-line { width:40px; height:1px; background:var(--border2); }

/* ── STATS ROW ── */
.stats { display:flex; gap:24px; margin-bottom:24px; }
.stat { background:var(--card); border:1px solid var(--border); padding:16px 20px; flex:1; }
.stat .val { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--accent); }
.stat .lbl { font-size:10px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:1px; margin-top:4px; text-transform:uppercase; }

/* ── FOOTER ── */
footer { padding:16px 32px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
footer span { font-size:10px; color:var(--muted); font-family:'DM Mono',monospace; letter-spacing:1px; }

/* ── TOAST NOTIFICATION ── */
.toast { position:fixed; bottom:24px; right:24px; background:var(--card); border:1px solid var(--accent); color:var(--white); padding:12px 24px; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:1px; transform:translateY(100px); opacity:0; transition:all .3s; z-index:300; }
.toast.show { transform:translateY(0); opacity:1; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .config-layout { grid-template-columns:1fr; }
  .compare-grid { grid-template-columns:1fr; }
  .stats { flex-direction:column; }
  nav { padding:12px 16px; flex-wrap:wrap; gap:8px; }
  .nav-tabs { overflow-x:auto; }
  .content { padding:16px; }
}