/* Mobile / tablet layout — breakpoint must match MOBILE_NAV_QUERY in store.js */

@media (max-width: 900px) {
  .app-layout,
  .app-layout--sidebar-collapsed {
    --sidebar-current-width: 0px;
  }

  .app-topbar {
    height: calc(var(--topbar-height) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 0.75rem 0 0.75rem;
    gap: 0.5rem;
  }

  .app-topbar__menu-btn {
    display: inline-flex;
  }

  .app-topbar__title {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-menu__meta,
  .user-menu__chev {
    display: none;
  }

  .user-menu__trigger {
    padding: 0.2rem;
    gap: 0;
  }

  .user-menu__popover {
    min-width: min(16rem, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
  }

  .app-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 30, 0.46);
    z-index: 350;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .app-sidebar-backdrop--open {
    opacity: 1;
    pointer-events: auto;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(19.5rem, 80vw) !important;
    height: 100dvh;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translate3d(110%, 0, 0);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: none;
    z-index: 400;
  }

  .app-layout--mobile-nav-open .app-sidebar {
    transform: translate3d(0, 0, 0);
    box-shadow: -12px 0 36px rgba(0, 0, 0, 0.28);
  }

  .landing-card {
    padding: 1.5rem 1.15rem;
    max-width: 100%;
  }

  .login-page {
    min-height: 100dvh;
    padding: max(1.25rem, env(safe-area-inset-top, 0px)) 1rem 1.5rem;
    background: linear-gradient(160deg, #5034ff 0%, #7c3aed 38%, #f6f7fb 38%);
  }

  .otp-row {
    gap: 0.35rem;
  }

  .otp-digit,
  .settings-otp-digit {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 2.75rem;
    height: 2.75rem;
    font-size: 1.125rem;
  }

  .workspaces-page__head,
  .workspaces-page__head--main {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1rem 0.85rem;
    gap: 0.75rem;
  }

  .workspaces-page__title {
    font-size: 1.2rem;
  }

  .workspaces-page__head .btn {
    width: 100%;
  }

  .workspace-grid,
  .board-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
    gap: 0.75rem;
  }

  .ws-page-header {
    padding: 0.85rem 1rem;
  }

  .ws-page-header__main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .ws-page-header__identity {
    min-width: 0;
    gap: 0.75rem;
  }

  .ws-page-header__identity > div {
    min-width: 0;
  }

  .ws-page-header__dot {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
  }

  .ws-page-header__title {
    font-size: 1.15rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ws-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.45rem;
  }

  .ws-page-header__actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    justify-content: center;
    min-height: 2.5rem;
    padding-inline: 0.5rem;
    font-size: 0.8125rem;
  }

  .workspace-empty {
    padding: 2rem 1rem;
  }

  .empty-state {
    padding: 2rem 1rem;
    min-height: 0;
  }

  .settings-page {
    padding: 1rem 1rem 2rem;
  }

  .settings-profile-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    gap: 0.85rem;
  }

  .settings-panel__section,
  .settings-save-bar {
    padding: 1rem;
  }

  .settings-save-bar {
    justify-content: stretch;
  }

  .settings-save-bar .btn {
    width: 100%;
  }

  .settings-mobile-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-mobile-row .btn {
    width: 100%;
  }

  .board-settings-invite__row {
    grid-template-columns: 1fr;
  }

  .board-settings-invite__row .btn {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .invite-user-panel__lookup-row {
    flex-direction: column;
    align-items: stretch;
  }

  .invite-user-panel__lookup-row .btn {
    width: 100%;
  }

  .col-section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .col-add-inline__actions {
    justify-content: stretch;
  }

  .col-add-inline__actions .btn {
    flex: 1;
    min-width: 0;
  }

  .lightbox__footer .btn {
    min-height: 2.5rem;
  }

  .lightbox-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .lightbox,
  .lightbox--sm,
  .lightbox--lg {
    max-width: 100%;
    max-height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px)));
    border-radius: 16px 16px 0 0;
  }

  .lightbox__header,
  .lightbox__body,
  .lightbox__footer {
    padding-inline: 1rem;
  }

  .lightbox__footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .drawer__header,
  .drawer__preview,
  .drawer__updates-head {
    padding-inline: 1rem;
  }

  .drawer__header {
    padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
  }

  .drawer__composer {
    padding-inline: 1rem;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }

  .drawer-preview-row {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }

  .update-compose__bar {
    flex-wrap: wrap;
    align-items: stretch;
  }

  .update-compose__actions {
    width: 100%;
    justify-content: flex-end;
  }

  .forum-page {
    padding: 1rem 0.85rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  .forum-page__head .btn {
    width: 100%;
  }

  .forum-page__filters {
    width: 100%;
  }

  .forum-page__empty .btn {
    width: 100%;
    min-height: 2.5rem;
  }

  .update-compose__hint {
    display: none;
  }

  .settings-avatar-row {
    gap: 0.45rem;
  }

  .settings-avatar-row .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-height: 2.5rem;
  }

  .settings-avatar-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .forum-page__title {
    font-size: 1.25rem;
  }

  .forum-post--depth-2,
  .forum-post--depth-3 {
    margin-right: 0.55rem;
  }

  .forum-compose__actions {
    flex-wrap: wrap;
  }

  .forum-compose__actions .btn {
    flex: 1;
  }

  .toast-container {
    width: min(360px, calc(100vw - 1.25rem));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .board-table-scroll {
    padding-inline-end: 0.75rem;
    padding-bottom: 1.5rem;
  }

  .board-group-table-wrap,
  .subitems-panel__scroll {
    overscroll-behavior-x: contain;
  }

  .board-hint-columns,
  .board-columns-bar {
    margin-inline: 0.75rem;
  }

  .board-group-block {
    margin: 0 0.75rem 1.5rem;
  }

  .board-group-top__title {
    font-size: 1.05rem;
  }

  .board-table--group,
  .subitems-table {
    --board-sticky-name: min(12.5rem, 52vw);
    --board-sticky-check: 2.25rem;
  }

  .board-col-data {
    width: 7.25rem;
  }

  .board-col-data--date {
    width: 8rem;
  }

  .board-col-data--timer {
    width: 9.5rem;
  }

  .board-cell--timer {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }

  .timer-btn {
    width: 1.75rem;
    height: 1.75rem;
  }

  .subitems-panel {
    padding-inline-start: 1.5rem;
  }

  .subitems-panel__rail {
    inset-inline-start: 0.65rem;
  }

  .board-bulk-bar {
    width: 100%;
    inset-inline-end: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  }

  .board-bulk-bar__count {
    width: 100%;
    text-align: center;
  }

  .board-bulk-bar__actions {
    width: 100%;
    justify-content: center;
  }

  .board-bulk-bar__btn {
    min-height: 2.25rem;
    padding: 0.4rem 0.7rem;
  }

  .board-table-scroll--bulk {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  .date-picker-popover,
  .status-picker,
  .person-picker,
  .board-row-menu-popover {
    max-width: calc(100vw - 1rem);
  }

  .date-picker-popover {
    min-width: 0;
    width: min(20rem, calc(100vw - 1rem));
  }

  .person-picker {
    min-width: 0;
    max-height: min(16rem, calc(100dvh - 2rem));
  }

  .ws-settings-preview {
    flex-wrap: wrap;
    padding: 0.85rem;
  }

  .column-type-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .otp-digit,
  .settings-otp-digit {
    height: 2.5rem;
    font-size: 1rem;
  }

  .landing-card h2 {
    font-size: 1.05rem;
  }

  .board-group-top__archives {
    width: 100%;
  }
}

@media (hover: none) {
  .item-updates-btn {
    color: #676879;
  }

  .board-item-row:hover .board-item-subcount__num {
    opacity: 1;
  }

  .board-item-row:hover .board-item-subcount__chev {
    opacity: 0;
  }

  .board-item-subcount--open .board-item-subcount__num {
    opacity: 0;
  }

  .board-item-subcount--open .board-item-subcount__chev {
    opacity: 1;
  }
}