/**
 * Zyonix Journal — assets/css/components.css
 *
 * Reusable UI components: buttons, badges, forms, alerts, cards, tabs.
 *
 * @package Zyonix_Journal
 * @since   1.0.0
 */

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             .4em;
    padding:         .5em 1.1em;
    font-family:     var(--font-primary, 'Inter', sans-serif);
    font-size:       var(--text-sm, .8125rem);
    font-weight:     var(--font-semibold, 600);
    line-height:     1.4;
    border-radius:   var(--radius-md, 6px);
    border:          1px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background .15s, color .15s, border-color .15s, box-shadow .15s;
    white-space:     nowrap;
}
.btn:focus-visible {
    outline:        3px solid var(--color-primary, #1a73e8);
    outline-offset: 2px;
}

.btn-primary {
    background:   var(--color-primary, #1a73e8);
    color:        #fff;
    border-color: var(--color-primary, #1a73e8);
}
.btn-primary:hover {
    background:   var(--color-primary-dark, #1558b0);
    border-color: var(--color-primary-dark, #1558b0);
    color:        #fff;
}


/* ── Search (search.php) components ─────────────────────────────────────── */
.sr-header{margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border);}
.sr-header-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-3);}
.sr-title{font-size:var(--text-3xl);line-height:var(--leading-snug);margin:0;}
.sr-count{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
.sr-pill{display:inline-flex;align-items:center;padding:2px var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:11px;font-weight:var(--font-bold);color:var(--color-text-secondary);background:var(--color-gray-50);}
.sr-search-form{display:flex;gap:var(--space-2);align-items:stretch;}
.sr-search-input{flex:1 1 auto;min-width:0;border:1px solid var(--color-border-dark);border-radius:var(--radius-md);padding:10px var(--space-3);background:#fff;}
.sr-search-btn{border:1px solid var(--color-primary);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);padding:10px var(--space-4);font-weight:var(--font-semibold);cursor:pointer;}
.sr-search-btn:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);}

.sr-left-inner{padding:var(--space-4);}
.sr-filter-box{padding-bottom:var(--space-4);margin-bottom:var(--space-4);border-bottom:1px solid var(--color-border-light);}
.sr-filter-box:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.sr-left-title{font-size:var(--text-base);margin:0 0 var(--space-3);font-weight:var(--font-bold);}
.sr-filter-form{display:flex;flex-direction:column;gap:var(--space-3);}
.sr-field{display:flex;flex-direction:column;gap:6px;}
.sr-label{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-text-secondary);}
.sr-input,.sr-select{border:1px solid var(--color-border-dark);border-radius:var(--radius-md);padding:8px var(--space-3);background:#fff;}
.sr-apply-btn{display:inline-flex;justify-content:center;align-items:center;padding:8px var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border-dark);background:var(--color-gray-50);cursor:pointer;font-weight:var(--font-semibold);}
.sr-apply-btn:hover{background:var(--color-gray-100);}
.sr-note{margin:var(--space-3) 0 0;font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-relaxed);}

.sr-journal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.sr-journal-link{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);padding:8px var(--space-2);border-radius:var(--radius-md);text-decoration:none;color:var(--color-text-primary);}
.sr-journal-link:hover{background:var(--color-gray-50);text-decoration:none;}
.sr-journal-name{font-size:var(--text-sm);line-height:var(--leading-snug);}
.sr-journal-abbr{font-size:11px;font-weight:var(--font-bold);color:var(--color-text-muted);}

.sr-box{padding:var(--space-4);border-bottom:1px solid var(--color-border-light);}
.sr-box:last-child{border-bottom:none;}
.sr-box-title{font-size:var(--text-base);margin:0 0 var(--space-3);font-weight:var(--font-bold);}
.sr-topic-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.sr-topic-tag{display:inline-flex;align-items:center;padding:4px var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-xlight);border:1px solid rgba(0,117,180,.15);color:var(--color-primary);text-decoration:none;font-size:var(--text-xs);font-weight:var(--font-semibold);}
.sr-topic-tag:hover{background:var(--color-primary);color:#fff;}
.sr-muted{margin:0;font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-relaxed);}

