/* ================================================================
 * BASE STYLES  |  Law of Loss Trading Platform  v0.3
 * ================================================================
 * Reset, global element defaults, layout primitives.
 * Must load after tokens.css, before any component stylesheet.
 * ================================================================ */

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

/* ── Root ─────────────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Disable iOS Safari automatic text inflation — without this it
   * enlarges text inside full-width blocks but not narrow ones, so
   * field labels in single fields looked bigger than those inside
   * two-column .field-grid rows. Keeps all text at its defined size. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background:   var(--bg);
  color:        var(--text);
  font-family:  var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height:   100vh;
  padding-bottom: 3rem;
}

/* ── Motion: gentle content entrance + shared easing ──────────── */
@keyframes lot-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.container { animation: lot-fade-in var(--t-slow) var(--ease) both; }

/* Consistent keyboard focus ring (gold) across interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Layout container ─────────────────────────────────────── */
.container {
  max-width: 560px;
  margin:    0 auto;
  padding:   0 1rem;
}

@media (min-width: 480px) {
  .container { padding: 0 1.25rem; }
}

/* ── Section block ────────────────────────────────────────── */
.section-block { margin-top: 1.5rem; }

.section-header {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-bottom: 0.85rem;
}

.section-badge {
  width:  22px;
  height: 22px;
  border-radius: 50%;
  font-size:   11px;
  font-weight: 600;
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-title {
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-3);
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem;
  box-shadow:    var(--shadow);
  transition:    border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.card:hover { border-color: var(--border-2); }

/* ── App navigation bar ───────────────────────────────────── */
/* Four fixed links: Trader Profile | New Trade | Trade Log | Dashboard
   Replaces the old workflow-step strip. Each page marks its own
   link .active; mid-trade pages (Execution, Review, Summary) mark
   Trade Log as .done. Dashboard is a plain <span> until P4 ships. */
.progress-bar {
  padding:    0.85rem 1.25rem;
  display:    flex;
  gap:        8px;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position:   sticky;
  top:        0;
  z-index:    9;
  /* Frosted emerald bar so it stays legible over scrolling content. */
  background:      rgba(11,15,23,0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:  1px solid var(--border);
}

.progress-step {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity:        0.55;
  white-space:    nowrap;
  padding:        4px 2px;
  transition:     opacity var(--t) var(--ease), color var(--t) var(--ease);
}

/* Active page — full opacity, bold, gold underline to anchor it */
.progress-step.active {
  opacity:        1;
  font-weight:    700;
  color:          var(--text);
  border-bottom:  2px solid var(--accent);
}

/* Done / visited link — slightly brighter than inactive */
.progress-step.done { opacity: 0.75; }

/* Dashboard (not yet built) — visibly disabled */
.progress-step.disabled {
  opacity: 0.25;
  cursor:  default;
}

/* Reset anchor defaults for nav links */
a.progress-step {
  text-decoration: none;
  cursor:          pointer;
}
a.progress-step:hover { opacity: 1; color: var(--text); }

.progress-dot {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--text-3);
  opacity:       0.35;
  flex-shrink:   0;
}

/* ── Page header ──────────────────────────────────────────── */
/* The header scrolls away with the page so the nav bar (.progress-bar,
 * sticky top:0 below) stays pinned and visible while scrolling. Both
 * being sticky at top:0 would hide the nav behind the header. */
.page-header {
  padding:  1.5rem 1.25rem 1.1rem;
}

.page-header .eyebrow {
  font-size:      10px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom:  4px;
  opacity:        0.8;
}

.page-header h1 {
  font-family:    var(--font-body);
  font-size:      1.35rem;
  font-weight:    400;
  color:          var(--text);
  letter-spacing: -0.01em;
  line-height:    1.2;
}

@media (min-width: 480px) {
  .page-header          { padding: 2rem 1.5rem 1.25rem; }
  .page-header h1       { font-size: 1.55rem; }
}

/* ── Form elements ────────────────────────────────────────── */
.field-group            { margin-bottom: 1rem; }
.field-group:last-child { margin-bottom: 0; }

.field-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}

@media (max-width: 480px) {
  .field-grid { grid-template-columns: 1fr; }
}

