/*!
 * CPWL Component Overrides for Outager Application
 * Specific styling for sidebar, navigation, and other UI components
 * Based on CPWL Look, Tone and Feel Guidelines V4
 */

/* ===== SIDEBAR STYLING ===== */

/* Sidebar Background and Branding */
.sidebar {
  background-color: var(--cpwl-dark-blue) !important;
  background-image: linear-gradient(180deg, var(--cpwl-dark-blue) 0%, var(--cpwl-dark-blue-dark) 100%) !important;
}

.sidebar .sidebar-brand {
  background-color: rgba(0, 35, 75, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar .sidebar-brand .sidebar-brand-text {
  color: #fff !important;
  font-weight: 700;
  font-family: var(--cpwl-font-family);
}

.sidebar .sidebar-brand .sidebar-brand-icon i {
  color: var(--cpwl-mid-blue) !important;
}

/* Sidebar Navigation Links */
.sidebar .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: var(--cpwl-font-family);
}

.sidebar .nav-item .nav-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .nav-item.active .nav-link {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.35rem;
  margin: 0 0.5rem;
}

.sidebar .nav-item .nav-link i {
  color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar .nav-item.active .nav-link i,
.sidebar .nav-item .nav-link:hover i {
  color: #fff !important;
}

/* Remove light blue background from specific menu items */
.sidebar .nav-item.active .nav-link[href*="dashboard"] {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0;
}

.sidebar .nav-item.active .nav-link[href*="turnout_contacts"] {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0;
}

/* Ensure Dashboard and Turnout Contacts icons maintain normal color */
.sidebar .nav-item.active .nav-link[href*="dashboard"] i,
.sidebar .nav-item.active .nav-link[href*="turnout_contacts"] i {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Remove light blue background from Network Status and Archive Status by targeting specific icons */
.sidebar .nav-item.active:has(.fa-network-wired) .nav-link,
.sidebar .nav-item.active:has(.fa-archive) .nav-link {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0;
}

/* Fallback selectors for browsers that don't support :has() */
.sidebar .nav-item.active .nav-link .fa-network-wired,
.sidebar .nav-item.active .nav-link .fa-archive {
  color: rgba(255, 255, 255, 0.8) !important;
}

.sidebar .nav-item.active .nav-link:has(.fa-network-wired),
.sidebar .nav-item.active .nav-link:has(.fa-archive) {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0;
}

/* Alternative approach - target by containing specific icon classes */
.sidebar li.nav-item.active:has(i.fa-network-wired) .nav-link,
.sidebar li.nav-item.active:has(i.fa-archive) .nav-link {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0;
}

/* Ensure Network Status and Archive Status icons maintain normal color */
.sidebar .nav-item.active .nav-link .fa-network-wired,
.sidebar .nav-item.active .nav-link .fa-archive {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Hover states for all menu items */
.sidebar .nav-item.active .nav-link[href*="dashboard"]:hover,
.sidebar .nav-item.active .nav-link[href*="turnout_contacts"]:hover,
.sidebar .nav-item.active:has(.fa-network-wired) .nav-link:hover,
.sidebar .nav-item.active:has(.fa-archive) .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

.sidebar .nav-item.active .nav-link[href*="dashboard"]:hover i,
.sidebar .nav-item.active .nav-link[href*="turnout_contacts"]:hover i,
.sidebar .nav-item.active:has(.fa-network-wired) .nav-link:hover i,
.sidebar .nav-item.active:has(.fa-archive) .nav-link:hover i {
  color: #fff !important;
}

/* Sidebar Headings */
.sidebar .sidebar-heading {
  color: rgba(255, 255, 255, 0.4) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65rem;
}

/* Sidebar Dividers */
.sidebar hr.sidebar-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Sidebar Collapse Items */
.sidebar .nav-item .collapse .collapse-inner {
  background-color: #fff !important;
  border: 1px solid var(--cpwl-mid-blue) !important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-header {
  color: var(--cpwl-dark-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 700;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item {
  color: var(--cpwl-charcoal-grey) !important;
  font-family: var(--cpwl-font-family);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover {
  background-color: rgba(0, 164, 224, 0.1) !important;
  color: var(--cpwl-dark-blue) !important;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
  color: var(--cpwl-mid-blue) !important;
  font-weight: 600;
  background-color: rgba(0, 164, 224, 0.1) !important;
}

/* Sidebar Toggle Button */
.sidebar #sidebarToggle {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.sidebar #sidebarToggle:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

/* ===== TOPBAR STYLING ===== */

.topbar {
  background-color: #fff !important;
  border-bottom: 1px solid var(--cpwl-mid-blue) !important;
}

.topbar .navbar-nav .nav-item .nav-link {
  color: var(--cpwl-charcoal-grey) !important;
}

.topbar .navbar-nav .nav-item .nav-link:hover {
  color: var(--cpwl-dark-blue) !important;
}

/* User Dropdown */
.topbar .dropdown-menu {
  border: 1px solid var(--cpwl-mid-blue) !important;
}

.topbar .dropdown-item {
  color: var(--cpwl-charcoal-grey) !important;
  font-family: var(--cpwl-font-family);
}

.topbar .dropdown-item:hover {
  background-color: rgba(0, 164, 224, 0.1) !important;
  color: var(--cpwl-dark-blue) !important;
}

.topbar .dropdown-divider {
  border-top: 1px solid var(--cpwl-mid-blue) !important;
}

/* ===== CARD STYLING ===== */

.card {
  border: 1px solid var(--cpwl-charcoal-grey-light) !important;
  box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 35, 75, 0.1) !important;
}

.card-header {
  background-color: var(--cpwl-dark-blue) !important;
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  border-bottom: 1px solid var(--cpwl-mid-blue) !important;
}

.card-header h1, .card-header h2, .card-header h3, 
.card-header h4, .card-header h5, .card-header h6 {
  color: #fff !important;
  margin-bottom: 0;
}

.card-body {
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey);
}

.card-footer {
  background-color: rgba(0, 164, 224, 0.05) !important;
  border-top: 1px solid rgba(0, 164, 224, 0.2) !important;
}

/* ===== STATUS BADGES ===== */

/* Network Status Badges */
.badge-success {
  background-color: var(--cpwl-spring-green) !important;
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-danger {
  background-color: var(--cpwl-candy-apple) !important;
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-secondary {
  background-color: var(--cpwl-charcoal-grey) !important;
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.badge-warning {
  background-color: var(--cpwl-sunflower-yellow) !important;
  color: var(--cpwl-dark-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  border: 1px solid rgba(0, 35, 75, 0.2);
}

.badge-info {
  background-color: var(--cpwl-mid-blue) !important;
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
  font-size: 0.7rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.025rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Enhanced sidebar status badges */
.sidebar .badge {
  margin-left: 0.5rem;
  margin-top: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.sidebar .badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
}

/* Specific styling for TNZ and Archive status indicators */
.sidebar .nav-item .nav-link .badge-danger {
  background: linear-gradient(135deg, var(--cpwl-candy-apple) 0%, #d21e34 100%) !important;
}

.sidebar .nav-item .nav-link .badge-secondary {
  background: linear-gradient(135deg, var(--cpwl-charcoal-grey) 0%, #4a4b4d 100%) !important;
}

.sidebar .nav-item .nav-link .badge-success {
  background: linear-gradient(135deg, var(--cpwl-spring-green) 0%, #2d8f3f 100%) !important;
}

.sidebar .nav-item .nav-link .badge-info {
  background: linear-gradient(135deg, var(--cpwl-mid-blue) 0%, var(--cpwl-dark-blue) 100%) !important;
}

/* ===== TABLE STYLING ===== */

.table {
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey);
}

.table thead th {
  background-color: var(--cpwl-dark-blue) !important;
  color: #fff !important;
  border-color: var(--cpwl-mid-blue) !important;
  font-weight: 600;
}

.table tbody tr:hover {
  background-color: rgba(0, 164, 224, 0.05) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 164, 224, 0.02) !important;
}

.table-bordered {
  border: 1px solid var(--cpwl-charcoal-grey-light) !important;
}

.table-bordered td,
.table-bordered th {
  border: 1px solid var(--cpwl-charcoal-grey-light) !important;
}

/* ===== FORM STYLING ===== */

.form-control {
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey);
  border: 2px solid var(--cpwl-charcoal-grey-light) !important;
  background-color: #fff !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.3s ease !important;
}

.form-control:focus {
  border-color: var(--cpwl-mid-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 164, 224, 0.25) !important;
  background-color: #fff !important;
}

.form-control:hover {
  border-color: var(--cpwl-mid-blue) !important;
}

/* Enhanced form control styling for better visibility */
.form-control::placeholder {
  color: rgba(88, 89, 91, 0.6) !important;
  font-style: italic;
}

.form-select {
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey);
  border: 2px solid var(--cpwl-charcoal-grey-light) !important;
  background-color: #fff !important;
  border-radius: 0.375rem !important;
  padding: 0.75rem 1rem !important;
  transition: all 0.3s ease !important;
}

.form-select:focus {
  border-color: var(--cpwl-mid-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 164, 224, 0.25) !important;
  background-color: #fff !important;
}

.form-select:hover {
  border-color: var(--cpwl-mid-blue) !important;
}

/* Checkbox and radio styling */
.form-check-input {
  border: 2px solid var(--cpwl-charcoal-grey-light) !important;
  background-color: #fff !important;
}

.form-check-input:checked {
  background-color: var(--cpwl-mid-blue) !important;
  border-color: var(--cpwl-mid-blue) !important;
}

.form-check-input:focus {
  border-color: var(--cpwl-mid-blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 164, 224, 0.25) !important;
}

.form-label,
label {
  color: var(--cpwl-dark-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
}

.form-text {
  color: var(--cpwl-charcoal-grey) !important;
  font-family: var(--cpwl-font-family);
}

/* ===== MODAL STYLING ===== */

.modal-header {
  background-color: var(--cpwl-dark-blue) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--cpwl-mid-blue) !important;
}

.modal-header .modal-title {
  color: #fff !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
}

.modal-header .close {
  color: #fff !important;
  opacity: 0.8;
}

.modal-header .close:hover {
  color: #fff !important;
  opacity: 1;
}

.modal-body {
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey);
}

.modal-footer {
  border-top: 1px solid rgba(0, 164, 224, 0.2) !important;
}

/* ===== PAGINATION STYLING ===== */

.page-link {
  color: var(--cpwl-mid-blue) !important;
  font-family: var(--cpwl-font-family);
  border: 1px solid rgba(0, 164, 224, 0.3) !important;
}

.page-link:hover {
  color: var(--cpwl-dark-blue) !important;
  background-color: rgba(0, 164, 224, 0.1) !important;
  border-color: var(--cpwl-mid-blue) !important;
}

.page-item.active .page-link {
  background-color: var(--cpwl-mid-blue) !important;
  border-color: var(--cpwl-mid-blue) !important;
  color: #fff !important;
}

/* ===== BREADCRUMB STYLING ===== */

.breadcrumb {
  background-color: rgba(0, 164, 224, 0.05) !important;
  font-family: var(--cpwl-font-family);
}

.breadcrumb-item {
  color: var(--cpwl-charcoal-grey) !important;
}

.breadcrumb-item.active {
  color: var(--cpwl-dark-blue) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--cpwl-mid-blue) !important;
}

/* ===== PROGRESS BAR STYLING ===== */

.progress {
  background-color: rgba(0, 164, 224, 0.1) !important;
}

.progress-bar {
  background-color: var(--cpwl-mid-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 600;
}

/* ===== DROPDOWN STYLING ===== */

.dropdown-menu {
  border: 1px solid var(--cpwl-mid-blue) !important;
  font-family: var(--cpwl-font-family);
}

.dropdown-item {
  color: var(--cpwl-charcoal-grey) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(0, 164, 224, 0.1) !important;
  color: var(--cpwl-dark-blue) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--cpwl-mid-blue) !important;
  color: #fff !important;
}

.dropdown-header {
  color: var(--cpwl-dark-blue) !important;
  font-family: var(--cpwl-font-family);
  font-weight: 700;
}

.dropdown-divider {
  border-top: 1px solid rgba(0, 164, 224, 0.3) !important;
}

/* ===== FOOTER STYLING ===== */

.sticky-footer {
  background-color: #fff !important;
  border-top: 1px solid rgba(0, 164, 224, 0.2) !important;
  font-family: var(--cpwl-font-family);
  color: var(--cpwl-charcoal-grey) !important;
}

/* ===== BORDER ACCENT UTILITIES ===== */

.border-left-primary {
  border-left: 0.25rem solid var(--cpwl-dark-blue) !important;
}

.border-left-info {
  border-left: 0.25rem solid var(--cpwl-mid-blue) !important;
}

.border-left-success {
  border-left: 0.25rem solid var(--cpwl-spring-green) !important;
}

.border-left-warning {
  border-left: 0.25rem solid var(--cpwl-sunflower-yellow) !important;
}

.border-left-danger {
  border-left: 0.25rem solid var(--cpwl-candy-apple) !important;
}

.border-left-secondary {
  border-left: 0.25rem solid var(--cpwl-charcoal-grey) !important;
}

/* Bottom border variants */
.border-bottom-primary {
  border-bottom: 0.25rem solid var(--cpwl-dark-blue) !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid var(--cpwl-mid-blue) !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid var(--cpwl-spring-green) !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid var(--cpwl-sunflower-yellow) !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid var(--cpwl-candy-apple) !important;
}

.border-bottom-secondary {
  border-bottom: 0.25rem solid var(--cpwl-charcoal-grey) !important;
}

/* ===== ICON CIRCLE STYLING ===== */

.icon-circle {
  background-color: var(--cpwl-mid-blue) !important;
  color: #fff !important;
}

.icon-circle.bg-primary {
  background-color: var(--cpwl-dark-blue) !important;
}

.icon-circle.bg-success {
  background-color: var(--cpwl-spring-green) !important;
}

.icon-circle.bg-warning {
  background-color: var(--cpwl-sunflower-yellow) !important;
  color: var(--cpwl-dark-blue) !important;
}

.icon-circle.bg-danger {
  background-color: var(--cpwl-candy-apple) !important;
}

.icon-circle.bg-secondary {
  background-color: var(--cpwl-charcoal-grey) !important;
}

/* ===== SCROLL TO TOP BUTTON ===== */

.scroll-to-top {
  background: var(--cpwl-mid-blue) !important;
  color: #fff !important;
}

.scroll-to-top:hover {
  background: var(--cpwl-dark-blue) !important;
  color: #fff !important;
}

/* ===== CUSTOM CPWL UTILITIES ===== */

/* CPWL Brand Colors as Utilities */
.text-cpwl-dark-blue {
  color: var(--cpwl-dark-blue) !important;
}

.text-cpwl-mid-blue {
  color: var(--cpwl-mid-blue) !important;
}

.text-cpwl-charcoal {
  color: var(--cpwl-charcoal-grey) !important;
}

.bg-cpwl-dark-blue {
  background-color: var(--cpwl-dark-blue) !important;
}

.bg-cpwl-mid-blue {
  background-color: var(--cpwl-mid-blue) !important;
}

.bg-cpwl-charcoal {
  background-color: var(--cpwl-charcoal-grey) !important;
}

.border-cpwl-dark-blue {
  border-color: var(--cpwl-dark-blue) !important;
}

.border-cpwl-mid-blue {
  border-color: var(--cpwl-mid-blue) !important;
}

.border-cpwl-charcoal {
  border-color: var(--cpwl-charcoal-grey) !important;
}

/* CPWL Font Weight Utilities */
.font-weight-cpwl-light {
  font-weight: 300 !important;
}

.font-weight-cpwl-normal {
  font-weight: 400 !important;
}

.font-weight-cpwl-medium {
  font-weight: 500 !important;
}

.font-weight-cpwl-semibold {
  font-weight: 600 !important;
}

.font-weight-cpwl-bold {
  font-weight: 700 !important;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  .sidebar {
    background-image: linear-gradient(180deg, var(--cpwl-dark-blue) 0%, var(--cpwl-dark-blue-dark) 100%) !important;
  }
  
  .topbar {
    border-bottom: 2px solid var(--cpwl-mid-blue) !important;
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* Focus states for better keyboard navigation */
.btn:focus,
.form-control:focus,
.nav-link:focus {
  outline: 2px solid var(--cpwl-mid-blue) !important;
  outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .sidebar {
    border-right: 2px solid var(--cpwl-mid-blue) !important;
  }
  
  .card {
    border: 2px solid var(--cpwl-mid-blue) !important;
  }
  
  .table-bordered td,
  .table-bordered th {
    border: 2px solid var(--cpwl-mid-blue) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sidebar .nav-item .collapse {
    transition: none !important;
  }
  
  .btn,
  .nav-link,
  .dropdown-item {
    transition: none !important;
  }
}