/* ======= Tables ======= */
.table-responsive {
    margin-bottom: var(--space-6);
}

/* Center section titles */
.card .section-title {
    text-align: center;
}

/* Add padding to section titles above tables to match table cell padding */
.table-responsive .section-title,
.styled-table + .section-title {
    padding-left: var(--space-4);
}

.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
}

.styled-table th,
.styled-table td {
    padding: var(--space-2) var(--space-4);
    text-align: left;
    border-bottom: var(--border-width-standard) solid var(--table-border-color);
}

.styled-table th {
    font-weight: 500;
    background-color: var(--table-header-background);
}

.styled-table tfoot th, 
.styled-table tfoot td {
    background-color: var(--table-header-background);
    font-weight: 500;
}

.styled-table tfoot tr td:last-child {
    background-color: var(--table-header-background);
}

.styled-table thead tr:hover, 
.styled-table tfoot tr:hover {
    background-color: var(--table-header-background);
}

.styled-table tr:hover {
    background-color: var(--table-row-hover-background);
}

/* Sortable table headers */
.styled-table th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: var(--space-8);
}

.styled-table th.sortable::after {
    content: '↕';
    position: absolute;
    right: var(--space-4);
    color: var(--color-text-light);
}

.styled-table th.sortable.asc::after {
    content: '↑';
    color: var(--color-primary);
}

.styled-table th.sortable.desc::after {
    content: '↓';
    color: var(--color-primary);
}

/* Styles for Delete Icon */
.delete-icon {
    color: var(--glass-text-color); /* Match other text color */
    cursor: pointer;
    font-size: var(--table-delete-icon-font-size);
    transition: var(--table-delete-icon-transition);
}

.delete-icon:hover {
    color: var(--color-error); /* Indicate danger on hover */
}

/* Style the action cell itself */
.styled-table td.action-cell {
    width: 1%; /* Try to make it as narrow as possible */
    white-space: nowrap; 
    text-align: center; /* Center the icon */
    padding-left: var(--space-2); /* Reduce left padding */
    padding-right: var(--space-2); /* Reduce right padding */
}

/* Specific style for the type cell icon */
.styled-table td.type-cell {
   font-size: var(--table-type-cell-font-size);
}

/* === Hypothetical Table Specific Widths & Alignment === */
/* Column width classes */
#hypothetical-assets-table .standard-col {
    width: var(--table-standard-col-width);
}

#hypothetical-assets-table .wide-col {
    width: var(--table-wide-col-width);
}

#hypothetical-assets-table  {
    width: var(--table-narrow-col-width);
}

/* Force all columns left-aligned with high specificity */
#hypothetical-assets-table th,
#hypothetical-assets-table td,
#hypothetical-assets-table .hypo-value-col,
#hypothetical-assets-table .difference-col,
#hypothetical-assets-table [data-label] {
    text-align: left !important;
}

/* Only the flex column remains centered for the radio button */
#hypothetical-assets-table th.flex-col,
#hypothetical-assets-table td.flex-col {
    text-align: center !important;
}

/* Add specific widths for the allocation table */
#hypothetical-allocation-table .name-col {
    width: var(--table-allocation-name-col-width);
}

#hypothetical-allocation-table .hypo-value-col,
#hypothetical-allocation-table .difference-col {
    width: var(--table-allocation-value-col-width);
}

/* Radio button container styling */
.flex-radio-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style the radio button itself */
.flex-radio {
    margin: 0;
    cursor: pointer;
}

/* Remove any other alignment overrides */
#hypothetical-assets-table input.hypothetical-value-input {
    text-align: left;
}

/* Difference indicators - keep the flex but align right */
.difference-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.difference-indicator.positive {
    color: var(--color-success);
}

.difference-indicator.negative {
    color: var(--color-error);
}

/* Make table rows clickable for flex asset selection */
#hypothetical-assets-list tr {
    cursor: pointer;
}

#hypothetical-assets-list tr:hover {
    background-color: rgba(var(--color-primary-rgb), var(--table-row-hover-primary-opacity));
}

#hypothetical-assets-list tr.balancing-asset-selected {
    background-color: rgba(var(--color-primary-rgb), var(--table-row-selected-primary-opacity));
    font-weight: bold;
}

/* Style for implicitly selected balancing asset row */
#hypothetical-assets-list tr.balancing-asset-implicit td,
#hypothetical-assets-list tr.balancing-asset-implicit th {
    font-weight: bold; 
}
/* Ensure hover doesn't remove bold */
#hypothetical-assets-list tr.balancing-asset-implicit:hover td,
#hypothetical-assets-list tr.balancing-asset-implicit:hover th {
    font-weight: bold;
} 

