/* =========================
   WinMed UI Input Suite (CLEAN)
   ========================= */

/* ---------- Tokens ---------- */
:root{
  --wm-radius: 12px;
  --wm-radius-sm: 10px;

  --wm-border: rgba(0,0,0,.18);
  --wm-bg: rgba(255,255,255,.85);
  --wm-bg-2: rgba(255,255,255,.72);

  --wm-shadow: 0 6px 14px rgba(0,0,0,.10);
  --wm-shadow-focus: 0 0 0 3px rgba(56,189,248,.22), 0 10px 25px rgba(0,0,0,.12);

  --wm-accent: #38bdf8;
  --wm-text: #0f172a;
  --wm-muted: rgba(15,23,42,.55);

  --wm-danger: #dc3545;
  --wm-success: #198754;
}

/* ---------- Base / resets ---------- */
html, body{
  height:100%;
}

body{
  margin:0;
  background:#CEECF5 !important;
  color:#111;
}

*, *::before, *::after{
  box-sizing:border-box;
}

/* =========================
   Page layout
   ========================= */

.screenArea{
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:0;
  margin:0;
  width:100%;
  max-width:100%;
  min-height:100vh;
}

/* Sidebar als echte Spalte, unabhängig von alten float/position-Regeln */
.searchArea.sidebar2{
  flex:0 0 360px;
  width:360px;
  max-width:420px;
  min-width:320px;

  position:relative !important;
  float:none !important;
  clear:none !important;

  margin:0 !important;
  padding:10px !important;

  background:rgba(255,255,255,0.25);
  border-radius:14px;
  box-shadow:0 1px 5px rgba(0,0,0,0.08);
  overflow:hidden;
}

.patientArea{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  max-width:calc(100% - 400px);
  display:flex;
}

/* =========================
   Search area content
   ========================= */

.searchArea.sidebar2 .searchCard,
.searchArea.sidebar2 .searchRow:first-child{
  width:100%;
  margin:0;
  padding:0;
  max-width:none;
  margin-top:0 !important;
}

.searchArea .searchCard{
  width:100%;
  max-width:320px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.searchArea.sidebar2 *{
  margin-left:0;
  margin-right:0;
}

.searchArea.sidebar2 table{
  width:100% !important;
  margin:0 !important;
}

.searchArea .searchRow{
  width:100%;
  display:block;
  justify-content:center;
}

.searchArea .searchHelp{
  justify-content:flex-start;
  line-height:1.35;
}

.searchArea input[type="text"],
.searchArea input[type="search"],
.searchArea select,
.searchArea textarea{
  width:100% !important;
}

.searchArea .button,
.searchArea button,
.searchArea input[type="button"],
.searchArea input[type="submit"]{
  width:100% !important;
}

/* =========================
   Patient area base
   ========================= */

#patientDisplay{
  width:100%;
  max-width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  height:100%;
  overflow:visible;
  box-sizing:border-box;
}

.patientArea,
#patientDisplay,
#patientDisplay .pd-head,
#patientDisplay .content-area,
#patientDisplay #dispArea,
#patientDisplay #workingarea{
  min-width:0;
}

#patientDisplay a{
  color:#0b4db7 !important;
}

/* =========================
   Base Inputs
   ========================= */

.input-modern,
textarea.input-modern,
select.select-modern{
  color:var(--wm-text);
  background:var(--wm-bg);
  border:1px solid var(--wm-border);
  border-radius:var(--wm-radius-sm);
  box-shadow:var(--wm-shadow);
  font-size:13px;
  line-height:1.2;
  padding:6px 10px;
  transition:.15s ease;
}

.input-modern{
  height:34px;
}

textarea.input-modern{
  min-height:50px;
  resize:vertical;
  line-height:1.35;
}

.input-modern:hover,
textarea.input-modern:hover,
select.select-modern:hover{
  border-color:rgba(56,189,248,.70);
}

.input-modern:focus,
textarea.input-modern:focus,
select.select-modern:focus{
  outline:none;
  background:#fff;
  border-color:var(--wm-accent);
  box-shadow:var(--wm-shadow-focus);
}

