/* SecretGift V8.9.7 — tableau de bord client visuel et coloré */

body:has(.client-dashboard-v897) .container {
    max-width: none !important;
    padding: 12px 16px 18px !important;
}

.client-dashboard-v897 {
    display: grid;
    gap: 11px;
}

.client-dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border: 1px solid #decff2;
    border-left: 7px solid #7f54bd;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5efff, #eee5fb);
}

.client-dashboard-welcome span {
    color: #7753a8;
    font-size: .6rem;
    font-weight: 950;
    letter-spacing: .08em;
}

.client-dashboard-welcome h1 {
    margin: 3px 0;
    color: #3c2364;
    font-size: 1.25rem;
}

.client-dashboard-welcome p {
    margin: 0;
    color: #705f83;
    font-size: .7rem;
}

.dashboard-profile-chip {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    color: #523279;
    font-size: .68rem;
    font-weight: 900;
    text-decoration: none;
}

.client-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-stat-card {
    --stat-bg: #ede5fa;
    --stat-border: #8654cf;
    --stat-text: #5d2fa0;
    --stat-muted: #766486;
    --stat-icon: #8c57d6;

    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 30px;
    gap: 10px;
    align-items: center;
    min-height: 126px;
    padding: 13px;
    border: 1px solid color-mix(
        in srgb,
        var(--stat-border) 32%,
        white
    );
    border-left: 6px solid var(--stat-border);
    border-radius: 12px;
    background: var(--stat-bg);
    color: var(--stat-text);
    text-decoration: none;
    box-shadow: 0 5px 13px rgba(35, 28, 20, .07);
}

.dashboard-stat-card--purple {
    --stat-bg: linear-gradient(135deg, #f1eaff, #e8dcfa);
    --stat-border: #8654cf;
    --stat-text: #5d2fa0;
    --stat-muted: #766486;
    --stat-icon: #8c57d6;
}

.dashboard-stat-card--orange {
    --stat-bg: linear-gradient(135deg, #fff4e4, #fde6c5);
    --stat-border: #ef941b;
    --stat-text: #bf6700;
    --stat-muted: #8b6c47;
    --stat-icon: #ff991d;
}

.dashboard-stat-card--green {
    --stat-bg: linear-gradient(135deg, #effcf4, #dcf2e5);
    --stat-border: #27a75d;
    --stat-text: #087b3c;
    --stat-muted: #557966;
    --stat-icon: #21a958;
}

.dashboard-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 17px rgba(35, 28, 20, .12);
}

.dashboard-stat-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--stat-icon);
    color: #fff;
    font-size: 1.45rem;
    font-weight: 950;
    box-shadow: 0 8px 16px color-mix(
        in srgb,
        var(--stat-border) 23%,
        transparent
    );
}

.dashboard-stat-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dashboard-stat-copy small {
    color: var(--stat-text);
    font-size: .69rem;
    font-weight: 900;
}

.dashboard-stat-copy strong {
    color: #15110d;
    font-size: 1.55rem;
    line-height: 1;
}

.dashboard-stat-copy b {
    color: #453c32;
    font-size: .7rem;
}

.dashboard-stat-copy p {
    margin: 3px 0 0;
    color: var(--stat-muted);
    font-size: .64rem;
    line-height: 1.25;
}

.dashboard-stat-arrow {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    color: var(--stat-border);
    font-size: 1.25rem;
    font-weight: 950;
}

.client-dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 8px 13px;
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 950;
    text-decoration: none;
}

