/* catalog\static\catalog\css\components\darkmode-apple-news.css */

/* ============================================================
   APPLE NEWS–STYLE DARK MODE — FINAL CLEAN VERSION
   ============================================================ */

/* ------------------------------------------------------------
   1. DARK PALETTE (Apple News)
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] {
  --apple-bg: #0b0d10;          /* deep canvas */

  --apple-surface: #1c1f26;     /* card background */
  --apple-surface: #1c1f26;  

  --apple-surface-2: #262c36;   /* metadata container */
  --apple-surface-2: #383535;   /* metadata container */
  --apple-surface-2: #262c36;   /* metadata container */
  
  --apple-border: #2f3540;      /* separators */
  --apple-text: #e8eaed;        /* primary text */
  --apple-muted: #9aa0aa;       /* metadata text */
  --apple-accent: #9ecbff;      /* link blue */
}

/* ------------------------------------------------------------
   2. GLOBAL PAGE BACKGROUND
   ------------------------------------------------------------ */
/* html[data-bs-theme="dark"] body {
  background: linear-gradient(to bottom, #0b0d10 0%, #0a0c0f 100%);
  color: var(--apple-text);
} */

/* ------------------------------------------------------------
   2. GLOBAL PAGE BACKGROUND IMAGE
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] body {
  /* Dark mode background image */
  background-image: url('/static/catalog/images/wallpaper_index_dark.png');

  /* Fallback gradient behind the image */
  background-color: #0b0d10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  /* Text color */
  color: var(--apple-text);
}

/* ------------------------------------------------------------
   3. BOOTSTRAP COMPONENT OVERRIDES
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .breadcrumb,
html[data-bs-theme="dark"] .modal-content {
  background-color: var(--apple-surface) !important;
  color: var(--apple-text);
  border-color: var(--apple-border);
}

html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
  background-color: var(--apple-surface);
  color: var(--apple-text);
  border-color: var(--apple-border);
}

html[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--apple-muted);
}

html[data-bs-theme="dark"] .btn-outline-secondary {
  color: var(--apple-text);
  border-color: var(--apple-border);
}

html[data-bs-theme="dark"] .btn.btn-light {
  background-color: #1f232d;
  color: var(--apple-text);
  border-color: var(--apple-border);
}

html[data-bs-theme="dark"] .btn.btn-light:hover {
  background-color: #2a2f3a;
}

html[data-bs-theme="dark"] .breadcrumb-item,
html[data-bs-theme="dark"] .breadcrumb-item a,
html[data-bs-theme="dark"] .breadcrumb-item.active {
  color: var(--apple-muted) !important;
}

html[data-bs-theme="dark"] .navbar {
  background-color: #12141a !important;
  border-bottom: 1px solid var(--apple-border);
}

html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] nav.bg-white {
  background-color: var(--apple-surface) !important;
  color: var(--apple-text) !important;
}

html[data-bs-theme="dark"] .bg-primary {
  background-color: #1f4f8a !important;
  color: var(--apple-text) !important;
  border-color: var(--apple-border) !important;
}

html[data-bs-theme="dark"] [data-bs-toggle="collapse"] {
  background-color: #1f232d;
  color: var(--apple-text);
}

html[data-bs-theme="dark"] table {
  color: var(--apple-text);
}

/* ------------------------------------------------------------
   4. LINKS
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] a {
  color: var(--apple-accent);
  text-decoration: none;
}

html[data-bs-theme="dark"] a:hover,
html[data-bs-theme="dark"] a:focus {
  color: #cfe5ff;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   5. SUMMERNOTE DARK MODE
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] .note-toolbar {
  background-color: #181b22 !important;
  border-color: var(--apple-border);
}

html[data-bs-theme="dark"] .note-editor {
  background-color: var(--apple-surface);
  border-color: var(--apple-border);
}

html[data-bs-theme="dark"] .note-editable {
  background-color: var(--apple-bg) !important;
  color: var(--apple-text) !important;
}

html[data-bs-theme="dark"] .note-btn {
  background-color: #1f232d;
  color: var(--apple-text);
  border-color: var(--apple-border);
}

html[data-bs-theme="dark"] .note-btn:hover {
  background-color: #2a2f3a;
}

html[data-bs-theme="dark"] .note-dropdown-menu {
  background-color: var(--apple-surface);
  color: var(--apple-text);
}

/* ------------------------------------------------------------
   6. SEARCH TIPS
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] .search-tips,
html[data-bs-theme="dark"] .search-tips .card,
html[data-bs-theme="dark"] .search-tips .alert {
  background-color: var(--apple-surface) !important;
  color: var(--apple-text);
  border-color: var(--apple-border);
}

/* ------------------------------------------------------------
   7. AUTHOR BIOGRAPHY (GLOBAL)
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] .author-biography,
html[data-bs-theme="dark"] .author-biography .card,
html[data-bs-theme="dark"] .author-biography .border,
html[data-bs-theme="dark"] .author-biography .bg-light {
  background-color: var(--apple-surface) !important;
  color: var(--apple-text) !important;
  border-color: var(--apple-border) !important;
}

html[data-bs-theme="dark"] .author-biography p,
html[data-bs-theme="dark"] .author-biography li,
html[data-bs-theme="dark"] .author-biography span {
  color: var(--apple-text);
}

/* ------------------------------------------------------------
   8. BOOK CARDS
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] .book-card .card-title {
  color: var(--apple-text) !important;
}

html[data-bs-theme="dark"] .book-card .card-text,
html[data-bs-theme="dark"] .book-card .card-text.small,
html[data-bs-theme="dark"] .book-card p.card-text.small.text-muted {
  color: var(--apple-muted) !important;
  opacity: 1 !important;
}

html[data-bs-theme="dark"] .book-card .text-muted {
  color: var(--apple-muted) !important;
}

/* ------------------------------------------------------------
   9. FIX: INVISIBLE TEXT IN ARTICLE CARDS (All Articles page)
   ------------------------------------------------------------ */
