/* Tabler overrides (§16.2). Loaded after the library CSS, before route styles.
   Keep overrides minimal and scoped to VC additions only. */

/* Navbar dropdowns: CSS-only :hover is not usable on touch / keyboard, so the
   click-toggle in vc.js flips .is-open to force the same open state.
   The three navbar buttons (language / theme / user) are icon-only squares
   styled by the layouts (.nav-icon-btn); nothing to override here.

   Layouts now show the menu via visibility+opacity (needs a transition), so
   the click state has to flip the same properties — `display` alone would no
   longer reveal it. `transition-delay: 0s` keeps taps immediate, unlike the
   180ms hover-intent delay. */
.dropdown.is-open > .dropdown-menu { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }

/* ==========================================================================
   VC form components (UI 约定)
   1) every text-ish control (input / password / email / number / url / tel /
      textarea, and selects) uses a FLOATING LABEL — no separate label row.
   2) multilingual values: the current language is edited inline, the other
      languages live in a tabbed modal opened by the language button.
   Themed through the layout CSS variables, so admin/front and the three
   themes (light / eye-care / dark) all stay consistent.
   ========================================================================== */

/* --- float label ---------------------------------------------------------- */
.vc-float { position: relative; }
.vc-float > .vc-control {
  display: block; width: 100%; box-sizing: border-box;
  height: 3rem; padding: 1.05rem .8rem .35rem;
  font-family: inherit; font-size: .9rem; line-height: 1.2;
  color: var(--card-fg, #222);
  background: var(--input-bg, var(--card, #fff));
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
}
.vc-float > textarea.vc-control {
  height: auto; min-height: 5.25rem; padding-top: 1.45rem; resize: vertical;
}
.vc-float > .vc-control::placeholder { color: transparent; }
.vc-float > .vc-control:focus {
  outline: none; border-color: var(--brand, #0a58ca);
  box-shadow: 0 0 0 3px rgba(10, 88, 202, .12);
}
.vc-float > .vc-control:disabled,
.vc-float > .vc-control[readonly] {
  background: var(--hover, #f8fafc); color: var(--muted, #64748b); cursor: default;
}
.vc-float > label {
  position: absolute; left: .8rem; top: .85rem;
  font-size: .9rem; line-height: 1.2; color: var(--muted, #888);
  pointer-events: none; transform-origin: left top;
  transition: transform .12s ease, color .12s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(100% - 1.6rem);
}
.vc-float > .vc-control:focus + label,
.vc-float > .vc-control:not(:placeholder-shown) + label {
  transform: translateY(-.62rem) scale(.78);
}
.vc-float > .vc-control:focus + label { color: var(--brand, #0a58ca); }
/* Controls that can never be "placeholder-shown" (select, date, datetime-local,
   time, month) keep their label permanently raised. */
.vc-float-select > label,
.vc-float-raised > label { transform: translateY(-.62rem) scale(.78); }
.vc-float-select > select.vc-control { padding-right: 1.8rem; }
.vc-float > .vc-control.vc-mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem;
}

/* --- input group (field + language button) -------------------------------- */
.vc-ig { display: flex; align-items: stretch; }
.vc-ig > .vc-float { flex: 1 1 auto; min-width: 0; }
.vc-ig > .vc-float > .vc-control { border-radius: 6px 0 0 6px; }
.vc-ig > .vc-ig-btn {
  flex: 0 0 auto; min-width: 2.9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  margin-left: -1px; padding: 0 .8rem;
  font-family: inherit; font-size: .85rem; cursor: pointer;
  color: var(--card-fg, #222);
  background: var(--input-bg, var(--card, #fff));
  border: 1px solid var(--border, #e5e7eb); border-radius: 0 6px 6px 0;
}
.vc-ig > .vc-ig-btn:hover { background: var(--hover, #f8fafc); }
.vc-ig > .vc-ig-btn .ti { font-size: 1.1rem; }
/* 图标在前的变体（多语言组用）：圆角与 -1px 叠边同时换向 */
.vc-ig > .vc-ig-btn.vc-ig-lead {
  margin-left: 0; margin-right: -1px; border-radius: 6px 0 0 6px;
}
.vc-ig > .vc-float:last-child > .vc-control { border-radius: 0 6px 6px 0; }
/* --- 多语言组：假的 input（只读预览），点任意处开 modal --- */
.vc-ml { cursor: pointer; }
.vc-float > .vc-control.vc-ml-fake[readonly] {
  background: var(--input-bg, var(--card, #fff));
  color: var(--card-fg, #222);
  cursor: pointer;
  text-overflow: ellipsis;
}
.vc-ml:hover > .vc-ml-float > .vc-ml-fake { border-color: var(--brand, #0a58ca); }
.vc-ml-fake:focus-visible {
  outline: none; border-color: var(--brand, #0a58ca);
  box-shadow: 0 0 0 3px rgba(10, 88, 202, .12);
}
/* third-party widgets (Vditor…) cannot sit inside an input group: they get a
   compact bar with the same language button instead. */
.vc-ml-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}
.vc-ml-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--muted, #888);
}
.vc-ml-head > .vc-ig-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; font-family: inherit; font-size: .84rem; cursor: pointer;
  color: var(--card-fg, #222);
  background: var(--input-bg, var(--card, #fff));
  border: 1px solid var(--border, #e5e7eb); border-radius: 6px;
}
.vc-ml-head > .vc-ig-btn:hover { background: var(--hover, #f8fafc); }

/* --- modal ---------------------------------------------------------------- */
.vc-modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.vc-modal[hidden] { display: none; }
.vc-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.vc-modal-dialog {
  position: relative; display: flex; flex-direction: column;
  width: min(560px, 100%); max-height: calc(100vh - 3rem);
  background: var(--card, #fff); color: var(--card-fg, #222);
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .25); overflow: hidden;
}
.vc-modal-lg { width: min(880px, 100%); }
.vc-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--border, #e5e7eb);
}
.vc-modal-head h5 { margin: 0; font-size: 1rem; }
.vc-modal-head .vc-modal-sub { font-size: .78rem; color: var(--muted, #888); }
.vc-modal-x {
  background: none; border: none; cursor: pointer; padding: .15rem .3rem;
  color: var(--muted, #888); font-size: 1.05rem; line-height: 1;
}
.vc-modal-body { padding: 1rem 1.1rem; overflow: auto; }
.vc-modal-foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .75rem 1.1rem; border-top: 1px solid var(--border, #e5e7eb);
}

/* --- settings pages chrome (§14.7) ---------------------------------------- */
/* Page head (2026-10-23 整改): 标题在左，页面级操作按钮（保存/取消/返回/新建）
   在标题行右侧右对齐；窄屏 flex-wrap 自然换行。工具行内控件（筛选/匹配/导出）
   不属于页面级操作，仍留在各自输入行。 */
/* 2026-10-23：标题行下方一条极浅的分隔线（三主题变量 --head-line 由布局提供）。 */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; padding-bottom: .6rem; border-bottom: 1px solid var(--head-line, rgba(127,127,127,.18)); }
.page-head > h1 { margin: 0; font-size: 1.3rem; display: inline-flex; align-items: center; gap: .45rem; }
.page-head > h2 { margin: 0; font-size: 1.25rem; display: inline-flex; align-items: center; gap: .45rem; }
/* 2026-10-23：页头操作按钮统一尺寸。用 grid 等宽列（1fr）+ 等高拉伸（stretch），
   让「返回」「保存设置」等不同字数的按钮、以及 <a> 与 <button> 混用时
   （<button> 默认不继承字体/行高，两者高度不一致）看起来完全等大。 */
.page-actions { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; gap: .5rem; margin-left: auto; }
.page-actions .btn { display: flex; align-items: center; justify-content: center; font-family: inherit; line-height: 1.2; white-space: nowrap; }
@media (max-width: 640px) { .page-actions { grid-auto-flow: row; grid-auto-columns: auto; } }
.cfg-banner { padding: .65rem .9rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.cfg-ok { background: #eaf7ee; border: 1px solid #b7e3c5; color: #1f7a3d; }
.cfg-err { background: #fdecec; border: 1px solid #f3b9b9; color: #b42323; }
.cfg-sec { margin-bottom: 1.5rem; }
.cfg-sec h2 {
  font-size: 1rem; margin: 0 0 .75rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.cfg-note { font-size: .75rem; font-weight: 400; color: var(--muted, #888); margin-left: .5rem; }
.cfg-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.2rem; align-items: start;
}
.cfg-grid > .span-2 { grid-column: 1 / -1; }
.cfg-check {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; color: var(--card-fg, #222); cursor: pointer;
}
.cfg-check input { width: 1rem; height: 1rem; margin: 0; }
.cfg-sub { margin: 0 0 1.5rem; color: var(--muted, #888); font-size: .9rem; }
.cfg-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.cfg-card {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--border, #e5e7eb); border-radius: 12px;
  padding: 1.3rem 1.4rem; text-decoration: none;
  color: var(--card-fg, #222); background: var(--card, #fff);
}
.cfg-card:hover { border-color: #c7d7f0; }
.cfg-card-icon {
  width: 48px; height: 48px; flex: 0 0 48px; display: flex;
  align-items: center; justify-content: center; border-radius: 10px;
  background: #eef4ff; color: var(--brand, #0a58ca); font-size: 1.5rem;
}
.cfg-card-body { flex: 1; }
.cfg-card-body h2 { margin: 0 0 .3rem; font-size: 1.05rem; }
.cfg-card-body p { margin: 0; font-size: .85rem; color: var(--muted, #888); line-height: 1.5; }
.cfg-card-go { color: #c3cddd; font-size: 1.2rem; }
@media (max-width: 720px) { .cfg-cards { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cfg-grid { grid-template-columns: 1fr; } }

/* --- tabs (multilingual modal) -------------------------------------------- */
.vc-tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid var(--border, #e5e7eb); margin-bottom: .9rem;
}
.vc-tab {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .5rem .85rem; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: inherit; font-size: .9rem; cursor: pointer; color: var(--muted, #888);
}
.vc-tab.active {
  color: var(--brand, #0a58ca); border-bottom-color: var(--brand, #0a58ca); font-weight: 600;
}
.vc-tab .vc-ml-code { font-size: .72rem; opacity: .75; }
.vc-panes { position: relative; }
.vc-pane { display: none; }
.vc-pane.active { display: block; }

/* ==========================================================================
   Admin sidebar resize (§5.3): drag handle on the sidebar's right edge.
   The width itself is the layout's --side-w variable; only the handle chrome
   lives here, themed through the sidebar variables so the grip stays visible
   on all three themes (sidebar backgrounds are dark in every theme).
   ========================================================================== */
.admin-sidebar .side-resize-handle {
  position: absolute; top: 0; right: 0; z-index: 5;
  width: 7px; height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; cursor: col-resize;
  touch-action: none; /* Pointer Events must own touch drags, not scrolling */
}
.admin-sidebar .side-resize-handle::after {
  content: ""; position: absolute; top: 0; right: 2px;
  width: 3px; height: 100%; border-radius: 2px;
  background: var(--side-fg, #cbd5e1); opacity: .28;
  transition: opacity .12s ease, background-color .12s ease;
}
.admin-sidebar .side-resize-handle:hover::after,
.admin-sidebar .side-resize-handle:focus-visible::after { opacity: .65; }
.admin-sidebar .side-resize-handle:focus-visible {
  outline: 2px solid var(--brand, #0a58ca); outline-offset: -2px;
}
/* While dragging: keep the resize cursor everywhere and block text selection. */
body.side-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.side-resizing * { cursor: col-resize !important; }
body.side-resizing .side-resize-handle::after { opacity: .85; background: var(--brand, #0a58ca); }
/* Narrow screens: the sidebar is not the primary nav there — hide the handle
   so it cannot be hit by accident. */
@media (max-width: 720px) {
  .admin-sidebar .side-resize-handle { display: none; }
}

/* ================= 开关（checkbox）组件 §16.2 =================
   用法：
     <label class="vc-switch">
       <input type="checkbox" name="display_xxx" checked>
       <span class="vc-switch-track"></span>
       <span class="vc-switch-text">显示路由标题</span>
     </label>
   原生 checkbox 透明隐藏但保留可聚焦/可提交，轨道和滑块纯 CSS 绘制；
   主题色走 --brand，暗色主题自动跟随布局变量。 */
.vc-switch {
  display: inline-flex; align-items: center; gap: .55rem;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  font-size: .9rem; color: var(--card-fg, #222); line-height: 1.4;
}
.vc-switch > input[type="checkbox"] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.vc-switch-track {
  position: relative; flex: 0 0 auto;
  width: 2.1rem; height: 1.2rem; border-radius: 999px;
  background: var(--border, #cbd5e1);
  transition: background-color .16s ease;
}
.vc-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(1.2rem - 4px); height: calc(1.2rem - 4px);
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .25);
  transition: transform .16s ease;
}
.vc-switch > input:checked + .vc-switch-track { background: var(--brand, #0a58ca); }
.vc-switch > input:checked + .vc-switch-track::after { transform: translateX(.9rem); }
.vc-switch > input:focus-visible + .vc-switch-track {
  outline: 2px solid var(--brand, #0a58ca); outline-offset: 2px;
}
.vc-switch > input:disabled + .vc-switch-track { opacity: .45; }
.vc-switch:hover .vc-switch-text { color: var(--brand, #0a58ca); }
/* 开关列表（路由编辑器等成组出现时） */
.vc-switch-list { display: flex; flex-direction: column; gap: .55rem; }
.vc-switch-text { display: flex; flex-direction: column; gap: .1rem; }
.vc-switch-name { font-weight: 500; }
.vc-switch-hint { font-size: .76rem; color: var(--muted, #64748b); font-weight: 400; }