/*  styles-company-report.css
    Purpose      End-to-end “Generate Company Report” page:
                 ▸ data-entry form (inline rows, advanced search, file uploads)
                 ▸ tooltip system, collapsible sections, quota banner
                 ▸ loading / login / upgrade / download / delete modals
                 ▸ generated-report styles (charts, flag grid, metric cards)
                 ▸ saved-reports table & confirmation dialogs
                 ▸ fully-responsive mobile, ≤430 px landscape & print support
    Used by      public/company-report.html
    Depends on   Chart.js v4, Font Awesome 6, global --primary / --light-* vars
    Last updated 31 Jul 2025
*/


/*===============================================
   Theme & Tooltip Variables
===============================================*/
:root {
  /* Core theme */
  --primary-color:    #4EA1D3;
  --hover-bg-color:   #3a89b2;
  --light-bg-color:   #1e1e1e;
  --light-text-color: #ECF0F1;

  /* Tooltip */
  --tooltip-bg:       #2c3e50;
  --tooltip-txt:      #fff;
  --tooltip-arrow:    6px;
  --tooltip-rad:      8px;
  --tooltip-pad:      8px 12px;
  --tooltip-fs:       12px;
}

/*===============================================
   Utility Classes
===============================================*/
.hidden {
  display: none !important;
}

/*===============================================
   Article Container
===============================================*/
.report-container {
  max-width: 1200px;
  margin: 20px auto;
  background-color: #333;
  color: var(--light-text-color);
  padding: 40px;
  border-radius: 8px;
  border: 2px solid #cccccc;
}

/*===============================================
   Centre Form Title
===============================================*/
.report-container .form-title {
  text-align: center;
  margin-bottom: 2.5rem;
  margin-top: 0px !important;
}

/*===============================================
   Inline Fields Layout
===============================================*/
.report-container .input-fields {
  margin-bottom: 1.5rem;
}
.report-container .input-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.report-container .input-group {
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 200px;
}
.report-container .input-group.full-width {
  flex: 1 1 100% !important;
}
.report-container .input-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.report-container .input-title label {
  font-weight: bold;
  font-size: 1rem;
  margin: 0;
}

/* Override inputs in the inline rows */
.report-container .input-row .input-group input {
  background-color: #2c2c2c !important;
  border: 1px solid #ccc !important;
  color: #ecf0f1 !important;
  border-radius: 4px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 40px !important;
}


/* Override textareas in the inline rows */
.report-container .input-row .input-group textarea {
  background-color: #2c2c2c !important;
  border: 1px solid #ccc !important;
  color: #ecf0f1 !important;
  border-radius: 4px !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* collapse to full width on mobile */
@media (max-width: 768px) {
  .report-container .input-row {
    flex-direction: column;
  }
  .report-container .input-group {
    flex: 1 1 100% !important;
    min-width: auto;
  }
}


@media (max-width: 430px) {
  .report-container {
    padding: 20px;
  }

  .report-container .input-row {
    flex-direction: column;
    gap: 12px;
  }

  .report-container .input-group {
    flex: 1 1 100%;
    min-width: auto;
  }

  .report-container .form-title {
    font-size: 1.2rem;
  }
}



/*===============================================
   Upload Containers & Progress Bars
===============================================*/
#rns-upload-container,
#notes-upload-container {
  margin-top: 1rem;
}
#rnsProgress,
#notesProgress {
  width: 100%;
  background-color: #2c2c2c;
  margin: 0.5rem 0;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}
.progress-bar {
  width: 0%;
  height: 100%;
  background-color: var(--primary-color);
  transition: width 2s ease;
}

div#rns-upload-container {
  margin-top: -0px;
}


@media (max-width: 430px) {
  #rns-upload-container,
  #notes-upload-container {
    margin-top: 1rem;
  }

  .progress-bar {
    height: 6px;
  }
}



/*===============================================
   Form Controls
===============================================*/
input,
select,
textarea,
button {
  font-family: inherit;
  font-size: 1rem;
  margin: 0.5rem 0;
  box-sizing: border-box;
  background-color: var(--light-bg-color);
  color: var(--light-text-color);
  border: 1px solid #444;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color);
}
button {
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: var(--hover-bg-color);
}


@media (max-width: 430px) {
  input,
  select,
  textarea,
  button {
    font-size: 1rem;
/*    width: 100%;*/
  }
}


/*===============================================
   CC-TOOLTIP
===============================================*/
.cc-tooltip {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}
.cc-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  background-color: var(--primary-color) !important;
  border-radius: 6px !important;
  color: #fff !important;
  font-size: 14px !important;
  cursor: pointer !important;
  margin-left: 0px !important;
}
.cc-tooltip-text {
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block !important;
/*  width: auto !important;*/
  width: 250px !important;            /* adjust this to taste */
  padding: var(--tooltip-pad) !important;
  background-color: var(--tooltip-bg) !important;
  color: var(--tooltip-txt) !important;
  border-radius: var(--tooltip-rad) !important;
  font-size: var(--tooltip-fs) !important;
  white-space: normal !important;          /* allow wrapping at spaces */
  overflow-wrap: break-word !important;    /* break long words if needed */
  word-break: normal !important;           /* don’t force‐break into single letters */
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  z-index: 9999 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* ── Force “.cc-tooltip-text” visible whenever its parent has .active ── */
.cc-tooltip.active .cc-tooltip-text {
  opacity: 1 !important;
  visibility: visible !important;
}

.cc-tooltip-text::before {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-width: var(--tooltip-arrow) !important;
  border-style: solid !important;
  border-color: var(--tooltip-bg) transparent transparent transparent !important;
}
@media (hover: hover) {
  .cc-tooltip:hover .cc-tooltip-text {
    opacity: 1 !important;
    visibility: visible !important;
  }
}
@media (hover: none) {
  .cc-tooltip.active .cc-tooltip-text {
    opacity: 1 !important;
    visibility: visible !important;
  }
}


@media (max-width: 430px) {
  .cc-tooltip-text {
    width: 200px !important;
    font-size: 11px !important;
  }

  .cc-info-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }
}



/*===============================================
   COLLAPSIBLE
===============================================*/

.content { display: none; /* … */ }
.collapsible { /* your blue header style */ }
.arrow { transition: transform 0.3s; }
.rotate { transform: rotate(180deg); }

button.collapsible {
  margin-top: 10px !important;
  margin-bottom: 50px;
}

div.input-group.full-width {
  margin-bottom: 10px;
  margin-top: -30px;
}

.advanced-content {
  background-color: #2c2c2c2c !important;
  border: 2px solid #cccccc;
  border-radius: 8px;
  padding: 24px;
  margin-top: -20px;
  margin-bottom: 60px;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.advanced-content .input-row {
  margin-bottom: 20px;
}

p.advanced-description {
  margin-top: -40px;
  margin-bottom: 60px !important;
}

.advanced-content textarea,
.advanced-content input[type="url"] {
  width: 100%;
  box-sizing: border-box;
}

#excludeKeywords {
  margin-bottom: -20px !important;
}

@media (max-width: 430px) {
  .advanced-content {
    padding: 20px;
    gap: 16px;
  }

  .advanced-content .input-row {
    flex-direction: column;
    gap: 12px;
  }

  p.advanced-description {
    margin-top: -20px;
    margin-bottom: 40px !important;
  }
}


