:root {
  --bs-body-bg: var(--color-surface);
}

/* ============================================================
   BOOTSTRAP OVERRIDE -KERROS
   Käyttää asiakkaan design-tokeneita (var(--color-xxx))
   ============================================================ */

/* -------------------------------------------------------
   PAINIKKEET 
------------------------------------------------------- */
/* Perus: kaikki painikkeet */
.btn{
  border-radius: 6px;
  padding: 8px 16px;
  font-size: var(--font-body, 12px); /* tai suoraan 12px */
  font-weight: 400;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-secondary);
}

/* Save: täytetty --color-brand, valkoinen/Bold */
.btn-save,
.genier-btn {
  background-color: var(--color-brand);
  color: #ffffff;
  font-weight: 700;
  border-color: var(--color-brand);
}

/* Delete: outline --color-danger, teksti --color-danger-text */
.btn-delete {
  background-color: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger-text);
  font-weight: 400;
}

/* Cancel / Export: neutraali outline --color-border, teksti --color-text-secondary */
.btn-cancel,
.btn-export {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* Send to kettles: outline --color-brand, teksti --color-brand-text */
.btn-send,
.genier-btn-send {
  background-color: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand-text);
  font-weight: 400;
}
/* Yhteinen tyyli Previous/Next -painikkeille */
.genier-prevnext-btn {
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: transparent;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: var(--font-body);
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px; /* nuolen ja tekstin väli */
  cursor: pointer;
}
.genier-btnX {
	text-align: start; 
}
/* Hover: kevyt surface-alt, ei brändiväriä */
.genier-prevnext-btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text-primary);
}

/* Ikonit (FontAwesome) */
.genier-prevnext-btn .icon {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ------------------------------
   2) List-group
   ------------------------------ */

/* Koko list-group-komponentti */
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px; /* sama kuin kortit */
}



/* Viimeinen rivi ilman alareunaa */
.list-group-item:last-child {
  border-bottom: none;
}

/* Hover-tila (asiakkaan design ei käytä tummia hover-värejä) */
.list-group-item:hover {
  background: var(--color-surface-alt);
}

/* 
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--color-border);
}
*/ 

/* Active list-group item asiakkaan designin mukaan */
.list-group-item.active {
	background: var(--color-page-bg);
 /*   background: var(--color-warm-bg); */
  color: var( --color-text-primary); 
  font-weight: var(--font-weight-bold);
  /*border-left: 3px solid var(--color-brand);*/
    border-left: 3px solid var(--color-page-bg);
  border-bottom: 1px solid var(--color-border-subtle);
}
.list-group-item.selected {
  background: var(--color-warm-bg);
  color: var(--color-brand-text);
}
/* Poistetaan Bootstrapin oletusvärit */
.list-group-item.active {
  --bs-list-group-active-bg: transparent;
  --bs-list-group-active-color: inherit;
  --bs-list-group-active-border-color: transparent;
}



/* No program -rivi */
.list-group-item.no-program {
  color: var(--color-text-tertiary);
  font-weight: normal;
}

/* Named program -rivi */
.list-group-item.named-program {
  background: var(--color-warm-bg);
  color: var(--color-brand-text);
  font-weight: var(--font-weight-bold);
}

/* Kellon tunniste oikealla */
.list-group-item .timestamp {
  color: var(--color-text-quaternary);
  font-size: var(--font-small);
}


/* Stripe-efekti (ei vastaa speksiä täysin, mutta näyttää muutoksen) */
.list-group-item-for-report:nth-child(even) {
  background-color: var(--color-surface-alt) !important;
}

/* ------------------------------
   3) Taulukot
   ------------------------------ */

.table {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-subtle) !important;
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-body) !important;
}

.table-striped-for-report > tbody > tr:nth-of-type(odd) {
  background-color: var(--color-surface-alt) !important;
}

.table td, .table th {
  border-color: var(--color-border-subtle) !important;
  padding: 11px 16px !important;
}

/* ------------------------------
   4) Card-komponentit
   ------------------------------ */

.card {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05) !important;
}

.card-body {
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-body) !important;
  color: var(--color-text-primary) !important;
      padding: 0 0 0 0;
}

/* ------------------------------
   5) Form-kentät
   ------------------------------ */

.form-control {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-body) !important;
}

/* ------------------------------
   6) Toggle-napit (btn-group)
   ------------------------------ */

.btn-group .btn {
  border-radius: var(--radius-md) !important;
  font-family: var(--font-family-body) !important;
  font-size: var(--font-size-body) !important;
  padding: 8px 16px !important;
}

.btn-group .btn.active {
  background-color: var(--color-surface) !important;
  border: 2px solid var(--color-brand) !important;
  color: var(--color-brand-text) !important;
}

