// pages/_sx_tabelle.scss
//--Inhalt: Farben, Formen, Abstände für sx_tabelle--

@use "../config/sx_theme";
@use "../config/sx_mixins";

// ===========
// -- Body -- 
// ===========

/* -- Bildschirmseite mit scrollbar -- */
html, body {
  max-width: 100%;
  overflow-x: visible;
}


// =================================================
// -- Elemente über und unter der Ergebnistabelle -- 
// =================================================
/* --Container im Ergebnisbereich -- */
.hero-body > .container { /*in _sx_common.scss*/
    display: block;
    width: 100%;
    max-width: 100%; /*none;*/
    min-width: 0;
    box-sizing: border-box;
}

.container {
//  overflow-x: auto; /* Nur horizontales Scrollen */
//  overflow-y: auto; /* Vertikales Scrollen */
//  max-height: 80vh; /* max. Container-Höhe 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */
//  max-width: 190vb; /* max. Container-Breite 190% des Viewports (whitesmoke-farbene übergeo Card u Column) */
//  max-width: 100%;      /* volle Container-Breite */
  white-space: normal; /* Ermöglicht Zeilenumbrüche in den Tabellenzellen */
  hyphens: auto;
  /*white-space: nowrap; 	/* Verhindert Zeilenumbrüche in den Tabellenzellen */
  -webkit-overflow-scrolling: touch; /* Für bessere Scroll-Erfahrung auf Mobilgeräten */
}


/* -- Card -- */
.hero-body > .container > .card {
   width: fit-content;
   max-width: 100%;
   min-width: 0;
   box-sizing: border-box;
}


/* -- Input-container unter Buttonbar mit: Label, Auswahlfeld, Button --*/
.input-container {
  display: flex;
  align-items: center;
  flex-wrap: normal;
  flex: 1 1 auto;    /* 20260304; flex-grow, flex-shrink, flex-basis = auto; /*für flexibles Verhalten der Zeile*/
  padding-bottom: 0.1rem;
}

.input-container > .label { /*Standarddarstellung für größere Viewports*/
  margin-bottom: 0.3rem;
  margin-right: 0.5rem; /* Abstand zwischen Label und Eingabefeld*/
} 

.field {
  margin-left: 1px; /*für Abstand Buttonbar-SelectFeld*/
} 

/* -- Legende --*/
.legende, p.legende {
  display: flex;
  /*flex-grow: 1;
  /*flex-shrink: 1;*/
  flex: 1 1 auto; 
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: normal;
  padding: 0.3rem;
  margin-bottom: 0.1rem;
  width: auto;
}

p.legende {
   @include sx_mixins.font;
   @include sx_mixins.border; 
   display: flex;
   flex-wrap: wrap;
   max-width: fit-content;
   min-width: 0;
   white-space: normal;
   overflow-wrap: break-word;
   word-break: normal;
   hyphens: auto;
   gap: 1px;
}


/* -- Unterhalb Ergebnistabelle: Datensatzinfo  -- */
.pagination-container {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  gap: 2px; 	/* Abstand zwischen den Elementen */
} 

/* -- Fehlermeldung --*/
p.errmsg {
  border: medium solid red;
  text-align: left;
  background-color: #d7d7d7;
}

span.hidden_navi {
  margin: 0px;
  padding: 0px;
  font-size: smaller;
  display: inline;
}

// ======================
// -- Ergebnistabellen -- 
// ======================
/* -- Tabelle -- */
.level-center, .treebutton { /*für zentrierte Icons in Tabelle*/
  display: flex;
  justify-content: center;
}

table, 
table.ergtabelle, 
table.nd_ergtabelle {
  /*min-width: 130%;*/ /* Tabellen-Breite gößer als Container-Breite, damit Scrollbalken sichtbar ist */
  width: 100%;
  max-width: 100%;
  table-layout: auto;
  white-space: normal;
  hyphens: auto;
  margin: 0;
  padding: 0;
  border-spacing: 0px; /*Abstand zwischen den Zellen*/
  border-collapse: collapse;
  @include sx_mixins.font;
  font-size: 0.8rem;
}

