/* ==========================================================================
   QUBIE News — shared styles for admin pages (Sources, Keywords)
   Reuses brand fonts + palette from index.html
   ========================================================================== */

/* ---- Brand Fonts ---- */
@font-face { font-family: "Apercu Pro"; src: url("fonts/apercu_regular_pro.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Apercu Pro"; src: url("fonts/apercu_regular_italic_pro.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Apercu Pro"; src: url("fonts/apercu_medium_pro.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Apercu Pro"; src: url("fonts/apercu_bold_pro.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Apercu Pro"; src: url("fonts/apercu_bold_italic_pro.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Chap"; src: url("fonts/Chap-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
    --cream:       #EEE8DF;
    --cream-dim:   #E5DED2;
    --dark-purple: #2D1B30;
    --light-purple:#7D4A6E;
    --pink:        #D57DB2;
    --near-black:  #1A1416;
    --soft-text:   #3A3036;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Apercu Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background: var(--cream);
    color: var(--near-black);
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--dark-purple); text-decoration: none; border-bottom: 1px solid var(--dark-purple); }
a:hover { color: var(--pink); border-bottom-color: var(--pink); }

/* ---- Top site nav (present on all pages) ---- */
.site-nav {
    background: var(--cream-dim);
    border-bottom: 1px solid rgba(45, 27, 48, 0.2);
    padding: 10px 24px;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.site-nav .nav-public,
.site-nav .nav-admin {
    display: flex;
    align-items: center;
}
.site-nav a {
    text-decoration: none;
    border-bottom: none;
    margin: 0 6px;
    padding: 4px 8px;
}
.site-nav .sep {
    color: rgba(45, 27, 48, 0.35);
    padding: 0 2px;
    font-weight: 400;
}

/* Public group — primary color, sits on the left */
.site-nav .nav-public a { color: var(--dark-purple); }
.site-nav .nav-public a:hover { color: var(--pink); }
.site-nav .nav-public a.active {
    color: var(--pink);
    border-bottom: 2px solid var(--pink);
}

/* Admin group — muted, inside a subtle box, sits on the right */
.site-nav .nav-admin {
    border: 1px solid rgba(45, 27, 48, 0.25);
    border-radius: 3px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.15);
}
.site-nav .nav-admin a {
    color: var(--light-purple);
    opacity: 0.8;
}
.site-nav .nav-admin a:hover { color: var(--pink); opacity: 1; }
.site-nav .nav-admin a.active {
    color: var(--pink);
    opacity: 1;
    border-bottom: 2px solid var(--pink);
}
.site-nav .nav-admin .sep { color: rgba(125, 74, 110, 0.4); }

/* ---- Admin page container ---- */
.admin-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 24px 80px;
}
.admin-page h1 {
    font-family: "Chap", "Apercu Pro", sans-serif;
    font-weight: 400;
    font-size: 40px;
    letter-spacing: 0.04em;
    color: var(--dark-purple);
    text-transform: uppercase;
    margin: 0 0 4px;
}
.admin-page .subtitle {
    font-style: italic;
    font-size: 12px;
    color: var(--soft-text);
    margin: 0 0 40px;
    letter-spacing: 0.05em;
}

/* ---- Forms ---- */
.form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
input[type="text"], select, textarea {
    font-family: inherit;
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid var(--dark-purple);
    background: var(--cream);
    color: var(--near-black);
    border-radius: 2px;
}
input[type="text"]:focus, select:focus, textarea:focus {
    outline: 2px solid var(--pink);
    outline-offset: -2px;
}

button {
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 18px;
    border: 1px solid var(--dark-purple);
    background: var(--dark-purple);
    color: var(--cream);
    border-radius: 2px;
    cursor: pointer;
}
button:hover { background: var(--pink); border-color: var(--pink); color: var(--near-black); }
button.secondary {
    background: transparent;
    color: var(--dark-purple);
}
button.secondary:hover { background: transparent; color: var(--pink); border-color: var(--pink); }
button.danger {
    background: transparent;
    border-color: var(--light-purple);
    color: var(--light-purple);
    padding: 4px 10px;
    font-size: 11px;
}
button.danger:hover {
    background: var(--pink);
    color: var(--near-black);
    border-color: var(--pink);
}

/* ---- Status messages ---- */
.flash {
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
    border-left: 3px solid var(--pink);
    background: var(--cream-dim);
    font-style: italic;
}
.flash.error {
    border-left-color: #c55;
    color: #c55;
}

/* ---- Data tables ---- */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 20px;
}
table.data th, table.data td {
    text-align: left;
    padding: 8px 10px;
    vertical-align: top;
    border-bottom: 1px solid rgba(45, 27, 48, 0.15);
}
table.data th {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dark-purple);
    font-weight: 700;
    background: var(--cream-dim);
}
table.data tr.status-error td { background: rgba(212, 125, 125, 0.12); }
table.data tr.status-nohits td { background: rgba(255, 242, 204, 0.3); }
table.data tr.status-working td { background: rgba(217, 234, 211, 0.25); }

table.data td.mono { font-family: monospace; font-size: 11px; color: var(--soft-text); }

/* ---- Tabs (for Sources page) ---- */
.tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--dark-purple);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.tab {
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--soft-text);
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    border-radius: 2px 2px 0 0;
}
.tab:hover { color: var(--dark-purple); }
.tab.active {
    color: var(--dark-purple);
    background: var(--cream-dim);
    border-color: rgba(45, 27, 48, 0.3);
    border-bottom: 1px solid var(--cream-dim);
    margin-bottom: -1px;
}

/* ---- Badges (reused from the Report) ---- */
.badge {
    display: inline-block;
    padding: 2px 7px 1px;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-style: normal;
}
.badge-paper    { background: var(--dark-purple);  color: var(--cream); }
.badge-preprint { background: var(--light-purple); color: var(--cream); }
.badge-news     { background: var(--pink);         color: var(--near-black); }
.badge-forums   { background: transparent; color: var(--dark-purple); border: 1px solid var(--dark-purple); }
.badge-social   { background: transparent; color: var(--light-purple); border: 1px solid var(--light-purple); }
.badge-video    { background: var(--cream); color: var(--dark-purple); border: 1px solid var(--dark-purple); }

/* ---- Keyword tag (on the Keywords page) ---- */
.kw-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
    margin: 4px;
    border: 1px solid var(--light-purple);
    border-radius: 2px;
    font-size: 13px;
    color: var(--dark-purple);
    background: var(--cream);
}
.kw-tag button {
    padding: 2px 6px;
    font-size: 11px;
    background: transparent;
    color: var(--light-purple);
    border: none;
    cursor: pointer;
    letter-spacing: 0;
}
.kw-tag button:hover { color: var(--pink); background: transparent; }

.empty-state {
    color: var(--soft-text);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ---- Save (bookmark) button — appears on every feed item ---- */
button.save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    cursor: pointer;
    transition: transform 0.1s;
    color: var(--pink);
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
}
button.save-btn:hover { transform: scale(1.12); }
button.save-btn:focus { outline: none; }
button.save-btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 3px; }
button.save-btn svg { width: 16px; height: 20px; display: block; overflow: visible; }
/* Stroke + fill are also set inline by saves.js for robustness, but these
   CSS rules act as the styling floor when JS hasn't synced yet. */
button.save-btn svg path { transition: fill 0.15s; }
button.save-btn.busy { opacity: 0.55; pointer-events: none; }
button.save-btn.logged-out:hover { transform: scale(1.04); }