/* 
 * =================================================================
 * Botpress Admin Dashboard Custom Branding
 * Matches the Teal/Green (#006c32) and Gray color palette 
 * =================================================================
 */

:root {
  --primary: #006c32;
  --primary-hover: #005427;
  --secondary: #006c32;
}

/* ESL Branding and Fonts */
@font-face {
  font-family: "Addington CF";
  src: url("/assets/custom-branding/fonts/AddingtonCF-Bold.woff2")
    format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Addington CF";
  src: url("/assets/custom-branding/fonts/AddingtonCF-Regular.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p,
button,
input,
textarea,
label,
.bp3-ui-text {
  font-family: "Addington CF", sans-serif !important;
}

/* Specifically target divs and spans, but NOT if they are icons */
div:not(.material-icons):not([class*="bp3-icon"]),
span:not(.material-icons):not([class*="bp3-icon"]),
a:not(.material-icons):not([class*="bp3-icon"]) {
  font-family: "Addington CF", sans-serif !important;
}

/* BlueprintJS Primary Buttons */
.bp3-button.bp3-intent-primary {
  background-color: #006c32 !important;
  background-image: none !important;
  border-color: #005427 !important;
  box-shadow: none !important;
  color: white !important;
}

.bp3-button.bp3-intent-primary:hover,
.bp3-button.bp3-intent-primary:active {
  background-color: #005427 !important;
  border-color: #00401d !important;
}

/* Typography and Links */
.bp3-intent-primary {
  color: #006c32 !important;
}

a {
  color: #006c32;
}

a:hover {
  color: #005427;
}

/* Menus and Sidebars */
.bp3-active.bp3-menu-item {
  background-color: #006c32 !important;
  color: white !important;
}

.bp3-tree-node-content-active {
  background-color: rgba(0, 108, 50, 0.1) !important;
  color: #006c32 !important;
}

.bp3-tree-node-content-active .bp3-tree-node-label,
.bp3-tree-node-content-active .bp3-icon {
  color: #006c32 !important;
  font-weight: 600;
}

.bp3-tree-node-content:hover {
  background-color: rgba(0, 108, 50, 0.05) !important;
}

/* Tabs */
.bp3-tabs .bp3-tab[aria-selected="true"] {
  color: #006c32 !important;
  box-shadow: inset 0 -3px 0 #006c32 !important;
}

/* Forms */
.bp3-control.bp3-switch input:checked ~ .bp3-control-indicator,
.bp3-control.bp3-checkbox input:checked ~ .bp3-control-indicator,
.bp3-control.bp3-radio input:checked ~ .bp3-control-indicator {
  background-color: #006c32 !important;
}

.bp3-input:focus,
.bp3-input.bp3-active {
  box-shadow:
    0 0 0 1px #006c32,
    0 0 0 3px rgba(0, 108, 50, 0.3) !important;
}

/* General Layout Highlights */
.botpress-header,
.Header,
.Sidebar {
  border-top-color: #006c32 !important;
}

.active-nav-item,
.active-link {
  color: #006c32 !important;
  border-color: #006c32 !important;
}

/* -------------------------------------------------------------
   LOGIN SCREEN OVERRIDES (Match ESL Branding)
   ------------------------------------------------------------- */

/* Override the Botpress black login screen and remove overlay */
#root div[class*="centered_container"] {
  background-color: transparent !important;
  background-image: url("/assets/custom-branding/hero.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Hide Botpress city skyline if it uses SVG or IMG directly in container */
#root div[class*="centered_container"] > svg:not(.esl-logo),
#root div[class*="centered_container"] > img:not(.esl-logo) {
  display: none !important;
}

/* Hide Botpress top logo completely (the black hexagons) - Left in case older versions use SVG */
#root div[class*="centered_container"] svg,
#root div[class*="centered_container"] .middle > a > svg,
#root div[class*="centered_container"] > a > svg,
#root div[class*="centered_container"] .middle > svg {
  display: none !important;
}

/* Instantly swap the base64 Botpress image with the ESL logo natively in CSS to prevent flicker! */
#root img[src^="data:image/png;base64,iVBORw0KGgo"] {
  content: url("/assets/custom-branding/esl_logo.svg") !important;
  width: 250px !important;
  height: 80px !important;
  object-fit: contain !important;
  margin-bottom: 20px !important;
  display: block !important;
}
#root div[class*="login_box"] {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8rem 2.5rem 3rem 2.5rem !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
  border: none !important;
  outline: none !important;
  position: relative;
  width: 450px !important;
  max-width: 90vw !important;
}

/* Make inner cards completely transparent to avoid double-box effect */
#root div[class*="login_box"] .bp3-card,
#root div[class*="login_box"] .card,
#root div[class*="login_box"] > div {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

/* Hide the default Botpress SVG logo inside the login wrapper */
#root div[class*="login_box"] svg,
#root div[class*="login_box"] img,
#root div[class*="login_box"] .botpress-logo {
  display: none !important;
}

