/* ============================================================
   dashboard.css — Nournikah v5
   Tableau de bord, paramètres, abonnement
   ============================================================ */

/* ---- Variables (reprises du thème) ---- */
:root {
    --dash-bg:        #FAFAF8;
    --dash-card-bg:   #ffffff;
    --dash-border:    #e8e4dc;
    --dash-radius:    12px;
    --dash-shadow:    0 2px 12px rgba(0,0,0,.06);
    --dash-gold:      #D4AF37;
    --dash-green:     #0A1628;   /* marine — remplace vert */
    --dash-red:       #c0392b;
    --dash-accent:    #0A1628;   /* marine — remplace vert */
    --dash-text:      #1A1A1A;
    --dash-muted:     #6B7280;
}

/* ============================================================
   LAYOUT GÉNÉRAL
   ============================================================ */

.nournikah-dashboard {
    min-height: 80vh;
    background: var(--dash-bg);
    padding-bottom: 3rem;
}

.dash-body {
    padding-top: 1.5rem;
}

/* ============================================================
   HEADER DASHBOARD
   ============================================================ */

.dash-header {
    background: linear-gradient(135deg, #0A1628 0%, #1E3A5F 100%);
    color: #fff;
    padding: 1.75rem 0;
    margin-bottom: 2rem;
}

.dash-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.dash-header__greeting h1 {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-weight: 700;
    margin: 0 0 .25rem;
    color: #fff;
}

.dash-header__greeting p {
    margin: 0;
    opacity: .8;
    font-size: .9rem;
}

.dash-upgrade-btn {
    background: var(--dash-gold);
    color: #fff;
    padding: .6rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: opacity .2s;
    white-space: nowrap;
}
.dash-upgrade-btn:hover { opacity: .85; color: #fff; }

.dash-premium-badge {
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
}

/* ============================================================
   STATS CARDS
   ============================================================ */

.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.dash-stat {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--dash-shadow);
    transition: transform .2s;
}
.dash-stat:hover { transform: translateY(-2px); }

.dash-stat--accent { border-color: var(--dash-accent); }
.dash-stat--alert  { border-color: var(--dash-red); }

.dash-stat__icon  { font-size: 1.6rem; margin-bottom: .4rem; }
.dash-stat__value { font-size: 2rem; font-weight: 700; color: var(--dash-accent); line-height: 1; }
.dash-stat--alert .dash-stat__value { color: var(--dash-red); }
.dash-stat__label { font-size: .78rem; color: var(--dash-muted); margin: .25rem 0 .5rem; }
.dash-stat__link  { font-size: .78rem; color: var(--dash-accent); text-decoration: none; font-weight: 600; }
.dash-stat__link:hover { text-decoration: underline; }

/* ============================================================
   BARRE DE COMPLÉTION PROFIL
   ============================================================ */

.dash-completion {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-left: 4px solid var(--dash-gold);
    border-radius: var(--dash-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--dash-shadow);
}

.dash-completion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.dash-completion__title { font-weight: 600; }
.dash-completion__percent { font-weight: 700; color: var(--dash-gold); }

.dash-completion__bar {
    background: #eee;
    border-radius: 99px;
    height: 8px;
    overflow: hidden;
    margin-bottom: .5rem;
}
.dash-completion__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dash-gold), #1E3A5F);
    border-radius: 99px;
    transition: width .6s ease;
}

.dash-completion__hint { font-size: .82rem; color: var(--dash-muted); margin: 0; }
.dash-completion__hint a { color: var(--dash-accent); font-weight: 600; }

/* ============================================================
   GRID 2 COLONNES (main + sidebar)
   ============================================================ */

.dash-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 860px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTIONS
   ============================================================ */

.dash-section {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 1.5rem;
    box-shadow: var(--dash-shadow);
    margin-bottom: 1.5rem;
}

.dash-section--discover { margin-top: 1.5rem; }

.dash-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.dash-section__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--dash-text);
}

.dash-section__more {
    font-size: .82rem;
    color: var(--dash-accent);
    font-weight: 600;
    text-decoration: none;
}
.dash-section__more:hover { text-decoration: underline; }

/* ============================================================
   INTÉRÊTS REÇUS
   ============================================================ */

