/* ============================================================
   Book 留言板插件 - 前台样式（独立插件风格，不绑定任何主题）
   ------------------------------------------------------------
   设计原则（与 BBS 插件完全一致）：
   1. 顶部 / 底部由 sd_get_header() / sd_get_footer() 输出，
      自动跟随当前启用的主题，本文件不做任何覆盖。
   2. 插件中间内容区（.book-main 内部）使用完全独立的
      固定调色板与设计语言，不依赖主题 --sdc-* 等变量，
      所以切换主题时 Book 样式保持一致。
   3. 唯一的"适配"是：面包屑和内容主容器的最大宽度读取
      var(--sdc-container, 1180px)，让插件的左右边界与
      主题 header/footer 的内容宽度对齐，视觉不脱节。
   4. 调色板 / 圆角 / 阴影 与 BBS 插件统一，保持两个插件
      的"品牌一致性"。
   ============================================================ */
:root {
    /* ---------- Book 独立调色板（固定值，与 BBS 保持一致） ---------- */
    --book-primary: #2563eb;          /* 主色：蓝（与 BBS 同）*/
    --book-primary-dark: #1d4ed8;     /* 主色：深 */
    --book-primary-soft: #eef4ff;     /* 主色：淡背景 / 胶囊 */
    --book-primary-ring: rgba(37, 99, 235, .1);   /* focus ring */
    --book-primary-border: rgba(37, 99, 235, .16);/* 淡边框 */

    --book-bg: #f5f6f7;               /* 软背景 / 灰块 */
    --book-card: #ffffff;             /* 卡片背景 */
    --book-border: #edf0f3;           /* 边框 / 分隔线 */

    --book-text: #1f2937;             /* 一级文字 */
    --book-text-2: #344054;           /* 二级文字 */
    --book-text-3: #6b7280;           /* 三级文字 */

    --book-danger: #dc2626;           /* 危险 */
    --book-danger-bg: #fef2f2;
    --book-warn: #d97706;             /* 警告 */
    --book-warn-bg: #fff8e7;
    --book-warn-border: rgba(217, 119, 6, .18);
    --book-success: #027a48;          /* 成功 */
    --book-success-bg: #ecfdf5;

    --book-radius: 8px;               /* 大圆角 */
    --book-radius-sm: 6px;            /* 小圆角 */

    --book-shadow: 0 6px 18px rgba(16, 24, 40, .035);    /* 卡片阴影 */
    --book-shadow-lg: 0 10px 28px rgba(16, 24, 40, .08); /* 悬浮阴影 */
    --book-shadow-primary: 0 4px 12px rgba(37, 99, 235, .28); /* 主按钮悬浮 */

    --book-font: "Helvetica Neue", Helvetica, Arial, "PingFang SC",
                 "Microsoft YaHei", sans-serif;
}

/* ============================================================
   Header 样式兜底：插件页强制走普通栏目页（sdc-inner）的头部样式
   ------------------------------------------------------------
   背景：主题 header.php 里 is_home() 会把 BBS/BOOK 插件路由误判为首页，
         给 body 加 sdc-home class，导致 theme.css 命中 10+ 条
         body.sdc-home .xxx 的"首页定制头"规则（position:absolute、
         半透明黑背景、白字、按钮白底透明边）。

   修复：用 body.sdc-theme .xxx (特异性 0,2,0) 与 theme.css 的
         body.sdc-home .xxx 完全平齐，因为 book.css 通过 sd_head hook
         注入在 theme.css 之后加载，同特异性下后加载覆盖先加载；
         再加 !important 防止被其它媒体查询反超。

   与 PHP 端 header.php 的 preg_replace（sdc-home → sdc-inner）双保险，
   只要有一个生效即可（当然两个都生效也无害）。
   ============================================================ */
