html {
  overflow-y: scroll; /* Always show vertical scrollbar space */
}


/* Custom Header Styling */
.custom-header {
    background-color: #293a49;  /* Bootstrap "secondary" gray */
    color: white;
}

header, .navbar {
    position: relative;
    z-index: 10; /* higher than the section’s z-index: 1 */
    background-color: #2c3e50; /* ensure it has a solid background */
}

/*overrride boostrap with custom navbar shading */
.navbar {
    background-color: #e4e4e4 !important;  /* custom color */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* optional subtle shadow */
}

.nav-link {
  font-weight: 600; /* slightly lighter than full bold */
}


header.custom-header h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.header-subtitle {
  font-size: 0.875rem; /* slightly smaller */
  color: rgb(255, 255, 255); /* pale light gray, semi-transparent */
  font-weight: 400;
  user-select: none; /* optional: prevents subtitle text selection */
}

/* this is the date header at top right */
.text-end {
  font-size: 0.875rem; /* slightly smaller */
  color: rgb(255, 255, 255);
  font-weight: 400;
  user-select: none; /* optional: prevents subtitle text selection */
}

/* Make sure the text inside the header also turns white */
.custom-header h1,
.custom-header a,
.custom-header a:hover,
.custom-header small {
    color: white !important;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* prevent shrinking */
}

/* Prevent header text from jumping by fixing the minimum width */
.custom-header .ms-2 {
    min-width: 220px; /* adjust this to fit your longest site name */
}

/* Universal font setting */
body {
    font-family: 'Arial', sans-serif !important;
    font-size: 14px;
    background-color: #e9ecef; /* a light gray contrasting backdrop */
}

