/*
 * iKhairat PRO PWA UI refresh.
 * Scoped under .pwa-ui so print templates and admin pages stay untouched.
 */

:root {
  --ik-green-900: #163b2d;
  --ik-green-800: #24523f;
  --ik-green-700: #2f6f54;
  --ik-green-100: #eaf6ef;
  --ik-gold-600: #c89b36;
  --ik-gold-100: #fff4d6;
  --ik-blue-700: #315b9c;
  --ik-red-600: #d94b4b;
  --ik-ink: #202832;
  --ik-muted: #6d7682;
  --ik-line: #e4e9ef;
  --ik-surface: #ffffff;
  --ik-page: #f4f7f5;
  --ik-shadow: 0 10px 24px rgba(22, 59, 45, 0.09);
  --ik-shadow-soft: 0 6px 16px rgba(32, 40, 50, 0.07);
  --fimobile-theme-color: var(--ik-green-800);
  --fimobile-theme-color-2: var(--ik-green-900);
  --fimobile-theme-color-light: var(--ik-green-100);
  --fimobile-theme-bordercolor: var(--ik-line);
  --fimobile-footer-text-active: var(--ik-green-800);
  --fimobile-sidebar: var(--ik-green-900);
  --fimobile-page-bg-1: #f6f8f5;
  --fimobile-page-bg-2: #eef4f8;
  --fimobile-page-link: var(--ik-green-800);
}

.pwa-ui {
  color: var(--ik-ink);
  background: linear-gradient(180deg, #f7faf7 0%, #eef4f8 100%);
  font-family: "Nunito", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.pwa-ui .main-container,
.pwa-ui main > .container,
.pwa-ui main > .container-fluid > .row > [class*="col-"].mx-auto {
  max-width: 520px;
}

.pwa-ui .main-color-bg,
.pwa-ui .bg-light {
  background: transparent !important;
}

.pwa-ui .text-color-theme,
.pwa-ui a {
  color: var(--ik-green-800);
}

.pwa-ui a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.pwa-ui h1,
.pwa-ui h2,
.pwa-ui h3,
.pwa-ui h4,
.pwa-ui h5,
.pwa-ui h6 {
  color: var(--ik-ink);
  letter-spacing: 0;
}

.pwa-ui .title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ik-ink);
  margin-bottom: 0;
}

.pwa-ui .header {
  min-height: 64px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: 10px;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(228, 233, 239, 0.9);
  box-shadow: 0 6px 18px rgba(32, 40, 50, 0.06) !important;
  backdrop-filter: blur(12px);
}

.pwa-ui .header .btn-44,
.pwa-ui .btn-44 {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ik-line);
  background: #fff;
  color: var(--ik-green-800);
  box-shadow: 0 4px 12px rgba(32, 40, 50, 0.06);
}

.pwa-ui .logo-small {
  justify-content: center;
  gap: 8px;
}

.pwa-ui .logo-small img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.pwa-ui .logo-small h5 {
  font-size: 1rem;
  font-weight: 900;
  color: var(--ik-green-900);
}

.pwa-ui .loader-wrap {
  color: #fff;
  background: transparent;
}

.pwa-ui .loader-wrap:after {
  background: linear-gradient(145deg, var(--ik-green-900) 0%, var(--ik-green-800) 62%, #1f4a39 100%);
}

.pwa-ui .loader-cube-wrap {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  animation-duration: 2.2s;
}

.pwa-ui .loader-cube-wrap.loader-cube-animate {
  animation-duration: 2.2s !important;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1) !important;
}

.pwa-ui .loader-cube-wrap img {
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.2));
}

.pwa-ui .loader-wrap p {
  color: rgba(255, 255, 255, 0.88);
}

.pwa-ui .card,
.pwa-ui .list-group-item,
.pwa-ui .toast,
.pwa-ui .offcanvas {
  border-radius: 8px !important;
}

.pwa-ui .card {
  border: 1px solid rgba(228, 233, 239, 0.92) !important;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--ik-shadow-soft) !important;
  overflow: hidden;
}

.pwa-ui .card-body {
  padding: 1rem;
}

.pwa-ui .theme-radial-gradient,
.pwa-ui .bg-default,
.pwa-ui .btn-default {
  background: var(--ik-green-800) !important;
  color: #fff !important;
}

.pwa-ui .theme-radial-gradient {
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.pwa-ui .dark-bg {
  background: var(--ik-green-900) !important;
}

.pwa-ui .btn {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 800;
}

.pwa-ui .btn-default,
.pwa-ui .btn-primary {
  border: 0;
  background: var(--ik-green-800) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(36, 82, 63, 0.22) !important;
}

.pwa-ui .btn-default:hover,
.pwa-ui .btn-default:focus,
.pwa-ui .btn-primary:hover,
.pwa-ui .btn-primary:focus {
  background: var(--ik-green-700) !important;
  color: #fff !important;
}

.pwa-ui .btn-outline-dark,
.pwa-ui .btn-light {
  border-color: var(--ik-line);
}

.pwa-ui .form-control,
.pwa-ui .form-select,
.pwa-ui textarea.form-control {
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid var(--ik-line);
  background-color: #fff;
  color: var(--ik-ink);
  box-shadow: none;
}

.pwa-ui textarea.form-control {
  min-height: 92px;
}

.pwa-ui .form-control:focus,
.pwa-ui .form-select:focus {
  border-color: var(--ik-green-700);
  box-shadow: 0 0 0 0.18rem rgba(47, 111, 84, 0.15);
}

.pwa-ui .form-floating > label,
.pwa-ui .form-label,
.pwa-ui .form-control-label {
  color: var(--ik-muted);
  font-weight: 700;
}

.pwa-ui .alert {
  border: 0;
  border-radius: 8px;
  box-shadow: var(--ik-shadow-soft);
}

.pwa-ui .alert-success {
  background: var(--ik-green-100);
  color: var(--ik-green-900);
}

.pwa-ui .alert-warning {
  background: var(--ik-gold-100);
  color: #7b5a16;
}

.pwa-ui .alert-danger {
  background: #fff0f0;
  color: #8f2424;
}

.pwa-ui .avatar {
  flex: 0 0 auto;
}

.pwa-ui .avatar.bg-primary,
.pwa-ui .alert-primary,
.pwa-ui .text-primary {
  color: var(--ik-blue-700) !important;
}

.pwa-ui .avatar.bg-primary {
  background: var(--ik-green-800) !important;
  color: #fff !important;
}

.pwa-ui .alert-success.text-success,
.pwa-ui .text-success {
  color: var(--ik-green-700) !important;
}

.pwa-ui .alert-warning.text-warning,
.pwa-ui .text-warning {
  color: var(--ik-gold-600) !important;
}

.pwa-ui .list-group {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--ik-shadow-soft);
}

