/* 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)
;}



















.hidden {display: none!important;}









/* Barre superieure de l application Admin. */

















.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. */























/* Conteneur visuel commun aux modules. */

















/* 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;}














/* Grille generale des tickets. */








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









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









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









/* Etats d attente des actions longues (export PDF / impression). */
.btn.is-busy {
    position: relative;
    cursor: wait;
    opacity: .82;
}
.btn.is-busy::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 7px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wabaa-button-spin .7s linear infinite;
}
@keyframes wabaa-button-spin { to { transform: rotate(360deg); } }

/* 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 .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
;}












/* 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 .submit {background: var(--blue);
    color: #fff;
    font-weight: 800;
    border: 0
;}









.export-bottom {display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    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
    ;}




    







    



.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
    ;}




    



.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
    ;}




    



.print-only {display: block!important;}




    



@page {
        size: A4 portrait;
        margin: var(--print-margin,8mm)
    }




}









.print-only {display: none
;}









/* ============================================================
   V53 - DEBUT GENERATION TICKETS - ZONE D APERCU
   La taille choisie dans Parametres reste respectee.
   Si elle depasse la zone disponible, le defilement horizontal
   reste dans la zone des tickets et ne deborde pas sur le formulaire.
   ============================================================ */








.generate-ticket-grid {grid-template-rows: repeat(var(--gen-row-count,1),var(--ticket-height,54mm));
    align-items: start;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;}









#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
   ============================================================ */














.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;}












.sidebar {position:relative;z-index:40;box-shadow:12px 0 30px rgba(16,42,86,.08);}






.content {min-width:0;}












.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)    {
  







  



.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;}




  









.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;}






.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;}






  



.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%);}
















.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;}












.business-router-bar {background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft);border-radius:15px;padding:13px 15px;}








.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;}












.content {padding:24px 20px;}}








@media(max-width:650px)    {





.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;}












.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%);}














.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;}












.business-router-bar {background:rgba(255,255,255,.78);box-shadow:var(--shadow-soft);border-radius:15px;padding:13px 15px;}








.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;}












.content {padding:24px 20px;}}








@media(max-width:650px)    {





.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;}












.business-router-bar {align-items:stretch;}






.business-router-bar label {width:100%;}






.business-router-bar .select {min-width:100%;}}










/* ===== Theme graphique WABAA V15 ===== */
















.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, .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;}




















@media(max-width:760px)    {.content {padding:17px 13px 24px;}}










/* 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-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;}









/* WABAA V32 - finances et statistiques */








.subscription-options {margin-top:18px;display:grid;gap:10px;}






.subscription-option {display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px;border:1px solid #ddd;border-radius:10px;}






.subscription-option span {display:block;font-size:.85rem;opacity:.75;}






.finance-row {display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eee;}






.sales-filters {display:flex;gap:12px;flex-wrap:wrap;align-items:end;}






.sales-filters label {display:grid;gap:5px;}






.compact-head {margin-bottom:10px;}






.sales-summary-panel {margin-top:18px;}








@media(max-width:800px)    {.subscription-option {grid-template-columns:1fr;}






.sales-stats {grid-template-columns:1fr 1fr;}}










/* V48 - DEBUT LIEN REINITIALISATION MOT DE PASSE */








.forgot-password-link {display:block;margin:10px auto 0;border:0;background:transparent;color:var(--blue);font-size:12px;font-weight:700;cursor:pointer;}






.forgot-password-link:hover {text-decoration:underline;}






.forgot-password-form {margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#f8fbff;}






.forgot-password-form .secondary {margin-top:8px;}






.forgot-password-form.hidden {display:none;}








/* V48 - FIN LIEN REINITIALISATION MOT DE PASSE */









/* ============================================================
   V53 - DEBUT MENU SOLDES PAR ROUTEUR
   Filtres, resume financier et cartes du menu balances.
   ============================================================ */








.balance-filters {display:grid;grid-template-columns:minmax(180px,1.3fr) minmax(180px,1.3fr) minmax(150px,.8fr) minmax(150px,.8fr) auto;gap:12px;align-items:end;margin:18px 0;padding:16px;border:1px solid #d8e8f8;border-radius:16px;background:#f8fbff;}








.balance-filters label {display:grid;gap:6px;font-size:12px;font-weight:700;color:#45617f;}








.balance-filters .select, .balance-filters .field {width:100%;min-height:42px;box-sizing:border-box;}








.balance-filter-actions {display:flex;gap:8px;flex-wrap:wrap;}








.balance-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px;}








.balance-summary-card {padding:15px 16px;border:1px solid #d8e8f8;border-radius:14px;background:#fff;box-shadow:0 7px 20px rgba(19,67,120,.05);}








.balance-summary-card span {display:block;color:#718096;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}








.balance-summary-card strong {display:block;margin-top:5px;color:#123d7a;font-size:20px;}








.balance-card {min-height:0;}








@media(max-width:1050px)    {.balance-filters {grid-template-columns:repeat(2,minmax(0,1fr));}






.balance-filter-actions {grid-column:1/-1;}}








@media(max-width:650px)    {.balance-filters {grid-template-columns:1fr;}






.balance-filter-actions {grid-column:auto;}






.balance-filter-actions .btn {flex:1;}






.balance-summary {grid-template-columns:1fr;}}








/* ============================================================
   V53 - FIN MENU SOLDES PAR ROUTEUR
   ============================================================ */









/* V53.3 - Notifications metier WABAA : remplacement des alertes natives. */








.wabaa-notice-box {position:relative; text-align:left;}








.wabaa-notice-icon {width:42px; height:42px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; border-radius:13px; background:linear-gradient(135deg,#1686df,#2bb7ef); color:#fff; font-weight:900; font-size:21px; box-shadow:0 8px 20px rgba(22,134,223,.18);}








.wabaa-notice-error .wabaa-notice-icon {background:linear-gradient(135deg,#c74343,#ef7b6e); box-shadow:0 8px 20px rgba(199,67,67,.18);}








.wabaa-notice-success .wabaa-notice-icon {background:linear-gradient(135deg,#15966a,#39d98a); box-shadow:0 8px 20px rgba(21,150,106,.18);}








.wabaa-notice-box p {white-space:normal;}