/* ============================================================
 * list_remind.css — 2026-10-23 从 list_remind.php 内联样式提取
 * 颜色统一走 funnystore_theme.css 的 --fs-* 主题变量
 * 默认暗黑，右上角 ☀️/🌙 浮动按钮由 funnystore_theme.js 自动创建
 * ============================================================ */
body {
    margin: 0;
    background-color: var(--fs-bg);
    color: var(--fs-text);
}
.hilite {
    background: #fda;
}
td {
    white-space: nowrap;
    overflow: hidden;
}

/* 自定义语义色：浅色默认 + 暗黑覆盖 */
:root {
    --rm-strong-bg: #111827;
    --rm-strong-text: #ffffff;
    --rm-accent: #667eea;
    --rm-accent-hover: #5a6fe3;
    --rm-danger-bg: #fee2e2;
    --rm-danger-text: #991b1b;
    --rm-danger-hover: #fecaca;
    --rm-tab-bg: #f8fafc;
    --rm-empty-border: #cbd5e1;
    --rm-empty-text: #475569;
}
body[data-theme="dark"] {
    --rm-strong-bg: #e2e8f0;
    --rm-strong-text: #0f172a;
    --rm-accent: #818cf8;
    --rm-accent-hover: #a5b4fc;
    --rm-danger-bg: rgba(239, 68, 68, .18);
    --rm-danger-text: #fca5a5;
    --rm-danger-hover: rgba(239, 68, 68, .32);
    --rm-tab-bg: #0b1220;
    --rm-empty-border: #475569;
    --rm-empty-text: #94a3b8;
}

.remind-page {
    width: min(1100px, 100%);
    margin: 0 auto;
    padding: 16px 12px 40px;
    box-sizing: border-box;
}
.remind-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    color: #fff;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.remind-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}
.remind-subtitle {
    opacity: .9;
    margin-top: 6px;
    font-size: 13px;
}
.remind-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.remind-actions a {
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, .08);
}
.remind-actions a:hover {
    background: rgba(255, 255, 255, .18);
}
.remind-panel {
    margin-top: 14px;
    background: var(--fs-bg-card);
    border-radius: 14px;
    box-shadow: var(--fs-shadow);
    border: 1px solid var(--fs-border);
    padding: 14px;
}
.remind-search {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.remind-search input[type="text"] {
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--fs-border);
    background: var(--fs-bg-soft);
    color: var(--fs-text);
    padding: 0 12px;
    min-width: 260px;
    outline: none;
}
.remind-search input[type="text"]::placeholder {
    color: var(--fs-text-soft);
}
.remind-search button {
    height: 38px;
    border-radius: 10px;
    border: 0;
    padding: 0 14px;
    background: var(--rm-accent);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.remind-search button:hover {
    background: var(--rm-accent-hover);
}
.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--fs-border);
    background: var(--rm-tab-bg);
    color: var(--fs-text);
    text-decoration: none;
    font-weight: 700;
}
.tab .cnt {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--rm-strong-bg);
    color: var(--rm-strong-text);
    font-size: 12px;
}
.tab.active {
    background: var(--rm-strong-bg);
    border-color: var(--rm-strong-bg);
    color: var(--rm-strong-text);
}
.tab.active .cnt {
    background: rgba(127, 127, 127, .25);
}
.remind-list {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.remind-item {
    display: flex;
    gap: 12px;
    align-items: stretch;
    border: 1px solid var(--fs-border);
    background: var(--fs-bg-card);
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--fs-shadow);
}
.remind-time {
    width: 120px;
    min-width: 120px;
    background: var(--fs-bg-soft);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.remind-time .t {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--fs-text);
    line-height: 1;
}
.remind-time .d {
    margin-top: 8px;
    font-size: 12px;
    color: var(--fs-text-soft);
}
.remind-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
.remind-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--fs-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.remind-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--fs-text-soft);
}
.remind-meta a {
    color: var(--fs-link);
}
.remind-meta a:hover {
    color: var(--fs-link-hover);
}
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--fs-border);
    background: var(--fs-bg-soft);
    color: var(--fs-text);
}
.badge.todo {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}
.badge.daily {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}
.badge.once {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.badge.weekly {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #5b21b6;
}
.badge.monthly {
    background: #fdf2f8;
    border-color: #fbcfe8;
    color: #9d174d;
}
.badge.yearly {
    background: #f0f9ff;
    border-color: #bae6fd;
    color: #0c4a6e;
}

.remind-ops {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}
.remind-ops button {
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 800;
}
.btn-edit {
    background: var(--rm-strong-bg);
    color: var(--rm-strong-text);
}
.btn-edit:hover {
    opacity: .85;
}
.btn-del {
    background: var(--rm-danger-bg);
    color: var(--rm-danger-text);
}
.btn-del:hover {
    background: var(--rm-danger-hover);
}

.empty {
    margin-top: 14px;
    padding: 18px;
    border: 1px dashed var(--rm-empty-border);
    border-radius: 14px;
    background: var(--fs-bg-soft);
    color: var(--rm-empty-text);
}

/* 暗黑覆盖：徽章换成半透明深底 + 亮色文字 */
body[data-theme="dark"] .badge.todo {
    background: rgba(251, 146, 60, .16);
    border-color: rgba(251, 146, 60, .5);
    color: #fdba74;
}
body[data-theme="dark"] .badge.daily {
    background: rgba(52, 211, 153, .16);
    border-color: rgba(52, 211, 153, .5);
    color: #6ee7b7;
}
body[data-theme="dark"] .badge.once {
    background: rgba(96, 165, 250, .16);
    border-color: rgba(96, 165, 250, .5);
    color: #93c5fd;
}
body[data-theme="dark"] .badge.weekly {
    background: rgba(167, 139, 250, .16);
    border-color: rgba(167, 139, 250, .5);
    color: #c4b5fd;
}
body[data-theme="dark"] .badge.monthly {
    background: rgba(244, 114, 182, .16);
    border-color: rgba(244, 114, 182, .5);
    color: #f9a8d4;
}
body[data-theme="dark"] .badge.yearly {
    background: rgba(125, 211, 252, .16);
    border-color: rgba(125, 211, 252, .5);
    color: #7dd3fc;
}
body[data-theme="dark"] .hilite {
    background: rgba(253, 170, 34, .35);
}