/* ========================================================================== */
/* 01. ROOT VARIABLES & GLOBAL RESET                */
/* ========================================================================== */

:root {
  --primary-color: #7366ff;
  --success-color: #51bb25;
  --warning-color: #f8d62b;
  --info-color: #54c4f0;
  --gray-color: #f8f9fa;
  --text-muted: #6c757d;
  --dark-bg: #0f172a;
  --light-text: #e5e7eb;
  --hover-bg: #1e293b;
  --accent-color: #667eea;
  --danger-color: #dc3545;

  /* Font sizes - definisikan sebagai variabel untuk konsistensi */
  --font-size-base: 0.9375rem; /* ~15px, jika default browser 16px */
  --font-size-sm: 0.875rem;   /* ~14px */
  --font-size-xs: 0.75rem;    /* ~12px */
  --font-size-lg: 1.125rem;   /* ~18px */
  --font-size-xl: 1.25rem;    /* ~20px */
}

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

/* Base HTML & Body Styles */
html,
body {
  height: 100%; /* Penting untuk Flexbox/Grid layout */
  font-family: Inter, sans-serif;
  background-color: var(--gray-color);
  color: #1f1f1f;
  font-size: var(--font-size-base); /* Menggunakan base font size */
}

body {
  min-height: 100vh;
  width: 100%;
  display: flex; /* Membuat body sebagai flex container utama */
  flex-direction: column; /* Mengatur arah flex ke kolom */
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

/* ========================================================================== */
/* 02. LOADER                                    */
/* ========================================================================== */

.loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-wrapper .dot {
  width: 0.625rem; /* 10px */
  height: 0.625rem; /* 10px */
  margin: 0.3125rem; /* 5px */
  background: #0a2540;
  border-radius: 50%;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    opacity: .3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }

  100% {
    opacity: .3;
    transform: scale(1);
  }
}

/* ========================================================================== */
/* 03. MAIN LAYOUT                               */
/* ========================================================================== */

.main-wrapper {
  display: flex; /* Mengatur main-wrapper sebagai flex container utama untuk sidebar dan konten */
  flex: 1; /* Memastikan main-wrapper mengisi ruang yang tersedia */
  width: 100%;
  min-height: 100vh; /* Agar main-wrapper setidaknya setinggi viewport */
}

/* Content Area Wrapper - Ini adalah container untuk header, body, dan footer yang akan bergeser */
.content-area-wrapper {
  display: flex;
  flex-direction: column; /* Mengatur arah flex ke kolom untuk sticky footer */
  flex: 1; /* Mengisi sisa ruang horizontal setelah sidebar */
  margin-left: 15.625rem; /* Default 250px, sama dengan lebar sidebar */
  transition: margin-left 0.3s ease; /* Transisi untuk margin saat sidebar collapse */
}

/* Page Wrapper - Untuk konten utama halaman (header + body + footer) */
.page-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1; /* Memastikan page-wrapper mengisi sisa ruang vertikal di main-wrapper */
  min-height: 100%; /* Penting untuk mendorong footer ke bawah */
}

.page-body-wrapper {
  flex-grow: 1; /* Konten body akan mengisi ruang yang tersisa, mendorong footer */
  padding: 1rem;
}

.page-body {
  padding: 1rem; /* Mungkin tumpang tindih dengan padding page-body-wrapper, cek penggunaannya */
}


/* ========================================================================== */
/* 04. SIDEBAR                                   */
/* ========================================================================== */

