/* gsj_db_forms.css - optimierte Styles für das Formular */

/* --- Scope nur innerhalb .gsjaut --- */
.gsjaut { --border:#e5e7eb; --muted:#6b7280; --text:#111827; --bg:#fff; }

/* Tabellenlayout */
.gsjaut .gsjaut-form { width:60%; border-collapse:separate; border-spacing:0 8px; }
.gsjaut .gsjaut-form th,
.gsjaut .gsjaut-form td { padding:.2rem .35rem; vertical-align:middle; border-bottom:1px solid var(--border); }
.gsjaut .gsjaut-form th { width:36%; text-align:left; color:var(--muted); font-weight:600; text-transform:none; letter-spacing:normal; }

/* Zellen-Container für Input + Einheit */
.gsjaut .control { display:flex; align-items:center; gap:.2rem; background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:.2rem .35rem; }
.gsjaut .unit { color:var(--muted); white-space:nowrap; }

/* Inputs (Number hübsch & gut lesbar) */
.gsjaut input[type="number"]{
  width: 14ch;                /* Breite der Zahlenspalte */
  background:transparent; border:0; outline:0; color:var(--text);
  font-size:0.9em; line-height:1.1; padding:0;
}

/* Spinner schlank/ausblenden (optional) */
.gsjaut input[type="number"]::-webkit-outer-spin-button,
.gsjaut input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gsjaut input[type="number"] { -moz-appearance: textfield; }

/* Fokuszustand klar sichtbar */
.gsjaut .control:has(input:focus) { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25); }

/* Buttons */
.gsjaut .actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:.75rem; }
.gsjaut .btn { 
  background-color: #005a9c; /* dunkelblau */
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 0.2em 1.2em;
  font-size: 1.1em;
  border-radius: 5px;  
/*  border:1px solid var(--border); background:#111827; color:#fff; border-radius:10px; padding:.55rem .9rem; cursor:pointer;*/
 }

