/* ============================================
   SAHE Knowledge Base — Academic Curator Theme
   ============================================ */

/* ── Layout Utilities ── */
.kb-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.kb-container-fluid { padding: 0 1.5rem; }
.kb-grid { display: grid; gap: 1.5rem; }
.kb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.kb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kb-grid-4 { grid-template-columns: repeat(4, 1fr); }
.kb-grid-8-4 { grid-template-columns: 2fr 1fr; }

@media (max-width: 991.98px) {
    .kb-grid-8-4 { grid-template-columns: 1fr; }
    .kb-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    .kb-grid-3 { grid-template-columns: 1fr; }
    .kb-grid-4 { grid-template-columns: 1fr; }
    .kb-grid-2 { grid-template-columns: 1fr; }
}

/* ── Hero / Header Sections ── */
.kb-hero {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    padding: 3.5rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
}
.kb-hero::before,
.article-header::before,
.category-header::before,
.search-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}
.kb-hero > *,
.article-header > *,
.category-header > *,
.search-header > * {
    position: relative;
    z-index: 1;
}
.kb-hero h1 { font-weight: 700; margin-bottom: 0.5rem; color: #fff; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.kb-hero p { opacity: 0.9; margin-bottom: 1.5rem; font-size: 1.05rem; }

.article-header,
.category-header,
.search-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    padding: 3rem 0;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.article-header h1,
.category-header h1,
.search-header h1 {
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.article-header h1 { margin-bottom: 1rem; }

/* Breadcrumb */
.breadcrumb-kb {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.breadcrumb-kb a { color: rgba(255,255,255,0.7); text-decoration: none; transition: color var(--transition-fast); }
.breadcrumb-kb a:hover { color: #fff; }
.breadcrumb-kb .material-symbols-outlined { font-size: 0.75rem; opacity: 0.5; }
.breadcrumb-kb span:last-child { color: rgba(255,255,255,0.9); }

/* Article meta header */
.article-meta-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    align-items: center;
}
.article-meta-header .material-symbols-outlined { font-size: 0.875rem; vertical-align: middle; }

/* ── Search Form ── */
.kb-search-form { max-width: 640px; margin: 0 auto; }
.kb-search-form form {
    display: flex;
    background: #fff;
    border-radius: var(--radius-full);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.kb-search-form input {
    flex: 1;
    border: none;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-family: var(--font-sans);
    color: var(--on-surface);
    outline: none;
}
.kb-search-form button {
    padding: 0.75rem 1.5rem;
    border: none;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-sans);
    transition: background var(--transition-fast);
}
.kb-search-form button:hover { background: var(--primary-container); }

/* Search form (large, in-page) */
.search-form-large form {
    display: flex;
    gap: 0.5rem;
}
.search-form-large input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: var(--font-sans);
    background: rgba(255,255,255,0.1);
    color: #fff;
    outline: none;
}
.search-form-large input::placeholder { color: rgba(255,255,255,0.6); }
.search-form-large input:focus { border-color: rgba(255,255,255,0.6); }
.search-form-large button {
    padding: 0.75rem 1.5rem;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-sans);
    transition: background var(--transition-fast);
}
.search-form-large button:hover { background: rgba(255,255,255,0.3); }

/* ── Category Cards ── */
.kb-category-card {
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    text-decoration: none;
    color: inherit;
    display: block;
    background: var(--surface-container-lowest);
}
.kb-category-card:hover {
    border-color: var(--primary-fixed-dim);
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    color: inherit;
}
.kb-category-icon {
    width: 64px; height: 64px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
    transition: transform var(--transition-normal);
}
.kb-category-card:hover .kb-category-icon { transform: scale(1.1); }
.kb-category-card h5 { font-weight: 600; margin-bottom: 0.5rem; color: var(--on-surface); }
.kb-category-card p { color: var(--outline); font-size: 0.9rem; margin-bottom: 0.5rem; }
.kb-category-count { color: var(--primary); font-size: 0.85rem; font-weight: 600; }

.kb-header-icon {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    background: rgba(255,255,255,0.2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}

/* ── Section Titles ── */
.kb-section-title {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kb-section-title .material-symbols-outlined { color: var(--primary); }

/* ── Article Cards ── */
.kb-article-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    height: 100%;
}
.kb-article-card:hover {
    border-color: var(--primary-fixed-dim);
    box-shadow: var(--shadow-md);
}
.kb-article-card h6 { margin-bottom: 0.5rem; }
.kb-article-card h6 a { color: var(--on-surface); text-decoration: none; font-weight: 600; }
.kb-article-card h6 a:hover { color: var(--primary); }
.kb-article-card p { color: var(--outline); font-size: 0.875rem; margin-bottom: 0.5rem; line-height: 1.5; }

.kb-featured-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tertiary);
    background: var(--tertiary-fixed);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.kb-article-meta {
    font-size: 0.78rem;
    color: var(--outline);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.kb-article-meta .material-symbols-outlined { font-size: 0.8rem; }

/* Article list card (horizontal) */
.kb-article-list-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 0.875rem;
    transition: border-color var(--transition-fast);
}
.kb-article-list-card:hover { border-color: var(--primary-fixed-dim); }
.kb-article-list-card h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.kb-article-list-card h5 a { color: var(--on-surface); text-decoration: none; font-weight: 600; }
.kb-article-list-card h5 a:hover { color: var(--primary); }
.kb-article-list-card p { color: var(--outline); font-size: 0.875rem; margin-bottom: 0.5rem; }

/* ── KB Sidebar Card ── */
.kb-sidebar-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.kb-sidebar-card h6 {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.875rem;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.kb-related-article {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--surface-container-low);
    text-decoration: none;
    color: var(--on-surface);
    font-size: 0.85rem;
    transition: color var(--transition-fast);
}
.kb-related-article:last-child { border-bottom: none; }
.kb-related-article:hover { color: var(--primary); }
.kb-related-article .material-symbols-outlined { font-size: 0.875rem; color: var(--outline); flex-shrink: 0; margin-top: 0.1rem; }

/* ── Status Badges ── */
.kb-status-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.kb-status-draft { background: var(--primary-fixed); color: var(--primary); }
.kb-status-published { background: var(--secondary-container); color: #006e25; }
.kb-status-archived { background: var(--surface-container-high); color: var(--outline); }

/* ── Page Header (staff management pages) ── */
.kb-page-header {
    padding: 1.25rem 0;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--outline-variant);
}
.kb-page-header h4 {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Filter Card ── */
.kb-filter-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ── Articles Table ── */
.kb-articles-table {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.kb-articles-table table { width: 100%; border-collapse: collapse; }
.kb-articles-table th {
    background: var(--surface-container-low);
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--outline);
    border-bottom: 1px solid var(--outline-variant);
    white-space: nowrap;
}
.kb-articles-table td {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--on-surface);
    border-bottom: 1px solid var(--surface-container-low);
    vertical-align: middle;
}
.kb-articles-table tr:last-child td { border-bottom: none; }
.kb-articles-table tr:hover td { background: var(--surface-container-low); }

.kb-sortable-header {
    color: var(--outline);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.kb-sortable-header:hover { color: var(--primary); }

.kb-article-title-link { font-weight: 600; color: var(--on-surface); }
.kb-article-title-link:hover { color: var(--primary); }

.kb-action-btn {
    width: 30px; height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--outline);
    cursor: pointer;
    text-decoration: none;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    padding: 0;
}
.kb-action-btn:hover { background: var(--surface-container-low); color: var(--primary); border-color: var(--primary-fixed-dim); }
.kb-action-btn.danger:hover { color: var(--error); border-color: var(--error); }

/* ── Form Cards ── */
.kb-form-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.kb-form-card h6 {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.kb-form-card h5 {
    font-weight: 700;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.kb-form-card .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-bottom: 0.3rem;
    display: block;
}
.kb-form-card .form-control,
.kb-form-card .form-select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    border: 1.5px solid var(--outline-variant);
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    transition: border-color var(--transition-fast);
}
.kb-form-card .form-control:focus,
.kb-form-card .form-select:focus {
    outline: none;
    border-color: var(--primary);
}
.kb-form-card textarea.form-control { min-height: 80px; resize: vertical; }

.kb-help-text { font-size: 0.72rem; color: var(--outline); margin-top: 0.25rem; }
.kb-required::after { content: ' *'; color: var(--error); }

.kb-form-container { max-width: 700px; margin: 0 auto; padding: 1.5rem 0; }

/* ── Detail Card ── */
.kb-detail-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.kb-detail-card h6 {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.kb-content-preview {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--on-surface);
}
.kb-content-preview img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

.kb-revision-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--surface-container-low);
    font-size: 0.85rem;
}
.kb-revision-item:last-child { border-bottom: none; }

