/* ==========================================================================
   bs5.css — Bootstrap 5 migration override layer (Phase 2c)
   Loaded AFTER app.css. Rules here win via cascade.
   Strategy: var-based theme foundation + theme-critical overrides.
   app.css stays in place as safety net until we consolidate & delete it.

   Brand palette (exact current values as defaults):
     --bs-diary-green : accent / link hover  #46fbdf
     --bs-diary-gold  : VIP border           #ceaf53 (via rgba(255,215,0,.9))
     --bs-diary-blue  : (unused accent)      #3EAAEE
     --bs-body-bg     : page background      #0e0e0e
     --bs-body-color  : default text         #ffffff
   --------------------------------------------------------------------------
   NOTE: this is an ACTIVE migration file. Do not delete until Phase 2c/2d
   consolidation is complete (see docs/BOOTSTRAP5-MIGRATION.md).
   ========================================================================== */

:root {
  --diary-green: #46fbdf;
  --diary-green-bright: #46fbdf; /* decorative spark (heading .line); not for text on light */
  /* --diary-gold (#ceaf53) intentionally NOT used: app.css VIP border uses literal
     rgba(255,215,0,0.9) — swapping to the var would CHANGE the rendered color.
     Kept as a documented token for future theme work. */
  --diary-gold:  #ceaf53;
  --diary-blue:  #3EAAEE;
  --diary-body-bg:    #0e0e0e;
  --diary-body-color: #ffffff;
  --diary-border:     rgba(255, 255, 255, 0.55);
  --diary-accent:     rgba(0, 0, 0, 0.55);
  --diary-link:       #46fbdf;
  --diary-bg-image:   url('/images/diary-dark.webp');
  --diary-bg-wash:    55%; /* veil over photo; light uses thinner wash */

  /* Phase 4 — pin the body font so BS5 components (forms/buttons/cards/dropdowns)
     inherit the site's Open Sans instead of the default system-ui stack. Prevents
     the BS4→BS5 native-font swap causing layout/reflow drift on every page. */
  --bs-body-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* BS5 default code pink (#d63384) — darkened for contrast on light surfaces.
     Distinct from teal on purpose (preview decision 2026-08-04). */
  --bs-code-color: #9b1b4a;
}

/* ==========================================================================
   Light theme (2026-08-04) — approved palette from docs/light-mode-preview.html
   One deep teal (#0d6e6a, ~6:1 on white) for links/buttons/nav; bright #46fbdf
   stays decorative-only. Replaces the old app-light purple-ink (#2f283e) fold-in.
   ========================================================================== */
[data-bs-theme="light"] {
  --diary-body-bg:    #eef2f3;
  --diary-body-color: #152028;
  --diary-box-bg:     #faf5ec; /* light panel/card bg — warm cream, distinct from #fff cards */
  --diary-border:     rgba(21, 32, 40, 0.2);
  --diary-accent:     #ffffff;
  --diary-link:       #0d6e6a;
  --diary-green:      #0d6e6a; /* same as link — no competing teals on light */
  --diary-green-bright: #46fbdf;
  --diary-bg-image:   url('/images/diary-light.webp');
  --diary-bg-wash:    28%; /* heavy wash hides the light photo */
  --bs-primary:       #0d6e6a;
  --bs-link-color:    #0d6e6a;
  --bs-border-color:  rgba(21, 32, 40, 0.2);
  --bs-code-color:    #8a1742;
  --bs-body-bg:       #eef2f3;
  --bs-body-color:    #152028;
}
[data-bs-theme="dark"] {
  --diary-bg-image: url('/images/diary-dark.webp');
  --diary-bg-wash: 55%;
  --bs-code-color: #f0a3c0;
}
code {
  color: var(--bs-code-color);
}
/* Light panels: box_in* get a warm beige/cream so they stand apart from the
   #eef2f3 page + #fff cards (not "bland white on white"). Matches the cream
   paper in diary-light.webp. */
[data-bs-theme="light"] .box_in,
[data-bs-theme="light"] .box_in_diary,
[data-bs-theme="light"] .box_in_small {
  background: var(--diary-box-bg);
  border-color: rgba(21, 32, 40, 0.12);
}
/* VIP panel keeps its distinctive gold frame in light mode (don't neutralize it) */
[data-bs-theme="light"] .box_in_diary_vip {
  background: var(--diary-box-bg);
  border: 2px solid rgba(255, 215, 0, 0.9);
}
[data-bs-theme="light"] .tag {
  background: var(--diary-box-bg);
}
[data-bs-theme="light"] .box_in_small h3 {
  color: var(--diary-body-color); /* app.css hardcodes #fff — unreadable on light cards */
}
[data-bs-theme="light"] .line {
  background: var(--diary-link); /* deep teal — bright mint (#46fbdf) too washed on light */
}
[data-bs-theme="light"] .table { color: var(--diary-body-color); }
[data-bs-theme="light"] h1.heading { color: var(--diary-body-color); }
[data-bs-theme="light"] a {
  color: var(--diary-link);
  text-decoration: none;
}
[data-bs-theme="light"] a:hover,
[data-bs-theme="light"] a:focus {
  color: var(--diary-link);
  background: rgba(13, 110, 106, 0.06);
  border-radius: 3px;
}
[data-bs-theme="light"] .navbar-default .navbar-nav > li > a,
[data-bs-theme="light"] .navbar-default .nav-link {
  color: var(--diary-body-color);
}
[data-bs-theme="light"] .navbar-default .navbar-nav > li > a:hover,
[data-bs-theme="light"] .navbar-default .navbar-nav > li > a:focus,
[data-bs-theme="light"] .navbar-default .nav-link:hover,
[data-bs-theme="light"] .navbar-default .nav-link:focus {
  color: var(--diary-link); /* was white — invisible on light */
}
[data-bs-theme="light"] .navbar-default {
  border-bottom-color: var(--diary-border);
}
[data-bs-theme="light"] .btn.btn-diary,
[data-bs-theme="light"] .btn.btn-outline-diary {
  color: var(--diary-link);
  border: 2px solid var(--diary-link);
}
[data-bs-theme="light"] .btn.btn-diary:hover,
[data-bs-theme="light"] .btn.btn-outline-diary:hover {
  color: #fff;
  background: var(--diary-link);
  border-color: var(--diary-link);
}
/* Light theme: text-muted/secondary back to a readable dark gray (not the dark-bg white override). */
[data-bs-theme="light"] .text-muted,
[data-bs-theme="light"] .text-secondary {
  color: #6c757d !important;
}
/* Light theme: forms / navbar-small / misc */
[data-bs-theme="light"] .form_class select {
  border: 2px solid var(--diary-link);
}
[data-bs-theme="light"] .form_class input,
[data-bs-theme="light"] input[type="text"],
[data-bs-theme="light"] input[type="email"],
[data-bs-theme="light"] textarea.form-control,
[data-bs-theme="light"] select.form-control,
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
  border: 2px solid var(--diary-link);
  background: #fff;
  color: var(--diary-body-color) !important;
}
[data-bs-theme="light"] .navbar-small a {
  color: var(--diary-link) !important;
}
[data-bs-theme="light"] .my_diary_options a {
  border: 1px solid var(--diary-border);
  border-radius: 6px;
  font-size: 14px;
  padding: 4px 8px;
}
[data-bs-theme="light"] .diary_title .fa-book {
  border: 2px solid var(--diary-link);
  color: var(--diary-link);
}
[data-bs-theme="light"] .nav-link {
  color: var(--diary-body-color);
}
[data-bs-theme="light"] .nav-tabs .nav-link.active,
[data-bs-theme="light"] .nav-tabs .nav-link:hover,
[data-bs-theme="light"] .btn-link {
  color: var(--diary-link);
}
[data-bs-theme="light"] .share-dropdown .dropdown-item:hover,
[data-bs-theme="light"] .share-dropdown .dropdown-item:focus {
  color: var(--diary-link);
  background: rgba(13, 110, 106, 0.08);
}
[data-bs-theme="light"] .dropdown-menu {
  background: #fff; /* literal — beats app.css div.dropdown-menu{background:#0e0e0e} which overrides BS5's var-based bg */
  --bs-dropdown-link-color: var(--diary-body-color);
  --bs-dropdown-link-hover-color: var(--diary-link);
  --bs-dropdown-link-hover-bg: rgba(13, 110, 106, 0.08);
  --bs-dropdown-bg: #fff;
  --bs-dropdown-color: var(--diary-body-color);
  --bs-dropdown-border-color: var(--diary-border);
}

