/* Layout-only journal CSS. Theme colors should come from .conj-theme.conj-tarot */

.conj-journal .csj-inner{ max-width: 980px; margin: 0 auto; }
.conj-journal .csj-head{ margin-bottom: 16px; }
.conj-journal .csj-title{ margin: 0 0 6px 0; }
.conj-journal .csj-sub{ opacity: .85; }

.conj-journal .csj-flash{
  margin: 12px 0 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(246,217,138,.25);
}

.conj-journal .csj-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 14px 0 10px;
}

.conj-journal .csj-field{ display: flex; flex-direction: column; gap: 6px; }
.conj-journal .csj-field-wide{ grid-column: 1 / -1; }

.conj-journal input[type="text"],
.conj-journal textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
}
.conj-journal textarea{ resize: vertical; min-height: 160px; }

.conj-journal .csj-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.conj-journal .csj-save{
  appearance: none;
  border: 1px solid rgba(246,217,138,.42);
  background: rgba(255,255,255,.12);
  color: var(--conj-gold, #f6d98a);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
}
.conj-journal .csj-save:hover{ background: rgba(246,217,138,.14); box-shadow: 0 0 14px rgba(246,217,138,.35); }
.conj-journal .csj-save[disabled]{ opacity: .55; cursor: not-allowed; }

.conj-journal .csj-clear,
.conj-journal .csj-load,
.conj-journal .csj-delete{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}
.conj-journal .csj-load:hover,
.conj-journal .csj-delete:hover,
.conj-journal .csj-clear:hover{ background: rgba(255,255,255,.10); }

.conj-journal .csj-mode{ opacity: .85; }

.conj-journal .csj-status{
  margin-top: 10px;
  min-height: 20px;
  opacity: .9;
}

.conj-journal .csj-divider{ height: 1px; background: rgba(255,255,255,.12); margin: 18px 0; }

.conj-journal .csj-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.conj-journal .csj-saved-head{
  display:flex;
  flex-wrap:wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.conj-journal .csj-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  justify-content: flex-end;
}

.conj-journal .csj-filter-chip{
  appearance:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 7px 10px;
  cursor:pointer;
  font-size: 12px;
  line-height: 1;
}

.conj-journal .csj-filter-chip:hover{ background: rgba(255,255,255,.10); }
.conj-journal .csj-filter-chip.is-active{
  border-color: rgba(246,217,138,.60);
  background: rgba(246,217,138,.12);
  box-shadow: 0 0 12px rgba(246,217,138,.22);
}
.conj-journal .csj-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  /* Ensure readable text even if the site theme sets dark text colors */
  color: rgba(245,240,255,.98);
}

.conj-journal .csj-item-title{
  font-weight: 600;
  color: var(--conj-gold, #f6d98a);
}

.conj-journal .csj-item-snippet{
  margin-top: 6px;
  font-size: 13px;
  opacity: .92;
  color: rgba(245,240,255,.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.conj-journal .csj-item-meta{ font-size: 12px; opacity: .85; margin-top: 3px; color: rgba(226,217,255,.95); }
.conj-journal .csj-item-actions{ display:flex; gap: 10px; }

.conj-journal .csj-restore,
.conj-journal .csj-purge{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}
.conj-journal .csj-restore:hover,
.conj-journal .csj-purge:hover{ background: rgba(255,255,255,.10); }

.conj-journal .csj-trash{
  margin-top: 18px;
}

.conj-journal .csj-trash-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap:wrap;
}

.conj-journal .csj-trash-note{
  font-size: 12px;
  opacity: .85;
}

.conj-journal .csj-muted{ opacity: .8; }

@media (max-width: 820px){
  .conj-journal .csj-grid{ grid-template-columns: 1fr; }
}

/* Mood icon buttons */
.conj-journal .csj-mood{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 6px;
}

.conj-journal .csj-mood-btn, .csj-ritual-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 14px;
  cursor:pointer;
  line-height: 1;
  user-select:none;
}

.conj-journal .csj-mood-btn:hover{
  background: rgba(255,255,255,.10);
}

.conj-journal .csj-mood-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(246,217,138,.25);
}

.conj-journal .csj-mood-btn.is-active, .csj-ritual-btn.is-active{
  border-color: rgba(246,217,138,.55);
  background: rgba(246,217,138,.12);
  box-shadow: 0 0 16px rgba(246,217,138,.28);
}

/* Saved entry badges */
.conj-journal .csj-item-badges{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.conj-journal .csj-badge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(245,240,255,.98);
}

