.centered_container {
  position: relative;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* Google Map Autocomplete input */
gmp-place-autocomplete::part(input) {
  color: black;
}

/* ── Form Elements ── */
.underline_input {
  padding-bottom: 3px;
  border: 0;
  outline: 0;
  font-size: 17px;
  background: transparent;
  border-bottom: 1px solid var(--color-accent);
}

.error_input {
  padding-bottom: 3px;
  border: 0;
  outline: 0;
  font-size: 17px;
  background: transparent;
  background-color: rgba(255, 0, 0, 0.096);
  border-bottom: 2px solid red;
}

.error_label { color: red; }

.error_profile {
  background: transparent;
  background-color: rgba(255, 0, 0, 0.096);
}

.gray_select {
  padding-left: 4px;
  font-size: 15px;
  background-color: rgb(250, 250, 255);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  height: 32px;
}

.bootstrap_like_border {
  padding-left: 4px;
  font-size: 15px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  height: 38px;
}

.alert_select {
  padding-left: 4px;
  font-size: 15px;
  background-color: rgb(249, 168, 168);
  border: 1px solid rgb(249, 10, 10);
  height: 30px;
}

.alert_style {
  background-color: rgb(249, 168, 168);
  border: 1px solid rgb(249, 10, 10);
}

.gray_rounded_select {
  padding-left: 10px;
  font-size: 15px;
  background-color: rgb(250, 250, 255);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  height: 38px;
}

.gray_textarea {
  padding-left: 4px;
  font-size: 15px;
  border: 0px solid var(--border-default);
  height: 30px;
}

.inputDate { text-align: center; }

.silentInput {
  background-color: rgba(0, 0, 0, 0.000);
  border: 1px solid rgba(0, 0, 0, 0.000);
}

.href_button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

.clear_button {
  background-color: transparent;
  border: 0px;
}

.pac-container { z-index: 10000 !important; }

/* ── Datepicker ── */
.datepicker {
  width: 280px;
  height: 270px;
  box-shadow: var(--shadow-elevated);
}

.table-condensed {
  width: 265px;
  height: 260px;
}

.table-wrapper {
  overflow-y: auto;
  height: 150px;
}

/* ── Scrollable Table ── */
.scrollable-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-card);
}

.scrollable-table thead { z-index: 9; }

.scrollable-table {
  width: 100%;
  position: relative;
}

.display-none { display: none; }

/* ── Bootstrap-table toolbar overrides ── */
.fixed-table-toolbar .search,
.fixed-table-toolbar .search .form-control {
  display: none !important;
}
.fixed-table-toolbar .columns {
  display: none !important;
}

/* ── Prevent bootstrap-table fixed-columns header clone duplicate ── */
.fixed-columns .fixed-table-header,
.fixed-columns-right .fixed-table-header {
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.select-align-left {
  text-align: left;
  text-align-last: left;
}

/* ── spinner ── */
#loadingOverlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  position: relative;
  width: 64px;
  height: 64px;
  transform-origin: center;
}

.spinner-container {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: spinner-rotate 1.2s linear infinite;
}

.container1 { transform: rotate(0deg); }
.container2 { transform: rotate(30deg);  animation-delay: -0.2s; }
.container3 { transform: rotate(60deg);  animation-delay: -0.4s; }

.spinner .circle1,
.spinner .circle2,
.spinner .circle3,
.spinner .circle4 {
  position: absolute;
  width: 14%;
  height: 14%;
  background: #fff;
  border-radius: 50%;
  animation: spinner-bounce 1.2s infinite ease-in-out both;
}

.spinner .circle1 { top: 0;    left: 50%; transform: translate(-50%, 0); }
.spinner .circle2 { top: 50%;  right: 0;  transform: translate(0, -50%); }
.spinner .circle3 { bottom: 0; left: 50%; transform: translate(-50%, 0); }
.spinner .circle4 { top: 50%;  left: 0;   transform: translate(0, -50%); }

.container1 .circle1 { animation-delay: -1.1s; }
.container1 .circle2 { animation-delay: -1.0s; }
.container1 .circle3 { animation-delay: -0.9s; }
.container1 .circle4 { animation-delay: -0.8s; }
.container2 .circle1 { animation-delay: -0.7s; }
.container2 .circle2 { animation-delay: -0.6s; }
.container2 .circle3 { animation-delay: -0.5s; }
.container2 .circle4 { animation-delay: -0.4s; }
.container3 .circle1 { animation-delay: -0.3s; }
.container3 .circle2 { animation-delay: -0.2s; }
.container3 .circle3 { animation-delay: -0.1s; }
.container3 .circle4 { animation-delay: 0.0s;  }

@keyframes spinner-rotate {
  0%   { transform: rotate(var(--start, 0deg)); }
  100% { transform: rotate(calc(var(--start, 0deg) + 360deg)); }
}

@keyframes spinner-bounce {
  0%, 80%, 100% { opacity: .2; }
  40%           { opacity: 1; }
}

/* ── Small buttons ── */
.btn-xs {
  transform: scale(0.9);
  padding: 0.15rem 0.35rem !important;
  font-size: 0.75rem !important;
}

/* ── LED indicators ── */
.led-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  margin: 0 2px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5), inset 0 0 3px rgba(0, 0, 0, 0.6);
}

.led-dot::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 3px;
  width: 40%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0));
  opacity: 0.85;
}

