/* =========================================================
   e-SATPAM — Elektronik Sistem Administrasi Satpam BNN Tulungagung
   Global Style
   ========================================================= */

/* ==========================
   ROOT VARIABLES
========================== */

:root {
  --primary: #2D5BFF;
  --primary-dark: #1C47E6;

  --background: #F7F9FC;

  --white: #FFFFFF;

  --border: #E5E7EB;

  --text: #222222;
  --text-secondary: #666666;

  --danger: #DC3545;
  --success: #198754;
  --warning: #FFC107;

  --shadow: 0 8px 24px rgba(0, 0, 0, .08);

  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 10px;

  --transition: .3s ease;
}


/* ==========================
   RESET CSS
========================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  font-family: 'Poppins', sans-serif;

  background: url("../img/bg-app.png") no-repeat center center fixed;

  background-size: cover;

  min-height: 100vh;

  color: var(--text);

  overflow-x: hidden;

  line-height: 1.6;
}


/* ==========================
   TYPOGRAPHY
========================== */

h1,
h2,
h3,
h4,
h5,
h6 {

  margin-bottom: 0;

  font-weight: 700;

}

p {

  margin-bottom: 0;

}

.text-secondary-app {

  color: var(--text-secondary);

}

.text-primary-app {

  color: var(--primary);

}


/* ==========================
   LINK
========================== */

a {

  text-decoration: none;

  color: inherit;

  transition: var(--transition);

}

a:hover {

  color: var(--primary);

}


/* ==========================
   IMAGE
========================== */

img {

  max-width: 100%;

  height: auto;

  display: block;

}


/* ==========================
   LIST
========================== */

ul,
ol {

  list-style: none;

  margin: 0;

  padding: 0;

}


/* ==========================
   CONTAINER
========================== */

.container-app {

  width: 100%;

  min-height: 100vh;

  position: relative;

}


/* ==========================
   BACKGROUND
========================== */

.bg-wave {
  background-image: url('../img/bg-landing.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


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

.btn {

  border-radius: 12px;

  font-weight: 600;

}

.btn-primary-app {

  background: var(--primary);

  color: var(--white);

  border: none;

  border-radius: var(--radius-md);

  padding: 12px 24px;

  font-weight: 600;

  transition: var(--transition);

}

.btn-primary-app:hover {

  background: var(--primary-dark);

  color: var(--white);

  transform: translateY(-2px);

}

.btn-outline-app {

  background: transparent;

  border: 2px solid var(--primary);

  color: var(--primary);

  border-radius: var(--radius-md);

  padding: 12px 24px;

  font-weight: 600;

  transition: var(--transition);

}

.btn-outline-app:hover {

  background: var(--primary);

  color: var(--white);

}


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

.card-app {

  background: var(--white);

  border: none;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  transition: var(--transition);

}

.card-app:hover {

  transform: translateY(-5px);

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

}

.card {

  border: none;

  border-radius: 18px;

  box-shadow:

    0 10px 30px rgba(0, 0, 0, .08);

  overflow: hidden;

}


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

.form-control,
.form-select {

  border-radius: 12px;

  padding: 12px 16px;

  border: 1px solid var(--border);

  transition: var(--transition);

}

.form-control:focus,
.form-select:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 .2rem rgba(45, 91, 255, .20);

}

.form-label {

  font-weight: 600;

  margin-bottom: 8px;

}


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

.table {

  vertical-align: middle;

  border-radius: 15px;

  overflow: hidden;

  margin-bottom: 0;

}

.table thead {

  background: #2F55D4;

  color: white;

}

.table thead th {

  border: none;

  padding: 15px;

}

.table td {

  vertical-align: middle;

}

.table tbody tr:hover {

  background: #F8FAFF;

}


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

.modal-content {

  border: none;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

}

.main-content {

  flex: 1;

  padding: 32px;

  margin-left: 290px;

  min-height: 100vh;

}


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

.badge {

  border-radius: 50px;

  padding: 8px 14px;

}


/* ==========================
   SHADOW
========================== */

.shadow-app {

  box-shadow: var(--shadow);

}


/* ==========================
   RADIUS
========================== */

.radius-lg {

  border-radius: var(--radius-lg);

}

.radius-md {

  border-radius: var(--radius-md);

}

.radius-sm {

  border-radius: var(--radius-sm);

}


/* ==========================
   SPACING
========================== */

.section {

  padding: 70px 0;

}


/* ==========================
   CURSOR
========================== */

.cursor-pointer {

  cursor: pointer;

}


/* ==========================
   UTILITIES
========================== */

.bg-primary-app {

  background: var(--primary);

}

.bg-white {

  background: var(--white);

}

.text-white {

  color: var(--white);

}

.border-app {

  border: 1px solid var(--border);

}


/* ==========================
   ANIMATION
========================== */

.fade-up {

  animation: fadeUp .5s ease;

}

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}


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

