/* ============================================================
   PERMITPRO PREMIUM THEME — Visual Redesign Override
   Designed to be injected over compiled Tailwind build.
   Preserves all functionality, forms, logic.
   ============================================================ */

/* --- PREMIUM FONTS --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* --- ROOT DESIGN TOKENS --- */
:root {
  --radius: 0.75rem;
  
  /* Premium blue palette */
  --pp-primary: #1A56FF;
  --pp-primary-dark: #0038D1;
  --pp-primary-deeper: #002BA8;
  --pp-primary-glow: rgba(26, 86, 255, 0.35);
  --pp-primary-soft: rgba(26, 86, 255, 0.08);

  /* Navy dark palette */
  --pp-navy-900: #060B19;
  --pp-navy-800: #0A1228;
  --pp-navy-700: #0E1A38;
  --pp-navy-600: #142248;
  
  /* Neutral palette */
  --pp-slate-50: #F8FAFF;
  --pp-slate-100: #EEF2FF;
  --pp-slate-200: #DDE5FF;
  --pp-surface: #FFFFFF;
  --pp-border: rgba(26, 86, 255, 0.12);
  
  /* Accent colors */
  --pp-gold: #F5A623;
  --pp-success: #0ECB81;
  --pp-warning: #F59E0B;
  --pp-error: #EF4444;

  /* Typography */
  --pp-font-display: 'Outfit', sans-serif;
  --pp-font-body: 'DM Sans', sans-serif;

  /* Shadows */
  --pp-shadow-sm: 0 1px 3px rgba(6, 11, 25, 0.06), 0 1px 2px rgba(6, 11, 25, 0.04);
  --pp-shadow-md: 0 4px 16px rgba(6, 11, 25, 0.08), 0 2px 6px rgba(6, 11, 25, 0.05);
  --pp-shadow-lg: 0 12px 40px rgba(6, 11, 25, 0.12), 0 4px 12px rgba(6, 11, 25, 0.06);
  --pp-shadow-xl: 0 24px 60px rgba(6, 11, 25, 0.16), 0 8px 20px rgba(6, 11, 25, 0.08);
  --pp-shadow-blue: 0 8px 30px var(--pp-primary-glow), 0 2px 8px rgba(26, 86, 255, 0.2);
  --pp-shadow-blue-lg: 0 16px 50px var(--pp-primary-glow), 0 4px 16px rgba(26, 86, 255, 0.3);
}

/* --- GLOBAL BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--pp-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #FFFFFF;
  color: #0E1A38;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pp-font-display) !important;
  letter-spacing: -0.02em;
}

/* --- RESTORE BORDER RADIUS (compiled CSS sets all to 0) --- */
.rounded          { border-radius: 0.375rem !important; }
.rounded-sm       { border-radius: 0.25rem !important; }
.rounded-md       { border-radius: 0.5rem !important; }
.rounded-lg       { border-radius: 0.75rem !important; }
.rounded-xl       { border-radius: 1rem !important; }
.rounded-2xl      { border-radius: 1.25rem !important; }
.rounded-3xl      { border-radius: 1.75rem !important; }
.rounded-full     { border-radius: 9999px !important; }
.rounded-none     { border-radius: 0 !important; }
.rounded-t-lg     { border-top-left-radius: 0.75rem !important; border-top-right-radius: 0.75rem !important; }
.rounded-b-lg     { border-bottom-left-radius: 0.75rem !important; border-bottom-right-radius: 0.75rem !important; }
.rounded-r-md     { border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; }
.rounded-r-lg     { border-top-right-radius: 0.75rem !important; border-bottom-right-radius: 0.75rem !important; }
.rounded-l-md     { border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; }
.rounded-tl-sm    { border-top-left-radius: 0.25rem !important; }
.rounded-bl-full  { border-bottom-left-radius: 9999px !important; }
.rounded-t-\[10px\] { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; }
.rounded-\[20px\] { border-radius: 20px !important; }
.rounded-\[24px\] { border-radius: 24px !important; }

