/* ============================================================
   WIFI WABAA V16 - THEME COMMUN
   Style inspire du portail HotSpot fourni par le projet.
   ============================================================ */









:root {--wabaa-navy: #102f68;
    --wabaa-navy-dark: #0b285a;
    --wabaa-blue: #0d73df;
    --wabaa-blue-light: #16a7e8;
    --wabaa-bg: #eef7ff;
    --wabaa-card: #ffffff;
    --wabaa-line: #d7e6f6;
    --wabaa-text: #18345f;
    --wabaa-muted: #6b83a3;
    --wabaa-green: #1aa260;
    --wabaa-danger: #c93636;
    --wabaa-shadow: 0 18px 45px rgba(24, 62, 112, 0.12);
    --wabaa-radius: 18px;
    --wabaa-font-scale: 1;}









html {font-size: calc(16px * var(--wabaa-font-scale));
    background: var(--wabaa-bg);}









body {font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg, #f6fbff 0%, #edf6ff 100%);
    color: var(--wabaa-text);}














/* ------------------------------------------------------------
   Barre superieure commune membre et Root
   ------------------------------------------------------------ */



























.brand {color: #ffffff;
    text-decoration: none;
    font-size: 21px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;}









.brand span:first-child, .brand-mark {width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #ffae00;
    color: #ffffff;
    font-size: 20px;}









.userbar {display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;}









.router-current {padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 12px;}









.logout, .root-top .logout {border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 999px;
    font-weight: 800;}









.menu-toggle, .root-menu-toggle {display: none;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    font-size: 20px;}









/* ------------------------------------------------------------
   Espace membre
   ------------------------------------------------------------ */









.member-layout, .root-layout {display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: calc(100vh - 68px);}









.member-sidebar, .root-side {background: #102f68;
    color: #ffffff;
    padding: 18px 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;}









.sidebar-caption, .root-nav-caption {padding: 0 14px 12px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;}









.member-nav, .root-nav {display: grid;
    gap: 3px;}









.member-nav a, .member-nav button, .root-nav a, .root-nav button {width: 100%;
    min-height: 43px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.94);
    text-decoration: none;
    text-align: left;
    padding: 9px 12px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;}









.member-nav a:hover, .member-nav a.active, .member-nav button:hover, .root-nav a:hover, .root-nav a.active, .root-nav button:hover {background: #0e8de2;
    color: #ffffff;}









.nav-icon {width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 15px;}









.member-nav .active .nav-icon, .root-nav .active .nav-icon {background: rgba(255, 255, 255, 0.15);}









.nav-with-arrow {justify-content: space-between;}









.nav-with-arrow > span:first-child {display: flex;
    align-items: center;
    gap: 11px;}









.nav-arrow {font-size: 16px;
    opacity: 0.8;}









.nav-submenu {display: grid;
    gap: 2px;
    margin: 0 0 3px 28px;
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);}









.nav-submenu a {min-height: 35px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 700;}









.sidebar-footer, .root-side-footer {margin-top: auto;
    padding: 13px 12px 3px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 700;}









.status-dot {display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27d779;
    margin-right: 7px;}









.member-content, .root-content {min-width: 0;
    padding: 25px;
    overflow: auto;}









.member-page, .root-page {max-width: 1450px;
    margin: 0 auto;}









.pagehead, .root-head {display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;}









.pagehead h1, .root-head h1 {margin: 0 0 6px;
    color: var(--wabaa-navy);
    font-size: 31px;
    letter-spacing: -0.025em;}









.pagehead p, .root-head p {margin: 0;
    color: var(--wabaa-muted);
    font-size: 15px;
    line-height: 1.55;}











































.business-router-bar {display: grid;
    grid-template-columns: auto minmax(220px, 1fr);
    gap: 7px 12px;
    align-items: center;
    padding: 15px;
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid var(--wabaa-line);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(24, 62, 112, 0.06);}









.business-router-bar label {font-weight: 800;
    color: var(--wabaa-navy);}









.business-router-help {grid-column: 2;
    color: var(--wabaa-muted);
    font-size: 12px;}









