/* ============================================================
   generator-sheet.css — spreadsheet-style asset manager for
   rpg.actor/generator?v=sheet.

   Deliberately NOT another /generator layout skin — this is a plain data
   table + a persistent edit dock. Scoped entirely under html.gen-sheet so
   it never touches classic (?v=beta), beta2 (?v=beta2), or live rendering.
   ============================================================ */

html.gen-sheet {
    --sh-ink: var(--ink, #2c2416);
    --sh-ink-light: var(--ink-light, #8a7a5e);
    --sh-parchment: var(--parchment, #f4f1e8);
    --sh-parchment-dark: var(--parchment-dark, #d4c9a8);
    --sh-accent: var(--accent, #b8860b);
    --sh-row-alt: rgba(44, 36, 22, 0.035);
}

html.gen-sheet.sh-ready body { overflow: hidden; height: 100dvh; }
html.gen-sheet.sh-ready .generator-page { max-width: none; margin: 0; padding: 0; height: 100dvh; }
html.gen-sheet.sh-ready #generator-panel { display: none !important; }
html.gen-sheet .generator-loading { min-height: 60dvh; display: flex; }
html.gen-sheet.sh-ready .generator-loading { display: none; }

html.gen-sheet .sh-shell { display: none; }
html.gen-sheet.sh-ready .sh-shell {
    display: grid;
    grid-template-columns: minmax(560px, 1fr) 400px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "topbar topbar"
        "toolbar dock"
        "table   dock";
    height: 100dvh;
    background: var(--sh-parchment);
    color: var(--sh-ink);
    font-family: inherit;
}

/* ---------------- Topbar ---------------- */
html.gen-sheet .sh-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 2px solid var(--sh-ink);
    background: linear-gradient(180deg, rgba(201,162,39,0.14), transparent);
}
html.gen-sheet .sh-brand { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 700; white-space: nowrap; }
html.gen-sheet .sh-brand-tag {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; color: #fff;
    background: var(--sh-accent); border-radius: 999px; padding: 0.1rem 0.5rem;
}
html.gen-sheet .sh-count { font-size: 0.78rem; color: var(--sh-ink-light); white-space: nowrap; }
html.gen-sheet .sh-topbar-spacer { flex: 1 1 auto; }
html.gen-sheet .sh-btn {
    border: 1px solid var(--sh-ink); background: var(--sh-parchment); color: var(--sh-ink);
    border-radius: 0.4rem; padding: 0.32rem 0.7rem; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center;
}
html.gen-sheet .sh-btn:hover { background: rgba(201,162,39,0.2); }

/* ---------------- Toolbar (search + filters, left-aligned) --------------- */
html.gen-sheet .sh-toolbar {
    grid-area: toolbar;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem 1rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--sh-parchment-dark);
    text-align: left;
}
html.gen-sheet .sh-field { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; }
html.gen-sheet .sh-field label { font-weight: 700; color: var(--sh-ink-light); }
html.gen-sheet .sh-field input[type="search"] {
    border: 1px solid var(--sh-parchment-dark); border-radius: 0.35rem; background: #fff;
    padding: 0.25rem 0.5rem; font-size: 0.8rem; width: 200px;
}
html.gen-sheet .sh-field select {
    border: 1px solid var(--sh-parchment-dark); border-radius: 0.35rem; background: #fff;
    padding: 0.24rem 0.4rem; font-size: 0.78rem;
}
html.gen-sheet .sh-check { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; }

/* ---------------- Table ---------------- */
html.gen-sheet .sh-table-wrap { grid-area: table; overflow: auto; min-height: 0; min-width: 0; padding: 0 0.85rem 1rem; }
html.gen-sheet table.sh-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
html.gen-sheet .sh-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--sh-ink); color: var(--sh-parchment);
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; white-space: nowrap;
}
html.gen-sheet .sh-table thead th:hover { background: #443722; }
html.gen-sheet .sh-table thead th.sh-sorted::after { content: " \25BE"; }
html.gen-sheet .sh-table thead th.sh-sorted.sh-desc::after { content: " \25B4"; }
html.gen-sheet .sh-table tbody tr { border-bottom: 1px solid var(--sh-parchment-dark); cursor: pointer; }
html.gen-sheet .sh-table tbody tr:nth-child(even) { background: var(--sh-row-alt); }
html.gen-sheet .sh-table tbody tr:hover { background: rgba(201,162,39,0.14); }
html.gen-sheet .sh-table tbody tr.active { background: rgba(201,162,39,0.32); }
html.gen-sheet .sh-table td { padding: 0.32rem 0.5rem; vertical-align: middle; }
html.gen-sheet .sh-thumb {
    width: 30px; height: 30px; background-repeat: no-repeat; background-position: center;
    background-size: contain; image-rendering: pixelated; image-rendering: crisp-edges;
    background-color: rgba(44,36,22,0.06); flex-shrink: 0;
}
html.gen-sheet .sh-name { font-weight: 600; }
html.gen-sheet .sh-muted { color: var(--sh-ink-light); }
html.gen-sheet .sh-chip {
    display: inline-block; font-size: 0.66rem; font-weight: 700; border-radius: 999px;
    padding: 0.05rem 0.5rem; white-space: nowrap;
}
html.gen-sheet .sh-chip-ready { background: #7d3fc9; color: #fff; }
html.gen-sheet .sh-chip-beta { background: #2e6f9e; color: #fff; }
html.gen-sheet .sh-chip-live { background: #3a8a3a; color: #fff; }
html.gen-sheet .sh-chip-source { background: rgba(0,0,0,0.08); color: var(--sh-ink); }
html.gen-sheet .sh-chip-source.sh-chip-equipment { background: #55606b; color: #fff; }
html.gen-sheet .sh-chip-source.sh-chip-gift { background: #aa2e2e; color: #fff; }
html.gen-sheet .sh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
html.gen-sheet .sh-dot-notes { background: #9a5c00; }
html.gen-sheet .sh-empty-row td { text-align: center; padding: 2rem; color: var(--sh-ink-light); font-style: italic; }

/* ---------------- Edit dock (persistent, right column) -------------------- */
html.gen-sheet .sh-dock {
    grid-area: dock;
    display: flex; flex-direction: column;
    border-left: 2px solid var(--sh-ink);
    background: rgba(255,255,255,0.35);
    padding: 0.6rem 0.75rem 1.25rem;
    min-height: 0; min-width: 0;
    overflow-y: auto;
}
html.gen-sheet .generator-beta-column {
    display: block !important; width: auto; position: static; max-height: none; overflow: visible;
}
html.gen-sheet .beta-item-panel { margin-bottom: 0; }
html.gen-sheet .beta-panel-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
html.gen-sheet .sh-fold-flag {
    font-size: 0.58rem; font-weight: 800; letter-spacing: 0.04em; border-radius: 999px; padding: 0.05rem 0.4rem; flex-shrink: 0;
}
html.gen-sheet .sh-fold-flag.sh-fold-set { background: #2e6f9e; color: #fff; }
html.gen-sheet .sh-fold-flag.sh-fold-default { background: rgba(0,0,0,0.08); color: var(--sh-ink-light); }

@media (max-width: 1100px) {
    html.gen-sheet.sh-ready .sh-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr 42dvh;
        grid-template-areas:
            "topbar" "toolbar" "table" "dock";
        height: auto; min-height: 100dvh;
    }
    html.gen-sheet .sh-dock { border-left: none; border-top: 2px solid var(--sh-ink); }
}