/* CASTRUM - Table Styles
----------------------------------------
* Common table styling for the CASTRUM application
* Note: AG Grid styling is defined in ag-theme-castrum.css
*/

/* Standard table styles */

.table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
  table-layout: auto;
  font-size: var(--font-size-table);  
  white-space-collapse: collapse;
}

.table th,
.table td {
  padding: var(--table-cell-padding-top) var(--table-cell-padding-right)
    var(--table-cell-padding-bottom) var(--table-cell-padding-left) !important;
  /*text-align: left;*/
  border: 1px solid var(--border-color);
  vertical-align: middle;
  font-size: var(--font-size-table);
  

}

.table th {
  padding: var(--table-cell-padding-top) var(--table-cell-padding-right)
  var(--table-cell-padding-bottom) var(--table-cell-padding-left) !important;
  color: var(--table-header-text);  
  background-color: var(--table-header-bg);
  text-align: left;
  white-space: nowrap;
  font-weight: 500;
}

.table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.table tr:hover {
  background-color: var(--table-hover-bg);
  color: var(--table-hover-text);
}

.table tr.totals-row {
    background-color: var(--table-totals-row-bg);
    font-weight: 700;
}

.details-value {

  text-align: right;


}



/* Modal tables */
.modal table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.analytics-table td.text-cell {
  /*text-align: left;*/
}

.analytics-table td.number-cell {
  text-align: right;
}

.analytics-table tr:last-child td {
  border-bottom: none;
}

.analytics-table tr:hover {
  background-color: var(--table-hover-bg);
  color: var(--table-hover-text);
}

/* Cash flow tables */


.cash-flow-table {
  table-layout: auto;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  line-height: 1.25;
  max-width: 150px !important;

}

.cash-flow-table thead th {
    background: var(--cash-flow-table-header-bg);
    color: var(--cash-flow-table-header-text);
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
}


/* First column - fits content tightly */
.cash-flow-table td:first-child,
.cash-flow-table th:first-child {
  width: 1%; /* Forces it to shrink */
  border: 0px !important;
  border-bottom: 1px solid var(--table-border) !important;
  white-space: nowrap;
  position: sticky;
  left: 0;
  border-right: 2px solid var(--border-color-dark);
  z-index: 11; /* Higher than other sticky elements */
  
}
    

.cash-flow-table td:first-child {
  background-color: var(--cash-flow-table-header-bg);
  color: #fff;
  
}

/* All other cells - tight fit with minimal padding */
.cash-flow-table td:not(:first-child),
.cash-flow-table th:not(:first-child) {
  width: 1%;
  white-space: nowrap;
   
}

/* Override the variable-based padding for number cells */
.cash-flow-table td.number-cell {
  text-align: right;
  font-family: monospace;
  
}

/* Text cells can be wider if needed */
.cash-flow-table td.text-cell {
  text-align: left;
}

.cash-flow-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.cash-flow-table tr:hover {
  background-color: var(--table-hover-bg);
  color: var(--table-hover-text);
}

/* Sticky headers */
.cash-flow-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
}


.cash-flow-section {
      margin-top: 2rem;
}

.cash-flow-item-col {
    min-width: 50px;
    text-align: left !important;
}


.number-cell {
    text-align: right;
    font-family: monospace;
    min-width: 100px;
}

.text-cell {
    text-align: left;
}

.exit-col {
    background: var(--table-highlight-bg);
    font-weight: 700;
}


.exit-col:hover {
    background: var(--table-hover-bg);
    font-weight: 700;
}


#object-cashflow-table .number-cell {
  text-align: right;
}

#object-cashflow-table .text-cell {
  text-align: left;
}

#object-cashflow-table .section-header {
  background-color: var(--table-header-bg);
}

#object-cashflow-table .sum-row {
  border-top: 2px solid var(--table-hover-bg);

}


/* Hide collapsible rows by default */
#object-cashflow-table .lease-income-rows,
#object-cashflow-table .reversion-income-rows,
#object-cashflow-table .costs-detail-row {
  display: none;
}

