/* Extracted 59 dark-sidebar rule blocks */

.sidebar .head-icons a {
  background: #0D0D0D;
  border-color: #1F2228;
}

.sidebar .head-icons a:hover {
  background: #F26522;
}

.sidebar {
  background: #0D0D0D;
  border-color: #1F2228;
}

.sidebar .sidebar-logo .logo {
  display: none;
}

.sidebar .sidebar-logo .dark-logo {
  display: block;
}

.sidebar .sidebar-logo {
  display: flex;
  justify-content: center;
}

.sidebar .sidebar-menu > ul > li > a:hover span,
.sidebar .sidebar-menu > ul > li > a:hover i {
  color: #D8DFEE;
}

.sidebar .sidebar-menu > ul > li > ul > li > a:hover {
  background: #212324;
}

.sidebar .sidebar-menu > ul > li > ul > li > a:hover i,
.sidebar .sidebar-menu > ul > li > ul > li > a:hover span {
  color: #D8DFEE;
}

.sidebar .sidebar-menu > ul > li > ul > li.submenu > a:hover,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.active,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.subdrop {
  background: #212324;
}

.sidebar .sidebar-menu > ul > li > ul > li.submenu > a:hover span,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a:hover i,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.active span,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.active i,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.subdrop span,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.subdrop i {
  color: #D8DFEE;
}

.sidebar .sidebar-menu > ul > li > ul > li.submenu > a:hover .menu-arrow::before,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.active .menu-arrow::before,
.sidebar .sidebar-menu > ul > li > ul > li.submenu > a.subdrop .menu-arrow::before {
  border-color: #D8DFEE;
}

.sidebar .sidebar-menu > ul > li.active a {
  color: #FFF;
}

.sidebar .sidebar-menu > ul > li > a span {
  color: #4B5563;
}

.sidebar .sidebar-menu > ul > li ul li a {
  color: #D8DFEE;
}

.sidebar .sidebar-menu > ul > li ul li a i {
  color: #6B7280;
}

.sidebar .sidebar-menu > ul > li ul li a span {
  color: #D8DFEE;
}

.sidebar .sidebar-menu > ul > li ul li a.active {
  color: #F26522;
}

.sidebar .sidebar-menu > ul > li ul > li.active a {
  background: #212324;
  color: #FFF;
}

.sidebar .sidebar-menu > ul > li ul > li.active a .menu-arrow::before {
  border-right: 2px solid #F26522;
  border-bottom: 2px solid #F26522;
}

.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop {
  background: #100601;
  color: #F26522;
}

.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop i {
  color: #0D0D0D;
  background: #0D0D0D;
}

.sidebar .sidebar-menu > ul > li ul > li.active a.subdrop span {
  color: #F26522;
}

.sidebar .sidebar-menu > ul > li .submenu ul::before {
  background: #171717;
}

.sidebar .sidebar-menu > ul li.menu-title {
  color: #9CA3AF;
}

.sidebar .sidebar-menu > ul li .submenu > ul li a {
  color: #6B7280;
}

.sidebar .sidebar-menu > ul li .submenu > ul li a:before {
  background: #F26522;
}

.sidebar .sidebar-menu > ul li .submenu > ul li a.active {
  color: #F26522;
}

.sidebar .sidebar-menu > ul li .submenu > ul li a:hover {
  color: #F26522;
}

.sidebar .sidebar-menu > ul li .submenu > a.subdrop {
  background: #212324;
}

.sidebar .sidebar-menu > ul li .submenu > a.subdrop i {
  color: #D8DFEE;
}

.sidebar .sidebar-menu > ul li .submenu > a.active {
  background: #212324;
}

.sidebar .sidebar-menu > ul li .submenu > a.active i {
  color: #D8DFEE;
}

.sidebar .sidebar-menu > ul li .submenu.submenu-two a.subdrop,
.sidebar .sidebar-menu > ul li .submenu.submenu-two a.active {
  background: transparent;
  color: #F26522;
}

.sidebar .sidebar-menu .menu-arrow::before {
  border-right: 2px solid #D8DFEE;
  border-bottom: 2px solid #D8DFEE;
}

