:root {
  --pz-app-bg: #f4f7fb;
  --pz-app-ink: #111827;
  --pz-app-muted: #64748b;
  --pz-app-line: #dbe5f0;
  --pz-app-sidebar: #0b1220;
  --pz-app-blue: #165dff;
  --pz-app-teal: #02b8a6;
  --pz-app-green: #19a974;
  --pz-app-yellow: #fbbc05;
  --pz-app-orange: #ff8a3d;
  --pz-app-pink: #ff4d8d;
  --pz-app-purple: #7c3aed;
  --pz-app-danger: #ef4444;
  --pz-app-card: #ffffff;
  --pz-app-shadow: 0 20px 55px rgba(15, 23, 42, 0.1);
}

body {
  background:
    radial-gradient(circle at 8% 0, rgba(255, 77, 141, 0.15), transparent 24rem),
    radial-gradient(circle at 28% 4%, rgba(251, 188, 5, 0.18), transparent 24rem),
    radial-gradient(circle at 88% 4%, rgba(2, 184, 166, 0.16), transparent 26rem),
    radial-gradient(circle at 78% 80%, rgba(22, 93, 255, 0.12), transparent 28rem),
    var(--pz-app-bg) !important;
  color: var(--pz-app-ink) !important;
  font-family: Inter, "DM Sans", "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0;
}

a {
  color: var(--pz-app-blue);
}

.login-container,
.card,
.tile,
.widget-small,
.invoice,
.modal-content,
.app-notification,
.dropdown-menu,
.table-responsive,
.payment-card,
.profile-card {
  border: 1px solid rgba(219, 229, 240, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--pz-app-shadow) !important;
  position: relative;
  overflow: hidden;
}

.login-container:before,
.card:before,
.tile:before,
.widget-small:before,
.invoice:before,
.modal-content:before,
.table-responsive:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335, #7c3aed);
}

.login-container {
  padding: 34px !important;
}

.login-head,
.app-title h1,
.card-title,
.card .card-title,
.tile-title,
h1,
h2,
h3,
h4,
h5 {
  color: var(--pz-app-ink) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

p,
small,
.card .card-category,
.app-sidebar__user-designation,
.text-muted {
  color: var(--pz-app-muted) !important;
}

.form-control,
.form-select,
input,
select,
textarea {
  border: 1px solid var(--pz-app-line) !important;
  border-radius: 8px !important;
  background: #f8fafc !important;
  color: #172033 !important;
  min-height: 46px;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--pz-app-blue) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.13) !important;
}

.btn,
.btn-primary,
button,
.wizard > .actions a {
  border-radius: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn.bg-white,
.wizard > .actions a {
  border: 0 !important;
  background: linear-gradient(135deg, var(--pz-app-blue), var(--pz-app-teal), var(--pz-app-green)) !important;
  color: #fff !important;
  box-shadow: 0 14px 32px rgba(22, 93, 255, 0.2) !important;
}

.btn:hover {
  transform: translateY(-1px);
}

.app-header,
.app-header__logo {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.94), rgba(236, 253, 245, 0.94)) !important;
  border-bottom: 1px solid var(--pz-app-line);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.app-header:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335, #7c3aed);
}

.app-header__logo {
  border-right: 1px solid var(--pz-app-line);
}

.app-header__logo img {
  max-height: 42px !important;
  object-fit: contain;
}

.app-sidebar__toggle,
.app-nav__item,
.app-nav__item i {
  color: #172033 !important;
}

.app-search .badge {
  border: 1px solid #bfdbfe;
  border-radius: 999px !important;
  background: #eff6ff !important;
  color: #165dff !important;
}

.app-sidebar {
  background:
    radial-gradient(circle at 22% 4%, rgba(251, 188, 5, 0.22), transparent 9rem),
    radial-gradient(circle at 88% 2%, rgba(52, 168, 83, 0.24), transparent 12rem),
    linear-gradient(180deg, rgba(22, 93, 255, 0.18), transparent 260px),
    var(--pz-app-sidebar) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 18px 0 45px rgba(15, 23, 42, 0.12);
}

.app-sidebar__user {
  margin: 16px;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.app-sidebar__user-avatar {
  border: 2px solid rgba(45, 212, 191, 0.55);
  box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.12);
}

.app-sidebar__user-name {
  color: #fff !important;
  font-weight: 900;
}

.app-sidebar__user-designation {
  color: #a8b3c5 !important;
}

