/* Project theme overrides for Clickle */
:root {
  --clickle-bg: #122348;
  --clickle-accent: #64d851;
  /* light shade of primary for navbar/topbar backgrounds */
  --clickle-accent-light: rgba(0, 0, 0, 0.12);
  /* translucent purple-ish requested for topbar-user */
  --clickle-topbar-user-bg: #122348;
}

/* Set overall page background and text defaults */
html,
body,
.twocolumn-panel {
  background-color: var(--clickle-bg) !important;
  color: #e6eef8 !important;
}

/* Cards and panels: slightly lighter to contrast */
.card,
.auth-page-wrapper .card,
.shepherd-element,
.swal2-popup {
  /* cards inside layout keep subtle dark tone; popups will be overridden below */
  background-color: rgba(255, 255, 255, 0.04) !important;
  color: inherit !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Force pop-up / overlay boxes to white for clarity */
.modal-content,
.swal2-popup,
.shepherd-element,
.popover,
.dropdown-menu,
.offcanvas {
  background-color: #ffffff !important;
  color: #2b3137 !important; /* dark text for readability */
  border-color: rgba(16, 24, 32, 0.08) !important;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.32) !important;
}

/* Primary buttons use accent color */
.btn-primary,
.swal2-confirm,
.shepherd-button {
  background-color: var(--clickle-accent) !important;
  border-color: var(--clickle-accent) !important;
  color: #0b2a10 !important; /* dark text on bright green */
}

.btn-primary:hover,
.btn-primary:focus,
.swal2-confirm:hover {
  background-color: #54c646 !important;
  border-color: #54c646 !important;
}

/* Primary text utility */
.text-primary {
  color: var(--clickle-accent) !important;
}

/* Default headings color (can be overridden with .text-primary) */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #e6eef8;
}

/* Topbar / Navbar background to a subtle light accent so icons and text remain readable */
#page-topbar,
.navbar-header,
.navbar-menu {
  background-color: #000534 !important;
  border-bottom: 1px solid rgba(100, 216, 81, 0.18) !important;
}

/* Ensure topbar text/icons remain readable (use the accent for emphasis) */
#page-topbar .btn-topbar,
#page-topbar .header-item,
.navbar-header .user-name-text,
.navbar-header .user-name-sub-text {
  color: #e6eef8 !important;
}

/* topbar user area background (matches requested variable) */
.topbar-user,
.topbar-user .btn,
.topbar-user .dropdown-menu {
  background-color: var(--clickle-topbar-user-bg) !important;
}

/* Input backgrounds */
.form-control,
input,
textarea,
select {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: inherit !important;
  /* border-color: rgba(255, 255, 255, 0.06) !important; */
}

/* Small helper for auth hero overlay */
.auth-one-bg .bg-overlay {
  background: linear-gradient(
    180deg,
    rgba(18, 35, 72, 0.85),
    rgba(18, 35, 72, 0.85)
  ) !important;
}

/* Ensure logo images remain visible on dark bg */
.logo img,
.auth-logo img {
  filter: brightness(1.2) contrast(1.05) !important;
}

/* Utility: keep white icons readable */
.text-white,
.text-white-50 {
  color: #e6eef8 !important;
}
.ql-toolbar.ql-snow {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ql-toolbar.ql-snow .ql-picker,
.ql-toolbar.ql-snow .ql-picker-label,
.ql-toolbar.ql-snow .ql-stroke,
.ql-toolbar.ql-snow .ql-fill,
.ql-toolbar.ql-snow .ql-picker-options,
.ql-toolbar.ql-snow button {
  color: #fff !important;
  stroke: #fff !important;
  fill: #fff !important;
}

/* Dropdown menus (font, size, align, etc.) */
.ql-toolbar.ql-snow .ql-picker-options {
  background-color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Editor background and text color */
.ql-container.ql-snow {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Optional: placeholder color */
.ql-editor.ql-blank::before {
  color: rgba(255, 255, 255, 0.5) !important;
}