/* ═══════════════════════════════════════════════════════════════════════════
   history.css — Generation History page (Module 17)
   Leans heavily on dashboard.css; only history-specific overrides live here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Stats: 5-column override for history stats row ────────────────────── */
.history-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 1100px) { .history-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .history-stats-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.hist-filter-bar {
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 12px;
    padding: .875rem 1.125rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.hist-filter-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.hist-filter-label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #475569;
    white-space: nowrap;
    min-width: 46px;
    flex-shrink: 0;
}

.hist-divider {
    width: 1px; height: 16px;
    background: var(--color-border-dark);
    flex-shrink: 0;
    margin: 0 .1rem;
}

/* Date input */
.hist-date {
    height: 30px;
    padding: 0 .625rem;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: .8rem;
    outline: none;
    color-scheme: dark;
    transition: border-color .12s;
}
.hist-date:focus { border-color: var(--color-primary); }

/* Search */
.hist-search-wrap { position: relative; flex: 1; min-width: 150px; max-width: 240px; }
.hist-search-icon {
    position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
    font-size: .95rem; color: #475569; pointer-events: none;
}
.hist-search {
    width: 100%;
    height: 30px;
    padding: 0 .625rem 0 1.75rem;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: .8rem;
    outline: none;
    transition: border-color .12s;
}
.hist-search:focus { border-color: var(--color-primary); }

/* Select */
.hist-select {
    height: 30px;
    padding: 0 .5rem;
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: .8rem;
    outline: none;
    cursor: pointer;
    max-width: 170px;
    transition: border-color .12s;
}
.hist-select:focus { border-color: var(--color-primary); }

/* Pills */
.hist-pills { display: flex; gap: .25rem; flex-wrap: wrap; }
.hist-pill {
    height: 26px;
    padding: 0 .625rem;
    border-radius: 100px;
    border: 1px solid var(--color-border-dark);
    background: transparent;
    color: #64748b;
    font-size: .775rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: border-color .12s, color .12s, background .12s;
}
.hist-pill:hover { border-color: rgba(99,102,241,.45); color: #c7d2fe; }
.hist-pill.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }

/* Sort direction button */
.hist-sort-dir {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--color-border-dark);
    background: transparent; color: #64748b;
    cursor: pointer; flex-shrink: 0;
    transition: border-color .12s, color .12s;
}
.hist-sort-dir:hover { border-color: rgba(99,102,241,.45); color: #c7d2fe; }

/* Clear filters link */
.hist-clear-btn {
    height: 26px;
    padding: 0 .625rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: .775rem;
    cursor: pointer;
    margin-left: auto;
    white-space: nowrap;
    transition: color .12s;
    display: flex; align-items: center; gap: .25rem;
}
.hist-clear-btn:hover { color: #f87171; }

/* ── Toolbar (result count + view toggle) ───────────────────────────────── */
.hist-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .875rem;
}
.hist-result-count {
    font-size: .8125rem;
    color: #64748b;
}
.hist-result-count strong { color: #e2e8f0; font-weight: 600; }

.hist-view-toggle {
    display: flex;
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.hist-view-btn {
    display: flex; align-items: center; justify-content: center;
    padding: .3rem .55rem;
    background: transparent; border: none;
    color: #64748b; cursor: pointer;
    transition: background .12s, color .12s;
}
.hist-view-btn.active { background: var(--color-primary); color: #fff; }
.hist-view-btn:hover:not(.active) { background: rgba(255,255,255,.05); color: #e2e8f0; }

/* ── Thumbnail cell ─────────────────────────────────────────────────────── */
.hist-thumb {
    width: 34px; height: 34px;
    border-radius: 6px;
    background: rgba(0,0,0,.3);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.hist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hist-thumb .material-symbols-outlined { font-size: .95rem; color: #334155; }

/* ── Grid view ──────────────────────────────────────────────────────────── */
.hist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hist-card {
    background: var(--color-surface-dark);
    border: 1px solid var(--color-border-dark);
    border-radius: 12px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .14s, box-shadow .14s;
}
.hist-card:hover { border-color: rgba(99,102,241,.35); box-shadow: 0 4px 20px rgba(0,0,0,.35); }

.hist-card-img {
    height: 110px;
    background: rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
}
.hist-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hist-card-img .material-symbols-outlined { font-size: 2rem; color: #1e2a40; }

.hist-card-body { padding: .875rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.hist-card-name {
    font-size: .875rem; font-weight: 600; color: #e2e8f0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist-card-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.hist-card-meta {
    font-size: .75rem; color: #475569; margin-top: auto;
    display: flex; gap: .625rem; flex-wrap: wrap; align-items: center;
}
.hist-card-meta .material-symbols-outlined { font-size: .85rem; vertical-align: middle; }

.hist-card-footer {
    padding: .625rem .875rem;
    border-top: 1px solid var(--color-border-dark);
    background: rgba(0,0,0,.1);
    display: flex; gap: .375rem;
}

/* ── Group heading row (shared grid + table) ────────────────────────────── */
.hist-group-row {
    background: rgba(0,0,0,.18) !important;
}
.hist-group-header {
    display: flex; align-items: center; gap: .5rem;
    grid-column: 1 / -1;
    padding: .35rem .25rem .2rem;
    border-bottom: 1px solid var(--color-border-dark);
    margin-bottom: .2rem;
}
.hist-group-label { font-size: .8rem; font-weight: 700; color: #e2e8f0; }
.hist-group-count {
    font-size: .7rem; color: #64748b;
    background: rgba(255,255,255,.06);
    border-radius: 100px;
    padding: .06rem .4rem;
    margin-left: auto;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.hist-pagination {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .75rem;
    padding: .875rem 0 .25rem;
    border-top: 1px solid var(--color-border-dark);
}
.hist-page-info { font-size: .8rem; color: #64748b; }
.hist-page-btns { display: flex; align-items: center; gap: .25rem; }
.hist-page-btn {
    min-width: 32px; height: 32px; padding: 0 .45rem;
    border-radius: 8px;
    border: 1px solid var(--color-border-dark);
    background: transparent; color: #64748b;
    font-size: .8125rem; font-weight: 500; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .12s, color .12s, background .12s;
}
.hist-page-btn:hover:not(:disabled):not(.active) { border-color: rgba(99,102,241,.5); color: #c7d2fe; }
.hist-page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }
.hist-page-btn:disabled { opacity: .3; cursor: not-allowed; }
.hist-page-ellipsis { color: #475569; padding: 0 .2rem; line-height: 32px; font-size: .875rem; }

/* ── Skeleton shimmer ───────────────────────────────────────────────────── */
@keyframes hist-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.hist-skeleton {
    background: linear-gradient(90deg, var(--color-border-dark) 25%, rgba(255,255,255,.04) 50%, var(--color-border-dark) 75%);
    background-size: 800px 100%;
    animation: hist-shimmer 1.4s infinite;
    border-radius: 10px;
}