/**
 * TSS 도움말 센터 — 사용 매뉴얼 버튼·허브·관리 화면 공통 스타일
 * 문서함(doc-lib-btn-permissions) 톤과 동일하게 맞춤
 */

/* ── 사용 매뉴얼 버튼 (전 모듈 통일) ── */
.help-manual-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--tss-border, #dee2e6);
    background: var(--tss-surface, #fff);
    color: var(--tss-text, #212529);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.help-manual-link:hover,
.help-manual-link:focus-visible {
    background: var(--tss-row-hover, #f8f9fa);
    border-color: var(--tss-accent-border, #86b7fe);
    color: var(--tss-accent, #0d6efd);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(13, 110, 253, 0.12);
}

.help-manual-link i {
    font-size: 1rem;
    line-height: 1;
}

/* 문서함 hero 영역과 동일 크기·강조 */
.help-manual-link--hero {
    padding: 0.62rem 1.2rem;
    font-size: 0.9375rem;
    border-color: var(--tss-accent-border, #86b7fe);
    color: var(--tss-accent, #0d6efd);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.15);
}

.help-manual-link--hero:hover,
.help-manual-link--hero:focus-visible {
    background: var(--tss-accent, #0d6efd);
    border-color: var(--tss-accent, #0d6efd);
    color: #fff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.28);
}

/* 헤더 우측 액션 버튼과 높이 맞춤 (관리·TS 화면) */
.help-manual-link--inline {
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
}

/* 페이지 헤더 — 제목 좌 / 사용 매뉴얼·버튼 우 (전 모듈 고정 위치) */
.help-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.help-page-header--standard,
.ts-page-header {
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--tss-border, #dee2e6);
}

.help-page-header__main {
    flex: 1 1 12rem;
    min-width: 0;
}

.help-page-header__actions,
.ts-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

/* 문서함 hero — 다른 모듈과 동일 우측 정렬 */
.doc-lib-hero-top {
    align-items: flex-start;
}

.doc-lib-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}

/* 대시보드·허브 — 컴팩트 진입 링크 */
.help-hub-compact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 2rem;
    border: 1px solid var(--tss-accent-border-soft, #cfe2ff);
    background: var(--tss-accent-soft, #e7f1ff);
    color: var(--tss-accent, #0d6efd);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.help-hub-compact-link:hover {
    background: var(--tss-accent, #0d6efd);
    border-color: var(--tss-accent, #0d6efd);
    color: #fff;
    text-decoration: none;
}

.help-page-header.tickets-page-top {
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.help-page-header.tickets-page-top .help-page-header__actions {
  padding-top: 0.15rem;
}

.dashboard-tab-lead-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

/* 관리·허브 — 필터 툴바 + 테이블 */
.help-panel {
    border: 1px solid var(--tss-border, #dee2e6);
    border-radius: 0.75rem;
    background: var(--tss-surface, #fff);
    overflow: hidden;
}

.help-panel__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--tss-border, #dee2e6);
    background: var(--tss-surface-muted, #f8f9fa);
}

.help-panel__toolbar .form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tss-muted, #6c757d);
    margin-bottom: 0.25rem;
}

.help-panel__toolbar .form-select {
    min-width: 10rem;
    font-size: 0.9rem;
}

.help-panel__table {
    margin-bottom: 0;
}

.help-panel__table thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tss-muted, #6c757d);
    background: var(--tss-surface, #fff);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.help-panel__table tbody td {
    vertical-align: middle;
    font-size: 0.9rem;
}

.help-panel__table .help-slot-title {
    font-weight: 600;
    color: var(--tss-text, #212529);
}

.help-panel__table .help-slot-desc {
    font-size: 0.8125rem;
    color: var(--tss-muted, #6c757d);
    max-width: 28rem;
}

.help-panel__empty {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--tss-muted, #6c757d);
}

html[data-tss-theme="dark"] .help-manual-link {
    background: var(--tss-surface, #1e293b);
    border-color: var(--tss-border, #334155);
    color: var(--tss-text, #e2e8f0);
}

html[data-tss-theme="dark"] .help-manual-link--hero {
    border-color: var(--tss-accent-border, #3b82f6);
    color: #93c5fd;
}

html[data-tss-theme="dark"] .help-hub-compact-link {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

/* ── 관리자 버전 관리 (/admin/help-manuals/{id}) ── */
.help-admin-detail__section-title {
    align-items: center;
}

.help-admin-detail__body {
    padding: 1.25rem;
}

.help-admin-upload-form .help-admin-file-input {
    min-height: 2.75rem;
}

.help-admin-upload-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.25rem;
}

.help-admin-version-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

html[data-tss-theme="dark"] .help-admin-detail .help-admin-file-input.form-control {
    background-color: #0f172a;
    color: var(--tss-text, #e2e8f0);
    border-color: var(--tss-border, #334155);
}

html[data-tss-theme="dark"] .help-admin-detail .help-admin-file-input.form-control::file-selector-button {
    background-color: var(--tss-surface-muted, #334155);
    color: var(--tss-text, #e2e8f0);
    border: 1px solid var(--tss-border, #475569);
    border-radius: 0.375rem;
    padding: 0.375rem 0.85rem;
    margin-right: 0.75rem;
    cursor: pointer;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-success {
    background-color: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-warning {
    color: #fbbf24;
    border-color: #ca8a04;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-warning:hover {
    background-color: rgba(234, 179, 8, 0.15);
    color: #fde68a;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-primary {
    color: #93c5fd;
    border-color: #3b82f6;
}

html[data-tss-theme="dark"] .help-admin-detail .btn-outline-primary:hover {
    background-color: rgba(59, 130, 246, 0.15);
    color: #bfdbfe;
}