/* App styles */
:root {
  --app-radius: 0.8rem;
  --klikup-primary: #2196F3;
  --klikup-secondary: #1976D2;
  --klikup-accent: #42A5F5;
  --klikup-dark: #1B1B22;
  --klikup-text: #37474F;
  --klikup-gradient: linear-gradient(135deg, var(--klikup-primary), var(--klikup-secondary));
  --bg-deep: #0b0b0f;
}

/* Brand navbar background tuned for logo contrast */
.bg-brand {
  background: var(--klikup-dark);
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* Enhanced card styles */
.card {
  border: none !important;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(33,150,243,0.1) !important;
}

/* Enhanced buttons */
.btn {
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 0.6rem 1.2rem;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--klikup-gradient);
  border: none;
  box-shadow: 0 4px 15px rgba(33,150,243,0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(33,150,243,0.4);
}

/* Hero section enhancement */
.hero {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(33,150,243,0.1);
  box-shadow: 0 20px 40px rgba(33,150,243,0.1);
  position: relative;
  overflow: hidden;
  border-radius: var(--app-radius);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33,150,243,0.1) 0%, transparent 70%);
  z-index: 0;
}

.hero::before {
  width: 600px;
  height: 600px;
  top: -300px;
  right: -200px;
}

.hero::after {
  width: 400px;
  height: 400px;
  bottom: -200px;
  left: -100px;
  background: radial-gradient(circle, rgba(33,150,243,0.05) 0%, transparent 70%);
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* Page background with soft blue */
body {
  background: linear-gradient(135deg, rgba(33,150,243,0.1) 0%, rgba(33,150,243,0.05) 100%);
  min-height: 100vh;
}

.card { 
  border-radius: var(--app-radius); 
  border: 1px solid rgba(33,150,243,0.1); 
  box-shadow: 0 8px 24px rgba(33,150,243,0.05);
  background: rgba(255,255,255,0.9);
}
.btn { border-radius: 0.6rem; }
.table thead th { background: rgba(0,0,0,.03); }
.badge { font-weight: 500; }
.navbar-brand { letter-spacing: .2px; }
.list-group-item { padding-top: .9rem; padding-bottom: .9rem; }

/* Brand text */
.brand-text { font-size: 1.175rem; letter-spacing: .4px; text-transform: uppercase; }
.navbar .navbar-toggler { z-index: 2; }

/* Navbar layout */
.navbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 991px) {
  .navbar-center {
    position: static;
    transform: none;
  }
}

/* Hero-like containers with brand hues */
.hero { background: radial-gradient(80% 60% at 20% 10%, rgba(111,66,193,.10), transparent 60%),
                 radial-gradient(80% 60% at 80% 10%, rgba(255,107,107,.10), transparent 60%),
                 linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2));
        border: 1px solid rgba(0,0,0,.05);
        border-radius: var(--app-radius);
        box-shadow: 0 10px 30px rgba(111,66,193,.08);
}

/* Section wrappers to avoid emptiness */
.section { padding: 1rem 0 0.5rem; margin-bottom: 1rem; }
.section .section-title { font-weight: 600; color: #444; margin-bottom: .5rem; }
.section .section-subtitle { color: #777; margin-bottom: 1rem; }

/* Accent elements */
.btn-primary { background: linear-gradient(90deg, var(--klikup-primary), var(--klikup-accent)); border: none; box-shadow: 0 6px 16px rgba(111,66,193,.25); }
.btn-primary:hover { filter: brightness(1.03); }
.btn-outline-primary { color: var(--klikup-primary); border-color: var(--klikup-primary); }
.btn-outline-primary:hover { background-color: var(--klikup-primary); border-color: var(--klikup-primary); }

/* Cards headers */
.card .card-header { background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.00)); font-weight: 600; }

/* Tables */
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.015); }

/* Utilities */
.shadow-soft { box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; }
.rounded-2 { border-radius: var(--app-radius) !important; }
.grid-gap { row-gap: 1rem; column-gap: 1rem; }

/* Card transitions */
.transition-all {
  transition: all 0.3s ease-in-out;
}

.card.bg-light {
  background: rgba(255,255,255,0.7) !important;
  backdrop-filter: blur(10px);
}

.card.bg-light:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 15px 35px rgba(33,150,243,0.15);
}

.card.bg-light .bg-white {
  background: rgba(255,255,255,0.9) !important;
  transition: all 0.3s ease;
}

.card.bg-light:hover .bg-white {
  background: rgba(33,150,243,0.1) !important;
}

.card.bg-light:hover .text-primary {
  color: var(--klikup-primary) !important;
}

/* Responsive tweaks */
@media (max-width: 576px){
  .display-6 { font-size: 1.8rem; }
}