/* ── app-controls-nav.css — grid toolbar, sortable, rows, export, sticky, nav, settings cog/tabs, icon picker, side drawer ── */
/* Auto-split from app.css 2026-05-27 (Phase J.6). Cascade order preserved by
   the <link> sequence in index.html. Edit the file whose concern matches your
   change; do NOT recreate app.css. See _docs/canonical/coding-conventions.md §0. */

/* ── Mobile (≤ 680px) ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  body[data-shell="authenticated"] .app-root {
    grid-template-columns: 1fr;
  }

  body[data-shell="authenticated"] .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 100%;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 240ms ease;
    overflow-y: auto;
  }

  body[data-shell="authenticated"].sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .hamburger-btn {
    display: flex;
  }

  .sidebar-close-btn {
    display: block;
  }

  .app-header {
    padding: 14px 16px;
    gap: var(--space-3);
  }

  .app-page {
    padding: 16px;
  }

  .tool-grid,
  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .data-grid-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-grid {
    min-width: 560px;
  }

  .grid-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .toolbar-right {
    margin-left: 0 !important;
    flex-wrap: wrap;
  }

  .settings-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .side-drawer {
    width: 100vw;
    right: -100vw;
  }
}

.theme-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.theme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--panel-alt);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.theme-chip:hover {
  border-color: var(--border);
  background: var(--panel-bg);
}

.theme-chip.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.theme-swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.12);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-3);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tag-admin { background: #fee2e2; color: #991b1b; }
.tag-team-lead { background: #dbeafe; color: #1e40af; }
.tag-volunteer { background: #dcfce7; color: #166534; }

body[data-color-scheme="dark"] .tag-admin,
body[data-color-scheme="event"] .tag-admin { background: rgba(220,38,38,0.18); color: #fca5a5; }
body[data-color-scheme="dark"] .tag-team-lead,
body[data-color-scheme="event"] .tag-team-lead { background: rgba(37,99,235,0.18); color: #93c5fd; }
body[data-color-scheme="dark"] .tag-volunteer,
body[data-color-scheme="event"] .tag-volunteer { background: rgba(22,163,74,0.18); color: #86efac; }

.inline-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

body[data-color-scheme="dark"] .inline-confirm,
body[data-color-scheme="event"] .inline-confirm {
  background: rgba(220,38,38,0.1);
  border-color: rgba(220,38,38,0.3);
}

/* ── Data grid toolbar ─────────────────────────────────────────────────── */

.grid-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 20;
}

.grid-toolbar .toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.grid-footer {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 8px 16px;
  border-top: 1px solid var(--border-soft);
  background: var(--panel-alt);
}

/* ── Sortable column headers ───────────────────────────────────────────── */

th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th[data-sort-key]:hover {
  background: var(--row-hover, rgba(0,0,0,0.04));
}

th[data-sort-key] .sort-indicator {
  display: inline-block;
  width: 14px;
  opacity: 0.35;
  font-size: 0.72em;
  vertical-align: middle;
}

th[data-sort-key].sort-asc .sort-indicator,
th[data-sort-key].sort-desc .sort-indicator {
  opacity: 0.8;
}

body[data-color-scheme="dark"] th[data-sort-key]:hover,
body[data-color-scheme="event"] th[data-sort-key]:hover {
  background: rgba(255,255,255,0.05);
}

/* ── Clickable / selected table rows ──────────────────────────────────── */

tbody tr.row-clickable {
  cursor: pointer;
  transition: background 80ms ease;
}

tbody tr.row-clickable:hover {
  background: var(--row-hover, rgba(0,0,0,0.035));
}