.input-modern.compact,
select.select-modern.compact{
  height:28px;
  padding:3px 6px;
  font-size:12px;
  border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

input[type=number].input-modern::-webkit-inner-spin-button{
  opacity:.6;
}

input[type=date].input-modern,
input[type=datetime-local].input-modern{
  padding-right:8px;
}

.color-modern{
  width:38px;
  height:26px;
  padding:2px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.15) inset;
}

.color-modern::-webkit-color-swatch-wrapper{
  padding:0;
}

.color-modern::-webkit-color-swatch{
  border:none;
  border-radius:6px;
}

.color-modern::-moz-color-swatch{
  border:none;
  border-radius:6px;
}

.label-modern{
  font-weight:800;
  font-size:12px;
  color:rgba(15,23,42,.72);
  margin:0 0 6px 2px;
}

/*==========================
	Cells
===========================*/
.custom-cell-void {
	background-color: transparent !important;
	color: inherit !important;
}

.custom-cell-valid {
	background-color: #d4edda !important;
	color: #155724 !important;
}

.custom-cell-red {
	background-color: #ffdddd !important;
	color: #8b0000 !important;
}

.custom-cell-white {
	background-color: #ffffff !important;
	color: #000000 !important;
}

.custom-cell-cyan {
	background-color: #e0ffff !important;
	color: #006d75 !important;
}

.custom-cell-silver {
	background-color: #c0c0c0 !important;
	color: #000000 !important;
}

.custom-cell-blue {
	background-color: #cfe2ff !important;
	color: #003366 !important;
}

.custom-cell-gray {
	background-color: #d9d9d9 !important;
	color: #222222 !important;
}

.custom-cell-lightgray {
	background-color: #eeeeee !important;
	color: #222222 !important;
}

.custom-cell-darkblue {
	background-color: #003366 !important;
	color: #ffffff !important;
}

.custom-cell-black {
	background-color: #000000 !important;
	color: #ffffff !important;
}

.custom-cell-lightblue {
	background-color: #d9edf7 !important;
	color: #31708f !important;
}

.custom-cell-orange {
	background-color: #ffe5cc !important;
	color: #a64b00 !important;
}

.custom-cell-purple {
	background-color: #e6ccff !important;
	color: #5a189a !important;
}

.custom-cell-brown {
	background-color: #d2b48c !important;
	color: #4e342e !important;
}

.custom-cell-yellow {
	background-color: #fff3cd !important;
	color: #856404 !important;
}

.custom-cell-maroon {
	background-color: #800000 !important;
	color: #ffffff !important;
}

.custom-cell-lime {
	background-color: #ccffcc !important;
	color: #336600 !important;
}

.custom-cell-green {
	background-color: #d4edda !important;
	color: #155724 !important;
}

.custom-cell-magenta {
	background-color: #ffccff !important;
	color: #8a005c !important;
}

.custom-cell-olive {
	background-color: #808000 !important;
	color: #ffffff !important;
}

.custom-cell-pink {
	background-color: #ffd6e7 !important;
	color: #a61e4d !important;
}

.custom-cell-aquamarine {
	background-color: #7fffd4 !important;
	color: #004d40 !important;
}

[class^="custom-cell-"],
[class*=" custom-cell-"] {
	padding: 4px 6px;
	border-radius: 4px;
}	

/* =========================
   Buttons
   ========================= */

.btn{
  height:34px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  transition:.15s ease;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.btn:hover{
  filter:brightness(1.02);
}

.btn:active{
  transform:translateY(1px);
}

.btn-primary,
input.btn-primary,
button.btn-primary{
  border-color:rgba(13,110,253,.35);
  background:linear-gradient(180deg, rgba(13,110,253,.95), rgba(10,88,202,.95));
  color:#fff;
}

.btn-danger{
  border-color:rgba(220,53,69,.35);
  background:linear-gradient(180deg, rgba(220,53,69,.95), rgba(176,42,55,.95));
  color:#fff;
}

.btn-light{
  background:rgba(255,255,255,.80);
  color:var(--wm-text);
}

/* =========================
   Icon buttons
   ========================= */

.btn-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.12);
  background-color:rgba(255,255,255,.75);
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  cursor:pointer;
  position:relative;
}

