/*
 * iVetData Brand Theme Override
 * Loaded last — overrides Bootstrap, Iqonic, and typography.css
 * All rules use .ivetdata-theme scoped to body to ensure specificity without !important abuse
 * Add all future brand/visual overrides here, not in style.css
 */

/* ── Variables ── */
:root {
  --ivd-teal-dark:   #015F6A;
  --ivd-teal:        #028090;
  --ivd-teal-light:  #02C39A;
  --ivd-teal-deeper: #012F36;
  --ivd-yellow:      #FEBB4A;
  --ivd-cream:       #FFF8F0;
  --ivd-white:       #FFFFFF;
  --ivd-text-dark:   #2D2D2D;
  --ivd-text-muted:  #6B7280;
  --ivd-nav-height:  73px;
}

/* ── Canvas ── */
body { background: var(--ivd-teal-dark) !important; }
.content-page { background: var(--ivd-cream) !important; }

/* ── Page loader ── */
#loading {
  background-color: var(--ivd-teal-dark) !important;
  background-image: url('../../images/pocket-pet/ivet_forpocketpet_white.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 180px auto !important;
}
#loading-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Sidebar ── */
.iq-sidebar,
.iq-sidebar-logo { background: var(--ivd-teal-dark) !important; }
.iq-sidebar {
  box-shadow: none !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;
}
.iq-sidebar-menu .iq-menu li a {
  color: rgba(255,255,255,0.75) !important;
  border-radius: 12px !important;
  transition: all 0.2s !important;
}
.iq-sidebar-menu .iq-menu li a:hover {
  color: white !important;
  background: rgba(255,255,255,0.08) !important;
}
/* When a submenu is open, flatten the bottom corners of the parent link so it connects flush */
.iq-sidebar-menu .iq-menu > li.menu-open > a {
  border-radius: 12px 12px 0 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.iq-sidebar-menu .iq-menu li.active > a {
  background: var(--ivd-yellow) !important;
  color: var(--ivd-teal-dark) !important;
  font-weight: 700 !important;
  border-left: none !important;
  box-shadow: 0 2px 12px rgba(254,187,74,0.35) !important;
}
.iq-sidebar-menu .iq-menu li.active > a i,
.iq-sidebar-menu .iq-menu li.active > a span {
  color: var(--ivd-teal-dark) !important;
}
/* Active parent with open submenu — no bottom radius, no shadow bleed */
.iq-sidebar-menu .iq-menu > li.active.menu-open > a {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
}
.iq-sidebar-menu .iq-menu .iq-menu-title {
  color: rgba(254,187,74,0.65) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.11em !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}
.iq-sidebar-menu .iq-menu .iq-submenu {
  background: rgba(0,0,0,0.12) !important;
  border-radius: 0 0 12px 12px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
  overflow: hidden !important;
}
.iq-sidebar-menu .iq-menu .iq-submenu li {
  display: block !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
.iq-sidebar-menu .iq-menu .iq-submenu > li > a {
  border-radius: 0 !important;
}

/* ── Top Navbar ── */
.iq-top-navbar {
  background: var(--ivd-teal-dark) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* ── Nav Profile Pill ── */
.iq-top-navbar .iq-navbar-custom nav ul.navbar-list > li.nav-profile-pill {
  display: flex !important;
  align-items: center !important;
  background: var(--ivd-yellow) !important;
  padding: 0 !important;
  margin: 0 !important;
  height: var(--ivd-nav-height) !important;
  border-radius: 0 15px 15px 0 !important;
}
.iq-top-navbar .iq-navbar-custom nav ul.navbar-list > li.nav-profile-pill > a {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  height: var(--ivd-nav-height) !important;
  gap: 0.75rem !important;
}
.iq-top-navbar .iq-navbar-custom nav ul.navbar-list > li.nav-profile-pill .nav-profile-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}
.iq-top-navbar .iq-navbar-custom nav ul.navbar-list > li.nav-profile-pill .nav-profile-name {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: var(--ivd-teal-dark) !important;
  line-height: 1.3 !important;
  position: static !important;
  transform: none !important;
}
.iq-top-navbar .iq-navbar-custom nav ul.navbar-list > li.nav-profile-pill .nav-profile-role {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--ivd-teal-dark) !important;
  opacity: 0.75 !important;
  line-height: 1.3 !important;
  position: static !important;
  transform: none !important;
}
.iq-top-navbar .iq-navbar-custom nav ul.navbar-list > li.nav-profile-pill .nav-profile-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* ── Search bars ── */
.iq-search-bar .search-input {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 50px !important;
}
.iq-search-bar .search-input::placeholder {
  color: rgba(0,0,0,0.45) !important;
}
.iq-search-bar .search-link,
.iq-search-bar .search-link i {
  color: rgba(0,0,0,0.5) !important;
}

/* ── Cards ── */
.iq-card {
  background: var(--ivd-cream) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1) !important;
  border: 1.5px solid var(--ivd-yellow) !important;
}
.iq-card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(254,187,74,0.25) !important;
}
.iq-card-header h4.card-title {
  color: var(--ivd-teal-dark) !important;
  font-weight: 800 !important;
}
.iq-card-body { background: transparent !important; }

/* ── Tables ── */
.dataTable thead th {
  background: var(--ivd-teal-dark) !important;
  color: white !important;
  font-weight: 700 !important;
  border: none !important;
}
.dataTable tbody tr { background: white !important; }
.dataTable tbody tr:hover { background: rgba(2,128,144,0.04) !important; }

/* ── Buttons ── */
.btn-primary {
  background: var(--ivd-teal-dark) !important;
  border: 2px solid var(--ivd-yellow) !important;
  color: white !important;
  border-radius: 50px !important;
  font-weight: 800 !important;
}
.btn-primary:hover {
  background: #013F47 !important;
  transform: translateY(-1px) !important;
}

/* ── Dropdowns ── */
.iq-sub-dropdown {
  background: var(--ivd-teal-deeper) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  transform: none !important;
  transition: opacity 0.2s ease !important;
  opacity: 0;
  visibility: hidden;
  display: block !important;
  pointer-events: none;
}
.iq-show .iq-sub-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* ── Footer ── */
.iq-footer {
  background: var(--ivd-teal-deeper) !important;
  border-top: 3px solid var(--ivd-yellow) !important;
}
.iq-footer a { color: rgba(255,248,240,0.55) !important; }
.iq-footer a:hover { color: white !important; }