/* Ouioweb — WHMCS Twenty-One skin (loaded last)
   Inspired by your FOSSBilling ouitemplate.
*/


/* Base */
body{
  background:var(--ow-bg) !important;
  color:var(--ow-ink) !important;
}
a{ color:var(--ow-primary); }
a:hover{ color:var(--ow-primary-600); }

/* Header: cleaner + more premium */
#header .navbar,
#header .main-navbar-wrapper{
  background:#fff !important;
}
#header .navbar{
  border-bottom:1px solid rgba(15,23,42,.08);
}
#header .navbar .logo-img{
  height:38px;
}
.master-breadcrumb{
  background:transparent !important;
}

/* Cards */
.card,
.sidebar .panel,
.sidebar .card{
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:var(--ow-radius) !important;
  box-shadow:var(--ow-shadow);
}
.card-header{
  background:#fff !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
  border-top-left-radius:var(--ow-radius) !important;
  border-top-right-radius:var(--ow-radius) !important;
}
.card-footer{
  background:#fff !important;
  border-top:1px solid rgba(15,23,42,.06) !important;
  border-bottom-left-radius:var(--ow-radius) !important;
  border-bottom-right-radius:var(--ow-radius) !important;
}

/* Buttons: Ouioweb primary */
.btn-primary{
  background:var(--ow-primary) !important;
  border-color:var(--ow-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus{
  background:var(--ow-primary-600) !important;
  border-color:var(--ow-primary-600) !important;
}
.btn-outline-primary{
  color:var(--ow-primary) !important;
  border-color:var(--ow-primary) !important;
}
.btn-outline-primary:hover{
  background:var(--ow-primary) !important;
  border-color:var(--ow-primary) !important;
}

/* Inputs */
.form-control{
  border-radius:14px;
  border-color:rgba(15,23,42,.12);
}
.form-control:focus{
  border-color:rgba(13,71,255,.55);
  box-shadow:0 0 0 .2rem rgba(13,71,255,.18);
}

/* Homepage domain search (includes/domain-search.tpl) */
.home-domain-search{
  background:transparent !important;
}
.ow-domain-hero{
  background:linear-gradient(135deg, rgba(13,71,255,.08), rgba(255,255,255,0));
  border-bottom:1px solid rgba(15,23,42,.06);
}
.ow-domain-card{
  background:var(--ow-card);
  border:1px solid rgba(15,23,42,.08);
  border-radius:22px;
  box-shadow:var(--ow-shadow);
}
.ow-domain-title{
  font-weight:800;
  letter-spacing:-.02em;
}
.ow-domain-sub{
  color:var(--ow-muted);
}
.ow-domain-input .form-control{
  height:54px;
  font-size:1.05rem;
}
.ow-domain-actions .btn{
  height:54px;
  padding:0 18px;
  border-radius:14px;
  font-weight:700;
}
.ow-tlds{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:18px;
  padding:0;
  list-style:none;
}
.ow-tlds li{
  min-width:150px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 10px 22px rgba(2,8,23,.06);
  text-align:center;
}
.ow-tlds img{
  height:26px;
  margin-bottom:6px;
}
.ow-tlds .price{
  font-weight:800;
  color:var(--ow-ink);
}
.ow-view-pricing{
  text-decoration:none !important;
  font-weight:700;
}

/* Footer: simpler */
#footer.footer{
  background:transparent !important;
  border-top:1px solid rgba(15,23,42,.06);
}
#footer .nav .nav-link{ color:rgba(15,23,42,.75) !important; }
#footer .copyright{ color:rgba(15,23,42,.55) !important; }

/* Small helpers */
.badge-info{ background:var(--ow-primary) !important; }

/* =========================================================
   Ouioweb client-area sidebar layout (like your screenshot)
   ========================================================= */

body.oui-layout{
  background:#eaeefb !important;
}

/* Hide the stock Twenty-One header/breadcrumb when logged in.
   We keep it in DOM (WHMCS hooks rely on it sometimes), but visually we use our own topbar. */
body.oui-layout #header,
body.oui-layout .master-breadcrumb{
  display:none !important;
}

.oui-sidebar{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:260px;
  background:linear-gradient(180deg, #0b2f66 0%, #0a2450 100%);
  color:#fff;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  z-index:1040;
}

.oui-sidebar__brand{
  padding:6px 8px 18px;
}

.oui-sidebar__logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none !important;
  color:#fff !important;
}

.oui-sidebar__logo img{
  max-width:100%;
  height:44px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.oui-sidebar__nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
}

.oui-sidebar__link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  font-weight:600;
}

.oui-sidebar__link i{
  width:18px;
  text-align:center;
  opacity:.95;
}

.oui-sidebar__link:hover{
  background:rgba(255,255,255,.10);
  color:#fff !important;
}

.oui-sidebar__link.is-active{
  background:rgba(255,255,255,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.oui-sidebar__footer{
  margin-top:auto;
  padding:14px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.oui-sidebar__balanceLabel{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.9;
}

.oui-sidebar__balanceValue{
  font-size:1.35rem;
  font-weight:800;
  margin-top:2px;
}

.oui-main{
  margin-left:260px;
  min-height:100vh;
}

.oui-topbar{
  height:64px;
  display:flex;
  align-items:center;
  padding:0 22px;
  position:sticky;
  top:0;
  z-index:1030;
  background:#ffffff;
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
}

.oui-topbar__spacer{ flex:1; }

.oui-topbar__userBtn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  text-decoration:none !important;
  color:var(--ow-ink) !important;
  font-weight:700;
}

.oui-topbar__userBtn:hover{
  box-shadow:0 12px 26px rgba(2,8,23,.08);
}

.oui-topbar__chev{ opacity:.6; font-size:.85rem; }

/* Make the main container breathe like your FOSSBilling layout */
body.oui-layout #main-body > .container{
  max-width:1400px;
}

/* Remove WHMCS sidebars inside client area (we use our fixed sidebar) */
body.oui-layout #main-body .row > .col-lg-4.col-xl-3{
  display:none !important;
}
body.oui-layout #main-body .primary-content{
  flex:0 0 100% !important;
  max-width:100% !important;
}

@media (max-width: 991.98px){
  .oui-sidebar{ width:100%; padding:14px 10px; }
  .oui-sidebar__logo img{ height:40px; }
  .oui-main{ margin-left:86px; }
  .oui-topbar{ padding:0 14px; }
}



/* ===== Ouioweb Home (KPI cards) ===== */
.ow-welcome h1{
  font-size:1.9rem;
  font-weight:800;
  color:var(--ow-ink);
  margin:6px 0 18px;
}
.ow-wave{ display:inline-block; transform:translateY(-1px); }

.ow-grid{
  display:grid;
  gap:14px;
}
.ow-grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.ow-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

@media (max-width: 1199.98px){
  .ow-grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .ow-grid.cols-4, .ow-grid.cols-2{ grid-template-columns: 1fr; }
}

