/* ==========================================================================
   FlintHub 公告插件样式 v1.4.0
   --------------------------------------------------------------------------
   二维模型：
     · 配色（.ann-style-*）   → 只定义 4 个变量：--ann-bg / --ann-border / --ann-text / --ann-accent
     · 条目布局（.ann-layout-*）→ 决定「怎么用」这 4 个变量
     · 容器模式（.ann-rotator / .ann-list / .ann-marquee）→ 决定「多条怎么排」
     ⇒ 布局 × 配色 = 6 × 12 = 72 种组合，零额外 CSS

   ⚠️ 颜色一律走 --mn-* 变量 + fallback（fallback = 浅色主题目标色）：
      浅色主题零副作用，深色主题自动取主题值（规范 §11.7）。
   ⚠️ --mn-danger / --mn-card-bg / --mn-muted 等**不存在**，用 --mn-error / --mn-bg-card / --mn-text-muted。
   ⚠️ 隐藏类一律 display:none !important（核心同权重类可能后胜）。
   ⚠️ 本文件由 section('css') 或正文 <link> 加载，不要改核心 admin.css / modern.css。
   ========================================================================== */

/* ---------- 1. 基础容器（1.3.0 原样保留 → 老数据视觉零变更） ---------- */
.announcements-container { margin-bottom:16px; }
.announcement-bar { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--ann-border, #eab308); border-radius:8px; margin-bottom:8px; font-size:14px; line-height:1.6; position:relative; max-height:120px; overflow:hidden; background:var(--ann-bg, #fefce8); color:var(--ann-text, #713f12); }
.announcement-bar.dismissed { max-height:0; padding-top:0; padding-bottom:0; margin-bottom:0; opacity:0; border-width:0; overflow:hidden; }
/* JS 显隐统一走 class（不写内联 style）；!important 防核心同权重类后胜 */
.ann-hidden { display:none !important; }
.announcement-content { flex:1; min-width:0; }
.announcement-close { flex-shrink:0; width:22px; height:22px; border:none; background:rgba(0,0,0,0.08); border-radius:4px; font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; opacity:0.5; color:inherit; }
.announcement-close:hover { opacity:1; }
.announcement-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* 图标：统一只调字号（.fa 已提供 font-family），不写内联 style */
.ann-ico { font-style: normal; line-height: 1; flex-shrink: 0; }
.announcement-bar > .ann-ico { font-size: 15px; }

/* ---------- 2. 容器兜底 + 配色（12 组） ---------- */
/* 无配色类的容器外层兜底（列表卡 / 轮播箭头 / 跑马灯）；必须写在 .ann-style-* 之前 */
.ann-rotator, .ann-list, .ann-marquee { --ann-accent: var(--mn-primary, #3b82f6); }

/* 6 组旧配色：色值原样保留 → 老数据视觉零变更（仅新增 --ann-accent 供新布局用） */
.ann-style-yellow  { --ann-bg:#fff8e1; --ann-border:#ffe082; --ann-text:#856404; --ann-accent:#d97706; --ann-chip-text:#fff; }
.ann-style-red     { --ann-bg:#ffebee; --ann-border:#ef9a9a; --ann-text:#b71c1c; --ann-accent:#dc2626; --ann-chip-text:#fff; }
.ann-style-gray    { --ann-bg:#f5f5f5; --ann-border:#ccc;     --ann-text:#555;    --ann-accent:#6b7280; --ann-chip-text:#fff; }
.ann-style-bluegray{ --ann-bg:#eceff1; --ann-border:#b0bec5;  --ann-text:#37474f; --ann-accent:#475569; --ann-chip-text:#fff; }
.ann-style-blue    { --ann-bg:#e3f2fd; --ann-border:#90caf9;  --ann-text:#0d47a1; --ann-accent:#2563eb; --ann-chip-text:#fff; }
.ann-style-green   { --ann-bg:#e8f5e9; --ann-border:#a5d6a7;  --ann-text:#1b5e20; --ann-accent:#16a34a; --ann-chip-text:#fff; }

/* 6 组新配色：全部变量化 → 暗夜星辰下自动适配 */
.ann-style-theme   { --ann-bg:var(--mn-bg-card,#fff); --ann-border:var(--mn-border,#e2e8f0); --ann-text:var(--mn-text,#1e293b); --ann-accent:var(--mn-primary,#3b82f6); --ann-chip-text:#fff; }
.ann-style-primary { --ann-bg:var(--mn-primary-subtle,#e6f1fb); --ann-border:var(--mn-primary,#185fa5); --ann-text:var(--mn-text,#1e293b); --ann-accent:var(--mn-primary,#185fa5); --ann-chip-text:#fff; }
.ann-style-success { --ann-bg:var(--mn-comp-alert-success-bg,#eaf3de); --ann-border:var(--mn-comp-alert-success-border,#639922); --ann-text:var(--mn-comp-alert-success-text,#155724); --ann-accent:var(--mn-success,#639922); --ann-chip-text:#fff; }
.ann-style-warning { --ann-bg:var(--mn-comp-alert-warning-bg,#faeeda); --ann-border:var(--mn-comp-alert-warning-border,#ba7517); --ann-text:var(--mn-comp-alert-warning-text,#856404); --ann-accent:var(--mn-warning,#ba7517); --ann-chip-text:#fff; }
.ann-style-danger  { --ann-bg:var(--mn-comp-alert-error-bg,#fcebeb); --ann-border:var(--mn-comp-alert-error-border,#a32d2d); --ann-text:var(--mn-comp-alert-error-text,#a32d2d); --ann-accent:var(--mn-error,#a32d2d); --ann-chip-text:#fff; }
.ann-style-dark    { --ann-bg:#1f2937; --ann-border:#374151; --ann-text:#f8fafc; --ann-accent:#60a5fa; --ann-chip-text:#fff; }

/* ---------- 3. 条目布局 ---------- */

/* 3.1 bar —— 基础 .announcement-bar 即最终形态，无附加规则（默认，向后兼容） */

/* 3.2 notice —— 通知条：胶囊 + 喇叭 + 加粗前缀 + 正文 + 日期（图1 同款） */
.ann-layout-notice { border-radius:999px; padding:9px 18px; gap:10px; background:var(--mn-bg-card,#fff); border-color:var(--mn-border,#e2e8f0); color:var(--mn-text,#1e293b); }
.ann-layout-notice .ann-notice-lead { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; color:var(--ann-accent); }
.ann-layout-notice .ann-notice-label { font-weight:500; white-space:nowrap; }
.ann-layout-notice .ann-notice-text { flex:1; min-width:0; font-weight:500; color:var(--mn-text,#1e293b); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ann-layout-notice a.ann-notice-text:hover { text-decoration:underline; }
.ann-layout-notice .ann-notice-date { flex-shrink:0; font-size:12px; color:var(--mn-text-muted,#94a3b8); }

/* 3.3 badge —— 标签式：实心圆角徽章 + 强调色文本（图2 同款） */
.ann-layout-badge { padding:8px 14px; background:var(--mn-bg-card,#fff); border-color:var(--mn-border,#e2e8f0); color:var(--mn-text,#1e293b); }
.ann-badge-chip { display:inline-flex; align-items:center; gap:5px; flex-shrink:0; padding:3px 10px; border-radius:6px; background:var(--ann-accent); color:var(--ann-chip-text,#fff); font-size:12px; line-height:1.7; }
.ann-badge-chip .ann-ico { font-size:12px; }
.ann-badge-chip-t { font-weight:500; white-space:nowrap; }
.ann-layout-badge .ann-badge-text { flex:1; min-width:0; color:var(--ann-accent); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ann-layout-badge a.ann-badge-text:hover { text-decoration:underline; }

/* 3.4 minimal —— 极简左边框：无底无边，仅 3px 强调色竖条 */
.ann-layout-minimal { background:transparent; border:none; border-left:3px solid var(--ann-accent); border-radius:0; padding:4px 0 4px 12px; margin-bottom:10px; color:var(--mn-text,#1e293b); max-height:none; overflow:visible; }
.ann-layout-minimal .ann-min-text { flex:1; min-width:0; }
.ann-layout-minimal a.ann-min-text { color:inherit; text-decoration:none; }
.ann-layout-minimal a.ann-min-text:hover { text-decoration:underline; }

/* 3.5 alert —— 图标提示条：圆形图标 + 标题 + 描述 + 关闭 */
.ann-layout-alert { border-radius:10px; padding:12px 14px; background:var(--mn-bg-card,#fff); border-color:var(--mn-border,#e2e8f0); color:var(--mn-text,#1e293b); align-items:flex-start; max-height:none; }
.ann-alert-ico { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--ann-accent); color:#fff; }
.ann-alert-ico .ann-ico { font-size:17px; }
.ann-alert-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ann-alert-title { font-weight:500; color:var(--mn-text,#1e293b); }
.ann-alert-desc { font-size:13px; color:var(--mn-text-secondary,#64748b); text-decoration:none; }
.ann-layout-alert a.ann-alert-desc:hover { text-decoration:underline; }

/* 3.6 card —— 图文卡片：方形图标 + 标题 + 摘要 + 「查看 →」 */
.ann-layout-card { border-radius:10px; padding:12px 14px; background:var(--mn-bg-card,#fff); border-color:var(--mn-border,#e2e8f0); color:var(--mn-text,#1e293b); max-height:none; }
.ann-card-ico { width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--mn-primary-subtle,#f0f3ff); color:var(--ann-accent); }
.ann-card-ico .ann-ico { font-size:20px; }
.ann-card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ann-card-title { font-weight:500; color:var(--mn-text,#1e293b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ann-card-desc { font-size:13px; color:var(--mn-text-secondary,#64748b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ann-card-more { flex-shrink:0; font-size:13px; color:var(--ann-accent); text-decoration:none; }
.ann-layout-card a.ann-card-more:hover { text-decoration:underline; }

/* ---------- 4. 容器模式 ---------- */

/* 4.1 轮播（scroll 无控件 / carousel 带箭头） */
.ann-rotator { position:relative; margin-bottom:16px; }
.ann-rotator-track { position:relative; }
.ann-rotator-item { display:none; }
.ann-rotator-item.is-active { display:block; }
.ann-rotator-item .announcement-bar { margin-bottom:0; }
.ann-rotator-hasnav .ann-layout-notice { padding-right:84px; }
.ann-rotator-hasnav .ann-layout-badge,
.ann-rotator-hasnav .ann-layout-alert { padding-right:74px; }
.ann-rotator-ctrl { position:absolute; top:50%; right:12px; transform:translateY(-50%); display:flex; align-items:center; gap:2px; }
.ann-rotator-btn { width:26px; height:26px; border:none; background:transparent; color:var(--mn-text-muted,#94a3b8); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; border-radius:6px; }
.ann-rotator-btn:hover { color:var(--ann-accent); background:var(--mn-bg-row-hover,#f1f5f9); }
.ann-rotator-btn .ann-ico { font-size:13px; }

/* 4.2 公告列表卡（list）：一个卡片容器，多条各占一行 */
.ann-list { margin-bottom:16px; border:1px solid var(--mn-border,#e2e8f0); border-radius:10px; background:var(--mn-bg-card,#fff); overflow:hidden; }
.ann-list-head { display:flex; align-items:center; gap:6px; padding:10px 14px; font-size:13px; font-weight:500; color:var(--mn-text-secondary,#64748b); border-bottom:1px solid var(--mn-border-light,#eef2f7); }
.ann-list-head .ann-ico { font-size:14px; color:var(--ann-accent); }
.ann-list-body { list-style:none; margin:0; padding:0; }
.ann-list-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--mn-border-light,#eef2f7); font-size:14px; color:var(--mn-text,#1e293b); }
.ann-list-row:last-child { border-bottom:none; }
.ann-list-row:hover { background:var(--mn-bg-row-hover,#f8fafc); }
.ann-list-ico { flex-shrink:0; color:var(--ann-accent); }
.ann-list-ico .ann-ico { font-size:13px; }
.ann-list-t { flex:1; min-width:0; color:inherit; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ann-list-row:hover .ann-list-t { color:var(--ann-accent); }
.ann-list-date { flex-shrink:0; font-size:12px; color:var(--mn-text-muted,#94a3b8); }
.ann-list-arrow { flex-shrink:0; font-size:11px; color:var(--mn-text-muted,#94a3b8); }

/* 4.3 横向跑马灯（marquee）：纯 CSS 动画，无 JS */
.ann-marquee { position:relative; margin-bottom:16px; overflow:hidden; border:1px solid var(--ann-border,#ffe082); border-radius:8px; background:var(--ann-bg,#fff8e1); color:var(--ann-text,#856404); font-size:14px; }
.ann-marquee-track { display:flex; width:max-content; align-items:center; white-space:nowrap; padding:10px 0; animation:ann-marquee-scroll var(--ann-marquee-dur, 20s) linear infinite; }
.ann-marquee:hover .ann-marquee-track { animation-play-state:paused; }
.ann-marquee-item { padding:0 24px; color:inherit; text-decoration:none; }
a.ann-marquee-item:hover { text-decoration:underline; }
@keyframes ann-marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ann-marquee-track { animation:none; } .ann-marquee { overflow-x:auto; } }

/* ---------- 5. 移动端收敛 ---------- */
@media (max-width: 768px) {
    .ann-layout-notice .ann-notice-date { display:none; }
    .ann-rotator-hasnav .ann-layout-notice { padding-right:18px; }
    .ann-layout-notice .ann-notice-text { white-space:normal; }
    .ann-layout-card .ann-card-more { display:none; }
    .ann-alert-ico { width:32px; height:32px; }
    .ann-alert-ico .ann-ico { font-size:15px; }
    .ann-list-date { display:none; }
}

/* ---------- 6. 后台：公告列表项（1.3.0 保留） ---------- */
.announcement-list-item { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--ann-border, #eab308); border-radius:8px; background:var(--ann-bg, #fefce8); color:var(--ann-text, #713f12); }
.announcement-list-item .ann-admin-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
@media (max-width: 768px) {
    .announcement-list-item .ann-admin-content { flex-basis:100%; min-width:0; }
    .announcement-list-item .ann-admin-actions { flex-basis:100%; margin-top:4px; }
}

/* ---------- 7. 后台：表单 / 预览 / 模式选择 ---------- */
.ann-form-row { display:flex; gap:12px; flex-wrap:wrap; }
.ann-form-col { flex:1 1 160px; min-width:160px; }
.ann-preview { margin:0 0 14px; }
.ann-preview-hd { font-size:12px; color:var(--mn-text-muted,#94a3b8); margin:0 0 6px; }
.ann-preview-box { border:1px dashed var(--mn-border,#e2e8f0); border-radius:10px; padding:12px; background:var(--mn-bg-body,#f8fafc); }
.ann-preview-box .announcement-bar { margin-bottom:0; }
.ann-preview-box .ann-list,
.ann-preview-box .ann-marquee,
.ann-preview-box .ann-rotator { margin-bottom:0; }
.ann-hint { font-size:12px; color:var(--mn-text-muted,#94a3b8); margin:4px 0 0; }
.ann-disabled { opacity:.45; pointer-events:none; }
.ann-swatch { display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:middle; margin-right:6px; border:1px solid rgba(0,0,0,.12); }
.ann-mode-list { display:flex; flex-direction:column; gap:8px; }
.ann-mode-opt { display:flex; align-items:flex-start; gap:8px; font-size:13px; }
.ann-mode-opt input { margin-top:3px; flex-shrink:0; }
.ann-mode-opt b { font-weight:500; }
.ann-mode-opt span { color:var(--mn-text-muted,#94a3b8); font-size:12px; }

/* ---------- 8. 编辑弹窗 ----------
   ⚠️ 弹窗 DOM 现已移入 <main class="admin-content"> 内（核心后台表单/按钮样式是 .admin-content 作用域）。
   以下自含样式作为「保底」保留：即使核心后台样式变更，弹窗也不会脱相。
   display:flex：显隐由 Alpine x-show 控制，视图内联 style="display:none" 负责初始隐藏。 */
.fl-modal-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:9999;display:flex;align-items:center;justify-content:center; }
.fl-modal { background:var(--mn-bg-card, #fff);border-radius:10px;width:560px;max-width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 8px 30px rgba(0,0,0,0.15); }
.fl-modal-header { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--mn-border-light, #eee); }
.fl-modal-header h2 { margin:0;font-size:16px; }
.fl-modal-close { background:none;border:none;font-size:24px;cursor:pointer;color:var(--mn-text-muted, #999);padding:0;line-height:1; }
.fl-modal-body { padding:20px; }
.fl-modal-field { margin-bottom:14px; }
.fl-modal-field label { display:block;font-size:13px;font-weight:500;margin-bottom:5px;color:var(--mn-text-secondary, #475569); }
.fl-modal-row { display:flex;gap:12px; }
.fl-modal-field-sm { flex:1; min-width:0; }
.fl-modal-footer { display:flex;justify-content:flex-end;gap:8px;padding:16px 20px;border-top:1px solid var(--mn-border-light, #eee); }
.fl-modal .form-input,
.fl-modal textarea.form-input,
.fl-modal input.form-input,
.fl-modal select.form-input { width:100%; padding:8px 12px; border:1px solid var(--mn-border, #e2e8f0); border-radius:6px; font-size:13px; color:var(--mn-text, #1e293b); background:var(--mn-bg-input, #ffffff); box-sizing:border-box; font-family:inherit; }
.fl-modal .form-input:focus { outline:none; border-color:var(--mn-primary, #3b82f6); box-shadow:0 0 0 3px rgba(59,130,246,0.15); }
.fl-modal .c-danger { color:var(--mn-error, #ef4444); }
.fl-modal .btn { display:inline-block; padding:8px 18px; border-radius:6px; border:none; cursor:pointer; font-size:13px; font-weight:500; text-decoration:none; line-height:1.4; transition:background 0.15s, box-shadow 0.15s; }
.fl-modal .btn-primary { background:var(--mn-primary, #3b82f6); color:var(--mn-text-inverse, #ffffff); }
.fl-modal .btn-primary:hover { background:var(--mn-primary-hover, #2563eb); }
.fl-modal .btn-secondary { background:var(--mn-bg-body, #f1f5f9); color:var(--mn-text-secondary, #475569); }

/* Alpine 弹窗初始隐藏：x-cloak 在 Alpine 初始化前隐藏元素，初始化后移除并交回 x-show 控制 */
[x-cloak] { display: none !important; }

/* ---------- 9. 后台工具类（收编内联样式） ---------- */
.ann-w-160 { width: 160px; }
.ann-w-120 { width: 120px; }
.ann-w-100 { width: 100px; }
.ann-w-140 { width: 140px; }
.ann-pt-24 { padding-top: 24px; }
.ann-mb-10 { margin: 0 0 10px; }
.ann-mt-12 { margin-top: 12px; }
.ann-flex-center-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ann-flex-col { display: flex; flex-direction: column; gap: 10px; }
.ann-content-flex { flex: 1; font-size: 14px; word-break: break-all; min-width: 200px; }
.ann-label-sub { font-size: 12px; opacity: 0.7; flex-shrink: 0; }
.ann-shrink-0 { flex-shrink: 0; }
.ann-edit-btn { cursor: pointer; }