/**
 * Styles de la page Configuration Pilo'Board
 * dans le contexte du dashboard Pilo'Blocks.
 *
 * Spécificité via .pib-dashboard-clean pour passer
 * au-dessus du CSS piloboard sans !important.
 */

.pib-dashboard-clean {

    /* ===========================
       Utilitaires manquants
       =========================== */
    .mb-6 {
        margin-bottom: 1.5rem;
    }

    .block {
        display: block;
    }

    .text-sm {
        font-size: 0.875rem;
    }

    .font-medium {
        font-weight: 500;
    }

    .text-gray-700 {
        color: var(--board-color-gray-700, #4a5568);
    }

    /* ===========================
       Reset du wrapper WordPress
       =========================== */
    .piloboard-config-wrap {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* ===========================
       Onglets secondaires
       =========================== */
    h2.nav-tab-wrapper {
        border-bottom: 1px solid var(--pib-dash-gray-200);
        background: none;
        padding: 0;
        margin: 0 0 1.5rem 0;
        display: flex;
        gap: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }

    .piloboard-config-wrap .nav-tab {
        float: none;
        border: none;
        background: none;
        padding: 0.75rem 1rem;
        margin: 0;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--pib-dash-primary-900);
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition: color 0.2s ease, border-color 0.2s ease;

        &:hover {
            color: var(--pib-dash-primary);
            background: none;
            border-bottom-color: var(--pib-dash-gray-300);
        }

        &.nav-tab-active {
            color: var(--pib-dash-primary);
            border-bottom-color: var(--pib-dash-primary-200);
            background: none;
        }
    }

    /* ===========================
       Notices WordPress
       =========================== */
    .piloboard-config-wrap .notice {
        border: none;
        border-left: 3px solid var(--pib-dash-gray-300);
        border-radius: 0.375rem;
        padding: 0.75rem 1rem;
        margin: 0 0 1.5rem 0;
        background: var(--pib-dash-gray-100);
        box-shadow: none;

        &.notice-warning {
            border-left-color: var(--board-color-yellow, #ffa526);
            background: #fffbf5;
        }

        &.notice-error {
            border-left-color: var(--board-color-secondary, #ff603f);
            background: var(--board-color-secondary-200, #ffedeb);
        }

        &.notice-success {
            border-left-color: #059669;
            background: #ecfdf5;
        }

        .notice-dismiss {
            top: 50%;
            transform: translateY(-50%);
        }
    }

    /* ===========================
       Contenu des onglets
       =========================== */
    .piloboard-tab-content {
        margin-top: 1.5rem;

        > * + * {
            margin-top: 1.5rem;
        }
    }

    /* ===========================
       Grille
       =========================== */
    .piloboard-config-wrap .dash-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;

        @media (min-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* ===========================
       Cards dans le contexte config
       =========================== */
    .piloboard-config-wrap .dash-card {
        h2 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--pib-dash-primary-900);
        }

        h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--pib-dash-primary-900);
        }

        p {
            font-size: 0.9rem;
            line-height: 1.5;
        }

        code {
            background: var(--pib-dash-gray-200);
            padding: 0.125rem 0.375rem;
            border-radius: 0.25rem;
            font-size: 0.8rem;
        }
    }

    /* ===========================
       Champs de formulaire
       =========================== */
    .piloboard-config-wrap {

        input[type="url"],
        input[type="text"],
        input[type="number"],
        textarea,
        select {
            border: 1px solid var(--pib-dash-gray-300);
            border-radius: 0.375rem;
            padding: 0.5rem 0.75rem;
            font-size: 0.875rem;
            background: white;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;

            &:focus {
                border-color: var(--pib-dash-primary-200);
                box-shadow: 0 0 0 2px rgba(28, 57, 216, 0.08);
                outline: none;
            }
        }

        textarea {
            line-height: 1.6;
            resize: vertical;
        }

        input[type="checkbox"] {
            accent-color: var(--pib-dash-primary);
        }

        .description {
            font-size: 0.8rem;
            color: var(--board-color-gray-700, #4a5568);
            margin-top: 0.5rem;
        }

        label {
            font-weight: 500;
            color: var(--pib-dash-primary-900);
        }
    }

    /* ===========================
       Boutons
       =========================== */
    .piloboard-config-wrap .piloboard-btn {
        background-color: var(--pib-dash-primary);
        border-color: var(--pib-dash-primary);
        color: white;

        &:hover {
            background-color: transparent;
            color: var(--pib-dash-primary);
            border-color: var(--pib-dash-primary);
        }
    }

    .piloboard-config-wrap p.submit {
        margin-top: 1.5rem;
        padding: 0;
    }

    /* ===========================
       Onglet Hotlink — status & infos
       =========================== */
    .piloboard-config-wrap .piloboard-hotlink-status {
        padding: 0.75rem 1rem;
        border-radius: 0.375rem;
        border-left: 3px solid;
        background: var(--pib-dash-gray-100);
        font-size: 0.9rem;

        &.status-success {
            border-color: #059669;
            background: #ecfdf5;
        }

        &.status-warning {
            border-color: var(--board-color-yellow, #ffa526);
            background: #fffbf5;
        }

        &.status-error {
            border-color: var(--board-color-secondary, #ff603f);
            background: var(--board-color-secondary-200, #ffedeb);
        }
    }

    .piloboard-config-wrap .piloboard-hotlink-info {

        .info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.625rem 0;
            border-bottom: 1px solid var(--pib-dash-gray-200);
            font-size: 0.875rem;

            &:last-child {
                border-bottom: none;
            }
        }

        .label {
            font-weight: 500;
            color: var(--pib-dash-primary-900);
        }

        code {
            background: var(--pib-dash-gray-200);
            padding: 0.125rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
        }
    }

    .piloboard-config-wrap .piloboard-hotlink-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .piloboard-config-wrap .piloboard-ajax-result {
        font-size: 0.875rem;

        &.success {
            color: #059669;
        }

        &.error {
            color: var(--board-color-secondary, #ff603f);
        }
    }

    /* ===========================
       Onglet Accès — checkboxes & user list
       =========================== */
    .piloboard-config-wrap .pibo-user-item {
        font-size: 0.875rem;
        border-radius: 0.375rem;
        transition: background 0.15s ease;

        &:hover {
            background: var(--pib-dash-gray-100);
        }
    }

    .piloboard-config-wrap #pibo-user-search {
        border: 1px solid var(--pib-dash-gray-300);
        border-radius: 0.375rem;
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;

        &:focus {
            border-color: var(--pib-dash-primary-200);
            box-shadow: 0 0 0 2px rgba(28, 57, 216, 0.08);
            outline: none;
        }
    }

    .piloboard-config-wrap #pibo-user-list {
        border: 1px solid var(--pib-dash-gray-200);
        border-radius: 0.375rem;
        background: var(--pib-dash-gray-100);
    }
}