.sidebar-wrapper {
  width: 15.625rem; /* 300px */
  background: linear-gradient(180deg, #1e1b4b 0, #312e81 50%, #4338ca 100%);
  color: var(--light-text);
  padding: 0;
  flex-shrink: 0; /* Mencegah sidebar menyusut */
  box-shadow: 0.125rem 0 0.5rem rgba(0, 0, 0, .25);
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  overflow-y: auto; /* Agar menu bisa discroll jika panjang */
  position: fixed; /* Sidebar tetap */
  top: 0;
  height: 100vh; /* Sidebar setinggi viewport */
  z-index: 1030;
  left: 0;
  transition: width 0.3s ease; /* Transisi untuk lebar sidebar */
}

/* Collapsed state for sidebar-wrapper */
.sidebar-wrapper.close_icon {
  width: 4.375rem !important; /* 70px */
}

.sidebar-wrapper.close_icon .sidebar-text,
.sidebar-wrapper.close_icon .nav-text {
  opacity: 0;
  visibility: hidden;
  width: 0;
  overflow: hidden;
}

.sidebar-wrapper.close_icon .nav-link {
  justify-content: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

.sidebar-wrapper.close_icon .nav-icon {
  margin-right: 0 !important;
}

/* When collapsed, hide the logo/link and center only the hamburger toggle */
.sidebar-wrapper.close_icon .logo-wrapper a {
  display: none !important;
}

.sidebar-wrapper.close_icon .logo-wrapper {
  justify-content: center !important;
  padding: 0.75rem 0 !important;
}

.sidebar-wrapper.close_icon #sidebar-toggle,
.sidebar-wrapper.close_icon .toggle-sidebar {
  margin: 0 auto !important;
}

.sidebar-wrapper.close_icon .sidebar-logo {
  display: none !important;
}

/* Content area adjustment when sidebar is collapsed */
.sidebar-wrapper.close_icon ~ .content-area-wrapper {
  margin-left: 4.375rem !important; /* 70px */
}

/* Hide submenu when sidebar is collapsed */
.sidebar-wrapper.close_icon .nav-submenu,
.sidebar-wrapper.close_icon .collapse {
  display: none !important;
}

.logo-wrapper {
  padding: 1.25rem;
  text-align: center;
  border-bottom: 0.0625rem solid rgba(255, 255, 255, .15);
  margin-bottom: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Untuk logo dan tombol toggle */
}

.sidebar-wrapper .sidebar-logo {
  max-height: 3.4375rem;
  width: auto;
  display: inline-block;
  transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.sidebar-nav .nav-item {
  margin-bottom: 0.3125rem;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  color: #e5e7eb;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color .3s ease, color .3s ease, padding 0.3s ease, justify-content 0.3s ease;
  font-size: var(--font-size-base);
}

.sidebar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, .08);
  color: #fff;
}

.sidebar-nav .nav-link.active {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-weight: 600;
  border-left: 0.25rem solid #a78bfa;
  padding-left: 1rem;
}

.sidebar-nav .nav-link.active i {
  color: #a78bfa;
}

.sidebar-nav .nav-link .nav-icon {
  margin-right: 0.9375rem;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  opacity: .85;
  transition: margin-right 0.3s ease, opacity 0.2s ease, width 0.3s ease, text-align 0.3s ease;
}

.sidebar-nav .nav-link:hover .nav-icon {
  opacity: 1;
}

.sidebar-nav .nav-text {
  transition: opacity 0.3s ease, width 0.3s ease, margin 0.3s ease, visibility 0.3s ease;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  width: auto;
  flex-grow: 1;
  visibility: visible;
}

.sidebar-nav .nav-title {
  font-size: var(--font-size-xs);
  color: #c4b5fd;
  padding: 0.9375rem 1.25rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: padding 0.3s ease, text-align 0.3s ease;
}

.sidebar-nav .submenu {
  list-style: none;
  padding-left: 2.5rem;
  margin-top: 0.3125rem;
  transition: padding-left 0.3s ease;
}

.sidebar-nav .submenu li a {
  display: flex; /* Ganti ke flex untuk kontrol alignment */
  align-items: center;
  padding: 0.4375rem 0;
  color: #d1d5db;
  text-decoration: none;
  font-size: var(--font-size-sm);
  justify-content: flex-start; /* Default ke kiri */
}

.sidebar-nav .submenu li a:hover {
  color: #fff;
}

.sidebar-nav .submenu-arrow {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  margin-left: auto; /* Untuk rata kanan */
}

/* ========================================================================== */
/* 05. SIDEBAR COLLAPSED STATES                     */
/* ========================================================================== */

body.sidebar-collapsed .sidebar {
  width: 5.625rem; /* ~90px - Lebar sidebar saat collapsed */
}

body.sidebar-collapsed .sidebar .logo-wrapper {
  justify-content: center; /* Pusatkan logo saat collapsed */
  padding: 1.25rem 0.5rem 0.9375rem; /* Sesuaikan padding (top/bottom default, left/right lebih kecil) */
}

body.sidebar-collapsed .sidebar .sidebar-logo {
  opacity: 0;
  width: 0;
  height: 0;
  display: none; /* Sembunyikan sepenuhnya */
}

body.sidebar-collapsed .sidebar #sidebar-toggle {
  margin: 0; /* Hapus margin di tombol toggle */
  padding: 0.2rem; /* Sesuaikan padding tombol */
}

