/* ==========================================================================
   styles.css
   Single stylesheet — public + admin.
   CSS custom properties are set inline in header.php from DB settings.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Custom properties — defaults (overridden by inline style in header.php)
   -------------------------------------------------------------------------- */
:root {
    --accent:        #2563EB;
    --accent-hover:  color-mix(in srgb, var(--accent) 80%, black);
    --font-heading:  'IBM Plex Sans', system-ui, sans-serif;
    --font-body:     'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:     "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

    /* Colour palette */
    --text-primary:   #111827;
    --text-secondary: #6b7280;
    --text-muted:     #9ca3af;
    --border:         #e5e7eb;
    --bg:             #ffffff;
    --bg-subtle:      #f9fafb;
    --tag-bg:         #f3f4f6;
    --tag-text:       #374151;

    /* Layout */
    --content-width:  680px;
    --wide-width:     900px;
    --spacing:        1.5rem;
    --radius:         4px;
}


/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family:     var(--font-body);
    color:           var(--text-primary);
    background:      var(--bg);
    line-height:     1.7;
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

ul,
ol {
    list-style: none;
}


/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.site-main {
    flex: 1;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 1.75rem var(--spacing) 2.5rem;
}

/* --------------------------------------------------------------------------
   Site header / navigation
   -------------------------------------------------------------------------- */
.site-header {
    background: var(--bg);
    padding:    2rem 0 0;
}

.site-header__inner {
    max-width:     var(--content-width);
    margin:        0 auto;
    padding:       0 var(--spacing) 1.25rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    border-bottom: 1px solid var(--border);
}

/* Avatar */
.site-header__avatar-link {
    flex-shrink:     0;
    display:         block;
    text-decoration: none;
}

.site-header__avatar {
    width:         72px;
    height:        72px;
    border-radius: 6px;
    object-fit:    cover;
    display:       block;
}

/* Identity: name + nav stacked */
.site-header__identity {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
}

.site-header__name {
    font-family:     var(--font-heading);
    font-weight:     700;
    font-size:       1.35rem;
    color:           var(--text-primary);
    text-decoration: none;
    line-height:     1.2;
}

.site-header__name:hover {
    color:           var(--text-primary);
    text-decoration: none;
}

.site-nav {
    display:  flex;
    align-items: center;
    gap:      1rem;
    flex-wrap: wrap;
}

.site-nav__link {
    font-size:       0.9rem;
    color:           var(--accent);
    text-decoration: none;
    transition:      color 0.15s;
}

.site-nav__link:hover {
    color:           var(--accent-hover);
    text-decoration: underline;
}

/* Rule is now border-bottom on .site-header__inner — no separate element needed */
.site-header__rule {
    display: none;
}


/* --------------------------------------------------------------------------
   Home intro — optional rich text above the post list
   -------------------------------------------------------------------------- */