.ow-kpi{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  padding:16px 16px;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none !important;
}
.ow-kpi:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(15,23,42,.10);
}
.kpi-title{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#6b7280;
  font-weight:700;
  margin:0;
}
.kpi-value{
  font-size:2rem;
  line-height:1.05;
  font-weight:900;
  margin:3px 0 0 0;
  color:var(--ow-ink);
}
.kpi-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(22,104,124,.10);
  color: var(--ow-brand);
  font-size:1.25rem;
}

/* Home panels: make default WHMCS panels look like Ouioweb cards */
.client-home-panels .card,
.client-home-panels .panel{
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.06) !important;
  overflow:hidden;
}
.client-home-panels .card-header{
  background:#fff !important;
  border-bottom:1px solid rgba(15,23,42,.08) !important;
  padding:14px 16px !important;
}
.client-home-panels .card-title{
  font-weight:800 !important;
  color:var(--ow-ink) !important;
}
.client-home-panels .card-body{ padding:14px 16px !important; }
.client-home-panels .list-group-item{
  border-color: rgba(15,23,42,.06) !important;
  padding: 12px 14px !important;
}
.client-home-panels .badge{
  border-radius: 999px !important;
  padding: .35em .6em !important;
}

/* Buttons in panel headers: make them look like Ouioweb */
.client-home-panels .btn.btn-xs,
.client-home-panels .btn.btn-sm{
  border-radius:10px !important;
  font-weight:700 !important;
}
/* =========================
   OuiTemplate - Client Area Home
   ========================= */

/* KPI grid (4 tuiles) */
.ow-kpis{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:18px !important;
  margin-bottom:18px !important;
}
.ow-kpi{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:16px !important;
  padding:16px 16px !important;
  text-decoration:none !important;
  color:#0f172a !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
  min-height:86px;
}
.ow-kpi:hover{ background:rgba(22,104,124,.04) !important; }
.ow-kpi .kpi-title{
  margin:0 !important;
  font-weight:800 !important;
  font-size:12px !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  color:rgba(15,23,42,.6) !important;
}
.ow-kpi .kpi-value{
  margin:6px 0 0 0 !important;
  font-weight:900 !important;
  font-size:32px !important;
  line-height:1 !important;
  color:#0f172a !important;
}
.ow-kpi .kpi-icon{
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(22,104,124,.10);
  color:#16687c;
  font-size:18px;
}

/* Welcome */
.ow-welcome h1{
  font-size:40px;
  font-weight:900;
  margin:6px 0 14px 0;
}
.ow-wave{ margin-left:6px; }

/* Panels grid (2 colonnes) */
.ow-panels{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:22px !important;
}
.ow-span-2{ grid-column:1 / -1 !important; }

/* OVERRIDE WHMCS default home panels look */
.client-home-cards,
.client-home-panels{ margin-top:0 !important; }

.ow-panel{
  background:#fff !important;
  border-radius:16px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
  overflow:hidden !important;
}

/* kill “grosses barres colorées” / accent bootstrap */
.ow-panel.card,
.ow-panel[class*="card-accent-"]{
  border-top:none !important;
}
.ow-panel .card-header,
.ow-panel .ow-card-head{
  background:#fff !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
  padding:14px 16px !important;
}
.ow-panel .card-title{ font-weight:900 !important; font-size:16px !important; }

/* list items style */
.ow-list-group{ display:flex; flex-direction:column; }
.ow-list-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-top:1px solid rgba(15,23,42,.06);
  text-decoration:none;
  color:inherit;
}
.ow-list-item:hover{ background:rgba(22,104,124,.05); }
.ow-li-left{ display:flex; align-items:center; gap:8px; font-weight:700; }
.ow-li-right{ display:flex; align-items:center; gap:10px; color:rgba(15,23,42,.55); }
.ow-chevron{ font-size:12px; opacity:.65; }

/* responsive */
@media (max-width: 1200px){
  .ow-kpis{ grid-template-columns:1fr 1fr !important; }
  .ow-panels{ grid-template-columns:1fr !important; }
}
@media (max-width: 640px){
  .ow-kpis{ grid-template-columns:1fr !important; }
  .ow-welcome h1{ font-size:30px; }
}
/* ===== Dashboard 2x2 (comme capture) ===== */
.ow-dashboard{ display:flex; flex-direction:column; gap:22px; }
.ow-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }

