/* Mobile: iframe must fit the visible panel (no scroll) */
@media (max-width: 820px){
  #performance_iframe.main-chart,
  #portfolio_iframe.main-chart{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
  .chart-panel:has(> .main-chart){
    overflow: hidden !important;
  }
}

/* ======================================================================
   Si-Pulse CSS — v14 (SELF-DESCRIBING TOKENS)
   Goals:
   1) No cryptic font tokens (fs-2xs etc.) — only semantic names.
   2) Tables in Markets look identical to Companies.
   3) Page section order matches top navigation:
      About → Markets → Companies → Performance → News
   ====================================================================== */


/* ======================================================================
   1) GLOBAL DESIGN TOKENS (edit here, not all over the file)
   ====================================================================== */

:root{
  /* Main font family across site */
  --font-family-ui: Arial, sans-serif;
  --font-top-nav:       clamp(.6rem, 2vw, 3rem);         /* Top navigation labels (About/Markets/Companies/Performance/News) */
  --font-side-nav:      clamp(.3rem, 1.5vw, 2rem);       /* Side navigation labels (Computing, AAPL) */
  
  --font-about-heading: clamp(.5rem, 1.7vw, 1.5rem);   /* Headings on About Page */
  --font-body:          clamp(.4rem, 1.5vw, 1.5rem);  /* Normal paragraph text (About page, general text) */

  --font-section-title: clamp(0.5rem, 1.7vw, 2.5rem);        /* Section titles inside pages (e.g., “Semiconductors”, “Networking”) */
  --font-table-header:  clamp(0.2rem, 1.4vw, 1rem);     /* Table headers (Companies + Markets) */
  --font-table-cell:    clamp(0.15rem, 1.2vw, 1rem);   /* Dense tables (Companies + Markets) */

  /* Performance (PLX) — one-row table above chart */
  --font-perf-table-header: clamp(0.2rem, 0.9vw, 1rem);  /* tweak later */
  --font-perf-table-cell:   clamp(0.2rem, 1vw, 1rem);  /* tweak later */

  --font-table-news-cell: clamp(0.3rem, 1.25vw, 1rem);   /* Dense tables (Companies + Markets) */

  /* font for time stapm of Markets and Companies pages (aka-badge)*/
  --font-timestamp:                 clamp(0.3rem, 1.0vw, 1.2rem);
  --font-timestamp_mobile_vertical: clamp(0.3rem, 0.5vw, 1rem);

  /* Big headings (rare; keep for future) */
  --font-page-title: clamp(0.5rem, 5vw, 3rem);


  /* ---------- Colors ---------- */

  --color-page-bg:     #ffffff;
  --color-panel-bg:    #ffffff;

  --color-text:        #0b1220;
  --color-text-strong: #111827;
  --color-text-muted:  #6b7280;
  --color-text-white:  #ffffff;

  --color-border:      #e6e8ee;
  --color-border-hover:#d7dbe6;

  --color-row-alt:     #f3f5f9;            /* zebra striping */
  --color-accent:      #0f2a5f;             /* active tab */
  --color-accent-hover:#1f4aa8;       /* active hover */
  --color-accent-admin: #043f02;      /* admin active tab (different blue) */
  --color-hover-bg:    #e8f6ef;           /* hover for side/nav items */

  --color-footer-background:#ffffff; 
  /* ---------- Layout + spacing ---------- */

  --layout-topbar-height: 5vw;
  --layout-footer-height: 0px;
  --layout-side-gutter: 5px;
  --layout-panel-gap: 2px;

  /* Table spacing */
  --table-cell-padding-y: 5px;
  --table-cell-padding-x: 5px;

  /* Nav spacing */
  --nav-link-padding-y: 10px;
  --nav-link-padding-x: 10px;

  /* Corner rounding + shadow */
  --corner-radius: 6px;
  --shadow-elevated: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.06);
}


/* ======================================================================
   2) BASE / APP SHELL
   ====================================================================== */

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-family-ui);

  overflow: hidden;
}

.app-shell{
  width: 100%;
  height: 100svh; /* mobile-safe viewport */
  box-sizing: border-box;

  /* leave space for fixed topbar */
  padding: var(--layout-topbar-height) var(--layout-side-gutter) var(--layout-side-gutter) var(--layout-side-gutter);
  position: relative;
}

.app-main{
  width: 100%;
  height: calc(100svh - var(--layout-topbar-height)); /* mobile-safe viewport */
  display: flex;
  gap: var(--layout-panel-gap);
  box-sizing: border-box;
}