/*===============================================
   MISCELLANEOUS
===============================================*/

p.page-description {
  margin-bottom: 30px;
  color: #ccc;
  line-height: 1.4;
/*  margin-bottom: 20px;*/
}

/* place the two report buttons side by side with a 10px gap */
.form-actions {
  display: flex;
  gap: -8px !important;
}

/* make all these buttons exactly the same height/padding/etc */
#rnsUploadBtn,
#notesUploadBtn,
#generateArticleBtn,
#newReportBtn {
  height: 36px !important;
  padding: 0 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#generateArticleBtn {
  margin-right: -2px !important;
}

div.input-row {
  margin-bottom: -8px;
}

/* force equal width on both report buttons */
/*.form-actions > button {
  flex: 1;
}*/

/* remove manual margin-left now that gap handles spacing */
/*#newReportBtn { margin-left: 10px !important; }*/ 


button#rnsUploadBtn {
  margin-bottom: 20px;
}

button#notesUploadBtn {
  margin-top: 5px !important;
  margin-bottom: 20px !important;
}

/* gap between “Create New Report” and “Generate Report” */
#newReportBtn {
  margin-left: 10px !important;
}


div#notes-upload-container {
  margin-top: 0px !important;
}

textarea#keywords {
  margin-bottom: 30px;
}

div.form-actions {
  margin-top: -10px;
}

placeholder {
  color: #ecf0f1 !important;
}

textarea#excludeKeywords {
  margin-bottom: 20px;
}

@media (max-width: 430px) {
  .form-actions {
    flex-direction: column;
    gap: 10px !important;
  }

  #rnsUploadBtn,
  #notesUploadBtn,
  #generateArticleBtn,
  #newReportBtn {
    width: 100% !important;
    font-size: 1rem !important;
  }
}



/*// =============================================================================*/
/*// Generate Report Spinner*/
/*// =============================================================================*/


/* LOADING MODAL */
.loading-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  border: 2px solid #cccccc;
  border-radius: 8px;
  z-index: 2000;
}
.loading-modal.hidden {
  display: none;
}
.loading-modal-content {
  background-color: #2c3e50;
  padding: 2rem;
  border-radius: 8px;
  color: #fff;
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading-modal-content .fa-spinner {
  margin-top: 2rem;
  margin-bottom: 1rem;
}


#loading-text{
  display:block;
  min-height: 3.2em;       /* enough for two wrapped lines → no height jump */
}

@media (max-width: 430px) {
  .loading-modal-content {
    width: 90%;
    padding: 1.5rem;
    font-size: 0.95rem;
  }

  #loading-text {
    min-height: 2.5em;
  }
}

/*===============================================
   Trial-Limit Modal
===============================================*/
/*── TRIAL-LIMIT MODAL ───────────────────────────────────*/
#trial-limit-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 2001;
}
#trial-limit-modal.hidden { display: none; }

#trial-limit-modal .modal-content {
  position: relative;
  background-color: #2c3e50;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  color: #fff;
  width: 400px;
}

.close-button {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.modal-actions button {
  flex: 1;               /* equal-width */
  padding: 0.5rem 0;
  font-size: 1rem;
  cursor: pointer;
}


@media (max-width: 430px) {
  #trial-limit-modal .modal-content,
  #must-login-modal .modal-content {
    width: 90%;
    padding: 1.5rem;
    font-size: 0.95rem;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions button {
    width: 100%;
  }
}




/*// =============================================================================*/
/*// Report Styles
/*// =============================================================================*/

/* Report container styling */
.report-container {
  /* give it 10% margin on either side */
  margin: 0 10%;
  /* dark background */
  background-color: #1e1e1e !important;
  /* light grey border with rounded corners */
  border: 2px solid #cccccc;
  border-radius: 8px;
  /* inner padding so content doesn’t hug the edges */
  padding: 20px;
}
/* paragraphs inside the report */
.report-container p {
  color: #ccc;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media (max-width: 430px) {
  .report-output {
    padding: 16px !important;
  }

  .report-output h2::after {
    margin-top: 8px;
    margin-bottom: 12px;
  }

  .report-output p {
    font-size: 0.95rem;
  }
}


/* =============================================================================
   Generated-Report Box
   ============================================================================= */
.report-output {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;               /* 10% space on each side */
  background-color: #2c2c2c !important;    /* your dark grey */
  border: 2px solid #cccccc !important;    /* light grey border */
  border-radius: 8px !important;
  padding: 20px !important;
}
.report-output p {
  color: #ccc !important;
  line-height: 1.4;
  margin-bottom: 1rem;
}

/* Subheading underline rule */
.report-output h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 10px;    /* 1px below the heading */
  margin-bottom: 15px;/* 15px above the first paragraph */
}


/* =============================================================================
   Share-Price Chart Row (70/30)
   ============================================================================= */

.chart-container,
.chart-left,
.chart-right {
  box-sizing: border-box;
}

.chart-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 30px;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background-color: #2c3e50;
  border: 2px solid #cccccc;
  border-radius: 8px;
}

.chart-left {
  flex: 1 1 60%;
  margin: 0;
  padding-left: 20px;
  color: #ccc;
}

.chart-right {
  flex: 1 1 40%;
  margin: 0;
  padding-right: 20px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.chart-right table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0 0;
}

.chart-right td {
  padding: 4px 8px;
  border-bottom: 1px solid #444;
}

.chart-right td:first-child {
  font-weight: bold;
  color: #fff;
}

.chart-right td:last-child {
  text-align: right;
  color: #fff;
}


@media (max-width: 430px) {
  .chart-container {
    flex-direction: column;
    padding: 16px !important;
  }

  .chart-left,
  .chart-right {
    width: 100%;
    padding: 0 10px;
  }

  .chart-right table td {
    font-size: 0.9rem;
  }
}



/* =============================================================================
   Affiliate banner
   ============================================================================= */

.affiliate-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.affiliate-banner a {
  display: inline-block;
}

.affiliate-banner img {
  width: 728px;
  height: 110px;
  object-fit: contain;
}


/* =============================================================================
   Flag Section Container (wraps H2 + grid + summaries)
   ============================================================================= */
.flags-section {
  box-sizing: border-box;
  margin: 2rem 0;                   /* vertical margin as before */
  background-color: #2c3e50;        /* same dark blue background */
  border: 2px solid #cccccc;
  border-radius: 8px;
  padding-right: 20px;
  padding-left: 20px ;                   /* 10px all around */
}

/* make the H2 fill the container width */
.flags-section > h2 {
  margin: 0 0 10px;                 /* no side margin, 10px bottom */
  padding: 0;                       
  color: #fff;
  font-weight: bold;
}

/* =============================================================================
   Flag‐group grid inside that container
   ============================================================================= */
.flags-section .flags-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;                        /* even 10px between columns & rows */
  margin: 0;                        /* reset any extra margin */
  padding: 0;                       
  box-sizing: border-box;
}

