/* ==================================================================
   MDUI / Material Design 3 皮肤层
   说明：本文件仅在 style.css 之后做「视觉映射」，不改变任何 DOM 结构、
        功能逻辑与模块位置。MDUI 组件（top-app-bar / dropdown-menu /
        snackbar）由框架接管，其余历史类名在此映射为 MD3 视觉。
   ================================================================== */

:root{
  /* 沿用 style.css 的语义变量，仅替换质感 */
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
  --shadow-2:0 4px 8px 3px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --border:#e4e8ee;
  --muted:#5d6675;
  --text:#1c1f26;
  --bg:#f4f6f9;
  /* MD3 常用色 */
  --md-on-surface:#1c1f26;
  --md-on-surface-variant:#5d6675;
  --md-outline:#c4cad4;
  --md-outline-soft:#e4e8ee;
  --md-surface-container:#f1f4f8;
  --md-state:rgba(28,31,38,.08);
}

body{
  background:var(--bg);
  color:var(--md-on-surface);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary)}
a:hover{color:var(--primary-dark)}

/* ============ 布局：MDUI 顶栏 ============ */
mdui-layout{display:block}
mdui-top-app-bar.site-top-bar{
  position:fixed !important;
  left:0;right:0;top:0;
  z-index:100;
  background:#fff;
  color:var(--md-on-surface);
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
mdui-layout-main.site-main{
  display:block;
  min-height:100vh;
  padding-top:64px !important;
}
.site-brand-title .brand{display:flex;align-items:center;gap:10px;color:var(--md-on-surface)}
.site-brand-title .brand:hover{color:var(--md-on-surface)}
.brand-name{font-size:19px;font-weight:600;letter-spacing:.3px;color:var(--md-on-surface)}
.brand-logo{
  border-radius:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  box-shadow:0 1px 3px rgba(16,24,40,.2);
}

/* 顶部导航：MD3 胶囊文字按钮 */
.main-nav{gap:2px;flex:0 0 auto}
.main-nav>a,.drop-trigger{
  height:40px;display:inline-flex;align-items:center;gap:7px;
  padding:0 16px;border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--md-on-surface-variant);
  background:transparent;border:0;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s;
}
.main-nav>a:hover,.drop-trigger:hover{
  background:var(--primary-light);
  color:var(--primary-dark);
}
.main-nav>a.active{
  background:var(--primary-light);
  color:var(--primary-dark);
}
.drop-trigger i.fa-caret-down{font-size:11px}
.nav-auth{
  height:40px;display:inline-flex;align-items:center;gap:7px;
  padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:500;
}
.nav-auth:hover{background:var(--md-state)}
.nav-reg{background:var(--primary);color:#fff !important}
.nav-reg:hover{background:var(--primary-dark)}

/* MDUI 下拉菜单项 */
.site-drop-menu{min-width:210px;border-radius:12px}
mdui-menu-item{display:block}
mdui-menu-item a,mdui-menu-item button{
  display:flex;align-items:center;gap:13px;width:100%;
  margin:0;padding:0 4px;height:44px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:14px;color:var(--md-on-surface);
}
mdui-menu-item a{padding:0 12px}
mdui-menu-item a i,mdui-menu-item button i{width:18px;text-align:center;color:var(--md-on-surface-variant);font-size:15px}
mdui-menu-item .menu-form{margin:0}
mdui-menu-item .menu-form button{padding:0 12px;font-family:inherit}
mdui-menu-item .menu-form button i{margin-left:0}

/* Snackbar 消息 */
mdui-snackbar.flash-snack{
  --mdui-snackbar-container-color:#2a2d34;
  --mdui-snackbar-label-text-color:#f3f5f8;
  --mdui-snackbar-label-text-size:13.5px;
  --mdui-snackbar-container-shape:12px;
}
mdui-snackbar.flash-snack i{margin-right:10px;font-size:15px}
mdui-snackbar.flash-ok i{color:#7bd88f}
mdui-snackbar.flash-error i{color:#f2a0a0}

/* ============ 按钮：MD3 filled / tonal / outlined ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 24px;border:0;border-radius:999px;
  background:var(--primary);color:#fff !important;
  font-size:14px;font-weight:500;letter-spacing:.2px;
  cursor:pointer;
  transition:box-shadow .15s,background .15s,filter .15s,transform .1s;
  box-shadow:0 1px 2px rgba(16,24,40,.18);
}
.btn:hover{background:var(--primary-dark);box-shadow:var(--shadow-2)}
.btn:active{transform:scale(.98)}
.btn i{font-size:14px}
.btn.secondary{
  background:var(--md-surface-container);
  color:var(--md-on-surface) !important;
  box-shadow:none;
}
.btn.secondary:hover{background:#e7ebf0;color:var(--md-on-surface) !important}
.btn.danger{background:var(--danger);box-shadow:0 1px 2px rgba(180,30,30,.25)}
.btn.danger:hover{background:#b91c1c}

.btn-mini{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  height:34px;padding:0 14px;border-radius:999px;
  border:1px solid var(--md-outline);background:#fff;
  color:var(--md-on-surface-variant);
  font-size:12.5px;font-weight:500;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.btn-mini:hover{background:var(--md-surface-container);color:var(--md-on-surface)}
.btn-mini.btn-danger{color:var(--danger);border-color:#f1bcbc}
.btn-mini.btn-danger:hover{background:#fdecec;color:#b91c1c}
.btn-mini.secondary{background:var(--md-surface-container);border-color:transparent;color:var(--md-on-surface)}
.btn-mini.secondary:hover{background:#e7ebf0}

/* ============ 表单控件：MD3 outlined ============ */
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=url],input[type=date],input[type=datetime-local],input[type=search],
select,textarea{
  border:1.5px solid var(--md-outline) !important;
  border-radius:10px;background:#fff;
  padding:10px 14px;font-size:14px;color:var(--md-on-surface);
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary) !important;
  box-shadow:0 0 0 3px var(--primary-light) !important;
}
input::placeholder,textarea::placeholder{color:#9aa3b2}
select{appearance:auto;padding-right:30px;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}

.form-card{
  background:#fff;border-radius:24px;box-shadow:var(--shadow);
  padding:32px 36px;margin-top:30px;
}
.form-group label{font-size:13px;color:var(--md-on-surface-variant)}

/* MD3 开关（保持原生 checkbox 行为，仅换皮） */
.switch{
  display:flex;align-items:center;gap:13px;
  min-height:48px;margin:4px 0;padding:4px 0;
}
.switch input[type=checkbox]{
  -webkit-appearance:none;appearance:none;
  width:52px;height:32px;border-radius:999px;flex-shrink:0;
  background:#e4e8ee;border:2px solid #7b828f;
  position:relative;cursor:pointer;margin:0;
  transition:background .2s,border-color .2s;
}
.switch input[type=checkbox]::after{
  content:"";position:absolute;top:50%;left:6px;
  width:16px;height:16px;border-radius:50%;background:#7b828f;
  transform:translateY(-50%);
  transition:left .2s,width .2s,height .2s,background .2s;
}
.switch input[type=checkbox]:checked{
  background:var(--primary);border-color:var(--primary);
}
.switch input[type=checkbox]:checked::after{
  left:24px;width:24px;height:24px;background:#fff;
}
.switch>label{font-size:14px;font-weight:500;color:var(--md-on-surface);cursor:pointer;line-height:1.5}

/* ============ 卡片 ============ */
.card,.stat,.search-bar,.profile-head{
  background:#fff;
  border:1px solid var(--md-outline-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.article{
  background:#fff;border:1px solid var(--md-outline-soft);
  border-radius:20px;box-shadow:var(--shadow);
}
.card-title{
  font-size:16px;font-weight:600;
  padding-bottom:14px;margin-bottom:16px;
  border-bottom:1px solid var(--md-outline-soft);
}
details.fold{
  background:#fff;border:1px solid var(--md-outline-soft);
  border-radius:16px;box-shadow:var(--shadow);
}
details.fold summary{border-radius:16px;transition:background .15s}
details.fold summary:hover{background:var(--md-surface-container)}

/* ============ 数据表格：MD3 data table ============ */
table.data{
  border-radius:0;background:transparent;
}
table.data th,table.data td{
  padding:0 16px;height:48px;
  border-bottom:1px solid var(--md-outline-soft);
  font-size:13.5px;
}
table.data th{
  background:transparent;
  color:var(--md-on-surface-variant);
  font-size:12px;font-weight:600;letter-spacing:.4px;
}
table.data tbody tr{transition:background .12s}
table.data tbody tr:hover{background:color-mix(in srgb,var(--primary) 5%,#fff)}

/* ============ 徽章 / 标签 / chip ============ */
.badge{
  display:inline-flex;align-items:center;height:22px;padding:0 10px;
  border-radius:7px;background:var(--primary-light);
  color:var(--primary-dark);
  font-size:12px;font-weight:600;letter-spacing:.2px;
}
.code-tag{
  background:var(--md-surface-container);
  border-radius:6px;padding:3px 9px;
  font-size:12.5px;color:var(--md-on-surface);
}
.company-chip{
  border:1px solid var(--md-outline);
  border-radius:14px;background:#fff;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.company-chip:hover{
  border-color:var(--primary);
  background:var(--primary-light);
  box-shadow:none;
}

/* ============ 标签页 ============ */
.tabs{gap:4px}
.tabs a{
  background:transparent;box-shadow:none;
  height:40px;display:inline-flex;align-items:center;
  padding:0 18px;border-radius:999px;
  font-size:13.5px;font-weight:500;color:var(--md-on-surface-variant);
}
.tabs a:hover{background:var(--md-state);color:var(--primary);transform:none}
.page-tabs a.active{background:var(--primary-light);color:var(--primary-dark)}

.tab-bar{border-bottom:1px solid var(--md-outline-soft);gap:2px}
.tab-bar a{
  height:44px;display:inline-flex;align-items:center;
  padding:0 18px;border-bottom:3px solid transparent;
  border-radius:0;margin-bottom:-1px;
  color:var(--md-on-surface-variant);
  transition:color .15s;
}
.tab-bar a:hover{color:var(--primary)}
.tab-bar a.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ============ 照片 / 条目卡片 ============ */
.photo-card{
  background:#fff;border:1px solid var(--md-outline-soft);
  border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.photo-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-2);
  border-color:#d7dde6;color:var(--text);
}
.photo-thumb{border-radius:0}
.photo-info{padding:11px 13px}
.item-card{
  background:#fff;border:1px solid var(--md-outline-soft);
  border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;
  transition:transform .15s,box-shadow .15s;
}
.item-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);color:var(--text)}

/* 首页 hero / 公司头 */
.company-head{
  border-radius:24px;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));
  box-shadow:0 6px 20px color-mix(in srgb,var(--primary) 28%,transparent);
  padding:30px 34px;
}

/* 时间轴 */
.tl-dot{
  background:var(--primary-light);color:var(--primary-dark);
  width:30px;height:30px;left:-16px;
}
.tl-item{border-left:2px solid var(--md-outline-soft)}
.year-tag{
  background:var(--primary-light);color:var(--primary-dark);
  border-radius:8px;padding:3px 12px;
}

/* 分页 */
.pager a,.pager .cur{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border-radius:999px;
  background:#fff;border:1px solid var(--md-outline-soft);
  box-shadow:none;font-size:13.5px;
}
.pager a:hover{background:var(--md-surface-container)}
.pager .cur{background:var(--primary);color:#fff}

/* ============ 后台 ============ */
.admin-wrap{grid-template-columns:230px 1fr}
.admin-side{
  background:var(--md-surface-container);
  color:var(--md-on-surface-variant);
  border-right:1px solid var(--md-outline-soft);
  border-radius:0;padding:20px 12px;
}
.admin-side .side-title{
  color:var(--md-on-surface-variant);
  font-size:11px;font-weight:600;letter-spacing:1.4px;
  padding:4px 14px 12px;
}
.admin-side a{
  display:flex;align-items:center;gap:13px;
  height:48px;padding:0 16px;margin-bottom:2px;
  border-left:0;border-radius:999px;
  color:var(--md-on-surface-variant);
  font-size:13.5px;font-weight:500;
  transition:background .15s,color .15s;
}
.admin-side a:hover{background:var(--md-state);color:var(--md-on-surface)}
.admin-side a.active{
  background:var(--primary-light);
  color:var(--primary-dark);
}
.admin-side a i{width:20px;text-align:center;font-size:16px}
.admin-main{padding:26px 30px}
.stat{
  border-radius:20px;padding:20px 22px;position:relative;overflow:hidden;
}
.stat .n{font-size:30px;font-weight:700}
.stat i{
  color:var(--primary);opacity:.18;font-size:34px;
}
.mini-form{
  background:var(--md-surface-container);
  border-radius:16px;padding:16px 18px;
}
.callout{border-radius:14px;border:1px solid transparent}
.callout.info{background:var(--primary-light);color:var(--primary-dark)}
.callout.warn{background:#fff4e0;color:#8a5400;border-color:#ffe0ad}
.tab-bar .link-inserter{border-radius:12px}

/* 后台车辆档案细节 */
.v-company{border-radius:18px;border-color:var(--md-outline-soft)}
.v-grp{border-radius:12px}
.v-list th{background:var(--md-surface-container);border-radius:0}
.v-row:hover{background:var(--primary-light) !important}
.v-detail{background:var(--md-surface-container)}
.v-edit{border-radius:14px}
.grid-form fieldset{border-radius:14px}
.thumb-mini{border-radius:8px}

/* ============ 富文本编辑器微调（MD3 化） ============ */
.rich-editor{border-radius:16px;border-color:var(--md-outline)}
.rich-editor:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.re-toolbar{background:var(--md-surface-container);border-bottom-color:var(--md-outline-soft)}
.re-toolbar button{border-radius:999px}
.re-menu{border-radius:14px;border-color:var(--md-outline-soft)}
.re-modal{border-radius:24px}
.re-image-upload{border-radius:16px}
.re-content blockquote{background:var(--md-surface-container);border-left-color:var(--primary)}

/* ============ 页脚 ============ */
.footer{
  background:transparent;border-top:1px solid var(--md-outline-soft);
  color:var(--md-on-surface-variant);
}

/* ============ 其他 ============ */
.empty i{color:#d5dbe4}
.error-box i{color:#d5dbe4}
.online-dot{background:#27ae60}
.search-bar{padding:20px 24px}
.user-bio i{color:#d5dbe4}
.social-links a{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--md-surface-container);
  transition:background .15s;
}
.social-links a:hover{background:var(--primary-light)}

/* ============ 移动端适配（保持原有折叠位置） ============ */
@media (max-width:980px){
  .admin-side{border-radius:0}
  .admin-side a{height:40px}
}
@media (max-width:720px){
  mdui-layout-main.site-main{padding-top:64px !important}
  .main-nav{
    top:64px;
    background:#fff;
    border-bottom-left-radius:20px;border-bottom-right-radius:20px;
    border-bottom:1px solid var(--md-outline-soft);
    box-shadow:var(--shadow-2);
    padding-bottom:14px;
  }
  .main-nav>mdui-dropdown,.main-nav>a,.main-nav>.nav-auth{margin:2px 8px}
  .main-nav>a,.drop-trigger,.nav-auth{height:44px}
  /* 移动端用户菜单就地展开 */
  mdui-dropdown.dropdown{display:block}
  .main-nav mdui-menu.site-drop-menu{
    position:static !important;
    transform:none !important;
    top:auto !important;left:auto !important;
    width:100%;
    box-shadow:none;border:0;
    min-width:0;padding:0;
  }
  .main-nav mdui-menu.site-drop-menu::part(panel){
    box-shadow:none;border:0;
  }
  .form-card{padding:24px 20px;border-radius:20px}
  .company-head{border-radius:18px;padding:22px 20px}
  .admin-main{padding:18px 16px}
}