*{box-sizing:border-box}

body{
margin:0;
font-family:system-ui,Segoe UI,sans-serif;
background:#07131f;
color:#eaf6ff
}

button,input,select{font:inherit}

.hidden{display:none!important}

.login{
min-height:100vh;
display:grid;
place-items:center;
background:radial-gradient(circle at top,#0e6682,#07131f 55%)
}

.card{
width:min(390px,92vw);
padding:28px;
background:#102536;
border:1px solid #28536a;
border-radius:22px;
box-shadow:0 25px 70px #0008
}

.logo{
width:118px;
height:118px;
object-fit:contain;
display:block;
margin:auto
}

.card h1{text-align:center}

.card input,
.card select,
.card button{
width:100%;
padding:12px;
margin-top:10px;
border-radius:10px;
border:1px solid #31566b
}

.card input,
.card select{
background:#071b29;
color:#fff
}

.card button,.primary{
background:#159bd3;
color:white;
border:0;
cursor:pointer
}

.fieldLabel{
display:block;
margin-top:12px;
font-size:13px;
color:#b7cfdb
}

.remember{
display:flex;
align-items:center;
gap:9px;
margin:14px 0 4px
}

.remember input{
width:20px;
height:20px;
margin:0
}

.firstInfo{
line-height:1.5
}

.error{
color:#ffb6b6
}

.version{
text-align:center;
margin-top:18px;
font-size:11px;
color:#7895a5
}

.shell{min-height:100vh}

.top{
min-height:72px;
display:flex;
align-items:center;
gap:14px;
padding:8px 18px;
background:#0d2231;
border-bottom:1px solid #234657;
position:sticky;
top:0;
z-index:20
}

.top img{
width:54px;
height:54px;
object-fit:contain
}

.top h1{
font-size:20px;
margin:0
}

.grow{flex:1}

.toolbar{
display:flex;
gap:8px;
flex-wrap:wrap;
padding:14px 18px;
background:#0a1925
}

.toolbar select,
.toolbar input,
.toolbar button,
.top button{
padding:9px;
border-radius:9px;
border:1px solid #31566b;
background:#102b3b;
color:#fff
}

.workspace{
display:grid;
grid-template-columns:minmax(280px,38%) 1fr;
gap:12px;
padding:12px
}

.source,.tablebox{
background:#0d2231;
border:1px solid #234657;
border-radius:14px;
min-height:70vh;
overflow:hidden
}

.sourceHead{
padding:10px;
display:flex;
gap:8px;
align-items:center
}

.source iframe,.source img{
width:100%;
height:65vh;
object-fit:contain;
background:#061019;
border:0
}

.tableScroll{
overflow:auto;
max-height:72vh
}

.medtable{
border-collapse:separate;
border-spacing:0;
min-width:1050px;
width:100%
}

.medtable th,.medtable td{
border-right:1px solid #2c4a59;
border-bottom:1px solid #2c4a59;
padding:0;
background:#102536
}

.medtable th{
position:sticky;
top:0;
z-index:4;
background:#17384a;
padding:10px 6px;
text-align:left;
resize:horizontal;
overflow:auto;
min-width:55px
}

.medtable th:nth-child(2){min-width:240px}
.medtable th:nth-child(7){min-width:260px}

.medtable input{
width:100%;
border:0;
background:transparent;
color:#eaf6ff;
padding:10px;
outline:none
}

.doneRow td{opacity:.48}
.doneRow input{text-decoration:line-through}

.check{
width:22px!important;
height:22px
}

.modal{
position:fixed;
inset:0;
background:#000a;
display:grid;
place-items:center;
z-index:40;
overflow:auto;
padding:20px
}

.modal .card{
width:min(540px,94vw)
}

.adminCard{
max-height:90vh;
overflow:auto
}

.userRow{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:12px 0;
border-bottom:1px solid #29485a
}

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

.switchLabel input{
width:20px;
height:20px;
margin:0
}

.small{
font-size:12px;
color:#9bb6c5
}

.appFooter{
padding:10px 18px 20px;
text-align:right;
font-size:11px;
color:#688797
}


@media(max-width:850px){
.workspace{grid-template-columns:1fr}
.source,.tablebox{min-height:auto}
.source iframe,.source img{height:45vh}
.top h1{display:none}
.top{flex-wrap:wrap;height:auto}
}


/* Druck / PDF */
@media print{

body{
background:white;
color:black
}

.top,
.toolbar,
.source,
.appFooter{
display:none!important
}

.workspace{
display:block;
padding:0
}

.tablebox{
border:0;
min-height:0
}

.tableScroll{
overflow:visible;
max-height:none
}

.medtable{
min-width:0;
width:100%;
font-size:10pt
}

.medtable th,
.medtable td{
background:white!important;
color:black!important;
border:1px solid #777
}

.medtable input{
color:black;
padding:5px
}

.doneRow td{
opacity:1
}

}


/* ===================================================
   Beta 1.1 UI Patch – Passwortanzeige
   =================================================== */

.passwordWrap{
position:relative;
width:100%;
margin-top:10px
}

.card .passwordWrap input{
margin-top:0;
padding-right:52px
}

.card .passwordWrap .passwordEye{
position:absolute;
right:5px;
top:50%;
transform:translateY(-50%);
width:42px;
height:38px;
margin:0;
padding:0;
display:grid;
place-items:center;
border:0;
border-radius:8px;
background:transparent;
font-size:20px;
cursor:pointer;
box-shadow:none
}

.card .passwordWrap .passwordEye:hover{
background:#ffffff12
}

.card .passwordWrap .passwordEye:focus-visible{
outline:2px solid #159bd3;
outline-offset:1px
}


/* ===================================================
   Beta 1.2 – Mittel-Datenbank
   =================================================== */

.medicineCard{
width:min(680px,94vw)!important;
max-height:90vh;
overflow:auto
}

.medicineResults{
margin-top:12px;
max-height:360px;
overflow:auto;
border:1px solid #29485a;
border-radius:10px
}

.medicineItem{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-bottom:1px solid #29485a
}

.medicineItem:last-child{
border-bottom:0
}

.medicineItem .addPotencyBtn{
width:auto;
white-space:nowrap
}

.potencyList{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-top:6px
}

.potencyBadge{
display:inline-block;
padding:3px 8px;
border-radius:999px;
background:#17384a;
font-size:12px
}

.catalogSeparator{
border:0;
border-top:1px solid #29485a;
margin:20px 0
}

.catalogEmpty{
padding:15px
}


/* ===================================================
   Beta 1.2 – Vorlagenviewer
   =================================================== */

.sourceHead{
justify-content:space-between;
flex-wrap:wrap
}

.viewerTools{
display:flex;
align-items:center;
gap:5px;
flex-wrap:wrap
}

.viewerTools button{
padding:6px 9px;
border-radius:7px;
border:1px solid #31566b;
background:#102b3b;
color:#fff;
cursor:pointer
}

#zoomValue{
min-width:54px;
text-align:center;
font-size:12px
}

.previewViewport{
height:65vh;
overflow:auto;
position:relative;
background:#061019;
cursor:grab;
overscroll-behavior:contain
}

.previewViewport.dragging{
cursor:grabbing;
user-select:none
}

.imageStage{
min-width:100%;
min-height:100%;
display:flex;
align-items:flex-start;
justify-content:flex-start
}

#sourceImage{
display:block;
height:auto;
transform-origin:center center;
user-select:none;
-webkit-user-drag:none
}

.previewPdf{
display:block;
width:100%;
height:100%;
border:0
}

.emptyPreview{
padding:20px
}


@media(max-width:850px){
.previewViewport{
height:50vh
}

.viewerTools{
width:100%
}
}