/* -- Tabellenkopf -- */
table th.printheader {
  font-size: 10pt;
  font-weight: bold;
  text-align: center;
  background-color: white;
  border-top: 1px solid;
  border-right: 1px solid;
  border-bottom: 1px solid;
  border-left: 0;
}


table th, 
table.ergtabelle th, 
table.nd_ergtabelle th {
  border: sx_theme.theme(border-style);
  border-collapse: separate;
  background-color: sx_theme.theme(table-background-header);
  vertical-align: top; 
  white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/
  text-align: left;
  text-align-last:left;
  hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ 
  padding: 3px 0px !important; /*Textabstand innerhalb der Zelle: oben/unten sowie rechts/links*/
  /*padding-inline: 2px;*/
}


table.thead, 
table.ergtabelle thead, 
table.nd.ergtabelle thead, 
table.thead th,
table.ergtabelle thead th, 
table.nd_ergtabelle thead th { /*wirkt auf einz. Kopfzeile*/ 
  border: sx_theme.theme(border-style);
  border-collapse: separate;
  background-color: sx_theme.theme(table-background-header);
  position: sticky; 
  top: 50px;  /*0*/
  z-index: 20;
}


/*-- fixierte Zeilen und Spalten --*/
table th.fixed-column1-title, 	/*table th.header,*/
table td.fixed-column1 {        /*für Spaltentitel*/ 
   border: sx_theme.theme(border-style);
   border-collapse: separate;
   background-color: sx_theme.theme(table-background-header); 
   @include sx_mixins.font; 
   font-size: 0.8rem;
   font-weight: bold;
}

table th.fixed-column1-title, 
table td.fixed-column1
table.ergtabelle th.fixed-column1-title, 
table.ergtabelle td.fixed-column1, 
table.nd_ergtabelle th.fixed-column1-title,
table.nd_ergtabelle td.fixed-column1  { /*zum Fixieren des 1. Spaltentitels b. horizont. Scrollen*/
  border: sx_theme.theme(border-style);
  border-collapse: separate;
  position: sticky;
  z-index: 25;
  left: 0em;
  /*text-align: center;*/
}

table td.fixed-column1
table.ergtabelle td.fixed-column1
table.nd_ergtabelle td.fixed-column1 {
  filter: opacity(1);
}

/* -- Tabellenzellen, allg. -- */
//table.td,
table.ergtabelle td, 
table.nd_ergtabelle td {
  border: sx_theme.theme(border-style);
  vertical-align: bottom; /*top;
  white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/
  //text-align: left;
  //text-align-last:left;
  hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ 
  padding: 3px 0px !important; /*Textabstand innerhalb der Zelle: oben/unten sowie rechts/links*/
 /*padding-inline: 2px;*/
}

/* -- Hierarchiezeilen -- */
table tr.erglevel_1 {
  background: sx_theme.theme(table-background-row-level-1); 
  font-weight:bold;
}
  
table tr.erglevel_2 {
  background: sx_theme.theme(table-background-row-level-2); 
}
  
table tr.erglevel_3 {
  background: sx_theme.theme(table-background-row-level-3); 
}
  
table tr.erglevel_4 {
  background: sx_theme.theme(table-background-row-level-4); 
}
  
table tr.erglevel_5 {
  background: sx_theme.theme(table-background-row-level-5); 
}
  
table tr.erglevel_6 {
  background: sx_theme.theme(table-background-row-level-6); 
}

/* -- Spezielle Zeilen und Zellen -- */
table td.string {
  text-align: left;
  empty-cells:show;
}

table td.boldnumber {
  text-align: right;
  empty-cells:show; 
  font-weight:bold;
}

table td.decimal, 
table td.integer,
table td.prozent {
  text-align: right;
  empty-cells:show;
}