tbody tr.row-selected {
  background: var(--accent-soft, rgba(37,99,235,0.08));
  outline: 1px solid var(--accent, #2563eb);
  outline-offset: -1px;
}

body[data-color-scheme="dark"] tbody tr.row-clickable:hover,
body[data-color-scheme="event"] tbody tr.row-clickable:hover {
  background: rgba(255,255,255,0.04);
}

body[data-color-scheme="dark"] tbody tr.row-selected,
body[data-color-scheme="event"] tbody tr.row-selected {
  background: rgba(225,177,102,0.1);
  outline-color: var(--accent);
}

/* ── Export Data page table ────────────────────────────────────────────── */

.export-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.export-table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 600;
  border-bottom: 2px solid var(--border);
  color: var(--muted-text);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.export-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.export-table tr:last-child td {
  border-bottom: none;
}

/* ── Sticky grid toolbar ───────────────────────────────────────────────── */

/* ── Nav group labels ──────────────────────────────────────────────────── */

.nav-group-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 14px 14px 4px;
  margin: 0;
}

/* Phase 01 v2 — group header is now a proper section title with an icon
   on the left, label in the middle, and chevron on the right. Layout uses
   gap so the icon and label hug each other while the chevron sits in the
   far-right with margin-left:auto (set inline). */
.nav-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 12px 14px 6px;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.nav-group-header:hover { color: var(--sidebar-text); }
.nav-group-icon {
  display: inline-flex;
  align-items: center;
  color: var(--sidebar-muted);
  flex-shrink: 0;
}
.nav-group-header:hover .nav-group-icon { color: var(--sidebar-text); }
.nav-group-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--sidebar-muted);
}
.nav-group-header:hover .nav-group-chevron { color: var(--sidebar-text); }
/* Sub-item indent for grouped nav buttons */
.nav-button-sub { padding-left: 28px; }

.nav-list-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  gap: 2px;
}

/* ── Settings cog at bottom of sidebar ────────────────────────────────── */

.sidebar-bottom {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-cog-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sidebar-muted);
  text-align: left;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 140ms ease, color 140ms ease;
}

.nav-cog-btn:hover,
.nav-cog-btn.is-active {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
  border-color: rgba(255,255,255,0.08);
}

.nav-cog-btn.is-active {
  background: var(--sidebar-active);
  border-left: 3px solid var(--accent);
  color: var(--accent);
}

.nav-cog-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── Settings tabs ─────────────────────────────────────────────────────── */

.settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-6);
}

.settings-tab {
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 4px 4px 0 0;
  transition: color 120ms ease, border-color 120ms ease;
}

.settings-tab:hover {
  color: var(--text);
}

.settings-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Icon picker (nav icon configurator) ───────────────────────────────── */

.nav-icon-config {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}

.nav-icon-row:last-child { border-bottom: none; }

.nav-icon-label {
  font-size: 0.9rem;
  font-weight: 600;
  flex: 1;
}

.nav-icon-preview-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-alt);
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--muted);
  transition: border-color 120ms;
  white-space: nowrap;
}

.nav-icon-preview-btn:hover { border-color: var(--accent); color: var(--text); }

.nav-icon-preview-btn .icon-preview-em {
  font-size: 1.2rem;
  line-height: 1;
}

.icon-picker-popover {
  position: relative;
}

.icon-picker-grid {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 200;
  display: none;
  grid-template-columns: repeat(9, 36px);
  gap: 3px;
  padding: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.icon-picker-grid.is-open { display: grid; }

.icon-picker-btn {
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 80ms;
}

.icon-picker-btn:hover { background: var(--panel-alt); border-color: var(--border); }
.icon-picker-btn.is-selected { background: var(--accent-soft); border-color: var(--accent); }

/* ── Side drawer (edit panel) ──────────────────────────────────────────── */

.side-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 90;
  cursor: pointer;
}

.side-overlay.is-open {
  display: block;
}

.side-drawer {
  position: fixed;
  top: 0;
  right: -520px;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--panel-bg);
  box-shadow: -4px 0 32px rgba(0,0,0,0.18);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: right 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.side-drawer.is-open {
  right: 0;
}

.side-drawer-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.side-drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 120ms ease;
}

.side-drawer-close:hover {
  background: var(--panel-alt);
  color: var(--text);
}

.side-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
}

.side-drawer-body .section {
  border: none;
  padding: 0;
  box-shadow: none;
  background: transparent;
}

.side-drawer-body h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-4);
}