.led-red {
  background: radial-gradient(circle at 30% 30%, #ffd6d6, #ff4d4d 40%, #cc0000 80%);
  box-shadow: 0 0 6px rgba(255, 60, 60, 0.9), 0 0 10px rgba(255, 30, 30, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.6);
}

.led-yellow {
  background: radial-gradient(circle at 30% 30%, #fff5c0, #ffff4d 40%, #ccbe00 80%);
  box-shadow: 0 0 6px rgba(255, 220, 60, 0.9), 0 0 10px rgba(255, 200, 0, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.6);
}

.led-green {
  background: radial-gradient(circle at 30% 30%, #ccffd9, #33ff77 40%, #009933 80%);
  box-shadow: 0 0 6px rgba(60, 255, 120, 0.9), 0 0 10px rgba(0, 255, 100, 0.6), inset 0 0 4px rgba(0, 0, 0, 0.6);
}

/* ── belong-table-wrap: bootstrap-table fixedColumns compatible container ── */
/* 外层只负责视觉，不负责横向滚动 */
.belong-table-wrap {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E5EAF2;
    border-radius: 16px;
    overflow: visible;
}

/* bootstrap-table 容器 */
.belong-table-wrap .bootstrap-table {
    width: 100%;
}

/* 不要把 fixed-table-container 的 overflow 改成 hidden */
.belong-table-wrap .fixed-table-container {
    border: none;
    border-radius: 16px;
    background: #FFFFFF;
    overflow: visible;
}

/* 横向滚动交给 bootstrap-table 自己 */
.belong-table-wrap .fixed-table-body {
    overflow-x: auto !important;
}

/* 主表格和固定列表格必须统一布局 */
.belong-table-wrap .bootstrap-table .table,
.belong-table-wrap .fixed-columns table,
.belong-table-wrap .fixed-columns-right table {
    margin-bottom: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
}

/* 统一 th / td 高度，避免 fixedColumns 克隆表错位 */
.belong-table-wrap .bootstrap-table .table > thead > tr > th,
.belong-table-wrap .bootstrap-table .table > tbody > tr > td,
.belong-table-wrap .fixed-columns table > thead > tr > th,
.belong-table-wrap .fixed-columns table > tbody > tr > td,
.belong-table-wrap .fixed-columns-right table > thead > tr > th,
.belong-table-wrap .fixed-columns-right table > tbody > tr > td {
    height: 36px !important;
    min-height: 36px !important;
    padding: 4px 14px !important;
    line-height: 28px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    white-space: nowrap;
    border-color: #EEF1F6 !important;
    font-size: 12px;
}

/* 表头 */
.belong-table-wrap .bootstrap-table .table > thead > tr > th,
.belong-table-wrap .fixed-columns table > thead > tr > th,
.belong-table-wrap .fixed-columns-right table > thead > tr > th {
    background: #F8FAFD !important;
    color: #334155;
    font-weight: 600;
}

/* 固定列背景必须盖住下面滚动内容 */
.belong-table-wrap .fixed-columns,
.belong-table-wrap .fixed-columns-right {
    background: #FFFFFF;
    z-index: 5;
}

.belong-table-wrap .fixed-columns table,
.belong-table-wrap .fixed-columns-right table {
    background: #FFFFFF;
}

.belong-table-wrap .fixed-columns td,
.belong-table-wrap .fixed-columns th,
.belong-table-wrap .fixed-columns-right td,
.belong-table-wrap .fixed-columns-right th {
    background: #FFFFFF !important;
}

/* hover 时主表格和固定列表格视觉一致 */
.belong-table-wrap .bootstrap-table .table-hover > tbody > tr:hover > *,
.belong-table-wrap .fixed-columns table > tbody > tr:hover > * {
    background-color: #F1F5F9 !important;
}

/* select/input 高度不能撑爆 td */
.belong-table-wrap .bootstrap-table .table select,
.belong-table-wrap .bootstrap-table .table input[type="text"],
.belong-table-wrap .bootstrap-table .table input[type="date"],
.belong-table-wrap .bootstrap-table .table input[type="time"],
.belong-table-wrap .fixed-columns table select,
.belong-table-wrap .fixed-columns table input[type="text"],
.belong-table-wrap .fixed-columns table input[type="date"],
.belong-table-wrap .fixed-columns table input[type="time"] {
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 24px 0 10px !important;
    border: 1px solid #DDE3EE !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    max-width: 100%;
}

/* Approve 小按钮也不能撑高行 */
.belong-table-wrap .bootstrap-table .table .btn-sm,
.belong-table-wrap .fixed-columns table .btn-sm {
    height: 28px !important;
    line-height: 18px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}

/* 横向滚动条只美化，不改布局 */
.belong-table-wrap .fixed-table-body::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.belong-table-wrap .fixed-table-body::-webkit-scrollbar-track {
    background: #F1F5F9;
    border-radius: 999px;
}

.belong-table-wrap .fixed-table-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}

.belong-table-wrap .fixed-table-body::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* 分页区域不要被表格 body 吞进去 */
.belong-table-wrap .fixed-table-pagination {
    padding: 12px 4px 0;
    margin: 0;
}

/* 禁止把 tr/td 改成 flex */
.belong-table-wrap table tr {
    display: table-row !important;
}

.belong-table-wrap table th,
.belong-table-wrap table td {
    display: table-cell !important;
}