/* Avoid inline styles for CSP */
.brand-opacity-80 {
  opacity: 0.8;
}

/* Utility helpers for dashboard CSP compliance */
.chart-height-180 {
  height: 180px;
}

.progress-width-80 {
  width: 80%;
}

.progress-width-75 {
  width: 75%;
}

.progress-width-60 {
  width: 60%;
}

.progress-width-50 {
  width: 50%;
}

.map-overflow-hide {
  overflow: hidden;
}

.map-height-325 {
  height: 325px;
}

/* Keep sidebar avatar perfectly round and cropped */
.sidebar .user-panel .image {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

/* Brand colors for topbar social/map icons */
.main-header .nav-link i {
  color: inherit;
}

.main-header .fa-whatsapp {
  color: #25d366 !important;
}

.main-header .fa-telegram {
  color: #229ed9 !important;
}

.main-header .fa-facebook {
  color: #1778f2 !important;
}

.main-header .fa-instagram {
  color: #e4405f !important;
}

.main-header .fa-envelope {
  color: #ffb347 !important;
}

.main-header .fa-map-marker-alt {
  color: #e74c3c !important;
}

.cs-note-fixed,
.cs-tz-note,
.cs-pref-note {
  font-size: 13px;
  line-height: 1.45;
  color: #6c757d;
  display: block;
  margin-bottom: 0;
}

.cs-pref-note,
.cs-note-fixed.cs-pref-note {
  margin-top: -12px;
}

.nav-sidebar .nav-link p {
  font-size: 0.95rem;
}

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

.main-header .nav-link:hover i {
  opacity: 1;
}

.main-header .nav-link i {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.main-header .fa-whatsapp,
.main-header .fa-telegram,
.main-header .fa-facebook,
.main-header .fa-instagram,
.main-header .fa-envelope,
.main-header .fa-map-marker-alt {
  background-color: #ffffff;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px currentColor;
}

.sidebar .user-panel .image img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Align avatar/name and give breathing room */
.sidebar .user-panel {
  align-items: center;
  gap: 22px;
}

.sidebar .user-panel .info {
  margin-left: 0;
  padding-left: 2px;
  display: flex;
  align-items: center;
}

/* Keep avatar size when sidebar is collapsed */
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image,
.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .image img {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
}

.perm-col {
  width: 70px;
}

.table-section {
  background-color: #1b2735;
  color: #d0d7e2;
}

.table-theme {
  background-color: transparent;
}

.table-theme thead th {
  font-weight: 600;
}

.dark-mode .table-responsive {
  border: 0 !important;
  box-shadow: none !important;
  border-top: 0 !important;
}

.dark-mode .card .table-responsive {
  border: 0 !important;
  box-shadow: none !important;
  border-top: 0 !important;
}

.dark-mode .card,
.dark-mode .card-header,
.dark-mode .card-body,
.dark-mode .card-footer {
  border: 0 !important;
  box-shadow: none !important;
}

.dark-mode .table-theme {
  color: #d0d7e2;
  border: none;
  border-color: transparent !important;
  border-collapse: collapse !important;
  border-spacing: 0;
}

.dark-mode .table-theme,
.dark-mode .table-theme thead,
.dark-mode .table-theme tbody,
.dark-mode .table-theme tr,
.dark-mode .table-theme th,
.dark-mode .table-theme td {
  border: 0 !important;
  box-shadow: none !important;
}

.dark-mode table.table-theme thead {
  border-bottom: 0 !important;
}

.dark-mode table.table-theme thead tr {
  border-bottom: 0 !important;
}

.dark-mode table.table-theme tbody {
  border-top: 0 !important;
}

.dark-mode table.table-theme>thead>tr>th,
.dark-mode table.table-theme>tbody>tr>th,
.dark-mode table.table-theme>tfoot>tr>th,
.dark-mode table.table-theme>thead>tr>td,
.dark-mode table.table-theme>tbody>tr>td,
.dark-mode table.table-theme>tfoot>tr>td {
  border: 0 !important;
  border-color: transparent !important;
}

.dark-mode .table-theme thead th {
  background-color: #076b7c;
  border-color: #2d3a4a;
  color: #e5ebf5;
  border-top: 0;
  border-bottom: 0 !important;
}

.dark-mode .table-theme tbody tr {
  background-color: #1b2735;
  border-color: transparent;
}

.dark-mode .table-theme tbody tr:hover {
  background-color: #223146;
}

/* Soften table borders in dark mode to avoid bright white lines */
.dark-mode .table-theme th,
.dark-mode .table-theme td {
  border: 0;
}

.dark-mode .table-theme thead th {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* focus tombol  */
/* .dark-mode .btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5) !important;
} */

.dark-mode .table-theme tbody tr:first-child td {
  border-top: 0;
}

.dark-mode .table-theme tbody tr:last-child td {
  border-bottom: 0;
}

/* Remove bootstrap default top borders inside table cells in dark mode */
.dark-mode .table-theme> :not(caption)>*>* {
  border-top: 0 !important;
  border-color: transparent !important;
}

/* Attendance tab: keep controls but remove bright borders in dark mode */
.dark-mode #tab-attendance .px-3.py-2.border-bottom.bg-light {
  border-bottom: 0 !important;
  background-color: transparent !important;
}

.dark-mode #tab-attendance .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light {
  border-top: 0 !important;
  background-color: transparent !important;
}

/* Toolbar widths: keep search and date fields consistent across tabs */
#emp-date,
#emp-search,
#att-search,
#att-date,
#overtime-search,
#overtime-date,
#bonus-user-search,
#bonus-user-date,
#bonus-sales-search,
#bonus-sales-date,
#tech-points-search,
#tech-points-date,
#cash-advance-search,
#cash-advance-date,
#leave-search,
#leave-date,
#payroll-search,
#payroll-date,
#history-search,
#history-date,
#settings-search,
#settings-date {
  min-width: 170px !important;
  width: 170px !important;
  flex: 0 0 170px !important;
}

