/*
Theme: FEAT Business App UI
File: assets/css/feat-app.css
Version: 1.0.0
Purpose: UI applicative FEAT — dashboards, portails, messages, notifications, documents.
*/

/* =====================================================
01. DESIGN TOKENS
===================================================== */

:root{
    --feat-primary:#23408E;
    --feat-primary-hover:#1B3272;
    --feat-primary-soft:#EEF3FF;
    --feat-secondary:#4E7D3A;
    --feat-secondary-hover:#40672F;
    --feat-secondary-soft:#F0F7EC;
    --feat-danger:#DC2626;
    --feat-danger-soft:#FEF2F2;
    --feat-warning:#F59E0B;
    --feat-warning-soft:#FFF7ED;
    --feat-success:#16A34A;
    --feat-success-soft:#ECFDF5;
    --feat-info:#2563EB;
    --feat-info-soft:#EFF6FF;
    --feat-bg:#F5F7FB;
    --feat-card:#FFFFFF;
    --feat-text:#111827;
    --feat-text-soft:#374151;
    --feat-muted:#6B7280;
    --feat-border:#E5EAF2;
    --feat-radius-sm:8px;
    --feat-radius:14px;
    --feat-radius-lg:20px;
    --feat-radius-xl:28px;
    --feat-shadow-sm:0 6px 18px rgba(15,23,42,.05);
    --feat-shadow:0 12px 36px rgba(15,23,42,.08);
    --feat-shadow-lg:0 24px 70px rgba(15,23,42,.12);
    --feat-font:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --feat-container:1280px;
}

/* =====================================================
02. BASE APP
===================================================== */

.qs-client-portal,
.qs-app,
.qs-dashboard,
.qs-main,
.qs-service-wrapper,
.qs-admin-panel{
    font-family:var(--feat-font);
    color:var(--feat-text);
}

body{ background:var(--feat-bg); }

.qs-client-portal *{ box-sizing:border-box; }

.qs-client-portal{
    max-width:var(--feat-container);
    margin:46px auto;
    padding:0 24px;
}

.qs-client-card{
    position:relative;
    background:var(--feat-card);
    border:1px solid var(--feat-border);
    border-radius:var(--feat-radius-lg);
    padding:42px;
    box-shadow:var(--feat-shadow);
}

.qs-client-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--feat-primary-soft);
    color:var(--feat-primary);
    font-size:13px;
    font-weight:700;
    margin-bottom:16px;
}

.qs-client-portal h1{
    margin:0 0 18px;
    font-size:clamp(34px,4vw,54px);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-.04em;
    color:var(--feat-text);
}

.qs-client-portal h2{
    margin:0 0 18px;
    font-size:30px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-.02em;
}

.qs-client-portal h3{
    margin:0 0 18px;
    font-size:24px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:-.02em;
}

.qs-client-portal p{
    color:var(--feat-text-soft);
    font-size:16px;
    line-height:1.65;
}

.qs-client-subtitle{
    margin:0 0 28px;
    color:var(--feat-muted);
}

.qs-client-muted{
    display:inline-flex;
    align-items:center;
    padding:13px 16px;
    border-radius:var(--feat-radius);
    background:var(--feat-warning-soft);
    color:#9A3412 !important;
    border:1px solid #FED7AA;
    font-size:14px !important;
    font-weight:600;
}

/* =====================================================
03. APP SHELL / MANAGER EXISTING UI
===================================================== */

.qs-app{
    display:flex;
    min-height:100vh;
    background:var(--feat-bg);
}

.qs-sidebar{
    width:260px;
    flex-shrink:0;
    background:#0B1733;
    color:#fff;
    padding:30px 20px;
    display:flex;
    flex-direction:column;
}

.qs-logo{
    font-size:18px;
    font-weight:800;
    margin-bottom:30px;
}

.qs-nav-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 14px;
    border-radius:12px;
    color:#CBD5E1;
    text-decoration:none;
    margin-bottom:8px;
    font-size:14px;
    font-weight:700;
    transition:.2s;
}

