/* ============================================================
   MyReader editorial design system — paper, ink, one oxblood
   accent; Fraunces for display, Newsreader for text.

   Loaded in base.html AFTER theme.bundle.css so these overrides
   win the cascade on every app page (library, history, account,
   collections, upgrade…). Page-specific styles (e.g. the reader's
   front-matter .bh system) build on these tokens.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,560;9..144,640&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root {
    --ed-paper: #f7f2e7;          /* deep paper (stage, sidebar) */
    --ed-paper-soft: #f9f4ea;     /* softer paper (panels) */
    --ed-paper-raised: #fffdf6;   /* raised paper (cards, inputs) */
    --ed-ink: #262118;
    --ed-muted: #6f6754;
    --ed-accent: #8a2d1c;
    --ed-accent-deep: #6d2114;
    --ed-line: #e2d8c2;
    --ed-line-strong: #c9bc9d;
    --ed-display: 'Fraunces', Georgia, serif;
    --ed-text: 'Newsreader', Georgia, serif;
}

/* ---------- Base ---------- */
body {
    background-color: var(--ed-paper-soft);
    color: var(--ed-ink);
}

h1, h2, h3, h4, .header-title, .card-header-title, .modal-title {
    font-family: var(--ed-display);
    color: var(--ed-ink);
}

a {
    color: var(--ed-accent);
}

a:hover {
    color: var(--ed-accent-deep);
}

hr {
    border-color: var(--ed-line);
    opacity: 1;
}

/* ---------- Sidebar (app nav) ----------
   Stock structure and sizing; colors tuned to the palette. Kept very
   light (raised paper, not deep cream) so the chrome stays quiet. */
#sidebar.navbar-vertical,
#sidebar {
    background-color: var(--ed-paper-raised);
    border-right: 1px solid var(--ed-line);
}

#sidebar .nav-link {
    color: var(--ed-muted);
}

#sidebar .nav-link:hover,
#sidebar .nav-link.active {
    color: var(--ed-accent);
}

#sidebar hr {
    border-color: var(--ed-line);
}

/* ---------- Cards ---------- */
.card {
    background-color: var(--ed-paper-raised);
    border: 1px solid var(--ed-line);
    border-radius: 2px;
    box-shadow: none;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ed-line);
}

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--ed-accent);
    border-color: var(--ed-accent);
    color: #f9f3e6;
    border-radius: 2px;
    box-shadow: 2px 2px 0 rgba(38, 33, 24, 0.7);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--ed-accent-deep) !important;
    border-color: var(--ed-accent-deep) !important;
    color: #fff;
    box-shadow: 3px 3px 0 rgba(38, 33, 24, 0.7);
    transform: translate(-1px, -1px);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--ed-accent);
    border-color: var(--ed-accent);
    color: #f9f3e6;
    opacity: 0.65;
    box-shadow: none;
}

.btn-outline-primary {
    border-color: var(--ed-line-strong);
    color: var(--ed-accent);
    border-radius: 2px;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #f0e9d8 !important;
    border-color: var(--ed-accent) !important;
    color: var(--ed-accent-deep) !important;
}

.btn-outline-secondary {
    border-color: var(--ed-line-strong);
    color: var(--ed-muted);
    border-radius: 2px;
}

.btn-outline-secondary:hover {
    background-color: #f0e9d8;
    border-color: var(--ed-accent);
    color: var(--ed-ink);
}

.btn-link {
    color: var(--ed-accent);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    background-color: var(--ed-paper-raised);
    border-color: var(--ed-line-strong);
    color: var(--ed-ink);
    border-radius: 2px;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ed-paper-raised);
    border-color: var(--ed-accent);
    color: var(--ed-ink);
    box-shadow: none;
}

/* Checkboxes / toggle switches (e.g. the Annual/Monthly switch) — oxblood
   instead of Bootstrap blue when checked */
.form-check-input:checked {
    background-color: var(--ed-accent);
    border-color: var(--ed-accent);
}

.form-check-input:focus {
    border-color: var(--ed-accent);
    box-shadow: none;
}

.form-control::placeholder {
    color: var(--ed-line-strong);
}

/* ---------- Tables (history, admin lists) ---------- */
.table {
    color: var(--ed-ink);
}

.table thead th {
    background-color: var(--ed-paper);
    color: var(--ed-muted);
    border-bottom: 1px solid var(--ed-line-strong);
    font-family: var(--ed-display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.table td,
.table th {
    border-color: var(--ed-line);
}

/* ---------- Modals ---------- */
.modal-content {
    background-color: var(--ed-paper-soft);
    border: 1px solid var(--ed-ink);
    border-radius: 2px;
}

.modal-header,
.modal-footer {
    border-color: var(--ed-line);
}

/* ---------- Badges / pills ---------- */
.badge.bg-primary,
.badge.bg-secondary-soft {
    background-color: var(--ed-accent) !important;
    color: #f9f3e6;
}

/* Status badges keep their semantics, in warmer tones */
.badge.bg-success {
    background-color: #4a6b41 !important;
    color: #f3f0e4;
}

.badge.bg-info {
    background-color: #efe7d2 !important;
    color: #6f6754;
}

.badge.bg-danger {
    background-color: #a8362a !important;
    color: #f9f3e6;
}

/* ---------- Progress bars (uploads etc.) ---------- */
.progress {
    background-color: var(--ed-line);
    border-radius: 2px;
}

.progress-bar {
    background-color: var(--ed-accent);
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
    background-color: var(--ed-paper-raised);
    border: 1px solid var(--ed-line);
    border-radius: 2px;
}

.dropdown-item {
    color: var(--ed-ink);
}

.dropdown-item:hover {
    background-color: #f0e9d8;
    color: var(--ed-accent);
}

/* ---------- List groups ---------- */
.list-group-item {
    background-color: transparent;
    border-color: var(--ed-line);
    color: var(--ed-ink);
}

/* ---------- Pagination ---------- */
.page-link {
    color: var(--ed-accent);
    background-color: var(--ed-paper-raised);
    border-color: var(--ed-line);
}

.page-item.active .page-link {
    background-color: var(--ed-accent);
    border-color: var(--ed-accent);
}