/* WABAA Admin - styles principaux et impression. */

/* Variables globales utilisees par toute l interface. */
:root {
    --blue: #0b5ed7;
    --blue2: #0789e8;
    --navy: #102a56;
    --soft: #f4f8fd;
    --line: #dce8f5;
    --text: #14213d;
    --muted: #64748b;
    --green: #159447;
    --danger: #c62828;
    --white: #fff;
    --shadow: 0 10px 30px rgba(16,42,86,.10)
}

/* Base de dimensionnement et typographie des elements. */
* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Arial,Helvetica,sans-serif;
    background: #f3f7fc;
    color: var(--text)
}

button,input,select {
    font: inherit
}

button {
    cursor: pointer
}

.hidden {
    display: none!important
}

/* Barre superieure de l application Admin. */
.topbar {
    height: 66px;
    background: linear-gradient(90deg,#079be8,#126fd5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px
}

.brand {
    font-size: 24px;
    font-weight: 800;
    display: flex;
    gap: 10px;
    align-items: center
}

.brand span {
    font-size: 29px
}

.userbar {
    font-weight: 700
}

.logout {
    margin-left: 15px;
    border: 1px solid rgba(255,255,255,.5);
    background: transparent;
    color: #fff;
    padding: 8px 13px;
    border-radius: 8px
}

/* Structure principale : menu lateral et contenu. */
.layout {
    display: grid;
    grid-template-columns: 245px 1fr;
    min-height: calc(100vh - 66px)
}

/* Navigation laterale. */
.sidebar {
    background: linear-gradient(#102a56,#0d2347);
    color: #fff;
    padding: 22px 12px;
    display: flex;
    flex-direction: column
}

/* Boutons de navigation des modules. */
.navbtn {
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    padding: 14px 16px;
    border-radius: 9px;
    margin-bottom: 6px;
    font-weight: 700
}

.navbtn:hover,.navbtn.active {
    background: #078fe5
}

/* Groupe de navigation Routeur et ses sous-menus. */
.navgroup {
    margin-bottom: 6px
}

.navgroup .navbtn {
    width: 100%;
    margin-bottom: 0
}

.navgroup-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.nav-chevron {
    font-size: 13px;
    transition: transform .15s ease
}

.navgroup.open .nav-chevron {
    transform: rotate(90deg)
}

.navsubmenu {
    display: grid;
    gap: 3px;
    margin: 4px 0 2px 18px;
    padding-left: 9px;
    border-left: 1px solid rgba(255,255,255,.22)
}

.navsubbtn {
    width: 100%;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.86);
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700
}

.navsubbtn:hover,.navsubbtn.active {
    background: rgba(7,143,229,.55);
    color: #fff
}

.router-placeholder {
    max-width: 900px;
    line-height: 1.6
}

.sidebrand {
    margin-top: auto;
    text-align: center;
    padding: 25px 10px 10px;
    opacity: .95
}

.sidebrand .wifi {
    font-size: 42px
}

/* Zone de contenu principale. */
.content {
    padding: 26px;
    overflow: auto
}

/* En-tete commun des pages. */
.pagehead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px
}

.pagehead h1 {
    margin: 0 0 5px;
    font-size: 29px
}

.pagehead p {
    margin: 0;
    color: var(--muted)
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* Style commun des actions Admin. */
.btn {
    border: 0;
    border-radius: 8px;
    padding: 11px 15px;
    font-weight: 800;
    color: #fff;
    background: var(--blue)
}

.btn.green {
    background: var(--green)
}

.btn.gray {
    background: #64748b
}

.btn.danger {
    background: var(--danger)
}

.btn:disabled {
    opacity: .45;
    cursor: not-allowed
}

/* Conteneur visuel commun aux modules. */
.panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 18px
}

/* Grille des filtres de tickets. */
.filters {
    display: grid;
    grid-template-columns: 1fr auto 190px 190px 190px auto;
    gap: 10px;
    margin-bottom: 16px
}

.filter-toggle {
    margin-top: 0;
    white-space: nowrap;
    border: 1px solid #cbd9e8;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff
}