.chart-panel{
  flex: 1;
  height: 100%;
  box-sizing: border-box;

  overflow-y: auto;
  overflow-x: hidden;
}

/* Panel inner body (used by Companies / News; Performance uses iframe directly) */
.panel-body{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* Performance iframe should NOT create scrollbars */
/* =========================================================
   PERFORMANCE IFRAME — MOBILE PORTRAIT ONLY (2:1 box)
   Desktop + landscape keep full-height panel behavior.
   ========================================================= */

/* Default (desktop/tablet/landscape): keep what you already do */
/* When a chart iframe is present, stop scrolling in that panel */
.chart-panel:has(> .main-chart){
  overflow: hidden;
  padding: 0;
}


/* Desktop/tablet sizing for Plotly iframes (keep your old behavior) */
@media (min-width: 821px){
  #performance_iframe.main-chart{
    width: 100%;
    height: min(95%, 50vw);
  }
  #portfolio_iframe.main-chart{
    width: 100%;
    height: min(95%, 50vw);
  }
}

.main-chart{
  width: 100%;
  height: 100%;
  border: 0;
}


/* ======================================================================
   3) TOP NAVIGATION
   ====================================================================== */

.topbar{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--layout-topbar-height);
  z-index: 999;

  background: var(--color-panel-bg);
  border-bottom: 1px solid var(--color-border);
  box-sizing: border-box;
}

.topbar-inner{
  height: var(--layout-topbar-height);
  display: flex;
  align-items: center;
  gap: 2px;

  padding: 0 var(--layout-side-gutter);
  box-sizing: border-box;
}


/* =========================
   Companies — last update badge (inside topbar)
   ========================= */

.companies-update-badge{
  position: absolute;
  right: var(--layout-side-gutter);
  bottom: 2px;              /* sits ABOVE the topbar separator line */
  font-size: var(--font-timestamp);
  color: var(--color-text-muted);
  padding: 0px 5px;
  pointer-events: none;
  white-space: nowrap;
  /*
  border-radius: 4px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--color-border);
  */

}

/* Mobile tightening */
@media (max-width: 768px){
  .companies-update-badge{
    font-size: var(--font-timestamp_mobile_vertical);;
    padding: 0px 2px;
    bottom: 2px;
  }
}

.topbar-link{
  display: inline-block;
  padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
  border-radius: 2px;

  cursor: pointer;
  user-select: none;
  text-decoration: none;

  color: var(--color-text);
  font-size: var(--font-top-nav);
  line-height: 1.0;

  background: transparent;
}

.topbar-link:hover{
  background: var(--color-hover-bg);
}

.topbar-link.active{
  background: var(--color-accent);
  color: #ffffff;
  font-weight: normal;
}

/* Admin mode: different active-tab shade so you always know you're in /plx */
.topbar.admin-mode .topbar-link.active{
  background: var(--color-accent-admin);
}

/* Fix: keep active top-tab background above the topbar bottom border (especially on mobile portrait) */
.topbar-link{
  height: calc(var(--layout-topbar-height) - 1px);  /* leaves 1px for the gray separator */
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}


.topbar-link.active:hover{
  background: var(--color-accent-hover);
}

/* ===== LinkedIn in TOP NAV (only if Dash renders it) ===== */
/* LinkedIn in topbar: icon-only, no big blue background */
.topbar-linkedin{
  margin-left: auto;              /* pushes to far right inside topbar-inner */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3vw;
  height: 3vw;

  background: transparent;        /* <- NO dark slab */
  border: 1px solid transparent;
  border-radius: 6px;

  text-decoration: none;
  padding: 0;                     /* <- prevents big padding area */
}

/* Hover looks like other nav hover */
.topbar-linkedin:hover{
  background: var(--color-hover-bg);
  border-color: var(--color-border-hover);
}

