<?php
session_start();

// CEK LOGIN
if (!isset($_SESSION['status']) || $_SESSION['status'] != 'login') {

    header("Location: login.php");
    exit;

}
?>

<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport"
      content="width=device-width, initial-scale=1">

<title>Sistem Perpustakaan</title>

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

<!-- ADMIN LTE -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">

<!-- FONT AWESOME -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">

<!-- GOOGLE FONT -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">

<!-- DATATABLE -->
<link rel="stylesheet"
href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">

<link rel="stylesheet"
href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap4.min.css">

<style>

/* =========================
   BODY
========================= */

body{

    font-family: 'Source Sans Pro', sans-serif;
    background: #f4f6f9;

}

/* =========================
   NAVBAR
========================= */

.navbar{

    box-shadow: 0 2px 10px rgba(0,0,0,0.08);

}

/* =========================
   SIDEBAR
========================= */

.main-sidebar{

    background: #343a40 !important;

}

.brand-link{

    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: white !important;

}

/* =========================
   DASHBOARD BOX
========================= */

.small-box{

    border-radius: 14px;
    overflow: hidden;
    transition: 0.3s;

}

.small-box:hover{

    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);

}

.small-box .icon i{

    transition: 0.3s;

}

.small-box:hover .icon i{

    transform: scale(1.1);

}

/* =========================
   CARD PERPUSTAKAAN
========================= */

.card-perpus{

    border-radius: 18px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #198754,
        #20c997
    );

    color: white;

    box-shadow: 0 12px 30px rgba(0,0,0,.12);

}

.card-perpus .card-body{

    padding: 1.5rem;

}

.perpus-label{

    opacity: .9;
    font-size: .85rem;
    letter-spacing: .5px;
    text-transform: uppercase;

}

.perpus-total{

    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;

}

.perpus-title{

    font-size: 1rem;
    font-weight: 600;
    opacity: .95;

}

/* =========================
   CARD
========================= */

.card{

    border-radius: 12px;
    border: none;

    box-shadow:
    0 4px 15px rgba(0,0,0,0.05);

}

.card-header{

    font-weight: bold;

}

/* =========================
   BUTTON
========================= */

.btn{

    border-radius: 10px;

}

/* =========================
   FORM
========================= */

.form-control{

    border-radius: 10px;

}

/* =========================
   TABLE
========================= */

.table th{

    background: #007bff;
    color: white;
    text-align: center;

}

.table td,
.table th{

    vertical-align: middle;

}

/* =========================
   BADGE
========================= */

.badge{

    padding: 7px 10px;
    font-size: 12px;

}

/* =========================
   DATATABLE
========================= */

.dataTables_wrapper .dt-buttons{

    margin-bottom: 10px;

}

/* =========================
   MODAL
========================= */

.modal-content{

    border-radius: 12px;

}

/* =========================
   TIMELINE
========================= */

.timeline > li > .timeline-item{

    box-shadow: 0 4px 18px rgba(0,0,0,.05);

}

/* =========================
   FOOTER
========================= */

.main-footer{

    background: white;
    border-top: 1px solid #ddd;

}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

    width: 8px;

}

::-webkit-scrollbar-thumb{

    background: #198754;
    border-radius: 10px;

}

</style>

</head>