@import url("buttons.939cfe4788d5.css");
@import url("nav.17151ab780d3.css");
@import url("alert.ef3bfba8f0e9.css");

:root {
  --primary-color: rgb(0, 51, 160);
  --secondary-color: rgb(102, 102, 102); /* Gray */

  --navbar-bg: rgb(26, 30, 32);
  --navbar-dropdown-bg: rgb(102, 102, 102); /*Gray*/
  --navbar-item-color: rgb(255, 255, 255);

  --home-bg-color: rgba(235, 183, 0, 0.4);
  --home-bg-color-strong: rgba(235, 183, 0, 0.1);
  --home-bg-color-solid: rgba(235, 183, 0, 0.2);

  /* Restyle der BS5 buttons */
  --btn-primary-bg: rgb(28, 89, 194);
  --btn-secondary-bg: rgb(28, 89, 194);
  --btn-warning-bg: rgb(28, 89, 194);
  --btn-danger-bg: rgb(28, 89, 194);
  --btn-success-bg: rgb(28, 89, 194);

  /* Font colors für django messaging system */
  --message-text-color: rgb(252, 252, 253); /* Accent Gray */
}

@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/roboto/Roboto-Regular.8a36205bd9b8.ttf") format("woff2"),
    url("/static/fonts/roboto/Roboto-Regular.8a36205bd9b8.ttf") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("/static/fonts/roboto/Roboto-Bold.b8e42971dec8.ttf") format("woff2"),
    url("/static/fonts/roboto/Roboto-Bold.b8e42971dec8.ttf") format("woff");
  font-weight: 700;
  font-style: normal;
}

html,
body {
  overflow-x: hidden;
  font-family: "Roboto", sans-serif;
  background-color: rgba(28, 89, 194, 0.1);
}

.container{
  max-width: 1300px;
  margin: 0 auto;  
}

/*-----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------*/

.print-button {
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
}

/*-----------------------------------------------------------------------------------------------------
  FIX FOR CHROME <details>/<summary> BUG:
  ---------------------------------------
  Chrome sometimes keeps the hidden part of a collapsed <details> element 
  in the layout. This creates an invisible box that sits on top of other 
  elements and blocks clicks (e.g., my Print / Save as PDF button).
  These rules force <details> to behave correctly:
------------------------------------------------------------------------------------------------------*/

details[open] > * {
    display: block;
}

details:not([open]) > *:not(summary) {
    display: none !important;
}

details {
    position: relative;
    overflow: hidden;
}

details summary {
    cursor: pointer;
    position: relative;
    z-index: 1;
}





    [data-print-hide] {
        display: block !important;
    }






/*----------------------Styling of image wrappers on home.html------------- */

.feature-header {
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.feature-image-wrapper {
  height: 800px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.feature-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* fills width + height, no gaps */
  display: block;
}

/*----------------------Styling of all textareas-------------------------
----------with auto-expand | custom.js function for auto-expand--------- */

.auto-expand {
  overflow-y: hidden;
  /* resize: none; no resizing*/
}

textarea {
  font-size: 0.95rem;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* bg-color for all containers that are not container with nav */
.content-container {
  background: rgba(249, 249, 249, 0.7);  
  font-size: 1.1rem;
  max-width: 1300px;
  margin: 0 auto;
}

.text-primary-custom {
  color: var(--btn-primary-bg);
}

/* Override of form-check-label default green when checkbox is TRUE */
.form-check-label {
  color: #212529 !important;
}

#industry-dropzone,
#competitive-dropzone,
#profitability-dropzone,
#financial-risk-dropzone {
  max-width: 100%;
  border: 2px dashed var(--btn-primary-bg) !important;
  border-radius: 8px;
  background-color: #f8f9fa;
  padding: 20px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

#industry-dropzone:hover,
#competitive-dropzone:hover,
#profitability-dropzone:hover,
#financial-risk-dropzone:hover {
  border-color: var(--primary-color);
  background-color: rgba(28, 89, 194, 0.08);
  cursor: pointer;
}

#industry-dropzone.dragover,
#competitive-dropzone.dragover,
#profitability-dropzone.dragover,
#financial-risk-dropzone.dragover {
  border-color: var(--primary-color);
  background-color: rgba(28, 89, 194, 0.15);
}

