/* ============================================================
   Light theme — the left rail (pattern library)
   ============================================================
   `body[data-theme="light"]` (polish.css, "H2") swaps the surface and text
   tokens, and everything in the rail that reads a token followed. What did
   not follow was everything authored against a dark ground with literal
   colours: the thumbnail's `rgba(0,0,0,.40)` well became a dark grey block on
   a pale card, the white-alpha chips and counts vanished, the "Used in this
   song" pill kept its `#fff` text on a lavender fill, the toolbar kept a
   black shadow line, and every in-song card wore a coloured 1px border + a
   1px inset ring + a glow in its category colour — which in a light UI reads
   as a heavy frame around every card in the list.

   The design here: NO card borders. The rail is a bright surface; each card
   is a soft slate tile on it; the thumbnail is a white "screen" inside the
   tile; state is carried by fill (hover deepens, selected turns violet with a
   single thin ring) and by the colour stripe on the card's left edge.

   Dark is untouched — nothing here matches without data-theme="light".

   WHY TWO CASCADE CONTEXTS
   ------------------------
   The rail's existing rules come from three places that do not agree:
     · style-v2.css — UNLAYERED, and with `!important` on the card, the
       category tabs and the search input;
     · v6/*.css     — layered (v6-components / v6-polish), some `!important`;
     · library-filters.css — `.pattern-card--in-song { border-color !important }`
       inside @layer v6-components.
   Importance inverts layer order: a layered `!important` beats an unlayered
   one, and among layers the EARLIER layer wins. So:
     · the v6-polish block below, with `!important`, beats all of style-v2
       (normal or important) and every layered NORMAL rule — one uniform rule
       for the whole rail;
     · but it cannot beat library-filters' v6-components `!important`, so the
       in-song border is neutralised from inside v6-components itself, with a
       more specific selector. That is the one small block at the top.
   Keep both blocks; move either and the frame comes back.
   ============================================================ */

/* ---- 1. In-song border: same layer as the rule it neutralises ---------- */
@layer v6-components {
  body[data-theme="light"] .pattern-card--in-song {
    border-color: transparent !important;
    box-shadow: none;
  }
}

