:root{
  --bg:#f7f8fb; --panel:#ffffff; --text:#1f2937; --muted:#6b7280;
  --primary:#2563eb; --primary-600:#1d4ed8; --success:#059669; --danger:#dc2626; --warning:#d97706;
  --border:#e5e7eb; --chip:#eef2ff;

  /* LIGHT: yellow form fields */
  --field-bg:#fffbe6;
  --field-bg-focus:#fff3b0;
  --field-border: color-mix(in srgb, var(--primary) 10%, var(--border));

  /* vertical breathing room between stacked inputs & the next label */
  --field-stack-gap: clamp(8px, 0.7vw, 14px);
  /* width used for unit dropdowns / suffix controls */
  --suffix-width: 140px;
}
@media (prefers-color-scheme: dark){
  :root{
    /* darker base for a deeper dark mode */
    --bg:#000000; --panel:#07080a; --text:#e5e7eb; --muted:#9ca3af;
    /* slightly brighter primary so accents pop on black */
    --primary:#60a5fa; --primary-600:#2563eb; --success:#34d399; --danger:#f87171; --warning:#f59e0b;
    /* subtle, near-black borders and chips */
    --border:#0e1114; --chip:#05060a;

    /* DARK: make blue input fields a bit lighter/stronger so they pop */
    --field-bg: rgba(59,130,246,.28);
    --field-bg-focus: rgba(59,130,246,.48);
    --field-border: color-mix(in srgb, var(--primary) 65%, var(--border));
  }
}
:root[data-theme="light"]{
  --bg:#f7f8fb; --panel:#ffffff; --text:#1f2937; --muted:#6b7280; --primary:#2563eb; --primary-600:#1d4ed8; --success:#059669; --danger:#dc2626; --warning:#d97706; --border:#e5e7eb; --chip:#eef2ff;
  --field-bg:#fffbe6; --field-bg-focus:#fff3b0; --field-border: color-mix(in srgb, var(--primary) 10%, var(--border));
}
:root[data-theme="dark"]{
  /* darker base for a deeper dark mode */
  --bg:#000000; --panel:#07080a; --text:#e5e7eb; --muted:#9ca3af;
  /* slightly brighter primary so accents pop on black */
  --primary:#60a5fa; --primary-600:#2563eb; --success:#34d399; --danger:#f87171; --warning:#f59e0b;
  /* subtle, near-black borders and chips */
  --border:#0e1114; --chip:#05060a;

  /* DARK: make blue input fields a bit lighter/stronger so they pop */
  --field-bg: rgba(59,130,246,.28); --field-bg-focus: rgba(59,130,246,.48); --field-border: color-mix(in srgb, var(--primary) 65%, var(--border));
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-size:clamp(14px, min(1.05vw, 1.2vh), 22px)}
body{
  display:flex; flex-direction:column; min-height:100svh; margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(900px 600px at 120% 0%, rgba(34,197,94,.10), transparent 50%),
    var(--bg);
  color:var(--text);
}
header{position:sticky; top:0; z-index:5; backdrop-filter:saturate(1.3) blur(6px); background: color-mix(in srgb, var(--panel) 92%, transparent); border-bottom:1px solid var(--border);} 
.wrap{width:min(2200px, 98vw); margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:12px}
.title{font-weight:700; letter-spacing:.2px}
.spacer{flex:1}

.btn{appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:10px 14px; border-radius:10px; cursor:pointer; transition:.15s transform ease,.2s background ease; font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--primary); color:#fff; border-color:transparent}
.btn.primary:hover{background:var(--primary-600)}
.btn.ghost{background:transparent}

main{flex:1}
.grid{
  width:min(2200px, 98vw); margin:24px auto;
  display:grid; gap:clamp(16px, 1.2vw, 28px);
  grid-template-columns:1.1fr .9fr; align-items:stretch;
}
@media (max-width: 1100px){ .grid{grid-template-columns:1fr} }
@media (min-width: 1920px){
  .grid{grid-template-columns:1.05fr .95fr}
  .btn{padding:clamp(12px,1.1vw,18px) clamp(14px,1.2vw,20px)}
  label{font-size:1rem}
  .kpi{font-size:clamp(1.6rem, 1.6vw, 2.2rem)}
}

.card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  height:100%; display:flex; flex-direction:column; overflow:hidden;
}
.card > .card-h{
  padding:clamp(16px,1.2vw,24px) clamp(18px,1.4vw,28px);
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:clamp(10px,0.8vw,16px)
}
.card > .card-b{
  padding:clamp(16px,1.2vw,24px) clamp(18px,1.4vw,28px);
  flex:1; overflow:hidden
}

.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(12px,1vw,24px); align-items:start}
.two-col.aligned-row{align-items:flex-start}
@media (max-width:700px){.two-col{grid-template-columns:1fr}}

label{font-weight:700; display:block; margin-bottom:6px}
.group-label{
  font-weight:700;
  display:block;
  margin-bottom:6px;
  white-space:nowrap;
}
.chip{font-size:.75rem; color:var(--primary); background:var(--chip); padding:2px 8px; border-radius:999px; border:1px solid var(--border)}
.help{font-size:.85rem; color:var(--muted)}

/* Inputs/selects — field theme */
.field{
  display:grid;
  /* allow the suffix (dropdown) to grow but keep a sensible min/max for balance */
  grid-template-columns: 1fr minmax(var(--suffix-width), 220px);
  align-items:center;
  gap:12px;
  margin-bottom: var(--field-stack-gap);
  width: 100%;
}
.field > *{min-width:0}

