/* SLC Truck Admin - clean mobile layout v72
   Goal: one clear vertical flow, no overlapping desktop panels. */
:root {
  --slc-mobile-top: env(safe-area-inset-top, 0px);
  --slc-mobile-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-nav-backdrop,
.mobile-topbar { display: none; }

@media (max-width: 820px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    background: #eef2f6;
  }

  body.mobile-nav-open { overflow: hidden; }

  .admin-shell,
  .admin-shell.sidebar-collapsed,
  .admin-shell.map-mode,
  .admin-shell.map-mode.sidebar-collapsed {
    display: block !important;
    min-height: 100dvh;
    grid-template-columns: none !important;
  }

  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 4500;
    display: grid;
    grid-template-columns: 46px 1fr 46px;
    align-items: center;
    gap: 8px;
    min-height: calc(60px + var(--slc-mobile-top));
    padding: calc(8px + var(--slc-mobile-top)) 10px 8px;
    background: #fff;
    border-bottom: 1px solid #dbe2ea;
  }

  .mobile-menu-btn,
  .mobile-home-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #d9e1ea;
    border-radius: 12px;
    background: #fff;
    color: #0b4ea2;
    font-size: 21px;
    font-weight: 800;
    padding: 0;
  }

  .mobile-topbar-brand {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
    color: #153454;
  }
  .mobile-topbar-brand img { width: 32px; height: 32px; object-fit: contain; border-radius: 7px; }
  .mobile-topbar-brand span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 5000;
    width: min(88vw, 330px) !important;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 14px 0 36px rgba(15,23,42,.22);
    background: #f5f6f8;
  }
  body.mobile-nav-open .sidebar { transform: translateX(0); }
  .sidebar-toggle { display: none !important; }
  .sidebar-brand { margin-top: 16px !important; }
  .sidebar-brand img { width: 72px !important; }
  .menu-btn { min-height: 50px; border-radius: 12px; }

  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 4900;
    border: 0;
    background: rgba(15,23,42,.38);
    opacity: 0;
    pointer-events: none;
  }
  body.mobile-nav-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }

  .workspace,
  .workspace-map {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }
  .workspace-map { padding: 0 !important; }

  .topbar {
    display: block !important;
    margin: 0 0 12px !important;
  }
  .topbar h2 { font-size: 24px !important; margin: 0 0 4px !important; line-height: 1.15; }
  .topbar p { font-size: 14px; line-height: 1.4; }
  .topbar-meta { display: none !important; }

  .main-content,
  .dashboard-grid,
  .dashboard-grid.two-columns,
  .kpi-grid,
  .summary-grid,
  .dkv-map-layout,
  .dkv-bottom-grid,
  .dkv-info-grid,
  .gps-grid-5,
  .summary-like {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card,
  .panel,
  .hero-panel,
  .group-item,
  .dkv-detail-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(15,23,42,.06) !important;
  }

  .panel,
  .hero-panel,
  .kpi-card,
  .summary-card { padding: 14px !important; }

  .hero-panel,
  .section-head,
  .split-head,
  .panel-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-panel h1,
  .section-head h1,
  .split-head h1 { font-size: 24px !important; margin-bottom: 4px !important; }
  .hero-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }

  .kpi-card,
  .summary-card { min-height: auto !important; }
  .kpi-value,
  .summary-card strong { font-size: 28px !important; line-height: 1.1; }

  .toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .toolbar-group { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }

  .btn,
  .input,
  .select,
  .textarea,
  input,
  select,
  textarea,
  button { max-width: 100%; }
  .btn, .input, .select, input, select { min-height: 46px; }
  .btn { width: 100%; }
  .btn.icon-only { width: 46px; }

  .table-wrap,
  .compact-table-wrap,
  .table-responsive,
  [class*="table-wrap"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 680px; }
  th, td { white-space: nowrap; }

  .group-row,
  .stat-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  /* Map: map first, details after it. No panel may float over map on phones. */
  .map-page-shell,
  .full-map-main,
  .fullscreen-map-shell {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: #eef2f6 !important;
  }

  .fullscreen-map-shell,
  .map-full,
  .map-full #leafletMap,
  #leafletMap {
    width: 100% !important;
    min-height: 58dvh !important;
    height: 58dvh !important;
    border-radius: 0 !important;
  }

  .premium-map-controls,
  .map-status-strip,
  .dkv-bottom-drawer,
  .dkv-overlay-sidebar {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    margin: 0 !important;
  }

  .premium-map-controls {
    order: 1;
    padding: 10px !important;
    background: #fff;
    border-bottom: 1px solid #dbe2ea;
  }
  .map-chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    scrollbar-width: none;
  }
  .map-chip-row::-webkit-scrollbar { display: none; }
  .map-chip-btn,
  .map-chip-label { flex: 0 0 auto; white-space: nowrap; }

  .dkv-overlay-sidebar {
    order: 3;
    background: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-top: 1px solid #dbe2ea;
    overflow: visible !important;
  }
  .dkv-sidebar-resizer { display: none !important; }
  .dkv-sidebar-list { max-height: none !important; overflow: visible !important; }

  .dkv-bottom-drawer {
    order: 4;
    background: #fff !important;
    border: 0 !important;
    border-top: 1px solid #dbe2ea !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px !important;
  }
  .map-status-strip {
    display: none !important;
  }

  .leaflet-top.leaflet-right { margin-top: 10px !important; margin-right: 8px !important; }

  .login-shell { grid-template-columns: 1fr !important; min-height: 100dvh; }
  .login-left { display: none !important; }
  .login-right { min-height: 100dvh; padding: calc(16px + var(--slc-mobile-top)) 14px calc(16px + var(--slc-mobile-bottom)); }
  .login-card { width: 100% !important; max-width: 460px; padding: 22px 16px !important; border-radius: 18px !important; }
  .login-title { font-size: 30px !important; }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .kpi-grid, .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid, .dashboard-grid.two-columns { grid-template-columns: 1fr; }
}