/* Column headings: white & bold */
.flag-group h3 {
  color: #fff;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* List styling */
.flag-group ul {
  list-style: none;
  padding-left: 0;
}

.flag-group li {
  margin-bottom: 0.5rem;
  color: #ccc;
}

/* Summary styling (below the grid) */
.flags-summary {
  margin-top: 1.5rem;
  color: #fff;
  font-style: normal;
}

p.flags-summary {
  margin: 0 0 1.5rem;               /* reset and give some bottom space */
}

p.flags-summary.flag-overall {
  font-weight: bold !important;
  color: #fff !important;
}

@media (max-width: 430px) {
  .flags-section {
    padding: 15px;
  }

  .flags-section .flags-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .flag-group h3 {
    font-size: 1rem;
  }

  .flag-group li {
    font-size: 0.95rem;
  }

  .flags-summary {
    font-size: 0.95rem;
  }
}


/* =============================================================================
   PDF Save
   ============================================================================= */

   @media print {
  /* force a page break after each key section */
  h2#recent-developments-news,
  h2#financial-position,
  h2#risk-and-concerns {
    page-break-after: always;
  }
}


/* ────────────────────────────────────────────────────────────────────────── */
/* Quota badge: compact, dark background, border, centered count & equal-width buttons */
/* ────────────────────────────────────────────────────────────────────────── */
.report-container {
  position: relative;
}

.report-container .quota-banner {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #2c3e50;         /* dark-blue bg */
  border: 2px solid #cccccc;   /* light grey border */
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;                 /* extra-tight gap */
  padding: 0.3rem 0.6rem;      /* compact padding */
  font-size: 0.8rem;           /* slightly smaller overall text */
}

/* count */
.report-container .quota-banner #report-credits {
  color: #fff;
  font-size: 1.3em;            /* your requested size */
  font-weight: bold;
  text-align: center;
  line-height: 1;
  margin: 0;
}

/* button wrapper */
.report-container .quota-banner .quota-actions {
  display: flex;
  gap: 0.4rem;                 /* match the banner’s gap */
  width: 100%;
}

/* equal-width buttons */
.report-container .quota-banner .quota-actions button {
  flex: 1 1 0;                 /* zero basis → grow equally */
  padding: 0.3rem 0.6rem;      /* keep them short and wide */
  font-size: 0.8rem;
  white-space: nowrap;         /* one line of text */
  text-align: center;
  box-sizing: border-box;
}



/*==========================================
  Trial-Limit / Must-Login Modal
==========================================*/
#trial-limit-modal {
  position: fixed;
  inset: 0;                       /* top / right / bottom / left */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 2001;
}

#trial-limit-modal.hidden { display: none; }

#trial-limit-modal .modal-content {
  position: relative;
  width: 400px;
  padding: 2rem;
  border-radius: 8px;
  background: #2c3e50;
  color: #fff;
  text-align: center;
}

#trial-limit-modal .close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

#trial-limit-modal .modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

#trial-limit-modal .modal-actions button {
  flex: 1;
  padding: 0.5rem 0;
  border: none;
  border-radius: 6px;
  background: #4EA1D3;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}



/*==========================================
  Must-Login Modal
==========================================*/
#must-login-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 2001;
}

#must-login-modal.hidden {
  display: none;
}

#must-login-modal .modal-content {
  position: relative;
  width: 400px;
  padding: 2rem;
  border-radius: 8px;
  background: #2c3e50;
  color: #fff;
  text-align: center;
}

#must-login-modal .close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

#must-login-modal .modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

#must-login-modal .modal-actions button {
  flex: 1;
  padding: 0.5rem 0;
  border: none;
  border-radius: 6px;
  background: #4EA1D3;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}








/* hide anything with .hidden */
.hidden { display: none !important; }

/* specifically hide quota banner when we flag it */
.quota-banner.hidden { display: none !important; }

/* make sure your must-login modal obeys .hidden */
#must-login-modal.hidden { display: none; }




/*==========================================
  Download Modals (same style as must-login)
==========================================*/
#download-visitor-modal,
#download-upgrade-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 2001;
}

#download-visitor-modal.hidden,
#download-upgrade-modal.hidden {
  display: none;
}

#download-visitor-modal .modal-content,
#download-upgrade-modal .modal-content {
  position: relative;
  width: 400px;
  padding: 2rem;
  border-radius: 8px;
  background: #2c3e50;
  color: #fff;
  text-align: center;
}

#download-visitor-modal .close-button,
#download-upgrade-modal .close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

#download-visitor-modal .modal-actions,
#download-upgrade-modal .modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

#download-visitor-modal .modal-actions button,
#download-upgrade-modal .modal-actions button {
  flex: 1;
  padding: 0.5rem 0;
  border: none;
  border-radius: 6px;
  background: #4EA1D3;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}



/*==========================================
  Upgrade Modal
==========================================*/

#upgrade-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 2001;
}
#upgrade-modal.hidden { display: none; }
#upgrade-modal .modal-content {
  position: relative;
  width: 400px;
  padding: 2rem;
  border-radius: 8px;
  background: #2c3e50;
  color: #fff;
  text-align: center;
}
#upgrade-modal .close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}
#upgrade-modal .modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
#upgrade-modal .modal-actions button {
  flex: 1;
  padding: 0.5rem 0;
  border: none;
  border-radius: 6px;
  background: #4EA1D3;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
@media (max-width: 430px) {
  #download-visitor-modal .modal-content,
  #download-upgrade-modal .modal-content,
  #upgrade-modal .modal-content {
    width: 90%;
    padding: 1.5rem;
    font-size: 0.95rem;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions button {
    width: 100%;
  }
}


/*==========================================
  Mini Cards
==========================================*/

/* =============== 9.1 METRIC CARD GRID =================== */
#metricCards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
  margin-top:8px;
}

/* individual card */
.metric-card{
  background:#1e2a36;
  border:1px solid #334155;
  border-radius:6px;
  padding:10px 12px;
  text-align:center;
}
.metric-card .label{
  font-size:.75rem;
  color:#9ca3af;
  display:block;
}
.metric-card .value{
  font-size:1.2rem;
  font-weight:600;
  color:#f3f4f6;
}
.metric-card small{
  display:block;
  margin-top:4px;
  font-size:.7rem;
  color:#cbd5e1;
}

@media (max-width: 430px) {
  #download-visitor-modal .modal-content,
  #download-upgrade-modal .modal-content,
  #upgrade-modal .modal-content {
    width: 90%;
    padding: 1.5rem;
    font-size: 0.95rem;
  }

  .modal-actions {
    flex-direction: column;
  }

  .modal-actions button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  #metricCards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .metric-card .value {
    font-size: 1rem;
  }

  .metric-card small {
    font-size: 0.7rem;
  }
}



/* =============== 9.2 TWO-COLUMN DESKTOP LAYOUT ========= */
@media (min-width: 1024px){
  .chart-container{
    display:flex;
    gap:24px;
  }
  .chart-left{ flex:0 0 70%; }
  .chart-right{ flex:1; }   /* metric cards live here */
}

/* =============== 9.3 ZEBRA TABLES ======================= */
.report-output table{
  width:100% !important;
  border-collapse:collapse;
  margin:18px 0;
  font-size:.875rem;
}
.report-output td{
  padding:6px 8px;
  border:1px solid #334155;
}
.report-output tr:nth-child(even){
  background:#1f2937;
}

