/* ===========================================================================
   Table Roller — third companion tool beside the Dice Tower + Calculator.
   Theme variables come from app.css (:root).
   =========================================================================== */

.tbl-fab {
    position: fixed; right: 9rem; bottom: 1.4rem; z-index: 9000;
    width: 3.4rem; height: 3.4rem; border: none; cursor: pointer;
    background: radial-gradient(circle at 35% 30%, #26242f, #14121a);
    color: var(--gold-soft); border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(0,0,0,.6), inset 0 0 0 1px var(--line);
    transition: transform .18s ease, box-shadow .18s ease;
}
.tbl-fab:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 12px 34px rgba(0,0,0,.7), inset 0 0 0 1px var(--gold), 0 0 18px rgba(200,160,79,.3); }
.tbl-fab:active { transform: scale(.94); }

.tbl-panel {
    position: fixed; right: 1.4rem; bottom: 5.4rem; z-index: 9000;
    width: min(23rem, calc(100vw - 2.8rem));
    max-height: min(34rem, calc(100vh - 8rem));
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--panel), #14111d);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform-origin: bottom right;
    transform: translateY(12px) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.2,.8,.25,1), opacity .22s ease;
}
.tbl-panel.is-open { transform: none; opacity: 1; pointer-events: auto; }

.tbl-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .8rem .5rem; border-bottom: 1px solid var(--line); }
.tbl-title { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .98rem; }
.tbl-close { background: none; border: none; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.tbl-close:hover { color: var(--ink); }

.tbl-browse, .tbl-view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tbl-browse { padding: .7rem .8rem .8rem; }
/* [hidden] must beat the display:flex above (else the panes never toggle). */
.tbl-browse[hidden], .tbl-view[hidden], .tbl-action[hidden] { display: none; }

.tbl-search {
    width: 100%; box-sizing: border-box; padding: .5rem .6rem; margin-bottom: .5rem;
    background: #00000033; border: 1px solid var(--line); border-radius: .5rem;
    color: var(--ink); font: inherit;
}
.tbl-search::placeholder { color: #6f685c; }

.tbl-results { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.tbl-results li[data-key] {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .5rem; border-radius: .5rem; cursor: pointer; border: 1px solid transparent;
}
.tbl-results li[data-key]:hover { background: #c8a04f14; border-color: var(--gold); }
.tbl-r-name { color: var(--ink); font-size: .9rem; }
.tbl-r-meta { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.tbl-die { font-family: 'Cinzel', serif; color: var(--gold-soft); font-size: .74rem; }
.tbl-src { font-size: .64rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: .02rem .4rem; }
.tbl-msg { color: var(--ink-soft); font-size: .85rem; padding: .5rem; text-align: center; }

/* ---- Table detail view ------------------------------------------------- */
.tbl-view { padding: .6rem .8rem .8rem; }
.tbl-v-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.tbl-back { background: none; border: none; color: var(--gold-soft); cursor: pointer; font: inherit; font-size: .8rem; padding: 0; flex-shrink: 0; }
.tbl-back:hover { text-decoration: underline; }
.tbl-v-title { color: var(--ink); font-size: .9rem; line-height: 1.25; }

.tbl-rollbar { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.tbl-roll { cursor: pointer; padding: .4rem .9rem; font-family: 'Cinzel', serif; }
.tbl-roll-out { min-height: 1.6rem; display: flex; align-items: center; }
.tbl-roll-num { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--gold-soft); animation: tbl-pop .3s ease; }
@keyframes tbl-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.tbl-action { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.tbl-hint { font-size: .78rem; color: var(--ink-soft); }
.tbl-add { cursor: pointer; font-size: .8rem; padding: .25rem .6rem; }
.tbl-add.is-added { color: var(--gold-soft); border-color: var(--gold); }
.tbl-add:disabled { cursor: default; opacity: .8; }

.tbl-scroll { overflow: auto; flex: 1; border: 1px solid var(--line); border-radius: .5rem; }
.tbl-grid { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tbl-grid th { position: sticky; top: 0; background: #14111d; color: var(--gold-soft); font-family: 'Cinzel', serif; font-weight: 500; text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); font-size: .74rem; }
.tbl-grid td { padding: .3rem .5rem; border-bottom: 1px solid #ffffff0f; color: var(--ink); vertical-align: top; }
.tbl-grid tr:last-child td { border-bottom: none; }
.tbl-range { white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tbl-grid tr.is-hit td { background: #c8a04f24; }
.tbl-grid tr.is-hit .tbl-range { color: var(--gold-soft); font-weight: 600; }

.tbl-toast {
    position: fixed; left: 50%; bottom: 2rem; transform: translate(-50%, 12px); z-index: 9700;
    background: linear-gradient(180deg, var(--panel), #14111d); border: 1px solid var(--gold);
    color: var(--ink); padding: .5rem .9rem; border-radius: .6rem; font-size: .85rem;
    box-shadow: var(--shadow); opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.tbl-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media print { .tbl-fab, .tbl-panel, .tbl-toast { display: none !important; } }