/* ==========================================================================
   MAD ENTREPRENEURS Portal — styles
   Brand tokens mirror madwarriors.com (dark mode, warm gold accent).
   ========================================================================== */
:root {
  --bg:          #0A0A0C;
  --bg-elev:     #14141A;
  --surface:     #1C1C26;
  --ink:         #FAFAFA;
  --ink-dark:    #0A0A0C;
  --muted:       #8B8B95;
  --muted-soft:  #B5B5BD;
  --rule:        #2A2A35;
  --accent:      #C9974D;
  --accent-hot:  #DBAA5D;
  --success:     #00C853;
  --warn:        #FFB300;
  --danger:      #E53935;
  --display: 'Archivo', system-ui, sans-serif;
  --sans:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}

/* ---------- LOGIN (two-panel) ------------------------------------------- */
.portal-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.portal-aside {
  background:
    linear-gradient(135deg, rgba(10,10,12,0.7) 0%, rgba(10,10,12,0.92) 100%),
    url('hero-bg.jpg') center/cover no-repeat;
  padding: clamp(40px, 5vw, 80px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.portal-aside-top { display: flex; align-items: center; gap: 14px; }
.portal-aside-mark { width: 56px; height: 40px; }
.portal-aside-mark img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0) saturate(100%) invert(72%) sepia(48%) saturate(479%) hue-rotate(2deg) brightness(91%) contrast(86%);
}
.portal-aside-wordmark { font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: 0.02em; text-transform: uppercase; }
.portal-aside-wordmark small { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; display: block; margin-top: 4px; }
.portal-aside h1 { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 4.5vw, 64px); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 28px; }
.portal-aside h1 .accent { color: var(--accent); }
.portal-aside p { font-size: 16px; line-height: 1.55; color: var(--muted-soft); max-width: 38ch; margin-bottom: 12px; }
.portal-aside .formula { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; padding: 16px 20px; background: rgba(201,151,77,0.08); border-left: 2px solid var(--accent); color: var(--ink); max-width: 38ch; margin-top: 20px; }
.portal-aside .formula strong { color: var(--accent); font-weight: 700; }
.portal-aside-bottom { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.portal-aside-bottom a { color: var(--muted-soft); transition: color 0.2s; }
.portal-aside-bottom a:hover { color: var(--accent); }

.portal-form-side { background: var(--bg); padding: clamp(40px, 5vw, 80px); display: flex; align-items: center; justify-content: center; }
.portal-form { width: 100%; max-width: 420px; }
.portal-form h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; margin: 20px 0 12px; }
.portal-form h2 .accent { color: var(--accent); }
.portal-form .subtitle { font-size: 15px; color: var(--muted-soft); line-height: 1.55; margin-bottom: 36px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 8px; }
.field input, .field select { width: 100%; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); padding: 14px 16px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.02em; outline: none; transition: border-color 0.2s; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.field input::placeholder { color: var(--muted); }
.field select { cursor: pointer; }

/* Coach console forms */
.admin-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 4px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.form-subhead { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 24px 0 8px; }

/* line-item catalog */
.li-cat { margin-bottom: 18px; }
.li-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.li-name { flex: 1; background: var(--bg-elev); border: 1px solid var(--rule); color: var(--ink); padding: 9px 12px; font-family: var(--sans); font-size: 14px; outline: none; }
.li-name:focus { border-color: var(--accent); }
.badge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(201,151,77,0.4); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
.li-liq { font-family: var(--mono); font-size: 11px; color: var(--muted-soft); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.li-liq input { accent-color: var(--accent); }
.li-x { background: none; border: 1px solid var(--rule); color: var(--muted); width: 28px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; }
.li-x:hover { border-color: var(--danger); color: var(--danger); }
.li-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.li-add input[type=text], .li-add input:not([type]) { flex: 1; min-width: 160px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); padding: 10px 12px; font-family: var(--sans); font-size: 13px; outline: none; }
.li-add select { background: var(--surface); border: 1px solid var(--rule); color: var(--ink); padding: 10px; font-family: var(--mono); font-size: 12px; }

