<?php
// includes/header.php
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Imperial Premium Bank — Dashboard</title>

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Optional: Bootstrap Icons CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <!-- Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

  <style>
    :root{
      --imp-blue: #0b4f9b;
      --imp-dark-blue: #0a3b75;
      --imp-accent: #0b6c9c;
      --imp-red: #d9534f;
      --bg: #f7f9fb;
      --card: #ffffff;
      --muted: #6b7280;
    }
    html,body { height:100%; background:var(--bg); }
    .app-shell { min-height:100vh; display:flex; }
    /* Sidebar */
    .sidebar {
      width: 260px;
      background: linear-gradient(180deg,#ffffff,#f8fbff);
      border-right:1px solid #e7edf6;
      padding:24px 18px;
    }
    .sidebar .brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
    .sidebar .brand img { height:28px; }
    .side-balance { background: linear-gradient(180deg,#fff,#f3f7fb); border-radius:8px; padding:18px; margin-bottom:20px; }
    .nav-item-ghost { color:#51657a; }
    .nav-item-ghost.active, .nav-item-ghost:hover { background:#eef7ff; color:var(--imp-blue); border-radius:8px; }
    .cta-btn { width:100%; display:block; }
    .sidebar .menu .nav-link { color:#556b7a; padding:10px 12px; border-radius:8px; }
    .sidebar .menu .nav-link i { width:20px; }
    /* Main content */
    .main { flex:1; padding:20px 28px; }
    .topbar { height:62px; display:flex; align-items:center; gap:12px; justify-content:space-between; margin-bottom:18px; background:transparent; }
    .greeting { font-size:18px; font-weight:600; color:#24394f; }
    .muted { color:var(--muted); }
    .card-imp { border-radius:10px; padding:18px; background:var(--card); box-shadow:0 6px 18px rgba(16,24,40,0.04); border:1px solid #eef6fb; }
    .big-overview {
      background: linear-gradient(180deg,#093b78,#0b4f9b);
      color:white; border-radius:10px; padding:22px;
    }
    .initials-circle { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px; }
    .small-card { border-radius:8px; padding:12px; background:#eef5fb; }
    .txn-card { border-radius:8px; padding:14px; background:white; border:1px solid #edf3f8; }
    .txn-amount.debit { color: #e04b5d; font-weight:700; }
    .txn-amount.credit { color: #1aa45a; font-weight:700; }
    /* active sidebar item style like screenshot */
    .sidebar .menu .active {
      background: linear-gradient(90deg,#032a55,#0b4f9b);
      color:white !important;
      box-shadow:0 6px 14px rgba(11,79,155,0.12);
    }
    /* small helper */
    .small-muted { font-size:12px; color:var(--muted); }
    @media (max-width: 991px) {
      .sidebar { display:none; }
      .app-shell { flex-direction:column; }
    }
  </style>
</head>
<body>
<div class="app-shell">
