/* Upkeep Theme Design Tokens */
:root {
  /* Vibrant Brand Palette */
  --up-blue: #0080FF;       /* Electric Blue */
  --up-blue-2: #4A90E2;
  --up-orange: #FF8C00;     /* Golden Orange */
  --up-orange-2: #FFA500;
  --up-green: #00C851;      /* Emerald Green */
  --up-green-2: #00E676;
  --up-purple: #8E44AD;     /* Rich Purple */
  --up-purple-2: #9B59B6;
  --up-charcoal: #2C3E50;   /* Charcoal */
  --up-charcoal-2: #34495E;
  --up-crimson: #DC3545;    /* Crimson */
  --up-crimson-2: #E74C3C;

  /* Neutrals */
  --up-bg: #f8f9fb;         /* Light background */
  --up-surface: #ffffff;    /* Cards */
  --up-text: #1f2937;       /* Primary text */
  --up-text-muted: #6b7280; /* Secondary text */

  /* Typography */
  --up-font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  --up-h1: 2rem;
  --up-h2: 1.5rem;
  --up-h3: 1.25rem;
  --up-body: 0.95rem;
  --up-radius: 0.75rem;
  --up-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Base */
body { background-color: var(--up-bg); color: var(--up-text); font-family: var(--up-font-sans); }
.card { border-radius: var(--up-radius); box-shadow: var(--up-shadow); }

/* Utilities */
.text-muted-ux { color: var(--up-text-muted) !important; }
.badge-gradient-blue { background: linear-gradient(135deg, var(--up-blue), var(--up-blue-2)); color: #fff; }
.badge-gradient-orange { background: linear-gradient(135deg, var(--up-orange), var(--up-orange-2)); color: #fff; }
.badge-gradient-green { background: linear-gradient(135deg, var(--up-green), var(--up-green-2)); color: #fff; }
.badge-gradient-purple { background: linear-gradient(135deg, var(--up-purple), var(--up-purple-2)); color: #fff; }
.badge-gradient-charcoal { background: linear-gradient(135deg, var(--up-charcoal), var(--up-charcoal-2)); color: #fff; }
.badge-gradient-crimson { background: linear-gradient(135deg, var(--up-crimson), var(--up-crimson-2)); color: #fff; }

.icon-gradient-blue { background: linear-gradient(135deg, var(--up-blue), var(--up-blue-2)); }
.icon-gradient-orange { background: linear-gradient(135deg, var(--up-orange), var(--up-orange-2)); }
.icon-gradient-green { background: linear-gradient(135deg, var(--up-green), var(--up-green-2)); }
.icon-gradient-purple { background: linear-gradient(135deg, var(--up-purple), var(--up-purple-2)); }
.icon-gradient-charcoal { background: linear-gradient(135deg, var(--up-charcoal), var(--up-charcoal-2)); }
/* Navbar UI Improvements */
.navbar-main {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

.navbar-nav .nav-link {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.navbar-nav .nav-link:hover {
  background: linear-gradient(135deg, var(--up-blue), var(--up-blue-2)) !important;
  color: white !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.navbar-nav .nav-link:hover i {
  color: white !important;
}

.navbar-nav .nav-link:hover span {
  color: white !important;
}

/* Hover lift effect */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Theme dropdown improvements */
.dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95) !important;
}

.dropdown-item {
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 2px 4px;
}

.dropdown-item:hover {
  background: linear-gradient(135deg, var(--up-blue), var(--up-blue-2)) !important;
  color: white !important;
  transform: translateX(2px);
}

.dropdown-item:hover i {
  color: white !important;
}

/* Breadcrumb improvements */
.breadcrumb-item a {
  transition: all 0.2s ease;
  border-radius: 6px;
  padding: 4px 8px;
}

.breadcrumb-item a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--up-blue) !important;
}

.breadcrumb-item.active {
  color: var(--up-blue) !important;
  font-weight: 600;
}

/* Mobile menu toggler improvements */
.sidenav-toggler a {
  transition: all 0.3s ease;
  border-radius: 50%;
  padding: 8px;
}

.sidenav-toggler a:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

/* Icon improvements */
.navbar-nav .nav-link i {
  transition: all 0.3s ease;
  font-size: 1.1rem;
}

.navbar-nav .nav-link:hover i {
  transform: scale(1.1);
}

/* Responsive improvements */
@media (max-width: 768px) {
  .navbar-nav .nav-link {
    padding: 8px 12px;
    margin: 2px;
  }

  .navbar-nav .nav-link span {
    display: none;
  }

  .breadcrumb-item span {
    display: none;
  }
}

/* Focus states for accessibility */
.navbar-nav .nav-link:focus,
.dropdown-item:focus {
  outline: 2px solid var(--up-blue);
  outline-offset: 2px;
}
.icon-gradient-crimson { background: linear-gradient(135deg, var(--up-crimson), var(--up-crimson-2)); }

/* Override Bootstrap primary color */
:root {
  --bs-primary: var(--up-blue) !important;
  --bs-primary-rgb: 0, 128, 255 !important;
}

.text-primary {
  color: var(--up-blue) !important;
}

.btn-primary {
  background-color: var(--up-blue) !important;
  border-color: var(--up-blue) !important;
}

.btn-primary:hover {
  background-color: var(--up-blue-2) !important;
  border-color: var(--up-blue-2) !important;
}

/* Dashboard KPI Card Icons - Default Theme Colors */
.dashboard-page .row .col-xl-2:nth-child(1) .card .card-body .row .col-4 .icon.icon-shape,
.dashboard-page .row .col-sm-4:nth-child(1) .card .card-body .row .col-4 .icon.icon-shape {
  background: linear-gradient(135deg, var(--up-blue), var(--up-blue-2)) !important;
}

.dashboard-page .row .col-xl-2:nth-child(2) .card .card-body .row .col-4 .icon.icon-shape,
.dashboard-page .row .col-sm-4:nth-child(2) .card .card-body .row .col-4 .icon.icon-shape {
  background: linear-gradient(135deg, var(--up-orange), var(--up-orange-2)) !important;
}

.dashboard-page .row .col-xl-2:nth-child(3) .card .card-body .row .col-4 .icon.icon-shape,
.dashboard-page .row .col-sm-4:nth-child(3) .card .card-body .row .col-4 .icon.icon-shape {
  background: linear-gradient(135deg, var(--up-green), var(--up-green-2)) !important;
}

.dashboard-page .row .col-xl-2:nth-child(4) .card .card-body .row .col-4 .icon.icon-shape,
.dashboard-page .row .col-sm-4:nth-child(4) .card .card-body .row .col-4 .icon.icon-shape {
  background: linear-gradient(135deg, var(--up-purple), var(--up-purple-2)) !important;
}

.dashboard-page .row .col-xl-2:nth-child(5) .card .card-body .row .col-4 .icon.icon-shape,
.dashboard-page .row .col-sm-4:nth-child(5) .card .card-body .row .col-4 .icon.icon-shape {
  background: linear-gradient(135deg, var(--up-charcoal), var(--up-charcoal-2)) !important;
}

.dashboard-page .row .col-xl-2:nth-child(6) .card .card-body .row .col-4 .icon.icon-shape,
.dashboard-page .row .col-sm-4:nth-child(6) .card .card-body .row .col-4 .icon.icon-shape {
  background: linear-gradient(135deg, var(--up-crimson), var(--up-crimson-2)) !important;
}

/* Dashboard KPI Card Icons - Icon Colors */
.dashboard-page .row .col-xl-2:nth-child(1) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-sm-4:nth-child(1) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-xl-2:nth-child(2) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-sm-4:nth-child(2) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-xl-2:nth-child(3) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-sm-4:nth-child(3) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-xl-2:nth-child(4) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-sm-4:nth-child(4) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-xl-2:nth-child(5) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-sm-4:nth-child(5) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-xl-2:nth-child(6) .card .card-body .row .col-4 .icon.icon-shape .ni,
.dashboard-page .row .col-sm-4:nth-child(6) .card .card-body .row .col-4 .icon.icon-shape .ni {
  color: white !important;
}

/* Status Badge Colors - Default Theme */
.badge.badge-sm {
  background: linear-gradient(135deg, var(--up-blue), var(--up-blue-2)) !important;
  color: white !important;
  font-weight: bold !important;
}

/* Specific status badge colors for active orders table */
.badge.badge-sm[style*="FF8C00"],
.badge.badge-sm[style*="FFA500"] {
  background: linear-gradient(135deg, var(--up-orange), var(--up-orange-2)) !important;
  color: white !important;
}

.badge.badge-sm[style*="00C851"],
.badge.badge-sm[style*="00E676"] {
  background: linear-gradient(135deg, var(--up-green), var(--up-green-2)) !important;
  color: white !important;
}

.badge.badge-sm[style*="8E44AD"],
.badge.badge-sm[style*="9B59B6"] {
  background: linear-gradient(135deg, var(--up-purple), var(--up-purple-2)) !important;
  color: white !important;
}

.badge.badge-sm[style*="2C3E50"],
.badge.badge-sm[style*="34495E"] {
  background: linear-gradient(135deg, var(--up-charcoal), var(--up-charcoal-2)) !important;
  color: white !important;
}

.badge.badge-sm[style*="DC3545"],
.badge.badge-sm[style*="E74C3C"] {
  background: linear-gradient(135deg, var(--up-crimson), var(--up-crimson-2)) !important;
  color: white !important;
}

/* Specific status badge colors */
.badge.badge-sm[style*="FF8C00"],
.badge.badge-sm[style*="FFA500"] {
  background: linear-gradient(135deg, var(--up-orange), var(--up-orange-2)) !important;
}

.badge.badge-sm[style*="00C851"],
.badge.badge-sm[style*="00E676"] {
  background: linear-gradient(135deg, var(--up-green), var(--up-green-2)) !important;
}

.badge.badge-sm[style*="8E44AD"],
.badge.badge-sm[style*="9B59B6"] {
  background: linear-gradient(135deg, var(--up-purple), var(--up-purple-2)) !important;
}

.badge.badge-sm[style*="2C3E50"],
.badge.badge-sm[style*="34495E"] {
  background: linear-gradient(135deg, var(--up-charcoal), var(--up-charcoal-2)) !important;
}

.badge.badge-sm[style*="DC3545"],
.badge.badge-sm[style*="E74C3C"] {
  background: linear-gradient(135deg, var(--up-crimson), var(--up-crimson-2)) !important;
}

/* Text color overrides for status indicators */
.text-success {
  color: var(--up-green) !important;
}

.text-warning {
  color: var(--up-orange) !important;
}

.text-info {
  color: var(--up-blue) !important;
}

.text-danger {
  color: var(--up-crimson) !important;
}

/* Fix navbar links that go white */
.navbar-nav .nav-link {
  color: var(--up-text) !important;
}

.navbar-nav .nav-link:hover {
  color: white !important;
}

/* Ensure icons maintain their colors */
.icon.icon-shape .ni {
  color: white !important;
}

/* Dropdown menu text colors */
.dropdown-item {
  color: var(--up-text) !important;
}

.dropdown-item:hover {
  color: white !important;
}

/* Upkeep Buttons */
.btn-up {
  color: #fff !important;
  border: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-up:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.16); filter: brightness(1.02); }
.btn-up:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.btn-up-blue { background-image: linear-gradient(135deg, var(--up-blue), var(--up-blue-2)); }
.btn-up-orange { background-image: linear-gradient(135deg, var(--up-orange), var(--up-orange-2)); }
.btn-up-green { background-image: linear-gradient(135deg, var(--up-green), var(--up-green-2)); }
.btn-up-purple { background-image: linear-gradient(135deg, var(--up-purple), var(--up-purple-2)); }
.btn-up-charcoal { background-image: linear-gradient(135deg, var(--up-charcoal), var(--up-charcoal-2)); }
.btn-up-crimson { background-image: linear-gradient(135deg, var(--up-crimson), var(--up-crimson-2)); }

/* Sidenav active state (Upkeep brand) */
.sidenav .nav-link.active {
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--up-blue), var(--up-blue-2));
  box-shadow: 0 8px 26px -4px rgba(0, 128, 255, 0.35), 0 8px 9px -5px rgba(0, 128, 255, 0.06);
}
.sidenav .nav-link.active .nav-link-text { color: #fff !important; }
.sidenav .nav-link.active .icon { background: rgba(255,255,255,.18) !important; }
.sidenav .nav-link.active .icon .ni { color: #fff !important; }

/* Status */
.status-quotation { background: linear-gradient(135deg, var(--up-orange), var(--up-orange-2)); color: #fff; }
.status-approval { background: linear-gradient(135deg, var(--up-green), var(--up-green-2)); color: #fff; }
.status-inprogress { background: linear-gradient(135deg, var(--up-purple), var(--up-purple-2)); color: #fff; }
.status-ready { background: linear-gradient(135deg, var(--up-charcoal), var(--up-charcoal-2)); color: #fff; }
.status-overdue { background: linear-gradient(135deg, var(--up-crimson), var(--up-crimson-2)); color: #fff; }

/* Animations */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,53,69, 0.6); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(220,53,69, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,53,69, 0); }
}
.pulse { animation: pulse 2s infinite; }

/* UI Improvements */
/* Hide collapse arrows/icons in vertical navbar */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"]:after {
  content: none !important;
}

/* Fix dropdown arrow rotation for ni-bold-right icons */
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"] .ni-bold-right,
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"] i.ni-bold-right {
  transition: all 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}

.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ni-bold-right,
.navbar-vertical .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] i.ni-bold-right {
  transform: rotate(90deg);
}

/* More specific targeting if needed */
.sidenav .navbar-nav .nav-link[data-bs-toggle="collapse"] .ni-bold-right {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(0deg);
  transform-origin: center;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.sidenav .navbar-nav .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] .ni-bold-right {
  transform: rotate(90deg);
}