.ow-card{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  overflow:hidden;
}
.ow-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.06);
}
.ow-card-title{ font-weight:900; font-size:16px; color:#0f172a; }
.ow-card-subtitle{ font-size:12px; color:rgba(15,23,42,.55); margin-top:2px; }
.ow-card-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.ow-card-body{ padding:0; }

/* ===== Nettoyage du HTML WHMCS injecté (bodyHtml) ===== */
.ow-card-body .card,
.ow-card-body .panel{ border:0 !important; box-shadow:none !important; margin:0 !important; }
.ow-card-body .card-header,
.ow-card-body .panel-heading{ display:none !important; }

/* Listes : look propre + spacing */
.ow-card-body .list-group{ border:0; border-radius:0; }
.ow-card-body .list-group-item{
  border-left:0; border-right:0;
  border-top:1px solid rgba(15,23,42,.06);
  border-bottom:0;
  padding:12px 16px;
}
.ow-card-body .list-group-item:first-child{ border-top:0; }
.ow-card-body .list-group-item:hover{ background:rgba(22,104,124,.05); }

/* Tables WHMCS → plus clean */
.ow-card-body table{ margin:0; }
.ow-card-body .table>tbody>tr>td,
.ow-card-body .table>thead>tr>th{
  border-top:1px solid rgba(15,23,42,.06);
  padding:12px 16px;
}

/* Boutons internes WHMCS (si présents) */
.ow-card-body .btn{ border-radius:10px; font-weight:700; }

/* Empty state */
.ow-empty{ padding:16px; color:rgba(15,23,42,.55); }

/* Responsive */
@media (max-width: 1200px){
  .ow-row{ grid-template-columns:1fr; }
}
.ow-warn{ color:#f59e0b; font-weight:900; }
.ow-foot-note{
  padding:12px 16px;
  border-top:1px solid rgba(15,23,42,.06);
  background:rgba(245,158,11,.08);
  color:rgba(15,23,42,.8);
  font-weight:600;
}
.ow-link{ margin-left:8px; font-weight:800; text-decoration:none; color:inherit; }
.ow-link:hover{ text-decoration:underline; }

.ow-badge{ padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; }
.ow-badge-ok{ background:#dcfce7; color:#166534; }
.ow-badge-warn{ background:#ffedd5; color:#9a3412; }
.ow-badge-muted{ background:#e5e7eb; color:#374151; }
/* On veut que le contenu WHMCS prenne toute la carte sans padding foireux */
.ow-card-body-padless{ padding:0 !important; }

/* On “nettoie” le panel WHMCS injecté */
.ow-whmcs-embed .card,
.ow-whmcs-embed .panel{
  border:0 !important;
  box-shadow:none !important;
  margin:0 !important;
  background:transparent !important;
}

/* On vire le header interne WHMCS (sinon double titre) */
.ow-whmcs-embed .card-header,
.ow-whmcs-embed .panel-heading{
  display:none !important;
}

/* On harmonise la liste de services du panel */
.ow-whmcs-embed .list-group{
  border:0 !important;
  border-radius:0 !important;
}
.ow-whmcs-embed .list-group-item{
  border-left:0 !important;
  border-right:0 !important;
  border-top:1px solid rgba(15,23,42,.06) !important;
  border-bottom:0 !important;
  padding:14px 16px !important;
  background:transparent !important;
}
.ow-whmcs-embed .list-group-item:first-child{
  border-top:0 !important;
}
.ow-whmcs-embed .list-group-item:hover{
  background:rgba(22,104,124,.05) !important;
}

/* Optionnel : boutons internes plus “OuiTemplate” */
.ow-whmcs-embed .btn{ border-radius:10px; font-weight:700; }
/* sécurité: si un bloc renewals se glisse dans le html injecté, on le masque */
.ow-whmcs-services [class*="renew"],
.ow-whmcs-services [id*="renew"],
.ow-whmcs-services .renewals,
.ow-whmcs-services .panel-renewals,
.ow-whmcs-services .service-renewals{
  display:none !important;
}


/* =========================
   OuiTemplate - Global Client Area Style (all pages)
   ========================= */
body.oui-layout #main-body .container{ max-width:none !important; padding-left:24px !important; padding-right:24px !important; }
body.oui-layout #main-body{ padding-top:22px; padding-bottom:40px; }
body.oui-layout .page-header{ display:none !important; } /* header WHMCS par défaut */
body.oui-layout .sidebar{ display:none !important; }     /* sidebar WHMCS interne */
body.oui-layout #main-body .row{ margin-left:0 !important; margin-right:0 !important; }
body.oui-layout #main-body .col-lg-8, 
body.oui-layout #main-body .col-xl-9,
body.oui-layout #main-body .col-lg-4,
body.oui-layout #main-body .col-xl-3 { flex:0 0 100% !important; max-width:100% !important; }

/* Cards partout */
body.oui-layout .card,
body.oui-layout .panel{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
  overflow:hidden !important;
}
body.oui-layout .card-header,
body.oui-layout .panel-heading{
  background:#fff !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
  padding:14px 16px !important;
  font-weight:900 !important;
}
body.oui-layout .card-body{ padding:14px 16px !important; }

/* Tables */
body.oui-layout .table,
body.oui-layout table{ background:#fff; }
body.oui-layout .table>thead>tr>th{ border-bottom:1px solid rgba(15,23,42,.08) !important; }
body.oui-layout .table>tbody>tr>td,
body.oui-layout .table>thead>tr>th{
  border-top:1px solid rgba(15,23,42,.06) !important;
  padding:12px 14px !important;
  vertical-align:middle;
}

/* Forms */
body.oui-layout .form-control,
body.oui-layout .custom-select,
body.oui-layout .select2-container--default .select2-selection--single{
  border-radius:12px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  box-shadow:none !important;
}

/* Alerts */
body.oui-layout .alert{
  border-radius:14px !important;
  border:1px solid rgba(15,23,42,.10) !important;
}

/* Buttons */
body.oui-layout .btn{ border-radius:12px !important; font-weight:800 !important; }
body.oui-layout .btn-primary{ background:#0b2f66 !important; border-color:#0b2f66 !important; }
body.oui-layout .btn-outline-primary{ border-color:#0b2f66 !important; color:#0b2f66 !important; }

/* List group */
body.oui-layout .list-group{ border-radius:14px !important; overflow:hidden; }
body.oui-layout .list-group-item{ border-color:rgba(15,23,42,.06) !important; padding:12px 14px !important; }

/* Pas de soulignement sur les liens, même au hover/focus */
a, a:hover, a:focus, a:active {
  text-decoration: none !important;
}
.btn-primary {
    background: #0b2e65 !important;
}
/* =========================
   SUPPORT TICKETS – MODERN
   ========================= */

/* Page header */
.ow-page-header{
  margin-bottom:24px;
}
.ow-page-title{
  font-size:30px;
  font-weight:900;
  letter-spacing:-0.02em;
  margin:0;
}
.ow-page-subtitle{
  margin-top:6px;
  font-size:14px;
  color:rgba(15,23,42,.6);
}

/* Card container */
.ow-card-table{
  background:#fff;
  border-radius:20px;
  box-shadow:
    0 8px 24px rgba(15,23,42,.08),
    0 2px 6px rgba(15,23,42,.04);
  overflow:hidden;
}

/* Table reset */
#tableTicketsList{
  border-collapse:separate !important;
  border-spacing:0 10px !important;
  margin:0;
}

/* Header */
#tableTicketsList thead th{
  background:#f8fafc;
  border:none;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(15,23,42,.55);
  padding:14px 18px;
}

/* Rows as cards */
#tableTicketsList tbody tr{
  background:#fff;
  box-shadow:
    0 1px 0 rgba(15,23,42,.04),
    0 0 0 1px rgba(15,23,42,.05);
  border-radius:14px;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

#tableTicketsList tbody tr:hover{
  background:#f9fafb;
  transform:translateY(-1px);
  box-shadow:
    0 10px 25px rgba(15,23,42,.12),
    0 0 0 1px rgba(22,104,124,.35);
}

/* Cells */
#tableTicketsList tbody td{
  border:none;
  padding:16px 18px;
  vertical-align:middle;
}

/* Department */
#tableTicketsList td:first-child{
  font-weight:700;
  color:#0f172a;
  white-space:nowrap;
}

/* Subject */
.ticket-number{
  font-size:11px;
  color:rgba(15,23,42,.4);
  font-weight:600;
}
.ticket-subject{
  display:block;
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}
.ticket-subject.unread{
  color:#16687c;
}

/* Status badges */
.label.status,
.badge{
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  font-weight:800;
  text-transform:capitalize;
}

/* Date */
#tableTicketsList td:last-child{
  font-size:13px;
  color:rgba(15,23,42,.55);
  white-space:nowrap;
}

/* DataTables search */
.dataTables_filter{
  padding:14px 18px;
}
.dataTables_filter input{
  border-radius:999px;
  padding:8px 14px;
  border:1px solid rgba(15,23,42,.15);
  font-size:13px;
}
.dataTables_filter input:focus{
  outline:none;
  border-color:#16687c;
  box-shadow:0 0 0 3px rgba(22,104,124,.15);
}

/* Pagination */
.dataTables_paginate{
  padding:16px;
}
.dataTables_paginate .paginate_button{
  border-radius:10px !important;
  border:none !important;
  padding:6px 12px !important;
  margin:0 2px;
}
.dataTables_paginate .paginate_button.current{
  background:#16687c !important;
  color:#fff !important;
}

/* Loading */
#tableLoading{
  padding:24px;
  font-size:14px;
  color:rgba(15,23,42,.55);
}

/* No underline, ever */
a, a:hover, a:focus{
  text-decoration:none !important;
}
.btn-primary {background: #0b2f66 !important;}
/* =========================
   SUBMIT TICKET – MODERN
   ========================= */

/* Knowledge base banner */
/* Knowledge base banner – layout correct */
.ow-kb-banner{
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  border-radius:20px;
  padding:36px 40px;
  min-height:140px;
  box-shadow:
    0 12px 30px rgba(15,23,42,.08),
    0 2px 6px rgba(15,23,42,.04);
}

.ow-kb-title{
  font-size:18px;
  font-weight:900;
}

.ow-kb-text{
  margin-top:6px;
  font-size:15px;
  line-height:1.5;
}


/* Grid – max 3 tuiles par ligne */
.ow-support-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* Responsive */
@media (max-width: 992px){
  .ow-support-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width: 576px){
  .ow-support-grid{
    grid-template-columns:1fr;
  }
}


/* Tiles */
.ow-support-tile{
  background:#fff;
  border-radius:18px;
  padding:22px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:
    0 4px 14px rgba(15,23,42,.06),
    0 1px 2px rgba(15,23,42,.04);
  transition:
    transform .15s ease,
    box-shadow .15s ease;
  color:inherit;
}

.ow-support-tile:hover{
  transform:translateY(-2px);
  box-shadow:
    0 12px 30px rgba(15,23,42,.12),
    0 0 0 1px rgba(22,104,124,.35);
}

/* Icon */
.ow-support-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:rgba(22,104,124,.12);
  color:#16687c;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

/* Content */
.ow-support-content{
  flex:1;
}
.ow-support-title{
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}
.ow-support-desc{
  margin-top:4px;
  font-size:13px;
  color:rgba(15,23,42,.6);
  line-height:1.4;
}

/* Arrow */
.ow-support-arrow{
  color:rgba(15,23,42,.3);
  transition:transform .15s ease;
}
.ow-support-tile:hover .ow-support-arrow{
  transform:translateX(4px);
}

/* No underline */
a, a:hover, a:focus{
  text-decoration:none !important;
}
/* =========================
   TICKET CREATED – SUCCESS
   ========================= */

.ow-success-card{
  background:#fff;
  border-radius:24px;
  padding:48px 32px;
  max-width:720px;
  margin:0 auto;
  text-align:center;
  box-shadow:
    0 20px 50px rgba(15,23,42,.12),
    0 2px 6px rgba(15,23,42,.06);
}

/* Icon */
.ow-success-icon{
  width:72px;
  height:72px;
  margin:0 auto 20px;
  border-radius:50%;
  background:rgba(16,185,129,.15);
  color:#10b981;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
}

/* Title */
.ow-success-title{
  font-size:22px;
  font-weight:900;
  margin-bottom:10px;
  color:#0f172a;
}

/* Text */
.ow-success-text{
  font-size:15px;
  line-height:1.6;
  color:rgba(15,23,42,.65);
}

/* Ticket link */
.ow-ticket-link{
  font-weight:800;
  color:#16687c;
}

/* Actions */
.ow-success-actions{
  margin-top:28px;
}

/* No underline */
a, a:hover, a:focus{
  text-decoration:none !important;
}
/* ====== viewticket chat UI (à mettre dans ouioweb.css) ====== */

.ow-chat{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:22px;
  background:#f8fafc;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.ow-chat-row{ display:flex; }
.ow-chat-client{ justify-content:flex-start; }
.ow-chat-staff{ justify-content:flex-end; }

.ow-chat-bubble{
  max-width:72%;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}

.ow-chat-client .ow-chat-bubble{ border-top-left-radius:6px; }

.ow-chat-staff .ow-chat-bubble{
  background:#16687c;
  color:#fff;
  border-top-right-radius:6px;
}

.ow-chat-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  margin-bottom:6px;
  opacity:.8;
}

.ow-chat-author{ font-weight:800; }
.ow-chat-role{
  margin-left:6px;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}

.ow-chat-message{
  font-size:14px;
  line-height:1.6;
}

.ow-chat-ip{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
  font-size:12px;
  opacity:.8;
}

.ow-chat-rating{ margin-top:10px; }

.ow-chat-attachments{ margin-top:12px; }
.ow-chat-attachments-title{
  font-weight:800;
  font-size:12px;
  opacity:.85;
  margin-bottom:8px;
}

.ow-chat-attachments-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ow-attachment{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  background:rgba(15,23,42,.06);
  color:inherit;
}

.ow-chat-staff .ow-attachment{
  background:rgba(255,255,255,.20);
  color:#fff;
}

.ow-attachment-disabled{
  opacity:.7;
  cursor:not-allowed;
}

.ow-reply-title{
  font-size:18px;
  font-weight:900;
  margin:0;
}

.ow-reply-subtitle{
  margin-top:2px;
  font-size:13px;
  color:rgba(15,23,42,.6);
}

a, a:hover, a:focus{ text-decoration:none !important; }
 .cursor-pointer{ cursor:pointer; }

  .ow-table-wrap{
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
  }

  /* ✅ padding interne (cells) */
  #tableServicesList thead th{
    padding: 14px 16px !important;
    border-bottom-color: rgba(15,23,42,.08);
    font-weight: 600;
  }

  #tableServicesList tbody td{
    padding: 14px 16px !important;
    border-bottom-color: rgba(15,23,42,.06);
  }

  /* hover léger */
  #tableServicesList tbody tr:hover{ background: rgba(13,71,255,.04); }

  /* garde l’icône SSL centrée sans gonfler */
  #tableServicesList td.py-0{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #tableServicesList { margin-bottom:0; }