/* =============== 9.4 SECTION SEPARATORS ================ */
.report-output h2{
  margin:40px 0 12px;
/*  padding-bottom:6px;*/
/*  border-bottom:2px solid #334155;*/
border-bottom: none;
  color:#f9fafb;
  font-size:1.35rem;
}

section.exec-summary {
  margin-bottom: 30px !important;
}





/* verdict pill */
.report-header .key-numbers { font-size:0.85rem;color:#ddd;margin-top:6px; }
.metric-card small { display:block;margin-top:3px;line-height:1.3; }

/* hide default bullet in <summary> */
details summary { list-style:none; }


.action-btn{
  width:150px;                 /* fixed identical width  */
  background:#4EA1D3!important;
  color:#fff!important;
  border:none;border-radius:4px;
  font-weight:600;cursor:pointer;
}

.action-btn:hover{
  background:#3a89b2;
}

table.metrics-table {
  margin-top: 5px !important;
}

table.metrics-table td {
  padding-top: 7px;
  padding-bottom: 7px;
  vertical-align: middle;
}



/*==========================================
  Table Row Hover and Modal
==========================================*/

/* table-row hover (unchanged) */
.metrics-table tr:hover {
  background-color: #4EA1D3;
  cursor: pointer;
}

/* Blue hover on all tables inside the tabs */
.tabs-content .tab-pane table tr:hover {
  background-color: var(--primary-color);
  cursor: pointer;
}


/* metric-info modal */
#metric-info-modal {
  position: fixed;
  inset: 0;                       
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 2001;
}

#metric-info-modal.hidden {
  display: none;
}

#metric-info-modal .modal-content {
  position: relative;
  width: 600px;
  padding: 2rem;
  border-radius: 8px;
  background: #2c3e50;
  color: #fff;
  text-align: center;
}

div.modal-content {
  margin-top: 0px !important;
}

.metric-modal-title {
  text-align: center;
  margin-bottom: 1.2rem;
  margin-top: 0rem;
}

.metric-modal-body {
  text-align: left;
/*  line-height: 1.4;*/
}

/* 1) Make each section end with 10px bottom margin */
.metric-modal-section {
  margin-bottom: 10px !important;
}

/* 2) Ensure the <strong> subheading sits flush against its content */
.metric-modal-section strong {
  display: block !important;
  margin-bottom: 0 !important;
}

/* 3) Remove any default top/bottom margins on the first paragraph or list */
.metric-modal-section p,
.metric-modal-section ul {
  margin: 0 !important;
  padding: 0 !important;
  color: #ccc;
}

.metric-modal-subheading {
  display: block;
  margin-bottom: 0;
}

.metric-modal-text {
  margin: 0;
}

.metric-modal-list {
  list-style: disc;
  margin: 0 0 10px 0 !important;       /* keep your 10px gap below */
  padding-left: 0 !important;          /* remove extra inset */
  list-style-position: inside !important;  /* bullet sits at the same left edge as text */

}

.metric-modal-list-item {
   margin-left: 0 !important;           /* ensure no extra indent on each <li> */
  padding-left: 0 !important;  
}

.metric-modal-footer {
  text-align: center;
}

.metric-modal-close-btn {
  padding: 0.5rem 1rem;
}

@media (max-width: 430px) {
  #metric-info-modal .modal-content {
    width: 90%;
    padding: 1.5rem;
    font-size: 0.95rem;
  }

  .metric-modal-section {
    margin-bottom: 8px !important;
  }

  .metric-modal-list {
    padding-left: 10px !important;
  }

  .metric-modal-close-btn {
    width: 100%;
  }
}


/*==========================================
  Financial Deep-Dive
==========================================*/

details.collapsible {
  margin-bottom: 1.5rem;
  background: #1e1e1e;
  border-radius: 4px;
}
details.collapsible summary {
  cursor: pointer;
  padding: 0.75rem 1rem;
  font-weight: bold;
  color: #fff;
}
details.collapsible .panel-content {
  padding: 0 1rem 1rem;
}

@media (max-width: 430px) {
  details.collapsible summary {
    font-size: 1rem;
  }

  .panel-content {
    padding: 0 0.5rem 1rem;
    font-size: 0.95rem;
  }
}


/*==========================================
  Financial Deep-Dive Tab Styling
==========================================*/

/* ────────────────────────────────────────────────────────
   Tabs Container  (same look as .chart-container)
   ──────────────────────────────────────────────────────── */
.tabs-content-container {
  display: flex;
  flex-direction: column;   /* tabs on top, panes below */
  background-color: #2c3e50;
  border: 2px solid #cccccc;
  border-radius: 8px;
  border-top-left-radius: 0;   /* ← make the top-left square */
  padding: 20px 20px 20px;
  box-sizing: border-box;
  margin-top: -1px; 
  margin-bottom: 30px;      /* space under the whole box */
  gap: 1rem;                /* small gap between tabs row and content */
/*  padding-bottom: 50px !important;*/
}



/* -----------------------
   Tabs bar (flush, equal-width, with gap)
   ----------------------- */