body.sidebar-collapsed .sidebar .nav-text {
  opacity: 0;
  width: 0;
  margin: 0; /* Hapus margin teks */
  padding: 0;
  visibility: hidden; /* Sembunyikan sepenuhnya dari screen reader */
}

body.sidebar-collapsed .sidebar .nav-icon {
  margin-right: 0 !important; /* Hapus margin kanan ikon */
  width: 100%; /* Agar ikon rata tengah dalam space yang sempit */
  text-align: center; /* Pusatkan ikon */
}

body.sidebar-collapsed .sidebar .nav-link {
  padding: 0.625rem 0.5rem; /* Padding lebih kecil saat collapsed */
  justify-content: center; /* Pusatkan konten link */
}

body.sidebar-collapsed .sidebar .nav-title {
  text-align: center;
  padding: 0.9375rem 0.5rem 0.5rem; /* Padding lebih kecil */
}

body.sidebar-collapsed .sidebar .submenu {
  padding-left: 0; /* Hapus padding submenu saat collapsed */
  text-align: center;
}

body.sidebar-collapsed .sidebar .submenu li a {
  justify-content: center; /* Pusatkan item submenu */
}

body.sidebar-collapsed .sidebar .submenu-arrow {
  opacity: 0;
  display: none; /* Sembunyikan panah dropdown */
}

/* Geser main content area saat sidebar collapsed */
body.sidebar-collapsed .content-area-wrapper {
  margin-left: 5.625rem; /* Sama dengan lebar sidebar yang collapsed */
}

/* ========================================================================== */
/* 06. MAIN HEADER                               */
/* ========================================================================== */

.main-header {
  background-color: #fff;
  padding: 0.9375rem 1.875rem;
  border-bottom: 0.0625rem solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-header .page-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #2d3748;
}

.main-header .user-profile {
  display: flex;
  align-items: center;
}

.main-header .user-profile .dropdown-toggle {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #4a5568;
  font-weight: 500;
  font-size: var(--font-size-base);
}

.main-header .user-profile .dropdown-toggle img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  margin-right: 0.625rem;
  object-fit: cover;
  border: 0.125rem solid #e2e8f0;
}

.main-header .user-profile .dropdown-menu {
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .1);
  border: none;
  font-size: var(--font-size-sm);
}

.main-header .user-profile .dropdown-item {
  padding: 0.625rem 0.9375rem;
  color: #4a5568;
}

.main-header .user-profile .dropdown-item:hover {
  background-color: #f0f4f8;
  color: #2d3748;
}

/* ========================================================================== */
/* 07. FOOTER                                    */
/* ========================================================================== */

.footer {
  background-color: #fff;
  padding: 0.9375rem 1.875rem;
  border-top: 0.0625rem solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .05);
  color: var(--text-muted);
  flex-shrink: 0; /* Mencegah footer menyusut */
  font-size: var(--font-size-sm);
}

.footer .footer-left {
  display: flex;
  justify-content: flex-start;
}

/* ========================================================================== */
/* 08. CARDS                                     */
/* ========================================================================== */

.modern-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, .06);
  padding: 0.875rem;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  min-height: 8.75rem;
}

.row>[class*=col] .modern-card {
  height: 100%;
}

.modern-card .icon-top {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1;
}

.modern-card .icon-wrapper {
  position: relative;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background-color: rgba(115, 102, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-card .icon-wrapper::after {
  content: "";
  position: absolute;
  width: 3.125rem;
  height: 3.125rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(115, 102, 255, .15);
  border-radius: 50%;
  z-index: -1;
  animation: ripple 2s infinite ease-in-out;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(.8);
    opacity: .6;
  }

  70% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: .15;
  }

  100% {
    transform: translate(-50%, -50%) scale(.8);
    opacity: .6;
  }
}

.modern-card .icon-wrapper i {
  font-size: 1.5rem;
}

.modern-card .label {
  font-size: var(--font-size-xs);
  display: inline-block;
  background-color: #f0f4ff;
  padding: 0.125rem 0.375rem;
  border-radius: 0.3125rem;
}

.modern-card h4 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #2d3748;
  margin-top: 0.375rem;
  margin-bottom: 0.25rem;
}