.btn-icon input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.btn-icon.save{ background-image:url("./svg/sichern.svg"); }
.btn-icon.delete{
  background-image:url("./svg/db_delete.svg");
  background-color:rgba(220,53,69,0.15);
}
.btn-icon.delete:hover{ background-color:rgba(220,53,69,0.25); }
.btn-icon.load{ background-image:url("./svg/load.svg"); }
.btn-icon.doku{ background-image:url("./svg/doku.svg"); }
.btn-icon.edit{ background-image:url("./svg/edit.svg"); }
.btn-icon.use{ background-image:url("./svg/use.svg"); }
.btn-icon.beipack{ background-image:url("./svg/beipack.svg"); }
.btn-icon.daten{ background-image:url("./svg/daten.svg"); }
.btn-icon.ernaehrung{ background-image:url("./svg/ernaehrung.svg"); }
.btn-icon.info{ background-image:url("./svg/info.svg"); }
.btn-icon.substanz{ background-image:url("./svg/substanz.svg"); }
.btn-icon.toggle {
  background-image: url("./svg/toggle_off.svg");
}

.btn-icon.toggle:has(input:checked) {
  background-image: url("./svg/toggle_on.svg");
  box-shadow: 0 0 0 2px #0d6efd inset;
}
.btn-icon.reload{ background-image:url("./svg/reload.svg"); }
.btn-icon.load_list{ background-image:url("./svg/load_list.svg"); }
.btn-icon.load1{ background-image:url("./svg/load1.svg"); }
.btn-icon.load_cloud{ background-image:url("./svg/load_cloud.svg"); }
.btn-icon.rzpJa{ background-image:url("./svg/rzpja.svg"); }
.btn-icon.rzpNein{ background-image:url("./svg/rzpnein.svg"); }
.btn-icon.nein{ background-image:url("./svg/nein.svg"); }
.btn-icon.repeat{ background-image:url("./svg/repeat.svg"); }
.btn-icon.print{ background-image:url("./svg/print.svg"); }
.btn-icon.microphone{ background-image:url("./svg/microphone.svg"); }
.btn-icon.plus{ background-image:url("./svg/plus.svg"); }
.btn-icon.muster{ background-image:url("./svg/muster.svg"); }
.btn-icon.verordnen{ background-image:url("./svg/verordnen.svg"); }
.btn-icon.dauer{ background-image:url("./svg/dauer.svg"); }
.btn-icon.boost{ background-image:url("./svg/boost.svg"); }
.btn-icon.show{ background-image:url("./svg/show.svg"); }
.btn-icon.zurueck{ background-image:url("./svg/zurueck.svg"); }
.btn-icon.suchtgift{ background-image:url("./svg/suchtgift.svg"); }
.btn-icon.cave{ background-image:url("./svg/cave.svg"); }
.btn-icon.bewilligen{ background-image:url("./svg/bewilligen.svg"); }
.btn-icon.storno{ background-image:url("./svg/storno.svg"); }
.btn-icon.change{ background-image:url("./svg/change.svg"); }
.btn-icon.kifrage{ background-image:url("./svg/kifrage.svg"); }

.btn-icon:has(input:checked){
  box-shadow:0 0 0 2px #0d6efd inset;
}

.btn-icon.change {
    background-color: transparent;
}