/* Custom PDF download button */
.btn-pdf {
    background: linear-gradient(to bottom, #5a5a5a, #3e3e3e); /* light-to-dark gradient for depth */
    color: #fff;                     /* white text */
    border: none;                    /* remove default border */
    border-radius: 6px;              /* soften edges slightly */
    padding-top: 0.35rem;            /* shift text down slightly */
    padding-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;                    /* space between icon and text */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* subtle raised shadow */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Remove hover/focus color change but keep same raised look */
.btn-pdf:hover,
.btn-pdf:focus {
    background: linear-gradient(to bottom, #5a5a5a, #3e3e3e); /* same as base */
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* maintain shadow */
}

/* Subtle "pressed" state for realism */
.btn-pdf:active {
    transform: translateY(1px); /* slight press effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* reduce shadow slightly */
}



/* HOMEPAGE TABLE STUFF */

/* Full-page vertical section */
.homepage-vertical-section {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  padding: 5px 0;
  background: transparent; /* let pseudo-element draw the white panel */
  overflow: visible;
}

/* White panel + outward shadows */
.homepage-vertical-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1350px;
  background: #fff;
  z-index: 0;
}

/* Add left/right shadows only */
.homepage-vertical-section::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1350px;
  box-shadow:
    -25px 0 25px -20px rgba(0, 0, 0, 0.15),
     25px 0 25px -20px rgba(0, 0, 0, 0.15);
  z-index: 0;
  pointer-events: none;
}


/* Ensure all content sits above the pseudo-element */
.homepage-vertical-section > * {
  position: relative;
  z-index: 1;
}


/* Optional top action button */
.homepage-action-btn-wrapper {
    width: 100%;
    text-align: center;
}

.homepage-action-btn {
    background-color: #d2e9f0; /* light blue */
    color: rgb(0, 0, 0);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: .9rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.homepage-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.group-header {
    background-color: #e8f0fe; /* light blue highlight */
    font-weight: bold;
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 4px 4px;
}

.group-row th.group-header {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 0.9em;     /* slightly smaller text */
    line-height: 1.1;     /* tighter vertical spacing */
}


/* Highlight box styling */
.highlight-box {
    background-color: #f2f2f2;          /* light grey background */
    border-radius: 15px;                /* rounded corners */
    border: 1px solid #c7c7c7;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* subtle drop shadow */
    padding: 1rem;
    margin: 1rem auto 1.5rem auto; /* top, right/left, bottom */
    max-width: 700px;                   /* keeps it centered and tidy */
    text-align: center;
}

/* Title and description text */
.highlight-box h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.highlight-box .description {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 1.0rem;
    margin-top: 0;
}

/* Form styling inside the box */
.highlight-box form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.highlight-box label {
    font-weight: bold;
    color: #333;
}

.highlight-box select {
    width: 70%;
    padding: 0.7rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1rem;
}



.company-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    grid-auto-rows: 38px;                  /* all buttons same height */
    margin: 0; 
    margin-top: 0;                            /* remove outer spacing */
    padding: 0;                            /* remove padding */
    gap: 0;                                /* remove gaps between buttons */
}

.highlight-box .company-toggle {
    background-color: #e0e0e0;     /* light gray for unselected */
    border: 1px solid #d4d4d4;        /* thin border to separate buttons */
    border-radius: 0;               /* remove rounded corners */
    width: 100%;                    /* fills the grid cell */
    height: 100%;                   /* matches grid row height */
    margin: 0 !important;                      /* remove any margin */
    font-weight: normal;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: none; /* disables the fade-in, so active color appears immediately */
}


.highlight-box .company-toggle:hover {
    background-color: inherit;
}

.highlight-box .company-toggle.active {
    background-color: #333 !important;  /* dark when selected */
    color: #fff !important;              /* white text */
    border-color: #333 !important;       /* border matches background */
}


.health-bar {
    display: inline-block;
    height: 10px;            /* bar height */
    border-radius: 5px;      /* rounded edges */
    margin-right: 5px;       /* spacing between bar and number */
    vertical-align: middle; 
}

/* button */
.compare-btn {
    background: linear-gradient(to bottom, #6b6b6b, #4d4d4d); /* light-to-dark gradient for depth */
    color: #fff;                     /* white text */
    border: none;                    /* remove default border */
    border-radius: 6px;              /* soften edges slightly */
    padding-top: 0.25rem;            /* shift text down slightly */
    padding-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;                    /* space between icon and text */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* subtle raised shadow */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}


/* Layout for the form */
#comparison-tool-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0; /* space between dropdown and button */
  margin-bottom: 0; /* optional spacing below the form */
}



/* Hover effect */
#comparison-tool-form button:hover {
  background-color: #e0e0e0; /* slightly darker green */
  transform: translateY(-2px);
}

/* Optional: make button match Tom Select height */
#comparison-tool-form button {
  height: 38px; /* Tom Select’s default height */
  margin-top: 20px;

}


/* Keep table full width and responsive */
.homepage-table {
    width: 100%;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.05);
}


.table {
    table-layout: fixed;
    width: 100%;
}

/* Allow header text to wrap and add light shading */
.table th {
    white-space: normal;            /* allow wrapping */
    overflow: visible;              /* make sure wrapped text is visible */
    text-overflow: unset;           /* remove ellipsis for headers */
    background-color: #f2f4f6;      /* light gray background */
    font-weight: 600;               /* make labels stand out slightly */
    border-bottom: 2px solid #ddd;  /* optional: stronger bottom border */
}


/* align data cells on homepage table to the right */
.homepage-table .table th,
.homepage-table .table td {
    text-align: right;
}


/* Remove default link styling inside tables */
.table a {
    color: rgb(25, 25, 187);              /* use the surrounding text color */
    text-decoration: none;       /* remove underline */
    font-weight: inherit;         /* remove bold if browser applies it */
    transition: background-color 0.2s ease, color 0.2s ease;
    display: inline-block;       /* allows background hover shading to fit neatly */
    padding: 2px 4px;            /* slight padding for hover area */
    border-radius: 4px;          /* smooth edges for hover shading */
}

