/* ChaseFlow Design System - Rounded, Soft, 3D Fintech Aesthetic */
/* STRICT: Visual changes only - preserves all functionality, IDs, data attributes */

:root {
  /* ChaseFlow Colors */
  --chf-bg: #F8FAFC;
  --chf-surface: #ffffff;
  --chf-surface-alt: #F6F8FB;
  --chf-brand: #243C74;
  --chf-accent: #F4A621;
  --chf-text: #0F1724;
  /* Soft separators (very subtle) */
  --chf-divider: rgba(36,60,116,0.06);
  --chf-muted: rgba(36,60,116,0.08);
  /* Rounded radii (generous) */
  --chf-radius-xs: 8px;
  --chf-radius-sm: 14px;
  --chf-radius-md: 20px;
  --chf-radius-lg: 28px;
  --chf-radius-pill: 9999px;
  /* Shadows (soft layered) */
  --chf-shadow-1: 0 4px 12px rgba(16,24,40,0.06);
  --chf-shadow-2: 0 12px 40px rgba(16,24,40,0.10);
  --chf-glow-accent: 0 6px 24px rgba(244,166,33,0.14);
  /* Spacing */
  --chf-gap-xs: 8px;
  --chf-gap-sm: 12px;
  --chf-gap-md: 20px;
  --chf-gap-lg: 28px;
  /* Typography */
  --chf-font-family: "Inter", "Poppins", "Roboto", -apple-system, "Segoe UI", sans-serif;
  --chf-fw-regular: 400;
  --chf-fw-medium: 500;
  --chf-fw-bold: 700;
  /* Motion */
  --chf-t-fast: 150ms cubic-bezier(.2,.8,.2,1);
  --chf-t-med: 220ms cubic-bezier(.2,.8,.2,1);
}

body {
  background: var(--chf-bg) !important;
}

#root {
  background: var(--chf-bg);
}

/* SIDEBAR — strong brand but soft with rounded corners */
nav[class*="bg-primary-1"] {
  background: linear-gradient(160deg, var(--chf-brand) 0%, rgba(20,34,70,0.95) 100%) !important;
  box-shadow: 0 8px 30px rgba(16,24,40,0.12) !important;
}

/* Sidebar nav items - add soft rounded corners */
nav[class*="bg-primary-1"] a > div[class*="cursor-pointer"] {
  border-radius: var(--chf-radius-sm) !important;
  transition: all var(--chf-t-fast) !important;
}

/* Hover state only for non-active items */
nav[class*="bg-primary-1"] a > div[class*="cursor-pointer"]:not([class*="bg-[#2d3f66]"]):hover {
  background: rgba(255,255,255,0.08) !important;
  transform: translateX(4px);
}

/* Active nav item - no hover overlay */
nav[class*="bg-primary-1"] a > div[class*="bg-[#2d3f66]"] {
  background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06);
  border-radius: var(--chf-radius-lg) !important;
}

/* Surface wrapper for floating 3D look */
.chf-surface {
  background: linear-gradient(180deg, var(--chf-surface) 0%, var(--chf-surface-alt) 100%);
  border-radius: var(--chf-radius-md);
  box-shadow: var(--chf-shadow-1);
  transition: transform var(--chf-t-fast), box-shadow var(--chf-t-fast);
  border: 1px solid rgba(255,255,255,0);
}
.chf-surface:hover {
  transform: translateY(-6px);
  box-shadow: var(--chf-shadow-2);
}

/* BUTTONS — pill-like, very rounded, soft 3D depth */
button {
  border-radius: var(--chf-radius-lg) !important;
  transition: all var(--chf-t-fast) !important;
  font-weight: var(--chf-fw-medium);
}

button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--chf-shadow-2) !important;
}

button:active:not(:disabled) {
  transform: translateY(0);
}

