/* ─── GovQuest by PRI | Zoho Desk Elegant Theme Overrides ─── */
/* Paste this entire block into Zoho Desk → Customize → CSS */

/* ── 1) Core Variables ───────────────────────────────────── */
:root {
  --radius: 0.5rem !important;
  --size-base14: 1.0005rem !important;

  /* Brand & primary */
  --color-brand: hsl(221.2,83.2%,53.3%) !important;
  --color-primary: var(--color-brand) !important;
  --color-primary-foreground: hsl(210,40%,98%) !important;

  /* Secondary / surfaces */
  --color-secondary: hsl(210,40%,96.1%) !important;
  --color-secondary-foreground: hsl(222.2,47.4%,11.2%) !important;

  /* Borders & dividers */
  --color-border: hsl(214.3,31.8%,91.4%) !important;

  /* Background & text */
  --color-background: hsl(0,0%,100%) !important;
  --color-foreground: hsl(222.2,84%,4.9%) !important;

  /* Cards & inputs */
  --color-card: var(--color-background) !important;

  /* Destructive (discard) */
  --color-destructive: hsl(0,84.2%,60.2%) !important;
  --color-destructive-foreground: hsl(210,40%,98%) !important;

  /* Zoho synonym vars */
  --color-buttonPrimaryBg: var(--color-primary) !important;
  --color-buttonPrimaryText: var(--color-primary-foreground) !important;
  --color-buttonSecondaryBg: var(--color-secondary) !important;
  --color-buttonSecondaryText: var(--color-secondary-foreground) !important;
  --color-breadCrumbBg: var(--color-background) !important;
  --color-breadCrumbText: var(--color-foreground) !important;
  --color-breadCrumbTextHover: var(--color-primary) !important;
}

/* ── 2) Header & Search ──────────────────────────────────── */
.zd-ref-theme-header {
  background-color: var(--color-brand) !important;
  color: var(--color-buttonPrimaryText) !important;
}

.zd-widget .zd-search-bar__input {
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-card) !important;
  color: var(--color-foreground) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 0.75rem !important;
  box-shadow: none !important;
}
.zd-widget .zd-search-bar__input:focus {
  outline: none !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* ── 3) Links ────────────────────────────────────────────── */
.zd-widget a,
.zd-widget .zd-article-list__item-title {
  color: var(--color-primary) !important;
}
.zd-widget a:hover {
  color: hsl(221.2,83.2%,43%) !important;
}