.dashboard-action--gold {
    border: 1px solid #c79737;
    background: linear-gradient(135deg, #e4bd60, #d1a345);
    color: #201609;
}

.dashboard-action--dark {
    border: 1px solid #201a14;
    background: #17130f;
    color: #fff;
}

.dashboard-recent-panel {
    padding: 12px 14px 14px;
    border: 1px solid #c6b5eb;
    border-left: 6px solid #8156c9;
    border-radius: 13px;
    background: linear-gradient(135deg, #faf8ff, #f1ecfc);
    box-shadow: 0 5px 13px rgba(64, 43, 98, .07);
}

.dashboard-recent-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dashboard-recent-heading > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-recent-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ede4fc;
    color: #7850bf;
    font-size: 1.05rem;
    font-weight: 950;
}

.dashboard-recent-heading h2 {
    margin: 0;
    color: #4d2a83;
    font-size: 1rem;
}

.dashboard-recent-heading p {
    margin: 2px 0 0;
    color: #746887;
    font-size: .65rem;
}

.dashboard-recent-heading > a {
    color: #543194;
    font-size: .66rem;
    font-weight: 900;
    text-decoration: none;
}

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

.dashboard-order-card {
    --order-bg: #e7eefb;
    --order-border: #7190bd;
    --order-text: #244d77;
    --order-muted: #607992;

    display: grid;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    min-height: 86px;
    padding: 9px 10px;
    border: 1px solid var(--order-border);
    border-radius: 10px;
    background: var(--order-bg);
    color: var(--order-text);
    text-decoration: none;
}

.dashboard-order-card--red {
    --order-bg: linear-gradient(135deg, #fff2f4, #f7dde2);
    --order-border: #e498a5;
    --order-text: #9b2840;
    --order-muted: #986673;
}

.dashboard-order-card--brown {
    --order-bg: linear-gradient(135deg, #f4ead8, #e4d1ad);
    --order-border: #a27c3c;
    --order-text: #634512;
    --order-muted: #7c6844;
}

.dashboard-order-card--purple {
    --order-bg: linear-gradient(135deg, #f2ecff, #e5daf8);
    --order-border: #aa8ad4;
    --order-text: #5a308d;
    --order-muted: #766187;
}

.dashboard-order-card--orange {
    --order-bg: linear-gradient(135deg, #fff6e8, #fde4be);
    --order-border: #e4a145;
    --order-text: #a95800;
    --order-muted: #8a6e49;
}

.dashboard-order-card--green {
    --order-bg: linear-gradient(135deg, #effbf4, #ddefe4);
    --order-border: #91d2ac;
    --order-text: #08713a;
    --order-muted: #587a67;
}

.dashboard-order-card--blue {
    --order-bg: linear-gradient(135deg, #f1f6ff, #e3edf9);
    --order-border: #98b8e4;
    --order-text: #285f9a;
    --order-muted: #607992;
}

.dashboard-order-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(35,28,20,.08);
}

.dashboard-order-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: color-mix(
        in srgb,
        var(--order-border) 30%,
        white
    );
    color: var(--order-text);
    font-size: 1rem;
}

.dashboard-order-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.dashboard-order-main strong {
    color: #19140f;
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.dashboard-order-main b {
    color: #3b3128;
    font-size: .68rem;
}

.dashboard-order-main small {
    color: var(--order-muted);
    font-size: .63rem;
    overflow-wrap: anywhere;
}

.dashboard-order-side {
    display: grid;
    justify-items: end;
    gap: 3px;
}

.dashboard-order-side > span {
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(
        in srgb,
        var(--order-border) 38%,
        white
    );
    color: var(--order-text);
    font-size: .59rem;
    font-weight: 950;
}

.dashboard-order-side strong {
    color: #18130f;
    font-size: .73rem;
}

.dashboard-order-side small {
    color: var(--order-muted);
    font-size: .57rem;
    white-space: nowrap;
}

.dashboard-empty-orders {
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    min-height: 130px;
    padding: 18px;
    border: 1px dashed #baa8d5;
    border-radius: 10px;
    background: rgba(255,255,255,.55);
    text-align: center;
}

.dashboard-empty-orders span {
    font-size: 2rem;
}

.dashboard-empty-orders strong {
    color: #4e3673;
    font-size: .8rem;
}

.dashboard-empty-orders p {
    margin: 2px 0 0;
    color: #7a6d8c;
    font-size: .65rem;
}

.dashboard-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    overflow: hidden;
    border: 1px solid #e2ddd4;
    border-radius: 11px;
    background: #fff;
}

.dashboard-trust-strip article {
    display: grid;
    grid-template-columns: 36px minmax(0,1fr);
    gap: 8px;
    align-items: center;
    min-height: 62px;
    padding: 9px 13px;
    border-right: 1px solid #ece7df;
}

.dashboard-trust-strip article:last-child {
    border-right: 0;
}

.trust-bubble {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-weight: 950;
}

.trust-bubble--purple {
    background: #eee3fa;
    color: #7651b4;
}

.trust-bubble--orange {
    background: #fff0df;
    color: #e67c11;
}

.trust-bubble--green {
    background: #dff2e6;
    color: #248653;
}

.trust-bubble--pink {
    background: #f1e4fb;
    color: #8753c3;
}

.dashboard-trust-strip strong {
    display: block;
    color: #2c261f;
    font-size: .7rem;
}

.dashboard-trust-strip small {
    display: block;
    margin-top: 2px;
    color: #777066;
    font-size: .59rem;
}

@media (max-width: 1050px) {
    .client-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-card {
        min-height: 105px;
    }
}

@media (max-width: 780px) {
    .dashboard-recent-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-trust-strip {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .dashboard-trust-strip article:nth-child(2) {
        border-right: 0;
    }

    .dashboard-trust-strip article:nth-child(-n+2) {
        border-bottom: 1px solid #ece7df;
    }
}

@media (max-width: 540px) {
    body:has(.client-dashboard-v897) .container {
        padding: 8px !important;
    }

    .client-dashboard-welcome {
        align-items: flex-start;
    }

    .dashboard-profile-chip {
        display: none;
    }

    .dashboard-stat-card {
        grid-template-columns: 48px minmax(0,1fr) 26px;
        min-height: 98px;
        padding: 10px;
    }

    .dashboard-stat-icon {
        width: 48px;
        height: 48px;
    }

    .client-dashboard-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .dashboard-action {
        width: 100%;
    }

    .dashboard-recent-heading > a {
        display: none;
    }

    .dashboard-order-card {
        grid-template-columns: 38px minmax(0,1fr);
    }

    .dashboard-order-icon {
        width: 38px;
        height: 38px;
    }

    .dashboard-order-side {
        grid-column: 1 / -1;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        justify-items: start;
        padding-left: 47px;
    }

    .dashboard-order-side small {
        justify-self: end;
    }

    .dashboard-trust-strip {
        grid-template-columns: 1fr;
    }

    .dashboard-trust-strip article {
        border-right: 0;
        border-bottom: 1px solid #ece7df;
    }

    .dashboard-trust-strip article:last-child {
        border-bottom: 0;
    }
}