body.sdc-theme .sdc-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--book-border) !important;  /* #edf0f3 */
    color: var(--book-text) !important;                       /* #1f2937 */
}
body.sdc-theme .sdc-brand strong { display: inline !important; }
body.sdc-theme .sdc-nav-item > a { color: var(--book-text-2) !important; }  /* #344054 */
body.sdc-theme .sdc-nav-item > a:hover,
body.sdc-theme .sdc-nav-item > a.active {
    background: var(--book-primary-soft) !important;  /* #eef4ff */
    color: var(--book-primary) !important;            /* #2563eb */
}
body.sdc-theme .sdc-dropdown a { color: var(--book-text-2) !important; }
body.sdc-theme .sdc-dropdown a:hover,
body.sdc-theme .sdc-dropdown a.active { color: var(--book-primary) !important; background: var(--book-primary-soft) !important; }
body.sdc-theme .sdc-search-btn,
body.sdc-theme .sdc-menu-toggle,
body.sdc-theme .sdc-login-btn,
body.sdc-theme .sdc-user-chip {
    border-color: var(--book-border) !important;   /* #edf0f3 */
    background: var(--book-card) !important;       /* #ffffff */
    color: var(--book-text-2) !important;          /* #344054 */
}

/* ============================================================
   布局：两插件在同一层级（.bbs-main / .book-main）统一限制最大宽度
   ------------------------------------------------------------
   之前错误地把 max-width 加在 .row 本身：Bootstrap .row 自带
   margin-left/right: -15px（抵消列的 15px gutter），会让内部列
   视觉上溢出 1200 的边界，看起来比 BBS 单栏更宽。

   正确做法：把 max-width: 1200px 直接作用于 .book-main，与 BBS
   的 .bbs-main 在同一层级，两插件的"视觉块宽度"完全相等；
   内部 .row 让它自然占满 100%，Bootstrap 负 margin 在 1200 容器
   内部正确地把两栏内容对齐到卡片。
   ============================================================ */
.book-main {
    /* 宽度完全对齐主题 .sdc-container（即 NEWS/其它栏目页的宽度基准）：
       - 桌面最大宽：读取主题 --sdc-container 变量（默认 1180px，与 NEWS 一致）
       - 两侧安全边距：16px（与主题 .sdc-container 的 calc(100%-32px) 一致）*/
    width: calc(100% - 32px);
    max-width: var(--sdc-container, 1180px);
    margin: 0 auto;
    /* 顶部视觉间距：与 NEWS 页 .sdc-layout 的 padding-top=12px 保持一致 */
    padding: 12px 0 40px;
    min-height: 60vh;
    font-family: var(--book-font);
    color: var(--book-text);
}
.book-main > .row {
    /* 自动填满 .book-main（最大宽 = 主题容器宽） */
    width: auto;
    max-width: none;
    /* 手机/平板（<992px）：小屏下 col-lg-* 变成 100%，
       清除负 margin 避免产生横向滚动条 */
    margin-left: 0;
    margin-right: 0;
}
/* 两栏布局：复刻 NEWS .sdc-layout（纯 CSS Grid，零 Bootstrap 依赖）
   theme.css 819/821/3592：
     .sdc-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
     .sdc-sidebar { position: sticky; top: 86px; display: grid; gap: 14px; }
     @media (max-width: 980px) { .sdc-layout { grid-template-columns: 1fr; } }
   BOOK 结构：.book-grid > .book-grid-main + .book-grid-side
   .book-grid-side 直接承担 sticky + widget gap（与 NEWS .sdc-sidebar 完全同层级）
   不再用 row/col-lg-*，无需任何 Bootstrap 抵消代码。*/
.book-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 979.98px) {
    .book-grid { grid-template-columns: 1fr; }
    .book-grid-main, .book-grid-side { padding: 0 15px; }
}

