/* ============================================================
   portal.css — pixelnahe Repliken der Health-Card-Portal-UI
   Demo-Daten, keine echten Patienten. Nachbau für Screenshots.
   ============================================================ */

/* Rahmen: Browser-Chrome um die App */
.screen {
  border-radius: 16px; border: 1px solid var(--line); background: #F2F5F7;
  box-shadow: var(--shadow-lg); overflow: hidden; font-size: 13px; color: #2c3a44;
}
.screen-bar { display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; background: #EAEDEF; border-bottom: 1px solid #DCE0E3; }
.screen-bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfd6da; }
.screen-bar i:nth-child(1){ background:#E89A85; } .screen-bar i:nth-child(2){ background:#E9C77E; } .screen-bar i:nth-child(3){ background:#9FCFA8; }
.screen-url { margin-left: .6rem; font-size: .74rem; color: #7a8791; background: #fff; border-radius: 6px; padding: 3px 12px; flex: 1; max-width: 360px; }

/* App-Layout: Sidebar + Main */
.app { display: flex; min-height: 480px; }
.app-side { width: 210px; flex-shrink: 0; background: linear-gradient(170deg,#0C2A33,#08191F); color: #cfe2e1; padding: 14px 0; }
.app-side .brand-mini { display:flex; align-items:center; gap:9px; padding: 4px 16px 16px; font-family: var(--display); font-weight:600; font-size:15px; color:#fff; }
.app-side .brand-mini .bm { width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--petrol-500),var(--petrol-700));display:grid;place-items:center;flex-shrink:0; }
.app-side .role { margin: 0 16px 12px; font-size: 10px; letter-spacing:.1em; text-transform:uppercase; color: var(--aqua-300); background: rgba(127,209,206,.12); border:1px solid rgba(127,209,206,.22); padding:5px 10px; border-radius:999px; display:inline-block; }
.nav-group { font-size: 9.5px; letter-spacing:.14em; text-transform:uppercase; color: rgba(207,226,225,.42); padding: 12px 16px 5px; }
.nav-i { display:flex; align-items:center; gap:10px; padding: 8px 16px; font-size:12.5px; color: rgba(207,226,225,.8); cursor:default; border-left: 3px solid transparent; }
.nav-i svg { opacity:.8; flex-shrink:0; }
.nav-i.on { background: rgba(27,154,160,.22); color:#fff; border-left-color: var(--aqua-300); }
.nav-i .badge { margin-left:auto; font-size:10px; background: var(--amber); color:#3a2606; font-weight:600; padding:1px 7px; border-radius:999px; }

.app-main { flex: 1; min-width: 0; background: #F2F5F7; display:flex; flex-direction:column; }
.app-top { display:flex; align-items:center; gap:12px; padding: 10px 18px; background:#fff; border-bottom:1px solid #E3E8EB; }
.app-top .crumb { font-size: 12px; color:#7a8791; } .app-top .crumb b { color:#2c3a44; }
.app-top .search { margin-left:auto; font-size:12px; color:#9aa5ac; background:#F2F5F7; border:1px solid #E3E8EB; border-radius:999px; padding:5px 14px; min-width:180px; }
.app-top .ava { width:30px;height:30px;border-radius:9px;background:var(--aqua-100);color:var(--petrol-700);display:grid;place-items:center;font-weight:600;font-size:11px; }
.app-body { padding: 18px; overflow: hidden; }

/* MainCard */
.mcard { background:#fff; border-radius:12px; box-shadow: 0 1px 3px rgba(14,34,48,.07); overflow:hidden; }
.mcard-head { display:flex; align-items:center; gap:10px; padding: 14px 18px; border-bottom:1px solid #EEF1F3; }
.mcard-head h3 { font-size: 16px; font-weight:600; color:#1c2b33; font-family: var(--body); }
.mcard-head .sub { font-size:11.5px; color:#8a969d; }
.mcard-head .grow { flex:1; }
.mcard-body { padding: 14px 18px; }

/* MUI-style Buttons im Portal */
.mbtn { font-size:12px; font-weight:600; padding:6px 13px; border-radius:7px; border:1px solid transparent; display:inline-flex; align-items:center; gap:6px; cursor:default; }
.mbtn.contained { background:#1976d2; color:#fff; }
.mbtn.info { background:#0288d1; color:#fff; }
.mbtn.success { background:#2e7d32; color:#fff; }
.mbtn.error { background:#fff; color:#d32f2f; border-color:#f3c0c0; }
.mbtn.outlined { background:#fff; color:var(--petrol-700); border-color:#cdd9da; }
.mbtn.sec { background:#fff; color:#7045BC; border-color:#d9cdf0; }

/* Portal-Tabellen (MUI DataGrid-Look) */
.ptable { width:100%; border-collapse:collapse; font-size:12px; background:#fff; }
.ptable thead th { text-align:left; font-weight:600; font-size:11px; color:#5c6e72; padding:9px 12px; background:#F7F9FA; border-bottom:1px solid #E3E8EB; white-space:nowrap; }
.ptable.primaryhead thead th { background:#1976d2; color:#fff; border-bottom:none; }
.ptable tbody td { padding:9px 12px; border-bottom:1px solid #F0F3F4; white-space:nowrap; }
.ptable tbody tr:last-child td { border-bottom:none; }
.ptable .num { text-align:right; } .ptable .ctr { text-align:center; }
.ptable .strike { text-decoration: line-through; color:#9aa5ac; }
.prow-prepaid td { background:#e6f8ec; } .prow-pending td { background:#f0f0f0; }
.prow-payment td { background:#fdf6d6; } .prow-refund td { background:#e9edfb; } .prow-cancel td { background:#EEF2F6; }

/* MUI Chips (exakte Compliance-Farben) */
.chip { display:inline-flex; align-items:center; font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.chip.success { background:#e3f4e7; color:#2e7d32; }       /* approved / ok / Übernommen */
.chip.info { background:#e3f1fb; color:#0277bd; }          /* requested / queued */
.chip.warning { background:#fdf0d8; color:#a35a06; }       /* available / due_soon / draft_ready */
.chip.error { background:#fbe4e0; color:#c62828; }         /* rejected / overdue / failed */
.chip.default { background:#eceff1; color:#566; }          /* archived / out_of_service / discarded */
.chip.ok-soft { background:#e3f4e7; color:#2e7d32; }
.chip-dot::before { content:''; width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px; }

/* Avatare in Tabellen */
.pava { width:26px;height:26px;border-radius:8px;display:inline-grid;place-items:center;font-size:10px;font-weight:600;vertical-align:middle;margin-right:8px; }
.av-a{background:#DCF0EE;color:#115E67}.av-b{background:#FBEBD3;color:#9a6315}.av-c{background:#F8E0D9;color:#a8412c}.av-d{background:#E5E9F8;color:#3D4F9E}.av-e{background:#E3F4E7;color:#2e7d32}

/* Slot-Grid (Einladungen) */
.slotgrid { display:grid; grid-template-columns: repeat(auto-fill,minmax(118px,1fr)); gap:9px; }
.slot { border-radius:8px; padding:9px 8px; font-size:12px; text-align:center; border:1.5px solid #1976d2; position:relative; }
.slot.free { color:#1976d2; background:#fff; }
.slot.booked { background:#1976d2; color:#fff; }
.slot.cancel { border-color:#cdd5da; color:#9aa5ac; background:#fafbfc; }
.slot .nm { display:block; font-size:11px; margin-top:2px; opacity:.9; }
.slot .noshow { position:absolute; top:-7px; right:-5px; background:#d32f2f; color:#fff; font-size:8.5px; font-weight:700; padding:1px 6px; border-radius:999px; }
.daterow { font-size:13px; font-weight:600; color:#36454d; margin:14px 0 8px; }

/* progress bars für Compliance-Demos */
.pbar { height:8px; border-radius:999px; background:#eceff1; overflow:hidden; }
.pbar i { display:block; height:100%; border-radius:999px; }

/* Caption unter Repliken */
.replica-cap { font-size:.82rem; color:var(--muted); font-style:italic; text-align:center; margin-top:.9rem; }

/* Modul-Seiten-Hero */
.mod-hero { padding: 3.5rem 0 1rem; }
.mod-hero .back { font-size:.86rem; color:var(--petrol-600); font-weight:600; display:inline-flex; gap:.4rem; align-items:center; margin-bottom:1.2rem; }
.mod-hero h1 { font-family:var(--display); font-weight:600; font-size:clamp(2rem,4vw,3rem); line-height:1.08; letter-spacing:-.025em; margin-bottom:1rem; max-width:20ch; }
.mod-hero h1 em { font-style:italic; color:var(--petrol-700); }
.mod-hero p.lead { font-size:1.15rem; color:var(--muted); max-width:40rem; }

/* feature split innerhalb Modulseiten */
.split { display:grid; grid-template-columns: 1fr 1fr; gap:3.5rem; align-items:center; padding: 3rem 0; }
.split.rev .split-text { order:2; }
.split-text h3 { font-family:var(--display); font-weight:600; font-size:1.7rem; line-height:1.14; margin-bottom:1rem; letter-spacing:-.02em; }
.split-text > p { color:var(--muted); margin-bottom:1.3rem; }
.flist { list-style:none; display:grid; gap:.75rem; }
.flist li { display:flex; gap:.7rem; align-items:flex-start; font-size:.97rem; }
.flist svg { color:var(--petrol-600); flex-shrink:0; margin-top:3px; }

/* module cross-nav */
.modnav { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.modnav a { background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:1.3rem; transition:transform .2s,box-shadow .2s,border-color .2s; display:block; }
.modnav a:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); border-color:var(--aqua-300); }
.modnav .mn-ic { width:40px;height:40px;border-radius:11px;background:var(--aqua-100);color:var(--petrol-700);display:grid;place-items:center;margin-bottom:.8rem; }
.modnav h4 { font-family:var(--display); font-size:1.08rem; font-weight:600; margin-bottom:.3rem; }
.modnav p { font-size:.85rem; color:var(--muted); }

@media (max-width:940px){ .split,.split.rev .split-text{grid-template-columns:1fr;order:0} .split{gap:2rem} .modnav{grid-template-columns:1fr 1fr} .app-side{display:none} }
@media (max-width:560px){ .modnav{grid-template-columns:1fr} }