/* ============================
   Fonts
   ============================ */
@font-face { font-family: "NexaRegular"; src: url("/assets/NexaRegularDescription.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "NexaHeavy";   src: url("/assets/NextHeavyTitle.otf") format("opentype");       font-display: swap; }
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:wght@500;700;800&display=swap');

/* Hide unmounted Vue */
[v-cloak]{ display:none; }

/* ============================
   Root tokens
   ============================ */
:root{
  --r-s:10px; --r-m:14px; --r-lg:18px; --r-xl:24px;
  --gap-s:8px; --gap-m:14px; --gap-lg:20px; --gap-xl:28px;

  --font-ui:"Inter","Plus Jakarta Sans","NexaRegular",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:"Plus Jakarta Sans","NexaHeavy","Inter",sans-serif;

  --gold-1:#fbb83c; --gold-2:#ffd700; --brand-gold:linear-gradient(135deg,var(--gold-1),var(--gold-2));
}

/* ============================
   THEMES
   ============================ */
.theme--light{
  --bg:#eef2f5; --panel:#ffffff; --panel2:#f7f9fb;
  --ink:#12181c; --muted:#5e6b75; --teal:#0aa39b; --edge:rgba(0,0,0,.06);

  --teal-ripple: rgba(10,163,155,.35);

  --hc-ink:#12181c;
  --hc-sub:#5e6b75;
  --hc-grid:rgba(18,24,28,.08);
  --hc-axis-line:rgba(18,24,28,.12);
  --hc-accent:#0aa39b;
  --hc-accent-2:#3a57ff;
  --hc-area-0:rgba(10,163,155,.22);
  --hc-area-1:rgba(10,163,155,.05);
  --hc-tooltip-bg:#ffffff;
  --hc-tooltip-border:rgba(18,24,28,.10);
  --hc-shadow:rgba(17,24,28,.12);
  --hc-navigator-mask:rgba(10,163,155,.12);
  --hc-navigator-bg:rgba(18,24,28,.04);
  --hc-scrollbar:#cfd8df;
  --hc-range-btn-bg:#f4f6f8;
  --hc-range-btn-border:#d9e2e8;
  --hc-range-btn-text:#5e6b75;
  --hc-range-btn-bg-active:#0aa39b;
  --hc-range-btn-text-active:#ffffff;
  --hc-legend-dim:rgba(18,24,28,.35);
}

.theme--dark{
  --bg:#0b1114; --panel:#111b20; --panel2:#0f191e;
  --ink:#e9f1f5; --muted:#a9bac4; --teal:#18cfc0; --edge:rgba(233,241,245,.08);

  --teal-ripple: rgba(24,207,192,.40);

  --hc-ink:#e9f1f5;
  --hc-sub:#b5c3cc;
  --hc-grid:rgba(233,241,245,.10);
  --hc-axis-line:rgba(233,241,245,.16);
  --hc-accent:#18cfc0;
  --hc-accent-2:#6da3ff;
  --hc-area-0:rgba(24,207,192,.24);
  --hc-area-1:rgba(24,207,192,.08);
  --hc-tooltip-bg:#0f171b;
  --hc-tooltip-border:rgba(233,241,245,.14);
  --hc-shadow:rgba(0,0,0,.40);
  --hc-navigator-mask:rgba(24,207,192,.18);
  --hc-navigator-bg:rgba(233,241,245,.06);
  --hc-scrollbar:#243036;
  --hc-range-btn-bg:#101a20;
  --hc-range-btn-border:#2a3a41;
  --hc-range-btn-text:#a9bac4;
  --hc-range-btn-bg-active:#18cfc0;
  --hc-range-btn-text-active:#0b1114;
  --hc-legend-dim:rgba(233,241,245,.40);
}

/* App background */
.theme--light body,
.theme--light .v-application{
  background:
    radial-gradient(1000px 700px at 80% -10%, rgba(10,163,155,.10), transparent 55%),
    radial-gradient(900px 600px at -10% 10%, rgba(251,184,60,.08), transparent 55%),
    var(--bg) !important;
  color:var(--ink);
  font-family:var(--font-ui);
}
.theme--dark body,
.theme--dark .v-application{
  background:
    radial-gradient(1000px 700px at 80% -10%, rgba(24,207,192,.12), transparent 55%),
    radial-gradient(900px 600px at -10% 10%, rgba(251,184,60,.10), transparent 55%),
    var(--bg) !important;
  color:var(--ink);
  font-family:var(--font-ui);
}

/* App bar */
.appbar.v-app-bar{
  border-bottom:1px solid var(--edge);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  background:
    linear-gradient(180deg, rgba(11,143,137,.35), rgba(11,143,137,0)),
    linear-gradient(135deg, var(--panel), var(--panel2)) !important;
}

/* System bar (chips & wrapping) */
.systembar {
  padding-inline: 4px !important;
}
.systembar .system-chip{
  margin: 0 4px;
}

/* Containers & layout */
.page-wrap { padding: 0; }
.store-selector { margin: 16px 0 12px; }

.number-font{
  font-family: var(--font-display);
  letter-spacing:.01em;
}

.highlight{ background: linear-gradient(180deg, rgba(24,207,192,.22), rgba(24,207,192,.10)); padding:0 .15em; border-radius:6px; }

/* Activity status dot */
.status-dot{
  width:9px; height:9px; border-radius:50%;
  display:inline-block; margin-right:8px; flex:0 0 auto;
  background: var(--muted);
  position:relative;
}
.status-dot.is-active{
  background: var(--teal);
  box-shadow: 0 0 0 0 var(--teal-ripple);
  animation: dotPulse 1.8s ease-out infinite;
}
@keyframes dotPulse{
  0%   { box-shadow: 0 0 0 0 var(--teal-ripple); }
  70%  { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Summary cards */
.custom-row{ display:none; margin-bottom:34px !important; }
.summary-card{
  border-left:4px solid transparent; border-image:var(--brand-gold); border-image-slice:1;
  border-radius:var(--r-xl) !important;
  background:linear-gradient(135deg,var(--panel),var(--panel2));
  border:1px solid var(--edge); box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden; min-height:160px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.summary-card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px var(--hc-shadow) !important; }
.summary-card .v-card-title{ width:100%; justify-content:center; }

/* Chart & activity cards */
.chart-container-class, .activity-container-class{ width:100%; margin:0 auto 2rem; padding:0 1rem; }
.chart-card, .activity-card{
  position:relative; overflow:visible !important; border-radius:var(--r-xl) !important;
  background:linear-gradient(135deg,var(--panel),var(--panel2));
  border:1px solid var(--edge); box-shadow:none;
}
#stock-chart{ min-height:440px; width:100%; }

/* Edge-to-edge bleed on mobile (safe-areas respected) */
@media (max-width: 600px){
  .mobile-edge,
  .edge-bleed{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(env(safe-area-inset-left), 0);
    padding-right: max(env(safe-area-inset-right), 0);
  }
  .chart-card, .activity-card{ border-radius: 0 !important; }
}

/* Inputs focus ring */
.v-input input:focus, .v-btn:focus, .v-list-item:focus, .v-chip:focus{
  box-shadow:0 0 0 3px rgba(24,207,192,.28) !important; border-radius:12px;
}

/* Fade-in helper */
.fade-in{ opacity:0; transform:translateY(6px); }

/* Highcharts visual tweaks to follow tokens */
.highcharts-background{ fill:transparent !important; }
.highcharts-title, .highcharts-subtitle {
  font-weight:800; letter-spacing:.01em; text-transform:none;
  fill: var(--hc-ink) !important; color: var(--hc-ink) !important;
}
.highcharts-legend-item text{ font-weight:600; }

/* Range selector button theming via tokens */
.v-application .highcharts-range-selector-group text { fill: var(--hc-sub) !important; }
.v-application .highcharts-range-selector-buttons .highcharts-button .highcharts-button-box{
  fill: var(--hc-range-btn-bg) !important; stroke: var(--hc-range-btn-border) !important;
  opacity:1 !important; rx:10; ry:10;
}
.v-application .highcharts-range-selector-buttons .highcharts-button:hover .highcharts-button-box{ filter:brightness(0.985); }
.v-application .highcharts-range-selector-buttons .highcharts-button text{
  fill: var(--hc-range-btn-text) !important; font-weight:600 !important;
}
.v-application .highcharts-range-selector-buttons .highcharts-button-pressed .highcharts-button-box,
.v-application .highcharts-range-selector-buttons .highcharts-button:active .highcharts-button-box{
  fill: var(--hc-range-btn-bg-active) !important; stroke: var(--hc-range-btn-bg-active) !important;
}
.v-application .highcharts-range-selector-buttons .highcharts-button-pressed text,
.v-application .highcharts-range-selector-buttons .highcharts-button:active text{
  fill: var(--hc-range-btn-text-active) !important;
}

/* Employee dialog */
.progress-striped .v-progress-linear__bar__determinate{
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 8px, rgba(255,255,255,.12) 8px 16px);
}
.emp-dialog-scroll{ max-height: 460px; overflow-y:auto; }
.course-progress-label{ display:flex; align-items:center; justify-content:space-between; font-size:12px; opacity:.84; }

/* Mobile niceties */
@media (max-width: 600px){
  .systembar { height: 40px !important; }
  .systembar .system-chip{ margin: 2px 4px; }
  .summary-card{ min-height: 130px; }
  .activity-toolbar .v-toolbar__content{ padding-left:8px !important; padding-right:8px !important; }
}
    /* Tooltip container (useHTML) + SVG box/text overrides */
    .hc-tip{ background: var(--hc-tooltip-bg); border: 1px solid var(--hc-tooltip-border); color: var(--hc-ink); border-radius: 12px; box-shadow: 0 12px 28px var(--hc-shadow); padding: 10px 12px; min-width: 180px; font-family: var(--font-ui); }
    /* Force the SVG rectangle + text for both themes */
    .theme--light .highcharts-tooltip-box { fill: var(--hc-tooltip-bg) !important; stroke: var(--hc-tooltip-border) !important; }
    .theme--light .highcharts-label.highcharts-tooltip text { fill: var(--hc-ink) !important; }
    .theme--light .highcharts-tooltip span { color: var(--hc-ink) !important; }

    .theme--dark .highcharts-legend-item text { fill: #fff !important; }
    .theme--dark .highcharts-label text { fill: #fff !important; }
    .theme--dark .highcharts-tooltip-box { fill: var(--hc-tooltip-bg) !important; stroke: var(--hc-tooltip-border) !important; }
    .theme--dark .highcharts-tooltip span { color:#fff !important; }
    .theme--dark .hc-tip { color:#fff !important; }

    .progress-striped .v-progress-linear__bar__determinate{
      background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.22) 0 8px, rgba(255,255,255,.12) 8px 16px);
    }
    .emp-dialog-scroll{ max-height: 460px; overflow-y:auto; }
    .course-progress-label{ display:flex; align-items:center; justify-content:space-between; font-size:12px; opacity:.84; }
/* Neutralize HC's default HTML tooltip wrapper */
.highcharts-tooltip { background: transparent !important; }
.highcharts-tooltip > span { background: transparent !important; color: inherit !important; }

/* Our custom HTML tooltip (works in both themes, but force light explicitly) */
.hc-html-tip {
  background: var(--hc-tooltip-bg) !important;
  color: var(--hc-ink) !important;
  border: 1px solid var(--hc-tooltip-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 28px var(--hc-shadow) !important;
  padding: 10px 12px !important;
  min-width: 180px;
  font: 12px/1.35 var(--font-ui, Inter, sans-serif);
}

/* Dark theme override (explicit white text) */
.theme--dark .hc-html-tip { color: #fff !important; }

/* If an SVG tooltip sneaks in, keep it readable too */
.theme--light .highcharts-tooltip-box { fill: var(--hc-tooltip-bg) !important; stroke: var(--hc-tooltip-border) !important; }
.theme--light .highcharts-label.highcharts-tooltip text { fill: var(--hc-ink) !important; }
		/* Ensure everything inside our custom tooltip inherits the right color */
.hc-html-tip,
.hc-html-tip * { color: var(--hc-ink) !important; }

.theme--dark .hc-html-tip,
.theme--dark .hc-html-tip * { color: #fff !important; }
/* 1) Neutralize HC wrapper dimming for both SVG + HTML tooltips */
.highcharts-tooltip { opacity: 1 !important; filter: none !important; background: transparent !important; }
.highcharts-tooltip > span { background: transparent !important; color: inherit !important; }

/* 2) Our custom HTML tooltip: force solid colors on EVERYTHING inside */
.hc-html-tip,
.hc-html-tip * {
  color: var(--hc-ink) !important;            /* light mode ink */
  opacity: 1 !important;                       /* kill any inherited dimming */
  mix-blend-mode: normal !important;
}
.theme--dark .hc-html-tip,
.theme--dark .hc-html-tip * {
  color: #fff !important;                      /* dark mode ink */
}

/* 3) If an SVG tooltip ever appears, keep it readable too */
.theme--light .highcharts-tooltip-box { fill: var(--hc-tooltip-bg) !important; stroke: var(--hc-tooltip-border) !important; }
.theme--light .highcharts-label.highcharts-tooltip text { fill: var(--hc-ink) !important; }
.theme--dark  .highcharts-tooltip-box { fill: var(--hc-tooltip-bg) !important; stroke: var(--hc-tooltip-border) !important; }
.theme--dark  .highcharts-label.highcharts-tooltip text { fill: #fff !important; }
.highcharts-tooltip { opacity: 1 !important; filter: none !important; background: transparent !important; }
.highcharts-tooltip > span { background: transparent !important; color: inherit !important; }
.hc-html-tip, .hc-html-tip * { opacity: 1 !important; mix-blend-mode: normal !important; }
/* TEMP: paint the wrapper so you can select it */
.hc-tip-debug { outline: 1px dashed magenta !important; }

/* your bubble */
.hc-html-tip {
  background: var(--hc-tooltip-bg);
  border: 1px solid var(--hc-tooltip-border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 180px;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}

/* Layout bits */
.hc-row { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.hc-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* TEMP: force text color high-contrast so you see if it sticks */
.theme--light .hc-html-tip, .theme--light .hc-html-tip * { color:#111 !important; }
.theme--dark  .hc-html-tip, .theme--dark  .hc-html-tip * { color:#fff !important; }

/* Also neutralize HC’s default wrappers */
.highcharts-tooltip, .highcharts-tooltip > span { opacity:1 !important; filter:none !important; }
/* Override Highcharts CSS variables using our app's theme switch */
.v-application.theme--light {
  /* Chart + tooltip surfaces */
  --highcharts-background-color: #ffffff;
  --highcharts-tooltip-background-color: #ffffff;
  --highcharts-tooltip-border-color: rgba(18,24,28,.10);

  /* Text (labels, legend, tooltip SVG text) */
  --highcharts-neutral-color-100: #12181c;  /* primary ink */
  --highcharts-neutral-color-80:  #374151;
  --highcharts-neutral-color-60:  #6b7280;
  --highcharts-neutral-color-40:  #9ca3af;
  --highcharts-neutral-color-20:  #d1d5db;
}

.v-application.theme--dark {
  --highcharts-background-color: #0f171b;
  --highcharts-tooltip-background-color: #0f171b;
  --highcharts-tooltip-border-color: rgba(233,241,245,.14);

  --highcharts-neutral-color-100: #ffffff;
  --highcharts-neutral-color-80:  #cbd5e1;
  --highcharts-neutral-color-60:  #98a6b3;
  --highcharts-neutral-color-40:  #7a8791;
  --highcharts-neutral-color-20:  #3b4750;
}

/* Belt-and-suspenders for SVG tooltip (if HC ever uses it) */
.theme--light .highcharts-tooltip-box { fill: var(--highcharts-tooltip-background-color) !important; stroke: var(--highcharts-tooltip-border-color) !important; }
.theme--light .highcharts-label.highcharts-tooltip text { fill: var(--highcharts-neutral-color-100) !important; }
.theme--dark  .highcharts-tooltip-box { fill: var(--highcharts-tooltip-background-color) !important; stroke: var(--highcharts-tooltip-border-color) !important; }
.theme--dark  .highcharts-label.highcharts-tooltip text { fill: #fff !important; }

/* Neutralize any dimming */
.highcharts-tooltip { opacity: 1 !important; filter: none !important; background: transparent !important; }
.highcharts-tooltip > span { background: transparent !important; color: inherit !important; }
/* ============================
   History toolbar spacing
   ============================ */
.activity-toolbar { padding: 0 !important; }

/* Flex row inside the toolbar so content can breathe and wrap on mobile */
.activity-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
}

/* Title block */
.activity-title{
  display:flex; align-items:center; gap:8px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Search wrapper: grows to fill; sets a consistent max on desktop */
.activity-search-wrap{
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}
.activity-search{
  width: 100%;
  max-width: 520px;                 /* desktop cap */
  border-radius: 999px;             /* pill */
}
.activity-search .v-input__control{
  border-radius: 999px !important;
}
.activity-search .v-input__slot{
  border-radius: 999px !important;
}

/* Mobile: full-bleed look and stacked layout */
@media (max-width: 600px){
  .activity-bar{
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 10px;
  }
  .activity-title{
    width: 100%;
    padding-left: env(safe-area-inset-left);
  }
  .activity-search-wrap{
    width: 100%;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .activity-search{
    max-width: none;         /* take full width on mobile */
  }
}
/* ============================
   HISTORY SEARCH – better on mobile/dark teal
   ============================ */

/* Give the search a real pill surface on dark toolbars */
.activity-search.v-text-field > .v-input__control > .v-input__slot {
  border-radius: 999px !important;
}

/* Dark theme, on teal bar */
.theme--dark .activity-toolbar .activity-search .v-input__slot {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.theme--dark .activity-toolbar .activity-search .v-label,
.theme--dark .activity-toolbar .activity-search input {
  color: rgba(255,255,255,.92) !important;
}
.theme--dark .activity-toolbar .activity-search .v-input__icon--prepend .v-icon {
  color: rgba(255,255,255,.92) !important;
}

/* Light theme, on light teal bar */
.theme--light .activity-toolbar .activity-search .v-input__slot {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}
.theme--light .activity-toolbar .activity-search .v-label,
.theme--light .activity-toolbar .activity-search input {
  color: #1a1a1a !important;
}

/* Layout: bar wraps cleanly; search tucks right on desktop, full width on phones */
.activity-toolbar { padding: 0 !important; }
.activity-bar{
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px;
}
.activity-title{ display:flex; align-items:center; gap:8px; font-weight:700; letter-spacing:.2px; }
.activity-search-wrap{ flex: 1 1 auto; display:flex; justify-content:flex-end; }
.activity-search{ width: 100%; max-width: 520px; }

/* Mobile: stack + edge spacing */
@media (max-width:600px){
  .activity-bar{ flex-wrap: wrap; gap: 10px; padding: 10px 10px; }
  .activity-title{ width:100%; padding-left: env(safe-area-inset-left); }
  .activity-search-wrap{ width:100%; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .activity-search{ max-width: none; }
}

/* ============================
   SYSTEM BAR – chip flow & spacing on phones
   ============================ */

.systembar {
  padding-inline: 6px !important;
}
.systembar .system-chip{
  margin: 0 4px;
  height: 22px;
  line-height: 22px;
  background: rgba(255,255,255,.10) !important; /* subtle fill works on both themes */
  border: 0 !important;                          /* drop the outlined border on phones */
}

/* Let items wrap naturally; trim leading label on very narrow screens */
@media (max-width: 480px){
  .systembar { flex-wrap: wrap !important; row-gap: 4px; }
  .systembar .font-weight-bold.mr-1 { display: none; } /* hides literal 'Signed in' */
  .systembar .v-btn.v-btn--icon { margin-left: auto; } /* keep theme toggle at far right */
  .appbar .v-toolbar__content { padding-left: 10px !important; padding-right: 10px !important; }
}

/* Tablets: keep label but reduce chip spacing slightly */
@media (min-width:481px) and (max-width: 960px){
  .systembar { flex-wrap: wrap !important; }
  .systembar .system-chip{ margin: 2px 4px; }
}
/* ============================
   Prevent ANY horizontal scrolling on mobile
   ============================ */

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

.v-application,
.v-main,
.v-container,
.v-content,
.v-content__wrap {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Kill horizontal scroll from chart or edge-bleed containers */
.edge-bleed,
.chart-container-class,
.activity-container-class {
  overflow-x: clip !important; /* modern browsers, better than hidden */
  max-width: 100vw !important;
}

/* Safety for Highcharts or GSAP transforms creating width overflow */
#stock-chart,
.highcharts-container {
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* Disable “swipe bounce” in mobile Safari if desired */
@supports (-webkit-touch-callout: none) {
  html, body {
    overscroll-behavior-x: none;
  }
}
/* System bar – chip flow & spacing */
.systembar { padding-inline: 6px !important; }
.systembar .system-chip{
  margin: 0 4px;
  height: 22px; line-height: 22px;
  background: rgba(255,255,255,.10) !important; /* subtle fill on both themes */
  border: 0 !important;
}

/* Let items wrap naturally on phones; trim the literal 'Signed in' label on very narrow screens */
@media (max-width: 480px){
  .systembar { flex-wrap: wrap !important; row-gap: 4px; }
  .systembar .font-weight-bold.mr-1 { display: none; } /* hide label to balance */
}