/* Show collapsible rows when they have the 'show' class */
#object-cashflow-table .lease-income-rows.show,
#object-cashflow-table .reversion-income-rows.show,
#object-cashflow-table .costs-detail-row.show {
  display: table-row;
}
/* Row styles */
    .info-row {
        background: var(--table-row-alt-bg);
        font-style: italic;
    }
    
    .section-header {
        background: var(--cash-flow-table-header-bg) !important;
        color: var(--cash-flow-table-header-text);
        font-size: 1rem;
        border: 0px !important;
        

    }
    
    .section-header td {
        border: 0px !important;
    }
    
    .subtotal-row {
        background: var(--table-row-alt-bg);
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }
    
    /*
    .subtotal-row:hover {
        background: var(--table-hover-bg);
    }
    */
    .subtotal-row.collapsible {
        user-select: none;
    }
    
    .collapse-icon {
        display: inline-block;
        margin-right: 0.5rem;
        transition: transform 0.3s;
        font-size: 8px;
    }
    
    .collapsed .collapse-icon {
        transform: rotate(-90deg);
    }
    
    .detail-row {
        background: var(--background-color);
    }
    
    .detail-row.collapsible {
        cursor: pointer;
        user-select: none;
    }
    
    .detail-row.collapsible:hover {
        background: var(--table-hover-bg);
        color: var(--table-hover-text);
    }
    
    .sum-row {
        background: var(--table-row-alt-bg);
        font-weight: 700;
        border-top: 2px solid var(--border-color-dark);
    }
    
    .highlight-row {
        background: var(--table-highlight-bg) !important;
        font-weight: 700;
    }
    
    .highlight-row:hover {
        background: var(--table-hover-bg) !important;
        color: var(--table-hover-text);
    }

    .noi-row {
        border-top: 3px solid var(--color-success);
        border-bottom: 3px solid var(--color-success);
    }
    
    .operating-profit-row {
        border-top: 3px solid #2196F3;
        border-bottom: 3px solid #2196F3;
    }
    
    .cash-flow-row {
        border-top: 3px solid var(--color-secondary);
        border-bottom: 3px solid var(--color-secondary);
    }
    
    .spacer-row {
        height: 10px;
        background: transparent;
        border: none;
    }
    
    .spacer-row td {
        border: none;
        padding: 0;
    }
    
    .pl-3 {
        padding-left: 2rem !important;
    }
    
    .pl-5 {
        padding-left: 4rem !important;
    }
    
    .pl-7 {
        padding-left: 6rem !important;
    }
    
    .font-weight-bold {
        font-weight: 700;
    }



/* Table responsive wrapper */
.table-responsive {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 15px;
  position: relative;
}

.table-responsive::after {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  color: var(--text-color-muted);
  padding: 5px 0;
  font-style: italic;
}

/* calc settings table */

.settings-table {
    overflow-x: auto;
    font-size: var(--font-size-table);      
    font-weight: normal;
    border-collapse: collapse;
  }



.settings-table th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  align-items: left;  
}

.settings-table td {
  
  padding-left: var(--table-cell-padding-left);
  padding-right: var(--table-cell-padding-right);
  padding-top: var(--table-cell-padding-top);
  padding-bottom: var(--table-cell-padding-bottom);
}