/* The SVG icon itself */
.linkedin-icon{
  width: 50px;
  height: 50px;
  display: inline-block;

  background-image: url("/static/Images/linkedin.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}



/* ======================================================================
   4) SIDE NAVIGATION (Sector + Ticker)
   ====================================================================== */

/* ======================================================================
   4) SIDE NAVIGATION (Sector + Ticker)
   Behavior matches TOP NAV:
     - normal: white
     - hover (not selected): hover-bg (limegreen highlight)
     - selected: accent (dark blue)
     - hover on selected: accent-hover (lighter blue)
   DO NOT CHANGE FONTS
   ====================================================================== */

.sidebar{
  height: 100%;
  overflow-y: auto;
}

.sidebar-sector{
  width: fit-content;
  min-width: 6%;
  max-width: 10%;
}

.sidebar-ticker{
  width: fit-content;
  min-width: 4%;
  max-width: 6%;
}

/* ----------------------
   Sector list
   ---------------------- */

.sector-list input[type="radio"]{ display: none; }
.sector-list label{ display: block; margin-bottom: 0; cursor: pointer; }

.sector-list .sector-label{
  display: block;
  padding: 5px 3px;
  border-radius: 3px;

  background: #ffffff;
  color: var(--color-text);

  font-size: var(--font-side-nav);
  line-height: 1.0;
  white-space: normal;      /* allow wrapping */
  word-break: normal;
  overflow-wrap: break-word;

  font-weight: normal; /* lock weight: no bold jump */
}

/* hover on NOT selected => limegreen highlight */
.sector-list label:not(:has(input:checked)):hover .sector-label{
  background: var(--color-hover-bg);
  color: var(--color-text);
}

/* selected => dark blue */
.sector-list label:has(input:checked) .sector-label{
  background: var(--color-accent);
  color: #ffffff;
}

/* hover on selected => lighter blue */
.sector-list label:has(input:checked):hover .sector-label{
  background: var(--color-accent-hover);
  color: #ffffff;
}


/* ----------------------
   Ticker list
   ---------------------- */

.ticker-list input[type="radio"]{ display: none; }
.ticker-list label{ display: block; margin-bottom: 0; cursor: pointer; }

.ticker-list .ticker-label{
  display: block;
  padding: 5px 5px;
  border-radius: 3px;

  background: #ffffff;
  color: var(--color-text);

  font-size: var(--font-side-nav);
  line-height: 1.0;
  white-space: nowrap;

  font-weight: normal; /* lock weight: no bold jump */
}

/* hover on NOT selected => limegreen highlight */
.ticker-list label:not(:has(input:checked)):hover .ticker-label{
  background: var(--color-hover-bg);
  color: var(--color-text);
}

/* selected => dark blue */
.ticker-list label:has(input:checked) .ticker-label{
  background: var(--color-accent);
  color: #ffffff;
}

/* hover on selected => lighter blue */
.ticker-list label:has(input:checked):hover .ticker-label{
  background: var(--color-accent-hover);
  color: #ffffff;
}







/* ======================================================================
   5) SHARED COMPONENTS
   ====================================================================== */

.panel-card{
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-elevated);
  padding: 12px;
  box-sizing: border-box;
}

.hr{
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 12px 0;
}

/* Shared image style (Companies + Markets plots) */
.content-image{
  width: 100%;
  max-width: 1400px;
  display: block;

  margin: 24px auto 40px auto;

  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-elevated);
}


/* ======================================================================
   6) TABLE SYSTEM (one look used by Companies + Markets)
   ====================================================================== */

/* Table container spacing used by pages */
.table-block{
  width: 100%;
  box-sizing: border-box;
}

/* Table base */
.data-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  overflow: hidden;

  background: #ffffff;
}

/* Zebra striping */
.data-table-row:nth-child(odd){ background: #ffffff; }
.data-table-row:nth-child(even){ background: var(--color-row-alt); }

/* Header cells */
.data-table-header-cell{
  text-align: left;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);

  color: var(--color-text-strong);
  font-weight: 200;
  background: #ffffff;

  white-space: nowrap;
  font-size: var(--font-table-header);
  line-height: 1.1;
}

/* Body cells */
.data-table-cell{
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);

  vertical-align: top;
  color: var(--color-text);

  font-size: var(--font-table-cell);
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column that is allowed to wrap (e.g., long company / label names) */
.data-table-cell-wrap{
  white-space: normal;
}


/* ======================================================================
   7) PAGES (ORDER MUST MATCH NAV)
   About → Markets → Companies → Performance → News
   ====================================================================== */


/* ----------------------
   7A) ABOUT
   ---------------------- */


/* About page: make footer sit at the bottom of the viewport when content is short */
.about-panel{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.about-content{
  flex: 1;                 /* takes remaining space, pushes footer down */
}

.about-block{
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-elevated);

  padding: 16px;
  box-sizing: border-box;
  margin: 0 0 12px 0;
}

.about-block h3{
  margin: 0 0 10px 0;
  font-size: var(--font-about-heading);
  font-weight: 600;
  color: var(--color-text-strong);
}