/* Subtle shading on hover to show it's clickable */
.table a:hover {
    background-color: rgba(110, 110, 138, 0.267); /* light gray shading */
    color: rgb(25, 25, 187);                         /* keep text color consistent */
    text-decoration: none;                  /* stay clean, no underline */
    cursor: pointer;
}


/* align row labels (company names) on homepage table to the LEFT */
.table td:first-child,
.table th:first-child {
    text-align: left;
}

/* Style for first column of the homepage table (metric labels) */
.small-table td:first-child,
.small-table th:first-child {
    font-weight: 600;         /* slightly bolder */
    color: #222;              /* darker gray/black text */
    font-size: 0.7rem;        /* slightly larger than the rest */
}

/* Style for the rest of the homepage table */
.small-table td,
.small-table th {
    font-size: 0.7rem;
    height: 46px;               /* set exact height to force consistency */
    vertical-align: middle;
    overflow: hidden;           /* prevent row from expanding */
    text-overflow: ellipsis;    /* show "..." if text is too long */
    white-space: normal;        /* prevent wrapping */
    padding: 0.3rem 0.5rem;     /* compact padding */
}


.tight-table td,
.tight-table th {
    padding: 0.2rem 0.3rem;  /* Less whitespace inside cells */
}

/*column widths for homepage table: */

.wide-column {
    width: 220px;      /* Adjust as needed */
    min-width: 220px;
    max-width: 275px;
    white-space: normal;  /* wrap instead of stretching */
    word-wrap: break-word;
}

.slightly-wide-column {
    width: 145px;      /* Adjust as needed */
    min-width: 145px;
    max-width: 145px;
    white-space: normal;  /* wrap instead of stretching */
    word-wrap: break-word;
}

.ltm-change.positive {
    color: red;
    font-weight: bold;
}

.ltm-change.negative {
    color: green;
    font-weight: bold;
}


.highlight {
    background-color: #fffbbc; /* Pale yellow */
}

.shadow-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  border-radius: 4px;
  background-color: white; /* to make shadow visible */
}

.company-title-box {
  background-color: #f5f5f5; /* light grey */
  border-radius: 8px;        /* slightly rounded corners */
  padding: 15px 20px;
  font-weight: bold;
  color: rgb(54, 54, 54);
  text-align: left;
  font-size: 1.7rem;         /* adjust size as needed */
  margin-bottom: 20px;       /* space below box */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* subtle shadow */
  width: 100%;
  border: 1px solid rgb(202, 202, 202);

  display: flex;             /* new: enable flex layout */
  align-items: center;       /* vertically center content */
  justify-content: space-between; /* separate title and pill */
}

.company-title-text {
  font-size: 1.7rem;         /* match box style */
}

.industry-pill {
  background-color: #ccc;    /* grey background */
  color: #333;               /* dark text */
  font-size: 0.9rem;         /* smaller pill font */
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
}

/* Default: align all table cell content to the bottom */
.financial-summary td {
    padding-top: 3px;
    padding-bottom: 1px;
    vertical-align: bottom;
}

.tippy-box[data-theme~='light-border'] {
    font-size: 14px;           /* font size */
    color: #ffffff;            /* text color */
    background-color: #293a49; /* background color */
    max-width: 220px;          /* optional: max width */
    padding: 8px 12px;         /* tooltip padding */
    border-radius: 6px;        /* rounded corners */
    line-height: 1.4;          /* spacing between lines */
}


/* Light grey background on all annual columns */
.annual-col {
  background-color: #f0f0f0
}

/* Override for special or subtotal rows: keep them middle-aligned */
.special-row td,
.subtotal-row td {
    padding-top: 1px;
    padding-bottom: 4px; /* balanced again */
    vertical-align: middle;
}

/* change the highlighting on subtotal rows (e.g Gross Profit) in the individual company page models */
.subtotal-row td {
    background-color: #ffffff; /* Pale yellow */
}

/* Apply the border-top only to data cells (not the first column) */
.subtotal-row td:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, 0.4);
}