.settings-table input[type="number"],
.settings-table input[type="date"],
.settings-table input[type="text"],
.settings-table select {
    width: 100%;
    padding: var(--table-cell-padding-top) var(--table-cell-padding-right)
    var(--table-cell-padding-bottom) var(--table-cell-padding-left) !important;
    border: 1px solid var(--input-border, #ced4da);
    border-radius: 4px;
    font-size: var(--font-size-table) ;
}

.settings-table input[type="number"]:focus,
.settings-table input[type="date"]:focus,
.settings-table input[type="text"]:focus,
.settings-table select:focus {
    outline: none;
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.settings-table small {
    color: var(--text-color-secondary, #6c757d);
    font-size: var(--font-size-table);
}

/* Table container styling */
.table-container {
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.table-header {
  background-color: var(--card-background-alt);
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}

.table-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-color);
}

.table-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: var(--color-white);
}

.table-content.active {
  max-height: 5000px;
  padding: 5px;
}

/* Cash flow container */
.cash-flow-container {
  margin-top: 20px;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.cash-flow-header {
  background-color: #262A33;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
}

.cash-flow-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.cash-flow-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: var(--color-white);
}

.cash-flow-content.active {
  max-height: 10000px;
  padding: 5px;
}

.toggle-icon {
  font-weight: var(--font-weight-bold);
  font-size: 1.2rem;
}

.table-header .toggle-icon {
  color: var(--text-color-muted);
}

/* Export buttons */
.export-buttons {
  margin-bottom: 10px;
  text-align: right;
}

.export-button:hover {
  background-color: var(--color-primary-dark);
}

/* Summary table */
.summary-table {
  margin-bottom: 30px;
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.summary-table td {
  vertical-align: middle;
}

.summary-table td.text-cell {
  text-align: left;
}

.summary-table td.number-cell {
  text-align: right;
}

.summary-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

/* Loading row */
.loading-row td {
  text-align: center;
  padding: 2rem;
  color: var(--text-color-muted);
}

.loading-row i {
  margin-right: 0.5rem;
  color: var(--text-color-muted);
}

/* Dark mode overrides */
.dark-mode .table-responsive::after {
  color: var(--text-color-muted);
}

.dark-mode .cash-flow-header,
.dark-mode .table-header {
  background-color: var(--card-background-alt);
  border-color: var(--border-color);
}

.dark-mode .cash-flow-header h3,
.dark-mode .table-header h4 {
  color: var(--text-color);
}

.dark-mode .toggle-icon {
  color: var(--text-color);
}

.dark-mode .cash-flow-content,
.dark-mode .table-content {
  background-color: var(--card-background);
}

.dark-mode .cash-flow-table th {
  background-color: var(--table-header-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

.dark-mode .cash-flow-table td {
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark-mode .cash-flow-table tr:nth-child(even) {
  background-color: var(--table-row-alt-bg);
}

.dark-mode .cash-flow-table tr:hover {
  background-color: var(--table-hover-bg);
}

.dark-mode .cash-flow-table th:first-child,
.dark-mode .cash-flow-table td:first-child,
.dark-mode .cash-flow-table th:nth-child(2),
.dark-mode .cash-flow-table td:nth-child(2) {
  background-color: var(--card-background);
  border-right: 2px solid var(--border-color);
}

.dark-mode .export-button {
  background-color: var(--color-secondary-dark);
}

.dark-mode .export-button:hover {
  background-color: var(--color-secondary);
}

/* Fallback table for non-AG Grid use */
.fallback-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.fallback-table th,
.fallback-table td {
  padding: var(--table-cell-padding-top) var(--table-cell-padding-right)
    var(--table-cell-padding-bottom) var(--table-cell-padding-left);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.dark-mode .fallback-table th,
.dark-mode .fallback-table td {
  border-bottom-color: var(--border-color);
}

.fallback-table th {
  background-color: var(--table-header-bg);
}

.dark-mode .fallback-table th {
  background-color: var(--table-header-bg);
  color: var(--text-color);
}

.fallback-table tr:hover {
  background-color: var(--table-hover-bg);
  color: var(--table-hover-text);
}

.dark-mode .fallback-table tr:hover {
  background-color: var(--table-hover-bg);
  color: var(--table-hover-text);
}

/* Table styles */
.table-container {
  overflow: hidden;
  margin-top: 1rem;
  width: auto;
  max-width: 100%;
}

.analytics-table {
  width: auto;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* Text cells align left */
.analytics-table td.text-cell {
  text-align: left;
}

/* Number cells align right */
.analytics-table td.number-cell {
  text-align: right;
}

.top-issues-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.top-issues-table h4 {
  margin-top: 0;
  margin-bottom: 1rem;
}

.top-issues-table table {
  width: 100%;
  border-collapse: collapse;
}

/* Make the second column (issues count) right-aligned */
.top-issues-table th:nth-child(2),
.top-issues-table td:nth-child(2) {
  text-align: right;
}

/* Special table styles */
.table-title {
  font-size: 1.5em;
  color: var(--text-color);
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--color-primary);
}

.true-value {
  color: var(--color-success);
}

.false-value {
  color: var(--color-danger);
}

.warning-cell,
.error-cell {
  color: var(--text-color-muted);
  font-style: italic;
}

/* Media query for mobile */
@media (max-width: 768px) {
  .castrum-table {
    font-size: 18px;
  }
}

/* OVERVIEW TABLES*/
.summary-table,
.column-table {
  width: 80%;
}