:root{
  --green:#16b394;
  --dark:#27344f;
  --muted:#7c8493;
  --bg:#f7f8fa;
  --card:#fff;
  --orange:#ffb050;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--dark);
}
a{text-decoration:none;color:inherit}
.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-card{
  width:100%;
  max-width:430px;
  text-align:center;
}

.tor-logo{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:42px auto 34px;
}
.play-logo{
  width:95px;
  height:78px;
  position:relative;
  background:linear-gradient(135deg,#16d7f3 0%,#e70096 48%,#ffcc24 100%);
  clip-path:polygon(0 0,100% 50%,0 100%);
  border-radius:14px;
}
.play-logo span{
  position:absolute;
  left:30px;
  top:22px;
  width:0;
  height:0;
  border-top:17px solid transparent;
  border-bottom:17px solid transparent;
  border-left:28px solid white;
}
.tor-text{
  text-align:left;
  line-height:1;
}
.tor-main{
  font-size:46px;
  font-weight:800;
  letter-spacing:3px;
  color:#f0b400;
}
.tor-sub{
  margin-top:11px;
  font-size:20px;
  font-weight:600;
  letter-spacing:4px;
  color:#777d89;
}

.finger{
  display:none;
  width:165px;
  height:165px;
  border-radius:50%;
  margin:0 auto 22px;
  position:relative;
  background:
    repeating-radial-gradient(circle at 50% 48%,
      transparent 0px,
      transparent 9px,
      #149d31 10px,
      #149d31 14px,
      transparent 15px,
      transparent 22px);
}
.finger:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, transparent 0 52%, rgba(255,255,255,.88) 53% 100%);
  border-radius:50%;
}
.scan{
  position:absolute;
  left:-35px;
  right:-35px;
  top:80px;
  height:8px;
  background:#21e0d0;
  box-shadow:0 0 18px #21e0d0;
  z-index:2;
}
.login-title{
  font-size:23px;
  font-weight:700;
  margin-top:10px;
}
.login-sub{
  color:#666;
  font-size:15px;
  margin:14px 0 25px;
}
.input{
  width:100%;
  height:54px;
  border:1px solid #ddd;
  background:#fff;
  margin-bottom:16px;
  padding:0 18px;
  font-size:18px;
}
.btn{
  border:0;
  height:54px;
  border-radius:4px;
  background:var(--green);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.full{width:100%}
.flash{
  background:#ffe2e2;
  color:#9a0000;
  padding:12px;
  border-radius:5px;
  text-align:left;
  margin-bottom:14px;
}
.captcha{
  margin-top:22px;
  height:78px;
  border:1px solid #ddd;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  color:#333;
}
.box{
  width:34px;
  height:34px;
  border:2px solid #888;
  border-radius:4px;
}
.hcap{
  color:#777;
  font-size:13px;
}
.footer-login{
  margin-top:28px;
  color:#777;
  font-size:14px;
}
.app{
  display:flex;
  min-height:100vh;
}
.sidebar{
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  width:74px;
  background:#fff;
  border-right:1px solid #eee;
  padding-top:88px;
}
.side-logo{
  position:absolute;
  top:34px;
  left:22px;
  color:#7a8496;
  font-weight:bold;
  font-style:italic;
}
.side-item{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7a8496;
  font-size:24px;
  border-left:5px solid transparent;
}
.side-item.active{
  border-left-color:var(--green);
  color:var(--green);
}
.main{
  margin-left:74px;
  width:calc(100% - 74px);
}
.topbar{
  height:76px;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.menu-btn{
  width:58px;
  height:48px;
  border:0;
  border-radius:5px;
  background:var(--green);
  color:#fff;
  font-size:24px;
}
.top-right{
  display:flex;
  gap:18px;
  align-items:center;
  color:#7a8496;
  font-size:19px;
}
.credit{
  color:var(--green);
  font-weight:700;
}
.badge{
  background:var(--orange);
  color:#fff;
  font-size:14px;
  border-radius:5px;
  padding:4px 8px;
}
.content{
  max-width:1000px;
  margin:30px auto;
  padding:0 22px;
}
.page-title{
  text-align:center;
  color:#8a8a8a;
  font-weight:300;
  font-size:38px;
  margin:55px 0 45px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:#fff;
  border:1px solid #eee;
  border-radius:7px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  padding:24px;
}
.card h2,.card h3{
  margin-top:0;
}
.card p{
  color:#7a8496;
  line-height:1.5;
}
.action,.small-btn{
  display:inline-block;
  border:0;
  background:var(--green);
  color:#fff;
  padding:12px 16px;
  border-radius:5px;
  margin-top:14px;
  font-size:16px;
}
.timeline{
  position:relative;
  padding-left:92px;
}
.timeline:before{
  content:"";
  position:absolute;
  left:38px;
  top:0;
  bottom:0;
  width:5px;
  background:#e9ecef;
}
.notice{
  position:relative;
  margin-bottom:44px;
}
.dot{
  position:absolute;
  left:-92px;
  top:6px;
  width:64px;
  height:64px;
  background:var(--orange);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 0 0 6px #f2f2f2;
}
.notice-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:7px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  padding:28px;
  position:relative;
}
.notice-card:before{
  content:"";
  position:absolute;
  left:-16px;
  top:28px;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-right:16px solid #fff;
}
.notice-card h2{
  font-size:32px;
  line-height:1.3;
  font-weight:400;
  margin:0 0 35px;
}
.date{
  color:var(--green);
  font-size:16px;
}
.small-btn{
  position:absolute;
  right:24px;
  bottom:24px;
}
@media(max-width:760px){
  .sidebar{
    width:58px;
  }
  .main{
    margin-left:58px;
    width:calc(100% - 58px);
  }
  .topbar{
    padding:0 10px;
  }
  .top-right{
    gap:9px;
    font-size:15px;
  }
  .content{
    padding:0 12px;
    margin:20px auto;
  }
  .page-title{
    font-size:34px;
    margin:55px 0 60px;
  }
  .grid{
    grid-template-columns:1fr;
  }
  .timeline{
    padding-left:72px;
  }
  .timeline:before{
    left:30px;
  }
  .dot{
    left:-72px;
    width:54px;
    height:54px;
  }
  .notice-card{
    padding:24px;
  }
  .notice-card h2{
    font-size:30px;
  }
}


.captcha,
.box,
.hcap{
  display:none !important;
}

.login-title{
  margin-top:18px;
}

/* === TOR OTT PREMIUM MENU STYLE === */

.app,
.sidebar,
.main,
.topbar,
.content{
  all:unset;
}

.tor-app{
  min-height:100vh;
  display:flex;
  background:#f6f7fb;
  color:#26334d;
  font-family:Arial,Helvetica,sans-serif;
}

.tor-sidebar{
  width:330px;
  min-height:100vh;
  background:linear-gradient(180deg,#071a3d 0%,#003f5f 100%);
  color:white;
  padding:28px 24px;
  box-shadow:8px 0 24px rgba(0,0,0,.16);
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  overflow-y:auto;
}

.tor-brand{
  margin-bottom:34px;
  padding-left:6px;
}

.tor-brand-main{
  font-size:38px;
  font-weight:900;
  letter-spacing:5px;
  color:#ff9900;
  line-height:1;
}

.tor-brand-sub{
  margin-top:9px;
  font-size:28px;
  font-weight:900;
  letter-spacing:9px;
  color:#ff9900;
}

.tor-nav{
  display:flex;
  flex-direction:column;
  gap:13px;
}

.tor-section{
  color:#ff9900;
  font-size:22px;
  font-weight:900;
  letter-spacing:5px;
  margin:22px 0 4px 6px;
}

.tor-nav-item{
  height:62px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 24px;
  color:white;
  text-decoration:none;
  font-size:21px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.tor-nav-item span{
  width:34px;
  text-align:center;
  font-size:25px;
}

.tor-nav-item.active{
  background:#ff9900;
  color:#182032;
}

.tor-nav-item.logout{
  margin-top:20px;
  background:rgba(255,255,255,.12);
}

.tor-main{
  margin-left:330px;
  width:calc(100% - 330px);
  min-height:100vh;
}

.tor-topbar{
  height:78px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 34px;
}

.tor-userbar{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:18px;
  color:#7b8494;
}

.tor-credit{
  color:#16b394;
  font-weight:900;
}

.tor-content{
  padding:22px 44px 60px;
}

.page-title{
  text-align:left !important;
  color:#26334d !important;
  font-weight:900 !important;
  font-size:44px !important;
  margin:20px 0 28px !important;
}

.card{
  border-radius:20px !important;
}

.action,
.small-btn{
  background:#ff9900 !important;
  color:#1b2438 !important;
  font-weight:900 !important;
  border-radius:12px !important;
}

@media(max-width:900px){
  .tor-app{
    display:block;
  }

  .tor-sidebar{
    position:relative;
    width:100%;
    min-height:auto;
    height:auto;
    padding:22px 18px;
    border-radius:0 0 26px 26px;
  }

  .tor-brand-main{
    font-size:30px;
  }

  .tor-brand-sub{
    font-size:20px;
  }

  .tor-nav{
    gap:10px;
  }

  .tor-nav-item{
    height:54px;
    font-size:18px;
    border-radius:14px;
  }

  .tor-section{
    font-size:18px;
  }

  .tor-main{
    margin-left:0;
    width:100%;
  }

  .tor-topbar{
    height:auto;
    padding:18px;
  }

  .tor-content{
    padding:18px;
  }

  .page-title{
    font-size:34px !important;
  }
}


/* === Réduction générale affichage TOR OTT === */

.tor-sidebar{
  width:250px !important;
  padding:20px 16px !important;
}

.tor-main{
  margin-left:250px !important;
  width:calc(100% - 250px) !important;
}

.tor-brand{
  margin-bottom:24px !important;
}

.tor-brand-main{
  font-size:28px !important;
  letter-spacing:4px !important;
}

.tor-brand-sub{
  font-size:20px !important;
  letter-spacing:7px !important;
}

.tor-nav{
  gap:8px !important;
}

.tor-section{
  font-size:16px !important;
  letter-spacing:4px !important;
  margin:16px 0 2px 6px !important;
}

.tor-nav-item{
  height:46px !important;
  border-radius:12px !important;
  font-size:16px !important;
  padding:0 16px !important;
  gap:12px !important;
}

.tor-nav-item span{
  width:24px !important;
  font-size:19px !important;
}

.tor-topbar{
  height:58px !important;
  padding:0 24px !important;
}

.tor-userbar{
  font-size:14px !important;
  gap:12px !important;
}

.tor-content{
  padding:18px 30px 40px !important;
}

.page-title{
  font-size:32px !important;
  letter-spacing:3px !important;
  margin:12px 0 20px !important;
}

.card{
  padding:18px !important;
  border-radius:14px !important;
}

.card h2{
  font-size:26px !important;
  letter-spacing:3px !important;
}

.card h3{
  font-size:21px !important;
  letter-spacing:2px !important;
}

.card p{
  font-size:15px !important;
  line-height:1.4 !important;
}

.grid{
  gap:14px !important;
}

.action,
.small-btn{
  padding:10px 14px !important;
  font-size:14px !important;
  border-radius:9px !important;
}

@media(max-width:900px){
  .tor-sidebar{
    width:100% !important;
    padding:16px 14px !important;
  }

  .tor-main{
    margin-left:0 !important;
    width:100% !important;
  }

  .tor-brand-main{
    font-size:24px !important;
  }

  .tor-brand-sub{
    font-size:16px !important;
  }

  .tor-nav-item{
    height:44px !important;
    font-size:15px !important;
  }

  .tor-content{
    padding:14px !important;
  }

  .page-title{
    font-size:28px !important;
  }
}


/* === THEME BLANC + VERT === */

:root{
  --wg-bg:#f6f8f8;
  --wg-white:#ffffff;
  --wg-green:#16b394;
  --wg-green-dark:#0f987e;
  --wg-green-soft:#e8faf6;
  --wg-text:#26334d;
  --wg-muted:#7a8496;
  --wg-border:#e4e8ed;
  --wg-card:#ffffff;
}

/* fond général */
body,
.tor-app,
.login-wrap{
  background:var(--wg-bg) !important;
  color:var(--wg-text) !important;
}

/* sidebar blanche */
.tor-sidebar{
  background:var(--wg-white) !important;
  color:var(--wg-text) !important;
  box-shadow:6px 0 20px rgba(30,45,70,.08) !important;
  border-right:1px solid var(--wg-border) !important;
}

/* logo menu */
.tor-brand-main{
  color:var(--wg-text) !important;
}

.tor-brand-sub{
  color:var(--wg-green) !important;
}

/* titres de sections M3U / MAG */
.tor-section{
  color:var(--wg-green) !important;
}

/* boutons menu */
.tor-nav-item{
  background:#f3f6f7 !important;
  color:var(--wg-text) !important;
  box-shadow:none !important;
  border:1px solid var(--wg-border) !important;
}

.tor-nav-item span{
  color:var(--wg-green) !important;
}

.tor-nav-item:hover{
  background:var(--wg-green-soft) !important;
}

/* menu actif vert */
.tor-nav-item.active{
  background:var(--wg-green) !important;
  color:#ffffff !important;
  border-color:var(--wg-green) !important;
  box-shadow:0 6px 14px rgba(22,179,148,.22) !important;
}

.tor-nav-item.active span{
  color:#ffffff !important;
}

/* déconnexion discret */
.tor-nav-item.logout{
  background:#f3f6f7 !important;
  color:var(--wg-text) !important;
  border:1px solid var(--wg-border) !important;
}

.tor-nav-item.logout span{
  color:var(--wg-green) !important;
}

/* topbar */
.tor-topbar{
  background:transparent !important;
}

.tor-userbar{
  color:var(--wg-muted) !important;
}

.tor-credit{
  color:var(--wg-green) !important;
}

/* contenu */
.tor-main{
  background:var(--wg-bg) !important;
}

.tor-content{
  background:var(--wg-bg) !important;
}

.page-title{
  color:var(--wg-text) !important;
}

/* cartes */
.card,
.table-wrap,
.notice-card{
  background:var(--wg-card) !important;
  border:1px solid var(--wg-border) !important;
  box-shadow:0 4px 18px rgba(30,45,70,.06) !important;
}

/* textes */
.card h2,
.card h3,
.notice-card h2{
  color:var(--wg-text) !important;
}

.card p,
th,
td,
.date{
  color:var(--wg-muted) !important;
}

/* formulaires */
.input{
  background:#ffffff !important;
  border:1px solid var(--wg-border) !important;
  color:var(--wg-text) !important;
}

.input:focus{
  outline:none !important;
  border-color:var(--wg-green) !important;
  box-shadow:0 0 0 3px rgba(22,179,148,.12) !important;
}

/* boutons principaux verts */
.btn,
.action,
.small-btn{
  background:var(--wg-green) !important;
  color:#ffffff !important;
  border:none !important;
  box-shadow:0 6px 14px rgba(22,179,148,.22) !important;
}

.btn:hover,
.action:hover,
.small-btn:hover{
  background:var(--wg-green-dark) !important;
}

/* tableau */
table{
  background:#ffffff !important;
}

th{
  color:var(--wg-text) !important;
  border-bottom:1px solid var(--wg-border) !important;
}

td{
  border-bottom:1px solid #eef1f4 !important;
}

/* badges */
.badge{
  background:var(--wg-green) !important;
  color:#ffffff !important;
}

/* messages */
.notice-ok{
  background:var(--wg-green-soft) !important;
  color:var(--wg-green-dark) !important;
  border:1px solid #bdebe1 !important;
}

.flash{
  background:#fdeaea !important;
  color:#a13434 !important;
  border:1px solid #f5c7c7 !important;
}

/* status */
.status-ok{
  color:var(--wg-green) !important;
}

.status-bad{
  color:#c53a3a !important;
}

/* timeline */
.timeline:before{
  background:#e6ecef !important;
}

.dot{
  background:var(--wg-green) !important;
  color:#ffffff !important;
}

/* login */
.login-title{
  color:var(--wg-text) !important;
}

.login-sub,
.footer-login{
  color:var(--wg-muted) !important;
}

.tor-main,
.tor-topbar,
.tor-content{
  color:var(--wg-text) !important;
}

@media(max-width:900px){
  .tor-sidebar{
    background:#ffffff !important;
  }
}


/* === FINITION BLANC + VERT : arrondis, cartes, tableau, espacements === */

/* contenu plus propre à droite */
.tor-content{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:26px 38px 60px !important;
}

.tor-topbar{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 38px !important;
}

/* titres moins espacés et plus lisibles */
.page-title{
  font-size:30px !important;
  letter-spacing:2px !important;
  margin:14px 0 22px !important;
  line-height:1.2 !important;
}

/* cartes plus fines */
.card{
  padding:22px !important;
  border-radius:22px !important;
  border:1px solid #e6ecef !important;
  box-shadow:0 8px 24px rgba(32,48,70,.045) !important;
}

.card h2{
  font-size:24px !important;
  letter-spacing:2px !important;
  margin:0 0 16px !important;
}

.card h3{
  font-size:19px !important;
  letter-spacing:1px !important;
  margin:0 0 10px !important;
}

.card p{
  font-size:14px !important;
  line-height:1.55 !important;
  margin:8px 0 !important;
}

/* grille plus propre */
.grid{
  gap:18px !important;
}

.grid .card{
  min-height:145px !important;
}

/* formulaire superadmin plus propre */
.form-grid{
  gap:16px !important;
}

.form-grid .input{
  height:48px !important;
  border-radius:14px !important;
  padding:0 16px !important;
  font-size:14px !important;
}

/* inputs globaux */
.input{
  height:48px !important;
  border-radius:14px !important;
  padding:0 16px !important;
  font-size:14px !important;
}

/* bouton créer le revendeur plus joli */
.btn.full,
button.btn.full{
  height:50px !important;
  border-radius:16px !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.3px !important;
  background:linear-gradient(180deg,#19caa6 0%,#14aa8d 100%) !important;
  box-shadow:0 10px 22px rgba(22,179,148,.24) !important;
}

.btn.full:hover,
button.btn.full:hover{
  background:linear-gradient(180deg,#18bd9d 0%,#10977e 100%) !important;
}

/* boutons secondaires */
.action,
.small-btn{
  padding:9px 14px !important;
  border-radius:13px !important;
  font-size:13px !important;
  font-weight:800 !important;
  background:linear-gradient(180deg,#19caa6 0%,#14aa8d 100%) !important;
  box-shadow:0 8px 18px rgba(22,179,148,.20) !important;
}

/* tableau plus propre */
.table-wrap{
  border-radius:22px !important;
  overflow:hidden !important;
  border:1px solid #e6ecef !important;
  box-shadow:0 8px 24px rgba(32,48,70,.045) !important;
}

table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  width:100% !important;
  background:#ffffff !important;
}

th{
  background:#f8fafb !important;
  color:#26334d !important;
  font-size:12px !important;
  text-transform:uppercase !important;
  letter-spacing:2px !important;
  padding:15px 18px !important;
  border-bottom:1px solid #e6ecef !important;
  white-space:nowrap !important;
}

td{
  padding:15px 18px !important;
  font-size:14px !important;
  color:#6f7b8d !important;
  border-bottom:1px solid #eef2f4 !important;
  vertical-align:middle !important;
}

tbody tr:hover{
  background:#f8fffd !important;
}

tbody tr:last-child td{
  border-bottom:none !important;
}

/* statut plus propre */
.status-ok,
.status-bad{
  display:inline-block !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  font-size:12px !important;
  font-weight:800 !important;
}

.status-ok{
  background:#e8faf6 !important;
  color:#0f987e !important;
}

.status-bad{
  background:#fdeaea !important;
  color:#b73535 !important;
}

/* sidebar un peu plus douce */
.tor-sidebar{
  border-radius:0 28px 28px 0 !important;
}

.tor-nav-item{
  border-radius:18px !important;
}

/* meilleur rendu mobile/tablette */
@media(max-width:900px){
  .tor-content{
    max-width:none !important;
    padding:18px 14px 42px !important;
  }

  .tor-topbar{
    max-width:none !important;
    padding:14px !important;
  }

  .card{
    padding:18px !important;
    border-radius:20px !important;
  }

  .page-title{
    font-size:26px !important;
    margin:10px 0 18px !important;
  }

  th,
  td{
    padding:12px 14px !important;
    font-size:13px !important;
  }

  .form-grid{
    grid-template-columns:1fr !important;
  }
}


/* === FIX LOGIN TOR OTT PROPRE === */

.login-wrap{
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:#f6f8f8 !important;
}

.login-card{
  width:100% !important;
  max-width:440px !important;
  text-align:center !important;
  margin:0 auto !important;
  padding:0 !important;
}

.tor-logo{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  margin:0 auto 28px !important;
  transform:none !important;
}

.play-logo{
  width:78px !important;
  height:62px !important;
  flex:0 0 auto !important;
}

.play-logo span{
  left:25px !important;
  top:17px !important;
  border-top:14px solid transparent !important;
  border-bottom:14px solid transparent !important;
  border-left:23px solid white !important;
}

.tor-text{
  text-align:left !important;
}

.tor-main{
  font-size:34px !important;
  letter-spacing:4px !important;
  line-height:1 !important;
  color:#f0b400 !important;
}

.tor-sub{
  margin-top:8px !important;
  font-size:15px !important;
  letter-spacing:4px !important;
  color:#777d89 !important;
}

.login-title{
  font-size:23px !important;
  font-weight:700 !important;
  margin:14px 0 10px !important;
  color:#26334d !important;
  letter-spacing:0 !important;
}

.login-sub{
  font-size:15px !important;
  margin:0 0 24px !important;
  color:#7a8496 !important;
}

.login-card .input{
  width:100% !important;
  height:54px !important;
  margin-bottom:16px !important;
  padding:0 18px !important;
  font-size:18px !important;
  border-radius:0 !important;
  background:#fff !important;
}

.login-card .btn{
  width:100% !important;
  height:54px !important;
  font-size:18px !important;
  border-radius:5px !important;
  background:#16b394 !important;
}

.footer-login{
  margin-top:28px !important;
  font-size:14px !important;
  color:#7a8496 !important;
}

.flash{
  text-align:left !important;
  margin-bottom:14px !important;
  font-size:15px !important;
}

@media(max-width:700px){
  .login-card{
    max-width:430px !important;
  }

  .tor-logo{
    gap:12px !important;
  }

  .play-logo{
    width:70px !important;
    height:56px !important;
  }

  .tor-main{
    font-size:30px !important;
    letter-spacing:3px !important;
  }

  .tor-sub{
    font-size:13px !important;
    letter-spacing:3px !important;
  }
}


/* === LOGIN FINAL PROPRE TOR OTT === */

body:has(.login-wrap){
  background:#f6f8f8 !important;
  overflow:hidden !important;
}

.login-wrap{
  min-height:100vh !important;
  height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 20px !important;
  background:#f6f8f8 !important;
}

.login-card{
  width:100% !important;
  max-width:460px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  position:relative !important;
  top:-20px !important;
}

.login-card .tor-logo{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  margin:0 auto 34px !important;
  padding:0 !important;
  position:static !important;
  transform:none !important;
}

.login-card .play-logo{
  width:95px !important;
  height:76px !important;
  position:relative !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

.login-card .play-logo span{
  position:absolute !important;
  left:31px !important;
  top:22px !important;
  width:0 !important;
  height:0 !important;
  border-top:17px solid transparent !important;
  border-bottom:17px solid transparent !important;
  border-left:28px solid white !important;
}

.login-card .tor-text{
  text-align:left !important;
  line-height:1 !important;
}

.login-card .tor-main{
  font-size:46px !important;
  font-weight:900 !important;
  letter-spacing:5px !important;
  color:#f0b400 !important;
  line-height:1 !important;
  margin:0 !important;
}

.login-card .tor-sub{
  margin-top:10px !important;
  font-size:18px !important;
  font-weight:700 !important;
  letter-spacing:5px !important;
  color:#737b86 !important;
  line-height:1 !important;
}

.login-title{
  font-size:25px !important;
  font-weight:800 !important;
  color:#26334d !important;
  margin:0 0 12px !important;
  padding:0 !important;
  letter-spacing:1px !important;
}

.login-sub{
  font-size:16px !important;
  color:#6f7788 !important;
  margin:0 0 26px !important;
  padding:0 !important;
}

.login-card .flash{
  width:100% !important;
  margin:0 0 14px !important;
  padding:13px 16px !important;
  border-radius:6px !important;
  font-size:15px !important;
  text-align:left !important;
}

.login-card .input{
  width:100% !important;
  height:58px !important;
  display:block !important;
  margin:0 0 16px !important;
  padding:0 18px !important;
  border:1px solid #dce2e8 !important;
  border-radius:0 !important;
  background:#ffffff !important;
  font-size:18px !important;
  color:#26334d !important;
  box-shadow:none !important;
}

.login-card .input:focus{
  outline:none !important;
  border-color:#16b394 !important;
  box-shadow:0 0 0 3px rgba(22,179,148,.12) !important;
}

.login-card .btn,
.login-card .btn.full{
  width:100% !important;
  height:58px !important;
  display:block !important;
  margin:8px 0 0 !important;
  border:0 !important;
  border-radius:5px !important;
  background:#16b394 !important;
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

.footer-login{
  margin-top:30px !important;
  font-size:15px !important;
  color:#7a8496 !important;
  text-align:center !important;
}

/* Empêche les anciens styles TOR sidebar de toucher le login */
.login-card .tor-brand,
.login-card .tor-sidebar,
.login-card .tor-nav,
.login-card .tor-main:not(.tor-text .tor-main){
  all:unset;
}

@media(max-width:700px){
  body:has(.login-wrap){
    overflow:auto !important;
  }

  .login-wrap{
    min-height:100vh !important;
    height:auto !important;
    padding:35px 18px !important;
  }

  .login-card{
    max-width:430px !important;
    top:0 !important;
  }

  .login-card .tor-logo{
    gap:14px !important;
    margin-bottom:28px !important;
  }

  .login-card .play-logo{
    width:78px !important;
    height:62px !important;
  }

  .login-card .play-logo span{
    left:25px !important;
    top:17px !important;
    border-top:14px solid transparent !important;
    border-bottom:14px solid transparent !important;
    border-left:23px solid white !important;
  }

  .login-card .tor-main{
    font-size:34px !important;
    letter-spacing:4px !important;
  }

  .login-card .tor-sub{
    font-size:14px !important;
    letter-spacing:4px !important;
  }

  .login-title{
    font-size:23px !important;
  }
}


/* === LOGIN ISOLÉ FINAL - NE DÉPEND PLUS DU MENU TOR === */

body.login-page{
  background:#f6f8f8 !important;
}

.login-wrap{
  min-height:100vh !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
  background:#f6f8f8 !important;
}

.login-card{
  width:100% !important;
  max-width:430px !important;
  margin:0 auto !important;
  padding:0 !important;
  text-align:center !important;
  position:static !important;
  transform:none !important;
}

.login-brand{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  margin:0 auto 34px !important;
  padding:0 !important;
}

.login-play{
  width:88px !important;
  height:70px !important;
  position:relative !important;
  flex:0 0 88px !important;
  background:linear-gradient(135deg,#16d7f3 0%,#e70096 52%,#ffcc24 100%) !important;
  clip-path:polygon(0 0,100% 50%,0 100%) !important;
  border-radius:14px !important;
}

.login-play span{
  position:absolute !important;
  left:29px !important;
  top:20px !important;
  width:0 !important;
  height:0 !important;
  border-top:15px solid transparent !important;
  border-bottom:15px solid transparent !important;
  border-left:25px solid #fff !important;
}

.login-brand-text{
  text-align:left !important;
  line-height:1 !important;
}

.login-brand-main{
  font-size:42px !important;
  font-weight:900 !important;
  letter-spacing:5px !important;
  color:#f0b400 !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
}

.login-brand-sub{
  margin-top:10px !important;
  font-size:17px !important;
  font-weight:800 !important;
  letter-spacing:4px !important;
  color:#737b86 !important;
  padding:0 !important;
  line-height:1 !important;
}

.login-title{
  font-size:24px !important;
  font-weight:800 !important;
  color:#26334d !important;
  margin:0 0 12px !important;
  padding:0 !important;
  letter-spacing:0 !important;
}

.login-sub{
  font-size:15px !important;
  color:#6f7788 !important;
  margin:0 0 26px !important;
  padding:0 !important;
  letter-spacing:0 !important;
}

.login-card .flash{
  width:100% !important;
  margin:0 0 14px !important;
  padding:13px 16px !important;
  border-radius:6px !important;
  font-size:15px !important;
  text-align:left !important;
}

.login-card input.input{
  width:100% !important;
  height:56px !important;
  display:block !important;
  margin:0 0 16px !important;
  padding:0 18px !important;
  border:1px solid #dce2e8 !important;
  border-radius:0 !important;
  background:#fff !important;
  font-size:18px !important;
  color:#26334d !important;
  box-shadow:none !important;
}

.login-card input.input:focus{
  outline:none !important;
  border-color:#16b394 !important;
  box-shadow:0 0 0 3px rgba(22,179,148,.12) !important;
}

.login-card button.btn,
.login-card button.full{
  width:100% !important;
  height:56px !important;
  display:block !important;
  margin:8px 0 0 !important;
  border:0 !important;
  border-radius:5px !important;
  background:#16b394 !important;
  color:#fff !important;
  font-size:18px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

.footer-login{
  margin-top:28px !important;
  font-size:14px !important;
  color:#7a8496 !important;
  text-align:center !important;
}

/* On neutralise les anciens logos uniquement dans la page login */
.login-card .tor-logo,
.login-card .play-logo,
.login-card .tor-text,
.login-card .tor-main,
.login-card .tor-sub{
  display:none !important;
}

@media(max-width:700px){
  .login-wrap{
    align-items:flex-start !important;
    padding-top:90px !important;
  }

  .login-card{
    max-width:420px !important;
  }

  .login-brand{
    gap:13px !important;
    margin-bottom:30px !important;
  }

  .login-play{
    width:72px !important;
    height:58px !important;
    flex-basis:72px !important;
  }

  .login-play span{
    left:24px !important;
    top:16px !important;
    border-top:13px solid transparent !important;
    border-bottom:13px solid transparent !important;
    border-left:22px solid #fff !important;
  }

  .login-brand-main{
    font-size:32px !important;
    letter-spacing:3px !important;
  }

  .login-brand-sub{
    font-size:13px !important;
    letter-spacing:3px !important;
  }

  .login-title{
    font-size:22px !important;
  }
}


/* === ROUE DENTÉE SUPER ADMIN XUI === */

.xui-gear{
  position:relative !important;
  display:inline-block !important;
}

.xui-gear summary{
  list-style:none !important;
  width:38px !important;
  height:34px !important;
  border-radius:8px !important;
  background:#16b394 !important;
  color:#ffffff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  font-size:18px !important;
  font-weight:900 !important;
  box-shadow:0 4px 12px rgba(22,179,148,.22) !important;
}

.xui-gear summary::-webkit-details-marker{
  display:none !important;
}

.xui-gear-menu{
  position:absolute !important;
  right:0 !important;
  top:42px !important;
  width:220px !important;
  background:#ffffff !important;
  border:1px solid #dfe5ec !important;
  border-radius:12px !important;
  box-shadow:0 14px 32px rgba(30,45,70,.20) !important;
  z-index:99999 !important;
  overflow:hidden !important;
}

.xui-gear-menu form{
  margin:0 !important;
  padding:0 !important;
}

.xui-gear-menu button{
  width:100% !important;
  border:0 !important;
  background:#ffffff !important;
  color:#26334d !important;
  text-align:left !important;
  padding:13px 15px !important;
  font-size:14px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}

.xui-gear-menu button:hover{
  background:#e8faf6 !important;
}

.xui-gear-menu .danger{
  color:#c53a3a !important;
}

.xui-gear-menu .danger:hover{
  background:#fdeaea !important;
}

.gear-credit-form{
  padding:10px !important;
  border-bottom:1px solid #eef1f4 !important;
}

.gear-credit-input{
  width:100% !important;
  height:34px !important;
  border:1px solid #dce2e8 !important;
  border-radius:7px !important;
  padding:0 9px !important;
  margin-bottom:8px !important;
  font-size:14px !important;
  box-sizing:border-box !important;
}

.table-wrap{
  overflow:visible !important;
}


/* Lien Éditer dans la roue dentée */
.xui-gear-menu .gear-link{
  width:100% !important;
  display:block !important;
  box-sizing:border-box !important;
  background:#ffffff !important;
  color:#26334d !important;
  text-align:left !important;
  padding:13px 15px !important;
  font-size:14px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  border-bottom:1px solid #eef1f4 !important;
}

.xui-gear-menu .gear-link:hover{
  background:#e8faf6 !important;
}


/* === Maintenance Super Admin === */

.maintenance-line{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:14px 0 !important;
  font-weight:800 !important;
  color:#26334d !important;
}

.maintenance-line input{
  width:22px !important;
  height:22px !important;
  accent-color:#16b394 !important;
}

.maintenance-textarea{
  width:100% !important;
  min-height:86px !important;
  border:1px solid #dce2e8 !important;
  border-radius:10px !important;
  padding:13px !important;
  font-size:15px !important;
  color:#26334d !important;
  box-sizing:border-box !important;
  margin:8px 0 14px !important;
  resize:vertical !important;
}


/* === MENU ACTIONS AVEC ICÔNES === */

.xui-gear-menu .gear-link,
.xui-gear-menu .gear-action-button,
.xui-gear-menu button{
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
}

.xui-gear-menu .menu-ico{
  width:26px !important;
  min-width:26px !important;
  height:26px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:17px !important;
}

.xui-gear-menu .gear-action-button{
  width:100% !important;
  border:0 !important;
  background:#ffffff !important;
  color:#26334d !important;
  text-align:left !important;
  padding:13px 15px !important;
  font-size:14px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  border-bottom:1px solid #eef1f4 !important;
}

.xui-gear-menu .gear-action-button:hover{
  background:#e8faf6 !important;
}

/* === POPUP AJOUT CRÉDITS === */

.tor-modal-backdrop{
  position:fixed !important;
  inset:0 !important;
  background:rgba(21,31,49,.48) !important;
  z-index:999999 !important;
  display:flex;
  align-items:center !important;
  justify-content:center !important;
  padding:18px !important;
}

.tor-modal-box{
  width:100% !important;
  max-width:420px !important;
  background:#ffffff !important;
  border-radius:22px !important;
  box-shadow:0 26px 70px rgba(15,25,45,.26) !important;
  padding:22px !important;
  box-sizing:border-box !important;
}

.tor-modal-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:18px !important;
}

.tor-modal-head h3{
  margin:0 !important;
  font-size:24px !important;
  font-weight:900 !important;
  color:#26334d !important;
  letter-spacing:0 !important;
}

.tor-modal-head p{
  margin:8px 0 0 !important;
  font-size:14px !important;
  font-weight:800 !important;
  color:#7a8496 !important;
}

.tor-modal-close{
  width:38px !important;
  height:38px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#eef2f5 !important;
  color:#26334d !important;
  font-size:26px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

.tor-modal-label{
  display:block !important;
  margin:14px 0 7px !important;
  font-size:14px !important;
  font-weight:900 !important;
  color:#26334d !important;
}

.tor-modal-input{
  width:100% !important;
  height:54px !important;
  border:1px solid #dce2e8 !important;
  border-radius:13px !important;
  background:#ffffff !important;
  color:#26334d !important;
  font-size:18px !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
}

.tor-modal-input.readonly{
  background:#f4f7f8 !important;
  color:#7a8496 !important;
}

.tor-modal-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:12px !important;
  margin-top:22px !important;
}

.tor-btn-cancel,
.tor-btn-save{
  border:0 !important;
  border-radius:13px !important;
  padding:13px 18px !important;
  font-size:15px !important;
  font-weight:900 !important;
  cursor:pointer !important;
}

.tor-btn-cancel{
  background:#eef2f5 !important;
  color:#26334d !important;
}

.tor-btn-save{
  background:#16b394 !important;
  color:#ffffff !important;
}

@media(max-width:700px){
  .tor-modal-box{
    max-width:92vw !important;
    padding:20px !important;
  }

  .tor-modal-actions{
    flex-direction:column !important;
  }

  .tor-btn-cancel,
  .tor-btn-save{
    width:100% !important;
  }
}


/* Icônes menu actions */
.xui-gear-menu .gear-link,
.xui-gear-menu button{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.xui-gear-menu .menu-ico{
  width:24px !important;
  min-width:24px !important;
  display:inline-flex !important;
  justify-content:center !important;
  font-size:16px !important;
}


.gear-normal-btn{
  width:100% !important;
  border:0 !important;
  background:#ffffff !important;
  color:#26334d !important;
  text-align:left !important;
  padding:13px 15px !important;
  font-size:14px !important;
  font-weight:800 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  border-bottom:1px solid #eef1f4 !important;
}

.gear-normal-btn:hover{
  background:#e8faf6 !important;
}


.status-muted{
  display:inline-block !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  background:#eef2f5 !important;
  color:#7a8496 !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:1.2px !important;
  white-space:nowrap !important;
}


/* Icônes menu roue dentée */
.xui-gear-menu .menu-ico{
  width:24px !important;
  min-width:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
}

.xui-gear-menu button,
.xui-gear-menu .gear-link,
.xui-gear-menu a{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}


/* === FIX MENU ROUE DENTÉE MOBILE / TEXTE VISIBLE === */
.tor-gear-menu .tor-menu-box,
.tor-menu-box {
  min-width: 230px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.18) !important;
}

.tor-gear-menu .tor-menu-box button,
.tor-menu-box button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  text-align: left !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  visibility: visible !important;
  white-space: nowrap !important;
}

.tor-gear-menu .tor-menu-box button:hover,
.tor-menu-box button:hover {
  background: #e9f8f1 !important;
  color: #047857 !important;
}

.tor-inline-form {
  margin: 0 !important;
  padding: 0 !important;
}


/* === FORCE DASHBOARD LIVE TABLE COMPACT === */
.tor-live-home-card,
.card.tor-live-home-card {
    max-width: 980px !important;
    width: 980px !important;
    margin: 22px 0 0 0 !important;
    padding: 18px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.96) !important;
    box-shadow: 0 8px 24px rgba(15,23,42,0.06) !important;
    overflow-x: auto !important;
}

.tor-live-home-card h3 {
    margin: 0 0 8px 0 !important;
    font-size: 18px !important;
    letter-spacing: normal !important;
}

.tor-live-home-card p {
    margin: 0 0 12px 0 !important;
    font-size: 12px !important;
    letter-spacing: .04em !important;
}

.tor-live-home-table {
    width: 100% !important;
    max-width: 940px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1px solid #d7dde5 !important;
    background: #fff !important;
}

.tor-live-home-table th,
.tor-live-home-table td {
    border-right: 1px solid #d7dde5 !important;
    border-bottom: 1px solid #d7dde5 !important;
    padding: 8px 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    letter-spacing: .02em !important;
    line-height: 1.15 !important;
}

.tor-live-home-table th {
    background: #f3f6f9 !important;
    color: #1f2937 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
}

.tor-live-home-table td {
    color: #111827 !important;
    font-weight: 700 !important;
}

.tor-live-home-table th:last-child,
.tor-live-home-table td:last-child {
    border-right: 0 !important;
}

.tor-live-home-table tr:last-child td {
    border-bottom: 0 !important;
}

.tor-live-home-table td.channel-cell,
.tor-live-home-table .channel-cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
}

.tor-live-home-table td.country-flag {
    font-size: 16px !important;
    letter-spacing: normal !important;
}

/* Largeurs colonnes Dashboard */
.tor-live-home-table th:nth-child(1),
.tor-live-home-table td:nth-child(1) { width: 55px !important; }

.tor-live-home-table th:nth-child(2),
.tor-live-home-table td:nth-child(2) { width: 90px !important; }

.tor-live-home-table th:nth-child(3),
.tor-live-home-table td:nth-child(3) { width: 115px !important; }

.tor-live-home-table th:nth-child(4),
.tor-live-home-table td:nth-child(4) { width: 115px !important; }

.tor-live-home-table th:nth-child(5),
.tor-live-home-table td:nth-child(5) { width: 95px !important; }

.tor-live-home-table th:nth-child(6),
.tor-live-home-table td:nth-child(6) { width: 120px !important; }

.tor-live-home-table th:nth-child(7),
.tor-live-home-table td:nth-child(7) { width: 115px !important; }

.tor-live-home-table th:nth-child(8),
.tor-live-home-table td:nth-child(8) { width: 60px !important; }

.tor-live-home-table th:nth-child(9),
.tor-live-home-table td:nth-child(9) { width: 85px !important; }


/* === DASHBOARD LIVE TABLE CADRÉ PROPRE === */

.tor-live-home-card,
.card.tor-live-home-card {
    max-width: 860px !important;
    width: 860px !important;
    margin: 20px 0 0 0 !important;
    padding: 16px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 22px rgba(15,23,42,0.06) !important;
    overflow-x: auto !important;
}

.tor-live-home-card h3 {
    margin: 0 0 8px 0 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.tor-live-home-card p {
    margin: 0 0 12px 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
}

.tor-live-home-table {
    width: 100% !important;
    max-width: 820px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1px solid #cfd7e2 !important;
    background: #ffffff !important;
}

.tor-live-home-table thead tr {
    background: #f4f6f9 !important;
}

.tor-live-home-table th,
.tor-live-home-table td {
    border: 1px solid #cfd7e2 !important;
    padding: 7px 5px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
}

.tor-live-home-table th {
    color: #111827 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 10px !important;
}

.tor-live-home-table td {
    color: #111827 !important;
    font-weight: 700 !important;
}

/* Largeurs précises des colonnes */
.tor-live-home-table th:nth-child(1),
.tor-live-home-table td:nth-child(1) {
    width: 48px !important;
}

.tor-live-home-table th:nth-child(2),
.tor-live-home-table td:nth-child(2) {
    width: 75px !important;
}

.tor-live-home-table th:nth-child(3),
.tor-live-home-table td:nth-child(3) {
    width: 95px !important;
}

.tor-live-home-table th:nth-child(4),
.tor-live-home-table td:nth-child(4) {
    width: 95px !important;
}

.tor-live-home-table th:nth-child(5),
.tor-live-home-table td:nth-child(5) {
    width: 85px !important;
}

.tor-live-home-table th:nth-child(6),
.tor-live-home-table td:nth-child(6) {
    width: 95px !important;
}

.tor-live-home-table th:nth-child(7),
.tor-live-home-table td:nth-child(7) {
    width: 105px !important;
}

.tor-live-home-table th:nth-child(8),
.tor-live-home-table td:nth-child(8) {
    width: 45px !important;
}

.tor-live-home-table th:nth-child(9),
.tor-live-home-table td:nth-child(9) {
    width: 75px !important;
}

/* Chaîne et pays */
.tor-live-home-table .channel-cell {
    max-width: 95px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.tor-live-home-table .country-flag {
    font-size: 16px !important;
    letter-spacing: normal !important;
}

/* Mobile : garde le tableau propre avec scroll horizontal */
@media (max-width: 900px) {
    .tor-live-home-card,
    .card.tor-live-home-card {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        margin-left: 0 !important;
        overflow-x: auto !important;
    }

    .tor-live-home-table {
        min-width: 820px !important;
    }
}


/* =========================================================
   TOR OTT - MOBILE PREMIUM GLOBAL
   Ajout mobile uniquement, ne touche pas la logique PHP/XUI
   ========================================================= */

@media (max-width: 900px) {

    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #f4f6f8 !important;
    }

    body {
        font-size: 14px !important;
    }

    .app,
    .layout,
    .main,
    .content,
    .page,
    main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* Sidebar / menu */
    .sidebar {
        width: 245px !important;
        max-width: 82vw !important;
        z-index: 9999 !important;
    }

    .sidebar a,
    .sidebar button,
    .menu a,
    .menu button {
        min-height: 44px !important;
        padding: 11px 14px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
    }

    /* Titres */
    h1,
    .page-title {
        font-size: 26px !important;
        line-height: 1.15 !important;
        letter-spacing: 0.04em !important;
        margin: 14px 0 14px !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    h3 {
        font-size: 17px !important;
        line-height: 1.2 !important;
    }

    /* Cartes */
    .card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 !important;
        padding: 14px !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        box-shadow: 0 8px 22px rgba(15,23,42,0.06) !important;
    }

    .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    /* Boutons */
    .action,
    .btn,
    button,
    input[type="submit"],
    .button {
        min-height: 42px !important;
        padding: 10px 14px !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    /* Formulaires */
    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 42px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    /* Tableaux généraux */
    .table-wrap,
    .table-scroll,
    .responsive-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
    }

    table {
        border-collapse: collapse !important;
    }

    table th,
    table td {
        padding: 9px 8px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
        border: 1px solid #dfe5ec !important;
    }

    table th {
        font-size: 10px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.04em !important;
        background: #f8fafc !important;
    }

    /* Gear / roue dentée */
    .gear-menu,
    .dropdown-menu,
    .actions-menu {
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
        border-radius: 14px !important;
    }

    .gear-menu a,
    .dropdown-menu a,
    .actions-menu a,
    .gear-menu button,
    .dropdown-menu button,
    .actions-menu button {
        min-height: 42px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    /* Dashboard live dans p=home */
    .tor-live-home-card,
    .card.tor-live-home-card,
    #tor-dashboard-live-box {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 12px 0 !important;
        padding: 14px !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }

    .tor-live-home-card .table-wrap,
    #tor-dashboard-live-box .table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tor-live-home-table {
        width: 860px !important;
        min-width: 860px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border: 1px solid #d7dde5 !important;
    }

    .tor-live-home-table th,
    .tor-live-home-table td {
        border: 1px solid #d7dde5 !important;
        padding: 8px 6px !important;
        text-align: center !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .tor-live-home-table th {
        font-size: 10px !important;
        font-weight: 900 !important;
        background: #f4f6f8 !important;
    }

    .tor-live-home-table .channel-cell {
        white-space: normal !important;
        line-height: 1.15 !important;
        max-height: 34px !important;
    }

    .tor-live-home-table .country-flag {
        font-size: 16px !important;
        letter-spacing: normal !important;
    }

    /* Colonnes dashboard live mobile */
    .tor-live-home-table th:nth-child(1),
    .tor-live-home-table td:nth-child(1) { width: 55px !important; }

    .tor-live-home-table th:nth-child(2),
    .tor-live-home-table td:nth-child(2) { width: 80px !important; }

    .tor-live-home-table th:nth-child(3),
    .tor-live-home-table td:nth-child(3) { width: 105px !important; }

    .tor-live-home-table th:nth-child(4),
    .tor-live-home-table td:nth-child(4) { width: 105px !important; }

    .tor-live-home-table th:nth-child(5),
    .tor-live-home-table td:nth-child(5) { width: 90px !important; }

    .tor-live-home-table th:nth-child(6),
    .tor-live-home-table td:nth-child(6) { width: 120px !important; }

    .tor-live-home-table th:nth-child(7),
    .tor-live-home-table td:nth-child(7) { width: 110px !important; }

    .tor-live-home-table th:nth-child(8),
    .tor-live-home-table td:nth-child(8) { width: 50px !important; }

    .tor-live-home-table th:nth-child(9),
    .tor-live-home-table td:nth-child(9) { width: 85px !important; }

}

/* Très petit écran */
@media (max-width: 430px) {
    .content,
    .page,
    main {
        padding: 10px !important;
    }

    .card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    h1,
    .page-title {
        font-size: 23px !important;
    }

    .action,
    .btn,
    button {
        font-size: 13px !important;
    }
}


/* =========================================================
   FIX MOBILE FINAL - TOR OTT
   Corrige le décalage gauche + tableau trop large téléphone
   ========================================================= */

@media (max-width: 900px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: #f4f6f8 !important;
    }

    body {
        position: relative !important;
    }

    .layout,
    .app,
    .main,
    .content,
    .page,
    main {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        transform: none !important;
        left: 0 !important;
    }

    .sidebar {
        max-width: 78vw !important;
    }

    .content {
        margin-left: 0 !important;
    }

    .topbar,
    .header,
    .page-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .page-title,
    h1 {
        font-size: 24px !important;
        letter-spacing: 0.08em !important;
        margin: 16px 0 12px 0 !important;
        padding: 0 !important;
        white-space: normal !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .table-wrap,
    .table-scroll,
    .responsive-table,
    .card .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 14px !important;
        box-sizing: border-box !important;
    }

    table {
        max-width: none !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    table th,
    table td {
        border-right: 1px solid #e1e7ef !important;
        border-bottom: 1px solid #e1e7ef !important;
        padding: 10px 10px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    table th:first-child,
    table td:first-child {
        border-left: 1px solid #e1e7ef !important;
    }

    table thead tr:first-child th {
        border-top: 1px solid #e1e7ef !important;
    }

    table th {
        background: #f8fafc !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
    }

    /* Manage Lines / Manage MAC / Personal : tableau scrollable propre */
    body:has(.table-wrap) table,
    body:has(.responsive-table) table {
        min-width: 980px !important;
    }

    /* Dashboard live home : pas plus large que nécessaire */
    .tor-live-home-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    .tor-live-home-table {
        width: 860px !important;
        min-width: 860px !important;
        table-layout: fixed !important;
    }

    .tor-live-home-table th,
    .tor-live-home-table td {
        font-size: 11px !important;
        padding: 8px 6px !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .tor-live-home-table td:nth-child(6) {
        white-space: normal !important;
        line-height: 1.15 !important;
    }

    /* Boutons haut de page */
    .btn,
    .action,
    button,
    input[type="submit"],
    a.action {
        min-height: 42px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
    }

    .actions,
    .page-actions,
    .top-actions {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        padding-bottom: 4px !important;
    }
}

@media (max-width: 430px) {
    .main,
    .content,
    .page,
    main {
        padding: 8px !important;
    }

    .card {
        padding: 10px !important;
    }

    .page-title,
    h1 {
        font-size: 22px !important;
    }

    table th,
    table td {
        font-size: 12px !important;
        padding: 9px 8px !important;
    }
}


/* =========================================================
   FIX MOBILE REEL - pages Manage / MAG / Personal
   ========================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        background: #f4f6f8 !important;
    }

    * {
        box-sizing: border-box !important;
    }

    body {
        font-size: 14px !important;
    }

    .sidebar {
        position: fixed !important;
        left: -280px !important;
        top: 0 !important;
        width: 260px !important;
        max-width: 80vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
    }

    .main,
    .content,
    .page,
    .wrap,
    .container,
    main {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 12px !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        overflow-x: hidden !important;
    }

    .topbar,
    .page-actions,
    .actions,
    .header-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 4px 0 10px 0 !important;
    }

    .btn,
    .action,
    button,
    input[type="submit"],
    a.action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        white-space: nowrap !important;
    }

    h1,
    .page-title {
        font-size: 24px !important;
        line-height: 1.15 !important;
        letter-spacing: 0.08em !important;
        margin: 14px 0 12px 0 !important;
        padding: 0 !important;
        white-space: normal !important;
    }

    h2 {
        font-size: 19px !important;
    }

    h3 {
        font-size: 17px !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 10px 0 !important;
        padding: 12px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .table-wrap,
    .table-scroll,
    .responsive-table,
    .card > div:has(table) {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 16px !important;
        background: #fff !important;
    }

    table {
        width: max-content !important;
        min-width: 920px !important;
        max-width: none !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #fff !important;
    }

    table th,
    table td {
        border-right: 1px solid #e1e7ef !important;
        border-bottom: 1px solid #e1e7ef !important;
        padding: 10px 8px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    table th:first-child,
    table td:first-child {
        border-left: 1px solid #e1e7ef !important;
    }

    table thead tr:first-child th {
        border-top: 1px solid #e1e7ef !important;
    }

    table th {
        background: #f8fafc !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
    }

    /* Largeurs propres pour Manage Lines / MAG / Personal */
    table th:nth-child(1),
    table td:nth-child(1) { width: 70px !important; }

    table th:nth-child(2),
    table td:nth-child(2) { width: 90px !important; }

    table th:nth-child(3),
    table td:nth-child(3) { width: 120px !important; }

    table th:nth-child(4),
    table td:nth-child(4) { width: 120px !important; }

    table th:nth-child(5),
    table td:nth-child(5) { width: 95px !important; }

    table th:nth-child(6),
    table td:nth-child(6) { width: 120px !important; }

    table th:nth-child(7),
    table td:nth-child(7) { width: 100px !important; }

    table th:nth-child(8),
    table td:nth-child(8) { width: 80px !important; }

    table th:nth-child(9),
    table td:nth-child(9) { width: 100px !important; }

    table th:nth-child(10),
    table td:nth-child(10) { width: 95px !important; }

    table th:nth-child(11),
    table td:nth-child(11) { width: 85px !important; }

    .gear,
    .gear-btn,
    .btn-gear {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
    }

    .gear-menu,
    .dropdown-menu,
    .actions-menu {
        position: fixed !important;
        right: 10px !important;
        left: auto !important;
        max-width: calc(100vw - 20px) !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
    }
}

@media screen and (max-width: 430px) {
    .main,
    .content,
    .page,
    .wrap,
    .container,
    main {
        padding: 8px !important;
    }

    .card {
        padding: 10px !important;
    }

    table {
        min-width: 900px !important;
    }

    h1,
    .page-title {
        font-size: 22px !important;
    }
}


/* =========================================================
   TOR OTT - MOBILE FINAL DIRECT DANS STYLE.CSS
   ========================================================= */
@media screen and (max-width: 900px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #f4f6f8 !important;
  }

  body {
    padding-top: 62px !important;
  }

  * {
    box-sizing: border-box !important;
  }

  /* Bouton menu */
  #tor-mobile-menu-btn {
    display: flex !important;
    position: fixed !important;
    top: 10px !important;
    left: 12px !important;
    z-index: 999999 !important;
    width: 46px !important;
    height: 46px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #111827 !important;
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.25) !important;
  }

  #tor-mobile-menu-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,.42) !important;
    z-index: 999997 !important;
  }

  body.tor-menu-open #tor-mobile-menu-overlay {
    display: block !important;
  }

  /* Menu replié par défaut */
  aside.tor-sidebar,
  .tor-sidebar,
  aside.sidebar,
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 286px !important;
    max-width: 84vw !important;
    height: 100vh !important;
    z-index: 999998 !important;
    background: #ffffff !important;
    transform: translateX(-120%) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 72px 14px 22px 14px !important;
    border-radius: 0 22px 22px 0 !important;
    box-shadow: 14px 0 34px rgba(15,23,42,.22) !important;
  }

  body.tor-menu-open aside.tor-sidebar,
  body.tor-menu-open .tor-sidebar,
  body.tor-menu-open aside.sidebar,
  body.tor-menu-open .sidebar {
    transform: translateX(0) !important;
  }

  /* La page doit prendre toute la largeur */
  .tor-main,
  .main,
  main,
  .content,
  .page,
  .container,
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow-x: hidden !important;
  }

  h1,
  .page-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin: 10px 0 16px 0 !important;
    letter-spacing: .08em !important;
  }

  .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    overflow-x: auto !important;
  }

  .table-wrap,
  .table-scroll,
  .responsive-table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table {
    min-width: 760px !important;
  }

  table th,
  table td {
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}

