body.web-to-lead {
  background: rgb(0, 0, 0, 0);
}

.company-logo {
  margin: 0 auto;
  max-width: 200px;
}

#form_submit {
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  letter-spacing: 1px;
  background-color: rgba(0, 0, 33, 0.8) !important;
  border-radius: 100px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 47px;
  padding-right: 47px;
  transition-duration: 0.9s;
  transition-timing-function: ease;
  transition-property: all;
  border-top-color: #32beed;
  border-right-color: #32beed;
  border-bottom-color: #32beed;
  border-left-color: #32beed;
  text-transform: uppercase;
  color: #ffffff !important;
  text-shadow: 0px 1px 0px rgba(0, 0, 35, 0.08);
}

.customers_login {
  background-color: #000023 !important;
  background: url("https://clienti.pizero.dev/assets/images/lounge5.webp")
    no-repeat;
  background-size: cover;
}

.customers footer {
  background: #000023 !important;
}

footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#form_submit:hover {
  background-image: linear-gradient(90deg, #4193ea, #17cfef);
  color: #ffffff;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-color: #4000e2;
  border-right-color: #4000e2;
  border-bottom-color: #4000e2;
  border-left-color: #4000e2;
  background-color: #32beed;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-property: all;
  box-shadow: 2px 2px 12px 2px rgba(50, 190, 237, 0.45);
  text-shadow: 1px 0px rgba(0, 0, 35, 0.08);
}

/*body.web-to-lead label  {
	color:#fff;
}*/

.cf-input {
  background-color: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
}

/* style.css */
.otp-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  width: 100%;
  background-color: #fafafa;
}

.otp-input {
  font-family: monospace;
  letter-spacing: 0.5rem;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0);
  margin: 0 10px;
  text-align: center;
  font-size: 36px;
  cursor: not-allowed;
  pointer-events: none;
  text-transform: uppercase;
}

.otp-input:focus {
  border: 0;
  outline: none;
  border-radius: 0 !important;
  margin: 0;
  text-transform: uppercase;
}

.otp-input:nth-child(1) {
  cursor: pointer;
  pointer-events: all;
}

#form_submit {
  width: 100%;
}

/* ============================================
   DARK THEME - Customer Portal
   Primary: #000023 | Accent: #32beed
   ============================================ */

/* ----------------------------------------
   Section 1: Base Styles
   ---------------------------------------- */

body.customers {
  background-color: #000023 !important;
  color: #ffffff !important;
}

body.customers a {
  color: #32beed;
}

body.customers a:hover,
body.customers a:focus {
  color: #5dd0f5;
  text-decoration: none;
}

body.customers h1,
body.customers h2,
body.customers h3,
body.customers h4,
body.customers h5,
body.customers h6 {
  color: #ffffff !important;
}

body.customers .section-heading,
body.customers .tw-text-neutral-700,
body.customers .tw-text-neutral-800,
body.customers .tw-text-neutral-900 {
  color: #ffffff !important;
}

/* Accent class for important text */
.text-accent,
.customer-name-accent {
  color: #32beed !important;
  font-weight: 600;
}

/* ----------------------------------------
   Section 2: Cards & Panels
   ---------------------------------------- */

body.customers .panel_s,
body.customers .panel {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(50, 190, 237, 0.1);
}

body.customers .panel-body {
  background-color: #000a33 !important;
  color: #ffffff;
  border-radius: 6px;
}

body.customers .panel-heading {
  background-color: #001040 !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff !important;
}

body.customers .panel-footer {
  background-color: #001040 !important;
  border-top: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff;
}

body.customers .panel-default > .panel-heading {
  background-color: #001040 !important;
  color: #ffffff !important;
}

/* Card hover effect */
body.customers .panel_s:hover {
  box-shadow: 0 6px 25px rgba(50, 190, 237, 0.15);
  border-color: #5dd0f5 !important;
}

/* ----------------------------------------
   Section 3: Navigation
   ---------------------------------------- */

body.customers .navbar-default .dropdown-menu {
  background-color: #000a33 !important;
  border: 1px solid #32beed;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.customers .navbar-default .dropdown-menu > li > a {
  color: #ffffff !important;
}

body.customers .navbar-default .dropdown-menu > li > a:hover,
body.customers .navbar-default .dropdown-menu > li > a:focus {
  background-color: #001040 !important;
  color: #32beed !important;
}

body.customers .navbar-default .dropdown-menu .divider {
  background-color: rgba(50, 190, 237, 0.3);
}

body.customers .navbar-default .navbar-nav > li > a {
  color: #ffffff !important;
}

body.customers .navbar-default .navbar-nav > li > a:hover,
body.customers .navbar-default .navbar-nav > li > a:focus {
  color: #32beed !important;
  background-color: rgba(50, 190, 237, 0.1) !important;
}

body.customers .navbar-default .navbar-nav > .active > a,
body.customers .navbar-default .navbar-nav > .active > a:hover,
body.customers .navbar-default .navbar-nav > .active > a:focus {
  background-color: rgba(50, 190, 237, 0.15) !important;
  color: #32beed !important;
}

/* Mobile nav */
body.customers .navbar-default .navbar-toggle .icon-bar {
  background-color: #32beed;
}

body.customers .navbar-default .navbar-collapse {
  border-color: rgba(50, 190, 237, 0.3);
  background-color: #000023;
}

/* Submenu */
body.customers .dropdown-submenu > .dropdown-menu {
  background-color: #000a33 !important;
  border: 1px solid #32beed;
}

/* ----------------------------------------
   Section 4: Tables
   ---------------------------------------- */

body.customers .table {
  background-color: transparent;
  color: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
}

/* Table header - consistent styling */
body.customers .table > thead > tr > th {
  background-color: rgba(0, 16, 64, 0.6) !important;
  color: #8fb8c8 !important;
  border: none !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.25) !important;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 12px 15px !important;
}

/* Remove all other borders from header */
body.customers .table > thead > tr > th:first-child {
  border-left: none !important;
}

body.customers .table > thead > tr > th:last-child {
  border-right: none !important;
}

body.customers .table > tbody > tr > td {
  border: none !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.12) !important;
  color: #ffffff;
  padding: 12px 15px !important;
  vertical-align: middle;
}

body.customers .table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

body.customers .table > tbody > tr:hover > td {
  background-color: rgba(50, 190, 237, 0.08) !important;
}

body.customers .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(0, 10, 51, 0.3);
}

body.customers .table-striped > tbody > tr:nth-of-type(even) {
  background-color: transparent;
}

/* Table bordered variant */
body.customers .table-bordered {
  border: 1px solid rgba(50, 190, 237, 0.2) !important;
}

body.customers .table-bordered > thead > tr > th,
body.customers .table-bordered > tbody > tr > td {
  border: 1px solid rgba(50, 190, 237, 0.15) !important;
}

/* DataTables */
body.customers .dataTables_wrapper {
  color: #ffffff;
}

body.customers .dataTables_wrapper .dataTables_length,
body.customers .dataTables_wrapper .dataTables_filter,
body.customers .dataTables_wrapper .dataTables_info,
body.customers .dataTables_wrapper .dataTables_paginate {
  color: #ffffff !important;
}

body.customers .dataTables_wrapper .dataTables_length select,
body.customers .dataTables_wrapper .dataTables_filter input {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
  border-radius: 4px;
}

body.customers .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #ffffff !important;
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
}

body.customers .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #001040 !important;
  color: #32beed !important;
  border-color: #32beed !important;
}

body.customers
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current {
  background: #32beed !important;
  color: #000023 !important;
  border-color: #32beed !important;
  font-weight: 600;
}

body.customers
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.disabled {
  color: #5a6a7a !important;
}

body.customers table.dataTable tbody tr.selected {
  background-color: rgba(50, 190, 237, 0.2) !important;
}

/* Table items (invoices, proposals) */
body.customers .table.items thead {
  background-color: rgba(0, 16, 64, 0.5) !important;
}

body.customers .table.items thead th {
  border-color: rgba(50, 190, 237, 0.2) !important;
  color: #a0c4d4 !important;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.customers .table.items > thead:first-child > tr:first-child > th {
  border-top-color: rgba(50, 190, 237, 0.2) !important;
}

/* ----------------------------------------
   Section 5: Forms
   ---------------------------------------- */

body.customers .form-control {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
  border-radius: 4px;
}

body.customers .form-control:focus {
  border-color: #32beed !important;
  box-shadow: 0 0 0 2px rgba(50, 190, 237, 0.2) !important;
}

body.customers .form-control::placeholder {
  color: #6a7a8a !important;
}

body.customers .form-control::-webkit-input-placeholder {
  color: #6a7a8a !important;
}

body.customers .form-control::-moz-placeholder {
  color: #6a7a8a !important;
}

body.customers label,
body.customers .control-label {
  color: #ffffff !important;
}

body.customers .help-block {
  color: #a0aec0;
}

body.customers .input-group-addon {
  background-color: #001040 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
}

/* Bootstrap Select */
body.customers .bootstrap-select > .dropdown-toggle {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
}

body.customers .bootstrap-select .dropdown-menu {
  background-color: #000a33 !important;
  border: 1px solid #32beed !important;
}

body.customers .bootstrap-select .dropdown-menu > li > a {
  color: #ffffff !important;
}

body.customers .bootstrap-select .dropdown-menu > li > a:hover,
body.customers .bootstrap-select .dropdown-menu > li.selected > a {
  background-color: #001040 !important;
  color: #32beed !important;
}

body.customers .bootstrap-select .dropdown-menu > li.active > a {
  background-color: #32beed !important;
  color: #000023 !important;
}

/* Checkbox and Radio */
body.customers .checkbox label,
body.customers .radio label {
  color: #ffffff;
}

/* ----------------------------------------
   Section 6: Buttons
   ---------------------------------------- */

body.customers .btn-default {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
}

body.customers .btn-default:hover,
body.customers .btn-default:focus {
  background-color: #001040 !important;
  border-color: #32beed !important;
  color: #32beed !important;
}

body.customers .btn-primary {
  background-color: #32beed !important;
  border-color: #32beed !important;
  color: #000023 !important;
  font-weight: 600;
}

body.customers .btn-primary:hover,
body.customers .btn-primary:focus {
  background-color: #5dd0f5 !important;
  border-color: #5dd0f5 !important;
}

body.customers .btn-success {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

body.customers .btn-success:hover,
body.customers .btn-success:focus {
  background-color: #059669 !important;
  border-color: #059669 !important;
}

body.customers .btn-info {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
}

body.customers .btn-info:hover,
body.customers .btn-info:focus {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
}

body.customers .btn-warning {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #000023 !important;
}

body.customers .btn-warning:hover,
body.customers .btn-warning:focus {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
}

body.customers .btn-danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
}

