/* ============================================================
   Point Crawl Maker — main.css
   Global resets, tokens, components shared across pages
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --color-bg:         #f8fafc;
    --color-surface:    #ffffff;
    --color-border:     #e2e8f0;
    --color-text:       #1e293b;
    --color-text-muted: #64748b;
    --color-primary:    #6366f1;
    --color-primary-h:  #4f46e5;
    --color-danger:     #ef4444;
    --color-danger-h:   #dc2626;
    --color-success:    #22c55e;

    --radius:    8px;
    --radius-lg: 12px;
    --shadow:    0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg: 0 4px 24px rgba(0,0,0,.12);

    --font-base: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

html, body { height: 100%; }

body {
    font-family:      var(--font-base);
    background-color: var(--color-bg);
    color:            var(--color-text);
    line-height:      1.5;
    font-size:        15px;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          0 1.5rem;
    height:           56px;
    background:       var(--color-surface);
    border-bottom:    1px solid var(--color-border);
    position:         sticky;
    top:              0;
    z-index:          100;
}

.navbar__brand {
    font-weight: 700;
    font-size:   1.1rem;
    color:       var(--color-primary);
    text-decoration: none;
}

.navbar__actions {
    display:     flex;
    align-items: center;
    gap:         1rem;
}

.navbar__user {
    font-size:  0.85rem;
    color:      var(--color-text-muted);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display:        inline-flex;
    align-items:    center;
    gap:            .4rem;
    padding:        .45rem 1rem;
    border-radius:  var(--radius);
    border:         1px solid transparent;
    font-size:      .9rem;
    font-weight:    500;
    cursor:         pointer;
    transition:     background .15s, color .15s, border-color .15s;
    line-height:    1;
    text-decoration: none;
}

.btn--primary {
    background: var(--color-primary);
    color:      #fff;
}
.btn--primary:hover { background: var(--color-primary-h); }

.btn--ghost {
    background:   transparent;
    color:        var(--color-text);
    border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-bg); }

.btn--danger {
    background: var(--color-danger);
    color:      #fff;
}
.btn--danger:hover { background: var(--color-danger-h); }

.btn--sm { padding: .3rem .7rem; font-size: .82rem; }
.btn--full { width: 100%; justify-content: center; }
.btn--icon { padding: .3rem .5rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Forms ───────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 1rem; }

.form__group {
    display:        flex;
    flex-direction: column;
    gap:            .35rem;
}

.form__group label {
    font-size:   .85rem;
    font-weight: 500;
    color:       var(--color-text-muted);
}

.form__group input,
.form__group textarea,
.form__group select {
    padding:       .5rem .75rem;
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    font-size:     .9rem;
    font-family:   inherit;
    background:    var(--color-surface);
    color:         var(--color-text);
    transition:    border-color .15s;
}

.form__group input:focus,
.form__group textarea:focus {
    outline:      none;
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(99,102,241,.15);
}

.form__group textarea { resize: vertical; }

.form__actions {
    display:         flex;
    justify-content: flex-end;
    gap:             .75rem;
    margin-top:      .5rem;
}

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
    padding:       .6rem 1rem;
    border-radius: var(--radius);
    font-size:     .88rem;
}

.alert--error {
    background: #fef2f2;
    color:      #b91c1c;
    border:     1px solid #fecaca;
}

/* ── Modal ───────────────────────────────────────────────── */
.modal[hidden] { display: none; }

.modal {
    position: fixed;
    inset:    0;
    z-index:  200;
    display:  flex;
    align-items:     center;
    justify-content: center;
}

.modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.35);
}

.modal__box {
    position:      relative;
    background:    var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-lg);
    padding:       1.75rem;
    width:         min(480px, 95vw);
    z-index:       1;
}

.modal__box h2 {
    margin-bottom: 1.25rem;
    font-size:     1.15rem;
}

/* ── Leather/parchment theme — shared topbar ────────────── */

