/* ═══════════════════════════════════════════════════
   Miuix — Desktop layout (≥768px)
   NavigationRail on left, fixed TopAppBar, wider grids.
   Visual specs (padding, radius, type, color) inherit the
   mobile component styles; only layout (rail, columns,
   positioning) and PC interactions live here.
   ═══════════════════════════════════════════════════ */

@media (min-width: 768px) {
  body {
    flex-direction: row;
  }

  /* ── Nav becomes left sidebar ── */
  .navbar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--content-gap);
    top: 0;
    right: auto;
    bottom: 0;
    width: var(--nav-rail-collapsed-w);
    height: 100%;
    padding: var(--nav-rail-pad-y) 0;
    padding-bottom: 0;
    border-top: none;
    border-right: 0.5px solid var(--mi-divider-line);
    order: -1;
  }

  .nav-item {
    flex: none;
    width: var(--nav-rail-item-w);
    height: 64px;
  }

  .selection-bar {
    inset: 18px 10px 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--content-gap);
    min-height: auto;
  }

  .selection-bar button {
    flex: none;
    width: var(--nav-rail-item-w);
    height: 64px;
    min-height: 64px;
  }

  /* ── TopAppBar: fixed with glass ── */
  .topbar {
    top: 0;
    left: var(--nav-rail-collapsed-w);
    right: 0;
    z-index: 101;
  }

  .topbar-icon-action,
  .miuix-window-menu {
    right: max(28px, calc((100vw - var(--content-max) - var(--nav-rail-collapsed-w)) / 2 + 28px));
  }

  /* ── Scroll area fills remaining space ── */
  .scroll-area {
    flex: 1;
    margin-left: var(--nav-rail-collapsed-w);
    padding-top: var(--topbar-h);
    padding-bottom: 34px;
    scrollbar-width: thin;
    scrollbar-color: var(--mi-sheet-handle-color) transparent;
  }

  .scroll-area::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
  }

  .scroll-area::-webkit-scrollbar-thumb {
    border-radius: var(--r-full);
    background: var(--mi-sheet-handle-color);
  }

  .scroll-area::-webkit-scrollbar-track {
    background: transparent;
  }

  /* ── Wider grids ── */
  .photo-grid,
  .post-photo-row,
  .timeline-entry-body > .photo-grid {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
  }

  .feed-redesign .timeline-entry {
    grid-template-columns: var(--timeline-rail-w-desktop) minmax(0, 1fr);
  }

  .city-card-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ── FAB ── */
  .fab {
    bottom: 28px;
    right: max(28px, calc((100vw - var(--content-max) - var(--nav-rail-collapsed-w)) / 2 + 28px));
  }

  .fab:hover {
    transform: scale(var(--mi-fab-hover-scale));
  }

  /* ── Empty state ── */
  .empty-state {
    margin-top: 120px;
  }
}

/* ── Wide desktop (≥1200px) ── */
@media (min-width: 1200px) {
  .photo-grid,
  .post-photo-row,
  .timeline-entry-body > .photo-grid {
    grid-template-columns: repeat(6, minmax(128px, 1fr));
  }
}

/* ═══ PC interactions: hover feedback (mouse only) ═══ */
@media (hover: hover) and (pointer: fine) {
  .selection-bar button:hover:not(:disabled) {
    background: var(--mi-state-hover);
  }

  .text-icon-btn:hover,
  .miuix-searchbar-clear:hover {
    background: var(--mi-state-hover);
  }

  .city-card:hover {
    background: color-mix(in srgb, var(--mi-on-surface) 4%, var(--mi-surface-container));
  }

  .feed-redesign .media-card:hover,
  .feed-redesign .moment-text:hover {
    border-color: color-mix(in srgb, var(--mi-outline) 88%, transparent);
  }

  .miuix-confirm-actions button:hover {
    background: var(--mi-dialog-button-pressed);
  }

  .miuix-confirm-overlay:not(.destructive) .miuix-confirm-ok:hover {
    background: color-mix(in srgb, var(--mi-primary) 90%, black);
  }

  .miuix-confirm-overlay.destructive .miuix-confirm-ok:hover,
  .miuix-confirm-overlay.error .miuix-confirm-ok:hover {
    background: color-mix(in srgb, var(--mi-error) 90%, black);
  }

  .quickedit-icon-btn:hover {
    background: var(--mi-surface-container-high);
  }

  .quickedit-action.secondary:hover {
    background: color-mix(in srgb, var(--mi-on-secondary-variant) 8%, var(--mi-secondary-variant));
  }

  .quickedit-action.primary:hover {
    background: color-mix(in srgb, var(--mi-primary) 90%, black);
  }

  .quickedit-error .quickedit-action.primary:hover {
    background: color-mix(in srgb, var(--mi-error) 90%, black);
  }

  .snackbar-action:hover {
    background: var(--mi-primary-state-hover);
  }

  .snackbar-undo .snackbar-action:hover {
    background: color-mix(in srgb, var(--mi-primary) 90%, black);
  }
}