.tgl{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.tgl input{
  display:none;
}

.tgl-icon{
  width:22px;
  height:22px;
  background:url("img/icons/toggle_off.svg") center/contain no-repeat;
}

.tgl input:checked + .tgl-icon{
  background:url("img/icons/toggle_on.svg") center/contain no-repeat;
}

.toolbtn-wrap{
  display:inline-flex;
  align-items:center;
}

.toolbtn{
  width:40px;
  height:40px;
  padding:0;
  border:1px solid rgba(0,0,0,.18);
  border-radius:8px;
  background-color:rgba(255,255,255,.75);
  background-repeat:no-repeat;
  background-position:center;
  background-size:24px 24px;   /* statt cover */
  cursor:pointer;
  box-sizing:border-box;
  transition:.15s ease;
}

.toolbtn:hover{
  background-color:rgba(255,255,255,.95);
  border-color:rgba(13,110,253,.45);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

.toolbtn:active{
  transform:translateY(1px);
}

.toolbtn.is-active{
  border-color:#0d6efd;
  box-shadow:0 0 0 2px rgba(13,110,253,.20) inset;
  background-color:rgba(13,110,253,.08);
}

.toolbtn-move{
  background-image:url('images/move.png');
}

.speechtotext{
  display:inline-block;
  background:0;
  align:center;
  width:18px;
  height:18px;
  background-image:url("img/icons/microphone.svg");
  background-size:18px 18px;
  background-position:center;
  background-repeat:no-repeat;
  border:0;
  cursor:pointer;
}

.speechtotext:disabled{
  opacity:.5;
  cursor:auto;
}

.elga{
  display:inline-block;
  background:0;
  width:75px;
  height:28px;
  background-image:url("css/svg/elga.png");
  background-size:80px 30px;
  background-position:center;
  background-repeat:no-repeat;
  border:0;
  border-radius:5px;
  cursor:pointer;
}

.dame:disabled{
  opacity:.5;
  cursor:auto;
}

.dame{
  display:inline-block;
  background:0;
  width:75px;
  height:28px;
  background-image:url("img/icons/DaMe.jpg");
  background-size:80px 30px;
  background-position:center;
  background-repeat:no-repeat;
  border:0;
  border-radius:5px;
  cursor:pointer;
}

.dame:disabled{
  opacity:.5;
  cursor:auto;
}

.hcs{
  display:inline-block;
  background:0;
  width:75px;
  height:28px;
  background-image:url("img/icons/hcs.png");
  background-size:80px 30px;
  background-position:center;
  background-repeat:no-repeat;
  border:0;
  border-radius:5px;
  cursor:pointer;
}

.hcs:disabled{
  opacity:.5;
  cursor:auto;
}

/* =========================
   State icon / state toggle
   ========================= */

.state-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  white-space:nowrap;
  font-weight:700;
  line-height:1.2;
}

.state-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.state-toggle .state-icon{
  display:inline-block;
  width:22px;
  height:22px;
  flex:0 0 22px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

.state-toggle .state-text::before{
  content:attr(data-off);
  color:#111;
}

.state-toggle input:checked ~ .state-text::before{
  content:attr(data-on);
}

.state-toggle.rzp input:checked ~ .state-text::before{
  color:#c00;
}

.state-toggle.kaf input:checked ~ .state-text::before{
  color:#0a5c2f;
}

.state-toggle.krs input:checked ~ .state-text::before{
  color:#0b4db7;
}

.state-toggle.rzp .state-icon{
  background-image:url("./svg/rzpja.svg");
}
.state-toggle.rzp input:checked ~ .state-icon{
  background-image:url("./svg/rzpnein.svg");
}

.state-toggle.kaf .state-icon{
  background-image:url("./svg/rzpja.svg");
}
.state-toggle.kaf input:checked ~ .state-icon{
  background-image:url("./svg/rzpnein.svg");
}

.state-toggle.krs .state-icon{
  background-image:url("./svg/nein.svg");
}
.state-toggle.krs input:checked ~ .state-icon{
  background-image:url("./svg/use.svg");
}

/* =========================
   Generic small icon button
   ========================= */

.iBtn{
  width:28px;
  height:28px;
  padding:0;
  border:1px solid #222;
  border-radius:8px;
  background:#e9e9e9;
  cursor:pointer;
  position:relative;
}

.iBtn::before{
  content:"";
  position:absolute;
  inset:4px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
}

.iBtn.iLoad::before{
  background-image:url("./svg/load_pat.svg");
}

/* =========================
   datalist input
   ========================= */

input[list].input-modern{
  padding-right:30px;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
<path fill='%23666' d='M5 7l5 6 5-6'/>\
</svg>");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:14px;
}

input[list].input-modern:focus{
  border-color:#0d6efd;
  box-shadow:0 0 0 3px rgba(13,110,253,.15);
}

/* =========================
   Custom Select (single)
   ========================= */

.cs-wrapper{
  position:relative;
  width:var(--cs-width, 180px);
  font-size:13px;
}

.cs-display{
  position:relative;
  height:34px;
  padding:7px 34px 7px 10px;
  border-radius:10px;
  border:1px solid var(--wm-border);
  background:var(--wm-bg);
  box-shadow:var(--wm-shadow);
  cursor:pointer;
  display:flex;
  align-items:center;
  color:var(--wm-text);
  transition:.15s ease;
}

.cs-display:hover{
  border-color:rgba(56,189,248,.75);
}

.cs-wrapper.open .cs-display{
  border-color:var(--wm-accent);
  box-shadow:var(--wm-shadow-focus);
  background:#fff;
}

.cs-display::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  background:url("./svg/toggle_expand.svg") center/contain no-repeat;
  opacity:.7;
}

.cs-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  max-height:calc(20 * 32px);
  overflow-y:auto;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  display:none;
  z-index:3000;
}