.kb-info-table { width: 100%; font-size: 0.8125rem; }
.kb-info-table td { padding: 0.5rem 0; vertical-align: top; border-bottom: 1px solid var(--surface-container-low); }
.kb-info-table tr:last-child td { border-bottom: none; }
.kb-info-table td:first-child { font-weight: 600; color: var(--outline); width: 110px; }
.kb-info-table code { font-size: 0.75rem; background: var(--surface-container-low); padding: 0.15rem 0.35rem; border-radius: var(--radius-sm); }

/* ── Delete Confirmation ── */
.kb-delete-container {
    max-width: 480px;
    margin: 3rem auto;
    text-align: center;
}
.kb-delete-container.narrow { max-width: 420px; }
.kb-delete-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-md);
}
.kb-delete-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--error-container);
    color: var(--error);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
}
.kb-delete-preview {
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin: 1rem 0 1.5rem;
    text-align: left;
}
.kb-delete-preview h6 { font-weight: 600; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }

.kb-category-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin: 1rem 0 1.5rem;
    text-align: left;
}
.kb-preview-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.kb-preview-info h6 { margin-bottom: 0.125rem; font-weight: 600; }

.kb-warning-box {
    background: var(--tertiary-fixed);
    border: 1px solid var(--tertiary);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0 1.25rem;
    text-align: left;
    font-size: 0.85rem;
    color: var(--tertiary);
}