html[data-bs-theme="dark"] .card .card-title,
html[data-bs-theme="dark"] .card a.card-title,
html[data-bs-theme="dark"] .card .card-text,
html[data-bs-theme="dark"] .card a,
html[data-bs-theme="dark"] .card span,
html[data-bs-theme="dark"] .card small,
html[data-bs-theme="dark"] .card .text-muted {
  color: var(--apple-text) !important;
}

html[data-bs-theme="dark"] .card .card-text.small,
html[data-bs-theme="dark"] .card small,
html[data-bs-theme="dark"] .card .text-muted {
  color: var(--apple-muted) !important;
}

/* ============================================================
   10. APPLE NEWS–STYLE ARTICLE DETAIL
   ============================================================ */

/* Article card */
html[data-bs-theme="dark"] body .apple-article {
  background-color: var(--apple-surface) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: 14px !important;
  /* padding: 2.25rem !important; */
  padding: 0 !important;  /* article image spans the full container width */
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  color: var(--apple-text) !important;
}

/* Title */
html[data-bs-theme="dark"] .apple-article .article-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display";
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1.22;
  margin-bottom: 0.75rem;
  color: var(--apple-text);
}

/* Metadata */
html[data-bs-theme="dark"] .apple-article .article-meta {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--apple-muted);
  margin-bottom: 1.5rem;
}

/* Dark text background zone */
html[data-bs-theme="dark"] .apple-article .article-body {
  background-color: var(--apple-surface) !important;
  padding: 1.5rem !important;
  border-radius: 12px;
}

/* Override Summernote inline styles */
html[data-bs-theme="dark"] .apple-article .article-body *,
html[data-bs-theme="dark"] .apple-article .article-body [style] {
  background-color: transparent !important;
  color: var(--apple-text) !important;
}

/* Body text */
html[data-bs-theme="dark"] .apple-article .article-body p {
  margin-bottom: 1.25rem;
  font-size: 1.08rem;
  line-height: 1.65;
}

/* Subheadings */
html[data-bs-theme="dark"] .apple-article h2,
html[data-bs-theme="dark"] .apple-article h3 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display";
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.35;
  color: var(--apple-text);
}

/* Drop cap */
html[data-bs-theme="dark"] .apple-article .article-body p:first-of-type::first-letter {
  font-size: 3.4rem;
  font-weight: 600;
  float: left;
  line-height: 0.9;
  padding-right: 0.25rem;
  padding-top: 0.15rem;
  color: var(--apple-text);
}

/* Figure */
html[data-bs-theme="dark"] .apple-article .article-figure {
  margin-bottom: 1.5rem;
  border-color: var(--apple-border);
}

/* Author card */
html[data-bs-theme="dark"] .apple-article .author-card {
  background-color: var(--apple-surface-2) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: 12px;
  padding: 1rem;
  color: var(--apple-text);
}

html[data-bs-theme="dark"] .apple-article .author-name {
  color: var(--apple-text) !important;
}