/* Primary buttons with brand color */
button[class*="bg-primary"],
button[class*="bg-[#3a5082]"] {
  background: linear-gradient(180deg, var(--chf-brand), #1f3563) !important;
  box-shadow: var(--chf-shadow-1) !important;
}

button[class*="bg-primary"]:hover:not(:disabled),
button[class*="bg-[#3a5082]"]:hover:not(:disabled) {
  box-shadow: var(--chf-shadow-2) !important;
}

/* Accent/secondary buttons */
button[class*="bg-secondary"] {
  background: linear-gradient(180deg, var(--chf-accent), #e09110) !important;
  box-shadow: var(--chf-glow-accent) !important;
}

/* Helper classes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--chf-radius-lg);
  font-weight: var(--chf-fw-medium);
  cursor: pointer;
  transition: transform var(--chf-t-fast), box-shadow var(--chf-t-fast), opacity var(--chf-t-fast);
  border: none;
  will-change: transform;
}
.btn:active { transform: translateY(0); }
.btn--primary {
  background: linear-gradient(180deg, var(--chf-brand), #1f3563);
  color: #fff;
  box-shadow: var(--chf-shadow-1);
}
.btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--chf-shadow-2);
}
.btn--accent {
  background: linear-gradient(180deg, var(--chf-accent), #e09110);
  color: #0b0b0b;
  box-shadow: var(--chf-glow-accent);
}
.btn--secondary {
  background: rgba(36,60,116,0.04);
  color: var(--chf-brand);
  border-radius: var(--chf-radius-lg);
  box-shadow: none;
}
.btn--ghost {
  background: transparent;
  color: var(--chf-brand);
}

/* INPUTS — soft, subtle borders, rounded corners */
input, select, textarea {
  border-radius: var(--chf-radius-sm) !important;
  border: 1px solid var(--chf-divider) !important;
  transition: all var(--chf-t-fast) !important;
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(36,60,116,0.16) !important;
  box-shadow: 0 6px 20px rgba(36,60,116,0.06) !important;
}

/* Input containers */
div[class*="border-[#b1b8b8]"] {
  border-radius: var(--chf-radius-sm) !important;
  border-color: var(--chf-divider) !important;
  transition: all var(--chf-t-fast) !important;
}

div[class*="border-[#b1b8b8]"]:focus-within {
  border-color: rgba(36,60,116,0.16) !important;
  box-shadow: 0 6px 20px rgba(36,60,116,0.06) !important;
}

/* CARDS — layered, soft 3D depth, generous rounded corners */
/* Only apply light backgrounds to cards that don't have dark backgrounds */
[class*="rounded-xl"]:not([class*="bg-[#"]):not([class*="bg-primary"]):not([class*="bg-secondary"]),
[class*="rounded-2xl"]:not([class*="bg-[#"]):not([class*="bg-primary"]):not([class*="bg-secondary"]),
[class*="rounded-\[10px\]"]:not([class*="bg-[#"]):not([class*="bg-primary"]):not([class*="bg-secondary"]) {
  background: linear-gradient(180deg, var(--chf-surface), var(--chf-surface-alt));
}

/* Rounded corners for all cards */
[class*="rounded-xl"],
[class*="rounded-2xl"],
[class*="rounded-\[10px\]"] {
  border-radius: var(--chf-radius-md) !important;
  box-shadow: var(--chf-shadow-1) !important;
  transition: all var(--chf-t-fast) !important;
}

/* Hover effects only for light-background cards, not dark ones */
[class*="rounded-xl"]:not([class*="bg-[#"]):hover,
[class*="rounded-2xl"]:not([class*="bg-[#"]):hover,
[class*="rounded-\[10px\]"]:not([class*="bg-[#"]):hover {
  transform: translateY(-4px);
  box-shadow: var(--chf-shadow-2) !important;
}

/* Prevent hover transform on certain cards */
[class*="rounded-xl"][class*="Credits"],
nav [class*="rounded-xl"],
[class*="bg-[#0"] {
  transform: none !important;
}

/* Card component styles */
.card {
  padding: var(--chf-gap-md);
  border-radius: var(--chf-radius-md);
  background: linear-gradient(180deg, var(--chf-surface), var(--chf-surface-alt));
  box-shadow: var(--chf-shadow-1);
  border: 1px solid rgba(255,255,255,0);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--chf-gap-sm);
  padding-bottom: var(--chf-gap-sm);
  margin-bottom: var(--chf-gap-sm);
  color: var(--chf-brand);
  font-weight: var(--chf-fw-bold);
}
.card .soft-divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, rgba(36,60,116,0.02), rgba(36,60,116,0.03));
  margin-top: var(--chf-gap-sm);
  margin-bottom: var(--chf-gap-sm);
  border-radius: 999px;
}

