/* ============================================
   KARVEXA AI — Enterprise Brand Design System
   CSS-only upgrade · No backend changes
   ============================================ */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* === CSS VARIABLES === */
:root {
  --kx-blue: #1B3A6F;
  --kx-green: #00A86B;
  --kx-gold: #E6C200;
  --kx-silver: #C0C7D1;
  --kx-white: #FFFFFF;
  --kx-dark: #1A1A1A;
  --kx-border: #E5E7EB;
  --kx-bg: #F8FAFB;
  --kx-error: #E63946;
  --kx-shadow: 0 4px 20px rgba(0,0,0,0.05);
  --kx-shadow-lg: 0 8px 32px rgba(27,58,111,0.12);
  --kx-radius: 12px;
  --kx-radius-sm: 8px;
  --kx-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* === BASE === */
body {
  font-family: var(--kx-font) !important;
  background: var(--kx-bg) !important;
  color: var(--kx-dark) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--kx-font) !important;
  font-weight: 700 !important;
  color: var(--kx-dark) !important;
  letter-spacing: -0.02em !important;
}
h1 { font-size: 28px !important; }
h2 { font-size: 22px !important; }
h3 { font-size: 18px !important; }
p, span, div, li, td, th, label, input, select, textarea, button {
  font-family: var(--kx-font) !important;
}

/* === HEADER / TOPBAR === */
header, [class*="topbar"], [class*="header"] {
  background: var(--kx-white) !important;
  border-bottom: 1px solid var(--kx-border) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}

/* === SIDEBAR === */
nav, [class*="sidebar"], aside {
  background: var(--kx-white) !important;
  border-right: 1px solid var(--kx-border) !important;
}
nav button, [class*="sidebar"] button {
  border-radius: var(--kx-radius-sm) !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
  color: #4B5563 !important;
  margin: 2px 8px !important;
  padding: 10px 14px !important;
}
nav button:hover, [class*="sidebar"] button:hover {
  background: #EFF6FF !important;
  color: var(--kx-blue) !important;
}
nav button[class*="active"], nav button[style*="color: rgb(0, 168, 107)"],
[class*="sidebar"] button[class*="active"] {
  background: linear-gradient(135deg, #EBF5FF, #E0F7EE) !important;
  color: var(--kx-blue) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--kx-green) !important;
}

/* === MAIN CONTENT === */
main, [class*="main-content"], [class*="content"] {
  background: var(--kx-bg) !important;
}

/* === CARDS === */
[class*="card"], [class*="Card"],
[style*="border-radius"][style*="shadow"],
[style*="border-radius"][style*="border"] {
  background: var(--kx-white) !important;
  border-radius: var(--kx-radius) !important;
  box-shadow: var(--kx-shadow) !important;
  border: 1px solid var(--kx-border) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
[class*="card"]:hover {
  box-shadow: var(--kx-shadow-lg) !important;
  transform: translateY(-1px) !important;
}

/* === KPI STAT CARDS === */
[class*="stat"], [class*="kpi"], [class*="metric"] {
  background: var(--kx-white) !important;
  border-radius: var(--kx-radius) !important;
  padding: 20px !important;
}

/* === BUTTONS === */
button {
  font-family: var(--kx-font) !important;
  font-weight: 500 !important;
  border-radius: var(--kx-radius-sm) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

/* Primary CTA buttons (green) */
button[class*="primary"], button[style*="background"][style*="green"],
button[style*="#00A86B"], button[style*="rgb(0, 168, 107)"] {
  background: linear-gradient(135deg, var(--kx-green), #009D63) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0,168,107,0.25) !important;
}
button[class*="primary"]:hover {
  background: linear-gradient(135deg, #009D63, #008A56) !important;
  box-shadow: 0 6px 16px rgba(0,168,107,0.35) !important;
}

/* Add Client / Add Notice buttons */
button[style*="gradient"] {
  border-radius: var(--kx-radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(27,58,111,0.2) !important;
}

/* === INPUTS / FORMS === */
input, select, textarea {
  border-radius: 8px !important;
  border: 1.5px solid var(--kx-border) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  background: var(--kx-white) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--kx-blue) !important;
  box-shadow: 0 0 0 3px rgba(27,58,111,0.1) !important;
  outline: none !important;
}

/* === TABLES === */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}
th {
  background: #F9FAFB !important;
  font-weight: 600 !important;
  color: var(--kx-dark) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--kx-border) !important;
}
td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--kx-border) !important;
}
tr:hover td {
  background: #F0F7FF !important;
}
tr:nth-child(even) td {
  background: #FAFBFC !important;
}

/* === BADGES / PILLS === */
[class*="badge"], [class*="pill"], [class*="tag"], [class*="chip"] {
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  letter-spacing: 0.03em !important;
}

/* === SEARCH BAR === */
input[type="search"], input[placeholder*="Search"], input[placeholder*="search"] {
  background: #F3F4F6 !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
}
input[type="search"]:focus, input[placeholder*="Search"]:focus {
  background: var(--kx-white) !important;
  border-color: var(--kx-blue) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kx-silver); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* === DUE DATE BADGES === */
[style*="border-radius"][style*="background"] {
  font-weight: 600 !important;
}

