/* inbox-order.css - Settings -> Inboxes in the owner's order, with a
   separate Comments section (inbox-order.js). The table body becomes a flex
   column so each row can take a CSS order without being moved. */
tbody.crm-io-body { display: flex !important; flex-direction: column; }
tbody.crm-io-body > tr { display: flex !important; align-items: center; position: relative; min-height: 65px; }
/* The cell keeps its own layout (a flex cell squeezed the avatars); the
   handle sits in a margin of its own at the row's start. */
tbody.crm-io-body > tr > td:first-child { flex: 1 1 auto; min-width: 0; position: relative; }
/* settings-look.css pads every settings cell with !important, so this names
   the same ancestors to outrank it. */
html[data-crm-settings] main tbody.crm-io-body > tr > td:first-child { padding-inline-start: 40px !important; }
tbody.crm-io-body > tr > td:first-child > .crm-io-grip { position: absolute; top: 50%; inset-inline-start: 8px; transform: translateY(-50%); margin: 0; }
tbody.crm-io-body > tr > td:last-child { flex: 0 0 auto; }

/* The Comments section: its heading (with the handle that moves it all)
   over its first row, and room around it when other inboxes follow. */
tbody.crm-io-body > tr[data-crm-io-first] { margin-top: 48px; border-top: 1px solid rgba(53, 60, 69, .16); }
tbody.crm-io-body > tr[data-crm-io-last] { margin-bottom: 28px; border-bottom: 1px solid rgba(53, 60, 69, .16); }
.crm-io-sec {
  position: absolute; top: -40px; inset-inline-start: 0; height: 32px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #282e34; cursor: default;
}
tbody.crm-io-body.is-moving-section > tr[data-crm-io-kind="comments"] { background: #f4fbd3; }

.crm-io-grip {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 32px; border-radius: 6px;
  color: #626f7f; cursor: grab; touch-action: none; user-select: none;
  transition: background-color .15s cubic-bezier(.4, 0, .2, 1), color .15s cubic-bezier(.4, 0, .2, 1);
}
.crm-io-grip:hover { background: rgba(53, 60, 69, .08); color: #282e34; }
.crm-io-grip i, .crm-io-grip svg { width: 16px; height: 16px; font-size: 16px; }
tbody.crm-io-body > tr.is-dragging { background: #f4fbd3; }
body.crm-io-dragging, body.crm-io-dragging * { cursor: grabbing !important; user-select: none !important; }

:root.dark .crm-io-sec, .dark .crm-io-sec { color: #e8eaed; }
:root.dark tbody.crm-io-body.is-moving-section > tr[data-crm-io-kind="comments"],
.dark tbody.crm-io-body.is-moving-section > tr[data-crm-io-kind="comments"] { background: #2a3212; }
:root.dark tbody.crm-io-body > tr[data-crm-io-first], .dark tbody.crm-io-body > tr[data-crm-io-first],
:root.dark tbody.crm-io-body > tr[data-crm-io-last], .dark tbody.crm-io-body > tr[data-crm-io-last] { border-color: #2c3138; }
:root.dark .crm-io-grip:hover, .dark .crm-io-grip:hover { background: #23272d; color: #e8eaed; }
:root.dark tbody.crm-io-body > tr.is-dragging, .dark tbody.crm-io-body > tr.is-dragging { background: #2a3212; }

/* The sidebar's Channels list follows the same order. */
.crm-io-side { display: flex; flex-direction: column; }   /* no !important: a v-show hide must still win */