/* =====================================================================
   forms.css — CSS dùng chung cho trang Edit/Create Admin (2 cột: nội
   dung chính .edit-main + sidebar .edit-side), gom từ 5 trang
   ArticleEditAdmin/DocumentEditAdmin/DocumentCreateAdmin/CourseEditAdmin/
   EventEditAdmin.

   Nguồn canonical: DocumentEditAdmin.razor.css (comment gốc tự ghi
   "đồng bộ ArticleEditAdmin" — bản mới nhất/đầy đủ nhất). DocumentCreateAdmin
   trùng 100% (form tạo mới = tập con form sửa). CourseEditAdmin/EventEditAdmin
   overlap thấp hơn (nhiều UI riêng: quản lý chương/bài, diễn giả/đăng ký) —
   phần riêng đó giữ nguyên trong từng `.razor.css`.
   ===================================================================== */

.page-head__sub {
    margin: 2px 0 0;
    font-size: .8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Layout 2 cột */
.edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.edit-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.edit-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 16px;
}

.edit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: none;
}

.edit-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text);
}

.edit-card__head strong {
    color: var(--text);
    font-weight: 600;
}

.edit-card__head .rz-icon {
    font-size: 20px;
    color: var(--primary);
}

.edit-empty {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.field-label {
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.field-error {
    color: #B91C1C;
    font-size: 12px;
}

.locale-hint {
    margin: 0;
    padding: 10px 12px;
    font-size: .8125rem;
    color: var(--text-secondary);
    background: var(--primary-light);
    border: 1px solid var(--primary-border, #BFE9E6);
    border-radius: 8px;
    line-height: 1.5;
}

.locale-hint code {
    font-size: .75rem;
    padding: 1px 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* Locale tabs — 1 CARD DUY NHẤT (đúng pattern tab chuẩn Material/GitHub/Bootstrap nav-tabs): thanh
   tab VI/EN là "header" của .edit-card, nội dung field là "body", liền nhau trong cùng khối, chỉ
   phân tách bằng 1 viền mảnh dưới thanh tab — không phải nav với nội dung là 2 card rời có khoảng
   cách. .edit-locale-tabs luôn đi kèm class .edit-card trên cùng 1 div nên không cần div bọc riêng. */
.edit-locale-tabs {
    padding: 0;
    overflow: hidden;
}

.edit-locale-tabs .rz-tabview {
    background: transparent;
    border: none;
    box-shadow: none;
}

.edit-locale-tabs .rz-tabview-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 10px 16px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--divider, #E2E8F0);
}

/* [SỬA 2026-08-24] ".rz-tabview-nav-link"/".rz-link" không tồn tại thật trong Radzen.Blazor 10.4.7 —
   xem giải thích đầy đủ ở shared.css cùng khối "[SỬA 2026-08-24]". Markup thật: <li> chứa thẳng <a>/
   <button>, không có class riêng — reset nền/viền trên <li>, padding/font trên <li> a / <li> button. */
.edit-locale-tabs .rz-tabview-nav li {
    margin: 0 0 -1px;
    float: none;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-secondary) !important;
    transition: color .15s ease, border-color .15s ease;
}

.edit-locale-tabs .rz-tabview-nav li a,
.edit-locale-tabs .rz-tabview-nav li button {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 14px;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none !important;
    transition: color .15s ease, border-color .15s ease;
}

.edit-locale-tabs .rz-tabview-nav li:hover {
    color: var(--text-body) !important;
}

.edit-locale-tabs .rz-tabview-nav li.rz-tabview-selected {
    color: var(--primary) !important;
}

.edit-locale-tabs .rz-tabview-nav li.rz-tabview-selected a,
.edit-locale-tabs .rz-tabview-nav li.rz-tabview-selected button {
    border-bottom-color: var(--primary) !important;
}

.edit-locale-tabs .rz-tabview-panels,
.edit-locale-tabs .rz-tabview-panel {
    background: transparent;
    border: none;
    padding: 0;
}

.edit-panel {
    padding: 16px;
    width: 100%;
}

/* Ép mọi field trong cả cột trái (.edit-panel) lẫn cột phải (.edit-card) full chiều ngang —
   RadzenDropDown/RadzenNumeric có width mặc định riêng, chỉ set Style trực tiếp trên component
   không đủ vì .rz-form-field-content bọc ngoài không tự stretch theo. */
.edit-panel .rz-stack,
.edit-card .rz-stack {
    gap: 1.25rem !important;
    align-items: stretch !important;
    width: 100%;
}

.edit-panel .rz-form-field,
.edit-card .rz-form-field {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin-block: 0 !important;
}

.edit-panel .rz-textbox,
.edit-panel .rz-textarea,
.edit-panel .rz-form-field-content,
.edit-card .rz-textbox,
.edit-card .rz-textarea,
.edit-card .rz-dropdown,
.edit-card .rz-numeric,
.edit-card .rz-form-field-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.edit-card .rz-numeric-input {
    width: 100% !important;
}

.edit-panel .rz-textarea {
    min-height: 96px !important;
}

.edit-card > .rz-stack,
.edit-card .rz-stack {
    gap: 0.75rem !important;
}

.edit-card .rz-button {
    margin: 0 !important;
}

.edit-panel .rz-form-field-content,
.edit-card .rz-form-field-content {
    background-color: transparent;
    border-radius: var(--radius, 10px);
}

.edit-panel .rz-form-field-content .rz-textbox,
.edit-panel .rz-form-field-content .rz-textarea,
.edit-card .rz-form-field-content .rz-textbox,
.edit-card .rz-form-field-content .rz-textarea,
.edit-card .rz-form-field-content .rz-dropdown,
.edit-card .rz-form-field-content .rz-datepicker,
.edit-card .rz-form-field-content .rz-numeric {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.edit-panel .rz-form-field-label,
.edit-card .rz-form-field-label {
    background-color: var(--surface) !important;
}

.editor-host {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.editor-host .rz-html-editor {
    border: none;
}

.status-badge--published { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.status-badge--draft     { background: var(--background); color: var(--text-secondary); }
.status-badge--pending    { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.status-badge--hidden    { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.status-badge--suspended { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }

/* Publish sidebar */
.publish-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Ảnh bìa */
.thumb-preview {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}

.thumb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 120px;
    margin-bottom: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--sidebar, #020617);
    color: var(--text-secondary);
    font-size: 12px;
}

.thumb-empty .rz-icon {
    font-size: 28px;
    color: var(--disabled, #9CA3AF);
}

/* File tài liệu */
.file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
}

.file-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--primary);
}

.file-card__icon .rz-icon {
    font-size: 20px;
}

.file-card__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.file-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-card__link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}

.file-card__link:hover {
    text-decoration: underline;
}

.file-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 64px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--background);
    color: var(--text-secondary);
    font-size: 13px;
}

.file-empty .rz-icon {
    font-size: 22px;
    color: var(--disabled, #9CA3AF);
}

.file-pick-action {
    margin-top: 10px;
    display: flex;
}

/* Keywords */
.keyword-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.keyword-list__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-body);
    border-radius: 6px;
}

.keyword-list__item:hover {
    background: var(--background);
}

/* Đánh giá */
.review-list {
    display: flex;
    flex-direction: column;
}

.review-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--adm-grid-row-border, var(--border));
}

.review-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.review-row--hidden {
    opacity: .55;
}

.review-row__main {
    min-width: 0;
    flex: 1;
}

.review-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.review-row__meta strong {
    color: var(--text);
}

.comment-hidden-tag {
    padding: 1px 6px;
    border-radius: 999px;
    background: #FEF2F2;
    color: #B91C1C;
    font-weight: 600;
    font-size: 11px;
}

.review-row__body {
    font-size: 14px;
    color: var(--text);
    line-height: 1.45;
    word-break: break-word;
}

@media (max-width: 1024px) {
    .edit-layout {
        grid-template-columns: 1fr;
    }

    .edit-side {
        position: static;
    }
}