/* TABLES & LISTS — elevated rows, gentle spacing */
table {
  border-collapse: separate;
  border-spacing: 0 var(--chf-gap-xs);
}

table thead th {
  color: var(--chf-brand);
  font-weight: 600;
  padding: 8px 12px;
}

table tbody tr {
  background: var(--chf-surface);
  border-radius: var(--chf-radius-sm);
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  transition: all var(--chf-t-fast);
}

table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: var(--chf-shadow-2);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--chf-gap-xs);
}
.table thead th {
  color: var(--chf-brand);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
}
.table tbody tr {
  background: var(--chf-surface);
  border-radius: var(--chf-radius-sm);
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  transition: transform var(--chf-t-fast);
}
.table tbody tr:hover {
  transform: translateY(-3px);
  box-shadow: var(--chf-shadow-2);
}

/* TOPBAR — soft white with subtle shadow */
div[class*="bg-white"][class*="border-b"] {
  background: linear-gradient(180deg, #ffffff, #fafbfc) !important;
  box-shadow: 0 2px 12px rgba(16,24,40,0.04) !important;
  border-bottom: 1px solid var(--chf-divider) !important;
}

/* Credits section in topbar */
div[class*="shadow-\[0px_4px_10.5px"] {
  border-radius: var(--chf-radius-md) !important;
  box-shadow: var(--chf-shadow-1) !important;
  background: linear-gradient(180deg, var(--chf-surface), var(--chf-surface-alt));
}

/* INVOICE PREVIEW — 3D, ribbon accent, soft edges */
.invoice-preview {
  border-radius: var(--chf-radius-lg);
  padding: var(--chf-gap-lg);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow: var(--chf-shadow-2);
  position: relative;
  overflow: hidden;
}
.invoice-preview::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 6px;
  height: 64px;
  background: linear-gradient(180deg, var(--chf-accent), #e39a0f);
  border-radius: 8px;
  opacity: 0.95;
}

/* PAYMENT PANEL — distinct but soft */
.payment-panel {
  background: linear-gradient(180deg, #fff, #f6f8fb);
  padding: var(--chf-gap-md);
  border-radius: var(--chf-radius-md);
  box-shadow: var(--chf-shadow-1);
  margin-top: var(--chf-gap-md);
}

/* MICRO-INTERACTIONS — subtle, consistent */
.hover-lift { 
  transition: transform var(--chf-t-fast), box-shadow var(--chf-t-fast); 
}
.hover-lift:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--chf-shadow-2); 
}

/* GLASSY TOUCH */
.glassy {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  border-radius: var(--chf-radius-sm);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 8px 30px rgba(16,24,40,0.06);
}

/* FOCUS (accessible but soft) */
*:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(36,60,116,0.08) !important;
  border-radius: 12px;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
  button { width: 100%; }
  .card, .invoice-preview, .payment-panel { 
    padding: 16px; 
    border-radius: 16px; 
  }
}

/* Helper classes */
.rounded-pill { border-radius: var(--chf-radius-pill); }
.soft-sep { 
  height: 1px; 
  background: linear-gradient(90deg, rgba(36,60,116,0.02), rgba(36,60,116,0.03)); 
  border-radius: 999px; 
}

/* Global smooth transitions */
a, button, input, select, textarea, [class*="cursor-pointer"] {
  transition: all var(--chf-t-fast) !important;
}