@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --wb-navy-950: #071426;
  --wb-navy-900: #0b1f3a;
  --wb-navy-800: #12345a;
  --wb-blue-600: #1769e0;
  --wb-blue-500: #2f7df4;
  --wb-teal-500: #13b8a6;
  --wb-surface: #ffffff;
  --wb-canvas: #f3f6fb;
  --wb-border: #dfe7f1;
  --wb-text: #17243a;
  --wb-muted: #66758c;
  --wb-success: #12966f;
  --wb-danger: #dc4c64;
  --wb-warning: #e49b24;
  --wb-radius: 18px;
  --wb-shadow: 0 12px 36px rgba(11, 31, 58, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--wb-canvas) !important;
  color: var(--wb-text) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--wb-text); font-weight: 800; letter-spacing: -.025em; }
a { color: var(--wb-blue-600); }
.text-muted { color: var(--wb-muted) !important; }

/* Navigation */
.navbar {
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid rgba(223,231,241,.9);
  box-shadow: 0 4px 24px rgba(11,31,58,.05);
  backdrop-filter: blur(16px);
  padding-top: .85rem;
  padding-bottom: .85rem;
}
.navbar-brand { font-weight: 800; color: var(--wb-navy-900) !important; letter-spacing: -.02em; }
.navbar-brand img { box-shadow: 0 4px 14px rgba(23,105,224,.18); }
.navbar .nav-link { color: #3e4c62 !important; font-weight: 600; border-radius: 10px; padding: .55rem .8rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--wb-blue-600) !important; background: #edf4ff; }
.navbar-toggler { border-color: var(--wb-border) !important; box-shadow: none !important; }
.navbar-dark .navbar-toggler-icon { filter: invert(1); }

/* Public landing page */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 15%, rgba(47,125,244,.28), transparent 28%),
    radial-gradient(circle at 15% 85%, rgba(19,184,166,.17), transparent 28%),
    linear-gradient(135deg, var(--wb-navy-950), var(--wb-navy-800)) !important;
  color: #fff !important;
  padding: clamp(5rem, 10vw, 8.5rem) 1rem !important;
}
.hero::after { content:''; position:absolute; width:340px; height:340px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-100px; bottom:-180px; }
.hero h1 { color:#fff !important; font-size:clamp(2.5rem,6vw,4.8rem) !important; line-height:1.05; max-width:900px; margin-inline:auto; }
.hero p { color:#d8e5f7 !important; font-size:clamp(1rem,2vw,1.25rem); max-width:720px; margin-inline:auto; }
.feature-icon { color:var(--wb-blue-600) !important; width:58px; height:58px; display:inline-grid; place-items:center; border-radius:16px; background:#eaf2ff; }
section { scroll-margin-top:90px; }

/* Core surfaces */
.card, .panel, .metric, .login-container, .register-container, .form-container, .report-container, .premium-card,
.content-card, .request-card, .file-card, .summary-box {
  background:var(--wb-surface) !important;
  border:1px solid var(--wb-border) !important;
  border-radius:var(--wb-radius) !important;
  box-shadow:var(--wb-shadow) !important;
}
.card { overflow:hidden; transition:transform .22s ease, box-shadow .22s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 18px 42px rgba(11,31,58,.12) !important; }
.card-header { background:#f8faff !important; border-color:var(--wb-border) !important; font-weight:700; padding:1rem 1.25rem; }
.card-body { padding:1.35rem; }

/* Buttons */
.btn { border-radius:11px !important; font-weight:700 !important; padding:.7rem 1.15rem; transition:all .18s ease; }
.btn-primary { background:linear-gradient(135deg,var(--wb-blue-600),var(--wb-blue-500)) !important; border:0 !important; box-shadow:0 8px 20px rgba(23,105,224,.22); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 12px 25px rgba(23,105,224,.3); }
.btn-success { background:var(--wb-success) !important; border-color:var(--wb-success) !important; }
.btn-danger { background:var(--wb-danger) !important; border-color:var(--wb-danger) !important; }
.btn-outline-primary { border-color:#abc8f5 !important; color:var(--wb-blue-600) !important; }
.btn-outline-primary:hover { background:var(--wb-blue-600) !important; color:#fff !important; }
.btn-light { background:#eef3fa !important; border-color:#eef3fa !important; color:#293a52 !important; }

/* Forms and auth */
.login-container, .register-container { max-width:480px !important; padding:clamp(1.5rem,5vw,2.75rem) !important; margin:clamp(2rem,7vh,5rem) auto !important; }
.login-container::before, .register-container::before { content:''; display:block; width:48px; height:5px; margin:0 auto 1.5rem; border-radius:10px; background:linear-gradient(90deg,var(--wb-blue-600),var(--wb-teal-500)); }
.form-control, .form-select, textarea {
  min-height:48px;
  background:#fbfcfe !important;
  border:1px solid #ced9e8 !important;
  border-radius:11px !important;
  color:var(--wb-text) !important;
  padding:.72rem .9rem !important;
}
.form-control:focus, .form-select:focus, textarea:focus { background:#fff !important; border-color:var(--wb-blue-500) !important; box-shadow:0 0 0 4px rgba(47,125,244,.13) !important; }
.form-label { font-weight:700; color:#34445b; margin-bottom:.45rem; }
.input-group-text { border-color:#ced9e8; background:#f1f5fa; }

/* App sidebar and dashboard */
.sidebar {
  width:280px !important;
  background:linear-gradient(180deg,var(--wb-navy-950),var(--wb-navy-900)) !important;
  border-right:1px solid rgba(255,255,255,.07);
  box-shadow:14px 0 35px rgba(7,20,38,.12);
  padding:1.5rem 1rem !important;
}
.sidebar h5, .sidebar .brand { color:#fff !important; font-weight:800; }
.sidebar img { border:3px solid rgba(255,255,255,.18) !important; box-shadow:0 10px 26px rgba(0,0,0,.25); }
.sidebar nav { display:flex !important; flex-direction:column !important; width:100% !important; gap:4px !important; }
.sidebar nav a, .sidebar > a, .sidebar .sidebar-link {
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-height:46px !important;
  color:#c5d2e4 !important;
  text-decoration:none !important;
  border-radius:11px !important;
  padding:.72rem .85rem !important;
  margin:.2rem 0 !important;
  font-weight:600 !important;
}
.sidebar nav a:hover, .sidebar > a:hover, .sidebar .sidebar-link:hover { color:#fff !important; background:rgba(255,255,255,.09) !important; transform:none !important; }
.sidebar .active, .sidebar .sidebar-link.active { color:#fff !important; background:linear-gradient(135deg,rgba(47,125,244,.95),rgba(19,184,166,.72)) !important; box-shadow:0 8px 20px rgba(0,0,0,.15); margin-left:0 !important; padding-left:.85rem !important; }
.main, main { padding:clamp(1.25rem,3vw,2.25rem) !important; }
body:has(.sidebar) .main, body:has(.sidebar) main { margin-left:280px !important; }
.card-summary { color:var(--wb-text) !important; background:#fff !important; border:1px solid var(--wb-border) !important; border-radius:var(--wb-radius) !important; box-shadow:var(--wb-shadow) !important; padding:1.35rem !important; position:relative; overflow:hidden; }
.card-summary::before { content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--wb-blue-500); }
.card-summary.card-income::before { background:var(--wb-success); }
.card-summary.card-expense::before { background:var(--wb-danger); }
.card-summary.card-balance::before { background:var(--wb-blue-500); }
.card-summary h6 { color:var(--wb-muted) !important; text-transform:uppercase; letter-spacing:.07em; font-size:.73rem; }
.card-summary h3, .card-summary h4 { color:var(--wb-text) !important; }
.metric { padding:1.35rem !important; }
.metric strong { color:var(--wb-text); }

/* Tables, alerts, modals */
.table-responsive { border-radius:var(--wb-radius); }
.table { --bs-table-bg:transparent; --bs-table-hover-bg:#f4f8fe; color:var(--wb-text); }
.table thead th { background:#eef3f9; color:#526178; border-bottom:1px solid var(--wb-border); font-size:.76rem; text-transform:uppercase; letter-spacing:.055em; white-space:nowrap; }
.table td { border-color:#e8edf4; }
.badge { border-radius:999px; padding:.48em .72em; font-weight:700; }
.alert { border:0 !important; border-radius:13px !important; box-shadow:0 6px 18px rgba(11,31,58,.06); }
.modal-content { border:1px solid var(--wb-border) !important; border-radius:20px !important; box-shadow:0 25px 70px rgba(7,20,38,.22); overflow:hidden; }
.modal-header, .modal-footer { border-color:var(--wb-border) !important; }
.dropdown-menu { border:1px solid var(--wb-border); border-radius:13px; box-shadow:var(--wb-shadow); padding:.5rem; }
.dropdown-item { border-radius:8px; padding:.6rem .75rem; }

footer, .footer { background:var(--wb-navy-950) !important; color:#aebed3 !important; border:0 !important; }
footer a, .footer a { color:#dbeafe !important; }
#loader-wrapper { background:var(--wb-canvas) !important; }
.loader { border-color:#dbe7f5 !important; border-top-color:var(--wb-blue-600) !important; }
.loading-text { color:var(--wb-navy-800) !important; font-weight:700; }

/* Dark mode */
body.dark-mode { --wb-surface:#101d30; --wb-canvas:#081321; --wb-border:#263750; --wb-text:#e8eef8; --wb-muted:#9dafc7; background:var(--wb-canvas) !important; color:var(--wb-text) !important; }
body.dark-mode .navbar { background:rgba(8,19,33,.94) !important; border-color:var(--wb-border); }
body.dark-mode .navbar-brand, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color:var(--wb-text) !important; }
body.dark-mode .navbar .nav-link { color:#bdcbe0 !important; }
body.dark-mode .card, body.dark-mode .panel, body.dark-mode .metric, body.dark-mode .login-container, body.dark-mode .register-container, body.dark-mode .card-summary, body.dark-mode .modal-content { background:var(--wb-surface) !important; border-color:var(--wb-border) !important; color:var(--wb-text) !important; }
body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode textarea { background:#0c1828 !important; border-color:#334760 !important; color:var(--wb-text) !important; }
body.dark-mode .table { color:var(--wb-text); --bs-table-hover-bg:#172940; }
body.dark-mode .table thead th { background:#17263a; color:#b8c8dc; }
body.dark-mode .table td { border-color:var(--wb-border); color:var(--wb-text); }
body.dark-mode .text-muted { color:var(--wb-muted) !important; }

@media (max-width: 991.98px) {
  body:has(.sidebar) .main, body:has(.sidebar) main { margin-left:0 !important; padding-top:1.25rem !important; }
  .navbar-collapse { background:var(--wb-surface); padding:1rem; margin-top:.75rem; border:1px solid var(--wb-border); border-radius:14px; box-shadow:var(--wb-shadow); }
  .hero { padding-top:5.5rem !important; }
  footer { margin-left:0 !important; }
}

@media (max-width: 575.98px) {
  .login-container, .register-container { margin:1rem !important; padding:1.5rem !important; }
  .card-body, .panel { padding:1rem !important; }
  .btn { padding:.65rem .9rem; }
  .hero h1 { font-size:2.35rem !important; }
}