:root {
  --aimod-bg: #eef2f7;
  --aimod-bg-2: #f8fafc;
  --aimod-panel: rgba(255, 255, 255, 0.78);
  --aimod-panel-strong: rgba(255, 255, 255, 0.92);
  --aimod-border: rgba(148, 163, 184, 0.28);
  --aimod-line: rgba(148, 163, 184, 0.22);
  --aimod-text: #182235;
  --aimod-muted: #64748b;
  --aimod-primary: #2563eb;
  --aimod-accent: #06b6d4;
  --aimod-success: #16a34a;
  --aimod-danger: #e11d48;
  --aimod-shadow: 18px 18px 42px rgba(148, 163, 184, 0.28), -18px -18px 42px rgba(255, 255, 255, 0.86);
  --aimod-inner: inset 7px 7px 14px rgba(148, 163, 184, 0.16), inset -7px -7px 14px rgba(255, 255, 255, 0.78);
}

body[data-aimod-theme="dark"] {
  --aimod-bg: #07111f;
  --aimod-bg-2: #101b2d;
  --aimod-panel: rgba(13, 27, 48, 0.82);
  --aimod-panel-strong: rgba(18, 35, 60, 0.92);
  --aimod-border: rgba(117, 230, 255, 0.22);
  --aimod-line: rgba(47, 119, 255, 0.26);
  --aimod-text: #dceaff;
  --aimod-muted: #91a6c8;
  --aimod-primary: #39d9ff;
  --aimod-accent: #7cf7bd;
  --aimod-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --aimod-inner: inset 8px 8px 18px rgba(0, 0, 0, 0.22), inset -8px -8px 18px rgba(75, 156, 255, 0.04);
}

body {
  color: var(--aimod-text);
  background:
    radial-gradient(circle at 8% 8%, rgba(37, 99, 235, 0.12), transparent 30%),
    radial-gradient(circle at 88% 14%, rgba(6, 182, 212, 0.12), transparent 26%),
    linear-gradient(135deg, var(--aimod-bg-2) 0%, var(--aimod-bg) 50%, #e8edf4 100%) !important;
  min-height: 100vh;
}

body[data-aimod-theme="dark"] {
  background:
    radial-gradient(circle at 8% 8%, rgba(57, 217, 255, 0.18), transparent 30%),
    radial-gradient(circle at 88% 16%, rgba(124, 247, 189, 0.12), transparent 28%),
    linear-gradient(135deg, #06101d 0%, #0a1425 48%, #08101c 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent 78%);
  z-index: 0;
}

body[data-aimod-theme="dark"]::before {
  background-image:
    linear-gradient(rgba(57, 217, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 217, 255, 0.05) 1px, transparent 1px);
}

#layout-wrapper,
.main-content,
.page-content,
.content-page,
.right-content,
.auth-page,
.auth-full-page-content {
  background: transparent !important;
}

#page-topbar,
.navbar-header,
.navbar-brand-box,
.vertical-menu {
  background: var(--aimod-panel-strong) !important;
  border-color: var(--aimod-border) !important;
  box-shadow: 0 14px 36px rgba(148, 163, 184, 0.2) !important;
  backdrop-filter: blur(18px);
}

body[data-aimod-theme="dark"] #page-topbar,
body[data-aimod-theme="dark"] .navbar-header,
body[data-aimod-theme="dark"] .navbar-brand-box,
body[data-aimod-theme="dark"] .vertical-menu {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

#page-topbar,
.navbar-header {
  border-bottom: 1px solid var(--aimod-border);
}

.navbar-brand-box,
.vertical-menu {
  border-right: 1px solid var(--aimod-border);
}

#sidebar-menu ul li a,
.metismenu li a,
.header-item,
.dropdown-menu a {
  color: var(--aimod-muted) !important;
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li.mm-active > a,
.metismenu li.mm-active > a,
.header-item:hover,
.dropdown-menu a:hover {
  color: var(--aimod-primary) !important;
}

#sidebar-menu ul li a i,
.metismenu li a i,
.noti-icon i {
  color: var(--aimod-primary) !important;
}

.page-title-box h4,
h1, h2, h3, h4, h5, h6,
.card-title,
.modal-title,
.text-dark,
.auth-full-page-content p {
  color: var(--aimod-text) !important;
}

.text-muted,
.text-secondary,
.color-999,
small,
label,
.breadcrumb-item,
.breadcrumb-item a {
  color: var(--aimod-muted) !important;
}

.card,
.modal-content,
.dropdown-menu,
.popover,
.list-group-item,
.table-footer,
.login_right,
.auth-full-page-content,
.user-center_home_box,
.user-center_product_grid,
.security-list,
.invoice-box,
.ticket-box,
.billing-box,
.service-list-card {
  background: var(--aimod-panel) !important;
  border: 1px solid var(--aimod-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--aimod-shadow) !important;
  backdrop-filter: blur(18px);
}

.card:hover,
.list-group-item:hover,
.user-center_home_box:hover {
  border-color: rgba(37, 99, 235, 0.42) !important;
  transform: translateY(-2px);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: var(--aimod-line) !important;
}

body[data-aimod-theme="dark"] .card-header,
body[data-aimod-theme="dark"] .card-footer,
body[data-aimod-theme="dark"] .modal-header,
body[data-aimod-theme="dark"] .modal-footer {
  background: rgba(8, 19, 35, 0.78) !important;
}

.table,
.table th,
.table td {
  color: var(--aimod-text) !important;
  border-color: var(--aimod-line) !important;
}

.table thead th {
  background: rgba(37, 99, 235, 0.07) !important;
  color: var(--aimod-text) !important;
  border-bottom-color: rgba(37, 99, 235, 0.2) !important;
}

.table-hover tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd) {
  background: rgba(37, 99, 235, 0.045) !important;
}

.form-control,
.custom-select,
.input-group-text,
.bootstrap-select .dropdown-toggle,
select,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"] {
  color: var(--aimod-text) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid var(--aimod-border) !important;
  border-radius: 15px !important;
  box-shadow: var(--aimod-inner) !important;
}

body[data-aimod-theme="dark"] .form-control,
body[data-aimod-theme="dark"] .custom-select,
body[data-aimod-theme="dark"] .input-group-text,
body[data-aimod-theme="dark"] .bootstrap-select .dropdown-toggle,
body[data-aimod-theme="dark"] select,
body[data-aimod-theme="dark"] textarea,
body[data-aimod-theme="dark"] input[type="text"],
body[data-aimod-theme="dark"] input[type="password"],
body[data-aimod-theme="dark"] input[type="email"],
body[data-aimod-theme="dark"] input[type="number"] {
  background: rgba(4, 12, 24, 0.7) !important;
}

.form-control:focus,
.custom-select:focus,
textarea:focus,
input:focus {
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 0.18rem rgba(37, 99, 235, 0.12), var(--aimod-inner) !important;
}

.btn,
.page-link,
.badge,
.nav-pills .nav-link,
.nav-tabs .nav-link {
  border-radius: 999px !important;
}

.btn-primary,
.btn-info,
.btn-success,
.page-item.active .page-link,
.nav-pills .nav-link.active,
.badge-primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--aimod-primary), var(--aimod-accent)) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.22) !important;
}