.dash-interests { display: flex; flex-direction: column; gap: .75rem; }

.dash-interest-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    transition: background .2s;
}
.dash-interest-card:hover { background: #fafaf8; }

.dash-interest-card__photo {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}
.dash-interest-card__photo img {
    width: 100%; height: 100%; object-fit: cover;
}
.dash-interest-card__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--dash-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 700;
}

.dash-interest-card__info {
    flex: 1;
    display: flex; flex-direction: column;
    gap: .15rem;
}
.dash-interest-card__info strong { font-size: .9rem; }
.dash-interest-card__location { font-size: .78rem; color: var(--dash-muted); }

.dash-interest-card__actions {
    display: flex; gap: .5rem; flex-shrink: 0; flex-wrap: wrap;
}

/* ============================================================
   MATCHS GRID
   ============================================================ */

.dash-matchs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .75rem;
}

.dash-match-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 3/4;
    display: block;
    text-decoration: none;
    background: #0A1628;
    transition: transform .2s;
}
.dash-match-card:hover { transform: scale(1.02); }

.dash-match-card img {
    width: 100%; height: 100%; object-fit: cover;
}
.dash-match-card__avatar {
    width: 100%; height: 100%;
    background: var(--dash-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700;
}

.dash-match-card__overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: #fff;
    padding: .5rem .4rem .4rem;
    display: flex; flex-direction: column;
}
.dash-match-card__overlay span { font-size: .8rem; font-weight: 600; }
.dash-match-card__overlay small { font-size: .68rem; opacity: .8; }

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */

.dash-widget {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 1.25rem;
    box-shadow: var(--dash-shadow);
    margin-bottom: 1rem;
}

.dash-widget--premium {
    border-color: var(--dash-gold);
    background: linear-gradient(135deg, #fffdf5, #fff9e8);
}

.dash-widget__title {
    font-size: .88rem;
    font-weight: 700;
    color: var(--dash-accent);
    margin: 0 0 .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dash-widget__footer-link {
    display: block;
    text-align: center;
    margin-top: .75rem;
    font-size: .8rem;
    color: var(--dash-accent);
    font-weight: 600;
    text-decoration: none;
}

/* Navigation rapide */
.dash-quick-links {
    display: flex; flex-direction: column; gap: .35rem;
}
.dash-quick-links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: .45rem .6rem;
    border-radius: 6px;
    font-size: .88rem;
    color: var(--dash-text);
    text-decoration: none;
    transition: background .15s;
}
.dash-quick-links a:hover { background: #f0ede8; }

.dash-badge {
    background: var(--dash-red);
    color: #fff;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .45rem;
    min-width: 18px;
    text-align: center;
}

/* Suggestions */
.dash-suggestions { display: flex; flex-direction: column; gap: .5rem; }

.dash-suggestion {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; color: var(--dash-text);
    padding: .3rem;
    border-radius: 6px;
    transition: background .15s;
}
.dash-suggestion:hover { background: #f0ede8; }

.dash-suggestion img {
    width: 38px; height: 38px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.dash-suggestion__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--dash-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; font-weight: 700; flex-shrink: 0;
}
.dash-suggestion__info { display: flex; flex-direction: column; }
.dash-suggestion__info strong { font-size: .85rem; }
.dash-suggestion__info small { font-size: .75rem; color: var(--dash-muted); }

/* Premium widget */
.dash-premium-features {
    list-style: none; padding: 0; margin: 0 0 1rem;
    display: flex; flex-direction: column; gap: .35rem;
}
.dash-premium-features li { font-size: .85rem; }

/* ============================================================
   GRILLE DÉCOUVERTE
   ============================================================ */

.dash-discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
}

.dash-discover-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 2/3;
    display: block;
    text-decoration: none;
    background: #0A1628;
    transition: transform .2s;
}
.dash-discover-card:hover { transform: scale(1.02); }
.dash-discover-card img { width: 100%; height: 100%; object-fit: cover; }
.dash-discover-card__avatar {
    width: 100%; height: 100%;
    background: var(--dash-accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; font-weight: 700;
}
.dash-discover-card__info {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: #fff;
    padding: .6rem .5rem .4rem;
    display: flex; flex-direction: column;
}
.dash-discover-card__info strong { font-size: .82rem; font-weight: 600; }
.dash-discover-card__info small { font-size: .7rem; opacity: .8; }

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

.dash-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--dash-muted);
}
.dash-empty__icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.dash-empty p { margin: 0 0 .75rem; }
.dash-empty a { color: var(--dash-accent); font-weight: 600; }

