/* Inbox categories (tabs above the inbox) and mail templates. Colours
   lean on the shared variables in app.css; each tab has its own accent. */

.cat-tabs { --cat: var(--accent); display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: none; }
.cat-tabs[hidden] { display: none; }
.cat-primary { --cat: var(--accent); }
.cat-social { --cat: #1A73E8; }
.cat-promotions { --cat: #188038; }
.cat-updates { --cat: #E8710A; }

.cat-tab {
  flex: 0 1 252px; min-width: 150px; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px;
  color: var(--text-2); text-decoration: none; position: relative; font-weight: 500; white-space: nowrap;
}
.cat-tab svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.cat-tab:hover { background: var(--hover); }
.cat-tab.active { color: var(--cat); }
.cat-tab.active::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cat); }
.cat-tab.drop { background: color-mix(in srgb, var(--cat) 16%, transparent); outline: 2px dashed var(--cat); outline-offset: -4px; }
.cat-tab .cat-name { overflow: hidden; text-overflow: ellipsis; }
.cat-new { font-size: 11px; font-weight: 600; color: #fff; background: var(--cat); border-radius: 10px; padding: 1px 8px; }

.msg[draggable=true]:active { cursor: grabbing; }

.menu-item.cat-item { display: flex; align-items: center; gap: 12px; }
.menu-item.cat-item svg, .tpl-menu .menu-item svg { width: 18px; height: 18px; fill: var(--cat, var(--text-3)); flex: none; }
.tpl-menu .menu-item { display: flex; align-items: center; gap: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-menu { max-height: min(480px, calc(100vh - 32px)); overflow-y: auto; }
.pick-head.sub { padding-top: 4px; font-size: 13px; color: var(--text-3); }
.menu-note { padding: 4px 16px 8px; font-size: 13px; }

/* Settings > General */
.cat-checks { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.cat-check svg { width: 18px; height: 18px; fill: var(--cat); }
.tpl-list { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.tpl-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tpl-head { display: flex; align-items: center; gap: 8px; }
.tpl-card .tpl-name { flex: 1; font-weight: 600; }
.tpl-card input, .tpl-card textarea { width: 100%; box-sizing: border-box; font: inherit; }

@media (max-width: 860px) {
  .cat-tab { min-width: 0; flex: 1 1 0; justify-content: center; padding: 0 8px; gap: 6px; }
  .cat-tab .cat-name, .cat-tab .cat-new { display: none; }
  .cat-tab.active .cat-name { display: inline; }
}