.cs-wrapper.open .cs-dropdown{
  display:block;
}

.cs-option{
  padding:8px 10px;
  cursor:pointer;
  transition:.12s;
}

.cs-option:hover{
  background:rgba(56,189,248,.10);
}

.cs-option.active{
  background:rgba(56,189,248,.18);
  font-weight:800;
}

.cs-wrapper.w-100{
  width:100% !important;
}

/* =========================
   Custom MultiSelect
   ========================= */

.ms-wrapper{
  position:relative;
  width:var(--ms-width, 350px);
  font-size:13px;
}

.ms-display{
  position:relative;
  min-height:34px;
  padding:6px 34px 6px 10px;
  border-radius:12px;
  border:1px solid var(--wm-border);
  background:var(--wm-bg);
  box-shadow:var(--wm-shadow);
  cursor:pointer;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  transition:.15s ease;
}

.ms-wrapper.open .ms-display{
  border-color:var(--wm-accent);
  background:#fff;
  box-shadow:var(--wm-shadow-focus);
}

.ms-display::after{
  content:"";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  background:url("/WinMed/css/svg/toggle_expand.svg") center/contain no-repeat;
  opacity:.7;
}

.ms-tag{
  padding:4px 8px;
  border-radius:999px;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.25);
  color:rgba(15,23,42,.92);
  font-size:12px;
  font-weight:800;
}

.ms-empty{
  color:var(--wm-muted);
  font-size:12px;
  font-weight:800;
}

.ms-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  width:100%;
  max-height:calc(20 * 32px);
  overflow:auto;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  display:none;
  z-index:3000;
}

.ms-wrapper.open .ms-dropdown{
  display:block;
}

.ms-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  cursor:pointer;
}

.ms-option:hover{
  background:rgba(56,189,248,.10);
}

.ms-option input{
  accent-color:var(--wm-accent);
  pointer-events:none;
}

/* =========================
   Icon-Checkbox save/delete
   ========================= */

.iCheck{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}

.iCheck input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.iBox{
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background-color:rgba(255,255,255,.78);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .18s ease;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  overflow:hidden;
  position:relative;
}

.iCheck.save .iBox{
  background-image:url("/WinMed/css/svg/sichern.svg");
  border-color:rgba(25,135,84,.45);
}

.iCheck.delete .iBox{
  background-image:url("/WinMed/css/svg/db_delete.svg");
  border-color:rgba(220,53,69,.45);
}