label {
  display:        block;
  font-size:      12px;
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--text-2);
  margin-bottom:  6px;
}

input[type="text"],
input[type="number"],
input[type="date"],
select {
  width:          100%;
  background:     var(--surface-2);
  border:         1px solid var(--border);
  border-radius:  var(--radius-sm);
  padding:        10px 12px;
  font-size:      15px;
  font-family:    var(--font-ui);
  color:          var(--text);
  outline:        none;
  transition:     border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance:     none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus {
  border-color: var(--accent);
  background:   var(--surface);
  box-shadow:   0 0 0 2px var(--ring);
}

input[type="number"] {
  font-family:    var(--font-mono);
  letter-spacing: 0.02em;
}

select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235E6A80' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
  padding-right:       32px;
  cursor:              pointer;
}

.field-hint {
  font-size: 11px;
  color:     var(--text-3);
  margin-top: 5px;
}

/* ── Input with inline suffix (e.g. %) ───────────────────── */
.input-with-suffix {
  position: relative;
}
.input-with-suffix input {
  padding-right: 3rem;
}
/* Render the unit as a distinct chip on the right (with a divider) so
 * it's obvious the field is a percentage — a faint floating "%" was
 * easy to miss (user testing, 30 Jun). */
.input-suffix {
  position:       absolute;
  right:          1px;
  top:            1px;
  bottom:         1px;
  display:        flex;
  align-items:    center;
  padding:        0 12px;
  font-size:      14px;
  font-weight:    700;
  color:          var(--text-2);
  background:     var(--surface-2);
  border-left:    1px solid var(--border);
  border-radius:  0 var(--radius-sm) var(--radius-sm) 0;
  pointer-events: none;
  user-select:    none;
}

/* ── Detail card (read-only data rows) ───────────────────── */
.detail-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow);
  margin-top:    1.5rem;
}

.detail-card-header {
  padding:        0.85rem 1.1rem;
  background:     var(--surface-2);
  border-bottom:  1px solid var(--border);
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-3);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
}

.detail-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0.75rem 1.1rem;
  border-bottom:   1px solid var(--border);
  gap:             1rem;
}

.detail-row:last-child { border-bottom: none; }

.detail-key {
  font-size:  12px;
  color:      var(--text-3);
  flex-shrink: 0;
}

.detail-val {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text);
  text-align:  right;
}

