/* Services Page - Blue Gradient Styling */
/* Matches the SmarterMail dashboard design */

/* Main Services Container */
.clientarea-services .table-container,
.clientarea-services .table-container.clearfix {
  background: linear-gradient(135deg, #1c8ce4 0%, #1ca4cc 100%) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 4px 15px rgba(28, 140, 228, 0.3) !important;
  border: none !important;
  color: white !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Table Styling */
.clientarea-services .table-container .table {
  color: white !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  width: 100% !important;
}

/* Table Headers */
.clientarea-services .table-container .table thead th {
  background: transparent !important;
  border: none !important;
  color: white !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 20px 15px !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
}

/* Table Rows */
.clientarea-services .table-container .table tbody tr {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

.clientarea-services .table-container .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(3px);
}

/* Table Cells */
.clientarea-services .table-container .table tbody td {
  background: transparent !important;
  border: none !important;
  color: white !important;
  padding: 18px 15px !important;
  vertical-align: middle !important;
}

/* Links in Table */
.clientarea-services .table-container .table tbody td a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
}

.clientarea-services .table-container .table tbody td a:hover {
  color: white !important;
  text-decoration: underline !important;
}

/* Strong Text */
.clientarea-services .table-container .table tbody td strong {
  color: white !important;
}

/* Muted Text */
.clientarea-services .table-container .table tbody td .text-muted,
.clientarea-services .table-container .table tbody td small {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Status Labels */
.clientarea-services .table-container .label,
.clientarea-services .table-container .status,
.clientarea-services .table-container span.label {
  background: rgba(255, 255, 255, 0.9) !important;
  color: #1c8ce4 !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Status Colors */
.clientarea-services .table-container .status-active,
.clientarea-services .table-container .label.status-active {
  background: rgba(16, 185, 129, 0.9) !important;
  color: white !important;
}

.clientarea-services .table-container .status-pending,
.clientarea-services .table-container .label.status-pending {
  background: rgba(245, 158, 11, 0.9) !important;
  color: white !important;
}

.clientarea-services .table-container .status-suspended,
.clientarea-services .table-container .status-terminated,
.clientarea-services .table-container .status-cancelled,
.clientarea-services .table-container .label.status-suspended,
.clientarea-services .table-container .label.status-terminated,
.clientarea-services .table-container .label.status-cancelled {
  background: rgba(239, 68, 68, 0.9) !important;
  color: white !important;
}

/* DataTables Controls */
.clientarea-services .table-container .dataTables_length label,
.clientarea-services .table-container .dataTables_info {
  color: rgba(255, 255, 255, 0.9) !important;
}

.clientarea-services .table-container .dataTables_length select {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 5px 10px !important;
}

.clientarea-services .table-container .dataTables_filter {
  position: relative !important;
}

.clientarea-services .table-container .dataTables_filter input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 8px 12px 8px 35px !important;
}

.clientarea-services .table-container .dataTables_filter label::after {
  content: "🔍" !important;
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  pointer-events: none !important;
}

.clientarea-services .table-container .dataTables_filter input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Pagination */
.clientarea-services .table-container .dataTables_paginate .paginate_button {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  border-radius: 8px !important;
  margin: 0 2px !important;
  padding: 8px 12px !important;
}

.clientarea-services .table-container .dataTables_paginate .paginate_button:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: white !important;
}

.clientarea-services .table-container .dataTables_paginate .paginate_button.current {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: white !important;
}

/* Loading State */
.clientarea-services #tableLoading {
  color: rgba(255, 255, 255, 0.9) !important;
}

.clientarea-services #tableLoading i {
  color: white !important;
}

/* SSL Icons */
.clientarea-services .table-container img {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
  .clientarea-services .table-container {
    padding: 16px !important;
    margin-bottom: 20px !important;
  }
  
  .clientarea-services .table-container .table thead th,
  .clientarea-services .table-container .table tbody td {
    padding: 12px 8px !important;
    font-size: 0.85rem;
  }
}

/* Page Title */
.clientarea-services .content-inner h1 {
  color: #1c8ce4;
  margin-bottom: 30px;
}

/* Breadcrumb */
.clientarea-services .breadcrumb {
  background: rgba(28, 140, 228, 0.1);
  border-radius: 8px;
  margin-bottom: 20px;
}

.clientarea-services .breadcrumb-item a {
  color: #1c8ce4;
}

.clientarea-services .breadcrumb-item.active {
  color: #1ca4cc;
}

/* Full Width Container Override */
.clientarea-services .container,
.clientarea-services .container-fluid {
  padding-left: 15px !important;
  padding-right: 15px !important;
  max-width: 100% !important;
}

/* Remove any margin from parent elements */
.clientarea-services .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.clientarea-services .col,
.clientarea-services [class*="col-"] {
  padding-left: 15px !important;
  padding-right: 15px !important;
}