/* Tab bar: improve readability on small screens */
.nav-tabs.scrollable-tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* prevent vertical scrollbar in tight headers */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  gap: 0.4rem;
}

/* Subtle horizontal scrollbar styling */
.nav-tabs.scrollable-tabs::-webkit-scrollbar {
  height: 6px;
  background: transparent;
}

.nav-tabs.scrollable-tabs::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 8px;
}

.nav-tabs.scrollable-tabs::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox */
.nav-tabs.scrollable-tabs {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.nav-tabs.scrollable-tabs .nav-item {
  flex-shrink: 0;
}

.nav-tabs.scrollable-tabs .nav-link {
  padding: 0.35rem 0.75rem;
  font-size: 0.95rem;
  border: none;
}

.nav-tabs.scrollable-tabs .nav-link.active {
  border: none;
}

/* Employee Directory tab: remove bright borders on toolbar/footer in dark mode */
.dark-mode #tab-emp .px-3.py-2.border-bottom.bg-light {
  border-bottom: 0 !important;
  background-color: transparent !important;
}

.dark-mode #tab-emp .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light {
  border-top: 0 !important;
  background-color: transparent !important;
}

/* Apply toolbar/footer border cleanup to all payroll tabs in dark mode */
.dark-mode #tab-tech-points .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-cash-advance .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-leave .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-payroll .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-history .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-settings .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-overtime .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-bonus-user .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-bonus-sales .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-emp .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-attendance .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-overtime .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-bonus-user .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-bonus-sales .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-tech-points .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-cash-advance .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-leave .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-payroll .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-history .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-settings .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-emp .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-attendance .card-body .px-3.py-2.border-bottom.bg-light,
.dark-mode #tab-tech-points .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-cash-advance .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-leave .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-payroll .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-history .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-settings .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-overtime .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-bonus-user .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-bonus-sales .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-emp .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-attendance .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-overtime .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-bonus-user .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-bonus-sales .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-tech-points .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-cash-advance .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-leave .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-payroll .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-history .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-settings .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-emp .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light,
.dark-mode #tab-attendance .card-body .d-flex.flex-wrap.align-items-center.justify-content-between.px-3.py-2.border-top.bg-light {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background-color: transparent !important;
}

