/* ============================================================
 * Platform adaptive-toolbar — Finder-style overflow popover.
 *
 * Consumer marks a container as an adaptive toolbar via JS
 * (see app/js/ui/adaptive-toolbar/index.js). Items that don't fit
 * collapse into a "more" icon-button that opens this popover.
 *
 * TRK-394 Phase 3 layer assignment:
 *   @layer platform → panel shape, popover-context shape overrides
 *   @layer module   → hover state on popover items
 *   @layer theme    → dark-mode panel background + shadow
 * Layer order declared in 00-reset.css. Module > theme > platform.
 *
 * Per the layer rules + source order, the `> *` overrides no longer
 * need !important — within @layer platform, this file (07) loads after
 * 05-icon-btn so its rules win at equal specificity.
 * ============================================================ */

@layer platform {
  .sift-toolbar-more-panel {
    position: fixed;
    min-width: 160px;
    max-width: 280px;
    padding: 6px;
    border-radius: 10px;
    background: var(--surface, #ffffff);
    box-shadow:
      0 0 0 0.5px rgba(0, 0, 0, 0.18),
      0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: var(--z-context-menu);
    display: flex;
    flex-direction: column;
    gap: 2px;
    -webkit-app-region: no-drag;
    font: 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  }

  /* Items placed into the overflow popover render full-width and left-aligned,
     regardless of how they look in the toolbar row. */
  .sift-toolbar-more-panel > * {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 28px;
    border-radius: 6px;
    justify-content: flex-start;
    padding: 4px 8px;
    gap: 8px;
  }
}

@layer module {
  .sift-toolbar-more-panel > *:hover {
    background: rgba(0, 0, 0, 0.06);
  }
}

@layer theme {
  @media (prefers-color-scheme: dark) {
    .sift-toolbar-more-panel {
      background: #2C2C2E;
      box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.45);
    }
  }
}

@layer module {
  @media (prefers-color-scheme: dark) {
    .sift-toolbar-more-panel > *:hover {
      background: rgba(255, 255, 255, 0.08);
    }
  }
}