.filter-field {
    display: block
}

.filter-field.hidden {
    display: none!important
}

.field,.select {
    width: 100%;
    border: 1px solid #cbd9e8;
    border-radius: 8px;
    padding: 11px 12px;
    background: #fff
}

/* Grille generale des tickets. */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--ticket-cols,3),minmax(0,1fr));
    gap: 12px
}

.grid .ticket {
    min-width: 0;
    width: var(--ticket-width,36mm);
    height: var(--ticket-height,54mm);
    max-width: 100%;
    box-sizing: border-box
}

.grid .ticket-head {
    font-size: clamp(10px,1.4vw,18px);
    line-height: 1.05;
    min-height: auto
}

.grid .cred {
    padding: clamp(4px,.8vw,9px)
}

.grid .cred small,.grid .detail small {
    font-size: clamp(7px,.9vw,11px)
}

.grid .cred strong,.grid .detail strong {
    font-size: clamp(9px,1.1vw,17px);
    line-height: 1.05
}

.grid .detail {
    padding: clamp(4px,.7vw,8px)
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px
}

.pageinfo {
    font-weight: 700;
    color: #53657b
}

/* Messages d information et etats de chargement. */
.notice {
    padding: 11px 13px;
    background: #eef7ff;
    border: 1px solid #cfe5fa;
    border-radius: 8px;
    color: #34536f;
    margin-bottom: 14px
}

.status {
    padding: 10px;
    border-radius: 8px;
    background: #f6f8fb;
    margin-top: 10px
}

/* Organisation de la generation : apercu a gauche, formulaire a droite. */
.generate-layout {
    display: grid;
    grid-template-columns: minmax(0,1.7fr) minmax(280px,.8fr);
    gap: 18px;
    align-items: start
}

.generate-preview {
    min-width: 0
}

.generate-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: var(--navy)
}

.generate-preview-head span {
    font-size: 12px;
    color: var(--muted)
}

.generate-form-panel {
    border-left: 1px solid var(--line);
    padding-left: 18px
}

/* Grille des tickets produits par la generation courante. */
.generate-ticket-grid {
    display: grid;
    grid-template-columns: repeat(var(--gen-cols,5),var(--ticket-width,36mm));
    gap: 8px;
    min-height: 110px;
    overflow: auto;
    align-content: start;
    padding-bottom: 4px
}

.generate-ticket-grid:empty:before {
    content: "Les tickets generes apparaitront ici.";
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: var(--muted);
    background: #f8fafc
}

.generate-ticket-grid .ticket {
    padding: clamp(4px,1vw,9px);
    min-width: 0
}

.generate-ticket-grid .ticket-head {
    font-size: clamp(9px,1.35vw,16px);
    line-height: 1.05;
    min-height: clamp(12px,2vw,22px)
}

.generate-ticket-grid .ticket-body {
    margin-top: clamp(3px,0.7vw,7px)
}

.generate-ticket-grid .cred {
    padding: clamp(3px,0.65vw,7px)
}

.generate-ticket-grid .cred small,.generate-ticket-grid .detail small {
    font-size: clamp(7px,.9vw,11px)
}

.generate-ticket-grid .cred strong,.generate-ticket-grid .detail strong {
    font-size: clamp(8px,1.1vw,14px);
    line-height: 1.05
}

.generate-ticket-grid .detail {
    padding: clamp(3px,.6vw,6px)
}

.generate-ticket-grid .phone {
    font-size: clamp(7px,.85vw,11px);
    margin-top: 3px
}

.generate-ticket-grid .jobbox {
    display: none
}

.generate-preview /* Zone des actions d export en bas des listes. */
.export-bottom {
    justify-content: flex-end
}

.generate {
    max-width: none
}

.generate form {
    display: grid;
    gap: 10px
}

.generate label,.settings label {
    font-weight: 700
}

.jobbox {
    border: 1px solid var(--line);
    padding: 10px;
    border-radius: 8px;
    margin-top: 8px
}

