/* =========================
   BauLog+ – Global CSS
   ========================= */

/* ---- Design Tokens ---- */
:root{
  --bg:#f8fafc;
  --panel:#fff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;

  --accent:#0f172a;
  --accent-ink:#fff;

  --warn:#b91c1c;
  --ok:#16a34a;

  --radius:14px;

  /* UI Tonalität */
  --btn-on:#cbd5e1;       /* aktiv-Grau (App) */
  --done-grey:#9ca3af;    /* erledigt-Grau (App) */
}

/* ---- Reset / Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
img{max-width:100%;height:auto;display:block}

/* ---- Layout ---- */
.container{max-width:1180px;margin:0 auto;padding:24px}
.grid{display:grid;gap:10px}
.g12{grid-template-columns:repeat(12,1fr)}
.col-12{grid-column:span 12}.col-10{grid-column:span 10}.col-9{grid-column:span 9}.col-8{grid-column:span 8}.col-6{grid-column:span 6}.col-5{grid-column:span 5}.col-4{grid-column:span 4}.col-3{grid-column:span 3}.col-2{grid-column:span 2}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.right{margin-left:auto}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ---- Navigation ---- */
.tabs{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.brand{font-size:18px;font-weight:600;margin-right:8px}

/* ---- Cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.card-h{padding:12px 14px;border-bottom:1px solid var(--line);font-weight:600}
.card-c{padding:14px}

/* ---- Typography ---- */
.label{font-size:12px;color:var(--muted);margin-bottom:4px}
.muted{color:var(--muted)}
.small{font-size:12px}
.title{font-size:72px;font-weight:800;line-height:1}
.subtitle{font-size:16px;font-weight:700;margin-top:8px;background:#f1f5f9;border-radius:8px;padding:4px 8px}
.subsubtitle{font-size:13px;font-weight:700;margin-top:8px}
.inline-confirm{font-size:12px;color:var(--ok)}
.warn-text{color:var(--warn)}

/* ---- Inputs ---- */
.input,.select,.textarea{
  width:100%;
  height:36px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 10px;
  background:#fff;
}
.textarea{height:auto;min-height:80px;padding:8px 10px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%),linear-gradient(to right,#94a3b8,#94a3b8);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%,calc(100% - 2.3em) 50%;background-size:5px 5px,5px 5px,1px 60%;background-repeat:no-repeat}

/* ---- Buttons ---- */
.btn{
  height:36px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .15s ease,border-color .15s ease,opacity .15s ease;
}
.btn:hover{background:#f1f5f9}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.gray{background:#f8fafc;color:#334155;border-color:var(--line)}
.btn.on{background:var(--btn-on);border-color:#94a3b8;color:#0f172a}
.btn.danger{border-color:#fecaca;background:#fee2e2;color:#7f1d1d}
.btn[disabled],.btn:disabled{opacity:.6;cursor:not-allowed}

/* ---- Lists / Chips ---- */
.list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.item{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fff}
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:#334155;background:#f8fafc}
.chip{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:2px 8px;margin:2px;font-size:12px}

/* ---- Helpers ---- */
.hsep{height:1px;background:var(--line);margin:12px 0}
.hidden{display:none !important}
.dimmed{color:var(--done-grey)} /* Erledigt-Grau in der App */

/* ---- File input label center fix ---- */
label.btn input[type="file"]{display:none}

/* ---- Participants Table (grouped read view) ---- */
.print-table{width:100%;border-collapse:collapse;font-size:12px}
.print-table th,.print-table td{border-bottom:1px solid var(--line);padding:6px;text-align:left;vertical-align:top}

/* ---- Punkte (Protocol) ---- */
#pointsList .item .small b{font-weight:700}

/* ---- Termine: neue Zeile – Datum + Text + Button in einer Reihe ---- */
.term-inline{display:flex;gap:10px;align-items:end}
.term-inline .date-col{width:220px}
.term-inline .text-col{flex:1}
.term-inline .actions-col{width:auto;display:flex;justify-content:flex-end}

/* ---- Termine: Edit-Zeile – Buttons links unter dem Textfeld ---- */
.term-edit{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.term-edit .col-12-left{grid-column:1/-1;display:flex;justify-content:flex-start}
.term-edit .col-12-left .btn{margin-right:8px}

/* ---- Export View ---- */
#exportMsg,#settingsMsg{min-height:18px}

/* ---- Print Styles ---- */
@media print {
  .no-print{display:none !important}
  body{
    background:#fff;
    margin:0;
    padding-bottom:32mm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .container{max-width:none;padding:0}
  .thead-sticky{display:table-header-group}

  .print-table{width:100%;border-collapse:collapse;font-size:10px}
  .print-table th,.print-table td{border-bottom:1px solid #e2e8f0;padding:6px;text-align:left;vertical-align:top}
  .print-section-title{font-size:12px;font-weight:700;margin:10px 0 6px;border-bottom:1px solid #e2e8f0}
  .print-h1{font-size:16px;font-weight:700;margin:0}
  .print-meta{font-size:12px;margin:2px 0 6px}
  .print-point{font-size:10px}

  /* Fallback – wird nicht überall respektiert, Inline setzt sich durch */
  .done-grey, .done-grey *{color:#9ca3af !important}
}

/* ---- App Footer ---- */
.app-footer{ text-align:center;color:#94a3b8;margin-top:28px }
.app-footer .logo{ font-size:22px;font-weight:600;margin-bottom:12px }

/* ---- Misc ---- */
.table-actions{white-space:nowrap}
.entry-sub{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:10px}
[data-cat-toggle]{cursor:pointer;user-select:none}
[data-cat-toggle] [data-arrow]{display:inline-block;width:1em;text-align:center}



/* ---- Ko-fi Button ---- */
.kofi-btn {
  display:inline-block;
  width:245px;                /* ~25 % der Originalgröße */
  height:49px;
  background:url("/img/kofi-red.png") center/contain no-repeat;
  background-size:contain;
  border-radius:10px;
  transition:
    background-image .2s ease-in-out,
    transform .1s ease-in-out,
    box-shadow .2s ease-in-out;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.kofi-btn:hover {
  background-image:url("/img/kofi-dark.png");
  transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

.kofi-btn:active {
  transform:translateY(0);
  box-shadow:0 1px 4px rgba(0,0,0,0.15);
}



/* ---- Kontakt-Row ---- */
.contact-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin:10px 0 16px;
  justify-content:flex-start; /* statt space-between */
}
.contact-item {
  font-size:14px;
  color:var(--muted);
}
.contact-item a {
  margin-left:6px;
  font-weight:600;
}
@media (max-width:700px){
  .contact-row { flex-direction:column; align-items:flex-start; }
  .contact-item { margin-bottom:8px; }
}

#ex_orientation {
  width: auto;
  display: inline-block;
}