/* ── Typography: AdminLTE baseline + responsive ── */
:root {
  --rl-font-base: 1rem;
  --rl-font-sm: 0.875rem;
  --rl-font-xs: 0.75rem;
  --rl-font-lg: 1.1rem;
  --rl-font-xl: 1.25rem;
  --rl-font-title: 1.8rem;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--rl-font-base);
}

.content-header h1 {
  font-size: var(--rl-font-title);
}

.content-wrapper .card > .card-header .card-title,
.content-wrapper .card-title {
  font-size: var(--rl-font-lg);
}

.content-wrapper .form-control,
.content-wrapper .custom-select,
.content-wrapper .btn:not(.btn-xs) {
  font-size: var(--rl-font-base);
}

.content-wrapper .table {
  font-size: var(--rl-font-base);
}

.content-wrapper .small,
.content-wrapper small {
  font-size: var(--rl-font-sm);
}

@media (max-width: 991.98px) {
  .content-header h1 {
    font-size: 1.5rem;
  }

  .content-header .breadcrumb {
    font-size: var(--rl-font-sm);
  }
}

@media (max-width: 767.98px) {
  html {
    font-size: 16px;
  }

  .content-wrapper > .content {
    padding: 0.75rem;
  }

  .content-header {
    padding: 0.75rem 0.75rem 0;
  }

  .content-header h1 {
    font-size: 1.35rem;
  }

  .content-wrapper .card > .card-header .card-title,
  .content-wrapper .card-title {
    font-size: 1rem;
  }

  .table td,
  .table th {
    font-size: var(--rl-font-sm);
  }

  .form-control,
  .custom-select {
    font-size: 16px;
  }

  .btn-sm {
    font-size: var(--rl-font-sm);
    min-height: 2.125rem;
  }

  .sidebar-elegant .nav-sidebar > .nav-item > .nav-link {
    font-size: var(--rl-font-base);
    padding: 0.65rem 1rem;
  }

  .sidebar-elegant .nav-header {
    font-size: var(--rl-font-sm);
  }

  .modal-body {
    font-size: var(--rl-font-base);
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate,
  .dataTables_wrapper .dataTables_length label,
  .dataTables_wrapper .dataTables_filter label {
    font-size: var(--rl-font-sm);
  }
}

@media (max-width: 575.98px) {
  .content-header h1 {
    font-size: 1.25rem;
  }

  .elegant-stat-num,
  .elegant-metric-value {
    font-size: 1.5rem;
  }

  .login-page .login-box {
    width: 100%;
    max-width: 360px;
    padding: 0 0.75rem;
  }
}

/* ── Login / Auth pages ── */
.login-page .login-box {
  width: 360px;
}

.login-page .card {
  border-radius: 0.5rem;
}

.login-page .card-body {
  padding: 1.25rem;
}

.login-page .login-brand {
  display: block;
  font-size: 1.75rem !important;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
}

.login-page .login-brand:hover {
  color: inherit;
  text-decoration: none;
}

.login-page .login-box-msg {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.login-page .form-control,
.login-page .btn {
  font-size: 1rem;
  border-radius: 0.4rem;
}

.login-page .btn {
  padding: 0.5rem 0.75rem;
}

.login-page .auth-panel-title {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0.75rem;
}

.login-page .auth-msg {
  font-size: 0.875rem;
  text-align: center;
  margin-bottom: 0.75rem;
  min-height: 1.25rem;
}

.login-page .auth-link-row {
  font-size: 0.875rem;
}

.login-page .auth-tos {
  font-size: 0.875rem;
  line-height: 1.5;
}

.login-page #modalTos .auth-modal-body {
  font-size: 0.875rem;
  line-height: 1.55;
}

.login-page #modalTos .auth-modal-body h6 {
  font-size: 1rem;
}

@media (max-width: 575.98px) {
  .login-page .login-box {
    width: 100%;
    max-width: 100%;
    padding: 0 1rem;
  }

  .login-page .login-brand {
    font-size: 1.5rem !important;
  }
}

.wabutton {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 100000000;
}

.pointer {
  cursor: pointer;
}

.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.dark-mode .table-hover tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.text-black {
  color: #272525;
}


.loading {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: rgb(0, 0, 0);
  opacity: 0.9;
  margin: auto;
}

.loading .load {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 14px arial;
}


::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(14, 13, 13, 0.658);
}

::-webkit-scrollbar-thumb {
  background: rgb(173, 198, 248);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgb(212, 224, 248);
}

::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}

/* Theme toggle (AdminLTE v4 style) */
.theme-mode-option .theme-check {
  color: var(--primary, #007bff);
}

.dark-mode .theme-mode-option .theme-check {
  color: #6ea8fe;
}

.main-header .nav-link .theme-icon-light,
.main-header .nav-link .theme-icon-dark {
  font-size: 1.1rem;
}

/* ── Elegant UI (sidebar + dashboard) ── */
.elegant-page .content {
  background: #f8f9fb;
}

.dark-mode.elegant-page .content,
.dark-mode .elegant-page .content {
  background: var(--rl-dark-body, #1c1f26);
}

/* Sidebar */
.main-sidebar.sidebar-elegant {
  background: #23262d;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.sidebar-elegant .brand-link {
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f1f3f5;
}

.sidebar-elegant .brand-text {
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-elegant .nav-header {
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  padding-top: 1rem;
}

.sidebar-elegant .nav-sidebar>.nav-item>.nav-link {
  color: rgba(255, 255, 255, 0.65);
  border-radius: 0.35rem;
  margin: 1px 0.5rem;
  font-size: 1rem;
}

.sidebar-elegant .nav-sidebar>.nav-item>.nav-link .nav-icon {
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.1rem;
}

.sidebar-elegant .nav-sidebar>.nav-item>.nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.sidebar-elegant .nav-sidebar>.nav-item>.nav-link:hover .nav-icon {
  color: rgba(255, 255, 255, 0.75);
}

.sidebar-elegant .nav-sidebar>.nav-item>.nav-link.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: none;
}

.sidebar-elegant .nav-sidebar>.nav-item>.nav-link.active .nav-icon {
  color: #fff;
}

.sidebar-elegant .sidebar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sidebar-elegant .sidebar::-webkit-scrollbar {
  display: none;
}

.dark-mode .main-sidebar.sidebar-elegant {
  background: #23262d;
  border-right-color: #3d444b;
}

/* Navbar user dropdown */
.elegant-user-header {
  background: #23262d !important;
}

.main-header .user-menu .user-image {
  width: 28px;
  height: 28px;
  object-fit: cover;
}

/* Dashboard cards */
.elegant-metric-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.elegant-metric-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #868e96;
  margin-bottom: 0.35rem;
}

.elegant-metric-value {
  font-size: 1.65rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.2;
}

.elegant-metric-note {
  font-size: 0.875rem;
  color: #adb5bd;
  margin-top: 0.35rem;
}

.elegant-stat-box {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  text-align: left;
  overflow: hidden;
  min-height: 5rem;
}

.rl-instance-stats-compact .elegant-stat-box {
  margin-bottom: 0;
}

.elegant-stat-icon {
  flex-shrink: 0;
  width: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  font-size: 1.35rem;
}

.elegant-stat-icon--instances {
  background: #e7f5ff;
  color: #1c7ed6;
}

.elegant-stat-icon--member {
  background: #ebfbee;
  color: #2b8a3e;
}

.elegant-stat-icon--new {
  background: #fff4e6;
  color: #e67700;
}

.elegant-stat-icon--stop {
  background: #fff5f5;
  color: #c92a2a;
}

.elegant-stat-icon--sla {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.elegant-stat-icon--unassigned {
  background: rgba(255, 193, 7, 0.18);
  color: #d39e00;
}

.elegant-stat-icon--exp7 {
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
}

.elegant-stat-icon--exp30 {
  background: rgba(23, 162, 184, 0.12);
  color: #17a2b8;
}

.elegant-stat-box.rl-ops-alert {
  border-color: rgba(220, 53, 69, 0.35);
}

.elegant-stat-box.rl-ops-warn {
  border-color: rgba(255, 193, 7, 0.45);
}

.rl-rating-avg {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #212529;
}

.rl-rating-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
  gap: 0.5rem;
}

.rl-rating-label {
  width: 2.75rem;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.rl-rating-bar {
  flex: 1;
  height: 0.45rem;
  background: #e9ecef;
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
}

.rl-rating-cnt {
  width: 1.5rem;
  text-align: right;
  font-size: 0.875rem;
  color: #6c757d;
}

.elegant-stat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.9rem 1rem;
}

.elegant-stat-num {
  display: block;
  font-size: 1.65rem;
  font-weight: 600;
  color: #212529;
  line-height: 1.2;
}

.elegant-stat-lbl {
  display: block;
  font-size: 0.875rem;
  color: #868e96;
  margin-top: 0.2rem;
}

.elegant-server-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.elegant-server-body {
  max-height: 340px;
  overflow-y: auto;
}

.elegant-server-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.875rem;
}

.elegant-server-item:last-child {
  border-bottom: none;
}

.elegant-server-item .node-name {
  color: #495057;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.elegant-server-item .node-name i {
  color: #868e96;
  font-size: 0.875rem;
  width: 1rem;
  text-align: center;
}

.elegant-server-item .node-count {
  font-weight: 600;
  color: #343a40;
  background: #f1f3f5;
  min-width: 2rem;
  text-align: center;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
}

.elegant-server-empty {
  color: #adb5bd;
  font-size: 0.875rem;
  text-align: center;
  padding: 1.5rem 0;
}

.elegant-card {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  box-shadow: none;
}

.elegant-card>.card-header {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
}

.elegant-card .card-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #343a40;
}

.elegant-tag {
  font-size: 0.75rem;
  color: #868e96;
  background: #f1f3f5;
  padding: 0.25rem 0.6rem;
  border-radius: 0.25rem;
}

.elegant-chart-wrap {
  position: relative;
  height: 340px;
}

.elegant-table thead th {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #868e96;
  border-top: none;
  background: #fafbfc;
}

.elegant-logs-body {
  overflow-y: auto;
  min-height: 0;
}

.elegant-card.h-100.d-flex.flex-column>.card-body.flex-grow-1 {
  min-height: 0;
}

.elegant-log-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.elegant-log-item {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f1f3f5;
}

.elegant-log-item:last-child {
  border-bottom: none;
}

.elegant-log-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1rem;
}

.elegant-log-meta span {
  font-size: 0.875rem;
  white-space: nowrap;
}

.elegant-log-text {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: #868e96;
  line-height: 1.45;
}

.elegant-log-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: #adb5bd;
  font-size: 1rem;
}

.dark-mode .elegant-metric-card,
.dark-mode .elegant-stat-box,
.dark-mode .elegant-card {
  background: #2b2f36;
  border-color: #3d444b;
}

.dark-mode .elegant-card>.card-header {
  background: #2b2f36;
  border-bottom-color: #3d444b;
}

.dark-mode .elegant-metric-value,
.dark-mode .elegant-stat-num,
.dark-mode .elegant-card .card-title {
  color: #e9ecef;
}

.dark-mode .elegant-metric-label,
.dark-mode .elegant-stat-lbl,
.dark-mode .elegant-log-text {
  color: #adb5bd;
}

.dark-mode .elegant-stat-icon--instances {
  background: rgba(28, 126, 214, 0.2);
  color: #74c0fc;
}

.dark-mode .elegant-stat-icon--member {
  background: rgba(43, 138, 62, 0.2);
  color: #69db7c;
}

.dark-mode .elegant-stat-icon--new {
  background: rgba(230, 119, 0, 0.2);
  color: #ffa94d;
}

.dark-mode .elegant-stat-icon--stop {
  background: rgba(201, 42, 42, 0.2);
  color: #ff8787;
}

.dark-mode .elegant-stat-icon--sla,
.dark-mode .elegant-stat-icon--exp7 {
  background: rgba(220, 53, 69, 0.2);
  color: #ff8787;
}

.dark-mode .elegant-stat-icon--unassigned {
  background: rgba(255, 193, 7, 0.2);
  color: #ffd43b;
}

.dark-mode .elegant-stat-icon--exp30 {
  background: rgba(23, 162, 184, 0.2);
  color: #66d9e8;
}

.dark-mode .rl-rating-avg {
  color: #e9ecef;
}

.dark-mode .rl-rating-bar {
  background: #31363f;
}