/* Row that holds an input + its suffix/select so they align horizontally */
.control-row{
  display:flex;
  gap:12px;
  align-items:stretch;
  width:100%;
  margin-bottom:var(--field-stack-gap);
}
.control-row > *{
  flex:1 1 0;
  min-width:0;
  margin-bottom:0;
  height:100%;
}
.control-row select{
  flex:0 0 var(--suffix-width);
  max-width:220px;
}

/* Future control containers stay flush (spacing handled by parent gaps) */
#futureRevenueAbsoluteContainer,
#futureRevenuePercentageContainer,
#futureRevenueCompoundedContainer,
#futureSharesInputContainer,
#futureSharesPercentageContainer{
  margin:0;
}
/* Standard input/select styling */
input[type="text"], input[type="number"], select, textarea{
  display: block;
  width: 100%;
  max-width: 100%;
  /* restore original responsive padding for a modern look */
  padding: clamp(12px, 1.1vw, 16px);
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
  margin-bottom: var(--field-stack-gap);
}

input:focus, select:focus, textarea:focus{
  background: var(--field-bg-focus);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
}

input:disabled, select:disabled, textarea:disabled{
  opacity: .9; filter: saturate(.85); cursor: not-allowed;
}

#date{width:100%}

/* keep these three as-is (no extra bottom gap) */
#futureRevenueMode, #futureSharesMode, #futurePE{ margin-bottom: 0; }

/* extra subtle space for stacked blocks */
.two-col > div{ margin-bottom: 6px; }

.ac{position:relative; width:100%}
.ac-list{position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; display:none; z-index:5}
.ac-list.show{display:block}
.ac-item{padding:10px 12px; cursor:pointer}
.ac-item:hover{background:color-mix(in srgb, var(--primary) 12%, transparent)}
/* highlighted/selected suggestion (keyboard navigation) */
.ac-item.selected{background:color-mix(in srgb, var(--primary) 18%, transparent)}
.ac-item strong{display:inline-block; width:90px}
.ac-item .ac-name{color:var(--muted); margin-left:6px}

/* Table (no bottom rules) */
.table{width:100%; border-collapse:collapse}
/* removed table line under Future EPS */
.table th, .table td{padding:10px 6px; text-align:left; border:none !important}
.table th{font-size:.85rem; color:var(--muted); font-weight:700}

.kpi{font-weight:800; font-size:1.6rem}
.kpi.success{color:var(--success)}
.kpi.danger{color:var(--danger)}

.pill{display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; background:var(--chip); border:1px solid var(--border)}
.inline-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Outcome flags */
.flags{display:grid; gap:8px; margin-top:8px}
.flag{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:color-mix(in srgb, var(--panel) 92%, transparent); font-weight:700}
.flag.bad{border-color:var(--danger); color:var(--danger)}
.flag.warn{border-color:var(--warning); color:var(--warning)}
.flag.good{border-color:var(--success); color:var(--success)}

/* Toast */
.toast{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); background:#111827; color:white; padding:10px 14px; border-radius:10px; opacity:0; pointer-events:none; transition:.25s}
.toast.show{opacity:1}

/* Keep the future revenue inputs visible when zooming.
   The app toggles visibility of these containers via JS; when shown,
   ensure they don't collapse to 0 width at extreme zoom levels.
*/
#futureRevenueAbsoluteContainer,
#futureRevenuePercentageContainer,
#futureRevenueCompoundedContainer,
#futureSharesInputContainer,
#futureSharesPercentageContainer {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
}


/* Future controls: stack label above the control row in the right column
   Parent is a vertical stack (label on top, controls row beneath). Inner divs
   remain horizontal so input + suffix remain side-by-side. This keeps desktop
   layout aligned with the left column labels while preserving control-row layout.
*/
#futureRevenueControls,
#futureSharesControls {
  display: flex;
  flex-direction: column; /* stack label above controls */
  gap: 0;
  align-items: flex-start; /* left-align the label and control row within the column */
  width: 100%;
}
#futureRevenueControls > *,
#futureSharesControls > * {
  width: 100%;
}

/* Right-column control blocks receive their own group label above the flex container,
   so we just need standard spacing without extra hidden-label tweaks. */

/* Each mode container inside the controls aligns its input + select horizontally */
#futureRevenueControls > div,
#futureSharesControls > div {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Standardize containers that are input + select pairs so children align horizontally */
#futureRevenueCompoundedContainer,
#futureSharesInputContainer,
#futureRevenuePercentageContainer,
#futureRevenueAbsoluteContainer {
  display: flex;
  flex-direction: column;
  gap: var(--field-stack-gap);
  width: 100%;
}

/* Make suffix dropdowns have a sensible min width but allow them to size naturally */
#futureSharesSuffix,
#futureRevenueSuffix {
  min-width: var(--suffix-width);
  width: auto;
}

/* Ensure all inputs take full remaining space */
#futureRevenueCompounded,
#futureShares,
#futureRevenueAbsolute,
#futureRevenuePercent {
  width: 100%;
}

#futureRevenueAbsoluteContainer input,
#futureRevenueAbsoluteContainer select,
#futureRevenuePercentageContainer input,
#futureRevenuePercentageContainer select,
#futureRevenueCompoundedContainer input,
#futureRevenueCompoundedContainer select{
  min-width:80px;
  width:100%;
}

#futureRevenueDirection,
#futureRevenueCompoundedDirection,
#futureSharesDirection {
  flex:0 0 var(--suffix-width);
  max-width:220px;
}

@media (max-width:480px){
  /* On narrow viewports or heavy zoom, stack the input + suffix so both remain usable */
  .control-row{
    flex-direction:column;
    align-items:stretch;
  }
  .control-row select{
    flex:1 1 auto;
    max-width:100%;
  }
  #futureRevenueControls,
  #futureSharesControls{
    flex-direction:column;
    align-items:stretch;
  }
}