.conj-journal .csj-badge-mood{
  border-color: rgba(246,217,138,.28);
  cursor: pointer;
}

.conj-journal .csj-badge-mood.is-filtered{
  border-color: rgba(246,217,138,.62);
  box-shadow: 0 0 14px rgba(246,217,138,.28);
  background: rgba(246,217,138,.12);
}

.conj-journal .csj-badge-mood.is-dim{
  opacity: .45;
}

.conj-journal .csj-item--hidden{
  display: none !important;
}

/* Filter indicator */
.conj-journal .csj-filter{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 8px 0 14px;
  min-height: 24px;
}

.conj-journal .csj-filter-label{
  font-size: 13px;
  opacity: .9;
}

.conj-journal .csj-filter-clear{
  appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.10);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 7px 10px;
  cursor: pointer;
  display: none;
}

.conj-journal .csj-filter-clear:hover{
  background: rgba(255,255,255,.10);
}

.conj-journal .csj-badge-tags{
  opacity: .95;
}

/* Analytics */
.csj-analytics{ margin: 18px 0 10px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.18); border-radius: 16px; background: rgba(255,255,255,0.06); }
.csj-analytics-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.csj-analytics-row .csj-stat{ font-size: 14px; opacity: .92; }
.csj-analytics-breakdown{ margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }
.csj-stat-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.16); background: rgba(0,0,0,0.10); font-size: 12px; }

.csj-rituals{ display:flex; flex-wrap:wrap; gap:10px; }
.csj-ritual-btn.is-active{ box-shadow: 0 0 0 2px rgba(255, 215, 160, 0.35) inset; transform: translateY(-1px); }
.csj-badge-ritual{ opacity: .95; }


/* Tag quick-add chips */
.csj-tag-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.csj-tag-chip{
  appearance:none;
  border:1px solid rgba(215, 182, 107, 0.65);
  background: rgba(0,0,0,0.12);
  color: inherit;
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  font: inherit;
}
.csj-tag-chip:hover{
  background: rgba(0,0,0,0.18);
}


/* --- Tag chips + mood chips alignment improvements --- */
.csj-moods{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.csj-tag-chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 8px 0;}
.csj-field-wide input#csj_tags{margin-top:0;}


/* ===== v0.3.2 polish: stronger labels + aligned mood chips ===== */
.conj-journal .csj-label{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1 !important;
  color: var(--csj-label-color, rgba(0,0,0,.65));
  margin-bottom: 2px;
}

/* If the theme uses a dark surface, prefer light labels */
.conj-theme .conj-journal{ --csj-label-color: rgba(255,255,255,.80); }

.conj-journal .csj-mood{
  align-items: center;
}

.conj-journal .csj-mood-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  white-space: nowrap;
}


/* ===== v0.3.3 UI polish: mood + tag chips ===== */
.conj-journal .csj-mood-block{margin-top:14px;}
.conj-journal .csj-mood-label{font-family:inherit;font-weight:600;letter-spacing:0;text-transform:none;font-size:14px;opacity:.85;margin:10px 0 10px;}
.conj-journal .csj-mood-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}

.conj-journal .csj-mood-btn,
.conj-journal .csj-filter-chip,
.conj-journal .csj-tag-chip{
  font-family:inherit;
  font-weight:600;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.55);
  background:rgba(255,255,255,.08);
  color:inherit;
  padding:10px 14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.conj-journal .csj-mood-btn:hover,
.conj-journal .csj-filter-chip:hover,
.conj-journal .csj-tag-chip:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  box-shadow:0 10px 22px rgba(0,0,0,.14);
}

.conj-journal .csj-mood-btn:active,
.conj-journal .csj-filter-chip:active,
.conj-journal .csj-tag-chip:active{
  transform:translateY(0);
}

