/* Account Manager */

/* tailles pilotables (variables scoping) */
.accountManager_page {
    --col-status: 30px;
    --col-id: 130px;
    --col-label: 350px;
    --col-broker: 350px;
    --col-key: 320px; /* clé privée */
    --col-spacer: 40px; /* espace vide (0-1fr ou px) */
    --col-actions: 420px; /* boutons */
    --map-from: 160px;
    --map-to: 160px;
    --map-actions: 120px;
    --abo-card-w: 230px; /* largeur fixe d’une stat-card */
    --abo-card-h: 60px; /* hauteur fixe (ajuste si besoin) */
}

    /* ===== Layout global (3 bandes horizontales) ===== */
    .accountManager_page .band {
        padding: 16px 20px;
        border-bottom: var(--border);
        min-width: 0; /* évite qu'un enfant force la largeur */
    }

        .accountManager_page .band h2 {
            margin: 0 0 12px 0;
            font-size: 1.25rem;
        }

    /* ===== Bande 1 : Récap abonnement ===== */
    .accountManager_page .abo-grid {
        display: block; /* écrase un éventuel display:grid */
        width: 100%;
    }

    /* les cards s'empilent ici, indépendamment des actions */
    .accountManager_page .abo-cards {
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        box-sizing: border-box;
    }

        .accountManager_page .abo-cards .stat-card {
            padding: 14px;
            border: var(--border);
            border-radius: 12px;
            background: var(--backgroundTicketPanel);
            flex: initial !important;
            width: auto !important;
            min-width: 0;
            height: var(--abo-card-h);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
        }

    .accountManager_page .stat-card .k {
        opacity: .7;
        font-size: .9rem;
    }

    .accountManager_page .stat-card .v {
        font-weight: 700;
        font-size: 1.1rem;
    }

#abo-status-card {
    display: none;
}

#abo-status, #noSubscription {
    color: orangered;
}

.accountManager_page .abo-actions {
    margin-top: 12px; /* petit espace sous les cards */
    display: flex;
    gap: 10px;
    justify-content: flex-end; /* ou flex-end si tu préfères */
    align-items: center;
    width: 100%;
    padding-right: 7px;
}

@media (max-width: 1325px) {
    .accountManager_page .abo-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* sécurité: rien ne force la largeur */
.accountManager_page .abo-grid,
.accountManager_page .abo-grid * {
    min-width: 0;
    white-space: normal !important; /* au cas où un nowrap traîne quelque part */
}


/* ===== Bande 2 : Ajout + liste ===== */
.accountManager_page #btn-add {
    width: 140px;
    justify-self: start;
}

.accountManager_page .add-form {
    display: grid;
    grid-template-columns: 220px 220px 220px 140px;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

/* les cellules de grid peuvent rétrécir */
.accountManager_page .list-head > div,
.accountManager_page .list-row > div,
.accountManager_page .map-head > div,
.accountManager_page .map-row > div {
    min-width: 0;
}

.accountManager_page .list-head,
.accountManager_page .list-row {
    display: grid;
    grid-template-columns: var(--col-status, 30px) clamp(60px, 12vw, 100px) /* N° compte: s’adapte */
    minmax(140px, 200px) /* Label */
    minmax(140px, 200px) /* Broker */
    minmax(180px, 290px) /* Clé privée */
    minmax(00px, .01fr) /* Spacer élastique */
    minmax(220px, 1fr); /* Actions: rétrécit puis passe à la ligne si wrap */
    gap: 10px;
    align-items: center;
    padding: 10px 8px;
    border-bottom: var(--border);
}

.accountManager_page .list-head {
    opacity: .7;
    font-size: .9rem;
}

    .accountManager_page .list-head .headerLabel,
    .accountManager_page .list-head .headerBroker,
    .accountManager_page .list-head .headerPk {
        margin-left: 6px;
    }

    .accountManager_page .list-head .headerActions {
        margin-left: 35px;
    }

.accountManager_page .pill {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    flex: 0 0 12px;
    display: inline-block;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset;
}

.accountManager_page .on {
    background: #22c55e;
}

.accountManager_page .off {
    background: #ef4444;
}

/*.accountManager_page .editable {
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: #12161f;
    color: #fff;
    padding: 0 10px;
    width: 100%;
}*/

.accountManager_page .btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    min-width: 0;
}

.accountManager_page .ml-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 12px;
}

/* toolbar d'édition des listes (bande mappage) */
.accountManager_page .ml-editor-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 6px 0 12px;
}


.accountManager_page .mapping-list-select,
.accountManager_page .mapping-list-edit-select {
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: #12161f;
    color: #fff;
    padding: 0 10px;
    min-width: 170px;
    max-width: 260px;
}

.accountManager_page .mapping-list-edit-select {
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.12);
    background: #12161f;
    color: #fff;
    padding: 0 10px;
    min-width: 210px;
    max-width: 360px;
}

.accountManager_page .btn-row .btn {
    flex: 0 0 auto; /* les boutons ne s’étirent pas */
    font-size: 12px;
}

.accountManager_page .btn-ghost {
    font-size: 12px;
}

