/**
 * File Path: assets/css/mbs-admin-settings-authors.css
 * Authors tab styles; loaded when the Authors tab is active.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* AUTHORS TAB LAYOUT (Phase 4d — Round 2)                    */
/*                                                            */
/* Replaces the old table-based Authors UI with a list of     */
/* collapsible <details> cards, one per author. Built on top  */
/* of the Phase 4b/4c .mbs-settings-card system so the visual */
/* language matches General and Formatting.                   */
/* ========================================================= */

/* ----- Tab wrapper ----- */
.mbs-tab-authors {
    max-width: 1200px;
    padding-top: 12px;
}

.mbs-tab-authors > h2 {
    margin-bottom: 8px;
}

/* List of author cards */
.mbs-authors-card-list {
    margin-top: 20px;
}

/* ----- Avatar / initial placeholder ----- */
.mbs-author-card-thumb,
.mbs-author-card-thumb-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mbs-author-card-thumb {
    object-fit: cover;
    background: #f0f0f1;
}

.mbs-author-card-thumb-placeholder {
    background: #dcdcde;
    color: #50575e;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Full-width field cells (bio, website) ----- */
.mbs-author-field-wide {
    margin-bottom: 16px;
    clear: both;
}

.mbs-author-field-wide > input[type="url"],
.mbs-author-field-wide > textarea {
    width: 100%;
    box-sizing: border-box;
}

.mbs-author-field-wide > textarea {
    min-height: 72px;
}

/* ----- Photo field row ----- */
.mbs-author-field-photo {
    margin-bottom: 16px;
    clear: both;
}

/* Photo picker row — moved here from the legacy table-based Authors block
   (pre-Round 2) because the three selectors below are still consumed by
   MBS_Tab_Authors::render_photo_field(). */
.mbs-author-photo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mbs-author-photo-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.mbs-author-remove-btn {
    color: var(--mbs-status-err);
    margin-left: 4px;
}

/* ----- Social platform URL grid ----- */
.mbs-author-social-section {
    margin-top: 16px;
}

.mbs-author-social-section > h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e5e5;
    color: #2c3338;
}

/* 2-col responsive; stacks to 1 col on narrow screens. Seven platforms
   currently — last row has a single cell by design, no filler needed. */
.mbs-author-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

@media (max-width: 782px) {
    .mbs-author-social-grid {
        grid-template-columns: 1fr;
    }
}

.mbs-author-social-grid > .mbs-settings-field-cell > input[type="url"] {
    width: 100%;
    box-sizing: border-box;
}

/* ----- Name structure section (F-NAMES-1) ----- */
/* Collapsible <details> block below Social Platforms.
   Collapsed by default so the card stays compact for   */
/* admins who do not need ONIX export.                 */
.mbs-author-name-structure {
    margin-top: 16px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.mbs-author-name-structure > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #2c3338;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}

.mbs-author-name-structure > summary::-webkit-details-marker {
    display: none;
}

.mbs-author-name-structure > summary::before {
    content: '\25B6';
    font-size: 10px;
    color: #787c82;
    transition: transform 0.15s ease;
}

.mbs-author-name-structure[open] > summary::before {
    transform: rotate(90deg);
}

.mbs-author-name-structure[open] > summary {
    border-bottom: 1px solid #e5e5e5;
}

.mbs-author-name-structure-body {
    padding: 14px;
}

.mbs-author-name-structure-body > .description {
    margin: 0 0 12px 0;
    color: #646970;
}

/* 2-col grid matching the social platform grid */
.mbs-author-name-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

@media (max-width: 782px) {
    .mbs-author-name-grid {
        grid-template-columns: 1fr;
    }
}

.mbs-author-name-grid > .mbs-settings-field-cell > input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

/* Full-width inverted name row */
.mbs-author-name-inverted-row {
    margin-top: 14px;
}

.mbs-author-name-inverted-row > label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.mbs-author-name-inverted-row input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

.mbs-author-name-inverted-row > .description {
    margin-top: 4px;
    font-style: italic;
}