#tableServicesList tbody tr:last-child td{ border-bottom: 0; }
:root{
  --ow-primary:#0d47ff;
  --ow-primary-2:#0837c7;
  --ow-ink:#0f172a;
  --ow-muted:#64748b;
  --ow-border:rgba(15,23,42,.10);
  --ow-soft:rgba(15,23,42,.06);
  --ow-radius:18px;
  --ow-shadow:0 12px 30px rgba(2,8,23,.08);
}

.ow-svc-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px;
  background:#fff;
  border:1px solid var(--ow-border);
  border-radius:22px;
  box-shadow: var(--ow-shadow);
  margin-bottom:18px;
}

.ow-svc-title{
  font-size:22px;
  font-weight:800;
  color:var(--ow-ink);
  line-height:1.2;
}

.ow-svc-sub{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:var(--ow-muted);
  font-weight:600;
}

.ow-svc-domain{
  color:var(--ow-muted);
}

.ow-pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  background:#e7f7ee;
  color:#0f6a3c;
}
.ow-pill-pending{ background:#fff4db; color:#9a5b00; }
.ow-pill-suspended{ background:#ffe1e1; color:#9c1c1c; }
.ow-pill-cancelled,
.ow-pill-terminated{ background:#eef2f7; color:#475569; }

.ow-svc-head-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.ow-svc-head-actions .btn{
  border-radius:999px;
  font-weight:700;
  padding:8px 12px;
}

/* Left blue card */
.ow-svc-hero{
  border-radius:22px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--ow-primary) 0%, var(--ow-primary-2) 100%);
  box-shadow: var(--ow-shadow);
  min-height: 520px;
  position:relative;
}
.ow-svc-hero-inner{
  height:30rem;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.ow-svc-hero-icon{
  width:72px;height:72px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:34px;
  opacity:.95;
  margin-bottom:16px;
}

.ow-svc-hero-domain{
  color:#fff;
  font-size:20px;
  font-weight:800;
  margin-bottom:14px;
}

.ow-svc-hero-ctas{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.ow-svc-hero .btn{
  border-radius:10px;
  font-weight:800;
  padding:8px 12px;
}

.ow-svc-hero-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background: rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight:700;
}

.ow-visit-btn{
  border-radius:999px !important;
  padding:8px 12px !important;
}

/* Note under left card */
.ow-svc-note{
  margin-top:12px;
  background:#fff;
  border:1px solid var(--ow-border);
  border-radius:18px;
  padding:14px 16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--ow-muted);
  box-shadow: var(--ow-shadow);
}
.ow-svc-note i{ margin-top:2px; }

/* Right info card */
.ow-svc-info{
  border-radius:22px;
  background:#fff;
  border:1px solid var(--ow-border);
  box-shadow: var(--ow-shadow);
  padding:18px 18px;
  height:100%;
}

.ow-svc-info-title{
  font-size:22px;
  font-weight:900;
  color:var(--ow-ink);
  margin-bottom:10px;
}

.ow-svc-info-table{
  border-top:1px solid var(--ow-soft);
  margin-top:10px;
}

.ow-svc-info-table .ow-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--ow-soft);
}
.ow-svc-info-table .ow-k{
  color:var(--ow-muted);
  font-weight:700;
}
.ow-svc-info-table .ow-v{
  color:var(--ow-ink);
  font-weight:700;
}
.ow-svc-info-table .ow-v a{
  text-decoration:none;
}