/* 侧栏卡片 padding / margin：与 NEWS .sdc-widget 对齐 */
.book-grid-side .book-post-card,
.book-grid-side .book-tips-card { padding: 16px; }
.book-grid-side .book-announce { padding: 10px 16px; }
.book-grid-side .book-post-card,
.book-grid-side .book-tips-card,
.book-grid-side .book-announce { margin-bottom: 0; }

@media (max-width: 979.98px) {
    .book-grid-side .book-post-card,
    .book-grid-side .book-tips-card { padding: 20px; }
    .book-grid-side .book-announce { padding: 10px 14px; }
    .book-grid-side .book-post-card,
    .book-grid-side .book-tips-card,
    .book-grid-side .book-announce { margin-bottom: 16px; }
}

/* ============================================================
   公告条（与 BBS .bbs-announce 同色）
   ============================================================ */
.book-announce {
    background: var(--book-primary-soft);
    border: 1px solid var(--book-primary-border);
    color: var(--book-text-2);
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--book-radius);
    margin-bottom: 16px;
}
.book-announce i { margin-right: 6px; color: var(--book-primary); }

/* ============================================================
   通用卡片（与 BBS .bbs-panel 同设计）
   ============================================================ */
.book-list-card,
.book-post-card,
.book-tips-card {
    background: var(--book-card);
    border: 1px solid var(--book-border);
    border-radius: var(--book-radius);
    box-shadow: var(--book-shadow);
    padding: 20px;
    margin-bottom: 16px;
}

/* 卡片头部（与 BBS 面板头同风格） */
.book-list-head {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--book-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.book-list-head h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--book-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.book-list-head h5 i {
    color: var(--book-primary);
}
/* 统计胶囊（与 BBS .bbs-panel-count 一致） */
.book-list-head span {
    font-size: 12px;
    background: var(--book-primary-soft);
    color: var(--book-primary);
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
}

/* ---------- 提示/警告信息（与 BBS 提示色板一致） ---------- */
.book-alert {
    border-radius: var(--book-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}
.book-alert.book-alert-success {
    background: var(--book-success-bg);
    border: 1px solid rgba(2, 122, 72, .16);
    color: var(--book-success);
}
.book-alert.book-alert-error {
    background: var(--book-danger-bg);
    border: 1px solid rgba(220, 38, 38, .16);
    color: var(--book-danger);
}
.book-alert.book-alert-warning {
    background: var(--book-warn-bg);
    border: 1px solid var(--book-warn-border);
    color: var(--book-warn);
}

/* ============================================================
   空状态
   ============================================================ */
.book-empty {
    text-align: center;
    color: var(--book-text-3);
    font-size: 14px;
    padding: 56px 16px;
}
.book-empty i {
    font-size: 36px;
    display: block;
    margin-bottom: 12px;
    opacity: .5;
    color: var(--book-primary);
}
.book-empty p { margin: 0; }

/* ============================================================
   留言列表
   ============================================================ */
.book-msg-list { list-style: none; padding: 0; margin: 0; }
.book-msg-item {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--book-border);
}
.book-msg-item:last-child { border-bottom: none; }

/* 头像（与 BBS 同色：淡蓝底 + 主色字） */
.book-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--book-primary-soft);
    color: var(--book-primary);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.book-body { flex: 1; min-width: 0; }
.book-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 12.5px;
}
.book-author { font-weight: 600; color: var(--book-text); }
.book-time { color: var(--book-text-3); font-size: 12px; }
.book-location { font-size: 12px; color: var(--book-text-3); }
.book-location i { font-size: 12px; margin-right: 2px; }

/* 登录标签（与 BBS badge 风格一致） */
.book-meta .badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--book-bg);
    color: var(--book-text-3);
    border: 1px solid var(--book-border);
}

.book-content {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--book-text);
    word-wrap: break-word;
}

/* ============================================================
   管理员回复块（与 BBS 引用块同风格）
   ============================================================ */