/* Dropdown + alert dark defaults (ported from app.css so app.css can be retired).
   Dark is the default theme; light overrides above. These live in base rules so
   they don't depend on app.css. */
.dropdown-menu {
  --bs-dropdown-bg: #0e0e0e;
  --bs-dropdown-color: #fff;
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-link-hover-color: var(--diary-green);
  --bs-dropdown-link-hover-bg: rgba(70, 251, 223, 0.1);
  background: #0e0e0e;
}
.alert {
  color: #fff;
  background: transparent;
}
pre {
  color: #fff;
}

/* ---- Surf / loginbox / homepage light fixes (2026-08-04) ---- */

/* hr — make it the darker teal on light (was bright/gray) */
[data-bs-theme="light"] hr {
  border-top-color: var(--diary-link);
}

/* Register/Create CTA link (was inline background-color:darkgreen, now class-based so it's themeable) */
.nav-cta {
  border-radius: 4px;
  margin-left: 6px;
}
.nav-cta > a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  color: #fff !important;
  text-decoration: none;
  /* Default (dark theme): a teal-green CTA — NOT the bright mint #46fbdf (blinding as a fill),
     NOT deep #0d6e6a; bright enough to read as a button but calm. */
  background: #178f7e;
}
.nav-cta > a:hover,
.nav-cta > a:focus {
  background: #46fbdf; /* mint on hover accent in dark */
  color: #14303a !important;
}
[data-bs-theme="light"] .nav-cta > a {
  background: #0d6e6a; /* deep teal on light — reads well against light page */
  color: #fff !important;
}
[data-bs-theme="light"] .nav-cta > a:hover,
[data-bs-theme="light"] .nav-cta > a:focus {
  background: #174a47;
}