.dark-mode .elegant-server-item {
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .elegant-server-item .node-name {
  color: #ced4da;
}

.dark-mode .elegant-server-item .node-count {
  color: #e9ecef;
  background: var(--rl-dark-surface, #23262d);
}

.dark-mode .elegant-server-item .node-name i {
  color: #adb5bd;
}

.dark-mode .elegant-server-body {
  scrollbar-color: #3d444b transparent;
}

.dark-mode .elegant-table thead th {
  background: #31363f;
  color: #adb5bd;
}

.dark-mode .elegant-tag {
  background: #31363f;
  color: #adb5bd;
}

.dark-mode .elegant-log-item {
  border-bottom-color: #3d444b;
}

@media (max-width: 575.98px) {
  .elegant-chart-wrap {
    height: 260px;
  }
}

/* ── AdminLTE Dark Mode — palette #23262d ── */
:root {
  --rl-dark-base: #23262d;
  --rl-dark-elevated: #2b2f36;
  --rl-dark-surface: #31363f;
  --rl-dark-border: #3d444b;
  --rl-dark-body: #1c1f26;
  --rl-dark-text: #e9ecef;
  --rl-dark-muted: #adb5bd;
}

.dark-mode {
  background-color: var(--rl-dark-body) !important;
  color: var(--rl-dark-text);
}

.dark-mode :root {
  --gray-dark: #23262d;
  --dark: #23262d;
}

.dark-mode .preloader {
  background-color: var(--rl-dark-body) !important;
}

.dark-mode .content-wrapper {
  background-color: var(--rl-dark-body) !important;
  color: var(--rl-dark-text);
}

.dark-mode .content-wrapper .content-header {
  color: var(--rl-dark-text);
}

.dark-mode .main-header.navbar-dark {
  background-color: var(--rl-dark-base) !important;
  border-bottom-color: var(--rl-dark-border) !important;
}

.dark-mode .main-footer {
  background-color: var(--rl-dark-base) !important;
  border-top-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-muted);
}

.dark-mode .main-sidebar,
.dark-mode .main-sidebar.sidebar-dark-primary {
  background-color: var(--rl-dark-base) !important;
}

.dark-mode .brand-link,
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*="navbar"]),
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-secondary .brand-link:not([class*="navbar"]),
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-success .brand-link:not([class*="navbar"]),
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-info .brand-link:not([class*="navbar"]),
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-warning .brand-link:not([class*="navbar"]),
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-danger .brand-link:not([class*="navbar"]),
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-light .brand-link:not([class*="navbar"]),
.dark-mode.layout-navbar-fixed .wrapper .sidebar-dark-dark .brand-link:not([class*="navbar"]) {
  background-color: var(--rl-dark-base) !important;
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-secondary .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-success .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-info .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-warning .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-danger .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-light .nav-sidebar>.nav-item>.nav-link.active,
.dark-mode .sidebar-dark-dark .nav-sidebar>.nav-item>.nav-link.active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.dark-mode .card {
  background-color: var(--rl-dark-elevated) !important;
  color: var(--rl-dark-text);
  border-color: var(--rl-dark-border);
}

.dark-mode .card .card-header {
  background-color: var(--rl-dark-elevated);
  border-bottom-color: var(--rl-dark-border);
}

.dark-mode .card .card-footer {
  background-color: var(--rl-dark-elevated);
  border-top-color: var(--rl-dark-border);
}

.dark-mode .card .card {
  background-color: var(--rl-dark-surface);
}

.dark-mode .card-comments {
  background-color: var(--rl-dark-surface);
}

.dark-mode .card-comments .card-comment {
  border-bottom-color: var(--rl-dark-border);
}

.dark-mode .info-box {
  background-color: var(--rl-dark-elevated);
  color: var(--rl-dark-text);
}

.dark-mode .small-box {
  background-color: var(--rl-dark-elevated) !important;
}

.dark-mode .table {
  color: var(--rl-dark-text);
}

.dark-mode .table thead th {
  background-color: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-muted);
}

.dark-mode .table-bordered,
.dark-mode .table-bordered td,
.dark-mode .table-bordered th {
  border-color: var(--rl-dark-border);
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

.dark-mode .dropdown-menu {
  background-color: var(--rl-dark-elevated);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-text);
}

.dark-mode .dropdown-item {
  color: var(--rl-dark-text);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
  background-color: var(--rl-dark-surface);
  color: #fff;
}

.dark-mode .dropdown-divider {
  border-top-color: var(--rl-dark-border);
}

.dark-mode .dropdown-header {
  color: var(--rl-dark-muted);
}

.dark-mode .modal-content {
  background-color: var(--rl-dark-elevated);
  color: var(--rl-dark-text);
  border-color: var(--rl-dark-border);
}

.dark-mode .modal-header,
.dark-mode .modal-footer {
  border-color: var(--rl-dark-border);
}

.dark-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar),
.dark-mode .custom-select {
  background-color: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-text);
}

.dark-mode .input-group-text {
  background-color: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-muted);
}

.dark-mode .main-header .user-menu .user-footer {
  background: var(--rl-dark-elevated);
  border-top-color: var(--rl-dark-border);
}

.dark-mode .main-header .user-menu .user-footer .btn-default {
  background: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-text);
}

.dark-mode .main-header .user-menu .user-footer .btn-default:hover {
  background: #3a4048;
}

.dark-mode .products-list .product-description {
  color: var(--rl-dark-muted);
}

.dark-mode .breadcrumb-item.active {
  color: var(--rl-dark-muted);
}

.dark-mode .text-muted {
  color: var(--rl-dark-muted) !important;
}

.dark-mode .nav-tabs {
  border-bottom-color: var(--rl-dark-border);
}

.dark-mode .nav-tabs .nav-link.active {
  background-color: var(--rl-dark-elevated);
  border-color: var(--rl-dark-border) var(--rl-dark-border) var(--rl-dark-elevated);
  color: var(--rl-dark-text);
}

.dark-mode .page-item .page-link {
  background-color: var(--rl-dark-elevated) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .page-item:not(.active) .page-link {
  background-color: var(--rl-dark-elevated) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .page-item:not(.active) .page-link:hover,
.dark-mode .page-item:not(.active) .page-link:focus {
  background-color: var(--rl-dark-surface) !important;
  border-color: #5c6370 !important;
  color: #fff !important;
}

.dark-mode .page-item.active .page-link,
.dark-mode .page-item.active a {
  background-color: #4a515c !important;
  border-color: var(--rl-dark-border) !important;
  color: #fff !important;
}

.dark-mode .page-item.active .page-link:hover,
.dark-mode .page-item.active .page-link:focus {
  background-color: #565d68 !important;
  border-color: var(--rl-dark-border) !important;
  color: #fff !important;
}

.dark-mode .page-item.disabled .page-link,
.dark-mode .page-item.disabled a {
  background-color: var(--rl-dark-base) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-muted) !important;
  pointer-events: none;
}

.dark-mode .pagination {
  border-radius: 0.25rem;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
  background-color: var(--rl-dark-elevated) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.active) .page-link:hover,
.dark-mode .dataTables_wrapper .dataTables_paginate .pagination .page-item:not(.active) .page-link:focus {
  background-color: var(--rl-dark-surface) !important;
  border-color: #5c6370 !important;
  color: #fff !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background-color: #4a515c !important;
  border-color: var(--rl-dark-border) !important;
  color: #fff !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  background-color: var(--rl-dark-base) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-muted) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link {
  background-color: var(--rl-dark-elevated) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link {
  background-color: #4a515c !important;
  border-color: var(--rl-dark-border) !important;
  color: #fff !important;
}

.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.disabled .page-link {
  background-color: var(--rl-dark-base) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-muted) !important;
}

.dark-mode .select2-container--default .select2-selection--single,
.dark-mode .select2-container--default .select2-selection--multiple {
  background-color: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
}

.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--rl-dark-text);
}

.dark-mode .select2-dropdown {
  background-color: var(--rl-dark-elevated);
  border-color: var(--rl-dark-border);
}

.dark-mode .select2-results__option--highlighted[aria-selected] {
  background-color: var(--rl-dark-surface);
}

.dark-mode .dataTables_wrapper .dataTables_length select,
.dark-mode .dataTables_wrapper .dataTables_filter input {
  background-color: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-text);
}

.dark-mode .dataTables_wrapper .dataTables_info,
.dark-mode .dataTables_wrapper .dataTables_paginate {
  color: var(--rl-dark-muted);
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--rl-dark-base);
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: #4a515c;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #5c6370;
}

/* Forms, file input, input-group, buttons */
.dark-mode .custom-file-label,
.dark-mode .custom-file-label::after {
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .custom-file-input:focus~.custom-file-label,
.dark-mode .custom-file-input:focus~.custom-file-label::after {
  border-color: #5c6370 !important;
  box-shadow: none !important;
}

.dark-mode .custom-file-input:disabled~.custom-file-label,
.dark-mode .custom-file-input[disabled]~.custom-file-label {
  background-color: var(--rl-dark-base) !important;
  color: var(--rl-dark-muted) !important;
}

.dark-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar):focus,
.dark-mode .custom-select:focus {
  background-color: var(--rl-dark-surface) !important;
  border-color: #5c6370 !important;
  color: var(--rl-dark-text) !important;
  box-shadow: none !important;
}

.dark-mode .form-control:not(.form-control-navbar):not(.form-control-sidebar)::placeholder {
  color: var(--rl-dark-muted);
}

.dark-mode select,
.dark-mode textarea.form-control {
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .input-group-text {
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-muted) !important;
}

.dark-mode .input-group>.form-control:not(:first-child),
.dark-mode .input-group>.custom-select:not(:first-child),
.dark-mode .input-group>.custom-file:not(:first-child) .custom-file-label {
  border-left-color: var(--rl-dark-border) !important;
}