.conj-journal .csj-mood-btn.is-active,
.conj-journal .csj-filter-chip.is-active,
.conj-journal .csj-tag-chip.is-active{
  background:rgba(212,175,55,.16);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

.conj-journal .csj-chip-ico{display:inline-flex;align-items:center;justify-content:center;min-width:16px;opacity:.95;}
.conj-journal .csj-chip-txt{font-size:14px;}

/* Keep the Mood block aligned under the Title on desktop */
@media (min-width: 980px){
  .conj-journal .csj-left{display:flex;flex-direction:column;}
}

/* Edit modal (Load -> edit existing entry) */
.conj-journal .csj-modal-backdrop{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:24px;}
.conj-journal .csj-modal-backdrop.is-open{display:flex;}
.conj-journal .csj-modal{width:min(840px,100%);max-height:calc(100vh - 48px);overflow:auto;background:rgba(28,22,50,.92);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.25);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);color:rgba(255,255,255,.92);}
.conj-journal .csj-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 10px;}
.conj-journal .csj-modal-head h3{margin:0;font-family:inherit;letter-spacing:.08em;}
.conj-journal .csj-modal-close{border:1px solid rgba(212,175,55,.25);background:rgba(255,255,255,.08);color:inherit;border-radius:12px;padding:10px 12px;cursor:pointer;}
.conj-journal .csj-modal-body{padding:12px 18px 18px;}
.conj-journal .csj-modal-grid{display:grid;grid-template-columns:1fr 220px;gap:14px;}
.conj-journal .csj-modal-body label{display:block;font-size:13px;opacity:.85;margin:10px 0 6px;}
.conj-journal .csj-modal-body input,
.conj-journal .csj-modal-body select,
.conj-journal .csj-modal-body textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:inherit;border-radius:14px;padding:12px 12px;}
.conj-journal .csj-modal-body textarea{min-height:220px;resize:vertical;}
.conj-journal .csj-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.conj-journal .csj-modal-save{border:1px solid rgba(212,175,55,.28);background:rgba(212,175,55,.14);color:rgba(255,255,255,.95);border-radius:14px;padding:12px 14px;cursor:pointer;}
.conj-journal .csj-modal-status{margin-top:10px;font-size:13px;opacity:.9;}

/*
  HARDEN: the modal element is appended dynamically. If a builder/theme
  moves the root wrapper or strips scoping classes, the modal can render
  unstyled or behind other layers. Provide unscoped fallbacks and a
  deterministic open/close toggle.
*/
#csj-edit-modal.csj-modal-backdrop{display:none;}
#csj-edit-modal.csj-modal-backdrop.is-open{display:flex;}
.csj-modal-backdrop{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:24px;}
.csj-modal-backdrop.is-open{display:flex;}
.csj-modal{width:min(840px,100%);max-height:calc(100vh - 48px);overflow:auto;background:rgba(28,22,50,.92);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.25);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);color:rgba(255,255,255,.92);} 
.csj-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 10px;}
.csj-modal-head h3{margin:0;font-family:inherit;letter-spacing:.08em;}
.csj-modal-close{border:1px solid rgba(212,175,55,.25);background:rgba(255,255,255,.08);color:inherit;border-radius:12px;padding:10px 12px;cursor:pointer;}
.csj-modal-body{padding:12px 18px 18px;}
.csj-modal-grid{display:grid;grid-template-columns:1fr 220px;gap:14px;}
.csj-modal-body label{display:block;font-size:13px;opacity:.85;margin:10px 0 6px;}
.csj-modal-body input,.csj-modal-body select,.csj-modal-body textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:inherit;border-radius:14px;padding:12px 12px;}
.csj-modal-body textarea{min-height:220px;resize:vertical;}
.csj-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
.csj-modal-save{border:1px solid rgba(212,175,55,.28);background:rgba(212,175,55,.14);color:rgba(255,255,255,.95);border-radius:14px;padding:12px 14px;cursor:pointer;}
.csj-modal-status{margin-top:10px;font-size:13px;opacity:.9;}

/*
  HARDEN: if the modal wrapper gets appended outside the `.conj-journal` root
  (some builders re-parent nodes), we still want it to render correctly.
*/
#csj-edit-modal.csj-modal-backdrop{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:24px;}
#csj-edit-modal.csj-modal-backdrop.is-open{display:flex;}
#csj-edit-modal .csj-modal{width:min(840px,100%);max-height:calc(100vh - 48px);overflow:auto;background:rgba(28,22,50,.92);backdrop-filter:blur(10px);border:1px solid rgba(212,175,55,.25);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);color:rgba(255,255,255,.92);}
#csj-edit-modal .csj-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 10px;}
#csj-edit-modal .csj-modal-head h3{margin:0;font-family:inherit;letter-spacing:.08em;}
#csj-edit-modal .csj-modal-close{border:1px solid rgba(212,175,55,.25);background:rgba(255,255,255,.08);color:inherit;border-radius:12px;padding:10px 12px;cursor:pointer;}
#csj-edit-modal .csj-modal-body{padding:12px 18px 18px;}
#csj-edit-modal .csj-modal-grid{display:grid;grid-template-columns:1fr 220px;gap:14px;}
#csj-edit-modal .csj-modal-body label{display:block;font-size:13px;opacity:.85;margin:10px 0 6px;}
#csj-edit-modal .csj-modal-body input,
#csj-edit-modal .csj-modal-body select,
#csj-edit-modal .csj-modal-body textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:inherit;border-radius:14px;padding:12px 12px;}
#csj-edit-modal .csj-modal-body textarea{min-height:220px;resize:vertical;}
#csj-edit-modal .csj-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
#csj-edit-modal .csj-modal-save{border:1px solid rgba(212,175,55,.28);background:rgba(212,175,55,.14);color:rgba(255,255,255,.95);border-radius:14px;padding:12px 14px;cursor:pointer;}
#csj-edit-modal .csj-modal-status{margin-top:10px;font-size:13px;opacity:.9;}
@media (max-width: 760px){
  .conj-journal .csj-modal-grid{grid-template-columns:1fr;}
}