/* Google CSE search box: lighten the injected dark background */
[data-bs-theme="light"] #___gcse_0,
[data-bs-theme="light"] .gsc-control-cse,
[data-bs-theme="light"] .gsc-search-box {
  background: var(--diary-box-bg, #faf5ec) !important;
  border-color: var(--diary-border) !important;
}
[data-bs-theme="light"] .gsc-input,
[data-bs-theme="light"] .gsc-input-box {
  background: #fff !important;
}

/* Adult-content toggle: checked state must be visibly different on light */
[data-bs-theme="light"] .form-check-input {
  --bs-form-check-bg: #fff;
  border-color: var(--diary-link);
}
[data-bs-theme="light"] .form-check-input:checked {
  background-color: var(--diary-link);
  border-color: var(--diary-link);
}

/* Loginbox inputs: ensure light bg + dark text (some are .form_class input without .form-control) */
[data-bs-theme="light"] .form_class input,
[data-bs-theme="light"] #loginform input[type="email"],
[data-bs-theme="light"] #loginform input[type="password"],
[data-bs-theme="light"] input[type="password"] {
  background: #fff;
  color: var(--diary-body-color) !important;
  border: 1px solid var(--diary-border);
}
[data-bs-theme="light"] .borderleft,
[data-bs-theme="light"] .loginbox {
  background: var(--diary-box-bg); /* beige — match box_in panels, not stark white */
}

/* Autofilled inputs: app.css forces white-on-black (-webkit-text-fill-color: white +
   1000px black inset shadow). In light mode override to white bg + dark text. */
[data-bs-theme="light"] input:-webkit-autofill,
[data-bs-theme="light"] input:-webkit-autofill:hover,
[data-bs-theme="light"] input:-webkit-autofill:focus,
[data-bs-theme="light"] textarea:-webkit-autofill,
[data-bs-theme="light"] textarea:-webkit-autofill:focus,
[data-bs-theme="light"] select:-webkit-autofill,
[data-bs-theme="light"] select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--diary-body-color);
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  border: 1px solid var(--diary-border);
}
[data-bs-theme="light"] input:-webkit-autofill {
  background-color: #fff;
}

/* Social login buttons: use deep teal link color (not the clashy bright mint) */
[data-bs-theme="light"] .social_buttons a,
[data-bs-theme="light"] #socialdiv a,
[data-bs-theme="light"] .svg-icon-container,
[data-bs-theme="light"] .btn.btn-diary .svg-icon-container {
  color: var(--diary-link);
  border-color: var(--diary-link);
}
[data-bs-theme="light"] .btn.btn-diary.btn-block,
[data-bs-theme="light"] #loginform .btn-diary {
  color: var(--diary-body-color);
  border: 2px solid var(--diary-link);
}
[data-bs-theme="light"] .btn.btn-diary.btn-block:hover,
[data-bs-theme="light"] #loginform .btn-diary:hover {
  background: var(--diary-link);
  color: #fff;
}