.upload-warning {
  color: var(--btn-primary-bg, #1c59c2);
  font-weight: bold;
}

/* Style applied to images retrieved from the database such as the uploads in business_risk with industry/competitive
class is used in includes/business_risk.html | preview of uploaded image */

.img-thumbnail {
  width: 100%;
  height: auto;
  max-width: 100%;
  border: 1px solid #dee2e6;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
}

/* css class for styling of <hr> inside some of the templates */
.hr-thick-dark {
  border-top: 3px solid #333;
  margin-top: 10px;
  margin-bottom: 5px;
}


/*------------------------ Styling borrower_description.html ---------------------
----------------------------------------------------------------------------------*/

.borrower-overview-wrapper {
  max-width: 900px;
  margin: 0 auto 20px auto;
}

.pdf-review-box {
  border: 1px solid #333;
  padding: 15px;
}

.review-title {
  margin-bottom: 12px;
  font-size: 14pt;
}

.borrower-overview-block {
  font-size: 11pt;
  line-height: 1.4;
}

.borrower-overview-block p {
  margin: 4pt 0;
}

.overview-row {
  display: flex;
  justify-content: space-between;
}

#relatedparty-section,
#pesponsor-section {
    font-size: 0.95rem;
    font-family: inherit;
}

.relatedparty-form-row {
    margin-top: 15px;
    padding-top: 6px;
}

.relatedparty-table tbody tr:first-child td {
    padding-top: 10px;
}

.pe-table tbody td {
    font-size: 1rem;    
}

/*---------- Styling of loan entry and loan table starts here ----------
-----------------------------------------------------------------------*/

#existing-loans-section label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

#existing-loans-section input,
#existing-loans-section select{
  width: 100%;
  padding: 6px 10px;
  font-size: 0.95rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#existing-loans-section .row + .row {
  margin-top: 10px;
}

#existing-loans-section .col-md-3:last-child {
  padding-left: 12px;
}

#existing-loans-section {
  font-size: 0.95rem;
}

#existing-loans-section table {
  font-size: 0.95rem;
}

#existing-loans-section th,
#existing-loans-section td {
  vertical-align: middle;
  padding: 6px 8px;
}

#existing-loans-section .table thead th {
  font-weight: 600;
  background-color: #f8f9fa;
  border-bottom: 2px solid #333;
}

#existing-loans-section .table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

#existing-loans-section table th:nth-child(1),
#existing-loans-section table td:nth-child(1) {
  width: 50%;
}

#existing-loans-section table th:nth-child(2),
#existing-loans-section table td:nth-child(2) {
  width: 10%;
}

#existing-loans-section table th:nth-child(3),
#existing-loans-section table td:nth-child(3) {
  width: 10%;
}

#existing-loans-section table th:nth-child(4),
#existing-loans-section table td:nth-child(4),
#existing-loans-section table th:nth-child(5),
#existing-loans-section table td:nth-child(5) {
  width: 15%;
}

.total-loan-box {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 0.85rem;
  padding: 8px 0;
}

textarea#id_loan_textarea {
  height: 80px;
  resize: vertical;
}

#id_loan_summary_text {
    width: 100% !important;
    max-width: 100% !important;
}

/*---------- Styling of loan entry and loan table ends here ----------*/

/*---------- Styling of loan edit starts here ------------------------*/

/* Container styling */
#edit-loan-section {
  font-size: 0.85rem;
  max-width: 900px;
  margin: 0 auto;
}

#edit-loan-section label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
}

#edit-loan-section input,
#edit-loan-section select {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.95rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#edit-loan-section .form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.modal-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--btn-primary-bg, #0d6efd);
  color: #fff;  
  border-bottom: none;
}

/*------------------------------ Styling of loan edit ends here --------------------------*/


/*------------------ Collateral table and edit_collateral styling starts here ------------*/

#collateral-entry-section {
  font-size: 0.95rem;
}

#collateral-entry-section table {
  font-size: 0.95rem;  
}

/* This is the modal that appears when user clicks delete inside the edit_collateral.html
This customises the defalt BS modal-header class. Flexbox needed to keep the closing x at
the out right of modal header. Model itself sits in edit_collaterl.html */
.modal-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--btn-primary-bg) !important;
  color: #fff !important;
  font-weight: bold;
  border-bottom: none;
}

textarea::placeholder {
  font-size: 0.85rem;
  color: #6c757d;
}

.small-text {
  font-size: 0.875rem;  
}

/*----------------------------- Collateral table styling ends here -------------------------*/


/*------------------------------- Styling collateral-liquidation for-------------------------
-----------------------------------------for template---------------------------------------*/

#collateral-liquidation-section table.collateral-table {
  table-layout: fixed;
}


.collateral-table td,
.collateral-table th {
  vertical-align: middle !important;
}

#collateral-liquidation-section table.collateral-table th:nth-child(1),
#collateral-liquidation-section table.collateral-table td:nth-child(1) {
  width: 18% !important;
}

.collateral-table tbody tr {
  height: 42px; /* or whatever fits best */
}

#collateral-liquidation-section textarea#liquidation_comment {
  padding: 6px 10px !important;
}

/* ---------Styling of tickboxes or "X" and other unicode signs---------------
            This is for the approver_cheklist.html with same sizes
            for PDF rendering so that tickboxes and "X" sign appear
            larger for better readability by approver
------------------------------------------------------------------------------*/

.check-symbol {
  font-size: 16pt;
  font-weight: bold;
}

.text-success {
  color: green;
}

.text-danger {
  color: red;  
}

.text-warning {
  color: orange;
}

.text-muted {
  color: #666;
}

/*--------------------Stylling of stressed collateral values table--------------------------
----------------------for template only------------------------------------------------------------*/

#collateral-liquidation-section table.collateral-table {
  max-width: 1100px !important;
}

#collateral-liquidation-section table.collateral-table {
  font-size: 0.95rem;  
}

#collateral-liquidation-section table.collateral-table th:nth-child(1),
#collateral-liquidation-section table.collateral-table td:nth-child(1) {
  width: 25%;
}

#collateral-liquidation-section table.collateral-table th:nth-child(2),
#collateral-liquidation-section table.collateral-table td:nth-child(2) {
  width: 8%;
}

#collateral-liquidation-section table.collateral-table th:nth-child(3),
#collateral-liquidation-section table.collateral-table td:nth-child(3) {
  width: 9%;
}

#collateral-liquidation-section table.collateral-table th:nth-child(4),
#collateral-liquidation-section table.collateral-table td:nth-child(4) {
  width: 7%;
}

/*--------------------Styling of lgd section | lg_table.html-----------------------------------
-------------------------------------------------------------------------------------------------------- */

#lgd-analysis-section table.table {
  width: 100%;
  font-size: 0.95rem;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

#lgd-analysis-section table.table th,
#lgd-analysis-section table.table td {
  border: 1px solid #dee2e6;
  padding: 6px 8px;
  vertical-align: middle;
}

#lgd-analysis-section table.table thead.table-light th {
  background-color: #f8f9fa;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid #333;
}

#lgd-analysis-section .table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

#lgd-analysis-section .table-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

/* ===========================
   LGD Ranking Table
=========================== */
#lgd-analysis-section table.lgd-ranking-table th:nth-child(1),
#lgd-analysis-section table.lgd-ranking-table td:nth-child(1) {
  width: 60%;
}

#lgd-analysis-section table.lgd-ranking-table th:nth-child(2),
#lgd-analysis-section table.lgd-ranking-table td:nth-child(2) {
  width: 40%;
}

/* ===========================
   Loans Outstanding Table
=========================== */
#lgd-analysis-section table.loans-table th:nth-child(1),
#lgd-analysis-section table.loans-table td:nth-child(1) {
  width: 40%;
}