.btn-secondary,
.btn-light,
.page-link,
.nav-tabs .nav-link {
  color: var(--aimod-text) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  border-color: var(--aimod-border) !important;
}

body[data-aimod-theme="dark"] .btn-secondary,
body[data-aimod-theme="dark"] .btn-light,
body[data-aimod-theme="dark"] .page-link,
body[data-aimod-theme="dark"] .nav-tabs .nav-link {
  background: rgba(17, 35, 61, 0.74) !important;
}

.btn-danger,
.badge-danger {
  background: linear-gradient(135deg, var(--aimod-danger), #fb7185) !important;
  border-color: transparent !important;
}

.alert,
.toast,
.toastr,
.swal2-popup {
  color: var(--aimod-text) !important;
  background: var(--aimod-panel-strong) !important;
  border: 1px solid var(--aimod-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--aimod-shadow) !important;
}

.dropdown-menu {
  padding: 10px;
}

.dropdown-item {
  border-radius: 12px;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(37, 99, 235, 0.08) !important;
}

.user-center_header,
.avatar-title,
.rounded-circle {
  background: linear-gradient(135deg, var(--aimod-primary), var(--aimod-accent)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2);
}

.progress {
  background: rgba(148, 163, 184, 0.2) !important;
  border-radius: 999px;
}

.progress-bar {
  background: linear-gradient(90deg, var(--aimod-primary), var(--aimod-accent)) !important;
}

a {
  color: var(--aimod-primary);
}

a:hover {
  color: var(--aimod-accent);
}

.aimod-theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  color: var(--aimod-text);
  background: var(--aimod-panel-strong);
  border: 1px solid var(--aimod-border);
  border-radius: 999px;
  box-shadow: var(--aimod-shadow);
  cursor: pointer;
  backdrop-filter: blur(18px);
}

.aimod-theme-toggle:hover {
  color: var(--aimod-primary);
}

.aimod-theme-toggle__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aimod-primary), var(--aimod-accent));
  box-shadow: 0 0 18px rgba(37, 99, 235, 0.3);
}

@media (max-width: 768px) {
  .card,
  .modal-content,
  .list-group-item,
  .login_right,
  .auth-full-page-content {
    border-radius: 16px !important;
  }

  .page-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .aimod-theme-toggle {
    right: 12px;
    bottom: 12px;
    height: 38px;
    padding: 0 12px;
  }
}