/* =========================================================
   diary.css – FINAL
   Browser-fest für Chrome & Edge
   ========================================================= */

/* =========================================================
   WICHTIGSTER FIX (Edge / Chrome Unterschied)
   ========================================================= */
.study-table,
.study-table *{
  box-sizing: border-box;
}
/* =========================================================
   Kopfgrid
   ========================================================= */
.top-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap:10px;
  font-size:12px;
  margin-bottom:24px; /* ✅ zentral: passt optisch wie im Tagebuch */
}

.top-cell,
.top-sub{
  border:1px solid var(--grid);
  padding:6px 8px;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:34px;
}

.top-cell label{ white-space:nowrap; }

.top-sub{
  grid-column:1 / span 2;
  font-size:12px;
}

/* =========================================================
   Inputs – einheitliche Input-Felder
   ========================================================= */

/* Basis-Input (alle Textfelder) */
.cell-input{
  width:100%;
  height:28px;              /* ✅ EINHEITLICHE Höhe */
  padding:3px 8px;          /* ✅ ruhige Innenabstände */
  border:1px solid #bdbdbd;
  border-radius:6px;
  background:#f5f5f5;

  font: inherit;            /* ✅ gleiche Schrift überall */
  font-size: inherit;       /* ✅ WICHTIG: nicht 14px erzwingen! */
  line-height:1.2;
  color:#111;

  box-sizing:border-box;    /* ✅ ganz wichtig */
}

/* Extra stark, falls andere CSS später überschreibt */
input.cell-input{
  height:28px;
  padding:3px 8px;
  line-height:1.2;
  box-sizing:border-box;
}

/* 🔒 Readonly darf NICHT anders aussehen */
.cell-input[readonly]{
  height:28px;              /* erzwingt gleiche Höhe */
  padding:3px 8px;
  line-height:1.2;
  box-sizing:border-box;

  opacity:1;                /* Safari/Chrome Fix */
  -webkit-text-fill-color:#111;
}

/* Fokus (dezent, kein Aufblähen) */
.cell-input:focus{
  outline:none;
  border-color:#9e9e9e;
  background:#fff;
}

.center{ text-align:center; }

/* =========================================================
   Box (grauer Block / Rahmenbox)
   ========================================================= */
.box{
  border:1px solid var(--grid);   /* ✅ statt 2px/3px */
  margin:18px 0 24px;             /* ✅ unten wie Tagebuch */
  background:#fff;
}

.box-title{
  text-align:center;
  font-weight:700;
  padding:8px;
  border-bottom:1px solid var(--grid); /* 1px */
  font-size:15px;
  background:var(--bar);
}

.box-text{
  text-align:center;
  padding:8px 12px;
  font-size:13px;
  line-height:1.4;    /* ✅ ruhiger wie Tagebuch */
}

/* =========================================================
   Titel über Tabelle (z.B. Tagebuch-Tabellenüberschrift)
   ========================================================= */
.study-title{
  text-align:center;
  font-weight:700;
  padding:10px;
  border:1px solid var(--grid);
  background:var(--bar);
  margin:28px 0 0;
}

/* =========================================================
   Tabellen – study-table (Tagebuch)
   ========================================================= */
table.study-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; /* zwingt colgroup */
  font-size:13px;
}

table.study-table th,
table.study-table td{
  border:1px solid var(--grid);
  padding:8px;
  vertical-align:middle;
}

table.study-table th{
  font-weight:700;
  text-align:center;
}

/* =========================================================
   Spalten-FIXES (Tagebuch)
   ========================================================= */

/* ✓ Spalte */
.col-check{
  width:36px;
  min-width:36px;
  max-width:36px;
}

.col-check-cell{
  width:36px;
  min-width:36px;
  max-width:36px;
  text-align:center;
}

/* Tag-Spalte – überall identisch */
.tag-input{
  width:100%;
  text-align:center;
  font-weight:700;
  padding:6px 4px; /* verhindert optisches Aufblasen */
}

/* =========================================================
   Graue Zeile (Tag 15)
   ========================================================= */
.row-bar{
  background:var(--bar);
}

/* =========================================================
   Injection (Bauch / Oberschenkel)
   ========================================================= */
.inj-wrap{ display:block; }

.inj-head{
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:8px;
  margin-bottom:8px;
}

.inj-title{ font-weight:700; }