.modern-card small,
.modern-card span {
  font-size: var(--font-size-sm);
  color: #718096;
}

.modern-card .btn {
  border-radius: 999px;
  font-size: var(--font-size-xs);
  padding: 0.3125rem 0.625rem;
  margin-top: 0.375rem;
}

.modern-card .icon-wrapper.icon-purple {
  color: var(--primary-color);
  background-color: rgba(115, 102, 255, .1);
}

.modern-card .icon-wrapper.icon-green {
  color: var(--success-color);
  background-color: rgba(81, 187, 37, .1);
}

.modern-card .icon-wrapper.icon-blue {
  color: var(--info-color);
  background-color: rgba(84, 196, 240, .1);
}

.modern-card .icon-wrapper.icon-red {
  color: var(--danger-color);
  background-color: rgba(220, 53, 69, .1);
}

.modern-card .icon-wrapper.icon-dark {
  color: #1f2937;
  background-color: rgba(31, 41, 55, .1);
}

.modern-card .icon-wrapper.icon-yellow {
  color: var(--warning-color);
  background-color: rgba(248, 214, 43, .15);
}

.modern-card .d-flex span {
  font-size: var(--font-size-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.status-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  margin-top: 0.375rem;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
}

/* ========================================================================== */
/* 09. BUTTONS                                   */
/* ========================================================================== */

button {
  border-radius: 0.375rem;
  padding: 0.5rem 1rem;
  font-weight: 500;
  font-size: var(--font-size-base);
  transition: all .2s ease-in-out;
}

/* Button Global - Semua jadi pill */
.btn {
    border-radius: 999px !important;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    font-size: var(--font-size-base);
    transition: all 0.2s ease;
}

/* Untuk tombol ikon (lihat/edit/delete di tabel) */
.btn-icon {
    border-radius: 50% !important;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    transition: all 0.2s ease;
}


.btn-group-pill .btn {
  border-radius: 999px !important;
}

.btn:hover {
  filter: brightness(1.05);
}

.btn-icon.view {
  color: #1f2937;
  border-color: #d1d5db;
  background-color: #fff;
}

.btn-icon.view:hover {
  background-color: #f3f4f6;
}

.btn-icon.edit {
  color: #0d6efd;
  border-color: #0d6efd;
  background-color: #fff;
}

.btn-icon.edit:hover {
  background-color: rgba(13, 110, 253, .1);
}

.btn-icon.delete {
  color: var(--danger-color);
  border-color: var(--danger-color);
  background-color: #fff;
}

.btn-icon.delete:hover {
  background-color: rgba(220, 53, 69, .1);
}

.btn-icon.approve {
  color: var(--success-color);
  border-color: var(--success-color);
  background-color: #fff;
}

.btn-icon.approve:hover {
  background-color: rgba(81, 187, 37, .1);
}

.btn-icon.reject {
  color: var(--danger-color);
  border-color: var(--danger-color);
  background-color: #fff;
}

.btn-icon.reject:hover {
  background-color: rgba(220, 53, 69, .1);
}

/* ========================================================================== */
/* 10. BADGES                                    */
/* ========================================================================== */

.badge-role {
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: 0.375rem;
  text-transform: capitalize;
}

.badge-role.superadmin {
  background: #e0f0ff;
  color: #0d6efd;
}

.badge-role.company_pic {
  background: #fff8e1;
  color: #f59e0b;
}

.badge-role.staff {
  background: #e0f7fa;
  color: #06b6d4;
}

/* ========================================================================== */
/* 11. CARDS (GENERAL)                           */
/* ========================================================================== */

.card {
  border-radius: 0.75rem;
  box-shadow: 0 0 0.9375rem rgba(0, 0, 0, .04);
}

/* ========================================================================== */
/* 12. MODALS                                    */
/* ========================================================================== */

.modal-content {
  border-radius: 0.75rem;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, .15);
}

.modal-header {
  border-bottom: 0.0625rem solid #dee2e6;
  padding: 1rem 1.25rem;
}