.iCheck.save:hover .iBox{
  background-color:rgba(25,135,84,.08);
  border-color:rgba(25,135,84,.75);
  box-shadow:0 0 0 3px rgba(25,135,84,.18), 0 10px 22px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

.iCheck.delete:hover .iBox{
  background-color:rgba(220,53,69,.08);
  border-color:rgba(220,53,69,.75);
  box-shadow:0 0 0 3px rgba(220,53,69,.18), 0 10px 22px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

.iCheck.save input:checked + .iBox{
  background-color:rgba(25,135,84,.15);
  border-color:rgba(25,135,84,.95);
}

.iCheck.delete input:checked + .iBox{
  background-color:rgba(220,53,69,.15);
  border-color:rgba(220,53,69,.95);
}

.iCheck input:checked + .iBox::after{
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  right:-4px;
  bottom:-4px;
  border-radius:999px;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
  background-repeat:no-repeat;
  background-position:center;
  background-size:10px 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.0 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.iCheck.save input:checked + .iBox::after{
  background:#198754;
}

.iCheck.delete input:checked + .iBox::after{
  background:#dc3545;
}

/* =========================
   Radio Buttons modern
   ========================= */

.iRadio{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}

.iRadio input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.rBox{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .18s ease;
  position:relative;
}

.iRadio:hover .rBox{
  border-color:rgba(56,189,248,.75);
  box-shadow:0 0 0 3px rgba(56,189,248,.18), 0 10px 22px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

.iRadio input:checked + .rBox{
  border-color:rgba(56,189,248,.95);
  background:rgba(56,189,248,.10);
}

.iRadio input:checked + .rBox::after{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--wm-accent);
  box-shadow:0 0 0 2px rgba(255,255,255,.9) inset;
}

/* =========================
   Row highlight helper
   ========================= */

.modernTable tr.is-selected td{
  background:rgba(56,189,248,.14) !important;
}

.modernTable tr.is-selected td:first-child{
  font-weight:900;
}

/* =========================
   File Upload
   ========================= */

.file-modern{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.60);
  box-shadow:0 14px 35px rgba(0,0,0,.12);
}

.file-modern input[type=file]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.btn-file{
  height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  box-shadow:var(--wm-shadow);
  transition:.15s ease;
}

.btn-file:hover{
  border-color:rgba(56,189,248,.60);
}

.file-name{
  min-width:140px;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(15,23,42,.70);
  font-size:12px;
}

/* =========================
   modernTable
   ========================= */

table.modernTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.45);
  margin-left:0;
}

/* kompakter Zeilenabstand */
table.modernTable th,
table.modernTable td{
  padding:6px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  border:0;
  color:#111;
  line-height:1.3;
}

/* Header */
table.modernTable thead th{
  background:rgba(255,255,255,.70);
  font-weight:900;
}

/* Zebra */
table.modernTable tbody tr:nth-child(odd) td{
  background:rgba(255,255,255,.28);
}

/* Hover */
table.modernTable tbody tr:hover td{
  background:rgba(56,189,248,.12);
}

/* letzte Zeile ohne Border */
table.modernTable tbody tr:last-child td{
  border-bottom:none;
}

.tc{
  text-align:center !important;
}

/* =========================
   Ordinationszeiten helper
   ========================= */

.oz-wrap{
  width:100%;
  overflow-x:auto;
  padding:10px 0;
}

.oz-table{
  border-collapse:separate;
  border-spacing:0;
  width:max-content;
  min-width:100%;
  margin:0;
}

.oz-table input.input-modern[type="time"]{
  width:75px;
  padding:4px 6px;
  font-size:12px;
}

.oz-table input.input-modern[type="number"]{
  width:55px;
}

.oz-table .cs-wrapper{
  width:160px;
}

.oz-table td.slot{
  white-space:nowrap;
  padding:6px 6px;
}

.oz-table td.slot .t{
  width:80px;
  display:block;
  margin:2px auto;
}

/* ===== Layout Grid ===== */

.page-grid{
  display:grid;
  gap:14px;
  align-items:start;
  padding:12px;
}

/* =========================
   Smart Tooltip
   ========================= */

.tip-bubble{
  position:fixed;
  z-index:999999;
  max-width:520px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(2, 6, 23, .94);
  color:#fff;
  font-size:14px;
  line-height:1.35;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(2px);
  transition:opacity .12s ease, transform .12s ease;
  pointer-events:none;
  white-space:pre-line;
}

.tip-bubble.show{
  opacity:1;
  transform:translateY(0);
}

.tip-arrow{
  position:fixed;
  z-index:999999;
  width:10px;
  height:10px;
  background:rgba(2, 6, 23, .94);
  transform:rotate(45deg);
  opacity:0;
  transition:opacity .12s ease;
  pointer-events:none;
}

.tip-arrow.show{
  opacity:1;
}

.has-tip{
  cursor:help;
}

/* =========================
   Head area
   ========================= */

#patientDisplay .pd-head{
  display:grid;
  grid-template-columns:minmax(360px, auto) 150px minmax(320px, 1fr);
  gap:10px;
  align-items:start;
  width:100%;
  max-width:100%;
  overflow:hidden;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
}

#patientDisplay .pd-left,
#patientDisplay .pd-mid,
#patientDisplay .pd-right{
  min-width:0;
}

#patientDisplay .pd-card{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:8px 10px;
  overflow:visible !important;
  max-width:100%;
}

/* =========================
   Left / patient
   ========================= */