/* Balance column styling */
#hypothetical-assets-table th.balance-col,
#hypothetical-assets-table td.balance-col {
    width: var(--table-balance-col-width);
    text-align: center !important;
}

/* Radio button container styling */
.balance-radio-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style the radio button itself */
.balance-radio {
    margin: 0;
    cursor: pointer;
}

/* === Cash Flow Table Specific Widths === */
#cash-flow-table,
#modal-cash-flow-table {
    table-layout: fixed;
}

#cash-flow-table th:nth-child(1),
#cash-flow-table td:nth-child(1),
#modal-cash-flow-table th:nth-child(1),
#modal-cash-flow-table td:nth-child(1) {
    width: var(--table-cashflow-table-col1-width);
}

#cash-flow-table th:nth-child(2),
#cash-flow-table td:nth-child(2),
#modal-cash-flow-table th:nth-child(2),
#modal-cash-flow-table td:nth-child(2) {
    width: var(--table-cashflow-table-col2-width);
}

#cash-flow-table th:nth-child(3),
#cash-flow-table td:nth-child(3),
#modal-cash-flow-table th:nth-child(3),
#modal-cash-flow-table td:nth-child(3) {
    width: var(--table-cashflow-table-col3-width);
}

#cash-flow-table th:nth-child(4),
#cash-flow-table td:nth-child(4),
#modal-cash-flow-table th:nth-child(4),
#modal-cash-flow-table td:nth-child(4) {
    width: var(--table-cashflow-table-col4-width);
}

#cash-flow-table th:nth-child(5),
#cash-flow-table td:nth-child(5),
#modal-cash-flow-table th:nth-child(5),
#modal-cash-flow-table td:nth-child(5) {
    width: var(--table-cashflow-table-col5-width);
}

/* Ensure all cells are left-aligned except percentages */
#cash-flow-table td,
#cash-flow-table th,
#modal-cash-flow-table td,
#modal-cash-flow-table th {
    text-align: left;
}

#cash-flow-table td:nth-child(4),
#cash-flow-table td:nth-child(5),
#cash-flow-table th:nth-child(4),
#cash-flow-table th:nth-child(5),
#modal-cash-flow-table td:nth-child(4),
#modal-cash-flow-table td:nth-child(5),
#modal-cash-flow-table th:nth-child(4),
#modal-cash-flow-table th:nth-child(5) {
    text-align: center;
}

/* Smaller font for the Defensive and Growth columns in the modal table,
   covering the headers, the static/computed percentages, and the editable
   growth inputs (inputs do not inherit font-size, so set it explicitly). */
#modal-cash-flow-table td:nth-child(4),
#modal-cash-flow-table td:nth-child(5),
#modal-cash-flow-table th:nth-child(4),
#modal-cash-flow-table th:nth-child(5) {
    font-size: var(--font-size-small);
}

#modal-cash-flow-table td:nth-child(4) input,
#modal-cash-flow-table td:nth-child(5) input {
    font-size: inherit;
}

/* The editable growth inputs were clipping 3-digit values ("100"): the old
   inline 3.5em width scaled down with the smaller font while the box padding
   stayed a fixed length, leaving too little content room. Set the width in CSS
   (replacing the inline style) and tighten the side padding so up to three
   digits show in full. */
#modal-cash-flow-table td:nth-child(5) input {
    width: 4.5em;
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}

/* Style for input groups */
.input-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.currency-symbol {
    color: var(--color-text-white-secondary);
    flex-shrink: 0;
}

/* Ensure inputs take remaining space */
.input-group .transparent-input {
    flex: 1;
    min-width: 0;
}

/* === Hypothetical Allocation Table Specific Widths === */
#hypothetical-allocation-table .name-col {
    width: var(--table-allocation-name-col-width);
}

#hypothetical-allocation-table .hypo-value-col,
#hypothetical-allocation-table .difference-col {
    width: var(--table-allocation-value-col-width);
}

/* === Allocatr Combined Assets Table Specific Widths & Alignment === */
#allocatr-combined-assets-table .standard-col {
    width: var(--table-standard-col-width); /* 22% */
}

#allocatr-combined-assets-table .wide-col {
    width: var(--table-wide-col-width); /* 30% */
}

#allocatr-combined-assets-table .narrow-col {
    width: var(--table-narrow-col-width); /* 4% */
}