.tabs-nav {
  display: flex;
  gap: 3px;                 /* ← space between each tab */
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.tabs-nav {
  margin-top: 25px !important;
}

.tabs-nav li {
  flex: 1 1 0;              /* ← equal-width, but see max-width below */
  max-width: 110px;          /* ← no wider than 50px */
/*  height: 35px;             /* ← adjust this value to change tab height */
  line-height: 30px;        /* ← vertically center the text inside that height */
  text-align: center;
  background: #2c3e50;      /* ← non-active tab background */
  color: #ccc;
  cursor: pointer;
  border-radius: 6px 6px 0 0;/* ← round only the top corners */
  transition: background 0.2s, color 0.2s;
  margin: 0;                /* ← margins no longer needed, gap handles spacing */
  padding: 0;               /* ← resetting padding since we’re using height/line-height */
  margin-bottom: 1px;
}

.tabs-nav li.active {
  background: #4EA1D3;      /* ← active tab background */
  color: #fff;              /* ← active tab text color */
}

/* Panes full-width beneath tabs */
.tabs-content {
  width: 100%;
}
.tabs-content .tab-pane {
  display: none;
  width: 100%;
}
.tabs-content .tab-pane:first-of-type,
.tabs-content .tab-pane.active {
  display: block;
}

/* Pane layout: two-column flex */
.pane-flex {
  display: flex;
  gap: 1rem;
}

/* add top‐gap on Per-Share (idx 2), Liquidity (idx 4), Working Cap (idx 6) & R&D (idx 7) */
.tabs-content .tab-pane[data-index="1"] .pane-flex {
/*  margin-top: -25px !important;*/

}

/* add top‐gap on Per-Share (idx 2), Liquidity (idx 4), Working Cap (idx 6) & R&D (idx 7) */
.tabs-content .tab-pane[data-index="4"] .pane-flex {
  margin-top: 0px !important;
}

/* add top‐gap on Per-Share (idx 2), Liquidity (idx 4), Working Cap (idx 6) & R&D (idx 7) */
.tabs-content .tab-pane[data-index="5"] .pane-flex {
/*  margin-top: -25px !important;*/

}

/* add top‐gap on Per-Share (idx 2), Liquidity (idx 4), Working Cap (idx 6) & R&D (idx 7) */
.tabs-content .tab-pane[data-index="6"] .pane-flex {
/*  margin-top: -25px !important;*/

}

/* add top‐gap on Per-Share (idx 2), Liquidity (idx 4), Working Cap (idx 6) & R&D (idx 7) */
.tabs-content .tab-pane[data-index="7"] .pane-flex {
/*  margin-top: -25px !important;*/

}


.pane-flex .chart-left-fin {
  flex: 0 0 auto;
  margin-top: 0px;          
}
.pane-flex .chart-right-fin {
  margin-top: 0px;            
}

/* Shrink-to-fit snapshot table */
.metrics-table-fin {
  width: auto !important;
  max-width: 100%;
  border-collapse: collapse;
}
.metrics-table-fin td {
  padding: 4px 8px;
}


table.metrics-table-fin td {
  padding-top: 7px;
  padding-bottom: 7px;
  vertical-align: middle;
}


/* Trend-chart, group-summary and indicator styles */
.trend-chart {
  text-align: center;
}

.group-summary {
  margin-top: 1rem;
  color: #ccc;
  font-style: italic;
}

.indicator {
  position: relative;
/*  cursor: pointer;*/
  margin-right: 4px;
  display: inline-block;      /* so the dot stays sized & aligned */
  vertical-align: middle;     /* centers it with your numbers/text */
  float: left;
} 
/* dot markers */
.indicator.green::before  { content: '🟢'; }
.indicator.amber::before  { content: '🟠'; }
.indicator.red::before    { content: '🔴'; }

.trend-chart {
  background: var(--dark-bg);
  padding: 0.5rem;
  border-radius: 4px;
  height: 260px;   /* gives you 10px of padding inside */
  padding: 5px;
}
.trend-chart-canvas {
  width: 100% !important;
  height: 300px !important;
  margin-top: -20px;
  padding-bottom: 80px !important;
  display: block;
}


/* ─── Financial Deep-Dive: two-column trend grid ─── */
.pane-flex .chart-right-fin {
  /* make the right‐hand pane fill all the leftover space */
  flex: 1 1 0;
  width: 100%;
  box-sizing: border-box;
}

.trend-charts-wrapper {
  /* always fill its parent (the right pane) */
  width: 100%;
}

/* only when you want the 2-up grid */
.trend-charts-wrapper.two-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding-bottom: 30px;
}


@media (max-width: 430px) {
  .tabs-nav {
    flex-direction: column;
  }

  .tabs-nav li {
    max-width: 100%;
    line-height: 36px;
    font-size: 1rem;
  }

  .pane-flex {
    flex-direction: column;
  }

  .trend-charts-wrapper.two-col {
    grid-template-columns: 1fr;
  }

  .trend-chart-canvas {
    height: 240px !important;
  }

  .tabs-content-container {
    padding: 16px;
  }

  .group-summary {
    font-size: 0.95rem;
  }
}



/* ── Trend‐chart “i” tooltip icon ───────────────────────────── */
.trend-info-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;           /* same as your indicator dot */
  height: 16px !important;          /* ditto */
  border-radius: 50% !important;    /* perfect circle */
  background-color: var(--primary-color) !important;
  color: #fff !important;
  font-size: 10px !important;       /* fits nicely inside */
  line-height: 1 !important;
  margin-left: 4px !important;      /* space from the dot */
  cursor: pointer !important;
  position: relative !important;
/*  z-index: 10000 !important;*/
}

/*span.trend-info-icon.cc-tooltip {
  z-index: 10000 !important;
}
*/
/* Tooltip text (re-use your existing cc-tooltip-text styling) */
.trend-info-icon .cc-tooltip-text {
  /* if you need unique tweaks, override here */
}




/* tighten gap between a subheading and its narrative */
.report-output h2 + p {
  margin-top: 0rem !important;  /* or whatever small value you prefer */
}
.report-output h2 {
  margin-bottom: 0rem !important;  /* shrink the bottom gap on headings themselves */
}





/* 1) Force a 50/50 split on our special panes */
.tabs-content .tab-pane.special .pane-flex {
  display: flex;
}
.tabs-content .tab-pane.special .pane-flex > .chart-left-fin,
.tabs-content .tab-pane.special .pane-flex > .chart-right-fin {
  flex: 1 1 50%;
  box-sizing: border-box;
  padding: 0 1rem;
}

/* 2) Make the snapshot table fill its half completely */
.tabs-content .tab-pane.special .metrics-table-fin {
  width: 100% !important;
}
.tabs-content .tab-pane.special .metrics-table-fin td:first-child { width: 70%; }
.tabs-content .tab-pane.special .metrics-table-fin td:last-child  { width: 30%; }

/* 3) Style our Highlights/Lowlights block */
.vl-highlow {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.vl-highlow h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #fff;
}



/* make our overrides full-width and stacked */
.trend-charts-full .trend-chart.full-width {
  width: 100% !important;
  margin-bottom: 1rem;
}

/* ensure the table container goes full width */
.chart-left-fin.full-width {
  width: 100% !important;
  margin-bottom: 1.5rem;
}

/* ensure the highlights/lowlights flex row spans full width */
.pane-flex.full-width {
  display: flex !important;
  gap: 1rem;
  width: 100% !important;
}
.pane-flex.full-width > .chart-left-fin,
.pane-flex.full-width > .chart-right-fin {
  flex: 1;
  box-sizing: border-box;
}




/* ────────────────────────────────────────────────────────────
   Let our full-width, per-share trend-chart wrappers grow
──────────────────────────────────────────────────────────── */
/* 1) Force the wrapper to auto‐size (and be at least as tall as your canvas) */
.trend-charts-full .trend-chart.full-width {
  height: auto      !important;
  min-height: 325px !important;  /* match whatever canvas height you chose */
  padding: 0       !important;    /* kill that 5px/10px bottom padding */
}

/* 2) Force just the <canvas> itself to your new height */
#revenuePerShareChart,
#operatingCashFlowPerShareChart,
#freeCashFlowPerShareChart {
  height: 325px    !important;
  max-height: none !important;    /* ensure Chart.js doesn’t clamp it */
}

/* ── Per-Share chart padding fix ───────────────────────────────── */

/* target only our three per-share canvases, override their padding-bottom */
canvas#revenuePerShareChart.trend-chart-canvas,
canvas#operatingCashFlowPerShareChart.trend-chart-canvas,
canvas#freeCashFlowPerShareChart.trend-chart-canvas {
  padding-bottom: 10px !important;
}

/* ── Per-Share pane: only the first .pane-flex (snapshot + H/L) splits 50/50 ── */
.tabs-content .tab-pane[data-index="2"] .pane-flex:first-of-type {
  display: flex !important;
  gap: 1rem; /* match your other panes */
}

/* force left/right halves to 50/50 */
.tabs-content .tab-pane[data-index="2"] .pane-flex:first-of-type > .chart-left-fin,
.tabs-content .tab-pane[data-index="2"] .pane-flex:first-of-type > .chart-right-fin {
  flex: 1 1 50% !important;
  box-sizing: border-box;
  padding: 0 1rem !important;
}