/* ── Category Management ── */
.kb-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}
.kb-manage-category-card {
    display: flex;
    gap: 1rem;
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: border-color var(--transition-fast);
}
.kb-manage-category-card:hover { border-color: var(--primary-fixed-dim); }
.kb-manage-category-card.kb-category-inactive { opacity: 0.6; }
.kb-category-icon-wrapper {
    width: 48px; height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.kb-category-content h6 { font-weight: 600; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.375rem; }
.kb-category-content p { font-size: 0.8125rem; color: var(--outline); margin-bottom: 0; }
.kb-category-meta { font-size: 0.75rem; color: var(--outline); margin-top: 0.25rem; display: flex; align-items: center; gap: 0.25rem; }
.kb-category-actions { display: flex; gap: 0.375rem; }

.kb-manage-empty, .kb-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--outline);
}
.kb-manage-empty .material-symbols-outlined,
.kb-empty-state .material-symbols-outlined { font-size: 3rem; opacity: 0.4; display: block; margin-bottom: 0.75rem; }
.kb-manage-empty h4,
.kb-empty-state h4 { color: var(--outline); font-weight: 600; }
.kb-manage-empty p,
.kb-empty-state p { color: var(--outline); margin-bottom: 1rem; }

/* ── Article Content ── */
.article-content {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--on-surface);
}
.article-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1rem 0; }
.article-content h2, .article-content h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-weight: 700; }
.article-content a { color: var(--primary); }
.article-content blockquote {
    border-left: 3px solid var(--primary-fixed-dim);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--on-surface-variant);
}
.article-tags {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--outline-variant);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

/* ── Icon Preview (category form) ── */
.kb-icon-preview {
    width: 64px; height: 64px;
    border-radius: var(--radius-lg);
    background: var(--surface-container-low);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    color: var(--primary);
    border: 1px solid var(--outline-variant);
}

/* ── Pagination ── */
.kb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 1.5rem;
}
.kb-pagination a,
.kb-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--outline-variant);
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    transition: all var(--transition-fast);
}
.kb-pagination a:hover { background: var(--primary-fixed); color: var(--primary); border-color: var(--primary-fixed-dim); }
.kb-pagination .active {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: var(--on-primary);
    border-color: transparent;
}

/* ── Form check styling ── */
.kb-form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--on-surface);
    cursor: pointer;
}
.kb-form-check input[type="checkbox"] { accent-color: var(--primary); width: 1rem; height: 1rem; }

/* ── Quick Action Buttons ── */
.kb-quick-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.kb-quick-btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all var(--transition-fast);
}
.kb-quick-btn:hover { background: var(--surface-container-low); }
.kb-quick-btn.success { color: var(--secondary); border-color: var(--secondary); }
.kb-quick-btn.success:hover { background: var(--secondary-container); }
.kb-quick-btn.warning { color: var(--tertiary); border-color: var(--tertiary); }
.kb-quick-btn.warning:hover { background: var(--tertiary-fixed); }
.kb-quick-btn.danger { color: var(--error); border-color: var(--error); }
.kb-quick-btn.danger:hover { background: var(--error-container); }

/* ── Tag badges ── */
.kb-tag {
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--surface-container-high);
    color: var(--on-surface-variant);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    display: inline-block;
}