/* ShiftFlow 11.5 – Mobile App Experience */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 760px) {
  body {
    padding-bottom: 78px !important;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 1200;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;

    padding: 7px;
    border: 1px solid var(--app-border);
    border-radius: 20px;

    background: color-mix(in srgb, var(--app-surface) 92%, transparent);
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav a {
    display: grid;
    place-items: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 14px;
    color: var(--app-text-soft);
    text-decoration: none;
    font-size: 8px;
    font-weight: 800;
  }

  .mobile-bottom-nav a span {
    font-size: 17px;
  }

  .mobile-bottom-nav a.active {
    color: white;
    background: linear-gradient(135deg,var(--accent-a),var(--accent-b));
  }

  button,
  .button,
  input,
  select {
    min-height: 44px;
  }

  .dashboard-widget {
    border-radius: 18px;
  }

  .app-main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .app-topbar h1 {
    font-size: clamp(34px, 10vw, 50px) !important;
  }
}