/* ===================================================================
   Stock Assembler — Global Design System
   "The Private Banker" aesthetic: gold accents, white space, no hard edges
   =================================================================== */

/* --- Fonts --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- Base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', sans-serif;
  background-color: #f8f9fa;   /* surface */
  color: #191c1d;              /* on-surface */
  min-height: 100dvh;
}

/* --- Material Symbols ---------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Glassmorphism ------------------------------------------------- */
.glass-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(248, 249, 250, 0.82);
}
.glass-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.88);
}

/* --- Chart gradient (gold shimmer) --------------------------------- */
.chart-gradient {
  background: linear-gradient(
    180deg,
    rgba(212, 175, 55, 0.08) 0%,
    rgba(212, 175, 55, 0.00) 100%
  );
}

/* --- KPI cards ----------------------------------------------------- */
.kpi-card {
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease;
}
.kpi-card:hover { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.07); }

/* --- Segmented control --------------------------------------------- */
.seg-control { display: flex; background: #e7e8e9; padding: 4px; border-radius: 0.5rem; }
.seg-btn {
  flex: 1; padding: 6px 0; font-size: 12px; font-weight: 500;
  border-radius: 0.375rem; border: none; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  color: #4d4635; background: transparent;
}
.seg-btn.active {
  background: #ffffff;
  color: #191c1d;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* --- Flash messages ------------------------------------------------ */
.flash-message {
  padding: 12px 16px;
  border-radius: 0.75rem;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.flash-success  { background: #d1fae5; color: #065f46; }
.flash-error,
.flash-danger   { background: #ffdad6; color: #93000a; }
.flash-warning  { background: #fffbeb; color: #92400e; }
.flash-info,
.flash-message  { background: #dbe1ff; color: #00174b; }

/* --- Buttons ------------------------------------------------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #735c00; color: #ffffff;
  padding: 10px 20px; border-radius: 9999px;
  font-size: 14px; font-weight: 600; border: none; cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primary:hover  { background: #5a4700; }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: #735c00;
  padding: 10px 20px; border-radius: 9999px;
  font-size: 14px; font-weight: 600;
  border: 1.5px solid #d0c5af; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-secondary:hover { background: #ffe088; border-color: #d4af37; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: #4d4635;
  padding: 8px 16px; border-radius: 9999px;
  font-size: 13px; font-weight: 500; border: none; cursor: pointer;
  transition: background 0.15s ease;
}
.btn-ghost:hover { background: #edeeef; }

.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #ba1a1a; color: #ffffff;
  padding: 10px 20px; border-radius: 9999px;
  font-size: 14px; font-weight: 600; border: none; cursor: pointer;
  transition: background 0.15s ease;
}
.btn-danger:hover { background: #93000a; }

/* --- Form inputs --------------------------------------------------- */
.form-input {
  width: 100%; padding: 12px 16px;
  background: #f3f4f5; border: 1.5px solid transparent;
  border-radius: 0.75rem; font-size: 14px; color: #191c1d;
  transition: border-color 0.15s ease, background 0.15s ease;
  outline: none;
}
.form-input:focus {
  border-color: #d4af37;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12);
}
.form-input::placeholder { color: #7f7663; }

.form-label {
  display: block; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: #4d4635; margin-bottom: 6px;
}

/* --- Table --------------------------------------------------------- */
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: #4d4635; padding: 10px 14px;
  background: #f3f4f5; text-align: left;
}
.data-table th:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.data-table th:last-child  { border-radius: 0 0.5rem 0.5rem 0; }
.data-table td {
  font-size: 13px; padding: 12px 14px; color: #191c1d;
  border-bottom: 1px solid #f3f4f5;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #fffbeb; }

/* --- Bottom nav ---------------------------------------------------- */
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 6px 12px;
  border-radius: 0.75rem; color: #7f7663;
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
  min-width: 56px;
}
.bottom-nav-item:hover { color: #4d4635; }
.bottom-nav-item.active {
  color: #735c00;
  background: rgba(212, 175, 55, 0.12);
}

/* --- Section label ------------------------------------------------- */
.section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: #7f7663; margin-bottom: 12px;
}

/* --- Insight callout ----------------------------------------------- */
.insight-callout {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(212, 175, 55, 0.04));
  border-left: 3px solid #d4af37;
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 14px 18px;
  font-size: 14px; font-style: italic; color: #4d4635;
}

/* --- Sector badge -------------------------------------------------- */
.sector-badge {
  display: inline-block; padding: 2px 10px;
  background: rgba(212, 175, 55, 0.12); color: #574500;
  border-radius: 9999px; font-size: 11px; font-weight: 600;
}

/* --- Autocomplete dropdown ----------------------------------------- */
.autocomplete-list {
  position: absolute; z-index: 100; width: 100%;
  background: #ffffff; border-radius: 0.75rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  overflow: hidden; margin-top: 4px;
}
.autocomplete-item {
  padding: 10px 16px; font-size: 13px; cursor: pointer;
  transition: background 0.1s ease;
}
.autocomplete-item:hover { background: #fffbeb; }

/* --- Spinner ------------------------------------------------------- */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid #d0c5af;
  border-top-color: #735c00;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Scrollbar (Webkit) -------------------------------------------- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d0c5af; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #7f7663; }

/* --- Utilities ------------------------------------------------------ */
.text-positive { color: #065f46; }
.text-negative { color: #ba1a1a; }
.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}