#patientDisplay .pd-left{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

#patientDisplay .pd-topline{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:start;
  width:100%;
}

#patientDisplay .pd-facts-compact{
  display:grid;
  grid-template-columns:repeat(6, minmax(70px, max-content));
  gap:2px 10px;
  width:100%;
  min-width:0;
  white-space:nowrap;
  margin-bottom:0;
}

#patientDisplay .pd-facts-compact .k,
#patientDisplay .pd-facts-compact .v{
  font-size:12px;
  line-height:1.15;
  white-space:nowrap;
}

#patientDisplay .pd-facts-compact .k{
  font-weight:800;
}

#patientDisplay .pd-subfacts{
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  font-size:12px;
  line-height:1.15;
  white-space:nowrap;
}

#patientDisplay .pd-subfacts b{
  font-weight:800;
}

#patientDisplay .pd-status{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  white-space:nowrap;
}

#patientDisplay .pd-status .btn,
#patientDisplay .pd-status button,
#patientDisplay .pd-status input[type="button"]{
  height:28px !important;
  min-height:28px !important;
  padding:0 10px !important;
  font-size:12px !important;
}

#patientDisplay .pd-hero{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:2px;
}

#patientDisplay .pd-hero-top{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

#patientDisplay .pd-photo{
  width:52px;
  height:52px;
  border-radius:4px;
  object-fit:cover;
  flex:0 0 auto;
}

#patientDisplay .pd-nameblock{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  flex:1 1 auto;
}

#patientDisplay .pd-name{
  font-size:16px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:900;
}

#patientDisplay .pd-beruf{
  font-size:12px;
  line-height:1.2;
  white-space:normal;
}

#patientDisplay .pd-warn{
  margin-left:0;
  margin-top:2px;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

#patientDisplay .pd-cave{
  color:#b91c1c !important;
  font-weight:900;
}

#patientDisplay .pd-allergie{
  font-weight:900;
}

#patientDisplay .c-green{
  color:#166534 !important;
  font-weight:700;
}

/* =========================
   Middle / diagnoses
   ========================= */

#patientDisplay .pd-mid{
  width:150px;
  min-width:100px;
  max-width:170px;
}

#patientDisplay .pd-mid .dx-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  min-width:0;
}

#patientDisplay .pd-mid .dx-grid > div{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  line-height:1.15;
}

/* =========================
   Right / buttons
   ========================= */

#patientDisplay .pd-right{
  min-width:0;
  width:100%;
}

#patientDisplay .pd-right .btn-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 150px));
	gap: 10px 14px;
	justify-content: start;
	align-content: start;
}

#patientDisplay .pd-right .btn-grid > *{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  height:36px !important;
  min-height:36px !important;
  padding:0 10px !important;
  box-sizing:border-box;
  font-size:12px !important;
  line-height:1.1 !important;
  border-radius:12px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  margin:0 !important;
}

#patientDisplay .pd-right .btn-grid > *,
#patientDisplay .pd-right .btn-grid > * *{
  float:none !important;
}

#patientDisplay .pd-right .btn-grid .tooltip{
  display:flex;
  align-items:stretch;
}

#patientDisplay .pd-right .btn-grid .tooltip > *{
  height:100% !important;
}

/* =========================
   Content area
   ========================= */

#patientDisplay .content-area{
  display:flex;
  gap:12px;
  align-items:stretch;
  width:100%;
  min-width:0;
  flex:1 1 auto;
  min-height:0;
}

/* dispArea bekommt den Rest */
#patientDisplay #dispArea{
  flex:1 1 auto;
  width:auto !important;
  min-width:0;
  min-height:0;
  overflow:auto;
}

/* optional: bei Chart/Bild/PDF etwas breiter bevorzugen */
#patientDisplay #dispArea.hasContent{
  flex:1 1 auto;
  width:auto !important;
  min-width:260px;
}

#patientDisplay #dispArea table{
  width:100%;
}

/* workingarea nur so breit wie der Inhalt */
#patientDisplay #workingarea{
  flex:0 0 auto;
  width:max-content;
  max-width:420px;
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:0;
  height:auto;
}

/* falls der Inhalt schmal ist, bleibt auch der Bereich schmal */
#patientDisplay #adressArea{
  flex:0 0 auto;
  width:100%;
}

