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

/* Main Domains Container */
.clientarea-domains .table-container,
.clientarea-domains .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;
}

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

/* Table Headers */
.clientarea-domains .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-domains .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-domains .table-container .table tbody tr:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateX(3px);
}

/* Table Cells */
.clientarea-domains .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-domains .table-container .table tbody td a {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
}

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

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

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

/* Status Labels */
.clientarea-domains .table-container .label,
.clientarea-domains .table-container .status,
.clientarea-domains .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;
}

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

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

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

.clientarea-domains .table-container .status-transferred,
.clientarea-domains .table-container .label.status-transferred {
  background: rgba(99, 102, 241, 0.9) !important;
  color: white !important;
}

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

.clientarea-domains .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-domains .table-container .dataTables_filter {
  position: relative !important;
}

.clientarea-domains .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-domains .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-domains .table-container .dataTables_filter input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Pagination */
.clientarea-domains .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-domains .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-domains .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-domains #tableLoading {
  color: rgba(255, 255, 255, 0.9) !important;
}

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

/* Domain Action Buttons */
.clientarea-domains .table-container .btn {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
  margin: 2px !important;
}

.clientarea-domains .table-container .btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: white !important;
}

/* Dropdown Menus */
.clientarea-domains .table-container .dropdown-menu {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.clientarea-domains .table-container .dropdown-item {
  color: #1c8ce4 !important;
  padding: 8px 16px !important;
}

.clientarea-domains .table-container .dropdown-item:hover {
  background: rgba(28, 140, 228, 0.1) !important;
  color: #1c8ce4 !important;
}

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

/* Auto-renewal Toggle */
.clientarea-domains .table-container .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.clientarea-domains .table-container .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.clientarea-domains .table-container .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  transition: .4s;
  border-radius: 24px;
}

.clientarea-domains .table-container .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.clientarea-domains .table-container input:checked + .slider {
  background-color: rgba(16, 185, 129, 0.8);
}

.clientarea-domains .table-container input:checked + .slider:before {
  transform: translateX(26px);
}

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

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

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

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

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

/* Filter Buttons */
.clientarea-domains .view-filter-btns .list-group-item {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
  margin: 2px !important;
}

.clientarea-domains .view-filter-btns .list-group-item:hover,
.clientarea-domains .view-filter-btns .list-group-item.active {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: white !important;
}

.clientarea-domains .view-filter-btns .badge {
  background: rgba(255, 255, 255, 0.8) !important;
  color: #1c8ce4 !important;
}