/* ============================================================
   BConnect CRM – Custom CSS  v4.0
   Tự động load bởi Perfex sau style.css.
   ============================================================ */

/* ============================================================
   BCONNECT SHARED COMPONENTS
   This is the single global ownership layer for shared admin UI
   fixes. Module/theme files should not duplicate these rules.
   ============================================================ */

:root {
  --bc-checkbox-size: 16px;
  --bc-checkbox-color: #337ab7;
  --bc-switch-width: 50px;
  --bc-switch-height: 22px;
  --bc-switch-knob: 18px;
  --bc-switch-off: #d9dee7;
  --bc-switch-on: #3b82f6;
  --bc-switch-knob-bg: #ffffff;
  --bc-lfs-switch-width: 40px;
  --bc-lfs-switch-knob: 16px;
  --bc-lfs-switch-on: #27ae60;
}

/* 1. Global: custom checkbox rendering.
   Do not touch switch inputs: their real checkbox must stay hidden. */
input[type="checkbox"]:not(.onoffswitch-checkbox):not(.lfs-active-toggle) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: inline-block !important;
  width: var(--bc-checkbox-size) !important;
  height: var(--bc-checkbox-size) !important;
  min-width: var(--bc-checkbox-size) !important;
  border: 2px solid #adb5bd !important;
  border-radius: 3px !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: auto !important;
}

/* Checked state – SVG checkmark via background-image */
input[type="checkbox"]:not(.onoffswitch-checkbox):not(.lfs-active-toggle):checked {
  background-color: var(--bc-checkbox-color) !important;
  border-color: var(--bc-checkbox-color) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%208%208%22%3E%3Cpath%20fill%3D%22white%22%20d%3D%22M6.564.75l-3.59%203.612-1.538-1.55L0%204.26l2.974%202.99L8%202.193z%22/%3E%3C/svg%3E") !important;
  background-size: 10px 10px !important;
}

/* Indeterminate – SVG dash via background-image */
input[type="checkbox"]:not(.onoffswitch-checkbox):not(.lfs-active-toggle):indeterminate {
  background-color: var(--bc-checkbox-color) !important;
  border-color: var(--bc-checkbox-color) !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2014%203%22%3E%3Crect%20fill%3D%22white%22%20x%3D%222%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%223%22%20rx%3D%221.5%22/%3E%3C/svg%3E") !important;
  background-size: 10px 3px !important;
}

/* 2. Wrapper trong table: flex container, căn giữa input */
td .checkbox,
th .checkbox,
td .mass_select_all_wrap,
th .mass_select_all_wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-height: unset !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. Label trong table: ẩn */
td .checkbox label,
th .checkbox label,
td .mass_select_all_wrap label,
th .mass_select_all_wrap label {
  display: none !important;
}

td .checkbox label::before, td .checkbox label::after,
th .checkbox label::before, th .checkbox label::after,
td .mass_select_all_wrap label::before, td .mass_select_all_wrap label::after,
th .mass_select_all_wrap label::before, th .mass_select_all_wrap label::after {
  display: none !important;
}

/* 4. Input trong table: reset Bootstrap's position:absolute;margin-left:-20px */
td .checkbox input[type="checkbox"],
th .checkbox input[type="checkbox"],
td .mass_select_all_wrap input[type="checkbox"],
th .mass_select_all_wrap input[type="checkbox"] {
  position: relative !important;
  margin: 0 !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 16px !important;
  height: 16px !important;
}

/* 5. Perfex on/off switches: hide the real checkbox, keep only switch label.
   This must come after the global checkbox rendering above. */
.onoffswitch input[type="checkbox"].onoffswitch-checkbox,
input[type="checkbox"].onoffswitch-checkbox {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.onoffswitch {
  position: relative !important;
  width: var(--bc-switch-width) !important;
  min-width: var(--bc-switch-width) !important;
  max-width: var(--bc-switch-width) !important;
  height: var(--bc-switch-height) !important;
  min-height: var(--bc-switch-height) !important;
  max-height: var(--bc-switch-height) !important;
  display: inline-block !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.onoffswitch .onoffswitch-label {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  width: var(--bc-switch-width) !important;
  min-width: var(--bc-switch-width) !important;
  max-width: var(--bc-switch-width) !important;
  height: var(--bc-switch-height) !important;
  min-height: var(--bc-switch-height) !important;
  max-height: var(--bc-switch-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  border: 1px solid var(--bc-switch-off) !important;
  border-radius: 999px !important;
  background: var(--bc-switch-off) !important;
  background-image: none !important;
  line-height: var(--bc-switch-height) !important;
  box-sizing: border-box !important;
  text-indent: 0 !important;
}

.onoffswitch .onoffswitch-label::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 1px !important;
  right: 28px !important;
  bottom: auto !important;
  left: auto !important;
  width: var(--bc-switch-knob) !important;
  height: var(--bc-switch-knob) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--bc-switch-off) !important;
  border-radius: 50% !important;
  background: var(--bc-switch-knob-bg) !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: right 0.18s ease, border-color 0.18s ease !important;
}

.onoffswitch .onoffswitch-label::after {
  display: none !important;
  content: none !important;
}

.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label {
  background: var(--bc-switch-on) !important;
  border-color: var(--bc-switch-on) !important;
}

.onoffswitch .onoffswitch-checkbox:checked + .onoffswitch-label::before {
  right: 1px !important;
  border-color: var(--bc-switch-on) !important;
}