/* ============================================================
   PAGE TITRE & FIL D'ARIANE
   ============================================================ */

.dash-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 1.25rem 0 1.5rem;
    color: var(--dash-text);
}

.dash-breadcrumb {
    display: flex; align-items: center; gap: .4rem;
    font-size: .83rem;
    color: var(--dash-muted);
    margin: 1rem 0 0;
}
.dash-breadcrumb a { color: var(--dash-accent); text-decoration: none; }
.dash-breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   PARAMÈTRES
   ============================================================ */

.settings-layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 720px) {
    .settings-layout { grid-template-columns: 1fr; }
    .settings-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
}

/* Nav latérale */
.settings-nav {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: .75rem;
    box-shadow: var(--dash-shadow);
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.settings-nav__link {
    display: block;
    padding: .5rem .75rem;
    border-radius: 6px;
    font-size: .88rem;
    color: var(--dash-text);
    text-decoration: none;
    transition: background .15s, color .15s;
}
.settings-nav__link:hover,
.settings-nav__link.active {
    background: var(--dash-accent);
    color: #fff;
}

/* Formulaire paramètres */
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.settings-section {
    background: var(--dash-card-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 1.5rem;
    box-shadow: var(--dash-shadow);
}

.settings-section__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    color: var(--dash-accent);
}

.settings-section__desc {
    font-size: .85rem;
    color: var(--dash-muted);
    margin: 0 0 1rem;
}

/* Toggles */
.settings-toggles { display: flex; flex-direction: column; gap: .75rem; }

.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: .6rem 0;
    border-bottom: 1px solid #f0ede8;
}
.settings-toggle:last-child { border-bottom: none; }

.settings-toggle__info {
    display: flex; flex-direction: column; gap: .1rem;
}
.settings-toggle__info strong { font-size: .9rem; }
.settings-toggle__info span   { font-size: .8rem; color: var(--dash-muted); }

.settings-toggle input[type="checkbox"] { display: none; }

.settings-toggle__switch {
    flex-shrink: 0;
    width: 44px; height: 24px;
    background: #ccc;
    border-radius: 99px;
    position: relative;
    transition: background .2s;
}
.settings-toggle__switch::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    top: 3px; left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.settings-toggle input:checked ~ .settings-toggle__switch {
    background: var(--dash-accent);
}
.settings-toggle input:checked ~ .settings-toggle__switch::after {
    transform: translateX(20px);
}

/* Champs */
.settings-field { display: flex; flex-direction: column; gap: .4rem; }
.settings-field--mt { margin-top: 1rem; }

.settings-label {
    font-size: .88rem;
    font-weight: 600;
    color: var(--dash-text);
}

.settings-hint {
    font-size: .8rem;
    color: var(--dash-muted);
    margin: .25rem 0 0;
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .settings-row { grid-template-columns: 1fr; }
}

/* Liens compte */
.settings-account-links {
    display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem;
}
.settings-account-link {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .75rem;
    border-radius: 6px;
    border: 1px solid var(--dash-border);
    font-size: .88rem;
    color: var(--dash-text);
    text-decoration: none;
    transition: background .15s;
}
.settings-account-link:hover { background: #f0ede8; }
.settings-account-link--danger { color: var(--dash-red); border-color: #f3c0bd; }
.settings-account-link--danger:hover { background: #fdf0ef; }

/* Footer formulaire */
.settings-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: .5rem;
}

/* ============================================================
   ABONNEMENT
   ============================================================ */

.sub-current-status { margin-bottom: 2rem; }

.sub-status {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--dash-radius);
    box-shadow: var(--dash-shadow);
}

.sub-status--active {
    background: #E8EEF5;
    border: 1px solid #B8C8DC;
}
.sub-status--free {
    background: #fafaf8;
    border: 1px solid var(--dash-border);
}

.sub-status__icon { font-size: 1.8rem; }
.sub-status__info { display: flex; flex-direction: column; gap: .2rem; }
.sub-status__info strong { font-size: 1rem; }
.sub-status__info span   { font-size: .85rem; color: var(--dash-muted); }

/* Plans */
.sub-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: start;
}

