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

:root {
  --olive-dark:  #004b35;
  --olive-main:  #006241;
  --olive-light: #00b36b;
  --bg-page:    #f3f4f6;
}

/* Dark mode variables */
.dark-mode {
  --bg-page: #1f2933;
}

body, .app-body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg-page);
}

/* Navbar */
.app-navbar {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}
.dark-mode .app-navbar {
  background: #111827;
  border-color: #1f2937;
}
.nav-logo-circle {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(145deg, var(--olive-dark), var(--olive-light));
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.9rem;
}
.filter-bar {
    border-radius: 18px;
    background: #ffffff;
}

.dark-mode .filter-bar {
    background: #0f172a;
}

.btn-primary {
    background: #1363DF;
    border: none;
}

.btn-primary:hover {
    background: #0b4fc0;
}
.card {
    border-radius: 18px !important;
    transition: 0.2s;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0px 12px 24px rgba(0,0,0,0.08);
}

/* Login */
.login-split-page { background: var(--bg-page); min-height:100vh; }
.login-left-panel {
  background: linear-gradient(145deg, var(--olive-dark), var(--olive-main), var(--olive-light));
  padding:4rem 3rem; color:#fff;
}
.login-left-content h1 { font-weight:800; font-size:2.4rem; line-height:1.3; }
.login-left-content p { color:rgba(255,255,255,0.85); }
.login-logo-circle {
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,0.15);display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;color:#fff;
}
.info-card {
  background:rgba(255,255,255,0.15);
  border-radius:18px;padding:1rem 1.25rem;
  backdrop-filter:blur(4px);box-shadow:0 8px 22px rgba(0,0,0,0.25);
}
.login-form-wrapper {
  background:#fff;border-radius:24px;padding:2.5rem 2.75rem;
  max-width:450px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,0.08);
  animation: fadeInUp .5s ease;
}
.login-main-btn {
  background:#1663ff;border:none;font-weight:600;border-radius:10px;
  padding:0.9rem 1rem;box-shadow:0 10px 20px rgba(22,99,255,0.35);
  transition:all .25s ease;
}
.login-main-btn:hover { transform:translateY(-2px);box-shadow:0 14px 30px rgba(22,99,255,0.45); }
.password-toggle { position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#8a94a6; }

/* Cards & tables */
.card { border-radius:20px;border:none;box-shadow:0 10px 30px rgba(15,23,42,0.05); }
.dark-mode .card { background:#111827;color:#e5e7eb; }
.stat-card .stat-icon {
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;
}
.table thead th { font-size:0.85rem;text-transform:uppercase;color:#6b7280;border-bottom:1px solid #e5e7eb; }
.dark-mode .table thead th { color:#9ca3af;border-color:#374151; }

/* Responsive table as cards on mobile */
@media (max-width: 768px) {
  table.responsive-card-table thead { display:none; }
  table.responsive-card-table tbody tr {
    display:block;background:#fff;margin-bottom:0.85rem;
    border-radius:16px;padding:0.8rem 1rem;
    box-shadow:0 4px 10px rgba(15,23,42,0.08);
  }
  .dark-mode table.responsive-card-table tbody tr { background:#111827; }
  table.responsive-card-table tbody tr td {
    display:block;padding:0.1rem 0;border:none;
  }
  table.responsive-card-table tbody tr td:first-child {
    font-size:0.8rem;color:#6b7280;text-transform:uppercase;margin-bottom:0.15rem;
  }
  table.responsive-card-table tbody tr td.main-line {
    font-weight:600;font-size:1.02rem;
  }
  table.responsive-card-table tbody tr td.sub-line {
    font-size:0.9rem;color:#4b5563;
  }
  .dark-mode table.responsive-card-table tbody tr td.sub-line { color:#e5e7eb; }
}

/* Anim */
@keyframes fadeInUp { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);} }

@media(max-width:991px){
  .login-left-panel{display:none!important;}
  .login-form-wrapper{max-width:100%;height:100vh;border-radius:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center;}
}