/*
|--------------------------------------------------------------------------
| SAMA CUSTOMER V2.0
|--------------------------------------------------------------------------
| PARTIE 1/5
| Fondation
|--------------------------------------------------------------------------
*/

/*==========================================================================
    Variables
==========================================================================*/

:root{

    --sama-primary:#0d6efd;
    --sama-primary-hover:#0b5ed7;

    --sama-success:#16a34a;
    --sama-warning:#f59e0b;
    --sama-danger:#ef4444;

    --sama-text:#1f2937;
    --sama-text-light:#6b7280;

    --sama-bg:#f5f7fb;
    --sama-white:#ffffff;

    --sama-border:#e5e7eb;

    --sama-radius:18px;

    --sama-shadow:
        0 12px 30px rgba(0,0,0,.05);

    --sama-transition:.25s ease;

}

/*==========================================================================
    Reset
==========================================================================*/

.sama-customer-layout *,
.sama-customer-layout *::before,
.sama-customer-layout *::after{

    box-sizing:border-box;

}

.sama-customer-layout{

    display:flex;

    gap:30px;

    max-width:1450px;

    margin:40px auto;

    padding:0 20px;

    align-items:flex-start;

}

/*==========================================================================
    Sidebar
==========================================================================*/

.sama-customer-sidebar{

    width:280px;

    min-width:280px;

    background:var(--sama-white);

    border:1px solid var(--sama-border);

    border-radius:var(--sama-radius);

    box-shadow:var(--sama-shadow);

    overflow:hidden;

    position:sticky;

    top:30px;

}

/*==========================================================================
    Logo
==========================================================================*/

.sama-customer-sidebar-logo{

    background:var(--sama-primary);

    color:#fff;

    padding:30px;

    text-align:center;

}

.sama-customer-sidebar-logo h2{

    margin:0;

    font-size:22px;

    font-weight:700;

    letter-spacing:.4px;

}

/*==========================================================================
    Main
==========================================================================*/

.sama-customer-main{

    flex:1;

    min-width:0;

}

.sama-customer-dashboard{

    width:100%;

}

/*==========================================================================
    Responsive
==========================================================================*/

@media(max-width:992px){

    .sama-customer-layout{

        flex-direction:column;

    }

    .sama-customer-sidebar{

        width:100%;

        min-width:100%;

        position:relative;

        top:auto;

    }

}

@media(max-width:768px){

    .sama-customer-layout{

        margin:20px auto;

        padding:0 15px;

        gap:20px;

    }

}

/*==========================================================================
    Navigation
==========================================================================*/

.sama-customer-sidebar nav{

    padding:14px;

}

.sama-customer-sidebar ul{

    margin:0;

    padding:0;

    list-style:none;

}

.sama-customer-sidebar li{

    margin:0 0 6px;

}

.sama-customer-sidebar a{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:14px;

    text-decoration:none;

    color:var(--sama-text);

    font-size:15px;

    font-weight:600;

    transition:var(--sama-transition);

}

.sama-customer-sidebar a:hover{

    background:#f3f7ff;

    color:var(--sama-primary);

}

.sama-customer-sidebar a.active{

    background:var(--sama-primary);

    color:#fff;

    box-shadow:0 8px 18px rgba(13,110,253,.20);

}

.sama-customer-sidebar .dashicons{

    width:20px;

    height:20px;

    font-size:20px;

    transition:var(--sama-transition);

    color:#6b7280;

}

.sama-customer-sidebar a:hover .dashicons{

    color:var(--sama-primary);

}

.sama-customer-sidebar a.active .dashicons{

    color:#fff;

}

/*==========================================================================
    Badge
==========================================================================*/

.sama-unread-badge{

    margin-left:auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:22px;

    height:22px;

    padding:0 7px;

    border-radius:999px;

    background:var(--sama-danger);

    color:#fff;

    font-size:11px;

    font-weight:700;

}

.sama-customer-sidebar a.active .sama-unread-badge{

    background:#fff;

    color:var(--sama-danger);

}

/*==========================================================================
    Déconnexion
==========================================================================*/

.sama-customer-sidebar li:last-child{

    margin-top:18px;

    padding-top:18px;

    border-top:1px solid var(--sama-border);

}

/*==========================================================================
    Sidebar Navigation
==========================================================================*/

.sama-customer-menu{

    padding:18px;

}

.sama-customer-menu ul{

    margin:0;

    padding:0;

    list-style:none;

}