/* Phone drawer always uses full labels, including desktop-collapsed/map state. */
@media(max-width:820px){
 .admin-shell .sidebar{height:100dvh!important;min-height:0!important;max-height:100dvh!important;box-sizing:border-box;padding:12px 10px calc(18px + env(safe-area-inset-bottom,0px))!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .admin-shell .sidebar .sidebar-top{padding:0 4px 12px!important;min-height:0!important;height:auto!important}
 .admin-shell .sidebar .sidebar-brand{margin:0!important;display:flex!important;align-items:center;gap:12px}
 .admin-shell .sidebar .sidebar-brand img{width:52px!important;height:52px!important;object-fit:contain}
 .admin-shell .sidebar .sidebar-brand>div{display:block!important}
 .admin-shell .sidebar .menu{display:flex!important;flex-direction:column!important;gap:4px!important;padding:4px 0!important}
 .admin-shell .sidebar .menu-btn{display:flex!important;justify-content:flex-start!important;align-items:center!important;gap:12px!important;width:100%!important;height:auto!important;min-height:46px!important;padding:10px 12px!important;text-align:left!important}
 .admin-shell .sidebar .menu-icon{display:inline-flex!important;justify-content:center;align-items:center;flex:0 0 28px;width:28px!important;height:28px!important;font-size:21px!important}
 .admin-shell .sidebar .menu-label{display:block!important;visibility:visible!important;opacity:1!important;min-width:0;font-size:14px!important;line-height:1.3;white-space:normal!important}
 .admin-shell .sidebar .sidebar-footer{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;padding:12px 4px!important}
 .admin-shell .sidebar .sidebar-footer .btn{width:100%!important;min-height:44px!important}
}


/* === mobile drawer polish v76: independent from desktop/map rail === */
@media(max-width:820px){
  .admin-shell .sidebar,
  .admin-shell.sidebar-collapsed .sidebar,
  .admin-shell.map-mode .sidebar,
  .admin-shell.map-mode.sidebar-collapsed .sidebar{
    display:flex!important;
    flex-direction:column!important;
    width:min(88vw,336px)!important;
    min-width:0!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    overflow:hidden!important;
    background:#fff!important;
    border-right:1px solid #dbe3ec!important;
    box-shadow:18px 0 54px rgba(15,39,72,.24)!important;
  }

  .admin-shell .sidebar .sidebar-top,
  .admin-shell.sidebar-collapsed .sidebar .sidebar-top,
  .admin-shell.map-mode .sidebar .sidebar-top,
  .admin-shell.map-mode.sidebar-collapsed .sidebar .sidebar-top{
    position:relative!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:72px!important;
    height:auto!important;
    margin:0!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 58px 10px 12px!important;
    box-sizing:border-box!important;
    background:#fff!important;
    border-bottom:1px solid #e3e9f0!important;
  }

  .admin-shell .sidebar .sidebar-brand,
  .admin-shell.sidebar-collapsed .sidebar .sidebar-brand,
  .admin-shell.map-mode .sidebar .sidebar-brand,
  .admin-shell.map-mode.sidebar-collapsed .sidebar .sidebar-brand{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  .admin-shell .sidebar .sidebar-brand img,
  .admin-shell.sidebar-collapsed .sidebar .sidebar-brand img,
  .admin-shell.map-mode .sidebar .sidebar-brand img,
  .admin-shell.map-mode.sidebar-collapsed .sidebar .sidebar-brand img{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    object-fit:contain!important;
    border-radius:10px!important;
  }

  .admin-shell .sidebar .sidebar-brand>div,
  .admin-shell.map-mode .sidebar .sidebar-brand>div{
    display:block!important;
    min-width:0!important;
  }

  .admin-shell .sidebar .sidebar-brand strong{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:14px!important;
    line-height:1.25!important;
  }

  .admin-shell .sidebar .sidebar-brand span{
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11px!important;
    line-height:1.25!important;
  }

  .mobile-sidebar-close{
    position:absolute!important;
    top:calc(12px + env(safe-area-inset-top,0px))!important;
    right:10px!important;
    z-index:2!important;
    width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border:1px solid #dbe3ec!important;
    border-radius:12px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    background:#f5f8fb!important;
    color:#153454!important;
    font-size:24px!important;
    line-height:1!important;
    font-weight:500!important;
    cursor:pointer!important;
  }

  .admin-shell .sidebar .sidebar-toggle{display:none!important}

  .admin-shell .sidebar .sidebar-search{
    flex:0 0 auto!important;
    padding:10px 12px 4px!important;
  }

  .admin-shell .sidebar .menu,
  .admin-shell.sidebar-collapsed .sidebar .menu,
  .admin-shell.map-mode .sidebar .menu,
  .admin-shell.map-mode.sidebar-collapsed .sidebar .menu{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    padding:8px 10px 14px!important;
  }

  .admin-shell .sidebar .menu-btn,
  .admin-shell.sidebar-collapsed .sidebar .menu-btn,
  .admin-shell.map-mode .sidebar .menu-btn,
  .admin-shell.map-mode.sidebar-collapsed .sidebar .menu-btn{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:11px!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    height:auto!important;
    padding:9px 12px!important;
    border-radius:12px!important;
    text-align:left!important;
  }

  .admin-shell .sidebar .menu-icon,
  .admin-shell.map-mode .sidebar .menu-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 27px!important;
    width:27px!important;
    height:27px!important;
    margin:0!important;
  }

  .admin-shell .sidebar .menu-label,
  .admin-shell.sidebar-collapsed .sidebar .menu-label,
  .admin-shell.map-mode .sidebar .menu-label,
  .admin-shell.map-mode.sidebar-collapsed .sidebar .menu-label,
  .admin-shell .sidebar #slc-wa-entry .menu-label,
  .admin-shell.map-mode .sidebar #slc-wa-entry .menu-label{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
    color:inherit!important;
    font-size:14px!important;
    font-weight:650!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .admin-shell .sidebar #slc-wa-entry .slc-wa-entry-icon,
  .admin-shell.map-mode .sidebar #slc-wa-entry .slc-wa-entry-icon{
    flex:0 0 27px!important;
    width:27px!important;
    height:27px!important;
    margin:0!important;
  }

  .admin-shell .sidebar .sidebar-footer,
  .admin-shell.sidebar-collapsed .sidebar .sidebar-footer,
  .admin-shell.map-mode .sidebar .sidebar-footer,
  .admin-shell.map-mode.sidebar-collapsed .sidebar .sidebar-footer{
    flex:0 0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:7px!important;
    width:100%!important;
    margin:0!important;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px))!important;
    box-sizing:border-box!important;
    border-top:1px solid #e3e9f0!important;
    background:#fff!important;
  }

  .admin-shell .sidebar .sidebar-footer.center{place-items:stretch!important}

  .admin-shell.map-mode .sidebar .sidebar-user-name,
  .admin-shell.map-mode .sidebar .sidebar-user-role{
    display:block!important;
  }

  .mobile-topbar{
    grid-template-columns:44px minmax(0,1fr) 44px!important;
    min-width:0!important;
  }

  .mobile-topbar-brand{
    min-width:0!important;
    overflow:hidden!important;
  }

  .mobile-topbar-brand img{
    flex:0 0 30px!important;
    width:30px!important;
    height:30px!important;
  }
}


