/* ============================================================
   ForumHub — UI Components
   File: assets/css/components.css
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    padding:         10px 22px;
    border-radius:   var(--border-radius-pill);
    font-family:     var(--font-body);
    font-size:       14px;
    font-weight:     500;
    border:          none;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      all var(--transition-base);
    text-decoration: none;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn--sm  { padding: 7px 16px;  font-size: 13px; }
.btn--lg  { padding: 13px 28px; font-size: 15px; }
.btn--full{ width: 100%; }

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { filter: brightness(1.08); opacity: 1; color: #fff; }

.btn--outline {
    background:   transparent;
    color:        var(--color-primary);
    border:       1.5px solid var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #fff; opacity: 1; }

.btn--ghost { background: var(--surface-muted); color: var(--text-secondary); }
.btn--ghost:hover { background: var(--border-color); opacity: 1; }

.btn--danger { background: var(--color-danger); color: #fff; }
.btn--danger:hover { filter: brightness(1.08); }

.btn--warning { background: var(--color-warning); color: #fff; }

.btn--icon {
    width: 32px; height: 32px;
    padding: 0;
    border-radius: var(--border-radius-sm);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    cursor: pointer;
}
.btn--icon svg { width: 14px; height: 14px; }
.btn--icon-edit   { background: #dbeafe; color: #1d4ed8; }
.btn--icon-edit:hover   { background: #1d4ed8; color: #fff; }
.btn--icon-delete { background: #fef2f2; color: #dc2626; }
.btn--icon-delete:hover { background: #dc2626; color: #fff; }
.btn--icon-warn   { background: #fef3c7; color: #92400e; }
.btn--icon-warn:hover   { background: #92400e; color: #fff; }

/* ── Avatar ──────────────────────────────────────────────── */
.avatar {
    border-radius: 50%;
    background:    var(--color-primary);
    color:         #fff;
    font-family:   var(--font-head);
    font-weight:   700;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
}
.avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.avatar--sm { width: 32px; height: 32px; font-size: 13px; }
.avatar--md { width: 42px; height: 42px; font-size: 16px; }
.avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.avatar--xl { width: 80px; height: 80px; font-size: 28px; }

