/* =========================================================
   style_my_scenarios.css — "Mes scénarios" page layout (Phase 4)

   Depends on:
     style.css          — avatars, badges, empty states, btn variants,
                          overlay animation
     style_list.css     — .action-button, .view-button, .action-cell
     style_modal.css    — .modal, .modal-body, .modal-header, .close
   ========================================================= */

/* ── Page header ─────────────────────────────────────────── */

.myscenarios-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Let h1 breathe instead of stretching the full row */
.myscenarios-header h1 {
    margin: 0.4em 0;
}

/* ── Filter bar ──────────────────────────────────────────── */

.myscenarios-filters {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.myscenarios-filters select {
    min-width: 160px;
}

.myscenarios-filters input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: var(--small-padding) var(--base-padding);
    border: 1px solid var(--element_border);
    border-radius: 5px;
}

.myscenarios-filters .myscenarios-clear {
    text-decoration: none;
    font-size: 0.9em;
    white-space: nowrap;
}

/* ── Table wrapper (responsive scroll) ───────────────────── */

.myscenarios-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.myscenarios-table-wrap table {
    min-width: 780px;
}

/* Let action buttons wrap on narrow widths */
.myscenarios-table-wrap .action-cell {
    white-space: normal;
    display: flex;
    gap: 0.35rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ── Role markers (title column) ─────────────────────────── */

.role-marker {
    display: inline-block;
    font-size: 0.75em;
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 0.4rem;
    vertical-align: middle;
    line-height: 1.5;
}

/* Owner: key emoji is self-styled, so no background needed */
.role-marker--owner {
    background: transparent;
    padding: 0;
    font-size: 0.95em;
}

.role-marker--editor {
    background: #e3f2fd;
    color: #1565C0;
}

.role-marker--reader {
    background: #f3e5f5;
    color: #7B2D8E;
}

/* ── Empty state (page-specific extra padding) ───────────── */

.myscenarios-empty {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* ── Settings panel (expandable row below owned scenarios) ─ */

.settings-row {
    /* JS toggles display; no extra rules needed */
}

.settings-panel {
    padding: 1rem;
    background: var(--element_contrast);
    border: 1px solid var(--element_border);
    border-radius: 6px;
}

.settings-section {
    margin-bottom: 1.5rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section h4 {
    margin: 0 0 0.75rem 0;
    font-size: var(--fs-md);
}

/* Muted hint for empty collaborator/request lists */
.settings-empty-hint {
    color: #888;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* ── Publish toggle ──────────────────────────────────────── */

.settings-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-left: 0;
}

.publish-badge {
    display: inline-block;
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 3px;
    transition: background-color 0.2s, color 0.2s;
}

.publish-badge--on {
    background: #2D6A4F;
    color: #fff;
}

.publish-badge--off {
    background: #ccc;
    color: #333;
}

/* ── Collaborator list ───────────────────────────────────── */

.collab-list,
.request-list {
    /* Container — no special styles needed, semantic wrapper */
}

.collab-row,
.request-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.collab-row:last-child,
.request-row:last-child {
    border-bottom: none;
}

.collab-name,
.request-name {
    flex: 1;
    min-width: 0;            /* allow text truncation in tight layouts */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Request date ────────────────────────────────────────── */

.request-date {
    font-size: 0.8em;
    color: #888;
    white-space: nowrap;
}

/* ── Overlay polish ──────────────────────────────────────── */

#myScenariosOverlayActions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 1rem;
}

#myScenariosOverlayActions .btn-access,
#myScenariosOverlayActions a[href*="form1.php"] {
    font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────── */

@media screen and (max-width: 768px) {

    /* Stack page header vertically, center the CTA */
    .myscenarios-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .myscenarios-header .btn-create {
        align-self: center;
    }

    /* Stack filter controls */
    .myscenarios-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .myscenarios-filters select,
    .myscenarios-filters input[type="text"] {
        width: 100%;
        min-width: 0;
    }

    /* Settings panel: let collab/request rows wrap */
    .collab-row,
    .request-row {
        flex-wrap: wrap;
    }

    /* Name takes full width, actions wrap below */
    .collab-name,
    .request-name {
        flex-basis: 100%;
        white-space: normal;
    }
}