/* Professional blue/white theme overrides */
:root {
  --brand-primary: #0d6efd; /* Primary Blue */
  --brand-primary-dark: #0b5ed7;
  --brand-bg: #f5f7fb;
  /* Multicolor accents */
  --brand-pink: #ec4899;
  --brand-purple: #8b5cf6;
  --brand-teal: #14b8a6;
  --brand-orange: #f59e0b;
  --brand-cyan: #06b6d4;
  --brand-lime: #84cc16;
}

body.bg-light { background-color: var(--brand-bg) !important; }

.navbar-brand { font-weight: 600; letter-spacing: .2px; }

/* Sidebar */
.sidebar { background: #ffffff; }
.sidebar-brand { background: linear-gradient(90deg, var(--brand-pink), var(--brand-purple), var(--brand-primary), var(--brand-cyan), var(--brand-teal), var(--brand-orange)); color: #fff; background-size: 300% 100%; animation: sidebarGradient 12s ease infinite; }
@keyframes sidebarGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.sidebar nav.list-group { padding: .5rem .5rem 1rem; }
.sidebar .list-group-item { border: 0; border-radius: .6rem; padding:.65rem .9rem; margin: .15rem .4rem; color: #111827; display:flex; align-items:center; }
.sidebar .list-group-item i { color: var(--brand-purple); }
.sidebar .list-group-item.active { background: linear-gradient(90deg, rgba(236,72,153,.16), rgba(99,102,241,.18)); color: #4338ca; font-weight: 600; }
.sidebar .list-group-item.active i { color: #0d6efd; }
.sidebar .list-group-item:hover { background: rgba(16,24,40,.04); color:#0d6efd; }
.sidebar .list-group-item:hover i { color:#0d6efd; }
.sidebar .list-group-item { position: relative; }
.sidebar .list-group-item.active::before { content:""; position:absolute; left:-8px; top:8px; bottom:8px; width:4px; background: linear-gradient(180deg, var(--brand-pink), var(--brand-purple)); border-radius: 0 4px 4px 0; }

/* Offcanvas menu styles to match sidebar */
.offcanvas .list-group { padding: .5rem; }
.offcanvas .list-group-item { border:0; border-radius:.6rem; margin:.15rem .25rem; }
.offcanvas .list-group-item.active { background: linear-gradient(90deg, rgba(236,72,153,.16), rgba(99,102,241,.18)); color:#4338ca; font-weight:600; }

/* Cards */
.card { border: 1px solid #e9edf3; }
.card .card-title { margin-bottom: .25rem; }

/* Tables */
.table-modern { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
.table-modern thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; background: transparent; border: 0; padding: .5rem .75rem; }
.table-modern tbody tr { background: #ffffff; box-shadow: 0 2px 12px rgba(16,24,40,.06); }
.table-modern tbody tr:hover { box-shadow: 0 4px 16px rgba(16,24,40,.12); transform: translateY(-1px); }
.table-modern td, .table-modern th { padding: .9rem .95rem; border: 0; }
.table-modern tbody tr td:first-child { border-top-left-radius: .6rem; border-bottom-left-radius: .6rem; }
.table-modern tbody tr td:last-child { border-top-right-radius: .6rem; border-bottom-right-radius: .6rem; }
.table-modern .actions { display:flex; gap:.4rem; justify-content:flex-end; }

/* Buttons */
.btn-primary { box-shadow: 0 2px 6px rgba(13,110,253,.3); }
.btn-outline-secondary:hover { background-color: #f8f9fb; }
.btn-soft { border: 0; }
.btn-soft-primary { background: rgba(13,110,253,.12); color: #0d6efd; }
.btn-soft-primary:hover { background: rgba(13,110,253,.18); color: #0b5ed7; }
.btn-soft-secondary { background: rgba(108,117,125,.15); color: #495057; }
.btn-soft-secondary:hover { background: rgba(108,117,125,.22); color: #343a40; }
.btn-soft-danger { background: rgba(220,53,69,.12); color: #dc3545; }
.btn-soft-danger:hover { background: rgba(220,53,69,.18); color: #bb2d3b; }
/* Extra colorful soft buttons */
.btn-soft-success { background: rgba(16,185,129,.15); color: #16a34a; }
.btn-soft-success:hover { background: rgba(16,185,129,.22); color: #15803d; }
.btn-soft-warning { background: rgba(245,158,11,.15); color: #d97706; }
.btn-soft-warning:hover { background: rgba(245,158,11,.22); color: #b45309; }
.btn-soft-info { background: rgba(6,182,212,.15); color: #0891b2; }
.btn-soft-info:hover { background: rgba(6,182,212,.22); color: #0e7490; }
.btn-soft-pink { background: rgba(236,72,153,.18); color: #db2777; }
.btn-soft-pink:hover { background: rgba(236,72,153,.25); color: #be185d; }
.btn-soft-purple { background: rgba(139,92,246,.18); color: #7c3aed; }
.btn-soft-purple:hover { background: rgba(139,92,246,.25); color: #6d28d9; }

/* Forms */
.form-control:focus { box-shadow: 0 0 0 .25rem rgba(13,110,253,.15); }

/* Alerts */
.alert { border-radius: .5rem; }

/* Badges */
.badge { border-radius: 999px; padding:.35rem .6rem; font-weight: 600; }
/* Gradient badges */
.badge-gradient-pink { background: linear-gradient(135deg, #fda4af, #ec4899); color:#fff; }
.badge-gradient-purple { background: linear-gradient(135deg, #a78bfa, #8b5cf6); color:#fff; }
.badge-gradient-teal { background: linear-gradient(135deg, #5eead4, #14b8a6); color:#073b39; }
.badge-gradient-orange { background: linear-gradient(135deg, #fcd34d, #f59e0b); color:#7a3d00; }
.badge-gradient-cyan { background: linear-gradient(135deg, #67e8f9, #06b6d4); color:#05323a; }

/* Utilities */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }

/* Auth Hero (login) */
.auth-hero { min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden; padding: 2rem; background: radial-gradient(1200px 800px at 10% 10%, rgba(236,72,153,.28), transparent 60%), radial-gradient(1000px 700px at 90% 20%, rgba(16,185,129,.24), transparent 60%), radial-gradient(900px 600px at 20% 80%, rgba(99,102,241,.25), transparent 60%), radial-gradient(1000px 700px at 80% 85%, rgba(245,158,11,.22), transparent 60%), radial-gradient(900px 600px at 15% 50%, rgba(6,182,212,.22), transparent 60%), linear-gradient(180deg, #eef2ff, #f5f7fb); animation: bgFloat 18s ease-in-out infinite alternate; }
.auth-hero:before, .auth-hero:after { content:""; position:absolute; inset:auto; filter: blur(60px); opacity:.7; }
.auth-hero:before { width: 380px; height: 380px; left: -60px; top: -40px; background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.35), transparent 60%); animation: blob1 22s ease-in-out infinite; }
.auth-hero:after { width: 420px; height: 420px; right: -80px; bottom: -60px; background: radial-gradient(circle at 70% 70%, rgba(13,110,253,.35), transparent 60%); animation: blob2 26s ease-in-out infinite; }
@keyframes bgFloat { 0% { background-position: 0 0, 0 0, 0 0, 0 0; } 100% { background-position: 10px -10px, -12px 8px, 8px 10px, 0 0; } }
@keyframes blob1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px, -10px) scale(1.05); } }
@keyframes blob2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px, 16px) scale(1.08); } }

/* Glass card */
.glass-card { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 10px 30px rgba(16,24,40,.18); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border-radius: 1rem; }
.glass-card .card-body { padding: 2rem; }
.glass-card h1, .glass-card .h4, .glass-card .h5 { color: #0f172a; }
.glass-card .form-label { color: #111827; font-weight: 600; }
.glass-card .form-control { background: rgba(255,255,255,.9); border: 1px solid rgba(17,24,39,.08); }
.glass-card .form-control:focus { background: #fff; box-shadow: 0 0 0 .25rem rgba(13,110,253,.15); }
.glass-card .alert { background: rgba(220,53,69,.1); color: #842029; border-color: rgba(220,53,69,.25); }

/* Split auth container */
.auth-shell { width: min(1050px, 94%); background: #fff; border-radius: 1.25rem; box-shadow: 0 30px 80px rgba(2, 6, 23, 0.18); overflow: hidden; }
.auth-left { color: #fff; background: linear-gradient(135deg, #1e3a8a, #2563eb, #0ea5e9); position: relative; }
.auth-left .brand { display:flex; align-items:center; gap:.6rem; font-weight: 700; }
.auth-left .lead-title { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.auth-left .muted { opacity:.9; }
.auth-left .mini-card { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:.75rem; padding: .9rem; }
.auth-left .mini-card .avatar { width:32px; height:32px; border-radius:50%; background: #fef08a; display:inline-block; margin-right:.3rem; }
.auth-right { background: #fff; }
.auth-right .form-hint { display:flex; align-items:center; justify-content:space-between; }
.auth-right .form-hint a { font-weight: 600; color: #2563eb; text-decoration: none; }
.auth-right .form-hint a:hover { text-decoration: underline; }

/* Auth feature list */
.feature-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .6rem; }
.feature-list li { display: flex; align-items: center; gap: .6rem; }
.feature-list i { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.18); }
.chip { display: inline-block; padding: .25rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.chip-pink { background: linear-gradient(135deg, #fda4af, #ec4899); color: #fff; }
.chip-cyan { background: linear-gradient(135deg, #67e8f9, #06b6d4); color: #05323a; }
.chip-teal { background: linear-gradient(135deg, #5eead4, #14b8a6); color: #073b39; }
.chip-orange { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #7a3d00; }

/* Stat Cards */
.stat-card { position: relative; overflow: hidden; border: 0; color: #fff; }
.stat-card .icon { width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; border-radius: 50%; background: rgba(255,255,255,.18); }
.stat-card .value { font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .label { opacity: .9; }
.stat-primary { background: linear-gradient(135deg, #4f8cff, #0d6efd); }
.stat-success { background: linear-gradient(135deg, #34d399, #16a34a); }
.stat-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.stat-info { background: linear-gradient(135deg, #22d3ee, #06b6d4); }

/* Auth hero */
.auth-hero { position: relative; padding: 3rem 0; background: radial-gradient(1200px 600px at 10% -20%, rgba(13,110,253,.18), rgba(13,110,253,0) 60%), radial-gradient(1200px 600px at 110% 120%, rgba(13,110,253,.18), rgba(13,110,253,0) 60%); }
.auth-brand { display:flex; align-items:center; gap:.5rem; font-weight: 700; font-size: 1.15rem; color:#fff; }
.auth-hero .navbar { background: linear-gradient(90deg, #0b5ed7, #0d6efd); }