/* Organisation de la page des parametres. */
.settings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.settings-card h3 {
    margin-top: 0
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.dimension-help {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px
}

/* Cadre visuel de l apercu A4. */
.preview {
    background: #eef4fa;
    border: 1px solid var(--line);
    padding: 16px;
    border-radius: 8px
}

.preview-sheet {
    background: #fff;
    border: 1px solid #cdd8e4;
    aspect-ratio: 210/297;
    padding: 9px;
    display: grid;
    gap: 5px
}

.preview-ticket {
    border: 1px dashed #6c91b5;
    border-radius: 2px;
    min-width: 0
}

.checkline {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px
}

.checkline input {
    width: 18px;
    height: 18px
}

/* Fond de la fenetre modale d export. */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(10,25,50,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 10
}

.modalbox {
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    width: min(420px,100%);
    box-shadow: 0 20px 60px rgba(0,0,0,.25)
}

.modalbox h3 {
    margin-top: 0
}

.modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

/* Ecran de connexion avant authentification. */
.loginwrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#eef8ff,#dbeafe)
}

.login {
    width: min(430px,92vw);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 70px rgba(16,42,86,.18);
    padding: 28px
}

.login h1 {
    margin: 0 0 8px
}

.login p {
    color: var(--muted)
}

.login form {
    display: grid;
    gap: 12px
}

.login input {
    padding: 13px;
    border: 1px solid #cbd9e8;
    border-radius: 8px
}

.login .submit {
    background: var(--blue);
    color: #fff;
    font-weight: 800;
    border: 0
}

.export-bottom {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line)
}

.empty {
    text-align: center;
    padding: 35px;
    color: var(--muted);
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px
}

@media(max-width:1050px) {
    .layout {
        grid-template-columns: 1fr
    }
    .sidebar {
        display: flex;
        flex-direction: row;
        overflow: auto
    }
    .sidebrand {
        display: none
    }
    .navbtn {
        white-space: nowrap
    }
    .grid {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
    .settings-layout {
        grid-template-columns: 1fr
    }
    .filters {
        grid-template-columns: 1fr 1fr
    }
    .filters .btn {
        grid-column: span 2
    }
}

@media(max-width:650px) {
    .content {
        padding: 12px
    }
    .pagehead {
        align-items: flex-start;
        flex-direction: column
    }
    .grid {
        grid-template-columns: 1fr
    }
    .filters {
        grid-template-columns: 1fr
    }
    .filters .btn {
        grid-column: auto
    }
    .topbar {
        padding: 0 12px
    }
    .brand {
        font-size: 18px
    }
    .userbar {
        font-size: 13px
    }
    .settings-grid {
        grid-template-columns: 1fr
    }
}

/* Regles dediees a l impression des tickets. */
@media print {
    body {
        background: #fff
    }
    .topbar,.sidebar,.pagehead,.filters,.panel:not(.print-panel),.modal,.pagination,#settingsSection,#generateSection,.notice,.status {
        display: none!important
    }
    .layout {
        display: block
    }
    .content {
        padding: 0
    }
    .print-panel {
        display: block!important;
        border: 0;
        box-shadow: none;
        padding: 0
    }
    .grid {
        grid-template-columns: repeat(var(--print-cols,5),var(--ticket-width,36mm));
        gap: var(--print-gap,3mm);
        overflow: visible
    }
    .ticket {
        border: 1px solid #000;
        padding: 2.5mm;
        border-radius: 0;
        width: var(--ticket-width,36mm)!important;
        height: var(--ticket-height,54mm)!important;
        box-sizing: border-box
    }
    .ticket-head {
        font-size: 10pt
    }
    .cred strong {
        font-size: 10pt
    }
    .cred,.detail {
        padding: 1.5mm
    }
    .phone {
        font-size: 8pt
    }
    .print-only {
        display: block!important
    }
    @page {
        size: A4 portrait;
        margin: var(--print-margin,8mm)
    }
}

.print-only {
    display: none
}

/* Correction definitive de la mise en page des tickets generes. */
.generate-ticket-grid {
    grid-template-rows: repeat(var(--gen-row-count,1),minmax(0,1fr));
    align-items: stretch;
    overflow: visible
}

