/* ============================================================
   SKANG 统一交互组件：确认对话框 + 轻提示
   替代浏览器原生 confirm()（原生弹窗无法显示「影响哪条记录」「操作后状态」
   「是否可撤销」，对退房/改派/删除这类不可逆操作风险很高）。

   命名一律用 sk- 前缀，已确认与各页面既有的 .modal / .modal-mask 等旧类名无冲突。
   ============================================================ */

/* ---- 全站设计基础层 -------------------------------------------------
   仅提供稳定的视觉 Token 与基础可用性规则；不重置页面布局、不改写
   表格、表单的尺寸，也不影响页面中用于编号、日志、优惠码的等宽字体。 */
:root {
    --sk-font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    --sk-font-mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --sk-space-1: 4px;
    --sk-space-2: 8px;
    --sk-space-3: 12px;
    --sk-space-4: 16px;
    --sk-space-5: 24px;
    --sk-radius-sm: 4px;
    --sk-radius-md: 8px;
    --sk-radius-lg: 12px;
    --sk-shadow-card: 0 4px 16px rgba(1, 62, 110, .07);
    --sk-focus-ring: rgba(250, 191, 19, .82);

    /* ---- 品牌色 Token ----------------------------------------------------
       这些是全站唯一的颜色事实来源。此前每个页面在自己的 :root 里各写一份
       --vi-*，同一个"主蓝"在不同页面差几个色号，改配色要翻 31 个文件。
       注意：本文件在各页面 <style> 之后加载，若在这里重复定义 --vi-*，
       会反向覆盖页面的同名变量，正是 base.html 注释警告的那类连锁反应。
       因此这里一律用 --sk- 前缀另起一套，只做新增、不参与任何既有覆盖关系；
       新页面直接用 --sk-*，老页面按自己的节奏迁移。 */
    --sk-blue: #013e6e;          /* 主蓝：导航、标题、主按钮 */
    --sk-blue-light: #0a5a9e;    /* 次级蓝：链接、辅助强调 */
    --sk-blue-dark: #012a4a;     /* 深蓝：主按钮 hover */
    --sk-gold: #fabf13;          /* 品牌金：焦点、点缀、激活态 */
    --sk-red: #b60014;           /* 危险/逾期 */
    --sk-green: #217346;         /* 成功/达标 */
    --sk-amber: #b7791f;         /* 警告/临期 */
    --sk-silver: #595757;        /* 次要文字 */
    --sk-ink: #24303c;           /* 正文 */
    --sk-muted: #98a2ad;         /* 占位/禁用 */
    --sk-bg: #eef1f6;            /* 页面底色 */
    --sk-surface: #ffffff;       /* 卡片/面板 */
    --sk-line: #e3eaf2;          /* 分隔线 */
    --sk-line-soft: #f0f4f8;     /* 表格行分隔 */
}

/* ---- 状态标签 --------------------------------------------------------------
   全站状态标签此前各页各写一套（颜色、圆角、字号都不一致）。这里给出统一实现，
   语义分五档，opt-in 使用：加 class 才生效，不影响任何既有元素。 */