.sama-customer-menu li{

    margin:0 0 8px;

}

.sama-customer-menu a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:14px 16px;

    border-radius:14px;

    color:var(--sama-text);

    text-decoration:none;

    transition:var(--sama-transition);

}

.sama-customer-menu a:hover{

    background:#f3f7ff;

    color:var(--sama-primary);

}

.sama-customer-menu a.active{

    background:var(--sama-primary);

    color:#fff;

    box-shadow:0 10px 20px rgba(13,110,253,.20);

}

.sama-menu-left{

    display:flex;

    align-items:center;

    gap:14px;

}

.sama-menu-left .dashicons{

    width:20px;

    height:20px;

    font-size:20px;

    color:#7b8794;

    transition:var(--sama-transition);

}

.sama-customer-menu a:hover .dashicons{

    color:var(--sama-primary);

}

.sama-customer-menu a.active .dashicons{

    color:#fff;

}

.sama-menu-left span:last-child{

    font-size:15px;

    font-weight:600;

}

.sama-menu-badge{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:22px;

    height:22px;

    padding:0 7px;

    border-radius:999px;

    background:var(--sama-danger);

    color:#fff;

    font-size:11px;

    font-weight:700;

}

.sama-customer-menu a.active .sama-menu-badge{

    background:#fff;

    color:var(--sama-danger);

}

/*==========================================================================
    Logout
==========================================================================*/

.sama-menu-separator{

    margin-top:20px !important;

    padding-top:18px;

    border-top:1px solid var(--sama-border);

}

/*==========================================================================
    Sidebar Header
==========================================================================*/

.sama-customer-sidebar-logo{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:35px 25px;

    background:linear-gradient(135deg,#0d6efd,#2563eb);

    color:#fff;

}

.sama-sidebar-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    backdrop-filter:blur(6px);

}

.sama-sidebar-avatar .dashicons{

    font-size:34px;

    width:34px;

    height:34px;

    color:#fff;

}

.sama-customer-sidebar-logo h2{

    margin:0;

    font-size:22px;

    font-weight:700;

    letter-spacing:.5px;

}

.sama-customer-sidebar-logo p{

    margin:8px 0 0;

    font-size:14px;

    opacity:.9;

}

/*==========================================================================
    Card System
==========================================================================*/

.sama-card{

    background:var(--sama-white);

    border:1px solid var(--sama-border);

    border-radius:18px;

    box-shadow:var(--sama-shadow);

    overflow:hidden;

}

.sama-card-header{

    padding:24px 28px;

    border-bottom:1px solid var(--sama-border);

}

.sama-card-header h3{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:var(--sama-text);

}

.sama-card-body{

    padding:28px;

}
/*==========================================================================
    Buttons
==========================================================================*/

.sama-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 22px;

    border-radius:12px;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:var(--sama-transition);

}

.sama-btn-primary{

    background:var(--sama-primary);

    color:#fff;

}

.sama-btn-primary:hover{

    background:var(--sama-primary-hover);

}

.sama-btn-outline{

    background:#fff;

    color:var(--sama-primary);

    border:1px solid var(--sama-primary);

}

.sama-btn-outline:hover{

    background:#f5f8ff;

}
/*==========================================================================
    Section Title
==========================================================================*/

.sama-section-title{

    margin:0 0 25px;

    font-size:28px;

    font-weight:700;

    color:var(--sama-text);

}

.sama-section-subtitle{

    margin-top:8px;

    color:var(--sama-text-light);

    font-size:15px;

}
/*==========================================================================
    Dashboard Grid
==========================================================================*/

.sama-grid{

    display:grid;

    gap:24px;

}

.sama-grid-2{

    grid-template-columns:repeat(2,minmax(0,1fr));

}

.sama-grid-3{

    grid-template-columns:repeat(3,minmax(0,1fr));

}

.sama-grid-4{

    grid-template-columns:repeat(4,minmax(0,1fr));

}

/*==========================================================================
    Stats Cards
==========================================================================*/

.sama-stat-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:24px;

}

.sama-stat-icon{

    width:62px;

    height:62px;

    border-radius:16px;

    background:#eef4ff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.sama-stat-icon .dashicons{

    font-size:30px;

    width:30px;

    height:30px;

    color:var(--sama-primary);

}

.sama-stat-content{

    flex:1;

}

.sama-stat-label{

    display:block;

    font-size:14px;

    color:var(--sama-text-light);

    margin-bottom:6px;

}