.sub-plan {
    background: var(--dash-card-bg);
    border: 2px solid var(--dash-border);
    border-radius: var(--dash-radius);
    padding: 1.5rem;
    position: relative;
    box-shadow: var(--dash-shadow);
    transition: transform .2s;
}
.sub-plan:hover { transform: translateY(-2px); }

.sub-plan--premium { border-color: var(--dash-accent); }
.sub-plan--annual  { border-color: var(--dash-gold); }
.sub-plan--current { box-shadow: 0 0 0 3px rgba(26,92,58,.2); }

.sub-plan__badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--dash-accent);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .75rem;
    border-radius: 99px;
    white-space: nowrap;
}
.sub-plan__badge--gold { background: var(--dash-gold); }

.sub-plan__header { text-align: center; margin-bottom: 1rem; }

.sub-plan__name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 .5rem;
}

.sub-plan__price {
    display: flex; align-items: baseline; justify-content: center; gap: .2rem;
}
.sub-plan__amount {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dash-accent);
}
.sub-plan--annual .sub-plan__amount { color: var(--dash-gold); }
.sub-plan__period { font-size: .85rem; color: var(--dash-muted); }

.sub-plan__economy {
    font-size: .78rem;
    color: var(--dash-gold);
    font-weight: 600;
    margin: .25rem 0 0;
}

.sub-plan__features {
    list-style: none; padding: 0; margin: 0 0 1.25rem;
    display: flex; flex-direction: column; gap: .4rem;
}
.sub-plan__feature { font-size: .85rem; }
.sub-plan__feature--nok { color: var(--dash-muted); }

.sub-plan__current-badge {
    display: block;
    text-align: center;
    padding: .6rem;
    border-radius: 6px;
    background: #E8EEF5;
    color: var(--dash-green);
    font-size: .85rem;
    font-weight: 600;
}

/* Note halal */
.sub-halal-note {
    background: #f5f0e8;
    border: 1px solid #d4c5a0;
    border-radius: var(--dash-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    font-size: .88rem;
}
.sub-halal-note p { margin: 0; }

/* FAQ */
.sub-faq { max-width: 680px; }
.sub-faq h2 { font-size: 1.1rem; margin-bottom: 1rem; }

.sub-faq__item {
    border: 1px solid var(--dash-border);
    border-radius: 8px;
    margin-bottom: .6rem;
    overflow: hidden;
}
.sub-faq__item summary {
    padding: .85rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
.sub-faq__item summary::-webkit-details-marker { display: none; }
.sub-faq__item summary::after { content: '+'; font-size: 1.1rem; color: var(--dash-accent); }
.sub-faq__item[open] summary::after { content: '−'; }
.sub-faq__item p {
    padding: 0 1rem 1rem;
    margin: 0;
    font-size: .87rem;
    color: var(--dash-muted);
}

/* ============================================================
   BOUTONS UTILITAIRES
   ============================================================ */

.nournikah-btn--sm {
    padding: .35rem .7rem;
    font-size: .78rem;
}

.nournikah-btn--success {
    background: var(--dash-accent);
    color: #fff;
    border: none;
}
.nournikah-btn--success:hover { opacity: .85; }

.nournikah-btn--danger {
    background: var(--dash-red);
    color: #fff;
    border: none;
}
.nournikah-btn--danger:hover { opacity: .85; }

.nournikah-btn--gold {
    background: var(--dash-gold);
    color: #fff;
    border: none;
}
.nournikah-btn--gold:hover { opacity: .85; }

.nournikah-btn--full { width: 100%; }

.nournikah-btn--lg {
    padding: .8rem 2rem;
    font-size: 1rem;
}

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

@media (max-width: 600px) {
    .dash-stats { grid-template-columns: 1fr 1fr; }
    .dash-interest-card__actions { flex-direction: column; width: 100%; }
    .sub-plans { grid-template-columns: 1fr; }
}