/* Responsive */
@media (max-width: 991.98px){
  .ow-svc-head{ flex-direction:column; align-items:flex-start; }
  .ow-svc-head-actions{ justify-content:flex-start; }
  .ow-svc-hero{ min-height:420px; }
  .ow-svc-info-table .ow-row{ grid-template-columns: 1fr; }
}
/* ===== Page background like screenshot ===== */
body,
#main-body,
#main-body > .container,
#main-body > .container-fluid{
  background: #eef2ff !important; /* gris bleuté */
}

/* ===== Common cards ===== */
:root{
  --ow-ink:#0f172a;
  --ow-muted:#64748b;
  --ow-border: rgba(15,23,42,.10);
  --ow-soft: rgba(15,23,42,.06);
  --ow-shadow: 0 14px 30px rgba(2,8,23,.08);
  --ow-radius-xl: 22px;
  --ow-radius-lg: 18px;
  --ow-primary:#0d47ff;
  --ow-primary2:#0837c7;
}

.ow-svc-head,
.ow-svc-hero,
.ow-svc-info,
.ow-svc-note{
  box-shadow: var(--ow-shadow);
}

/* ===== Top header card (title + actions) ===== */
.ow-svc-head{
  background:#fff;
  border:1px solid var(--ow-border);
  border-radius: 26px;
  padding: 18px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}

.ow-svc-title{
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--ow-ink);
  line-height: 1.15;
}

.ow-svc-sub{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top: 10px;
}