body.customers .btn-danger:hover,
body.customers .btn-danger:focus {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

body.customers .btn-secondary {
  background-color: #4b5563 !important;
  border-color: #4b5563 !important;
  color: #ffffff !important;
}

body.customers .btn-secondary:hover,
body.customers .btn-secondary:focus {
  background-color: #374151 !important;
  border-color: #374151 !important;
}

/* ----------------------------------------
   Section 7: Modals, Alerts, Components
   ---------------------------------------- */

/* Modals */
body.customers .modal-content {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  color: #ffffff;
}

body.customers .modal-header {
  background-color: #001040 !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff;
}

body.customers .modal-header .close {
  color: #ffffff !important;
  opacity: 0.8;
}

body.customers .modal-header .close:hover {
  color: #32beed !important;
  opacity: 1;
}

body.customers .modal-footer {
  background-color: #001040 !important;
  border-top: 1px solid rgba(50, 190, 237, 0.3) !important;
}

body.customers .modal-title {
  color: #ffffff !important;
}

/* Alerts */
body.customers .alert {
  border-radius: 6px;
}

body.customers .alert-info {
  background-color: rgba(14, 165, 233, 0.2) !important;
  border-color: #0ea5e9 !important;
  color: #7dd3fc !important;
}

body.customers .alert-success {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #6ee7b7 !important;
}

body.customers .alert-warning {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #fcd34d !important;
}

body.customers .alert-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* Badges and Labels */
body.customers .badge {
  background-color: #32beed;
  color: #000023;
}

body.customers .label-default {
  background-color: #4b5563;
}

/* Status Labels - Dark Theme Styling */
body.customers .label {
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid transparent;
}

/* Danger/Unpaid - Red */
body.customers .label-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

/* Success/Paid - Green */
body.customers .label-success {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Warning/Partial - Yellow/Orange */
body.customers .label-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
}

/* Info - Blue */
body.customers .label-info {
  background-color: rgba(14, 165, 233, 0.15) !important;
  color: #7dd3fc !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
}

/* Primary - Cyan */
body.customers .label-primary {
  background-color: rgba(50, 190, 237, 0.15) !important;
  color: #7dd3fc !important;
  border-color: rgba(50, 190, 237, 0.4) !important;
}

/* Default - Gray */
body.customers .label-default {
  background-color: rgba(75, 85, 99, 0.3) !important;
  color: #d1d5db !important;
  border-color: rgba(75, 85, 99, 0.5) !important;
}

/* Dropzone */
body.customers form.dropzone {
  background-color: #000a33 !important;
  border: 2px dashed #32beed !important;
}

body.customers .dropzone .dz-message {
  color: #32beed !important;
}

/* jQuery Comments */
body.customers .jquery-comments {
  background-color: transparent !important;
}

body.customers .jquery-comments .textarea-wrapper .textarea {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
}

body.customers .jquery-comments ul.navigation {
  border-bottom-color: rgba(50, 190, 237, 0.3);
}

body.customers .jquery-comments ul.navigation li {
  color: #ffffff;
}

body.customers .jquery-comments ul.main li.comment .name {
  color: #32beed !important;
}

body.customers .jquery-comments ul.main li.comment .content {
  color: #ffffff;
}

body.customers .jquery-comments ul.main li.comment .wrapper {
  background-color: transparent;
}

/* Well */
body.customers .well {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff;
}

/* Breadcrumb */
body.customers .breadcrumb {
  background-color: #000a33;
  border: 1px solid rgba(50, 190, 237, 0.2);
}

body.customers .breadcrumb > li + li:before {
  color: #6a7a8a;
}

body.customers .breadcrumb > .active {
  color: #a0aec0;
}

/* Progress bars */
body.customers .progress {
  background-color: #001040;
}

/* Tabs */
body.customers .nav-tabs {
  border-bottom-color: rgba(50, 190, 237, 0.3);
}

body.customers .nav-tabs > li > a {
  color: #ffffff;
}

body.customers .nav-tabs > li > a:hover {
  background-color: rgba(50, 190, 237, 0.1);
  border-color: transparent;
}

body.customers .nav-tabs > li.active > a,
body.customers .nav-tabs > li.active > a:hover,
body.customers .nav-tabs > li.active > a:focus {
  background-color: #000a33 !important;
  border-color: #32beed #32beed transparent !important;
  color: #32beed !important;
}

body.customers .tab-content {
  background-color: #000a33;
  border: 1px solid rgba(50, 190, 237, 0.3);
  border-top: none;
  padding: 15px;
}

/* ----------------------------------------
   Section 8: Specific View Components
   ---------------------------------------- */

/* Footer */
body.customers footer {
  background-color: #000023 !important;
  border-top: 1px solid rgba(50, 190, 237, 0.2) !important;
  color: #a0aec0;
}

body.customers footer a {
  color: #32beed;
}

/* Invoice/Estimate HTML views */
/* NOTE: .preview-sticky-header styling moved to Section 33 - Sticky Header Styling */

body.customers .invoice-quick-info {
  color: #ffffff;
}

body.customers .invoice-quick-info h5 {
  color: #a0aec0;
}

/* Ticket styling */
body.customers .ticket-info {
  background-color: #000a33;
  border: 1px solid rgba(50, 190, 237, 0.3);
  color: #ffffff;
}

body.customers .ticket-info p {
  color: #a0aec0;
}

body.customers .client-reply .panel-body {
  background-color: rgba(50, 190, 237, 0.15) !important;
  color: #ffffff !important;
  border-left: 3px solid #32beed;
}

/* Project overview */
body.customers .project-info-bg {
  background-color: #001040 !important;
  border-color: rgba(50, 190, 237, 0.3) !important;
  color: #ffffff !important;
}

body.customers .project-overview-progress-bar {
  background-color: #001040;
}

body.customers .project-percent {
  color: #32beed;
}

/* Team members */
body.customers .team-members .media {
  border-bottom-color: rgba(50, 190, 237, 0.2);
}

/* Activity feed */
body.customers .activity-feed .feed-item {
  border-left-color: #32beed;
}

body.customers .activity-feed .feed-item:after {
  background: #000a33;
  border-color: #32beed;
}

body.customers .activity-feed .feed-item .date {
  color: #a0aec0;
}

body.customers .activity-feed .feed-item .text {
  color: #ffffff;
}

/* GDPR */
body.customers .gdpr-right {
  background-color: #000a33 !important;
  border-color: rgba(50, 190, 237, 0.3) !important;
}

body.customers .gdpr-right .gdpr-right-heading {
  color: #ffffff;
}

body.customers .gdpr-purpose {
  background-color: #001040;
  border-color: rgba(50, 190, 237, 0.3);
}

body.customers .gdpr-purpose .gdpr-purpose-heading {
  color: #32beed;
}

/* Knowledge base */
body.customers .kb-search-jumbotron {
  background-color: #000a33 !important;
}

/* List status (tickets overview) */
body.customers .list-status a {
  border-color: rgba(50, 190, 237, 0.3);
  background-color: #000a33;
}

body.customers .list-status a.active {
  background-color: #001040;
  border-color: #32beed;
}

body.customers .list-status h3 {
  color: #32beed;
}

/* Files container */
body.customers .files-container {
  color: #ffffff;
}

body.customers .mime > a {
  color: #ffffff !important;
}

/* Task styling */
body.customers .tasks-phases .panel-body {
  background-color: #001040 !important;
}

body.customers .tasks-phases ._task_wrapper {
  background-color: #000a33 !important;
  border-color: rgba(50, 190, 237, 0.3) !important;
}

body.customers ._task_wrapper.overdue-task {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
}

/* Kanban */
body.customers .kan-ban-col {
  background-color: #000a33;
  border: 1px solid rgba(50, 190, 237, 0.3);
  border-radius: 6px;
}

/* Signature pad */
body.customers .signature-pad--body {
  background-color: #ffffff;
  border-color: #32beed;
}

/* Calendar */
body.customers #calendar {
  background-color: #000a33;
  border: 1px solid rgba(50, 190, 237, 0.3);
  border-radius: 6px;
  padding: 10px;
}

body.customers .fc-day-header {
  color: #32beed;
}

body.customers .fc-day {
  background-color: transparent;
}

body.customers .fc-today {
  background-color: rgba(50, 190, 237, 0.1) !important;
}

/* Submenu styling */
body.customers .submenu li a {
  color: #ffffff !important;
}

body.customers .submenu li a:hover {
  color: #32beed !important;
}

/* Announcement */
body.customers .announcement {
  color: #ffffff;
}

body.customers .announcement small {
  color: #a0aec0;
}

/* Text utilities override */
body.customers .text-muted {
  color: #a0aec0 !important;
}

body.customers .text-dark {
  color: #ffffff !important;
}

/* Popover */
body.customers .popover {
  background-color: #000a33;
  border: 1px solid #32beed;
}

body.customers .popover-title {
  background-color: #001040;
  border-bottom-color: rgba(50, 190, 237, 0.3);
  color: #ffffff;
}

body.customers .popover-content {
  color: #ffffff;
}

body.customers .popover.bottom > .arrow:after {
  border-bottom-color: #000a33;
}

body.customers .popover.top > .arrow:after {
  border-top-color: #000a33;
}

/* Tooltip */
body.customers .tooltip-inner {
  background-color: #001040;
  border: 1px solid #32beed;
}

/* HR */
body.customers hr {
  border-top-color: rgba(50, 190, 237, 0.2);
}

/* Border utilities */
body.customers .border-right {
  border-right-color: rgba(50, 190, 237, 0.2) !important;
}

/* Background white override */
body.customers .bgwhite {
  background-color: #000a33 !important;
  border-color: rgba(50, 190, 237, 0.3) !important;
}

/* Scrollbar styling */
body.customers ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.customers ::-webkit-scrollbar-track {
  background: #000023;
}

body.customers ::-webkit-scrollbar-thumb {
  background: #32beed;
  border-radius: 4px;
}

body.customers ::-webkit-scrollbar-thumb:hover {
  background: #5dd0f5;
}

/* ----------------------------------------
   Section 9: Products/Shop Cards
   ---------------------------------------- */

/* Product cards */
body.customers .product-card,
body.customers .card,
body.customers [class*="product"] .card,
body.customers .product-item,
body.customers .shop-item {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px;
  color: #ffffff !important;
}

/* Generic card styling for any white cards */
body.customers .card {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  color: #ffffff !important;
}

body.customers .card-body,
body.customers .card-content {
  background-color: #000a33 !important;
  color: #ffffff !important;
}

body.customers .card-header {
  background-color: #001040 !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff !important;
}

body.customers .card-footer {
  background-color: #001040 !important;
  border-top: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff !important;
}

/* Product card text */
body.customers .product-card h1,
body.customers .product-card h2,
body.customers .product-card h3,
body.customers .product-card h4,
body.customers .product-card h5,
body.customers .product-card p,
body.customers .product-card span,
body.customers .card h1,
body.customers .card h2,
body.customers .card h3,
body.customers .card h4,
body.customers .card h5,
body.customers .card p,
body.customers .card span {
  color: #ffffff !important;
}

/* Price styling */
body.customers .product-price,
body.customers .price,
body.customers [class*="price"] {
  color: #32beed !important;
  font-weight: 600;
}

/* IVA/Tax text */
body.customers .text-success,
body.customers .text-green,
body.customers [style*="color: green"],
body.customers [style*="color:green"],
body.customers [style*="color: rgb(0, 128, 0)"] {
  color: #6ee7b7 !important;
}

/* Product category badges/labels */
body.customers .product-category,
body.customers .category-badge {
  background-color: rgba(75, 85, 99, 0.5) !important;
  color: #d1d5db !important;
  border: 1px solid rgba(75, 85, 99, 0.7) !important;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
}

/* Fix green buttons with poor contrast */
body.customers .btn-success {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
}

