/* TeamWiki Frontend CSS v1.0.0 */
/* Primary colour is injected as --tw-primary via wp_add_inline_style */

:root {
    --tw-primary: #3b82f6;
    --tw-primary-d: #2563eb;
    --tw-text: #1e293b;
    --tw-muted: #64748b;
    --tw-border: #e2e8f0;
    --tw-bg: #f8fafc;
    --tw-radius: 10px;
}

/* ── Progress bar ─────────────────────────────────────────────── */
.tw-progress-wrap { background: var(--tw-border); border-radius: 99px; height: 8px; overflow: hidden; }
.tw-progress-fill { height: 100%; background: var(--tw-primary); border-radius: 99px; transition: width .4s ease; }

/* ── Read/Unread buttons ─────────────────────────────────────── */
.tw-read-btn, .tw-unread-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 20px; border-radius: 9px;
    font-size: .88rem; font-weight: 600; cursor: pointer;
    border: none; transition: background .2s, transform .1s;
}
.tw-read-btn   { background: var(--tw-primary); color: #fff; }
.tw-read-btn:hover { background: var(--tw-primary-d); transform: translateY(-1px); }
.tw-unread-btn { background: var(--tw-bg); color: var(--tw-muted); border: 1px solid var(--tw-border); }
.tw-unread-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.tw-read-badge { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 9px; background: #dcfce7; color: #166534; font-weight: 700; font-size: .88rem; }
.tw-read-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.teamwiki-sidebar { display: flex; flex-direction: column; gap: 16px; }
.teamwiki-sidebar-card {
    background: #fff; border: 1px solid var(--tw-border);
    border-radius: var(--tw-radius); padding: 16px;
}
.teamwiki-sidebar-card-header {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--tw-muted);
    margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
}
.teamwiki-sidebar-icon { font-size: 1rem; }

/* TOC */
.teamwiki-toc-list { margin: 0; padding: 0 0 0 16px; list-style: decimal; }
.teamwiki-toc-item { margin-bottom: 5px; font-size: .82rem; line-height: 1.4; }
.teamwiki-toc-item a { color: var(--tw-text); text-decoration: none; }
.teamwiki-toc-item a:hover, .teamwiki-toc-item a.active { color: var(--tw-primary); }
.teamwiki-toc-level-3 { margin-left: 14px; }
.teamwiki-toc-level-4 { margin-left: 28px; }

/* Next unread */
.teamwiki-sidebar-next-link { display: block; text-decoration: none; }
.teamwiki-sidebar-next-title { font-weight: 700; color: var(--tw-text); margin-bottom: 4px; font-size: .9rem; }
.teamwiki-sidebar-next-cat   { font-size: .75rem; color: var(--tw-primary); font-weight: 600; margin-bottom: 6px; }
.teamwiki-sidebar-next-excerpt { font-size: .8rem; color: var(--tw-muted); margin-bottom: 8px; line-height: 1.5; }
.teamwiki-sidebar-next-cta { font-size: .8rem; font-weight: 700; color: var(--tw-primary); }

/* Similar entries */
.teamwiki-sidebar-similar-list { list-style: none; margin: 0; padding: 0; }
.teamwiki-sidebar-similar-item { margin-bottom: 8px; font-size: .85rem; }
.teamwiki-sidebar-similar-item a { display: flex; align-items: flex-start; gap: 7px; color: var(--tw-text); text-decoration: none; }
.teamwiki-sidebar-similar-item a:hover { color: var(--tw-primary); }
.teamwiki-sidebar-similar-item.is-read a { color: var(--tw-muted); }
.teamwiki-read-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; flex-shrink: 0; margin-top: 5px; }
.teamwiki-read-dot.is-read { background: var(--tw-primary); }

/* Progress */
.teamwiki-sidebar-progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .82rem; }
.teamwiki-sidebar-progress-label strong { color: var(--tw-primary); font-weight: 700; }
.teamwiki-sidebar-progress-track { background: var(--tw-border); border-radius: 99px; height: 8px; overflow: hidden; }
.teamwiki-sidebar-progress-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.teamwiki-sidebar-archive-link { display: block; margin-top: 12px; font-size: .8rem; font-weight: 700; color: var(--tw-primary); text-decoration: none; }

/* ── Search ─────────────────────────────────────────────────── */
.tw-search-row { position: relative; }
.tw-search-dropdown {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid var(--tw-border); border-radius: var(--tw-radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.1); z-index: 9999; max-height: 400px; overflow-y: auto;
}
.tw-search-results-header { padding: 8px 14px; font-size: .75rem; color: var(--tw-muted); border-bottom: 1px solid var(--tw-border); }
.tw-search-result-item { display: block; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid var(--tw-border); transition: background .15s; }
.tw-search-result-item:last-child { border-bottom: none; }
.tw-search-result-item:hover { background: var(--tw-bg); }
.tw-search-result-title { font-weight: 600; font-size: .88rem; color: var(--tw-text); margin-bottom: 3px; }
.tw-search-result-excerpt { font-size: .8rem; color: var(--tw-muted); margin-bottom: 4px; }
.tw-search-result-meta { font-size: .75rem; color: var(--tw-muted); }
.tw-search-read   { color: #166534; }
.tw-search-unread { color: #dc2626; }
.tw-search-match-type { font-size: .72rem; background: #eff6ff; color: var(--tw-primary); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.tw-search-loading, .tw-search-empty { padding: 14px; font-size: .85rem; color: var(--tw-muted); text-align: center; }
mark.tw-hl { background: #fef9c3; color: inherit; border-radius: 2px; }

/* ── Toast ──────────────────────────────────────────────────── */
#tw-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 99999;
    padding: 12px 20px; border-radius: var(--tw-radius);
    font-size: .88rem; font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,.15);
    opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s;
}
#tw-toast.visible { opacity: 1; transform: translateY(0); }
.tw-toast-success { background: #dcfce7; color: #166534; }
.tw-toast-info    { background: #eff6ff; color: #1e40af; }
.tw-toast-error   { background: #fef2f2; color: #dc2626; }

/* ── Category tabs ─────────────────────────────────────────── */
.tw-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 2px solid var(--tw-border); margin-bottom: 20px; }
.tw-tab {
    padding: 9px 18px; font-size: .85rem; font-weight: 600;
    background: none; border: none; cursor: pointer;
    color: var(--tw-muted); border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.tw-tab:hover   { color: var(--tw-text); }
.tw-tab.active  { color: var(--tw-primary); border-bottom-color: var(--tw-primary); }
.tw-panel { display: none; }
.tw-panel.active { display: block; }