/* ===== Brand typeface (Starfish brand book §3: Montserrat as the system
   typeface) — vendored locally like every other third-party asset (see
   scripts/vendor-assets.mjs), not loaded from Google Fonts. Both the "latin"
   (ä/ö/ü/õ) and "latin-ext" (š/ž/č) subsets are needed so et/en/lt all render
   correctly; the browser picks the right one per character via unicode-range. */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/vendor/fonts/montserrat-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/vendor/fonts/montserrat-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/vendor/fonts/montserrat-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/vendor/fonts/montserrat-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/vendor/fonts/montserrat-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/vendor/fonts/montserrat-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ===== Global ===== */
* { box-sizing: border-box; }
/* Only individual wide tables/widgets should ever scroll sideways (via their
   own overflow-x-auto wrapper) — the page frame itself never should. Without
   this, a stray absolutely-positioned element that pokes a few px past the
   right edge (e.g. an invisible-until-hover .tooltip-wide popup anchored near
   a narrow mobile viewport's edge) drags the whole body into horizontal
   scroll instead of just being invisibly clipped. Descendants with their own
   overflow-x-auto keep scrolling normally — this only clips at the body
   boundary. */
body { font-family: 'Montserrat', system-ui, -apple-system, sans-serif; overflow-x: hidden; }

/* ===== Navigation ===== */
.nav-item { transition: all 0.2s; cursor: pointer; }
.nav-item:hover { transform: translateY(-1px); }
.nav-item.active { background: linear-gradient(135deg, #005b9f, #1c3267); color: white; box-shadow: 0 4px 12px rgba(0,91,159,0.3); }
.nav-item.completed { border-left: 3px solid #22c55e; }

/* ===== Cards ===== */
.card { background: white; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* ===== Inputs ===== */
.form-input {
  width: 100%; padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 10px;
  font-size: 14px; transition: all 0.2s; background: #f9fafb;
}
.form-input:focus { outline: none; border-color: #005b9f; box-shadow: 0 0 0 3px rgba(0,91,159,0.15); background: white; }
.form-input-sm { padding: 6px 10px; font-size: 13px; }

/* ===== Buttons ===== */
.btn-primary {
  background: linear-gradient(135deg, #ff6500, #e65a00); color: white;
  padding: 12px 28px; border-radius: 12px; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(255,101,0,0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,101,0,0.35); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-secondary {
  background: white; color: #374151; padding: 10px 20px; border-radius: 10px;
  font-weight: 500; border: 1.5px solid #e5e7eb; cursor: pointer; transition: all 0.2s;
}
.btn-secondary:hover { border-color: #005b9f; color: #005b9f; }
.btn-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.btn-danger:hover { background: #fee2e2; }

/* ===== Section Headers ===== */
.section-header {
  background: linear-gradient(135deg, #eef6fb, #dcedf7);
  border-left: 4px solid #005b9f; padding: 16px 20px; border-radius: 0 12px 12px 0;
  margin-bottom: 24px;
}

/* ===== Status Badges ===== */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-red { background: #fef2f2; color: #991b1b; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-gray { background: #f3f4f6; color: #4b5563; }

/* ===== Level Indicator ===== */
.level-step { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.level-step.active { background: linear-gradient(135deg, #ff6500, #e65a00); color: white; box-shadow: 0 2px 8px rgba(255,101,0,0.3); }
.level-step.done { background: #dcfce7; color: #166534; }
.level-step.future { background: #f3f4f6; color: #9ca3af; }
.level-connector { width: 60px; height: 3px; }
.level-connector.done { background: #22c55e; }
.level-connector.future { background: #e5e7eb; }

/* ===== Tooltip ===== */
.tooltip { position: relative; }
.tooltip::after {
  content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: #1f2937; color: white; padding: 4px 10px; border-radius: 6px; font-size: 12px;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 20;
}
.tooltip:hover::after { opacity: 1; }
/* Wraps instead of one long unbroken line — for calculation breakdowns with real numbers. */
.tooltip-wide::after { white-space: pre-line; width: 220px; max-width: 60vw; text-align: left; line-height: 1.4; }
/* For icons near a scrollable container's left edge (e.g. inside a table's
   overflow-x-auto wrapper) — centered positioning pushes half the tooltip off
   the left, where it gets clipped instead of just scrolling into view. */
.tooltip-left::after { left: 0; transform: none; }
/* For icons in a table header row inside an overflow-x-auto wrapper — setting
   overflow-x implicitly makes overflow-y "auto" too (a CSS default), so a
   tooltip opening upward (the default) has nowhere to go and gets clipped
   against the container's top edge. Opens downward instead. */
.tooltip-down::after { bottom: auto; top: 100%; }

/* ===== Slider ===== */
input[type="range"] { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 5px; background: #e5e7eb; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #ff6500; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* ===== Animations ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.slide-up { animation: slideUp 0.5s ease; }
@keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
.pulse-green { animation: pulse-green 2s infinite; }

/* ===== AI Modal ===== */
#ai-modal .backdrop-blur-sm { backdrop-filter: blur(4px); }
#ai-stream-text h2, #ai-stream-text h3, #ai-stream-text h4 { margin-top: 1rem; }
#ai-stream-text ul { list-style: none; padding: 0; }
#ai-stream-text strong { color: #1f2937; }

/* ===== AI sparkle button ===== */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.ai-shimmer {
  background: linear-gradient(90deg, #9333ea 0%, #6366f1 25%, #a855f7 50%, #6366f1 75%, #9333ea 100%);
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: 280px; }
  .mobile-menu { display: flex !important; }
}