/* Radix UI & group variants */
.group-data-\[variant\=floating\]\/group-data-\[variant\=floating\]\.rounded-lg { border-radius: 0.75rem !important; }
[class*="rounded-"] { border-radius: inherit; }

/* --- NAVBAR / HEADER --- */
nav,
header,
[class*="mainpagelayout"] > div:first-child,
.sticky.top-0,
[class*="navbar"],
[class*="header"] {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Light navbar */
.bg-white.sticky,
.bg-white.fixed,
nav.bg-white {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(26, 86, 255, 0.1) !important;
  box-shadow: 0 1px 20px rgba(6, 11, 25, 0.06) !important;
}

/* Dark navbar */
.bg-\[\#060F1D\].sticky,
.bg-\[\#0A1629\].sticky,
nav.bg-\[\#060F1D\],
nav.bg-\[\#0A1629\] {
  background: rgba(6, 11, 25, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3) !important;
}

/* --- BUTTONS — Primary blue --- */
button,
[type="button"],
[type="submit"],
[role="button"],
a[class*="btn"] {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Primary blue button */
.bg-blue-600,
.bg-\[\#0066FF\],
.bg-\[\#0142FF\],
.bg-\[\#011aff\] {
  background: linear-gradient(135deg, var(--pp-primary) 0%, var(--pp-primary-dark) 100%) !important;
  box-shadow: var(--pp-shadow-blue) !important;
  border: none !important;
}

.bg-blue-600:hover,
.bg-\[\#0066FF\]:hover,
.bg-\[\#0142FF\]:hover,
.bg-\[\#011aff\]:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-\[\#0052CC\]:hover,
.hover\:bg-\[\#0035CC\]:hover {
  background: linear-gradient(135deg, #2B65FF 0%, #0038D1 100%) !important;
  box-shadow: var(--pp-shadow-blue-lg) !important;
  transform: translateY(-1px) !important;
}

.bg-blue-600:active,
.bg-\[\#0066FF\]:active {
  transform: translateY(0) !important;
  box-shadow: var(--pp-shadow-blue) !important;
}

/* Secondary/outline button */
.border-blue-500,
.border-blue-600,
.border-\[\#0066FF\] {
  border-color: var(--pp-primary) !important;
}

.border-blue-500:hover,
.border-blue-600:hover {
  border-color: var(--pp-primary-dark) !important;
}

/* Ghost buttons */
.hover\:bg-blue-50:hover,
.hover\:bg-blue-100:hover {
  background: var(--pp-primary-soft) !important;
}

/* Green success button */
.bg-green-600 {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3) !important;
}

/* Red/danger button */
.bg-red-500,
.bg-red-600 {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25) !important;
}

/* --- CARD COMPONENTS --- */
.bg-white.shadow-md,
.bg-white.shadow-lg,
.bg-white.shadow-xl,
.bg-white.shadow-sm {
  box-shadow: var(--pp-shadow-md) !important;
  border: 1px solid rgba(26, 86, 255, 0.06) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.bg-white.shadow-md:hover,
.bg-white.shadow-lg:hover {
  box-shadow: var(--pp-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Feature / stat cards */
.bg-white.border,
.bg-white.border-slate-200,
.bg-white.border-gray-200 {
  border-color: rgba(26, 86, 255, 0.08) !important;
  box-shadow: var(--pp-shadow-sm) !important;
}

/* Elevated cards */
[class*="card"],
.shadow-lg.bg-white,
.shadow-xl.bg-white {
  box-shadow: var(--pp-shadow-lg) !important;
}

/* Dashboard cards */
.bg-white.p-4,
.bg-white.p-5,
.bg-white.p-6 {
  border: 1px solid rgba(26, 86, 255, 0.06) !important;
}

/* Blue/colored cards */
.bg-blue-50,
.bg-\[\#f0f7ff\],
.bg-\[\#e6f0ff\] {
  background: linear-gradient(135deg, #EEF3FF 0%, #F5F8FF 100%) !important;
  border: 1px solid rgba(26, 86, 255, 0.12) !important;
}

/* Dark feature cards */
.bg-\[\#060F1D\] .bg-white\/10,
.bg-\[\#0A1629\] .bg-white\/10 {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* --- HERO / DARK SECTIONS --- */
.bg-\[\#060F1D\],
.bg-\[\#0A1629\] {
  background: linear-gradient(160deg, #060B19 0%, #0A1328 40%, #0C1840 100%) !important;
}

/* Hero gradient overlays */
.from-\[\#0066FF\].to-\[\#004bbd\],
.from-blue-600.to-blue-800,
.from-\[\#011aff\].to-\[\#004bbd\] {
  background: linear-gradient(135deg, var(--pp-primary) 0%, var(--pp-primary-dark) 50%, var(--pp-primary-deeper) 100%) !important;
}

/* Gradient sections */
.bg-gradient-to-br.from-blue-900,
.bg-gradient-to-r.from-blue-900 {
  background: linear-gradient(135deg, #060B19 0%, #0A1328 60%, #091840 100%) !important;
}

/* Light gradient sections */
.bg-gradient-to-br.from-blue-50,
.bg-gradient-to-b.from-blue-50,
.bg-gradient-to-r.from-blue-50 {
  background: linear-gradient(135deg, #F5F8FF 0%, #EEF3FF 60%, #F8FAFF 100%) !important;
}

/* --- FORM INPUTS --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  border-radius: 0.5rem !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #FAFBFF !important;
  color: #0E1A38 !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
  font-family: var(--pp-font-body) !important;
  font-size: 0.9rem !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--pp-primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 255, 0.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* Labels */
label {
  font-family: var(--pp-font-body) !important;
  font-weight: 500 !important;
  color: #1E2A45 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.01em !important;
}

/* --- SELECT COMPONENTS (Radix/shadcn) --- */
[class*="select"],
[data-radix-select-trigger] {
  border-radius: 0.5rem !important;
  border: 1.5px solid #E2E8F0 !important;
  transition: border-color 0.2s ease !important;
}

[class*="select"]:focus,
[data-radix-select-trigger]:focus {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 255, 0.12) !important;
}

/* --- DROPDOWN MENUS --- */
[class*="dropdown"],
[data-radix-popper-content-wrapper] > div,
[role="menu"],
[role="listbox"] {
  border-radius: 0.75rem !important;
  border: 1px solid rgba(26, 86, 255, 0.1) !important;
  box-shadow: var(--pp-shadow-xl) !important;
  backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
}

/* --- MODALS / DIALOGS --- */
[role="dialog"],
[data-radix-dialog-content] {
  border-radius: 1.25rem !important;
  box-shadow: var(--pp-shadow-xl) !important;
  border: 1px solid rgba(26, 86, 255, 0.08) !important;
}

/* Dialog overlay */
[data-radix-dialog-overlay] {
  background: rgba(6, 11, 25, 0.65) !important;
  backdrop-filter: blur(4px) !important;
}

/* --- BADGES / PILLS --- */
.bg-blue-100 span,
.text-blue-800,
[class*="badge"] {
  border-radius: 9999px !important;
}

.bg-blue-100 {
  background: linear-gradient(135deg, #EEF3FF, #E8EFFF) !important;
}

/* Status badges */
.bg-green-100 { background: linear-gradient(135deg, #ECFDF5, #D1FAE5) !important; }
.bg-red-100   { background: linear-gradient(135deg, #FEF2F2, #FEE2E2) !important; }
.bg-amber-100 { background: linear-gradient(135deg, #FFFBEB, #FEF3C7) !important; }

/* --- TABLE STYLING --- */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
}

thead {
  background: linear-gradient(90deg, #F5F8FF, #EEF3FF) !important;
}

thead th {
  font-family: var(--pp-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #4F6090 !important;
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid rgba(26, 86, 255, 0.1) !important;
}

tbody tr {
  transition: background 0.15s ease !important;
}

tbody tr:hover {
  background: #F8FAFF !important;
}

tbody td {
  padding: 0.875rem 1rem !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
  font-size: 0.9rem !important;
  color: #1E2A45 !important;
}

tbody tr:last-child td {
  border-bottom: none !important;
}

/* --- SIDEBAR --- */
[data-sidebar="sidebar"],
[class*="sidebar"],
.w-\[--sidebar-width\] {
  border-right: 1px solid rgba(26, 86, 255, 0.08) !important;
  background: #FAFBFF !important;
}

/* Sidebar nav items */
[data-sidebar="menu-button"] {
  border-radius: 0.625rem !important;
  transition: all 0.18s ease !important;
}

[data-sidebar="menu-button"]:hover {
  background: var(--pp-primary-soft) !important;
  color: var(--pp-primary) !important;
}

[data-sidebar="menu-button"][data-state="active"] {
  background: linear-gradient(135deg, rgba(26, 86, 255, 0.12), rgba(26, 86, 255, 0.08)) !important;
  color: var(--pp-primary) !important;
}

/* --- TABS --- */
[role="tablist"] {
  background: #F0F4FF !important;
  border-radius: 0.75rem !important;
  padding: 0.25rem !important;
}

[role="tab"] {
  border-radius: 0.5rem !important;
  transition: all 0.2s ease !important;
  font-family: var(--pp-font-body) !important;
  font-weight: 500 !important;
}

[role="tab"][data-state="active"],
[data-state="active"][role="tab"] {
  background: #FFFFFF !important;
  color: var(--pp-primary) !important;
  box-shadow: var(--pp-shadow-sm) !important;
}

/* --- PROGRESS BAR (NProgress) --- */
#nprogress .bar {
  background: linear-gradient(90deg, var(--pp-primary), #4F7BFF) !important;
  height: 3px !important;
  box-shadow: 0 0 12px rgba(26, 86, 255, 0.6) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--pp-primary), 0 0 5px var(--pp-primary) !important;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #94A3B8, #CBD5E1);
  border-radius: 4px;
  border: 2px solid #F1F5F9;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--pp-primary), var(--pp-primary-dark));
}

/* --- ALERTS / TOASTS --- */
[class*="alert"],
[class*="toast"],
[role="alert"] {
  border-radius: 0.75rem !important;
  border-left: 4px solid var(--pp-primary) !important;
}

/* --- STATS / METRIC CARDS --- */
.border-l-blue-500,
.border-l-blue-600 {
  border-left-color: var(--pp-primary) !important;
  border-left-width: 4px !important;
}

/* --- SECTION DIVIDERS --- */
hr,
.border-b,
.divide-y > * + * {
  border-color: rgba(226, 232, 240, 0.7) !important;
}

/* --- LINKS --- */
a {
  transition: color 0.18s ease !important;
}

.text-blue-600,
.text-\[\#0066FF\],
.text-\[\#011aff\] {
  color: var(--pp-primary) !important;
}

.hover\:text-blue-600:hover,
.hover\:text-\[\#0066FF\]:hover {
  color: var(--pp-primary-dark) !important;
}

/* --- CHECKBOXES & RADIOS --- */
.custom-checkbox-root {
  border-radius: 0.375rem !important;
  border: 2px solid #CBD5E1 !important;
  width: 20px !important;
  height: 20px !important;
  transition: all 0.18s ease !important;
}

.custom-checkbox-root[data-state="checked"] {
  background: var(--pp-primary) !important;
  border-color: var(--pp-primary) !important;
  box-shadow: 0 2px 8px rgba(26, 86, 255, 0.35) !important;
}

/* --- SWITCH TOGGLE --- */
[role="switch"] {
  border-radius: 9999px !important;
}

[role="switch"][data-state="checked"] {
  background: var(--pp-primary) !important;
}

/* --- BREADCRUMBS --- */
[aria-label="breadcrumb"] {
  font-family: var(--pp-font-body) !important;
  font-size: 0.875rem !important;
}

/* --- SECTION BACKGROUNDS --- */
.bg-slate-50,
.bg-\[\#F8FAFC\] {
  background: linear-gradient(135deg, #F8FAFF 0%, #F0F4FF 100%) !important;
}

/* --- TYPOGRAPHY HIERARCHY --- */
.text-4xl,
.text-5xl,
.text-6xl {
  font-family: var(--pp-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.1 !important;
}

.text-3xl {
  font-family: var(--pp-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

.text-2xl,
.text-xl {
  font-family: var(--pp-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* Dark section text */
.bg-\[\#060F1D\] .text-white,
.bg-\[\#0A1629\] .text-white {
  color: #FFFFFF !important;
}

.bg-\[\#060F1D\] .text-blue-300,
.bg-\[\#0A1629\] .text-blue-300 {
  color: #7EB5FF !important;
}

.bg-\[\#060F1D\] .text-slate-300,
.bg-\[\#0A1629\] .text-slate-300,
.bg-\[\#060F1D\] .text-gray-300,
.bg-\[\#0A1629\] .text-gray-300 {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* --- PREMIUM DECORATIVE ELEMENTS --- */
/* Blue glow orb effect on hero sections */
.bg-\[\#060F1D\]::before,
.bg-\[\#0A1629\]::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(26, 86, 255, 0.15) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Ensure content is above decorative elements */
.bg-\[\#060F1D\] > *,
.bg-\[\#0A1629\] > * {
  position: relative;
  z-index: 1;
}

/* --- PRICING CARDS --- */
.border-2.border-blue-600,
.border-2.border-\[\#0066FF\] {
  border-color: var(--pp-primary) !important;
  box-shadow: 0 0 0 1px var(--pp-primary), var(--pp-shadow-xl) !important;
}

/* --- AVATAR / PROFILE --- */
[class*="avatar"],
.rounded-full.bg-blue-600,
.rounded-full.bg-\[\#0066FF\] {
  border: 2px solid rgba(26, 86, 255, 0.2) !important;
  box-shadow: 0 2px 8px rgba(26, 86, 255, 0.2) !important;
}

/* --- ACCORDION --- */
[data-state="open"] > [data-radix-accordion-trigger],
[class*="accordion"] button[aria-expanded="true"] {
  color: var(--pp-primary) !important;
}

/* --- TOOLTIP --- */
[role="tooltip"],
[data-radix-tooltip-content] {
  border-radius: 0.5rem !important;
  background: #0E1A38 !important;
  color: #FFFFFF !important;
  font-size: 0.8rem !important;
  padding: 0.4rem 0.8rem !important;
  box-shadow: var(--pp-shadow-lg) !important;
  font-family: var(--pp-font-body) !important;
}

/* --- SKELETON LOADING --- */
.animate-pulse > div,
[class*="skeleton"] {
  border-radius: 0.5rem !important;
  background: linear-gradient(90deg, #EEF3FF 25%, #E2EAFF 50%, #EEF3FF 75%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- FOOTER --- */
footer,
[class*="footer"] {
  border-top: 1px solid rgba(26, 86, 255, 0.08) !important;
}

/* --- FOCUS STATES FOR ACCESSIBILITY --- */
:focus-visible {
  outline: 2px solid var(--pp-primary) !important;
  outline-offset: 2px !important;
  border-radius: 0.25rem !important;
}

/* --- UTILITY: Improve box shadows globally --- */
.shadow    { box-shadow: var(--pp-shadow-sm) !important; }
.shadow-sm { box-shadow: var(--pp-shadow-sm) !important; }
.shadow-md { box-shadow: var(--pp-shadow-md) !important; }
.shadow-lg { box-shadow: var(--pp-shadow-lg) !important; }
.shadow-xl { box-shadow: var(--pp-shadow-xl) !important; }
.shadow-2xl{ box-shadow: var(--pp-shadow-xl) !important; }

/* --- SMOOTH PAGE TRANSITIONS --- */
#root {
  animation: pp-fade-in 0.4s ease forwards;
}

@keyframes pp-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- RESPONSIVE TUNING --- */
@media (max-width: 768px) {
  .text-4xl { font-size: 2rem !important; }
  .text-5xl { font-size: 2.5rem !important; }
  .text-6xl { font-size: 2.75rem !important; }
}