/* period entry */
.ef-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 8px; }
.ef { background: var(--bg-elev); border: 1px solid var(--rule); padding: 14px; }
.ef-wide { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.ef-name { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 8px; grid-column: 1 / -1; }
.ef-field label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.ef-field input { width: 100%; background: var(--surface); border: 1px solid var(--rule); color: var(--ink); padding: 11px 12px; font-family: var(--mono); font-size: 13px; outline: none; }
.ef-field input:focus { border-color: var(--accent); }
.ef > .ef-field { display: inline-block; width: 48%; }
.ef.ef-wide > .ef-field { width: auto; }
.ef-cf { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; color: var(--muted-soft); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ef-cf b { font-family: var(--display); color: var(--ink); }
.ef-cf .pos { color: var(--success); }
.ef-cf .neg { color: var(--danger); }

/* live preview strip */
.preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 20px; }
.pv { background: var(--surface); padding: 14px; }
.pv-l { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pv-v { display: block; font-family: var(--display); font-weight: 700; font-size: 18px; margin-top: 6px; }
.pv-v.accent { color: var(--accent); }
.pv-v.pos { color: var(--success); }
.pv-v.neg { color: var(--danger); }
@media (max-width: 700px) { .preview { grid-template-columns: repeat(2, 1fr); } }
.field-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; font-size: 12px; }
.forgot { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); cursor: pointer; background: none; border: none; }
.forgot:hover { text-decoration: underline; }
.btn-submit { width: 100%; background: var(--accent); color: var(--ink-dark); border: none; padding: 18px 22px; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 12px; }
.btn-submit:hover { background: var(--accent-hot); }
.btn-submit:disabled { opacity: 0.6; cursor: wait; }
.msg { margin-top: 22px; padding: 14px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; display: none; }
.msg.show { display: block; }
.msg.error { background: rgba(229,57,53,0.10); border: 1px solid rgba(229,57,53,0.4); color: #ff8a85; }
.msg.ok { background: rgba(0,200,83,0.08); border: 1px solid rgba(0,200,83,0.35); color: #6ee79b; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-soft); transition: color 0.2s; }
.back-link:hover { color: var(--accent); }

/* ---------- DASHBOARD ---------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(20px, 4vw, 56px); background: rgba(10,10,12,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-brand .mk { width: 40px; height: 30px; }
.topbar-brand .mk img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) saturate(100%) invert(72%) sepia(48%) saturate(479%) hue-rotate(2deg) brightness(91%) contrast(86%); }
.topbar-brand b { font-family: var(--display); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; font-size: 15px; }
.topbar-right { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted-soft); }
.btn-ghost { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-soft); background: none; border: 1px solid var(--rule); padding: 9px 14px; cursor: pointer; transition: border-color .2s, color .2s; }
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

.shell { max-width: 1100px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 40px) 80px; }
.dash-head { margin-bottom: 36px; }
.dash-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 46px); line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; margin: 10px 0 8px; }
.dash-head .qlabel { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }

.hero-ff { background: linear-gradient(135deg, rgba(201,151,77,0.14), rgba(201,151,77,0.04)); border: 1px solid rgba(201,151,77,0.35); padding: clamp(24px, 4vw, 40px); margin-bottom: 28px; }
.hero-ff .lab { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.hero-ff .big { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 12vw, 120px); line-height: 0.9; letter-spacing: -0.04em; color: var(--accent); margin: 8px 0; }
.hero-ff .bar { height: 8px; background: var(--surface); border-radius: 99px; overflow: hidden; margin-top: 14px; }
.hero-ff .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.6s ease; }
.hero-ff .sub { font-family: var(--mono); font-size: 12px; color: var(--muted-soft); margin-top: 10px; letter-spacing: 0.04em; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--rule); padding: 22px; }
.card .lab { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.card .val { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; margin-top: 10px; }
.card .val.pos { color: var(--success); }
.card .val.neg { color: var(--danger); }

.panel { background: var(--surface); border: 1px solid var(--rule); padding: 24px; margin-top: 24px; }
.panel h3 { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 18px; color: var(--muted-soft); }

/* change chips + card deltas */
.delta { margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
.delta .flat, .hist .chg.flat, .ff-deltas .flat { color: var(--muted); }
.chg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; white-space: nowrap; }
.chg.up   { color: var(--success); }
.chg.down { color: var(--danger); }
.chg.flat { color: var(--muted); }
.ff-deltas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; font-family: var(--mono); font-size: 13px; }
.ff-deltas .sep { color: var(--rule); }

/* quarterly history table */
.table-wrap { overflow-x: auto; }
table.hist { width: 100%; border-collapse: collapse; }
table.hist th { text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.hist th.num, table.hist td.num { text-align: right; }
table.hist td { padding: 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.hist td.q { font-family: var(--mono); font-size: 13px; color: var(--muted-soft); letter-spacing: 0.04em; white-space: nowrap; }
table.hist td .v { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
table.hist td .v.pos { color: var(--success); }
table.hist td .v.neg { color: var(--danger); }
table.hist td .chg { display: block; margin-top: 4px; }
table.hist tbody tr:hover { background: rgba(255,255,255,0.02); }
.hist-note { margin-top: 16px; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--muted); letter-spacing: 0.02em; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted-soft); }
.empty h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 12px; }

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 900px) {
  .portal-wrap { grid-template-columns: 1fr; }
  .portal-aside { min-height: 240px; padding: 36px 26px; }
  .portal-aside p, .portal-aside .formula { display: none; }
  .portal-form-side { padding: 40px 26px; }
  .cards, .cards.two { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cards, .cards.two { grid-template-columns: 1fr; }
}