@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

*{
    font-family: 'Plus Jakarta Sans';
}

/* Hapus ruang kosong atas akibat fixed-top lama */
body { padding-top:0 !important; }

/* Paksa header gelap seperti AdminLTE */
.main-header.navbar {
  position: fixed; top:0; left:0; right:0; z-index:1050;
  background:#D5D5D5 !important; 
  border-color:#080808 !important;
  color:#fff !important;
  min-height:60px;
}

/* Pastikan teks/ikon di header terlihat */
.main-header.navbar .navbar-brand,
.main-header.navbar .navbar-nav>li>a,
.main-header .navbar-btn { 
  color:#333333 !important; 
}
.main-header .navbar-btn i { 
  color:#fff !important; 
}

/* Rapikan brand di tengah vertikal */
.main-header .navbar-brand img { height:28px; vertical-align:middle; }
.main-header .navbar-brand span { margin-left:6px; }

/* Layout basic */
/* .wrapper { min-height:100vh; } */
.main-header { height:60px; z-index:1030; }
.content-wrapper { margin-top:60px; margin-left:230px; transition: margin-left .3s ease;}

/* Sidebar */
.main-sidebar{
    position:fixed; top:50px; bottom:0; left:0; width:230px;
    background:#D5D5D5; color:#b8c7ce; z-index:1029;
    overflow-y:auto; overflow-x:hidden; transition: transform .3s ease;
}
.sidebar{ padding:10px 0px; }
.user-panel{ color:#fff; padding:10px 10px; overflow:hidden; }
.user-panel .image{ width:45px; height:45px; margin-right:10px; }
.user-panel .info{ line-height:1.2; }

/* Sidebar menu */
.sidebar-menu, .sidebar-menu ul{ list-style:none; margin:0; padding:0; }
.sidebar-menu>li{ position:relative; }
.sidebar-menu>li>a{
    display:block; padding:12px 20px; color:#333333; text-decoration:none;
}
.sidebar-menu>li>a:hover{ background:#dd4b39; color:#fff; }
.sidebar-menu>li.active>a{ background:#dd4b39; color:#fff; }

.sidebar-menu .treeview-menu{ display:none; padding-left:10px; }
.sidebar-menu .treeview > a:after{
    content:"\f105"; font-family:FontAwesome; position:absolute; right:15px;
}
.sidebar-menu .treeview.open > a:after{ content:"\f107"; }
.sidebar-menu .treeview.open > .treeview-menu{ display:block; }

/* Responsive: collapse sidebar */
body.sidebar-collapse .main-sidebar{ transform:translateX(-230px); }
body.sidebar-collapse .content-wrapper{ margin-left:0; }

/* Small screens: sidebar overlaps content (offcanvas) */
@media (max-width: 767px){
    .content-wrapper{ margin-left:0; }
    .main-sidebar{
        transform:translateX(-230px);
        box-shadow: 2px 0 6px rgba(0,0,0,.2);
    }
    body.sidebar-open .main-sidebar{ transform:none; }
}

/* link aktif dari helper (a.active) */
.sidebar-menu a.active { background:#D5D5D5; color:#333333; }

/* submenu saat terbuka (Bootstrap 3 menambah .in pada collapse) */
.sidebar .collapse { padding-left:10px; }
.sidebar .collapse.in { display:block; }

#topbar { display:none !important; height:0 !important; }

/* Header gelap dan readable */
.main-header .navbar-brand,
.main-header .navbar-nav>li>a,
.main-header .navbar-toggle{ background:none;color:#333333!important; }

/* Hamburger */
#sidebarToggle.navbar-toggle{
  border:0; margin:10px 10px 8px 0;;
}
#sidebarToggle .fa{ font-size:18px; }

/* Brand tepat di kanan hamburger, tidak saling dorong */
.navbar-header{
    float:left; 
    display: flex;
    align-items: center;
}
.brand-ellipsis{ display:inline-block; max-width:calc(100vw - 420px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-logo{ height:24px; vertical-align:middle; margin-top:-2px; }
.brand-text{ margin-left:6px; vertical-align:middle; }

/* User area kanan */
.navbar-user>li>a.user-link{ padding:10px 15px; }
.user-link .user-avatar{
  display:inline-block; width:24px; height:24px; margin-right:10px; vertical-align:middle; text-align:center;
}
.user-link .user-avatar img{ width:24px; height:24px; border-radius:50%; vertical-align:middle; }
.user-link .user-avatar .fa{ line-height:24px; }
.user-link .user-name{ vertical-align:middle; margin-right: 6px;}
.user-link .user-name:active{ text-decoration: none !important;}
.user-link .caret::after{ margin-top: 2px !important;}

/* Dropdown nempel kanan & tidak “geser-geser” */
.dropdown-menu-right{ right:0; left:auto; }
.navbar-user .dropdown-menu{ margin-top:8px; min-width:180px; }

/* Hilangkan padding-top body dari navbar lama */
body{ padding-top:0!important; }

/* Responsif: kalau layar sempit, sisakan ruang lebih untuk brand */
@media (max-width: 991px){
  .brand-ellipsis{ max-width:calc(100vw - 220px); }
}

@media (max-width: 575px) {
    .brand-ellipsis {
        max-width: calc(100vw - 265px);
    }
}

.main-header .container,
.main-header .container-fluid{
  overflow: visible !important;
  padding: 0;
}

/* Dropdown user: tempel kanan, tepat di bawah header, no jump */
.main-header .navbar-right .dropdown-menu{
  right: 40px;
  left: auto;
  margin-top: 0 !important;
  top: 50px;                /* sama dengan tinggi header */
  position: fixed;          /* kaitkan ke viewport/header supaya tidak geser */
  min-width: 180px;
  border-radius: 8px;
  padding: 0;
}

/* Paksa tampil saat .open (tanpa animasi aneh) */
.main-header .navbar-right li.open > .dropdown-menu{
  display: block;
}

/* Hilangkan underline dan efek fokus di link user */
.navbar-user > li > a.user-link,
.navbar-user > li > a.user-link:focus,
.navbar-user > li > a.user-link:hover {
  text-decoration: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hilangkan underline di link dropdown juga */
.navbar-user .dropdown-menu > li > a,
.navbar-user .dropdown-menu > li > a:hover,
.navbar-user .dropdown-menu > li > a:focus {
  text-decoration: none !important;
  outline: none !important;
  color: #cc0000 ;
  padding: 8px 12px;
  border-radius: 8px;
  display: block;
}

/* (opsional) ubah warna hover biar konsisten */
.navbar-user .dropdown-menu > li > a:hover {
  background-color: #f5f5f5;
  color: #cc0000;
}

.menu-label {
    margin-left: 8px;
    font-size: 16px;
}

/* ==== AdminLTE-like "info box split" ==== */
.info-box {display:flex; align-items:stretch; border-radius:4px; overflow:hidden;
  background:#fff; border:1px solid #e6eaef; box-shadow:0 1px 1px rgba(0,0,0,.03);
  margin-bottom:15px; transition:transform .15s, box-shadow .15s;
}
.info-box:hover{ transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.06); }

.info-left{ width:78px; display:flex; align-items:center; justify-content:center; }
.info-left i{ font-size:34px; color:#fff; }

.info-right{ flex:1; background:#fff; padding:12px 14px; }
.info-label{ font-size:12px; letter-spacing:.4px; color:#8a99a8; font-weight:600; text-transform:uppercase; }
.info-value{ font-size:22px; font-weight:700; color:#2a2f36; margin-top:6px; }

/* palette AdminLTE-ish */
.bg-aqua{background:#00c0ef;} .bg-red{background:#dd4b39;}
.bg-green{background:#00a65a;} .bg-yellow{background:#f39c12;}

/* full-click */
.info-link{ display:block; color:inherit; text-decoration:none; }
.info-link:hover{ text-decoration:none; }

/* grid spacing */
.row.info-row > [class*="col-"]{ padding-left:10px; padding-right:10px; }


/* ==== Footer Modern AdminLTE Style ==== */
.main-footer {
    background: #f8f9fb;
    border-top: 1px solid #e0e0e0;
    font-size: 13px !important;
    color: #555;
    position: fixed;
    bottom: 0;
    width: -webkit-fill-available;
}

.main-footer .footer-links a {
  color: #cc0001;
  text-decoration: none;
  transition: all 0.2s ease;
}

.main-footer .footer-links a:hover {
  color: #cc0001;
  text-decoration: underline;
}

.main-footer .text-muted {
  color: #888 !important;
}

/* responsive spacing */
@media (max-width: 768px) {
  .main-footer .footer-links {
    margin-top: 5px;
  }
}

.w-100 {
    width: 100% !important;
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.btn-primary {
    background: #cc0001 !important;
    border: #cc0001 !important;
    /* border-radius: 4px !important; */
}

.header-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-list .record-title {
    color: #cc0001;
    text-transform: capitalize;
}

.table-responsive {
    border: 1px solid #D1D5DB;
    overflow-y: auto;
    white-space: nowrap;
    border-radius: 8px;
     overflow-y: hidden;   /* biar vertikalnya ga muncul */
  -ms-overflow-style: none;  /* IE dan Edge lama */
  scrollbar-width: none; 
}

.table-responsive .table-header {
    background-color: #F3F4F6 !important;
}

.table-responsive tbody tr {
    background-color: white !important;
}

.table-responsive tbody tr:hover {
    background-color: #F3F4F6 !important;
}

.table-responsive tr td {
    padding-left: 15px;
}

.table-responsive tr th {
    padding: 10px;
    padding-left: 15px;
}

.table-responsive thead th {
    padding: 10px;
    padding-left: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

.info-section {
    margin: auto;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}

@media (min-width: 767px) {
    .info-section {
        height: calc(100vh - 111.5px);
    }
}

.text-primary {
    color: #cc0001 !important;
}

.bg-primary {
    background-color: #cc0001 !important;
}

.form-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.form-title {
    font-size: 20px;
    font-weight: 600;
    color: #cc0001;
    padding: 0 30px;
}

.form-container input {
    border-radius: 4px;
}

.nav-pills .nav-link.active {
    background-color: #cc0001 !important;
    border-radius: 4px;
}

.nav a.nav-link {
    color: #cc0001;
}

/* ===== Floating Button (Back to Homepage) ===== */
.btn-float {
  position: fixed;
  bottom: 70px;
  right: 25px;
  width: 55px;
  height: 55px;
  background-color: #0056b3;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 55px;
  font-size: 22px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  z-index: 9999;
}

.btn-float:hover {
  background-color: #cc0001;
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  color: #fff;
}

.btn-float i {
  pointer-events: none;
}