.inj-sides{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.chk{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.inj-divider{
  border-top:1px solid #000;
  margin:6px 0;
}

input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:var(--green);
}

/* =========================================================
   Bemerkungen
   ========================================================= */
.remark{
  min-height:44px;
  resize:vertical;
  font-family:inherit;
  font-size:12px;
}

/* =========================================================
   ✓ Button links
   ========================================================= */
.check-btn{
  width:22px;
  height:22px;
  border-radius:6px;
  border:1px solid #d9d9d9;
  background:#fff;
  font-weight:700;
  color:#2e7d32;
  cursor:pointer;
}

.check-btn.is-hidden{
  visibility:hidden;
}

/* =========================================================
   Navigation
   ========================================================= */
.nav-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:28px;
}

/* =========================================================
   Druck – kurve.php (Kopf + Kurve, kein Footer)
   ========================================================= */
@media print{

  @page{
    size:A4 portrait;
    margin:10mm;
  }

  /* UI-Elemente ausblenden */
  header,
  nav,
  footer,
  .footer,
  .site-footer,
  .nav-row,
  .chart-controls,
  .curve-buttons,
  .btn,
  .admin-bottom,
  .no-print{
    display:none !important;
  }

  /* WICHTIG: Alles nach der Kurve ausblenden */
  .chart-wrap ~ *{
    display:none !important;
  }

  body{ margin:0 !important; }

  main.page{ padding:0 !important; }

  .app-container,
  .app-pad{ padding:0 !important; }

  .box{ margin:6px 0 8px !important; }

  .top-grid{
    margin-bottom:10px !important;
    gap:6px !important;
  }

  /* Chart optimieren */
  .chart-wrap{
    margin-top:8px !important;
    padding:10px !important;
    box-shadow:none !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
  }

  #glucoseChartAll{ height:360px !important; }

  canvas{ max-height:360px !important; }

  .chart-title{ font-size:16px !important; }

  .chart-sub,
  .chart-hint,
  .chart-target{ font-size:11px !important; }
}

/* =========================================================
   Kurve (kurve.php)
   ========================================================= */
.chart-wrap{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:16px;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
  margin-top:16px;
}

.chart-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 6px 0;
}

.chart-sub{
  color:#666;
  font-size:14px;
  margin:0 0 12px 0;
}

.chart-delta{
  margin:8px 0 8px 0;
  font-size:14px;
  font-weight:700;
  color:#111;
}

.chart-hint{
  color:#666;
  font-size:14px;
  margin-top:10px;
}

.chart-target{
  margin-top:8px;
  font-size:13px;
  color:#2e7d32;
}

/* ✅ BOMBEFEST: Chart-Höhe darf nicht von anderen CSS “platt gemacht” werden */
#glucoseChartAll{
  width:100% !important;
  height:520px !important;
}

/* ✅ Canvas-Stabilität (verhindert Inline-Gaps + falsches Scaling) */
canvas{
  display:block;
  width:100% !important;
}

.chart-controls{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin:10px 0 2px;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;
}

.ctrl{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
}

.ctrl label{
  font-size:12px;
  color:#555;
  font-weight:700;
}

.ctrl select{
  height:38px;
  border:1px solid #b9b9b9;
  border-radius:10px;
  padding:6px 10px;
  background:#fff;
  font-size:14px;
}

.ctrl-note{
  font-size:13px;
  color:#666;
  margin-left:auto;
  line-height:1.3;
}

.curve-buttons{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;
}

.curve-buttons .label{
  font-size:12px;
  color:#555;
  font-weight:700;
  margin-right:6px;
}

.curve-buttons button{
  border:1px solid transparent;
  border-radius:10px;
  padding:8px 14px;
  font-size:14px;
  cursor:pointer;
}

.curve-buttons button[data-mode="both"]{
  background:#e0e0e0;
  color:#111;
}

.curve-buttons button[data-mode="both"].active{
  background:#111;
  color:#fff;
}

.curve-buttons button[data-mode="glucose"]{
  background:rgba(183,28,28,0.30);
  color:#111;
  border-color:var(--btn-red);
}

.curve-buttons button[data-mode="glucose"].active{
  background:var(--btn-red);
  color:#fff;
}

.curve-buttons button[data-mode="weight"]{
  background:rgba(13,71,161,0.30);
  color:#111;
  border-color:var(--btn-blue);
}

.curve-buttons button[data-mode="weight"].active{
  background:var(--btn-blue);
  color:#fff;
}

.form-error{
  margin:14px 0 10px;
  padding:12px 14px;
  border:1px solid #f3b5b5;
  border-left:6px solid #d32f2f;
  border-radius:12px;
  background:#fff5f5;
  font-size:14px;
  color:#7a1c1c;
}

/* =========================================================
   GLOBAL TABLE REGEL – SAUBER (ohne Holzhammer)
   Gilt für ALLE Tabellen, außer study-table (die ist oben definiert)
   ========================================================= */