.sama-stat-value{

    font-size:28px;

    font-weight:700;

    color:var(--sama-text);

}

/*==========================================================================
    Empty State
==========================================================================*/

.sama-empty{

    padding:50px 30px;

    text-align:center;

}

.sama-empty .dashicons{

    font-size:52px;

    width:52px;

    height:52px;

    color:#cbd5e1;

    margin-bottom:18px;

}

.sama-empty h3{

    margin:0 0 10px;

    font-size:20px;

}

.sama-empty p{

    margin:0;

    color:var(--sama-text-light);

}

/*==========================================================================
    Utilities
==========================================================================*/

.sama-mb-20{

    margin-bottom:20px;

}

.sama-mb-30{

    margin-bottom:30px;

}

.sama-mb-40{

    margin-bottom:40px;

}

.sama-text-right{

    text-align:right;

}

.sama-text-center{

    text-align:center;

}

/*==========================================================================
    Responsive Grid
==========================================================================*/

@media(max-width:992px){

    .sama-grid-4{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .sama-grid-2,
    .sama-grid-3,
    .sama-grid-4{

        grid-template-columns:1fr;

    }

    .sama-stat-card{

        padding:20px;

    }

}
/* ==========================================================
   ACTIVITÉ RÉCENTE
========================================================== */

.sama-activity-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.sama-activity-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:18px;
    border:1px solid #edf2f7;
    border-radius:12px;
    background:#fff;
    transition:.25s;
}

.sama-activity-item:hover{
    border-color:#d7dde8;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.sama-activity-icon{
    width:48px;
    height:48px;
    border-radius:12px;
    background:#f5f7fb;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.sama-activity-icon .dashicons{
    font-size:22px;
    width:22px;
    height:22px;
    color:var(--sama-primary);
}

.sama-activity-content{
    flex:1;
}

.sama-activity-content strong{
    display:block;
    font-size:15px;
    font-weight:600;
    color:#1f2937;
    margin-bottom:6px;
}

.sama-activity-content p{
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:#6b7280;
}


/* ==========================================================
   BOUTONS D'ACTIONS RAPIDES
========================================================== */

.sama-card .sama-btn{
    width:100%;
    justify-content:center;
    display:flex;
    align-items:center;
    gap:10px;
}

.sama-card .sama-btn .dashicons{
    font-size:18px;
    width:18px;
    height:18px;
}


/* ==========================================================
   AMÉLIORATION DES CARTES STATISTIQUES
========================================================== */

.sama-stat-card{
    transition:.25s;
    cursor:default;
}

.sama-stat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.sama-stat-value{
    word-break:break-word;
}


/* ==========================================================
   ÉTAT VIDE
========================================================== */

.sama-empty{
    text-align:center;
    padding:50px 30px;
}

.sama-empty .dashicons{
    font-size:52px;
    width:52px;
    height:52px;
    color:#c8d0da;
    margin-bottom:15px;
}

.sama-empty h3{
    margin:0 0 10px;
    font-size:20px;
    font-weight:600;
    color:#1f2937;
}

.sama-empty p{
    max-width:500px;
    margin:0 auto;
    color:#6b7280;
    line-height:1.8;
}


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

@media (max-width:768px){

    .sama-activity-item{
        padding:15px;
    }

    .sama-activity-icon{
        width:42px;
        height:42px;
    }

    .sama-activity-icon .dashicons{
        font-size:20px;
        width:20px;
        height:20px;
    }

}

/*==========================================================================
    MESSAGERIE V3
==========================================================================*/

/*==============================
  Structure
==============================*/

.sama-chat-wrapper{
    display:flex;
    gap:28px;
    align-items:stretch;
    min-height:720px;
}

.sama-chat-sidebar{
    width:360px;
    min-width:360px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 10px 35px rgba(15,23,42,.06);
}

.sama-chat-main{
    flex:1;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 10px 35px rgba(15,23,42,.06);
}

.sama-chat-main-inner{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:720px;
}

/*==============================
  Header Sidebar
==============================*/

.sama-chat-sidebar-header{
    padding:28px;
    border-bottom:1px solid #edf2f7;
    background:#ffffff;
}

.sama-chat-sidebar-header h2{
    margin:0;
    font-size:24px;
    font-weight:700;
    color:#1f2937;
}

.sama-chat-sidebar-header p{
    margin:8px 0 0;
    color:#6b7280;
    font-size:14px;
    line-height:1.6;
}