/* Add "Welcome Back!" text at the top of the login box */
#root div[class*="login_box"]::before {
  content: "Welcome Back!";
  display: block;
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  font-size: 32px;
  font-weight: bold;
  color: #111827;
  text-align: left;
}

#root div[class*="login_box"]::after {
  content: "Welcome back! Please enter your credentials to continue.";
  display: block;
  position: absolute;
  top: 5.2rem;
  left: 2.5rem;
  font-size: 15px;
  color: #6b7280;
  text-align: left;
}

/* Hide Botpress "Login" heading */
#root div[class*="login_box"] h1,
#root div[class*="login_box"] h2,
#root div[class*="login_box"] h3,
#root div[class*="login_box"] h4,
#root div[class*="login_box"] h5,
#root div[class*="login_box"] h6 {
  display: none !important;
}

/* Update "Powered by Botpress" to "Powered by Koket Inc." instantly to prevent flicker */
#root div[class*="centered_container"] .powered-by {
  font-size: 0 !important; /* Hide original text */
  display: block !important;
  text-decoration: none !important;
  margin-top: 20px !important;
}

#root div[class*="centered_container"] .powered-by::after {
  content: "Powered by Koket Inc.";
  font-size: 14px !important;
  color: #6b7280 !important;
  display: block !important;
}

#root div[class*="centered_container"] .powered-by:hover::after {
  color: #4b5563 !important;
}

/* Style the form inputs and labels to be cleaner */
#root div[class*="login_box"] .bp3-form-group label {
  color: #4b5563 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 5px !important;
}

#root div[class*="login_box"] .bp3-input {
  border-radius: 4px !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  background-color: #ffffff !important;
}

/* The login button */
#root div[class*="login_box"] button[type="submit"],
#root div[class*="login_box"] .bp3-button.bp3-intent-primary {
  width: 100% !important;
  padding: 12px !important;
  margin-top: 15px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* -------------------------------------------------------------
   ADMIN DASHBOARD OVERRIDES (Match BMLA Branding)
   ------------------------------------------------------------- */

/* Main layout background */
body,
#root > div,
#app > div {
  background-color: #f9fafb !important;
}

/* Sidebar styling */
#root div[class*="sidebar"],
#app div[class*="sidebar"],
#root div[class*="Sidebar"],
#app div[class*="Sidebar"],
#root nav,
#app nav,
aside {
  background-color: #f8f9fa !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

/* Sidebar Icons/Text color to brand green */
#root div[class*="sidebar"] a,
#app div[class*="sidebar"] a,
#root div[class*="sidebar"] button,
#app div[class*="sidebar"] button,
#root div[class*="sidebar"] span,
#app div[class*="sidebar"] span,
#root div[class*="sidebar"] .bp3-icon,
#app div[class*="sidebar"] .bp3-icon,
#root div[class*="sidebar"] svg,
#app div[class*="sidebar"] svg,
#root nav a,
#app nav a,
#root nav .bp3-icon,
#app nav .bp3-icon,
#root nav svg,
#app nav svg,
aside a,
aside .bp3-icon,
aside svg {
  color: #006c32 !important;
  fill: #006c32 !important;
}

/* Active Sidebar Item */
#root div[class*="sidebar"] a.active,
#app div[class*="sidebar"] a.active,
#root div[class*="sidebar"] a[class*="active"],
#app div[class*="sidebar"] a[class*="active"],
#root div[class*="sidebar"] a[aria-current="page"],
#app div[class*="sidebar"] a[aria-current="page"],
#root nav a.active,
#app nav a.active,
aside a.active {
  background-color: rgba(0, 108, 50, 0.16) !important;
  border-left: 4px solid #006c32 !important;
  color: #006c32 !important;
}

#root div[class*="sidebar"] a.active .bp3-icon,
#app div[class*="sidebar"] a.active .bp3-icon,
#root div[class*="sidebar"] a[class*="active"] .bp3-icon,
#app div[class*="sidebar"] a[class*="active"] .bp3-icon,
#root nav a.active .bp3-icon,
#app nav a.active .bp3-icon,
aside a.active .bp3-icon {
  color: #006c32 !important;
}

/* Header styling */
#root header,
#app header,
#root div[class*="header"],
#app div[class*="header"],
#root div[class*="Header"],
#app div[class*="Header"] {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: #111827 !important;
}

#root header h1,
#app header h1,
#root header h2,
#app header h2,
#root header h3,
#app header h3,
#root header h4,
#app header h4,
#root div[class*="header"] h1,
#app div[class*="header"] h1,
#root div[class*="header"] h2,
#app div[class*="header"] h2,
#root div[class*="header"] h3,
#app div[class*="header"] h3,
#root div[class*="Header"] h1,
#app div[class*="Header"] h1 {
  font-family: "Addington CF", serif !important;
  color: #111827 !important;
  font-weight: 700 !important;
}

