<?php
session_start();
$page = basename($_SERVER['PHP_SELF']);
?>

<!DOCTYPE html>
<html>
<head>
<title>Sistem Absensi</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<style>

body{
    background:#f4f6f9;
    overflow-x:hidden;
}

/* CARD */

.card{
    border:none;
    border-radius:18px;
    box-shadow:0 4px 20px rgba(0,0,0,0.05);
}

/* BUTTON */

.btn{
    border-radius:12px;
    padding:10px;
    font-weight:600;
}

/* SEARCH RESULT */

#result{
    position:absolute;
    width:100%;
    z-index:999;
    max-height:250px;
    overflow-y:auto;
    border-radius:10px;
    overflow-y:auto;
}

/* FILTER DATE */

.filter-date{
    width:25%;
}

/* TABLE */

.table{
    vertical-align:middle;
}

/* MOBILE */

@media(max-width:768px){

.filter-date{
    width:100%;
    margin-top:10px;
}

.card{
    border-radius:14px;
}

h4{
    font-size:22px;
}

table{
    font-size:13px;
}

.btn{
    font-size:13px;
}

.navbar .container{
    flex-direction:column;
    gap:10px;
}

.navbar .d-flex{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
}

}

</style>

</head>

<body>

<nav class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">

<span class="navbar-brand">📊 Sistem Absensi</span>

<div class="d-flex gap-2">

<a href="hal_kehadiran.php"
class="btn btn-sm <?= $page=='hal_kehadiran.php'?'btn-primary':'btn-outline-primary' ?>">
📋 Kehadiran
</a>

<a href="hal_keterlambatan.php"
class="btn btn-sm <?= $page=='hal_keterlambatan.php'?'btn-warning':'btn-outline-warning' ?>">
⏰ Keterlambatan
</a>

<a href="login.php"
class="btn btn-sm <?= $page=='login.php'?'btn-success':'btn-outline-success' ?>">
🔐 Admin
</a>

</div>

</div>
</nav>

<div class="container mt-4">