.qs-nav-item:hover,
.qs-nav-item.active{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.qs-sidebar-bottom{
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
}

.qs-main{
    flex:1;
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:42px 32px;
}

.qs-main.full{
    max-width:1280px;
    margin:0 auto;
}

/* =====================================================
04. HEADER / DASHBOARD
===================================================== */

.qs-header-premium{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:34px;
}

.qs-header-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.qs-avatar{
    width:52px;
    height:52px;
    flex-shrink:0;
    border-radius:999px;
    background:var(--feat-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    font-size:18px;
}

.qs-header-premium h1{
    margin:0 0 4px;
    font-size:34px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.03em;
}

.qs-subtitle{
    margin:0;
    color:var(--feat-muted);
    font-size:14px;
}

/* =====================================================
05. BUTTON SYSTEM
===================================================== */

.qs-client-btn,
.qs-btn,
.qs-btn-dark,
.qs-btn-primary,
.qs-btn-table,
.qs-btn-back,
.qs-logout,
.qs-logout-btn,
.qs-share-form button,
.qs-admin-edit-block input[type="submit"],
.qs-admin-edit-block .acf-button,
.qs-message-form button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:12px 20px;
    border:0;
    border-radius:12px;
    background:var(--feat-primary);
    color:#fff !important;
    text-decoration:none !important;
    font-size:14px;
    font-weight:800;
    line-height:1;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(35,64,142,.18);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.qs-client-btn:hover,
.qs-btn:hover,
.qs-btn-dark:hover,
.qs-btn-primary:hover,
.qs-btn-table:hover,
.qs-btn-back:hover,
.qs-logout:hover,
.qs-logout-btn:hover,
.qs-share-form button:hover,
.qs-admin-edit-block input[type="submit"]:hover,
.qs-admin-edit-block .acf-button:hover,
.qs-message-form button:hover{
    background:var(--feat-primary-hover);
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(35,64,142,.24);
}

.qs-client-btn:visited,
.qs-client-btn:focus,
.qs-btn:visited,
.qs-btn:focus,
.qs-logout:visited,
.qs-logout:focus{
    color:#fff !important;
}

.qs-client-btn-light,
.qs-btn-secondary{
    background:var(--feat-secondary);
    color:#fff !important;
}

.qs-client-btn-light:hover,
.qs-btn-secondary:hover{
    background:var(--feat-secondary-hover);
    color:#fff !important;
}

.qs-btn-back{
    margin-top:24px;
    background:#111827;
}

.qs-btn-back::before{
    content:"←";
    font-weight:700;
}

.qs-logout-btn{
    min-height:40px;
    padding:10px 16px !important;
    font-size:13px;
    border-radius:10px;
}

.qs-client-card > div[style*="text-align:right"]{
    position:absolute;
    top:36px;
    right:36px;
    margin:0 !important;
}

/* =====================================================
06. DASHBOARD MISSION CARDS
===================================================== */

.qs-client-status{
    position:relative;
    background:#fff;
    border:1px solid var(--feat-border);
    border-radius:var(--feat-radius-lg);
    padding:26px 28px;
    margin:22px 0;
    box-shadow:var(--feat-shadow-sm);
    transition:.22s ease;
}

.qs-client-status:hover{
    transform:translateY(-3px);
    box-shadow:var(--feat-shadow);
}

.qs-client-status span{
    display:block;
    margin:0 0 12px;
    font-size:17px;
    font-weight:800;
    color:var(--feat-text);
}

.qs-client-status strong{
    display:block;
    margin:0 0 12px;
    color:var(--feat-text);
    font-weight:800;
}

.qs-client-status p{
    margin:10px 0;
}

.qs-client-status .qs-client-btn{
    margin-top:10px;
}

/* =====================================================
07. PROGRESS
===================================================== */

.qs-progress-bar,
.qs-progress{
    width:100%;
    height:10px;
    background:#E8EDF5;
    border-radius:999px;
    overflow:hidden;
    margin:16px 0 10px;
}

.qs-progress-fill,
.qs-progress .qs-progress-bar{
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--feat-primary),#5B7CFA);
    border-radius:999px;
    transition:width .35s ease;
}

.qs-client-progress{
    margin:26px 0;
}

.qs-client-progress p{
    margin:8px 0 0;
    font-weight:700;
    color:var(--feat-muted);
}

/* =====================================================
08. MISSION PORTAL BLOCKS
===================================================== */

.qs-client-partner,
.qs-client-conversation,
.qs-notifications{
    background:#fff;
    border:1px solid var(--feat-border);
    border-radius:var(--feat-radius-lg);
    padding:30px;
    margin-top:28px;
    box-shadow:var(--feat-shadow-sm);
}

.qs-client-actions{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    margin:30px 0;
}

.qs-client-actions .qs-client-btn,
.qs-client-actions .qs-client-muted{
    width:100%;
    min-height:58px;
}

.qs-client-partner h3,
.qs-client-conversation h3,
.qs-notifications h3{
    display:flex;
    align-items:center;
    gap:10px;
}

/* =====================================================
09. FORMS
===================================================== */

.qs-message-form{
    margin-top:20px;
}

.qs-message-form textarea,
.qs-message-form input,
.qs-form-group input,
.qs-form-group select,
.qs-form-group textarea,
.qs-admin-edit-block input,
.qs-admin-edit-block select,
.qs-admin-edit-block textarea{
    width:100%;
    min-height:46px;
    padding:13px 15px;
    border:1px solid #D8DFEA;
    border-radius:12px;
    background:#fff;
    color:var(--feat-text);
    font-family:var(--feat-font);
    font-size:15px;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.qs-message-form textarea{
    min-height:128px;
    resize:vertical;
}

.qs-message-form textarea:focus,
.qs-message-form input:focus,
.qs-form-group input:focus,
.qs-form-group select:focus,
.qs-form-group textarea:focus,
.qs-admin-edit-block input:focus,
.qs-admin-edit-block select:focus,
.qs-admin-edit-block textarea:focus{
    outline:none;
    border-color:var(--feat-primary);
    box-shadow:0 0 0 4px rgba(35,64,142,.10);
}

.qs-form-group{
    margin-bottom:18px;
}

.qs-form-group label{
    display:block;
    font-size:13px;
    font-weight:800;
    margin-bottom:7px;
    color:var(--feat-text-soft);
}

/* =====================================================
10. CONVERSATION
===================================================== */

.qs-message{
    max-width:76%;
    padding:14px 16px;
    border-radius:18px;
    margin:14px 0;
    background:#F3F6FB;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.qs-message-client{
    margin-right:auto;
    border-bottom-left-radius:6px;
    border-left:4px solid var(--feat-secondary);
}

.qs-message-partner{
    margin-left:auto;
    background:var(--feat-primary-soft);
    border-bottom-right-radius:6px;
    border-right:4px solid var(--feat-primary);
}

.qs-message p{
    margin:0 0 6px;
    color:var(--feat-text);
}

.qs-message small{
    color:var(--feat-muted);
    font-size:12px;
}

.qs-thread{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-height:460px;
    overflow-y:auto;
    padding-right:8px;
}

.qs-message.client{
    background:var(--feat-secondary-soft);
    align-self:flex-start;
}

.qs-message.manager{
    background:var(--feat-primary);
    color:#fff;
    align-self:flex-end;
}

/* =====================================================
11. NOTIFICATIONS / HISTORY
===================================================== */

.qs-notification{
    position:relative;
    padding:17px 18px 17px 20px;
    border-radius:16px;
    background:#F8FAFC;
    border:1px solid var(--feat-border);
    border-left:5px solid var(--feat-warning);
    margin-bottom:14px;
}

.qs-notification strong{
    display:block;
    margin-bottom:6px;
    font-weight:900;
    color:var(--feat-text);
}

.qs-notification small{
    display:block;
    margin-top:8px;
    color:var(--feat-muted);
    font-size:12px;
}

.qs-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    min-height:24px;
    padding:4px 8px;
    border-radius:999px;
    background:var(--feat-danger);
    color:#fff;
    font-size:12px;
    font-weight:900;
}

.qs-alert{
    padding:12px 14px;
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    margin-bottom:12px;
}

.qs-alert.success,
.qs-success{
    background:var(--feat-success-soft);
    color:#166534;
}

.qs-alert.error,
.qs-danger{
    background:var(--feat-danger-soft);
    color:#991B1B;
}

.qs-warning{
    background:#FEF3C7;
    color:#92400E;
}

.qs-info{
    background:var(--feat-info-soft);
    color:#1D4ED8;
}

/* =====================================================
12. KPI / GRID / GENERIC CARDS
===================================================== */

.qs-kpis{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    margin:0 0 30px;
}

.qs-kpi,
.qs-card,
.qs-card-panel,
.qs-service-card,
.qs-card-link,
.qs-admin-edit-block,
.qs-share-block{
    background:#fff;
    border:1px solid var(--feat-border);
    border-radius:var(--feat-radius-lg);
    padding:24px;
    box-shadow:var(--feat-shadow-sm);
}

.qs-kpi{ min-height:100px; }

.qs-kpi-value{
    display:block;
    font-size:32px;
    font-weight:900;
    line-height:1;
    margin-bottom:8px;
}

.qs-kpi-label{
    color:var(--feat-muted);
    font-size:13px;
    font-weight:700;
}

.qs-grid-dashboard,
.qs-clients-grid,
.qs-grid,
.qs-cards,
.qs-documents-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}