/* Kill any leftover horizontal rules inside tables (e.g., AdminLTE/Bootstrap helpers) */
.dark-mode .table-theme hr,
.dark-mode .table-theme .hr,
.dark-mode .table-theme .border,
.dark-mode .table-theme .border-top,
.dark-mode .table-theme .border-bottom,
.dark-mode .table-theme .border-left,
.dark-mode .table-theme .border-right {
  border: 0 !important;
  border-color: transparent !important;
}

/* LIGHT MODE */
body:not(.dark-mode) .text-muted {
  color: #057bf0 !important;
  font-size: 14px;
}

.text-dark {
  color: #d7dee5 !important;
}

/* DARK MODE */
.dark-mode .text-muted {
  color: #057bf0 !important;
  font-size: 14px;
}

.nav-pills .nav-link.active {
  color: #fff;
}

/* Keep HR tab labels readable in dark mode */
.dark-mode .nav-pills .nav-link.active,
.dark-mode .nav-pills .show>.nav-link {
  color: #fff;
  background-color: #076b7c;
  border-color: #3f6791;
}

/* Nudge role select text upward without changing width */
#role-select.form-control-sm {
  font-family: initial !important;
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.35rem;
  line-height: 1.4;
  /* transform: translateY(-1px); */
}


.light-mode .table-theme {
  color: #212529;
}

.light-mode .table-theme thead th {
  background-color: #f8f9fa;
  border-color: #dee2e6;
  color: #1b1f23;
}

/* Narrow view modal width for employee detail */
.view-employee-modal {
  max-width: 570px;
  width: 100%;
}

.policy-badges {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  padding: 4px 0 2px;
}

.policy-badges .badge {
  margin: 0px 1px;
  flex: 0 0 auto;
  white-space: nowrap;
  background-color: #0e3c99;
  color: #111;
  border-color: #cbd0d6;
}

.policy-badges .badge.badge-success {
  background-color: #d50a0a;
  border-color: #3913cf;
  color: #fff;
}

.view-detail-dl dt {
  position: relative;
  padding-right: 12px;
}

.view-detail-dl dt::after {
  content: ':';
  position: absolute;
  right: 4px;
}


.view-photo {
  height: 210px;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.light-mode .table-theme tbody tr {
  background-color: #ffffff;
  border-color: #dee2e6;
}

.light-mode .table-theme tbody tr:hover {
  background-color: #f2f5f9;
}

/* HR & Payroll settings bar follows theme toggle */
.light-mode #hr-settings-form .form-control,
.light-mode #hr-settings-form .form-control:focus,
.light-mode #hr-settings-form .input-group-text {
  background-color: #ffffff !important;
  color: #1b1f23 !important;
  border-color: #ced4da !important;
}


.light-mode #hr-settings-form select option {
  color: #1b1f23;
}

.dark-mode #hr-settings-form .form-control,
.dark-mode #hr-settings-form .form-control:focus,
.dark-mode #hr-settings-form .input-group-text {
  background-color: #0f1a29;
  color: #e5ebf5;
  border-color: #2d3a4a;
}

.dark-mode .text-muted {
  color: #d6d9db !important;
  font-size: 16px;
}

body:not(.dark-mode) .text-muted {
  color: #121212 !important;
  font-size: 16px;
}

/* Keep date picker icon visible on dark backgrounds */
.dark-mode input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.2);
  opacity: 0.85;
}

.dark-mode input[type="date"]::-moz-focus-inner {
  border: 0;
}

/* Compact date filter in Employee Directory */
#emp-date.form-control-sm,
#att-date.form-control-sm {
  max-width: 150px;
  border-radius: 6px;
}

/* HR payroll action buttons stay visible on dark mode */
.dark-mode .btn-outline-secondary {
  color: #fff;
  background-color: #17a2b8;
  border-color: #949ca5;
}