.generate-ticket-grid .ticket {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(3px,0.55vw,7px);
}

.generate-ticket-grid .ticket-head {
    font-size: clamp(8px,1.1vw,14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 0;
    margin-bottom: 2px
}

.generate-ticket-grid .ticket-body {
    margin-top: 2px;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column
}

.generate-ticket-grid .credentials,.generate-ticket-grid .details {
    min-height: 0
}

.generate-ticket-grid .cred,.generate-ticket-grid .detail {
    padding: clamp(2px,0.4vw,5px);
    min-height: 0
}

.generate-ticket-grid .cred small,.generate-ticket-grid .detail small {
    font-size: clamp(6px,0.65vw,9px);
    margin-bottom: 1px
}

.generate-ticket-grid .cred strong,.generate-ticket-grid .detail strong {
    font-size: clamp(7px,0.85vw,12px);
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis
}

.generate-ticket-grid .phone {
    font-size: clamp(6px,0.65vw,9px);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden
}

.generate-ticket-grid .ticket {
    width: var(--ticket-width,36mm);
    height: var(--ticket-height,54mm);
    box-sizing: border-box
}

#ticketGrid,#soldGrid {
    overflow: auto;
    align-items: start
}

.preview-sheet {
    overflow: hidden;
    place-content: center
}

.preview-ticket {
    width: var(--ticket-width,36mm);
    height: var(--ticket-height,54mm);
    box-sizing: border-box
}


