/* ============================================================
   MVZ Dienstplan — Mobile-Stile (Etappe 5)
   ============================================================ */

.m-app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--c-bg)}

.m-topnav{background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:10px 14px;display:flex;align-items:center;gap:12px;flex-shrink:0;box-shadow:var(--shadow);z-index:10}
.m-hamburger{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--c-border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.m-hamburger i{font-size:19px;color:var(--c-text2)}
.m-title{font-size:15px;font-weight:600;flex:1}

.m-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;opacity:0;pointer-events:none;transition:opacity .25s}
.m-overlay.open{opacity:1;pointer-events:all}
.m-sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;background:var(--c-surface);z-index:101;transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.m-sidebar.open{transform:translateX(0)}
.m-sidebar-head{padding:44px 16px 16px;border-bottom:1px solid var(--c-border2)}
.m-sidebar-nav{flex:1;padding:10px}
.m-sidebar-foot{padding:12px;border-top:1px solid var(--c-border2)}
.m-nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--c-text2);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;margin-bottom:2px;font-family:inherit}
.m-nav-item.active{background:var(--c-accent-l);color:var(--c-accent2);font-weight:600}
.m-nav-item.danger{color:var(--c-warn)}
.m-nav-item i{font-size:18px;width:22px}

.m-content{flex:1;overflow:hidden;display:flex;flex-direction:column}

.m-datenav{background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:10px 14px;flex-shrink:0}
.m-kwrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.m-navbtn{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--c-border);background:var(--c-surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-text2)}
.m-kwlabel{font-size:13px;font-weight:600;min-width:140px;text-align:center}
.m-daytabs{display:flex;gap:5px}
.m-daytab{flex:1;padding:7px 0;border-radius:var(--r-sm);border:1px solid var(--c-border);background:var(--c-surface);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px}
.m-daytab.active{background:var(--c-accent);border-color:var(--c-accent2)}
.m-daytab.active .m-dt-name,.m-daytab.active .m-dt-date{color:#fff}
.m-dt-name{font-size:10px;font-weight:500;color:var(--c-text3)}
.m-dt-date{font-size:14px;font-weight:600}

.m-cal-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.m-cal-table{border-collapse:collapse;table-layout:fixed}
.m-th-time{position:sticky;top:0;left:0;z-index:30;background:var(--c-surface2);border-bottom:1px solid var(--c-border);border-right:1px solid var(--c-border);padding:4px;font-size:8px;font-weight:600;color:var(--c-text3);width:42px;min-width:42px}
.m-th-ma{position:sticky;top:0;z-index:20;background:var(--c-surface2);border-bottom:1px solid var(--c-border);border-right:1px solid var(--c-border2);padding:5px 2px;width:46px;min-width:46px;text-align:center}
.m-th-ma .ma-head-av{width:22px;height:22px;font-size:8px;margin:0 auto}
.m-td-time{position:sticky;left:0;z-index:10;background:var(--c-surface);border-right:1px solid var(--c-border);border-bottom:1px solid var(--c-border2);font-size:8px;color:var(--c-text3);text-align:right;padding:0 4px 0 0;vertical-align:middle;white-space:nowrap;font-family:'DM Mono',monospace}
.m-td-time.hour{color:var(--c-text2);font-weight:500;border-bottom-color:var(--c-border)}
.m-td-time.now{background:var(--c-accent-l);color:var(--c-accent2);font-weight:600}
.m-td-cell{border-bottom:1px solid var(--c-border2);border-right:1px solid var(--c-border2);width:46px;min-width:46px;vertical-align:top;padding:0;position:relative;overflow:hidden}
.m-td-cell.unavail{background:repeating-linear-gradient(45deg,var(--c-surface2),var(--c-surface2) 3px,var(--c-surface) 3px,var(--c-surface) 6px)}
.m-td-cell.now{background:rgba(216,238,228,.3)}
.m-block{position:absolute;left:1px;right:1px;border-radius:2px;padding:1px 2px;font-size:7px;font-weight:600;overflow:hidden;z-index:2}

.m-urlaub-legende{display:flex;gap:12px;padding:10px 14px;font-size:10px;color:var(--c-text3);background:var(--c-surface);border-bottom:1px solid var(--c-border)}
.m-urlaub-legende span{display:flex;align-items:center;gap:4px}
.m-urlaub-legende .leg-c{width:10px;height:10px;border-radius:2px;display:inline-block}
.m-urlaub-body{flex:1;overflow-y:auto;padding:14px}
.m-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.m-cal-dh{font-size:9px;font-weight:600;color:var(--c-text3);text-align:center;padding:2px 0}
.m-cal-day{min-height:42px;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;padding:3px 1px;font-size:11px;color:var(--c-text2);background:var(--c-surface2)}
.m-cal-day.ft{background:#FEF3C7}.m-cal-day.sf{background:#D1FAE5}.m-cal-day.we{background:#F0EEE9;color:var(--c-text3)}.m-cal-day.leer{background:transparent}
.m-cal-ks{display:flex;flex-wrap:wrap;gap:1px;justify-content:center;margin-top:2px}
.m-cal-k{font-size:7px;font-weight:600;padding:0 2px;border-radius:2px}

.m-bottomnav{background:var(--c-surface);border-top:1px solid var(--c-border);padding:8px 0 max(8px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-around;flex-shrink:0}
.m-bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 24px;cursor:pointer;border:none;background:transparent;color:var(--c-text3);border-radius:var(--r-sm)}
.m-bn-item.active{color:var(--c-accent)}
.m-bn-item i{font-size:21px}
.m-bn-item span{font-size:9px;font-weight:500}

/* Desktop-Shell auf Mobilgeräten ausblenden, Mobile-Root nur auf Mobil */
#mobile-root{display:none}
@media (max-width:768px){
  #app-shell{display:none !important}
  #mobile-root.active{display:block}
}