body.customers .btn-success:hover,
body.customers .btn-success:focus {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

/* Alternative: Make add to cart buttons use primary cyan style */
body.customers .add-to-cart,
body.customers [class*="add-cart"],
body.customers [class*="carrello"] {
  background-color: #32beed !important;
  border-color: #32beed !important;
  color: #000023 !important;
  font-weight: 600;
}

body.customers .add-to-cart:hover,
body.customers [class*="add-cart"]:hover,
body.customers [class*="carrello"]:hover {
  background-color: #5dd0f5 !important;
  border-color: #5dd0f5 !important;
}

/* Thumbnail/image containers */
body.customers .product-image,
body.customers .product-thumbnail,
body.customers .card-img-top {
  border-radius: 6px 6px 0 0;
}

/* Product grid */
body.customers .products-grid,
body.customers .shop-grid {
  gap: 20px;
}

/* Dropdown/Select for categories */
body.customers select.form-control {
  background-color: #000a33 !important;
  color: #ffffff !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
}

body.customers select.form-control option {
  background-color: #000a33;
  color: #ffffff;
}

/* Any remaining white backgrounds */
body.customers [style*="background: white"],
body.customers [style*="background:white"],
body.customers [style*="background-color: white"],
body.customers [style*="background-color:white"],
body.customers [style*="background: #fff"],
body.customers [style*="background:#fff"],
body.customers [style*="background-color: #fff"],
body.customers [style*="background-color:#fff"],
body.customers [style*="background: rgb(255, 255, 255)"],
body.customers [style*="background-color: rgb(255, 255, 255)"] {
  background-color: #000a33 !important;
}

/* Fix text in elements with white/light backgrounds */
body.customers .bg-white,
body.customers .bg-light {
  background-color: #000a33 !important;
  color: #ffffff !important;
}

/* ----------------------------------------
   Section 10: Bootstrap Thumbnails (Products)
   ---------------------------------------- */

/* Product card using Bootstrap thumbnail */
body.customers .thumbnail {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  padding: 15px;
  color: #ffffff !important;
}

body.customers .thumbnail.shadow {
  box-shadow: 0 4px 20px rgba(50, 190, 237, 0.15) !important;
}

body.customers .thumbnail:hover {
  border-color: #5dd0f5 !important;
  box-shadow: 0 6px 25px rgba(50, 190, 237, 0.2) !important;
}

/* Product card text elements */
body.customers .thumbnail h1,
body.customers .thumbnail h2,
body.customers .thumbnail h3,
body.customers .thumbnail h4,
body.customers .thumbnail h5,
body.customers .thumbnail h6,
body.customers .thumbnail p,
body.customers .thumbnail span,
body.customers .thumbnail .title,
body.customers .thumbnail .description {
  color: #ffffff !important;
}

/* Product title - make it cyan accent */
body.customers .thumbnail .title h4,
body.customers .thumbnail .text-primary {
  color: #32beed !important;
}

/* Product description */
body.customers .thumbnail .description {
  color: #a0aec0 !important;
}

body.customers .thumbnail .description span {
  color: #a0aec0 !important;
}

/* Product price */
body.customers .thumbnail .rates h5,
body.customers .thumbnail .product-price {
  color: #32beed !important;
  font-weight: 600;
}

/* IVA/Tax text */
body.customers .thumbnail .total-tax,
body.customers .thumbnail .text-warning {
  color: #fcd34d !important;
}

/* Cycles text */
body.customers .thumbnail .product-cycles,
body.customers .thumbnail .text-danger:not(.btn) {
  color: #fca5a5 !important;
}

/* Category badge in product card */
body.customers .thumbnail .badge-info,
body.customers .thumbnail .badge {
  background-color: rgba(14, 165, 233, 0.2) !important;
  color: #7dd3fc !important;
  border: 1px solid rgba(14, 165, 233, 0.4);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Variations dropdown in product cards */
body.customers .thumbnail .variations .selectpicker,
body.customers .thumbnail .variations .bootstrap-select .dropdown-toggle {
  background-color: #001040 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
}

/* Add to cart button - fix green with cyan text */
body.customers .thumbnail .btn-success,
body.customers .thumbnail .add_cart,
body.customers .product-row .btn-success {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.customers .thumbnail .btn-success:hover,
body.customers .thumbnail .add_cart:hover,
body.customers .product-row .btn-success:hover {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

/* Out of stock button */
body.customers .thumbnail .btn-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

/* Product image */
body.customers .thumbnail img.img1 {
  border-radius: 6px;
  margin-bottom: 15px;
}

/* Checkout/Cart button */
body.customers a.btn-success[href*="place_order"],
body.customers .btn-success[href*="cart"],
body.customers .btn-success i.fa-shopping-cart {
  color: #ffffff !important;
}

/* ----------------------------------------
   Section 11: Additional UI Refinements
   ---------------------------------------- */

/* DataTables sorting icons */
body.customers table.dataTable thead .sorting:before,
body.customers table.dataTable thead .sorting:after,
body.customers table.dataTable thead .sorting_asc:before,
body.customers table.dataTable thead .sorting_asc:after,
body.customers table.dataTable thead .sorting_desc:before,
body.customers table.dataTable thead .sorting_desc:after {
  opacity: 0.4;
}

body.customers table.dataTable thead .sorting_asc:before,
body.customers table.dataTable thead .sorting_desc:after {
  opacity: 1;
  color: #32beed;
}

/* DataTables info and length select */
body.customers .dataTables_wrapper .dataTables_length label,
body.customers .dataTables_wrapper .dataTables_filter label {
  color: #8fb8c8 !important;
  font-weight: 400;
  font-size: 13px;
}

body.customers .dataTables_wrapper .dataTables_info {
  color: #6a8a9a !important;
  font-size: 13px;
}

/* Table links - better styling */
body.customers .table a {
  color: #32beed;
  font-weight: 500;
  transition: color 0.2s ease;
}

body.customers .table a:hover {
  color: #5dd0f5;
  text-decoration: none;
}

/* Page headings refinement */
body.customers #content h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
  margin-bottom: 20px;
  color: #ffffff !important;
}

body.customers .section-client-dashboard h3,
body.customers .section-client-dashboard h4 {
  color: #ffffff !important;
}

/* Subtle text for secondary content */
body.customers .text-secondary,
body.customers small,
body.customers .small {
  color: #8fb8c8 !important;
}

/* Form refinements */
body.customers .form-group {
  margin-bottom: 18px;
}

body.customers .form-control {
  height: 42px;
  padding: 10px 14px;
  font-size: 14px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

body.customers textarea.form-control {
  height: auto;
  min-height: 100px;
}

body.customers .form-control:disabled,
body.customers .form-control[readonly] {
  background-color: rgba(0, 10, 51, 0.7) !important;
  opacity: 0.7;
}

/* Button refinements */
body.customers .btn {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
}

body.customers .btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

body.customers .btn-lg {
  padding: 14px 24px;
  font-size: 16px;
}

/* Icon buttons */
body.customers .btn i {
  margin-right: 6px;
}

body.customers .btn i:only-child {
  margin-right: 0;
}

/* Link styling in content */
body.customers #content a:not(.btn):not(.nav-link) {
  transition: color 0.2s ease;
}

/* Input group refinements */
body.customers .input-group .form-control {
  border-radius: 4px 0 0 4px;
}

body.customers .input-group .input-group-btn .btn,
body.customers .input-group .input-group-addon {
  border-radius: 0 4px 4px 0;
}

/* Select2 / Bootstrap-select refinements */
body.customers .bootstrap-select .dropdown-toggle {
  height: 42px;
  padding: 10px 14px;
  border-radius: 4px !important;
}

body.customers .bootstrap-select .dropdown-toggle .filter-option {
  line-height: 20px;
}

/* Pagination refinements */
body.customers .pagination > li > a,
body.customers .pagination > li > span {
  background-color: #000a33;
  border-color: rgba(50, 190, 237, 0.3);
  color: #ffffff;
  padding: 8px 14px;
}

body.customers .pagination > li > a:hover {
  background-color: #001040;
  border-color: #32beed;
  color: #32beed;
}

body.customers .pagination > .active > a,
body.customers .pagination > .active > span {
  background-color: #32beed !important;
  border-color: #32beed !important;
  color: #000023 !important;
}

body.customers .pagination > .disabled > a,
body.customers .pagination > .disabled > span {
  background-color: #000a33;
  border-color: rgba(50, 190, 237, 0.2);
  color: #4a5a6a;
}

/* Card/Panel body spacing */
body.customers .panel-body {
  padding: 20px;
}

/* List group styling */
body.customers .list-group-item {
  background-color: #000a33;
  border-color: rgba(50, 190, 237, 0.2);
  color: #ffffff;
}

body.customers .list-group-item:hover {
  background-color: #001040;
}

body.customers .list-group-item.active {
  background-color: #32beed;
  border-color: #32beed;
  color: #000023;
}

/* Media object styling */
body.customers .media {
  padding: 15px 0;
  border-bottom: 1px solid rgba(50, 190, 237, 0.1);
}

body.customers .media:last-child {
  border-bottom: none;
}

body.customers .media-heading {
  color: #ffffff;
  font-weight: 500;
}

body.customers .media-body {
  color: #a0aec0;
}

/* Empty state styling */
body.customers .empty-state,
body.customers .no-data,
body.customers .dataTables_empty {
  color: #6a8a9a !important;
  font-style: italic;
  padding: 30px;
  text-align: center;
}

/* Loading states */
body.customers .loading,
body.customers .spinner {
  color: #32beed;
}

/* Tooltip arrow fix */
body.customers .tooltip.bottom .tooltip-arrow {
  border-bottom-color: #001040;
}

body.customers .tooltip.top .tooltip-arrow {
  border-top-color: #001040;
}

/* Focus visible states for accessibility */
body.customers .btn:focus-visible,
body.customers .form-control:focus-visible,
body.customers a:focus-visible {
  outline: 2px solid #32beed;
  outline-offset: 2px;
}

/* Smooth transitions for interactive elements */
body.customers .panel_s,
body.customers .thumbnail,
body.customers .btn,
body.customers .form-control,
body.customers .table tbody tr {
  transition: all 0.2s ease;
}

/* Better spacing for content sections */
body.customers #content {
  padding: 25px;
}

@media (max-width: 768px) {
  body.customers #content {
    padding: 15px;
  }
}

/* Status/State colors consistency */
body.customers .status-active,
body.customers .status-paid,
body.customers .status-completed {
  color: #6ee7b7 !important;
}

body.customers .status-pending,
body.customers .status-draft {
  color: #fcd34d !important;
}

body.customers .status-cancelled,
body.customers .status-unpaid,
body.customers .status-overdue {
  color: #fca5a5 !important;
}

/* Improve readability of dates and numbers */
body.customers .date,
body.customers .amount,
body.customers .number {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Better dropdown caret styling */
body.customers .caret {
  border-top-color: #8fb8c8;
}

body.customers .dropup .caret {
  border-bottom-color: #8fb8c8;
}

/* Icon color consistency */
body.customers .fa,
body.customers .fas,
body.customers .far,
body.customers .fab {
  color: inherit;
}

body.customers .panel-heading .fa,
body.customers .btn .fa {
  opacity: 0.9;
}

/* Divider styling */
body.customers .divider,
body.customers .separator {
  border-color: rgba(50, 190, 237, 0.15);
}

/* Better quote/blockquote styling */
body.customers blockquote {
  border-left-color: #32beed;
  background-color: rgba(0, 16, 64, 0.3);
  padding: 15px 20px;
  margin: 15px 0;
  color: #a0aec0;
}

/* Code blocks in dark theme */
body.customers code,
body.customers pre {
  background-color: #001040;
  color: #32beed;
  border-color: rgba(50, 190, 237, 0.3);
}

body.customers pre {
  padding: 15px;
  border-radius: 6px;
}

/* Selection styling */
body.customers ::selection {
  background-color: rgba(50, 190, 237, 0.3);
  color: #ffffff;
}

body.customers ::-moz-selection {
  background-color: rgba(50, 190, 237, 0.3);
  color: #ffffff;
}

/* ==========================================================================
   Section 12: Project Progress Widgets & Circular Progress
   ========================================================================== */

/* Progress bar widgets container */
body.customers .project-progress,
body.customers .project-progress-widget,
body.customers .progress-widget,
body.customers .widget-progress,
body.customers [class*="progress-widget"],
body.customers .project-overview-left .panel,
body.customers .project-overview-right .panel {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

/* Circular progress bars */
body.customers .circle-progress,
body.customers .CircularProgressbar,
body.customers .radial-progress,
body.customers .progress-circle,
body.customers [class*="circle-progress"],
body.customers .c-p {
  background-color: transparent !important;
}

/* Progress bar track (background) */
body.customers .CircularProgressbar-trail,
body.customers .progress-circle-bg {
  stroke: rgba(50, 190, 237, 0.2) !important;
}

/* Progress bar path (fill) */
body.customers .CircularProgressbar-path {
  stroke: #32beed !important;
}

/* Progress bar text */
body.customers .CircularProgressbar-text,
body.customers .progress-text,
body.customers .circle-progress-text {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Bootstrap progress bars */
body.customers .progress {
  background-color: rgba(50, 190, 237, 0.15) !important;
  border-radius: 4px !important;
  height: 8px;
  overflow: hidden;
}

body.customers .progress-bar {
  background-color: #32beed !important;
  box-shadow: none !important;
}

body.customers .progress-bar-success {
  background-color: #10b981 !important;
}

body.customers .progress-bar-warning {
  background-color: #f59e0b !important;
}

body.customers .progress-bar-danger {
  background-color: #ef4444 !important;
}

body.customers .progress-bar-info {
  background-color: #32beed !important;
}

/* Project statistics boxes */
body.customers .project-stat,
body.customers .stat-box,
body.customers .stats-box,
body.customers .project-info-box,
body.customers .info-box {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
}

/* Task progress counters */
body.customers .tasks-progress,
body.customers .task-progress-container,
body.customers .project-tasks-progress {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  padding: 15px !important;
}

/* Small progress indicators in project cards */
body.customers .project-card .progress,
body.customers .project-overview .progress {
  background-color: rgba(50, 190, 237, 0.1) !important;
  height: 6px !important;
}

/* Project member avatars container */
body.customers .project-members,
body.customers .member-avatars {
  background-color: transparent !important;
}

/* ==========================================================================
   Section 13: Proposal/Estimate Content Blocks
   ========================================================================== */

/* Terms and conditions blocks */
body.customers .tc-content,
body.customers .terms-content,
body.customers .terms-and-conditions,
body.customers [class*="terms-content"],
body.customers .contract-content {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 6px !important;
  color: #a0aec0 !important;
  padding: 20px !important;
}

/* Notes sections */
body.customers .notes-content,
body.customers .proposal-notes,
body.customers .estimate-notes,
body.customers .client-notes,
body.customers [class*="notes-section"] {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 6px !important;
  color: #a0aec0 !important;
  padding: 15px !important;
}

/* Well components (Bootstrap) */
body.customers .well {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.customers .well-sm {
  padding: 12px !important;
}

body.customers .well-lg {
  padding: 24px !important;
}

/* Jumbotron */
body.customers .jumbotron {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

/* Content boxes in proposals/estimates */
body.customers .proposal-content-box,
body.customers .estimate-content-box,
body.customers .content-box,
body.customers .info-content {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  padding: 20px !important;
}

/* Description/content areas */
body.customers .description-content,
body.customers .item-description,
body.customers [class*="description-box"] {
  background-color: rgba(0, 10, 51, 0.5) !important;
  border-left: 3px solid #32beed !important;
  padding: 10px 15px !important;
  color: #a0aec0 !important;
}

/* Invoice/Proposal detail sections */
body.customers .invoice-details,
body.customers .proposal-details,
body.customers .estimate-details,
body.customers .document-details {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.25) !important;
  border-radius: 6px !important;
  padding: 15px !important;
}

/* Summary boxes */
body.customers .summary-box,
body.customers .total-box,
body.customers .invoice-total-section,
body.customers .proposal-total-section {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  padding: 20px !important;
}

/* ==========================================================================
   Section 14: Status Labels Refinements
   ========================================================================== */

/* All labels base styling for dark theme */
body.customers .label {
  background-color: rgba(50, 190, 237, 0.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  text-shadow: none !important;
}

/* Default/primary label */
body.customers .label-default,
body.customers .label-primary {
  background-color: rgba(50, 190, 237, 0.2) !important;
  border-color: #32beed !important;
  color: #32beed !important;
}

/* Success label (Pagata, Attivo, Completato, In corso) */
body.customers .label-success {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}

/* Warning label (In attesa, Pending) */
body.customers .label-warning {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

/* Danger label (Non pagata, Scaduta, Annullato) */
body.customers .label-danger {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Info label */
body.customers .label-info {
  background-color: rgba(50, 190, 237, 0.2) !important;
  border-color: #32beed !important;
  color: #32beed !important;
}

/* Badge styling (similar to labels) */
body.customers .badge {
  background-color: rgba(50, 190, 237, 0.2) !important;
  color: #32beed !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 10px !important;
}

/* Status specific classes */
body.customers [class*="status-"],
body.customers .invoice-status,
body.customers .proposal-status,
body.customers .project-status,
body.customers .ticket-status,
body.customers .subscription-status {
  font-weight: 500 !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
}

/* "In corso" specific styling */
body.customers .label[class*="progress"],
body.customers .label[class*="active"],
body.customers .label[class*="ongoing"],
body.customers .status-in-progress,
body.customers .status-active {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}

/* ==========================================================================
   Section 15: Form Button States & Styling
   ========================================================================== */

/* Primary buttons (Save, Submit) */
body.customers .btn-primary {
  background-color: #32beed !important;
  border-color: #32beed !important;
  color: #000023 !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

body.customers .btn-primary:hover,
body.customers .btn-primary:focus {
  background-color: #2aa8d4 !important;
  border-color: #2aa8d4 !important;
  color: #000023 !important;
  box-shadow: 0 4px 12px rgba(50, 190, 237, 0.4) !important;
}

body.customers .btn-primary:active {
  background-color: #2599c2 !important;
  border-color: #2599c2 !important;
}

/* Disabled button state - FIX FOR FADED BUTTONS */
body.customers .btn:disabled,
body.customers .btn[disabled],
body.customers .btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background-color: #1a1a4a !important;
  border-color: #3a3a6a !important;
  color: #6b7280 !important;
}

body.customers .btn-primary:disabled,
body.customers .btn-primary[disabled],
body.customers .btn-primary.disabled {
  background-color: rgba(50, 190, 237, 0.3) !important;
  border-color: rgba(50, 190, 237, 0.3) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Success buttons */
body.customers .btn-success {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.customers .btn-success:hover,
body.customers .btn-success:focus {
  background-color: #0d9668 !important;
  border-color: #0d9668 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

/* Danger buttons */
body.customers .btn-danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.customers .btn-danger:hover,
body.customers .btn-danger:focus {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* Warning buttons */
body.customers .btn-warning {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #000023 !important;
  font-weight: 600 !important;
}

body.customers .btn-warning:hover,
body.customers .btn-warning:focus {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #000023 !important;
}

/* Info buttons */
body.customers .btn-info {
  background-color: #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

body.customers .btn-info:hover,
body.customers .btn-info:focus {
  background-color: #0284c7 !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
}

/* Default/Secondary buttons */
body.customers .btn-default,
body.customers .btn-secondary {
  background-color: transparent !important;
  border: 2px solid rgba(50, 190, 237, 0.5) !important;
  color: #32beed !important;
  font-weight: 500 !important;
}

body.customers .btn-default:hover,
body.customers .btn-default:focus,
body.customers .btn-secondary:hover,
body.customers .btn-secondary:focus {
  background-color: rgba(50, 190, 237, 0.1) !important;
  border-color: #32beed !important;
  color: #32beed !important;
}

/* Form submit buttons specific */
body.customers form .btn[type="submit"],
body.customers form button[type="submit"],
body.customers .form-submit-btn,
body.customers #form-submit,
body.customers .save-btn,
body.customers [name="save"],
body.customers button[name="save"] {
  background-color: #32beed !important;
  border-color: #32beed !important;
  color: #000023 !important;
  font-weight: 600 !important;
  padding: 10px 25px !important;
  min-width: 120px !important;
}

body.customers form .btn[type="submit"]:hover,
body.customers form button[type="submit"]:hover {
  background-color: #2aa8d4 !important;
  box-shadow: 0 4px 15px rgba(50, 190, 237, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Section 16: Ticket System Specific Styling
   ========================================================================== */

/* Ticket form container */
body.customers .ticket-form,
body.customers #ticketForm,
body.customers form[id*="ticket"],
body.customers .new-ticket-form {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  padding: 25px !important;
}

/* Ticket priority labels */
body.customers .ticket-priority-low {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}

body.customers .ticket-priority-medium {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

body.customers .ticket-priority-high {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

body.customers .ticket-priority-urgent {
  background-color: rgba(220, 38, 38, 0.3) !important;
  border-color: #dc2626 !important;
  color: #fca5a5 !important;
}

/* Ticket status labels */
body.customers .ticket-status-open {
  background-color: rgba(50, 190, 237, 0.2) !important;
  border-color: #32beed !important;
  color: #32beed !important;
}

body.customers .ticket-status-answered {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}

body.customers .ticket-status-closed {
  background-color: rgba(107, 114, 128, 0.2) !important;
  border-color: #6b7280 !important;
  color: #9ca3af !important;
}

/* Ticket replies */
body.customers .ticket-reply,
body.customers .ticket-message,
body.customers .reply-box {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.25) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 15px !important;
}

body.customers .ticket-reply.staff-reply,
body.customers .staff-message {
  border-left: 4px solid #32beed !important;
}

body.customers .ticket-reply.client-reply,
body.customers .client-message {
  border-left: 4px solid #10b981 !important;
}

/* ==========================================================================
   Section 17: Subscription Page Specific Styling
   ========================================================================== */

/* Subscription cards */
body.customers .subscription-card,
body.customers .subscription-item,
body.customers [class*="subscription-box"] {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

/* Subscription status labels */
body.customers .subscription-active,
body.customers .subscription-status-active {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid #10b981 !important;
  color: #10b981 !important;
}

body.customers .subscription-cancelled,
body.customers .subscription-status-cancelled {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid #ef4444 !important;
  color: #ef4444 !important;
}

body.customers .subscription-pending,
body.customers .subscription-status-pending {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid #f59e0b !important;
  color: #f59e0b !important;
}

/* ==========================================================================
   Section 18: Additional White Background Fixes
   ========================================================================== */

/* Generic white background overrides */
body.customers [style*="background: white"],
body.customers [style*="background-color: white"],
body.customers [style*="background:#fff"],
body.customers [style*="background: #fff"],
body.customers [style*="background-color:#fff"],
body.customers [style*="background-color: #fff"],
body.customers [style*="background:#ffffff"],
body.customers [style*="background: #ffffff"],
body.customers [style*="background-color:#ffffff"],
body.customers [style*="background-color: #ffffff"] {
  background-color: #000a33 !important;
}

/* Bootstrap background utilities override */
body.customers .bg-white {
  background-color: #000a33 !important;
}

body.customers .bg-light {
  background-color: rgba(0, 10, 51, 0.5) !important;
}

body.customers .bg-gray,
body.customers .bg-grey {
  background-color: #000a33 !important;
}

/* Tailwind background utilities override */
body.customers .tw-bg-white {
  background-color: #000a33 !important;
}

body.customers .tw-bg-gray-50,
body.customers .tw-bg-gray-100,
body.customers .tw-bg-gray-200 {
  background-color: rgba(0, 10, 51, 0.7) !important;
}

/* Common container patterns that might have white backgrounds */
body.customers .content-wrapper,
body.customers .main-content,
body.customers .page-content,
body.customers .content-area {
  background-color: #000023 !important;
}

body.customers .box,
body.customers .card-box,
body.customers .content-box,
body.customers .widget-box {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 6px !important;
}

/* List groups */
body.customers .list-group {
  background-color: transparent !important;
}

body.customers .list-group-item {
  background-color: #000a33 !important;
  border-color: rgba(50, 190, 237, 0.2) !important;
  color: #ffffff !important;
}

body.customers .list-group-item:hover {
  background-color: rgba(50, 190, 237, 0.1) !important;
}

body.customers .list-group-item.active {
  background-color: rgba(50, 190, 237, 0.2) !important;
  border-color: #32beed !important;
  color: #32beed !important;
}

/* Callouts/Alerts */
body.customers .callout,
body.customers .bs-callout {
  background-color: #000a33 !important;
  border-radius: 6px !important;
}

body.customers .callout-info,
body.customers .bs-callout-info {
  border-left: 4px solid #32beed !important;
}

body.customers .callout-warning,
body.customers .bs-callout-warning {
  border-left: 4px solid #f59e0b !important;
}

body.customers .callout-danger,
body.customers .bs-callout-danger {
  border-left: 4px solid #ef4444 !important;
}

body.customers .callout-success,
body.customers .bs-callout-success {
  border-left: 4px solid #10b981 !important;
}

/* Media objects */
body.customers .media {
  background-color: transparent !important;
}

body.customers .media-body {
  color: #ffffff !important;
}

/* Popovers */
body.customers .popover {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.4) !important;
}

body.customers .popover-title {
  background-color: rgba(50, 190, 237, 0.1) !important;
  border-bottom-color: rgba(50, 190, 237, 0.2) !important;
  color: #ffffff !important;
}

body.customers .popover-content {
  color: #a0aec0 !important;
}

body.customers .popover.top > .arrow::after,
body.customers .popover.bottom > .arrow::after,
body.customers .popover.left > .arrow::after,
body.customers .popover.right > .arrow::after {
  border-color: #000a33 !important;
}

/* Tooltip */
body.customers .tooltip-inner {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.4) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Section 19: Project Views Specific Fixes
   ========================================================================== */

/* Project overview containers */
body.customers .project-overview,
body.customers .project-view,
body.customers #project-overview {
  background-color: #000023 !important;
}

/* Project detail panels */
body.customers .project-overview .panel,
body.customers .project-details .panel,
body.customers .project-info .panel {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
}

/* Project tabs content */
body.customers .project-tabs .tab-content,
body.customers .project-tab-content {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.25) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 20px !important;
}

/* Task list in projects */
body.customers .project-tasks,
body.customers .task-list,
body.customers .tasks-container {
  background-color: transparent !important;
}

body.customers .task-item,
body.customers .task-row {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.2) !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
  padding: 12px !important;
}

body.customers .task-item:hover,
body.customers .task-row:hover {
  border-color: #32beed !important;
  background-color: rgba(50, 190, 237, 0.05) !important;
}

/* Milestones */
body.customers .milestone,
body.customers .milestone-item {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.25) !important;
  border-radius: 6px !important;
  padding: 15px !important;
}

/* Gantt chart (if applicable) */
body.customers .gantt-container,
body.customers .gantt-chart {
  background-color: #000a33 !important;
}

/* Discussion/Activity feed */
body.customers .activity-feed,
body.customers .discussion-feed,
body.customers .timeline {
  background-color: transparent !important;
}

body.customers .activity-item,
body.customers .discussion-item,
body.customers .timeline-item {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.2) !important;
  border-radius: 6px !important;
  margin-bottom: 10px !important;
  padding: 15px !important;
}

/* File attachments area */
body.customers .attachments,
body.customers .files-list,
body.customers .project-files {
  background-color: transparent !important;
}

body.customers .attachment-item,
body.customers .file-item {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.2) !important;
  border-radius: 6px !important;
  padding: 10px 15px !important;
}

/* ==========================================================================
   Section 20: Forms Deep Styling
   ========================================================================== */

/* All form controls */
body.customers input[type="text"],
body.customers input[type="email"],
body.customers input[type="password"],
body.customers input[type="number"],
body.customers input[type="tel"],
body.customers input[type="url"],
body.customers input[type="search"],
body.customers input[type="date"],
body.customers input[type="datetime-local"],
body.customers input[type="time"],
body.customers textarea,
body.customers select {
  background-color: #001040 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 10px 15px !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

body.customers input:focus,
body.customers textarea:focus,
body.customers select:focus {
  border-color: #32beed !important;
  box-shadow: 0 0 0 3px rgba(50, 190, 237, 0.15) !important;
  outline: none !important;
}

/* Placeholder text */
body.customers ::placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
}

body.customers ::-webkit-input-placeholder {
  color: #6b7280 !important;
}

body.customers ::-moz-placeholder {
  color: #6b7280 !important;
}

body.customers :-ms-input-placeholder {
  color: #6b7280 !important;
}

/* Form groups */
body.customers .form-group {
  margin-bottom: 20px !important;
}

/* Labels */
body.customers label,
body.customers .control-label {
  color: #ffffff !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

/* Required field indicator */
body.customers .required,
body.customers label .text-danger {
  color: #ef4444 !important;
}

/* Help text */
body.customers .help-block,
body.customers .form-text,
body.customers .text-muted {
  color: #6b7280 !important;
}

/* Input groups */
body.customers .input-group-addon {
  background-color: rgba(50, 190, 237, 0.1) !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #32beed !important;
}

/* Checkbox and Radio styling */
body.customers input[type="checkbox"],
body.customers input[type="radio"] {
  accent-color: #32beed !important;
}

body.customers .checkbox label,
body.customers .radio label {
  color: #ffffff !important;
}

/* File input */
body.customers input[type="file"] {
  background-color: #001040 !important;
  border: 2px dashed rgba(50, 190, 237, 0.3) !important;
  border-radius: 6px !important;
  padding: 20px !important;
  color: #ffffff !important;
}

body.customers input[type="file"]:hover {
  border-color: #32beed !important;
}

/* Date picker styling */
body.customers .datepicker,
body.customers .ui-datepicker {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.4) !important;
  border-radius: 8px !important;
}

body.customers .datepicker table,
body.customers .ui-datepicker table {
  background-color: transparent !important;
}

body.customers .datepicker td,
body.customers .datepicker th,
body.customers .ui-datepicker td,
body.customers .ui-datepicker th {
  background-color: transparent !important;
  color: #ffffff !important;
}

body.customers .datepicker td.active,
body.customers .datepicker td.selected,
body.customers .ui-datepicker td.ui-datepicker-current-day {
  background-color: #32beed !important;
  color: #000023 !important;
  border-radius: 4px !important;
}

body.customers .datepicker td:hover,
body.customers .ui-datepicker td:hover {
  background-color: rgba(50, 190, 237, 0.2) !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   Section 21: Final Cleanup & Edge Cases
   ========================================================================== */

/* Any remaining white or light elements */
body.customers [style*="background-color: rgb(255, 255, 255)"],
body.customers [style*="background-color:rgb(255, 255, 255)"],
body.customers [style*="background: rgb(255, 255, 255)"],
body.customers [style*="background:rgb(255, 255, 255)"] {
  background-color: #000a33 !important;
}

/* Light gray backgrounds */
body.customers [style*="background-color: #f"],
body.customers [style*="background-color:#f"],
body.customers [style*="background: #f"],
body.customers [style*="background:#f"] {
  background-color: #000a33 !important;
}

/* Ensure text visibility on all elements */
body.customers * {
  color: inherit;
}

/* Force white text on dark backgrounds */
body.customers .panel,
body.customers .card,
body.customers .well,
body.customers .thumbnail,
body.customers .modal-content,
body.customers .dropdown-menu,
body.customers .popover,
body.customers .tooltip-inner {
  color: #ffffff;
}

/* ==========================================================================
   GLOBAL DROPDOWN MENU - FIX ALL NESTED BORDERS
   ========================================================================== */

/* Reset ALL inner elements of dropdowns */
body.customers .dropdown-menu *,
body.customers .dropdown-menu li,
body.customers .dropdown-menu ul,
body.customers .dropdown-menu .inner {
  border: none !important;
  box-shadow: none !important;
}

/* Only the dropdown-menu itself gets a border */
body.customers .dropdown-menu {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  border-radius: 4px !important;
}

body.customers .dropdown-menu li {
  background-color: transparent !important;
}

body.customers .dropdown-menu li a {
  color: #ffffff !important;
  background-color: transparent !important;
  border: none !important;
}

body.customers .dropdown-menu li a:hover,
body.customers .dropdown-menu li.active a,
body.customers .dropdown-menu li.selected a {
  background-color: rgba(50, 190, 237, 0.2) !important;
  color: #32beed !important;
}

/* Ensure links are visible */
body.customers a {
  color: #32beed;
}

body.customers a:hover {
  color: #5bcef2;
}

/* Table text color enforcement */
body.customers table td,
body.customers table th {
  color: #ffffff !important;
}

body.customers table td a {
  color: #32beed !important;
}

/* Muted text should still be visible */
body.customers .text-muted,
body.customers .muted {
  color: #8fb8c8 !important;
}

/* Small text visibility */
body.customers small,
body.customers .small {
  color: #a0aec0 !important;
}

/* Strong/bold text */
body.customers strong,
body.customers b {
  color: #ffffff !important;
}

/* Print styles - ensure content prints properly */
@media print {
  body.customers {
    background-color: #ffffff !important;
    color: #000000 !important;
  }

  body.customers .panel,
  body.customers .card,
  body.customers .well,
  body.customers table {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #cccccc !important;
  }
}

/* ==========================================================================
   Section 22: Specific Perfex CRM Component Overrides
   ========================================================================== */

/* Project Progress Widgets - SPECIFIC FIXES */
/* These widgets use tw-bg-neutral-50 and tw-border-neutral-100 */
body.customers
  .tw-rounded-md.tw-border.tw-border-solid.tw-border-neutral-100.tw-bg-neutral-50,
body.customers div[class*="tw-bg-neutral-50"][class*="tw-border-neutral-100"],
body.customers .project-progress-bars .tw-rounded-md,
body.customers .project-progress-bars > div {
  background-color: #000a33 !important;
  border-color: rgba(50, 190, 237, 0.4) !important;
  color: #ffffff !important;
}

/* Override Tailwind neutral backgrounds specifically */
body.customers .tw-bg-neutral-50 {
  background-color: #000a33 !important;
}

body.customers .tw-bg-neutral-100 {
  background-color: rgba(0, 10, 51, 0.8) !important;
}

body.customers .tw-bg-white {
  background-color: #000a33 !important;
}

/* Override Tailwind neutral borders */
body.customers .tw-border-neutral-100 {
  border-color: rgba(50, 190, 237, 0.3) !important;
}

body.customers .tw-border-neutral-200 {
  border-color: rgba(50, 190, 237, 0.25) !important;
}

body.customers .tw-border-neutral-300 {
  border-color: rgba(50, 190, 237, 0.35) !important;
}

/* Override Tailwind neutral text colors */
body.customers .tw-text-neutral-500,
body.customers .tw-text-neutral-600,
body.customers .tw-text-neutral-700 {
  color: #ffffff !important;
}

body.customers .tw-font-neutral-500,
body.customers .tw-font-neutral-600 {
  color: #a0aec0 !important;
}

/* Project Info Text */
body.customers .project-info {
  color: #ffffff !important;
}

body.customers .project-info span {
  color: #32beed !important;
}

/* Project status cards (summary page) */
body.customers dl a.tw-border.tw-border-solid,
body.customers dl a[class*="tw-bg-neutral"],
body.customers dl a[class*="tw-bg-white"] {
  background-color: #000a33 !important;
  border-color: rgba(50, 190, 237, 0.3) !important;
  color: #ffffff !important;
}

body.customers dl a.tw-border:hover,
body.customers dl a[class*="tw-bg-neutral"]:hover {
  background-color: rgba(50, 190, 237, 0.1) !important;
  border-color: #32beed !important;
}

/* Status card content */
body.customers dl a dt,
body.customers dl a dd {
  color: inherit !important;
}

body.customers dl a dd .tw-text-primary-600 {
  color: #32beed !important;
}

/* Project description content */
body.customers .tc-content,
body.customers .project-description {
  background-color: transparent !important;
  color: #a0aec0 !important;
}

body.customers .tc-content p,
body.customers .project-description p {
  color: #a0aec0 !important;
}

/* Panel Footer (ticket form submit area) */
body.customers .panel-footer {
  background-color: rgba(0, 10, 51, 0.5) !important;
  border-top-color: rgba(50, 190, 237, 0.2) !important;
  padding: 15px 20px !important;
}

/* Submit button in panel footer */
body.customers .panel-footer .btn-primary,
body.customers .panel-footer button[type="submit"] {
  background-color: #32beed !important;
  border-color: #32beed !important;
  color: #000023 !important;
  font-weight: 600 !important;
  padding: 10px 30px !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

body.customers .panel-footer .btn-primary:hover,
body.customers .panel-footer button[type="submit"]:hover {
  background-color: #2aa8d4 !important;
  box-shadow: 0 4px 15px rgba(50, 190, 237, 0.5) !important;
}

/* Section Headings */
body.customers .section-heading {
  color: #ffffff !important;
}

/* Hover state for project status cards */
body.customers .hover\:tw-bg-neutral-100:hover {
  background-color: rgba(50, 190, 237, 0.1) !important;
}

/* ==========================================================================
   Section 23: Subscription Table Specific Fixes
   ========================================================================== */

/* Subscription status labels - ensuring "In corso" gets styled */
body.customers table td .label,
body.customers table td span.label,
body.customers .subscriptions-table .label,
body.customers [class*="subscription"] .label {
  padding: 4px 10px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
}

/* Status 1 = Active/In corso */
body.customers .label[class*="status-1"],
body.customers .label.subscription-status-1,
body.customers span.label[style*="background"] {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid #10b981 !important;
  color: #10b981 !important;
}

/* Status 2 = Cancelled */
body.customers .label[class*="status-2"],
body.customers .label.subscription-status-2 {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border: 1px solid #ef4444 !important;
  color: #ef4444 !important;
}

/* Status 3 = Pending */
body.customers .label[class*="status-3"],
body.customers .label.subscription-status-3 {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid #f59e0b !important;
  color: #f59e0b !important;
}

/* Override inline styles on labels */
body.customers .label[style*="background-color"],
body.customers span.label[style*="background"],
body.customers .label[style*="background:"] {
  background-color: rgba(50, 190, 237, 0.15) !important;
  border: 1px solid rgba(50, 190, 237, 0.4) !important;
}

/* Project status label with inline styles */
body.customers .project-status-1,
body.customers .project-status-2,
body.customers .project-status-3,
body.customers .project-status-4,
body.customers .project-status-5,
body.customers span[class*="project-status-"] {
  background-color: rgba(50, 190, 237, 0.15) !important;
  border: 1px solid rgba(50, 190, 237, 0.4) !important;
}

/* ==========================================================================
   Section 24: Proposal/Estimate View Specific Fixes
   ========================================================================== */

/* Check for proposal template parts */
body.customers .proposal-view,
body.customers .estimate-view,
body.customers #proposalhtml,
body.customers #estimatehtml {
  background-color: #000a33 !important;
  border-radius: 8px !important;
  padding: 20px !important;
}

/* Proposal/Estimate content areas */
body.customers .proposal-html-content,
body.customers .estimate-html-content,
body.customers [class*="proposal-content"],
body.customers [class*="estimate-content"] {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Proposal signature area */
body.customers .proposal-signature,
body.customers .signature-area,
body.customers .sign-area {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  padding: 20px !important;
}

/* Comment sections in proposals/estimates */
body.customers .proposal-comments,
body.customers .estimate-comments,
body.customers .comments-area {
  background-color: transparent !important;
}

/* ==========================================================================
   Section 25: Additional Form Input Fixes
   ========================================================================== */

/* Bootstrap-select dropdown button */
body.customers .bootstrap-select > .dropdown-toggle {
  background-color: #001040 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #ffffff !important;
}

body.customers .bootstrap-select > .dropdown-toggle:hover,
body.customers .bootstrap-select > .dropdown-toggle:focus {
  background-color: #001040 !important;
  border-color: #32beed !important;
}

body.customers .bootstrap-select > .dropdown-toggle .filter-option {
  color: #ffffff !important;
}

body.customers .bootstrap-select > .dropdown-toggle .caret {
  border-top-color: #32beed !important;
}

/* ==========================================================================
   BOOTSTRAP-SELECT DROPDOWN - FIX ALL NESTED BORDERS
   ========================================================================== */

/* Reset ALL borders inside bootstrap-select */
body.customers .bootstrap-select *,
body.customers .bootstrap-select .dropdown-menu *,
body.customers .bootstrap-select .dropdown-menu li,
body.customers .bootstrap-select .dropdown-menu ul,
body.customers .bootstrap-select .dropdown-menu .inner,
body.customers .bootstrap-select .dropdown-menu .dropdown-menu {
  border: none !important;
  box-shadow: none !important;
}

/* Only the main dropdown-menu gets ONE border */
body.customers .bootstrap-select .dropdown-menu,
body.customers .bootstrap-select > .dropdown-menu,
body.customers .bootstrap-select.open .dropdown-menu {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  border-radius: 4px !important;
  padding: 5px 0 !important;
}

/* Inner container - NO border */
body.customers .bootstrap-select .dropdown-menu .inner,
body.customers .bootstrap-select .dropdown-menu > .inner {
  background-color: transparent !important;
  border: none !important;
}

/* List items - NO border */
body.customers .bootstrap-select .dropdown-menu li,
body.customers .bootstrap-select .dropdown-menu > li,
body.customers .bootstrap-select .dropdown-menu ul > li {
  background-color: transparent !important;
  border: none !important;
}

/* Links in dropdown */
body.customers .bootstrap-select .dropdown-menu li a,
body.customers .bootstrap-select .dropdown-menu li > a {
  color: #ffffff !important;
  background-color: transparent !important;
  border: none !important;
  padding: 8px 15px !important;
}

body.customers .bootstrap-select .dropdown-menu li a:hover,
body.customers .bootstrap-select .dropdown-menu li.selected a,
body.customers .bootstrap-select .dropdown-menu li.active a {
  background-color: rgba(50, 190, 237, 0.2) !important;
  color: #32beed !important;
  border: none !important;
}

/* Divider in dropdown */
body.customers .bootstrap-select .dropdown-menu .divider {
  background-color: rgba(50, 190, 237, 0.2) !important;
  border: none !important;
  height: 1px !important;
  margin: 5px 0 !important;
}

/* Input group addon with button */
body.customers .input-group-btn .btn {
  background-color: rgba(50, 190, 237, 0.15) !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #32beed !important;
}

body.customers .input-group-btn .btn:hover {
  background-color: rgba(50, 190, 237, 0.25) !important;
  border-color: #32beed !important;
}

/* ==========================================================================
   Section 26: Team Members & Avatar Styling
   ========================================================================== */

/* Team member avatars ring */
body.customers .tw-ring-white {
  --tw-ring-color: #000a33 !important;
}

body.customers .team-members img,
body.customers .member-avatars img {
  border: 2px solid #000a33 !important;
}

body.customers .team-members img:hover,
body.customers .member-avatars img:hover {
  border-color: #32beed !important;
}

/* ==========================================================================
   Section 27: Bold/Medium Text in Dark Theme
   ========================================================================== */

body.customers .bold,
body.customers .font-medium,
body.customers .tw-font-medium,
body.customers .tw-font-semibold {
  color: #ffffff !important;
}

body.customers .text-dark {
  color: #ffffff !important;
}

body.customers .text-muted,
body.customers .tw-text-muted {
  color: #8fb8c8 !important;
}

/* ==========================================================================
   Section 28: HR/Divider Lines
   ========================================================================== */

body.customers hr {
  border-color: rgba(50, 190, 237, 0.15) !important;
  margin: 20px 0 !important;
}

/* ==========================================================================
   Section 29: Loading States
   ========================================================================== */

body.customers .btn[data-loading-text],
body.customers button[data-loading-text] {
  transition: all 0.2s ease !important;
}

body.customers .btn.loading,
body.customers .btn[disabled][data-loading] {
  opacity: 0.7 !important;
  cursor: wait !important;
}

/* ==========================================================================
   Section 30: Final Global Overrides
   ========================================================================== */

/* Ensure ALL elements with white/light backgrounds in customer area get overridden */
body.customers [class*="bg-white"],
body.customers [class*="bg-light"],
body.customers [class*="bg-neutral"],
body.customers [class*="tw-bg-white"],
body.customers [class*="tw-bg-neutral"] {
  background-color: #000a33 !important;
}

/* Override any remaining neutral borders */
body.customers [class*="border-neutral"],
body.customers [class*="tw-border-neutral"] {
  border-color: rgba(50, 190, 237, 0.3) !important;
}

/* Make sure all text is visible */
body.customers [class*="text-neutral"],
body.customers [class*="tw-text-neutral"] {
  color: #ffffff !important;
}

/* Primary color text should be cyan */
body.customers .tw-text-primary-600,
body.customers .tw-text-primary-500,
body.customers .text-primary {
  color: #32beed !important;
}

/* Success text color */
body.customers .text-success {
  color: #10b981 !important;
}

/* Danger text color */
body.customers .text-danger {
  color: #ef4444 !important;
}

/* Warning text color */
body.customers .text-warning {
  color: #f59e0b !important;
}

/* Info text color */
body.customers .text-info {
  color: #32beed !important;
}

/* ==========================================================================
   Section 31: Project Status Labels with Inline Styles Override
   ========================================================================== */

/* Project status labels have inline styles - need high specificity override */
body.customers span.label[class*="project-status-"],
body.customers .label.project-status-1,
body.customers .label.project-status-2,
body.customers .label.project-status-3,
body.customers .label.project-status-4,
body.customers .label.project-status-5 {
  background: rgba(50, 190, 237, 0.15) !important;
  background-color: rgba(50, 190, 237, 0.15) !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #32beed !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

/* Override any inline style attribute on labels */
body.customers .label[style] {
  background: rgba(50, 190, 237, 0.15) !important;
  background-color: rgba(50, 190, 237, 0.15) !important;
}

/* Ensure project status keeps its dynamic border color but has dark-friendly background */
body.customers span.label[style*="background"] {
  background: rgba(50, 190, 237, 0.1) !important;
  background-color: rgba(50, 190, 237, 0.1) !important;
}

/* ==========================================================================
   Section 32: Address and Organization Info
   ========================================================================== */

body.customers address {
  color: #a0aec0 !important;
}

body.customers .tw-text-normal {
  color: #a0aec0 !important;
}

/* Subscription/Invoice bill-to labels */
body.customers .subscription-html-bill-to,
body.customers .subscription-html-ship-to,
body.customers .invoice-html-bill-to {
  color: #ffffff !important;
}

/* ==========================================================================
   Section 33: Sticky Header Styling
   ========================================================================== */

/* Fix entire preview top wrapper area - must match body background (#000023) */
body.customers .preview-top-wrapper,
body.customers .preview-top-wrapper > *,
body.customers .preview-top-wrapper .row,
body.customers .preview-top-wrapper .top,
body.customers div.top,
body.customers .preview-sticky-header,
body.customers [data-sticky-class="preview-sticky-header"] {
  background-color: #000023 !important;
  background: #000023 !important;
}

/* Specifically target the sticky container and all children */
body.customers .preview-sticky-container,
body.customers .preview-sticky-container > *,
body.customers .preview-sticky-container > div,
body.customers .preview-sticky-container [class*="tw-flex"],
body.customers .preview-sticky-container [class*="tw-justify"],
body.customers .top .container,
body.customers .top .preview-sticky-container {
  background-color: #000023 !important;
  background: #000023 !important;
}

/* ==========================================================================
   Section 34: Action Buttons in Preview Views
   ========================================================================== */

body.customers .action-button {
  transition: all 0.2s ease !important;
}

body.customers .go-to-portal {
  background-color: transparent !important;
  border: 2px solid rgba(50, 190, 237, 0.5) !important;
  color: #32beed !important;
}

body.customers .go-to-portal:hover {
  background-color: rgba(50, 190, 237, 0.1) !important;
  border-color: #32beed !important;
}

/* ==========================================================================
   Section 35: Subscription/Invoice/Proposal Number and Info
   ========================================================================== */

body.customers .subscription-number,
body.customers .subscription-date,
body.customers .subscription-first-billing-date,
body.customers .subscription-project,
body.customers .invoice-number,
body.customers .invoice-date,
body.customers .proposal-number {
  color: #a0aec0 !important;
}

body.customers .subscription-number .tw-font-medium,
body.customers .subscription-date .tw-font-medium,
body.customers .invoice-number .tw-font-medium {
  color: #ffffff !important;
}

/* ==========================================================================
   Section 36: Table Amount & Summary
   ========================================================================== */

body.customers .subtotal,
body.customers .total,
body.customers .tax-area {
  color: #ffffff !important;
}

body.customers .tax-area .bold {
  color: #ffffff !important;
}

/* ==========================================================================
   Section 37: Notes and Terms Sections
   ========================================================================== */

body.customers .subscription-html-note,
body.customers .subscription-html-terms-and-conditions,
body.customers .invoice-html-note,
body.customers .invoice-html-terms,
body.customers .proposal-html-note,
body.customers .proposal-html-terms {
  background-color: transparent !important;
  color: #a0aec0 !important;
}

body.customers .subscription-html-note b,
body.customers .subscription-html-terms-and-conditions b,
body.customers .invoice-html-note b,
body.customers .invoice-html-terms b {
  color: #ffffff !important;
}

/* ==========================================================================
   Section 38: Child Invoices Table
   ========================================================================== */

body.customers .subscription-child-invoices table {
  background-color: transparent !important;
}

body.customers .subscription-child-invoices th,
body.customers .subscription-child-invoices td {
  border-color: rgba(50, 190, 237, 0.2) !important;
}

/* ==========================================================================
   Section 39: Logo Container
   ========================================================================== */

body.customers .subscription-html-logo,
body.customers .invoice-html-logo,
body.customers .proposal-html-logo {
  background-color: transparent !important;
}

body.customers .subscription-html-logo img,
body.customers .invoice-html-logo img,
body.customers .proposal-html-logo img {
  max-height: 80px !important;
}

/* ==========================================================================
   Section 40: Proposal/Subscription Name & Description
   ========================================================================== */

body.customers .subscription-html-name,
body.customers .proposal-html-name,
body.customers .invoice-html-name {
  color: #ffffff !important;
}

body.customers .proposal-html-description,
body.customers .subscription-html-description {
  color: #8fb8c8 !important;
}

/* ==========================================================================
   Section 41: Tab Fixes - Inactive Tab Visibility
   ========================================================================== */

/* Fix inactive tabs being white on white */
body.customers .nav-tabs > li > a {
  color: #8fb8c8 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
}

body.customers .nav-tabs > li > a:hover {
  color: #32beed !important;
  background-color: rgba(50, 190, 237, 0.1) !important;
  border-color: rgba(50, 190, 237, 0.3) rgba(50, 190, 237, 0.3) transparent !important;
}

body.customers .nav-tabs > li.active > a,
body.customers .nav-tabs > li.active > a:hover,
body.customers .nav-tabs > li.active > a:focus {
  color: #32beed !important;
  background-color: #000a33 !important;
  border: 1px solid #32beed !important;
  border-bottom-color: #000a33 !important;
}

/* Tab content panel */
body.customers .tab-content {
  background-color: #000a33 !important;
  border: 1px solid #32beed !important;
  border-top: none !important;
  padding: 20px !important;
  border-radius: 0 0 6px 6px !important;
}

/* ==========================================================================
   HORIZONTAL TABS - COMPLETE DARK THEME (MAXIMUM SPECIFICITY)
   ========================================================================== */

/* Remove ALL backgrounds from tabs container and children */
body.customers .horizontal-scrollable-tabs,
body.customers .horizontal-scrollable-tabs *,
body.customers div.horizontal-scrollable-tabs,
body.customers div.horizontal-scrollable-tabs.preview-tabs-top,
body.customers div.horizontal-scrollable-tabs.panel-full-width-tabs {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Only the main container gets styling */
body.customers .horizontal-scrollable-tabs {
  background-color: #000a33 !important;
  background: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 8px !important;
}

/* Inner containers - transparent */
body.customers .horizontal-scrollable-tabs .horizontal-tabs,
body.customers .horizontal-scrollable-tabs .nav-tabs,
body.customers .horizontal-scrollable-tabs .nav-tabs-horizontal,
body.customers .horizontal-scrollable-tabs ul,
body.customers .horizontal-scrollable-tabs ul.nav,
body.customers .horizontal-scrollable-tabs ul.nav-tabs {
  background-color: transparent !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.3) !important;
}

/* Tab items (li elements) - transparent */
body.customers .horizontal-scrollable-tabs .nav-tabs li,
body.customers .horizontal-scrollable-tabs .nav-tabs > li,
body.customers .horizontal-scrollable-tabs ul li,
body.customers .horizontal-scrollable-tabs li[role="presentation"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Tab links (a elements) - normal state */
body.customers .horizontal-scrollable-tabs .nav-tabs li a,
body.customers .horizontal-scrollable-tabs .nav-tabs > li > a,
body.customers .horizontal-scrollable-tabs li a[role="tab"],
body.customers .horizontal-scrollable-tabs a[data-group] {
  color: #8fb8c8 !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  margin: 0 !important;
}

/* Tab links - hover state */
body.customers .horizontal-scrollable-tabs .nav-tabs li a:hover,
body.customers .horizontal-scrollable-tabs .nav-tabs > li > a:hover,
body.customers .horizontal-scrollable-tabs li a[role="tab"]:hover {
  color: #32beed !important;
  background-color: rgba(50, 190, 237, 0.1) !important;
  background: rgba(50, 190, 237, 0.1) !important;
  border: none !important;
}

/* ACTIVE TAB - this is critical */
body.customers .horizontal-scrollable-tabs .nav-tabs li.active,
body.customers .horizontal-scrollable-tabs .nav-tabs > li.active,
body.customers .horizontal-scrollable-tabs li.active[role="presentation"] {
  background-color: transparent !important;
  background: transparent !important;
}

body.customers .horizontal-scrollable-tabs .nav-tabs li.active a,
body.customers .horizontal-scrollable-tabs .nav-tabs li.active > a,
body.customers .horizontal-scrollable-tabs .nav-tabs > li.active > a,
body.customers .horizontal-scrollable-tabs li.active a[role="tab"],
body.customers .horizontal-scrollable-tabs .nav-tabs li.active a:hover,
body.customers .horizontal-scrollable-tabs .nav-tabs li.active a:focus,
body.customers .horizontal-scrollable-tabs .nav-tabs > li.active > a:hover,
body.customers .horizontal-scrollable-tabs .nav-tabs > li.active > a:focus {
  color: #32beed !important;
  background-color: rgba(50, 190, 237, 0.15) !important;
  background: rgba(50, 190, 237, 0.15) !important;
  border: none !important;
  border-bottom: 2px solid #32beed !important;
}

/* Scroller arrows */
body.customers .horizontal-scrollable-tabs .scroller,
body.customers .horizontal-scrollable-tabs .scroller.arrow-left,
body.customers .horizontal-scrollable-tabs .scroller.arrow-right {
  background-color: #000a33 !important;
  background: #000a33 !important;
  color: #8fb8c8 !important;
}

body.customers .horizontal-scrollable-tabs .scroller:hover {
  color: #32beed !important;
}

/* Icons in tabs */
body.customers .horizontal-scrollable-tabs .menu-icon,
body.customers .horizontal-scrollable-tabs i,
body.customers .horizontal-scrollable-tabs svg {
  color: inherit !important;
}

/* Override Tailwind classes that might interfere */
body.customers .horizontal-scrollable-tabs.tw-bg-white,
body.customers .horizontal-scrollable-tabs[class*="tw-bg"],
body.customers .horizontal-scrollable-tabs[class*="tw-shadow"] {
  background-color: #000a33 !important;
  background: #000a33 !important;
  box-shadow: none !important;
}

/* ==========================================================================
   PANEL WITH TABS - REMOVE PANEL BORDER TO AVOID OVERLAP
   ========================================================================== */

/* Panel containing the tabs - NO BORDER on panel itself */
body.customers .panel_s:has(.horizontal-scrollable-tabs),
body.customers .panel_s:has(.project_tab_overview) {
  background-color: #000a33 !important;
  border: none !important;
  box-shadow: none !important;
}

body.customers .panel-body:has(.horizontal-scrollable-tabs) {
  background-color: #000a33 !important;
  padding: 0 !important;
  border: none !important;
}

/* The tabs become the top border element */
body.customers .horizontal-scrollable-tabs {
  border: 2px solid rgba(50, 190, 237, 0.4) !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 8px 8px 0 0 !important;
  margin: 0 !important;
}

/* Content area below tabs - continuation of border */
body.customers .panel-body:has(.horizontal-scrollable-tabs) > .clearfix + div,
body.customers
  .panel-body:has(.horizontal-scrollable-tabs)
  > div:last-child:not(.horizontal-scrollable-tabs):not(.clearfix) {
  border: 2px solid rgba(50, 190, 237, 0.4) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 20px !important;
  background-color: #000a33 !important;
}

/* Override any tw- utility classes on the tab container */
body.customers [class*="tw-bg-white"]:has(.horizontal-scrollable-tabs),
body.customers [class*="tw-shadow"]:has(.horizontal-scrollable-tabs) {
  background-color: #000a33 !important;
  box-shadow: none !important;
}

/* Fallback for browsers that don't support :has() */
body.customers .panel_s .panel-body .horizontal-scrollable-tabs {
  background-color: #000a33 !important;
  box-shadow: none !important;
  border: 2px solid rgba(50, 190, 237, 0.4) !important;
  border-bottom: 1px solid rgba(50, 190, 237, 0.3) !important;
  border-radius: 8px 8px 0 0 !important;
  margin-bottom: 0 !important;
}

/* Force dark background on all ancestors of tabs in client area */
body.customers #content .panel_s,
body.customers #content .panel-body {
  background-color: #000a33 !important;
}

/* Ensure the tab links have proper styling with icons */
body.customers .horizontal-scrollable-tabs .nav-tabs > li > a i,
body.customers .horizontal-scrollable-tabs .nav-tabs > li > a .menu-icon {
  margin-right: 5px !important;
}

/* Active tab indicator enhancement */
body.customers .horizontal-scrollable-tabs .nav-tabs > li.active > a {
  position: relative !important;
}

body.customers .horizontal-scrollable-tabs .nav-tabs > li.active > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background-color: #32beed !important;
}

/* ==========================================================================
   Section 42: Form Elements - Remove Double/Triple Borders
   ========================================================================== */

/* Remove nested borders in form groups */
body.customers .panel_s .panel_s,
body.customers .panel .panel {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Single border on form controls */
body.customers .form-group .form-control {
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  box-shadow: none !important;
  outline: none !important;
}

body.customers .form-group .form-control:focus {
  border-color: #32beed !important;
  box-shadow: 0 0 0 2px rgba(50, 190, 237, 0.15) !important;
}

/* Remove extra borders from input groups */
body.customers .input-group .form-control,
body.customers .input-group-addon,
body.customers .input-group-btn .btn {
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
}

body.customers .input-group .form-control:not(:last-child) {
  border-right: none !important;
}

body.customers .input-group-addon {
  background-color: #001040 !important;
  color: #8fb8c8 !important;
}

/* Ticket form - remove triple border effect */
body.customers .ticket-form .panel_s,
body.customers .ticket-form .panel,
body.customers #ticketForm .panel_s,
body.customers #ticketForm .panel {
  border: none !important;
  background-color: transparent !important;
}

body.customers .ticket-form .form-group,
body.customers #ticketForm .form-group {
  margin-bottom: 20px !important;
}

/* ==========================================================================
   Section 43: Select Box Positioning Fixes
   ========================================================================== */

/* Bootstrap select positioning */
body.customers .bootstrap-select {
  width: 100% !important;
}

body.customers .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  text-align: left !important;
  padding-right: 30px !important;
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
  height: 42px !important;
}

body.customers .bootstrap-select > .dropdown-toggle .caret {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-top-color: #8fb8c8 !important;
}

body.customers .bootstrap-select > .dropdown-toggle .filter-option {
  padding-right: 20px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Dropdown menu positioning */
body.customers .bootstrap-select.open > .dropdown-menu {
  max-height: 300px !important;
  overflow-y: auto !important;
}

body.customers .bootstrap-select .dropdown-menu {
  width: 100% !important;
  background-color: #000a33 !important;
  border: 1px solid #32beed !important;
  border-radius: 4px !important;
  margin-top: 2px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.customers .bootstrap-select .dropdown-menu > li > a {
  color: #ffffff !important;
  padding: 10px 15px !important;
}

body.customers .bootstrap-select .dropdown-menu > li > a:hover,
body.customers .bootstrap-select .dropdown-menu > li.selected > a {
  background-color: #001040 !important;
  color: #32beed !important;
}

/* Native select styling */
body.customers select.form-control {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238fb8c8' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 35px !important;
}

/* ==========================================================================
   Section 44: Button Padding & Spacing Refinements
   ========================================================================== */

/* Consistent button padding */
body.customers .btn {
  padding: 10px 20px !important;
  font-size: 14px !important;
  line-height: 1.42857143 !important;
  border-radius: 4px !important;
}

body.customers .btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
}

body.customers .btn-lg {
  padding: 14px 28px !important;
  font-size: 16px !important;
}

body.customers .btn-xs {
  padding: 4px 8px !important;
  font-size: 11px !important;
}

/* Button groups spacing */
body.customers .btn-group .btn {
  margin-right: 0 !important;
}

body.customers .btn + .btn {
  margin-left: 8px !important;
}

body.customers .btn-group .btn + .btn {
  margin-left: -1px !important;
}

/* Action button containers */
body.customers .mtop15 .btn,
body.customers .mbot15 .btn,
body.customers .panel-body > .btn:first-child,
body.customers .form-group .btn {
  margin-bottom: 5px !important;
}

/* ==========================================================================
   Section 45: Proposal/Estimate View Fixes
   ========================================================================== */

/* Remove white areas in proposal view */
body.customers .proposal-view,
body.customers .estimate-view,
body.customers .invoice-view {
  background-color: #000a33 !important;
}

body.customers .proposal-view .tab-content,
body.customers .estimate-view .tab-content {
  background-color: transparent !important;
  border: none !important;
}

/* Company info section in header */
body.customers .company-info,
body.customers .client-info {
  color: #ffffff !important;
}

body.customers .company-info p,
body.customers .client-info p {
  color: #a0aec0 !important;
  margin-bottom: 5px !important;
}

/* ==========================================================================
   Section 46: Specific Element Fixes
   ========================================================================== */

/* Fix white background on panels inside panels */
body.customers .panel-body .panel_s {
  margin-bottom: 15px !important;
}

/* Fix textarea */
body.customers textarea.form-control {
  min-height: 100px !important;
  resize: vertical !important;
}

/* Fix placeholder text color */
body.customers .form-control::placeholder {
  color: #6a7a8a !important;
}

body.customers .form-control::-webkit-input-placeholder {
  color: #6a7a8a !important;
}

body.customers .form-control::-moz-placeholder {
  color: #6a7a8a !important;
}

/* Fix file input */
body.customers input[type="file"] {
  color: #ffffff !important;
}

body.customers .btn-file {
  background-color: #000a33 !important;
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  color: #ffffff !important;
}

/* Fix modal backdrop */
body.customers .modal-backdrop {
  background-color: #000023 !important;
}

body.customers .modal-content {
  background-color: #000a33 !important;
  border: 2px solid #32beed !important;
}

body.customers .modal-header {
  border-bottom-color: rgba(50, 190, 237, 0.3) !important;
}

body.customers .modal-footer {
  border-top-color: rgba(50, 190, 237, 0.3) !important;
}

body.customers .modal-title {
  color: #ffffff !important;
}

/* Fix close button in modals */
body.customers .close {
  color: #8fb8c8 !important;
  text-shadow: none !important;
  opacity: 0.8 !important;
}

body.customers .close:hover {
  color: #32beed !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Section 47: Pagination Fixes - Remove Artifacts
   ========================================================================== */

/* Clean pagination styling */
body.customers .pagination {
  display: inline-flex !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(50, 190, 237, 0.3) !important;
}

body.customers .pagination > li {
  display: inline-block !important;
  margin: 0 !important;
}

body.customers .pagination > li > a,
body.customers .pagination > li > span {
  background-color: #000a33 !important;
  border: none !important;
  border-right: 1px solid rgba(50, 190, 237, 0.3) !important;
  color: #8fb8c8 !important;
  padding: 10px 16px !important;
  margin: 0 !important;
  float: none !important;
}

body.customers .pagination > li:last-child > a,
body.customers .pagination > li:last-child > span {
  border-right: none !important;
}

body.customers .pagination > li > a:hover {
  background-color: #001040 !important;
  color: #32beed !important;
}

body.customers .pagination > .active > a,
body.customers .pagination > .active > span,
body.customers .pagination > .active > a:hover,
body.customers .pagination > .active > span:hover {
  background-color: #32beed !important;
  color: #000023 !important;
  border-color: #32beed !important;
}

body.customers .pagination > .disabled > a,
body.customers .pagination > .disabled > span {
  background-color: #000a33 !important;
  color: #4a5a6a !important;
  cursor: not-allowed !important;
}

/* Remove any extra elements/artifacts after pagination */
body.customers .pagination::after,
body.customers .pagination::before {
  display: none !important;
}

/* DataTables pagination wrapper */
body.customers .dataTables_paginate {
  margin-top: 15px !important;
}

body.customers .dataTables_paginate .pagination {
  margin: 0 !important;
}

/* ==========================================================================
   Section 48: Invoice/Subscription Items - Better Text Contrast
   ========================================================================== */

/* Table items text - improve contrast */
body.customers .table.items td {
  color: #ffffff !important;
}

body.customers .table.items td.description,
body.customers .table.items .item-description,
body.customers .table.items .item-long-description {
  color: #c0d4e4 !important;
}

/* Invoice/Subscription HTML item descriptions */
body.customers .invoice-item-description,
body.customers .subscription-item-description,
body.customers .proposal-item-description,
body.customers [class*="item"] .description,
body.customers [class*="item"] [class*="description"],
body.customers .items-table td:nth-child(2) {
  color: #c0d4e4 !important;
}

/* Secondary/sub text in items - lighter but still readable */
body.customers .item-long-description,
body.customers .long-description,
body.customers .table.items td small,
body.customers .table.items td .text-muted,
body.customers .items-wrapper .text-muted {
  color: #9ab8cc !important;
}

/* Bold text in items should be white */
body.customers .table.items td strong,
body.customers .table.items td b,
body.customers .item-name,
body.customers .item-title {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* "Non" text and important notices */
body.customers .table.items td .text-danger,
body.customers .items-wrapper .text-danger {
  color: #f87171 !important;
}

/* ==========================================================================
   FIX: Grey Text in Proposals/Subscriptions/Invoices - AGGRESSIVE
   ========================================================================== */

/* ALL text in html item tables should be readable */
body.customers .invoice-html-items,
body.customers .subscription-html-items,
body.customers .proposal-html-items,
body.customers .invoice-html-items *,
body.customers .subscription-html-items *,
body.customers .proposal-html-items * {
  color: #e0ecf4 !important;
}

body.customers .invoice-html-items td,
body.customers .subscription-html-items td,
body.customers .proposal-html-items td {
  color: #ffffff !important;
}

/* Item names should be white/bright */
body.customers .invoice-html-items .item-name,
body.customers .subscription-html-items .item-name,
body.customers .proposal-html-items .item-name,
body.customers .invoice-html-items strong,
body.customers .subscription-html-items strong,
body.customers .proposal-html-items strong {
  color: #ffffff !important;
}

/* Item descriptions - slightly lighter but still very readable */
body.customers .invoice-html-items .item-description,
body.customers .subscription-html-items .item-description,
body.customers .proposal-html-items .item-description {
  color: #b8d0e0 !important;
}

/* Long descriptions inside items - catch all lists and paragraphs */
body.customers .invoice-html-items .long-description,
body.customers .subscription-html-items .long-description,
body.customers .proposal-html-items .long-description,
body.customers .invoice-html-items .item-description p,
body.customers .subscription-html-items .item-description p,
body.customers .proposal-html-items .item-description p,
body.customers .invoice-html-items .item-description li,
body.customers .subscription-html-items .item-description li,
body.customers .proposal-html-items .item-description li,
body.customers .invoice-html-items .item-description span,
body.customers .subscription-html-items .item-description span,
body.customers .proposal-html-items .item-description span {
  color: #b8d0e0 !important;
}

/* Table inside items (nested content) */
body.customers .invoice-html-items table,
body.customers .subscription-html-items table,
body.customers .proposal-html-items table,
body.customers .invoice-html-items table td,
body.customers .subscription-html-items table td,
body.customers .proposal-html-items table td {
  color: #e0ecf4 !important;
}

/* Any text-muted inside items should still be readable */
body.customers .invoice-html-items .text-muted,
body.customers .subscription-html-items .text-muted,
body.customers .proposal-html-items .text-muted {
  color: #a8c8dc !important;
}

/* Total sections text */
body.customers .invoice-total-section td,
body.customers .subscription-total-section td,
body.customers .proposal-total-section td {
  color: #ffffff !important;
}

body.customers .invoice-total-section .text-danger,
body.customers .subscription-total-section .text-danger,
body.customers [class*="total"] .text-danger {
  color: #f87171 !important;
}

/* ==========================================================================
   FIX: Global Grey Text - Make ALL text readable
   ========================================================================== */

/* Fix muted text globally - BRIGHTER colors for better contrast */
body.customers .text-muted {
  color: #b8d4e8 !important;
}

body.customers p.text-muted,
body.customers span.text-muted,
body.customers small.text-muted,
body.customers div.text-muted,
body.customers td.text-muted,
body.customers li.text-muted {
  color: #b8d4e8 !important;
}

/* Any element that could have grey/muted styling - inline styles */
/* Override dark grey inline colors like #424242, #555555, etc */
body.customers [style*="color:#4"],
body.customers [style*="color: #4"] {
  color: #b8d4e8 !important;
}

body.customers [style*="color:#5"],
body.customers [style*="color: #5"] {
  color: #b8d4e8 !important;
}

body.customers [style*="color:#6"],
body.customers [style*="color: #6"] {
  color: #b8d4e8 !important;
}

body.customers [style*="color:#7"],
body.customers [style*="color: #7"] {
  color: #b8d4e8 !important;
}

body.customers [style*="color:#8"],
body.customers [style*="color: #8"] {
  color: #c0dce8 !important;
}

body.customers [style*="color:#9"],
body.customers [style*="color: #9"] {
  color: #c8e0ec !important;
}

/* Also catch rgb grey values */
body.customers [style*="color:rgb(66"],
body.customers [style*="color: rgb(66"],
body.customers [style*="color:rgb(85"],
body.customers [style*="color: rgb(85"],
body.customers [style*="color:rgb(102"],
body.customers [style*="color: rgb(102"],
body.customers [style*="color:rgb(128"],
body.customers [style*="color: rgb(128"] {
  color: #b8d4e8 !important;
}

/* Force all spans with inline style inside item descriptions */
body.customers .item-description span[style],
body.customers .long-description span[style],
body.customers td span[style*="color"] {
  color: #b8d4e8 !important;
}

/* Ensure tw- utility classes have proper contrast - BRIGHTER */
body.customers .tw-text-neutral-500,
body.customers .tw-text-neutral-400,
body.customers .tw-text-gray-500,
body.customers .tw-text-gray-400,
body.customers [class*="tw-text-neutral-4"],
body.customers [class*="tw-text-neutral-5"],
body.customers [class*="tw-text-gray-4"],
body.customers [class*="tw-text-gray-5"] {
  color: #b8d4e8 !important;
}

body.customers .tw-text-neutral-600,
body.customers .tw-text-gray-600,
body.customers [class*="tw-text-neutral-6"],
body.customers [class*="tw-text-gray-6"] {
  color: #a8c8dc !important;
}

/* Global catch-all: any text that's too dark should be lightened */
body.customers td,
body.customers th,
body.customers p,
body.customers span,
body.customers div,
body.customers li {
  /* Only apply if no other color is set - this is a fallback */
}

/* Ensure all table cells in client area have readable text */
body.customers table td,
body.customers table th {
  color: inherit;
}

body.customers .table td,
body.customers .table th {
  color: #e0ecf4 !important;
}

/* Fix any remaining secondary/muted text classes */
body.customers .text-secondary,
body.customers .text-dark,
body.customers .secondary-text,
body.customers .muted-text {
  color: #b8d4e8 !important;
}

/* ==========================================================================
   Section 49: Open Ticket Form - Fix Multiple Borders (AGGRESSIVE)
   ========================================================================== */

/* Remove ALL borders from everything inside the form first */
body.customers #open-new-ticket-form *,
body.customers #open-new-ticket-form *::before,
body.customers #open-new-ticket-form *::after {
  box-shadow: none !important;
}

/* Remove borders from panels, form-groups, and wrappers */
body.customers #open-new-ticket-form .panel_s,
body.customers #open-new-ticket-form .panel,
body.customers #open-new-ticket-form .panel-body,
body.customers #open-new-ticket-form .panel-footer,
body.customers #open-new-ticket-form .form-group,
body.customers #open-new-ticket-form .row,
body.customers #open-new-ticket-form .col-md-12,
body.customers #open-new-ticket-form .col-md-6,
body.customers #open-new-ticket-form .input-group,
body.customers #open-new-ticket-form .attachments_area,
body.customers #open-new-ticket-form .attachments,
body.customers #open-new-ticket-form .attachment,
body.customers #open-new-ticket-form .custom-fields {
  border: none !important;
  background-color: transparent !important;
}

/* The ONLY element with border: the outer panel */
body.customers #open-new-ticket-form > .row > .col-md-12 > .panel_s {
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  background-color: #000a33 !important;
}

body.customers #open-new-ticket-form .panel-body {
  background-color: #000a33 !important;
}

body.customers #open-new-ticket-form .panel-footer {
  background-color: rgba(0, 10, 51, 0.8) !important;
  border-top: 1px solid rgba(50, 190, 237, 0.2) !important;
}

/* Form controls - single clean border */
body.customers #open-new-ticket-form .form-control,
body.customers #open-new-ticket-form input[type="text"],
body.customers #open-new-ticket-form input[type="file"],
body.customers #open-new-ticket-form textarea,
body.customers #open-new-ticket-form select {
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  background-color: #000a33 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

body.customers #open-new-ticket-form .form-control:focus {
  border-color: #32beed !important;
  outline: none !important;
}

/* Bootstrap select dropdown */
body.customers #open-new-ticket-form .bootstrap-select,
body.customers #open-new-ticket-form .bootstrap-select .dropdown-toggle,
body.customers #open-new-ticket-form .bootstrap-select > .dropdown-toggle {
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  background-color: #000a33 !important;
  border-radius: 4px !important;
}

/* Remove border from bootstrap-select wrapper, keep on button only */
body.customers #open-new-ticket-form .bootstrap-select {
  border: none !important;
}

/* Input group button (the + button for attachments) */
body.customers #open-new-ticket-form .input-group-btn .btn {
  border: 1px solid rgba(50, 190, 237, 0.5) !important;
  background-color: #000a33 !important;
  color: #32beed !important;
}

/* ==========================================================================
   Section 50: Global Nested Panel Fix (All Forms)
   ========================================================================== */

/* Remove border from any panel inside the main content panel */
body.customers .container .panel_s .panel_s,
body.customers .container .panel_s .panel,
body.customers .container .panel .panel_s,
body.customers .container .panel .panel {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Make sure only top-level panels have the blue border - EXCEPT panels with tabs */
body.customers
  .container
  > .row
  > .col-md-12
  > .panel_s:not(:has(.horizontal-scrollable-tabs)),
body.customers
  .container
  > .row
  > div[class^="col-"]
  > .panel_s:not(:has(.horizontal-scrollable-tabs)),
body.customers
  #content
  .panel_s:not(.panel_s .panel_s):not(:has(.horizontal-scrollable-tabs)) {
  border: 2px solid #32beed !important;
  border-radius: 8px !important;
  background-color: #000a33 !important;
  box-shadow: 0 4px 20px rgba(50, 190, 237, 0.1) !important;
}

/* OVERRIDE: Panels with tabs must have NO border (border is on tabs instead) */
body.customers .panel_s:has(.horizontal-scrollable-tabs) {
  border: none !important;
  box-shadow: none !important;
}

/* Remove borders from nested panels everywhere */
body.customers .panel_s .panel_s,
body.customers .panel_s .panel,
body.customers .panel-body .panel_s,
body.customers .panel-body .panel {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Ensure panel-body and panel-footer don't add extra borders */
body.customers .panel_s > .panel-body,
body.customers .panel_s > .panel-footer,
body.customers .panel > .panel-body,
body.customers .panel > .panel-footer {
  border: none !important;
  background-color: transparent !important;
}

/* Panel footer should only have top border for separation */
body.customers .panel_s > .panel-footer {
  border-top: 1px solid rgba(50, 190, 237, 0.2) !important;
  background-color: rgba(0, 10, 51, 0.5) !important;
}

/* Form groups should NOT have borders */
body.customers .form-group {
  border: none !important;
  background: transparent !important;
}

/* Custom fields wrapper */
body.customers .custom-fields {
  border: none !important;
  background: transparent !important;
}

/* Attachment area */
body.customers .attachments_area,
body.customers .attachments {
  border: none !important;
  background: transparent !important;
}