.dark-mode .input-group>.input-group-prepend>.input-group-text,
.dark-mode .input-group>.input-group-append:not(:last-child)>.input-group-text,
.dark-mode .input-group>.input-group-append:not(:last-child)>.btn {
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .input-group>.input-group-append>.btn,
.dark-mode .input-group>.input-group-prepend>.btn {
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .custom-control-label::before {
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .custom-control-input:checked~.custom-control-label::before {
  background-color: #4a515c !important;
  border-color: #4a515c !important;
}

.dark-mode .custom-control-input:focus~.custom-control-label::before {
  box-shadow: none !important;
}

.dark-mode .btn-default,
.dark-mode .btn-secondary {
  color: var(--rl-dark-text) !important;
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .btn-default:hover,
.dark-mode .btn-default:focus,
.dark-mode .btn-secondary:hover,
.dark-mode .btn-secondary:focus {
  color: #fff !important;
  background-color: #3a4048 !important;
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .btn-primary {
  color: #fff !important;
  background-color: #4a515c !important;
  border-color: #4a515c !important;
  box-shadow: none !important;
}

.dark-mode .btn-primary:hover,
.dark-mode .btn-primary:focus,
.dark-mode .btn-primary.focus {
  color: #fff !important;
  background-color: #565d68 !important;
  border-color: #565d68 !important;
  box-shadow: none !important;
}

.dark-mode .btn-primary:not(:disabled):not(.disabled):active,
.dark-mode .btn-primary:not(:disabled):not(.disabled).active,
.dark-mode .show>.btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #3a4048 !important;
  border-color: #3a4048 !important;
  box-shadow: none !important;
}

.dark-mode .btn-success {
  background-color: #3d5249 !important;
  border-color: #3d5249 !important;
}

.dark-mode .btn-success:hover,
.dark-mode .btn-success:focus {
  background-color: #4a6358 !important;
  border-color: #4a6358 !important;
}

.dark-mode .btn-danger {
  background-color: #5c3d3d !important;
  border-color: #5c3d3d !important;
}

.dark-mode .btn-danger:hover,
.dark-mode .btn-danger:focus {
  background-color: #6e4848 !important;
  border-color: #6e4848 !important;
}

.dark-mode .btn-warning {
  background-color: #5c523d !important;
  border-color: #5c523d !important;
  color: #fff !important;
}

.dark-mode .btn-info {
  background-color: #3d4a5c !important;
  border-color: #3d4a5c !important;
}

.dark-mode .btn-outline-primary {
  color: var(--rl-dark-text) !important;
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .btn-outline-primary:hover {
  background-color: var(--rl-dark-surface) !important;
  border-color: #5c6370 !important;
  color: #fff !important;
}

.dark-mode .btn-tool {
  color: var(--rl-dark-muted);
}

.dark-mode .btn-tool:hover {
  color: var(--rl-dark-text);
}

.dark-mode .list-group-item {
  background-color: var(--rl-dark-elevated);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-text);
}

.dark-mode .list-group-item.active {
  background-color: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
}

.dark-mode .callout {
  background-color: var(--rl-dark-elevated);
  border-left-color: #5c6370;
  color: var(--rl-dark-text);
}

.dark-mode .alert-secondary,
.dark-mode .alert-light {
  background-color: var(--rl-dark-surface);
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-text);
}

.dark-mode label:not(.custom-control-label):not(.custom-file-label) {
  color: var(--rl-dark-text);
}

.dark-mode .custom-file-label::after {
  background-color: #3a4048 !important;
  color: var(--rl-dark-muted) !important;
}

/* Datepicker — daterangepicker & tempus dominus */
.dark-mode .daterangepicker {
  background-color: var(--rl-dark-elevated) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .daterangepicker:before {
  border-bottom-color: var(--rl-dark-border) !important;
}

.dark-mode .daterangepicker:after {
  border-bottom-color: var(--rl-dark-elevated) !important;
}

.dark-mode .daterangepicker.drop-up:before {
  border-top-color: var(--rl-dark-border) !important;
}

.dark-mode .daterangepicker.drop-up:after {
  border-top-color: var(--rl-dark-elevated) !important;
}

.dark-mode .daterangepicker .calendar-table {
  background-color: var(--rl-dark-elevated) !important;
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .daterangepicker .calendar-table th,
.dark-mode .daterangepicker .calendar-table td {
  color: var(--rl-dark-text);
}

.dark-mode .daterangepicker .calendar-table .next span,
.dark-mode .daterangepicker .calendar-table .prev span {
  border-color: var(--rl-dark-muted) !important;
}

.dark-mode .daterangepicker td.available:hover,
.dark-mode .daterangepicker th.available:hover {
  background-color: var(--rl-dark-surface) !important;
  color: #fff !important;
}

.dark-mode .daterangepicker td.week,
.dark-mode .daterangepicker th.week {
  color: var(--rl-dark-muted);
}

.dark-mode .daterangepicker td.off,
.dark-mode .daterangepicker td.off.in-range,
.dark-mode .daterangepicker td.off.start-date,
.dark-mode .daterangepicker td.off.end-date {
  background-color: var(--rl-dark-elevated) !important;
  color: var(--rl-dark-muted) !important;
}

.dark-mode .daterangepicker td.in-range {
  background-color: rgba(74, 81, 92, 0.45) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .daterangepicker td.active,
.dark-mode .daterangepicker td.active:hover {
  background-color: #4a515c !important;
  color: #fff !important;
}

.dark-mode .daterangepicker td.disabled,
.dark-mode .daterangepicker option.disabled {
  color: var(--rl-dark-muted) !important;
}

.dark-mode .daterangepicker select.monthselect,
.dark-mode .daterangepicker select.yearselect,
.dark-mode .daterangepicker select.hourselect,
.dark-mode .daterangepicker select.minuteselect,
.dark-mode .daterangepicker select.secondselect,
.dark-mode .daterangepicker select.ampmselect {
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .daterangepicker .drp-buttons {
  border-top-color: var(--rl-dark-border) !important;
}

.dark-mode .daterangepicker .drp-selected {
  color: var(--rl-dark-muted);
}

.dark-mode .daterangepicker .ranges li {
  color: var(--rl-dark-text);
}

.dark-mode .daterangepicker .ranges li:hover {
  background-color: var(--rl-dark-surface) !important;
}

.dark-mode .daterangepicker .ranges li.active {
  background-color: #4a515c !important;
  color: #fff !important;
}

.dark-mode .daterangepicker.show-ranges.single.rtl .drp-calendar.left,
.dark-mode .daterangepicker.show-ranges.single.ltr .drp-calendar.left,
.dark-mode .daterangepicker.show-ranges.rtl .drp-calendar.right,
.dark-mode .daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-color: var(--rl-dark-border) !important;
}

.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu {
  background-color: var(--rl-dark-elevated) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
  border-bottom-color: var(--rl-dark-elevated) !important;
}

.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
  border-top-color: var(--rl-dark-elevated) !important;
}

.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before,
.dark-mode .bootstrap-datetimepicker-widget.dropdown-menu.top:before {
  border-bottom-color: var(--rl-dark-border);
  border-top-color: var(--rl-dark-border);
}

.dark-mode .bootstrap-datetimepicker-widget .table td,
.dark-mode .bootstrap-datetimepicker-widget .table th {
  border-color: var(--rl-dark-border);
  color: var(--rl-dark-text);
}

.dark-mode .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.dark-mode .bootstrap-datetimepicker-widget table td.day:hover,
.dark-mode .bootstrap-datetimepicker-widget table td.hour:hover,
.dark-mode .bootstrap-datetimepicker-widget table td.minute:hover,
.dark-mode .bootstrap-datetimepicker-widget table td.second:hover {
  background-color: var(--rl-dark-surface) !important;
  color: #fff !important;
}

.dark-mode .bootstrap-datetimepicker-widget table td.old,
.dark-mode .bootstrap-datetimepicker-widget table td.new {
  color: var(--rl-dark-muted);
}

.dark-mode .bootstrap-datetimepicker-widget table td.today::before {
  border-bottom-color: #5c6370 !important;
}

.dark-mode .bootstrap-datetimepicker-widget table td.active,
.dark-mode .bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #4a515c !important;
  color: #fff !important;
}

.dark-mode .bootstrap-datetimepicker-widget table td.active.today::before {
  border-bottom-color: #fff !important;
}

.dark-mode .bootstrap-datetimepicker-widget .picker-switch,
.dark-mode .bootstrap-datetimepicker-widget .timepicker-hour,
.dark-mode .bootstrap-datetimepicker-widget .timepicker-minute,
.dark-mode .bootstrap-datetimepicker-widget .timepicker-second {
  color: var(--rl-dark-text);
}

.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="togglePicker"],
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"],
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"],
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"],
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"],
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="incrementSeconds"],
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="decrementSeconds"] {
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="togglePicker"]:hover,
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]:hover,
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]:hover,
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]:hover,
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]:hover,
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="incrementSeconds"]:hover,
.dark-mode .bootstrap-datetimepicker-widget .btn[data-action="decrementSeconds"]:hover {
  background-color: #3a4048 !important;
  color: #fff !important;
}

.dark-mode .bootstrap-datetimepicker-widget a[data-action] {
  color: var(--rl-dark-text);
}

.dark-mode .bootstrap-datetimepicker-widget a[data-action]:hover {
  color: #fff;
}

/* SweetAlert2 — dark mode */
.dark-mode .swal2-popup {
  background-color: var(--rl-dark-elevated) !important;
  color: var(--rl-dark-text) !important;
  border: 1px solid var(--rl-dark-border);
}

.dark-mode .swal2-title {
  color: var(--rl-dark-text) !important;
}

.dark-mode .swal2-html-container,
.dark-mode .swal2-content {
  color: var(--rl-dark-muted) !important;
}

.dark-mode .swal2-close {
  color: var(--rl-dark-muted) !important;
}

.dark-mode .swal2-close:hover {
  color: #fff !important;
}

.dark-mode .swal2-icon.swal2-question {
  border-color: #5c6370 !important;
  color: #adb5bd !important;
}

.dark-mode .swal2-icon.swal2-warning {
  border-color: #8a7340 !important;
  color: #d4b86a !important;
}

.dark-mode .swal2-icon.swal2-error {
  border-color: #8a5050 !important;
}

.dark-mode .swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: #e08080 !important;
}

.dark-mode .swal2-icon.swal2-success {
  border-color: #4a6358 !important;
}

.dark-mode .swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: #7db899 !important;
}

.dark-mode .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(125, 184, 153, 0.3) !important;
}

.dark-mode .swal2-input,
.dark-mode .swal2-textarea,
.dark-mode .swal2-select {
  background-color: var(--rl-dark-surface) !important;
  border-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-text) !important;
}

.dark-mode .swal2-validation-message {
  background-color: #5c3d3d !important;
  color: #f8d7da !important;
}

.dark-mode .swal2-footer {
  border-top-color: var(--rl-dark-border) !important;
  color: var(--rl-dark-muted) !important;
}

.dark-mode .swal2-timer-progress-bar {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Table list pages — elegant toolbar */
.rl-table-card {
  border: 1px solid #e9ecef;
  box-shadow: none;
}

.dark-mode .rl-table-card {
  border-color: var(--rl-dark-border);
}

.rl-table-card>.card-body {
  padding: 1.25rem;
}

.rl-table-card .dataTables_filter,
.rl-table-card .dataTables_length {
  display: none !important;
}

.rl-table-toolbar {
  gap: 0.5rem;
}

.rl-table-toolbar .btn-sm {
  height: 31px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.rl-table-toolbar .input-group-sm,
.rl-table-toolbar .input-group-sm>.form-control,
.rl-table-toolbar .input-group-sm>.input-group-prepend>.input-group-text,
.rl-table-toolbar .input-group-sm>.input-group-append>.input-group-text {
  height: 31px;
}

.rl-table-toolbar .input-group,
.rl-table-toolbar .input-group-sm {
  align-items: stretch;
}

.rl-table-toolbar .input-group-prepend,
.rl-table-toolbar .input-group-append {
  display: flex;
}

.rl-table-toolbar .input-group-prepend > .input-group-text,
.rl-table-toolbar .input-group-append > .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile: toolbar & filter full width ── */
@media (max-width: 767.98px) {
  .rl-table-toolbar-slot {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .rl-table-toolbar,
  .rl-table-toolbar-slot > .rl-table-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0.5rem;
  }

  .rl-table-toolbar > .d-flex,
  .rl-table-toolbar .d-flex.flex-wrap,
  .rl-table-toolbar .rl-instance-action-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .rl-table-toolbar .btn,
  .rl-table-toolbar .btn-sm,
  .rl-table-toolbar .btn-group,
  .rl-table-toolbar .btn-group > .btn,
  .rl-table-toolbar .btn-group .dropdown-toggle {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
    min-height: 2.375rem;
    justify-content: center;
  }

  .rl-table-toolbar .btn-group {
    display: flex;
    flex-direction: column;
  }

  .rl-table-toolbar .btn-group .dropdown-menu {
    width: 100%;
  }

  .rl-table-toolbar > .row,
  .rl-table-toolbar .rl-table-search-row,
  .rl-table-toolbar .row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .rl-table-toolbar > .row > [class*="col"],
  .rl-table-toolbar .rl-table-search-row > [class*="col"],
  .rl-table-toolbar .row > [class*="col"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0.5rem;
  }

  .rl-table-toolbar .row > [class*="col"]:last-child,
  .rl-table-toolbar .rl-table-search-row > [class*="col"]:last-child {
    margin-bottom: 0;
  }

  .rl-table-toolbar select.form-control,
  .rl-table-toolbar select.form-control-sm,
  .rl-table-toolbar .custom-select,
  .rl-table-toolbar .rl-instance-filter,
  .rl-table-toolbar .rl-sdm-filter,
  .rl-table-toolbar .rl-onboarding-filter {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-bottom: 0.5rem;
    min-height: 2.375rem;
  }

  .rl-table-toolbar .input-group,
  .rl-table-toolbar .input-group-sm {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 2.375rem !important;
    min-height: 2.375rem !important;
  }

  .rl-table-toolbar .input-group-prepend,
  .rl-table-toolbar .input-group-append {
    display: flex;
    flex-shrink: 0;
    margin-right: 0;
    height: 2.375rem !important;
    align-self: stretch;
  }

  .rl-table-toolbar .input-group-prepend > .input-group-text,
  .rl-table-toolbar .input-group-append > .input-group-text,
  .rl-table-toolbar .input-group-sm > .input-group-prepend > .input-group-text,
  .rl-table-toolbar .input-group-sm > .input-group-append > .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    height: 100% !important;
    min-height: 2.375rem !important;
    max-height: none !important;
    padding: 0 0.65rem;
    font-size: var(--rl-font-sm);
    line-height: 1;
    border-radius: 0.2rem 0 0 0.2rem;
  }

  .rl-table-toolbar .input-group .form-control,
  .rl-table-toolbar .input-group-sm .form-control,
  .rl-table-toolbar .input-group select.form-control,
  .rl-table-toolbar .input-group-sm select.form-control {
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
    height: 2.375rem !important;
    min-height: 2.375rem !important;
    max-height: 2.375rem !important;
    font-size: var(--rl-font-base);
    line-height: 1.5;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
  }

  .rl-table-toolbar .input-group > .form-control:not(:first-child),
  .rl-table-toolbar .input-group-sm > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .rl-table-toolbar .input-group-prepend + .form-control,
  .rl-table-toolbar .input-group-prepend + select.form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .rl-table-toolbar [style*="min-width"],
  .rl-table-toolbar [style*="width:"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .rl-inv-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .rl-inv-toolbar .toolbar-title {
    margin-right: 0;
    width: 100%;
  }

  .rl-inv-toolbar .rl-instance-action-btns,
  .rl-instance-action-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    justify-content: flex-start !important;
  }

  .rl-inv-toolbar .btn,
  .rl-instance-action-btns .btn {
    width: 100%;
    margin-bottom: 0.5rem;
    min-height: 2.375rem;
  }

  .rl-inv-toolbar .btn:last-child,
  .rl-instance-action-btns .btn:last-child {
    margin-bottom: 0;
  }

  /* Tombol aksi di atas tabel (di luar toolbar DataTables) */
  .content .container-fluid > .d-flex.flex-wrap.mb-3,
  .content .container-fluid > .d-flex.flex-wrap.mb-2 {
    flex-direction: column;
    width: 100%;
    gap: 0.5rem !important;
  }

  .content .container-fluid > .d-flex.flex-wrap.mb-3 .btn,
  .content .container-fluid > .d-flex.flex-wrap.mb-2 .btn {
    width: 100%;
    min-height: 2.375rem;
  }

  /* Tombol di content-header (Tambah, dll.) */
  .content-header .container-fluid.d-flex.flex-wrap,
  .content-header .container-fluid.d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
  }

  .content-header .container-fluid.d-flex .btn {
    width: 100%;
    margin-top: 0.5rem;
    min-height: 2.375rem;
  }

  .rl-table-card > .card-body {
    padding: 0.75rem;
  }

  .rl-table-card .dataTables_wrapper .row:last-child {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }

  .rl-table-card .dataTables_wrapper .dataTables_info,
  .rl-table-card .dataTables_wrapper .dataTables_paginate {
    width: 100%;
    text-align: center !important;
    justify-content: center;
  }

  .rl-table-card .dataTables_wrapper .pagination {
    justify-content: center;
    flex-wrap: wrap;
  }
}