/* Decont mentions are never part of the WhatsApp surface. */
body.slc-wa-open #slc-decont-mentions{display:none!important}


/* === mobile brand + footer polish v77 === */
@media(max-width:820px){
  .admin-shell .sidebar .sidebar-brand{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    min-height:54px!important;
  }

  .admin-shell .sidebar .sidebar-brand>img{
    display:none!important;
  }

  .admin-shell .sidebar .sidebar-brand>div{
    display:none!important;
  }

  .admin-shell .sidebar .sidebar-brand::before{
    content:""!important;
    display:block!important;
    flex:0 0 78px!important;
    width:78px!important;
    height:52px!important;
    background:url('/login-logo-v73.png') center/contain no-repeat!important;
  }

  .admin-shell .sidebar .sidebar-brand::after{
    content:"SLC Truck Logistik"!important;
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    color:#173b68!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .admin-shell .sidebar #logoutBtn{
    width:100%!important;
    min-height:46px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid #f0caca!important;
    border-radius:12px!important;
    background:#fff7f7!important;
    color:#b42318!important;
    font-size:0!important;
    font-weight:800!important;
    padding:0 14px!important;
    box-shadow:none!important;
  }

  .admin-shell .sidebar #logoutBtn::after{
    content:"Logout"!important;
    font-size:14px!important;
    line-height:1!important;
    letter-spacing:.01em!important;
  }
}