/* iOS-app white/blue panel theme */
:root {
  --ios-bg: #eaf3ff;
  --ios-card: #ffffff;
  --ios-text: #0f172a;
  --ios-muted: #64748b;
  --ios-border: #cfe0ff;
  --ios-blue: #2563eb;
  --ios-sky: #38bdf8;
}

html,
body {
  background: var(--ios-bg) !important;
  color: var(--ios-text) !important;
}

body:not(:has(.ios-auth-page)) .page-wrapper,
body:not(:has(.ios-auth-page)) .body-wrapper,
body:not(:has(.ios-auth-page)) .container-fluid {
  background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 60%, #eef6ff 100%) !important;
  color: var(--ios-text) !important;
}

/* login / challenge */
.ios-auth-page {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #eaf3ff 0%, #f8fbff 100%) !important;
  padding: 32px 16px;
  color: var(--ios-text) !important;
}

.ios-auth-card {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  width: 100%;
  max-width: 460px;
  background: #fff !important;
  border: 1px solid var(--ios-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 55px rgba(37, 99, 235, .14) !important;
  padding: 38px !important;
  color: var(--ios-text) !important;
}

.ios-otp-card {
  max-width: 430px !important;
}

.ios-auth-logo {
  display: block;
  width: 220px !important;
  max-width: 80% !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.ios-auth-card label,
.ios-text {
  color: var(--ios-text) !important;
}

.ios-muted-text,
.ios-copyright,
.ios-auth-card p {
  color: var(--ios-muted) !important;
}

.ios-input,
.ios-otp-input,
.ios-auth-card .form-control {
  background: #fff !important;
  color: var(--ios-text) !important;
  border: 1px solid #b9d4ff !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.ios-input {
  padding: 14px 16px !important;
}

.ios-otp-input {
  width: 54px !important;
  height: 58px !important;
  font-size: 28px !important;
}

.ios-input:focus,
.ios-otp-input:focus,
.ios-auth-card .form-control:focus {
  border-color: var(--ios-sky) !important;
  box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .18) !important;
}

.ios-primary-btn {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-sky)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

.ios-primary-btn.is-pressed:not(:disabled) {
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.18);
}

.ios-primary-btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

.ios-primary-btn.is-loading {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0.92;
  cursor: wait;
}

.ios-btn-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ios-btn-spin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes ios-btn-spin {
  to { transform: rotate(360deg); }
}

.ios-auth-card a {
  color: var(--ios-blue) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* layout shell */
.left-sidebar,
.scroll-sidebar,
.left-sidebar .brand-logo {
  background: #fff !important;
  border-right: 1px solid var(--ios-border) !important;
}

.app-header,
.app-header .navbar,
.navbar-light,
.navbar {
  background: #fff !important;
  border-bottom: 1px solid var(--ios-border) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .07) !important;
}

.ios-sidebar-logo {
  width: 180px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.ios-mobile-logo {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link,
.sidebar-nav ul .sidebar-item .sidebar-link span,
.sidebar-nav ul .sidebar-item .sidebar-link i {
  color: #526b8d !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: #eef6ff !important;
  color: var(--ios-blue) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link.active,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link {
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-sky)) !important;
  color: #fff !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .22) !important;
}

.sidebar-nav ul .sidebar-item .sidebar-link.active *,
.sidebar-nav ul .sidebar-item.selected > .sidebar-link * {
  color: #fff !important;
}

/* cards / modals / dropdowns */
.card,
.modal-content,
.dropdown-menu,
.profile-dropdown,
.table-responsive,
.dataTables_wrapper,
.content-dd,
.message-body,
.simplebar-content-wrapper {
  background: #fff !important;
  color: var(--ios-text) !important;
  border-color: var(--ios-border) !important;
}

.card {
  border: 1px solid var(--ios-border) !important;
  box-shadow: 0 14px 36px rgba(37, 99, 235, .08) !important;
}

.modal-header,
.modal-footer,
.modal-body {
  background: #fff !important;
  color: var(--ios-text) !important;
  border-color: var(--ios-border) !important;
}

.modal-backdrop.show {
  background: rgba(37, 99, 235, .18) !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.page-title,
.fw-semibold,
.fw-bolder {
  color: var(--ios-text) !important;
}

p, span, label, .text-muted {
  color: var(--ios-muted) !important;
}

a, .text-primary {
  color: var(--ios-blue) !important;
}

/* remove dark/black utility inserts */
.bg-dark,
.text-bg-dark,
.bg-black,
.text-bg-black,
.bg-inverse,
.text-bg-inverse,
.badge.bg-dark,
.badge.text-bg-dark {
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-sky)) !important;
  color: #fff !important;
  border: 0 !important;
}

