/* ============================================================
   styles-additions-v18.css — MB3 (Sprint 6, post-MB2.1)

   Adds:
   - Sortable column header treatment (.tbl-th-sortable)
   - Page-header breathing room above the title (B6)
   - +New dropdown polish (U1) — softer corners, lighter shadow,
     tighter rhythm so it feels of-a-piece with the rest of the
     dashboard

   Per CLAUDE.md convention, every style layer ADDS, never edits
   prior layers. v17 (MB2.1) and earlier remain untouched.
   ============================================================ */


/* ============================================================
   1. SORTABLE COLUMN HEADERS (B2)

   .tbl-th-sortable    — on every column whose header is clickable
   .is-active-sort     — added when this column matches the current
                          sort state (per-page / per-entity)

   The active column gets a subtle dot indicator. Hover state on
   sortable headers is light to avoid feeling busy in dense tables.
   ============================================================ */

.tbl-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out);
}

.tbl-th-sortable:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}

.tbl-th-sortable:focus-visible {
  outline: 2px solid var(--accent, var(--text-primary));
  outline-offset: -2px;
}

.tbl-th.is-active-sort {
  color: var(--text-primary);
  font-weight: 500;
}

.tbl-th.is-active-sort::after {
  content: " \2022";   /* small bullet • */
  color: var(--accent, var(--text-primary));
  margin-left: var(--space-1);
  opacity: 0.85;
}


/* ============================================================
   2. PAGE-HEADER BREATHING ROOM (B6)

   Standalone pages (Companies / Contacts / Activities / Email
   Outreach) sit below the masthead + app-mode-nav. With 5 nav
   tabs after MB1, the spacing felt cramped right above the title.

   Add a margin-top so the header isn't crowding the nav above.
   ============================================================ */

.page-header {
  margin-top: var(--space-6, 24px);
}

@media (max-width: 720px) {
  /* On narrow viewports the nav is now full-width below the
     masthead; the title can sit closer because there's no
     visual collision. */
  .page-header {
    margin-top: var(--space-4, 16px);
  }
}


/* ============================================================
   3. +NEW DROPDOWN POLISH (U1)

   v16 had a tight radius, prominent shadow, and slightly oversize
   menu items that read "blocky" against the rest of the UI. Soften:
     - rounder corners
     - lighter, smaller shadow
     - text-base → text-sm
     - tighter line-height on items
     - menu animates open instead of hard-cut
     - subtle border that picks up the elev-2 instead of default
   ============================================================ */

.gc-trigger {
  /* v16 default of radius-sm + 8px padding was fine; tighten the
     caret spacing slightly for visual balance. */
  border-radius: var(--radius-md);
}

.gc-menu {
  /* Softer corners + lighter shadow + a touch of border subtlety */
  border-radius: var(--radius-md);
  border-color: var(--border-subtle);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04);
  /* Origin animation: scale up from top-right corner of the trigger */
  transform-origin: top right;
  transform: scale(0.96) translateY(-2px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--motion-fast) var(--easing-out),
              opacity var(--motion-fast) var(--easing-out);
  /* Override v16's display:none so the transition can run.
     Keep visibility:hidden so it's still fully inert when closed. */
  display: block;
  visibility: hidden;
}

.gc-menu.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.gc-menu-item {
  /* Tighter rhythm — feels less like a touch-target on a phone */
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  line-height: 1.35;
  /* Slight color shift on hover instead of just bg */
  transition: background var(--motion-fast) var(--easing-out),
              color var(--motion-fast) var(--easing-out);
}

.gc-menu-item:hover {
  background: var(--bg-elev-2);
  color: var(--text-primary);
}

.gc-menu-item:focus-visible {
  outline: 2px solid var(--accent, var(--text-primary));
  outline-offset: -2px;
}

.gc-menu-icon {
  font-size: var(--text-sm);  /* was text-16 */
  width: 20px;                 /* was 24px — feels less columnar */
  text-align: center;
  opacity: 0.85;
}

.gc-menu-divider {
  /* Lighter and thinner so it doesn't act as a visual barrier */
  background: var(--border-subtle);
  margin: var(--space-1_5, 6px) var(--space-2);
  opacity: 0.6;
}