.dark-mode .btn-outline-secondary:hover,
.dark-mode .btn-outline-secondary:focus,
.dark-mode .btn-outline-secondary:focus-visible,
.dark-mode .btn-outline-secondary:active,
.dark-mode .btn-outline-secondary:active:focus,
.dark-mode .btn-outline-secondary.dropdown-toggle:focus {
  color: #fff !important;
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.5) !important;
  outline: 0;
}

.dark-mode .btn-primary {
  color: #fff;
  background-color: #3f6791;
  border-color: #949ca5;
  box-shadow: none;
}

.dark-mode .btn-outline-light {
  color: #fff;
  background-color: #28a745;
  border-color: #949ca5;
}

/* Company profile logo preview */
.logo-preview-box {
  min-height: 140px;
  max-height: 180px;
  width: 100%;
  overflow: hidden;
  background-color: #f8f9fa;
}

.brand-color-input {
  max-width: 110px;
  padding-left: 6px;
  padding-right: 6px;
}

.logo-preview-img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  display: block;
}

/* Keep send/export buttons visible in light mode */
.light-mode .btn-outline-secondary {
  color: #17a2b8;
  border-color: #17a2b8;
  background-color: #fff;
}

.light-mode .btn-outline-secondary:hover,
.light-mode .btn-outline-secondary:focus {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.light-mode .btn-outline-light {
  color: #28a745;
  border-color: #28a745;
  background-color: #fff;
}

.light-mode .btn-outline-light:hover,
.light-mode .btn-outline-light:focus {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

/* Compact modal forms */
#addEmployeeModal .modal-body {
  font-size: 14px;
}

#addEmployeeModal label {
  font-weight: 600;
  font-size: 12px;
}

#addEmployeeModal .row>.col-md-6:first-child label {
  font-size: 15px;
}

#addEmployeeModal .row>.col-md-6:last-child label {
  font-size: 15px;
}

#addEmployeeModal .form-control,
#addEmployeeModal .form-control-sm,
#addEmployeeModal .custom-select,
#addEmployeeModal textarea {
  font-size: 15px;
  line-height: 1.35;
}

/* Dark mode: keep Add Employee inputs dark even on focus/autofill */
.dark-mode #addEmployeeModal .form-control,
.dark-mode #addEmployeeModal .form-control-sm,
.dark-mode #addEmployeeModal .custom-select,
.dark-mode #addEmployeeModal textarea {
  background-color: #1f2d3d !important;
  color: #fff !important;
  border-color: #4bacae !important;
}

.dark-mode #addEmployeeModal .form-control:focus,
.dark-mode #addEmployeeModal .form-control-sm:focus,
.dark-mode #addEmployeeModal .custom-select:focus,
.dark-mode #addEmployeeModal textarea:focus {
  background-color: #243449 !important;
  color: #fff !important;
  border-color: #4bacae !important;
  box-shadow: none !important;
}

/* Dark mode: keep inputs dark on focus globally */
.dark-mode .form-control:focus,
.dark-mode .custom-select:focus,
.dark-mode textarea:focus {
  background-color: #1f2d3d !important;
  color: #e5ebf5 !important;
  border-color: #4bacae !important;
  box-shadow: none !important;
}

/* Keep input-group children (e.g., WhatsApp code/number) dark in all states */
.dark-mode #addEmployeeModal .input-group .form-control,
.dark-mode #addEmployeeModal .input-group .form-control-sm,
.dark-mode #addEmployeeModal .input-group .custom-select,
.dark-mode #addEmployeeModal .input-group .custom-select-sm {
  background-color: #1f2d3d !important;
  color: #fff !important;
  border-color: #4bacae !important;
}

.dark-mode #addEmployeeModal .input-group .form-control:focus,
.dark-mode #addEmployeeModal .input-group .form-control-sm:focus,
.dark-mode #addEmployeeModal .input-group .custom-select:focus,
.dark-mode #addEmployeeModal .input-group .custom-select-sm:focus {
  background-color: #243449 !important;
  color: #fff !important;
  border-color: #4bacae !important;
  box-shadow: none !important;
}

