/* KREP Modern UI Layer
   Loaded after core/theme CSS to push Perfex toward a premium SaaS look.
   Scoped to body classes to avoid unexpected public-site changes. */

:root.krep-modern {
  --krep-font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --krep-ink: #0b1220;
  --krep-muted: rgba(15, 23, 42, 0.70);
  --krep-border: rgba(15, 23, 42, 0.10);
  --krep-surface: rgba(255, 255, 255, 0.92);
  --krep-surface-solid: #ffffff;
  --krep-surface-2: rgba(248, 250, 252, 0.96);
  --krep-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
  --krep-shadow: 0 24px 80px rgba(2, 6, 23, 0.16);
  --krep-radius: 18px;
  --krep-radius-sm: 14px;
  --krep-ring: rgba(37, 99, 235, 0.16);
  --krep-primary: #2563eb;
  --krep-primary-2: #1d4ed8;
  --krep-accent: #22d3ee;
  --krep-success: #16a34a;
  --krep-warning: #f59e0b;
  --krep-danger: #ef4444;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Global typography */
body.admin.krep-modern-ready,
body.customers.krep-modern-ready,
body.customers_login.krep-modern-ready,
body.login_admin.krep-modern-ready {
  font-family: var(--krep-font) !important;
  color: var(--krep-muted);
}

body.admin h1, body.admin h2, body.admin h3, body.admin h4, body.admin h5,
body.customers h1, body.customers h2, body.customers h3, body.customers h4, body.customers h5 {
  color: rgba(11, 18, 32, 0.92);
  letter-spacing: -0.03em;
}

/* Smooth page entry (subtle) */
body.admin.krep-modern-ready .content,
body.customers.krep-modern-ready #wrapper,
body.customers_login.krep-modern-ready #wrapper {
  animation: krepFadeUp 260ms ease both;
}
@keyframes krepFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Admin: background gets a bit more "premium" */
body.admin.krep-modern-ready {
  background:
    radial-gradient(1200px 700px at 12% 0%, rgba(37, 99, 235, 0.14), transparent 60%),
    radial-gradient(1000px 600px at 88% 10%, rgba(34, 211, 238, 0.12), transparent 55%),
    radial-gradient(900px 520px at 55% 100%, rgba(99, 102, 241, 0.10), transparent 55%),
    linear-gradient(180deg, #f8fafc, #f1f5f9);
}

/* Top bar: stronger product feel */
body.admin.krep-modern-ready #header {
  border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}
body.admin.krep-modern-ready #header ul.nav.navbar-nav > li > a {
  font-weight: 900 !important;
}

/* Sidebar: sharper active indicator + hover lift */
body.admin.krep-modern-ready #menu.sidebar,
body.admin.krep-modern-ready #setup-menu-wrapper.sidebar {
  border-right-color: rgba(148, 163, 184, 0.18) !important;
}

body.admin.krep-modern-ready #side-menu > li > a {
  border-radius: 14px !important;
}

body.admin.krep-modern-ready #side-menu > li.active > a,
body.admin.krep-modern-ready #side-menu > li.krep-soft-active > a {
  background: linear-gradient(90deg, rgba(96,165,250,0.26), rgba(255,255,255,0.08)) !important;
  border-color: rgba(96, 165, 250, 0.25) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.admin.krep-modern-ready #side-menu > li:not(.active) > a:hover {
    transform: translateY(-1px);
  }
}

/* Cards/panels: more modern spacing and shadow */
body.admin.krep-modern-ready .panel,
body.admin.krep-modern-ready .panel_s,
body.customers.krep-modern-ready .panel,
body.customers.krep-modern-ready .panel_s {
  border-radius: var(--krep-radius) !important;
  border-color: var(--krep-border) !important;
  box-shadow: var(--krep-shadow-sm) !important;
  background: var(--krep-surface) !important;
  backdrop-filter: blur(8px);
}

@media (hover: hover) and (pointer: fine) {
  body.admin.krep-modern-ready .panel:hover,
  body.admin.krep-modern-ready .panel_s:hover {
    box-shadow: var(--krep-shadow) !important;
    transform: translateY(-2px);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    border-color: rgba(37, 99, 235, 0.16) !important;
  }
}

/* Buttons: fix contrast everywhere (blue button issue) */
body.admin.krep-modern-ready .btn-primary,
body.customers.krep-modern-ready .btn-primary,
body.customers_login.krep-modern-ready .btn-primary,
body.login_admin.krep-modern-ready .btn-primary {
  color: #fff !important;
}
body.admin.krep-modern-ready .btn-info,
body.admin.krep-modern-ready .btn-success,
body.admin.krep-modern-ready .btn-warning,
body.admin.krep-modern-ready .btn-danger {
  color: #fff !important;
}
body.admin.krep-modern-ready .btn,
body.customers.krep-modern-ready .btn {
  border-radius: var(--krep-radius-sm) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

@media (hover: hover) and (pointer: fine) {
  body.admin.krep-modern-ready .btn:hover,
  body.customers.krep-modern-ready .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(2, 6, 23, 0.12);
  }
}

/* Inputs: stronger focus ring + nicer control background */
body.admin.krep-modern-ready .form-control,
body.customers.krep-modern-ready .form-control,
body.customers_login.krep-modern-ready .form-control,
body.login_admin.krep-modern-ready .form-control {
  border-radius: 14px !important;
  border-color: rgba(148, 163, 184, 0.72) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: rgba(11, 18, 32, 0.92) !important;
}
body.admin.krep-modern-ready .form-control:focus,
body.customers.krep-modern-ready .form-control:focus,
body.customers_login.krep-modern-ready .form-control:focus,
body.login_admin.krep-modern-ready .form-control:focus {
  box-shadow: 0 0 0 4px var(--krep-ring) !important;
  border-color: rgba(37, 99, 235, 0.60) !important;
}

/* Dropdown menus: smooth and clean */
body.admin.krep-modern-ready .dropdown-menu,
body.customers.krep-modern-ready .dropdown-menu {
  border-radius: 16px !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 30px 80px rgba(2, 6, 23, 0.22) !important;
  padding: 6px !important;
}
body.admin.krep-modern-ready .dropdown-menu > li > a {
  border-radius: 12px !important;
}

/* Tables: modern header + hover */
body.admin.krep-modern-ready .table > thead > tr > th {
  background: rgba(248, 250, 252, 0.96) !important;
  font-weight: 950 !important;
}
body.admin.krep-modern-ready .table-hover > tbody > tr:hover {
  background: rgba(37, 99, 235, 0.06) !important;
}

/* Client portal navbar: slightly more SaaS */
body.customers.krep-modern-ready .navbar.navbar-default {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Register page (bodyclass=register): ensure it feels like the auth product UI */
body.customers.register.krep-modern-ready {
  background:
    radial-gradient(1000px 600px at 15% 10%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(900px 520px at 85% 15%, rgba(34, 211, 238, 0.14), transparent 60%),
    linear-gradient(180deg, #f8fafc, #eef2ff);
}