.rl-table-card .table {
  margin-bottom: 0;
  font-size: 1rem;
}

.rl-table-card .table thead th {
  background-color: #f4f5f7;
  color: #495057;
  border-color: #e9ecef;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.dark-mode .rl-table-card .table thead th,
.dark-mode .rl-table-card .table thead tr th,
.dark-mode .rl-table-card .table tr.bg-info th,
.dark-mode .rl-table-card .table thead.bg-success th,
.dark-mode .rl-table-card .table thead.bg-info th {
  background-color: var(--rl-dark-surface) !important;
  color: var(--rl-dark-muted) !important;
  border-color: var(--rl-dark-border) !important;
}

.rl-table-card .table-bordered td,
.rl-table-card .table-bordered th {
  border-color: #e9ecef;
}

.dark-mode .rl-table-card .table-bordered td,
.dark-mode .rl-table-card .table-bordered th {
  border-color: var(--rl-dark-border);
}

.rl-table-card .dataTables_wrapper .row:last-child {
  margin-top: 1rem;
  align-items: center;
}

.rl-table-card .dataTables_info {
  font-size: 0.875rem;
  color: #6c757d;
}

.dark-mode .rl-table-card .dataTables_info {
  color: var(--rl-dark-muted);
}

/* Compact tables: scroll horizontal below XL, full width on desktop */
.rl-table-scroll-wrap {
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 1200px) {
  .rl-table-scroll-wrap {
    overflow-x: visible;
  }

  .rl-table-scroll-wrap .dataTables_wrapper,
  .rl-table-scroll-wrap table.dataTable {
    width: 100% !important;
    max-width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .rl-table-scroll-wrap .table td {
    white-space: nowrap;
  }
}

/* RBAC — Admin Users table column widths */
.rl-rbac-users-wrap {
  overflow-x: visible;
}

.rl-rbac-users-table {
  table-layout: fixed;
  width: 100% !important;
}

.rl-rbac-users-table th,
.rl-rbac-users-table td {
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rl-rbac-users-table .rl-col-id,
.rl-rbac-users-table col.rl-col-id {
  width: 52px;
}

.rl-rbac-users-table .rl-col-role,
.rl-rbac-users-table col.rl-col-role {
  width: 108px;
}

.rl-rbac-users-table .rl-col-username,
.rl-rbac-users-table col.rl-col-username {
  width: auto;
  min-width: 0;
}

.rl-rbac-users-table .rl-col-phone,
.rl-rbac-users-table col.rl-col-phone {
  width: 112px;
}

.rl-rbac-users-table .rl-col-lastlogin,
.rl-rbac-users-table col.rl-col-lastlogin {
  width: 138px;
  font-size: 0.875rem;
}

.rl-rbac-users-table .rl-col-lastip,
.rl-rbac-users-table col.rl-col-lastip {
  width: 108px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
}

.rl-rbac-users-table .rl-col-online,
.rl-rbac-users-table col.rl-col-online {
  width: 82px;
}

.rl-rbac-users-table .rl-col-sessionstart,
.rl-rbac-users-table col.rl-col-sessionstart {
  width: 132px;
  font-size: 0.875rem;
}

.rl-rbac-users-table .rl-col-device,
.rl-rbac-users-table col.rl-col-device {
  width: 148px;
  font-size: 0.875rem;
}

.rl-rbac-users-table .rl-col-sessionip,
.rl-rbac-users-table col.rl-col-sessionip {
  width: 108px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
}

.rl-rbac-users-table .rl-col-lockout,
.rl-rbac-users-table col.rl-col-lockout {
  width: 72px;
}

.rl-rbac-users-table .rl-col-status,
.rl-rbac-users-table col.rl-col-status {
  width: 68px;
}

@media (max-width: 991.98px) {
  .rl-rbac-users-wrap {
    overflow-x: auto;
  }
}

.rl-invoice-toolbar .custom-file-label,
.rl-invoice-toolbar .form-control {
  height: calc(1.8125rem + 2px);
  font-size: 0.875rem;
}

.rl-invoice-toolbar .btn {
  height: calc(1.8125rem + 2px);
  font-size: 0.875rem;
  line-height: 1.2;
}

/* Fallback elegant table for pages not yet using rl-table-card */
.content-wrapper .card .table thead th,
.content-wrapper .card .table thead tr th,
.content-wrapper .card .table tr.bg-info th,
.content-wrapper .card .table thead.bg-success th,
.content-wrapper .card .table thead.bg-info th {
  background-color: #f4f5f7 !important;
  color: #495057 !important;
  border-color: #e9ecef !important;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dark-mode .content-wrapper .card .table thead th,
.dark-mode .content-wrapper .card .table thead tr th,
.dark-mode .content-wrapper .card .table tr.bg-info th,
.dark-mode .content-wrapper .card .table thead.bg-success th,
.dark-mode .content-wrapper .card .table thead.bg-info th {
  background-color: var(--rl-dark-surface) !important;
  color: var(--rl-dark-muted) !important;
  border-color: var(--rl-dark-border) !important;
}

.rl-instance-action-btns {
  gap: 0.35rem;
}

/* ── Instance detail page ── */
.rl-instance-detail .rl-inv-toolbar {
  margin-bottom: 1.25rem;
}

.rl-instance-detail .rl-inv-toolbar .toolbar-title small {
  margin-top: 0.35rem;
}

.rl-instance-detail .rl-inv-toolbar .toolbar-title .badge {
  font-size: 0.75rem;
  vertical-align: middle;
}

.rl-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rl-detail-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.875rem;
}

.rl-detail-item:last-child {
  border-bottom: none;
}

.rl-detail-label {
  flex-shrink: 0;
  width: 7.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #868e96;
  padding-top: 0.15rem;
}

.rl-detail-value {
  flex: 1;
  text-align: right;
  color: #343a40;
  line-height: 1.5;
  word-break: break-word;
}

.rl-remaining-days-badge {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 0.5rem 0.85rem;
  letter-spacing: 0.02em;
}

.rl-detail-value a {
  color: #1c7ed6;
}

.rl-detail-value a:hover {
  color: #1864ab;
  text-decoration: none;
}

.dark-mode .rl-detail-item {
  border-bottom-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-detail-label {
  color: var(--rl-dark-muted, #adb5bd);
}

.dark-mode .rl-detail-value {
  color: var(--rl-dark-text, #e9ecef);
}

.dark-mode .rl-detail-value a {
  color: #74c0fc;
}

@media (max-width: 575.98px) {
  .rl-instance-detail .rl-inv-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .rl-instance-detail .rl-instance-action-btns {
    justify-content: flex-start !important;
  }

  .rl-detail-item {
    flex-direction: column;
    gap: 0.35rem;
  }

  .rl-detail-label {
    width: auto;
  }

  .rl-detail-value {
    text-align: left;
  }
}

table tr.rl-member-inactive td {
  opacity: 0.42;
}

table tr.rl-member-inactive:hover td {
  opacity: 0.62;
}

#tableData tr.rl-subdomain-disabled td {
  opacity: 0.42;
  cursor: not-allowed;
}

#tableData tr.rl-subdomain-disabled td:not(:first-child) {
  pointer-events: none;
}

#tableData tr.rl-subdomain-disabled:hover td {
  opacity: 0.42;
}

/* ── Invoice detail (fluid + print) ── */
.rl-inv-page .content {
  padding-top: 0.75rem;
}

.rl-inv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #e9ecef;
}

.rl-inv-toolbar .toolbar-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #343a40;
  margin-right: auto;
}

.rl-inv-toolbar .toolbar-title small {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: #868e96;
}

.rl-inv-doc {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.375rem;
  padding: 1.5rem 1.75rem 1.75rem;
  width: 100%;
}

.rl-inv-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid #343a40;
}

.rl-inv-header img {
  height: 48px;
  width: auto;
}

.rl-inv-header-meta {
  text-align: right;
}

.rl-inv-header-meta h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.15rem;
  color: #212529;
}

.rl-inv-header-meta .instance-id {
  font-size: 0.875rem;
  color: #868e96;
}

.rl-inv-stamp {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid;
  border-radius: 0.2rem;
}

.rl-inv-stamp--paid {
  color: #2b8a3e;
  border-color: #2b8a3e;
}

.rl-inv-stamp--unpaid {
  color: #c92a2a;
  border-color: #c92a2a;
}

.rl-inv-info .info-label {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #adb5bd;
  margin-bottom: 0.35rem;
}

.rl-inv-info address {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #495057;
  margin-bottom: 0;
}

.rl-inv-info address strong {
  color: #212529;
  font-size: 1.1rem;
}

.rl-inv-info .info-line {
  font-size: 0.875rem;
  color: #495057;
  margin-bottom: 0.25rem;
}

.rl-inv-info .info-line span {
  color: #868e96;
  display: inline-block;
  min-width: 7rem;
}

.rl-inv-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #868e96;
  margin-bottom: 0.65rem;
}

.rl-inv-table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
}

.rl-inv-table thead th {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #495057;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 0.6rem 0.85rem;
}

.rl-inv-table tbody td {
  font-size: 0.875rem;
  color: #495057;
  border: 1px solid #dee2e6;
  padding: 0.65rem 0.85rem;
  vertical-align: top;
}

.rl-inv-totals-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
}

.rl-inv-totals {
  width: 100%;
  max-width: 360px;
  margin-bottom: 0;
}

.rl-inv-totals td {
  font-size: 0.875rem;
  padding: 0.4rem 0.85rem;
  border: none;
}

.rl-inv-totals td:first-child {
  text-align: right;
  color: #868e96;
}

.rl-inv-totals td:last-child {
  text-align: right;
  font-weight: 500;
  color: #212529;
  width: 130px;
}

.rl-inv-totals tr.rl-inv-grand td {
  padding-top: 0.65rem;
  border-top: 2px solid #343a40;
  font-size: 1rem;
  font-weight: 700;
  color: #212529;
}

.rl-inv-totals tr.rl-inv-grand td:last-child {
  font-size: 1.2rem;
}

.rl-inv-input {
  width: 110px;
  text-align: right;
  font-size: 0.875rem;
  border: 1px solid #ced4da;
  border-radius: 0.2rem;
  padding: 0.2rem 0.45rem;
}

.rl-inv-notes {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid #e9ecef;
  background: #fafbfc;
  border-radius: 0.375rem;
}

.rl-inv-notes h6 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #343a40;
  margin-bottom: 0.5rem;
}

.rl-inv-notes p,
.rl-inv-notes ol,
.rl-inv-notes ol li {
  font-size: 1rem;
  color: #495057;
  line-height: 1.65;
  margin-bottom: 0.35rem;
}

.rl-inv-notes p {
  margin-bottom: 0.5rem;
}

.rl-inv-notes ol {
  padding-left: 1.2rem;
  margin-bottom: 0;
}

.rl-inv-notes strong {
  color: #212529;
}

.rl-inv-delete {
  font-size: 0.875rem;
  color: #c92a2a;
  cursor: pointer;
  margin-left: 0.5rem;
}

.print-only {
  display: none !important;
}