/* Surf diary listing (gen_surflisting): beige panels, dark teal links on hover */
[data-bs-theme="light"] .diary-feed li,
[data-bs-theme="light"] .feed-container {
  background: var(--diary-box-bg, #faf5ec);
}
[data-bs-theme="light"] .diary_details a:hover,
[data-bs-theme="light"] .diary_title a:hover {
  color: var(--diary-link);
}

/* Avoid white-on-white hovers (e.g. search submit): dark text on light hover */
[data-bs-theme="light"] .btn.btn-diary:focus,
[data-bs-theme="light"] .btn.btn-diary:active {
  color: #fff;
  background: var(--diary-link);
}

/* ---- do_account() / edit-page surfaces (2026-08-04) — .slab + alerts + white areas ---- */

/* Unstyled .slab blocks: give them the beige panel + subtle border so they don't
   fall through to a white/blank surface on light. */
[data-bs-theme="light"] .slab,
[data-bs-theme="light"] .my_account_details,
[data-bs-theme="light"] #erase,
[data-bs-theme="light"] #backup {
  background: var(--diary-box-bg);
  border: 1px solid rgba(21, 32, 40, 0.12);
  border-radius: 6px;
  padding: 12px;
}

/* Alerts: override Bootstrap's white/pale alert bg + app.css's white-text-for-dark
   so they read correctly on light (subtle teal-tinted surface, dark text). */
[data-bs-theme="light"] .alert,
[data-bs-theme="light"] .alert-warning,
[data-bs-theme="light"] .alert-danger,
[data-bs-theme="light"] .alert-success,
[data-bs-theme="light"] .alert-info {
  color: var(--diary-body-color);
  background: rgba(13, 110, 106, 0.06);
  border-color: rgba(21, 32, 40, 0.15);
}
[data-bs-theme="light"] .alert-warning {
  background: rgba(206, 175, 83, 0.15);
  border-color: rgba(206, 175, 83, 0.4);
}
[data-bs-theme="light"] .alert-danger {
  background: rgba(220, 53, 69, 0.08);
  border-color: rgba(220, 53, 69, 0.3);
}
[data-bs-theme="light"] .alert-success {
  background: rgba(13, 110, 106, 0.12);
  border-color: rgba(13, 110, 106, 0.35);
}

/* do_account(): the delete-password block + related forms are inside .slab; ensure
   their labels/inputs use the light theme (not bs-white-on-dark). */
[data-bs-theme="light"] #erase label,
[data-bs-theme="light"] #erase .form-control,
[data-bs-theme="light"] .my_account_details label {
  color: var(--diary-body-color);
}
[data-bs-theme="light"] #erase .form-control {
  background: #fff;
  border: 1px solid var(--diary-border);
}

/* infobox footer uses inline black bg — harmless (display:none until JS) but if ever
   shown on light, give it theme bg. */
[data-bs-theme="light"] #infobox {
  background: var(--diary-box-bg) !important;
}

/* ---- Theme-critical overrides (mirror app.css values via vars) ---- */

/* Links: restore BS4 no-underline-at-rest (BS5 reboot underlines all links by default).
   Decided 2026-08-02 (Chris) — fix the visual delta. Keep hover underline OFF to match old look. */
a {
  text-decoration: none;
}

/* Page background + default text — theme photo + readable wash (preview 2026-08-04).
   Replaces legacy /images/bg.webp. Light uses diary-light.jpg (thin wash);
   dark uses diary-dark.jpg (stronger wash). */
body.index,
body.page {
  background-color: var(--diary-body-bg);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--diary-body-bg) var(--diary-bg-wash, 40%), transparent),
      color-mix(in srgb, var(--diary-body-bg) calc(var(--diary-bg-wash, 40%) + 15%), transparent)
    ),
    var(--diary-bg-image);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  color: var(--diary-body-color);
}

/* Generic content boxes */
.box_in {
  background: var(--diary-accent);
  padding: 10px;
  border: 1px solid var(--diary-border);
  border-radius: 5px;
  overflow: hidden;
}
.box_in_diary {
  background: var(--diary-accent);
  padding: 12px;
  border: 1px solid var(--diary-border);
  border-radius: 5px;
  margin-bottom: 10px;
}
.box_in_diary_vip {
  background: var(--diary-accent);
  padding: 12px;
  border: 2px solid rgba(255, 215, 0, 0.9);
  border-radius: 5px;
  margin-bottom: 10px;
}
.box_in_small {
  background: rgba(0, 0, 0, 0.55) none repeat scroll 0 0;
  border: 1px solid var(--diary-border);
  border-radius: 5px;
  font-size: 12px;
  margin-top: 20px;
  min-height: 165px;
  padding: 33px 15px;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

/* Tables */
.table { color: var(--diary-body-color); }

/* FAQ accordion (migrated panel->card in Phase 2b, scoped to #accordion) */
#accordion .card-header {
  background: var(--diary-accent);
  color: var(--diary-green);
}
#accordion .card {
  border-radius: 4px;
  border: 1px solid var(--diary-border);
  margin-bottom: 0;
}
#accordion .card-body {
  border: 1px solid var(--diary-border);
}