/* change the highlighting on important rows (e.g EBITDA) in the individual company page models */
.special-row td {
    background-color: #fffbd2; /* Pale yellow */
}

/* Apply the border-top only to data cells (not the first column) */
.special-row td:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, 0.4);
}



/* Title rows in company page models, like OPERATING METRICS, etc. */
.title-row {
    background-color: #f0f4ff; /* light blue */
    font-weight: inherit;
    border-bottom: 1px solid #333333a6;
    border-top: 1px solid #333333a6;
}

/* Ensure title-row background always wins over annual-col shading */
.title-row td,
.title-row td.annual-col {
    background-color: #f0f4ff !important; /* force full row light blue */
}

/* Make non-label cells appear blank while keeping background + borders */
.title-row td:not(:first-child) {
    color: transparent;  /* hide text */
    text-shadow: none;   /* prevent faint shadows */
}

/* Base header styling: applies to all column headers */
.financial-summary thead th {
    background-color: #6e6e6e;  /* dark background */
    color: #fff;             /* white text */
    font-weight: normal;
}

/* Ensure annual headers also stay dark, not grey */
.financial-summary thead th.annual-col {
    background-color: #3d3d3d;  /* override annual shading */
    color: #fff;
    font-weight: bold; /* bold only for annuals */
}


/* change the size of the font on the individual company page models */
.financial-summary {
  font-size: 0.7rem; /* adjust as needed */
}

/* align data cells on company page models to the right */
.financial-summary th,
.financial-summary td {
    text-align: right;
}

/* align row labels (company names) on company page models to the LEFT */
.financial-summary td:first-child,
.financial-summary th:first-child {
    text-align: left;
}

.financial-summary-wrapper {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  border: 1px solid rgb(185, 185, 185);
  border-radius: 4px;
  background-color: white; /* to make shadow visible */
  display: inline-block;      /* Shrink to table width */
}

/* Add thin black line on the  side of annual columns */
.financial-summary td.annual-col,
.financial-summary th.annual-col {
    border-right: 1px solid #333333a6;
    border-left: 1px solid #333333a6;
}

.table.comp-fixed-width {
  table-layout: fixed !important;
  width: 100% !important;
}

.comp-company-column {
  width: 70px !important;
  min-width: 70px !important;
  max-width: 70px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;   /* include padding/border in width */
}


/* Metric column — slightly wider */
.comp-metric-column {
    width: 140px !important;               /* wider for metric names */
    text-align: left;
    font-weight: 600;
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Match financial-summary table aesthetics */
.table.comp-fixed-width th,
.table.comp-fixed-width td {
    border: 1px solid #ccc;
    font-size: 0.9rem;
    vertical-align: middle;
}

.table.comp-fixed-width thead th {
    background-color: #f8f8f8;
    text-align: center;
    font-weight: 600;
}

.table.comp-fixed-width tr:nth-child(even) {
    background-color: #fafafa;
}

.table.comp-fixed-width tr:hover {
    background-color: #f1f1f1;
}


/*stuff for graph tool plot 2x2 grid */
.graph-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-gap: 20px;
    padding: 10px;
}

.graph-cell {
    width: 100%;
    height: 100%;
    min-height: 400px; /* ensures graphs are visible initially */
    background: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
}

footer {
    position: relative; /* or fixed, depending on your layout */
    z-index: 10;        /* higher than .homepage-vertical-section’s z-index */
    background-color: #f8f9fa; /* ensure it’s opaque so it covers the shadow */
}


/* Adjust Tom Select control width */
#companySelect,
#companySelect + .ts-wrapper,
#companySelect + .ts-control {
  width: 650px !important;  /* make the search bar wider */
  max-width: 100%;           /* prevent overflow on small screens */
  font-size: 0.9rem;
}

/* Responsive: single column for small screens */
@media (max-width: 800px) {
    .graph-grid {
        grid-template-columns: 1fr;
    }
}

@media print {
    body {
        background: white;
        box-shadow: none;
        margin: 0;
    }
    .no-print {
        display: none;
    }
}