/* routeur membre debut */
.router-current{margin-left:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px}
.router-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.router-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:16px;box-shadow:0 5px 18px rgba(0,0,0,.05)}
.router-card.selected{border-color:#16a34a;box-shadow:0 0 0 2px rgba(22,163,74,.12)}
.router-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.router-card-head b{display:block}.router-card-head small{display:block;color:#6b7280;margin-top:3px}.router-card p{color:#4b5563;min-height:40px}.router-meta{font-size:13px;line-height:1.7;color:#374151}.router-status{font-size:11px;padding:4px 8px;border-radius:999px;background:#f3f4f6}.router-status.active{background:#dcfce7;color:#166534}.router-status.pending{background:#fef3c7;color:#92400e}.router-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.router-form{max-width:760px}.router-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:700px){.router-grid-2{grid-template-columns:1fr}.router-current{display:none}}
/* routeur membre fin */

/* ============================================================
   WABAA V11 - interface moderne et mobile
   ============================================================ */
.topbar-left{display:flex;align-items:center;gap:10px}.menu-toggle{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.24);border-radius:12px;background:rgba(255,255,255,.10);color:#fff;font-size:20px;cursor:pointer}.topbar{box-shadow:0 8px 28px rgba(16,42,86,.12);position:relative;z-index:30}.sidebar{position:relative;z-index:40;box-shadow:12px 0 30px rgba(16,42,86,.08)}.content{min-width:0}.panel,.stat-card{box-shadow:0 10px 30px rgba(16,42,86,.06);border-color:#e1ebf5}.pagehead h1{letter-spacing:-.02em}.business-router-bar{box-shadow:0 6px 18px rgba(16,42,86,.04)}.navbtn,.navsubbtn{cursor:pointer}.sidebar-backdrop{display:none}

@media(max-width:1050px){
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
  .layout{display:block;min-height:calc(100vh - 66px)}
  .sidebar{position:fixed;left:0;top:66px;bottom:0;width:min(290px,86vw);transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;overflow-x:hidden;z-index:60;padding:18px 12px;box-shadow:18px 0 45px rgba(4,25,58,.28)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{position:fixed;inset:66px 0 0;background:rgba(7,22,45,.40);backdrop-filter:blur(3px);z-index:55;display:block;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .sidebar-backdrop.open{opacity:1;pointer-events:auto}
  .sidebrand{display:block;margin-top:auto}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .topbar{height:62px;padding:0 10px;position:sticky;top:0}
  .sidebar{top:62px}
  .sidebar-backdrop{inset:62px 0 0}
  .brand{font-size:17px}.brand span{font-size:24px}
  .userbar{display:flex;align-items:center;gap:6px;font-size:11px}.userbar .logout{margin-left:4px;padding:7px 9px;font-size:10px}
  .content{padding:12px 10px 24px}
  .pagehead{gap:10px}.pagehead h1{font-size:25px}.pagehead p{font-size:12px;line-height:1.5}
  .panel{border-radius:15px;padding:13px}.business-router-bar{padding:11px;border-radius:13px}.business-router-help{width:100%;line-height:1.4}
  .stats-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card{padding:12px;border-radius:13px}.stat-card b{font-size:23px}
  .dashboard-grid{grid-template-columns:1fr}
  .subscription-plan{align-items:flex-start;flex-direction:column}.subscription-grid{grid-template-columns:1fr 1fr}
  .filters{gap:8px}.filters>*{min-width:0}.select,.field{max-width:100%}
  .router-card-head{gap:8px}.router-actions{gap:6px}.router-actions .btn{flex:1 1 140px}
}
@media(max-width:390px){
  .brand{font-size:15px}.userbar #memberIdentity{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.userbar .router-current{display:none}.userbar .logout{font-size:9px;padding:6px 7px}
  .stats-grid,.subscription-grid{grid-template-columns:1fr}
}

.subscription-payment-row{margin-top:16px;padding:14px 15px;border:1px solid #dbe8f5;border-radius:14px;background:linear-gradient(135deg,#f7fbff,#fff);display:flex;align-items:center;justify-content:space-between;gap:15px}.subscription-payment-row>div{display:grid;gap:4px}.subscription-payment-row span{font-size:11px;color:#718198;line-height:1.4}.subscription-payment-row button{opacity:.65;cursor:not-allowed}@media(max-width:600px){.subscription-payment-row{flex-direction:column;align-items:stretch}.subscription-payment-row button{width:100%}}

/* ============================================================
   WABAA V13 - REFONTE UI ESPACE MEMBRE
   Navigation, cartes, responsive et etats visuels.
   ============================================================ */
:root{
  --blue:#126fd5;
  --blue2:#079be8;
  --navy:#0b1f3a;
  --navy2:#102a56;
  --soft:#f5f8fc;
  --line:#dce6f2;
  --text:#12233f;
  --muted:#718096;
  --green:#159447;
  --danger:#c62828;
  --shadow:0 18px 50px rgba(15,39,71,.08);
  --shadow-soft:0 8px 26px rgba(15,39,71,.06)
}
body{background:linear-gradient(180deg,#f7faff 0,#f1f5fa 100%)}
.topbar{height:72px;padding:0 26px;background:linear-gradient(110deg,#091f3d 0%,#103766 52%,#126fd5 100%);box-shadow:0 8px 28px rgba(8,30,57,.18);position:sticky;top:0;z-index:100}
.brand{font-size:20px;letter-spacing:-.02em}.brand span{font-size:25px}.userbar{display:flex;align-items:center;gap:12px}.logout{border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.layout{grid-template-columns:270px 1fr;min-height:calc(100vh - 72px)}
.sidebar{background:linear-gradient(180deg,#0a1e38 0%,#0e294d 100%);padding:22px 14px 16px;box-shadow:10px 0 35px rgba(6,26,51,.12);border-right:1px solid rgba(255,255,255,.06);position:relative;z-index:80}
.sidebar-section-label{padding:0 12px 11px;color:rgba(255,255,255,.42);font-size:10px;font-weight:900;letter-spacing:.14em}.navbtn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;border-radius:12px;margin:3px 0;color:rgba(255,255,255,.82);font-size:13px;transition:background .18s,transform .18s,color .18s}.navbtn:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}.navbtn.active{background:linear-gradient(135deg,rgba(7,155,232,.96),rgba(18,111,213,.96));color:#fff;box-shadow:0 9px 22px rgba(7,137,232,.2)}
.nav-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.08);font-size:14px;flex:0 0 28px}.navbtn.active .nav-icon{background:rgba(255,255,255,.16)}.nav-label{display:flex;align-items:center;gap:12px}.navgroup{margin:3px 0}.navgroup-toggle{justify-content:space-between}.nav-chevron{font-size:19px;line-height:1;transition:transform .2s ease;color:rgba(255,255,255,.5)}.navgroup.open .nav-chevron{transform:rotate(90deg);color:#fff}.navsubmenu{display:grid;gap:3px;margin:3px 0 8px 16px;padding:5px 0 4px 13px;border-left:1px solid rgba(255,255,255,.12)}.navsubbtn{padding:9px 11px;border-radius:9px;color:rgba(255,255,255,.62);font-size:12px}.navsubbtn:hover{background:rgba(255,255,255,.06);color:#fff}.navsubbtn.active{background:rgba(7,155,232,.16);color:#70cbff}.sidebar-spacer{flex:1}.sidebar-footer{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.48);font-size:10px;font-weight:800}.status-dot{width:7px;height:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.1)}
.content{padding:30px;max-width:1800px;width:100%}.pagehead{margin-bottom:22px}.pagehead h1{font-size:31px;letter-spacing:-.035em}.pagehead p{font-size:13px}.panel{border:1px solid rgba(220,230,242,.9);border-radius:18px;box-shadow:var(--shadow);padding:22px}.btn{border-radius:11px;padding:11px 16px;box-shadow:0 7px 18px rgba(18,111,213,.13);transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(18,111,213,.18)}.btn.gray{box-shadow:none}.business-router-bar{background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft);border-radius:15px;padding:13px 15px}.select,.field{border-radius:11px!important;background:#fff}.notice{border-radius:13px;line-height:1.5}.grid{gap:14px}.empty{border-radius:15px}.modal{backdrop-filter:blur(7px)}.modalbox{border-radius:20px;box-shadow:0 30px 90px rgba(5,25,50,.22)}
.menu-toggle{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:20px}
@media(max-width:1050px){.layout{display:block}.sidebar{position:fixed;left:0;top:72px;bottom:0;width:min(300px,88vw);transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;display:flex;flex-direction:column;box-shadow:20px 0 50px rgba(4,22,44,.28)}.sidebar.open{transform:translateX(0)}.sidebar-backdrop{display:block!important;position:fixed;inset:72px 0 0;background:rgba(4,19,38,.48);backdrop-filter:blur(4px);z-index:75;opacity:0;pointer-events:none;transition:opacity .2s}.sidebar-backdrop.open{opacity:1;pointer-events:auto}.menu-toggle{display:inline-flex;align-items:center;justify-content:center}.topbar-left{display:flex;align-items:center;gap:10px}.content{padding:24px 20px}}
@media(max-width:650px){.topbar{height:64px;padding:0 12px}.sidebar{top:64px}.sidebar-backdrop{inset:64px 0 0}.brand{font-size:17px}.brand span{font-size:21px}.userbar{font-size:11px}.logout{padding:8px 10px;font-size:10px;margin-left:4px}.content{padding:16px 12px}.pagehead h1{font-size:25px}.panel{padding:16px;border-radius:15px}.business-router-bar{align-items:stretch}.business-router-bar label{width:100%}.business-router-bar .select{min-width:100%}}

/* ============================================================
   WIFI WABAA V13 - REFONTE UI ESPACE MEMBRE
   Navigation moderne, cartes, responsive et etats visuels.
   ============================================================ */
:root{--blue:#126fd5;--blue2:#079be8;--navy:#0b1f3a;--navy2:#102a56;--soft:#f5f8fc;--line:#dce6f2;--text:#12233f;--muted:#718096;--green:#159447;--danger:#c62828;--shadow:0 18px 50px rgba(15,39,71,.08);--shadow-soft:0 8px 26px rgba(15,39,71,.06)}
body{background:linear-gradient(180deg,#f7faff 0,#f1f5fa 100%)}
.topbar{height:72px;padding:0 26px;background:linear-gradient(110deg,#091f3d 0%,#103766 52%,#126fd5 100%);box-shadow:0 8px 28px rgba(8,30,57,.18);position:sticky;top:0;z-index:100}.brand{font-size:20px;letter-spacing:-.02em}.brand span{font-size:25px}.userbar{display:flex;align-items:center;gap:12px}.logout{border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}
.layout{grid-template-columns:270px 1fr;min-height:calc(100vh - 72px)}
.sidebar{background:linear-gradient(180deg,#0a1e38 0%,#0e294d 100%);padding:22px 14px 16px;box-shadow:10px 0 35px rgba(6,26,51,.12);border-right:1px solid rgba(255,255,255,.06);position:relative;z-index:80}.sidebar-section-label{padding:0 12px 11px;color:rgba(255,255,255,.42);font-size:10px;font-weight:900;letter-spacing:.14em}.navbtn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 13px;border-radius:12px;margin:3px 0;color:rgba(255,255,255,.82);font-size:13px;transition:background .18s,transform .18s,color .18s}.navbtn:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(2px)}.navbtn.active{background:linear-gradient(135deg,rgba(7,155,232,.96),rgba(18,111,213,.96));color:#fff;box-shadow:0 9px 22px rgba(7,137,232,.2)}.nav-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.08);font-size:14px;flex:0 0 28px}.navbtn.active .nav-icon{background:rgba(255,255,255,.16)}.nav-label{display:flex;align-items:center;gap:12px}.navgroup{margin:3px 0}.navgroup-toggle{justify-content:space-between}.nav-chevron{font-size:19px;line-height:1;transition:transform .2s ease;color:rgba(255,255,255,.5)}.navgroup.open .nav-chevron{transform:rotate(90deg);color:#fff}.navsubmenu{display:grid;gap:3px;margin:3px 0 8px 16px;padding:5px 0 4px 13px;border-left:1px solid rgba(255,255,255,.12)}.navsubbtn{padding:9px 11px;border-radius:9px;color:rgba(255,255,255,.62);font-size:12px}.navsubbtn:hover{background:rgba(255,255,255,.06);color:#fff}.navsubbtn.active{background:rgba(7,155,232,.16);color:#70cbff}.sidebar-spacer{flex:1}.sidebar-footer{display:flex;align-items:center;gap:8px;margin-top:14px;padding:11px 12px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.48);font-size:10px;font-weight:800}.status-dot{width:7px;height:7px;border-radius:50%;background:#39d98a;box-shadow:0 0 0 4px rgba(57,217,138,.1)}
.content{padding:30px;max-width:1800px;width:100%}.pagehead{margin-bottom:22px}.pagehead h1{font-size:31px;letter-spacing:-.035em}.pagehead p{font-size:13px}.panel{border:1px solid rgba(220,230,242,.9);border-radius:18px;box-shadow:var(--shadow);padding:22px}.btn{border-radius:11px;padding:11px 16px;box-shadow:0 7px 18px rgba(18,111,213,.13);transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(18,111,213,.18)}.btn.gray{box-shadow:none}.business-router-bar{background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft);border-radius:15px;padding:13px 15px}.select,.field{border-radius:11px!important;background:#fff}.notice{border-radius:13px;line-height:1.5}.grid{gap:14px}.empty{border-radius:15px}.modal{backdrop-filter:blur(7px)}.modalbox{border-radius:20px;box-shadow:0 30px 90px rgba(5,25,50,.22)}.menu-toggle{display:none;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:20px}
@media(max-width:1050px){.layout{display:block}.sidebar{position:fixed;left:0;top:72px;bottom:0;width:min(300px,88vw);transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;display:flex;flex-direction:column;box-shadow:20px 0 50px rgba(4,22,44,.28)}.sidebar.open{transform:translateX(0)}.sidebar-backdrop{display:block!important;position:fixed;inset:72px 0 0;background:rgba(4,19,38,.48);backdrop-filter:blur(4px);z-index:75;opacity:0;pointer-events:none;transition:opacity .2s}.sidebar-backdrop.open{opacity:1;pointer-events:auto}.menu-toggle{display:inline-flex;align-items:center;justify-content:center}.topbar-left{display:flex;align-items:center;gap:10px}.content{padding:24px 20px}}
@media(max-width:650px){.topbar{height:64px;padding:0 12px}.sidebar{top:64px}.sidebar-backdrop{inset:64px 0 0}.brand{font-size:17px}.brand span{font-size:21px}.userbar{font-size:11px}.logout{padding:8px 10px;font-size:10px;margin-left:4px}.content{padding:16px 12px}.pagehead h1{font-size:25px}.panel{padding:16px;border-radius:15px}.business-router-bar{align-items:stretch}.business-router-bar label{width:100%}.business-router-bar .select{min-width:100%}}


/* ===== Theme graphique WABAA V15 ===== */
.topbar{background:linear-gradient(115deg,#102e67,#124da0 58%,#18bde7);box-shadow:0 8px 24px rgba(19,67,120,.12)}
.layout{background:linear-gradient(135deg,#eef7ff,#f8fbff 55%,#edf5ff)}
.sidebar{background:linear-gradient(180deg,#102e67,#0d2347);box-shadow:8px 0 28px rgba(19,67,120,.10)}
.content{padding:25px 28px 32px}
.business-router-bar,.subscription-card,.card,.panel,.box{border-color:#d8e8f8;border-radius:18px;box-shadow:0 8px 24px rgba(19,67,120,.06)}
.pagehead h1{color:#123d7a;font-weight:900;letter-spacing:-.4px}
.pagehead p,.business-router-help{color:#5c7193}
.btn{border-radius:12px;box-shadow:0 5px 14px rgba(7,88,184,.14)}
.btn.gray{background:#607b9e}
.select,input,textarea{border-color:#cfe0f1!important;border-radius:11px!important;background:#fff}
.select:focus,input:focus,textarea:focus{border-color:#6bbaf0!important;box-shadow:0 0 0 4px rgba(7,137,232,.09)}
@media(max-width:760px){.content{padding:17px 13px 24px}}


/* Correctif V18 : le prix et la validite ne doivent jamais etre tronques. */
.generate-ticket-grid .details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-width: 0;
    overflow: visible;
}

.generate-ticket-grid .detail {
    min-width: 0;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

.generate-ticket-grid .detail small {
    display: block;
    font-size: clamp(6px, 0.62vw, 8px);
    line-height: 1.1;
    margin: 0 0 2px;
}

.generate-ticket-grid .detail strong {
    display: block;
    font-size: clamp(7px, 0.72vw, 10px);
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

@media (max-width: 700px) {
    .generate-ticket-grid .detail strong {
        font-size: 8px;
    }
}

/* Fenetres de confirmation et de token utilisees par les actions sensibles. */
.wabaa-action-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(18, 42, 78, .58);
    backdrop-filter: blur(6px);
}

.wabaa-action-modal-box {
    width: min(520px, 100%);
    padding: 26px;
    background: #fff;
    border: 1px solid rgba(218, 228, 241, .95);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(5, 25, 50, .24);
}

.wabaa-action-modal-box h3 {
    margin: 0 0 10px;
    color: #16386f;
    font-size: 22px;
}

.wabaa-action-modal-box p {
    margin: 0 0 18px;
    color: #486587;
    line-height: 1.55;
}

.wabaa-action-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 18px 0;
    padding: 13px 14px;
    background: #f5f9fe;
    border: 1px solid #d7e4f3;
    border-radius: 12px;
    color: #183d70;
    font-weight: 600;
    cursor: pointer;
}

.wabaa-action-confirm-check input {
    width: 19px;
    height: 19px;
    margin: 0;
    flex: 0 0 auto;
}

.wabaa-action-modal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wabaa-action-modal-actions .btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.wabaa-token-modal-box {
    width: min(680px, 100%);
}

.wabaa-token-value {
    width: 100%;
    min-height: 100px;
    padding: 13px;
    border: 1px solid #cbdced;
    border-radius: 11px;
    background: #f8fbff;
    color: #12386d;
    font: 600 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    resize: vertical;
}

.wabaa-token-status {
    min-height: 22px;
    margin: 9px 0 12px;
    color: #11885a;
    font-size: 13px;
    font-weight: 600;
}