.topbar {
    width:           100%;
    height:          70px;
    flex-shrink:     0;
    background:      linear-gradient(to bottom, #2a221b 0%, #17120e 100%);
    border-top:      1px solid #42362b;
    border-bottom:   1px solid #41311f;
    box-shadow:      0 4px 10px rgba(0,0,0,0.5);
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         0 20px;
    z-index:         10;
    box-sizing:      border-box;
    position:        relative;
}

.topbar-left {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.topbar-right {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.topbar-brand {
    position:        relative;
    display:         inline-block;
    line-height:     0;
    text-decoration: none;
}

.topbar-alpha {
    position:       absolute;
    bottom:         4px;
    right:          0;
    background:     #8b2626;
    color:          #f4d080;
    font-family:    'Cinzel', serif;
    font-size:      0.55rem;
    font-weight:    700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding:        2px 5px;
    border-radius:  2px;
    line-height:    1.4;
}

.topbar-logo {
    height:     50px;
    width:      auto;
    display:    block;
    object-fit: contain;
}

.topbar-user {
    color:       #7a6855;
    font-family: 'Crimson Text', serif;
    font-size:   0.95rem;
    font-style:  italic;
}

.separator {
    width:       2px;
    height:      28px;
    background:  linear-gradient(to bottom, transparent, #524336, transparent);
    opacity:     0.5;
    flex-shrink: 0;
}

/* ── Rustic buttons (laiton terne) ───────────────────────── */

.btn-rustic {
    background:       linear-gradient(to bottom, #3a2e25 0%, #241b14 100%);
    border:           1px solid #1a120d;
    border-top-color: #524336;
    border-radius:    3px;
    color:            #c8b693;
    font-family:      'Cinzel', serif;
    font-size:        0.85rem;
    font-weight:      700;
    padding:          6px 14px;
    cursor:           pointer;
    text-transform:   uppercase;
    letter-spacing:   1px;
    box-shadow:       0 2px 4px rgba(0,0,0,0.5);
    transition:       all 0.2s ease;
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    text-decoration:  none;
    white-space:      nowrap;
    flex-shrink:      0;
}

.btn-rustic:hover {
    background:       linear-gradient(to bottom, #45372d 0%, #2c221a 100%);
    color:            #ebdcb9;
    border-top-color: #635243;
}

.btn-rustic:active {
    background:       #1e1610;
    border-top-color: #0a0806;
    box-shadow:       inset 0 2px 5px rgba(0,0,0,0.8);
    transform:        translateY(1px);
}

.btn-rustic--sm {
    padding:   4px 10px;
    font-size: 0.8rem;
}

.btn-rustic--icon {
    padding:   7px 10px;
    font-size: 0;
}

.btn-danger {
    background:       linear-gradient(to bottom, #5c1a1a 0%, #3a0f0f 100%);
    border:           1px solid #2a0a0a;
    border-top-color: #7a2a2a;
    border-radius:    3px;
    color:            #f4b8b8;
    font-family:      'Cinzel', serif;
    font-size:        0.85rem;
    font-weight:      700;
    padding:          6px 14px;
    cursor:           pointer;
    text-transform:   uppercase;
    letter-spacing:   1px;
    box-shadow:       0 2px 4px rgba(0,0,0,0.5);
    transition:       all 0.2s ease;
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    white-space:      nowrap;
}

.btn-danger:hover {
    background:       linear-gradient(to bottom, #731f1f 0%, #4a1414 100%);
    color:            #fcd0d0;
    border-top-color: #923535;
}

.btn-danger:active {
    background:       #2e0c0c;
    border-top-color: #1a0707;
    box-shadow:       inset 0 2px 5px rgba(0,0,0,0.8);
    transform:        translateY(1px);
}

.btn-danger-subtle {
    background:     transparent;
    border:         none;
    color:          #8b2626;
    opacity:        0.45;
    font-family:    'Cinzel', serif;
    font-size:      0.7rem;
    font-weight:    700;
    cursor:         pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding:        0;
    transition:     opacity 0.2s;
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
}

.btn-danger-subtle:hover {
    opacity:               1;
    text-decoration:       underline;
    text-underline-offset: 3px;
}

/* ── Confirm modal ───────────────────────────────────────── */
.modal-confirm-message {
    font-family: 'Crimson Text', Georgia, serif;
    font-size:   1.1rem;
    color:       #3a2a1a;
    margin:      8px 0 0;
    line-height: 1.5;
}

.modal-confirm-actions {
    justify-content: space-between;
    align-items:     center;
    gap:             24px;
}

.btn-subtle {
    background:     transparent;
    border:         none;
    color:          #5a4a35;
    opacity:        0.5;
    font-family:    'Cinzel', serif;
    font-size:      0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor:         pointer;
    padding:        0;
}

.btn-subtle:hover {
    opacity:              1;
    text-decoration:      underline;
    text-underline-offset: 3px;
}

/* ── Hamburger menu (mobile) ─────────────────────────────── */

/* Checkbox caché — sert de toggle */
.topbar-nav-toggle {
    display: none;
}

/* Bouton hamburger — caché sur desktop */
.topbar-hamburger {
    display:        none;
    flex-direction: column;
    justify-content: center;
    gap:            5px;
    cursor:         pointer;
    padding:        8px 4px;
    z-index:        20;
    flex-shrink:    0;
}

.topbar-hamburger span {
    display:          block;
    width:            22px;
    height:           2px;
    background:       #c8b693;
    border-radius:    1px;
    transition:       transform 0.22s ease, opacity 0.22s ease;
}

/* Animation → croix quand ouvert */
.topbar-nav-toggle:checked ~ .topbar-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.topbar-nav-toggle:checked ~ .topbar-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.topbar-nav-toggle:checked ~ .topbar-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    /* Affiche le hamburger */
    .topbar-hamburger {
        display: flex;
    }

    /* Nav : drawer qui se déploie sous le topbar */
    .topbar-right {
        display:          none;
        position:         absolute;
        top:              70px;
        left:             0;
        right:            0;
        background:       linear-gradient(to bottom, #2a221b 0%, #17120e 100%);
        border-bottom:    2px solid #0a0806;
        box-shadow:       0 6px 16px rgba(0,0,0,0.6);
        flex-direction:   column;
        align-items:      stretch;
        padding:          12px 20px 16px;
        gap:              6px;
        z-index:          100;
    }

    /* Ouvre le menu */
    .topbar-nav-toggle:checked ~ .topbar-right {
        display: flex;
    }

    /* Items texte (liens de nav) */
    .topbar-right .home-topbar__lang {
        display:       block;
        padding:       10px 4px;
        font-size:     0.85rem;
        color:         #c8b693;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .topbar-right .home-topbar__lang:hover {
        color: #ebdcb9;
    }

    /* Boutons pleine largeur */
    .topbar-right .btn-rustic {
        justify-content: center;
        padding:         10px 14px;
        font-size:       0.85rem;
    }

    /* Ligne email + icône compte : email à gauche, icône à droite */
    .topbar-user-row {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             10px;
        padding:         6px 0;
        border-bottom:   1px solid rgba(255,255,255,0.06);
    }

    .topbar-user-row .btn-rustic {
        padding:    6px 10px;
        flex-shrink: 0;
    }

    /* Formulaire logout pleine largeur */
    .topbar-logout-form {
        display: block;
        width:   100%;
    }

    .topbar-logout-form .btn-rustic {
        width: 100%;
    }

    /* Séparateur vertical → inutile en vertical */
    .topbar-right .separator {
        display: none;
    }
}

/* ── Feedback tab flottant ───────────────────────────────── */

/* Body must be a positioning context on app pages */
.page-dashboard,
.page-editor {
    position: relative;
}

.feedback-tabs-row {
    position:       absolute;
    top:            68px;
    left:           15px;
    display:        flex;
    flex-direction: row;
    gap:            10px;
    z-index:        9;
}

.feedback-tab {
    background:     linear-gradient(to right, #2a1e15 0%, #5a3e28 35%, #4a3220 65%, #2a1e15 100%);
    border:         1px solid #7a5c3a;
    border-top:     none;
    border-radius:  0 0 5px 5px;
    color:          #c8a870;
    font-family:    'Cinzel', serif;
    font-size:      0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor:         pointer;
    box-shadow:     3px 0 10px rgba(0,0,0,0.5), inset -1px 0 2px rgba(255,255,255,0.06);
    transition:     background 0.2s, color 0.2s;
    padding:        5px 10px;
}

.feedback-tab:hover {
    background: linear-gradient(to right, #3a2a1c 0%, #7a5535 35%, #6a4528 65%, #3a2a1c 100%);
    color:      #ebdcb9;
}


.changelog-dot {
    position:      absolute;
    top:           4px;
    right:         4px;
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    #f4d080;
    box-shadow:    0 0 5px rgba(244,208,128,0.7);
}

.changelog-list {
    display:        flex;
    flex-direction: column;
    gap:            18px;
    max-height:     60vh;
    overflow-y:     auto;
    padding-right:  4px;
}

.changelog-entry {
    border-bottom: 1px solid rgba(107,88,66,0.2);
    padding-bottom: 14px;
}

.changelog-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.changelog-entry__date {
    display:        block;
    font-family:    'Cinzel', serif;
    font-size:      0.72rem;
    color:          #6b5842;
    letter-spacing: 0.5px;
    margin-bottom:  6px;
}

.changelog-entry__note {
    font-family: 'Crimson Text', serif;
    font-size:   1.05rem;
    color:       #473e29;
    line-height: 1.6;
    margin:      0 0 8px;
}

.changelog-entry__note:last-child { margin-bottom: 0; }

.changelog-entry__note a {
    color:           #c8a870;
    text-decoration: underline;
    word-break:      break-all;
}

.changelog-entry__note a:hover { color: #f4d080; }

.feedback-status {
    font-family: 'Crimson Text', serif;
    font-size:   0.95rem;
    color:       #7a9a7a;
    margin-left: 12px;
}

.feedback-status--error {
    color: #a07070;
}