.btn-group .btn:not(.active) {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-text-quaternary) !important;
}

/* ------------------------------
   7) Yleinen typografia. kts. components.css
   ------------------------------ */


/* Perustyyli kaikille accordion-painikkeille */
.accordion-button {
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: var(--font-body, 12px);
    font-weight: 400;
    padding: 10px 14px;
    box-shadow: none;
}

/* Hover collapsed-tilassa */
.accordion-button.collapsed:hover {
    background-color: var(--color-surface-alt);
    color: var(--color-text-primary);
}

/* Expanded-tila (not collapsed) */ 
.accordion-button:not(.collapsed) {
  /*  background-color: var(--color-surface-alt);
    color: var(--color-text-primary);
    border-color: var(--color-border);
    box-shadow: none; */
	border-left: 3px solid var(--color-brand);
}  

/* Poistetaan Bootstrapin oletusnuolen taustavarjot */
.accordion-button::after {
    filter: none;
}
.accordion-button::after {  color: #eb4623; float:left; font-weight: 900; font-family: 'Font Awesome 5 Free';

  margin-left: 0;
  margin-right: auto;
  padding-right: 8px;
} 
 .accordion-button.collapsed::after {  color: #eb4623; float:leftt;  font-family: 'Font Awesome 5 Free';} 
/* pata-listaus */   
.pad-row {
  padding: 8px 12px;
}
.pad-top-row {
  display: grid;
  grid-template-columns: 24px 1fr auto; /* dot | name | date */
  align-items: center;
 /* gap: 12px; */ 
  width: 100%;
}

.pad-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pad-date {
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.pad-model {
  padding-left: 24px;  
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: small; 
}
.pad-main-link {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Hover vasemmalle */
.pad-main-link:hover {
  background: var(--color-surface-alt);
  border-radius: 6px;
}

.pad-main-content {
  width: 100%; /* pitää vasemman alueen tasaleveänä */
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pad-plus-link {
  flex-shrink: 0; /* pitää plus-napin oikeassa reunassa */
  padding: 6px;
  border-radius: 6px;
}
/* Status dot */
.status-dot {
  color: #50C850;
  font-size: 14px;
}
/* Plus-ikoni */
.plus-icon {
  color: #eb4623;
  font-size: 20px;
}

#8_sec .accordion-button {
  padding: 8px 12px !important;
  font-size: 15px;
  background-color: #f6f6f6 !important;
  border-radius: 4px !important;
}
/* Poista kortin sisäiset marginaalit */
#8_sec .card,
#8_sec .card-body {
  margin: 0 !important;
  padding: 0 !important;
}

/* Poista accordionin ylimääräinen spacing */
#8_sec .accordion {
  margin: 0 !important;
  padding: 0 !important;
}

/* Poista list-groupin oletus padding */
#8_sec .list-group {
  margin: 0 !important;
  padding: 0 !important;
}

/* Poista list-group-itemin turha spacing */
#8_sec .list-group-item {
  padding: 6px 10px !important;
  margin: 0 !important;
  border: none !important;
}

/* Poista collapse-body spacing */
#8_sec .accordion-body {
  padding: 0 !important;
  margin: 0 !important;
}

/* Poista ul/li oletus spacing */
#8_sec ul,
#8_sec li {
  margin: 0 !important;
  padding: 0 !important;
}
#8_sec .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff !important;
  border-bottom: 1px solid #eee !important;
  font-size: 14px;
}
#cons_report_div {
  width: 100%;          /* tai 60% jos haluat */
  max-width: 800px;     /* pienempi maksimi */
  height: 450px;        /* tämä määrää canvasin korkeuden */
    
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
   
}

#cons_report_can {
  width: 100% !important;
  height: 100% !important;
}
/* --- MOBILE FIX FOR PADA INFO WINDOW --- */
@media (max-width: 600px) {

  /* Kortti täysleveäksi */
  .card.text-black {
    width: 100% !important;
    margin: 0;
    padding: 0;
    border-radius: 0;
  }

  /* Poista float oikealta */
  #error {
    float: none !important;
    display: block;
    text-align: right;
    margin-bottom: 10px;
  }

  /* Sisältö scrollattavaksi */
  #card_body_3 {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    padding: 16px;
  }

  /* Kettle-content täysleveäksi */
  .kettle-content {
    width: 100%;
    padding: 0;
  }

  /* Rivien layout mobiilissa */
  .content-section {
    padding: 12px 0;
  }

  .row-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .row-label {
    font-size: 14px;
    font-weight: 600;
  }

  .row-value {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Title mobiilissa */
  .content-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
  }

  .content-name {
    font-size: 18px;
    font-weight: 700;
  }

  .content-serial,
  .content-sw {
    font-size: 14px;
  }
}