<!-- ===== DASHBOARD CONTENT (MATCHES header.php layout) ===== -->
<style>
  /* dashboard-only styles; header.php already handles layout/topbar/sidebar */
  .page-title{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:12px; flex-wrap:wrap;
    margin: 6px 0 14px;
  }
  .page-title h2{margin:0; font-size:22px; font-weight:1200; color:#0b2a66;}
  .page-title p{margin:6px 0 0; color:#64748b; font-size:13px; font-weight:850;}

  .actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
  .btnx{
    border:0;
    border-radius:16px;
    padding:11px 14px;
    font-weight:1100;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    transition:.18s ease;
    background: rgba(255,255,255,.85);
    border:1px solid rgba(15,23,42,.10);
    box-shadow: 0 14px 30px rgba(2,6,23,.08);
    color:#0d47a1;
    white-space:nowrap;
  }
  .btnx.primary{
    color:#fff;
    background: linear-gradient(135deg, #1a73e8, #0d47a1);
    border:0;
  }
  .btnx:hover{transform:translateY(-1px)}

  .hero{
    border-radius: 24px;
    padding:16px;
    background:
      radial-gradient(circle at 20% 20%, rgba(14,165,255,.25), transparent 45%),
      radial-gradient(circle at 85% 35%, rgba(26,115,232,.20), transparent 45%),
      linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.60));
    border:1px solid rgba(26,115,232,.14);
    box-shadow: 0 24px 60px rgba(2,6,23,.12);
    overflow:hidden;
    margin-bottom:14px;
  }
  .hero-inner{
    display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  }
  .chips{display:flex; gap:10px; flex-wrap:wrap}
  .chip{
    padding:10px 12px;
    border-radius:999px;
    background: rgba(255,255,255,.90);
    border:1px solid rgba(15,23,42,.08);
    font-size:12px;
    font-weight:1000;
    color:#0b2a66;
  }

  .grid{
    display:grid;
    grid-template-columns: repeat(12, 1fr);
    gap:14px;
    margin-top: 14px;
  }
  .card{
    border-radius: 22px;
    border:1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 30px rgba(2,6,23,.08);
    backdrop-filter: blur(10px);
    overflow:hidden;
  }
  .head{
    padding:14px 16px;
    border-bottom:1px solid rgba(15,23,42,.08);
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; flex-wrap:wrap;
    background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  }
  .head h3{
    margin:0;
    font-size:13px;
    font-weight:1100;
    color:#0b2a66;
    letter-spacing:.3px;
    text-transform:uppercase;
  }
  .body{padding:16px;}

  .stat{display:flex; gap:12px; align-items:center;}
  .icon{
    width:54px; height:54px; border-radius:20px;
    display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(26,115,232,.16), rgba(14,165,255,.10));
    border:1px solid rgba(26,115,232,.18);
    font-weight:1100;
    color:#0b2a66;
    flex: 0 0 auto;
  }
  .icon.good{background: linear-gradient(135deg, rgba(15,157,88,.16), rgba(15,157,88,.06)); border-color: rgba(15,157,88,.18); color:#0f9d58;}
  .icon.bad{background: linear-gradient(135deg, rgba(229,57,53,.16), rgba(229,57,53,.06)); border-color: rgba(229,57,53,.18); color:#e53935;}
  .icon.warn{background: linear-gradient(135deg, rgba(251,140,0,.16), rgba(251,140,0,.06)); border-color: rgba(251,140,0,.18); color:#fb8c00;}

  .k{margin:0; font-size:12px; color:#64748b; font-weight:900}
  .v{margin:6px 0 0; font-size:22px; font-weight:1200; letter-spacing:.2px}

  .tools{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
  .inp{
    width:280px; max-width:100%;
    padding:11px 12px;
    border-radius:16px;
    border:1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.92);
    outline:none;
  }
  .inp:focus{box-shadow:0 0 0 4px rgba(26,115,232,.12); border-color: rgba(26,115,232,.40)}

  .tablewrap{overflow:auto;}
  table{width:100%; border-collapse:collapse; font-size:13px; min-width: 700px;}
  thead th{
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.45px;
    padding:12px 10px;
    color:#334155;
    border-bottom:1px solid rgba(15,23,42,.08);
    background: rgba(248,251,255,.88);
    position:sticky; top:0;
  }
  tbody td{
    padding:12px 10px;
    border-bottom:1px solid rgba(15,23,42,.08);
    white-space:nowrap;
  }
  tbody tr:hover{background: rgba(14,165,255,.06);}

  .badge{
    display:inline-block;
    padding:7px 10px;
    border-radius:999px;
    font-weight:1100;
    font-size:11px;
  }
  .b-ok{background:rgba(15,157,88,.12); color:#0f9d58; border:1px solid rgba(15,157,88,.18);}
  .b-bad{background:rgba(229,57,53,.12); color:#e53935; border:1px solid rgba(229,57,53,.18);}
  .b-warn{background:rgba(251,140,0,.12); color:#fb8c00; border:1px solid rgba(251,140,0,.18);}

  .note{
    padding:12px 14px;
    border-radius:18px;
    background: rgba(251,140,0,.10);
    border:1px solid rgba(251,140,0,.20);
    color:#7c2d12;
    font-weight:950;
    font-size:12px;
  }

  .span4{grid-column: span 4;}
  .span6{grid-column: span 6;}
  .span12{grid-column: span 12;}

  @media (max-width: 900px){
    .span4{grid-column: span 6;}
    table{min-width: 650px;}
  }
  @media (max-width: 680px){
    .span4,.span6{grid-column: span 12;}
    .inp{width:100%}
    table{min-width: 620px;}
  }
</style>