/* Existing layout - TO BE REMOVED */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100vw;    
}

.existing-layout {
    max-width: 1200px;
    margin: 30px auto;
    padding: 20px 8px;
}

/* General variables */
:root, .matrix-table-palette {
  --grant: #eaebf7;
  --equity: #d0d6ee;
  --blend: #aab4db;
  --debt: #667fbc;
  --dark-grey: #474747;
  --ocean-blue: #00529E;
  --charocal-grey: #292c34;
  --silver-grey: #53647D;
  --pale-grey: #E6E6E6;
  --white-grey: #F6F8F9;
}

/* General styles for the table component */
.table-container {
    font-family: 'Roboto', sans-serif;
    /* Required for responsiveness: horizontal scroll on overflow */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin: 20px 0;
    color: #000;
}

.funding-table:not(.nested-table) {
    width: 100%;
    min-width: 1000px; /* Ensures the table has a minimum width for non-mobile view */
    border-collapse: separate;
    border-spacing: 4px;
    line-height: 1.4;
}

.nested-table {
    width: 100%;
    line-height: 1.4;
    border: 0px solid transparent;
}

.funding-table__head th {
    padding: 16px 10px;
    vertical-align: middle;
    text-align: center;
    font-weight: 600;
    background-color: var(--white-grey);
    color: var(--charocal-grey);
}

.nested-table__head th {
    vertical-align: middle;
    font-weight: 600;
}

.funding-table td {
    border-collapse: collapse;
    vertical-align: middle;
    text-align: center;
    background: var(--grant);
    font-size: 10px;
}

/* Linked cells  */
.funding-table td a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px 10px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: background 0.3s;
}

.funding-table td a .cell__text:not(.cell__text--default) {
    font-weight: 500;
}

.funding-table td a:hover .cell__title {
    text-decoration: underline;
}

.funding-table td:not(:has(a)) {
    padding: 12px 10px;
}

.nested-table th, .nested-table td {
    border: 0px solid transparent;
    padding: 0 !important;
    vertical-align: top;
    text-align: left;
}

/* Header Styles */
.funding-table__header {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
}

/* TRL Level Column */
td.trl-level {
    font-weight: bold;
    font-size: 14px;
    width: 50px;
    color: var(--dark-grey);
    background-color: var(--white-grey);
}

/* Program Cell Styles */
.funding-table__cell {
    position: relative; /* Needed for positioning the tooltip trigger */
    background-color: #ffffff;
    text-align: left;
    min-height: 50px;
}

.cell__content,
.cell__details,
.cell__details-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell__content {
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

.nested-table .cell__content {
    justify-content: flex-start;
    padding-bottom: 6px;
}

.cell__details {
    gap: 12px
}

.cell__details--vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.cell__content--vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.cell__details-item {
    gap: 4px
}

.cell__details-item > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.cell__icon {
    width: 13px;
    height: 13px;
}


.cell__title {
    font-weight: 600;
}

.cell__text {
    color: var(--silver-grey);
    text-transform: uppercase;
}

.cell__text--default {
    text-transform: none;
}

td.empty-cell {
    background-color: var(--white-grey); /* Slightly different background for empty cells */
}

td.highlighted-grant {
    background-color: var(--grant);
}

td.highlighted-equity {
    background-color: var(--equity);
}

td.highlighted-blend {
    background-color: var(--blend);
}

td.highlighted-blend .cell__title {
    color: #FFFFFF;
}

td.highlighted-debt .cell__title, 
td.highlighted-debt .cell__text {
    color: #FFFFFF;
}

td.highlighted-debt {
    background-color: var(--debt);
}

/* Bordered row style */
tr.separator td {
  height: 2px;
  background: var(--pale-grey);
  padding: 0 !important;
}



/* Tooltip Styles */
.tooltip {
    position: absolute;
    z-index: 1000;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.2s;
    max-width: 300px;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    word-wrap: break-word; 
    overflow-wrap: break-word; 
    box-sizing: border-box;        
}

.tooltip a {
    color: inherit;
}

.tooltip.simple {
    background-color: #333;
    color: white;
    font-size: 12px;
    padding: 8px 12px;
}

.tooltip.detailed {
    background-color: white;
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 24px 36px 24px 24px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.4px;
    max-width: min(537px, 90vw);
    max-height: 80vh;
    overflow-y: auto;    
}

@media (max-width: 767px) {
    .tooltip.detailed {
        max-width: calc(100vw - 20px); 
        padding: 16px 24px 16px 16px; 
        font-size: 13px;
    }
    
    .tooltip.simple {
        max-width: calc(100vw - 20px);
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .tooltip.detailed {
        max-width: calc(100vw - 16px);
        padding: 12px 20px 12px 12px;
        font-size: 12px;
    }
}


.tooltip.detailed .table-tooltip__close-icon {
    position: absolute;
    right: 32px;
    top: 14px;
    cursor: pointer;
}

.tooltip.detailed h4 {
    margin-top: 0;
    font-size: 16px;
    color: var(--ocean-blue);
    margin-bottom: 10px;
}

.tooltip.detailed ul {
    list-style-type: disc;
    padding-left: 20px;
}

.tooltip.detailed p + p,
.tooltip.detailed p + ul,
.tooltip.detailed ul + p,
.tooltip.detailed ul + ul {
  margin-top: 24px;
}


.tooltip.detailed li {
    margin-bottom: 5px;
}

/* Tooltip visibility is controlled by JS, but we define the final state */
.tooltip.visible {
    opacity: 1;
}

/* Styles for cells that have tooltips (to give visual hint) */
[data-tooltip-type] {
    cursor: help !important;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--silver-grey);    
}

td[data-tooltip-type],
span[data-tooltip-type] {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--silver-grey);    
}

td.highlighted-debt [data-tooltip-type],
td.highlighted-blend [data-tooltip-type] {
    text-decoration-color: #FFFFFF;    
}

[data-tooltip-type]:hover {
    cursor: help !important;
}

.funding-legend {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.legend-item {
  padding: 8px 16px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--charocal-grey);
}

.legend-item--grant {
  background-color: var(--grant);
}

.legend-item--equity {
  background-color: var(--equity);
}

.legend-item--blended {
  background-color: var(--blend);
  color: white;
  text-decoration-color: #FFFFFF;
}

.legend-item--debt {
  background-color: var(--debt);
  color: white;
  text-decoration-color: #FFFFFF;
}