/* Extra specificity for WhatsApp code/number to prevent white fill after typing */
.dark-mode #addEmployeeModal #whatsapp_code,
.dark-mode #addEmployeeModal #whatsapp_number {
  background-color: #1f2d3d !important;
  color: #fff !important;
  border-color: #4bacae !important;
  caret-color: #fff !important;
}

.dark-mode #addEmployeeModal #whatsapp_code:focus,
.dark-mode #addEmployeeModal #whatsapp_number:focus {
  background-color: #243449 !important;
  color: #fff !important;
  border-color: #4bacae !important;
  box-shadow: none !important;
}

.dark-mode #addEmployeeModal #whatsapp_number:-webkit-autofill,
.dark-mode #addEmployeeModal #whatsapp_number:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

/* Dark mode autofill: keep all Add Employee fields teal-bordered */
.dark-mode #addEmployeeModal input:-webkit-autofill,
.dark-mode #addEmployeeModal input:-webkit-autofill:focus,
.dark-mode #addEmployeeModal select:-webkit-autofill,
.dark-mode #addEmployeeModal textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  border-color: #4bacae !important;
}

.dark-mode #addEmployeeModal input:-moz-autofill,
.dark-mode #addEmployeeModal select:-moz-autofill,
.dark-mode #addEmployeeModal textarea:-moz-autofill {
  box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  -moz-text-fill-color: #fff !important;
  caret-color: #fff !important;
  border-color: #4bacae !important;
}

.dark-mode #addEmployeeModal input:-webkit-autofill,
.dark-mode #addEmployeeModal input:-webkit-autofill:focus,
.dark-mode #addEmployeeModal select:-webkit-autofill,
.dark-mode #addEmployeeModal textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  border-color: #4bacae !important;
}

.dark-mode #addEmployeeModal input:-moz-autofill,
.dark-mode #addEmployeeModal select:-moz-autofill,
.dark-mode #addEmployeeModal textarea:-moz-autofill {
  box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  -moz-text-fill-color: #fff !important;
  caret-color: #fff !important;
  border-color: #4bacae !important;
}

/* Table checkbox column */
.col-select {
  width: 32px;
}

#addEmployeeModal .photo-preview {
  position: relative;
  width: 100%;
  height: 150px;
  border: 1px dashed #6c9ef8;
  border-radius: 8px;
  background-color: #0f1a29;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#addEmployeeModal .photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#addEmployeeModal .photo-placeholder {
  color: #9aa8b8;
  font-size: 12px;
  text-align: center;
  padding: 0 8px;
}

#addEmployeeModal .photo-preview.has-image .photo-placeholder {
  display: none;
}

.light-mode #addEmployeeModal .photo-preview {
  background-color: #f7f9fc;
  border-color: #c5cfda;
}

.dark-mode #addEmployeeModal .photo-preview {
  background-color: #0f1a29;
  border-color: #344df7;
}

#addEmployeeModal .policy-gap {
  gap: 12px;
}

/* Keep Add Employee inputs light in light mode */
.light-mode #addEmployeeModal .form-control,
.light-mode #addEmployeeModal .form-control-sm,
.light-mode #addEmployeeModal .custom-select,
.light-mode #addEmployeeModal textarea {
  background-color: #f7f9fc !important;
  color: #1b1f23 !important;
  border-color: #071985 !important;
  caret-color: #1b1f23 !important;
}

/* Lift borders for Add Employee fields in dark mode */
.dark-mode #addEmployeeModal .form-control,
.dark-mode #addEmployeeModal .form-control-sm,
.dark-mode #addEmployeeModal .custom-select,
.dark-mode #addEmployeeModal textarea {
  border-color: #4bacae !important;
}

.dark-mode #addEmployeeModal .form-control:focus,
.dark-mode #addEmployeeModal .form-control-sm:focus,
.dark-mode #addEmployeeModal .custom-select:focus,
.dark-mode #addEmployeeModal textarea:focus {
  border-color: #4bacae !important;
}

