/* Tide template custom CSS style v1.0 */
/* Using the examples, provide your own styling */

/* Order-form / lookup hero backgrounds — switch instantly with theme toggle */
:root,
body:not([data-bs-theme="dark"]) {
  --of-bg-image: url(/static/of_bg_light.jpg);
  --tools-bg-image: url(/static/tools_bg_light.png);
}
body[data-bs-theme="dark"] {
  --of-bg-image: url(/static/of_bg_dark.png);
  --tools-bg-image: url(/static/tools_bg_dark.png);
}

/* Warm both theme backgrounds in cache before the first toggle */
.of-theme-bg {
  position: relative;
}
.of-theme-bg::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  z-index: -1;
  background-image: url(/static/of_bg_light.jpg), url(/static/of_bg_dark.png);
}

.tools-theme-bg {
  position: relative;
}
.tools-theme-bg::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  z-index: -1;
  background-image: url(/static/tools_bg_light.png), url(/static/tools_bg_dark.png);
}

/*
.bg-primary {
     background-color: #your-color !important;
}
.text-primary {
     color: #your-color !important;
}
.btn-primary {
     background-color: #your-color !important;
     border-color: #your-color !important;
}
.btn-primary:hover {
     background-color: #your-hover-color !important;
     border-color: #your-hover-color !important;
}
.btn-primary:focus {
     background-color: #your-focus-color !important;
     border-color: #your-focus-color !important;
     box-shadow: 0 0 0 0.2rem rgba(#your-color, 0.5) !important;
}
.btn-primary:active {
     background-color: #your-active-color !important;
     border-color: #your-active-color !important;
}
.btn-primary:disabled {
     background-color: #your-disabled-color !important;
     border-color: #your-disabled-color !important;
}
*/

/* Emphasis modal (Modals.create success/danger): readable title on narrow screens */
.modal-emphasis-title {
  font-size: 3rem;
  line-height: 3rem !important;
}
@media (max-width: 767.98px) {
  .modal-emphasis-title {
    font-size: 2rem !important;
    line-height: 1.25 !important;
  }
  .card-actions {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Client area navbar dropdown panel (matches admin) */
:root {
  --admin-nav-dropdown-panel-bg: rgba(242, 242, 242, 0.65);
  --admin-nav-dropdown-item-border: hsla(0, 0%, 100%, 0.45);
  --admin-nav-dropdown-item-hover: hsla(0, 0%, 100%, 0.45);
  --admin-nav-dropdown-item-color: rgb(67, 67, 67);
  --admin-nav-dropdown-item-hover-color: #111111;
  --admin-nav-dropdown-item-hover-bg: rgba(255, 255, 255, 0.4);
  --admin-nav-dropdown-column-shadow: rgb(205 205 205 / 10%) 0px 13px 16px 4px;
}

[data-bs-theme="dark"] {
  --admin-nav-dropdown-panel-bg: rgba(28, 28, 28, 0.65);
  --admin-nav-dropdown-item-border: hsla(0, 0%, 100%, 0.12);
  --admin-nav-dropdown-item-hover: hsla(0, 0%, 100%, 0.1);
  --admin-nav-dropdown-item-color: #f5f5f5;
  --admin-nav-dropdown-item-hover-color: #ffffff;
  --admin-nav-dropdown-item-hover-bg: rgba(255, 255, 255, 0.14);
  --admin-nav-dropdown-column-shadow: rgb(24 24 24 / 10%) 0px 13px 16px 4px;
}

/* Sub-navbar backdrop (blur on ::before so dropdown panels can blur too) */
#navbar-menu > .navbar {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  overflow: visible;
  --tblr-navbar-border-width: 0;
}

#navbar-menu > .navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--navbar-bg-color-blur);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transform: translateZ(0);
  pointer-events: none;
}

