/* ==========================================================================
   theme-light-ui.css
   主题层(白天) - 全局底图、表单、车牌键盘、弹窗、通知、岗亭、顶部导航、表格、分页
   合并自: theme-light-base.css + theme-light-header.css
   ========================================================================== */

/* ============================================================================
   3. 白天模式：全局
   ============================================================================ */
html[data-theme='light'] body {
  background-color: var(--t-page-bg-color) !important;
  /* 兼容性兜底：不支持 filter 时直接用浅色渐变作为页面底，不显示背景图 */
  background-image: linear-gradient(
    160deg,
    #f7faff 0%,
    #eef4fd 45%,
    #e3ecfa 100%
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  color: var(--t-page-text);
}
/* 白天模式：背景图默认不渲染（兼容性兜底）。
   只有在支持 filter 的浏览器中，才用固定定位的伪元素承载背景图并反色；
   这样不支持 filter 的环境会回落到上面的浅色渐变底。 */
html[data-theme='light'] body::before {
  content: none;
}
/*
 * 说明：filter 不能直接作用于 body（会连带反色全部页面内容），
 * 因此用 body::before 作为独立的背景图层。
 */
@supports (filter: invert(1)) {
  html[data-theme='light'] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: var(--t-page-bg-image) no-repeat center;
    background-size: 100% 100%;
    filter: var(--t-page-bg-filter);
  }
}
/* 夜间模式下固定使用原背景图 */
html[data-theme='dark'] body {
  background-color: var(--t-page-bg-color) !important;
  background-image: var(--t-page-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

html[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: var(--t-scrollbar-color);
}
html[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--t-scrollbar-color);
}
html[data-theme='light'] {
  scrollbar-width: thin;
  scrollbar-color: var(--t-scrollbar-color) var(--t-scroll-track);
}

/* ============================================================================
   4. 白天模式：common.css 覆盖
   ============================================================================ */

/* 表单控件 */
html[data-theme='light'] .form-control,
html[data-theme='light'] .form-control-detail {
  color: var(--t-text-1);
}
html[data-theme='light'] .form-control {
  background-color: var(--t-input-bg) !important;
  border: 1px solid var(--t-input-border);
}
html[data-theme='light'] .form-control::placeholder {
  color: var(--t-input-placeholder);
}
html[data-theme='light'] .form-control:focus {
  border: 1px solid var(--t-accent);
  box-shadow: inset 0 1px 1px rgba(22, 119, 255, 0.08),
    0 0 8px rgba(22, 119, 255, 0.25);
}
html[data-theme='light'] .has-success label,
html[data-theme='light'] .has-success .control-label,
html[data-theme='light'] .has-success .checkbox label,
html[data-theme='light'] .has-success .radio label,
html[data-theme='light'] label {
  color: var(--t-text-1);
}
html[data-theme='light'] .form-group .control-label,
html[data-theme='light'] .form-group .form-control-static {
  color: var(--t-text-1);
}
html[data-theme='light'] .caret {
  border-top-color: var(--t-accent);
}
html[data-theme='light'] .form-item-flex .input-group-btn .btn,
html[data-theme='light'] .form-item-flex .input-group-btn .btn:focus {
  background-color: transparent;
}

/* 车牌键盘 */
html[data-theme='light'] .plate-input-group {
  background-color: var(--t-panel-bg);
  border: 1px solid var(--t-panel-border);
}
html[data-theme='light'] .out_in_plate_box {
  color: var(--t-text-1);
}
html[data-theme='light'] .out_in_plate_box div {
  background: var(--t-block-bg);
  border: 1px solid var(--t-panel-border);
  color: var(--t-text-1);
}

/* 弹窗 */
html[data-theme='light'] .modal-dialog {
  background: var(--modal-bg-color);
  border-color: var(--modal-border-color);
}
html[data-theme='light'] .modal-dialog::before {
  background: var(--t-modal-grad);
  opacity: var(--t-modal-grad-opacity);
}
html[data-theme='light'] .modal-title,
html[data-theme='light'] .modal-message {
  color: var(--t-text-1);
}
html[data-theme='light'] .close::before,
html[data-theme='light'] .close::after {
  background: var(--t-close-color);
}

html[data-theme='light'] .modal-header::before {
  display: none;
}
html[data-theme='light'] .modal-footer .btn {
  color: var(--t-btn-color);
}
html[data-theme='light'] .btn.btn-info.cancel {
  background: var(--t-btn-cancel-bg);
  color: var(--t-text-2);
}
html[data-theme='light'] .btn.ok.btn-success,
html[data-theme='light'] .btn.btn-primary {
  background: var(--t-btn-primary-bg);
}

/* 通知（Mymodal.alert 右上角提示） */
html[data-theme='light'] .mymodal-notification {
  background: var(--modal-bg-color);
  border: 2px solid var(--modal-border-color);
}
html[data-theme='light'] .mymodal-notification::before {
  background: var(--t-modal-grad);
  opacity: var(--t-modal-grad-opacity);
}
html[data-theme='light'] .mymodal-notification__title::after {
  display: none;
}
html[data-theme='light'] .mymodal-notification__title,
html[data-theme='light'] .mymodal-notification__body {
  color: var(--t-text-1);
}
html[data-theme='light'] .mymodal-notification__close::before,
html[data-theme='light'] .mymodal-notification__close::after {
  background: var(--t-close-color);
}

/* 岗亭选择 */
html[data-theme='light'] .park-switch_right {
  background: var(--t-park-switch-bg);
}
html[data-theme='light'] .park-switch-item {
  color: var(--t-text-1);
  background: var(--t-park-switch-item);
}
html[data-theme='light'] .park-switch-item:hover,
html[data-theme='light'] .park-switch-item-choose {
  background-color: var(--t-park-switch-item-hover);
}
html[data-theme='light'] .park-switch-item-name {
  color: var(--t-text-1);
}
html[data-theme='light'] .box-item {
  color: var(--t-text-1);
}
html[data-theme='light'] .box-item::after {
  background: var(--t-checkbox-bg);
  border: 1px solid var(--t-checkbox-border);
}
html[data-theme='light'] .box-item-active {
  color: var(--t-accent);
}
html[data-theme='light'] .box-item-active::before {
  border: solid var(--t-accent);
  border-width: 0 2px 2px 0;
}

/* 自定义复选框 */
html[data-theme='light'] .custom-checkbox {
  color: var(--t-text-1);
}
html[data-theme='light'] .custom-checkbox::before {
  background: var(--t-checkbox-bg);
  border: 1px solid var(--t-checkbox-border);
}
html[data-theme='light'] .custom-checkbox[checked]::after {
  border: solid var(--t-accent);
  border-width: 0 2px 2px 0;
}

/* 二维码底图 */
html[data-theme='light'] .qrcode-wrapper-bg {
  background: var(--t-qrcode-bg-image) no-repeat center center;
}

/* loading 遮罩 */
html[data-theme='light'] .need-loading.loading::before,
html[data-theme='light'] .btn.loading::before {
  background: var(--t-loading-bg);
}
html[data-theme='light'] .need-loading.loading::after,
html[data-theme='light'] .btn.loading::after {
  border: 2px solid rgba(22, 119, 255, 0.25);
  border-top-color: var(--t-accent);
}

/* ============================================================================
   5. 白天模式：main.css 覆盖
   ============================================================================ */

/* 顶部导航：白天模式不用图片，用 CSS 还原夜间的斜切外形 + 左下虚影 */
html[data-theme='light'] .header-nav-item {
  background-image: none;
  color: var(--t-nav-color);
}
/*
 * 背景层放在 ::after 上做 skew，避免文字跟着倾斜。
 * 夜间图片 btn-noselect-bg.png 为 151×42，铺在 148×37 的元素上是 1:1 显示（含左下外扩阴影）。
 * 逐行实测：主体形状 128.5×37、左边缘 4→22（倾斜 26.57°）、阴影相对主体偏移 (-6, +6)；
 * 换算到 148×37 的元素即 left 11.75px(7.94%)、width 128.5px(86.8%)、top -2.5px(-6.76%)、height 37px(100%)。
 * 图片中左侧与下方的留白正是外扩阴影，所以这里只画主体，阴影交给 drop-shadow 绘制。
 */
html[data-theme='light'] .header-nav-item::after {
  content: '';
  position: absolute;
  top: -2.76%;
  left: 7.94%;
  width: 86.8%;
  height: 100%;
  box-sizing: border-box;
  z-index: -1;
  pointer-events: none;
  background: var(--t-nav-image);
  /* 左右下描边（跟随斜切外形） */
  border-left: 1px solid var(--t-nav-border);
  border-right: 1px solid var(--t-nav-border);
  border-bottom: 1px solid var(--t-nav-border);
  transform: skewX(28deg);
  /* 左下外扩阴影：图片中主体向左下偏移约 6px */
  filter: drop-shadow(-4px 3px 0 rgba(22, 119, 255, 0.28));
}
html[data-theme='light'] .header-nav-item_active::after,
html[data-theme='light'] .header-nav-item:hover::after {
  background: var(--t-nav-image-active);
  border-color: var(--t-nav-border-active);
  filter: drop-shadow(-4px 3px 0 rgba(22, 119, 255, 0.4));
}
html[data-theme='light'] .header-nav-item::before {
  background-image: var(--t-nav-deco);
}

/*
 * 选中/滑入时的马赛克棋盘叠加层（对应夜间 btn-selected-bg.png 中下部自带的格子装饰）。
 * 单独用一个空元素承载，按钮自身的背景声明（::after）保持原样，互不影响；
 * 几何尺寸与 ::after 主体一致，因此格子与斜切外形对齐；夜间主题下 opacity 为 0，不产生任何观感。
 */
.header-nav-mosaic {
  position: absolute;
  top: -2.76%;
  left: 7.94%;
  width: 86.8%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 60% 46%;
  transform: skewX(28deg);
}
html[data-theme='light'] .header-nav-item_active .header-nav-mosaic,
html[data-theme='light'] .header-nav-item:hover .header-nav-mosaic {
  opacity: 1;
  background-image: var(--t-nav-mosaic);
}

/* 顶部渐变块 */
html[data-theme='light'] .header_switch {
  background: var(--t-header-grad);
  border: 1px solid var(--t-header-border);
  color: var(--t-header-text);
  text-shadow: var(--t-header-shadow);
}
html[data-theme='light'] .header_right_btn {
  border: 2px solid var(--t-header-border);
  border-image: var(--t-header-border-image);
  background: var(--t-header-grad);
  color: var(--t-header-text-2);
}

/* 头部下拉 */
html[data-theme='light'] .header-dropdown-trigger {
  color: var(--t-text-1);
}
html[data-theme='light'] .header-dropdown-trigger:hover {
  background: var(--t-hover-soft);
}
html[data-theme='light'] .header-dropdown-name {
  /* 账号名属于次要信息，但原 --t-text-muted(#6b7f99) 在浅蓝底上仅 3.3:1，压深一档 */
  color: var(--t-text-3);
}
html[data-theme='light'] .header-dropdown-arrow {
  border-top: 6px solid var(--t-text-muted);
}
html[data-theme='light'] .header-dropdown-menu {
  background: var(--t-dropdown-bg);
  border: 1px solid var(--t-dropdown-border);
  box-shadow: var(--t-dropdown-shadow);
}
html[data-theme='light'] .header-dropdown-item {
  color: var(--t-dropdown-item-color);
}
html[data-theme='light'] .header-dropdown-item:hover {
  background: var(--t-dropdown-item-hover-bg);
  color: var(--t-dropdown-item-hover-color);
}
html[data-theme='light'] .header-dropdown-item + .header-dropdown-item {
  border-top: 1px solid var(--t-dropdown-border);
}

/* 页面表格 */
html[data-theme='light'] .table_common table thead tr {
  color: var(--t-table-head-color);
  background: var(--t-table-head-bg);
}
html[data-theme='light'] .table_common table thead tr th {
  background: var(--t-table-head-bg);
}
html[data-theme='light'] .table_common table tbody tr {
  color: var(--t-table-row-color);
}
html[data-theme='light'] .table_common table tbody tr:nth-child(2n + 1) {
  background: transparent;
}
html[data-theme='light'] .table_common table tbody tr:nth-child(2n + 2) {
  background: var(--t-table-stripe-2);
}
html[data-theme='light'] .table_common table tbody tr:hover {
  background: var(--t-table-row-hover);
}

/* 查询表单 */
html[data-theme='light'] .table_common_form .form-group span,
html[data-theme='light'] .table_common_form .form-group select,
html[data-theme='light'] .table_common_form .form-group input {
  color: var(--t-text-2);
}
html[data-theme='light'] .table_common_form select,
html[data-theme='light'] .table_common_form input {
  background: var(--t-input-bg);
  border: 2px solid var(--t-input-border);
}
html[data-theme='light'] .table_common_form-search-btn {
  background-color: var(--t-btn-action-bg-color);
  background-image: var(--t-btn-action-image);
  color: var(--t-btn-action-color);
}
html[data-theme='light'] .table_common_form-search-btn:hover,
html[data-theme='light'] .table_common_form-search-btn:focus {
  color: var(--t-btn-action-color);
}

/* 分页 */
html[data-theme='light'] .table_common_page {
  color: var(--t-text-2);
}
html[data-theme='light'] .table_common_page select {
  background: var(--t-block-bg);
  border: 1px solid var(--t-input-border);
  color: var(--t-text-2);
}
html[data-theme='light'] .table_common_page_btn {
  background-color: var(--t-block-bg);
  border-color: var(--t-input-border);
  color: var(--t-text-2);
}

/* 弹窗表格 */
html[data-theme='light'] .table_modal table thead tr {
  background: var(--t-table-stripe-2);
  color: var(--t-table-head-color);
}
html[data-theme='light'] .table_modal table thead tr th {
  background: var(--t-table-head-bg);
  color: var(--t-table-head-color);
}
html[data-theme='light'] .table_modal table tbody tr {
  color: var(--t-table-row-color);
}
html[data-theme='light'] .table_modal table tbody tr:nth-child(2n + 1) {
  background: transparent;
}
html[data-theme='light'] .table_modal table tbody tr:nth-child(2n + 2) {
  background: var(--t-table-stripe-2);
}
html[data-theme='light'] .table_modal table tbody tr:hover {
  background: var(--t-table-row-hover) no-repeat;
}
html[data-theme='light'] .table-btn-default {
  color: var(--t-accent);
}

/* 表格 loading */
html[data-theme='light'] .table_loading_mask {
  background: var(--t-overlay-bg);
}
html[data-theme='light'] .table_loading {
  color: var(--t-text-2);
}
html[data-theme='light'] .table_loading_spinner {
  border: 3px solid rgba(22, 119, 255, 0.25);
  border-top-color: var(--t-accent);
}

/* ============================================================================
   6. 白天模式：index.css 覆盖
   ============================================================================ */

/* bootstrap 斑马纹表格 */
html[data-theme='light'] .table-striped > tbody > tr,
html[data-theme='light'] .table-striped > tbody > tr td {
  background-color: var(--t-table-striped-bg) !important;
}
html[data-theme='light'] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: transparent !important;
}
html[data-theme='light'] .table-striped > tbody > tr:hover {
  background-color: var(--t-table-striped-hover);
}
html[data-theme='light'] .pagination > .active > a,
html[data-theme='light'] .pagination > .active > a:focus,
html[data-theme='light'] .pagination > .active > a:hover,
html[data-theme='light'] .pagination > .active > span,
html[data-theme='light'] .pagination > .active > span:focus,
html[data-theme='light'] .pagination > .active > span:hover {
  color: #ffffff;
  background-color: var(--t-accent);
  border-color: var(--t-accent);
}

/* 标题装饰：白天模式不改背景图（沿用 index.css 的 title-bg*.png），只调文字颜色 */
html[data-theme='light'] .title_short,
html[data-theme='light'] .title_medium,
html[data-theme='light'] .title_long {
  color: var(--t-title-color);
}