/* ============================================================================
   CGM ALBIS Klon – klassische Windows-Optik (Win2k/XP "Luna klassisch")
   ============================================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --face: #d4d0c8; --face2: #ece9d8; --win: #ffffff; --hi: #316ac5; --hi2: #3a6ea5;
  --txt: #000; --muted: #555; --brd: #808080; --brdl: #fff;
  --font: "Tahoma","Segoe UI",Verdana,sans-serif; --fs: 11px;
}
html, body { height: 100%; overflow: hidden; font: var(--fs)/1.3 var(--font); color: var(--txt); }
body { background: #d4d0c8; }
#app { height: 100%; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=password], input[type=date], input[type=number], textarea, select {
  background: #fff; border: 1px solid #7f9db9; padding: 2px 4px; }
input:focus, select:focus, textarea:focus { outline: 1px dotted #000; outline-offset: -1px; }
textarea { resize: none; }
button, .btn {
  background: var(--face); border: 1px solid; border-color: var(--brdl) var(--brd) var(--brd) var(--brdl);
  box-shadow: inset 1px 1px var(--brdl), inset -1px -1px var(--brd);
  padding: 3px 12px; min-width: 60px; cursor: default; user-select: none; white-space: nowrap;
}
button:active, .btn:active { border-color: var(--brd) var(--brdl) var(--brdl) var(--brd); box-shadow: inset -1px -1px var(--brdl), inset 1px 1px var(--brd); }
button:disabled { color: #808080; text-shadow: 1px 1px #fff; }
button.def { border: 2px solid #000; }
a { color: #00c; cursor: pointer; }
.hidden { display: none !important; }

/* ---------- Login ---------- */
#login {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#24568a, #3a6ea5);
}
.dlg { background: var(--face); border: 1px solid #000; box-shadow: 2px 2px 8px rgba(0,0,0,.5); }
.dlg .titel {
  background: linear-gradient(90deg, var(--hi2), #0058e6); color: #fff; font-weight: bold;
  padding: 3px 6px; display: flex; justify-content: space-between; align-items: center; }
.dlg .body { padding: 12px; }
.dlg .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dlg .row label { width: 110px; text-align: right; }
.dlg .row input, .dlg .row select { width: 200px; }
.dlg .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.login-logo { text-align: center; font-size: 22px; color: var(--hi); font-weight: bold; margin-bottom: 4px; }
.login-sub { text-align: center; color: var(--muted); margin-bottom: 12px; }
.fehlerbox { background: #ffe7e7; border: 1px solid #c00; color: #900; padding: 5px 8px; margin-bottom: 8px; }

/* ---------- Shell ---------- */
#shell { display: flex; flex-direction: column; height: 100%; }
.titelzeile {
  background: linear-gradient(90deg, var(--hi2), #0058e6); color: #fff; font-weight: bold;
  padding: 2px 6px; display: flex; align-items: center; gap: 8px; height: 22px; }
.titelzeile .appname { flex: 1; }
.titelzeile .tzbtns button { min-width: 22px; padding: 0 6px; }
.menuleiste { background: var(--face2); display: flex; padding: 1px 2px; border-bottom: 1px solid var(--brd); position: relative; z-index: 500; }
.menuleiste .mi { padding: 3px 8px; cursor: default; user-select: none; }
.menuleiste .mi:hover, .menuleiste .mi.offen { background: var(--hi); color: #fff; }
.menuleiste .mi.gesperrt { color: #a0a0a0; }
.menu {
  position: absolute; background: var(--face2); border: 1px solid var(--brd);
  box-shadow: 2px 2px 4px rgba(0,0,0,.4); min-width: 220px; z-index: 600; }
.menu .me { padding: 3px 18px 3px 24px; display: flex; gap: 10px; cursor: default; position: relative; }
.menu .me:hover { background: var(--hi); color: #fff; }
.menu .me.gesperrt { color: #a0a0a0; }
.menu .me.gesperrt:hover { background: none; color: #a0a0a0; }
.menu .me .kl { margin-left: auto; color: var(--muted); }
.menu .me:hover .kl { color: #fff; }
.menu .me .hacken { position: absolute; left: 6px; }
.menu .trenn { height: 1px; background: var(--brd); margin: 2px 0; }
.menu .sub { position: absolute; left: 100%; top: -1px; }
.funktionsleiste { background: var(--face); display: flex; gap: 1px; padding: 2px; border-bottom: 1px solid var(--brd); align-items: center; flex-wrap: wrap; }
.funktionsleiste .fl {
  display: flex; flex-direction: column; align-items: center; width: 52px; padding: 3px 1px;
  border: 1px solid transparent; cursor: default; user-select: none; font-size: 10px; text-align: center; }
.funktionsleiste .fl:hover { border-color: var(--brdl) var(--brd) var(--brd) var(--brdl); }
.funktionsleiste .fl.gesperrt { color: #a0a0a0; }
.funktionsleiste .fl .ico { font-size: 15px; line-height: 1; }
.funktionsleiste .trenn { width: 1px; align-self: stretch; background: var(--brd); margin: 0 3px; }
.funktionsleiste .fl .fkey { font-size: 9px; color: var(--muted); }

/* Hauptbereich: vertikale Seitenleiste + Arbeitsfläche (graue MDI-Fläche) */
.hauptbereich { flex: 1; display: flex; min-height: 0; }
#seitenleiste { width: 34px; background: var(--face2); border-right: 1px solid var(--brd);
  display: flex; flex-direction: column; align-items: center; padding-top: 3px; gap: 1px; overflow-y: auto; }
#seitenleiste .slb { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; cursor: pointer; border: 1px solid transparent; border-radius: 2px; }
#seitenleiste .slb:hover { background: #fff; border-color: var(--brd); }
#seitenleiste .sltrenn { width: 22px; border-top: 1px solid var(--brd); margin: 4px 0; }

#arbeitsflaeche {
  flex: 1; position: relative; overflow: auto;
  background: #d4d0c8; }
#arbeitsflaeche .startbild { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(0,0,0,.28); font-size: 13px; pointer-events: none; text-align:center; }

/* ---------- Statuszeile ---------- */
.statuszeile { background: var(--face2); border-top: 1px solid var(--brd); display: flex; font-size: 11px; }
.statuszeile .sf { border-right: 1px solid var(--brd); padding: 2px 8px; white-space: nowrap; }
.statuszeile .sf.grow { flex: 1; }
.statuszeile .ampel { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:-1px; }
.ampel.ok { background: #0a0; } .ampel.warn { background: #f90; } .ampel.err { background: #d00; }

/* ---------- MDI-Fenster ---------- */
.mdi {
  position: absolute; background: var(--face); border: 1px solid #000;
  box-shadow: 3px 3px 10px rgba(0,0,0,.45); display: flex; flex-direction: column; min-width: 280px; min-height: 120px; }
.mdi .mtitel {
  background: linear-gradient(90deg, var(--hi2), #0058e6); color: #fff; font-weight: bold;
  padding: 2px 4px 2px 6px; display: flex; align-items: center; cursor: default; user-select: none; }
.mdi.inaktiv .mtitel { background: linear-gradient(90deg, #7a7a7a, #9f9f9f); }
.mdi .mtitel .mt-txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdi .mtitel button { min-width: 18px; padding: 0 4px; margin-left: 2px; }
.mdi .mbody { flex: 1; overflow: auto; background: var(--face); padding: 6px; position: relative; }
.mdi .mresize { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; }

/* ---------- Registerkarten ---------- */
.tabs { display: flex; border-bottom: 1px solid var(--brd); margin: -6px -6px 6px -6px; background: var(--face); flex-wrap: wrap; }
.tabs .tab { padding: 3px 12px; border: 1px solid var(--brd); border-bottom: none; margin: 2px 2px -1px; background: var(--face2); cursor: default; position: relative; top: 0; }
.tabs .tab.aktiv { background: var(--face); font-weight: bold; z-index: 1; }

/* ---------- Tabellen ---------- */
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th {
  background: var(--face2); border: 1px solid var(--brd); padding: 2px 6px;
  text-align: left; font-weight: normal; position: sticky; top: 0; }
table.grid td { border: 1px solid #d6d3ce; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
table.grid tr.sel td { background: var(--hi); color: #fff; }
table.grid tr:hover td { background: #e8f0fa; }
table.grid tr.sel:hover td { background: var(--hi); }
table.grid tr.gruppenkopf td { background: var(--face2); font-weight: bold; }
table.grid td.rot { color: #c00; font-weight: bold; }
table.grid td.gruen { color: #060; }
table.grid td.rechts { text-align: right; }
table.grid td.zentriert { text-align: center; }
table.grid td.durchgestrichen { text-decoration: line-through; color: #888; }

/* ---------- Karteikarte ---------- */
.kk-tabelle td.kuerzel { font-weight: bold; color: #336; }
.kk-tabelle td.rot { color: #c00; }
.kk-filter { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.kk-filter select { min-width: 110px; }
.patkopf {
  background: var(--face2); border: 1px solid var(--brd); padding: 4px 8px; margin: -6px -6px 6px -6px;
  display: flex; gap: 18px; align-items: baseline; font-size: 12px; flex-wrap: wrap; }
.patkopf .name { font-weight: bold; font-size: 13px; }
.patkopf .kvnr { color: #336; }
.patkopf .cave { background: #ffe08a; border: 1px solid #a80; padding: 0 6px; font-weight: bold; }
.patkopf .verstorben { background: #000; color: #fff; padding: 0 6px; }
.patkopf .epa-sperr { background: #c00; color: #fff; padding: 0 6px; }

/* ---------- Formularraster ---------- */
.formgrid { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 5px 8px; align-items: center; margin-bottom: 8px; }
.formgrid label { text-align: right; color: #222; }
.formgrid .voll { grid-column: 1 / -1; }
.formgrid input, .formgrid select { width: 100%; }
fieldset { border: 1px solid var(--brd); padding: 6px; margin-bottom: 8px; }
legend { padding: 0 4px; color: #336; }
.bereich { background: var(--face2); border: 1px solid var(--brd); padding: 6px; margin-bottom: 6px; }

/* ---------- Kalender ---------- */
.kal { display: flex; gap: 4px; height: 100%; }
.kal-spalte { flex: 1; min-width: 160px; background: #fff; border: 1px solid var(--brd); display: flex; flex-direction: column; }
.kal-spalte .kopf { background: var(--face2); border-bottom: 1px solid var(--brd); padding: 2px 4px; font-weight: bold; text-align: center; }
.kal-raster { flex: 1; position: relative; overflow-y: auto; }
.kal-termin { position: absolute; left: 1px; right: 1px; border: 1px solid #336; background: #cfe0f5; font-size: 10px; padding: 1px 3px; overflow: hidden; cursor: default; }
.kal-termin.notfall { border-color: #c00; background: #f5d0d0; }
.kal-zeit { position: absolute; left: 0; right: 0; border-top: 1px solid #eee; font-size: 9px; color: #999; padding-left: 2px; }
.kal-zeit.stunde { border-top-color: #ccc; color: #666; }

/* ---------- Wartezimmer ---------- */
.wz-notfall { background: #f5c8c8 !important; }

/* ---------- Dialoge über MDI ---------- */
.modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; z-index: 900; }
.modal { min-width: 320px; max-width: 95vw; max-height: 92vh; display: flex; flex-direction: column; }
.modal .mbody { flex: 1; overflow: auto; }
.msgbox-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ---------- Sonstiges ---------- */
.sim-badge { background: #7030a0; color: #fff; font-size: 9px; padding: 0 4px; margin-left: 4px; border-radius: 2px; vertical-align: 1px; }
.hinweis { background: #fff8dc; border: 1px solid #d0c080; padding: 5px 8px; margin-bottom: 8px; }
.fehlerbox { background: #ffe7e7; border: 1px solid #c00; color: #900; padding: 5px 8px; margin-bottom: 8px; }
.aktionsleiste { display: flex; gap: 4px; margin: 6px 0; flex-wrap: wrap; }
.aktionsleiste button { min-width: 0; padding: 2px 10px; }
.suchzeile { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.kleinschrift { font-size: 10px; color: var(--muted); }
.badge { display: inline-block; background: var(--face2); border: 1px solid var(--brd); padding: 0 5px; font-size: 10px; }
.badge.fe { background: #f8d0d0; border-color: #c00; color: #900; }
.badge.ok { background: #d8f0d8; border-color: #080; color: #060; }
.badge.wa { background: #fdf0c0; border-color: #a80; color: #750; }
.listbox { background: #fff; border: 1px solid var(--brd); overflow: auto; }
.listbox .lz { padding: 1px 6px; }
.listbox .lz:hover { background: #e8f0fa; }
.listbox .lz.sel { background: var(--hi); color: #fff; }
.baum { padding: 4px; }
.baum .bz { padding: 1px 4px; cursor: default; }
.baum .bz:hover { background: #e8f0fa; }
.baum .bz.sel { background: var(--hi); color: #fff; }
.baum .kinder { margin-left: 16px; }
.progressbar { height: 14px; border: 1px solid var(--brd); background: #fff; position: relative; }
.progressbar .pb-fill { position: absolute; inset: 0; background: var(--hi); }
.progressbar .pb-txt { position: relative; text-align: center; font-size: 10px; color: #000; }
.toolbar-rechts { margin-left: auto; }
.monatskal { background: #fff; border: 1px solid var(--brd); padding: 4px; }
.monatskal table { border-collapse: collapse; }
.monatskal td { width: 20px; text-align: center; padding: 1px; }
.monatskal td.heute { background: var(--hi); color: #fff; }
.monatskal td.freier-tag { color: #bbb; }
.zeilenende { clear: both; }
.druckvorschau { background: #fff; border: 1px solid var(--brd); padding: 16px 24px; font-family: 'Courier New', monospace; white-space: pre; font-size: 11px; }
.split { display: flex; gap: 6px; }
.split > * { min-width: 0; }
.rechts-buendig { margin-left: auto; }

/* To-Do-Liste / Stoppuhr / Akutdiagnosen */
.todobaum { padding: 6px; overflow: auto; }
.todo-pat { font-weight: bold; margin-top: 8px; cursor: pointer; color: #003399; }
.todo-liste { margin: 2px 0 2px 16px; }
.todo-kopf { cursor: pointer; font-weight: bold; }
.todo-kopf button { margin-left: 8px; }
.todo-liste ul { margin: 2px 0 6px 18px; padding: 0; list-style: none; }
.todo-liste li { cursor: pointer; padding: 1px 2px; }
.todo-liste li:hover { background: #d4e4f7; }
.todo-liste li.erledigt { color: #666; text-decoration: line-through; }
.stoppuhr { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; }
.stoppuhr-anzeige { font-family: 'Courier New', monospace; font-size: 42px; font-weight: bold; background: #000; color: #0f0; padding: 4px 18px; border: 2px inset #808080; }
.akut-dialog { display: flex; gap: 10px; height: 100%; }
.akut-dialog > div { flex: 1; overflow: auto; border: 1px solid #808080; padding: 6px; }
.liste .auswahl { display: block; padding: 2px; }
.dateianzeige { display: flex; gap: 6px; height: calc(100% - 30px); }
.dateianzeige select { min-width: 200px; }
.dateiview { flex: 1; overflow: auto; background: #fff; border: 1px inset #808080; margin: 0; padding: 6px; font-family: 'Courier New', monospace; font-size: 12px; white-space: pre; }
.scheininfo { background: #ffffe1; }