/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
div#main {
  flex: 1;
}

[data-bs-theme="dark"] .navbar {
  background-color: #004b80 !important;
}

[data-bs-theme="dark"] .navbar .nav-link:hover {
  color: black !important;
}

[data-bs-theme="dark"] .navbar .dropdown-item:hover {
  color: black !important;
}

.page-header {
  background: linear-gradient(0deg, #004b80 38%, #7eb6e3 100%);
  padding: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  #search > form {
    margin: 1em;
  }
}

.logo-header {
  position: absolute;
}

.page-header > .header-name {
  margin-left: 40px;
  font-size: 1.5em;
  margin-top: 40px;
  height: 30px;
  display: inline-block;
  color: white;
}

/* Custom styles for Bootstrap navbar */
.navbar-brand img {
  margin-right: 10px;
}

.navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  min-height: auto;
  height: 2em;
}

/* Mobile adjustments */
@media (max-width: 991.98px) {
  .navbar {
    height: auto;
  }
}

@media (max-width: 767px) {
  .page-header {
    flex-direction: column;
    align-items: center;
  }
  .logo-header {
    position: static;
  }
  .header-name {
    margin: 0px !important;
    font-size: 1.2em;
    text-align: center;
  }
}

/* Make dropdowns show on hover for devices that support it.
   Direct-child selector (> .dropdown-menu) so hovering a top-level menu does
   NOT also open every nested submenu inside it — those are handled below. */
@media (hover: hover) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

.navbar .dropdown-menu.show,
.navbar [role="menu"].show {
  display: block;
}

/* Highlight hovered nav items */
.navbar .dropdown-item:hover {
  background-color: rgba(255, 193, 7, 0.768); /* Light yellow tint */
  border-radius: 0.25rem;
}

.navbar .dropdown-item.new {
  padding-left: 2em;
}

footer {
  margin-top: auto;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #ccc;
}

.table thead th {
  position: sticky;
  top: 0;
  background-color: var(--bs-body-bg);
  z-index: 10;
}

.modal-footer {
  margin-top: 2em;
}

.nav-item > .dropdown-menu {
  margin-top: -5px !important;
}

nav.pagy-bootstrap {
  margin-right: 1em;

  ul {
    justify-content: flex-end;
  }
}

label.required:after {
  content: " *";
  color: red;
}

/* Right-click actions menu for compact table rows */
/* position uses !important to beat Bootstrap's .dropdown-menu (same specificity)
   — clientX/Y are viewport coords, so it must be position: fixed. */
.row-context-menu {
  position: fixed !important;
  z-index: 1080;
  min-width: 11rem;
  display: none;
}

.row-context-menu.show {
  display: block;
}

.row-context-menu form {
  margin: 0;
}

.row-context-menu form button.dropdown-item {
  border: 0;
  background: none;
  text-align: inherit;
}

/* Two-level submenus (Resources dropdown: department + calendar submenus).
   Bootstrap 5 has no native submenu, so we roll our own. */
.navbar .dropdown-submenu {
  position: relative;
}

.navbar .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -0.35rem;
  margin-left: 0.1rem;
  display: none;
}

/* Lay the submenu toggle out as [ name ..... caret ] so the menu grows to fit
   the widest item (like the Requests menu) instead of a fixed width. Using a
   float here would stop the menu from sizing to its content and drop the caret
   onto its own line for long names. */
.navbar .dropdown-submenu > a.dropdown-toggle {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 1.5rem;
}

/* A right-pointing triangle caret, pinned to the end of the row and never
   allowed to shrink or wrap onto a new line. */
.navbar .dropdown-submenu > a.dropdown-toggle::after {
  margin-left: auto;
  flex: 0 0 auto;
  border: 0.3em solid transparent;
  border-left-color: currentColor;
  border-right: 0;
}

/* desktop: open a nested submenu only when its own <li> is hovered */
@media (hover: hover) {
  .navbar .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
}

/* touch / click: the submenu Stimulus controller toggles .show */
.navbar .dropdown-submenu > .dropdown-menu.show {
  display: block;
}