.modal-title {
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.modal-body {
  background-color: transparent !important;
  font-size: var(--font-size-base);
}

.modal-body .row {
  margin-bottom: 0.75rem;
}

.modal-body .fw-bold {
  color: #374151;
  font-weight: 600;
}

.modal-body .text-muted {
  color: #6c757d;
}

.modal-body .col-8 {
  color: #1f2937;
}

.modal-footer {
  border-top: 0.0625rem solid #dee2e6;
  padding: 1rem 1.25rem;
}

.modal-body .table,
.modal-body .table-borderless {
  background-color: transparent !important;
}

/* ========================================================================== */
/* 13. ALERTS                                    */
/* ========================================================================== */

.alert {
  border-radius: 0.5rem;
  font-size: var(--font-size-base);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alert ul {
  margin: 0;
  padding-left: 1.25rem;
}

.alert i {
  font-size: 1.1rem;
}

.alert-link {
  font-weight: 600;
}

/* ========================================================================== */
/* 14. BREADCRUMBS                               */
/* ========================================================================== */

.breadcrumb {
  background: 0 0;
  padding: 0;
  font-size: var(--font-size-sm);
}

.breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  color: var(--text-muted);
}

.breadcrumb-item a {
  color: var(--primary-color);
}

/* ========================================================================== */
/* 15. TABLES (DATATABLES)                       */
/* ========================================================================== */

.table-modern {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: #fff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .05);
}

.table-modern thead {
  background: #f8f9fa;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
}

.table-modern thead th {
  padding: 0.75rem;
  border-bottom: 0.0625rem solid #e2e8f0;
  font-weight: 600;
  color: #374151;
  vertical-align: middle;
  border-style: none;
  border-color: transparent;
}

.table-modern tbody td {
  padding: 0.75rem;
  border-bottom: 0.0625rem solid #f1f5f9;
  vertical-align: middle;
  font-size: var(--font-size-base);
}

.table-modern tbody tr:hover {
  background-color: #f9fafb;
  transition: background .2s ease;
}

.table-modern .btn-icon {
  position: relative;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(115, 102, 255, .1);
  border: none;
  color: #7366ff;
  transition: all .2s ease;
  overflow: hidden;
}

.table-modern .btn-icon::after {
  content: "";
  position: absolute;
  width: 3.125rem;
  height: 3.125rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(115, 102, 255, .15);
  border-radius: 50%;
  z-index: -1;
  animation: ripple 2s infinite ease-in-out;
}

.table-modern .btn-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.table-modern .btn-icon.blue {
  background-color: rgba(115, 102, 255, .1);
  color: #7366ff;
}

.table-modern .btn-icon.mint {
  background-color: rgba(84, 196, 240, .1);
  color: #54c4f0;
}

.table-modern .btn-icon.red {
  background-color: rgba(220, 53, 69, .1);
  color: #dc3545;
}

/* DataTable Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: none !important;
  border-radius: 999px !important;
  background: #f3f4f6 !important;
  color: #374151 !important;
  padding: 0.3125rem 0.75rem;
  margin: 0 0.1875rem;
  font-weight: 500;
  transition: all .2s ease;
  font-size: var(--font-size-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #7366ff !important;
  color: #fff !important;
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #a78bfa !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed;
}

/* ========================================================================== */
/* 16. WELCOME PAGE                              */
/* ========================================================================== */

body.welcome-page {
  background: url('/assets/images/banner/jetty-banner.jpg') no-repeat center center fixed;
  background-size: cover;
  font-family: Inter, sans-serif; /* Sudah didefinisikan di body global */
  margin: 0; /* Sudah didefinisikan di global reset */
  height: 100vh;
  position: relative;
}

body.welcome-page .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(30, 30, 30, .65);
  backdrop-filter: blur(3px);
  z-index: 1;
}