/* ===== PATCH v3: modal layering + prevent background controls overlapping ===== */
.csj-modal,
.csj-modal-backdrop,
.csj-modal-overlay{
  z-index: 99999 !important;
}
.csj-modal{
  position: fixed !important;
}
body.csj-modal-open .csj-actions,
body.csj-modal-open #csj-save,
body.csj-modal-open #csj-clear,
body.csj-modal-open #csj-mode{
  pointer-events: none !important;
}
body.csj-modal-open #csj-save,
body.csj-modal-open #csj-clear{
  opacity: 0.25 !important;
}
/* Keep the inline "Editing #X" from visually duplicating under the modal */
body.csj-modal-open #csj-mode{
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}


/* === PATCH: Journal modal select/option contrast (fix white-on-white dropdown) === */
.conj-journal-modal select,
#csjEditModal select{
  color: #f5f0ff !important;
  background-color: rgba(255,255,255,0.06) !important;
}
.conj-journal-modal select option,
#csjEditModal select option{
  color: #111 !important;
  background: #fff !important;
}


/* === Modal button theme + readable select options (Journal Edit Modal) === */
#csj-edit-modal .csj-btn,
.csj-modal-actions .csj-btn{
  appearance: none;
  border: 1px solid rgba(246,217,138,.42);
  background: rgba(0,0,0,.12);
  color: var(--conj-gold, #f6d98a);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .02em;
}
#csj-edit-modal .csj-btn:hover,
.csj-modal-actions .csj-btn:hover{
  background: rgba(246,217,138,.14);
  box-shadow: 0 0 14px rgba(246,217,138,.25);
}
#csj-edit-modal .csj-btn-primary,
.csj-modal-actions .csj-btn-primary{
  background: rgba(246,217,138,.12);
}

/* Make dropdown option text readable when the select is opened */
#csj-edit-modal select option,
.csj-modal select option{
  color: #111 !important;
  background: #fff !important;
}

/* ===== Modal UI fixes (theme-aligned) ===== */
/* Make modal footer buttons match the ConjuresUp gold/purple theme */
#csj-edit-modal .csj-btn,
.csj-modal .csj-btn{
  appearance:none;
  border:1px solid rgba(246,217,138,.42);
  background: rgba(255,255,255,.10);
  color: var(--conj-gold, #f6d98a);
  border-radius: 999px;
  padding: 10px 16px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.02em;
}
#csj-edit-modal .csj-btn:hover,
.csj-modal .csj-btn:hover{
  background: rgba(246,217,138,.14);
  box-shadow: 0 0 14px rgba(246,217,138,.25);
}

/* Ensure dropdown options are readable when the native select list opens */
#csj-edit-modal select option,
.csj-modal select option{
  color: #111;
  background: #fff;
}

/* Keep the selected value readable on the dark modal control */
#csj-edit-modal select,
.csj-modal select{
  color: rgba(255,255,255,.92);
}


/* Mobile saved-entry layout fixes */
@media (max-width: 768px){
  .conj-journal .csj-item{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap: 14px;
  }

  .conj-journal .csj-item-main{
    width: 100%;
    min-width: 0;
  }

  .conj-journal .csj-item-actions{
    display:flex;
    width:100%;
    min-width:0;
    gap:12px;
    align-items:stretch;
    justify-content:stretch;
  }

  .conj-journal .csj-item-actions .csj-load,
  .conj-journal .csj-item-actions .csj-delete{
    flex: 1 1 0;
    min-width: 0;
    width: calc(50% - 6px);
    max-width: none;
    min-height: 52px;
    padding: 12px 14px;
    white-space: nowrap;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.2;
  }

  .conj-journal .csj-item-badges .csj-badge{
    max-width: 100%;
    white-space: normal;
    overflow-wrap:anywhere;
  }
}