/* =========================================================
   THERAOO CORE - DASHBOARD "MES FICHES"
   Inspiré du rendu historique Findus
   ========================================================= */


/* Conteneur général */

.theraoo-dashboard-title {
    margin: 0 0 30px;
}

.theraoo-listings-list {
    background: #fff;
}


/* Carte d'une fiche */

.theraoo-my-listing-item {
    background: #fff;
    padding: 35px;
    margin-bottom: 20px;

    border-radius: 4px;

    box-shadow:
        0 0 10px 1px rgba(71, 85, 95, 0.08);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


/* Partie gauche */

.theraoo-my-listing-main {
    display: flex;
    align-items: center;
    gap: 25px;

    flex: 1;
    min-width: 0;
}


/* Image */

.theraoo-my-listing-image {
    flex: 0 0 155px;
    width: 155px;
    height: 130px;

    overflow: hidden;

    border-radius: 6px;
}

.theraoo-my-listing-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.theraoo-my-listing-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* Contenu */

.theraoo-my-listing-content {
    flex: 1;
    min-width: 0;

    color: #626a70;
}


.theraoo-my-listing-title {
    font-size: 18px;
    line-height: 1.3;

    font-weight: 400;

    margin: 0 0 7px;
}


.theraoo-my-listing-title a {
    color: #26354e;
    text-decoration: none;

    transition: color 0.2s ease;
}


.theraoo-my-listing-title a:hover {
    color: #00abc9;
}


/* Slogan */

.theraoo-my-listing-tagline {
    margin-bottom: 5px;

    font-size: 15px;

    color: #626a70;
}


/* Adresse et téléphone */

.theraoo-my-listing-location,
.theraoo-my-listing-phone {
    margin-bottom: 2px;

    font-size: 15px;
    line-height: 1.5;

    color: #626a70;
}


.theraoo-my-listing-location span,
.theraoo-my-listing-phone span {
    display: inline-block;

    margin-right: 7px;

    color: #677782;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.theraoo-my-listing-actions {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    white-space: nowrap;
}


/* Boutons Modifier / Effacer */

.theraoo-dashboard-action {
    background-color: #e4e8ef;

    color: #636a7b;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 18px;

    line-height: 20px;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    border-radius: 50px;

    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}


.theraoo-dashboard-action:hover,
.theraoo-dashboard-action:focus {
    background: #00abc9;
    color: #fff;
}


/* Suppression */

.theraoo-dashboard-action-delete:hover,
.theraoo-dashboard-action-delete:focus {
    background: #ef2f24;
    color: #fff;
}


/* =========================================================
   STATUT
   ========================================================= */

.theraoo-listing-status {
    text-transform: capitalize;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    border-radius: 50px;

    color: #fff;
    background: #000;

    font-size: 13px;
    line-height: 1;
}


/* Publié */

.theraoo-listing-status-publish {
    background: #5cb85c;
}


/* En attente */

.theraoo-listing-status-pending,
.theraoo-listing-status-pending_payment {
    background: #337ab7;
}


/* Expiré */

.theraoo-listing-status-expired {
    background: #f32d49;
}


/* Brouillon */

.theraoo-listing-status-draft,
.theraoo-listing-status-preview {
    background: #999;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .theraoo-my-listing-item {
        align-items: flex-start;
        flex-direction: column;

        padding: 25px;
    }


    .theraoo-my-listing-actions {
        width: 100%;

        justify-content: flex-start;
        flex-wrap: wrap;
    }

}


@media (max-width: 767px) {

    .theraoo-my-listing-item {
        padding: 20px;
    }


    .theraoo-my-listing-main {
        width: 100%;

        align-items: flex-start;
        flex-direction: column;

        gap: 15px;
    }


    .theraoo-my-listing-image {
        width: 100%;
        max-width: 260px;

        height: 170px;

        flex-basis: auto;
    }


    .theraoo-my-listing-content {
        width: 100%;
    }


    .theraoo-my-listing-actions {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }


    .theraoo-dashboard-action,
    .theraoo-listing-status {
        width: 100%;

        text-align: center;
    }


    .theraoo-listing-status {
        grid-column: 1 / -1;
    }

}

.theraoo-phone-toggle {
    margin-left: 8px;
    padding: 4px 10px;

    border: 0;
    border-radius: 4px;

    background: #00abc9;
    color: #fff;

    font-size: 11px;
    line-height: 1.2;

    cursor: pointer;
}

.theraoo-phone-toggle:hover,
.theraoo-phone-toggle:focus {
    background: #008fa8;
    color: #fff;
}

/* =========================================================
   THERAOO - TABLEAU DE BORD UTILISATEUR
   Shortcode : [theraoo_dashboard]
   ========================================================= */

.theraoo-dashboard {
    width: 100%;
}


/* =========================================================
   TITRE
   ========================================================= */

.theraoo-dashboard-title {
    margin: 0 0 32px;

    font-size: 32px;
    line-height: 1.2;
    font-weight: 600;

    color: #1f2937;
}


/* =========================================================
   GRILLE
   ========================================================= */

.theraoo-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 28px;
}


/* =========================================================
   CARTES
   ========================================================= */

.theraoo-dashboard-card {
    box-sizing: border-box;

    min-width: 0;
    min-height: 180px;

    padding: 26px 24px;

    display: flex;
    align-items: center;

    border-radius: 5px;

    color: #fff;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.theraoo-dashboard-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   CONTENU INTERNE
   ========================================================= */

.theraoo-dashboard-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    gap: 16px;
}

.theraoo-dashboard-card-content {
    flex: 1 1 auto;
    min-width: 0;
}


/* =========================================================
   CHIFFRE
   ========================================================= */

.theraoo-dashboard-number {
    margin: 0 0 10px;

    font-size: 42px;
    line-height: 1;
    font-weight: 600;
}


/* =========================================================
   LIBELLE
   ========================================================= */

.theraoo-dashboard-label {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;
}


/* =========================================================
   ICONES
   ========================================================= */

.theraoo-dashboard-icon {
    flex: 0 0 56px;

    width: 56px;
    height: 56px;

    opacity: 0.32;
}

.therao-dashboard-icon svg,
.theraoo-dashboard-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   COULEURS
   ========================================================= */

.theraoo-dashboard-card-total {
    background: #20b66b;
}

.theraoo-dashboard-card-views {
    background: #f5a000;
}

.theraoo-dashboard-card-reviews {
    background: #073267;
}

.theraoo-dashboard-card-bookmarks {
    background: #da0050;
}

.theraoo-dashboard-card-published {
    background: #5cbb5d;
}

.theraoo-dashboard-card-pending {
    background: #ffc928;
}

.theraoo-dashboard-card-agenda {
    background: #d87297;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1024px) {

    .theraoo-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .theraoo-dashboard-title {
        margin-bottom: 24px;

        font-size: 26px;
    }

    .theraoo-dashboard-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .theraoo-dashboard-card {
        min-height: 130px;

        padding: 22px 24px;
    }

    .theraoo-dashboard-number {
        font-size: 38px;
    }

    .theraoo-dashboard-label {
        font-size: 16px;
    }

    .theraoo-dashboard-icon {
        flex-basis: 50px;

        width: 50px;
        height: 50px;
    }

}