/*==============================
  Recherche
==============================*/

.sama-chat-search{
    padding:18px;
    border-bottom:1px solid #edf2f7;
    background:#fafafa;
}

.sama-chat-search input{
    width:100%;
    height:48px;
    padding:0 18px;
    border:1px solid #dbe3ec;
    border-radius:999px;
    outline:none;
    background:#fff;
    font-size:14px;
    transition:.25s;
}

.sama-chat-search input:focus{
    border-color:#0d6efd;
    box-shadow:0 0 0 4px rgba(13,110,253,.08);
}

/*==============================
  Liste Conversations
==============================*/

.sama-chat-list{
    flex:1;
    overflow-y:auto;
    background:#fff;
}
/*==============================
  Conversation Item
==============================*/

.sama-chat-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    text-decoration:none;
    color:#1f2937;
    border-bottom:1px solid #f3f4f6;
    transition:all .25s ease;
    position:relative;
    background:#fff;
}

.sama-chat-item:hover{
    background:#f8fbff;
}

.sama-chat-item.active{
    background:#eef5ff;
}

.sama-chat-item.active::before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:4px;
    border-radius:0 10px 10px 0;
    background:#0d6efd;
}

/*==============================
  Avatar
==============================*/

.sama-chat-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    flex-shrink:0;

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

    font-size:20px;
    font-weight:700;
    color:#fff;

    background:linear-gradient(135deg,#0d6efd,#3b82f6);

    box-shadow:0 8px 18px rgba(13,110,253,.18);
}

/*==============================
  Contenu
==============================*/

.sama-chat-content{
    flex:1;
    min-width:0;
}

.sama-chat-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}

.sama-chat-name{
    font-size:16px;
    font-weight:700;
    color:#1f2937;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sama-chat-time{
    font-size:12px;
    color:#94a3b8;
    margin-left:12px;
    flex-shrink:0;
}

/*==============================
  Aperçu
==============================*/

.sama-chat-preview{
    font-size:14px;
    color:#6b7280;
    line-height:1.6;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

    margin-bottom:8px;
}

/*==============================
  Badge commande
==============================*/

.sama-chat-order{
    display:inline-flex;
    align-items:center;

    padding:5px 12px;

    border-radius:999px;

    background:#eff6ff;

    color:#0d6efd;

    font-size:12px;

    font-weight:600;
}
/*==============================
  Scrollbar
==============================*/

.sama-chat-list::-webkit-scrollbar{
    width:7px;
}

.sama-chat-list::-webkit-scrollbar-track{
    background:transparent;
}

.sama-chat-list::-webkit-scrollbar-thumb{
    background:#d6dce5;
    border-radius:20px;
}

.sama-chat-list::-webkit-scrollbar-thumb:hover{
    background:#b8c2cf;
}

/*==============================
  Zone principale
==============================*/

.sama-chat-main{
    position:relative;
    background:#f7f9fc;
}

.sama-chat-main-inner{
    position:relative;
    overflow:hidden;
}

/*==============================
  Etat vide
==============================*/

.sama-chat-main:empty::before{
    content:"Sélectionnez une conversation pour commencer à discuter.";
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#94a3b8;
    font-size:18px;
    font-weight:500;
}

/*==============================
  Animations
==============================*/

.sama-chat-item{
    transform:translateY(0);
}

.sama-chat-item:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.sama-chat-avatar{
    transition:.25s;
}

.sama-chat-item:hover .sama-chat-avatar{
    transform:scale(1.06);
}

/*==============================
  Responsive
==============================*/

@media (max-width:1100px){

    .sama-chat-wrapper{

        flex-direction:column;

    }

    .sama-chat-sidebar{

        width:100%;
        min-width:100%;

    }

}

@media (max-width:768px){

    .sama-chat-sidebar-header{

        padding:22px;

    }

    .sama-chat-search{

        padding:15px;

    }

    .sama-chat-item{

        padding:15px;

    }

    .sama-chat-avatar{

        width:48px;
        height:48px;
        font-size:18px;

    }

    .sama-chat-name{

        font-size:15px;

    }

}

/*==========================================================================
    THREAD MESSAGERIE V3
==========================================================================*/

/*==============================
  Header
==============================*/

.sama-chat-thread{
    display:flex;
    flex-direction:column;
    height:100%;
}

.sama-chat-thread-header{

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

    padding:22px 28px;

    background:#ffffff;

    border-bottom:1px solid #e8edf3;

}

