/* ============================================================
   Nexus - Tablet Stylesheet (Tablet View: 768px - 1024px)
   ============================================================ */

.mobile-app-shell {
  max-width: 720px;
  margin: 0 auto;
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  padding-bottom: 90px;
}

.mobile-content {
  padding: 1.75rem;
  gap: 1.5rem;
}

.hero-headline {
  font-size: 2.1rem;
}

.hero-subtext {
  font-size: 1rem;
}

/* Tablet Grid: 4 items arranged nicely */
.dashboard-icon-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
}

.icon-tile {
  padding: 1.4rem;
}

.tile-icon-box {
  width: 54px;
  height: 54px;
}

.tile-title {
  font-size: 1.1rem;
}

.tile-desc {
  font-size: 0.85rem;
}

/* Tablet Modal: Centered dialog rather than mobile bottom sheet */
.modal-backdrop {
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.modal-dialog {
  border-radius: var(--radius-lg);
  max-width: 540px;
  width: 100%;
  transform: translateY(16px) scale(0.97);
  transition: transform var(--transition-normal);
  border: 1px solid var(--border-subtle);
}

.modal-backdrop.open .modal-dialog {
  transform: translateY(0) scale(1);
}

.modal-sheet-handle {
  display: none;
}

/* Tablet Floating Bottom Nav Pill */
.mobile-bottom-nav {
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 3rem);
  max-width: 660px;
  bottom: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  height: 68px;
}

.nav-tab-item {
  font-size: 0.8rem;
  gap: 0.35rem;
}

/* Tablet Toast Positioning */
.toast-container {
  bottom: 96px;
  right: 2rem;
  left: auto;
  transform: none;
  max-width: 380px;
  width: auto;
}

/* Auth Tablet */
.auth-shell {
  max-width: 500px;
}

.auth-card {
  padding: 2.25rem 2rem;
}