/* ---- 2. Everything else ------------------------------------------------ */
@layer v6-polish {

  /* Palette local to the rail. Slate for surfaces and ink, violet for the
     accent — the deeper violet-700 for TEXT, because the app accent
     (violet-500) does not clear contrast on a slate tile. */
  body[data-theme="light"] .pattern-library-sidebar {
    --rail-bg: #f8fafc;
    --rail-line: rgba(15, 23, 42, 0.07);
    --rail-line-strong: rgba(15, 23, 42, 0.13);
    --rail-ink: #0f172a;
    --rail-ink-2: #475569;
    --rail-ink-3: #64748b;
    --rail-card: #e3e9f1;
    --rail-card-hover: #d8e0ea;
    --rail-card-selected: #ebe5fb;
    --rail-well: #ffffff;
    --rail-accent: var(--accent-primary, #8b5cf6);
    --rail-accent-ink: #6d28d9;

    background: var(--rail-bg) !important;
    border-right: 1px solid var(--rail-line-strong) !important;
  }

  /* ---- Toolbar (collapse chevron · New Pattern) ---- */
  body[data-theme="light"] .pattern-library-sidebar .v6-sidebar-toolbar {
    background: var(--rail-bg) !important;
    border-bottom: 1px solid var(--rail-line) !important;
    box-shadow: none !important;
  }
  body[data-theme="light"] .v6-sidebar-toolbar .sidebar-collapse-btn {
    background: #ffffff !important;
    border-color: var(--rail-line-strong) !important;
    color: var(--rail-ink-3) !important;
  }
  body[data-theme="light"] .v6-sidebar-toolbar .sidebar-collapse-btn:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--rail-ink) !important;
  }

  /* ---- Rail tabs (Patterns · Sounds · Songs · Library) ---- */
  body[data-theme="light"] .v6-rail-tabs {
    background: transparent !important;
    border-bottom-color: var(--rail-line) !important;
  }
  body[data-theme="light"] .v6-rail-tab {
    color: var(--rail-ink-3) !important;
  }
  body[data-theme="light"] .v6-rail-tab:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: var(--rail-ink-2) !important;
  }
  body[data-theme="light"] .v6-rail-tab--active {
    background: rgba(139, 92, 246, 0.08) !important;
    color: var(--rail-ink) !important;
    border-bottom-color: var(--rail-accent) !important;
  }

  /* ---- Category chips (All · Melodies · …) ---- */
  body[data-theme="light"] .library-categories {
    background: transparent !important;
    border-bottom: 1px solid var(--rail-line) !important;
  }
  body[data-theme="light"] .category-tab {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--rail-ink-3) !important;
  }
  body[data-theme="light"] .category-tab:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--rail-ink) !important;
  }
  body[data-theme="light"] .category-tab.active {
    background: rgba(139, 92, 246, 0.11) !important;
    border-color: transparent !important;
    color: var(--rail-accent-ink) !important;
  }
  body[data-theme="light"] .category-tab .category-count {
    background: rgba(15, 23, 42, 0.07) !important;
    color: var(--rail-ink-2) !important;
  }
  body[data-theme="light"] .category-tab.active .category-count {
    background: rgba(139, 92, 246, 0.18) !important;
    color: var(--rail-accent-ink) !important;
  }

  /* ---- Search ---- */
  body[data-theme="light"] .library-search {
    background: transparent !important;
    border-bottom: 1px solid var(--rail-line) !important;
  }
  body[data-theme="light"] .library-search-input {
    background: #ffffff !important;
    border: 1px solid var(--rail-line-strong) !important;
    border-radius: 8px !important;
    color: var(--rail-ink) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  body[data-theme="light"] .library-search-input::placeholder {
    color: #94a3b8 !important;
  }
  body[data-theme="light"] .library-search-input:focus {
    border-color: var(--rail-accent) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18) !important;
  }

  /* ---- "Used in this song" toggle ---- */
  body[data-theme="light"] .v6-library-filters {
    border-bottom-color: var(--rail-line) !important;
  }
  body[data-theme="light"] .v6-library-chip {
    background: #ffffff !important;
    border-color: var(--rail-line-strong) !important;
    color: var(--rail-ink-2) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  }
  body[data-theme="light"] .v6-library-chip:hover {
    background: rgba(139, 92, 246, 0.06) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: var(--rail-ink) !important;
  }
  body[data-theme="light"] .v6-library-chip__count {
    background: rgba(15, 23, 42, 0.08) !important;
    color: var(--rail-ink-2) !important;
  }
  body[data-theme="light"] .v6-library-chip--on {
    background: rgba(139, 92, 246, 0.10) !important;
    border-color: rgba(139, 92, 246, 0.40) !important;
    color: var(--rail-accent-ink) !important;
    box-shadow: none !important;
  }
  body[data-theme="light"] .v6-library-chip--on .v6-library-chip__count {
    background: var(--rail-accent) !important;
    color: #ffffff !important;
  }

  /* ---- Pattern cards: a tile, not a frame ---- */
  body[data-theme="light"] .pattern-card {
    background: var(--rail-card) !important;
    border-color: transparent !important;
    border-radius: 10px !important;
    /* Normal, not !important: the just-created glow is a box-shadow
       animation, and an !important here would silence it. */
    box-shadow: none;
  }
  body[data-theme="light"] .pattern-card:hover {
    background: var(--rail-card-hover) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.30) !important;
  }
  body[data-theme="light"] .pattern-card.selected,
  body[data-theme="light"] .pattern-card.active {
    background: var(--rail-card-selected) !important;
    border-color: transparent !important;
    box-shadow: 0 0 0 1.5px rgba(139, 92, 246, 0.55) !important;
  }
  body[data-theme="light"] .pattern-card.previewing {
    border-color: transparent !important;
    box-shadow: 0 0 0 1.5px rgba(34, 197, 94, 0.60) !important;
  }

  body[data-theme="light"] .pattern-name {
    color: var(--rail-ink) !important;
    font-weight: 600 !important;
  }
  body[data-theme="light"] .pattern-meta {
    color: var(--rail-ink-3) !important;
  }
  body[data-theme="light"] .pattern-clips {
    color: var(--rail-accent-ink) !important;
  }
  body[data-theme="light"] .pattern-card .pattern-clips--unused,
  body[data-theme="light"] .pattern-card--unused .pattern-name {
    color: var(--rail-ink-3) !important;
  }
  body[data-theme="light"] .pattern-group-badge {
    background: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: var(--rail-ink-3) !important;
  }

  /* ---- Thumbnail: a white screen inside the tile ---- */
  body[data-theme="light"] .pattern-preview {
    background: var(--rail-well) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 7px !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  }
  body[data-theme="light"] .preview-cell {
    background: rgba(15, 23, 42, 0.045) !important;
  }
  body[data-theme="light"] .preview-row .preview-cell:nth-child(4n) {
    background: rgba(15, 23, 42, 0.09) !important;
  }
  /* No glow on white, and the pastel track colours need more body: the dark
     theme's 0.5–1.0 density ramp becomes 0.86–1.0 here. */
  body[data-theme="light"] .preview-cell.active {
    background: var(--row-color, var(--accent-primary, #8b5cf6)) !important;
    box-shadow: none !important;
    opacity: calc(0.72 + 0.28 * var(--cell-opacity, 0.8)) !important;
  }
  body[data-theme="light"] .preview-empty {
    background: var(--rail-well) !important;
    color: var(--rail-ink-3) !important;
  }

  /* ---- Hover actions (edit · play · more) ----
     Two things at once. The row is `opacity: 0` until hover but still IN
     FLOW, so every tile at rest carried ~24px of blank band under it.
     Here it floats top-right over a corner the name reserves, so the tile
     hugs its content.
     And the buttons had no stylesheet of their own — the file that styled
     them is not loaded — so they rendered as user-agent buttons. */
  body[data-theme="light"] .pattern-card {
    position: relative;
  }
  body[data-theme="light"] .pattern-card .pattern-name {
    padding-right: 84px;
  }
  body[data-theme="light"] .pattern-actions {
    position: absolute;
    top: 4px;
    right: 5px;
    gap: 1px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
  }
  body[data-theme="light"] .pattern-card:not(:hover) .pattern-actions {
    pointer-events: none;
  }
  body[data-theme="light"] .btn-pattern-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--rail-ink-3);
    cursor: pointer;
  }
  body[data-theme="light"] .btn-pattern-action:hover {
    background: rgba(15, 23, 42, 0.07);
    color: var(--rail-ink);
  }

  /* ---- Section groups (intro / verse / …) ---- */
  body[data-theme="light"] .pattern-section-group {
    background: rgba(15, 23, 42, 0.025) !important;
  }
  body[data-theme="light"] .pattern-section-header {
    color: var(--rail-ink-2) !important;
  }
  body[data-theme="light"] .pattern-section-header:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: var(--rail-ink) !important;
  }
  body[data-theme="light"] .pattern-section-header__count {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: var(--rail-ink-2) !important;
  }

  /* ---- Scrollbars ---- */
  body[data-theme="light"] .library-patterns-container,
  body[data-theme="light"] .v6-rail-sounds__list,
  body[data-theme="light"] .v6-rail-songs__list {
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent !important;
  }
  body[data-theme="light"] .library-patterns-container::-webkit-scrollbar-thumb,
  body[data-theme="light"] .v6-rail-sounds__list::-webkit-scrollbar-thumb,
  body[data-theme="light"] .v6-rail-songs__list::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.16) !important;
  }
  body[data-theme="light"] .library-patterns-container::-webkit-scrollbar-thumb:hover,
  body[data-theme="light"] .v6-rail-sounds__list::-webkit-scrollbar-thumb:hover,
  body[data-theme="light"] .v6-rail-songs__list::-webkit-scrollbar-thumb:hover {
    background: rgba(15, 23, 42, 0.26) !important;
  }

  /* ---- Footer (Import · Export · Clean up) ---- */
  body[data-theme="light"] .sidebar-footer {
    background: var(--rail-bg) !important;
    border-top: 1px solid var(--rail-line) !important;
  }
  body[data-theme="light"] .sidebar-footer .btn-secondary {
    background: #ffffff !important;
    border-color: var(--rail-line-strong) !important;
    color: var(--rail-ink-2) !important;
  }
  body[data-theme="light"] .sidebar-footer .btn-secondary:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: var(--rail-ink) !important;
  }

  /* ---- Sounds / Songs panes: the same tile language ---- */
  body[data-theme="light"] .v6-rail-sound,
  body[data-theme="light"] .v6-rail-song {
    background: var(--rail-card) !important;
    border-color: transparent !important;
    color: var(--rail-ink) !important;
  }
  body[data-theme="light"] .v6-rail-sound:hover,
  body[data-theme="light"] .v6-rail-song:hover {
    background: var(--rail-card-hover) !important;
    border-color: transparent !important;
  }
  body[data-theme="light"] .v6-rail-song--active {
    background: var(--rail-card-selected) !important;
    box-shadow: 0 0 0 1.5px rgba(139, 92, 246, 0.55) !important;
  }
  body[data-theme="light"] .v6-rail-sound__use,
  body[data-theme="light"] .v6-rail-sounds__search-input {
    background: #ffffff !important;
    border-color: var(--rail-line-strong) !important;
    color: var(--rail-ink-2) !important;
  }
  body[data-theme="light"] .v6-rail-sound__use:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: var(--rail-ink) !important;
  }
}