/* ==========================================================================
   Aagron Campus — Unified Premium Theme & Design System Overlay
   Unifies Color Grading, Typography, Buttons, Hovers, Sidebar & Topbar
   WITHOUT modifying any underlying component logic or backend APIs
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand Primary Accents */
  --brand-orange: #b94e17;
  --brand-orange-light: #ea580c;
  --brand-orange-bright: #f97316;
  --brand-gradient: linear-gradient(105deg, #b94e17 0%, #ea580c 60%, #f97316 100%);
  --brand-gradient-hover: linear-gradient(105deg, #a34313 0%, #d94e08 60%, #ea580c 100%);

  /* Surface & Canvas Grading */
  --prem-bg: #f8fafc;
  --prem-surface: #ffffff;
  --prem-line: #ede8e2;
  --prem-line-subtle: #f1ede7;
  --prem-ink: #1a151e;
  --prem-muted: #64748b;
  --prem-subtle: #94a3b8;

  /* Elevation Shadows */
  --prem-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.03);
  --prem-shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  --prem-shadow-hover: 0 12px 30px -4px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  --prem-shadow-primary: 0 6px 18px rgba(185, 78, 23, 0.26);
  --prem-shadow-primary-hover: 0 10px 24px rgba(185, 78, 23, 0.38);

  /* Overrides for local variables */
  --orange: #b94e17 !important;
  --orange2: #ea580c !important;
}

/* 1. Global Typography & Canvas */
body, button, input, select, textarea,
.nav-item, .nav-link, .topbar, .sidebar, .card, .panel, .metric, .stat {
  font-family: 'Plus Jakarta Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body {
  background: var(--prem-bg) !important;
  color: var(--prem-ink) !important;
}

/* 2. Unified Brand Logo & Header */
.brand,
.side-brand,
.app-shell .brand {
  min-height: 86px !important;
  height: 86px !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--prem-line) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}

.brand-logo,
.side-brand img,
.brand img {
  height: 48px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.brand-name,
.mainbrand,
.brand-lines strong {
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  color: #1a151e !important;
  line-height: 1.2 !important;
}

.brand-sub,
.brand-lines small {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #b94e17 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-top: 2px !important;
}

/* 3. Unified Sidebar Layout & Navigation */
.sidebar,
.shell .sidebar,
.app-shell .sidebar,
.app .sidebar {
  width: 252px !important;
  min-width: 252px !important;
  flex: 0 0 252px !important;
  background: #ffffff !important;
  border-right: 1px solid var(--prem-line) !important;
  z-index: 40 !important;
}

.nav-link,
.nav-item {
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  border-radius: 11px !important;
  border: 0 !important;
  background: transparent !important;
  color: #555e6d !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.nav-link:hover,
.nav-item:hover {
  background: #fbf9f6 !important;
  color: #1a151e !important;
  transform: translateX(2px) !important;
}

.nav-link.active,
.nav-item.active {
  background: linear-gradient(100deg, #fff2e8 0%, #fff9f5 100%) !important;
  color: #b94e17 !important;
  font-weight: 800 !important;
  box-shadow: inset 3.5px 0 0 #b94e17 !important;
  border-radius: 0 11px 11px 0 !important;
}

.nav-link.active svg,
.nav-link.active .ic,
.nav-item.active svg {
  color: #b94e17 !important;
}

/* 4. Unified Topbar */
.topbar {
  height: 76px !important;
  min-height: 76px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--prem-line) !important;
  padding: 0 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 30 !important;
  box-sizing: border-box !important;
}

/* 5. Unified Button Hierarchy & Hovers */
.btn.primary,
.btn-primary,
button.button.accent {
  background: var(--brand-gradient) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 10px 18px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  box-shadow: var(--prem-shadow-primary) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.btn.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
button.button.accent:hover:not(:disabled) {
  background: var(--brand-gradient-hover) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: var(--prem-shadow-primary-hover) !important;
  filter: brightness(1.03) !important;
}

.btn.primary:active,
.btn-primary:active {
  transform: translateY(0.5px) !important;
  box-shadow: 0 3px 10px rgba(185, 78, 23, 0.2) !important;
}

/* Soft / Tonal / Secondary Buttons */
.btn.soft,
.btn.tonal,
.btn-secondary {
  background: #fff7f0 !important;
  border: 1px solid #fed7aa !important;
  color: #b94e17 !important;
  border-radius: 11px !important;
  padding: 9px 16px !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
  transition: all 0.16s ease !important;
}

.btn.soft:hover:not(:disabled),
.btn.tonal:hover:not(:disabled),
.btn-secondary:hover:not(:disabled) {
  background: #ffedd5 !important;
  border-color: #fdba74 !important;
  color: #9a3b10 !important;
  transform: translateY(-1px) !important;
}

/* 6. Unified Cards, Panels & Metrics */
.card,
.panel,
.metric,
.stat,
.opp-card,
.easy-stage {
  background: var(--prem-surface) !important;
  border: 1px solid var(--prem-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--prem-shadow-card) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.card:hover,
.metric:hover,
.opp-card:hover {
  border-color: #f0ddd1 !important;
  box-shadow: var(--prem-shadow-hover) !important;
}

/* 7. Unified Modern Search Inputs */
.searchbox,
.top-search,
.searchfield {
  border: 1.5px solid var(--prem-line) !important;
  background: #ffffff !important;
  border-radius: 99px !important;
  transition: all 0.18s ease !important;
}

.searchbox:focus-within,
.top-search:focus-within,
.searchfield:focus-within {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14) !important;
}

/* 8. Unified Modern Pill Badges */
.pill,
.chip {
  border-radius: 99px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

.pill.orange,
.pill.ok,
.pill.green {
  font-weight: 800 !important;
}