#lgd-analysis-section table.loans-table th:nth-child(2),
#lgd-analysis-section table.loans-table td:nth-child(2) {
  width: 6%;
}

#lgd-analysis-section table.loans-table th:nth-child(3),
#lgd-analysis-section table.loans-table td:nth-child(3) {
  width: 8%;
}

#lgd-analysis-section table.loans-table th:nth-child(4),
#lgd-analysis-section table.loans-table td:nth-child(4) {
  width: 7%;
}

#lgd-analysis-section table.loans-table th:nth-child(5),
#lgd-analysis-section table.loans-table td:nth-child(5) {
  width: 39%;
}

/* ===========================
   Going Concern Viability Table
=========================== */
#lgd-analysis-section .gc-viability-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11pt;
  margin-bottom: 20pt;
}

#lgd-analysis-section .gc-viability-table th,
#lgd-analysis-section .gc-viability-table td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  vertical-align: middle;
}

#lgd-analysis-section .gc-viability-table thead {
  background-color: #f0f0f0;
}

#lgd-analysis-section .gc-viability-table th:nth-child(1),
#lgd-analysis-section .gc-viability-table td:nth-child(1) {
  width: 80%;
  text-align: left;
}

#lgd-analysis-section .gc-viability-table th:nth-child(2),
#lgd-analysis-section .gc-viability-table td:nth-child(2) {
  width: 20%;
  text-align: center;
}

/* ===========================
   Adjusted Distribution Table
=========================== */

#lgd-analysis-section table.adjusted-distribution-table th:nth-child(2),
#lgd-analysis-section table.adjusted-distribution-table td:nth-child(2) {
  text-align: center;
  width: 20%;
}

/* ===========================
   Summary Row Styling
=========================== */
#lgd-analysis-section table.table tr.gc-summary-row td {
  font-weight: bold;
  background-color: #f0f8ff;
}

/* ===========================
   Form Inputs in Tables
=========================== */
#lgd-analysis-section table.table td input.form-control,
#lgd-analysis-section table.table td select.form-select {
  font-size: 0.95rem !important;
  border: 1px solid #ccc;
  padding: 6px 10px;
  border-radius: 4px;
}

/* ===========================
   Modal Header Styling
=========================== */
.modal-header-custom {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.modal-header-custom .modal-title {
  font-weight: bold;
}

/* ================================
   Styling for Waterfall Section
   File: waterfall.html
   ================================ */

/* ---------- Shared Base Styling ---------- */

#waterfall-section {
  font-size: 0.95rem;
}

#waterfall-section table {
  font-size: 0.95rem;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}

#waterfall-section th,
#waterfall-section td {
  vertical-align: middle;
  padding: 6px 8px;
  border: 1px solid #dee2e6;
}

#waterfall-section .table thead th {
  font-weight: 600;
  background-color: #f8f9fa;
  border-bottom: 2px solid #333;
}

#waterfall-section .table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

#waterfall-section .table-striped tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

/* ---------- Loans Outstanding Table ---------- */
/* Table: .loans-table */

#waterfall-section table.loans-table th:nth-child(1),
#waterfall-section table.loans-table td:nth-child(1) {
  width: 45%; /* Loan Name */
}

#waterfall-section table.loans-table th:nth-child(2),
#waterfall-section table.loans-table td:nth-child(2),
#waterfall-section table.loans-table th:nth-child(3),
#waterfall-section table.loans-table td:nth-child(3),
#waterfall-section table.loans-table th:nth-child(4),
#waterfall-section table.loans-table td:nth-child(4) {
  width: 7%; /* Reference Amount, Amortisation, Simulated Default */
}

#waterfall-section table.loans-table th:nth-child(5),
#waterfall-section table.loans-table td:nth-child(5) {
  width: 30%; /* LGD Ranking */
}

/* ---------- Other Lenders' Claims Table ---------- */
/* Table: .other-lender-claim-table */

#waterfall-section table.other-lender-claim-table {
  table-layout: fixed;
}