table:not(.study-table){
  width:100%;
  border-collapse:collapse;
  background:#fff;
  font-size:13px;
}

table:not(.study-table) th,
table:not(.study-table) td{
  border:1px solid var(--grid);
  padding:8px;
  vertical-align:top;
}

table:not(.study-table) th{
  background:var(--bar);
  font-weight:700;
  text-align:center;
}

/* =========================================================
   FIX: Doppellinie zwischen .box-title und erster Tabelle in der Box
   ========================================================= */

/* Untere Linie am Titel weg */
.box > .box-title{
  border-bottom:0;
}

/* Obere Linie der ersten Tabellen-Zeile weg (egal ob thead oder tbody) */
.box > .box-title ~ * table thead tr:first-child > th,
.box > .box-title ~ * table thead tr:first-child > td,
.box > .box-title ~ * table tbody tr:first-child > td,
.box > .box-title ~ * table tbody tr:first-child > th{
  border-top:0;
}

/* =========================================================
   GLOBAL FIX: KEINE DOPPEL-AUSSENRÄNDER IN .box
   ========================================================= */

/* Tabelle soll in einer Box keinen eigenen Außenrahmen malen */
.box table{
  border:0 !important;
  border-collapse:collapse;
}

/* Außenkanten weg -> Box ist der Außenrahmen */
.box table tr > *:first-child{ border-left:0 !important; }
.box table tr > *:last-child{  border-right:0 !important; }

.box table thead tr:first-child > *{ border-top:0 !important; }
.box table tbody tr:last-child  > *{ border-bottom:0 !important; }

/* Doppellinie zwischen Box-Titel und Tabelle vermeiden */
.box > .box-title{ border-bottom:0 !important; }

h2{ font-size:14px; margin:16px 0 8px; }
.lead{ font-size:13px; margin:0 0 8px; }

/* =========================================================
   Listen (index)
   ========================================================= */
.bullet{
  list-style:none;
  padding-left:0;
  margin:0 0 8px 0;
  font-size:13px;
}
.bullet li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
}
.bullet li::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:10px;
  height:10px;
  background:var(--green);
  border-radius:50%;
}

.sub{
  margin-top:4px;
  padding-left:18px;
  list-style:none;
}
.sub li{ margin:4px 0 0; }
.sub li::before{ display:none; }

.sub .arrow{
  display:inline-block;
  width:16px;
  margin-left:-30px;
  margin-right:4px;
  position:relative;
  top:-2px;
  color:#333;
}

/* =========================================================
   Info-Block (Tagebuch) – Bullet/Sub/Lead/H2
   (früher in index.css, wird jetzt zentral in diary.css genutzt)
   ========================================================= */

h2{
  font-size:14px;
  margin:16px 0 8px;
}

.lead{
  font-size:13px;
  margin:0 0 8px;
}

/* Grüne Punkte */
.bullet{
  list-style:none;
  padding-left:0;
  margin:0 0 8px 0;
  font-size:13px;
}

.bullet li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
}

.bullet li::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:10px;
  height:10px;
  background:var(--green);
  border-radius:50%;
}

.sub{
  margin-top:4px;
  padding-left:18px;
  list-style:none;
}

.sub li{
  margin:4px 0 0;
}

.sub li::before{
  display:none;
}

.sub .arrow{
  display:inline-block;
  width:16px;
  margin-left:-30px;
  margin-right:4px;
  position:relative;
  top:-2px;
  color:#333;
}

/* =========================================================
   INFOBLOCK (Textabschnitt in tagebuch.php)
   Früher in index.css – jetzt zentral in diary.css
   ========================================================= */

.diary-info h2{
  font-size:14px;
  margin:16px 0 8px;
}

.diary-info .lead{
  font-size:13px;
  margin:0 0 8px;
}

/* Grüne Punkte */
.diary-info .bullet{
  list-style:none;
  padding-left:0;
  margin:0 0 8px 0;
  font-size:13px;
}

.diary-info .bullet li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
}

.diary-info .bullet li::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  width:10px;
  height:10px;
  background:var(--green);
  border-radius:50%;
}

/* Unterliste + Pfeil */
.diary-info .sub{
  margin-top:4px;
  padding-left:18px;
  list-style:none;
}

.diary-info .sub li{
  margin:4px 0 0;
}

.diary-info .sub li::before{
  display:none;
}

.diary-info .sub .arrow{
  display:inline-block;
  width:16px;
  margin-left:-30px;
  margin-right:4px;
  position:relative;
  top:-2px;
  color:#333;
}