::-webkit-scrollbar {

  width: 8px;

}

::-webkit-scrollbar-track {

  background: #EEEEEE;

}

::-webkit-scrollbar-thumb {

  background: var(--primary);

  border-radius: 20px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--primary-dark);

}

.main-wrapper {

  min-height: 100vh;

  display: flex;

}

.page-title {

  font-size: 42px;

  font-weight: 700;

  color: #222;

}

.page-subtitle {

  font-size: 18px;

  color: #666;

}

.card,
.btn,
.form-control {

  transition: .3s;

}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:992px) {

  .section {

    padding: 60px 0;

  }

}

@media (max-width:768px) {

  .section {

    padding: 50px 0;

  }

  .btn-primary-app,
  .btn-outline-app {

    width: 100%;

  }

}

@media (max-width:576px) {

  body {

    font-size: 14px;

    display: flex;

    flex-direction: column;

  }

}

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

.top-navbar {

  height: 90px;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 35px;

  box-shadow: 0 3px 15px rgba(0, 0, 0, .08);

  position: sticky;

  top: 0;

  z-index: 999;

}

.top-left {

  display: flex;

  align-items: center;

  gap: 18px;

}

.menu-btn {

  width: 52px;

  height: 52px;

  border: none;

  background: white;

  border-radius: 12px;

  font-size: 30px;

  color: #222;

  cursor: pointer;

}

.logo-navbar {

  width: 58px;

}

.title-navbar h3 {

  margin: 0;

  color: #2D5BFF;

  font-size: 20px;

  font-weight: 700;

}

.title-navbar span {

  font-size: 15px;

  color: #2D5BFF;

  font-weight: 600;

}

.top-right {

  display: flex;

  align-items: center;

}

.profile-navbar {

  display: flex;

  align-items: center;

  gap: 15px;

}

.profile-navbar i {

  font-size: 52px;

}

.profile-navbar strong {

  display: block;

  font-size: 17px;

}

.profile-navbar small {

  color: #666;

}

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

.sidebar {

  width: 290px;

  background: linear-gradient(180deg,
      #2D5BFF,
      #1C47E6);

  min-height: 100vh;

  color: white;

  position: fixed;

  left: 0;

  top: 0;

  z-index: 1000;

  transition: .3s;

  box-shadow: 6px 0 20px rgba(0, 0, 0, .08);

}

.sidebar-header {

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 28px 22px;

}

.sidebar-logo {

  width: 60px;

}

.sidebar-header h4 {

  font-size: 20px;

  margin: 0;

  color: white;

}

.sidebar-header span {

  font-size: 13px;

  color: white;

}

.sidebar-title {

  padding: 0 22px;

  margin-top: 10px;

  margin-bottom: 18px;

  opacity: .8;

  font-weight: 600;

  letter-spacing: 1px;

}

.sidebar-menu {

  padding: 0 14px;

}

.menu-item {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 14px 18px;

  color: white;

  border-radius: 14px;

  margin-bottom: 8px;

  transition: .25s;

  font-size: 16px;

  font-weight: 500;

}

.menu-item i {

  font-size: 23px;

}

.menu-item:hover {

  background: rgba(255, 255, 255, .18);

  color: white;

}

.menu-item.active {

  background: white;

  color: #2D5BFF;

  font-weight: 700;

}

.sidebar.hide {

  margin-left: -290px;

}

.main-content.full {

  margin-left: 0;

}