.book-replies {
    margin-top: 12px;
    padding-left: 14px;
    border-left: 3px solid var(--book-primary);
}
.book-reply {
    background: var(--book-bg);
    border-radius: 0 var(--book-radius-sm) var(--book-radius-sm) 0;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.book-reply:last-child { margin-bottom: 0; }
.book-reply-head {
    font-size: 12.5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.book-reply-author {
    font-weight: 600;
    color: var(--book-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.book-reply-author i { color: var(--book-primary); }
.book-reply-content {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--book-text-2);
}
.book-reply .book-actions.book-reply-actions {
    margin-top: 8px;
    justify-content: flex-end;
}

/* ============================================================
   操作按钮（回复 / 删除）
   ============================================================ */
.book-actions {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    font-size: 12.5px;
}
.book-actions .btn-link {
    text-decoration: none;
    font-size: 12.5px;
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color .15s, background-color .15s;
    font-family: var(--book-font);
    margin: 0;
}
.book-actions .btn-link.text-primary {
    color: var(--book-primary);
}
.book-actions .btn-link.text-primary:hover {
    background: var(--book-primary-soft);
}
.book-actions .btn-link.text-danger {
    color: var(--book-danger);
}
.book-actions .btn-link.text-danger:hover {
    background: var(--book-danger-bg);
}

/* ============================================================
   回复表单 / 输入框 / 按钮（与 BBS 表单同风格）
   ============================================================ */
.book-reply-form {
    margin-top: 12px;
    padding: 14px;
    background: var(--book-bg);
    border-radius: var(--book-radius-sm);
    border: 1px solid var(--book-border);
}
.book-reply-form textarea,
.book-post-card textarea,
.book-post-card input {
    width: 100%;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: var(--book-font);
    color: #111827;
    background: #fff;
    border: 1px solid var(--book-border);
    border-radius: var(--book-radius-sm);
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
}
.book-reply-form textarea:focus,
.book-post-card textarea:focus,
.book-post-card input:focus {
    outline: none;
    border-color: rgba(37, 99, 235, .34);
    box-shadow: 0 0 0 3px var(--book-primary-ring);
}
.book-reply-form textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.6;
}
.book-reply-form .mt-2 {
    margin-top: 10px;
    display: flex;
    gap: 8px;
}

/* 通用按钮样式（与 BBS 按钮完全一致的尺寸） */
.book-reply-form .btn,
.book-post-card .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: var(--book-radius-sm);
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s;
    line-height: 1.3;
    white-space: nowrap;
    font-family: var(--book-font);
    height: 32px;
    box-sizing: border-box;
    text-decoration: none;
}
/* 主按钮 */
.book-reply-form .btn-primary,
.book-post-card .btn-primary {
    background: var(--book-primary);
    color: #fff;
    border-color: var(--book-primary);
}
.book-reply-form .btn-primary:hover,
.book-post-card .btn-primary:hover {
    background: var(--book-primary-dark);
    border-color: var(--book-primary-dark);
    box-shadow: var(--book-shadow-primary);
    color: #fff;
}
.book-reply-form .btn-primary:disabled,
.book-post-card .btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
    box-shadow: none;
}
/* 幽灵按钮 */
.book-reply-form .btn-light {
    background: var(--book-card);
    color: var(--book-text-2);
    border-color: var(--book-border);
}
.book-reply-form .btn-light:hover {
    border-color: var(--book-primary);
    color: var(--book-primary);
}

/* ============================================================
   侧边栏：与 NEWS .sdc-sidebar 完全同层级 + 同规则（sticky 必生效）
   ------------------------------------------------------------
   theme.css 第 821 行：
     .sdc-sidebar { position: sticky; top: 86px; display: grid; gap: 14px; }

   之前 sticky 不生效的根因：sticky 写在 .book-sidebar-sticky 里（嵌套在 book-grid-side 内），
   而 book-grid-side 高度=内容高，sticky 元素的父容器高度不够，没有吸顶空间。
   
   现在按 NEWS 同样的方式：sticky / grid gap 直接写在 grid item 本身（.book-grid-side），
   sticky 的父容器就是 .book-grid（高度 = 主栏高度，有足够吸顶空间）。
   ============================================================ */