/* within that left half, make table columns 70/30 */
.tabs-content .tab-pane[data-index="2"] .pane-flex:first-of-type .metrics-table-fin td:first-child {
  width: 70% !important;
}
.tabs-content .tab-pane[data-index="2"] .pane-flex:first-of-type .metrics-table-fin td:last-child {
  width: 30% !important;
}


li {
  color: #cccccc !important;
}





/* only trend-only tabs get side-by-side highlights/lowlights */
.pane-flex.vl-highlow {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
}

/* each column fills half width */
.pane-flex.vl-highlow > div {
  flex: 1;
}

/* all other vl-highlow containers (no pane-flex) stack as normal */
.vl-highlow:not(.pane-flex) {
  display: block;
}



.na {
  color: #999;
  font-style: italic;
}

.no-data {
  color: #999;
  font-style: italic;
  text-align: center;
  margin: 1em 0;
}


/* ↓ add this at the bottom of your stylesheet */
.unavailable {
  opacity: 0.5;
  font-style: italic;
  color: #888;
}

.unavailable-chart {
  opacity: 0.3;
  position: relative;
  text-align: center;
  pointer-events: none;
}
.unavailable-chart p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}



.metrics-table tr.unavailable td { color:#777; font-style:italic; }



/* ====================================================
   Action Checklist (drop-in replacement)
   ==================================================== */
.action-checklist {
  background-color: #2c3e50;   /* same dark blue as flags */
  border: 2px solid #cccccc;   /* light grey border */
  border-radius: 8px;
  padding: 20px;
  margin: 2rem 0;
}

.action-checklist > h2 {
  color: #fff;
  font-weight: bold;
  margin: 0 0 12px;
  position: relative;
}
.action-checklist > h2::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  margin-top: 10px;
  margin-bottom: 15px;
}

/* UL container: bullets outside & gutter for text */
.action-checklist .action-list {
  list-style: disc outside;
  padding-left: 1.5em;  /* room for bullet + gutter */
  margin: 0;
}

/* LI items: hanging indent so wrapped lines align under first word */
.action-checklist .action-list li {
  color: #ccc;
  margin-bottom: 0.75rem;

  /* hanging-indent:
     - text-indent pulls the first line back into the gutter
     - padding-left nudges all lines over to start under the text */
/*  text-indent: -0.5em;*/
  padding-left: 0.3em;
}




/* === Saved Reports Table Header === */
#savedReportsToggle.collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 36px;
}

/* ─────────────────────────────────────────────────────────
   Saved Reports Table: column widths, row height, zebra, hover, icon styling
───────────────────────────────────────────────────────── */

/* 1) Make the table fill its parent container */
#savedReportsTable {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0;
  box-sizing: border-box;
  margin-top: -20px !important;
  margin-bottom: 70 !important;
}

/* 2) Header styling */
#savedReportsTable thead {
  background-color: var(--primary-color);
}
#savedReportsTable thead th {
  color: #fff;
  padding: 0.5rem 0.5rem;   /* reduced padding for shorter header */
  border-bottom: 1px solid #3a8bbd;
  font-weight: 600;
  text-align: left;
}

/* 3) Cell padding and borders (uniform row height) */
#savedReportsTable td,
#savedReportsTable th {
  padding: 0.5rem 0.5rem;
  border: 1px solid #334155;
  color: #ecf0f1;
  vertical-align: middle;
}

/* 3a) Shrink logo images to fit the new, shorter row height */
#savedReportsTable td:nth-child(1) img {
  height: 24px !important;             /* reduced from 30px */
  width: auto;
  border-radius: 3px;
}

/* 4) Define column widths:
      - Logo (col 1): auto (fits image)
      - Ticker (col 2): 10%
      - Company (col 3): 50%
      - Saved On (col 4): 15%
      - Expire Date (col 5): 15%
      - Actions (col 6): 10%
*/
#savedReportsTable th:nth-child(2),
#savedReportsTable td:nth-child(2) {
  width: 10%;
}
#savedReportsTable th:nth-child(3),
#savedReportsTable td:nth-child(3) {
  width: 50%;
}
#savedReportsTable th:nth-child(4),
#savedReportsTable td:nth-child(4),
#savedReportsTable th:nth-child(5),
#savedReportsTable td:nth-child(5) {
  width: 15%;
}

/* 4a) Zebra striping on body rows: odd = #2c3e50, even = #1f2937 */
#savedReportsTable tbody tr:nth-child(odd) {
  background-color: #2c3e50;
}
#savedReportsTable tbody tr:nth-child(even) {
  background-color: #1f2937;
}

/* 6) Hover behavior: same blue hover as metrics tables */
#savedReportsTable tbody tr:hover {
  background-color: var(--primary-color);
  cursor: pointer;
}


/* 7) Remove bold formatting from Ticker, Company, Saved On, Expire Date */
#savedReportsTable td:nth-child(2),
#savedReportsTable td:nth-child(3),
#savedReportsTable td:nth-child(4),
#savedReportsTable td:nth-child(5) {
  font-weight: normal;
  color: #ecf0f1;
}

/* 8) Center the Open/Delete icons in the Actions cell */
#savedReportsTable td:nth-child(6) {
  text-align: center;
  padding: 0.5rem 0.5rem;
}

/* 9) Style the Open icon (make it white) */
#savedReportsTable .open-saved-btn {
  color: #ffffff !important;            /* white */
  margin-right: 0.8rem;
  font-size: 1rem;           /* ensure legible size */
  vertical-align: middle;
  transition: color 0.2s ease;
}
#savedReportsTable .open-saved-btn:hover {
  color: #dddddd !important;
}

/* 10) Style the Delete icon (#DE6075) */
#savedReportsTable .delete-saved-btn {
  color: #DE6075 !important;            /* custom delete color */
  font-size: 1rem;
  vertical-align: middle;
  transition: color 0.2s ease;
}
#savedReportsTable .delete-saved-btn:hover {
  color: #bf4f63;
}

/* 11) Ensure the “.saved-reports-content” wrapper is full width */
.saved-reports-content {
  width: 100%;
  box-sizing: border-box;
}

button#savedReportsToggle {
  margin-top: -40px !important;
}



/* ── Generic “modal hidden” behavior ───────────────────────────────── */
.hidden { display: none !important; }

/* ── Suspended-modal (will inherit the same rules as #trial-limit-modal) ── */
#suspended-modal {
  position: fixed;
  inset: 0;                      /* top/left/right/bottom: full-screen overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  z-index: 2002;                 /* above loading (2000) and trial (2001) */
}

#suspended-modal .modal-content {
  position: relative;
  width: 400px;
  padding: 2rem;
  border-radius: 8px;
  background: #2c3e50;
  color: #fff;
  text-align: center;
}

#suspended-modal .close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}

#suspended-modal .modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

#suspended-modal .modal-actions button {
  flex: 1;
  padding: 0.5rem 0;
  border: none;
  border-radius: 6px;
  background: #4EA1D3;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}