/* Alignment rules for the new table */
/* Flex column: Center */
#allocatr-combined-assets-table th.flex-col,
#allocatr-combined-assets-table td.flex-col {
    text-align: center !important;
    width: 3.5rem;          /* widen past the 4% narrow-col so "Flex ?" fits */
    white-space: nowrap;    /* keep the label and help button on one line */
}

/* Asset Name column: Left */
#allocatr-combined-assets-table th.name-col,
#allocatr-combined-assets-table td.name-col {
    text-align: left !important;
}

/* Current Value, Hypothetical Value, Difference columns: Right */
#allocatr-combined-assets-table th.hypo-value-col,
#allocatr-combined-assets-table td.hypo-value-col,
#allocatr-combined-assets-table th.difference-col,
#allocatr-combined-assets-table td.difference-col {
    text-align: right !important;
}

/* Ensure inputs in the new table are RIGHT-aligned (text within input box) */
#allocatr-combined-assets-table input.hypothetical-value-input {
    text-align: right;
    padding-right: var(--space-1); /* Reduce right padding to make gap smaller */
    -moz-appearance: textfield; /* Firefox - hide stepper */
    appearance: none; /* Standard property to hide stepper / default styling */
}

#allocatr-combined-assets-table input.hypothetical-value-input::-webkit-outer-spin-button,
#allocatr-combined-assets-table input.hypothetical-value-input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* WebKit browsers (Chrome, Safari, Edge) - hide stepper */
    margin: 0; /* Also remove any margin allocated for them */
}

/* Styling for selected/hovered rows in the new Allocatr table */
#allocatr-combined-assets-list tr.asset-row {
    cursor: pointer;
}

#allocatr-combined-assets-list tr.asset-row:hover {
    background-color: rgba(var(--color-primary-rgb), var(--table-row-hover-primary-opacity));
}

#allocatr-combined-assets-list tr.asset-row.balancing-asset-selected {
    background-color: rgba(var(--color-primary-rgb), var(--table-row-selected-primary-opacity));
    font-weight: bold;
}

#allocatr-combined-assets-list tr.asset-row.balancing-asset-implicit td,
#allocatr-combined-assets-list tr.asset-row.balancing-asset-implicit th {
    font-weight: bold; 
}
#allocatr-combined-assets-list tr.asset-row.balancing-asset-implicit:hover td,
#allocatr-combined-assets-list tr.asset-row.balancing-asset-implicit:hover th {
    font-weight: bold;
} 

/* === Cash Flow Table Specific Widths === */
#cash-flow-table {
    table-layout: fixed;
}

#cash-flow-table th:nth-child(1),
#cash-flow-table td:nth-child(1) {
    width: var(--table-cashflow-table-col1-width);
}

#cash-flow-table th:nth-child(2),
#cash-flow-table td:nth-child(2) {
    width: var(--table-cashflow-table-col2-width);
}

#cash-flow-table th:nth-child(3),
#cash-flow-table td:nth-child(3) {
    width: var(--table-cashflow-table-col3-width);
}

#cash-flow-table th:nth-child(4),
#cash-flow-table td:nth-child(4) {
    width: var(--table-cashflow-table-col4-width);
}

#cash-flow-table th:nth-child(5),
#cash-flow-table td:nth-child(5) {
    width: var(--table-cashflow-table-col5-width);
}

/* Ensure all cells are left-aligned except percentages */
#cash-flow-table td,
#cash-flow-table th {
    text-align: left;
}

#cash-flow-table td:nth-child(4),
#cash-flow-table td:nth-child(5),
#cash-flow-table th:nth-child(4),
#cash-flow-table th:nth-child(5) {
    text-align: center;
}

/* Style for input groups */
.input-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.currency-symbol {
    color: var(--color-text-white-secondary);
    flex-shrink: 0;
}

/* Ensure inputs take remaining space */
.input-group .transparent-input {
    flex: 1;
    min-width: 0;
}

/* Styles for specific column widths */
#allocatr-combined-assets-table .type-column {
    width: 5% !important; /* Set Type column to 5% width, !important to increase specificity */
    text-align: center; /* Optional: center the icon */
    padding-left: var(--space-1) !important; /* Reduce padding */
    padding-right: var(--space-1) !important; /* Reduce padding */
}

.action-cell {
    text-align: center;
    white-space: nowrap;
}

.action-cell span {
    cursor: pointer;
    margin: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.action-cell span:hover {
    opacity: 1;
}

.edit-icon, .delete-icon {
    display: inline-block;
}

/* Make icons white */
.action-cell span,
.type-cell {
    filter: brightness(10);
}