/* ── Card ────────────────────────────────────────────────── */
.card {
    background:    var(--surface-card);
    border:        1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow:      hidden;
}
.card__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-4) var(--space-5);
    border-bottom:   1px solid var(--border-color);
}
.card__title { font-family: var(--font-head); font-size: .95rem; font-weight: 700; }
.card__body  { padding: var(--space-5); }
.card__body--flush { padding: 0; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display:      inline-flex;
    align-items:  center;
    gap:          var(--space-1);
    padding:      2px 9px;
    border-radius: var(--border-radius-pill);
    font-size:    11px;
    font-weight:  600;
}
.badge svg { width: 10px; height: 10px; }
.badge--primary  { background: rgba(var(--color-primary-rgb),.1); color: var(--color-primary); }
.badge--success  { background: #d1fae5; color: #065f46; }
.badge--warning  { background: #fef3c7; color: #92400e; }
.badge--danger   { background: #fef2f2; color: #991b1b; }
.badge--muted    { background: var(--surface-muted); color: var(--text-secondary); }
.badge--pin      { background: rgba(var(--color-primary-rgb),.1); color: var(--color-primary); }
.badge--lock     { background: #fef3c7; color: #92400e; }
.badge--solved   { background: #d1fae5; color: #065f46; }

/* ── Role badges ─────────────────────────────────────────── */
.role-badge {
    padding: 2px 9px;
    border-radius: var(--border-radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}
.role-badge--admin     { background: rgba(var(--color-primary-rgb),.12); color: var(--color-primary); }
.role-badge--moderator { background: #d1fae5; color: #065f46; }
.role-badge--user      { background: var(--surface-muted); color: var(--text-secondary); }

/* ── Status badge ────────────────────────────────────────── */
.status-badge--active  { background: #d1fae5; color: #065f46; }
.status-badge--banned  { background: #fef2f2; color: #991b1b; }

/* ── Form elements ───────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-group label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         var(--text-secondary);
    margin-bottom: var(--space-1);
}
.form-control {
    width:         100%;
    padding:       10px 14px;
    border:        1.5px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background:    var(--surface-bg);
    color:         var(--text-primary);
    font-family:   var(--font-body);
    font-size:     14px;
    line-height:   1.5;
    transition:    border-color var(--transition-fast);
    appearance:    none;
}
.form-control:focus { outline: none; border-color: var(--color-primary); }
.form-control:disabled { opacity: .55; cursor: not-allowed; }
.form-control--sm { padding: 7px 11px; font-size: 13px; }
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2388889a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    padding-right:       36px;
    cursor: pointer;
}
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: var(--space-1); }
.form-error{ font-size: 12px; color: var(--color-danger); margin-top: var(--space-1); }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           var(--space-3);
    padding:       12px 16px;
    border-radius: var(--border-radius-sm);
    font-size:     14px;
    margin-bottom: var(--space-4);
    border-left:   4px solid;
}
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert--error   { background: #fef2f2; color: #991b1b; border-color: var(--color-danger); }
.alert--success { background: #f0fdf4; color: #166534; border-color: var(--color-success); }
.alert--warning { background: #fffbeb; color: #92400e; border-color: var(--color-warning); }
.alert--info    { background: #eff6ff; color: #1e40af; border-color: var(--color-info); }

/* ── Modal ───────────────────────────────────────────────── */
.modal-overlay {
    display:         none;
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.42);
    backdrop-filter: blur(4px);
    z-index:         400;
    align-items:     center;
    justify-content: center;
    padding:         var(--space-5);
}
.modal-overlay.is-open { display: flex; }
.modal {
    background:    var(--surface-card);
    border-radius: var(--border-radius-lg);
    width:         100%;
    max-width:     520px;
    max-height:    90vh;
    overflow-y:    auto;
    box-shadow:    var(--shadow-lg);
    animation:     modalIn .2s ease;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(.95) translateY(-10px); }
    to   { opacity: 1; transform: none; }
}
.modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         var(--space-5) var(--space-6);
    border-bottom:   1px solid var(--border-color);
}
.modal__title   { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.modal__close {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--surface-muted);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.modal__close svg { width: 14px; height: 14px; }
.modal__body   { padding: var(--space-6); }
.modal__footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border-color);
}

/* ── Toast ───────────────────────────────────────────────── */
#toastContainer {
    position: fixed;
    bottom: var(--space-6);
    right:  var(--space-6);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}
.toast {
    background:    var(--text-primary);
    color:         #fff;
    padding:       11px 18px;
    border-radius: var(--border-radius-md);
    font-size:     14px;
    box-shadow:    var(--shadow-lg);
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    max-width:     320px;
    animation:     toastIn .25s ease;
    pointer-events: all;
}
.toast--success { background: #166534; }
.toast--error   { background: #991b1b; }
.toast--warning { background: #92400e; }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-1);
    margin-top:      var(--space-6);
    flex-wrap:       wrap;
}
.pagination a, .pagination span {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       38px;
    height:          38px;
    padding:         0 10px;
    border-radius:   var(--border-radius-sm);
    font-size:       14px;
    font-weight:     500;
    border:          1px solid var(--border-color);
    background:      var(--surface-card);
    color:           var(--text-primary);
    transition:      all var(--transition-fast);
}
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); opacity: 1; }
.pagination a.active, .pagination span.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Spinner ─────────────────────────────────────────────── */
.spinner {
    width: 20px; height: 20px;
    border: 2.5px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
    text-align:  center;
    padding:     var(--space-12) var(--space-5);
    color:       var(--text-muted);
}
.empty-state__icon { width: 48px; height: 48px; margin: 0 auto var(--space-4); opacity: .35; }
.empty-state__icon svg { width: 100%; height: 100%; }
.empty-state__title { font-family: var(--font-head); font-size: 1.05rem; color: var(--text-secondary); margin-bottom: var(--space-2); }
.empty-state__text  { font-size: 14px; }

/* ── Table ───────────────────────────────────────────────── */
.data-table {
    width:           100%;
    border-collapse: collapse;
    background:      var(--surface-card);
    border-radius:   var(--border-radius-lg);
    overflow:        hidden;
    border:          1px solid var(--border-color);
}
.data-table th {
    padding:        11px 16px;
    text-align:     left;
    font-size:      11px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color:          var(--text-muted);
    background:     var(--surface-muted);
    border-bottom:  1px solid var(--border-color);
    white-space:    nowrap;
}
.data-table td {
    padding:       12px 16px;
    font-size:     14px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--surface-muted); }
.data-table__actions { display: flex; gap: var(--space-1); align-items: center; }

/* ── Divider ─────────────────────────────────────────────── */
.divider { height: 1px; background: var(--border-color); margin: var(--space-4) 0; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   13px;
    color:       var(--text-muted);
    margin-bottom: var(--space-4);
    flex-wrap:   wrap;
}
.breadcrumb a { color: var(--color-primary); }
.breadcrumb__sep { color: var(--border-color); }

/* ── Like button ─────────────────────────────────────────── */
.like-btn {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-1);
    background:  var(--surface-muted);
    border:      none;
    border-radius: var(--border-radius-pill);
    padding:     5px 12px;
    font-size:   13px;
    font-family: var(--font-body);
    color:       var(--text-secondary);
    cursor:      pointer;
    transition:  all var(--transition-fast);
}
.like-btn svg { width: 14px; height: 14px; }
.like-btn:hover, .like-btn.is-liked { background: var(--color-primary); color: #fff; }