/* ======================================================================
   app.css — 基础层（全局样式第一层，加载于 bootstrap 之后、scoped 之前）

   职责：模板基础 / Blazor 表单验证类 / 全局工具类 / 手机端响应式适配
   加载顺序：bootstrap → bootstrap-icons → 【app.css】 → scoped(*.razor.css)
             → theme.css → layout.css → pages.css
   说明：主题视觉在 theme.css，框架布局在 layout.css，页面专项在 pages.css；
         本文件必须保持在 scoped 之前加载，否则会改变与 scoped 规则的覆盖关系
   ====================================================================== */

/* ---------- 模板基础 ---------- */

/* 页面基础字体（会被 theme.css 的全局基调覆盖为含中文字体的字体栈，
   保留作为 theme.css 加载失败时的兜底） */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 链接与链接式按钮的默认色（模板蓝，theme.css 中用主题色覆盖） */
a, .btn-link {
    color: #006bb7;
}

/* 主按钮默认配色（模板蓝，theme.css 中用靛蓝主色覆盖） */
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* 交互元素聚焦时的白圈+蓝圈阴影（无障碍焦点可见性，theme.css 中覆盖为主题色） */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* 主内容区上内边距：与顶栏留出呼吸距离（MainLayout 的 <article class="content">） */
.content {
    padding-top: 1.1rem;
}

/* 页面大标题不显示焦点轮廓（点击标题锚点时避免难看的虚线框） */
h1:focus {
    outline: none;
}

/* ---------- Blazor EditForm 验证类 ----------
   以下类名由 Blazor 框架在运行时加到表单元素上，源码中 grep 不到（勿当死代码删除）：
   - 输入框编辑过且合法 → .valid.modified（绿描边）
   - 输入框非法         → .invalid（红描边）
   - ValidationMessage 组件渲染的提示文字 → .validation-message（红色）
   使用场景：登录页、各编辑弹窗（SiteEditModal / DeviceEditModal 等）的表单校验 */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/* ---------- 全局工具类（跨组件复用的小样式，从组件 .razor.css 提取） ---------- */

/* 模态框遮罩背景：全屏自定义弹窗（非 bootstrap modal）的半透明黑底 */
.modal-overlay { background-color: rgba(0,0,0,0.5); }

/* Excel 预览表格：文档预览弹窗中的表格缩小字号；单元格不换行、超宽省略号截断，
   防止长内容把弹窗撑破 */
.excel-preview table { font-size: 0.8rem; }
.excel-preview td, .excel-preview th { white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }

/* 手工实现的模态框遮罩层：fixed 全屏覆盖，z-index 1050 与 bootstrap modal 层级一致 */
.modal-backdrop-custom {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
}

/* 可点击元素：加在需要手型光标的 div/span 等非交互元素上（如国家卡片头、场地行） */
.clickable { cursor: pointer; }

/* 认证页面全屏布局：登录/注册页外层容器撑满整屏（配合 BlankLayout 的渐变背景） */
.auth-wrapper { min-height: 100vh; width: 100%; }

/* ---------- 手机端全局适配（≤768px） ----------
   小屏整体策略：缩边距/缩字号、按钮与工具栏换行、表格和 Tab 横向滚动、弹窗变全宽 */

@media (max-width: 768px) {
    /* 主内容区与顶栏左右缩到最小边距，把宽度留给内容 */
    .content { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    .top-row { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

    /* 标题缩小，避免占满窄屏 */
    h1 { font-size: 1.4rem; }
    h3 { font-size: 1.15rem; }

    /* card header 按钮区换行：标题+多个按钮挤不下时自动折行，
       搜索框等表单控件独占一行 */
    .card-header.d-flex { flex-wrap: wrap; gap: 0.25rem 0.5rem; }
    .card-header .form-control { width: 100% !important; }

    /* 表格缩小字体 + 单元格不换行，配合外层 overflow-x 实现横向滚动看全列 */
    .table { font-size: 0.8rem; }
    .table th, .table td { white-space: nowrap; }

    /* Tab 栏横向滑动：不换行、条目不收缩（设备套卡片的 服务器/文档/电气 标签栏） */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-item { flex-shrink: 0; }
    .nav-tabs .nav-link { white-space: nowrap; font-size: 0.85rem; }

    /* 按钮组自动换行：d-flex+gap-1 组合的按钮排不下时折行 */
    .d-flex.gap-1 { flex-wrap: wrap; }

    /* 搜索栏输入框占满整行宽度 */
    .search-input { width: 100%; }

    /* 表单间距紧凑：表单元素多时减少纵向占用 */
    .mb-2 { margin-bottom: 0.5rem !important; }
    .form-label { margin-bottom: 0.15rem; font-size: 0.85rem; }

    /* 面包屑缩小 */
    .breadcrumb { font-size: 0.85rem; }

    /* 模态框占满屏幕宽度并限制高度，内部滚动 */
    .modal-dialog { margin: 0.5rem; }
    .modal-content { max-height: 95vh; overflow-y: auto; }
}