.ow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  background: #e9f9ef;
  color:#0f6a3c;
}
.ow-pill::before{
  content:"";
  width:8px;height:8px;border-radius:999px;
  background:#22c55e;
  display:inline-block;
}
.ow-pill-pending{ background:#fff4db; color:#9a5b00; }
.ow-pill-pending::before{ background:#f59e0b; }
.ow-pill-suspended{ background:#ffe1e1; color:#9c1c1c; }
.ow-pill-suspended::before{ background:#ef4444; }
.ow-pill-cancelled,
.ow-pill-terminated{ background:#eef2f7; color:#475569; }
.ow-pill-cancelled::before,
.ow-pill-terminated::before{ background:#94a3b8; }

.ow-svc-domain{
  color: var(--ow-muted);
  font-weight: 700;
}

/* Buttons in header: pills like screenshot */
.ow-svc-head-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.ow-svc-head-actions .btn{
  border-radius: 999px !important;
  padding: 9px 14px !important;
  font-weight: 800 !important;
  border-width: 1px !important;
}

.ow-svc-head-actions .btn-primary{
  box-shadow: 0 10px 18px rgba(13,71,255,.18);
}

/* ===== Left big blue card ===== */
.ow-svc-hero{
  border-radius: 26px;
  overflow:hidden;
  background: linear-gradient(180deg, var(--ow-primary) 0%, var(--ow-primary2) 100%);
  border: 1px solid rgba(255,255,255,.10);
  min-height: 560px; /* comme ta capture */
  position: relative;
}

.ow-svc-hero-inner{
  height:100%;
  padding: 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.ow-svc-hero-icon{
  width:78px;height:78px;
  border-radius: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 42px;
  opacity:.95;
  margin-bottom: 18px;
}

.ow-svc-hero-domain{
  color:#fff;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 16px;
}

.ow-svc-hero-ctas{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ctas inside blue */
.ow-svc-hero .btn{
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-weight: 900 !important;
}

.ow-svc-hero .btn-outline-light{
  border-color: rgba(255,255,255,.55) !important;
}

/* bottom bar of blue card */
.ow-svc-hero-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.10);
  border-top: 1px solid rgba(255,255,255,.16);
  color:#fff;
  font-weight: 800;
}
.ow-visit-btn{
  border-radius: 999px !important;
  padding: 8px 14px !important;
}

/* ===== Note under blue card ===== */
.ow-svc-note{
  margin-top: 14px;
  background:#fff;
  border:1px solid var(--ow-border);
  border-radius: 22px;
  padding: 16px 16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  color: var(--ow-muted);
  font-weight: 600;
}
.ow-svc-note i{ margin-top: 2px; color: var(--ow-primary); }

/* ===== Right “Informations du service” ===== */
.ow-svc-info{
  border-radius: 26px;
  background:#fff;
  border:1px solid var(--ow-border);
  padding: 18px 18px;
  height: 100%;
}

.ow-svc-info-title{
  font-size: 24px;
  font-weight: 900;
  color: var(--ow-ink);
  padding: 6px 6px 10px 6px;
  border-bottom: 1px solid var(--ow-soft);
  margin-bottom: 6px;
}

.ow-svc-info-table .ow-row{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  padding: 12px 6px;
  border-bottom: 1px solid var(--ow-soft);
}
.ow-svc-info-table .ow-k{
  color: var(--ow-muted);
  font-weight: 700;
}
.ow-svc-info-table .ow-v{
  color: var(--ow-ink);
  font-weight: 800;
}
.ow-svc-info-table .ow-v a{
  text-decoration:none;
}

/* Responsive like screenshot */
@media (max-width: 991.98px){
  .ow-svc-head{ flex-direction:column; }
  .ow-svc-head-actions{ justify-content:flex-start; }
  .ow-svc-hero{ min-height: 420px; }
  .ow-svc-info-table .ow-row{ grid-template-columns: 1fr; }
}
  body,
  #main-body,
  #main-body > .container,
  #main-body > .container-fluid{
    background:#eef2ff !important;
  }

  :root{
    --ow-ink:#0f172a;
    --ow-muted:#64748b;
    --ow-border: rgba(15,23,42,.10);
    --ow-soft: rgba(15,23,42,.06);
    --ow-shadow: 0 14px 30px rgba(2,8,23,.08);
    --ow-radius-xl: 26px;
    --ow-radius-lg: 22px;
    --ow-primary:#0d47ff;
    --ow-primary2:#0837c7;
  }

  .ow-svc-head,.ow-svc-hero,.ow-svc-info,.ow-svc-note,.ow-module-box{ box-shadow:var(--ow-shadow); }

  .ow-svc-head{
    background:#fff;
    border:1px solid var(--ow-border);
    border-radius: var(--ow-radius-xl);
    padding:18px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
  }
  .ow-svc-title{
    font-size:26px;
    font-weight:900;
    letter-spacing:-.02em;
    color:var(--ow-ink);
    line-height:1.15;
  }
  .ow-svc-sub{ display:flex; align-items:center; gap:12px; margin-top:10px; }
  .ow-svc-domain{ color:var(--ow-muted); font-weight:700; }

  .ow-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    font-weight:900;
    font-size:13px;
    background:#e9f9ef;
    color:#0f6a3c;
  }
  .ow-pill::before{
    content:"";
    width:8px;height:8px;border-radius:999px;
    background:#22c55e;
    display:inline-block;
  }
  .ow-pill-pending{ background:#fff4db; color:#9a5b00; }
  .ow-pill-pending::before{ background:#f59e0b; }
  .ow-pill-suspended{ background:#ffe1e1; color:#9c1c1c; }
  .ow-pill-suspended::before{ background:#ef4444; }
  .ow-pill-cancelled,.ow-pill-terminated{ background:#eef2f7; color:#475569; }
  .ow-pill-cancelled::before,.ow-pill-terminated::before{ background:#94a3b8; }

  .ow-svc-head-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
  .ow-svc-head-actions .btn{
    border-radius:999px !important;
    padding:9px 14px !important;
    font-weight:800 !important;
    border-width:1px !important;
  }
  .ow-svc-head-actions .btn-primary{ box-shadow:0 10px 18px rgba(13,71,255,.18); }

  .ow-svc-hero{
    border-radius:var(--ow-radius-xl);
    overflow:hidden;
    background:linear-gradient(180deg,var(--ow-primary) 0%,var(--ow-primary2) 100%);
    border:1px solid rgba(255,255,255,.10);
    min-height:560px;
    position:relative;
  }
  .ow-svc-hero-inner{
    height:100%;
    padding:26px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  .ow-svc-hero-icon{
    width:78px;height:78px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:42px;
    opacity:.95;
    margin-bottom:18px;
  }
  .ow-svc-hero-domain{ color:#fff; font-size:20px; font-weight:900; margin-bottom:16px; }
  .ow-svc-hero-ctas{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
  .ow-svc-hero .btn{ border-radius:10px !important; padding:9px 12px !important; font-weight:900 !important; }
  .ow-svc-hero .btn-outline-light{ border-color:rgba(255,255,255,.55) !important; }

  .ow-svc-hero-footer{
    position:absolute; left:0; right:0; bottom:0;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px;
    background:rgba(255,255,255,.10);
    border-top:1px solid rgba(255,255,255,.16);
    color:#fff;
    font-weight:800;
  }
  .ow-visit-btn{ border-radius:999px !important; padding:8px 14px !important; }

  .ow-svc-note{
    margin-top:14px;
    background:#fff;
    border:1px solid var(--ow-border);
    border-radius:var(--ow-radius-lg);
    padding:16px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--ow-muted);
    font-weight:600;
  }
  .ow-svc-note i{ margin-top:2px; color:var(--ow-primary); }

  .ow-svc-info{
    border-radius:var(--ow-radius-xl);
    background:#fff;
    border:1px solid var(--ow-border);
    padding:18px;
    height:100%;
  }
  .ow-svc-info-title{
    font-size:24px;
    font-weight:900;
    color:var(--ow-ink);
    padding:6px 6px 10px 6px;
    border-bottom:1px solid var(--ow-soft);
    margin-bottom:6px;
  }
  .ow-svc-info-table .ow-row{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap:16px;
    padding:12px 6px;
    border-bottom:1px solid var(--ow-soft);
  }
  .ow-svc-info-table .ow-k{ color:var(--ow-muted); font-weight:700; }
  .ow-svc-info-table .ow-v{ color:var(--ow-ink); font-weight:800; }
  .ow-svc-info-table .ow-v a{ text-decoration:none; }

  .ow-module-box{
    background:#fff;
    border:1px solid var(--ow-border);
    border-radius:var(--ow-radius-xl);
    overflow:hidden;
  }
  .ow-module-title{
    padding:14px 18px;
    font-weight:900;
    font-size:18px;
    border-bottom:1px solid var(--ow-soft);
  }
  .ow-module-body{ padding:14px 16px; }

  .ow-tabs{ gap:8px; border-bottom:0 !important; }
  .ow-tabs .nav-link{
    border-radius:12px 12px 0 0;
    font-weight:800;
    opacity:.8;
  }
  .ow-tabs .nav-link.active{ opacity:1; }
  .ow-tab-card{
    border-radius:16px;
    border:1px solid var(--ow-border);
    overflow:hidden;
  }

  @media (max-width: 991.98px){
    .ow-svc-head{ flex-direction:column; }
    .ow-svc-head-actions{ justify-content:flex-start; }
    .ow-svc-hero{ min-height:420px; }
    .ow-svc-info-table .ow-row{ grid-template-columns: 1fr; }
  }
  /* ===== Invoice view (client area) ===== */

.ow-invoice-layout{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:24px;
  align-items:start;
}

@media (max-width: 992px){
  .ow-invoice-layout{ grid-template-columns:1fr; }
  .ow-invoice-side{ position:static; }
}

.ow-invoice-card{
  background:#fff;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  padding:26px;
}

.ow-invoice-top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px solid rgba(15,23,42,.08);
  margin-bottom:18px;
}

.ow-invoice-title{
  display:flex;
  align-items:center;
  gap:12px;
}
.ow-invoice-h{
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.02em;
}
.ow-invoice-status{
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
}

.ow-status-unpaid{ background:rgba(239,68,68,.12); color:#ef4444; }
.ow-status-paid{ background:rgba(16,185,129,.14); color:#10b981; }
.ow-status-cancelled{ background:rgba(100,116,139,.16); color:#64748b; }
.ow-status-refunded{ background:rgba(245,158,11,.18); color:#f59e0b; }
.ow-status-draft{ background:rgba(59,130,246,.14); color:#3b82f6; }
.ow-status-neutral{ background:rgba(15,23,42,.08); color:rgba(15,23,42,.75); }

.ow-invoice-dates{
  display:flex;
  gap:22px;
  align-items:flex-start;
}
.ow-muted{ color:rgba(15,23,42,.55); }

.ow-invoice-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:18px;
}
@media (max-width: 768px){
  .ow-invoice-two{ grid-template-columns:1fr; }
}

.ow-block-title{
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(15,23,42,.55);
  margin-bottom:8px;
}
.ow-block-text{ color:rgba(15,23,42,.8); line-height:1.55; }

.ow-invoice-note{
  background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.18);
  border-radius:14px;
  padding:14px;
  margin-bottom:18px;
}

.ow-items-table{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
}
.ow-items-row{
  display:grid;
  grid-template-columns: 1fr 160px;
  gap:14px;
  padding:14px 16px;
  background:#fff;
  border-top:1px solid rgba(15,23,42,.06);
}
.ow-items-row:first-child{ border-top:none; }
.ow-items-row-head{
  background:#f8fafc;
  font-weight:900;
  color:rgba(15,23,42,.6);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:12px;
}
.ow-items-amount{ text-align:right; font-weight:700; }
.ow-items-desc{ color:rgba(15,23,42,.9); }
.ow-items-sep{
  height:1px;
  background:rgba(15,23,42,.08);
}
.ow-items-total .ow-items-label{ text-align:right; color:rgba(15,23,42,.65); font-weight:800; }
.ow-items-grand{
  background:#0b3b7a;
  color:#fff;
}
.ow-items-grand .ow-items-amount,
.ow-items-grand .ow-items-label{ color:#fff; font-weight:900; }

.ow-invoice-side{
  position:sticky;
  top:100px;
}

.ow-pay-card{
  background:#0b3b7a;
  color:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 16px 40px rgba(15,23,42,.16);
}

.ow-pay-label{ font-size:12px; opacity:.8; font-weight:800; }
.ow-pay-amount{ font-size:28px; font-weight:900; margin-top:4px; }
.ow-pay-sep{ height:1px; background:rgba(255,255,255,.18); margin:14px 0; }

.ow-pay-label2{ font-size:12px; opacity:.85; font-weight:800; margin-bottom:8px; }
.ow-pay-method{ font-weight:800; }

.ow-pay-card .form-select{
  border-radius:12px;
  border:none;
}

.ow-pay-cta{
  margin-top:14px;
}
.ow-pay-cta form, .ow-pay-cta .btn{ width:100%; }
.ow-pay-cta .btn, .ow-pay-cta input[type="submit"], .ow-pay-cta button{
  width:100% !important;
  border-radius:12px !important;
}

.ow-pay-ok{
  font-weight:900;
  opacity:.95;
}

.ow-side-card{
  background:#fff;
  border-radius:18px;
  padding:16px;
  margin-top:16px;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.ow-side-title{
  font-size:14px;
  font-weight:900;
  margin-bottom:10px;
}
.ow-actions{ display:flex; flex-direction:column; gap:10px; }
.ow-action{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(15,23,42,.85);
  font-weight:700;
}
.ow-action i{ width:18px; text-align:center; }

a, a:hover, a:focus{ text-decoration:none !important; }
/* Invoice layout with right payment card */
.ow-invoice-shell{ width:100%; }
.ow-invoice-shell .ow-card{ background:#fff; border-radius:18px; box-shadow:0 10px 26px rgba(15,23,42,.08); }
.ow-card-head{ padding:16px 18px; border-bottom:1px solid rgba(15,23,42,.08); }
.ow-card-title{ font-weight:900; }
.ow-card-body{ padding:18px; }
.ow-card-body-padless{ padding:0; }

.ow-invoice-shell .ow-invoice-main{ min-width:0; }
.ow-invoice-shell .ow-invoice-side{ min-width:0; }

.ow-invoice-shell .ow-invoice-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;
  margin-bottom:18px;
}
.ow-invoice-meta{ margin-top:8px; color:rgba(15,23,42,.6); font-size:13px; }
.ow-dot{ margin:0 8px; opacity:.6; }

.ow-invoice-shell > .ow-invoice-layout,
.ow-invoice-shell .ow-invoice-layout{ display:block; }

.ow-invoice-shell .ow-invoice-shell{
  display:block;
}

.ow-invoice-shell{
  display:block;
}

.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* main + sidebar grid */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* actual grid */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* use this grid (final) */
.ow-invoice-shell > .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* Real grid */
.ow-invoice-shell > .ow-invoice-shell,
.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* Correct grid definition */
.ow-invoice-shell > .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* (sorry - keep only below real grid) */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* REAL GRID */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* FINAL: */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* ✅ final layout */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* STOP duplicates - here is the actual one */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* --- Use this: --- */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* OK: grid */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* ✅ THE GRID */
.ow-invoice-shell .ow-invoice-shell{ display:block; }

/* Sorry, here is the clean grid */
.ow-invoice-shell .ow-invoice-shell{ display:block; }
/* ===== Invoice modern layout ===== */
.ow-invoice-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
  align-items:start;
}
@media (max-width: 992px){
  .ow-invoice-grid{ grid-template-columns:1fr; }
}

.ow-invoice-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.ow-invoice-title{
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.02em;
  margin:0;
}
.ow-invoice-sub{ color:rgba(15,23,42,.65); margin-top:6px; }
.ow-dot{ margin:0 8px; opacity:.6; }

.ow-pill{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:900;
}
.ow-pill-danger{ background:rgba(239,68,68,.12); color:#ef4444; }
.ow-pill-success{ background:rgba(16,185,129,.14); color:#10b981; }
.ow-pill-warning{ background:rgba(245,158,11,.16); color:#f59e0b; }
.ow-pill-info{ background:rgba(59,130,246,.14); color:#3b82f6; }
.ow-pill-muted{ background:rgba(15,23,42,.08); color:rgba(15,23,42,.7); }

.ow-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.ow-card-head{
  padding:16px 18px;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.ow-card-title{ font-weight:900; }
.ow-card-body{ padding:18px; }
.ow-padless{ padding:0; }
.ow-mb{ margin-bottom:18px; }

.ow-kv-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(15,23,42,.55);
  font-weight:900;
  margin-bottom:8px;
}
.ow-kv-value{ color:rgba(15,23,42,.85); line-height:1.55; }

.ow-table thead th{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(15,23,42,.55);
  background:#f8fafc;
  border-bottom:1px solid rgba(15,23,42,.08);
}
.ow-table td{ border-color:rgba(15,23,42,.06); }
.ow-row-muted td{ background:#fafafa; }
.ow-row-total td{ background:#0b3b7a; color:#fff; border-color:rgba(255,255,255,.12); }
.fw-black{ font-weight:900; }

.ow-invoice-side{
  position:sticky;
  top:100px;
}

.ow-pay-card{
  background:#0b3b7a;
  color:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 16px 40px rgba(15,23,42,.16);
}
.ow-pay-label{ font-size:12px; opacity:.85; font-weight:800; }
.ow-pay-amount{ font-size:32px; font-weight:900; margin-top:4px; }
.ow-pay-sep{ height:1px; background:rgba(255,255,255,.18); margin:14px 0; }
.ow-pay-label2{ font-size:12px; opacity:.9; font-weight:800; margin-bottom:8px; }
.ow-pay-method{ font-weight:800; margin-bottom:10px; }
.ow-pay-cta .btn, .ow-pay-cta input[type="submit"], .ow-pay-cta button{
  width:100% !important;
  border-radius:12px !important;
}

.ow-side-card{
  background:#fff;
  border-radius:18px;
  padding:16px;
  margin-top:16px;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.ow-side-title{ font-weight:900; margin-bottom:10px; }
.ow-actions{ display:flex; flex-direction:column; gap:10px; }
.ow-action{ display:flex; align-items:center; gap:10px; font-weight:700; color:rgba(15,23,42,.85); }

a, a:hover, a:focus{ text-decoration:none !important; }
/* ViewInvoice: masquer la zone paiement inline (celle du bas) */
body[data-template="ouitemplate_whmcs"] .invoice-summary,
body[data-template="ouitemplate_whmcs"] .invoice-payment,
body[data-template="ouitemplate_whmcs"] .payment-btn-container:not(.ow-pay-card .payment-btn-container),
body[data-template="ouitemplate_whmcs"] .invoice-footer .btn-success,
body[data-template="ouitemplate_whmcs"] select[name="gateway"],
body[data-template="ouitemplate_whmcs"] form[action*="viewinvoice.php"] .btn-success {
  display: none !important;
}
/* Billing cycle boxes */
#order-standard_cart .ow-cycle{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  background:#fff;
  padding:14px 12px;
  text-align:center;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
#order-standard_cart .ow-cycle:hover{
  transform:translateY(-1px);
  box-shadow:0 .5rem 1.25rem rgba(0,0,0,.08);
}
#order-standard_cart .ow-cycle__price{
  font-weight:800;
  font-size:22px;
  line-height:1.1;
}
#order-standard_cart .ow-cycle__freq{
  margin-top:6px;
  font-size:13px;
  opacity:.75;
}
#order-standard_cart .ow-cycle.is-active{
  border-color:rgba(13,110,253,.55);
  box-shadow:0 .75rem 1.75rem rgba(13,110,253,.12);
}
.btn-primary:hover {
    color: #369 !important;
    background-color: #fff;
    border-color: #369 !important;
}
/* ===== Overlay (mobile) ===== */
.oui-sidebar__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1050;
  display: none;
}

/* ===== Sidebar base ===== */
.oui-sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 260px;
  background: #0b3b7a;
  color: #fff;
  z-index: 1060;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .18s ease;
}

.oui-main{
  margin-left: 260px;
}

/* ===== Logo behavior ===== */
.oui-logo-mini{ display: none; height: 28px; width: auto; }
.oui-logo-full{ display: block; max-height: 36px; width: auto; }

/* ===== Nav ===== */
.oui-sidebar__nav{ padding: 8px 10px 14px; }
.oui-sidebar__link{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  opacity: .95;
}
.oui-sidebar__link:hover{ background: rgba(255,255,255,.10); color:#fff; }
.oui-sidebar__link i{ width: 18px; text-align:center; }
.oui-sidebar__link--sub{ padding-left: 38px; opacity: .9; }

/* ===== Footer ===== */
.oui-sidebar__footer{
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* ===== Desktop: sidebar always visible ===== */
@media (min-width: 1200px){
  .oui-sidebar{
    transform: translateX(0);
  }
  .oui-sidebar__overlay{ display:none !important; }
}

/* ===== Mobile/Tablet: off-canvas (hidden by default) ===== */
@media (max-width: 1199.98px){
  .oui-main{ margin-left: 0; }

  .oui-sidebar{
    width: 100% !important;
    transform: translateX(-105%);
  }

  body.oui-sidebar-open .oui-sidebar{
    transform: translateX(0);
  }

  body.oui-sidebar-open .oui-sidebar__overlay{
    display: block;
  }

  /* Empêche la page de scroller quand le menu est ouvert */
  body.oui-sidebar-open{
    overflow: hidden;
  }
}
/* Bouton fermer sidebar */
.oui-sidebar__brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.oui-sidebar__close{
  background:transparent;
  border:0;
  color:#fff;
  font-size:18px;
  padding:8px 10px;
  border-radius:10px;
  display:none; /* desktop: caché */
}
.oui-sidebar__close:hover{
  background:rgba(255,255,255,.10);
}

/* Visible uniquement en mobile/tablette (offcanvas) */
@media (max-width: 1199.98px){
  .oui-sidebar__close{ display:inline-flex; }
}
/* Mobile/tablette : on garde le logo navbar */
#header .navbar .logo-img{
  display: inline-block;
}

/* Desktop : on cache le logo navbar (sidebar visible) */
@media (min-width: 1200px){
  #header .navbar .logo-img{
    display: none !important;
  }
}
/* éviter que les longues chaînes cassent le layout */
#order-standard_cart .min-w-0 { min-width: 0; }
#order-standard_cart .domain-wrap { overflow-wrap: anywhere; word-break: break-word; }

/* boutons icône-only */
#order-standard_cart .btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.master-breadcrumb .breadcrumb {
    display: none;
    padding: 9px 0;
    font-size: .9rem;
}
.oui-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.oui-topbar__left{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.oui-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.oui-topbar__logo img{
  height:26px;
  width:auto;
  display:block;
}

.oui-topbar__right{
  display:flex;
  align-items:center;
  gap:.5rem;
}

.oui-topbar__burger{
  border:0;
  background:transparent;
  padding:.5rem;
  font-size:1.2rem;
}

@media (min-width: 992px) {
  .oui-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
}