/* ============================================
   SIDEBAR DARK NAVY OVERRIDE
   ============================================ */

/* Sidebar width override */
@media (min-width: 1200px) {
  .sidebar {
    width: 250px !important;
  }
  .dashboard-main {
    margin-inline-start: 250px !important;
  }
}
@media (min-width: 1400px) {
  .sidebar {
    width: 300px !important;
  }
  .dashboard-main {
    margin-inline-start: 300px !important;
  }
}
@media (min-width: 1650px) {
  .sidebar {
    width: 340px !important;
  }
  .dashboard-main {
    margin-inline-start: 340px !important;
  }
}

.sidebar {
  background-color: #1a1f36 !important;
}

.sidebar-close-btn {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff;
}

.sidebar-logo {
  border-inline-end-color: rgba(255, 255, 255, 0.1) !important;
  border-block-end-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-menu-area {
  border-inline-end-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar-menu-area:hover::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.sidebar-menu-area::-webkit-scrollbar {
  background-color: #1a1f36 !important;
}

.sidebar-menu-area::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Menu items - text and icons */
.sidebar-menu li a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.sidebar-menu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Menu icons (iconify-icon) */
.sidebar-menu li a .menu-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Menu icons (i tags - remixicon) */
.sidebar-menu li a i {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Circle icons in submenus */
.sidebar-menu li a .circle-icon {
  color: inherit !important;
}

/* Active page */
.sidebar-menu li a.active-page {
  background-color: var(--brand) !important;
  color: #ffffff !important;
}

.sidebar-menu li a.active-page:hover {
  background-color: var(--brand) !important;
  color: #ffffff !important;
}

/* Dropdown open state */
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
  background-color: var(--brand) !important;
  color: #ffffff !important;
}

.sidebar-menu li.dropdown.open > a:hover,
.sidebar-menu li.dropdown.dropdown-open > a:hover {
  background-color: var(--brand) !important;
  color: #ffffff !important;
}

/* Dropdown arrow icon */
.sidebar-menu li.dropdown > a::after {
  color: rgba(255, 255, 255, 0.5) !important;
}

.sidebar-menu li.dropdown.open > a::after,
.sidebar-menu li.dropdown.dropdown-open > a::after {
  color: #ffffff !important;
}

/* Submenu */
.sidebar-menu .sidebar-submenu li a {
  color: rgba(255, 255, 255, 0.65) !important;
}

.sidebar-menu .sidebar-submenu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-menu .sidebar-submenu li.active-page a {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Group title */
.sidebar-menu .sidebar-menu-group-title {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Collapsed sidebar hover state */
.sidebar.active:hover .sidebar-menu li a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.sidebar.active:hover .sidebar-menu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar.active:hover .sidebar-menu li a .menu-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

.sidebar.active:hover .sidebar-menu li a i {
  color: rgba(255, 255, 255, 0.7) !important;
}

.sidebar.active:hover .sidebar-menu .sidebar-submenu li a {
  color: rgba(255, 255, 255, 0.65) !important;
}

.sidebar.active:hover .sidebar-menu .sidebar-submenu li a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

.sidebar.active:hover .sidebar-menu .sidebar-submenu li.active-page a {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Dark theme overrides - keep sidebar dark regardless */
[data-theme="dark"] .sidebar {
  background-color: #1a1f36 !important;
}

/* Collapsed sidebar hover width override */
@media (min-width: 1200px) {
  .sidebar.active:hover {
    width: 250px !important;
  }
}
@media (min-width: 1400px) {
  .sidebar.active:hover {
    width: 300px !important;
  }
}
@media (min-width: 1650px) {
  .sidebar.active:hover {
    width: 340px !important;
  }
}

/* ============================================
   ROLE PERMISSIONS GRID
   ============================================ */

/* Panel container */
.role-perm-panel {
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

/* Panel header - icon + label + "Pilih Semua" */
.role-perm-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.role-perm-panel .panel-header .panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1;
}

.role-perm-panel .panel-header .panel-title iconify-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* "Pilih Semua" label */
.role-perm-panel .select-all-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.role-perm-panel .select-all-label .form-check-input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
}

/* Permission grid - 3 columns aligned */
.role-perm-panel .perm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 12px;
}

@media (max-width: 768px) {
  .role-perm-panel .perm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Individual permission checkbox */
.role-perm-panel .perm-check-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 0.75rem;
}

.role-perm-panel .perm-check-item .form-check-input {
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
}

.role-perm-panel .perm-check-item .perm-check-label {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "Semua Akses" banner */
.role-perm-all-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--warning, #ffc107);
  border-radius: 8px;
  margin-bottom: 12px;
  background-color: var(--bg-warning-focus, #fff8e1);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
}

.role-perm-all-banner .form-check-input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
}

.role-perm-all-banner iconify-icon {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Fix modal scroll for roles */
#addRoleModal .modal-body,
#editRoleModal .modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Duration radio card - izin/sakit form */
.duration-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #dee2e6);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 1;
  min-width: 0;
}

.duration-card:hover {
  background-color: var(--bg-focused, #f8f9fa);
  border-color: var(--brand, #4e73df);
}

.duration-card:has(input:checked) {
  background-color: var(--bg-focused, #f0f4ff);
  border-color: var(--brand, #4e73df);
  box-shadow: 0 0 0 1px var(--brand, #4e73df);
}

.duration-card .form-check-input {
  margin: 0;
  flex-shrink: 0;
}

.duration-card iconify-icon {
  flex-shrink: 0;
}

.duration-card span {
  font-weight: 500;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Multi-select sesi styling */
#perm-multi-session {
  border-radius: 8px;
}

#perm-multi-session option {
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: 6px;
}

#perm-multi-session option:checked {
  background: var(--brand, #4e73df);
  color: #fff;
}