.app-menu {
  padding: 8px 12px 24px !important;
}

.app-menu__item {
  min-height: 44px;
  margin: 4px 0;
  border-radius: 8px !important;
  color: #cbd5e1 !important;
  font-weight: 700;
}

.app-menu__item:hover,
.app-menu__item:focus,
.app-menu__item.active {
  background: linear-gradient(135deg, var(--pz-app-blue), var(--pz-app-teal), var(--pz-app-green)) !important;
  color: #fff !important;
}

.app-menu__icon,
.app-menu__item svg,
.app-menu__item i {
  color: currentColor !important;
}

.app-content {
  background: transparent !important;
  padding: 30px !important;
}

.app-title {
  border: 1px solid rgba(219, 229, 240, 0.95) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.94), rgba(236, 253, 245, 0.94)) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08) !important;
  padding: 20px 24px !important;
}

.app-title:before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc05, #ea4335, #7c3aed);
}

.widget-small {
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.widget-small:hover,
.card:hover,
.tile:hover {
  transform: translateY(-3px);
}

.widget-small .icon,
.icon-circle {
  background: linear-gradient(135deg, #eaf3ff, #e7fbf7, #fff7ed) !important;
  color: var(--pz-app-blue) !important;
  border-radius: 8px !important;
}

.widget-small:nth-of-type(4n + 1) .icon,
.card:nth-of-type(4n + 1) .icon-circle {
  color: #165dff !important;
  background: linear-gradient(135deg, #dbeafe, #eff6ff) !important;
}

.widget-small:nth-of-type(4n + 2) .icon,
.card:nth-of-type(4n + 2) .icon-circle {
  color: #16a34a !important;
  background: linear-gradient(135deg, #dcfce7, #ecfdf5) !important;
}

.widget-small:nth-of-type(4n + 3) .icon,
.card:nth-of-type(4n + 3) .icon-circle {
  color: #c2410c !important;
  background: linear-gradient(135deg, #ffedd5, #fff7ed) !important;
}

.widget-small:nth-of-type(4n + 4) .icon,
.card:nth-of-type(4n + 4) .icon-circle {
  color: #7c3aed !important;
  background: linear-gradient(135deg, #ede9fe, #f5f3ff) !important;
}

.table {
  color: #243047 !important;
}

.table th {
  background: linear-gradient(135deg, #eef6ff, #ecfdf5) !important;
  color: #172033 !important;
  border-color: var(--pz-app-line) !important;
  font-weight: 900 !important;
}

.table tbody tr:hover {
  background: #f8fbff !important;
}

.alert-info {
  border-color: #bfdbfe !important;
  background: linear-gradient(135deg, #eff6ff, #ecfeff) !important;
  color: #1e3a8a !important;
}

.alert-success {
  border-color: #bbf7d0 !important;
  background: linear-gradient(135deg, #ecfdf5, #dcfce7) !important;
  color: #166534 !important;
}

.alert-warning {
  border-color: #fde68a !important;
  background: linear-gradient(135deg, #fffbeb, #fff7ed) !important;
  color: #92400e !important;
}

.alert-danger {
  border-color: #fecaca !important;
  background: linear-gradient(135deg, #fef2f2, #fff1f2) !important;
  color: #991b1b !important;
}

.nav-tabs .nav-link,
.page-link,
.select2-container .select2-selection--single {
  border-radius: 8px !important;
}

.nav-tabs .nav-link.active,
.page-item.active .page-link {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--pz-app-blue), var(--pz-app-teal)) !important;
  color: #fff !important;
}

.table td {
  border-color: #edf2f7 !important;
}

.badge,
.label {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0;
}

.Success,
.badge-success {
  background: #dcfce7 !important;
  color: #15803d !important;
}

.Failed,
.badge-danger {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

.Pending,
.badge-warning {
  background: #fef3c7 !important;
  color: #a16207 !important;
}

#loading_ajax {
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(6px);
}

.simple-spinner span {
  border-right-color: var(--pz-app-teal) !important;
}

#emoji-widget {
  width: 62px !important;
  height: 62px !important;
  background: linear-gradient(135deg, var(--pz-app-blue), var(--pz-app-teal)) !important;
  box-shadow: 0 18px 38px rgba(22, 93, 255, 0.25) !important;
}

@media (max-width: 767px) {
  .app-content {
    padding: 18px !important;
  }

  .login-container {
    padding: 24px !important;
  }
}