.qs-service-card,
.qs-card-link{
    color:inherit;
    text-decoration:none;
    transition:.2s ease;
}

.qs-service-card:hover,
.qs-card-link:hover,
.qs-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--feat-shadow);
}

/* =====================================================
13. TABLES
===================================================== */

.qs-table-wrapper{
    overflow-x:auto;
    margin-top:20px;
}

.qs-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    border:1px solid var(--feat-border);
    border-radius:var(--feat-radius);
    overflow:hidden;
}

.qs-table th{
    background:#F8FAFC;
    text-align:left;
    padding:14px 16px;
    font-size:13px;
    color:var(--feat-muted);
    font-weight:900;
}

.qs-table td{
    padding:15px 16px;
    border-top:1px solid var(--feat-border);
}

.qs-table tr:hover td{ background:#FBFCFE; }

/* =====================================================
14. ADMIN / ACF
===================================================== */

.qs-admin-panel{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:26px;
    margin-top:34px;
    align-items:start;
}

.qs-admin-edit-block form,
.qs-create-partenaire form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.qs-admin-edit-block .acf-field{ margin-bottom:18px; }

.qs-admin-edit-block .acf-label label{
    font-size:13px;
    font-weight:800;
    color:var(--feat-text-soft);
}

.qs-admin-edit-block .acf-form-submit{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--feat-border);
}