.sama-chat-thread-user{

    display:flex;
    align-items:center;
    gap:16px;

}

.sama-chat-thread-avatar{

    width:56px;
    height:56px;

    border-radius:50%;

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

    background:linear-gradient(135deg,#0d6efd,#3b82f6);

    color:#fff;

    font-size:22px;
    font-weight:700;

    box-shadow:0 10px 24px rgba(13,110,253,.18);

}

.sama-chat-thread-info h3{

    margin:0;

    font-size:19px;

    font-weight:700;

    color:#1f2937;

}

.sama-chat-thread-info p{

    margin:5px 0 0;

    color:#64748b;

    font-size:14px;

}

.sama-chat-thread-status{

    display:flex;

    align-items:center;

    gap:8px;

    color:#64748b;

    font-size:14px;

}

.sama-online-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22c55e;

}

/*==============================
  Corps
==============================*/

.sama-chat-thread-body{

    flex:1;

    padding:28px;

    overflow-y:auto;

    background:#f7f9fc;

}
/*==============================
  Bulles de discussion
==============================*/

.sama-message-row{

    display:flex;

    margin-bottom:20px;

    animation:samaMessageAppear .25s ease;

}

.sama-message-customer{

    justify-content:flex-end;

}

.sama-message-vendor{

    justify-content:flex-start;

}

.sama-message-bubble{

    max-width:72%;

    padding:14px 18px;

    border-radius:18px;

    position:relative;

    word-break:break-word;

    box-shadow:0 8px 22px rgba(0,0,0,.06);

}

.sama-message-customer .sama-message-bubble{

    background:linear-gradient(135deg,#0d6efd,#3b82f6);

    color:#ffffff;

    border-bottom-right-radius:6px;

}

.sama-message-vendor .sama-message-bubble{

    background:#ffffff;

    color:#1f2937;

    border-bottom-left-radius:6px;

    border:1px solid #edf2f7;

}

.sama-message-content{

    font-size:15px;

    line-height:1.7;

}

.sama-message-content p{

    margin:0;

}

.sama-message-time{

    margin-top:10px;

    font-size:12px;

    text-align:right;

    opacity:.75;

}

.sama-message-customer .sama-message-time{

    color:rgba(255,255,255,.85);

}

.sama-message-vendor .sama-message-time{

    color:#64748b;

}

/*==============================
  Animation
==============================*/

@keyframes samaMessageAppear{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*==============================
  Barre de saisie
==============================*/

.sama-chat-input-area{

    padding:22px 28px;

    background:#ffffff;

    border-top:1px solid #e8edf3;

}

.sama-chat-input-wrapper{

    display:flex;

    align-items:flex-end;

    gap:14px;

    background:#f8fafc;

    border:2px solid #e2e8f0;

    border-radius:18px;

    padding:10px 14px;

    transition:.25s;

}

.sama-chat-input-wrapper:focus-within{

    border-color:#0d6efd;

    box-shadow:0 0 0 4px rgba(13,110,253,.08);

    background:#ffffff;

}

.sama-chat-input-icon{

    font-size:22px;

    line-height:1;

    user-select:none;

}

.sama-chat-input-wrapper textarea{

    flex:1;

    border:none !important;

    background:transparent !important;

    resize:none;

    outline:none;

    box-shadow:none !important;

    min-height:24px;

    max-height:150px;

    padding:6px 0;

    font-size:15px;

    line-height:1.6;

    color:#1f2937;

}

.sama-chat-input-wrapper textarea::placeholder{

    color:#94a3b8;

}

.sama-chat-send{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#0d6efd,#3b82f6);

    color:#ffffff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.25s;

    flex-shrink:0;

}

.sama-chat-send:hover{

    transform:translateY(-2px) scale(1.05);

    box-shadow:0 12px 24px rgba(13,110,253,.28);

}

.sama-chat-send:active{

    transform:scale(.95);

}

/*==============================
  Responsive
==============================*/

@media (max-width:768px){

    .sama-chat-thread-header{

        padding:16px;

    }

    .sama-chat-thread-body{

        padding:16px;

    }

    .sama-chat-input-area{

        padding:16px;

    }

    .sama-message-bubble{

        max-width:88%;

    }

    .sama-chat-thread-avatar{

        width:46px;

        height:46px;

        font-size:18px;

    }

    .sama-chat-thread-info h3{

        font-size:17px;

    }

}