/* =========================================================
   USHS Unified Dark Glass Portal Theme
   Applied to Customer, CSR, and Admin portals.
   Goal: match the dark navy / cyan dashboard design and remove white card holders.
   ========================================================= */

:root {
  --ushs-bg-1: #070333;
  --ushs-bg-2: #071c35;
  --ushs-bg-3: #093149;
  --ushs-panel: rgba(21, 36, 83, 0.72);
  --ushs-panel-strong: rgba(24, 46, 82, 0.86);
  --ushs-panel-soft: rgba(255, 255, 255, 0.055);
  --ushs-border: rgba(143, 190, 231, 0.16);
  --ushs-border-strong: rgba(80, 198, 244, 0.36);
  --ushs-text: #f7fbff;
  --ushs-muted: #aab8d6;
  --ushs-cyan: #4fc3f7;
  --ushs-blue: #1677ff;
  --ushs-green: #2ecc71;
  --ushs-yellow: #facc15;
  --ushs-red: #ef4444;
  --ushs-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

html,
body {
  min-height: 100%;
  background: radial-gradient(circle at 18% 0%, rgba(50, 79, 156, 0.18) 0%, transparent 34%),
              linear-gradient(135deg, var(--ushs-bg-1) 0%, #080443 42%, var(--ushs-bg-3) 100%) fixed !important;
  color: var(--ushs-text) !important;
  font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.05));
  z-index: -1;
}

/* Main containers */
.main-content,
.content,
.content-wrapper,
.container,
.container-fluid,
.dashboard-container,
.page-wrapper,
.customer-main,
.csr-main {
  color: var(--ushs-text) !important;
}

/* Sidebars and bottom navigation */
.sidebar,
.main-sidebar,
.side-nav,
.admin-sidebar,
.csr-sidebar,
.navbar,
.topbar,
.bottom-nav {
  background: rgba(8, 4, 54, 0.92) !important;
  border-color: rgba(143, 190, 231, 0.10) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: 12px 0 34px rgba(0, 0, 0, 0.22) !important;
}

.sidebar-header,
.brand-area,
.logo-area {
  border-color: rgba(255,255,255,.10) !important;
}

.sidebar-menu a,
.nav-link,
.bottom-nav a,
.bottom-nav .nav-item,
.navbar a {
  color: rgba(231, 242, 255, 0.82) !important;
}

.sidebar-menu a:hover,
.sidebar-menu a.active,
.nav-link:hover,
.nav-link.active,
.bottom-nav a:hover,
.bottom-nav a.active,
.bottom-nav .active {
  background: rgba(255,255,255,0.09) !important;
  color: #ffffff !important;
  border-color: var(--ushs-cyan) !important;
}