.gsjaut .btn.secondary { background:#fff; color:#111827; }
.gsjaut .btn:hover { filter:brightness(1.05); }
 /* deaktivierter Zustand: hellgrau, kein Cursor */
.gsjaut .btn[disabled] {
  background-color: #ccc !important;
  color: #666 !important;
  cursor: not-allowed !important;
  filter: none !important;
  pointer-events: auto; /* erlaubt Cursor-Anzeige auch wenn disabled */
}
.gsjaut .btn.primary {
  background-color: #005a9c;
  color: #fff;
  cursor: pointer;
}

/* Fehlermeldungen */
.gsjaut .error { display:none; color:#b91c1c; font-size:.9rem; margin-top:.25rem; }
.gsjaut .error[data-show="1"] { display:block; }

.gsj-grid-container-person {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-gap: 0.8em;
  max-width: 100%;
  padding: 1em;
  background: #f5f5f5;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.name        { grid-column: 1 / 3; grid-row: 1; }
.telefon     { grid-column: 3;     grid-row: 1 / 2; }
.zusatz      { grid-column: 1 / 3; grid-row: 2; }
.email       { grid-column: 1 / 3; grid-row: 3; }
.stadtbezirk { grid-column: 3;     grid-row: 3; }
.pvrolle     { grid-column: 1;     grid-row: 4; }
.pvinteressen{ grid-column: 2 / 4; grid-row: 4; }
.bemerkungen { grid-column: 1 / 4; grid-row: 5; }
.scout       { grid-column: 1;     grid-row: 6; }
.datum       { grid-column: 2;     grid-row: 6; }
.status      { grid-column: 3;     grid-row: 6; }

/* und nun noch die des PV-Detail-Dialogs */

.pvanmerk    { grid-column: 1 / 4; grid-row: 1; }
.pv-typ      { grid-column: 1;     grid-row: 2; }
.einspeise   { grid-column: 2;     grid-row: 2; }
.messkonzept { grid-column: 3;     grid-row: 2; }
.wr-leist    { grid-column: 1;     grid-row: 3; }
.wallb-txt   { grid-column: 2 / 4; grid-row: 3; }
.spei-kwh    { grid-column: 1;     grid-row: 4; }
.n-wallb-vor { grid-column: 2;     grid-row: 4; }
.n-wallb-ins { grid-column: 3;     grid-row: 4; }
.spei-kw     { grid-column: 1;     grid-row: 5; }
.stromverb   { grid-column: 2;     grid-row: 5; }
.sch-kos-add { grid-column: 3;     grid-row: 5; }
.solf-angefr { grid-column: 1 / 3; grid-row: 6; }
.solf-beauftr{ grid-column: 3;     grid-row: 6; }
/*.n-optim     { grid-column: 3;     grid-row: 3; }
.n-optim     { grid-column: 3;     grid-row: 3; }*/



/* und die gute Teildachfläche */

.tdfanmerk   { grid-column: 1 / 4; grid-row: 1; }
.dachneig    { grid-column: 1 ;    grid-row: 2; }
.azimuth     { grid-column: 2;     grid-row: 2; }
.verschatt   { grid-column: 3;     grid-row: 2; }
.p-modul     { grid-column: 1;     grid-row: 3; }
.n-modul     { grid-column: 2;     grid-row: 3; }
.n-optim     { grid-column: 3;     grid-row: 3; }


.name-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  grid-gap: 0.5em;
}

.gsj-grid-container-person .feld {
  display: flex;
  flex-direction: column;
}

.gsj-grid-container-person label {
  display: block;
  font-size: 0.9em;
  margin-bottom: 0.2em;
  color: #555;
}

.gsj-grid-container-person input[type="text"],
.gsj-grid-container-person input[type="email"],
.gsj-grid-container-person input[list],
.gsj-grid-container-person select,
.gsj-grid-container-person textarea {
  width: 100%;
  font-size: 1.1em !important;
  padding: 0.25em;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ccc;
}

.gsj-grid-container-person input[readonly],
.gsj-grid-container-person textarea[readonly],
.gsj-grid-container-person select:disabled {
  background-color: #e8e8e8 !important;
  color: #555;
  cursor: not-allowed;
}

#update-button {
  background-color: #d0e4f7; /* hellblau */
  color: #aaa;               /* hellgrau */
  border: none;
  padding: 0.2em 1.2em;
  font-size: 1.1em;
  border-radius: 5px;
  cursor: not-allowed;
  transition: all 0.3s ease;
}

#update-button:enabled, 
.gsj-abbrechen-button {
  background-color: #005a9c; /* dunkelblau */
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 0.2em 1.2em;
  font-size: 1.1em;
  border-radius: 5px;
}



/* Desktop und Tablet: 4 Spalten */
.gsj-grid-container-gebaeude {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.8em;
  max-width: 100%;
  padding: 1em;
  background: #f5f5f5;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.gsj-grid-container-gebaeude label {
  display: block;
  font-size: 0.9em;
  margin-bottom: 0.2em;
  color: #555;
}  

.gsj-grid-container-gebaeude .feld {
  display: flex;
  flex-direction: column;
}

.gsj-grid-container-gebaeude input[type="text"],
.gsj-grid-container-gebaeude input[list],
.gsj-grid-container-gebaeude textarea {  
  width: 100%;
  font-size: 1.1em !important;
  padding: 0.25em;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #ccc;
}

.gsj-grid-container-gebaeude input[readonly],
.gsj-grid-container-gebaeude textarea[readonly],
.gsj-grid-container-gebaeude select:disabled {
  background-color: #e8e8e8 !important;
  color: #555;
  cursor: not-allowed;
}

.gsj-grid-container-gebaeude .feld-1 {
  grid-column: span 1;
}

.gsj-grid-container-gebaeude .feld-2 {
  grid-column: span 2;
}

.gsj-grid-container-gebaeude .feld-3 {
  grid-column: span 3;
}

.gsj-grid-container-gebaeude .feld-4 {
  grid-column: span 4;
}

/* .gsj-grid-container-gebaeude button {
  padding: 10px 20px;
  font-size: 1.1em;
  background-color: #007cba;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 1rem;
}

.gsj-grid-container-gebaeude button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
} */

.gsj-grid-container-gebaeude a.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007cba;
    color: white;
    text-decoration: none;
    margin-top: 1rem;
}