.sk-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
    background: #eef4f9;
    color: #46586b;
}
.sk-tag-ok { background: #d9f0e2; color: #17663c; }      /* 已完成 / 达标 */
.sk-tag-wait { background: #fdf0d5; color: #8a6d1f; }    /* 进行中 / 待处理 */
.sk-tag-bad { background: #fdeaec; color: #b60014; }     /* 驳回 / 逾期 */
.sk-tag-info { background: #e8f1fa; color: #0a5a9e; }    /* 一般信息 */
.sk-tag-mute { background: #f0f2f5; color: #98a2ad; }    /* 无 / 不适用 */

/* ---- 数据表格 --------------------------------------------------------------
   opt-in：给 <table> 加 .sk-table 即可获得统一的表头、行距与分隔线。 */
.sk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.sk-table thead th {
    background: #f4f7fb;
    color: var(--sk-blue);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-align: left;
    padding: 10px 14px;
    white-space: nowrap;
    border-bottom: 1px solid #e0e8f0;
}
.sk-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--sk-line-soft);
    color: var(--sk-ink);
}
.sk-table tbody tr:last-child td { border-bottom: 0; }
.sk-table tbody tr:hover td { background: #f8fbfe; }
.sk-table .sk-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 按钮 ------------------------------------------------------------------
   .sk-btn 已被确认对话框占用（见下方），这里补业务页用的实心/次级/危险三档，
   类名另起 .sk-action-* 以免与既有 .sk-btn 的尺寸样式打架。 */
.sk-action {
    display: inline-block;
    background: var(--sk-blue);
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: var(--sk-radius-sm);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    transition: filter .15s;
}
.sk-action:hover { filter: brightness(1.15); }
.sk-action-ghost { background: #eef4fa; color: var(--sk-blue); }
.sk-action-ghost:hover { background: var(--sk-blue); color: #fff; filter: none; }
.sk-action-danger { background: var(--sk-red); }
.sk-action-ok { background: var(--sk-green); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 放在所有页面自有样式之后加载，用同一字体栈消除页面之间的字形跳变。
   `!important` 是为了覆盖旧主题中已有的 body !important 声明。 */
body { font-family: var(--sk-font-sans) !important; }

/* 全站图标：以本地 SVG 取代系统 emoji，避免 Windows / macOS / 手机端显示不一致。 */
.sk-ui-icon {
    width: 1.08em;
    height: 1.08em;
    display: inline-block;
    vertical-align: -0.19em;
    margin: 0 .16em 0 0;
    color: currentColor;
    flex: 0 0 auto;
}
.sk-ui-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 浏览器默认不会让所有表单控件可靠继承页面字体；只统一 font-family，
   不触碰 font-size / padding / width，避免影响既有业务表单排版。 */
button, input, select, textarea { font-family: inherit; }

/* 统一键盘焦点，不改鼠标悬停状态或点击行为。 */
body :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--sk-focus-ring);
    outline-offset: 2px;
}

.sk-mask {
    position: fixed;
    inset: 0;
    background: rgba(1, 24, 44, 0.55);
    backdrop-filter: blur(2px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .14s ease;
}
.sk-mask.sk-in { opacity: 1; }

.sk-dialog {
    background: #fff;
    width: 440px;
    max-width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(1, 24, 44, .38);
    border-top: 5px solid var(--vi-blue, #013e6e);
    transform: translateY(-8px) scale(.985);
    transition: transform .14s ease;
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.sk-mask.sk-in .sk-dialog { transform: none; }
.sk-dialog.sk-danger { border-top-color: var(--vi-red, #b60014); }

.sk-dialog-head {
    padding: 20px 24px 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--vi-blue, #013e6e);
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.sk-dialog.sk-danger .sk-dialog-head { color: var(--vi-red, #b60014); }

.sk-dialog-body {
    padding: 12px 24px 4px;
    font-size: 13.5px;
    line-height: 1.75;
    color: #333;
    white-space: pre-wrap;      /* 原 confirm 文案里的 \n 要保持换行 */
    word-break: break-word;
}

/* 受影响记录 / 操作后状态 / 可逆性 三行说明 */
.sk-dialog-meta {
    margin: 12px 24px 0;
    border: 1px solid #e6ebf2;
    border-radius: 5px;
    background: #f6f9fc;
    font-size: 12.5px;
}
.sk-meta-row {
    display: flex;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #eaf0f6;
}
.sk-meta-row:last-child { border-bottom: 0; }
.sk-meta-k { color: #8a949f; flex: 0 0 68px; font-weight: 700; }
.sk-meta-v { color: #24303c; font-weight: 600; word-break: break-all; }
.sk-meta-v.sk-irreversible { color: var(--vi-red, #b60014); }

.sk-dialog-foot {
    padding: 18px 24px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.sk-btn {
    padding: 9px 20px;
    border-radius: 4px;
    border: none;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: .5px;
    transition: filter .12s;
}
.sk-btn:hover { filter: brightness(1.08); }
.sk-btn:focus-visible { outline: 3px solid rgba(250, 191, 19, .65); outline-offset: 2px; }
.sk-btn-cancel { background: #e8ebef; color: #4a5560; }
.sk-btn-ok { background: var(--vi-blue, #013e6e); color: #fff; }
.sk-dialog.sk-danger .sk-btn-ok { background: var(--vi-red, #b60014); }

/* ---- 轻提示 ---- */
.sk-toast-wrap {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.sk-toast {
    pointer-events: auto;
    min-width: 220px;
    max-width: 380px;
    background: #24303c;
    color: #fff;
    padding: 11px 15px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    box-shadow: 0 8px 26px rgba(1, 24, 44, .3);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity .16s ease, transform .16s ease;
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.sk-toast.sk-in { opacity: 1; transform: none; }
.sk-toast.sk-ok { background: var(--vi-green, #217346); }
.sk-toast.sk-err { background: var(--vi-red, #b60014); }
.sk-toast.sk-warn { background: #b7791f; }
.sk-toast-x {
    margin-left: auto;
    background: none;
    border: none;
    color: rgba(255, 255, 255, .75);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.sk-toast-x:hover { color: #fff; }

@media (max-width: 640px) {
    .sk-dialog { width: 100%; }
    .sk-toast-wrap { left: 12px; right: 12px; top: 12px; }
    .sk-toast { max-width: none; }
}

@media print {
    .sk-mask, .sk-toast-wrap { display: none !important; }
}