@media (max-width: 430px) {
  #suspended-modal .modal-content {
    width: 90%;
    padding: 1.5rem;
    font-size: 0.95rem;
  }
  .modal-actions {
    flex-direction: column;
  }
  .modal-actions button {
    width: 100%;
  }
}

#closeSuspendedBtn {
  padding: 0.75rem 1.25rem;
  font-size: 1.1rem;
}


/* ==============================================
   Saved‐Report Delete Confirmation Modal Styles
   ============================================== */

/* full‐screen overlay */
.sd-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500; /* higher than other modals if needed */
}

/* hidden state */
.sd-modal.hidden {
  display: none;
}

/* the white/colored box in the center */
.sd-modal-content {
  background-color: #2c3e50;
  color: #fff;
  border-radius: 8px;
  padding: 2rem;
  width: 420px;
  max-width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* confirmation text */
#sdm-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* button row */
.sd-modal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  width: 100%;
}

/* “Yes, Delete” button */
.sd-btn-delete {
  flex: 1;
  background: #4EA1D3;
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

/* “Cancel” button */
.sd-btn-cancel {
  flex: 1;
  background: #4EA1D3;
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Responsive: shrink padding on small screens */
@media (max-width: 430px) {
  .sd-modal-content {
    padding: 1.5rem;
    font-size: 0.95rem;
  }
  .sd-modal-actions {
    flex-direction: column;
  }
  .sd-modal-actions button {
    width: 100%;
  }
}




/*Stop Copying*/
/* Disable text selection on the report container */
/*#article-output, 
#article-output * {
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  user-select:         none;
}


#article-output, 
#article-output * {
  cursor: default;
}*/




/* ────────────────────────────────────────────────────────────────────────────
   Mobile (≤ 430 px) overrides for single-column layout, quota banner, tooltips,
   and “Saved Reports” toggle behavior (hidden unless .visible).
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  /* 1) Report container: narrow margins/padding, keep position: relative */
  .report-container {
    margin: 10px !important;
    padding: 12px !important;
    position: relative; /* so the quota-banner’s absolute positioning is based on this */
  }

  /* 2) Scale down heading + description text */
  .report-container .form-title {
    font-size: 1.4rem !important;
    margin-bottom: 0.75rem !important;
  }
  .report-container .page-description {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  /* 3) Stack inputs vertically */
  .report-container .input-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .report-container .input-group {
    flex: 1 1 100% !important;
    min-width: auto !important;
    margin-bottom: 8px !important;
  }

  /* 4) Shrink labels, tooltips, inputs, textareas */
  .report-container .input-title label {
    font-size: 0.95rem !important;
  }
  .report-container .cc-info-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }
  .report-container .cc-tooltip-text {
    font-size: 11px !important;
    width: 200px !important;
    /* nudge the tooltip anchor-point to the right */
    left: 65% !important;
    transform: translateX(5%) !important;
  }
  .report-container input,
  .report-container select,
  .report-container textarea {
    font-size: 1rem !important;
    padding: 0.6rem 0.75rem !important;
    height: 40px !important;
  }
  .report-container textarea {
    min-height: 3.5em !important;
  }

  /* 5) “Advanced Search” toggle + content full-width on mobile */
  button.collapsible {
    font-size: 1rem !important;
    height: 40px !important;
    padding: 0 1rem !important;
    margin-bottom: -20px !important;
  }
  button.collapsible .arrow {
    font-size: 1.2rem !important;
  }

  .advanced-content {
    padding: 16px !important;
    gap: 16px !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
  .advanced-content .input-row {
    gap: 12px !important;
  }
  .advanced-content textarea,
  .advanced-content input[type="url"] {
    font-size: 1rem !important;
    padding: 0.6rem 0.75rem !important;
  }
  .advanced-description {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
  }
  p.advanced-description {
    margin-top: 0 !important;
  }

  /* 6) Stack “Generate Report” + “Clear Form” buttons */
  .form-actions {
    flex-direction: column !important;
    gap: 0px !important;
    margin-top: 0px !important;
    width: 100% !important;
  }
  #generateArticleBtn,
  #newReportBtn {
    width: 100% !important;
    margin-left: 0 !important;
    font-size: 1rem !important;
    height: 40px !important;
  }
  button#newReportBtn {
    margin-top: 4px !important;
  }

  /* 7) Quota-banner spans full “inner” width on mobile */
  .report-container .quota-banner {
    position: absolute !important;
    top: 12px !important;      /* match container’s top padding */
    left: 12px !important;     /* match container’s left padding */
    right: 12px !important;    /* match container’s right padding */
    width: auto !important;    /* fill the “inner” space */
    background: #2c3e50 !important;
    border: 2px solid #cccccc !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.2rem !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 0.8rem !important;
    z-index: 10;               /* float above form elements */
  }
  .report-container .quota-banner #report-credits {
    font-size: 1.2em !important;
    margin-top: 0.2rem !important;
  }
  .report-container .quota-banner .quota-actions button {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* 8) “Saved Reports” toggle: hidden by default on mobile unless .visible */
  #savedReportsToggle {
    display: none !important;
    width: 100% !important;
    height: 40px !important;
    font-size: 1rem !important;
    margin-top: 12px !important;
    padding: 0 1rem !important;
  }
  button#savedReportsToggle {
    margin-top: 32px !important;
    height: 40px !important;
  }
  /* When JS adds .visible, force it back on */
  #savedReportsToggle.visible {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  #savedReportsToggle .arrow {
    font-size: 1.2rem !important;
  }
  .saved-reports-content {
    margin-top: 0.5rem !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   Desktop/tablet override: whenever #savedReportsToggle has .visible,
   ensure it is shown in flex layout.
──────────────────────────────────────────────────────────────────────────── */
#savedReportsToggle.visible {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 15px !important; /* match “Advanced Search” padding */
  height: 36px !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   Mobile-Portrait (≤ 430 px & portrait): hide some columns, adjust widths
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 430px) and (orientation: portrait) {
  /* 1) Hide “Logo” (col 1), “Ticker” (col 2) and “Expire Date” (col 5) */
  #savedReportsTable th:nth-child(1),
  #savedReportsTable td:nth-child(1),
  #savedReportsTable th:nth-child(2),
  #savedReportsTable td:nth-child(2),
  #savedReportsTable th:nth-child(5),
  #savedReportsTable td:nth-child(5) {
    display: none;
  }

  /* 2) Tweak font-size/padding */
  #savedReportsTable {
    font-size: 0.9rem;
    border-collapse: collapse;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
  }
  #savedReportsTable td,
  #savedReportsTable th {
    padding: 0.4rem 0.4rem;
  }

  /* 3) Make “Company” (col 3), “Saved On” (col 4), and “Actions” (col 6)
        share the width in a ~ 50 / 40 / 10 ratio */
  #savedReportsTable th:nth-child(3),
  #savedReportsTable td:nth-child(3) {
    width: 50% !important;
  }
  #savedReportsTable th:nth-child(4),
  #savedReportsTable td:nth-child(4) {
    width: 40% !important;
  }
  #savedReportsTable th:nth-child(6),
  #savedReportsTable td:nth-child(6) {
    width: 10% !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   Mobile-Landscape (height ≤ 430 px) → Force both buttons to span full width
