/* storage-manager.css
 *
 * The Storage panel, inside Settings.
 *
 * Designed for a long list, not a short one. Each book is a single compact
 * line — cover, title, size — so ten books fit on a phone in landscape where
 * a card layout would show two. Detail and the destructive buttons only appear
 * when a row is expanded, which keeps Delete away from a stray thumb.
 *
 * Inherits the viewer's palette (--accent, --border, --text-dim …) so it looks
 * native to the app in both themes. Only widely-supported CSS — no :has(), no
 * container queries — because this has to run on old phones.
 */

/* ── Usage ─────────────────────────────────────────────────────── */

.sm-usage {
    padding: 12px 0 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.sm-usage-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.sm-usage-count { font-size: 14px; color: var(--text); }
.sm-usage-bytes { font-size: 14px; color: var(--accent); font-weight: 500; }

.sm-usage-track {
    height: 5px;
    border-radius: 3px;
    background: var(--bg-input, rgba(128, 128, 128, .18));
    overflow: hidden;
}
.sm-usage-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width .35s ease;
}

.sm-usage-detail {
    margin-top: 7px;
    font-size: 12px;
    color: var(--text-dim);
}
.sm-usage-detail-unavailable { font-style: italic; }

/* ── Toolbar — filter · sort · select ──────────────────────────
   Only rendered once there are enough books to need it. */

.sm-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 10px 0;
}

.sm-search {
    flex: 1 1 auto;
    min-width: 0;                       /* or the input refuses to shrink */
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 13px;
    color: var(--text);
    outline: none;
}
.sm-search:focus { border-color: var(--accent); }

.sm-sort {
    flex: 0 0 auto;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-radius: 5px;
    padding: 5px 6px;
    font-size: 12.5px;
    color: var(--text);
    outline: none;
    cursor: pointer;
}
.sm-sort:focus { border-color: var(--accent); }

/* ── Selection bar (Select mode) ───────────────────────────────── */

.sm-selection {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: var(--accent-dim, rgba(200, 169, 110, .12));
    border: 1px solid var(--border-mid);
}
.sm-selection-count { font-size: 13px; color: var(--text); }

/* ── The list ──────────────────────────────────────────────────── */

.sm-books {
    display: flex;
    flex-direction: column;
}

.sm-book {
    border-bottom: 1px solid var(--border);
    transition: background-color .3s;
}
.sm-book:last-of-type { border-bottom: none; }

/* Brief landing highlight for "Go to cache" jumps from the Catalogue — fades
   on its own (see the setTimeout in focusBook()), no dismiss needed. */
.sm-book--focused { background: var(--accent-dim, rgba(200, 169, 110, .14)); }

/* The compact line. This is the whole row when collapsed. */
.sm-book-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    cursor: pointer;
    user-select: none;
}
.sm-book-head:hover { background: var(--accent-dim, rgba(128, 128, 128, .06)); }

.sm-check {
    flex: 0 0 auto;
    width: 16px; height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.sm-cover {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    object-fit: cover;
    border-radius: 3px;
    background: var(--bg-input, rgba(128, 128, 128, .15));
}
/* bhikkhu-sumedha's cover is a portrait photo, not a 16:9 poster — see the
   same rule in library.css for the full explanation. */
img[src*="bhikkhu-sumedha/cover.jpg"] { object-position: center top; }
.sm-cover--none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-dim);
}

/* Takes the slack, so the size stays hard right */
.sm-book-main {
    flex: 1 1 auto;
    min-width: 0;
}

.sm-book-title {
    font-size: 13.5px;
    color: var(--text);
    /* One line. A long title truncates rather than reflowing the row and
       breaking the alignment of the whole list. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Only shown when a book is not simply "complete" */
.sm-book-flag {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 1px;
}

.sm-book-size {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;   /* sizes line up down the column */
}

.sm-chevron {
    flex: 0 0 auto;
    width: 0; height: 0;
    border-left: 4px solid var(--text-dim);
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    transition: transform .18s ease;
}
.sm-book.is-open .sm-chevron { transform: rotate(90deg); }

/* A cleared book is still listed — so it can be removed — but it reads as
   inactive rather than as something you can open. */
.sm-status-cache-missing .sm-book-title,
.sm-status-cache-missing .sm-cover { opacity: .55; }

/* ── Expanded detail ───────────────────────────────────────────── */

.sm-book-body {
    padding: 2px 2px 12px 44px;   /* aligned under the title, past the cover */
}

.sm-book-info {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 8px;
}

.sm-book-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.sm-btn {
    padding: 5px 11px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--border-mid);
    border-radius: 5px;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.sm-btn:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim, rgba(200, 169, 110, .1));
}
.sm-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* Destructive actions read as destructive — but only once expanded, so they
   are never one stray tap away. */
.sm-btn-uninstall,
.sm-btn-delete-selected,
.sm-btn-delete-all {
    color: #c8705e;
    border-color: rgba(200, 112, 94, .45);
}
.sm-btn-uninstall:hover:not(:disabled),
.sm-btn-delete-all:hover:not(:disabled),
.sm-btn-delete-selected:hover:not(:disabled) {
    color: #fff;
    background: #b3543f;
    border-color: #b3543f;
}

.sm-btn-select { flex: 0 0 auto; }

/* ── Global actions ────────────────────────────────────────────── */

.sm-global-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
}

/* ── States ────────────────────────────────────────────────────── */

.sm-empty,
.sm-no-match,
.sm-error {
    padding: 16px 2px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-dim);
}
.sm-error { color: #c8705e; }

/* ── Touch ─────────────────────────────────────────────────────── */

@media (pointer: coarse) {
    /* A row is a tap target, so give it a comfortable height … */
    .sm-book-head { padding: 11px 2px; }
    /* … and the buttons too, since a mis-tap here deletes a book. */
    .sm-btn       { padding: 8px 13px; font-size: 12.5px; }
    .sm-check     { width: 20px; height: 20px; }
}