html[data-bs-theme="dark"] .apple-article .author-details {
  color: var(--apple-muted);
}

html[data-bs-theme="dark"] .apple-article .author-avatar {
  border: 2px solid var(--apple-border);
}

/* ------------------------------------------------------------
   11. ARTICLE WRAPPER SPACING
   ------------------------------------------------------------ */
html[data-bs-theme="light"] .apple-news-wrapper {
  padding-top: 2rem;
  padding-top: 0rem;
  padding-bottom: 3rem;
}

html[data-bs-theme="dark"] .apple-news-wrapper {
  padding-top: 2rem;
  padding-top: 0rem;
  padding-bottom: 3rem;
}

/* 
=========================================================
fix the book cover image frame background color - Copilot
========================================================= */

html[data-bs-theme="dark"] .book-detail-cover-frame {
    background: var(--apple-surface-2) !important;
}

/* 
=====================================================================================
make the footer blend perfectly with the rest of your Apple‑News dark theme - Copilot
=====================================================================================
 */
html[data-bs-theme="dark"] .book-footer-action-bar {
    background: var(--apple-surface-2) !important;
    border-top: 1px solid var(--apple-border) !important;
}

/* ----------------------------------------------------------
🎯 The correct dark/light mode overrides for .btn-primary
---------------------------------------------------------- */
/* Place these in the last‑loaded CSS file for each theme (your darkmode.css  */
html[data-bs-theme="dark"] .btn-primary {
    /* --bs-btn-bg: #0a3d62 !important; */
    --bs-btn-bg: #4A69BD !important;
    --bs-btn-border-color: #0a3d62 !important;

    --bs-btn-hover-bg: #0c4c7a !important;
    --bs-btn-hover-border-color: #0c4c7a !important;

    --bs-btn-active-bg: #083656 !important;
    --bs-btn-active-border-color: #083656 !important;

    --bs-btn-color: #e8f1ff !important; /* text color */
}

/* -------------------------------------------------------------------
✅ Dark‑mode–compatible "Jump to Author Works" floating button CSS
------------------------------------------------------------------- */
/* Add this to your main stylesheet after your dark‑mode rules:
You add the dark‑mode CSS in the same place as all your other 
dark‑mode overrides — inside your existing file:
catalog/static/catalog/css/components/darkmode-apple-news.css */
/* Floating Jump Button — Dark Mode */
html[data-bs-theme="dark"] .floating-jump-btn {
    background: #1e1e1e;
    background: #0a3d62;

    color: #4da3ff;  /* text color */
    color: #ffffff;  /* text color */

    /* border-color: #333; */
    border-color: #0a3d62;

    /* box-shadow: 0 4px 14px rgba(0,0,0,0.6); */
}

/* html[data-bs-theme="dark"] .floating-jump-btn:hover {
    background: #2a2a2a;
    background: #333;
} */

/* non‑floating version of "Jump to Author Works" — Dark Mode */
html[data-bs-theme="dark"] .jump-btn {
    background: #1e1e1e;      /* dark card background */
    background: #0a3d62;

    color: #4da3ff;           /* sky-blue accent text */
    color: #ffffff;           /* sky-blue accent text */

    /* subtle dark border */
    /* border-color: #333;        */
    border-color: #0a3d62; 

    /* box-shadow: 0 2px 10px rgba(0,0,0,0.55); */
    /* box-shadow: 0 2px 10px #0a3d62; */
}

/* html[data-bs-theme="dark"] .jump-btn:hover {
    background: #2a2a2a;
    background: #333;
} */

/* ---------------------------------------
✅ Dark‑mode CSS for this <h1> element 
--------------------------------------- */
/* <h1 class="h3 mb-2 text-white">A Caribbean Mystery</h1> */
/* Add this to your dark‑mode block: */
/* If dark mode is toggled via a class on body/html */
body.dark-mode .book-header-card {
    background: #0a2f5a !important;
}

body.dark-mode .book-header-card h1,
body.dark-mode .book-header-card p,
body.dark-mode .book-header-card a {
    color: #bbdef5 !important;
}

/* ---------------------------------------------------------------------
DeepSeek - Step 2: Add this code to your darkmode-apple-news.css file
--------------------------------------------------------------------- */
/* Dark mode blue frame for book header card */
html[data-bs-theme="dark"] .book-header-card {
    background: #0d47a1 !important;
    background: #0a3d62 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid #1565c0 !important;
    border: 1px solid #f40606 !important;
    border: 1px solid #0a3d62 !important;
}