.dark-mode .rl-inv-doc {
  background: var(--rl-dark-surface-raised, #2b2f36);
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-inv-header {
  border-color: #adb5bd;
}

.dark-mode .rl-inv-header-meta h2,
.dark-mode .rl-inv-info address strong,
.dark-mode .rl-inv-totals tr.rl-inv-grand td {
  color: #e9ecef;
}

.dark-mode .rl-inv-table thead th {
  background: var(--rl-dark-surface, #23262d);
  color: #ced4da;
  border-color: var(--rl-dark-border);
}

.dark-mode .rl-inv-table tbody td,
.dark-mode .rl-inv-info address,
.dark-mode .rl-inv-info .info-line {
  color: #ced4da;
  border-color: var(--rl-dark-border);
}

.dark-mode .rl-inv-toolbar {
  border-color: var(--rl-dark-border);
}

.dark-mode .rl-inv-notes {
  background: var(--rl-dark-surface, #23262d);
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-inv-notes h6 {
  color: #e9ecef;
}

.dark-mode .rl-inv-notes p,
.dark-mode .rl-inv-notes ol,
.dark-mode .rl-inv-notes ol li {
  color: #ced4da;
}

.dark-mode .rl-inv-notes strong {
  color: #f1f3f5;
}

@media print {
  @page {
    size: A4;
    margin: 10mm;
  }

  html,
  body,
  .wrapper,
  .wrapper .content-wrapper,
  body.layout-fixed .wrapper,
  body.layout-fixed .wrapper .content-wrapper,
  body.layout-navbar-fixed .wrapper .content-wrapper,
  .content-wrapper.rl-inv-page,
  .content-wrapper,
  .content,
  .container-fluid,
  .rl-inv-doc,
  .table-responsive {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body,
  body * {
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    background: #fff !important;
    font-size: 10pt;
    margin: 0 !important;
    padding: 0 !important;
  }

  .text-muted,
  .instance-id,
  .info-label,
  .info-line span,
  .rl-inv-section-title {
    color: #000 !important;
    opacity: 1 !important;
  }

  .main-header,
  .main-sidebar,
  .main-footer,
  .content-header,
  .rl-inv-toolbar,
  .no-print,
  #loading,
  .modal,
  .modal-backdrop,
  .control-sidebar,
  .toast,
  .swal2-container,
  .os-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  .content-wrapper,
  .content-wrapper.rl-inv-page {
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    background: #fff !important;
    transform: none !important;
    width: 100% !important;
  }

  .rl-inv-page .content,
  .rl-inv-page .container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .rl-inv-page .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .rl-inv-page .row>[class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .rl-inv-doc {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    width: 100% !important;
  }

  .rl-inv-header {
    border-bottom: 1.5pt solid #000 !important;
    padding-bottom: 6pt !important;
    margin-bottom: 8pt !important;
  }

  .rl-inv-header img {
    height: 32px !important;
  }

  .rl-inv-header-meta h2 {
    font-size: 13pt;
    font-weight: 700;
    color: #000 !important;
    margin: 0 0 2pt !important;
  }

  .rl-inv-header-meta .instance-id {
    font-size: 9pt;
    color: #000 !important;
  }

  .rl-inv-stamp {
    border-width: 1.5pt;
    padding: 2pt 7pt;
    font-size: 9pt;
    font-weight: 700;
    color: #000 !important;
    border-color: #000 !important;
    margin-top: 3pt !important;
  }

  .rl-inv-info {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 8pt !important;
  }

  .rl-inv-info .rl-inv-from,
  .rl-inv-info .rl-inv-to,
  .rl-inv-info .rl-inv-meta,
  .rl-inv-page .rl-inv-info>.rl-inv-from,
  .rl-inv-page .rl-inv-info>.rl-inv-to,
  .rl-inv-page .rl-inv-info>.rl-inv-meta {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
    float: none !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 6pt 0 0 !important;
    box-sizing: border-box !important;
  }

  .rl-inv-info .rl-inv-meta,
  .rl-inv-page .rl-inv-info>.rl-inv-meta {
    padding-right: 0 !important;
    padding-left: 6pt !important;
    margin-top: 0 !important;
  }

  .rl-inv-info .info-label {
    font-size: 9pt;
    font-weight: 700;
    color: #000 !important;
    margin-bottom: 3pt;
  }

  .rl-inv-info address {
    font-size: 9pt;
    line-height: 1.35;
    color: #000 !important;
    margin-bottom: 0 !important;
  }

  .rl-inv-info address strong {
    font-size: 9.5pt;
    color: #000 !important;
  }

  .rl-inv-info .info-line {
    font-size: 9pt;
    color: #000 !important;
    margin-bottom: 2pt;
    line-height: 1.35;
  }

  .rl-inv-info .info-line span {
    font-weight: 600;
    min-width: 5.5rem;
    color: #000 !important;
  }

  .rl-inv-section-title {
    font-size: 10pt;
    font-weight: 700;
    color: #000 !important;
    margin-bottom: 4pt;
  }

  .rl-inv-table {
    margin-bottom: 4pt !important;
  }

  .rl-inv-table thead th {
    background: #eee !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    font-size: 9pt;
    font-weight: 700;
    padding: 3pt 5pt;
  }

  .rl-inv-table tbody td {
    border: 1px solid #666 !important;
    color: #000 !important;
    font-size: 9pt;
    padding: 3pt 5pt;
    line-height: 1.3;
  }

  .rl-inv-totals-wrap {
    margin-top: 4pt !important;
  }

  .rl-inv-totals td {
    color: #000 !important;
    font-size: 9pt;
    padding: 2pt 5pt;
  }

  .rl-inv-totals td:first-child {
    color: #000 !important;
    font-weight: 600;
  }

  .rl-inv-totals tr.rl-inv-grand td {
    border-top: 1.5pt solid #000 !important;
    font-size: 10.5pt;
    font-weight: 700;
  }

  .rl-inv-totals tr.rl-inv-grand td:last-child {
    font-size: 11pt;
  }

  .rl-inv-notes,
  .dark-mode .rl-inv-notes {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 8pt !important;
    padding: 6pt 0 0 !important;
    -webkit-print-color-adjust: economy;
    print-color-adjust: economy;
  }

  .rl-inv-notes h6,
  .dark-mode .rl-inv-notes h6 {
    font-size: 9pt;
    font-weight: 700;
    color: #000 !important;
    margin-bottom: 2pt !important;
  }

  .rl-inv-notes p,
  .rl-inv-notes ol,
  .rl-inv-notes ol li,
  .dark-mode .rl-inv-notes p,
  .dark-mode .rl-inv-notes ol,
  .dark-mode .rl-inv-notes ol li {
    font-size: 8.5pt;
    color: #000 !important;
    line-height: 1.35;
    margin-bottom: 1.5pt !important;
  }

  .rl-inv-notes strong,
  .dark-mode .rl-inv-notes strong {
    color: #000 !important;
    font-weight: 700;
  }

  .rl-inv-notes .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .rl-inv-notes .col-md-5,
  .rl-inv-notes .col-md-7 {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 8pt !important;
  }

  .print-only {
    display: inline !important;
  }

  a[href]:after {
    content: none !important;
  }
}

/* ── New instance form ── */
.rl-form-page .content-header h1 {
  font-size: 1.8rem;
  font-weight: 600;
}

.rl-form-card {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
}

.rl-form-card .card-body {
  padding: 1.5rem 1.75rem;
}

.rl-form-section+.rl-form-section {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #f1f3f5;
}

.rl-form-step-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.rl-form-step-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #2b8a3e;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.rl-form-step-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #343a40;
}

.rl-form-page .form-group {
  margin-bottom: 1rem;
}

.rl-form-page .col-form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
  padding-top: calc(0.375rem + 1px);
}

.rl-form-page .form-control,
.rl-form-page .custom-select {
  font-size: 1rem;
}

.rl-form-page .form-text-hint {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: #868e96;
}

.rl-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f3f5;
}

.rl-form-footer .form-check-label {
  font-size: 0.875rem;
  color: #495057;
}

.dark-mode .rl-form-card {
  background: var(--rl-dark-surface-raised, #2b2f36);
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-form-section+.rl-form-section,
.dark-mode .rl-form-footer {
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-form-step-title {
  color: #e9ecef;
}

.dark-mode .rl-form-page .col-form-label,
.dark-mode .rl-form-footer .form-check-label {
  color: #ced4da;
}

.dark-mode .rl-form-page .form-text-hint {
  color: #adb5bd;
}

.modal .rl-form-section {
  padding-top: 0;
}

.modal .rl-form-section+.rl-form-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

/* Scrollable modal: BS4 needs flex column so body scrolls, footer stays visible */
.modal-dialog-scrollable .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 1rem);
}

.modal-dialog-scrollable .modal-header {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-dialog-scrollable .modal-footer {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-content > form,
.modal-dialog-scrollable .modal-content>form.rl-modal-form-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

.modal-dialog-scrollable .modal-content > form .modal-header,
.modal-dialog-scrollable .modal-content>form.rl-modal-form-scroll .modal-header {
  flex-shrink: 0;
}

.modal-dialog-scrollable .modal-content > form .modal-body,
.modal-dialog-scrollable .modal-content>form.rl-modal-form-scroll .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-dialog-scrollable .modal-content > form .modal-footer,
.modal-dialog-scrollable .modal-content>form.rl-modal-form-scroll .modal-footer {
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  #modalPanduan.modal.fade .modal-dialog,
  #modalFaq.modal.fade .modal-dialog,
  #modalPengumuman.modal.fade .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
  }

  #modalPanduan .modal-dialog.modal-dialog-centered,
  #modalFaq .modal-dialog.modal-dialog-centered,
  #modalPengumuman .modal-dialog.modal-dialog-centered {
    min-height: calc(100% - 1rem);
    align-items: flex-start;
  }

  #modalPanduan .modal-content,
  #modalFaq .modal-content,
  #modalPengumuman .modal-content {
    max-height: calc(100vh - 1rem);
  }

  #modalPanduan .modal-body,
  #modalFaq .modal-body,
  #modalPengumuman .modal-body {
    padding: 0.75rem 1rem;
  }

  #modalPanduan .modal-footer,
  #modalFaq .modal-footer,
  #modalPengumuman .modal-footer {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #modalPanduan .modal-footer .btn,
  #modalFaq .modal-footer .btn,
  #modalPengumuman .modal-footer .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }

  #modalPanduan .note-editor,
  #modalFaq .note-editor {
    margin-bottom: 0;
  }
}

/* ── My Account page ── */
.rl-account-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
}

.rl-account-avatar {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #e7f5ff;
  color: #1c7ed6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
}

.rl-account-hero-name {
  margin: 0 0 0.15rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #212529;
}

.rl-account-hero-meta {
  margin: 0;
  font-size: 0.875rem;
  color: #868e96;
}

.rl-form-step-num--primary {
  background: #4263eb;
}

.rl-form-step-num--warning {
  background: #e67700;
}

.dark-mode .rl-account-hero {
  background: var(--rl-dark-surface-raised, #2b2f36);
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-account-hero-name {
  color: #e9ecef;
}

.dark-mode .rl-account-avatar {
  background: rgba(28, 126, 214, 0.2);
  color: #74c0fc;
}

/* ── RBAC modal (theme-aware, no hardcoded white) ── */
.rl-rbac-subtitle {
  color: #868e96;
  font-size: 0.875rem;
}

.rl-rbac-modal .modal-content {
  overflow: hidden;
}

.rl-rbac-modal-header,
.rl-rbac-modal-footer {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.08);
}

.rl-rbac-shell {
  display: flex;
  min-height: 520px;
}

.rl-rbac-sidebar {
  width: 36%;
  min-width: 260px;
  max-width: 360px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.rl-rbac-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.rl-rbac-sidebar-table {
  flex: 1;
  padding: 0.5rem 0.75rem 0.75rem;
  overflow: auto;
}

.rl-rbac-sidebar-table .table {
  margin-bottom: 0;
}

.rl-rbac-sidebar-table .table thead th {
  border-top: 0;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #868e96;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rl-rbac-sidebar-table .table td {
  vertical-align: middle;
  border-color: rgba(0, 0, 0, 0.06);
}

.rl-rbac-sidebar-table tbody tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.rl-rbac-sidebar-table tbody tr:hover {
  background: rgba(66, 99, 235, 0.06);
}

.rl-rbac-sidebar-table tbody tr.rl-rbac-role-active {
  background: rgba(66, 99, 235, 0.12);
  box-shadow: inset 3px 0 0 #4263eb;
}

.rl-rbac-main {
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  background: transparent;
}

.rl-rbac-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 420px;
  padding: 2rem 1.5rem;
}

.rl-rbac-empty-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #4263eb;
  background: rgba(66, 99, 235, 0.1);
  border: 1px solid rgba(66, 99, 235, 0.15);
}

.rl-rbac-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rl-rbac-form-block {
  margin-bottom: 1rem;
}

.rl-rbac-perm-section {
  padding-top: 0.5rem;
}

.rl-rbac-perm-group {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

.rl-rbac-perm-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.03);
}

.rl-rbac-perm-group-head .btn-link {
  font-size: 0.75rem;
  line-height: 1;
}

.rl-rbac-perm-group-body {
  padding: 0.65rem 0.75rem 0.5rem;
}

.rl-rbac-editor-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: right;
}