/* -- .btn-link: BS5 default is blue; the site's links are teal (FAQ accordion etc.). -- */
.btn-link {
  color: var(--diary-green);
  text-decoration: none;
}
.btn-link:hover {
  color: var(--diary-green);
  text-decoration: underline;
}

/* ---- Navbar (navbar-default) overrides — mirror app.css white/teal nav ---- */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li > a {
  color: var(--diary-body-color);
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background: transparent;
}
.navbar-default {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  padding-top: 0px;
  padding-bottom: 0px;
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
  color: var(--diary-green);
}

/* ---- Headings / rules / tags (mirror app.css) ---- */
h1.heading {
  color: var(--diary-body-color);
  font-weight: 300;
  font-size: 40px;
  font-family: 'Open Sans', sans-serif;
}
.line {
  height: 1px;
  width: 260px;
  margin: 20px auto;
  background: var(--diary-green-bright, var(--diary-green));
}
.tag {
  background: #000 none repeat scroll 0 0;
  border: 1px solid var(--diary-border);
  border-radius: 5px;
  font-size: 12px;
  left: 13%;
  margin: 0 auto;
  padding: 2px 10px;
  position: absolute;
  text-align: center;
  top: -8px;
  width: 75%;
}

/* ---- Brand accent (teal) links + primary buttons — mirror app.css ---- */
.text-diary > a {
  color: var(--diary-green);
}
.btn.btn-outline-diary,
.btn.btn-diary {
  color: var(--diary-green);
  border: 2px solid var(--diary-green);
  font-size: 14px;
}
.btn.btn-diary:hover {
  color: var(--diary-body-color);
  border: 2px solid var(--diary-body-color);
}

/* ==========================================================================
   BS5 dark-theme overrides — native BS5 defaults that render wrongly on the
   dark #0e0e0e site. These restore the BS4-era look. (From dam visual test,
   2026-08-02: blue tabs, white table bg, full-width buttons, faint hr,
   unreadable muted text.)
   ========================================================================== */

/* 1. Nav tabs / nav-links: BS5 defaults to blue; our accent is teal. */
.nav-link {
  color: var(--diary-body-color);
}
.nav-tabs .nav-link {
  color: var(--diary-body-color);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
  color: var(--diary-green);
}

/* 2. Tables: BS5 .table sets white bg + dark text — unreadable on dark bg. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--diary-body-color);
  color: var(--diary-body-color);
}

/* 3. Connected-account (Linked/unlink) buttons: inside a flex `.row`, BS5 lets the
     `.btn` anchors stretch full-width. Scope to #socialdiv so other buttons are untouched. */
#socialdiv .row .btn.btn-diary {
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
}

/* 4. Horizontal rules: BS5 hr uses --bs-border-color (light gray), invisible on dark. */
hr {
  border-top: 1px solid var(--diary-border);
  opacity: 1;
}

/* 5. Muted/secondary text: BS5 #6c757d is unreadable on black. */
.text-muted,
.text-secondary {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* ---- Share dropdown: reset the legacy nav .social a circle/float styling ---- */
.share-dropdown .dropdown-toggle,
.share-dropdown .dropdown-item {
  float: none;
  font-size: 14px;
  line-height: 1.5 !important;
  margin: 0;
  padding: 0.375rem 0.75rem;
  width: auto;
  color: inherit;
}
/* Toggle: rely on .btn.btn-diary's own 2px border (teal->white hover, same width) so size is stable. */
.share-dropdown .dropdown-toggle {
  border-radius: 0.375rem;
  transition: none;
}
.share-dropdown .dropdown-item {
  border: none;
  box-shadow: none;
  transition: none;
}
.share-dropdown .dropdown-item:hover,
.share-dropdown .dropdown-item:focus {
  color: var(--diary-green);
  background: rgba(255, 255, 255, 0.08);
  border: none;
  box-shadow: none;
}
.share-dropdown .dropdown-item:active {
  border: none;
  box-shadow: none;
}
/* Stable row: fixed-width, centered icons so hover highlight doesn't shift text */
.share-dropdown .dropdown-item .fa,
.share-dropdown .dropdown-item svg {
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 8px;
  vertical-align: middle;
}