.sidebar .nav-link {
  color: #374151;
}

.sidebar .btn-menubar {
  border: 1px solid #171717;
  color: #6B7280;
}

.sidebar .btn-menubar:hover,
.sidebar .btn-menubar:active,
.sidebar .btn-menubar.active {
  background-color: #212324;
  border-color: #212324;
  color: #D8DFEE;
}

.sidebar .input-group input {
  border-color: #1F2228 !important;
}

.sidebar .form-control {
  background-color: #0D0D0D;
  border-color: #1F2228;
}

.sidebar .input-group-text {
  background-color: #0D0D0D;
  border-color: #1F2228;
  color: #D8DFEE;
}

.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar h6 {
  color: #D8DFEE;
}

.sidebar .bg-light {
  background-color: #131313 !important;
  border-color: #131313 !important;
}

.sidebar a {
  color: #D8DFEE;
}

.sidebar kbd {
  background-color: #212324;
  color: #6B7280;
}

.sidebar .input-group-flat:focus-within .form-control,
.sidebar .input-group-flat:focus-within .input-group-text {
  border-color: #1F2228 !important;
}

.sidebar .avatar.online:before,
.sidebar .avatar.offline:before {
  border-color: #0D0D0D !important;
}

.sidebar .text-dark {
  color: #D6DADE !important;
}

.sidebar .nav-tabs li a {
  color: #D8DFEE;
}

.sidebar .nav-tabs .nav-item.show .nav-link,
.sidebar .nav-tabs .nav-link.active {
  background-color: #0D0D0D;
  color: #D8DFEE;
}

.sidebar .nav-tabs .nav-link.active {
  border-color: #1F2228;
}

.sidebar .nav-tabs.nav-tabs-solid {
  background-color: #0D0D0D;
}

.sidebar .nav-tabs.nav-tabs-top li a.active {
  border-top-color: #F26522;
}

.sidebar .form-floating > .form-control-plaintext ~ label::after,
.sidebar .form-floating > .form-control:focus ~ label::after,
.sidebar .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
  background-color: #0D0D0D;
}

.sidebar .theme-mode input[type=radio]:checked ~ label .avatar {
  color: #FFC107;
  background-color: #FFF9E9;
}

.sidebar .theme-mode label .avatar {
  background-color: #212324;
  color: #D6DADE;
}

.sidebar .bg-primary-100 a {
  color: #0D0D0D;
}

.sidebar .bg-primary-100 a:hover {
  color: #F26522;
}

.sidebar .table tbody tr td a {
  color: #C8D2E0;
}

.sidebar .bg-light-500 {
  background: #374151 !important;
}

/* ============================================================
   Ekowebtech branding: logo chip
   The new logo is a white/transparent mark, so anywhere it sits
   on a light background it needs a dark backing chip to stay
   visible (the sidebar above is dark already, so no chip needed
   there — the logo sits directly on the dark sidebar background).
   ============================================================ */
.header .header-left .logo,
.header .header-left .dark-logo,
.brand-logo-chip {
  background: #0D0D0D;
  border-radius: 8px;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Detail card key/value rows (Customer 360, Billing Agreements,
   Testing Queue, etc.) — label left-aligned, value right-aligned,
   with a light divider between rows so a dense card stays readable.
   ============================================================ */
.customer360-detail-list {
  display: flex;
  flex-direction: column;
}

.customer360-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid #EEF0F3;
}

.customer360-detail-row:last-child {
  border-bottom: none;
}

.customer360-field-label {
  color: #6B7280;
  text-align: left;
  white-space: nowrap;
  flex-shrink: 0;
}

.customer360-field-value {
  text-align: right;
  word-break: break-word;
}

/* ============================================================
   Mandatory-document compliance warning (PAN / Address Proof /
   Company Registration) — deliberately blinks rather than sitting
   as a static colored banner, so it can't be scrolled past unnoticed.
   ============================================================ */
.customer360-missing-docs-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #f5c2c7;
  background: #f8d7da;
  color: #b02a37;
  font-size: 13px;
  font-weight: 600;
  animation: customer360-blink 1.2s ease-in-out infinite;
}

@keyframes customer360-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}