/* ============================================================
   GENTELELLA SKIN LAYER
   Skin tampilan ala Gentelella untuk markup AdminLTE.
   Harus dimuat SETELAH adminlte.min.css dan style.css.
   Palet resmi Gentelella:
     Sidebar    : #2A3F54
     Aksen      : #1ABB9C (teal)
     Teks       : #73879C
     Border     : #E6E9ED
     Background : #F7F7F7
   ============================================================ */

:root {
  --gt-sidebar: #2A3F54;
  --gt-sidebar-hover: rgba(255, 255, 255, 0.06);
  --gt-sidebar-text: #E7E7E7;
  --gt-accent: #1ABB9C;
  --gt-accent-dark: #169A85;
  --gt-text: #73879C;
  --gt-text-dark: #566573;
  --gt-border: #E6E9ED;
  --gt-bg: #F7F7F7;
  --gt-link: #5A738E;
}

/* ===== GLOBAL ===== */
body,
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, td, th, label, small, strong, b, i:not([class*="fa-"]),
button, select, textarea, table {
  font-family: 'Roboto', Arial, sans-serif !important;
}
body {
  background: var(--gt-bg) !important;
  color: var(--gt-text) !important;
  font-size: 14px !important;
}
a { color: var(--gt-link) !important; }
a:hover, a:focus { color: var(--gt-accent) !important; }

/* Proteksi font ikon Font Awesome */
.fa {
  font-family: "FontAwesome" !important;
}
.fas, .far, .fa, .fal, .fad, .fas:before, .far:before {
  font-family: "Font Awesome 5 Free" !important;
}
.fab, .fab:before {
  font-family: "Font Awesome 5 Brands" !important;
}
.fa, .fa:before {
  font-family: "FontAwesome" !important;
}

/* ===== SIDEBAR ===== */
.main-sidebar {
  background: var(--gt-sidebar) !important;
  width: 230px !important;
}
.main-sidebar .sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 50px !important;
}
.main-sidebar .sidebar::-webkit-scrollbar { width: 5px !important; }
.main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent !important; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 3px !important;
}

/* Brand di atas sidebar */
.main-sidebar .brand-link {
  background: var(--gt-sidebar) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 12px 15px !important;
}
.main-sidebar .brand-link .brand-text,
.main-sidebar .brand-link img.brand-text {
  display: block;
  margin: 0 auto !important;
}
.main-sidebar .brand-link .brand-text {
  color: #fff !important;
  font-weight: 500 !important;
  font-size: 18px !important;
}