html[data-bs-theme="dark"] .book-header-card h1,
html[data-bs-theme="dark"] .book-header-card p,
html[data-bs-theme="dark"] .book-header-card a {
    color: #90caf9 !important;
    color: #ffffff !important;
}

html[data-bs-theme="dark"] .book-header-card a:hover {
    color: #bbdef5 !important;
    text-decoration: underline !important;
}

/* ----------------------------------------------------
✅ Exact CSS to apply the dark‑mode color - Copilot
---------------------------------------------------- */
/* Change the frame (container) color to a dark mode blue color */
/* Add this inside your dark‑mode override block: */
[data-bs-theme="dark"] .book-image-container {
    background-color: #1c1f26 !important;
}

/* -----------------------------------------------------------------------------
✅ What you need to change the chapter title frame (the exact fix) - Copilot
----------------------------------------------------------------------------- */
/* Add this to your dark‑mode CSS: */
/* catalog\static\catalog\css\components\darkmode-apple-news.css */
html[data-bs-theme="dark"] .chapter-title-frame {
    /* background-color: var(--dark-mode-blue) !important; */
    background-color: #0a3d62 !important;
}

/* ---------------------------------------------------------------------
✅ 1. Apply a dark‑mode blue background to the "Back to Book "button
--------------------------------------------------------------------- */
/* Add this to your dark‑mode stylesheet: */
/* catalog\static\catalog\css\components\darkmode-apple-news.css */
html[data-bs-theme="dark"] .btn-back-to-book {
    background-color: var(--dark-mode-blue) !important;
    border-color: var(--dark-mode-blue) !important;
    color: #fff !important;
}

/* Assign a dark mode blue color to the "Back to Book" button */
:root {
    --dark-mode-blue: #0a3d62; /* or your existing dark-mode blue */
}

/* -----------------------------------------------------------
✅ Dark‑mode override for the floating "Back to Book" button
----------------------------------------------------------- */
/* Add this to your dark‑mode stylesheet: */
html[data-bs-theme="dark"] .floating-back-button {
    background: var(--dark-mode-blue) !important;
    border-color: var(--dark-mode-blue) !important;
    color: #fff !important;
}

/* And ensure your dark‑mode blue is defined:
This forces the floating button to switch from the frosted white to your dark‑mode blue. */
:root {
    --dark-mode-blue: #0a3d62;
}

/* ------------------------------------------------------
1. Dark‑mode background + text for the chapter content
------------------------------------------------------ */
/* Add this to your dark‑mode CSS: */
/* catalog\static\catalog\css\components\darkmode-apple-news.css */
html[data-bs-theme="dark"] .apple-reader-content,
html[data-bs-theme="dark"] .chapter-content,
html[data-bs-theme="dark"] .card.chapter-card {
    background-color: var(--chapter-dark-bg) !important;
    color: var(--chapter-dark-text) !important;
}

/* Define your Chapter conternt dark palette: */
:root {
    --chapter-dark-bg: #111827;   /* deep charcoal / dark mode */
    --chapter-dark-text: #e5e7eb; /* soft light gray for reading */
}

/* ---------------------------------------------------------------
🎯 The exact dark‑mode override you need for editorial content
--------------------------------------------------------------- */
/* 1. Override the editorial content container background + text */
html[data-bs-theme="dark"] .hero_excerpt,
html[data-bs-theme="dark"] .editorial-content,
html[data-bs-theme="dark"] .editorial-article {
    background-color: var(--editorial-dark-bg) !important;
    color: var(--editorial-dark-text) !important;
}

/* 2. Override inner paragraphs (because many editorials inject inline styles) */
html[data-bs-theme="dark"] .hero_excerpt p,
html[data-bs-theme="dark"] .editorial-content p,
html[data-bs-theme="dark"] .editorial-article p {
    color: var(--editorial-dark-text) !important;
    background-color: transparent !important;
}

/* 3. Define your dark‑mode palette */
:root {
    --editorial-dark-bg: #111827;   /* deep charcoal, excellent for reading */
    --editorial-dark-text: #e5e7eb; /* soft light gray, avoids harsh pure white */
}

/* ------------------------------------------------------------
✅ Dark‑mode override for the editorial title (.hero__title)
------------------------------------------------------------ */
html[data-bs-theme="dark"] .hero__title {
    color: var(--editorial-dark-text) !important;
    background-color: var(--editorial-dark-bg) !important;
}