.light-mode #addEmployeeModal .form-control:focus,
.light-mode #addEmployeeModal .form-control-sm:focus,
.light-mode #addEmployeeModal .custom-select:focus,
.light-mode #addEmployeeModal textarea:focus {
  background-color: #ffffff !important;
  color: #1b1f23 !important;
  border-color: #6c9ef8 !important;
  box-shadow: none !important;
}

.form-control:focus {
  color: #495057;
  background-color: #e7faf9;
  border-color: #096fdc;
  outline: 0;
  box-shadow: inset 0 0 0 transparent;
}

.light-mode #addEmployeeModal input:-webkit-autofill,
.light-mode #addEmployeeModal input:-webkit-autofill:focus,
.light-mode #addEmployeeModal select:-webkit-autofill,
.light-mode #addEmployeeModal textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f7f9fc inset !important;
  -webkit-text-fill-color: #1b1f23 !important;
  caret-color: #1b1f23 !important;
}

.light-mode #addEmployeeModal input:-moz-autofill,
.light-mode #addEmployeeModal select:-moz-autofill,
.light-mode #addEmployeeModal textarea:-moz-autofill {
  box-shadow: 0 0 0px 1000px #f7f9fc inset !important;
  -moz-text-fill-color: #1b1f23 !important;
  caret-color: #1b1f23 !important;
}

#addEmployeeModal .form-group {
  margin-bottom: 0.35rem;
}

/* Reduce Add Employee modal width by ~5cm from modal-xl default */
#addEmployeeModal .modal-dialog {
  max-width: calc(1140px - 5cm);
}

/* Prevent admin content rows from shifting off-screen, with stronger lift */
.content-wrapper .row.mt-n3 {
  margin-top: -1rem !important;
}

.content-wrapper section.content>.container-fluid {
  padding-top: 0.5rem;
}

/* HR payroll: compact top spacing */
#hr-payroll-page section.content {
  padding-top: 0;
}

#hr-payroll-page section.content>.container-fluid {
  padding-top: 0;
  margin-top: -8px;
}

.menu-list-container {
  max-height: 320px;
  overflow-y: auto;
}

.menu-indent-0 {
  padding-left: 0;
}

.menu-indent-1 {
  padding-left: 14px;
}

.menu-indent-2 {
  padding-left: 28px;
}

.menu-indent-3 {
  padding-left: 42px;
}

.menu-indent-4 {
  padding-left: 56px;
}

.menu-indent-5 {
  padding-left: 70px;
}

.menu-list-container .form-check {
  display: flex;
  align-items: center;
}

.menu-list-container .form-check-input {
  position: static;
  margin-left: 0;
  margin-right: 8px;
}

.menu-root .form-check-label {
  color: #76c5ff;
  font-weight: 600;
}

.permission-inline-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.permission-pill {
  display: inline-flex;
  align-items: center;
  background-color: #1f2d3d;
  border: 1px solid #3f5873;
  border-radius: 8px;
  padding: 4px 8px;
  color: #e5ebf5;
  line-height: 1.2;
}

.permission-pill input {
  position: static;
  margin: 0 6px 0 0;
}

.permission-inline-note {
  padding: 8px 10px;
  border: 1px solid #3f5873;
  border-radius: 10px;
  background-color: #0f1a29;
}

.perm-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.perm-chip-view {
  background: #17a2b8;
}

.perm-chip-add {
  background: #28a745;
}

.perm-chip-edit {
  background: #ffc107;
}

.perm-chip-delete {
  background: #dc3545;
}

.perm-chip-export {
  background: #6f42c1;
}

.perm-chip-absent {
  background: #20c997;
}

.perm-chip-print {
  background: #007bff;
}

.perm-chip-reboot {
  background: #e83e8c;
}

.perm-chip-factory_reset {
  background: #6c757d;
}

.disabled-pill {
  opacity: 0.7;
  cursor: default;
}

.permission-text {
  white-space: nowrap;
}

.permission-select-all {
  margin-left: auto;
}

.menu-perms-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  padding-left: 22px;
  margin-bottom: 6px;
  overflow-x: auto;
}

