/* ==========================================================
   Perdigon Group — Zoho Desk Help Center Custom CSS
   Paste into: Zoho Desk → Setup → Help Center → Customize → CSS
   ========================================================== */

/* --- Google Fonts (Outfit + DM Sans) --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   GLOBAL — nuclear overrides for Zoho's hashed class names
   ============================================================ */
body,
html,
#root,
#app,
div[id^="portal"],
div[class*="portal"],
div[class*="Portal"] {
  background: #080811 !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Force all text light */
p, span, div, li, td, th, label, legend, fieldset,
dt, dd, figcaption, blockquote, cite, small, strong, em, b {
  color: #eae8f0 !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif !important;
  color: #eae8f0 !important;
  letter-spacing: -0.02em;
}

/* Secondary/muted text */
[class*="__desc"],
[class*="__sub"],
[class*="__meta"],
[class*="__info"],
[class*="__hint"],
[class*="__help"],
[class*="__count"],
small {
  color: #8b8d9e !important;
}

/* Links */
a {
  color: #a78bfa !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
a:hover {
  color: #c4a8ff !important;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
[class*="Header__headerBg"],
[class*="Header__bgColor"],
[class*="Header__menuWrapper"],
[class*="Header__menuBox"],
[class*="headerBg"],
[class*="menuWrapper"] {
  background: #0b0b18 !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.1) !important;
}

/* Fix nav link spacing — add gaps between items */
[class*="Header__nav"],
ul[class*="nav"] {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

[class*="Header__nav"] li,
ul[class*="nav"] li {
  padding: 0 12px !important;
}

[class*="Header__nav"] a,
[class*="Header__nav"] li a,
#portal_tabHome a,
#portal_tabCases a,
#portal_tabKB a,
ul[class*="nav"] li a {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 8px 4px !important;
  transition: color 0.2s ease;
  white-space: nowrap !important;
}
[class*="Header__nav"] a:hover,
ul[class*="nav"] li a:hover {
  color: #eae8f0 !important;
}
[class*="Header__nav"] .active a,
[class*="Header__nav"] .selected a {
  color: #7c5cbf !important;
  border-bottom: 2px solid #7c5cbf !important;
}

/* Sign In / Sign Up */
[class*="signIn"] a,
[class*="SignIn"] a {
  color: #8b8d9e !important;
  font-weight: 500 !important;
}
[class*="signUp"] a,
[class*="SignUp"] a {
  background: #7c5cbf !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
}
[class*="signUp"] a:hover,
[class*="SignUp"] a:hover {
  background: #6a4daa !important;
}

/* ============================================================
   SEARCH BAR
   ============================================================ */
input[type="search"],
input[type="text"][placeholder*="Search"],
input[type="text"][placeholder*="search"],
input[placeholder*="Search"],
input[placeholder*="search"],
[class*="SearchBar"] input,
[class*="searchBar"] input,
[class*="search__input"],
[class*="searchInput"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 12px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}
input[type="search"]:focus,
[class*="SearchBar"] input:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.12) !important;
  outline: none !important;
}
input::placeholder,
textarea::placeholder {
  color: #5c5e70 !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
[class*="breadcrumb"],
[class*="Breadcrumb"] {
  color: #5c5e70 !important;
  font-size: 13px !important;
}
[class*="breadcrumb"] a,
[class*="Breadcrumb"] a {
  color: #8b8d9e !important;
}

/* ============================================================
   MAIN CONTENT — force dark on ALL containers
   ============================================================ */
main,
section,
article,
[class*="MainContent"],
[class*="mainContent"],
[class*="LayoutContent"],
[class*="layoutContent"],
[class*="portalContent"],
[class*="content__"],
[class*="Content__"],
[class*="wrapper__"],
[class*="Wrapper__"],
[class*="container__"],
[class*="Container__"],
[class*="body__"],
[class*="Body__"],
[class*="layout__"],
[class*="Layout__"],
[class*="page__"],
[class*="Page__"],
[class*="view__"],
[class*="View__"] {
  background-color: #080811 !important;
}

/* ============================================================
   CARDS, PANELS, FORM CONTAINERS — dark cards
   ============================================================ */
[class*="Card"],
[class*="card__"],
[class*="Panel"],
[class*="panel__"],
[class*="Module"],
[class*="module__"],
[class*="Block"],
[class*="block__"],
[class*="Section__"],
[class*="section__"],
[class*="ticketForm"],
[class*="TicketForm"],
[class*="formContainer"],
[class*="FormContainer"],
[class*="newTicket"],
[class*="NewTicket"],
[class*="addTicket"],
[class*="submitTicket"],
[class*="articleCard"],
[class*="ArticleCard"],
[class*="widget"],
[class*="Widget"],
.zd-card {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   FORM ELEMENTS — dark inputs, labels, dropdowns
   ============================================================ */

/* Labels */
label,
legend,
[class*="fieldLabel"],
[class*="FieldLabel"],
[class*="label__"],
[class*="Label__"],
.form-label {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* All form inputs — nuclear selector */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select,
[class*="formField"] input,
[class*="formField"] textarea,
[class*="formField"] select,
[class*="input__"],
[class*="Input__"],
[class*="textArea"],
[class*="TextArea"],
[class*="select__"],
[class*="Select__"],
[class*="dropdown__"],
[class*="Dropdown__"] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none !important;
}

input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15) !important;
  outline: none !important;
  background: #191930 !important;
}

textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Dropdown arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%238b8d9e'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* Dropdown menu/options */
option,
[class*="option__"],
[class*="Option__"],
[class*="menuItem"],
[class*="MenuItem"],
[class*="listItem"],
[class*="ListItem"] {
  background: #141428 !important;
  color: #eae8f0 !important;
}

/* Required asterisk */
.required,
[class*="required"],
[class*="mandatory"],
span[style*="color: red"],
span[style*="color:red"] {
  color: #ef4444 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
button[type="submit"],
input[type="submit"],
[class*="submitBtn"],
[class*="SubmitBtn"],
[class*="primaryBtn"],
[class*="PrimaryBtn"],
.zd-btn-primary,
[class*="primary__"] > button,
[class*="Primary__"] > button {
  background: linear-gradient(135deg, #7c5cbf, #6a4daa) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(124, 92, 191, 0.25) !important;
}
button[type="submit"]:hover,
input[type="submit"]:hover,
[class*="submitBtn"]:hover,
.zd-btn-primary:hover {
  background: linear-gradient(135deg, #8b6ccc, #7c5cbf) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(124, 92, 191, 0.35) !important;
}

/* Secondary buttons */
button:not([type="submit"]):not([type="button"]),
[class*="secondaryBtn"],
[class*="SecondaryBtn"],
.zd-btn-secondary {
  background: #141428 !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: all 0.2s ease !important;
}
button:not([type="submit"]):not([type="button"]):hover,
[class*="secondaryBtn"]:hover {
  border-color: rgba(124, 92, 191, 0.3) !important;
  background: #191930 !important;
}

/* ============================================================
   SIDEBAR — Popular Articles
   ============================================================ */
[class*="Sidebar"],
[class*="sidebar"],
[class*="rightSection"],
[class*="RightSection"],
[class*="aside"],
aside {
  background: transparent !important;
}

[class*="Sidebar"] h2,
[class*="sidebar"] h3,
[class*="Sidebar"] h4,
[class*="rightSection"] h2,
[class*="rightSection"] h3,
[class*="sidebarTitle"] {
  font-family: 'Outfit', sans-serif !important;
  color: #eae8f0 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* Sidebar card container — match main cards */
[class*="Sidebar"] > div,
[class*="sidebar"] > div,
aside > div,
[class*="rightSection"] > div {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
}

[class*="Sidebar"] a,
[class*="sidebar"] a,
[class*="articleList"] a,
[class*="rightSection"] a {
  color: #8b8d9e !important;
  font-size: 14px !important;
  padding: 10px 0 !important;
  display: block !important;
  transition: color 0.15s ease;
  border-bottom: 1px solid rgba(124, 92, 191, 0.05) !important;
}
[class*="Sidebar"] a:hover,
[class*="rightSection"] a:hover,
[class*="articleList"] a:hover {
  color: #a78bfa !important;
}

/* Article list icons */
[class*="Sidebar"] svg,
[class*="sidebar"] svg,
[class*="articleList"] svg,
[class*="rightSection"] svg {
  fill: #5c5e70 !important;
  color: #5c5e70 !important;
}

/* ============================================================
   KNOWLEDGE BASE CATEGORIES
   ============================================================ */
[class*="KBCategory"],
[class*="kbCategory"],
[class*="CategoryCard"],
[class*="categoryCard"],
[class*="category__"],
[class*="Category__"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
  transition: all 0.25s ease;
}
[class*="KBCategory"]:hover,
[class*="categoryCard"]:hover,
[class*="Category__"]:hover {
  border-color: rgba(124, 92, 191, 0.2) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[class*="categoryIcon"],
[class*="CategoryIcon"] {
  color: #7c5cbf !important;
}

/* ============================================================
   ARTICLE PAGES
   ============================================================ */
[class*="ArticleContent"],
[class*="articleContent"],
[class*="article-body"],
.article-body {
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

[class*="ArticleContent"] code,
[class*="articleContent"] code {
  background: #141428 !important;
  color: #a78bfa !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

[class*="ArticleContent"] pre,
[class*="articleContent"] pre {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.1) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
  border-collapse: collapse !important;
  width: 100% !important;
}
th {
  background: #141428 !important;
  color: #eae8f0 !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid rgba(124, 92, 191, 0.15) !important;
}
td {
  background: #0f0f1e !important;
  color: #8b8d9e !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.06) !important;
}
tr:hover td {
  background: #141428 !important;
  color: #eae8f0 !important;
}

/* ============================================================
   TICKET LIST / MY AREA
   ============================================================ */
[class*="ticketRow"],
[class*="TicketRow"],
[class*="caseRow"],
[class*="CaseRow"],
[class*="listRow"],
[class*="ListRow"] {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.06) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  padding: 16px !important;
  transition: all 0.2s ease;
}
[class*="ticketRow"]:hover,
[class*="caseRow"]:hover,
[class*="listRow"]:hover {
  background: #141428 !important;
  border-color: rgba(124, 92, 191, 0.15) !important;
}

/* Status badges */
[class*="statusBadge"],
[class*="StatusBadge"],
[class*="ticketStatus"],
[class*="status__"],
[class*="Status__"] {
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
[class*="Footer"],
[class*="footer"],
.zd-footer {
  background: #0b0b18 !important;
  border-top: 1px solid rgba(124, 92, 191, 0.08) !important;
  color: #5c5e70 !important;
}
[class*="Footer"] a,
[class*="footer"] a {
  color: #8b8d9e !important;
}

/* ============================================================
   FILE UPLOAD
   ============================================================ */
[class*="fileUpload"],
[class*="FileUpload"],
[class*="dropzone"],
[class*="Dropzone"],
[class*="attachment"],
[class*="Attachment"] {
  background: #141428 !important;
  border: 2px dashed rgba(124, 92, 191, 0.2) !important;
  border-radius: 12px !important;
  color: #8b8d9e !important;
}
[class*="fileUpload"]:hover,
[class*="Dropzone"]:hover {
  border-color: rgba(124, 92, 191, 0.4) !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
[class*="pagination"] a,
[class*="Pagination"] a {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.1) !important;
  border-radius: 8px !important;
  color: #eae8f0 !important;
  padding: 8px 14px !important;
}
[class*="pagination"] a:hover,
[class*="pagination"] .active,
[class*="Pagination"] a:hover {
  background: #7c5cbf !important;
  color: #fff !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #080811; }
::-webkit-scrollbar-thumb { background: #191930; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7c5cbf; }

/* ============================================================
   SELECTION & FOCUS
   ============================================================ */
::selection {
  background: rgba(124, 92, 191, 0.3) !important;
  color: #eae8f0 !important;
}
*:focus-visible {
  outline: 2px solid rgba(124, 92, 191, 0.5) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   ZOHO BRANDING
   ============================================================ */
[class*="poweredBy"],
[class*="PoweredBy"],
[class*="zdBrand"] {
  opacity: 0.3 !important;
}

/* ============================================================
   DIALOG / MODAL
   ============================================================ */
[class*="modal"],
[class*="Modal"],
[class*="dialog"],
[class*="Dialog"],
[class*="overlay"] > div {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
  border-radius: 16px !important;
  color: #eae8f0 !important;
}

/* ============================================================
   MISC — catch-all for remaining white backgrounds
   ============================================================ */
div[style*="background: rgb(255"],
div[style*="background-color: rgb(255"],
div[style*="background: white"],
div[style*="background-color: white"],
div[style*="background:#fff"],
div[style*="background-color:#fff"],
div[style*="background: #fff"],
div[style*="background-color: #fff"],
div[style*="background: #FFF"],
div[style*="background-color: #FFF"],
div[style*="background-color: #ffffff"],
div[style*="background: #ffffff"] {
  background: #0f0f1e !important;
}

/* Force dark on any remaining white/light sections */
[style*="background"][style*="255"] {
  background: #0f0f1e !important;
}

/* ============================================================
   ZOHO DESK SPECIFIC — brute-force overrides
   Zoho renders with hashed CSS modules, so we target
   element types and structural selectors instead
   ============================================================ */

/* Hide Zoho's default nav — we replace it in Header HTML */
[class*="Header__nav"],
[class*="Header__responsiveMenu"],
[class*="Header__navbtn"],
[class*="Header__signIn"],
[class*="Header__signUp"],
[class*="Header__menuClose"] {
  display: none !important;
}

/* Force ALL div backgrounds in the main content area dark */
#root div,
#app div,
[id*="portal"] div {
  background-color: transparent;
}

/* Ticket form wrapper — the white card */
form,
form > div,
form > fieldset,
form > section {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border-color: rgba(124, 92, 191, 0.08) !important;
}

/* Fieldset / legend — "Ticket Information" subheading */
fieldset {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(124, 92, 191, 0.1) !important;
  padding: 16px 0 !important;
}
legend {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0 8px !important;
}

/* Section titles inside forms */
[class*="section"] > h2,
[class*="section"] > h3,
[class*="section"] > h4,
[class*="group"] > h2,
[class*="group"] > h3 {
  color: #8b8d9e !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.08) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

/* Absolutely all inputs — max specificity */
#root input,
#root textarea,
#root select,
#app input,
#app textarea,
#app select,
[id*="portal"] input,
[id*="portal"] textarea,
[id*="portal"] select,
form input,
form textarea,
form select {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  padding: 12px 16px !important;
}
#root input:focus,
#root textarea:focus,
#root select:focus,
form input:focus,
form textarea:focus,
form select:focus {
  border-color: #7c5cbf !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 191, 0.15) !important;
  outline: none !important;
  background: #191930 !important;
}

/* Category dropdown — Zoho custom dropdown */
[class*="dropdown"] > div,
[class*="Dropdown"] > div,
[class*="select"] > div,
[class*="Select"] > div,
[class*="chosen"] > div {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  color: #eae8f0 !important;
  border-radius: 10px !important;
}

/* Dropdown menu when open */
[class*="dropdown"] ul,
[class*="Dropdown"] ul,
[class*="select"] ul,
[class*="Select"] ul,
[class*="menu"] ul,
[class*="Menu"] ul {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
}
[class*="dropdown"] li,
[class*="Dropdown"] li,
[class*="menu"] li,
[class*="Menu"] li {
  color: #eae8f0 !important;
  background: transparent !important;
}
[class*="dropdown"] li:hover,
[class*="Dropdown"] li:hover,
[class*="menu"] li:hover {
  background: #191930 !important;
}

/* Popular Articles sidebar — white card fix */
aside,
aside > div,
[class*="right"] > div,
[class*="Right"] > div {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
}
aside h2,
aside h3,
aside h4 {
  color: #eae8f0 !important;
  font-family: 'Outfit', sans-serif !important;
}
aside a {
  color: #8b8d9e !important;
}
aside a:hover {
  color: #a78bfa !important;
}
aside svg,
aside [class*="icon"] {
  color: #5c5e70 !important;
  fill: #5c5e70 !important;
}

/* ============================================================
   RICH TEXT EDITOR (Description field)
   The editor body is in an iframe we can't style directly,
   but we can style the wrapper, toolbar, and border
   ============================================================ */
[class*="editor"],
[class*="Editor"],
[class*="richText"],
[class*="RichText"],
[class*="ql-container"],
[class*="ql-editor"],
.mce-container,
.mce-panel,
.mce-tinymce,
[class*="jodit"],
[class*="tox-tinymce"],
[class*="cke_"],
[class*="fr-box"],
[class*="ze_area"],
[class*="zeditor"],
div[contenteditable="true"] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
}

/* Editor toolbar */
[class*="toolbar"],
[class*="Toolbar"],
[class*="ql-toolbar"],
.mce-toolbar,
[class*="tox-toolbar"],
[class*="cke_top"],
[class*="fr-toolbar"],
[class*="ze_toolbar"] {
  background: #191930 !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.1) !important;
  border-radius: 10px 10px 0 0 !important;
}

/* Toolbar buttons/icons */
[class*="toolbar"] button,
[class*="Toolbar"] button,
[class*="ql-toolbar"] button,
[class*="toolbar"] select,
[class*="Toolbar"] select {
  color: #8b8d9e !important;
  background: transparent !important;
  border: none !important;
}
[class*="toolbar"] button:hover,
[class*="Toolbar"] button:hover {
  color: #eae8f0 !important;
  background: rgba(124, 92, 191, 0.1) !important;
}

/* Toolbar SVG icons */
[class*="toolbar"] svg,
[class*="Toolbar"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}
[class*="toolbar"] button:hover svg,
[class*="Toolbar"] button:hover svg {
  fill: #eae8f0 !important;
  color: #eae8f0 !important;
}

/* The iframe wrapper — force dark border and bg around it */
iframe {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 0 0 10px 10px !important;
}

/* Editor container div that wraps the iframe */
[class*="editor"] > div,
[class*="Editor"] > div,
[class*="richText"] > div,
[class*="RichText"] > div {
  background: #141428 !important;
  border-color: rgba(124, 92, 191, 0.15) !important;
}

/* ============================================================
   FILE UPLOAD — more aggressive selectors
   ============================================================ */
[class*="file"],
[class*="File"],
[class*="upload"],
[class*="Upload"],
[class*="attach"],
[class*="Attach"],
[class*="drop"],
[class*="Drop"] {
  background: #141428 !important;
  border-color: rgba(124, 92, 191, 0.2) !important;
  color: #8b8d9e !important;
}

/* Upload icon */
[class*="upload"] svg,
[class*="Upload"] svg,
[class*="attach"] svg,
[class*="Attach"] svg {
  fill: #5c5e70 !important;
  color: #5c5e70 !important;
}

/* "Attach a file" text */
[class*="upload"] span,
[class*="Upload"] span,
[class*="attach"] span,
[class*="Attach"] span {
  color: #8b8d9e !important;
}

/* ============================================================
   HIDE ZOHO DEFAULT HEADER ELEMENTS
   (we replace with custom header in HTML tab)
   ============================================================ */
[class*="Header__logoPart"],
[class*="Header__logoImg"],
[class*="Header__logoText"] {
  display: none !important;
}

/* ============================================================
   SALESIQ CHAT WIDGET — dark theme overrides
   ============================================================ */
[class*="siq"],
[class*="zsiq"],
.zsiq_floatmain,
.zsiq_theme1,
.zsiq_flt_rel {
  /* Don't override positioning, just colors */
}

/* Chat window container */
.zsiq_floatmain .zsiq_flt_rel,
.siqaio,
[class*="zsiq_cnt"],
[class*="siq_bdy"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
  border-radius: 16px !important;
}

/* Chat header bar */
[class*="zsiq_hdr"],
[class*="siq_hdr"],
.zsiq_floatmain .zsiq_flt_rel .siq_bR {
  background: #0b0b18 !important;
  color: #eae8f0 !important;
  border-bottom: 1px solid rgba(124, 92, 191, 0.1) !important;
}

/* "We're Online" / status text */
[class*="zsiq_byline"],
[class*="siq_byln"],
.zsiq_byline,
.zsiq_unrdcnt {
  color: #8b8d9e !important;
}

/* Chat preview bubble — "How may I help you today?" */
.zsiq_float_t,
[class*="zsiq_float"],
[class*="siq_float"],
.zsiq_fltBR,
[class*="zsiq_flt"] > div {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Chat title text */
.zsiq_float_t .zsiq_flt_h,
[class*="zsiq_flt"] h2,
[class*="zsiq_flt"] h3,
[class*="zsiq_flt"] .zsiq_agent {
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Chat subtitle / "How may I help you" */
.zsiq_float_t .zsiq_flt_p,
[class*="zsiq_flt"] p,
[class*="zsiq_flt"] span {
  color: #c4b5d9 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Chat input area */
[class*="zsiq"] input,
[class*="zsiq"] textarea,
[class*="siq"] input,
[class*="siq"] textarea {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  color: #eae8f0 !important;
  border-radius: 8px !important;
}

/* Chat messages */
[class*="zsiq_msgbdy"],
[class*="siq_msgbdy"] {
  color: #eae8f0 !important;
}

/* Chat button icon — keep the purple accent */
.zsiq_floatmain .zsiq_flt_rel .zsiq_cnt,
[class*="zsiq_cnt"] {
  background: #7c5cbf !important;
}

/* ============================================================
   SIGN IN / SIGN UP / AUTH PAGES
   Nuclear approach — Zoho hashes class names, so we use
   :has(), inline style overrides, and structural selectors
   ============================================================ */

/* Any div that contains a form — the white card wrapper */
div:has(> form),
div:has(> div > form) {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
}

/* Nuke ALL white inline backgrounds site-wide */
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#FFF"],
[style*="background-color: #FFF"],
[style*="background-color: #ffffff"],
[style*="background-color: white"],
[style*="background: rgb(255, 255, 255)"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background: white"],
[style*="background: #ffffff"],
[style*="background:#ffffff"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
}

/* Box-shadow cards (Zoho uses box-shadow on white cards) */
[style*="box-shadow"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
}

/* Hashed class patterns for auth pages */
[class*="signin"], [class*="SignIn"], [class*="signIn"],
[class*="login"], [class*="Login"],
[class*="auth"], [class*="Auth"],
[class*="register"], [class*="Register"],
[class*="signUp"], [class*="SignUp"],
[class*="forgot"], [class*="Forgot"],
[class*="member"], [class*="Member"] {
  background: #0f0f1e !important;
  color: #eae8f0 !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 16px !important;
}

/* Auth inner divs */
[class*="signin"] div, [class*="SignIn"] div,
[class*="login"] div, [class*="Login"] div,
[class*="auth"] div, [class*="Auth"] div {
  background: transparent !important;
  color: #eae8f0 !important;
}

/* Auth headings */
[class*="signin"] h1, [class*="signin"] h2, [class*="signin"] h3,
[class*="login"] h1, [class*="login"] h2,
[class*="auth"] h1, [class*="auth"] h2 {
  color: #eae8f0 !important;
  font-family: 'Outfit', sans-serif !important;
}

/* Auth text */
[class*="signin"] p, [class*="signin"] span, [class*="signin"] label,
[class*="login"] p, [class*="login"] span, [class*="login"] label {
  color: #8b8d9e !important;
}

/* Auth links */
[class*="signin"] a, [class*="login"] a, [class*="auth"] a {
  color: #a78bfa !important;
}

/* Auth buttons — override Zoho blue */
[class*="signin"] button, [class*="login"] button,
[class*="auth"] button, form button {
  background: linear-gradient(135deg, #7c5cbf, #6a4daa) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
}

/* Auth icons */
[class*="signin"] [class*="icon"],
[class*="login"] [class*="icon"] {
  color: #7c5cbf !important;
  fill: #7c5cbf !important;
}

/* Social login */
[class*="social"], [class*="Social"] {
  background: transparent !important;
}

/* Email/password inputs */
input[type="email"], input[type="password"],
input[placeholder*="Email"], input[placeholder*="email"],
input[placeholder*="Password"], input[placeholder*="password"],
input[name*="email"], input[name*="login"] {
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 10px !important;
  color: #eae8f0 !important;
}

/* ============================================================
   KB HOME & CATEGORY PAGES — visibility fixes
   ============================================================ */

/* ALL SVG icons site-wide — make visible against dark bg */
svg,
svg path,
svg circle,
svg rect,
svg polygon,
svg line,
svg polyline,
[class*="icon"] svg,
[class*="Icon"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}

/* KB folder/category icons — brighter */
[class*="category"] svg,
[class*="Category"] svg,
[class*="section"] svg,
[class*="Section"] svg,
[class*="folder"] svg,
[class*="Folder"] svg {
  fill: #7c5cbf !important;
  color: #7c5cbf !important;
  opacity: 1 !important;
}

/* Article list icons in sidebar */
[class*="article"] svg,
[class*="Article"] svg,
[class*="popular"] svg,
[class*="Popular"] svg,
[class*="recent"] svg,
[class*="Recent"] svg {
  fill: #5c5e70 !important;
  color: #5c5e70 !important;
}

/* Category/section description text */
[class*="category"] p,
[class*="Category"] p,
[class*="category"] span,
[class*="Category"] span,
[class*="section"] p,
[class*="Section"] p,
[class*="section"] span,
[class*="Section"] span {
  color: #8b8d9e !important;
}

/* Article count badges ("45 Articles · 5 Sections", "2 Articles") */
[class*="count"],
[class*="Count"],
[class*="badge"],
[class*="Badge"],
[class*="meta"],
[class*="Meta"],
[class*="article"] small,
[class*="category"] small {
  color: #8b8d9e !important;
}

/* "Follow" button and subscription text */
[class*="follow"],
[class*="Follow"],
[class*="subscribe"],
[class*="Subscribe"] {
  color: #8b8d9e !important;
  background: #141428 !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 8px !important;
}

/* Search wrapper/container on home/KB pages */
[class*="search"],
[class*="Search"] {
  background: transparent !important;
}
[class*="search"] input,
[class*="Search"] input {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.15) !important;
  border-radius: 12px !important;
  color: #eae8f0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Search icon */
[class*="search"] svg,
[class*="Search"] svg {
  fill: #5c5e70 !important;
  color: #5c5e70 !important;
}

/* View toggle icons (grid/list view on KB home) */
[class*="toggle"] svg,
[class*="Toggle"] svg,
[class*="view"] svg,
[class*="View"] svg {
  fill: #8b8d9e !important;
  color: #8b8d9e !important;
}

/* KB section list items — the row for each category */
[class*="section"] > a,
[class*="Section"] > a,
[class*="category"] > a,
[class*="categoryList"] a,
[class*="sectionList"] a {
  color: #a78bfa !important;
}
[class*="categoryList"] a:hover,
[class*="sectionList"] a:hover {
  color: #c4a8ff !important;
}

/* "Popular Articles" heading on home — ensure visible */
[class*="popular"] h2,
[class*="Popular"] h2,
[class*="popular"] h3,
[class*="Popular"] h3 {
  color: #eae8f0 !important;
  font-family: 'Outfit', sans-serif !important;
}

/* Popular article rows on home page */
[class*="popular"] li,
[class*="Popular"] li,
[class*="popular"] > div,
[class*="Popular"] > div {
  background: #0f0f1e !important;
  border: 1px solid rgba(124, 92, 191, 0.08) !important;
  border-radius: 12px !important;
}

/* Article titles in lists */
[class*="article"] a,
[class*="Article"] a {
  color: #8b8d9e !important;
}
[class*="article"] a:hover,
[class*="Article"] a:hover {
  color: #a78bfa !important;
}

/* Ensure no transparent/invisible text anywhere */
#root p,
#root span,
#root li,
#root td,
#root label,
#root a {
  color: inherit;
}

/* Force visible text on any element that might be dark-on-dark */
[class*="desc"],
[class*="Desc"],
[class*="description"],
[class*="Description"],
[class*="subtitle"],
[class*="Subtitle"],
[class*="summary"],
[class*="Summary"],
[class*="caption"],
[class*="Caption"] {
  color: #8b8d9e !important;
}

/* Heading in KB category list view */
[class*="heading"],
[class*="Heading"],
[class*="title"],
[class*="Title"] {
  color: #eae8f0 !important;
}