/* ═══════════════════════════════════════════════════════════
   ui-white.css — White / Light theme override
   Load AFTER flipbook.css and ui.css to override dark theme.
   ───────────────────────────────────────────────────────────
   Usage: <link rel="stylesheet" href="css/flipbook.css">
          <link rel="stylesheet" href="css/ui.css">
          <link rel="stylesheet" href="css/ui-white.css">
═══════════════════════════════════════════════════════════ */

:root {
  /* Remap dark navy → white/light grays */
  --navy:         #FFFFFF;
  --navy-mid:     #F4F4F2;
  --navy-dark:    #EEEDE9;

  /* Body text on light bg */
  --body-text:    #2C2C2C;
  --muted:        #888480;
  --border:       rgba(0,0,0,0.09);

  /* Primary color override: La Cucina red */
  --coral:        #c70000;
  --coral-dark:   #a30000;
  --coral-light:  #fdeaea;
}

/* ── Page background ── */
html, body { background: #F8F5F2; }

/* ── Stage background ── */
#bc-stage {
  background: #F0EDE8;
  background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Toolbar ── */
#bc-toolbar {
  background: #F7F7F5;
  border-bottom: 1px solid rgba(0,0,0,0.14);
}

.bc-tb__brand-logo       { color: #1C2B4A; }
.bc-tb__title-main       { color: #1C2B4A; }
.bc-tb__title-sub        { color: rgba(0,0,0,0.8); }
.bc-tb__sep              { background: rgba(0,0,0,0.10); }

.bc-tb__btn              { color: rgba(0,0,0,0.60); }
.bc-tb__btn:hover        { background: rgba(0,0,0,0.07); color: #1C2B4A; }
.bc-tb__btn.is-active    { background: rgba(199,0,0,0.10); color: var(--coral); }

.bc-tb__btn::after {
  background: rgba(0,0,0,0.80);
  color: #fff;
}

.bc-tb__page-input {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.12);
  color: #1C2B4A;
}
.bc-tb__page-input:focus {
  border-color: var(--coral);
  background: rgba(0,0,0,0.07);
}

.bc-tb__page-total  { color: rgba(0,0,0,0.40); }
.bc-tb__zoom-val    { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.65); }
.bc-tb__select {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.10);
  color: rgba(0,0,0,0.65);
}
.bc-tb__select option { background: #fff; color: #1C2B4A; }

/* ── Sidebar ── */
#bc-sidebar {
  background: #FFFFFF;
  border-right: 1px solid rgba(0,0,0,0.08);
}

.bc-sidebar__tab       { color: rgba(0,0,0,0.40); border-bottom-color: transparent; }
.bc-sidebar__tab:hover { color: rgba(0,0,0,0.70); background: rgba(0,0,0,0.02); }
.bc-sidebar__tab.is-active { color: var(--coral); border-bottom-color: var(--coral); }

.bc-panel__title { color: #1C2B4A; }
.bc-panel__sub   { color: rgba(0,0,0,0.38); }

/* Scrollbar */
.bc-panel__body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }

/* TOC */
.bc-toc-item                  { border-bottom-color: rgba(0,0,0,0.05); }
.bc-toc-item:hover            { background: rgba(0,0,0,0.03); }
.bc-toc-item.is-active        { background: rgba(224,125,91,0.08); }
.bc-toc-item__bullet          { background: rgba(0,0,0,0.20); }
.bc-toc-item__title           { color: rgba(0,0,0,0.60); }
.bc-toc-item:hover .bc-toc-item__title    { color: #1C2B4A; }
.bc-toc-item.is-active .bc-toc-item__title{ color: #1C2B4A; font-weight: 500; }
.bc-toc-item__page            { color: rgba(0,0,0,0.28); }
.bc-toc-empty                 { color: rgba(0,0,0,0.28); }

/* Bookmarks */
.bc-bookmark-item             { border-bottom-color: rgba(0,0,0,0.05); }
.bc-bookmark-item:hover       { background: rgba(0,0,0,0.02); }
.bc-bookmark-item__label      { color: rgba(0,0,0,0.75); }
.bc-bookmark-item__page       { color: rgba(0,0,0,0.35); }
.bc-bookmark-empty            { color: rgba(0,0,0,0.28); }

/* Search */
.bc-search-field {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.10);
}
.bc-search-field:focus-within {
  border-color: var(--coral);
  background: rgba(0,0,0,0.06);
}
.bc-search-input            { color: #1C2B4A; }
.bc-search-input::placeholder { color: rgba(0,0,0,0.30); }
.bc-search-clear            { background: rgba(0,0,0,0.08); color: rgba(0,0,0,0.45); }
.bc-search-meta             { color: rgba(0,0,0,0.35); }
.bc-search-result           { border-bottom-color: rgba(0,0,0,0.05); }
.bc-search-result:hover     { background: rgba(0,0,0,0.03); }
.bc-search-result.is-active { background: rgba(224,125,91,0.07); }
.bc-search-result__excerpt  { color: rgba(0,0,0,0.55); }
.bc-spinner                 { border-color: rgba(0,0,0,0.10); border-top-color: var(--coral); }

/* ── Status bar ── */
#bc-statusbar {
  background: #FFFFFF;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.bc-status__item        { color: rgba(0,0,0,0.38); }
.bc-status__item span   { color: rgba(0,0,0,0.60); }

/* ── Progress bar ── */
#bc-progress            { background: rgba(0,0,0,0.06); }

/* ── Loader ── */
#bc-loader              { background: #F8F5F2; }
.bc-loader__logo        { color: #1C2B4A; }
.bc-loader__bar-wrap    { background: rgba(0,0,0,0.10); }
.bc-loader__text        { color: rgba(0,0,0,0.40); }

/* ── Hotspot nav buttons ── */
.bc-hotspot__btn {
  background: rgba(255,255,255,0.95);
  color: #1C2B4A;
}
.bc-hotspot:hover .bc-hotspot__btn {
  background: #c70000;
  color: #fff;
  transform: scale(1.08);
}

/* ── Book shadow ── */
#bc-book-wrap::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, transparent 70%);
}

/* ── Continuous mode ── */
#bc-continuous::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.14); }

/* ── Grid view ── */
.bc-grid-item            { background: rgba(0,0,0,0.04); }
.bc-grid-item__label     { color: rgba(0,0,0,0.45); }
.bc-grid-item.is-active .bc-grid-item__label { color: var(--coral); }

/* ── Continuous page number chip ── */
.bc-cont-item__num {
  background: rgba(255,255,255,0.75);
  color: rgba(0,0,0,0.55);
}

/* ── Toast ── */
.bc-toast {
  background: rgba(255,255,255,0.97);
  border-color: rgba(0,0,0,0.08);
  color: #1C2B4A;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* ── Modals ── */
.bc-modal-overlay { background: rgba(0,0,0,0.40); }
.bc-modal {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.09);
}
.bc-modal__title           { color: #1C2B4A; }
.bc-modal__close           { color: rgba(0,0,0,0.40); }
.bc-modal__close:hover     { background: rgba(0,0,0,0.06); color: #1C2B4A; }
.bc-modal__label           { color: rgba(0,0,0,0.45); }
.bc-modal__input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #1C2B4A;
}
.bc-modal__input::placeholder { color: rgba(0,0,0,0.30); }
.bc-modal__btn--ghost {
  border-color: rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.60);
}
.bc-modal__btn--ghost:hover { border-color: rgba(0,0,0,0.28); color: #1C2B4A; }

/* ── Shortcuts overlay ── */
#bc-shortcuts              { background: rgba(0,0,0,0.45); }
.bc-shortcuts__box {
  background: #FFFFFF;
  border-color: rgba(0,0,0,0.09);
}
.bc-shortcuts__title       { color: #1C2B4A; }
.bc-shortcut-key {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.14);
  color: rgba(0,0,0,0.65);
}
.bc-shortcut-desc          { color: rgba(0,0,0,0.50); }

/* ── Fullscreen overrides ── */
:fullscreen #bc-stage      { background: #F0EDE8; }

/* ── Bookmark name input ── */
.bc-bookmark-name-input {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
  color: #1C2B4A;
}
.bc-bookmark-name-input::placeholder { color: rgba(0,0,0,0.30); }