#patientDisplay #workingarea .workArea{
  flex:0 0 auto;
  width:100%;
  min-height:0;
  overflow:auto;
  max-height:calc(100vh - 260px);
}

#patientDisplay #workingarea.pd-card{
  display:flex;
  flex-direction:column;
}

/* =========================
   DispArea
   ========================= */

#patientDisplay .table-container{
  margin:0 !important;
}

#patientDisplay #dispArea table{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

#patientDisplay #dispArea td,
#patientDisplay #dispArea th{
  text-align:left;
}

#patientDisplay #dispArea canvas,
#patientDisplay #dispArea img,
#patientDisplay #dispArea iframe,
#patientDisplay #dispArea object,
#patientDisplay #dispArea embed{
  max-width:100% !important;
  width:100% !important;
  height:auto;
  display:block;
}

/* =========================
   Commandbar
   ========================= */

#patientDisplay .commandbar{
  margin-top:16px;
  display:grid;
  gap:10px;
  width:100%;
  max-width:100%;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  right:auto !important;
}

#patientDisplay .commandbar .cmdrow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
}

#patientDisplay .commandbar .cmdrow .btn,
#patientDisplay .commandbar .cmdrow button,
#patientDisplay .commandbar .cmdrow input[type="button"]{
  flex:0 0 150px;
  width:150px !important;
  max-width:150px;
  height:36px;
  min-height:36px;
  padding:0 10px;
  white-space:nowrap;
}

#patientDisplay .commandbar .tooltip{
  display:block;
  flex:0 0 150px;
  width:150px !important;
}

#patientDisplay .commandbar .tooltip > .btn,
#patientDisplay .commandbar .tooltip > button,
#patientDisplay .commandbar .tooltip > input[type="button"]{
  width:150px !important;
  height:36px !important;
}

/* =========================
   Tooltips
   ========================= */

#patientDisplay .tooltip{
  position:relative;
  display:inline-block;
}

#patientDisplay .tooltip .tooltiptext{
  visibility:hidden;
  opacity:0;
  transition:opacity .15s ease;
  position:absolute;
  left:105%;
  top:50%;
  transform:translateY(-50%);
  background:#1f2937;
  color:#fff !important;
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  white-space:nowrap;
  z-index:99999;
  pointer-events:none;
}

#patientDisplay .tooltip:hover .tooltiptext{
  visibility:visible;
  opacity:1;
}

/* =========================
   Placeholders / defaults
   ========================= */

#patientDisplay input::placeholder,
#patientDisplay textarea::placeholder{
  color:rgba(0,0,0,.80) !important;
  opacity:1;
}

#dispArea input::placeholder,
#dispArea textarea::placeholder{
  color:rgba(0,0,0,.35) !important;
  opacity:1;
}

#patientDisplay .button,
#patientDisplay button,
#patientDisplay input.button{
  color:#0f172a !important;
  font-weight:600;
}

#patientDisplay .button:disabled,
#patientDisplay button:disabled,
#patientDisplay input.button:disabled{
  color:rgba(0,0,0,.35) !important;
}

#patientDisplay img,
#patientDisplay table,
#patientDisplay .pd-card{
  max-width:100%;
}

/* =========================
   Responsive
   ========================= */

@media (max-width:1200px){
  #patientDisplay .pd-head{
    grid-template-columns:1fr;
  }

  #patientDisplay .pd-right .btn-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:1100px){
  .screenArea{
    flex-direction:column;
    min-height:auto;
  }

  .searchArea.sidebar2{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .patientArea{
    max-width:100%;
    width:100%;
  }

  #patientDisplay .content-area{
    flex-direction:column;
  }

  #patientDisplay #dispArea{
    width:100% !important;
    max-width:100%;
    min-width:0;
    flex:1 1 auto;
  }

  #patientDisplay #dispArea.hasContent{
    width:100% !important;
    max-width:100%;
    min-width:0;
    flex:1 1 auto;
  }

  #patientDisplay #workingarea{
    width:100%;
    max-width:100%;
    min-width:0;
    flex:1 1 auto;
  }

  #patientDisplay #workingarea .workArea{
    max-height:none;
  }
}