.text-dark,
.text-black {
  color: var(--ios-text) !important;
}

.bg-light,
.text-bg-light {
  background: #f8fbff !important;
  color: var(--ios-text) !important;
  border: 1px solid var(--ios-border) !important;
}

.border-bottom,
.border-top,
.border-start,
.border-end,
.border {
  border-color: var(--ios-border) !important;
}

/* forms */
.form-control,
.form-select,
input,
select,
textarea {
  background: #fff !important;
  color: var(--ios-text) !important;
  border-color: #b9d4ff !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ios-sky) !important;
  box-shadow: 0 0 0 .2rem rgba(56, 189, 248, .16) !important;
}

.form-check-input {
  background-color: #fff !important;
  border-color: #b9d4ff !important;
}

.form-check-input:checked {
  background-color: var(--ios-blue) !important;
  border-color: var(--ios-blue) !important;
}

/* tables */
table,
.table,
.dataTable {
  background: #fff !important;
  color: var(--ios-text) !important;
  border-color: var(--ios-border) !important;
}

table thead,
table thead tr,
table thead th,
.table thead,
.table thead tr,
.table thead th {
  background: #f8fbff !important;
  color: var(--ios-text) !important;
  border-color: var(--ios-border) !important;
}

table tbody,
table tbody tr,
table tbody td,
.table tbody,
.table tbody tr,
.table tbody td,
.dataTable tbody,
.dataTable tbody tr,
.dataTable tbody td,
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > *,
tr.odd,
tr.even,
td.dataTables_empty {
  background: #fff !important;
  color: var(--ios-text) !important;
  border-color: var(--ios-border) !important;
  box-shadow: none !important;
}

.table-hover > tbody > tr:hover > * {
  background: #eef6ff !important;
  color: var(--ios-text) !important;
}

.dataTables_empty,
.dataTables_info,
.dataTables_paginate,
.paginate_button {
  color: var(--ios-text) !important;
  background: #fff !important;
}

/* buttons */
.dropdown-toggle.btn,
.btn.dropdown-toggle,
.btn-group > .btn,
.actions .btn,
.btn-outline-primary,
.btn-outline-warning {
  background: #fff !important;
  color: var(--ios-blue) !important;
  border: 1px solid var(--ios-border) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .08) !important;
}

.dropdown-toggle.btn span,
.btn.dropdown-toggle span,
.btn-group > .btn span,
.actions .btn span {
  color: var(--ios-blue) !important;
}

.btn-primary,
.page-item.active .page-link {
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-sky)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

.btn-primary * {
  color: #fff !important;
}

.page-link,
.dataTables_paginate a {
  background: #fff !important;
  color: var(--ios-blue) !important;
  border-color: var(--ios-border) !important;
}

.badge.bg-success {
  background: #10b981 !important;
  color: #fff !important;
}

.badge.bg-danger {
  background: #ef4444 !important;
  color: #fff !important;
}

.badge.bg-warning {
  background: #f59e0b !important;
  color: #fff !important;
}

.badge.bg-info {
  background: var(--ios-sky) !important;
  color: #fff !important;
}

.badge.bg-primary {
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-sky)) !important;
  color: #fff !important;
}

/* About / dark blocks inside cards */
.card .bg-dark,
.card .text-bg-dark,
.card [class*="bg-dark"],
.card .bg-black,
.card .text-bg-black {
  background: #f8fbff !important;
  color: var(--ios-text) !important;
  border: 1px solid var(--ios-border) !important;
}

.card .bg-dark *,
.card .text-bg-dark *,
.card [class*="bg-dark"] *,
.card .bg-black *,
.card .text-bg-black * {
  color: var(--ios-text) !important;
}

.preloader {
  background: rgba(234, 243, 255, .95) !important;
}

.nav-link,
.navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link {
  color: var(--ios-text) !important;
}

.nav-icon-hover:hover,
.sidebartoggler:hover {
  background: #eef6ff !important;
  color: var(--ios-blue) !important;
}

.swal2-popup {
  background: #fff !important;
  color: var(--ios-text) !important;
  border: 1px solid var(--ios-border) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown {
  background: #fff !important;
  color: var(--ios-text) !important;
  border-color: var(--ios-border) !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: #eef6ff !important;
  color: var(--ios-blue) !important;
}

.summernote,
.note-editor,
.note-toolbar {
  background: #fff !important;
  color: var(--ios-text) !important;
  border-color: var(--ios-border) !important;
}