/* =========================================
   DONEZO-STYLE DASHBOARD THEME
   Include this AFTER your existing CSS files
   e.g. <link rel="stylesheet" href="dashboard-theme.css">
========================================= */

:root{
  --dz-green-dark:#1f4d3e;
  --dz-green:#2e7d5b;
  --dz-green-light:#eaf5ef;
  --dz-bg:#f5f6f8;
  --dz-card-bg:#ffffff;
  --dz-text-dark:#1c1c1c;
  --dz-text-muted:#8a8f98;
  --dz-radius:16px;
  --dz-shadow:0 4px 20px rgba(0,0,0,0.05);
}

body{
  background:var(--dz-bg) !important;
  color:var(--dz-text-dark);
}

/* ---------- Generic Cards ---------- */
.card{
  background:var(--dz-card-bg);
  border:none !important;
  border-radius:var(--dz-radius) !important;
  box-shadow:var(--dz-shadow);
}

.card-header{
  background:transparent !important;
  border-bottom:none !important;
  padding:20px 20px 0 20px;
}

.card-header h4, .card-header h5{
  font-weight:700;
  color:var(--dz-text-dark);
}

.card-body{
  padding:20px;
}

/* ---------- Stat Cards (Total Invoice, Total Sale, etc.) ---------- */
.card-primary,
.card-success,
.card-warning,
.card-danger,
.card-info{
  background:var(--dz-card-bg) !important;
  color:var(--dz-text-dark) !important;
}

/* Make the first / hero stat card green like "Total Projects" in reference */
.card-primary .card-body{
  background:var(--dz-green-dark);
  color:#fff !important;
  border-radius:var(--dz-radius);
}
.card-primary .card-body h5,
.card-primary .card-body h2{
  color:#fff !important;
}

.card-success .card-body h5,
.card-warning .card-body h5,
.card-danger .card-body h5,
.card-info .card-body h5{
  color:var(--dz-text-muted);
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
}

.card-success .card-body h2,
.card-warning .card-body h2,
.card-danger .card-body h2,
.card-info .card-body h2{
  font-size:28px;
  font-weight:700;
  color:var(--dz-text-dark);
}

/* Small colored dot / accent before stat labels (optional use) */
.card-body h5::before{
  content:"";
}

/* ---------- Buttons ---------- */
.btn, a.btn{
  border-radius:999px !important;
  padding:8px 20px;
  font-weight:600;
  border:none;
}

.btn-primary, .btn-success{
  background:var(--dz-green-dark) !important;
  border-color:var(--dz-green-dark) !important;
  color:#fff !important;
}

.btn-outline-primary, .btn-outline-success{
  background:#fff !important;
  border:1.5px solid #e2e5e9 !important;
  color:var(--dz-text-dark) !important;
}

.btn:hover{
  opacity:0.9;
}

/* ---------- Sidebar ---------- */
.main-sidebar, #sidebar-wrapper{
  background:#ffffff !important;
  border-right:1px solid #eef0f2;
}

.sidebar-menu li a{
  color:var(--dz-text-muted) !important;
  font-weight:500;
  border-radius:10px;
}

.sidebar-menu li.active > a,
.sidebar-menu li a:hover{
  background:var(--dz-green-light) !important;
  color:var(--dz-green-dark) !important;
}

.sidebar-menu li.active > a i,
.sidebar-menu li a:hover i{
  color:var(--dz-green-dark) !important;
}

/* ---------- Navbar ---------- */
.navbar.main-navbar{
  background:#fff !important;
  box-shadow:0 1px 0 rgba(0,0,0,0.04);
}

/* ---------- "Add Invoice" quick action card ---------- */
.col-md-3 .card.shadow-sm{
  border-radius:var(--dz-radius) !important;
  transition:transform .15s ease;
}
.col-md-3 .card.shadow-sm:hover{
  transform:translateY(-3px);
}
.col-md-3 .card.shadow-sm i{
  color:var(--dz-green-dark);
}

/* ---------- Chart Cards ---------- */
canvas#monthlyChart, canvas#dailyChart{
  border-radius:12px;
}

/* ---------- Headings ---------- */
h4, h5{
  color:var(--dz-text-dark);
}