/* ==========================================================
   WHITE / PROFESSIONAL THEME
   ========================================================== */
:root{
  --primary:#1d4ed8;
  --primary-dark:#1e3a8a;
  --accent:#0ea5e9;
  --bg:#f5f7fb;
  --card-bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:#e5e7eb;
  --success:#16a34a;
  --danger:#dc2626;
  --warning:#d97706;
}

*{box-sizing:border-box;}

body{
  background:
    linear-gradient(180deg, rgba(245,247,251,.97), rgba(245,247,251,.97)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23e6ebf5' fill-opacity='0.6'%3E%3Cpath d='M0 0h60v60H0zM60 60h60v60H60z'/%3E%3C/g%3E%3C/svg%3E");
  background-color:var(--bg);
  color:var(--text);
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  min-height:100vh;
}

/* ---- Top navbar ---- */
.app-navbar{
  background:#ffffff;
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.app-navbar .brand{
  font-weight:700;
  color:var(--primary-dark);
  letter-spacing:.3px;
}
.app-navbar .nav-link{
  color:var(--text)!important;
  font-weight:500;
}
.app-navbar .nav-link.active{
  color:var(--primary)!important;
}
.app-navbar .badge-role{
  background:var(--primary);
  color:#fff;
  font-size:.7rem;
  padding:.3rem .6rem;
  border-radius:20px;
}

/* ---- Login page ---- */
.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  background:
    linear-gradient(120deg,rgba(29,78,216,.92),rgba(14,165,233,.85)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cpattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='20' cy='20' r='1.4' fill='white' fill-opacity='0.18'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23p)'/%3E%3C/svg%3E");
  background-size:cover;
  padding:40px;
}
.login-card{
  width:100%;
  max-width:380px;
  background:#fff;
  border-radius:14px;
  padding:32px 28px;
  box-shadow:0 20px 45px rgba(15,23,42,.25);
  margin-top:20px;
}
.login-card h3{font-weight:700;color:var(--primary-dark);}
.login-card .form-control{border-radius:8px;padding:.6rem .8rem;}
.login-card .btn-primary{
  background:var(--primary);border:none;border-radius:8px;padding:.6rem;font-weight:600;
}
.login-card .btn-primary:hover{background:var(--primary-dark);}
.forgot-link{font-size:.85rem;color:var(--primary);text-decoration:none;}
.forgot-link:hover{text-decoration:underline;}

/* ---- Generic cards / dashboard ---- */
.page-wrap{padding:24px;}
.card-panel{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
  margin-bottom:22px;
}
.stat-card{
  background:var(--card-bg);
  border-radius:12px;
  border:1px solid var(--border);
  padding:18px;
  text-align:center;
}
.stat-card h2{font-weight:700;color:var(--primary-dark);margin-bottom:4px;}
.stat-card span{color:var(--muted);font-size:.85rem;}

.table thead{background:#eef2ff;}
.table thead th{border-bottom:none;font-size:.82rem;text-transform:uppercase;color:var(--muted);letter-spacing:.4px;}
.badge-active{background:var(--success);}
.badge-inactive{background:var(--danger);}

.btn-app{background:var(--primary);border:none;color:#fff;border-radius:8px;}
.btn-app:hover{background:var(--primary-dark);color:#fff;}

.entry-row{position:relative;}
.entry-row .remove-row{cursor:pointer;color:var(--danger);}

/* ---- Responsive: Tablet ---- */
@media (max-width:991.98px){
  .page-wrap{padding:16px;}
  .login-wrapper{justify-content:center;padding:20px;}
  .login-card{margin-top:0;}
}

/* ---- Responsive: Phone ---- */
@media (max-width:575.98px){
  .card-panel{padding:14px;}
  .stat-card{margin-bottom:12px;}
  .table{font-size:.8rem;}
  .login-card{padding:24px 18px;}
  .app-navbar .brand{font-size:1rem;}
}