/* mobile: stack submenus inline instead of flying off-screen */
@media (max-width: 991.98px) {
  .navbar .dropdown-submenu > .dropdown-menu {
    position: static;
    left: 0;
    margin-left: 1rem;
  }
}

/* ==========================================================================
   Bible browser (layouts/_bible_browser)

   Structure only: every theme shares this markup, so the geometry lives here
   and each theme's CSS (themes/*-layout.css) supplies the chrome. The default
   theme's own skin is at the bottom of this block, scoped to [data-theme].
   ========================================================================== */

/* The taskbar / footer verse opens the browser. It is not a link and shouldn't
   read as one — the pointer is the only affordance. */
.verse-opens-bible {
  cursor: pointer;
}

.bible-browser {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  gap: 6px;
}

.bible-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bible-version {
  display: flex;
  align-items: center;
  gap: 5px;
}
.bible-version select {
  width: auto;
}
.bible-find {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bible-query {
  flex: 1 1 auto;
  min-width: 90px;
  width: auto;
}
.bible-check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}
.bible-check input {
  margin: 0;
}
.bible-btn {
  flex: 0 0 auto;
}

/* Books | chapters | verses | text — the four panes of a classic Bible reader. */
.bible-panes {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  gap: 6px;
}
.bible-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.bible-books { flex: 0 0 140px; }
/* Wide enough for three digits (Psalm 119:176) and a scrollbar. */
.bible-chapters,
.bible-verse-nums { flex: 0 0 66px; }
.bible-reading { flex: 1 1 auto; }

.bible-pane-head {
  flex: 0 0 auto;
  padding: 2px 6px;
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bible-reading-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9em;
}
/* The reference gives way first; the way back to the results never truncates. */
.bible-heading {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bible-back {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0 4px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.bible-back[hidden] { display: none; }

/* position: relative so a child's offsetTop is measured from the pane it
   scrolls inside (bible_controller scrolls the selection into view). */
.bible-list,
.bible-text {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.bible-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bible-item {
  padding: 1px 7px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bible-nums .bible-item {
  text-align: right;
  padding-right: 12px;
}

.bible-text {
  padding: 6px 10px;
  line-height: 1.45;
}
.bible-verse,
.bible-result {
  margin: 0 0 7px;
  cursor: pointer;
}
.bible-verse-num,
.bible-result-ref {
  font-weight: 700;
  margin-right: 5px;
}
.bible-verse-num {
  font-size: 0.78em;
  vertical-align: top;
  line-height: 1.9;
}
.bible-result-ref {
  display: block;
  font-size: 0.85em;
}
.bible-loading {
  padding: 18px;
  text-align: center;
  opacity: 0.75;
}

.bible-status {
  flex: 0 0 auto;
  font-size: 0.85em;
  padding: 1px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Default theme skin (Bootstrap-flavoured, light + dark) -------------- */
[data-theme="default"] .bible-modal .bible-browser {
  height: min(68vh, 620px);
}
[data-theme="default"] .bible-pane-head {
  border-bottom: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
}
[data-theme="default"] .bible-list,
[data-theme="default"] .bible-text {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  background: var(--bs-body-bg);
}
[data-theme="default"] .bible-item:hover,
[data-theme="default"] .bible-result:hover,
[data-theme="default"] .bible-verse:hover {
  background: var(--bs-tertiary-bg);
}
[data-theme="default"] .bible-item.is-selected {
  background: var(--bs-primary);
  color: #fff;
}
[data-theme="default"] .bible-verse.is-current {
  background: var(--bs-warning-bg-subtle);
  outline: 1px solid var(--bs-warning-border-subtle);
}
[data-theme="default"] .bible-result-ref {
  color: var(--bs-primary);
}
[data-theme="default"] .bible-status {
  color: var(--bs-secondary-color);
}
[data-theme="default"] .bible-hit {
  padding: 0;
  background: var(--bs-warning-bg-subtle);
  color: inherit;
}