.gsj-graph-tabellen-container {
    display: flex;
    flex-wrap: wrap;      /* erlaubt Umbruch */
    gap: 1rem;            /* Abstand zwischen Boxen */
}

.gsj-graph-tabelle-links {
/*flex: 1 1 300px;       /* wächst, schrumpft, Mindestbreite */
/*border: 1px solid #ccc;*/
    padding: 1em;
    width: 44%;            
    margin-right: auto; 
    overflow-x: auto;
    max-width: 100%;
    /*box-sizing: border-box;*/
}
.gsj-graph-tabelle-rechts {
/* flex: 1 1 300px;       /* wächst, schrumpft, Mindestbreite */
/*border: 1px solid #ccc;*/
    padding: 1em;
    width: 54%;            
    margin-left: auto; 
    overflow-x: auto;
    max-width: 100%;
    /*box-sizing: border-box;*/
}
.gsj-graph-tabelle-links table td,
.gsj-graph-tabelle-links table th,
.gsj-graph-tabelle-rechts table td,
.gsj-graph-tabelle-rechts table th {
    font-size: 13px;
    padding: 4px 6px; /* Optional: engeres Padding */
}

.gsj-graph-tabelle-rechts table td:first-child,
.gsj-graph-tabelle-rechts table th:first-child,
.gsj-graph-tabelle-links table td:first-child,
.gsj-graph-tabelle-links table th:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px; /* z. B. */            }



/*  Phone: 2 Spalten */
@media (max-width: 768px) {
.gsj-grid-container-gebaeude {
  grid-template-columns: repeat(2, 1fr);
}

.gsj-grid-container-gebaeude .feld-3,
.gsj-grid-container-gebaeude .feld-4 {
  grid-column: span 2;
}
}




/* gsj_journal_style.css */

.gsj-grid-container-journal {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.8em;
max-width: 100%;
padding: 0.8em;
background: #f5f5f5;
border: 1px solid #ccc;
box-sizing: border-box;
margin-top: 1em;
}

.gsj-grid-container-journal .feld {
display: flex;
flex-direction: column;
background: #fff;
padding: 0.4em;
border: 1px solid #ddd;
}

.gsj-grid-container-journal label {
display: block;
font-size: 0.9em;
margin-bottom: 0.2em;
color: #555;
}

.gsj-grid-container-journal input[type="text"],
.gsj-grid-container-journal input[list],
.gsj-grid-container-journal select,
.gsj-grid-container-journal textarea {
width: 100%;
font-size: 1.1em !important;
padding: 0.25em;
box-sizing: border-box;
background: #fff;
border: 1px solid #ccc;
}

.gsj-grid-container-journal .feld-2 {
grid-column: span 2;
}

.gsj-grid-container-journal button {
padding: 0.6em 1.2em;
font-size: 1.1em;
background-color: #007cba;
color: white;
border: none;
cursor: pointer;
margin-top: 1em;
border-radius: 5px;
}

.gsj-grid-container-journal button:disabled {
background-color: #aaa;
cursor: not-allowed;
}

.gsj-grid-container-journal a.button {
display: inline-block;
padding: 0.6em 1.2em;
background-color: #007cba;
color: white;
text-decoration: none;
margin-top: 1em;
border-radius: 5px;
}

/* Editor im Journal */
.gsj-grid-container-journal .wp-editor-wrap {
grid-column: span 2;
border: 1px solid #ccc;
background: #fff;
padding: 0.4em;
box-sizing: border-box;
}


/* ========================================
 WYSIWYG Editor-Buttons auf WP-Standard zurücksetzen
 ======================================== */

.wp-editor-container .mce-toolbar button,
.wp-editor-container .mce-toolbar .mce-btn button {
background-color: #f0f0f0 !important;
border: 1px solid #ccc !important;
color: #000 !important;
box-shadow: none !important;
font-size: 14px;
padding: 4px 6px;
}

