/* Responsive behaviour: touch devices, collapsed rail, tablets and phones. Loaded last so it can override. */

/* Touch devices: no hover, no native drag-and-drop for the list. Use the card's "..." menu instead. */
@media (hover: none) {
  .actions, .drag-handle { display: none; }
  .more-btn, .nav-item .more, .nav-item .nav-del { opacity: 1; pointer-events: auto; }
  .nav-item .cnt { display: none; }
}

/* ---- Desktop: collapsible board columns and the icon-only sidebar rail ---- */
@media (min-width: 801px) {
  /* a collapsed column is a slim strip that still accepts drops */
  .col.collapsed { flex: 0 0 56px; min-width: 56px; }
  .col.collapsed .col-head { flex-direction: column; justify-content: flex-start; gap: 10px; padding: 12px 0; border-bottom: none; min-height: 0; }
  .col.collapsed .col-name { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .col.collapsed .col-count { margin-left: 0; order: -1; }
  .col.collapsed .col-toggle { transform: rotate(180deg); order: 2; }
  .col.collapsed .col-body { padding: 0; }
  .col.collapsed .bcard, .col.collapsed .col-empty { display: none; }
  .col.collapsed:has(.col-body.over) { border-color: var(--accent); background: var(--accent-soft); }
}

@media (min-width: 901px) {
  body.side-collapsed .app { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  body.side-collapsed .tb-left { width: 64px; }
  body.side-collapsed .tb-name { display: none; }
  body.side-collapsed .tb-brand { padding-left: 0; }
  body.side-collapsed .tb-inner { gap: 18px; }
  body.side-collapsed .sidebar { padding-right: 0; overflow-x: hidden; }
  body.side-collapsed .side-title {
    height: 1px; margin: 12px 14px 8px; padding: 0;
    font-size: 0; line-height: 0; background: var(--border-soft);
  }
  body.side-collapsed .nav-item { justify-content: center; padding: 0; }
  body.side-collapsed .nav-hit { flex: 0 0 auto; justify-content: center; }
  body.side-collapsed .nav-item .ico { width: auto; font-size: 15px; }
  body.side-collapsed .nav-item .lbl,
  body.side-collapsed .nav-item .cnt,
  body.side-collapsed .nav-item .more,
  body.side-collapsed .nav-item .nav-del,
  body.side-collapsed .add-proj,
  body.side-collapsed .sidebar-foot { display: none; }
  body.side-collapsed .side-collapse { justify-content: center; padding: 0; }
  body.side-collapsed .side-collapse .lbl { display: none; }
  body.side-collapsed .side-collapse svg { transform: rotate(180deg); }
  body.side-collapsed .proj-dot { width: 10px; height: 10px; }
}

/* ---- Tablet and below: sidebar becomes a slide-in drawer ---- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 0 16px; }
  .tb-inner { padding: 0 16px; gap: 12px; }
  .tb-left { width: auto; }
  .tb-brand { padding-left: 0; }
  .wrap { max-width: none; }
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: 272px; height: 100%;
    padding: 18px 14px 24px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateX(-104%);
    transition: transform .3s var(--ease);
  }
  .sidebar.open { transform: none; }
  .sidebar-btn { display: grid; }
  .side-collapse { display: none; }
}

@media (max-width: 800px) {
  .board-switch:not([hidden]) { display: flex; }
  .board { display: block; overflow: visible; }
  .board .col { display: none; width: 100%; }
  .board .col.on { display: flex; }
  .col-toggle { display: none; }
  .col-head { cursor: default; }
}

@media (max-width: 760px) {
  .tb-name { display: none; }
  #help-btn, #theme-btn { display: none; }
}

/* ---- Phone ---- */
@media (max-width: 620px) {
  :root { --topbar-h: 0px; }

  /* the top bar scrolls away; the filter toolbar stays pinned */
  .topbar { position: static; height: auto; }
  .tb-inner { flex-wrap: wrap; row-gap: 8px; padding: 10px 16px 6px; }
  .tb-left { order: 1; }
  .top-tools { order: 2; margin-left: auto; gap: 6px; }
  .tb-center { order: 3; flex: 1 1 100%; }
  .tb-name { display: inline; }
  button.tb-new span { display: none; }
  button.tb-new { padding: 0; width: var(--h-md); }
  .search-wrap { max-width: none; }

  .page-head { padding: 12px 0 10px; gap: 4px 10px; }
  h1 { font-size: 20px; }
  .sub { flex-basis: 100%; order: 3; font-size: 13px; white-space: normal; }
  .stats { gap: 6px; }
  .stat { padding: 0 10px; }

  .composer { padding: 10px; }
  .row { flex-wrap: wrap; }
  .composer .row > *, .composer .row select, .row .field { flex: 1 1 100%; }
  .composer .head-row { flex-wrap: nowrap; }
  .composer .head-row > #f-title { flex: 1 1 auto; }
  .ac-list { left: 10px; right: 10px; top: 56px; }

  .toolbar { gap: 6px; }
  .toolbar select { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .toolbar > button.ghost, .toolbar .seg { flex: 1 1 auto; }
  #select-mode { margin-left: 0; }
  .toolbar .seg button { flex: 1; }

  li.card { padding: 12px 38px 12px 14px; gap: 10px; }
  .title { font-size: 14.5px; }
  .more-btn { right: 6px; }
  .date { margin-left: 0; }
  .atts .att { max-width: 100%; }

  .modal { padding: 18px; }
  .modal-actions { margin: 16px -18px -18px; padding: 12px 18px; flex-wrap: wrap; }
  .modal-actions .ghost, .modal-actions .btn { flex: 1 1 auto; }
  #editor-overlay .modal { max-width: 100%; border-radius: 0; }
  .help-sec li { font-size: 13px; }
  .att-edit { grid-template-columns: minmax(0, 1fr) auto; }
  .att-edit input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .tag-edit { grid-template-columns: minmax(0, 1fr) auto; }
  .tag-edit .tagcount { display: none; }
  .menu, .menu-narrow { width: min(300px, calc(100vw - 32px)); }

  .bulkbar { bottom: 8px; padding: 8px; }
  .toast-wrap { bottom: 14px; width: calc(100vw - 24px); }
  .toast { width: 100%; justify-content: space-between; }
  .insights .grid { grid-template-columns: 1fr; }
  .empty.welcome { padding: 28px 16px; }
}

/* Popovers become bottom sheets on small screens */
@media (max-width: 560px) {
  .pop-backdrop { background: rgba(4, 6, 12, .45); }
  .pop-title { display: none; }
}