/* Responsive layout primitives. Breakpoints: mobile <=640px, tablet
   641px-1024px, desktop >=1025px. */
.mobile-sidebar-toggle,
.sidebar-backdrop {
  display: none;
}

.responsive-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Desktop */
@media (min-width: 1025px) {
  aside[data-sidebar] {
    display: flex;
    flex-direction: column;
  }

  .client-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  aside[data-sidebar] {
    display: flex;
    flex-direction: column;
  }

  .responsive-card-grid,
  .db-stat-row,
  .db-panel-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 640px) {
  body.sidebar-is-open {
    overflow: hidden;
  }

  .mobile-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    touch-action: manipulation;
  }

  aside[data-sidebar] {
    position: fixed;
    z-index: 60;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(82vw, 320px) !important;
    min-width: 0 !important;
    max-width: 320px;
    padding-top: 16px !important;
    overflow-y: auto !important;
    transform: translateX(-105%);
    transition: transform 200ms ease-out;
    box-shadow: 12px 0 30px rgba(31, 29, 26, 0.18);
  }

  aside[data-sidebar].is-open {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(31, 29, 26, 0.48);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-out, visibility 200ms ease-out;
  }

  body.sidebar-is-open .sidebar-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .responsive-card-grid,
  .db-stat-row,
  .db-panel-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .compact-toolbar,
  .compact-toolbar form,
  .client-list-header,
  .client-card {
    flex-direction: column;
    align-items: stretch;
  }

  .client-list-header > a,
  .client-card > a,
  .client-card > details,
  .client-filter-form > * {
    width: 100%;
  }

  .client-card {
    padding: 1rem !important;
  }

  .client-card > details > summary {
    width: 100%;
  }

  .client-card > details nav {
    position: static;
    width: 100%;
    margin-top: 0.5rem;
  }

  /* A board remains a single horizontal lane. Columns are wide enough to drag,
     read, and tap without compressing their controls. */
  .task-board-scroll,
  .kanban-board {
    display: flex;
    flex-flow: row nowrap;
    gap: 0.75rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.75rem;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .task-board-scroll > .task-row,
  .kanban-board > .kanban-column {
    flex: 0 0 min(86vw, 340px);
    min-width: 280px;
    scroll-snap-align: start;
  }

  .entity-compose input:not([type="checkbox"]),
  .entity-compose select,
  .entity-compose textarea,
  .task-compose input:not([type="hidden"]),
  .task-compose select,
  .task-compose textarea,
  .task-compose .ql-container,
  #task-form,
  #task-form .task-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  aside[data-sidebar],
  .sidebar-backdrop {
    transition: none;
  }
}