/* ===== MENU UTAMA (diperbesar) ===== */
.main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link {
  position: relative !important;
  color: var(--gt-sidebar-text) !important;
  font-size: 14.5px !important;          /* sebelumnya 12px → diperbesar */
  font-weight: 400 !important;
  padding: 13px 20px !important;         /* sedikit lebih lega */
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  background: transparent !important;
  transition: background 0.15s ease !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link:hover {
  color: #fff !important;
  background: var(--gt-sidebar-hover) !important;
  border-left-color: transparent !important;
  box-shadow: none !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link.active {
  color: #fff !important;
  background: var(--gt-sidebar-hover) !important;
  box-shadow: none !important;
  border-left-color: transparent !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link i {
  width: 26px !important;
  text-align: center !important;
  font-size: 15px !important;            /* ikon juga sedikit diperbesar */
  color: var(--gt-sidebar-text) !important;
  margin-right: 8px !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link:hover i,
.main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link.active i {
  color: var(--gt-accent) !important;
}

/* Header section di sidebar */
.main-sidebar .sidebar .nav-sidebar .nav-header {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 11.5px !important;          /* sebelumnya 10px */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 18px 20px 6px !important;
  background: transparent !important;
}

/* ===== TREEVIEW / SUB-MENU (diperbesar) ===== */
.main-sidebar .sidebar .nav-sidebar .nav-treeview .nav-item > .nav-link {
  padding-left: 46px !important;
  font-size: 13.5px !important;          /* sebelumnya 12px */
  font-weight: 400 !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-treeview .nav-item > .nav-link i {
  width: 22px !important;
  font-size: 12.5px !important;
  margin-right: 6px !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-treeview .nav-treeview .nav-item > .nav-link {
  padding-left: 62px !important;
  font-size: 13.5px !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item > .nav-link .right {
  transition: transform 0.3s ease !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 12px !important;
}
.main-sidebar .sidebar .nav-sidebar .nav-item.menu-open > .nav-link .right {
  transform: rotate(-90deg) !important;
}

/* Scrollbar */
.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* ===== TOP NAV ===== */
.main-header {
  background: #fff !important;
  border-bottom: 1px solid #D9DEE4 !important;
  box-shadow: none !important;
}
.main-header .nav-link {
  color: #73879C !important;
  font-size: 14px !important;
}
.main-header .nav-link:hover { color: var(--gt-accent) !important; background: transparent !important; }
.main-header .dropdown-menu {
  border: 1px solid var(--gt-border) !important;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 !important;
}
.main-header .dropdown-item { color: var(--gt-text) !important; font-size: 13px !important; }
.main-header .dropdown-item:hover { background: var(--gt-bg) !important; color: var(--gt-accent) !important; }
#nav-user-name { color: var(--gt-text-dark) !important; font-weight: 400 !important; }

/* ===== CONTENT AREA ===== */
.content-wrapper {
  background: var(--gt-bg) !important;
  color: var(--gt-text) !important;
}
.content-header h1 {
  color: var(--gt-text) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
}
.content-header .breadcrumb {
  background: transparent !important;
  font-size: 13px !important;
}
.content-header .breadcrumb-item a { color: var(--gt-link) !important; }
.content-header .breadcrumb-item.active { color: #777 !important; font-weight: 400 !important; }

/* Kartu */
.content .card,
.filter-bar {
  background: #fff !important;
  border: 1px solid var(--gt-border) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}
.filter-bar { border-radius: 5px !important; padding: 14px 17px !important; }
.content .card .card-header {
  background: #fff !important;
  border-bottom: 2px solid var(--gt-border) !important;
  border-radius: 5px 5px 0 0 !important;
  color: var(--gt-text) !important;
  padding: 12px 17px !important;
}
.content .card .card-header h3,
.content .card .card-header h5,
.content .card .card-header h6 {
  color: var(--gt-text) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}
.content .card .card-body { padding: 15px 17px !important; }
.content .card .card-footer {
  background: #fff !important;
  border-top: 2px solid var(--gt-border) !important;
  padding: 12px 17px !important;
}

/* ===== KOMPONEN ===== */
.btn-primary {
  background-color: var(--gt-accent) !important;
  border-color: var(--gt-accent) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--gt-accent-dark) !important;
  border-color: var(--gt-accent-dark) !important;
}
.btn-default, .btn-secondary {
  background: #fff !important;
  border-color: #C5CED6 !important;
  color: var(--gt-text-dark) !important;
}
.btn-default:hover, .btn-secondary:hover { background: var(--gt-bg) !important; }

.form-control {
  border: 1px solid #DDE2E7 !important;
  box-shadow: none !important;
  color: var(--gt-text-dark) !important;
  border-radius: 3px !important;
}
.form-control:focus { border-color: var(--gt-accent) !important; }
label { color: var(--gt-text-dark) !important; font-weight: 400 !important; }

.table > thead > tr > th {
  color: var(--gt-text) !important;
  font-weight: 500 !important;
  border-bottom: 2px solid var(--gt-border) !important;
}
.table > tbody > tr > td { color: var(--gt-text-dark) !important; }
.table > tbody > tr:hover > td { background: #f9f9f9 !important; }

.dataTables_info, .dataTables_length, .dataTables_filter {
  color: var(--gt-text) !important;
  font-size: 13px !important;
}
.page-link { color: var(--gt-accent) !important; }
.page-item.active .page-link {
  background-color: var(--gt-accent) !important;
  border-color: var(--gt-accent) !important;
}

.badge { border-radius: 2px !important; font-weight: 500 !important; }

/* ===== FOOTER ===== */
.main-footer {
  background: #fff !important;
  border-top: 1px solid var(--gt-border) !important;
  color: #777 !important;
  font-size: 13px !important;
  text-align: center !important;
  padding: 18px 20px !important;
}
.main-footer strong { color: #777 !important; font-weight: 500 !important; }

/* ===== LOGIN ===== */
#login-page {
  background: var(--gt-sidebar) !important;
}
#login-page::before {
  background: radial-gradient(ellipse at 30% 50%, rgba(26, 187, 156, 0.18) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%) !important;
}
.btn-login {
  background: var(--gt-accent) !important;
  border-radius: 3px !important;
}
.btn-login:hover { background: var(--gt-accent-dark) !important; box-shadow: 0 6px 20px rgba(26, 187, 156, 0.4) !important; }
.login-card .form-control:focus { border-color: var(--gt-accent) !important; box-shadow: 0 0 0 3px rgba(26, 187, 156, 0.15) !important; }
.login-card .logo-text { color: var(--gt-sidebar) !important; }

/* Utility */
#loading-overlay i { color: var(--gt-accent) !important; }
.quick-action-btn { border: 1px solid var(--gt-border) !important; border-radius: 5px !important; }
.quick-action-btn:hover { border-color: var(--gt-accent) !important; box-shadow: none !important; }
.quick-action-btn i { color: var(--gt-accent) !important; }
.performer-score { color: var(--gt-accent) !important; }
.activity-title { color: var(--gt-text-dark) !important; }
.activity-icon {
  border-radius: 5px !important;
  background: var(--gt-bg) !important;
  color: var(--gt-accent) !important;
}
.progress { background: var(--gt-border) !important; }
.progress-bar { background-color: var(--gt-accent) !important; }

.swal2-confirm.swal2-styled {
  background-color: var(--gt-accent) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
  .main-sidebar { width: 230px !important; }
}