.menu-perm-pill {
  display: inline-flex;
  align-items: center;
  background-color: #182434;
  border: 1px solid #30415a;
  border-radius: 6px;
  padding: 2px 5px;
  color: #e5ebf5;
  line-height: 1.1;
  font-size: 12px;
}

.menu-perm-pill input {
  position: static;
  margin: 0 3px 0 0;
}

.menu-perm-text {
  font-weight: 600;
}

/* Size the modals: keep role defaults roomy, slim down Add User */
@media (min-width: 992px) {
  #userModal .modal-dialog {
    max-width: calc(680px - 4cm);
  }

  #roleDefaultsModal .modal-dialog {
    max-width: calc(600px + 2cm);
  }
}

#userModal .modal-body {
  max-height: calc(65vh + 1cm);
  overflow-y: auto;
}

/* Admin page dark form overrides, CSP-safe */
.card-placeholder {
  border: 1px dashed #ced4da;
}

/* Force dark inputs inside Add User modal (some browsers override with white) */
.dark-mode #userModal .form-control,
.dark-mode #userModal .form-control:focus,
.dark-mode #userModal input:-webkit-autofill,
.dark-mode #userModal input:-webkit-autofill:focus,
.dark-mode #userModal select.form-control,
.dark-mode #userModal textarea.form-control {
  background-color: #1f2d3d !important;
  color: #fff !important;
  border-color: #3f5873 !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px #1f2d3d inset;
  box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  background-image: none !important;
}

.dark-mode #userModal input:-moz-autofill,
.dark-mode #userModal select:-moz-autofill,
.dark-mode #userModal textarea:-moz-autofill {
  box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  -moz-text-fill-color: #fff !important;
  caret-color: #fff !important;
}

#roleDefaultsModal .form-control#role-modal-name {
  min-width: 0;
}

.role-modal-select {
  max-width: 220px;
}

.dark-mode .form-control:focus,
.dark-mode input.form-control:focus,
.dark-mode select.form-control:focus,
.dark-mode textarea.form-control:focus {
  background-color: #243449 !important;
  color: #fff !important;
  border-color: #6c9ef8 !important;
  box-shadow: none !important;
}

/* Dark mode: keep all inputs dark even when focused (global override) */
body.dark-mode input.form-control,
body.dark-mode select.form-control,
body.dark-mode textarea.form-control,
body.dark-mode .form-control,
body.dark-mode .custom-select,
body.dark-mode .form-control:focus,
body.dark-mode .custom-select:focus,
body.dark-mode textarea.form-control:focus,
body.dark-mode input.form-control:focus,
body.dark-mode select.form-control:focus {
  background-color: #1f2d3d !important;
  color: #e5ebf5 !important;
  border-color: #4bacae !important;
  box-shadow: none !important;
}

/* Dark mode: kill autofill light background globally */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill:hover,
body.dark-mode textarea:-webkit-autofill:focus,
body.dark-mode select:-webkit-autofill,
body.dark-mode select:-webkit-autofill:hover,
body.dark-mode select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  box-shadow: 0 0 0px 1000px #1f2d3d inset !important;
  -webkit-text-fill-color: #e5ebf5 !important;
  color: #e5ebf5 !important;
  caret-color: #e5ebf5 !important;
  border-color: #4bacae !important;
}

.form-control::placeholder {
  color: #9aa8b8;
}

.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover,
.dark-mode input:-webkit-autofill:focus,
.dark-mode textarea:-webkit-autofill,
.dark-mode textarea:-webkit-autofill:hover,
.dark-mode textarea:-webkit-autofill:focus,
.dark-mode select:-webkit-autofill,
.dark-mode select:-webkit-autofill:hover,
.dark-mode select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #1f2d3d inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  border-color: #3f5873;
}

/* warna logo icon pada Tab Menu API KEY  */
.dark-mode .text-purple {
  color: #0de1da !important;
}

.text-success {
  color: #09f83f !important;
}

.text-info {
  color: #0bd6f6 !important;
}

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

.text-warning {
  color: #f6e009 !important;
}

.text-danger {
  color: #ee2c3f !important;
}