:root {
  --brand-blue: #40C4FF;
  --brand-blue-hover: #0fa4e6;
  --color-white: #ffffff;
}

/* Mobile responsiveness */
@media screen and (max-width: 768px) {
  .Header__name {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 16px;
    line-height: 1.2;
    margin-top: 4px;
  }

  .Header__container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Custom widget button */
.custom-widget-button {
  background-color: #2c334d;
  color: white;
  padding: 8px 15px;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  margin-top: 20px;
}

.custom-widget-button:hover {
  background-color: #084298;
}

/* Primary buttons and hover/active states */
.btn-primary,
.btn-primary:hover,
button:hover {
  color: #fff !important;
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
}

/* Focused inputs */
input:focus,
textarea:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 2px rgba(64, 196, 255, 0.3);
}

/* Navbar links - white default */
.header a,
.top-nav a,
.navbar a {
  color: #FFFFFF !important;
}

/* General hover links */
a:hover {
  color: var(--brand-blue) !important;
}

/* Specific Zoho department card link override */
.card .media-heading a {
  color: inherit !important;
}

/* View Profile Button (in profile popup) */
.LoginDetail__profileBtn {
  background-color: var(--brand-blue) !important;
  color: #ffffff !important;
  border: none !important;
}

.LoginDetail__profileBtn:hover {
  background-color: var(--brand-blue-hover) !important;
}

/* Change Password Link */
.LoginDetail__userAvatarPopup a {
  color: var(--brand-blue) !important;
  text-decoration: none;
}

.LoginDetail__userAvatarPopup a:hover {
  color: var(--brand-blue-hover) !important;
  text-decoration: underline;
}

/* Avatar Initials (PP circle text color) */
.AvatarText__avatarText,
.AvatarText__avatarText span {
  color: var(--brand-blue) !important;
}

/* Backgrounds and brand color elements */
.commonStyle__zt3BrandBg {
  background-color: var(--brand-blue);
}

.SearchContainer__downArrow {
  border-top-color: var(--brand-blue);
}

.commonStyle__zt3Brand {
  color: var(--brand-blue);
}

.Icon__brand,
.Icon__hoverbrand:hover {
  color: var(--brand-blue) !important;
}

/* Date picker customizations */
.DateWidget__date:hover {
  border-bottom: 1px solid var(--brand-blue);
}

.DateWidget__dateFocus {
  border-bottom: var(--brand-blue);
}

.DateTime__blueBut {
  background: var(--brand-blue);
  color: var(--color-white);
  border: 1px solid var(--brand-blue);
}

.DateTime__sunday {
  color: var(--brand-blue);
}

/* Override today’s date (orange issue fix) */
.DateTime__today,
.DateTime__today:hover,
.DateTime__today:focus,
.DateTime__today.DateTime__datesStr {
  background-color: var(--brand-blue) !important;
  color: var(--color-white) !important;
}