/* ==========================================================================
   JUNGLE OS DESIGN SYSTEM — CUSTOM HTML HEADER COMPATIBLE CSS
   Brand: Jungle OS by Jungle Technologies
   Font Stack: Arial, Helvetica, sans-serif (Web-Safe)
   ========================================================================== */

/* ─── 1. GLOBAL LAYOUT & BASE PORTAL RESET ─── */
portal.html, 
body, 
.zohodesk,
.portal-wrapper {
  background-color: #faf9f7 !important; /* Warm Stone background */
  font-family: Arial, Helvetica, sans-serif !important;
  color: #1c1917 !important; /* Dark Stone Primary text */
  line-height: 1.5 !important;
}

/* Global Content Typography Elements */
h1, h2, h3, h4, h5, h6, .kbTitle {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  color: #1c1917 !important;
}
p, span, li, td, .bodyText {
  font-family: Arial, Helvetica, sans-serif !important;
}
a, .kb-lnk {
  color: #2c5422 !important; /* Jungle Green Interactive */
  text-decoration: none !important;
}
a:hover {
  color: #1f3d18 !important; /* Dark Jungle Hover */
  text-decoration: underline !important;
}

/* ─── 2. EXACT MATCH OVERRIDES FOR YOUR CUSTOM HEADER HTML ─── */

/* Main Navigation Bar Wrapper */
.Header__navbar {
  height: 4.25rem !important; /* Accommodates 56px tree mark */
  background-color: #ffffff !important; /* White surface background */
  border-bottom: 1px solid #e7e5e0 !important; /* Light Stone border */
}

/* Common Header Container Inner Constraints */
.Header__container {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Brand/Company Typography String */
.Header__name {
  color: #1c1917 !important; /* Dark Stone font color */
  font-weight: 700 !important; 
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Tab Lists Unordered Layout */
.Header__menuList {
  list-style: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Navigation Element Links */
.Header__tabsTab, 
.Header__tabsTab a {
  color: #57534e !important; /* Secondary Muted Stone text */
  font-weight: 500 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  text-decoration: none !important;
}

/* Active Navigation & Hover States (Jungle Green Focus Accent) */
.Header__tabsTab.active,
.Header__tabsTab.selected,
.Header__tabsTab.active a,
.Header__tabsTab.selected a,
.Header__tabsTab a:hover,
#navBar .Header__tabsTab[id*="active"] a {
  color: #2c5422 !important; /* Jungle Green Primary Accent */
  font-weight: 600 !important;
}

/* ─── 3. HERO / HOME SEARCH SECTION OVERRIDES ─── */

/* Search Wrapper Box */
.Header__searchSection {
  background-color: #faf9f7 !important; /* Seamlessly matches warm stone background */
  border-bottom: 1px solid #e7e5e0 !important;
  padding: 2.5rem 1rem !important;
}

/* Welcome Title H2 Component */
.Header__searchTitle {
  color: #1c1917 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.875rem !important; /* Balanced sizing scaled across viewports */
  margin-bottom: 0.75rem !important;
}

/* Subtext Description Segment */
.Header__description {
  color: #57534e !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1rem !important;
  margin-bottom: 1.5rem !important;
}

/* ─── 4. FORM FIELDS & SEARCH BAR ELEMENT STATES ─── */
.Header__searchSection input,
.inputBox, 
input[type="text"], 
input[type="email"], 
textarea, 
select {
  background-color: #ffffff !important;
  color: #1c1917 !important;
  border: 1px solid #e7e5e0 !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Interactive Focus ring using defined Jungle Palette rules */
.Header__searchSection input:focus,
.inputBox:focus, 
input[type="text"]:focus, 
textarea:focus {
  border-color: #4d8a3d !important; /* Jungle Green Mid-Tone */
  box-shadow: 0 0 0 2px #e0eed9 !important; /* Light Green glow */
}

/* ─── 5. GENERIC BUTTONS & INTERACTIVE PORTAL ACTIONS ─── */
.primary, 
.zsBtn, 
button[type="submit"], 
.zs-primary-btn,
.submit-btn {
  background-color: #2c5422 !important; /* Primary Green Interactive */
  color: #ffffff !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
}
.primary:hover, .zsBtn:hover, button[type="submit"]:hover, .zs-primary-btn:hover {
  background-color: #1f3d18 !important; /* Deep Forest Green Darkening Hover */
}

.secondary, .discard-btn, .cancel-btn, .zs-secondary-btn {
  background-color: #ffffff !important;
  color: #57534e !important;
  border: 1px solid #e7e5e0 !important;
  border-radius: 0.375rem !important;
}

/* ─── 6. KNOWLEDGE BASE CARDS & STRUCTURAL SIDEBARS ─── */
.kbLanding .categoryBox, 
.category-card, 
.kb-topic-card,
.card-container {
  background-color: #ffffff !important;
  border: 1px solid #e7e5e0 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  padding: 1.5rem !important;
}
.kbLanding .categoryBox:hover, .category-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07) !important;
  border-color: #95c287 !important;
}

.sidebar, .left-panel, .right-panel, .kbLeftContainer {
  width: 14rem !important;
  background-color: #faf9f7 !important;
  border-right: 1px solid #e7e5e0 !important;
}
/* Change the color of the magnifying glass search icon */
svg[alt="Search"] {
    fill: #2c5422 !important;  /* Changes the SVG icon color (currently Jungle Green) */
    color: #2c5422 !important; /* Backup for text-based rendering */
}
/* Change the background and text color of the user initials avatar */
div[data-id="userInitial"] {
    background-color: #2c5422 !important; /* Changes the circle's background color */
    color: #ffffff !important;            /* Changes the text color of the initials (e.g., White) */
}
/* ─── 7. ALERT BADGES & STATUS TOKENS ─── */
.status-success, .alert-success { background-color: #d1fae5 !important; color: #047857