@CHARSET "UTF-8";
/* ============================================================
   ChemCMS 前台 - 交互元素基础样式（全局，所有前台页面生效）
   引入位置：bootstrap.min.css 之后（public/head.html）

   解决问题：
   1) a / button 点击或聚焦时出现的黑色边框。
      根因是 Bootstrap 3 内置规则：
        a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color}
        .btn:focus,.btn:active:focus,...{outline:thin dotted;...}
      在不支持 -webkit-focus-ring-color 的浏览器（Firefox / IE / 兼容模式）
      会退化成黑色点线框；在 WebKit 内核上点击后也会残留焦点环。
   2) 统一交互元素的默认外观与反馈（指针、过渡、按下态、禁用态）。

   可访问性：鼠标点击不显示任何边框；键盘 Tab 导航时显示品牌青色焦点环。
   ============================================================ */

/* ---------- 1. 移除点击 / 聚焦黑框 ---------- */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus,
button,
button:hover,
button:active,
button:focus,
input,
input:focus,
select,
select:focus,
textarea,
textarea:focus,
[role="button"],
[role="button"]:focus,
.btn,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus,
.nav > li > a,
.nav > li > a:focus,
.navbar-toggle,
.navbar-toggle:focus,
.pagination > a,
.pagination > a:focus,
.close,
.close:focus {
    outline: none;
}

/* Firefox 内核按钮的内置焦点框 */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* ---------- 2. 键盘导航焦点环（品牌青，仅键盘触发，鼠标点击不出现） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 2px solid #1e9fd8;
    outline-offset: 2px;
}

/* 深色底（hero 区、导航选中态）上的焦点环提高亮度，保证可见 */
.vr-hero a:focus-visible,
.vr-hero button:focus-visible,
.vr-hero .btn:focus-visible,
.navbar-inverse a:focus-visible {
    outline-color: #8fd7f5;
}

/* 鼠标点击后不留下划线残留；不支持 :focus-visible 的旧浏览器会整条忽略，安全 */
a:focus:not(:focus-visible) {
    text-decoration: none;
}

/* ---------- 3. 链接默认样式优化 ---------- */
a {
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease,
    border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

a[href] {
    cursor: pointer;
}

/* ---------- 4. 按钮默认样式优化 ---------- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 消除移动端 300ms 点击延迟 */
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    transition: color .18s ease, background-color .18s ease,
    border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

/* 按钮文字不应被双击选中 */
button,
.btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 按下态：把 Bootstrap 默认的黑色内阴影换成品牌深蓝，避免边缘发黑 */
.btn:active,
.btn.active,
button:active:not(:disabled) {
    -webkit-box-shadow: inset 0 2px 4px rgba(27, 92, 148, .16);
    box-shadow: inset 0 2px 4px rgba(27, 92, 148, .16);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
    cursor: not-allowed;
    opacity: .65;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ---------- 5. 全局：去掉移动端点击时的半透明灰块 ---------- */
html,
body {
    -webkit-tap-highlight-color: transparent;
}

/* 尊重系统「减少动画」偏好 */
@media (prefers-reduced-motion: reduce) {
    a,
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"] {
        transition: none;
    }
}