.wp-editor-container .mce-toolbar .mce-btn:hover button {
background-color: #e0e0e0 !important;
color: #111 !important;
}

.mce-container,
.mce-panel {
background: #fff !important;
border-color: #ccc !important;
}

/* Tabs im Editor ausblenden */
.wp-editor-tabs {
display: none !important;
}

/* Schrift serifenlos */
.wp-editor-container textarea.wp-editor-area {
font-family: Arial, Helvetica, sans-serif !important;
}

/* Zeilenabstand im WYSIWYG verringern */
.mce-content-body p {
margin: 0.3em 0 !important;
}

/* und hier die Klasse für die klickabre e-mail im passiven Formular */

.gsj-email-display {
width: 100%;
display: inline-block;
padding: 0.25em;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
color: #0073aa;              /* WP-typisches Blau */
text-decoration: underline; /* klassisches Link-Styling */  
font-family: inherit;
font-size: 1.1em !important;
box-sizing: border-box;
background: #fff;
}

/* und hier die Klasse für die Darstellung der alten Inhalte im Journal */

.gsj-journal-content {
font-size: 14px;
line-height: 1.2;
font-family: Arial, sans-serif;
}

.gsj-journal-content p {
margin-bottom: 0.4em;
}

.gsj-journal-content li {
margin-bottom: 0.2em;
}



/* Dialoge auch auf Tablets und Phones lesbar machen */

@media (max-width: 1024px) {
.gsj-grid-container-person label,
.gsj-grid-container-gebaeude label,
.gsj-grid-container-journal label {
  font-size: 10px;
}  
.gsj-grid-container-person input[type="text"],
.gsj-grid-container-person input[type="email"],
.gsj-grid-container-person input[list],
.gsj-grid-container-person select,
.gsj-grid-container-person textarea, 
#update-button,
.gsj-email-display, 

.gsj-grid-container-gebaeude input[type="text"],
.gsj-grid-container-gebaeude input[list],
.gsj-grid-container-gebaeude textarea,
.gsj-grid-container-gebaeude button, 

.gsj-grid-container-journal input[type="text"],
.gsj-grid-container-journal input[list],
.gsj-grid-container-journal select,
.gsj-grid-container-journal textarea, 
.gsj-grid-container-journal button
{
  font-size: 14px;
}
}

/* Für Smartphones (max. 768px Breite) */
@media (max-width: 768px) {
.gsj-grid-container-person label,
.gsj-grid-container-gebaeude label,
.gsj-grid-container-journal label {
  font-size: 9px;
}  
.gsj-grid-container-person input[type="text"],
.gsj-grid-container-person input[type="email"],
.gsj-grid-container-person input[list],
.gsj-grid-container-person select,
.gsj-grid-container-person textarea, 
#update-button,
.gsj-email-display, 

.gsj-grid-container-gebaeude input[type="text"],
.gsj-grid-container-gebaeude input[list],
.gsj-grid-container-gebaeude textarea,
.gsj-grid-container-gebaeude button, 

.gsj-grid-container-journal input[type="text"],
.gsj-grid-container-journal input[list],
.gsj-grid-container-journal select,
.gsj-grid-container-journal textarea, 
.gsj-grid-container-journal button {
  font-size: 16px;
  transform: scale(0.8); /* kleiner dargestellt */
  transform-origin: left center;
}
}

@page {
  margin: 10mm;               /* oder 5mm / 0 */
}

@media print {
  .no-print,
  .gsjaut-card,
  header,
  footer,
  .actions {
    display: none !important;
  }

  table.top-level-aut thead {
    display: none !important;
  }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    background: white;
    color: black;
  }

  main {
    margin: 0;
    padding: 0;
  }

  .site,
  .site-main,
  .content,
  .content-area,
  .entry-content,
  .wp-block-group,
  .wp-block,
  .wrap,
  .container,
  .page,
  .page-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}