.book-grid-side {
    position: sticky;
    top: 86px;
    display: grid;
    gap: 14px;
}
/* <980px（小屏单列）：与 theme.css 第 3592 行同阈值，取消 sticky + 恢复 block + 取消 gap */
@media (max-width: 979.98px) {
    .book-grid-side {
        position: static;
        display: block;
        gap: 0;
    }
}

/* ============================================================
   发表留言卡片（标题下划线与 BBS 面板一致）
   ============================================================ */
.book-post-card h5 {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--book-text);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--book-border);
}
.book-post-card h5 i {
    color: var(--book-primary);
}

.book-post-card .form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #475467;
    margin-bottom: 7px;
}
.book-post-card .form-label .text-muted {
    color: var(--book-text-3);
    font-weight: 400;
}
.book-post-card .mb-2 { margin-bottom: 14px; }

/* 登录提示框（警告色） */
.book-post-card .alert-warning {
    background: var(--book-warn-bg);
    border: 1px solid var(--book-warn-border);
    color: var(--book-warn);
    border-radius: var(--book-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    margin: 0;
}
.book-post-card .alert-warning i { margin-right: 4px; }

.book-post-card .form-text {
    font-size: 12px;
    color: var(--book-text-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}
.book-post-card .form-text .text-warning {
    color: var(--book-warn);
    font-weight: 500;
}
.book-post-card .w-100 { width: 100%; }

/* ============================================================
   留言须知
   ============================================================ */
.book-tips-card h6 {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--book-text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.book-tips-card h6 i { color: var(--book-primary); }
.book-tips-card ul {
    font-size: 13px;
    color: var(--book-text-2);
    padding-left: 18px;
    margin: 0;
    line-height: 1.8;
}
.book-tips-card li { margin-bottom: 2px; }
.book-tips-card li::marker { color: var(--book-primary); }

/* ============================================================
   分页（与 BBS 完全一致）
   ============================================================ */
.book-pagination {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}
.book-pagination ul {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.book-pagination li a,
.book-pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    background: var(--book-card);
    border: 1px solid var(--book-border);
    border-radius: var(--book-radius-sm);
    font-size: 13px;
    color: var(--book-text-2);
    text-decoration: none;
    transition: all .15s;
}
.book-pagination li a:hover {
    border-color: rgba(37, 99, 235, .34);
    color: var(--book-primary);
}
.book-pagination li.active span {
    background: var(--book-primary);
    border-color: var(--book-primary);
    color: #fff;
    font-weight: 500;
}
.book-pagination li.disabled span {
    border: none;
    background: none;
    color: var(--book-text-3);
}

/* ============================================================
   提示页
   ============================================================ */
.book-notice {
    text-align: center;
    padding: 80px 20px;
    background: var(--book-card);
    border: 1px solid var(--book-border);
    border-radius: var(--book-radius);
    box-shadow: var(--book-shadow);
}
.book-notice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--book-primary-soft);
    color: var(--book-primary);
    font-size: 24px;
    margin-bottom: 18px;
}
.book-notice h2 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--book-text);
}
.book-notice p {
    color: var(--book-text-2);
    margin: 0 0 22px;
    font-size: 14px;
}

@media (max-width: 720px) {
    .book-main { padding: 16px 0 32px; }
    .book-list-card,
    .book-post-card,
    .book-tips-card { padding: 16px; }
    .book-avatar {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .book-msg-item {
        gap: 10px;
        padding: 14px 0;
    }
    .book-content { font-size: 14px; }
    .book-reply-form .mt-2 {
        flex-direction: column;
    }
    .book-reply-form .btn {
        width: 100%;
    }
}