/* Remove all white cards/holders and make them glass */
.card,
.card-body,
.card-header,
.page-header,
.form-section,
.section-card,
.info-card,
.stats-card,
.stat-card,
.metric-card,
.request-card,
.ticket-card,
.profile-card,
.notification-card,
.message-card,
.chat-card,
.chat-container,
.chat-body,
.table-container,
.login-card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.preview-card,
.upload-area,
.white-box,
.bg-white,
.bg-light,
.small-box,
.alert-light,
.dataTables_wrapper,
.service-card,
.appliance-card,
.brand-card,
.city-card,
.customer-card,
.staff-card,
.report-card,
.dashboard-card {
  background: linear-gradient(180deg, rgba(27, 45, 91, 0.82), rgba(20, 39, 72, 0.78)) !important;
  color: var(--ushs-text) !important;
  border: 1px solid var(--ushs-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--ushs-shadow) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

.card-header,
.page-header,
.section-title,
.modal-header,
.modal-footer {
  border-color: rgba(143, 190, 231, 0.14) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6,
p, span, label, small, strong,
.table, .table th, .table td,
.card *, .form-section *, .modal-content *, .page-header *, .list-group-item * {
  color: inherit !important;
}

.text-muted,
.form-text,
.help-text,
.subtitle,
.card-subtitle,
small.text-muted,
p.text-muted {
  color: var(--ushs-muted) !important;
}

.text-primary,
.fa.text-primary,
.fas.text-primary,
.far.text-primary,
.fab.text-primary {
  color: var(--ushs-cyan) !important;
}

hr {
  border-color: rgba(143, 190, 231, 0.14) !important;
  opacity: 1 !important;
}

/* Forms: dark inputs instead of white boxes */
input,
select,
textarea,
.form-control,
.form-select,
.input-group-text,
.select2-container--bootstrap-5 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: rgba(8, 17, 44, 0.60) !important;
  color: #ffffff !important;
  border: 1px solid rgba(118, 190, 240, 0.34) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
  background: rgba(10, 25, 58, 0.82) !important;
  color: #ffffff !important;
  border-color: var(--ushs-cyan) !important;
  box-shadow: 0 0 0 .2rem rgba(79,195,247,.18) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: rgba(226, 238, 255, 0.58) !important;
  opacity: 1 !important;
}

select option,
select optgroup,
.form-select option,
.form-select optgroup,
option {
  background-color: #0b1738 !important;
  color: #ffffff !important;
}

.form-check-input {
  background-color: rgba(8, 17, 44, 0.70) !important;
  border: 1px solid rgba(118, 190, 240, 0.50) !important;
}

.form-check-input:checked {
  background-color: var(--ushs-cyan) !important;
  border-color: var(--ushs-cyan) !important;
}

/* Tables */
.table,
table {
  background: transparent !important;
  color: var(--ushs-text) !important;
}

thead,
.table thead,
.table thead th,
th {
  background: rgba(8, 17, 44, 0.55) !important;
  color: #dff4ff !important;
  border-color: rgba(143, 190, 231, 0.15) !important;
}

tbody,
tr,
td,
.table td,
.table th {
  border-color: rgba(143, 190, 231, 0.11) !important;
}

.table-hover tbody tr:hover,
tbody tr:hover {
  background: rgba(79, 195, 247, 0.08) !important;
}

/* Buttons */
.btn,
button,
.btn-primary,
.btn-login {
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.btn-primary,
.btn-info,
.btn-login,
button[type="submit"] {
  background: linear-gradient(135deg, #1677ff, #15b9d6) !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(21, 185, 214, 0.20) !important;
}

.btn-success {
  background: linear-gradient(135deg, #16a34a, #2ecc71) !important;
  border: 0 !important;
  color: #fff !important;
}

.btn-warning {
  background: linear-gradient(135deg, #f59e0b, #facc15) !important;
  border: 0 !important;
  color: #111827 !important;
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border: 0 !important;
  color: #fff !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info {
  background: rgba(79,195,247,.08) !important;
  border-color: rgba(79,195,247,.38) !important;
  color: #dff4ff !important;
}

.btn:hover,
button:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

/* Badges / alerts */
.badge,
.status-badge {
  border-radius: 999px !important;
  letter-spacing: .02em;
}

.alert {
  color: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

.alert-success { background: rgba(22, 163, 74, .20) !important; }
.alert-danger { background: rgba(220, 38, 38, .22) !important; }
.alert-warning { background: rgba(245, 158, 11, .22) !important; color: #fff6d6 !important; }
.alert-info { background: rgba(79, 195, 247, .18) !important; }

/* Request form helpers and upload blocks */
.upload-area,
.file-upload-area,
.drag-area {
  border-style: dashed !important;
  border-color: rgba(79,195,247,.38) !important;
}

.upload-area:hover,
.file-upload-area:hover,
.drag-area:hover {
  border-color: var(--ushs-cyan) !important;
  background: rgba(79,195,247,.10) !important;
}

/* Icons and accent blocks */
.icon-box,
.stat-icon,
.card-icon,
.service-icon {
  background: rgba(79,195,247,.14) !important;
  color: var(--ushs-cyan) !important;
  border: 1px solid rgba(79,195,247,.18) !important;
}

/* Links */
a {
  color: #9bddff !important;
}

a:hover {
  color: #ffffff !important;
}

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: rgba(8, 4, 54, 0.65); }
*::-webkit-scrollbar-thumb { background: rgba(79, 195, 247, 0.38); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(79, 195, 247, 0.58); }

/* Customer mobile footer needs to stay clean */
@media (max-width: 768px) {
  .main-content,
  .content,
  .container,
  .container-fluid {
    padding-bottom: 82px !important;
  }
  .bottom-nav {
    border-top: 1px solid rgba(143, 190, 231, 0.14) !important;
    box-shadow: 0 -16px 34px rgba(0,0,0,.24) !important;
  }
}

/* =========================================================
   CONTRAST + CUSTOMER/CSR POLISH PATCH
   Fixes: unreadable light/dark text, CSR slide menu, customer header,
   service tiles, table text, icon/action buttons, and password eye buttons.
   ========================================================= */

/* Customer/CSR mobile headers: match the Admin dashboard glass header */
.app-header,
.mobile-header,
.portal-header,
.customer-header,
.csr-header {
  background: linear-gradient(135deg, rgba(20, 24, 84, 0.96), rgba(14, 46, 76, 0.94)) !important;
  color: #f7fbff !important;
  border-bottom: 1px solid rgba(143, 190, 231, 0.16) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

.app-header *,
.mobile-header *,
.portal-header *,
.customer-header *,
.csr-header * {
  color: #f7fbff !important;
}

.app-header .notification-badge,
.mobile-header .notification-badge,
.badge-count {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.back-btn,
.notification-btn,
.menu-btn,
.app-header button,
.mobile-header button {
  color: #f7fbff !important;
}

/* Customer dashboard top banner should blend with the Admin portal theme */
.cover-banner,
.hero-banner,
.home-banner,
.customer-banner {
  background: radial-gradient(circle at 15% 0%, rgba(79, 195, 247, 0.22), transparent 30%),
              linear-gradient(135deg, rgba(19, 30, 92, 0.96), rgba(10, 56, 83, 0.94)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(143, 190, 231, 0.16) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28) !important;
}

.cover-banner *,
.hero-banner *,
.home-banner *,
.customer-banner * {
  color: inherit !important;
}

/* Replace remaining white customer tiles with glass cards */
.service-item,
.quick-action,
.quick-action-card,
.action-card,
.dashboard-action,
.customer-action,
.appliance-item,
.service-box,
.recent-item,
.notification-dropdown,
.notification-item,
.empty-state,
.profile-section-card,
.password-card,
.info-box,
.kpi-card,
.summary-card {
  background: linear-gradient(180deg, rgba(27, 45, 91, 0.86), rgba(20, 39, 72, 0.80)) !important;
  color: #f7fbff !important;
  border: 1px solid rgba(143, 190, 231, 0.16) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

.service-item *,
.quick-action *,
.quick-action-card *,
.action-card *,
.dashboard-action *,
.customer-action *,
.appliance-item *,
.service-box *,
.recent-item *,
.notification-dropdown *,
.notification-item *,
.empty-state *,
.profile-section-card *,
.password-card *,
.info-box *,
.kpi-card *,
.summary-card * {
  color: inherit !important;
}

.service-item:hover,
.quick-action:hover,
.action-card:hover,
.dashboard-action:hover,
.customer-action:hover,
.appliance-item:hover {
  background: linear-gradient(135deg, rgba(24, 75, 132, 0.94), rgba(18, 128, 154, 0.86)) !important;
  border-color: rgba(79, 195, 247, 0.45) !important;
}

.service-icon,
.quick-action i,
.action-card i,
.dashboard-action i,
.customer-action i,
.appliance-item i,
.fa-eye,
.fa-eye-slash,
.bi-eye,
.bi-eye-slash {
  color: #4fc3f7 !important;
}

/* Light buttons/fields must keep dark text; dark/glass surfaces must keep light text */
.request-btn,
.btn-light,
.btn-outline-light,
.bg-white,
.bg-light,
.table-light,
.card.bg-white,
.card.bg-light,
.dropdown-item.bg-light,
.list-group-item.bg-light {
  background: #f8fafc !important;
  color: #111827 !important;
  border-color: #dbeafe !important;
}

.request-btn *,
.btn-light *,
.btn-outline-light *,
.bg-white *,
.bg-light *,
.table-light *,
.card.bg-white *,
.card.bg-light *,
.dropdown-item.bg-light *,
.list-group-item.bg-light * {
  color: #111827 !important;
}

/* Dark cards: force text to readable light colors */
.card:not(.bg-white):not(.bg-light),
.card:not(.bg-white):not(.bg-light) *,
.form-section,
.form-section *,
.table-container,
.table-container *,
.filter-section,
.filter-section *,
.stats-card,
.stats-card *,
.stat-card,
.stat-card *,
.request-card,
.request-card *,
.technician-card,
.technician-card * {
  color: #f7fbff !important;
}

.text-muted,
small,
.small,
.form-text,
.stat-label,
.notification-message,
.notification-time,
.subtitle,
.help-text {
  color: #aab8d6 !important;
}

/* Inputs in dark pages */
.card:not(.bg-white):not(.bg-light) input,
.card:not(.bg-white):not(.bg-light) select,
.card:not(.bg-white):not(.bg-light) textarea,
.form-section input,
.form-section select,
.form-section textarea,
.filter-section input,
.filter-section select,
.filter-section textarea,
.input-group input,
.input-group select,
.input-group textarea {
  background: rgba(8, 17, 44, 0.68) !important;
  color: #ffffff !important;
  border-color: rgba(118, 190, 240, 0.38) !important;
}

/* Keep select dropdown options readable when the browser opens the list */
select option,
select optgroup,
.form-select option,
.form-select optgroup,
option {
  background: #ffffff !important;
  color: #111827 !important;
}

/* CSR slide-out menu: dark glass, not white; readable items */
#sidebarMenu,
.sidebar-menu#sidebarMenu,
body > .sidebar-menu {
  background: linear-gradient(180deg, rgba(11, 9, 62, 0.98), rgba(12, 39, 65, 0.98)) !important;
  color: #f7fbff !important;
  border-left: 1px solid rgba(143, 190, 231, 0.18) !important;
  box-shadow: -20px 0 55px rgba(0, 0, 0, 0.36) !important;
}

#sidebarMenu *,
.sidebar-menu#sidebarMenu * {
  color: #f7fbff !important;
}

#sidebarMenu .sidebar-header,
.sidebar-menu#sidebarMenu .sidebar-header {
  border-bottom: 1px solid rgba(143, 190, 231, 0.16) !important;
}

#sidebarMenu .sidebar-item,
.sidebar-menu#sidebarMenu .sidebar-item {
  color: rgba(231, 242, 255, 0.86) !important;
  background: transparent !important;
}

#sidebarMenu .sidebar-item i,
.sidebar-menu#sidebarMenu .sidebar-item i {
  color: #4fc3f7 !important;
}

#sidebarMenu .sidebar-item:hover,
.sidebar-menu#sidebarMenu .sidebar-item:hover,
#sidebarMenu .sidebar-item.active,
.sidebar-menu#sidebarMenu .sidebar-item.active {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #ffffff !important;
}

#sidebarMenu .btn-close,
.sidebar-menu#sidebarMenu .btn-close,
.btn-close {
  filter: invert(1) grayscale(1) brightness(1.8) !important;
  opacity: .92 !important;
}

.sidebar-overlay {
  background: rgba(0, 0, 0, 0.62) !important;
  backdrop-filter: blur(2px) !important;
}

/* Dropdowns and menus */
.dropdown-menu {
  background: linear-gradient(180deg, rgba(18, 32, 72, 0.98), rgba(13, 31, 58, 0.98)) !important;
  color: #f7fbff !important;
  border: 1px solid rgba(143, 190, 231, 0.18) !important;
}

.dropdown-menu *,
.dropdown-item {
  color: #f7fbff !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(79, 195, 247, 0.12) !important;
  color: #ffffff !important;
}

.dropdown-divider {
  border-color: rgba(143, 190, 231, 0.14) !important;
}

/* Tables: fix dark row text and keep headers clear */
.table,
table,
.table tbody,
table tbody,
.table tbody tr,
table tbody tr,
.table tbody td,
table tbody td {
  background: transparent !important;
  color: #f7fbff !important;
}

.table thead th,
table thead th {
  background: rgba(8, 17, 44, 0.70) !important;
  color: #dff4ff !important;
}

/* DataTables controls */
.dataTables_wrapper,
.dataTables_wrapper *,
.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  color: #f7fbff !important;
}

.pagination .page-link {
  background: rgba(8, 17, 44, 0.70) !important;
  color: #dff4ff !important;
  border-color: rgba(143, 190, 231, 0.20) !important;
}

.pagination .active .page-link,
.page-item.active .page-link {
  background: linear-gradient(135deg, #1677ff, #15b9d6) !important;
  color: #ffffff !important;
}

/* Status badges must keep correct contrast */
.badge.bg-warning,
.badge.badge-warning,
.status-badge.bg-warning,
.status-badge.badge-warning,
.badge[style*="yellow"] {
  color: #111827 !important;
}

.badge.bg-success,
.badge.bg-danger,
.badge.bg-primary,
.badge.bg-info,
.badge.bg-secondary,
.status-badge.bg-success,
.status-badge.bg-danger,
.status-badge.bg-primary,
.status-badge.bg-info,
.status-badge.bg-secondary {
  color: #ffffff !important;
}

/* Icon-only action buttons such as eye/view/status buttons */
.btn i,
button i,
.action-btn i,
.view-btn i,
.toggle-password i,
.password-toggle i,
.input-group-text i {
  color: inherit !important;
}

.btn-outline-info,
.btn-outline-primary,
.btn-outline-secondary,
.btn-icon,
.view-btn,
.toggle-password,
.password-toggle,
button[title*="View"],
button[title*="view"],
a[title*="View"],
a[title*="view"] {
  background: rgba(79, 195, 247, 0.10) !important;
  color: #dff4ff !important;
  border: 1px solid rgba(79, 195, 247, 0.38) !important;
}

.btn-outline-info:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-icon:hover,
.view-btn:hover,
.toggle-password:hover,
.password-toggle:hover {
  background: rgba(79, 195, 247, 0.22) !important;
  color: #ffffff !important;
}

/* Password eye inside profile/login pages */
.password-wrapper,
.input-group {
  position: relative;
}

.password-wrapper .toggle-password,
.password-toggle,
.input-group .toggle-password {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
}

/* Login/register cards: keep readable, dark, and clean */
.login-card,
.login-body,
.auth-card,
.register-card {
  background: linear-gradient(180deg, rgba(27, 45, 91, 0.88), rgba(20, 39, 72, 0.82)) !important;
  color: #f7fbff !important;
}

.login-card *,
.login-body *,
.auth-card *,
.register-card * {
  color: inherit !important;
}

.login-card input,
.login-body input,
.auth-card input,
.register-card input,
.login-card select,
.login-body select,
.auth-card select,
.register-card select {
  background: rgba(8, 17, 44, 0.68) !important;
  color: #ffffff !important;
  border-color: rgba(118, 190, 240, 0.38) !important;
}

/* Keep disabled/readonly fields readable */
input:disabled,
select:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled,
input[readonly],
textarea[readonly] {
  background: rgba(148, 163, 184, 0.16) !important;
  color: #dbeafe !important;
  opacity: 1 !important;
}

/* Calendar icons requested as white */
.fa-calendar,
.fa-calendar-alt,
.fa-calendar-days,
.far.fa-calendar,
.far.fa-calendar-alt,
.fas.fa-calendar,
.fas.fa-calendar-alt,
.fas.fa-calendar-days {
    color: #ffffff !important;
}