/* Phone: one frost layer over logo bar + collapsed menu (matches desktop sub-navbar) */
@media (max-width: 767.98px) {
  .page > .sticky-top {
    isolation: isolate;
  }

  .page > .sticky-top::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--navbar-bg-color-blur);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transform: translateZ(0);
    pointer-events: none;
  }

  .page > .sticky-top > header {
    position: relative;
    z-index: 1;
    background: transparent !important;
  }

  .page > .sticky-top > header.navbar.navbar-expand-md {
    --tblr-navbar-bg: transparent;
  }

  .page > .sticky-top #navbar-menu > .navbar {
    background: transparent !important;
  }

  .page > .sticky-top #navbar-menu > .navbar::before {
    display: none;
  }

  .page > .sticky-top #navbar-menu.navbar-collapse.show,
  .page > .sticky-top #navbar-menu.navbar-collapse.collapsing {
    overflow: visible;
    background: transparent !important;
  }

  .page > .sticky-top > header.navbar .container-xl,
  .page > .sticky-top #navbar-menu > .navbar > .container-xl {
    position: relative;
    z-index: 1;
  }
}

#navbar-menu > .navbar > .container-xl {
  position: relative;
  z-index: 1;
}

#navbar-menu .navbar-nav {
  position: relative;
  z-index: 2;
}

.admin-nav-dropdown-menu {
  padding: 3px 0 0;
  margin-top: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  min-width: 12rem;
}

.admin-nav-dropdown-menu.dropdown-menu-arrow::before,
.admin-nav-dropdown-menu.dropdown-menu-arrow::after {
  display: none;
}

.admin-nav-dropdown-menu .dropdown-menu-columns {
  background: transparent !important;
  padding: 0;
  margin: 0;
}

.admin-nav-dropdown-menu .dropdown-menu-column {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background: transparent !important;
  padding: 0;
  margin: 0;
}

.admin-nav-dropdown-menu .dropdown-menu-column::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: var(--admin-nav-dropdown-panel-bg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  transform: translateZ(0);
  pointer-events: none;
}

.admin-nav-dropdown-menu .dropdown-item,
.admin-nav-dropdown-menu .admin-nav-dropdown-item {
  position: relative;
  z-index: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px !important;
  font-family: sans-serif;
  border-radius: 0 !important;
  border-top: 1px solid var(--admin-nav-dropdown-item-border);
  color: var(--admin-nav-dropdown-item-color) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background-color: transparent !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.admin-nav-dropdown-menu .dropdown-item:first-child,
.admin-nav-dropdown-menu .admin-nav-dropdown-item:first-child {
  border-top: none;
}

.admin-nav-dropdown-menu .dropdown-item:hover,
.admin-nav-dropdown-menu .dropdown-item:focus,
.admin-nav-dropdown-menu .admin-nav-dropdown-item:hover,
.admin-nav-dropdown-menu .admin-nav-dropdown-item:focus,
.admin-nav-dropdown-menu .dropdown-item.active,
.admin-nav-dropdown-menu .dropdown-item:active,
.admin-nav-dropdown-menu .admin-nav-dropdown-item.active,
.admin-nav-dropdown-menu .admin-nav-dropdown-item:active {
  background-color: var(--admin-nav-dropdown-item-hover-bg) !important;
  color: var(--admin-nav-dropdown-item-hover-color) !important;
}

@media (min-width: 768px) {
  .admin-nav-dropdown-menu .dropdown-menu-column {
    box-shadow: var(--admin-nav-dropdown-column-shadow);
  }
}

@media (max-width: 767.98px) {
  #navbar-menu .admin-nav-dropdown-menu {
    padding-top: 0;
  }

  #navbar-menu .admin-nav-dropdown-menu .dropdown-menu-column {
    margin-bottom: 4px;
  }

  .admin-nav-dropdown-menu .dropdown-menu-column {
    box-shadow: none !important;
  }
}

@media (max-width: 767.98px) {
  .page > .sticky-top > header.navbar > .container-xl > .navbar-nav > .nav-item.dropdown {
    position: static;
  }

  .page > .sticky-top > header.navbar .nav-item.dropdown .dropdown-menu-end.admin-nav-dropdown-menu[data-bs-popper] {
    right: calc(var(--tblr-gutter-x, 1.5rem) * 0.5);
    left: auto;
  }
}