.pwa-ui .list-group-item {
  margin-bottom: 8px;
  border: 1px solid var(--ik-line) !important;
  background: #fff;
}

.pwa-ui .badge {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0;
}

.pwa-ui .bg-danger,
.pwa-ui .text-danger {
  color: var(--ik-red-600) !important;
}

.pwa-ui .bg-danger {
  background: var(--ik-red-600) !important;
  color: #fff !important;
}

.pwa-ui .cardswiper {
  padding: 2px 15px 8px;
}

.pwa-ui .cardswiper .card {
  min-height: 178px;
  border: 0 !important;
  box-shadow: var(--ik-shadow) !important;
}

.pwa-ui .cardswiper .theme-radial-gradient {
  background: linear-gradient(135deg, var(--ik-green-800) 0%, #368266 62%, var(--ik-gold-600) 100%) !important;
}

.pwa-ui .cardswiper .dark-bg {
  background: linear-gradient(135deg, var(--ik-green-900) 0%, #253949 100%) !important;
}

.pwa-ui .footer {
  left: 10px;
  right: 10px;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(228, 233, 239, 0.96);
  box-shadow: 0 12px 30px rgba(32, 40, 50, 0.14);
  backdrop-filter: blur(14px);
}

.pwa-ui .footer .container {
  padding-left: 6px;
  padding-right: 6px;
}

.pwa-ui .footer .nav {
  align-items: center;
}

.pwa-ui .footer .nav-link {
  min-height: 58px;
  color: var(--ik-muted);
  border-radius: 999px;
  font-weight: 800;
}

.pwa-ui .footer .nav-link.active,
.pwa-ui .footer .nav-item.active > .nav-link {
  color: var(--ik-green-800);
  background: var(--ik-green-100);
}

.pwa-ui .footer .nav-icon {
  font-size: 1.2rem;
}

.pwa-ui .footer .centerbutton .theme-radial-gradient {
  width: 58px;
  height: 58px;
  box-shadow: 0 10px 20px rgba(36, 82, 63, 0.24);
}

.pwa-ui .footer .centerbutton.active .theme-radial-gradient {
  background: var(--ik-gold-600) !important;
}

.pwa-ui .nav-menu-popover {
  border-radius: 8px;
  border: 1px solid var(--ik-line);
  box-shadow: 0 16px 36px rgba(32, 40, 50, 0.14);
}

.pwa-ui .sidebar.dark-bg {
  background: var(--ik-green-900) !important;
}

.pwa-ui .sidebar .nav-link {
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
}

.pwa-ui .sidebar .nav-link.active,
.pwa-ui .sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.pwa-ui .sidebar .card {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.pwa-ui[data-page="signin"],
.pwa-ui[data-page="landing"],
.pwa-ui[data-page="forgot-password"] {
  background: linear-gradient(180deg, #fbfcfb 0%, #eef5f1 100%);
}

.pwa-ui[data-page="signin"] main,
.pwa-ui[data-page="forgot-password"] main {
  padding-bottom: 18px;
}

.pwa-ui[data-page="signin"] h1,
.pwa-ui[data-page="forgot-password"] h1 {
  font-size: clamp(1.65rem, 7vw, 2.2rem);
  font-weight: 900;
}

.pwa-ui[data-page="landing"] .swiper-slide img {
  max-height: 260px;
  object-fit: contain;
}

.pwa-ui[data-page="landing"] h1 {
  font-size: clamp(1.7rem, 7vw, 2.35rem);
  font-weight: 900;
}

.pwa-ui .skipbtn {
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ik-green-800);
  box-shadow: var(--ik-shadow-soft);
}

.pwa-ui .sticky-footer,
.pwa-ui .footer-info {
  color: var(--ik-muted);
}

.pwa-ui .table {
  border-color: var(--ik-line);
}

.pwa-ui .table > :not(caption) > * > * {
  padding: 0.85rem;
}

@media (min-width: 768px) {
  .pwa-ui .footer {
    left: 50%;
    right: auto;
    width: min(520px, calc(100% - 24px));
    transform: translateX(-50%);
  }

  .pwa-ui .cardswiper {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 360px) {
  .pwa-ui .footer .nav-text {
    font-size: 0.64rem;
  }

  .pwa-ui .footer .nav-link {
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-ui *,
  .pwa-ui *::before,
  .pwa-ui *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}