body.welcome-page .container {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.welcome-page .content {
  display: flex;
  flex-direction: row;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 0 1.25rem rgba(0, 0, 0, .4);
  max-width: 60rem;
  width: 100%;
  margin: 0 1.25rem;
}

body.welcome-page .left,
body.welcome-page .right {
  padding: 2.5rem;
  flex: 1;
}

body.welcome-page .left {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

body.welcome-page .left img {
  width: 10rem;
  margin-bottom: 1.25rem;
}

body.welcome-page .left h1 {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

body.welcome-page .left p {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
}

body.welcome-page .right {
  background: rgba(255, 255, 255, .85);
  border-left: 0.0625rem solid rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.welcome-page .form-box {
  width: 100%;
  max-width: 25rem;
}

body.welcome-page .form-box form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.welcome-page .form-box input {
  padding: 0.625rem;
  border: 0.0625rem solid #ccc;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
}

body.welcome-page .form-box button {
  padding: 0.625rem;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color .2s ease;
  font-size: 1rem;
}

body.welcome-page .form-box button:hover {
  background-color: #5e50ee;
}

body.welcome-page .form-box .text-link {
  margin-top: 0.625rem;
  text-align: center;
  font-size: var(--font-size-sm);
}

body.welcome-page .form-box .text-link a {
  color: var(--info-color);
  font-weight: 500;
}

@media (max-width: 48rem) {
  body.welcome-page .content {
    flex-direction: column;
  }

  body.welcome-page .left,
  body.welcome-page .right {
    padding: 1.875rem;
    text-align: center;
    align-items: center;
  }

  body.welcome-page .left {
    align-items: center;
  }

  body.welcome-page .right {
    border-left: none;
    border-top: 0.0625rem solid rgba(255, 255, 255, .2);
  }

  body.welcome-page .left img {
    margin-bottom: 1rem;
  }
}

.form-box form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}

.form-box form .form-grid label {
  font-size: var(--font-size-sm);
  margin-bottom: 0.25rem;
  display: block;
  color: #333;
}

.form-box form .form-grid input {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0.0625rem solid #ccc;
  border-radius: 0.375rem;
  font-size: var(--font-size-base);
}

.input-group .form-control {
  height: 40px; /* samain tinggi */
}
.input-group-text {
  min-width: 50px;
  text-align: center;
}

/* Container tombol bawah */
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

#addSeam {
  margin-top: 1rem;
}


@media (max-width: 48rem) {
  .form-box form .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Style untuk ikon gembok pada menu terkunci */
.sidebar-nav .locked-icon {
    color: #ffc107; /* Warna kuning warning */
    margin-left: auto; /* Rata kanan */
    font-size: 0.8rem; /* Sesuaikan ukuran ikon */
}

/* Pastikan nav-link disabled tidak memiliki efek hover */
.sidebar-nav .nav-link.disabled {
    cursor: not-allowed;
    pointer-events: none; /* Mencegah klik */
    opacity: 0.6; /* Beri sedikit efek redup */
}

/* Agar teks menu di sidebar yang terkunci tidak memiliki efek text-decoration */
.sidebar-nav .nav-link.disabled .nav-text {
    text-decoration: none;
}

/* Tabs Modern */
.nav-tabs .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s;
}
.nav-tabs .nav-link.active {
    background-color: #f8f9fa;
    color: var(--primary-color);
    border: 1px solid #dee2e6;
    border-bottom: none;
}
.nav-tabs .nav-link:hover {
    background-color: #f1f1f1;
    color: var(--primary-color);
}
.tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 15px;
    border-radius: 0 0 6px 6px;
    background: #fff;
}
.nav-tabs .nav-link svg {
    width: 16px;   
    height: 16px;
    margin-right: 6px; 
    vertical-align: middle;
}

/* ========================================================================== */
/* SIDEBAR ICON FIXES & COLLAPSE IMPROVEMENTS                               */
/* ========================================================================== */

/* Force all icons to be visible */
.sidebar i,
.sidebar svg,
.sidebar [data-feather] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure feather icons are visible and properly sized */
.sidebar .nav-icon[data-feather] {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2;
    display: inline-block !important;
    visibility: visible !important;
}

/* Fix for generated SVG feather icons */
.sidebar svg.feather {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2;
    display: inline-block !important;
    visibility: visible !important;
    stroke: currentColor;
}

/* Bootstrap Icons */
.sidebar .bi {
    font-size: 16px !important;
    line-height: 1;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Logo wrapper styling */
.sidebar .logo-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

/* Sidebar toggle button - update to work with both classes */
#sidebar-toggle,
.toggle-sidebar {
    background: none !important;
    border: none !important;
    color: #fff !important;
    font-size: 1.25rem !important;
    padding: 0.5rem !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    width: 40px !important;
    height: 40px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#sidebar-toggle:hover,
.toggle-sidebar:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

/* Force icon visibility in sidebar toggle */
#sidebar-toggle i,
.toggle-sidebar i,
#sidebar-toggle [data-feather],
.toggle-sidebar [data-feather] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: inherit !important;
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
}

/* Fix collapsed state for submenu chevrons */
body.sidebar-collapsed .sidebar .has-submenu .bi-chevron-down {
    display: none !important;
}

/* Hide collapse functionality when sidebar is collapsed */
body.sidebar-collapsed .sidebar .collapse {
    display: none !important;
}

/* Ensure submenu toggle works correctly */
.sidebar .has-submenu > .nav-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.sidebar .has-submenu .bi-chevron-down {
    transition: transform 0.2s ease;
    margin-left: auto;
    display: inline-block !important;
    visibility: visible !important;
}

.sidebar .has-submenu .nav-link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

/* Tooltip for collapsed sidebar items */
body.sidebar-collapsed .sidebar .nav-item {
    position: relative;
}

body.sidebar-collapsed .sidebar .nav-link:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    z-index: 1000;
    margin-left: 0.5rem;
    font-size: 0.8rem;
    pointer-events: none;
}

/* Force icon display initialization */
.sidebar-nav .nav-icon {
    min-width: 16px;
    min-height: 16px;
    margin-right: 0.75rem;
}

/* Sidebar text responsive handling */
.sidebar .nav-text,
.sidebar .sidebar-text {
    transition: all 0.3s ease;
}

/* Better collapsed state handling */
body.sidebar-collapsed .sidebar {
    width: 70px !important;
}

body.sidebar-collapsed .sidebar .nav-text,
body.sidebar-collapsed .sidebar .sidebar-text {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

body.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
}

body.sidebar-collapsed .sidebar .nav-icon {
    margin-right: 0 !important;
}

/* Main content adjustment */
.content-area-wrapper {
    transition: margin-left 0.3s ease;
}

/* Shift content when sidebar collapsed via sibling selector */
.sidebar-wrapper.close_icon ~ .content-area-wrapper {
  margin-left: 4.375rem !important; /* 70px */
}

/* ==========================================
   SUBMENU STYLING WITH VISUAL INDENTATION
   ========================================== */

/* Base submenu container styling */
.nav-submenu {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    border-left: 2px solid rgba(255, 255, 255, 0.1) !important;
    margin-left: 1rem !important;
}

.nav-submenu .nav-item {
    margin: 0 !important;
}

/* Submenu links with extra indentation */
.nav-submenu .nav-link {
    padding: 0.75rem 1rem 0.75rem 3rem !important; /* Extra left padding for indentation */
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
    border-left: 3px solid transparent !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    background: none !important;
}

/* Tree-like connector symbols for visual hierarchy */
.nav-submenu .nav-link:before {
    content: "├" !important;
    position: absolute !important;
    left: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 0.8rem !important;
    font-family: monospace !important;
}

/* First child uses top connector */
.nav-submenu .nav-item:first-child .nav-link:before {
    content: "┌" !important;
}

/* Last child uses bottom connector */
.nav-submenu .nav-item:last-child .nav-link:before {
    content: "└" !important;
}

/* Single child uses simple connector */
.nav-submenu .nav-item:only-child .nav-link:before {
    content: "└" !important;
}

/* Hover and active states */
.nav-submenu .nav-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-left-color: #667eea !important;
    padding-left: 3.2rem !important;
    transform: translateX(4px) !important;
}