#waterfall-section table.other-lender-claim-table th,
#waterfall-section table.other-lender-claim-table td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: left;
}

/* Column Widths */
#waterfall-section table.other-lender-claim-table th:nth-child(1),
#waterfall-section table.other-lender-claim-table td:nth-child(1) {
  width: 45%; /* Lender Name */
}

#waterfall-section table.other-lender-claim-table th:nth-child(2),
#waterfall-section table.other-lender-claim-table td:nth-child(2) {
  width: 15%; /* Amount */
}

#waterfall-section table.other-lender-claim-table th:nth-child(3),
#waterfall-section table.other-lender-claim-table td:nth-child(3) {
  width: 25%; /* Ranking */
}

#waterfall-section table.other-lender-claim-table th:nth-child(4),
#waterfall-section table.other-lender-claim-table td:nth-child(4) {
  width: 10%; /* Actions */
}

#waterfall-section table.other-lender-claim-table td.action-cell {
  text-align: center;
  vertical-align: middle;
}

/* ---------- Input & Textarea Styling ---------- */

#waterfall-section input.form-control,
#waterfall-section select.form-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.95rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#waterfall-section textarea.form-control.auto-expand {
  font-size: 1rem;
  background-color: #fefefe;
  border: 1px solid #ccc;
  resize: vertical;
}

/* ---------- Highlighted Summary Rows ---------- */
#waterfall-section table tr.fw-bold td {
  font-weight: bold;
  background-color: #f0f8ff;
}

/* ---------- Waterfall Allocation Table ---------- */
/* Table: .claims-table */

#waterfall-section table.claims-table {
  table-layout: fixed;
}

#waterfall-section table.claims-table th:nth-child(1),
#waterfall-section table.claims-table td:nth-child(1) {
  width: 35%; /* Claim at Default */
}

#waterfall-section table.claims-table th:nth-child(2),
#waterfall-section table.claims-table td:nth-child(2) {
  width: 15%; /* Starting Value */
}

#waterfall-section table.claims-table th:nth-child(3),
#waterfall-section table.claims-table td:nth-child(3),
#waterfall-section table.claims-table th:nth-child(4),
#waterfall-section table.claims-table td:nth-child(4),
#waterfall-section table.claims-table th:nth-child(5),
#waterfall-section table.claims-table td:nth-child(5) {
  width: 16.5%; /* Claim Amount, Recovered, Recovery Rate */
}

/* Header Styling */
#waterfall-section table.claims-table thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  border-bottom: 2px solid #333;
}

/* Cell Styling */
#waterfall-section table.claims-table th,
#waterfall-section table.claims-table td {
  padding: 6px 8px;
  border: 1px solid #dee2e6;
  vertical-align: middle;
  word-wrap: break-word;
}

/* Alternating Row Colors */
#waterfall-section table.claims-table tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

#waterfall-section table.claims-table tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

/*--------------------Styles for approver_checklist.html-----------------------------------
-------------------------------------------------------------------------------------------------------- */

.checklist-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
  max-width: 100%;
}

.checklist-label {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;  
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.checklist-status {
  flex-shrink: 0;
  width: 130pt; /* enough for ✓ or short text like "Compliant" */
  text-align: right;
  font-size: 22px;
  line-height: 1.4;
  white-space: normal;
}

/*--------------------MOBILE WARNING and MIN-WIDTH 788 for visibility-----------------------------------
-------------------------------------------------------------------------------------------------------- */

/* Hide warning by default */
.mobile-warning {
  display: none;
}

/* Show warning and hide content only on small screens */
@media screen and (max-width: 767px) {
  .mobile-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--btn-primary-bg);
    color: white !important;
    padding: 1rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }

  main,
  nav,
  footer {
    display: none !important;
  }
}

/*-----------------------------------END MOBILE WARNING for visibility----------------------------------- */

/*------------------------------------------------------------------------------------------- 
                        no MQ up to 767px
                        BS breakpoint für sm ist 576px
                        MQ für min 431px bis max 767px
--------------------------------------------------------------------------------------------*/