/* === LOGO AREA === */
[class*="logo"], [class*="brand"] {
  font-weight: 700 !important;
}

/* === NOTIFICATION BELL === */
[class*="notification"] [class*="badge"],
[style*="background"][style*="red"][style*="border-radius: 50%"] {
  background: var(--kx-error) !important;
}

/* === LOADING STATES === */
[class*="skeleton"], [class*="loading"] {
  background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%) !important;
  background-size: 200% 100% !important;
  animation: kx-shimmer 1.5s infinite !important;
}
@keyframes kx-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === DOCUMENT LIST === */
[class*="document"], [class*="doc-item"], [class*="file-row"] {
  border-radius: var(--kx-radius-sm) !important;
  transition: background 0.15s !important;
}
[class*="document"]:hover, [class*="doc-item"]:hover {
  background: #F8FAFC !important;
}

/* === FILTER CHIPS === */
[class*="filter"] button, [class*="chip"] {
  border-radius: 20px !important;
  font-size: 13px !important;
  padding: 6px 14px !important;
  border: 1px solid var(--kx-border) !important;
  background: var(--kx-white) !important;
  transition: all 0.2s !important;
}
[class*="filter"] button:hover {
  border-color: var(--kx-blue) !important;
  color: var(--kx-blue) !important;
}
[class*="filter"] button[class*="active"],
[class*="filter"] button[style*="background"] {
  background: var(--kx-blue) !important;
  color: white !important;
  border-color: var(--kx-blue) !important;
}

/* === AVATAR CONTAINER === */
[class*="avatar-panel"], [class*="chat-panel"],
[style*="position: fixed"][style*="right"][style*="width: 4"] {
  border-radius: 16px 16px 0 0 !important;
  box-shadow: var(--kx-shadow-lg) !important;
}

/* === SMOOTH TRANSITIONS === */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === RESPONSIVE MOBILE === */
@media (max-width: 768px) {
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  [class*="card"] { margin-bottom: 12px !important; }
  nav, [class*="sidebar"] {
    position: fixed !important; left: -260px !important; top: 0 !important;
    bottom: 0 !important; width: 250px !important; z-index: 9998 !important;
    transition: left 0.3s !important;
    box-shadow: 2px 0 16px rgba(0,0,0,.15) !important;
  }
  nav.kv-open, [class*="sidebar"].kv-open { left: 0 !important; }
  main { margin-left: 0 !important; padding: 12px !important; }
}

@media (max-width: 480px) {
  [class*="grid"], [class*="stats"] {
    grid-template-columns: 1fr !important;
  }
}

/* === FIX: Action buttons visibility === */
button[style*="gradient"], button[style*="linear-gradient"] {
  color: #fff !important;
  border: none !important;
}
/* Upload/Add/Action CTA buttons at top-right of pages */
main button:not(nav button):not([class*="filter"]) {
  min-height: 36px !important;
}
/* Ensure gradient buttons in main area have visible text */
main > div > div > button[style*="gradient"],
main > div > button[style*="gradient"] {
  background: linear-gradient(135deg, #1B3A6F, #2a5298) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(27,58,111,0.2) !important;
}

/* === PRODUCTION FIXES === */
/* Fix: All action buttons visible */
button[style*="gradient"],
button[style*="linear-gradient"],
button[class*="primary"],
button[class*="action"] {
  color: #fff !important;
  font-weight: 600 !important;
}
/* Force CTA buttons navy gradient */
main button:first-of-type,
main > div > div:first-child > button,
[class*="header"] button:not(nav button) {
  background: linear-gradient(135deg, #1B3A6F, #2a5298) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(27,58,111,0.18) !important;
  cursor: pointer !important;
}
/* Filter chip buttons should stay outlined */
button[class*="filter"], button[class*="chip"] {
  background: transparent !important;
  color: #1B3A6F !important;
  border: 1px solid #ddd !important;
}
/* Active filter chip */
button[class*="active"], button[class*="selected"] {
  background: #1B3A6F !important;
  color: #fff !important;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  nav { position: fixed !important; left: -260px; z-index: 9999; transition: left 0.3s; width: 250px !important; height: 100vh !important; background: #fff !important; box-shadow: 4px 0 20px rgba(0,0,0,0.15); }
  nav.open { left: 0 !important; }
  main, [style*="margin-left"], [style*="padding-left"] { margin-left: 0 !important; padding-left: 8px !important; width: 100% !important; }
  header, [class*="header"] { padding: 8px !important; }
  h1 { font-size: 1.4rem !important; }
  h2 { font-size: 1.2rem !important; }
  .kx-hamburger { display: block !important; }
  input[placeholder*="Search"] { width: 120px !important; font-size: 13px !important; }
  [style*="grid"] { grid-template-columns: 1fr !important; }
  [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }
  table { font-size: 12px !important; }
  table th, table td { padding: 6px 4px !important; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.2rem !important; }
  button { font-size: 13px !important; padding: 8px 14px !important; }
  [style*="grid"] { gap: 8px !important; }
}
/* Hamburger button (hidden on desktop) */
.kx-hamburger { display: none; position: fixed; top: 10px; left: 10px; z-index: 99999; background: #1B3A6F; color: #fff; border: none; border-radius: 8px; padding: 8px 12px; font-size: 20px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }