/* Shared mobile controls; desktop rail and the flat navigation contract remain. */
.nav-tab[hidden]{display:none!important}
#dashboard-mobile-nav{display:none}
/* The v3 extraction kept the widget skin but lost its closed/fixed layout. */
#widget-modal{display:none;position:fixed;inset:0;z-index:9800;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
#widget-modal.open{display:flex}
#widget-modal .modal-box{position:relative;width:min(680px,100%);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:24px;box-sizing:border-box}
#widget-modal .modal-close{position:sticky;display:flex;align-items:center;justify-content:center;margin-left:auto;top:0;min-width:44px;min-height:44px;background:var(--surface-1,var(--bg-card));color:var(--text-1,var(--ink));border:1px solid var(--line-2,var(--border-heavy));border-radius:8px;z-index:1;cursor:pointer}
body.modal-open #main-content{overflow:hidden!important}
#dashboard-mobile-menu{width:min(560px,calc(100vw - 20px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line-2,var(--border-heavy));border-radius:14px;background:var(--surface-1,var(--bg-card));color:var(--text-1,var(--ink));font-family:var(--font-sans,var(--font-ui));box-sizing:border-box}
#dashboard-mobile-menu::backdrop{background:#0008;backdrop-filter:blur(3px)}
#dashboard-mobile-menu header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;background:inherit;border-bottom:1px solid var(--line-1,var(--border));height:auto}
#dashboard-mobile-menu h2{font-size:20px;margin:0}#dashboard-mobile-menu button{font:inherit;color:inherit;cursor:pointer;min-height:44px;touch-action:manipulation}
#dashboard-mobile-menu [data-menu-close]{padding:8px 12px;border:1px solid var(--line-2,var(--border-heavy));background:transparent;border-radius:8px;font-size:14px}
.dashboard-nav-search{display:grid;gap:6px;padding:16px;font-size:13px}.dashboard-nav-search input{min-width:0;width:100%;box-sizing:border-box;border:1px solid var(--line-2,var(--border-heavy));border-radius:8px;padding:12px;font:inherit;font-size:16px;background:var(--surface-canvas,var(--bg-input));color:inherit}
.dashboard-nav-list{padding:0 16px 20px}.dashboard-nav-list h3{font-size:12px;color:var(--text-2,var(--ink-dim));text-transform:uppercase;letter-spacing:.08em;margin:20px 0 8px}.dashboard-nav-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;width:100%;border:0;border-bottom:1px solid var(--line-1,var(--border));background:none;padding:12px 10px}.dashboard-nav-list button[aria-current=page]{background:var(--accent-soft);color:var(--accent);border-radius:8px}.dashboard-nav-list button span{font-size:12px}
body.dashboard-dialog-open{overflow:hidden}body.dashboard-dialog-open #main-content{overflow:hidden!important}
#dashboard-mobile-nav :focus-visible,#dashboard-mobile-menu :focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:760px){
  #dashboard #tab-nav,body[data-dashboard-scope=personal] #tab-nav{display:none!important}
  #dashboard-mobile-nav{display:flex;position:fixed;inset:auto 0 0;z-index:9600;align-items:stretch;justify-content:space-evenly;min-height:58px;padding:4px 8px max(4px,env(safe-area-inset-bottom));background:var(--surface-1,var(--bg-card));border-top:1px solid var(--line-2,var(--border-heavy));box-sizing:border-box;gap:4px}
  #dashboard-mobile-nav button{flex:1;min-width:0;min-height:48px;padding:8px 4px;border:0;border-radius:8px;background:none;color:var(--text-2,var(--ink-dim));font:600 13px/1.3 var(--font-sans,var(--font-ui));cursor:pointer;touch-action:manipulation}
  #dashboard-mobile-nav button[aria-current=page]{color:var(--accent);background:var(--accent-soft)}
  #main-content{margin-left:0!important;margin-bottom:calc(62px + env(safe-area-inset-bottom))!important;padding:16px!important;min-width:0}
  #header{padding:10px 14px!important;min-height:58px;height:auto!important;gap:10px;flex-wrap:wrap;box-sizing:border-box}
  #header .header-right{gap:6px;flex-wrap:nowrap;justify-content:flex-end;min-width:0;width:auto!important;flex:0 1 auto}
  #header .header-stats,#header .clock,#v3-rail-pin,#v3-shell-toggle,#header #theme-toggle,#header #users-admin-btn,#header #logout-btn{display:none!important}
  #header .header-brand{gap:6px;width:auto!important;flex:0 1 auto}#header .logo{font-size:15px;white-space:nowrap}
  #header button{min-height:40px;min-width:40px;padding:8px!important;font-size:12px}
  .tab-view{min-width:0;max-width:100%;overflow-wrap:anywhere}
  #dashboard .tab-view{padding:0!important;width:100%;box-sizing:border-box}
  .tab-view input,.tab-view select,.tab-view textarea{max-width:100%;min-width:0;box-sizing:border-box;font-size:16px}
  .tab-view pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
  .tab-view table{max-width:100%}.tab-view img,.tab-view canvas{max-width:100%}
  .crud-modal-box,.modal-content{width:min(600px,calc(100vw - 24px))!important;max-height:calc(100dvh - 32px)!important;overflow:auto;box-sizing:border-box}
  #login-screen{width:calc(100% - 32px);max-width:380px;box-sizing:border-box;padding:24px 20px!important}
  #login-screen input{box-sizing:border-box;min-height:48px;font-size:16px!important;width:100%;max-width:100%}
  #login-btn{min-height:48px;font-size:16px!important}
  #sticky-fab{bottom:calc(78px + env(safe-area-inset-bottom))!important;right:16px!important;width:48px;height:48px}
  #sticky-fab-menu{bottom:calc(136px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 32px)}
  .family-dialog-actions{position:sticky;bottom:-16px;background:var(--surface-1,var(--bg-card));padding:12px 0 max(12px,env(safe-area-inset-bottom));z-index:1}
  /* Schließen gleitet sichtbar: visibility schaltet erst nach dem Slide um
     (vorher sofort -> der Drawer verschwand ohne Bewegung). Gilt auch im Band
     721–760 px, in dem panel-mobile-perfect.css keine Transition setzt. */
  #tab-chats #chat-sidebar{transform:translateX(-110%)!important;visibility:hidden;pointer-events:none;top:0;max-height:100%;box-sizing:border-box;transition:transform var(--dur-3,220ms) var(--ease-sheet,cubic-bezier(.32,.72,0,1)),visibility 0s linear var(--dur-3,220ms)}
  #tab-chats #chat-sidebar.mobile-open{transform:translateX(0)!important;visibility:visible;pointer-events:auto;transition:transform var(--dur-3,220ms) var(--ease-sheet,cubic-bezier(.32,.72,0,1)),visibility 0s linear 0s}
  #tab-chats #msg-header{display:flex!important;flex-wrap:wrap;gap:8px;min-height:60px;padding:10px 12px;box-sizing:border-box}
  #tab-chats #chat-area{height:calc(100dvh - 170px);min-height:340px;max-height:760px;display:flex;flex-direction:column;position:relative}
  #tab-chats #messages{flex:1;min-height:0;overflow:auto;padding:12px}
  #tab-chats #chat-input-row{padding:10px!important;flex-shrink:0;box-sizing:border-box}
  #tab-chats #chat-input{font-size:16px!important;min-height:44px;min-width:0}
  #tab-chats #chat-send-btn{min-height:44px;min-width:60px}
  body.keyboard-open #dashboard-mobile-nav,body.keyboard-open #sticky-fab,body.keyboard-open #akhilius-pet{display:none!important}
  body.keyboard-open #main-content,body.keyboard-open[data-dashboard-scope=personal] main{margin-bottom:0!important}
  body.keyboard-open #tab-chats #chat-area{height:calc(var(--app-vh,100dvh) - 100px);min-height:180px}
  #tab-chats .chat-header-actions{width:100%;justify-content:flex-end}
  #tab-chats .chat-sidebar-backdrop.visible{z-index:49}
  #tab-chats .sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
  #chat-sidebar-close{display:block;min-height:40px;padding:8px;background:none;color:inherit;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:12px}
  .agenda-panel,.agenda-cols,.agenda-card{width:100%;min-width:0;box-sizing:border-box}
  .agenda-cols{grid-template-columns:minmax(0,1fr)!important}.agenda-item{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;gap:8px!important}.agenda-item .a-title{font-size:14px;line-height:1.45}.agenda-item .agenda-src{grid-column:2;font-size:11px}.agenda-refresh{float:none;margin:0 0 12px;min-height:40px!important}
  .st-nav{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;gap:6px!important}.st-nav-item{min-height:40px!important;font-size:13px!important}
  /* v5 (25.09.2026): "Bereiche" als Bottom-Sheet wie bei iOS - am unteren Rand,
     volle Breite, oben gerundet, Daumen-nah. Hochfedern: v3/motion.css. */
  #dashboard-mobile-menu{margin:auto 0 0;width:100vw;max-width:100vw;max-height:85dvh;border-width:1px 0 0;border-radius:var(--r-2xl,20px) var(--r-2xl,20px) 0 0;padding-bottom:env(safe-area-inset-bottom);box-shadow:var(--shadow-3,0 -8px 32px #0006)}
  #dashboard-mobile-menu::backdrop{background:var(--surface-overlay,#0008);backdrop-filter:none}
  #dashboard-mobile-menu header::before{content:'';position:absolute;top:6px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--line-3,#fff3)}
  #dashboard-mobile-menu header{position:sticky}
}
body.family-modal-open{overflow:hidden}body.family-modal-open #main-content{overflow:hidden!important}
@media(min-width:761px){#chat-sidebar-close{display:none}}
@layer legacy{@media(max-width:760px){#dashboard #tab-chats #chat-sidebar{position:absolute!important;transform:translateX(-110%)!important}#dashboard #tab-chats #chat-sidebar.mobile-open{transform:translateX(0)!important}
  /* 721–760 px: der Drawer ist hier schon off-canvas, aber panel-mobile-perfect.css
     blendet Hamburger und Backdrop ab 721 px mit !important aus (Layer legacy).
     Gleiche Layer, höhere Spezifität: ohne das war die Chat-Liste in diesem
     Band nicht erreichbar. */
  #dashboard .mobile-chat-toggle{display:inline-flex!important;align-items:center;justify-content:center}
  #dashboard .chat-sidebar-backdrop{display:block!important;position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity var(--dur-3,220ms) ease;z-index:49}
  #dashboard .chat-sidebar-backdrop.visible{opacity:1;pointer-events:auto}}}
@media(prefers-reduced-motion:reduce){#dashboard-mobile-menu,#dashboard-mobile-nav{scroll-behavior:auto;transition:none}}

/* Explorer detail sheets must not occupy space or accept focus while closed. */
.expl-panel{box-sizing:border-box;background:var(--surface-1,var(--bg-card))}
.expl-panel:not(.open){visibility:hidden;pointer-events:none}
.expl-panel.open{visibility:visible;pointer-events:auto}
@media(max-width:760px){.expl-panel{max-height:calc(100dvh - 180px)}.expl-shell{min-width:0}.expl-toolbar{flex-wrap:wrap}}
