/* Fonts and base */
:root {
  --bg-gradient: #ffffff;
  --card-bg: rgba(255,255,255,0.95);
  --card-border: rgba(17,24,39,0.12);
  --text-color: #111827;
  --muted-text: #64748b;
  --accent: #6366f1;
  --accent-2: #10b981;
}

[data-theme="dark"] {
  --bg-gradient: radial-gradient(1200px 800px at 20% 10%, rgba(99,102,241,0.25), transparent 45%),
                 radial-gradient(1000px 600px at 80% 30%, rgba(16,185,129,0.20), transparent 45%),
                 linear-gradient(160deg, #0b1020, #070b16);
  --card-bg: rgba(17,24,39,0.65);
  --card-border: rgba(255,255,255,0.12);
  --text-color: #e5e7eb;
  --muted-text: #94a3b8;
}

html, body {
  height: 100%;
}
body {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-color);
  background: var(--bg-gradient);
  background-attachment: fixed;
}

/* Layout */
.app-wrapper { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar { backdrop-filter: blur(18px); background: var(--card-bg); border-right: 1px solid var(--card-border); padding: 20px; display: flex; flex-direction: column; }
.sidebar .brand { font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.sidebar .brand .brand-logo { flex-shrink: 0; }
.sidebar .brand .brand-title, .sidebar .brand span { line-height: 1; }
.sidebar .nav-link { color: var(--text-color); border-radius: 12px; padding: 10px 12px; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { background: rgba(99,102,241,0.15); color: var(--text-color); }
.sidebar .nav-link i { margin-right: 8px; }
.theme-toggle .btn { border-radius: 12px; }
.theme-toggle .btn.btn-outline-light { color: var(--text-color); border-color: var(--card-border); }

.content { padding: 24px; }
.content-header { backdrop-filter: blur(12px); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px 18px; }
.content-body { margin-top: 18px; }

/* Cards (glassmorphism) */
.card-glass { backdrop-filter: blur(16px); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.card-glass .card-header { border-bottom: 1px solid var(--card-border); }

/* Gradients and badges */
.badge-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; }
.btn-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border: none; color: white; }
.btn-gradient:hover { filter: brightness(1.05); }

/* Progress bars */
.progress { height: 8px; border-radius: 10px; }

/* Forms */
.form-control, .form-select { border-radius: 12px; }

/* Login */
.login-wrapper { display: grid; place-items: center; min-height: 100vh; }
.login-card { max-width: 420px; width: 92vw; }

/* Responsive */
@media (max-width: 992px) {
  .app-wrapper { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 10; }
}

/* Header search and actions */
.header-search { max-width: 520px; width: 100%; }
.header-search .form-control { background: rgba(255,255,255,0.8); border: 1px solid var(--card-border); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--text-color); text-decoration: none; background: rgba(255,255,255,0.6); border: 1px solid var(--card-border); }
.icon-btn:hover { background: rgba(99,102,241,0.15); }

/* Dashboard metric tweaks */
.card-glass .text-muted { color: var(--muted-text) !important; }
.fs-4.fw-semibold { letter-spacing: 0.3px; }

/* Breadcrumbs and small text */
.small { color: var(--muted-text); }

/* Metric boxes (Dashboard) */
.metric-box-paid { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35); }
.metric-value-paid { color: #065f46; }
.metric-box-outstanding { background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.35); }
.metric-value-outstanding { color: #7f1d1d; }
.metric-box-balance { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); }

/* Branding images and titles */
.brand-logo, .login-logo { width: 28px; height: 28px; display: inline-block; object-fit: contain; vertical-align: middle; }
.brand-title, .login-brand .brand-title { color: var(--text-color); }

/* Centered login brand */
.login-brand { display: flex; flex-direction: column; align-items: center; }

/* Enhance login visuals */
.login-wrapper { background: radial-gradient(1200px circle at 10% 10%, rgba(130, 87, 229, 0.18), transparent), linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(16, 185, 129, 0.12)); }
.login-card { border-radius: 18px; box-shadow: 0 14px 36px rgba(0,0,0,0.18); }

/* Mobile-friendly tweaks */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  .sidebar { padding: 14px; }
  .sidebar .nav-link { padding: 8px 10px; }
  .content { padding: 16px; }
  .content-header { padding: 12px 14px; }
}

@media (max-width: 576px) {
  .content { padding: 12px; }
  .content-header { padding: 10px 12px; border-radius: 14px; }
  .login-card { width: 95vw; }
  .brand-logo, .login-logo { width: 26px; height: 26px; }
  .form-control, .form-select { font-size: 16px; }
  .btn, .btn-gradient { padding: 10px 14px; font-size: 16px; }
  .header-search { display: none; }
  table.table th, table.table td { white-space: nowrap; }
}