.detail-val.mono  { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.detail-val.red   { font-family: var(--font-mono); font-weight: 700; color: var(--loss-red); }
.detail-val.green { font-family: var(--font-mono); font-weight: 700; color: var(--profit-green); }

/* ── Status badge ─────────────────────────────────────────── */
.status-badge {
  display:        inline-block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:        3px 8px;
  border-radius:  4px;
}

/* H23: RISK_PLANNED is the new name (was RISK_ASSESSED).
   Legacy rule retained — pre-H23 records still carry RISK_ASSESSED. */
.status-badge.RISK_PLANNED  { background: var(--green-lt); color: var(--green-md); }
.status-badge.RISK_ASSESSED { background: var(--green-lt); color: var(--green-md); }
.status-badge.EXECUTED      { background: var(--blue-lt);  color: var(--blue-md);  }
.status-badge.CLOSED        { background: var(--purple-lt);  color: var(--purple-text); }

/* ── Direction badge ──────────────────────────────────────── */
.direction-badge {
  display:        inline-block;
  padding:        2px 8px;
  border-radius:  4px;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.direction-badge.buy  { background: var(--green-lt); color: var(--green-md); }
.direction-badge.sell { background: var(--loss-bg);  color: var(--loss-red); }

/* ── Validation banner ────────────────────────────────────── */
.validation-banner {
  background:    var(--warn-bg);
  border:        1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding:       10px 12px;
  font-size:     13px;
  color:         var(--warn-text);
  margin-top:    0.75rem;
  display:       none;
}

.validation-banner.visible { display: block; }

/* ── Info banner (H23-8) ──────────────────────────────────────
   Purely informational guidance — distinct from .validation-banner
   (which signals an error). Uses blue tokens, not warning tokens. */
.info-banner {
  background:    var(--blue-lt);
  border:        1px solid var(--blue-md);
  border-radius: var(--radius-sm);
  padding:       10px 12px;
  font-size:     13px;
  color:         var(--blue-md);
  margin-top:    0.75rem;
}

/* ── Button hint ──────────────────────────────────────────── */
.btn-hint {
  text-align:  center;
  font-size:   11px;
  color:       var(--text-3);
  margin-top:  8px;
  line-height: 1.5;
}

/* Item 6: prominent, tappable "what's missing" hint when the CTA is
 * disabled — the faint 11px hint above was easy to miss (user testing). */
.btn-hint.btn-hint-missing {
  font-size:     13px;
  color:         var(--warn-text);
  background:    var(--warn-bg);
  border:        1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding:       10px 12px;
  cursor:        pointer;
}
.btn-hint.btn-hint-missing strong { color: var(--warn-text); font-weight: 700; }
.btn-hint.btn-hint-missing:hover { filter: brightness(0.985); }

/* ── Nav back link ────────────────────────────────────────── */
.back-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       13px;
  font-weight:     500;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  text-decoration: none;
}

/* ── Nav row ──────────────────────────────────────────────── */
.nav-row {
  padding-top: 0.85rem;
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* ── Error / not-found state ──────────────────────────────── */
.error-state {
  text-align: center;
  padding:    3rem 1.5rem;
}

.error-state h2 { font-size: 1.2rem; color: var(--text-2); margin-bottom: 0.75rem; }
.error-state p  { font-size: 14px;  color: var(--text-3); line-height: 1.6; margin-bottom: 1.5rem; }

/* ── Danger button (delete / destructive actions) ─────────── */
.danger-btn {
  display:      block;
  width:        100%;
  padding:      12px;
  background:   transparent;
  border:       1.5px solid var(--loss-red);
  border-radius: var(--radius-md);
  font-family:  var(--font-ui);
  font-size:    14px;
  font-weight:  600;
  color:        var(--loss-red);
  cursor:       pointer;
  transition:   background 0.15s, color 0.15s;
  text-align:   center;
}
.danger-btn:hover { background: var(--loss-bg); }

/* ── Delete confirmation modal ────────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.55);
  z-index:         200;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1rem;
}

.modal-box {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.5rem;
  max-width:     420px;
  width:         100%;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.3);
}

.modal-title {
  font-size:    1rem;
  font-weight:  700;
  color:        var(--loss-red);
  margin-bottom: 0.85rem;
}

.modal-advisory {
  background:    var(--warn-bg);
  border:        1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding:       10px 12px;
  font-size:     13px;
  color:         var(--warn-text);
  margin-bottom: 1rem;
  line-height:   1.5;
}

.modal-body {
  font-size:     13px;
  color:         var(--text-2);
  margin-bottom: 1rem;
  line-height:   1.55;
}

.modal-download-btn {
  display:       block;
  width:         100%;
  padding:       10px;
  background:    transparent;
  border:        1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  font-family:   var(--font-ui);
  font-size:     13px;
  font-weight:   600;
  color:         var(--accent);
  cursor:        pointer;
  margin-bottom: 1rem;
  transition:    background 0.15s;
}
.modal-download-btn:hover { background: var(--surface-2); }

.modal-actions {
  display:    flex;
  gap:        10px;
  margin-top: 1.25rem;
}

.modal-cancel-btn {
  flex:          1;
  padding:       11px;
  background:    transparent;
  border:        1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family:   var(--font-ui);
  font-size:     14px;
  font-weight:   600;
  color:         var(--text-2);
  cursor:        pointer;
  transition:    background 0.15s;
}
.modal-cancel-btn:hover { background: var(--surface-2); }

.modal-confirm-btn {
  flex:          1;
  padding:       11px;
  background:    var(--loss-solid);
  border:        none;
  border-radius: var(--radius-sm);
  font-family:   var(--font-ui);
  font-size:     14px;
  font-weight:   700;
  color:         #fff;
  cursor:        pointer;
  transition:    opacity 0.15s;
}
.modal-confirm-btn:disabled           { opacity: 0.35; cursor: default; }
.modal-confirm-btn:not(:disabled):hover { opacity: 0.85; }

/* ── Spacer ───────────────────────────────────────────────── */
.spacer-sm { height: 1rem; }
.spacer-md { height: 2rem; }