/* === FIX ROUE DENTEE SUPERADMIN / MOBILE === */
#tor-floating-gear-menu {
    position: fixed !important;
    z-index: 9999999 !important;
    width: 300px !important;
    max-width: calc(100vw - 28px) !important;
    max-height: 72vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28) !important;
    padding: 14px !important;
}

#tor-floating-gear-menu a,
#tor-floating-gear-menu button,
#tor-floating-gear-menu form {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    white-space: normal !important;
}

#tor-floating-gear-menu a:hover,
#tor-floating-gear-menu button:hover {
    background: #f3f4f6 !important;
}

#tor-floating-gear-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999998 !important;
    background: rgba(15, 23, 42, .08) !important;
}

@media screen and (max-width: 900px) {
    .xui-gear-menu {
        display: none !important;
    }

    details.xui-gear[open] .xui-gear-menu {
        display: none !important;
    }

    .xui-gear,
    .xui-gear summary {
        overflow: visible !important;
    }
}

/* === FIX FINAL ROUE DENTEE MOBILE - GARDE LA ROUE === */
@media screen and (max-width: 900px) {

    details.xui-gear {
        position: static !important;
        overflow: visible !important;
        z-index: 999999 !important;
    }

    details.xui-gear summary {
        list-style: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 999999 !important;
    }

    details.xui-gear summary::-webkit-details-marker {
        display: none !important;
    }

    details.xui-gear[open] > .xui-gear-menu {
        display: block !important;
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        width: 310px !important;
        max-width: calc(100vw - 34px) !important;
        max-height: 72vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;

        z-index: 2147483647 !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 24px !important;
        box-shadow: 0 28px 80px rgba(15, 23, 42, .32) !important;
        padding: 16px !important;
    }

    details.xui-gear[open] > .xui-gear-menu a,
    details.xui-gear[open] > .xui-gear-menu button {
        display: block !important;
        width: 100% !important;
        padding: 15px 16px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #111827 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-decoration: none !important;
        border-radius: 14px !important;
        white-space: normal !important;
    }

    details.xui-gear[open] > .xui-gear-menu a:hover,
    details.xui-gear[open] > .xui-gear-menu button:hover {
        background: #f3f4f6 !important;
    }

    .card,
    .table-wrap,
    .table-scroll,
    .responsive-table,
    table,
    tbody,
    tr,
    td {
        overflow: visible !important;
    }
}