/* ── 4) Buttons ─────────────────────────────────────────── */
/* Base */
.zd-widget .zd-btn,
.zd-widget .zd-button {
  border-radius: var(--radius) !important;
  font-family: inherit !important;
  font-size: var(--size-base14) !important;
  padding: 0.5rem 1rem !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

/* Primary */
.zd-widget .zd-primary-btn,
.zd-widget .zd-btn--primary,
.zd-widget .zd-button--primary,
.Button__primary {
  background-color: var(--color-buttonPrimaryBg) !important;
  color: var(--color-buttonPrimaryText) !important;
}

/* Secondary */
.zd-widget .zd-secondary-btn,
.zd-widget .zd-btn--secondary,
.zd-widget .zd-button--secondary,
.Button__secondary {
  background-color: var(--color-buttonSecondaryBg) !important;
  color: var(--color-buttonSecondaryText) !important;
}

/* Destructive / Discard */
.zd-widget .zd-btn--cancel,
.zd-widget .zd-btn-destructive,
.zd-widget .zd-button--destructive {
  background-color: var(--color-destructive) !important;
  color: var(--color-destructive-foreground) !important;
}

/* ── 5) Form Controls ───────────────────────────────────── */
.Input__searchBox {
  border-radius: var(--radius) !important;
  background-color: var(--color-card) !important;
  color: var(--color-foreground) !important;
  font-family: inherit !important;
  font-size: var(--size-base14) !important;
  padding: 0.5rem 0.75rem !important;
  box-shadow: none !important;
}

/* Override Zoho “no outline” utility */
.commonStyle__outlineNone:focus {
  outline: none !important;
}

/* Focus rings */
.zd-widget input:focus,
.zd-widget select:focus,
.zd-widget textarea:focus {
  box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* Required‑field asterisk */
.FormElement__required,
.zd-widget .zd-field__required {
  color: var(--color-destructive) !important;
}
.FormElement__required::after,
.zd-widget .zd-field__required::after {
  content: " *" !important;
}

/* ── 6) Checkboxes & Radios ─────────────────────────────── */
.zd-widget input[type="checkbox"] + label:before,
.zd-widget input[type="radio"] + label:before {
  border-radius: var(--radius) !important;
  border: 1px solid var(--color-border) !important;
}
.zd-widget input[type="checkbox"]:checked + label:before,
.zd-widget input[type="radio"]:checked + label:before {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

/* ── 7) Tabs & Navigation ───────────────────────────────── */
.zd-widget .zd-tabs__list .zd-tabs__item {
  font-family: inherit !important;
  font-size: var(--size-base14) !important;
  padding: 0.5rem 0.75rem !important;
}
.zd-widget .zd-tabs__item--active {
  border-bottom: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ── 8) Breadcrumbs ─────────────────────────────────────── */
.zd-widget .zd-breadcrumb,
.zd-widget .zd-breadcrumb a {
  font-family: inherit !important;
  color: var(--color-breadCrumbText) !important;
}
.zd-widget .zd-breadcrumb a:hover {
  color: var(--color-breadCrumbTextHover) !important;
}

/* ── 9) Footer “Submit a ticket” button ─────────────────── */
.Footer__footerBtn {
  text-align: center !important;
  margin: 2rem 0 !important;
}
.Footer__footerBtn a {
  display: inline-block !important;
  text-decoration: none !important;
}
.Footer__footerBtn .Button__footerBtn {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
  border-radius: var(--radius) !important;
  font-family: inherit !important;
  font-size: var(--size-base14) !important;
  padding: 0.5rem 1rem !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

/* ── 10) Back‑to‑Top Arrow ───────────────────────────────── */
.AppContainer__backToTop {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  background-color: var(--color-primary) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  z-index: 1000 !important;
}
.AppContainer__backToTop:hover {
  background-color: hsl(221.2,83.2%,43%) !important;
}
.AppContainer__backToTop .Icon__icon {
  fill: var(--color-primary-foreground) !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
}

/* ─── 11) Search‑Filter Arrow & Active Module Color ─── */

/* 1) Down‑arrow caret */
.SearchContainer__downArrow {
  /* override the border‑top color that draws the arrow */
  border-top-color: var(--color-primary) !important;
}

/* 2) Active / selected filter labels */
.SearchContainer__searchModule,
.SearchContainer__selected {
  color: var(--color-primary) !important;
}

/* 3) Hover state on filter list items */
.SearchContainer__searchModule:hover {
  color: hsl(221.2, 83.2%, 43%) !important;
}

/* ─── GovQuest/Shadcn Overrides for .btn, .primary, .form input, .big-btn ─── */

/* 1) Generic buttons use secondary styling */
.btn {
  background-color: var(--color-secondary) !important;
  color: var(--color-secondary-foreground) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 1rem !important;
  font-size: var(--size-base14) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}

/* 2) Primary buttons (.btn.primary or .primary) use brand blue */
.btn.primary,
.primary {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-foreground) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 0.5rem 1rem !important;
  font-size: var(--size-base14) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn.primary:hover,
.primary:hover {
  background-color: hsl(221.2,83.2%,43%) !important;
}

/* 3) Ensure margin on form inputs matches Shadcn spacing */
.form input {
  margin-bottom: 1rem !important;
}

/* 4) “big‑btn” text size and weight */
.big-btn {
  font-size: var(--size-base14) !important;
  font-weight: 500 !important;
}

/* ─── Login Page “Sign In” Button Override ───────────────── */

/* Ensure it matches your GovQuest/Shadcn primary styling */
form.signinform input.btn.primary,
form.signinform .btn.big-btn.primary,
form.signinform .primary.btn {
  background-color: var(--color-primary) !important;      /* brand blue */
  background-image: none !important;                       /* kill gradients */
  color: var(--color-primary-foreground) !important;       /* white text */
  border: none !important;
  border-radius: var(--radius) !important;                 /* .5rem corners */
  padding: 0.5rem 1rem !important;                         /* matching Shadcn */
  font-size: var(--size-base14) !important;                /* 1rem-ish */
  font-weight: 500 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Hover state */
form.signinform input.btn.primary:hover,
form.signinform .btn.big-btn.primary:hover,
form.signinform .primary.btn:hover {
  background-color: hsl(221.2, 83.2%, 43%) !important;    /* slightly darker */
}

.FormElement__mandatoryStar .FormElement__required:after{
  content: "*";
  color: #E7000B!important
  margin: 0 0 0 .1rem;
}

.FormElement__required, .zd-widget .zd-field__required{
 color: #E7000B!important
}