/* Buttons */
.bp3-button.bp3-intent-primary {
  background-color: #006c32 !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

.bp3-button.bp3-intent-primary:hover {
  background-color: #005226 !important;
}

/* Cards / List Items */
.bp3-card {
  background-color: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  border-radius: 8px !important;
}

/* -------------------------------------------------------------
   STUDIO DASHBOARD SPECIFIC OVERRIDES
   ------------------------------------------------------------- */

/* Studio Status Bar (Footer) */
#app div[class*="statusBar"] {
  background-color: #f8f9fa !important;
  color: #4b5563 !important;
  border-top: 1px solid #e5e7eb !important;
}

#app div[class*="statusBar"] span,
#app div[class*="statusBar"] svg,
#app div[class*="statusBar"] a {
  color: #4b5563 !important;
  fill: #4b5563 !important;
}

/* Studio Left Sidebar (Main Nav) */
#app div[class*="leftSideBar"] {
  background-color: #f8f9fa !important;
  border-right: 1px solid #e5e7eb !important;
}

#app div[class*="leftSideBar"] svg,
#app div[class*="leftSideBar"] a,
#app div[class*="leftSideBar"] i,
#app div[class*="leftSideBar"] span {
  fill: #006c32 !important;
  color: #006c32 !important;
}

#app div[class*="leftSideBar"] a.active,
#app div[class*="leftSideBar"] a[class*="active"] {
  background-color: rgba(0, 108, 50, 0.16) !important;
  border-left: 4px solid #006c32 !important;
}
#app div[class*="leftSideBar"] a.active svg,
#app div[class*="leftSideBar"] a[class*="active"] svg {
  fill: #006c32 !important;
}

/* Top-left Studio Logo Box */
#app div[class*="leftSideBar"] > div:first-child,
#app div[class*="leftSideBar"] a[href="/"] {
  background-color: transparent !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Studio Flows Panel (Inner Sidebar) */
#app div[class*="sidebar"] {
  background-color: #ffffff !important;
}

/* Studio Header Toolbar */
#app div[class*="headerToolbar"],
#app div[class*="headerWrapper"] {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

/* Override default blue active states in Studio */
.bp3-menu-item.bp3-active,
div[class*="active"] {
  background-color: rgba(0, 108, 50, 0.16) !important;
  color: #006c32 !important;
}

#app div[class*="leftSideBar"] a[href="/"] svg {
  display: none !important;
}

/* Emulator / Webchat Logo Background */
.bpw-bot-avatar,
.bpw-header-icon,
.bpw-header-container svg,
.bpw-header-container img,
#app div[class*="emulator"] svg,
#app div[class*="emulator"] img,
#app div[class*="emulator"] .bot-avatar {
  background-color: transparent !important;
}

/* Dynamic Footer and Active Nodes CSS */
.custom-esl-footer,
div[class*="bottomPanel"],
div[class*="BottomPanel"],
div[class*="statusBar"],
div[class*="StatusBar"],
div[class*="bottomBar"],
footer {
  background-color: #f8f9fa !important;
  color: #4b5563 !important;
  border-top: 1px solid #e5e7eb !important;
}
.custom-esl-footer span,
.custom-esl-footer svg,
.custom-esl-footer a,
.custom-esl-footer i,
div[class*="bottomPanel"] span,
div[class*="BottomPanel"] span,
div[class*="statusBar"] span,
div[class*="StatusBar"] span,
div[class*="bottomBar"] span,
footer span {
  color: #4b5563 !important;
  fill: #4b5563 !important;
}
.custom-esl-active,
.custom-esl-active > div,
.custom-esl-active > div > div,
.custom-esl-active * {
  background-color: rgba(0, 108, 50, 0.16) !important;
  color: #006c32 !important;
}
.custom-esl-active svg,
.custom-esl-active path,
.custom-esl-active span,
.custom-esl-active i {
  color: #006c32 !important;
  fill: #006c32 !important;
  background-color: transparent !important;
}

/* Fallback: Force override all known Botpress and BlueprintJS active tree/list nodes */
.bp3-tree-node-selected > .bp3-tree-node-content,
.bp3-tree-node-content.bp3-tree-node-selected,
.bp3-tree-node-content.bp3-tree-node-selected *,
.bp3-menu-item.bp3-active,
.bp3-menu-item.bp3-intent-primary,
.rst__rowSelected,
.rst__rowSelected *,
[aria-selected="true"],
[aria-selected="true"] *,
[aria-current="page"],
[aria-current="page"] *,
[class*="activeItem"],
[class*="activeNode"],
[class*="ActiveItem"] {
  background-color: rgba(0, 108, 50, 0.16) !important;
  color: #006c32 !important;
}

.bp3-tree-node-selected > .bp3-tree-node-content svg,
.rst__rowSelected svg,
[aria-selected="true"] svg,
[aria-current="page"] svg {
  fill: #006c32 !important;
  background-color: transparent !important;
}