.about-block p{
  margin: 0 0 10px 0;
  font-size: var(--font-body);
  line-height: 1.35;
  color: var(--color-text);
}

.about-block ul{
  margin: 10px 0 0 18px;
  padding: 0;
  font-size: var(--font-body);
  line-height: 1.35;
  color: var(--color-text);
}


/* ----------------------
   7B) MARKETS
   ---------------------- */

.markets-page{
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

.markets-table-wrap{
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 18px 0;
}


/* CSS "composes" is not standard; instead we explicitly define: */
.markets-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  overflow: hidden;
  background: #ffffff;
}

.markets-tr:nth-child(odd){ background: #ffffff; }
.markets-tr:nth-child(even){ background: var(--color-row-alt); }

.markets-th{
  text-align: left;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;/*top;*/
  color: var(--color-text-white);
  font-weight: 600;
  background: var(--color-accent); /*#ffffff;*/
  white-space: normal; /*nowrap; */
  font-size: var(--font-table-header);
  line-height: 1.1;
}

.markets-td{
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;/*top;*/
  color: var(--color-text);
  font-size: var(--font-table-cell);
  line-height: 1.2;
  white-space: normal; /*nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Usually first column has long labels */
.markets-table th:nth-child(1),
.markets-table td:nth-child(1){
  white-space: normal;
}


/* Markets column widths (1st col usually labels, rest numeric) */
.markets-table{
  table-layout: fixed;   /* makes widths obey your rules */
  width: 100%;
}

/* Column 1 wider, others equal */
.markets-table th:nth-child(1),
.markets-table td:nth-child(1){ width: 25%; }

.markets-table th:nth-child(2),
.markets-table td:nth-child(2){ width: 15%; }

.markets-table th:nth-child(3),
.markets-table td:nth-child(3){ width: 15%; }

.markets-table th:nth-child(4),
.markets-table td:nth-child(4){ width: 15%; }

.markets-table th:nth-child(5),
.markets-table td:nth-child(5){ width: 30%; }

/* keep going if you have more columns... */

.markets-image{
  width: 100%;
  max-width: 1400px;
  display: block;
  margin: 24px auto 40px auto;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-elevated);
}








/* ----------------------
   7C) COMPANIES
   ---------------------- */

.companies-wrap{
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

.companies-section-title{
  margin: 0px 0px 10px 8px;
  font-size: var(--font-section-title);
  font-weight: 500;
  color: var(--color-text-strong);
}

/* Map Companies table classes → shared table system */
.companies-table{
  width: 100%;
  margin: 0 0 6vh 0;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  overflow: hidden;
  background: #ffffff;
}

.companies-tr:nth-child(odd){ background: #ffffff; }
.companies-tr:nth-child(even){ background: var(--color-row-alt); }

.companies-th{
  text-align: left;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text-white);
  font-weight: 600;
  background: var(--color-accent); /*#ffffff;*/
  white-space: normal; /*nowrap;*/
  font-size: var(--font-table-header);
  line-height: 1.1;
}

.companies-td{
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  color: var(--color-text);
  font-size: var(--font-table-cell);
  line-height: 1.2;
  white-space: normal; /*nowrap;*/
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Company name should wrap */
.companies-left{
  white-space: normal;
}


/* Companies column widths (9 columns) */
.companies-table th:nth-child(1),
.companies-table td:nth-child(1){ width: 24%; }  /* Company */

.companies-table th:nth-child(2),
.companies-table td:nth-child(2){ width: 8%; }   /* Ticker */

.companies-table th:nth-child(3),
.companies-table td:nth-child(3){ width: 10%; }  /* Market Price */

.companies-table th:nth-child(4),
.companies-table td:nth-child(4){ width: 10%; }  /* Up (Down), % */

.companies-table th:nth-child(5),
.companies-table td:nth-child(5){ width: 8%; }   /* EV / S */

.companies-table th:nth-child(6),
.companies-table td:nth-child(6){ width: 10%; }  /* EV / EBITDA */

.companies-table th:nth-child(7),
.companies-table td:nth-child(7){ width: 10%; }  /* Fair Price */

.companies-table th:nth-child(8),
.companies-table td:nth-child(8){ width: 10%; }  /* Target Price */

.companies-table th:nth-child(9),
.companies-table td:nth-child(9){ width: 11%; }  /* Next Earn. Call */


/* =========================================================
   Companies (PLX / admin) — column widths (11 columns)
   This overrides the public 9-column layout so columns like
   Target Price and Next Earn. Call remain visible.
   Column order (PLX):
   1 Company
   2 Ticker
   3 Market Price
   4 Up (Down), %
   5 EV / S
   6 EV/S percentile
   7 EV / EBITDA
   8 EV/EBITDA percentile
   9 Fair Price
  10 Target Price
  11 Next Earn. Call
   ========================================================= */

.companies-table.companies-table-plx th:nth-child(1),
.companies-table.companies-table-plx td:nth-child(1){ width: 17%; }  /* Company */

.companies-table.companies-table-plx th:nth-child(2),
.companies-table.companies-table-plx td:nth-child(2){ width: 6%; }   /* Ticker */

.companies-table.companies-table-plx th:nth-child(3),
.companies-table.companies-table-plx td:nth-child(3){ width: 7%; }   /* Market Price */

.companies-table.companies-table-plx th:nth-child(4),
.companies-table.companies-table-plx td:nth-child(4){ width: 7%; }   /* Up (Down), % */

.companies-table.companies-table-plx th:nth-child(5),
.companies-table.companies-table-plx td:nth-child(5){ width: 5%; }   /* EV / S */

.companies-table.companies-table-plx th:nth-child(6),
.companies-table.companies-table-plx td:nth-child(6){ width: 6%; }   /* EV/S percentile */

.companies-table.companies-table-plx th:nth-child(7),
.companies-table.companies-table-plx td:nth-child(7){ width: 5%; }   /* EV / EBITDA */

.companies-table.companies-table-plx th:nth-child(8),
.companies-table.companies-table-plx td:nth-child(8){ width: 7%; }   /* EV/EBITDA percentile */

.companies-table.companies-table-plx th:nth-child(9),
.companies-table.companies-table-plx td:nth-child(9){ width: 6%; }  /* Fair Price */

.companies-table.companies-table-plx th:nth-child(10),
.companies-table.companies-table-plx td:nth-child(10){ width: 6%; } /* Target Price */

.companies-table.companies-table-plx th:nth-child(11),
.companies-table.companies-table-plx td:nth-child(11){ width: 10%; } /* Next Earn. Call */







/* Companies plots */
.companies-image{
  width: 100%;
  max-width: 1400px;
  display: block;
  margin: 28px auto 40px auto;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-elevated);
}




/* ----------------------
   7D) PERFORMANCE
   ---------------------- */
/* ----------------------
   7D) PERFORMANCE
   ---------------------- */

.plot-wrap{
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-elevated);
}


/* Performance PNG fallback (used on mobile portrait, but can remain after rotate) */
.perf-image{
  display: block;

  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  box-shadow: var(--shadow-elevated);
}

/* =========================================================
   ROTATION-PROOF PNG FIT
   Key idea:
   - When PNG is present, make the chart panel a flex box
   - Fit image to PANEL height/width (100%), not vh/vw
   This fixes: portrait -> rotate landscape, image too tall.
   ========================================================= */

/* If the chart panel contains a PNG, center it and prevent bleed */
.portfolio-panel:has(img.perf-image){
  overflow: hidden !important;
  padding: 0 !important;

  display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */
}

/* Fit the PNG inside the panel (uses panel height, not viewport height) */
.portfolio-panel:has(img.perf-image) img.perf-image{
  max-height: 100%;
  max-width: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  margin: 0;
}


/* Mobile portrait: allow scrolling if PNG is tall (your original intent) */
@media (max-width: 820px) and (orientation: portrait){
  .portfolio-panel:has(img.perf-image){
    display: block;                 /* allow natural document flow */
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .portfolio-panel:has(img.perf-image) img.perf-image{
    width: 100%;                    /* use full width in portrait */
    max-width: 100%;
    max-height: 100%;               /* allow tall image + scroll */
    height: auto;
  }
}


/* Mobile landscape: fit inside panel BUT anchor to top (no vertical centering gap) */
@media (max-width: 1024px) and (orientation: landscape){
  .portfolio-panel:has(img.perf-image){
    overflow: hidden !important;
    padding: 0 !important;

    display: flex;
    align-items: flex-start !important;   /* <<< TOP, not center */
    justify-content: center;              /* center horizontally (optional) */
  }

  .portfolio-panel:has(img.perf-image) img.perf-image{
    margin: 0 !important;
    max-height: 100%;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
}


/* ----------------------
   7E) NEWS — TABLE LOOK + COLUMN WIDTHS
   ---------------------- */

.news-table{
  width: 100%;
  border-collapse: collapse;
  vertical-align: middle;
  table-layout: fixed;

  /* match Companies/Markets table frame */
  border: 1px solid var(--color-border);
  border-radius: var(--corner-radius);
  overflow: hidden;
  background: #ffffff;
}

/* zebra like other tables */
.news-tr:nth-child(odd){ background: #ffffff; }
.news-tr:nth-child(even){ background: var(--color-row-alt); }

/* hover highlight (limegreen) */
.news-tr:hover{ background: var(--color-hover-bg) !important; }
.news-tr{ transition: background 120ms ease; }

/* cells */
.news-td{
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  font-size: var(--font-table-news-cell);
  line-height: 1.15; 
}

/* ---- COLUMN WIDTH CONTROL (no conflicts) ---- */

/* Common: Date is always narrow */
.news-table .news-date{ width: 16%; }

/* Helicopter (3 cols): has .news-company */
.news-table .news-company{ width: 10%; }
.news-table .news-company + .news-title{ width: 74%; }  /* 100 - 10 - 14 */

/* Single-ticker (2 cols): row does NOT have .news-company */
.news-table .news-tr:not(:has(.news-company)) .news-title{ width: 84%; }
.news-table .news-tr:not(:has(.news-company)) .news-title + .news-date{ width: 16%; }


/* ======================================================================
   7F) PORTFOLIO (PLX / admin only)
   - Uses the SAME sidebar styles as Companies (sector sidebar).
   - Main media uses the SAME classes as Performance (.main-chart / .perf-image).
   ====================================================================== */

.portfolio-placeholder{
  padding: 16px;
  font-size: var(--font-body);
  color: var(--color-text-muted);
}
/* ======================================================================
   8) FOOTER
   ====================================================================== */

.site-footer{
  /* About page only: footer is part of the About layout (NOT fixed globally) */
  height: 30px;

  /*background: var(--color-accent);*/
  background: var(--color-footer-background);
  
  border-top: 1px solid var(--color-border);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 12px;
  box-sizing: border-box;

  margin-top: auto;        /* push to bottom when About content is short */
}


.site-footer-text{
  margin: 0;
  color: var(--color-text);
  font-size: 0.4rem;
  text-align: center;
  line-height: 1.2;
}

.footer-link{
  color: var(--color-text);
  text-decoration: none;
}

.footer-link:hover{
  color: #3b82f6; /* readable "blue" on navy */
}

/* =========================================================
   Performance (PLXCM) — one-row Companies-style table (above chart)
   - Same columns/widths as Companies PLX table
   - Own font knobs: --font-perf-table-header / --font-perf-table-cell
   ========================================================= */

.perf-company-table-wrap{
  width: 100%;
  box-sizing: border-box;
  padding: 0px 0px 0px 0px;
}

.perf-company-table{
  width: 100%;
}


.performance-panel .companies-table{
  margin: 0 !important;   /* 0 0 0 0 */
}

.perf-company-table .companies-th{
  font-size: var(--font-perf-table-header);

}

.perf-company-table .companies-td{
  font-size: var(--font-perf-table-cell);
}


.performance-panel{
  height: calc(100svh - var(--top-nav-height, 56px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


/* Media wrapper: keep PNG/iframe sizing logic here so table above isn't affected */
.performance-media-wrap{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /*margin-top: 0px;*/
}

/* Rotation-proof PNG fit (Performance) */
.performance-media-wrap:has(img.perf-image){
  overflow: hidden !important;
  padding: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;
}

.performance-media-wrap:has(img.perf-image) img.perf-image{
  max-height: 100%;
  max-width: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  margin: 0;
}

/* Mobile portrait: allow scrolling if PNG is tall */
@media (max-width: 820px) and (orientation: portrait){
  .performance-media-wrap:has(img.perf-image){
    display: block;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .performance-media-wrap:has(img.perf-image) img.perf-image{
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: auto;
  }
}

/* Mobile landscape: fit inside media area BUT anchor to top */
@media (max-width: 1024px) and (orientation: landscape){
  .performance-media-wrap:has(img.perf-image){
    overflow: hidden !important;
    padding: 0 !important;
    display: block;
  }

  .performance-media-wrap:has(img.perf-image) img.perf-image{
    width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0;
  }
}


/* Mobile PORTRAIT: keep charts/images close to the top (no centering) */
@media (max-width: 820px) and (orientation: portrait){
  .performance-media-wrap:has(img.perf-image),
  .portfolio-panel:has(img.perf-image){
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
  }
}