table td.lt5:before {
  content: "< 5";
  color:  sx_theme.theme(error-color); /*rot*/
}

table td.prozent {
  text-align: right;
  font-style: italic;
  //color: #999999;
  color: sx_theme.theme(table-color-special-value); /*default-blaugrau*/ 
}

table td.result {
  font-size: 10pt;
  empty-cells:show;
}

table tr.issumme {
  font-weight: bolder;
  //background-color: #d7d7d7; /*hellgrau*/
  background-color: sx_theme.theme(table-background-row-sum); /*hellgrau*/ 
}

/* -- Hervorhebungen --*/
table.ergtabelle tr:hover, table.nd_ergtabelle tr:hover, 
table.ergtabelle tr:focus, table.nd_ergtabelle tr:focus {
    //background-color: hsl(219, 70%, 76%); /*graublau*/
    background-color: sx_theme.theme(table-background-row-hover); /*graublau*/
}

/* -- Tabellenzeilen ohne Hierarchie -- */
.listRowEven { 		/*gerade Zeile*/
  background-color: sx_theme.theme(table-background-row-even); /*weißgrau*/
}

.listRowOdd { 		/*ungerade Tabellenzeile*/
  //background-color: #FFFFFF;
  background-color: sx_theme.theme(table-background-row-odd); /*weiß*/
}

.listRowEvenHover, .listRowOddHover {
  //background-color: #FFFABF;
  background-color: sx_theme.theme(table-background-row-even-odd-hover); /*hellgelb*/
}

/* -- Teiltabelle --*/
p.teiltabelle_titel {
  clear: left;
  line-height: 2em;
  border-bottom: 2px solid black;
  color: black;
  display: block;
  font-size: 2em;
  font-weight: bolder;
  margin: 5px 0 20px 5px;
  padding: 0px 0px 0px 5px;
}

// ==============================================
// --- Media-Queries für responsives Verhalten---
// ==============================================

/* -- Mobile -- */
@media (max-width: 768px) {
  .hero-body { 
    margin-left: 0; 
    margin-right: 0; 
  }
  .container, .input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/
    max-width: 100%; 
    white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/
    hyphens: auto;
  }
  
  table.ergtabelle,
  table.nd_ergtabelle {
    max-width: 70%; 
    font-size: 0.65rem;
  }
  
  table.ergtabelle th,
  table.ergtabelle td,
  table.nd_ergtabelle th,
  table.nd_ergtabelle td {
    min-width: 50px;
    max-width: 60px;
    white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/
    hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ 
  }
}

/* -- Tablet -- */
@media (min-width: 769px) and (max-width: 1023px) { /*202608 geändert auf 1023px gem. Bulma-Breakpoint*/
  .container, .input-container { /*Format-,Berichtswahl, Breadcrumb, Legende*/
    max-width: 100%;
    white-space: normal; /*Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/
    hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ 
  }
  
  table.ergtabelle,
  table.nd_ergtabelle {
    max-width: 80%; 
    font-size: 0.7rem;
  }
  
  table.ergtabelle th,
  table.ergtabelle td,
  table.nd_ergtabelle th,
  table.nd_ergtabelle td {
    max-width: 80%; 
    white-space: normal; /* Leerzeichen zusammenfassen, Zeilenumbruch bei Bedarf nach Standard-Regeln*/
    hyphens: auto; /*korr. Silbentrennung bei Angabe der Sprache <html lang="de">*/ 
   }
}

/* -- Desktop -- */
@media (min-width: 1024px) { /*202608 geändert auf 1024px gem. Bulma-Breakpoint*/
  table.ergtabelle,
  table.nd_ergtabelle {
     font-size: 0.75rem; 
  }
}


@media screen and (min-width: 1216px) {
  .container:not(.is-max-desktop) {
    max-width: 1000px;
    }
}

/*# sourceMappingURL=sx_tabelle.css.map */