.rl-rbac-readonly {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.rl-rbac-alert {
  background: rgba(23, 162, 184, 0.08);
  border-color: rgba(23, 162, 184, 0.2);
  color: inherit;
}

.dark-mode .rl-rbac-subtitle {
  color: var(--rl-dark-muted, #adb5bd);
}

.dark-mode .rl-rbac-modal-header,
.dark-mode .rl-rbac-modal-footer {
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-rbac-sidebar {
  background: var(--rl-dark-surface, #23262d);
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-rbac-sidebar-head {
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-rbac-sidebar-table .table thead th {
  color: var(--rl-dark-muted, #adb5bd);
  background: transparent;
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-rbac-sidebar-table .table td {
  border-color: var(--rl-dark-border, #3d444b);
  color: var(--rl-dark-text, #e9ecef);
}

.dark-mode .rl-rbac-sidebar-table tbody tr:hover {
  background: rgba(110, 168, 254, 0.08);
}

.dark-mode .rl-rbac-sidebar-table tbody tr.rl-rbac-role-active {
  background: rgba(110, 168, 254, 0.14);
  box-shadow: inset 3px 0 0 #6ea8fe;
}

.dark-mode .rl-rbac-empty-icon {
  color: #6ea8fe;
  background: rgba(110, 168, 254, 0.12);
  border-color: rgba(110, 168, 254, 0.25);
}

.dark-mode .rl-rbac-empty h6 {
  color: var(--rl-dark-text, #e9ecef);
}

.dark-mode .rl-rbac-editor-head,
.dark-mode .rl-rbac-editor-footer {
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-rbac-perm-group {
  background: var(--rl-dark-surface, #23262d);
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-rbac-perm-group-head {
  background: var(--rl-dark-elevated, #2b2f36);
  border-color: var(--rl-dark-border, #3d444b);
}

.dark-mode .rl-rbac-readonly {
  background: var(--rl-dark-surface, #23262d) !important;
  border-color: var(--rl-dark-border, #3d444b) !important;
  color: var(--rl-dark-muted, #adb5bd) !important;
}

.dark-mode .rl-rbac-alert {
  background: rgba(23, 162, 184, 0.12);
  border-color: rgba(23, 162, 184, 0.3);
  color: var(--rl-dark-text, #e9ecef);
}

.dark-mode .rl-rbac-main {
  color: var(--rl-dark-text, #e9ecef);
}

.dark-mode .rl-rbac-editor-head h6,
.dark-mode .rl-rbac-perm-section h6 {
  color: var(--rl-dark-text, #e9ecef);
}

.dark-mode .rl-rbac-perm-group-head .font-weight-bold {
  color: var(--rl-dark-muted, #adb5bd);
}

.dark-mode .rl-rbac-perm-group-body .custom-control-label {
  color: var(--rl-dark-text, #e9ecef);
}

@media (max-width: 991.98px) {
  .rl-rbac-shell {
    flex-direction: column;
    min-height: auto;
  }

  .rl-rbac-sidebar {
    width: 100%;
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    max-height: 280px;
  }

  .dark-mode .rl-rbac-sidebar {
    border-color: var(--rl-dark-border, #3d444b);
  }

  .rl-rbac-empty {
    min-height: 240px;
  }
}

/* ── Member Instances ── */
.mi-card {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  margin-bottom: 1rem;
}

.mi-card:hover {
  border-color: #ced4da;
  box-shadow: 0 0.35rem 1rem rgba(33, 37, 41, 0.06);
  transform: translateY(-2px);
}

.mi-icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e7f5ff;
  color: #1c7ed6;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.mi-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #212529;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.mi-company {
  font-size: 1rem;
  color: #868e96;
  font-weight: 500;
}

.mi-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: 0.25rem;
}

.mi-badge--running {
  background: #ebfbee;
  color: #2b8a3e;
}

.mi-badge--pending {
  background: #fff4e6;
  color: #e67700;
}

.mi-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.mi-meta li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid #f1f3f5;
  font-size: 1rem;
}

.mi-meta li:first-child {
  border-top: none;
  padding-top: 0;
}

.mi-meta-label {
  color: #868e96;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mi-meta-label i {
  width: 0.9rem;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.85;
}

.mi-meta-value {
  color: #343a40;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.mi-price {
  color: #1c7ed6;
  font-weight: 700;
}

.mi-link {
  color: #1c7ed6;
  font-weight: 500;
  text-align: right;
  font-size: 0.875rem;
  word-break: break-all;
}

.mi-link:hover {
  text-decoration: underline;
}

.mi-footer {
  background: #fafbfc;
  border-top: 1px solid #e9ecef;
  padding: 0.85rem 1.25rem;
}

.dark-mode .mi-card:hover {
  border-color: #495057;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.25);
}

.dark-mode .mi-icon-wrap {
  background: rgba(28, 126, 214, 0.2);
  color: #74c0fc;
}

.dark-mode .mi-title {
  color: #e9ecef;
}

.dark-mode .mi-company,
.dark-mode .mi-meta-label {
  color: #adb5bd;
}

.dark-mode .mi-meta li {
  border-top-color: #3d444b;
}

.dark-mode .mi-meta-value {
  color: #ced4da;
}

.dark-mode .mi-price,
.dark-mode .mi-link {
  color: #74c0fc;
}

.dark-mode .mi-badge--running {
  background: rgba(43, 138, 62, 0.2);
  color: #69db7c;
}

.dark-mode .mi-badge--pending {
  background: rgba(230, 119, 0, 0.2);
  color: #ffa94d;
}

.dark-mode .mi-footer {
  background: #2b2f36;
  border-top-color: #3d444b;
}

/* ── Member Order Plans ── */
.mo-note-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e7f5ff;
  color: #1c7ed6;
  flex-shrink: 0;
}

.mo-card {
  position: relative;
  margin-bottom: 1.25rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mo-card:hover {
  border-color: #ced4da;
  box-shadow: 0 0.4rem 1.1rem rgba(33, 37, 41, 0.07);
  transform: translateY(-3px);
}

.mo-card--popular {
  border-color: #1c7ed6;
  box-shadow: 0 0.35rem 1rem rgba(28, 126, 214, 0.12);
}

.mo-popular-tag {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: #1c7ed6;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 0.25rem;
  z-index: 1;
}

.mo-plan-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #868e96;
}

.mo-card--blue .mo-plan-name {
  color: #1c7ed6;
}

.mo-card--amber .mo-plan-name {
  color: #e67700;
}

.mo-card--green .mo-plan-name {
  color: #2b8a3e;
}

.mo-card--violet .mo-plan-name {
  color: #7950f2;
}

.mo-card--rose .mo-plan-name {
  color: #c92a2a;
}

.mo-card--cyan .mo-plan-name {
  color: #0c8599;
}

.mo-card--slate .mo-plan-name {
  color: #495057;
}

.mo-card--gold .mo-plan-name {
  color: #e67700;
}

.mo-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.15;
}

.mo-price-currency {
  font-size: 1rem;
  font-weight: 600;
  margin-right: 0.1rem;
  vertical-align: top;
}

.mo-price small {
  font-size: 1rem;
  font-weight: 500;
  color: #868e96;
  margin-left: 0.15rem;
}

.mo-yearly {
  font-size: 1rem;
  color: #2b8a3e;
  font-weight: 600;
}

.mo-specs li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0;
  font-size: 1rem;
  color: #495057;
}

.mo-specs li i {
  width: 1rem;
  text-align: center;
  color: #adb5bd;
  font-size: 0.875rem;
}

.mo-spec-highlight {
  color: #e67700 !important;
  font-weight: 600;
}

.mo-spec-highlight i {
  color: #e67700 !important;
}

.mo-features {
  border-top: 1px solid #f1f3f5;
  padding-top: 0.85rem;
}

.mo-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0;
  font-size: 1rem;
}

.mo-features li i {
  width: 0.95rem;
  text-align: center;
  font-size: 0.75rem;
}

.mo-features .is-on {
  color: #343a40;
}

.mo-features .is-on i {
  color: #2b8a3e;
}

.mo-features .is-off {
  color: #adb5bd;
}

.mo-features .is-off i {
  color: #fa5252;
}

.dark-mode .mo-note-icon {
  background: rgba(28, 126, 214, 0.2);
  color: #74c0fc;
}

.dark-mode .mo-card:hover {
  border-color: #495057;
  box-shadow: 0 0.4rem 1.1rem rgba(0, 0, 0, 0.28);
}

.dark-mode .mo-card--popular {
  border-color: #74c0fc;
  box-shadow: 0 0.35rem 1rem rgba(116, 192, 252, 0.12);
}

.dark-mode .mo-price {
  color: #e9ecef;
}

.dark-mode .mo-price small,
.dark-mode .mo-plan-name {
  color: #adb5bd;
}

.dark-mode .mo-card--blue .mo-plan-name {
  color: #74c0fc;
}

.dark-mode .mo-card--amber .mo-plan-name,
.dark-mode .mo-card--gold .mo-plan-name {
  color: #ffa94d;
}

.dark-mode .mo-card--green .mo-plan-name {
  color: #69db7c;
}

.dark-mode .mo-card--violet .mo-plan-name {
  color: #b197fc;
}

.dark-mode .mo-card--rose .mo-plan-name {
  color: #ff8787;
}

.dark-mode .mo-card--cyan .mo-plan-name {
  color: #66d9e8;
}

.dark-mode .mo-card--slate .mo-plan-name {
  color: #ced4da;
}

.dark-mode .mo-yearly {
  color: #69db7c;
}

.dark-mode .mo-specs li {
  color: #ced4da;
}

.dark-mode .mo-features {
  border-top-color: #3d444b;
}

.dark-mode .mo-features .is-on {
  color: #e9ecef;
}

.dark-mode .mo-features .is-off {
  color: #868e96;
}

/* ── Member New Order Steps ── */
.mo-step-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #f1f3f5;
}

.mo-step-num {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1c7ed6;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.mo-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
}

.mo-step-desc {
  font-size: 0.875rem;
  color: #868e96;
  margin-top: 0.15rem;
}

.mo-step+.mo-step {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.dark-mode .mo-step-head {
  border-bottom-color: #3d444b;
}

.dark-mode .mo-step-num {
  background: #1c7ed6;
  color: #fff;
}

.dark-mode .mo-step-title {
  color: #e9ecef;
}

.dark-mode .mo-step-desc {
  color: #adb5bd;
}

/* ── Member Jasa Setting ── */
.js-card {
  margin-bottom: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.js-card:hover {
  border-color: #ced4da;
  box-shadow: 0 0.35rem 1rem rgba(33, 37, 41, 0.06);
  transform: translateY(-2px);
}

.js-avatar {
  height: 9.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e9ecef;
  flex-shrink: 0;
}

.js-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.js-role {
  font-size: 1rem;
  color: #2b8a3e;
  font-weight: 500;
}

.js-service {
  font-size: 1rem;
  color: #868e96;
  line-height: 1.55;
  margin: 0;
}

.js-meta li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px solid #f1f3f5;
  font-size: 1rem;
}

.js-meta li:first-child {
  border-top: none;
  padding-top: 0;
}

.js-meta-label {
  color: #868e96;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  font-size: 1rem;
}

.js-meta-label i {
  width: 1rem;
  text-align: center;
  font-size: 1rem;
}

.js-meta-value {
  color: #343a40;
  font-weight: 400;
  text-align: right;
  font-size: 1rem;
}

.js-footer {
  background: #fafbfc;
  border-top: 1px solid #e9ecef;
  padding: 0.85rem 1.25rem;
}

.dark-mode .js-card:hover {
  border-color: #495057;
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.25);
}

.dark-mode .js-avatar {
  border-color: #3d444b;
}

.dark-mode .js-name {
  color: #e9ecef;
}

.dark-mode .js-role {
  color: #69db7c;
}

.dark-mode .js-service,
.dark-mode .js-meta-label {
  color: #adb5bd;
}

.dark-mode .js-meta li {
  border-top-color: #3d444b;
}

.dark-mode .js-meta-value {
  color: #ced4da;
}

.dark-mode .js-footer {
  background: #2b2f36;
  border-top-color: #3d444b;
}

/* ── Member FAQ ── */
.faq-kat-wrap .btn {
  margin-right: 0.25rem;
}

.faq-item {
  border-color: #f1f3f5 !important;
}

.faq-q {
  padding: 1rem 1.25rem;
  color: #212529;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
}

.faq-q:hover {
  background: #f8f9fa;
  color: #212529;
}

.faq-q:not(.collapsed) {
  background: #f8f9fa;
}

.faq-q:not(.collapsed) .faq-chevron {
  transform: rotate(180deg);
}

.faq-num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #e7f5ff;
  color: #1c7ed6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  margin-right: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.faq-q-text {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.faq-chevron {
  color: #adb5bd;
  font-size: 1rem;
  margin-top: 0.4rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.faq-a {
  padding: 0 1.25rem 1.35rem 4.1rem;
  font-size: 1rem;
  color: #495057;
  line-height: 1.65;
}

.faq-a code {
  background: #f1f3f5;
  color: #343a40;
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-size: 0.92rem;
}

.faq-tips {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-tip {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.faq-tip-num {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #1c7ed6;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.faq-tip-title {
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.25rem;
  font-size: 1.02rem;
}

.faq-tip-text {
  font-size: 0.98rem;
  color: #495057;
  line-height: 1.6;
}

.faq-best {
  background: #ebfbee;
  border: 1px solid #d3f9d8;
  border-radius: 0.5rem;
  padding: 1rem 1.1rem;
  color: #2b8a3e;
  font-size: 0.98rem;
  line-height: 1.6;
}

.dark-mode .faq-item {
  border-color: #3d444b !important;
}

.dark-mode .faq-q,
.dark-mode .faq-q:hover,
.dark-mode .faq-q:not(.collapsed) {
  color: #e9ecef;
  background: transparent;
}

.dark-mode .faq-q:hover,
.dark-mode .faq-q:not(.collapsed) {
  background: rgba(255, 255, 255, 0.03);
}

.dark-mode .faq-num {
  background: rgba(28, 126, 214, 0.2);
  color: #74c0fc;
}

.dark-mode .faq-a,
.dark-mode .faq-tip-text {
  color: #ced4da;
}

.dark-mode .faq-tip-title {
  color: #e9ecef;
}

.dark-mode .faq-a code {
  background: #31363f;
  color: #e9ecef;
}

.dark-mode .faq-best {
  background: rgba(43, 138, 62, 0.15);
  border-color: rgba(43, 138, 62, 0.3);
  color: #69db7c;
}

/* ── Member Panduan ── */
.panduan-card-link {
  color: inherit;
  text-decoration: none !important;
  display: block;
  height: 100%;
}

.panduan-card {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.panduan-card:hover {
  border-color: #80bdff;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.panduan-card-title {
  font-size: 1.25rem;
  line-height: 1.35;
  color: #212529;
}

.panduan-isi {
  font-size: 1rem;
  line-height: 1.7;
}

.panduan-isi p:last-child,
.panduan-isi ol:last-child,
.panduan-isi ul:last-child {
  margin-bottom: 0;
}

.panduan-isi code {
  background: #f1f3f5;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  font-size: 0.9em;
}

.panduan-isi .panduan-inline-img,
.panduan-inline-img {
  max-width: 100%;
  height: auto;
  border-radius: 0.35rem;
  margin: 0.5rem 0;
}

.dark-mode .panduan-card:hover {
  border-color: #4dabf7;
}

.dark-mode .panduan-card-title {
  color: #e9ecef;
}

.dark-mode .panduan-isi code {
  background: #31363f;
  color: #e9ecef;
}

.remote-script-box {
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: 1rem;
  line-height: 1.45;
  background: #f8f9fa;
  color: #212529;
  resize: vertical;
  white-space: pre;
}

.dark-mode .remote-script-box {
  background: #1c1f26;
  color: #e9ecef;
  border-color: #3d444b;
}

/* Member detail instance — normal font sizes */
.mdi-detail .rl-detail-item {
  font-size: 1rem;
  padding: 1rem 1.25rem;
}

.mdi-detail .rl-detail-label {
  width: 8.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #495057;
}

.mdi-detail .rl-detail-value {
  font-size: 1rem;
}

.mdi-detail .rl-detail-value small {
  font-size: 1rem;
}

.mdi-detail .rl-form-step-title {
  font-size: 1.15rem;
}

.mdi-detail .col-form-label {
  font-size: 1rem !important;
}

.mdi-detail .form-control,
.mdi-detail .custom-select {
  font-size: 1rem !important;
}

.mdi-detail .form-text-hint,
.mdi-detail .mo-note-body,
.mdi-detail .mo-note-body ul {
  font-size: 1rem;
}

.mdi-detail .toolbar-title {
  font-size: 1.1rem;
}

.mdi-detail .toolbar-title small {
  font-size: 1.1rem;
}

.mdi-detail .card-title {
  font-size: 1.1rem;
}

.dark-mode .mdi-detail .rl-detail-label {
  color: #ced4da;
}

/* Upgrade plan cards in modal */
#modalUpgrade .upgrade-plan-card {
  position: relative;
  margin-bottom: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

#modalUpgrade .upgrade-plan-card .card-body {
  padding: 0.85rem 0.9rem;
}

#modalUpgrade .upgrade-plan-card .mo-plan-name {
  font-size: 0.875rem;
  padding-right: 4.5rem;
}

#modalUpgrade .upgrade-plan-card .mo-price {
  font-size: 1.25rem;
}

#modalUpgrade .upgrade-plan-card .mo-price-currency {
  font-size: 1rem;
}

#modalUpgrade .upgrade-plan-card .mo-yearly {
  font-size: 0.75rem;
}

#modalUpgrade .upgrade-plan-card .mo-specs li,
#modalUpgrade .upgrade-plan-card .mo-features li {
  font-size: 0.875rem;
  margin-bottom: 0.2rem;
}

#modalUpgrade .upgrade-plan-card .mo-features {
  margin-bottom: 0.5rem !important;
}

#modalUpgrade .mo-current-tag {
  top: 0.55rem;
  right: 0.55rem;
  font-size: 0.75rem;
  padding: 0.18rem 0.4rem;
}

.upgrade-plan-card.is-selectable {
  cursor: pointer;
}

.upgrade-plan-card.is-selectable:hover {
  border-color: #1c7ed6;
  box-shadow: 0 0.4rem 1.1rem rgba(28, 126, 214, 0.12);
  transform: translateY(-2px);
}

.upgrade-plan-card.is-selected {
  border-color: #1c7ed6 !important;
  background: #e7f5ff !important;
  box-shadow: 0 0 0 0.18rem rgba(28, 126, 214, 0.35);
}

.upgrade-plan-card.is-selected.mo-card--amber {
  border-color: #e67700 !important;
  background: #fff4e6 !important;
  box-shadow: 0 0 0 0.18rem rgba(230, 119, 0, 0.3);
}

.upgrade-plan-card.is-selected.mo-card--green {
  border-color: #2b8a3e !important;
  background: #ebfbee !important;
  box-shadow: 0 0 0 0.18rem rgba(43, 138, 62, 0.3);
}

.upgrade-plan-card.is-selected.mo-card--violet {
  border-color: #7950f2 !important;
  background: #f3f0ff !important;
  box-shadow: 0 0 0 0.18rem rgba(121, 80, 242, 0.3);
}

.upgrade-plan-card.is-selected.mo-card--rose {
  border-color: #c92a2a !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 0.18rem rgba(201, 42, 42, 0.3);
}

.upgrade-plan-card.is-selected.mo-card--cyan {
  border-color: #0c8599 !important;
  background: #e3fafc !important;
  box-shadow: 0 0 0 0.18rem rgba(12, 133, 153, 0.3);
}

.upgrade-plan-card.is-selected.mo-card--slate {
  border-color: #495057 !important;
  background: #f1f3f5 !important;
  box-shadow: 0 0 0 0.18rem rgba(73, 80, 87, 0.3);
}

.upgrade-plan-card.is-selected.mo-card--gold {
  border-color: #e67700 !important;
  background: #fff9db !important;
  box-shadow: 0 0 0 0.18rem rgba(230, 119, 0, 0.3);
}

.upgrade-plan-card.is-current {
  border-color: #2b8a3e !important;
}

.upgrade-plan-card.is-locked {
  cursor: not-allowed;
}

.upgrade-plan-card.is-locked:not(.is-current) {
  opacity: 0.55;
  filter: grayscale(0.15);
}

.upgrade-plan-card.is-locked:hover {
  transform: none;
  box-shadow: none;
  border-color: #dee2e6;
}

.upgrade-plan-card.is-current:hover {
  border-color: #2b8a3e;
  box-shadow: 0 0.35rem 1rem rgba(43, 138, 62, 0.12);
  transform: none;
}

.mo-current-tag {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  background: #2b8a3e;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 0.25rem;
}

.dark-mode .upgrade-plan-card.is-selected {
  border-color: #74c0fc !important;
  background: rgba(28, 126, 214, 0.22) !important;
  box-shadow: 0 0 0 0.18rem rgba(116, 192, 252, 0.35);
}

.dark-mode .upgrade-plan-card.is-current {
  border-color: #69db7c !important;
}

.dark-mode .upgrade-plan-card.is-locked:hover {
  border-color: #495057;
}

.dark-mode .mo-current-tag {
  background: #2b8a3e;
}

/* Ticket remote access + star rating */
.rl-ticket-access {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}

.rl-reply-tools {
  /* keep Bootstrap .row horizontal layout */
  align-items: flex-start;
}

.rl-ticket-footer-spacer {
  height: 1.25rem;
  width: 100%;
  flex-shrink: 0;
  display: block;
}

.content-wrapper.rl-ticket-page {
  padding-bottom: 0.75rem !important;
}

.content-wrapper.rl-ticket-page > .content {
  padding-bottom: 0.5rem !important;
}

.rl-reply-emojis {
  padding: 0.5rem;
  border-bottom: 1px solid #dee2e6;
  background: #fff;
  max-height: 120px;
  overflow-y: auto;
}

.rl-ticket-page .note-editor .rl-reply-emojis {
  border-left: 0;
  border-right: 0;
}

.rl-note-emoji-toggle.active {
  background-color: #e9ecef !important;
}

.dark-mode .rl-reply-emojis {
  background: #2b3035;
  border-bottom-color: #495057;
}

.dark-mode .rl-note-emoji-toggle.active {
  background-color: #495057 !important;
}

.rl-reply-snippets,
.rl-reply-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-content: flex-start;
}

.rl-reply-chip {
  border: 1px solid #dee2e6;
  background: #f8f9fa;
  border-radius: 0.35rem;
  padding: 0.15rem 0.4rem;
  line-height: 1.3;
  cursor: pointer;
  font-size: 1rem;
}

.rl-reply-chip--text {
  font-size: 0.75rem;
  color: #495057;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.rl-reply-chip--sop {
  color: #0b7285;
  border-color: #66d9e8;
  background: #e3fafc;
  font-weight: 600;
}

.dark-mode .rl-reply-chip--sop {
  color: #66d9e8;
  border-color: #0b7285;
  background: #17313a;
}

.rl-reply-chip:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.rl-ticket-ip {
  color: #1c7ed6 !important;
  text-decoration: none !important;
  font-size: 0.875rem;
}

.rl-ticket-ip:hover {
  text-decoration: underline !important;
}

.rl-ticket-avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 0.5rem;
  line-height: 1;
  color: #fff;
}

.rl-ticket-avatar--admin {
  background: #1c7ed6;
}

.rl-ticket-avatar--member {
  background: #2b8a3e;
}

.dark-mode .rl-ticket-avatar--admin {
  background: #1971c2;
}

.dark-mode .rl-ticket-avatar--member {
  background: #2f9e44;
}

@media (min-width: 768px) {
  .rl-ticket-split-left {
    border-right: 1px solid #dee2e6;
    padding-right: 1.25rem;
  }

  .rl-ticket-split-right {
    padding-left: 1.25rem;
  }

  .dark-mode .rl-ticket-split-left {
    border-right-color: #495057;
  }
}

.rl-ticket-thread-item {
  padding: 0.85rem 0;
  border-bottom: 1px solid #e9ecef;
}

.rl-ticket-thread-item:first-child {
  padding-top: 0;
}

.rl-ticket-thread-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rl-ticket-thread-item--internal {
  border-left: 3px solid #ffc107;
  padding-left: 0.75rem;
}

.rl-ticket-thread-pesan {
  margin-left: 2.5rem;
}

.rl-ticket-thread-pesan--rich p:last-child,
.rl-ticket-thread-pesan--rich ul:last-child,
.rl-ticket-thread-pesan--rich ol:last-child {
  margin-bottom: 0;
}

.rl-ticket-thread-pesan--rich ul,
.rl-ticket-thread-pesan--rich ol {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.rl-ticket-page .note-editor.note-frame {
  border-color: #ced4da;
}

.rl-ticket-page .note-toolbar {
  background: #f8f9fa;
}

.dark-mode .rl-ticket-thread-item {
  border-bottom-color: #495057;
}

.dark-mode .rl-reply-chip {
  background: #343a40;
  border-color: #495057;
  color: #e9ecef;
}

.dark-mode .rl-reply-chip:hover {
  background: #495057;
}

.rl-ticket-access-title {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.rl-ticket-access-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.35rem;
  align-items: center;
}

.rl-ticket-access-label {
  color: #6c757d;
  font-size: 1rem;
}

.rl-ticket-access-value {
  font-weight: 600;
  word-break: break-all;
}

.rl-secret {
  font-family: monospace;
  font-weight: 700;
  color: #1c7ed6 !important;
  text-decoration: none !important;
  vertical-align: baseline;
}

.rl-secret:hover {
  text-decoration: underline !important;
}

.rl-star-rating {
  display: inline-flex;
  gap: 0.2rem;
  color: #fcc419;
  font-size: 1.5rem;
  line-height: 1;
}

.rl-star-rating--readonly {
  pointer-events: none;
}

.rl-star-btn {
  border: 0;
  background: transparent;
  padding: 0;
  color: #fcc419;
  cursor: pointer;
  line-height: 1;
}

.rl-star-btn:hover,
.rl-star-btn:focus {
  transform: scale(1.08);
  outline: none;
}

.dark-mode .rl-ticket-access-label {
  color: #adb5bd;
}

@media (max-width: 575.98px) {
  .faq-a {
    padding-left: 1.25rem;
  }

  .rl-ticket-access-row {
    grid-template-columns: 90px 1fr;
  }
}

/* Onboarding / Hypercare admin */
.rl-onboarding-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.rl-onboarding-card__badge {
  font-size: 0.875rem;
  padding: 0.35em 0.65em;
}

.rl-onboarding-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rl-onboarding-stat {
  background: #f8f9fa;
  border-radius: 0.5rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid #e9ecef;
}

.rl-onboarding-stat__label {
  display: block;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
  margin-bottom: 0.15rem;
}

.rl-onboarding-stat__value {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #212529;
  word-break: break-word;
}

.rl-onboarding-action {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.85rem;
}

.rl-onboarding-action__label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
  margin-bottom: 0.25rem;
  display: block;
}

.rl-onboarding-action__row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(100px, 140px);
  gap: 0.5rem;
  align-items: end;
}

.rl-onboarding-action__field--note textarea {
  min-height: 72px;
  resize: vertical;
}

.rl-onboarding-action__field--note .note-editor {
  border-radius: 0.25rem;
}

.rl-onboarding-action__field--note .note-editor .note-editing-area,
.rl-onboarding-action__field--note .note-editor .note-editable {
  min-height: 120px;
}

.rl-onboarding-timeline-body--rich p:last-child,
.rl-onboarding-timeline-body--rich ul:last-child,
.rl-onboarding-timeline-body--rich ol:last-child {
  margin-bottom: 0;
}

.rl-onboarding-timeline-body--rich ul,
.rl-onboarding-timeline-body--rich ol {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}

.rl-onboarding-checklist__item .custom-control-label {
  line-height: 1.4;
}

.rl-onboarding-checklist__meta {
  font-size: 0.78rem;
}

.rl-onboarding-checklist__optional {
  opacity: 0.95;
}

.rl-onboarding-checklist__bar {
  border-radius: 4px;
  background: #e9ecef;
}

.dark-mode .rl-onboarding-checklist__bar {
  background: #3a3f44;
}

.rl-onboarding-assign .custom-select {
  max-width: 280px;
}

.rl-onboarding-claim .btn-block.btn-sm-sm-auto {
  min-width: 160px;
}

@media (max-width: 767.98px) {
  .rl-onboarding-action__row {
    grid-template-columns: 1fr;
  }

  .rl-onboarding-action__assign .custom-select {
    max-width: none;
  }

  .rl-onboarding-claim .btn-block.btn-sm-sm-auto {
    width: 100%;
  }
}

@media (min-width: 576px) {
  .btn-sm-sm-auto {
    width: auto;
  }
}

.rl-onboarding-timeline-wrap .timeline {
  margin-bottom: 0;
}

.dark-mode .rl-onboarding-stat,
.dark-mode .rl-onboarding-action {
  background: #2b3035;
  border-color: #495057;
}

.dark-mode .rl-onboarding-stat__value {
  color: #f8f9fa;
}

.rl-onboarding-guide {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
}

.rl-onboarding-guide__toggle {
  color: #212529;
  text-decoration: none !important;
}

.rl-onboarding-guide__toggle:hover {
  color: #007bff;
}

.rl-onboarding-guide__toggle.collapsed .rl-onboarding-guide__chevron {
  transform: rotate(-90deg);
}

.rl-onboarding-guide__chevron {
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.rl-onboarding-guide__body ul,
.rl-onboarding-guide__body ol {
  margin-bottom: 0;
}

.dark-mode .rl-onboarding-guide {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .rl-onboarding-guide__toggle {
  color: #f8f9fa;
}

.dark-mode .rl-onboarding-guide__body .text-dark {
  color: #f8f9fa !important;
}

/* Halaman Tupoksi Teknisi */
.rl-tupoksi-intro {
  border-radius: 0.5rem;
}

.rl-tupoksi-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #007bff;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  vertical-align: middle;
}

.rl-tupoksi-list {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.rl-tupoksi-list li {
  margin-bottom: 1rem;
}

.rl-tupoksi-list li:last-child {
  margin-bottom: 0;
}

.rl-tupoksi-section--accent .card-header {
  border-bottom: 1px solid #e9ecef;
}

.rl-tupoksi-kpi td,
.rl-tupoksi-kpi th {
  vertical-align: top;
  font-size: 0.875rem;
}

.rl-tupoksi-kpi .smaller {
  font-size: 0.875rem;
}

.rl-tupoksi-quick-link {
  display: block;
  padding: 0.75rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none !important;
  transition: background 0.15s ease;
}

.rl-tupoksi-quick-link:hover {
  background: #f8f9fa;
  color: inherit;
}

.rl-tupoksi-quick-link--static {
  cursor: default;
}

.dark-mode .rl-tupoksi-intro {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #dee2e6;
}

.dark-mode .rl-tupoksi-quick-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Profil SDM */
.rl-sdm-profil-header {
  background: linear-gradient(135deg, #f8f9fc 0%, #eef2f7 100%);
  border: 1px solid #e3e8ef;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
}

.rl-sdm-section-card .rl-sdm-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.rl-sdm-section-card .rl-sdm-card-header .card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: auto;
}

.rl-sdm-profil-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #007bff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.rl-sdm-section-card {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
  background: #fff;
}

.rl-sdm-section-card .card-header {
  background: #fafbfc;
  border-bottom: 1px solid #e9ecef;
  padding: 0.75rem 1.25rem;
}

.rl-sdm-section-card .card-header h6 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #343a40;
}

.rl-sdm-section-card .card-body {
  padding: 1.25rem;
}

.rl-sdm-form-label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #868e96;
  margin-bottom: 0.35rem;
}

.rl-sdm-ktp-frame {
  background: #f8f9fa;
  border: 1px dashed #ced4da;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rl-sdm-ktp-frame img {
  max-height: 280px;
  max-width: 100%;
  width: auto;
  border-radius: 0.35rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.rl-sdm-berkas-upload {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1rem;
}

.rl-sdm-berkas-list {
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  overflow: hidden;
}

.rl-sdm-berkas-row {
  border-color: #f1f3f5 !important;
}

.rl-sdm-berkas-row:last-child {
  border-bottom: 0 !important;
}

.rl-sdm-berkas-icon {
  width: 1.75rem;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.rl-sdm-berkas-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #495057;
  line-height: 1.25;
}

.rl-sdm-berkas-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.rl-sdm-berkas-actions .btn-xs {
  padding: 0.15rem 0.45rem;
  line-height: 1.2;
}

.rl-sdm-berkas-preview-body {
  overflow: auto;
  text-align: center;
  max-height: calc(100vh - 8rem);
}

.rl-sdm-berkas-preview-img {
  max-width: 100%;
  height: auto;
  transform-origin: center center;
  transition: transform 0.15s ease;
  cursor: zoom-in;
}

.rl-sdm-summary-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.875rem;
}

.rl-sdm-summary-item:last-child {
  border-bottom: none;
}

.rl-sdm-summary-item .label {
  color: #868e96;
  flex-shrink: 0;
  margin-right: 0.75rem;
}

.rl-sdm-summary-item .value {
  text-align: right;
  max-width: 58%;
  word-break: break-word;
}

.rl-sdm-card-body-compact {
  padding: 0.75rem 1rem !important;
}

.rl-sdm-card-body-table {
  padding: 0 !important;
}

.rl-sdm-aside-stack .rl-sdm-section-card:last-child {
  margin-bottom: 0;
}

.rl-sdm-summary-grid > [class*="col-"] {
  margin-bottom: 1.25rem;
}

.rl-sdm-summary-grid .rl-sdm-section-card {
  margin-bottom: 0;
}

.rl-sdm-ktp-upload {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 1rem;
}

.dark-mode .rl-sdm-profil-header {
  background: linear-gradient(135deg, #2b3035 0%, #343a40 100%);
  border-color: #495057;
}

.dark-mode .rl-sdm-profil-header .badge-light {
  background: #495057;
  color: #e9ecef;
  border-color: #6c757d !important;
}

.dark-mode .rl-sdm-section-card {
  background: #343a40;
  border-color: #495057;
}

.dark-mode .rl-sdm-section-card .card-header {
  background: #3d444b;
  border-color: #495057;
}

.dark-mode .rl-sdm-section-card .card-header h6,
.dark-mode .rl-sdm-section-card .card-header .card-title {
  color: #e9ecef;
}

.dark-mode .rl-sdm-summary-item {
  border-color: #495057;
}

.dark-mode .rl-sdm-summary-item .label {
  color: #adb5bd;
}

.dark-mode .rl-sdm-summary-item .value {
  color: #dee2e6;
}

.dark-mode .rl-sdm-ktp-frame {
  background: #2b3035;
  border-color: #495057;
}

.dark-mode .rl-sdm-berkas-upload,
.dark-mode .rl-sdm-berkas-list {
  background: #2b3035;
  border-color: #495057;
}

.dark-mode .rl-sdm-berkas-row {
  background: #2b3035;
  border-color: #3d444b !important;
}

.dark-mode .rl-sdm-berkas-label {
  color: #dee2e6;
}

.dark-mode .rl-sdm-ktp-upload {
  background: #2b3035;
  border-color: #495057;
}

.dark-mode .rl-sdm-form-label {
  color: #adb5bd;
}

/* Pengajuan Izin */
.rl-sdm-izin-form-grid > [class*="col-"] {
  margin-bottom: 1.25rem;
}

.rl-sdm-izin-card {
  border-radius: 0.5rem;
}

.rl-sdm-izin-card .card-body {
  padding: 1.25rem;
}

.rl-sdm-izin-saldo-badge {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 0.15rem;
}

.rl-sdm-izin-saldo-hint {
  font-size: 0.875rem;
  min-height: 1.25rem;
  margin-top: 0.5rem;
}

.rl-sdm-izin-saldo-hint:empty {
  display: none !important;
}

.rl-sdm-izin-history-body {
  padding: 1rem 1.25rem 1.25rem !important;
}

.rl-sdm-modal-table-body {
  padding: 1rem 1.25rem 1.25rem !important;
}

.rl-sdm-modal-table-body .table-responsive {
  margin: 0;
}

.rl-sdm-modal-table-body .elegant-table thead th,
.rl-sdm-modal-table-body .table thead th {
  padding: 0.65rem 0.85rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.rl-sdm-modal-table-body .elegant-table tbody td,
.rl-sdm-modal-table-body .table tbody td {
  padding: 0.55rem 0.85rem;
  font-size: 0.875rem;
  vertical-align: middle;
}

.rl-sdm-modal-toolbar {
  gap: 0.5rem;
}

.rl-sdm-modal-toolbar .form-control-sm {
  min-height: calc(1.8125rem + 2px);
}

.rl-sdm-izin-history .dataTables_wrapper .dataTables_info,
.rl-sdm-izin-history .dataTables_wrapper .dataTables_paginate {
  font-size: 0.875rem;
}

.dark-mode .rl-sdm-izin-saldo-badge {
  background: #495057;
  color: #e9ecef;
  border-color: #6c757d !important;
}

.dark-mode .rl-sdm-izin-history-body {
  background: #343a40;
}

.dark-mode .rl-sdm-modal-table-body {
  background: #343a40;
}

/* Navbar feed — tiket & onboarding */
.rl-navbar-feed-list {
  max-height: 320px;
  overflow-y: auto;
}

.rl-navbar-feed-item {
  white-space: normal;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

.rl-navbar-feed-item .dropdown-item-title {
  font-size: 0.9375rem;
  font-weight: 600;
}

.rl-navbar-feed-item .fs-7 {
  font-size: 0.8125rem;
}

.rl-navbar-feed-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
  font-size: 1rem;
}

.rl-navbar-feed-icon--onboarding {
  background: rgba(255, 193, 7, 0.18);
  color: #d39e00;
}

.main-header .navbar-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2em 0.45em;
  right: 0.15rem;
  top: 0.35rem;
}