/* ============================================================
   便条首页（/note/index.php）专属暗黑样式
   文件：/note/css/note_index_dark.css

   2026-10-29 暗黑风格改造：
     - 依赖 /common/css/dark_mode.css（body.dark-mode + --lo-* 变量重映射）
       和 /common/js/dark_mode.js（右上角 🌙/☀️ 切换，localStorage key=funnyai_darkMode）
     - note/css/funnystore_layout.css 里 .search-panel / .order-card /
       .card-header-custom / .info-col 等全是写死浅色，这里统一在暗色下改写。
     - 便签卡片本身用 PHP 动态背景色（公开=浅绿 / 私有=浅红 / 会员=浅黄），
       暗色下用低饱和深色替代（note-card--public/private/member）。
   ============================================================ */

/* ---------- 页面级容器 ---------- */
/* #toolbar 的 border 是内联 style（border:1px solid #dfdfdf），
   行内样式优先级高于样式表的 border-color，必须用 !important 才能覆盖 */
body.dark-mode #toolbar {
    background: var(--lo-card) !important;
    border-color: var(--lo-border) !important;
}
body.dark-mode .main-column {
    background: transparent;
}

/* ---------- 搜索面板 ---------- */
body.dark-mode .search-panel {
    background: var(--lo-card);
    border-color: var(--lo-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
body.dark-mode .search-panel .form-label {
    color: var(--lo-text-soft);
}
body.dark-mode .search-panel .form-input,
body.dark-mode .search-panel .form-select {
    background: var(--lo-input-bg);
    border-color: var(--lo-border);
    color: var(--lo-text);
}
body.dark-mode .search-panel .form-input:focus {
    border-color: var(--lo-primary);
    background: var(--lo-input-focus-bg);
}
body.dark-mode .search-panel .btn-secondary {
    background: var(--lo-btn-bg);
    border-color: var(--lo-btn-border);
    color: var(--lo-btn-text);
}
body.dark-mode .search-panel .btn-secondary:hover {
    background: var(--lo-btn-hover-bg);
    border-color: var(--lo-btn-hover-border);
    color: var(--lo-primary-600);
}
body.dark-mode .search-panel .btn-primary {
    background: var(--lo-primary);
    border-color: var(--lo-primary);
    color: #ffffff;
}
body.dark-mode .search-panel .btn-primary:hover {
    background: var(--lo-primary-600);
}

/* 便签卡右侧「显 示」等 .btn-secondary（不在 .search-panel 内） */
body.dark-mode .info-col .btn-secondary {
    background: var(--lo-btn-bg);
    border-color: var(--lo-btn-border);
    color: var(--lo-btn-text);
}
body.dark-mode .info-col .btn-secondary:hover {
    background: var(--lo-btn-hover-bg);
    border-color: var(--lo-btn-hover-border);
    color: var(--lo-primary-600);
}

/* ---------- 便签卡片 ---------- */
body.dark-mode .order-card {
    background: var(--lo-card);
    border-color: var(--lo-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
body.dark-mode .order-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

/* 便签公开性配色：浅绿/浅红/浅黄 → 暗色低饱和
   （class 由 PHP 输出：.note-card--public / --private / --member） */
body.dark-mode .order-card.note-card--public {
    background-color: #16232c !important;
}
body.dark-mode .order-card.note-card--private {
    background-color: #2a1b1f !important;
}
body.dark-mode .order-card.note-card--member {
    background-color: #2a2617 !important;
}

/* ---------- 卡片头 ---------- */
body.dark-mode .card-header-custom {
    background: rgba(148, 163, 184, 0.06);
    border-bottom-color: var(--lo-border);
}
body.dark-mode .order-id {
    color: var(--lo-primary-600);
}
body.dark-mode .time-info {
    color: var(--lo-muted);
    margin-left: 10px;
}

/* ---------- 卡片体 ---------- */
body.dark-mode .card-body-custom {
    color: var(--lo-text);
}
body.dark-mode .info-col {
    border-right-color: var(--lo-divider);
}
body.dark-mode .info-col h4 {
    color: var(--lo-muted);
}
body.dark-mode .info-col a {
    color: var(--lo-primary);
}
body.dark-mode .info-col a:hover {
    color: var(--lo-primary-600);
}

/* wiky 解析出来的标题/列表在暗色下需要继承浅色文字 */
body.dark-mode .info-col h1,
body.dark-mode .info-col h2,
body.dark-mode .info-col h3,
body.dark-mode .info-col strong {
    color: var(--lo-text);
}
body.dark-mode .info-col hr {
    border-color: var(--lo-border);
}

/* ---------- 标签 ---------- */
body.dark-mode .tags_show a.tag,
body.dark-mode a.tag {
    background: rgba(96, 165, 250, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.32);
    color: var(--lo-primary-600);
    border-radius: 999px;
    padding: 2px 10px;
}
body.dark-mode .tags_show a.tag:hover,
body.dark-mode a.tag:hover {
    background: rgba(96, 165, 250, 0.28);
    color: var(--lo-primary-600);
}

/* ---------- 提示文字 ---------- */
.note-hint {
    color: var(--lo-primary);
}
body.dark-mode .note-hint {
    color: var(--lo-primary-600);
}

/* ---------- 代码块 / textarea ---------- */
body.dark-mode textarea.code {
    background: #0f172a;
    color: var(--lo-text);
    border: 1px solid var(--lo-border);
}

/* ---------- 分页脚 ---------- */
body.dark-mode .mj_pagefoot_green a {
    border-color: var(--lo-border);
    background: var(--lo-card);
    color: var(--lo-link);
}
body.dark-mode .mj_pagefoot_green a:hover {
    border-color: var(--lo-primary);
    background: var(--lo-btn-hover-bg);
    color: var(--lo-link-hover);
}
body.dark-mode .mj_pagefoot_green span.current {
    color: var(--lo-text);
}
body.dark-mode .mj_pagefoot_green span.info {
    color: var(--lo-muted);
}

/* ---------- w2ui 顶部工具条 ---------- */
body.dark-mode .w2ui-toolbar {
    background-color: var(--lo-card);
    color: var(--lo-text);
}
body.dark-mode .w2ui-toolbar table.w2ui-button {
    background-color: transparent;
}
body.dark-mode .w2ui-toolbar table.w2ui-button:hover {
    background-color: var(--lo-card-hover-bg);
}
body.dark-mode .w2ui-toolbar table.w2ui-button .w2ui-tb-caption {
    color: var(--lo-text);
}
body.dark-mode .w2ui-toolbar table.w2ui-button .w2ui-tb-image > span {
    color: var(--lo-muted);
}
body.dark-mode .w2ui-drop-menu {
    color: var(--lo-text);
    background-color: var(--lo-card);
}
body.dark-mode .w2ui-drop-menu .w2ui-item-even {
    color: var(--lo-text);
    background-color: var(--lo-card);
}
body.dark-mode .w2ui-drop-menu .w2ui-item-odd {
    color: var(--lo-text);
    background-color: var(--lo-card-hover-bg);
}
body.dark-mode .w2ui-drop-menu .w2ui-item-group {
    color: var(--lo-text);
    background-color: var(--lo-card-hover-bg);
    border-bottom-color: var(--lo-border);
}
body.dark-mode .w2ui-overlay {
    background-color: rgba(15, 23, 42, 0.6);
}

/* ---------- bttn 按钮（工具切换区） ---------- */
body.dark-mode .bttn-fill {
    background: var(--lo-btn-bg);
    color: var(--lo-text);
    border-color: var(--lo-btn-border);
}

/* ---------- 页面滚动条 ---------- */
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--lo-bg);
}
body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--lo-card-hover-bg);
    border-radius: 5px;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--lo-border);
}