/* M-BLOCK Mobile Alpha 02 – touchoptimierte PWA-Oberfläche */
:root {
  --mobile-nav-height: 76px;
  --mobile-top-height: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html.mblock-mobile-pwa, html.mblock-mobile-pwa body { overscroll-behavior: none; }
html.mblock-mobile-device button,
html.mblock-mobile-device input,
html.mblock-mobile-device select { min-height: 44px; }
html.mblock-mobile-device button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
html.mblock-mobile-device .project-card:hover { transform: none; }

@media (max-width: 900px), (pointer: coarse) {
  body { min-height: 100dvh; }
  .shell { display: block; min-height: 100dvh; padding-bottom: calc(var(--mobile-nav-height) + var(--safe-bottom)); }
  .sidebar {
    position: fixed; z-index: 88; left: 0; right: 0; bottom: 0;
    height: calc(var(--mobile-nav-height) + var(--safe-bottom));
    padding: 7px max(8px, var(--safe-right)) var(--safe-bottom) max(8px, var(--safe-left));
    display: block; background: rgba(23,26,34,.98); border-top: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 -10px 30px rgba(15,18,24,.18); backdrop-filter: blur(18px);
  }
  .sidebar .brand, .sidebar-footer { display: none !important; }
  .nav { height: 100%; display: flex; gap: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; }
  .nav::-webkit-scrollbar { display: none; }
  .nav button {
    flex: 1 0 82px; min-width: 82px; height: 58px; padding: 5px 5px 4px; border-radius: 11px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
    color: #d9dde5; text-align: center; scroll-snap-align: center; font-size: 10px; line-height: 1.05;
  }
  .nav button::before { display: block; font-size: 20px; line-height: 1; font-weight: 400; }
  #projectsNavBtn::before { content: '▦'; }
  #viewerVersionsNavBtn::before { content: '◫'; }
  #assetsNavBtn::before { content: '▤'; }
  #membersNavBtn::before { content: '♙'; }
  #syncNavBtn::before { content: '↻'; }
  #adminNavBtn::before { content: '⚙'; }
  #desktopNavBtn::before { content: '▣'; }
  .nav button.active { color: #171a22; background: var(--yellow); }
  .nav button .label { display: block !important; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-badge { position: absolute; transform: translate(19px,-18px); min-width: 18px; height: 18px; padding: 0 4px; font-size: 9px; }

  .main { min-height: calc(100dvh - var(--mobile-nav-height) - var(--safe-bottom)); display: grid; grid-template-rows: calc(var(--mobile-top-height) + var(--safe-top)) 1fr; }
  .topbar {
    min-height: calc(var(--mobile-top-height) + var(--safe-top)); padding: var(--safe-top) max(14px,var(--safe-right)) 0 max(14px,var(--safe-left));
    position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.97);
  }
  .topbar h1 { font-size: 18px; }
  .user-meta span { display: none; }
  .user-meta strong { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .content { padding: 14px max(12px,var(--safe-right)) 20px max(12px,var(--safe-left)); }
  .page-header { flex-direction: column; align-items: stretch; gap: 13px; margin-bottom: 14px; }
  .page-header h2 { font-size: 22px; }
  .page-header p { font-size: 13px; line-height: 1.4; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .actions button { width: 100%; }
  .project-grid { grid-template-columns: 1fr; gap: 12px; }
  .project-card { padding: 15px; border-radius: 15px; gap: 11px; }
  .project-card dl { grid-template-columns: 86px 1fr; font-size: 12px; }
  .card-footer { align-items: stretch; flex-direction: column; }
  .card-action-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .card-action-group .primary { grid-column: 1 / -1; }
  .card-action-group button { width: 100%; min-width: 0; }
  .offline-app-banner, .sync-app-banner { grid-template-columns: 1fr; }

  .modal-backdrop { padding: 0; place-items: stretch; background: rgba(13,16,24,.32); }
  .modal, .asset-modal, .members-modal, .revision-modal, .viewer-release-modal, .sync-modal, .admin-modal, .desktop-modal, .conflict-modal {
    width: 100vw !important; max-width: none !important; height: 100dvh; max-height: none !important;
    margin: 0; border-radius: 0; padding: calc(16px + var(--safe-top)) max(14px,var(--safe-right)) calc(18px + var(--safe-bottom)) max(14px,var(--safe-left));
    overflow: auto; box-shadow: none;
  }
  .revision-head { position: sticky; top: calc(-16px - var(--safe-top)); z-index: 10; margin: calc(-16px - var(--safe-top)) calc(-14px - var(--safe-right)) 12px calc(-14px - var(--safe-left)); padding: calc(12px + var(--safe-top)) max(14px,var(--safe-right)) 12px max(14px,var(--safe-left)); background: rgba(255,255,255,.98); border-bottom: 1px solid var(--border); }
  .modal-actions { position: sticky; bottom: calc(-18px - var(--safe-bottom)); z-index: 9; margin: 16px calc(-14px - var(--safe-right)) calc(-18px - var(--safe-bottom)); padding: 10px max(14px,var(--safe-right)) calc(10px + var(--safe-bottom)) max(14px,var(--safe-left)); background: rgba(255,255,255,.98); border-top: 1px solid var(--border); }
  .modal-actions button { flex: 1; }

  .asset-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .asset-toolbar-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 7px; }
  .asset-toolbar-actions button { min-width: 0; padding-left: 8px; padding-right: 8px; }
  .asset-dropzone { min-height: 94px; padding: 18px 12px; text-align: center; }
  .asset-dropzone span { display: block; margin-top: 6px; font-size: 11px; line-height: 1.35; }
  .asset-row { grid-template-columns: 52px minmax(0,1fr); gap: 9px; align-items: start; padding: 13px 5px; }
  .asset-kind { grid-row: span 2; }
  .asset-copy strong { font-size: 13px; overflow-wrap: anywhere; }
  .asset-copy span, .asset-copy small { font-size: 10px; }
  .asset-autoload { grid-column: 2; justify-self: start; }
  .asset-actions { grid-column: 2; width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .asset-actions button { width: 100%; min-width: 0; }
  .asset-upload-row { grid-template-columns: 52px minmax(0,1fr); }
  .asset-upload-state { grid-column: 2; text-align: left; }

  .viewer-page { inset: 0; grid-template-rows: calc(64px + var(--safe-top)) 1fr; z-index: 120; }
  .viewer-header { padding: var(--safe-top) max(8px,var(--safe-right)) 0 max(8px,var(--safe-left)); gap: 7px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .viewer-header::-webkit-scrollbar { display: none; }
  .viewer-header .back { flex: 0 0 42px; }
  .viewer-project-icon { width: 34px; height: 34px; }
  .viewer-title { flex: 0 1 42vw; min-width: 130px; }
  .viewer-title strong { font-size: 13px; }
  .viewer-title span { font-size: 10px; }
  .viewer-spacer { min-width: 4px; }
  .viewer-action { flex: 0 0 auto; min-height: 40px; padding: 8px 10px; font-size: 11px; }
  .cloud-state { flex: 0 0 auto; max-width: 150px; min-width: 42px; min-height: 40px; padding: 7px 9px; }
  .cloud-state span:last-child { max-width: 112px; }
  .viewer-frame { min-height: 0; }

  .login-page { display: block; padding: 0; min-height: 100dvh; background: #fff; }
  .login-card { width: 100%; min-height: 100dvh; border: 0; border-radius: 0; padding: calc(28px + var(--safe-top)) max(22px,var(--safe-right)) calc(28px + var(--safe-bottom)) max(22px,var(--safe-left)); box-shadow: none; }
  .login-logo img { width: 68px; height: 68px; }
  .login-logo h1 { font-size: 25px; }
  .form-grid { gap: 13px; }
  input, select { font-size: 16px; }
}

@media (max-width: 430px) {
  .actions { grid-template-columns: 1fr; }
  .asset-toolbar-actions { grid-template-columns: 1fr 1fr; }
  .asset-toolbar-actions .primary { grid-column: 1 / -1; }
  .card-action-group { grid-template-columns: 1fr 1fr; }
  .topbar { padding-left: 10px; padding-right: 10px; }
  .topbar h1 { font-size: 16px; }
}

@media (orientation: landscape) and (max-height: 620px) and (pointer: coarse) {
  :root { --mobile-nav-height: 62px; }
  .sidebar { padding-top: 3px; }
  .nav button { height: 49px; }
  .nav button::before { font-size: 17px; }
  .nav button .label { font-size: 9px; }
  .viewer-page { grid-template-rows: calc(54px + var(--safe-top)) 1fr; }
}

.pwa-toast {
  position: fixed; z-index: 1000; left: max(12px,var(--safe-left)); right: max(12px,var(--safe-right)); bottom: calc(var(--mobile-nav-height) + var(--safe-bottom) + 12px);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center;
  padding: 14px; border-radius: 16px; background: #171a22; color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.pwa-toast-copy { display: grid; gap: 4px; }
.pwa-toast-copy strong { font-size: 14px; }
.pwa-toast-copy span { color: #cdd2dc; font-size: 11px; line-height: 1.4; }
.pwa-toast-actions { display: flex; gap: 7px; }
.pwa-toast button { min-height: 40px; border-radius: 10px; padding: 9px 11px; font-weight: 800; }
.pwa-toast-primary { border: 0; background: var(--yellow); color: #111; }
.pwa-toast-secondary { border: 1px solid #4c5260; background: transparent; color: #fff; }
html.mblock-standalone .pwa-toast.install { display: none; }
html.mblock-network-offline .status-dot:not(.ok) { background: #6489a7; }
@media (min-width: 901px) and (pointer: fine) {
  .pwa-toast { left: auto; width: min(520px,calc(100vw - 28px)); bottom: 18px; }
}


/* Mobile Alpha 02 – stabiler vertikaler Projekt-Scroll und kompakte Listenzeilen */
@media (max-width:900px), (pointer:coarse) {
  html, body, #app { height:100%; min-height:0; overflow:hidden; }
  body { height:100dvh; min-height:0; }
  .shell {
    height:100dvh;
    min-height:0;
    padding-bottom:0;
    overflow:hidden;
  }
  .main {
    height:calc(100dvh - var(--mobile-nav-height) - var(--safe-bottom));
    min-height:0;
    overflow:hidden;
    grid-template-rows:calc(var(--mobile-top-height) + var(--safe-top)) minmax(0,1fr);
  }
  .content {
    min-height:0;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    scrollbar-gutter:stable;
    padding-bottom:calc(28px + var(--safe-bottom));
  }
  #projectArea { min-height:0; }
  .project-list { gap:8px; padding-bottom:6px; }
  .project-list-head { display:none; }
  .project-list-item {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "identity badges"
      "customer customer"
      "viewer viewer"
      "actions actions";
    gap:8px 10px;
    padding:12px;
    border-radius:13px;
    box-shadow:none;
  }
  .project-list-item:hover { transform:none; box-shadow:none; }
  .project-list-identity { grid-area:identity; grid-template-columns:auto minmax(0,1fr); gap:8px; }
  .project-list-item .number { max-width:104px; font-size:9px; padding:4px 7px; }
  .project-list-title h3 { font-size:15px; }
  .project-list-title span { font-size:9px; }
  .project-list-customer { grid-area:customer; grid-template-columns:72px minmax(0,1fr); align-items:baseline; gap:7px; }
  .project-list-customer::before { content:'Kunde'; color:var(--muted); font-size:10px; }
  .project-list-customer strong { font-size:11px; }
  .project-list-customer span { grid-column:2; font-size:10px; }
  .project-list-viewer { grid-area:viewer; grid-template-columns:72px minmax(0,1fr); align-items:baseline; gap:7px; }
  .project-list-viewer::before { content:'Viewer'; color:var(--muted); font-size:10px; }
  .project-list-viewer strong { font-size:10.5px; }
  .project-list-viewer span { grid-column:2; font-size:10px; }
  .project-list-badges { grid-area:badges; justify-content:flex-end; align-self:start; max-width:145px; }
  .project-list-badges .role-pill,
  .project-list-badges .project-lock-pill,
  .project-list-badges .project-sync-pill { min-height:20px; padding:4px 7px; font-size:8.5px; max-width:138px; }
  .project-list-actions { grid-area:actions; justify-content:stretch; display:flex; flex-wrap:wrap; gap:7px; padding-top:2px; }
  .project-open-btn { flex:1 1 145px; min-width:0; min-height:42px; }
  .project-list-more { flex:0 1 98px; min-width:88px; }
  .project-list-more summary { min-height:42px; }
  .project-list-more[open] { flex:1 0 100%; }
  .project-list-more[open] summary { width:100%; }
  .project-list-more-panel {
    position:static;
    width:100%;
    margin-top:7px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    box-shadow:none;
    background:#f7f8fa;
  }
  .project-list-more-panel button { min-width:0; text-align:center; }
}
@media (max-width:380px) {
  .project-list-item { grid-template-areas:"identity identity" "badges badges" "customer customer" "viewer viewer" "actions actions"; }
  .project-list-badges { justify-content:flex-start; max-width:none; }
}