/* =====================================================
15. LEGAL / FOOTER UTILITY
===================================================== */

.mentions-legales{
    max-width:900px;
    margin:60px auto;
    padding:42px;
    background:#fff;
    border-radius:var(--feat-radius-lg);
    box-shadow:var(--feat-shadow);
    font-family:var(--feat-font);
    color:var(--feat-text-soft);
    line-height:1.75;
}

.mentions-legales h2{
    font-size:26px;
    margin:40px 0 20px;
    color:var(--feat-primary);
    border-left:4px solid var(--feat-primary);
    padding-left:12px;
}

.feat-footer-text{
    max-width:320px;
    font-size:14px;
    line-height:1.8;
    color:#A7B0C0;
}

/* =====================================================
16. RESPONSIVE
===================================================== */

@media(max-width:1024px){
    .qs-admin-panel{ grid-template-columns:1fr; }
    .qs-client-card{ padding:32px; }
    .qs-client-card > div[style*="text-align:right"]{
        position:static;
        text-align:left !important;
        margin:12px 0 22px !important;
    }
}

@media(max-width:768px){
    .qs-client-portal{
        margin:26px auto;
        padding:0 16px;
    }
    .qs-client-card{
        padding:24px;
        border-radius:18px;
    }
    .qs-client-portal h1{ font-size:34px; }
    .qs-client-actions{ grid-template-columns:1fr; }
    .qs-message{ max-width:100%; }
    .qs-app{ flex-direction:column; }
    .qs-sidebar{ width:100%; }
    .qs-main{ padding:24px 16px; }
    .qs-header-premium{
        align-items:flex-start;
        flex-direction:column;
    }
    .qs-kpis,
    .qs-grid-dashboard,
    .qs-clients-grid,
    .qs-grid,
    .qs-cards,
    .qs-documents-grid{
        grid-template-columns:1fr;
    }
}

/* =====================================================
17. SAFE OVERRIDES
===================================================== */

html,
body{ overflow-y:auto !important; }

.qs-app,
.qs-main,
.qs-dashboard{
    height:auto !important;
    overflow:visible !important;
}

.acf-field[data-name^="lien_depot_recouvrement"],
.acf-field[data-name^="lien_docs_recouvrement"]{
    display:none !important;
}