──────────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 430px) {
  /* 1) Make sure the wrapper fills its container */
  .form-actions {
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;        /* adjust gap as needed */
    margin-top: -48px !important; /* fixed “px” instead of just “-48” */
  }

  /* 2) Force each button to flex equally and fill the row */
  #generateArticleBtn,
  #newReportBtn {
    flex: 1 1 0 !important;
    width: auto !important;
    margin-left: 0 !important;
    height: 40px !important;
    font-size: 1rem !important;
  }

  /* 3) Optionally cap the .report-container max-width so charts don’t smash */
  .report-container {
    max-width: 900px !important;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   “Rotate to landscape” overlay (shown only in portrait on small screens)
   (If you want to force users to turn their phone sideways.)
──────────────────────────────────────────────────────────────────────────── */
/*#rotate-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  text-align: center;
}
#rotate-overlay .rotate-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
#rotate-overlay .rotate-message i {
  color: #fff;
  margin-bottom: 0.5rem;
}


@media (max-width: 768px) and (orientation: portrait) {
  #rotate-overlay {
    display: flex !important;
  }
  #main-content {
    filter: blur(4px);
    opacity: 0.5;
    pointer-events: none;
  }
}*/

/* ────────────────────────────────────────────────────────────────────────────
   Small-phone landscape: force–shrink generated-report fonts, tables, charts
   (Catches iPhone-sized devices whose height ≤ 430 px in landscape.)
──────────────────────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 430px) {
  /* 1) Shrink the report’s outer container */
  .report-output {
    padding: 12px !important;
    font-size: 0.9rem !important;
  }

  /* 2) Headings inside the report */
  .report-output h2 {
    font-size: 1.25rem !important;
    margin: 0.75rem 0 1rem !important;
  }

  /* 3) Paragraph text inside the report */
  .report-output p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
  }

  /* 4) Tables: reduce font-size and cell padding */
  .report-output table {
    font-size: 0.85rem !important;
  }
  .report-output td,
  .report-output th {
    padding: 4px 6px !important;
  }

  /* 5) Any chart containers (axis labels, legend text, etc.) */
  .chart-left,
  .chart-right {
    font-size: 0.9rem !important;
  }

  /* 6) Metric/mini-cards, if present in the report */
  .metric-card .label {
    font-size: 0.7rem !important;
  }
  .metric-card .value {
    font-size: 1rem !important;
  }
  .metric-card small {
    font-size: 0.65rem !important;
  }

  /* 7) Highlights/Lowlights (vertical flex) – tighten up */
  .vl-highlow {
    margin-top: 0.75rem !important;
    gap: 0.5rem !important;
  }
  .vl-highlow h2 {
    font-size: 1.1rem !important;
  }

  /* 8) Flag-section or other dark containers – shrink padding/gap */
  .flags-section,
  .chart-container {
    padding: 12px !important;
    gap: 0.5rem !important;
  }
}

/* ────────────────────────────────────────────────────────────
   Small-phone landscape (height ≤ 430px): prevent chart + table overflow
──────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 430px) {
  /* 1) Force the chart container to stack its two halves vertically */
  .chart-container {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden;  /* ensure nothing spills out horizontally */
    padding: 8px !important;
    gap: 0 !important;
  }

  /* 2) Make each half take 100% of the (now narrow) width */
  .chart-left,
  .chart-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 4px !important;
  }

  /* 3) Ensure the canvas itself never exceeds its parent’s width */
  .trend-chart-canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 4) Force the metrics table and any other tables to fill 100% of their container
        while still allowing horizontal scrolling if content is wider */
  .chart-right table,
  .metrics-table,
  .metrics-table-fin {
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  .chart-right table td,
  .chart-right table th,
  .metrics-table td,
  .metrics-table th,
  .metrics-table-fin td,
  .metrics-table-fin th {
    padding: 4px 6px !important;
    font-size: 0.85rem !important;
  }
}


/* ────────────────────────────────────────────────────────────
   Small-phone landscape (height ≤ 430px): nudge 2nd-row trend charts downward
──────────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 430px) {
  /* In any two-column trend-charts wrapper, the 3rd and 4th charts sit on the second row.
     Add a small top margin so they don’t overlap the first row. */
  .trend-charts-wrapper.two-col > .trend-chart:nth-child(n+3) {
    margin-top: 30px !important;
  }

   /* 5) Add extra space under the final row of 2-col trend charts */
  .trend-charts-wrapper.two-col {
    margin-bottom: 30px !important;
  }
}


/* ── Mobile-Portrait: Report Header Fixes ─────────────────────────────── */
@media (max-width: 430px) {
  /* 1) Stack header elements vertically & center them */
  .report-output .report-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid #444 !important;
  }

  /* 2) Logo sizing */
  .report-output .report-header img {
    max-width: 80px !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* 3) Company name */
  .report-output .report-header h1 {
    font-size: 1.2rem !important;
    margin: 0 !important;
  }

  /* 4) Key numbers / rating */
  .report-output .report-header .key-numbers {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }

  /* 5) Generated-on date (if wrapped in a <p> or .report-date) */
  .report-output .report-header p.report-date,
  .report-output .report-header .report-date {
    font-size: 0.8rem !important;
    color: #ccc !important;
    margin: 0 !important;
  }


//* 6) Save button full-width */
  .report-output #saveReportBtn {
    display: block !important;
    width: 100% !important;
    padding: 0.6rem !important;
    font-size: 1rem !important;
    margin: 0.5rem auto 0 !important;
  }

  /* --- NEW: centre the header’s children and kill that inline margin-left:auto --- */
  .report-output .report-header {
    justify-content: center !important;
  }
  .report-output .report-header > div:last-child {
    margin-left: 0 !important;
    justify-content: center !important;
  }


}


/* ── Mobile-Portrait: Shrink Key-Metrics Table ───────────────────────── */
@media (max-width: 430px) and (orientation: portrait) {
  /* Target the right-hand table under the share-price chart */
  .chart-container .chart-right table,
  .chart-container .chart-right .metrics-table {
    font-size: 0.8rem !important;
  }

  .chart-container .chart-right td,
  .chart-container .chart-right th,
  .chart-right .metrics-table td,
  .chart-right .metrics-table th {
    padding: 0.3rem 0.4rem !important;
  }

  /* If you have any header cells you still want slightly bigger: */
  .chart-container .chart-right th {
    font-size: 0.9rem !important;
  }

  .metrics-table,
  .metrics-table td,
  .metrics-table th {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.4rem !important;
  }
  .metrics-table th {
    font-size: 0.8rem !important;
  }

  #financial-deep-dive-section table,
  #financial-deep-dive-section table td,
  #financial-deep-dive-section table th {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.4rem !important;
  }
  /* slightly larger header cells */
  #financial-deep-dive-section table th {
    font-size: 0.8rem !important;
  }

}

@media (max-width: 430px) and (orientation: portrait) {
  /* stack Highlights over Lowlights */
  div.pane-flex.vl-highlow {
    flex-direction: column !important;
  }
  /* make each child full-width */
  div.pane-flex.vl-highlow > * {
    width: 100% !important;
    margin-bottom: 1em;
    /* reset any left/right gutters */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .trend-chart-canvas {
    padding-bottom: 0px !important;
  }
}