/* === FIX FINAL SCROLL TABLE MOBILE + ROUE DENTEE === */
@media screen and (max-width: 900px) {

    /* Le tableau doit pouvoir bouger gauche/droite */
    .table-wrap,
    .table-scroll,
    .responsive-table {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    table {
        min-width: 900px !important;
        width: max-content !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    th,
    td {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Ne pas laisser le menu normal se cacher dans le tableau */
    details.xui-gear[open] > .xui-gear-menu {
        display: block !important;
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 310px !important;
        max-width: calc(100vw - 34px) !important;
        max-height: 72vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 2147483647 !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 24px !important;
        box-shadow: 0 28px 80px rgba(15, 23, 42, .32) !important;
        padding: 16px !important;
    }

    details.xui-gear {
        position: relative !important;
        overflow: visible !important;
    }

    details.xui-gear summary {
        list-style: none !important;
        cursor: pointer !important;
    }

    details.xui-gear summary::-webkit-details-marker {
        display: none !important;
    }

    details.xui-gear[open] > .xui-gear-menu a,
    details.xui-gear[open] > .xui-gear-menu button {
        display: block !important;
        width: 100% !important;
        padding: 15px 16px !important;
        background: transparent !important;
        border: 0 !important;
        color: #111827 !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        text-align: left !important;
        text-decoration: none !important;
        border-radius: 14px !important;
        white-space: normal !important;
    }
}

/* === FIX ROUE DENTEE AU-DESSUS DU TABLEAU === */
@media screen and (max-width: 900px) {

    /* Quand une roue est ouverte, toute la carte passe au-dessus */
    .card:has(details.xui-gear[open]),
    .table-wrap:has(details.xui-gear[open]),
    .table-scroll:has(details.xui-gear[open]),
    .responsive-table:has(details.xui-gear[open]) {
        position: relative !important;
        z-index: 999999 !important;
        overflow: visible !important;
    }

    table:has(details.xui-gear[open]),
    tbody:has(details.xui-gear[open]),
    tr:has(details.xui-gear[open]),
    td:has(details.xui-gear[open]) {
        position: relative !important;
        z-index: 999999 !important;
        overflow: visible !important;
    }

    details.xui-gear[open] {
        position: relative !important;
        z-index: 2147483000 !important;
        overflow: visible !important;
    }

    details.xui-gear[open] > summary {
        position: relative !important;
        z-index: 2147483001 !important;
    }

    details.xui-gear[open] > .xui-gear-menu {
        display: block !important;
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;

        width: 310px !important;
        max-width: calc(100vw - 34px) !important;
        max-height: 72vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;

        z-index: 2147483647 !important;
        background: #ffffff !important;
        opacity: 1 !important;

        border: 1px solid #e5e7eb !important;
        border-radius: 24px !important;
        box-shadow: 0 30px 90px rgba(15, 23, 42, .38) !important;
        padding: 18px !important;
    }

    details.xui-gear[open] > .xui-gear-menu a,
    details.xui-gear[open] > .xui-gear-menu button {
        display: block !important;
        width: 100% !important;
        padding: 15px 16px !important;
        margin: 0 !important;
        background: #ffffff !important;
        color: #111827 !important;
        border: 0 !important;
        text-align: left !important;
        text-decoration: none !important;
        font-size: 18px !important;
        font-weight: 900 !important;
        border-radius: 14px !important;
        white-space: normal !important;
    }
}

/* === FIX ROUE DENTEE : MENU A COTE DU BOUTON + TABLE SCROLL === */
@media screen and (max-width: 900px) {

    .table-wrap,
    .table-scroll,
    .responsive-table {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    table {
        min-width: 900px !important;
    }

    details.xui-gear {
        position: relative !important;
        z-index: 999999 !important;
    }

    details.xui-gear summary {
        list-style: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 999999 !important;
    }

    details.xui-gear summary::-webkit-details-marker {
        display: none !important;
    }

    details.xui-gear[open] > .xui-gear-menu {
        display: block !important;
        position: fixed !important;

        left: var(--tor-gear-left, 14px) !important;
        top: var(--tor-gear-top, 90px) !important;
        transform: none !important;

        width: 280px !important;
        max-width: calc(100vw - 28px) !important;
        max-height: 68vh !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;

        z-index: 2147483647 !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 22px !important;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .34) !important;
        padding: 14px !important;
    }

    details.xui-gear[open] > .xui-gear-menu a,
    details.xui-gear[open] > .xui-gear-menu button {
        display: block !important;
        width: 100% !important;
        padding: 14px 15px !important;
        margin: 0 !important;
        border: 0 !important;
        background: #ffffff !important;
        color: #111827 !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-decoration: none !important;
        border-radius: 14px !important;
        white-space: normal !important;
    }

    details.xui-gear[open] > .xui-gear-menu a:hover,
    details.xui-gear[open] > .xui-gear-menu button:hover {
        background: #f3f4f6 !important;
    }
}

/* === ROUE DENTEE FLOTTANTE PROPRE V2 === */
@media screen and (max-width: 900px) {
    .table-wrap,
    .table-scroll,
    .responsive-table {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
    }

    table {
        min-width: 900px !important;
    }

    details.xui-gear > .xui-gear-menu {
        display: none !important;
    }

    details.xui-gear summary {
        list-style: none !important;
        cursor: pointer !important;
    }

    details.xui-gear summary::-webkit-details-marker {
        display: none !important;
    }
}

#tor-clean-gear-menu {
    position: fixed !important;
    z-index: 2147483647 !important;
    width: 285px !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 65vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 85px rgba(15,23,42,.35) !important;
    padding: 14px !important;
}

#tor-clean-gear-menu a,
#tor-clean-gear-menu button {
    display: block !important;
    width: 100% !important;
    padding: 14px 15px !important;
    margin: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: none !important;
    border-radius: 14px !important;
    white-space: normal !important;
}

#tor-clean-gear-menu a:hover,
#tor-clean-gear-menu button:hover {
    background: #f3f4f6 !important;
}

/* === DASHBOARD SIDEBAR NON CLIQUABLE === */
.tor-dashboard-disabled {
    pointer-events: none !important;
    cursor: default !important;
}

/* === DASHBOARD VISIBLE MAIS NON CLIQUABLE === */
.tor-dashboard-no-click {
    pointer-events: none !important;
    cursor: default !important;
    user-select: none !important;
}