.nav-submenu .nav-link.active {
    background: rgba(102, 126, 234, 0.2) !important;
    color: #fff !important;
    border-left-color: #667eea !important;
    font-weight: 500 !important;
}

/* Submenu icons styling */
.nav-submenu .nav-link .nav-icon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.nav-submenu .nav-link:hover .nav-icon,
.nav-submenu .nav-link.active .nav-icon {
    color: #fff !important;
}

/* ==========================================
   COLLAPSED SIDEBAR SUBMENU HANDLING
   ========================================== */

/* Hide submenu completely when sidebar is collapsed */
body.sidebar-collapsed .nav-submenu {
    display: none !important;
}

/* Ensure submenu toggle chevrons are handled properly */
.has-submenu > .nav-link .bi-chevron-down {
    transition: transform 0.3s ease !important;
}

.has-submenu > .nav-link[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg) !important;
}

/* ==========================================
   RESPONSIVE SUBMENU STYLING
   ========================================== */

@media (max-width: 768px) {
    .nav-submenu .nav-link {
        padding: 0.65rem 1rem 0.65rem 2.5rem !important;
        font-size: 0.85rem !important;
    }
    
    .nav-submenu .nav-link:before {
        left: 1.2rem !important;
        font-size: 0.7rem !important;
    }
}