.home-intro {
    margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   Post index — home & archive (year-grouped list)
   -------------------------------------------------------------------------- */
.post-index {
    /* inherits from .site-main */
}

.post-index__year {
    margin-bottom: 1.5rem;
}

.post-index__year-heading {
    font-family:   var(--font-heading);
    font-size:     1.6rem;
    font-weight:   700;
    color:         var(--text-primary);
    margin-bottom: 0.35rem;
    line-height:   1.2;
}

.post-index__list {
    display:        flex;
    flex-direction: column;
    gap:            0;
    list-style:     none;
}

.post-index__item {
    display:       grid;
    grid-template-columns: 4.5rem 1fr;
    align-items:   baseline;
    gap:           0.75rem;
    padding:       0.25rem 0;
}

.post-index__date {
    font-size:            0.875rem;
    color:                var(--text-secondary);
    white-space:          nowrap;
    font-variant-numeric: tabular-nums;
}

.post-index__title {
    font-size:       1rem;
    color:           var(--accent);
    text-decoration: none;
    transition:      color 0.12s;
}

.post-index__title:hover {
    color:           var(--accent-hover);
    text-decoration: none;
}

.post-list__empty {
    color:     var(--text-secondary);
    font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Post cards — used on tag archive pages
   -------------------------------------------------------------------------- */
.post-list {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        2rem;
    margin-top: 2rem;
}

.post-card__title {
    font-family: var(--font-heading);
    font-size:   1.25rem;
    font-weight: 700;
    margin:      0 0 0.3rem;
    line-height: 1.3;
}

.post-card__link {
    color:           var(--accent);
    text-decoration: none;
}

.post-card__link:hover {
    color:           var(--accent-hover);
    text-decoration: underline;
}

.post-card__date {
    display:   block;
    font-size: 0.875rem;
    color:     var(--text-secondary);
    margin-bottom: 0.5rem;
}

.post-card__excerpt {
    margin:    0.5rem 0 0.75rem;
    color:     var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.post-card__footer {
    margin-top: 0.5rem;
}

/* Signals style — large date + title, flat list */
.post-index__list--signals {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        0.4rem;
}

.post-index__item--signals {
    display:               grid;
    grid-template-columns: max-content 1fr;
    gap:                   1.25rem;
    align-items:           start;
}

.post-index__date--signals {
    font-size:   1.1rem;
    color:       var(--text-muted);
    white-space: nowrap;
    line-height: 1.4;
}

.post-index__title--signals {
    font-size:       1.1rem;
    color:           var(--accent);
    text-decoration: none;
    line-height:     1.4;
    transition:      color 0.12s;
}

.post-index__title--signals:hover {
    color:           var(--accent);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   List page header (tag, archive)
   -------------------------------------------------------------------------- */
.list-header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.list-header__eyebrow {
    font-size:      0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--text-muted);
    margin-bottom:  0.25rem;
}

.list-header__title {
    font-family:  var(--font-heading);
    font-size:    2rem;
    font-weight:  700;
    line-height:  1.2;
}

.list-header__count {
    font-size:   0.85rem;
    color:       var(--text-secondary);
    margin-top:  0.4rem;
}

/* Tag page header — compact, no heavy border */
.tag-header {
    display:       flex;
    align-items:   baseline;
    gap:           0.75rem;
    margin-bottom: 2rem;
}

.tag-header__title {
    font-family:  var(--font-heading);
    font-size:    1.5rem;
    font-weight:  600;
    line-height:  1.2;
    margin:       0;
}

.tag-header__count {
    font-size: 0.875rem;
    color:     var(--text-muted);
}


/* --------------------------------------------------------------------------
   Tag pills
   -------------------------------------------------------------------------- */
.tag-list {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.4rem;
    list-style: none;
}

.tag {
    display:         inline-block;
    padding:         0.2em 0.55em;
    background:      var(--tag-bg);
    color:           var(--tag-text);
    font-size:       0.78rem;
    font-weight:     500;
    border-radius:   var(--radius);
    text-decoration: none;
    transition:      background 0.15s, color 0.15s;
}

.tag:hover {
    background:      var(--accent);
    color:           #fff;
    text-decoration: none;
}

.tag--active {
    background: var(--accent);
    color:      #fff;
}

.tag--small {
    font-size: 0.72rem;
    padding:   0.15em 0.45em;
}


/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-top:      3rem;
    padding-top:     1.5rem;
    border-top:      1px solid var(--border);
    font-size:       0.9rem;
}

.pagination__prev,
.pagination__next {
    color:           var(--accent);
    text-decoration: none;
}

.pagination__prev:hover,
.pagination__next:hover {
    text-decoration: underline;
}

.pagination__info {
    color: var(--text-secondary);
}


/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */
.post__header {
    margin-bottom: 1.5rem;
}

.post__title {
    font-family:   var(--font-heading);
    font-size:     2.2rem;
    font-weight:   700;
    line-height:   1.2;
    margin-bottom: 0.75rem;
}

.post__tags {
    margin-top: 2rem;
}

/* Post footer — date, back link, edit link */
.post__footer {
    margin-top:    1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           0.55rem;
}

.post__footer-item {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.875rem;
    color:       var(--text-secondary);
}

.post__footer-icon {
    flex-shrink: 0;
    color:       var(--text-muted);
}

.post__footer-item a {
    color:           var(--text-secondary);
    text-decoration: none;
    transition:      color 0.12s;
}

.post__footer-item a:hover {
    color:           var(--accent);
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Prose — rich text body (posts and static pages)
   -------------------------------------------------------------------------- */
.prose {
    font-size:   1rem;
    line-height: 1.75;
    color:       var(--text-primary);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family:  var(--font-heading);
    font-weight:  700;
    line-height:  1.3;
    margin-top:   2rem;
    margin-bottom: 0.75rem;
    color:        var(--text-primary);
}

.prose h1 { font-size: 1.75rem; }
.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.15rem; }
.prose h4 { font-size: 1rem; }

.prose p {
    margin-bottom: 1.25rem;
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose a {
    color:           var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: var(--accent-hover);
}

.prose ul,
.prose ol {
    margin-bottom: 1.25rem;
    padding-left:  1.5rem;
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: 0.4rem;
}

.prose li > ul,
.prose li > ol {
    margin-top:    0.4rem;
    margin-bottom: 0;
}

.prose blockquote {
    border-left:   2px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background:    color-mix(in srgb, var(--accent) 3%, transparent);
    border-radius: 0 6px 6px 0;
    margin:        1.75rem 0;
    padding:       1rem 1.25rem;
    color:         var(--text-secondary);
    font-style:    italic;
}

.prose code {
    font-family:      var(--font-mono);
    font-size:        0.875em;
    background:       var(--bg-subtle);
    border:           1px solid var(--border);
    padding:          0.1em 0.35em;
    border-radius:    var(--radius);
}

.prose pre {
    background:    var(--bg-subtle);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1.25rem;
    overflow-x:    auto;
    margin:        1.5rem 0;
    font-size:     0.875rem;
    line-height:   1.6;
}

.prose pre code {
    background:  none;
    border:      none;
    padding:     0;
    font-size:   inherit;
}

.prose img {
    max-width:     100%;
    height:        auto;
    border-radius: var(--radius);
    margin:        1.5rem 0;
}

.prose hr {
    border:        none;
    border-top:    1px solid var(--border);
    margin:        2.5rem 0;
}

.prose table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9rem;
    margin:          1.5rem 0;
}

.prose th,
.prose td {
    border:   1px solid var(--border);
    padding:  0.5rem 0.75rem;
    text-align: left;
}

.prose th {
    background: var(--bg-subtle);
    font-weight: 600;
}

.prose strong { font-weight: 700; }
.prose em     { font-style: italic; }


/* --------------------------------------------------------------------------
   Post navigation (prev / next)
   -------------------------------------------------------------------------- */
.post-nav {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             1.5rem;
    margin-top:      3rem;
}

.post-nav__link {
    display:         flex;
    flex-direction:  column;
    gap:             0.25rem;
    text-decoration: none;
    color:           inherit;
}

.post-nav__link:hover {
    text-decoration: none;
    color:           inherit;
}

.post-nav__next {
    text-align: right;
}

.post-nav__label {
    font-size:  0.8rem;
    color:      var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.post-nav__title {
    font-family:  var(--font-heading);
    font-size:    0.95rem;
    font-weight:  600;
    color:        var(--text-primary);
    transition:   color 0.15s;
}

.post-nav__link:hover .post-nav__title {
    color: var(--accent-hover);
}


/* --------------------------------------------------------------------------
   Archive
   -------------------------------------------------------------------------- */
.archive-wrap {
    /* inherits from .site-main */
}

.archive-year {
    margin-bottom: 2.5rem;
}

.archive-year__heading {
    font-family:   var(--font-heading);
    font-size:     1.1rem;
    font-weight:   700;
    color:         var(--text-muted);
    margin-bottom: 0.75rem;
    letter-spacing: 0.04em;
}

.archive-list {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.archive-item {
    display:     flex;
    align-items: baseline;
    gap:         1rem;
    padding:     0.35rem 0;
    border-bottom: 1px solid var(--border);
    flex-wrap:   wrap;
}

.archive-item__date {
    font-size:     0.85rem;
    color:         var(--text-secondary);
    min-width:     4.5rem;
    flex-shrink:   0;
    font-variant-numeric: tabular-nums;
}

.archive-item__title {
    font-size:      0.95rem;
    color:          var(--text-primary);
    text-decoration: none;
    flex: 1;
}

.archive-item__title:hover {
    color:          var(--accent);
    text-decoration: none;
}

.archive-item__tags {
    flex-basis: 100%;
    margin-top: -0.1rem;
    padding-left: 5.5rem;
}


/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contact-wrap {
    max-width: 38rem;
}

.contact-honeypot {
    display:    none;
    visibility: hidden;
}

.contact-form {
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
    margin-top:     1.5rem;
}

.contact-field {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
}

.contact-label {
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--text-primary);
}

.contact-input,
.contact-textarea {
    font-family:   var(--font-body);
    font-size:     1rem;
    color:         var(--text-primary);
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       0.55rem 0.75rem;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color 0.15s;
}

.contact-input:focus,
.contact-textarea:focus {
    outline:      none;
    border-color: var(--accent);
}

.contact-textarea {
    resize:     vertical;
    min-height: 9rem;
    line-height: 1.6;
}

.contact-footer {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    flex-wrap:   wrap;
}

.contact-submit {
    font-family:   var(--font-body);
    font-size:     0.95rem;
    font-weight:   600;
    color:         #fff;
    background:    var(--accent);
    border:        none;
    border-radius: var(--radius);
    padding:       0.6rem 1.4rem;
    cursor:        pointer;
    transition:    background 0.15s;
}

.contact-submit:hover {
    background: var(--accent-hover);
}

.contact-privacy {
    font-size: 0.8rem;
    color:     var(--text-muted);
    margin:    0;
}

.contact-success {
    margin-top: 1.5rem;
    padding:    1rem 1.25rem;
    background: #dcfce7;
    border:     1px solid #86efac;
    border-radius: var(--radius);
    color:      #166534;
    font-size:  0.95rem;
}

.contact-error {
    margin-top: 1.5rem;
    padding:    1rem 1.25rem;
    background: #fef2f2;
    border:     1px solid #fca5a5;
    border-radius: var(--radius);
    color:      #991b1b;
    font-size:  0.95rem;
}

/* --------------------------------------------------------------------------
   Static page
   -------------------------------------------------------------------------- */
.static-page__header {
    margin-bottom: 1.25rem;
}

.static-page__title {
    font-family:  var(--font-heading);
    font-size:    2rem;
    font-weight:  700;
    line-height:  1.2;
}


/* --------------------------------------------------------------------------
   Preview banner
   -------------------------------------------------------------------------- */
.preview-banner {
    background:    #fef9c3;
    border:        1px solid #fde047;
    border-radius: var(--radius);
    padding:       0.6rem 1rem;
    font-size:     0.875rem;
    color:         #713f12;
    margin-bottom: 1.5rem;
    text-align:    center;
}


/* --------------------------------------------------------------------------
   Error pages (404, 500)
   -------------------------------------------------------------------------- */
.error-page {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    min-height:      40vh;
    gap:             1rem;
}

.error-page__code {
    font-family:  var(--font-heading);
    font-size:    5rem;
    font-weight:  800;
    color:        var(--text-muted);
    line-height:  1;
}

.error-page__message {
    font-size:   1.1rem;
    color:       var(--text-secondary);
}

.error-page__home {
    font-size:       0.95rem;
    color:           var(--accent);
    text-decoration: none;
}

.error-page__home:hover {
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */
.site-footer {
    padding: 0 var(--spacing);
}

.site-footer__inner {
    max-width:       var(--content-width);
    margin:          0 auto;
    padding:         1.5rem 0;
    border-top:      1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    font-size:       0.85rem;
    color:           var(--text-secondary);
}

.site-footer__nav {
    display: flex;
    gap: 1rem;
}

.site-footer__link {
    color:           var(--text-secondary);
    text-decoration: none;
}

.site-footer__link:hover {
    color:           var(--text-primary);
    text-decoration: none;
}

.site-footer__social {
    display:     flex;
    align-items: center;
    color:       var(--text-muted);
    transition:  color 0.15s;
}

.site-footer__social:hover {
    color:           var(--text-primary);
    text-decoration: none;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    html { font-size: 16px; }

    .site-header {
        padding-top: 1.25rem;
    }

    .site-header__avatar {
        width:  48px;
        height: 48px;
    }

    .post__title {
        font-size: 1.75rem;
    }

    .list-header__title {
        font-size: 1.6rem;
    }

    .post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav__next {
        text-align: left;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.5rem;
    }

    .archive-item__tags {
        padding-left: 0;
    }
}


/* ==========================================================================
   Admin styles
   ========================================================================== */

/* --- Reset body for admin --- */
.admin-body {
    overflow: hidden;   /* layout handles its own scroll */
}

/* --- Full-viewport two-column layout --- */
.admin-layout {
    display:  flex;
    height:   100vh;
    overflow: hidden;
}

/* -----------------------------------------------------------------------
   Sidebar
   ----------------------------------------------------------------------- */
.admin-sidebar {
    width:        220px;
    flex-shrink:  0;
    height:       100vh;
    display:      flex;
    flex-direction: column;
    background:   var(--bg-subtle);
    border-right: 1px solid var(--border);
    overflow-y:   auto;
}

.admin-sidebar__brand {
    padding:     1.25rem 1rem 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

.admin-sidebar__brand a {
    font-weight:     700;
    font-size:       0.9rem;
    color:           var(--text-primary);
    text-decoration: none;
}

.admin-sidebar__brand a:hover {
    color: var(--accent);
    text-decoration: none;
}

.admin-sidebar__view-site {
    display:     block;
    font-weight: 400 !important;
    font-size:   0.78rem !important;
    color:       var(--text-muted) !important;
    margin-top:  0.2rem;
    transition:  color 0.12s;
}

.admin-sidebar__view-site:hover {
    color: var(--accent) !important;
}

.admin-nav {
    flex:    1;
    padding: 0.25rem 0;
}

.admin-nav__link {
    display:         flex;
    align-items:     center;
    gap:             0.55rem;
    padding:         0.55rem 1rem;
    font-size:       0.875rem;
    color:           var(--text-secondary);
    text-decoration: none;
    border-radius:   var(--radius);
    margin:          0 0.5rem;
    transition:      color 0.12s, background 0.12s;
}

.admin-nav__link:hover {
    color:      var(--text-primary);
    background: var(--border);
    text-decoration: none;
}

.admin-nav__link--active {
    color:      var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-weight: 500;
}

.admin-nav__link--active:hover {
    color:      var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.admin-sidebar__footer {
    padding:       0.75rem 1rem 1rem;
    border-top:    1px solid var(--border);
    margin-top:    auto;
}

.admin-logout {
    background:  none;
    border:      none;
    cursor:      pointer;
    font-size:   0.85rem;
    color:       var(--text-muted);
    padding:     0;
    transition:  color 0.12s;
}

.admin-logout:hover {
    color: var(--text-primary);
}

/* -----------------------------------------------------------------------
   Main content area
   ----------------------------------------------------------------------- */
.admin-main {
    flex:       1;
    height:     100vh;
    overflow-y: auto;
    min-width:  0;
}

/* -----------------------------------------------------------------------
   Page wrapper (list views, dashboard, settings)
   ----------------------------------------------------------------------- */
.admin-page {
    max-width: 900px;
    margin:    0 auto;
    padding:   2rem 2rem 4rem;
}

.admin-page__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1.75rem;
}

.admin-page__title {
    font-family: var(--font-heading);
    font-size:   1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */
.admin-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    padding:         0.45rem 1rem;
    font-size:       0.875rem;
    font-weight:     500;
    border-radius:   var(--radius);
    border:          1px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 0.12s, border-color 0.12s, color 0.12s;
    line-height:     1.4;
}

.admin-btn--primary {
    background: var(--accent);
    color:      #fff;
    border-color: var(--accent);
}

.admin-btn--primary:hover {
    background:   var(--accent-hover);
    border-color: var(--accent-hover);
    color:        #fff;
    text-decoration: none;
}

.admin-btn--primary:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.admin-btn--ghost {
    background:   transparent;
    color:        var(--text-secondary);
    border-color: var(--border);
}

.admin-btn--ghost:hover {
    background:  var(--bg-subtle);
    color:       var(--text-primary);
    text-decoration: none;
}

.admin-btn--full {
    width:            100%;
    justify-content:  center;
}

.admin-icon-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         var(--text-muted);
    padding:       0.25rem;
    border-radius: var(--radius);
    display:       inline-flex;
    align-items:   center;
    transition:    color 0.12s, background 0.12s;
}

.admin-icon-btn:hover {
    color:      #dc2626;
    background: #fef2f2;
}

/* -----------------------------------------------------------------------
   Form elements
   ----------------------------------------------------------------------- */
.admin-label {
    display:      block;
    font-size:    0.8rem;
    font-weight:  600;
    color:        var(--text-secondary);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-input {
    width:         100%;
    padding:       0.45rem 0.6rem;
    font-size:     0.9rem;
    font-family:   var(--font-body);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    background:    var(--bg);
    color:         var(--text-primary);
    transition:    border-color 0.12s;
    line-height:   1.4;
}

.admin-input:focus {
    outline:      none;
    border-color: var(--accent);
}

.admin-input--sm {
    width: 6rem;
}

.admin-select {
    width:         100%;
    padding:       0.45rem 0.6rem;
    font-size:     0.9rem;
    font-family:   var(--font-body);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    background:    var(--bg);
    color:         var(--text-primary);
    cursor:        pointer;
}

.admin-select:focus {
    outline:      none;
    border-color: var(--accent);
}

.admin-textarea {
    width:         100%;
    padding:       0.45rem 0.6rem;
    font-size:     0.9rem;
    font-family:   var(--font-body);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    background:    var(--bg);
    color:         var(--text-primary);
    resize:        vertical;
    line-height:   1.6;
    transition:    border-color 0.12s;
}

.admin-textarea:focus {
    outline:      none;
    border-color: var(--accent);
}

.admin-textarea--code {
    font-family: var(--font-mono);
    font-size:   0.82rem;
}

.admin-field {
    margin-bottom: 1rem;
}

.admin-checkbox-label {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.9rem;
    cursor:      pointer;
    margin-bottom: 0.5rem;
    user-select: none;
}

.admin-hint {
    display:     block;
    font-size:   0.78rem;
    color:       var(--text-muted);
    margin-top:  0.3rem;
    font-family: inherit;
}

.admin-hint--editor {
    font-family:   inherit;
    font-size:     0.85rem;
    margin-top:    0;
    margin-bottom: 0.75rem;
    word-break:    normal;
}

.admin-color-row {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}

.admin-color-row input[type="color"] {
    width:         2.5rem;
    height:        2.2rem;
    padding:       0.1rem;
    border:        1px solid var(--border);
    border-radius: var(--radius);
    cursor:        pointer;
    background:    var(--bg);
    flex-shrink:   0;
}

.admin-color-row .admin-input {
    flex: 1;
}

/* -----------------------------------------------------------------------
   Dashboard stats
   ----------------------------------------------------------------------- */
.admin-stats {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1rem;
    margin-bottom:         2rem;
}

.admin-stat {
    background:    var(--bg-subtle);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       1.1rem 1.25rem;
    display:       flex;
    flex-direction: column;
    gap:           0.25rem;
}

.admin-stat__value {
    font-family:  var(--font-heading);
    font-size:    1.75rem;
    font-weight:  700;
    line-height:  1;
    color:        var(--text-primary);
}

.admin-stat__label {
    font-size: 0.8rem;
    color:     var(--text-muted);
}

/* -----------------------------------------------------------------------
   Tables
   ----------------------------------------------------------------------- */
.admin-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.9rem;
}

.admin-table th {
    text-align:    left;
    padding:       0.5rem 0.75rem;
    font-size:     0.75rem;
    font-weight:   600;
    color:         var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    white-space:   nowrap;
}

.admin-table td {
    padding:       0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.admin-table__row--link {
    cursor: pointer;
}

.admin-table__row--link:hover td {
    background: var(--bg-subtle);
}

.admin-table__title {
    display:     block;
    font-weight: 500;
    color:       var(--text-primary);
}

.admin-table__tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.25rem;
    margin-top: 0.25rem;
}

.admin-table__date {
    white-space: nowrap;
    color:       var(--text-secondary);
    font-size:   0.85rem;
}

.admin-table__actions {
    text-align: right;
    white-space: nowrap;
}

.admin-table__flags {
    white-space: nowrap;
}

.admin-table__empty {
    text-align: center;
    color:      var(--text-muted);
    padding:    2rem !important;
}

/* -----------------------------------------------------------------------
   Status badges
   ----------------------------------------------------------------------- */
.admin-status {
    display:       inline-block;
    padding:       0.15em 0.5em;
    border-radius: var(--radius);
    font-size:     0.78rem;
    font-weight:   600;
    text-transform: capitalize;
    white-space:   nowrap;
}

.admin-status--draft {
    background: #f3f4f6;
    color:      #374151;
}

.admin-status--published {
    background: #dcfce7;
    color:      #166534;
}

.admin-status--scheduled {
    background: #fef9c3;
    color:      #854d0e;
}

.admin-badge {
    display:       inline-block;
    padding:       0.1em 0.45em;
    border-radius: var(--radius);
    font-size:     0.72rem;
    font-weight:   600;
    background:    var(--tag-bg);
    color:         var(--tag-text);
    margin-right:  0.25rem;
}

/* -----------------------------------------------------------------------
   List controls (filter tabs + search)
   ----------------------------------------------------------------------- */
.admin-list-controls {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    margin-bottom:   1rem;
    flex-wrap:       wrap;
}

.admin-filter-tabs {
    display: flex;
    gap:     0.25rem;
}

.admin-filter-tab {
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       0.35rem 0.75rem;
    font-size:     0.875rem;
    color:         var(--text-secondary);
    border-radius: var(--radius);
    transition:    background 0.12s, color 0.12s;
}

.admin-filter-tab:hover {
    background: var(--bg-subtle);
    color:      var(--text-primary);
}

.admin-filter-tab--active {
    background: var(--bg-subtle);
    color:      var(--text-primary);
    font-weight: 600;
}

.admin-search {
    padding:       0.4rem 0.7rem;
    font-size:     0.875rem;
    font-family:   var(--font-body);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    width:         220px;
    background:    var(--bg);
    color:         var(--text-primary);
}

.admin-search:focus {
    outline:      none;
    border-color: var(--accent);
}

/* -----------------------------------------------------------------------
   Sections (settings + dashboard)
   ----------------------------------------------------------------------- */
.admin-section {
    margin-bottom: 2.5rem;
}

.admin-section__title {
    font-family:   var(--font-heading);
    font-size:     1rem;
    font-weight:   700;
    margin-bottom: 1rem;
    color:         var(--text-primary);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.admin-settings-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0 3rem;
    align-items:           start;
}

.admin-settings-grid .admin-section:nth-child(odd):last-child {
    grid-column: 1 / -1;
    max-width:   50%;
}

.admin-section--full {
    margin-top: 1rem;
}

/* Full-width section inside the 2-column settings grid */
.admin-settings-grid .admin-section--span {
    grid-column: 1 / -1;
}

.admin-editor--settings {
    height:        auto;  /* override .admin-editor's 100vh */
    border:        1px solid var(--border);
    border-radius: 6px;
    overflow:      hidden;
}

/* Remove the inner border — the outer .admin-editor--settings provides it */
/* Cap the height so the settings intro editor doesn't dominate the page  */
.admin-editor--settings .admin-tiptap-wrap {
    border:        none;
    border-radius: 0;
    max-height:    260px;
    overflow-y:    auto;
}

/* -----------------------------------------------------------------------
   Editor layout
   ----------------------------------------------------------------------- */
.admin-editor {
    display:        flex;
    flex-direction: column;
    height:         100vh;
    overflow:       hidden;
}

.admin-editor__topbar {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    padding:         0.65rem 1.5rem;
    border-bottom:   1px solid var(--border);
    background:      var(--bg);
    z-index:         10;
}

.admin-editor__topbar-left,
.admin-editor__topbar-right {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}

.admin-back {
    font-size:       0.875rem;
    color:           var(--text-secondary);
    text-decoration: none;
    transition:      color 0.12s;
}

.admin-back:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.admin-dirty-indicator {
    display:       inline-flex;
    align-items:   center;
    font-size:     0.78rem;
    color:         #92400e;
    background:    #fef3c7;
    border:        1px solid #fde68a;
    border-radius: var(--radius);
    padding:       0.15em 0.6em;
}

.admin-editor__body {
    flex:     1;
    display:  flex;
    overflow: hidden;
    min-height: 0;
}

.admin-editor__main {
    flex:       1;
    overflow-y: auto;
    padding:    2rem 2.5rem 4rem;
    min-width:  0;
}

.admin-editor__sidebar {
    width:        280px;
    flex-shrink:  0;
    border-left:  1px solid var(--border);
    overflow-y:   auto;
    padding:      1.25rem 1rem;
    background:   var(--bg-subtle);
}

.admin-sidebar-section {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom:  1px solid var(--border);
}

.admin-sidebar-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* -----------------------------------------------------------------------
   Title input
   ----------------------------------------------------------------------- */
.admin-title-input {
    width:       100%;
    border:      none;
    outline:     none;
    font-family: var(--font-heading);
    font-size:   2rem;
    font-weight: 700;
    line-height: 1.2;
    color:       var(--text-primary);
    background:  transparent;
    padding:     0;
    margin-bottom: 1.5rem;
    resize:      none;
}

.admin-title-input::placeholder {
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------
   TipTap editor
   ----------------------------------------------------------------------- */
.admin-tiptap-wrap {
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
    background:    var(--bg);
}

.admin-toolbar {
    border-bottom: 1px solid var(--border);
    padding:       0.4rem 0.5rem;
    background:    var(--bg-subtle);
    min-height:    2.5rem;
}

.admin-toolbar__btns {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.1rem;
}

.admin-toolbar__loading {
    font-size: 0.8rem;
    color:     var(--text-muted);
    padding:   0.2rem 0.25rem;
}

.admin-tb-btn {
    background:    none;
    border:        none;
    cursor:        pointer;
    padding:       0.25rem 0.45rem;
    font-size:     0.82rem;
    border-radius: var(--radius);
    color:         var(--text-secondary);
    transition:    background 0.1s, color 0.1s;
    line-height:   1;
    min-width:     1.8rem;
    text-align:    center;
}

.admin-tb-btn:hover {
    background: var(--border);
    color:      var(--text-primary);
}

.admin-tb-btn--mono {
    font-family: var(--font-mono);
    font-size:   0.75rem;
}

.admin-tb-sep {
    width:      1px;
    height:     1.25rem;
    background: var(--border);
    margin:     0 0.2rem;
    flex-shrink: 0;
}

/* TipTap content area — apply prose styles via editorProps class */
.admin-tiptap .ProseMirror {
    min-height: 480px;
    padding:    1.25rem 1.5rem;
    outline:    none;
    font-size:  1rem;
    line-height: 1.75;
    color:      var(--text-primary);
}

/* Settings intro editor — override after the general rule so cascade wins */
.admin-editor--settings .admin-tiptap .ProseMirror {
    min-height: 160px;
}

.admin-tiptap .ProseMirror p.is-editor-empty:first-child::before {
    content:  attr(data-placeholder);
    color:    var(--text-muted);
    float:    left;
    pointer-events: none;
    height:   0;
}

/* -----------------------------------------------------------------------
   Tag input
   ----------------------------------------------------------------------- */
.admin-tag-input {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.35rem;
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       0.4rem 0.5rem;
    background:    var(--bg);
    cursor:        text;
    min-height:    2.4rem;
    align-items:   center;
    transition:    border-color 0.12s;
}

.admin-tag-input:focus-within {
    border-color: var(--accent);
}

.admin-tag-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           0.25rem;
    background:    var(--accent);
    color:         #fff;
    font-size:     0.78rem;
    font-weight:   500;
    padding:       0.15em 0.5em 0.15em 0.6em;
    border-radius: 99px;
    white-space:   nowrap;
}

.admin-tag-pill__remove {
    background:    none;
    border:        none;
    cursor:        pointer;
    color:         rgba(255,255,255,0.8);
    font-size:     1rem;
    line-height:   1;
    padding:       0;
    display:       flex;
    align-items:   center;
    transition:    color 0.1s;
}

.admin-tag-pill__remove:hover {
    color: #fff;
}

.admin-tag-text {
    border:      none;
    outline:     none;
    font-size:   0.875rem;
    font-family: var(--font-body);
    background:  transparent;
    flex:        1;
    min-width:   80px;
    color:       var(--text-primary);
}

/* -----------------------------------------------------------------------
   Collapsible (details/summary)
   ----------------------------------------------------------------------- */
.admin-collapsible {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top:  0.25rem;
}

.admin-collapsible__header {
    cursor:      pointer;
    font-size:   0.8rem;
    font-weight: 600;
    color:       var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
    list-style:  none;
    padding:     0.25rem 0;
}

.admin-collapsible__header::-webkit-details-marker { display: none; }

.admin-collapsible__header::after {
    content:      ' ▸';
    font-size:    0.7rem;
    color:        var(--text-muted);
}

.admin-collapsible[open] .admin-collapsible__header::after {
    content: ' ▾';
}

.admin-collapsible__body {
    padding-top: 0.75rem;
    display:     flex;
    flex-direction: column;
    gap:         0.5rem;
}

/* -----------------------------------------------------------------------
   Login screen
   ----------------------------------------------------------------------- */
.admin-login {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--bg-subtle);
    padding:         2rem;
}

.admin-login__box {
    background:    var(--bg);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    padding:       2rem 2.5rem;
    width:         100%;
    max-width:     360px;
    box-shadow:    0 1px 4px rgba(0,0,0,0.06);
}

.admin-login__title {
    font-family:   var(--font-heading);
    font-size:     1.4rem;
    font-weight:   700;
    margin-bottom: 1.5rem;
    text-align:    center;
}

.admin-login__form {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

/* -----------------------------------------------------------------------
   Utility / misc
   ----------------------------------------------------------------------- */
.admin-loading {
    padding:   2rem;
    color:     var(--text-muted);
    font-size: 0.9rem;
}

.admin-empty {
    color:     var(--text-secondary);
    font-size: 0.95rem;
    padding:   1rem 0;
}

.admin-empty a {
    color: var(--accent);
}

.admin-error-msg {
    font-size:     0.875rem;
    color:         #dc2626;
    background:    #fef2f2;
    border:        1px solid #fecaca;
    border-radius: var(--radius);
    padding:       0.4rem 0.7rem;
}

/* -----------------------------------------------------------------------
   Avatar uploader + crop modal
   ----------------------------------------------------------------------- */
.avatar-preview-wrap {
    margin-bottom: 0.75rem;
}

.avatar-preview-img {
    width:         80px;
    height:        80px;
    border-radius: 6px;
    object-fit:    cover;
    display:       block;
}

.avatar-actions {
    display: flex;
    gap:     0.5rem;
}

.admin-btn--danger {
    color:        #dc2626;
    border-color: #fecaca;
}

.admin-btn--danger:hover {
    background:   #fef2f2;
    border-color: #dc2626;
    color:        #dc2626;
}

.avatar-crop-modal {
    position:        fixed;
    inset:           0;
    background:      rgba(0, 0, 0, 0.65);
    display:         flex;
    align-items:     center;
    justify-content: center;
    z-index:         1000;
}

.avatar-crop-modal__inner {
    background:    var(--bg);
    border-radius: 8px;
    padding:       1.5rem;
    max-width:     520px;
    width:         90%;
    max-height:    90vh;
    overflow-y:    auto;
}

.avatar-crop-modal__title {
    font-family:   var(--font-heading);
    font-size:     1.1rem;
    font-weight:   700;
    margin-bottom: 0.4rem;
}

.avatar-crop-modal__hint {
    font-size:     0.85rem;
    color:         var(--text-muted);
    margin-bottom: 1rem;
}

.avatar-crop-wrap {
    width:      100%;
    max-height: 380px;
    overflow:   hidden;
}

.avatar-crop-wrap img {
    max-width: 100%;
    display:   block;
}

.avatar-crop-modal__actions {
    display:    flex;
    gap:        0.75rem;
    margin-top: 1.25rem;
}

/* -----------------------------------------------------------------------
   Toast notifications
   ----------------------------------------------------------------------- */
#toast-container {
    position:       fixed;
    bottom:         1.5rem;
    right:          1.5rem;
    z-index:        9999;
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    pointer-events: none;
}

.toast {
    background:    var(--text-primary);
    color:         var(--bg);
    padding:       0.6rem 1rem;
    border-radius: var(--radius);
    font-size:     0.875rem;
    opacity:       0;
    transform:     translateY(0.5rem);
    transition:    opacity 0.2s, transform 0.2s;
    max-width:     320px;
}

.toast--visible {
    opacity:   1;
    transform: translateY(0);
}

.toast--error {
    background: #dc2626;
}

/* -----------------------------------------------------------------------
   Responsive (collapse sidebar on narrow screens)
   ----------------------------------------------------------------------- */
@media (max-width: 700px) {
    .admin-layout {
        flex-direction: column;
        height:         auto;
        overflow:       visible;
    }

    .admin-sidebar {
        width:      100%;
        height:     auto;
        flex-direction: row;
        flex-wrap:  wrap;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .admin-sidebar__brand { border-bottom: none; }
    .admin-sidebar__footer { display: none; }
    .admin-nav { display: flex; flex-direction: row; padding: 0.25rem 0.5rem; }
    .admin-nav__link { padding: 0.4rem 0.75rem; }

    .admin-main {
        height: auto;
        overflow-y: visible;
    }

    .admin-editor {
        height: auto;
        overflow: visible;
    }

    .admin-editor__body {
        flex-direction: column;
        overflow:       visible;
    }

    .admin-editor__main {
        overflow-y: visible;
        padding:    1rem;
    }

    .admin-editor__sidebar {
        width:      100%;
        border-left: none;
        border-top:  1px solid var(--border);
    }

    .admin-stats {
        grid-template-columns: 1fr 1fr;
    }

    .admin-settings-grid {
        grid-template-columns: 1fr;
    }

    .admin-settings-grid .admin-section:nth-child(odd):last-child {
        max-width: 100%;
    }
}