/* And ensure your dark palette is defined: */
:root {
    --editorial-dark-bg: #111827;   /* deep charcoal */
    --editorial-dark-text: #e5e7eb; /* soft light gray */
}

/* --------------------------------------------------------------------------------------
✅ Dark‑mode override for the footer action bar containing Read, Edit, Delete buttons
-------------------------------------------------------------------------------------- */
html[data-bs-theme="dark"] .chapter-footer-action-bar {
    background-color: var(--dark-mode-blue) !important;
    border-top-color: var(--dark-mode-blue-border) !important;
}

/* Recommended palette */
:root {
    --dark-mode-blue: #0a3d62;          /* deep, rich dark-mode blue */
    --dark-mode-blue-border: #0f4c81;   /* slightly lighter border tone */
}

/* --------------------------------------------------------
✅ Dark‑mode override for the “EasyWebSight Home” frame
-------------------------------------------------------- */
html[data-bs-theme="dark"] .card-header {
    background-color: #0a3d62 !important;
    color: #ffffff !important;   /* ensures the title stays readable */
}

/* --------------------------------------------------------------
✅ Reduce the Read, Edit, and Delete buttons border thickness
-------------------------------------------------------------- */

/* -------------------------------------------
✅ Reduce the Read button border thickness
------------------------------------------- */
.read-btn {
    border-width: 1px !important;   /* thinner border */
}

/* If you want it even thinner: */
.read-btn {
    border-width: 0.9px !important;
    border-width: 1.0px !important;
}

/* -------------------------------------------
✅ Reduce the Edit button border thickness
------------------------------------------- */
.edit-btn {
    border-width: 1px !important;   /* thinner border */
}

/* If you want it even thinner: */
.edit-btn {
    border-width: 0.9px !important;
    border-width: 1.0px !important;
}

-------------------------------------------
✅ Reduce the Delete button border thickness
-------------------------------------------
.delete-btn {
    border-width: 1px !important;   /* thinner border */
}

/* If you want it even thinner: */
.delete-btn {
    border-width: 0.8px !important;
    border-width: 1.0px !important;
}

/* --------------------------------------------
🔧 Optional: Apply only to article metadata
-------------------------------------------- */
.article-item .card-body {
  background-color: var(--apple-surface-2);
}

.editorial-item .card-body {
  background-color: var(--apple-surface-2);
}

/* --------------------------------------------------------------------------------------------------------
🎯 The fix: override padding on .apple-article - remove or adjust the padding on the parent for light mode:
-------------------------------------------------------------------------------------------------------- */
html[data-bs-theme="light"] .apple-article {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;    
}

/* --------------------------------------------------------------------------------------------------------
🎯 The fix: override padding on .apple-article - remove or adjust the padding on the parent for dark mode:
-------------------------------------------------------------------------------------------------------- */
html[data-bs-theme="dark"] .apple-article {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}

/* ----------------------------------------------------------------------------------------------
🎯 Scoped selector for article_detail header container in order to add top padding for light mode
---------------------------------------------------------------------------------------------- */
html[data-bs-theme="light"] .article-header {
  padding-top: 24px !important;
}

/* ----------------------------------------------------------------------------------------------
🎯 Scoped selector for article_detail header container in order to add top padding for dark mode
---------------------------------------------------------------------------------------------- */
html[data-bs-theme="dark"] .article-header {
  padding-top: 24px !important;
}

/* ------------------------------------------------------------------------------------------------------------
🎯 Scoped selector for editorial_detail header container in order to add left and right padding for light mode
------------------------------------------------------------------------------------------------------------ */
html[data-bs-theme="light"] .article-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ----------------------------------------------------------------------------------------------------------
🎯 Scoped selector for editorial_detail header container in order to add left and right padding for dark mode
---------------------------------------------------------------------------------------------------------- */
html[data-bs-theme="dark"] .article-header {
  padding-left: 24px !important;
  padding-right: 24px !important;
}



/* Article image only */
html[data-bs-theme="light"] .article-detail .article-figure {
  padding-top: 12px !important;
}
html[data-bs-theme="dark"] .article-detail .article-figure {
  padding-top: 24px !important;
}

/* Editorial image only */
html[data-bs-theme="light"] .editorial-detail + .apple-article .article-figure {
    padding-top: 24px !important;
}

html[data-bs-theme="dark"] .editorial-detail + .apple-article .article-figure {
    padding-top: 0px !important;
}