/* quand l’écran rétrécit : autorise l’empilement */
@media (max-width: 2050px) {
    .accountManager_page .btn-row {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* 3) Le spacer doit libérer de la place plus tôt */
@media (max-width: 1600px) {
    .accountManager_page .list-head,
    .accountManager_page .list-row {
        grid-template-columns: var(--col-status, 30px) clamp(90px, 12vw, 150px) minmax(120px, 1fr) minmax(120px, 1fr) minmax(160px, 1fr) 1px /* spacer supprimé */
        minmax(220px, 1fr); /* actions wrap possible */
    }
}

@media (max-width: 900px) {
    .accountManager_page {
        --col-actions: auto;
    }

        .accountManager_page .btn-row {
            flex-wrap: wrap;
        }
}

/* ===== Bande 3 : Symbol Mapping ===== */
/* visible par défaut, caché uniquement si [hidden] */
.accountManager_page #mapping-panel[hidden] {
    display: none;
}

.accountManager_page .map-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

    .accountManager_page .map-form input {
        width: var(--map-from,160px);
    }

.accountManager_page .map-head,
.accountManager_page .map-row {
    display: grid;
    grid-template-columns: var(--map-from,160px) var(--map-to,160px) var(--map-actions,120px);
    gap: 10px;
    padding: 8px;
    align-items: center;
    border-bottom: var(--border);
}

/* responsive : élargir un peu si écran étroit (optionnel) */
@media (max-width: 1100px) {
    .accountManager_page {
        --map-from: 140px;
        --map-to: 140px;
    }
}

.accountManager_page .muted {
    opacity: .7;
}

.accountManager_page .key-group {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

    .accountManager_page .key-group .editable {
        flex: 1; /* prend la place dispo */
        width: auto; /* override du width:100% global */
        min-width: 0; /* évite les débordements */
    }

    .accountManager_page .key-group .btn {
        white-space: nowrap; /* le texte du bouton reste sur une ligne */
    }

@media (max-width: 1200px) {
    .accountManager_page .btn-row {
        flex-wrap: wrap;
    }
    /* s’empile si trop étroit */
}

/* === Modal Nouveau ticket === */
.nt-modal[hidden] {
    display: none;
}

.nt-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.nt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}

.nt-card {
    position: relative;
    z-index: 1;
    width: min(520px, 92vw);
    margin: 8vh auto 0;
    background: var(--panel);
    color: var(--fg);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.nt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: var(--borderBouton);
}

.nt-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nt-foot {
    padding: 12px 14px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: var(--borderBouton);
}

.nt-label {
    font-size: .92rem;
    opacity: .9;
}

.nt-input, .nt-select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: var(--borderSelect);
    background: transparent;
    color: #fff;
}

    .nt-input:hover, .nt-select:hover {
        border-color: var(--color2);
        outline: none;
    }

    .nt-input:focus, .nt-select:focus {
        border-color: var(--color1);
        outline: none;
    }

.nt-hint {
    font-size: .85rem;
    opacity: .7;
}

    .nt-hint #id {
        display: none;
        color: #ef4444;
    }

.btn--primary {
    border-color: var(--color2);
}

    .btn--primary:hover {
        box-shadow: 0 0 0 2px rgba(0,255,255,.12) inset;
        border-color: var(--color1);
    }

/* === Boutons sans "aura" + bordures thème === */
/* ciblés : Nouveau ticket, Annuler (modale), Croix fermer tchat */
#newTicketBtn,
#ntCancel,
#collapseBtn {
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--color2) !important;
    box-shadow: none !important;
    outline: none;
}

    /* hover / focus */
    #newTicketBtn:hover, #newTicketBtn:focus,
    #ntCancel:hover, #ntCancel:focus,
    #collapseBtn:hover, #collapseBtn:focus {
        border-color: var(--color1) !important;
        box-shadow: none !important;
        outline: none;
    }

    /* version icône (la croix) — assure l’absence d’aura */
    #collapseBtn.btn--icon {
        width: 28px;
        height: 28px;
        line-height: 26px;
        text-align: center;
        border-radius: 999px;
        padding: 0;
        font-weight: 700;
    }

/* 1) Reset commun : pas d'aura ni outline */
.tickets-panel .head input[type="text"],
.nt-input, .nt-select,
.chat-input textarea {
    outline: none !important;
    box-shadow: none !important;
}

    /* 3) Focus = cyan uniquement (bordure) */
    .tickets-panel .head input[type="text"]:focus,
    .tickets-panel .head input[type="text"]:focus-visible,
    .nt-input:focus, .nt-input:focus-visible,
    .nt-select:focus, .nt-select:focus-visible,
    .chat-input textarea:focus, .chat-input textarea:focus-visible {
        border-color: var(--color2) !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* 4) Si un parent ajoute un halo en :focus-within, on le neutralise */
.tickets-panel .head:focus-within {
    box-shadow: none !important;
}

/* 5) Petits cas navigateurs */
input, textarea, select, button {
    -webkit-tap-highlight-color: transparent;
}

    input:-moz-focusring, textarea:-moz-focusring, select:-moz-focusring {
        outline: none;
    }