@import "./constants.css";

/* ----------------------------------------------------------*/
/* PROJECT CARDS                                             */
/* ----------------------------------------------------------*/
.project-card {
  border: 1px solid #e5e7eb;
  border-top: 3px solid var(--main-color);
  border-radius: 10px;
  box-shadow: var(--box-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.project-card:hover {
  box-shadow: 0 6px 20px rgba(0, 130, 142, 0.15);
  transform: translateY(-2px);
}

/* Avatar circle */
.project-card-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: var(--main-color-light);
  color: var(--main-color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.project-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.project-card-meta {
  flex: 1;
  min-width: 0;
}

.project-card-name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card-date {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 5px;
}

.project-card-desc {
  font-size: 0.85rem;
  color: #6b7280;
  min-height: 2.5rem;
  margin-top: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Clickable card wrapper */
.project-card-link {
  text-decoration: none;
  display: block;
  height: 100%;
  color: inherit;
}

.project-card-link:hover {
  text-decoration: none;
  color: inherit;
}

/* ----------------------------------------------------------*/
/* ACTIVITY FEED                                             */
/* ----------------------------------------------------------*/
.activity-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: #495057;
}

/* ----------------------------------------------------------*/
/* LEAFLET DRAW — hide native Edit/Delete toolbar buttons    */
/* ----------------------------------------------------------*/
.leaflet-draw-edit-edit,
.leaflet-draw-edit-remove {
  display: none !important;
}


.dataTeamPresentationImg {
  margin: auto;
  max-width: 60%;
  height: auto;
  display: flex;
}

/* ----------------------------------------------------------*/
/* PAGE COMPONENTS */
/* ----------------------------------------------------------*/
.template-content {
  padding: 1.5rem 2rem;
  background-color: var(--content-bg);
  flex:1;
  width: calc(100% - var(--sidebar-width));
  max-width: calc(100% - var(--sidebar-width));
  gap: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  margin-left: var(--sidebar-width);
  animation: fadeIn-template-content 0.4s ease-out;
  margin-bottom: 0;
  margin-right:0;
  box-sizing: border-box;
}

/* Graph Containers */
.graph-container-full-width {
  height: auto;
  min-width: 80%;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 80% !important;
  overflow: visible;
  box-sizing: border-box;
  margin: 1rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.graph-container {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  overflow: visible;
  height: auto !important;
  min-height: 300px;
  margin-bottom: 1rem;
  margin-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

/* ----------------------------------------------------------*/
/* SLIDER */
/* ----------------------------------------------------------*/
.slider-container {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-bottom: 2rem;
  padding: 0.5rem 0;
}

.slider-title {
  font-weight: 600;
  color: #333;
  font-size: 1rem;
  margin-right: 5px;
  min-width: 60px;
}

/* Slider track styling */
.rc-slider-track {
  background-color: var();
  height: 4px;
}

.rc-slider-rail {
  background-color: #e2e8f0;
  height: 4px;
}

/* Slider handle styling */
.rc-slider-handle {
  border: solid 2px var(--main-color-bright);
  background-color: white;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.rc-slider-handle:hover {
  border-color: var(--main-color-bright);
  box-shadow: 0 1px 5px rgba(0,0,0,0.2);
}

.rc-slider-handle-active:active {
  border-color: var(--main-color-bright);
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/* Slider marks styling */
.rc-slider-mark-text {
  color: #666;
  font-size: 0.85rem;
}

.rc-slider-mark-text-active {
  color: var(--main-color-bright);
  font-weight: 500;
}

/* Container width adjustment */
#slider-years {
  flex-grow: 1;
  padding: 0 10px;
  max-width: 600px;
}


/* ----------------------------------------------------------*/
/* FLEX LAYOUT SYSTEM */
/* ----------------------------------------------------------*/
.row-dbc {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  gap: auto;
}

.row-dbc-with-paragraph{
  display: flex;
  justify-content: left;
  align-items: flex-start;
  width: 100%;
  padding: 0;
  margin-left: 0 !important;
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: 1rem;
  flex:1;
}

.column-dbc {
  text-align: left;
  display: flex;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  height: 100%;
  min-width: 0;
  overflow:unset;
  margin-left: 0;
  padding-left: 0;
}

.width-5pct  { flex: 1 1 5%;   max-width: 5%; }
.width-10pct { flex: 1 1 10%;  max-width: 10%; }
.width-15pct { flex: 1 1 15%;  max-width: 15%; }
.width-20pct { flex: 1 1 20%;  max-width: 20%; }
.width-25pct { flex: 1 1 25%;  max-width: 25%; }
.width-30pct { flex: 1 1 30%;  max-width: 30%; }
.width-33pct { flex: 1 1 33%;  max-width: 33%; }
.width-35pct { flex: 1 1 35%;  max-width: 35%; }
.width-40pct { flex: 1 1 40%;  max-width: 40%; }
.width-45pct { flex: 1 1 45%;  max-width: 45%; }
.width-50pct { flex: 1 1 50%;  max-width: 50%; }
.width-55pct { flex: 1 1 55%;  max-width: 55%; }
.width-60pct { flex: 1 1 60%;  max-width: 60%; }
.width-65pct { flex: 1 1 65%;  max-width: 65%; }
.width-67pct { flex: 1 1 67%;  max-width: 67%; }
.width-70pct { flex: 1 1 70%;  max-width: 70%; }
.width-75pct { flex: 1 1 75%;  max-width: 75%; }
.width-80pct { flex: 1 1 80%;  max-width: 80%; }
.width-85pct { flex: 1 1 85%;  max-width: 85%; }
.width-90pct { flex: 1 1 90%;  max-width: 90%; }
.width-95pct { flex: 1 1 95%;  max-width: 95%; }
.width-100pct { flex: 1 1 100%; max-width: 100%; }

/* Fraction-based widths (for 12-column grid) */
.width-1_12th { flex: 1 1 8.33%;  max-width: 8.33%; }
.width-2_12th { flex: 1 1 16.67%; max-width: 16.67%; }
.width-3_12th { flex: 1 1 25%;    max-width: 25%; }
.width-4_12th { flex: 1 1 33.33%; max-width: 33.33%; }
.width-5_12th { flex: 1 1 41.67%; max-width: 41.67%; }
.width-6_12th { flex: 1 1 50%;    max-width: 50%; }
.width-7_12th { flex: 1 1 58.33%; max-width: 58.33%; }
.width-8_12th { flex: 1 1 66.67%; max-width: 66.67%; }
.width-9_12th { flex: 1 1 75%;    max-width: 75%; }
.width-10_12th { flex: 1 1 83.33%; max-width: 83.33%; }
.width-11_12th { flex: 1 1 91.67%; max-width: 91.67%; }
.width-12_12th { flex: 1 1 100%;  max-width: 100%; }

/* ----------------------------------------------------------*/
/* SCREEN RESIZING */
/* ----------------------------------------------------------*/
@media (max-width: 1100px) {
  .column-dbc {
    flex: 0 0 100% !important;
    max-width: 80% !important;
  }
  
  /* Simplified media query */
  [class*="width-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .currency-symbol, .percentage-symbol {
    font-size: 16px;
    right: 14px;
    bottom: 16px;
  }

}

@media (max-width: 768px) {
  .template-content {
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 1rem 0.75rem;
    box-sizing: border-box;
    border-radius: 0;
    overflow-x: hidden;
  }

  /* Graphes moins hauts sur mobile */
  .graph-container {
    min-height: 200px;
  }

  .graph-container-full-width {
    max-width: 100% !important;
  }

  /* Text boxes pleine largeur */
  .text-box {
    width: 100%;
    max-width: 100%;
    padding: 14px 16px;
  }

  /* Horizontal text box list : passage en colonne */
  .horizontal-text-box-list {
    flex-direction: column;
    margin: 10px 0;
  }

  .horizontal-text-box-list > .text-box {
    max-width: 100%;
    flex: 1 1 100%;
    max-height: none;
  }

  /* Slider en colonne */
  .slider-container {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
/* Responsive Adjustments */
@media (max-width: 1200px) {
  .row-dbc{
    flex-direction: column !important;
  }

  .text-box {
    padding: 14px 16px;
  }
  
  .data-text-box-numeric-positive,
  .data-text-box-numeric-negative,
  .data-text-box-numeric-null,
  .data-text-box-percentage-positive,
  .data-text-box-percentage-negative,
  .data-text-box-percentage-null,
  .data-text-box-currency-positive,
  .data-text-box-currency-negative,
  .data-text-box-currency-null {
    font-size: 1.25em;
  }
  
  .data-text-box-trend-positive::before,
  .data-text-box-trend-negative::before,
  .data-text-box-trend-null::before {
    width: 1.25em;
    height: 1.25em;
    margin-right: 6px;
  }
  
  .percentage-symbol {
    font-size: 1em;
    right: 2em;
    bottom: 1em;
  }

  .currency-symbol{
    font-size: 1em;
    right: 1em;
    bottom: 1em;
  }
}

.currency-symbol{
  position: relative;
  right: 0;
  bottom: 1.125em;
  font-size: 1.125em;
  font-weight: 600;
  opacity: 0.7;
}

.percentage-symbol {
  position: absolute;
  right: 16px;
  bottom: 18px;
  font-size: 18px;
  font-weight: 600;
  opacity: 0.7;
}


/* ----------------------------------------------------------*/
/* ANIMATIONS */
/* ----------------------------------------------------------*/
@keyframes fadeIn-template-content {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

.template-content {
  animation: fadeIn-template-content 0.4s ease-out;
}
  
/* Add a subtle animation for data loading */
@keyframes fadeIn-data-text-boxes {
  from { opacity: 0; }
  to { opacity: 1; }
}

[class*="data-text-box-"] {
  animation: fadeIn-data-text-boxes 0.5s ease-in-out;
}

/* ----------------------------------------------------------*/
/* TEXT BOXES */
/* ----------------------------------------------------------*/
/* Text Box Container Styling */
.text-box {
  padding: 1.5rem;
  height: 100%;
  background-color: var(--box-bg);
  border-radius: var(--border-radius-text-box);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 18px 22px;
  margin-bottom: 20px;
  transition: all 0.2s ease;
  border-left: 4px solid var(--main-color);
  width: 80%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.text-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}


/* Text Box Title Styling */
.text-box-title {
  font-size: 1.125em;
  font-weight: 600;
  color: var(--main-color);
  margin-top: 0;
  margin-bottom: 12px;
  font-family: 'Segoe UI', Arial, sans-serif;
  display:flex;
  align-items: flex-start;
  min-width: 100%;
}

.content-data-box {
  display: flex;
  align-items: baseline;
  margin-top: auto;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
}

[class^="data-text-box"] {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  position: relative;
}


/* Non trend text box styling */
.data-text-box-numeric-positive,
.data-text-box-numeric-negative,
.data-text-box-numeric-null,
.data-text-box-text {
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Trend text box styling */
.data-text-box-trend-numeric-positive,
.data-text-box-trend-numeric-negative,
.data-text-box-trend-numeric-null {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0;
  color: #2c3e50;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.data-text-box-trend-currency-positive,
.data-text-box-trend-currency-negative,
.data-text-box-trend-currency-null,
.data-text-box-currency-positive,
.data-text-box-currency-negative,
.data-text-box-currency-null,
.data-text-box-trend-percentage-positive,
.data-text-box-trend-percentage-negative,
.data-text-box-trend-percentage-null,
.data-text-box-percentage-positive,
.data-text-box-percentage-negative,
.data-text-box-percentage-null {
  font-size: 1.5em;
  font-weight: 700;
  color: #2c3e50;
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
}


/* SVG Trend Arrows */
.data-text-box-trend-currency-positive::before,
.data-text-box-trend-currency-negative::before,
.data-text-box-trend-currency-null::before,
.data-text-box-trend-percentage-positive::before,
.data-text-box-trend-percentage-negative::before,
.data-text-box-trend-percentage-null::before,
.data-text-box-trend-numeric-positive::before,
.data-text-box-trend-numeric-negative::before,
.data-text-box-trend-numeric-null::before {
  content: "";
  display: inline-block;
  min-width: 1.25em;
  width: 1.25em;
  height: 1.25em;
  margin-right: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
}

/* Positive Trend - Green Up Arrow */
.data-text-box-trend-currency-positive::before,
.data-text-box-trend-percentage-positive::before,
.data-text-box-trend-numeric-positive::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%232ecc71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E");
}

/* Negative Trend - Red Down Arrow */
.data-text-box-trend-currency-negative::before,
.data-text-box-trend-percentage-negative::before,
.data-text-box-trend-numeric-negative::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23e74c3c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 5v14M5 12l7 7 7-7'/%3E%3C/svg%3E");
}

/* Null/Neutral Trend - Orange Horizontal Arrow */
.data-text-box-trend-currency-null::before,
.data-text-box-trend-percentage-null::before,
.data-text-box-trend-numeric-null::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='%23f39c12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}

/* Currency symbol */
.currency-symbol {
  position: relative;
  font-size: 1.25em;
  font-weight: 700;
  color: #2c3e50;
  opacity: 0.8;
  margin-left: 0.5em;
  vertical-align: baseline;
  bottom: 0.3em;
  flex-shrink: 0;
  display: inline-block;
}

.percentage-symbol {
  position: relative;
  font-size: 1.25em;
  font-weight: 700;
  color: #2c3e50;
  opacity: 0.8;
  margin-left: 1.125em;
  vertical-align: baseline;
  bottom: 0.3em;
  flex-shrink: 0;
  display: inline-block;
}

/* Paragraphs containers */
.data-text-box-paragraph {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0;
  color: #2c3e50;
  position: relative;
  align-items: flex-start;
  text-align: left;
  flex: 1;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ----------------------------------------------------------*/
/* HORIZONTAL TEXT BOXES */
/* ----------------------------------------------------------*/
.horizontal-text-box-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  /* gap: 2em; */
  width: 100%;
  margin: 20px;
}

/* Individual text box styling */
.horizontal-text-box-list>.text-box {
  max-width: 18%;
  flex: 1 1 200px; /* Grow, shrink, and base width */
  max-height: 130px;
  min-height: 130px;
}

/* ----------------------------------------------------------*/
/* MANTINE ELEMENTS (DMC) */
/* ----------------------------------------------------------*/

/* dmc.MultiSelect standard input */
.custom-multiselect .mantine-MultiSelect-input {
  max-height: 40px;
  overflow-y: auto;
  transition: max-height 0.2s ease;
  /* Animation douce */
}


/* dmc.MultiSelect when clicked */
.custom-multiselect .mantine-MultiSelect-input:focus-within {
  max-height: 300px;
  /* Ou 'none' pour une extension totale */
}

/* ----------------------------------------------------------*/
/* CHECKBOXES */
/* ----------------------------------------------------------*/

/* --- 1. BASE COMMUNE --- */
.checklist input[type="checkbox"],
.form-check-input {
  all: unset !important;
  display: inline-flex !important;
  align-self: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  margin: 0 10px 0 0 !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  /* Fond blanc par défaut */
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* --- 2. RESTAURATION DU BACKGROUND QUAND COCHÉ --- */

/* Pour la checklist "Respondent" (Violet) */
.checklist input[type="checkbox"]:checked {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  /* Ajout de l'encoche blanche obligatoire car le fond change */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 80% !important;
}

/* Pour les checkboxes "Continent" (Noir/Teal selon ton choix) */
/* On cible spécifiquement dbc.Checkbox via .form-check-input */
.form-check-input:checked {
  background-color: var(--main-color) !important;
  /* Noir comme demandé précédemment */
  border-color: var(--main-color) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 80% !important;
}

/* --- 3. POLICE NOIRE ET ALIGNEMENT --- */
.checklist label,
.form-check-label {
  color: #212529 !important;
  /* Police noire */
  font-weight: 500 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.form-check {
  padding-left: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.checklist .form-check,
.checklist label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  /* Centre verticalement le carré et le texte */
  justify-content: flex-start !important;
  line-height: 1 !important;
  /* Harmonise la hauteur de ligne */
  gap: 0 !important;
}

/* ----------------------------------------------------------*/
/* LOADING SPINNER COLOR OVERRIDE */
/* ----------------------------------------------------------*/
/* Force Dash Loading components to use the main teal color */
._dash-loading-callback {
  color: var(--main-color) !important;
}

/* Specific styling for the default loading animation points */
.dash-spinner>div {
  background-color: var(--main-color) !important;
}

/* ----------------------------------------------------------*/
/* TABLE-INSUCO — dbc.Table styled to match ag-theme-insuco  */
/* ----------------------------------------------------------*/

/* Checkbox column — aligned and centered in both header and body */
.table-insuco thead tr th:first-child,
.table-insuco tbody tr td:first-child {
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

/* Global (select-all) checkbox button in the header — fully white */
.table-insuco thead tr th .btn-link,
.table-insuco thead tr th .btn-link i {
  color: #ffffff !important;
}
.table-insuco thead tr th .btn-link:hover,
.table-insuco thead tr th .btn-link:hover i,
.table-insuco thead tr th .btn-link:focus,
.table-insuco thead tr th .btn-link:focus i {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Row checkboxes: checked = teal, unchecked = grey */
.table-insuco tbody .fa-check-square { color: #00828e !important; }
.table-insuco tbody .fa-square      { color: #adb5bd !important; }

/* Standalone wrapper (outside a Card): provides the outer shell */
.table-insuco-wrapper {
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.table-insuco {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  color: #2c3e50;
  margin-bottom: 0 !important;
  border-collapse: collapse;
  width: 100%;
}

/* Header */
.table-insuco thead tr th {
  background-color: #00828e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 10px 16px;
  border-bottom: none;
  border-top: none;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  white-space: nowrap;
  vertical-align: middle;
}

.table-insuco thead tr th:last-child {
  border-right: none;
}

/* Body cells */
.table-insuco tbody tr td {
  padding: 8px 16px;
  border-top: 1px solid #f1f3f5;
  vertical-align: middle;
}

/* Striped rows */
.table-insuco tbody tr:nth-child(odd) {
  background-color: #f8fafb;
}

.table-insuco tbody tr:nth-child(even) {
  background-color: #ffffff;
}

/* Hover */
.table-insuco tbody tr:hover td {
  background-color: rgba(0, 130, 142, 0.04) !important;
}

/* Selected row — teal tint, no blue left border */
.table-insuco tbody tr.table-active td,
.table-insuco tbody tr[style*="rgba(0, 130, 142"] td {
  background-color: rgba(0, 130, 142, 0.08) !important;
  border-left: none !important;
}

/* Links inside cells */
.table-insuco a {
  color: #00828e;
  font-weight: 500;
  text-decoration: none;
}
.table-insuco a:hover {
  text-decoration: underline;
  color: #005f68;
}

@media (max-width: 768px) {
  .table-insuco {
    font-size: 11px;
  }
  .table-insuco thead tr th,
  .table-insuco tbody tr td {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ----------------------------------------------------------*/
/* BUDGET — Granularity accordion                            */
/* ----------------------------------------------------------*/

/* Mobile: normal collapsible accordion */
.budget-granularity-accordion .accordion-item {
  border: none;
  background: transparent;
}
.budget-granularity-accordion .accordion-button {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #6c757d;
  text-transform: uppercase;
  background: transparent;
  padding: 10px 0;
  box-shadow: none;
}
.budget-granularity-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: #6c757d;
  box-shadow: none;
}
.budget-granularity-accordion .accordion-body {
  padding: 8px 0 0 0;
}

/* Desktop: always open, no chevron, not interactive */
@media (min-width: 768px) {
  .budget-granularity-accordion .accordion-button::after {
    display: none;
  }
  .budget-granularity-accordion .accordion-button {
    pointer-events: none;
    cursor: default;
  }
  .budget-granularity-accordion .accordion-collapse {
    display: block !important;
  }
}