.notice, .empty {padding: 12px 14px;
    border-radius: 11px;
    background: #f3f8fe;
    border: 1px solid #d8e8f7;
    color: #527091;}









.grid, .router-grid, .stats-grid {display: grid;
    gap: 15px;}









.stats-grid {grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;}









.stat-card, .root-stat {padding: 18px;}









.stat-card span, .root-stat span {display: block;
    color: var(--wabaa-muted);
    font-size: 13px;
    font-weight: 700;}









.stat-card b, .root-stat b {display: block;
    margin-top: 8px;
    color: var(--wabaa-navy);
    font-size: 29px;}









.dashboard-grid, .profile-grid, .settings-layout, .generate-layout, .root-subscription-layout {display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;}









.filters, .actions {display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;}









.filters .field {flex: 1 1 240px;}









.filters .select {min-width: 150px;}









.checkline {display: flex;
    align-items: center;
    gap: 8px;}









.checkline input {min-height: auto;}









.table-scroll, .root-table-scroll {overflow-x: auto;}









table {width: 100%;
    border-collapse: collapse;}









th, td {border-bottom: 1px solid #e2edf8;
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;}









th {color: var(--wabaa-navy);
    background: #f5f9fe;
    font-size: 13px;}









td {font-size: 14px;}









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









.pageinfo {font-weight: 800;
    color: var(--wabaa-navy);}









/* ------------------------------------------------------------
   Authentification publique
   ------------------------------------------------------------ */









.public-topbar {min-height: 68px;
    background: linear-gradient(100deg, #103b86 0%, #126fd5 58%, #18a9df 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;}









.public-topbar .brand, .public-topbar .top-link {color: #ffffff;}









.public-topbar .top-link {text-decoration: none;
    font-weight: 800;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;}









.public-shell {min-height: calc(100vh - 126px);
    display: grid;
    place-items: center;
    padding: 40px 25px;}









.hero {width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
    gap: 55px;
    align-items: center;}









.hero-copy h1 {margin: 12px 0 20px;
    color: var(--wabaa-navy);
    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.02;}









.hero-copy h1 strong {color: var(--wabaa-blue);}









.hero-copy p {max-width: 650px;
    color: #6680a4;
    font-size: 18px;
    line-height: 1.6;}









.hero-points {display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;}









.hero-points span {background: #ffffff;
    border: 1px solid var(--wabaa-line);
    border-radius: 999px;
    padding: 9px 13px;
    color: var(--wabaa-navy);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 7px 20px rgba(24, 62, 112, 0.06);}









.auth-card, .root-card {background: rgba(255, 255, 255, 0.97);
    border: 1px solid #dceaf7;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 24px 70px rgba(24, 62, 112, 0.16);}









.auth-card h2, .root-card h1 {color: var(--wabaa-navy);}









.auth-card label, .root-card label {display: grid;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--wabaa-navy);
    font-weight: 800;
    font-size: 13px;}









.auth-card input, .root-card input {width: 100%;}









.auth-card .primary {width: 100%;
    margin-top: 5px;}









.tabs {display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    margin-bottom: 22px;
    padding: 4px;
    background: #edf4fb;
    border-radius: 13px;}









.tab {border: 0;
    border-radius: 10px;
    padding: 12px;
    background: transparent;
    color: var(--wabaa-navy);
    font-weight: 800;}









.tab.active {color: #ffffff;
    background: linear-gradient(135deg, #0d73df, #159ee6);}









.auth-footer, .public-footer {color: #7188a6;
    font-size: 12px;
    line-height: 1.5;}









.auth-footer {margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e1edf8;
    text-align: center;}









.registration-alert {margin-bottom: 16px;
    padding: 12px;
    border-radius: 11px;
    background: #fff6e7;
    border: 1px solid #f4d19a;
    color: #7a5b22;}









.registration-alert-title {font-weight: 900;
    margin-bottom: 4px;}









.public-footer {min-height: 58px;
    display: grid;
    place-items: center;
    border-top: 1px solid #dbe8f4;}









/* ------------------------------------------------------------
   Parametre de taille de texte
   ------------------------------------------------------------ */









.interface-size-box {margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--wabaa-line);
    border-radius: 14px;
    background: #f8fbff;}









.interface-size-box h3 {margin: 0 0 7px;
    color: var(--wabaa-navy);}









.interface-size-box p {margin: 0 0 12px;
    color: var(--wabaa-muted);
    font-size: 13px;}









/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */









@media (max-width: 900px)     {
    



.menu-toggle, .root-menu-toggle {display: inline-flex;
        align-items: center;
        justify-content: center;}





    



.member-layout, .root-layout {display: block;}





    



.member-sidebar, .root-side {position: fixed;
        left: 0;
        top: 68px;
        bottom: 0;
        width: min(285px, 88vw);
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        z-index: 120;
        overflow-y: auto;}





    



.member-sidebar.open, .root-side.open {transform: translateX(0);}





    



.sidebar-backdrop, .root-nav-backdrop {position: fixed;
        inset: 68px 0 0;
        background: rgba(5, 25, 55, 0.35);
        z-index: 110;
        display: none;}





    



.sidebar-backdrop.open, .root-nav-backdrop.open {display: block;}





    



.member-content, .root-content {padding: 18px 13px 30px;}





    



.dashboard-grid, .profile-grid, .settings-layout, .generate-layout, .root-subscription-layout {grid-template-columns: 1fr;}





    



.stats-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}





    



.business-router-bar {grid-template-columns: 1fr;}





    



.business-router-help {grid-column: auto;}





    



.hero {grid-template-columns: 1fr;
        gap: 25px;}





    



.hero-copy h1 {font-size: 43px;}





    



.auth-card {width: 100%;
        max-width: 560px;
        margin: 0 auto;}




}









@media (max-width: 560px)     {
    



.public-topbar {padding: 0 11px;}





    



.brand {font-size: 18px;}





    



.brand span:first-child, .brand-mark {width: 31px;
        height: 31px;
        font-size: 17px;}





    



.userbar {gap: 5px;
        font-size: 11px;}





    



.router-current {display: none;}





    



.logout {padding: 7px 10px;
        font-size: 10px;}





    



.pagehead {align-items: flex-start;
        flex-direction: column;}





    



.pagehead h1, .root-head h1 {font-size: 26px;}





    



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





    



.auth-card, .root-card {padding: 16px;
        border-radius: 16px;}





    



.public-shell {padding: 25px 13px;}





    



.hero-copy h1 {font-size: 38px;}





    



.hero-copy p {font-size: 16px;}




}









/* ============================================================
   WABAA - LIEN CHANGEMENT MOT DE PASSE
   ============================================================ */








.wabaa-password-reset-link-area {margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--line, #d7e3f2);
    border-radius: 12px;
    background: #f5f9ff;}








.wabaa-password-reset-link-area small {display: block;
    margin-top: 8px;
    color: var(--muted, #65758b);
    line-height: 1.45;}








.wabaa-password-reset-link-area input[readonly] {cursor: text;}










/* ============================================================
   V53 - DEBUT GENERATION TICKETS - DEFILEMENT HORIZONTAL
   La zone d apercu contient les tickets meme si leur taille
   est superieure a l espace disponible.
   ============================================================ */








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








/* ============================================================
   V53 - FIN GENERATION TICKETS - DEFILEMENT HORIZONTAL
   ============================================================ */