.sr-post-result{padding:var(--space-5) 0;border-bottom:1px solid var(--color-border);}
.sr-post-result:last-child{border-bottom:none;}
.sr-post-title{margin:0 0 var(--space-2);font-size:var(--text-xl);line-height:var(--leading-snug);}
.sr-post-title a{color:var(--color-text-primary);text-decoration:none;}
.sr-post-title a:hover{color:var(--color-primary);}
.sr-post-meta{font-size:var(--text-xs);color:var(--color-text-muted);display:flex;gap:6px;align-items:center;margin-bottom:var(--space-2);}
.sr-post-excerpt{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-relaxed);}

.sr-empty{text-align:center;padding:var(--space-12) var(--space-6);}
.sr-empty-icon{font-size:42px;opacity:.35;margin-bottom:var(--space-3);}
.sr-empty-title{font-size:var(--text-2xl);margin:0 0 var(--space-2);}
.sr-empty-text{margin:0 0 var(--space-5);color:var(--color-text-muted);line-height:var(--leading-relaxed);}
.sr-empty-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;}

.btn-secondary {
    background:   #fff;
    color:        var(--color-text-secondary, #444);
    border-color: var(--color-border-dark, #bdbdbd);
}
.btn-secondary:hover {
    background: var(--color-gray-100, #f5f5f5);
}

.btn-outline {
    background:   transparent;
    color:        var(--color-primary, #1a73e8);
    border-color: var(--color-primary, #1a73e8);
}
.btn-outline:hover {
    background: var(--color-primary, #1a73e8);
    color: #fff;
}

.btn-sm { padding: .35em .8em; font-size: var(--text-xs, .75rem); }
.btn-lg { padding: .65em 1.4em; font-size: var(--text-md, .9375rem); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge {
    display:       inline-block;
    font-size:     11px;
    font-weight:   var(--font-bold, 700);
    padding:       2px 7px;
    border-radius: 3px;
    line-height:   1.5;
    letter-spacing:.02em;
    text-transform: uppercase;
    white-space:   nowrap;
}
.badge-oa       { background: var(--color-oa-green, #2e7d32);   color: #fff; }
.badge-type     { background: var(--color-article-type, #e07b00); color: #fff; }
.badge-primary  { background: var(--color-primary, #1a73e8);    color: #fff; }
.badge-gray     { background: var(--color-gray-200, #eee);      color: var(--color-text-secondary, #444); }
.badge-peer     { background: #4a90d9; color: #fff; }

/* ── Forms & inputs ───────────────────────────────────────────────────── */
.form-group {
    margin-bottom: 1.1em;
}
.form-label {
    display:       block;
    font-size:     var(--text-sm, .8125rem);
    font-weight:   var(--font-semibold, 600);
    margin-bottom: .35em;
    color:         var(--color-text-secondary, #444);
}
.form-control {
    display:      block;
    width:        100%;
    padding:      .45em .75em;
    font-family:  var(--font-primary, 'Inter', sans-serif);
    font-size:    var(--text-sm, .8125rem);
    color:        var(--color-text-primary, #1a1a1a);
    background:   #fff;
    border:       1px solid var(--color-border-dark, #bdbdbd);
    border-radius: var(--radius-sm, 4px);
    line-height:  1.5;
    transition:   border-color .15s, box-shadow .15s;
}
.form-control:focus {
    outline:      none;
    border-color: var(--color-primary, #1a73e8);
    box-shadow:   0 0 0 3px rgba(26,115,232,.15);
}
.form-control::placeholder { color: var(--color-text-muted, #777); }

textarea.form-control {
    min-height:  120px;
    resize:      vertical;
}

/* Search bar */
.search-form {
    display:   flex;
    gap:       .4em;
    align-items: center;
}
.search-field {
    flex:         1;
    padding:      .45em .75em;
    font-family:  var(--font-primary, 'Inter', sans-serif);
    font-size:    var(--text-sm, .8125rem);
    border:       1px solid var(--color-border-dark, #bdbdbd);
    border-radius: var(--radius-sm, 4px) 0 0 var(--radius-sm, 4px);
    outline:      none;
    transition:   border-color .15s;
}
.search-field:focus {
    border-color: var(--color-primary, #1a73e8);
}
.search-submit {
    padding:      .45em .85em;
    background:   var(--color-primary, #1a73e8);
    color:        #fff;
    border:       1px solid var(--color-primary, #1a73e8);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    cursor:       pointer;
    font-size:    var(--text-sm, .8125rem);
    font-weight:  var(--font-semibold, 600);
    transition:   background .15s;
}
.search-submit:hover {
    background: var(--color-primary-dark, #1558b0);
}

/* ── Alerts / notices ─────────────────────────────────────────────────── */
.alert {
    padding:       .85em 1.1em;
    border-radius: var(--radius-md, 6px);
    border:        1px solid transparent;
    font-size:     var(--text-sm, .8125rem);
    margin-bottom: 1em;
}
.alert-info    { background: #e8f4fd; border-color: #b3d9f5; color: #155a8a; }
.alert-success { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
.alert-warning { background: #fff8e1; border-color: #ffe082; color: #7b5800; }
.alert-error   { background: #fdecea; border-color: #f5c6c3; color: #b71c1c; }

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
    background:    #fff;
    border:        1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-lg, 8px);
    overflow:      hidden;
    transition:    box-shadow .2s;
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.card-body {
    padding: 1.1em 1.25em;
}
.card-title {
    font-size:     var(--text-xl, 1.125rem);
    font-weight:   var(--font-semibold, 600);
    margin-bottom: .35em;
    line-height:   var(--leading-snug, 1.35);
}
.card-meta {
    font-size:  var(--text-xs, .75rem);
    color:      var(--color-text-muted, #777);
    margin-bottom: .5em;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.tab-list {
    display:       flex;
    border-bottom: 2px solid var(--color-border, #e0e0e0);
    gap:           .1em;
    list-style:    none;
    padding:       0;
    margin-bottom: 1em;
}
.tab-list button,
.tab-btn {
    background:   none;
    border:       none;
    padding:      .55em 1em;
    font-family:  var(--font-primary, 'Inter', sans-serif);
    font-size:    var(--text-sm, .8125rem);
    font-weight:  var(--font-semibold, 600);
    color:        var(--color-text-muted, #777);
    cursor:       pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition:   color .15s, border-color .15s;
}
.tab-btn.active,
.tab-btn[aria-selected="true"] {
    color:         var(--color-primary, #1a73e8);
    border-color:  var(--color-primary, #1a73e8);
}

/* ── Pagination (component level) ─────────────────────────────────────── */
.pagination {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             .3em;
    margin:          2em 0;
    flex-wrap:       wrap;
}
.pagination a,
.pagination span {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     2em;
    height:        2em;
    padding:       0 .5em;
    font-size:     var(--text-sm, .8125rem);
    font-weight:   var(--font-semibold, 600);
    border-radius: var(--radius-sm, 4px);
    border:        1px solid var(--color-border, #e0e0e0);
    text-decoration: none;
    color:         var(--color-text-secondary, #444);
    transition:    background .15s, border-color .15s;
}
.pagination a:hover {
    background:    var(--color-gray-100, #f5f5f5);
    border-color:  var(--color-border-dark, #bdbdbd);
}
.pagination .current {
    background:    var(--color-primary, #1a73e8);
    border-color:  var(--color-primary, #1a73e8);
    color:         #fff;
}

.simple-pagination { padding: var(--space-5) 0; }
.simple-pagination__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.simple-pagination a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.simple-pagination a:hover {
    background: var(--color-primary-xlight);
    border-color: var(--color-primary);
}

.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-5);
}
.nav-previous,
.nav-next {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-base);
}
.nav-previous:hover,
.nav-next:hover { box-shadow: var(--shadow-md); }
.nav-next { text-align: right; }
.nav-subtitle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-muted);
}
.nav-next .nav-subtitle { justify-content: flex-end; }
.nav-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-primary);
    text-decoration: none;
    line-height: var(--leading-snug);
}
.nav-title:hover { text-decoration: underline; }

/* ── Modal / overlay ──────────────────────────────────────────────────── */
.modal-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,.5);
    z-index:    1000;
    display:    flex;
    align-items: center;
    justify-content: center;
}
.modal-dialog {
    background:    #fff;
    border-radius: var(--radius-lg, 8px);
    padding:       2em;
    max-width:     560px;
    width:         90%;
    box-shadow:    0 8px 32px rgba(0,0,0,.2);
    position:      relative;
}