/* =========================================================
   SolidHeberg WHMCS Child Theme - custom.css (CLEAN, de-duped)
   Target: WHMCS Twenty-One (Bootstrap 4)
   Scope: clientarea only via body.sh-body
   ========================================================= */

/* =========================================================
   01) TOKENS
   ========================================================= */
:root{
  /* VeryCloud-inspired dark SaaS palette */
  --sh-bg: #070a13;
  --sh-bg2:#0b1020;

  --sh-card: rgba(255,255,255,.055);
  --sh-border: rgba(255,255,255,.09);

  --sh-text: rgba(255,255,255,.92);
  --sh-muted: rgba(255,255,255,.68);

  --sh-accent: #ffffff;
  --sh-accent2:#7c5cff; /* violet */
  --sh-accent3:#6aa7ff; /* blue */

  --sh-radius: 18px;
  --sh-radius-sm: 12px;
  --sh-shadow: 0 18px 46px rgba(0,0,0,.34);
  --sh-shadow-soft: 0 14px 32px rgba(0,0,0,.26);

  /* Hover premium (same vibe as btn-primary) */
  --sh-hover-grad: linear-gradient(135deg, rgba(106,167,255,.20), rgba(124,92,255,.18));
  --sh-hover-br: rgba(106,167,255,.28);
  --sh-hover-glow: 0 0 0 .2rem rgba(106,167,255,.12);

  /* Rail */
  --sh-rail-bg: rgba(9,12,23,.76);
  --sh-rail-border: rgba(255,255,255,.10);
  --sh-rail-item: rgba(255,255,255,.03);
  --sh-rail-item-br: rgba(255,255,255,.06);
  --sh-rail-active-grad: linear-gradient(135deg, rgba(124,92,255,.62), rgba(106,167,255,.52));
  --sh-rail-icon-bg: rgba(255,255,255,.06);
  --sh-rail-icon-br: rgba(255,255,255,.10);
}

/* =========================================================
   02) BASE / LAYOUT
   ========================================================= */
html, body{ height:100%; }

body.sh-body{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(106,167,255,.22), transparent 55%),
    linear-gradient(180deg, var(--sh-bg), var(--sh-bg2));
  color: var(--sh-text);
}

#main-body,
.sh-main{ flex: 1 0 auto; }

.container{ max-width: 1200px; }

/* Smooth transitions (safe) */
body.sh-body .card,
body.sh-body .panel,
body.sh-body .list-group-item,
body.sh-body .btn,
body.sh-body .dropdown-item,
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li > a{
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}

body.sh-body a{ color: var(--sh-accent); }
body.sh-body a:hover{ color: rgba(255,255,255,.96); text-decoration:none; }

/* Avoid clipping for dropdowns/overlays */
body.sh-body #main-body,
body.sh-body #main-body .container,
body.sh-body .primary-content,
body.sh-body .card,
body.sh-body .card-body{
  overflow: visible !important;
}

/* =========================================================
   03) GLASS UI (cards/panels/lists)
   ========================================================= */
body.sh-body .card,
body.sh-body .panel,
body.sh-body .list-group-item{
  background: var(--sh-card) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: var(--sh-shadow);
  color: var(--sh-text);
}

body.sh-body .card-header,
body.sh-body .panel-heading{
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: var(--sh-text) !important;
  font-weight: 900;
  border-top-left-radius: var(--sh-radius) !important;
  border-top-right-radius: var(--sh-radius) !important;
}

/* =========================================================
   04) FORMS / BUTTONS / ALERTS
   ========================================================= */
body.sh-body .form-control,
body.sh-body .custom-select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--sh-text) !important;
  border-radius: var(--sh-radius-sm) !important;
}

body.sh-body .form-control:focus{
  border-color: rgba(106,167,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(106,167,255,.18) !important;
}

/* Ta correction */
body.sh-body .custom-select:focus{
  border-color: rgba(106,167,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(106,167,255,.18) !important;
  background-color: #0c1225 !important;
}

body.sh-body label,
body.sh-body .control-label{ color: var(--sh-muted) !important; }

body.sh-body .btn{
  border-radius: var(--sh-radius-sm) !important;
  font-weight: 900;
}

body.sh-body .btn-primary{
  background: linear-gradient(135deg, rgba(106,167,255,.95), rgba(124,92,255,.95)) !important;
  border: 0 !important;
  color: #0b1020 !important;
  box-shadow: 0 12px 28px rgba(63,124,255,.22);
}
body.sh-body .btn-primary:hover{ filter: brightness(1.05); transform: translateY(-1px); }

body.sh-body .btn-default,
body.sh-body .btn-outline-secondary,
body.sh-body .btn-secondary{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--sh-text) !important;
}
body.sh-body .btn-default:hover,
body.sh-body .btn-outline-secondary:hover,
body.sh-body .btn-secondary:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

body.sh-body .alert{
  border-radius: var(--sh-radius) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--sh-text) !important;
}

/* =========================================================
   05) HEADER / NAVBAR (matches your navbar.tpl markup)
   ========================================================= */
body.sh-body #header{
  background: transparent !important;
  position: relative;
  z-index: 5000 !important; /* merged with premium z-index fix */
}

/* Topbar */
body.sh-body #header .topbar{
  background: rgba(9,12,23,.72) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  position: relative;
  z-index: 6000 !important; /* merged */
}
body.sh-body #header .topbar .btn{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--sh-text) !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
}
body.sh-body #header .topbar .btn:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

/* Navbar wrapper glass */
body.sh-body #header .main-navbar-wrapper{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 10px 0 10px !important;
  position: relative;
  z-index: 5500 !important; /* merged */
}
body.sh-body #header .main-navbar-wrapper .container{
  background: rgba(10,14,28,.62) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: var(--sh-shadow) !important;
  backdrop-filter: blur(10px);
  padding: 10px 12px !important;
}

/* Force white text inside nav */
body.sh-body #header .main-navbar-wrapper,
body.sh-body #header .main-navbar-wrapper *{
  color: rgba(255,255,255,.96) !important;
}

/* Burger icon */
body.sh-body .navbar-toggler{
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  background: rgba(255,255,255,.04) !important;
}
body.sh-body .navbar-toggler:focus{
  outline: none !important;
  box-shadow: 0 0 0 .2rem rgba(106,167,255,.18) !important;
}
body.sh-body .navbar-toggler-icon{
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* NAV LINKS (your tpl uses ul.navbar-nav > li > a, no .nav-link) */
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li > a{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 10px 12px !important;
  margin: 2px 4px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  overflow: hidden !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  background: transparent !important;
}

/* Gradient overlay hover (bulletproof) */
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li > a::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--sh-hover-grad) !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
  border-radius: 12px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li > a > *{
  position: relative !important;
  z-index: 1 !important;
}
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li:hover > a::before,
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li > a:hover::before{
  opacity: 1 !important;
}
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li:hover > a,
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li > a:hover{
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li.show > a::before{ opacity: 1 !important; }
body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li.show > a{ border-color: rgba(106,167,255,.22) !important; }

/* Dropdown menu */
body.sh-body #header .main-navbar-wrapper .dropdown-menu{
  background: rgba(10,14,28,.98) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 14px !important;
  box-shadow: var(--sh-shadow) !important;
  padding: 8px !important;
  margin-top: 8px !important;
  z-index: 3000 !important;
}

/* Your tpl: <li class="dropdown-item"><a class="dropdown-item ..."> */
body.sh-body #header .main-navbar-wrapper .dropdown-menu li.dropdown-item{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
body.sh-body #header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item{
  position: relative !important;
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  color: rgba(255,255,255,.96) !important;
  font-weight: 800 !important;
  background: transparent !important;
  overflow: hidden !important;
}
body.sh-body #header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background: var(--sh-hover-grad) !important;
  opacity:0 !important;
  transition: opacity .15s ease !important;
  border-radius: 12px !important;
  pointer-events:none !important;
  z-index:0 !important;
}
body.sh-body #header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item > *{
  position: relative !important;
  z-index: 1 !important;
}
body.sh-body #header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item:hover::before{
  opacity: 1 !important;
}
body.sh-body #header .main-navbar-wrapper .dropdown-menu li.dropdown-item > a.dropdown-item:hover{
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

/* Mobile drawer */
@media (max-width: 991px){
  body.sh-body #header .main-navbar-wrapper{ margin: 6px 0 0 !important; }
  body.sh-body #header .main-navbar-wrapper .container{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  body.sh-body #header .main-navbar-wrapper .navbar-collapse{
    margin-top: 10px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(10,14,28,.98) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: var(--sh-shadow) !important;
    position: fixed;
    left: 12px;
    right: 12px;
    top: 120px;
    z-index: 4000;
    max-height: calc(100vh - 160px);
    overflow: auto;
  }
  body.sh-body #header .main-navbar-wrapper ul.navbar-nav > li > a{
    width: 100%;
    margin: 0 !important;
  }
}

/* =========================================================
   06) BREADCRUMB
   ========================================================= */
body.sh-body .master-breadcrumb{
  background: transparent !important;
  border-bottom: 0 !important;
  margin-top: 2px;
}
body.sh-body .master-breadcrumb .breadcrumb{
  margin: 0 !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
}
body.sh-body .master-breadcrumb .breadcrumb a{
  color: rgba(255,255,255,.96) !important;
  font-weight: 800 !important;
  opacity: .95;
}
body.sh-body .master-breadcrumb .breadcrumb-item.active{
  color: var(--sh-muted) !important;
}

/* =========================================================
   07) DASHBOARD HERO + SH COMPONENTS
   ========================================================= */
body.sh-body .sh-dash-hero{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--sh-radius) + 6px);
  border: 1px solid var(--sh-border);
  background: rgba(255,255,255,.04);
  box-shadow: var(--sh-shadow);
  margin: 8px 0 18px;
}
body.sh-body .sh-dash-hero__bg{
  position:absolute; inset:-40px;
  background:
    radial-gradient(600px 260px at 20% 10%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(520px 240px at 80% 0%, rgba(106,167,255,.26), transparent 60%);
  filter: blur(6px);
}
body.sh-body .sh-dash-hero__content{ position: relative; padding: 22px; }
body.sh-body .sh-dash-hero__top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; }
body.sh-body .sh-dash-hero__title{ margin:0; font-weight: 950; letter-spacing: -.2px; }
body.sh-body .sh-dash-hero__subtitle{ margin:6px 0 0; color: var(--sh-muted); max-width: 62ch; }

body.sh-body .sh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  text-decoration:none !important;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--sh-text);
  background: rgba(255,255,255,.03);
}
body.sh-body .sh-btn:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}
body.sh-body .sh-btn--primary{
  background: linear-gradient(135deg, rgba(106,167,255,.95), rgba(124,92,255,.95));
  border-color: transparent;
  color: #0b1020 !important;
}

body.sh-body .sh-kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
body.sh-body .sh-kpi{
  display:block;
  text-decoration:none !important;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
body.sh-body .sh-kpi:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}
body.sh-body .sh-kpi__label{ color: var(--sh-muted); font-weight: 800; font-size: 12px; }
body.sh-body .sh-kpi__value{ font-weight: 950; font-size: 24px; margin-top: 4px; color: var(--sh-text); }

body.sh-body .sh-home-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
body.sh-body .sh-card-link{
  display:block;
  text-decoration:none !important;
  padding: 16px;
  border-radius: var(--sh-radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
body.sh-body .sh-card-link:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}
body.sh-body .sh-card-link__title{ font-weight: 950; color: var(--sh-text); }
body.sh-body .sh-card-link__desc{ margin-top: 6px; color: var(--sh-muted); }

/* =========================================================
   08) TABLES DARK (global)
   ========================================================= */
body.sh-body .table{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}
body.sh-body .table thead th{
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
body.sh-body .table tbody td,
body.sh-body .table tbody th{
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}
body.sh-body .table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(255,255,255,.03) !important;
}
body.sh-body .table-hover tbody tr:hover{
  background: var(--sh-hover-grad) !important;
}
body.sh-body .table-responsive{
  border-radius: var(--sh-radius) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  overflow: hidden !important;
}
body.sh-body .bg-white,
body.sh-body .bg-light{
  background: rgba(255,255,255,.04) !important;
}

/* =========================================================
   09) SELECT2 (global clientarea)
   ========================================================= */
body.sh-body .select2-container{ width: 100% !important; }
body.sh-body .select2-container--default .select2-selection--single,
body.sh-body .select2-container--default .select2-selection--multiple{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 14px !important;
  min-height: 42px;
  color: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
body.sh-body .select2-container--default .select2-dropdown{
  background: rgba(10,14,28,.92) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px);
  overflow: hidden;
  z-index: 99999 !important;
}
body.sh-body .select2-container--default .select2-results > .select2-results__options{
  max-height: 280px !important;
  padding: 6px !important;
}
body.sh-body .select2-container--default .select2-results__option{
  color: rgba(255,255,255,.92) !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  margin: 2px 0 !important;
}
body.sh-body .select2-container--default .select2-results__option--highlighted[aria-selected]{
  background: var(--sh-hover-grad) !important;
  color: rgba(255,255,255,.98) !important;
}

/* =========================================================
   10) REGISTER (WHMCS "field" inputs)
   ========================================================= */
body.sh-body #registration input.field,
body.sh-body #registration select.field,
body.sh-body #registration textarea.field{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
  width: 100%;
  padding: .55rem .75rem;
}
body.sh-body #registration input.field::placeholder,
body.sh-body #registration textarea.field::placeholder{
  color: rgba(255,255,255,.60) !important;
  opacity: 1 !important;
}
body.sh-body #registration .form-group.prepend-icon{ position: relative; }
body.sh-body #registration .form-group.prepend-icon .field-icon{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: .85;
  z-index: 2;
}
body.sh-body #registration .form-group.prepend-icon .field{ padding-left: 42px !important; }

/* =========================================================
   11) VIEWTICKET + WHMCS markdown editor (.md-editor)
   ========================================================= */
body.sh-body .view-ticket .ticket-reply{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--sh-radius) !important;
  background: rgba(255,255,255,.04) !important;
  overflow: hidden;
}
body.sh-body .view-ticket .ticket-reply .posted-by{
  background: rgba(10,14,28,.70) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.86) !important;
  padding: 10px 14px !important;
}
body.sh-body .view-ticket .ticket-reply .message{
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
}

/* File inputs dark */
body.sh-body .custom-file-label{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.85) !important;
  border-radius: 12px !important;
}
body.sh-body .custom-file-label::after{
  background: var(--sh-hover-grad) !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
}

/* =========================================================
   12) FOOTER
   ========================================================= */
body.sh-body #footer,
body.sh-body footer.footer{
  margin-top: auto;
  background: rgba(255,255,255,.03) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: var(--sh-muted) !important;
}
body.sh-body #footer a{
  color: rgba(255,255,255,.96) !important;
  font-weight: 800 !important;
  opacity: .9;
}
body.sh-body #footer a:hover{ opacity: 1; text-decoration: underline; }

/* =========================================================
   ANNOUNCEMENTS (list) - premium layout
   ========================================================= */
body.sh-body .announcements .announcement{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--sh-radius);
  padding: 18px 18px;
  margin: 14px 0;
}
body.sh-body .announcements .announcement:hover{
  background: var(--sh-hover-grad);
  border-color: var(--sh-hover-br);
  box-shadow: var(--sh-hover-glow);
}

/* Title row + edit button */
body.sh-body .announcements .announcement h1{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
}
body.sh-body .announcements .announcement h1 a{
  color: rgba(255,255,255,.96) !important;
  font-weight: 950;
  text-decoration: none !important;
}
body.sh-body .announcements .announcement h1 a:hover{
  color: rgba(255,255,255,.98) !important;
  text-decoration: underline !important;
}

/* Edit button appears only on hover (class already present) */
body.sh-body .announcements .announcement .show-on-hover{
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .15s ease, transform .15s ease;
}
body.sh-body .announcements .announcement:hover .show-on-hover{
  opacity: 1;
  transform: translateY(0);
}

/* Date */
body.sh-body .announcements .text-muted{
  color: rgba(255,255,255,.70) !important;
}

/* Article text */
body.sh-body .announcements .announcement article{
  color: rgba(255,255,255,.88);
  margin: 10px 0 14px;
  background-color: #1a2031;
}
body.sh-body .announcements .announcement article p{
  margin-bottom: 10px;
}

/* Continue button */
body.sh-body .announcements .announcement .btn.btn-default{
  border-radius: 999px !important;
}

/* Pagination */
body.sh-body .pagination .page-link{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
}
body.sh-body .pagination .page-link:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}
body.sh-body .pagination .page-item.active .page-link{
  background: rgba(106,167,255,.18) !important;
  border-color: rgba(106,167,255,.22) !important;
}
body.sh-body .pagination .page-item.disabled .page-link{
  opacity: .55;
}

/* =========================================================
   GLOBAL WHMCS MARKDOWN EDITOR (.md-editor) - remove white bars
   Applies to: viewticket + submit ticket + any markdown-editor
   ========================================================= */

/* Wrapper global */
body.sh-body .md-editor{
  background: rgba(10,14,28,.70) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Header / toolbar (the white top bar) */
body.sh-body .md-editor .md-header,
body.sh-body .md-editor .btn-toolbar{
  background: rgba(10,14,28,.78) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
}

body.sh-body .md-editor .btn-toolbar{
  padding: 8px 10px !important;
}

/* Toolbar buttons (Preview / fullscreen / icons) */
body.sh-body .md-editor .btn-toolbar .btn,
body.sh-body .md-editor .btn-toolbar a{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 999px !important;
}
body.sh-body .md-editor .btn-toolbar .btn:hover,
body.sh-body .md-editor .btn-toolbar a:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

/* Input area (big editor frame) */
body.sh-body .md-editor > .md-input,
body.sh-body .md-editor textarea,
body.sh-body textarea.markdown-editor{
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
  outline: none !important;
}

/* Internal separators */
body.sh-body .md-editor > .md-input{
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Footer / statusbar (white bottom bar lines/words/enregistré) */
body.sh-body .md-editor .md-footer,
body.sh-body .md-editor .markdown-editor-status,
body.sh-body .md-editor .md-footer *{
  background: rgba(10,14,28,.78) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.70) !important;
}

/* Preview */
body.sh-body .md-editor .md-preview{
  background: rgba(10,14,28,.88) !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
}

/* Fullscreen controls icon */
body.sh-body .md-editor .md-fullscreen-controls a{
  color: rgba(255,255,255,.80) !important;
}
body.sh-body .md-editor .md-fullscreen-controls a:hover{
  color: rgba(255,255,255,.96) !important;
}

/* =========================================================
   PRODUCT DETAILS (clientareaproductdetails) - SolidHeberg premium
   ========================================================= */

/* Overview wrapper */
body.sh-body .sh-prod-overview{
  position: relative;
}

/* Head row: product chip + status pill */
body.sh-body .sh-prod-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 14px;
}
body.sh-body .sh-prod-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
body.sh-body .sh-prod-chip__icon{
  width: 34px; height: 34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--sh-hover-grad);
  border: 1px solid var(--sh-hover-br);
  box-shadow: var(--sh-hover-glow);
  color: rgba(255,255,255,.96);
}
body.sh-body .sh-prod-chip__name{
  font-weight: 950;
  letter-spacing: -.2px;
  color: rgba(255,255,255,.96);
  line-height: 1.1;
}
body.sh-body .sh-prod-chip__group{
  color: rgba(255,255,255,.70);
  font-weight: 800;
  font-size: 12px;
  margin-top: 2px;
}

/* Status pill */
body.sh-body .sh-status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  color: rgba(255,255,255,.92);
}
body.sh-body .sh-status-pill--active{
  border-color: rgba(72,199,116,.30);
  background: linear-gradient(135deg, rgba(72,199,116,.18), rgba(255,255,255,.02));
}
body.sh-body .sh-status-pill--suspended,
body.sh-body .sh-status-pill--terminated,
body.sh-body .sh-status-pill--cancelled{
  border-color: rgba(255,86,86,.30);
  background: linear-gradient(135deg, rgba(255,86,86,.18), rgba(255,255,255,.02));
}
body.sh-body .sh-status-pill--pending{
  border-color: rgba(255,193,7,.30);
  background: linear-gradient(135deg, rgba(255,193,7,.18), rgba(255,255,255,.02));
}

/* Grid layout */
body.sh-body .sh-prod-grid{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 14px;
}
@media (max-width: 991px){
  body.sh-body .sh-prod-grid{ grid-template-columns: 1fr; }
}

/* Left column */
body.sh-body .sh-prod-left .product-status{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
}
body.sh-body .sh-prod-left .product-status .product-icon{
  padding: 18px 14px 10px;
}
body.sh-body .sh-prod-left .product-status .product-icon h3{
  font-weight: 950;
  letter-spacing: -.2px;
  margin-top: 10px;
}
body.sh-body .sh-prod-left .product-status .product-icon h4{
  color: rgba(255,255,255,.70);
  font-weight: 850;
  margin-bottom: 0;
}
body.sh-body .sh-prod-left .product-status .fa-circle{
  color: rgba(106,167,255,.22) !important;
}
body.sh-body .sh-prod-left .product-status-text{
  padding: 12px 14px;
  background: rgba(10,14,28,.60);
  border-top: 1px solid rgba(255,255,255,.10);
  font-weight: 950;
  text-align: center;
}

/* Actions */
body.sh-body .sh-prod-actions{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
body.sh-body .sh-action-btn{
  border-radius: 999px !important;
  padding: 12px 14px !important;
}
body.sh-body .sh-action-btn.btn-success{
  background: linear-gradient(135deg, rgba(72,199,116,.92), rgba(106,167,255,.35)) !important;
  border: 0 !important;
  color: #071526 !important;
}
body.sh-body .sh-action-btn.btn-success:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Right column meta */
body.sh-body .sh-prod-meta{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: var(--sh-radius);
  padding: 14px;
}
body.sh-body .sh-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 10px;
  border-radius: 14px;
}
body.sh-body .sh-meta:hover{
  background: var(--sh-hover-grad);
  border: 1px solid var(--sh-hover-br);
  box-shadow: var(--sh-hover-glow);
}
body.sh-body .sh-meta__k{
  color: rgba(255,255,255,.72);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
body.sh-body .sh-meta__v{
  color: rgba(255,255,255,.96);
  font-weight: 950;
  text-align: right;
}
body.sh-body .sh-meta--warn{
  border: 1px solid rgba(255,193,7,.20);
}

/* Hook output container (safe) */
body.sh-body .sh-hook-output{
  margin-top: 12px;
}

/* Tabs: remove white bg + premium pills */
body.sh-body .product-details-tab-container.bg-white{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: var(--sh-radius) !important;
  padding: 14px !important;
}

/* Nav tabs as pills */
body.sh-body .nav.nav-tabs.responsive-tabs-sm{
  border-bottom: 0 !important;
  gap: 8px;
}
body.sh-body .nav.nav-tabs.responsive-tabs-sm .nav-link{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 900;
  border-radius: 999px !important;
  padding: 10px 12px !important;
}
body.sh-body .nav.nav-tabs.responsive-tabs-sm .nav-link:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}
body.sh-body .nav.nav-tabs.responsive-tabs-sm .nav-link.active{
  background: rgba(106,167,255,.18) !important;
  border-color: rgba(106,167,255,.22) !important;
}

/* Tab content spacing */
body.sh-body .product-details-tab-container .tab-pane{
  padding-top: 6px;
}

/* Little buttons inside module client area */
body.sh-body .module-client-area .btn{
  border-radius: 999px !important;
}

/* =========================================================
   PREMIUM 2.0 PATCH
   - Invoices redesign
   - Global table hover everywhere
   - Notifications popover above navbar
   ========================================================= */

/* Bootstrap popover (accountNotifications) */
body.sh-body .popover{
  z-index: 999999 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(10,14,28,.98) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px);
}
body.sh-body .popover .popover-header{
  background: rgba(10,14,28,.98) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 950 !important;
}
body.sh-body .popover .popover-body{
  color: rgba(255,255,255,.90) !important;
}
body.sh-body .popover .arrow::before,
body.sh-body .popover .arrow::after{
  border-bottom-color: rgba(10,14,28,.98) !important;
  border-top-color: rgba(10,14,28,.98) !important;
}

/* Liste notifications dans popover */
body.sh-body .popover .client-alerts{
  list-style: none;
  padding: 0;
  margin: 0;
}
body.sh-body .popover .client-alerts li{
  border-radius: 12px;
  overflow: hidden;
}
body.sh-body .popover .client-alerts li a{
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}
body.sh-body .popover .client-alerts li a:hover{
  background: var(--sh-hover-grad) !important;
  box-shadow: var(--sh-hover-glow) !important;
  border: 1px solid var(--sh-hover-br);
}
body.sh-body .popover .client-alerts .message{
  color: rgba(255,255,255,.88);
}

/* ---------- 2) GLOBAL TABLE HOVER (toutes les pages avec tableaux) ---------- */
/* Beaucoup de tables WHMCS n'ont pas .table-hover => on force le hover sur tbody */
body.sh-body table.table tbody tr:hover > td,
body.sh-body table.table tbody tr:hover > th,
body.sh-body table.table-list tbody tr:hover > td,
body.sh-body table.table-list tbody tr:hover > th,
body.sh-body table.dataTable tbody tr:hover > td,
body.sh-body table.dataTable tbody tr:hover > th{
  background: var(--sh-hover-grad) !important;
}

/* Cursor & click feel */
body.sh-body table.table-list tbody tr,
body.sh-body table.dataTable tbody tr{
  cursor: pointer;
}

/* Badges status (invoices / services / etc.) */
body.sh-body .label.status,
body.sh-body .badge.status{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Variantes de status (WHMCS) */
body.sh-body .status-paid{ background: linear-gradient(135deg, rgba(72,199,116,.22), rgba(255,255,255,.02)) !important; border-color: rgba(72,199,116,.28) !important; }
body.sh-body .status-unpaid{ background: linear-gradient(135deg, rgba(255,193,7,.20), rgba(255,255,255,.02)) !important; border-color: rgba(255,193,7,.26) !important; }
body.sh-body .status-overdue{ background: linear-gradient(135deg, rgba(255,86,86,.20), rgba(255,255,255,.02)) !important; border-color: rgba(255,86,86,.26) !important; }
body.sh-body .status-cancelled,
body.sh-body .status-canceled{ background: linear-gradient(135deg, rgba(255,86,86,.16), rgba(255,255,255,.02)) !important; border-color: rgba(255,86,86,.22) !important; }
body.sh-body .status-refunded{ background: linear-gradient(135deg, rgba(106,167,255,.16), rgba(255,255,255,.02)) !important; border-color: rgba(106,167,255,.22) !important; }
body.sh-body .status-draft{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; }

/* ---------- 3) INVOICES PREMIUM 2.0 (DataTables WHMCS) ---------- */
/* Container carte premium */
body.sh-body .table-container{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: var(--sh-radius);
  padding: 14px;
  box-shadow: var(--sh-shadow);
}

/* Table itself */
body.sh-body #tableInvoicesList{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.02) !important;
}

/* Head row */
body.sh-body #tableInvoicesList thead th{
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 950 !important;
  letter-spacing: .2px;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  padding: 14px 14px !important;
}

/* Body cells */
body.sh-body #tableInvoicesList tbody td{
  padding: 14px 14px !important;
  vertical-align: middle !important;
  color: rgba(255,255,255,.92) !important;
}

/* Row hover (more punch) */
body.sh-body #tableInvoicesList tbody tr:hover > td{
  background: var(--sh-hover-grad) !important;
  box-shadow: inset 0 0 0 1px var(--sh-hover-br);
}

/* DataTables top controls */
body.sh-body #tableInvoicesList_wrapper .dataTables_length,
body.sh-body #tableInvoicesList_wrapper .dataTables_filter{
  margin: 10px 0 12px !important;
}
body.sh-body #tableInvoicesList_wrapper .dataTables_length label,
body.sh-body #tableInvoicesList_wrapper .dataTables_filter label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px;
  color: rgba(255,255,255,.88) !important;
  font-weight: 900 !important;
}

/* Search input & page size select = pills */
body.sh-body #tableInvoicesList_wrapper .dataTables_filter input{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.96) !important;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  height: 40px !important;
  outline: none !important;
}
body.sh-body #tableInvoicesList_wrapper .dataTables_filter input:focus{
  border-color: rgba(106,167,255,.55) !important;
  box-shadow: 0 0 0 .2rem rgba(106,167,255,.18) !important;
  background-color: #0c1225 !important;
}

body.sh-body #tableInvoicesList_wrapper .dataTables_length select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.96) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  height: 40px !important;
}

/* Pagination */
body.sh-body #tableInvoicesList_wrapper .pagination{ margin: 10px 0 0 !important; }
body.sh-body #tableInvoicesList_wrapper .page-link{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
}
body.sh-body #tableInvoicesList_wrapper .page-link:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}
body.sh-body #tableInvoicesList_wrapper .page-item.active .page-link{
  background: rgba(106,167,255,.18) !important;
  border-color: rgba(106,167,255,.22) !important;
}

/* Loading box */
body.sh-body #tableLoading{
  color: rgba(255,255,255,.88) !important;
}

/* Balance pill in header */
body.sh-body .sh-balance-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-weight: 950;
}
body.sh-body .sh-balance-pill .sh-balance-amount{
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.96);
}
body.sh-body .sh-balance-pill:hover{
  background: var(--sh-hover-grad);
  border-color: var(--sh-hover-br);
  box-shadow: var(--sh-hover-glow);
}


/* =========================================================
   13) APP SHELL - VeryCloud-inspired rail navigation
   ========================================================= */
:root{
  --sh-rail-w: 288px;
  --sh-topbar-h: 68px;
}

/* Topbar sticky (SaaS feel) */
body.sh-body .sh-topbar{
  position: sticky;
  top: 0;
  z-index: 9000;
  backdrop-filter: blur(14px);
}

/* Brand + search (pill) */
body.sh-body .sh-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.96) !important;
  font-weight: 950;
  text-decoration: none !important;
}
body.sh-body .sh-brand:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

body.sh-body .sh-search{
  display:flex;
  align-items:center;
  gap:10px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
body.sh-body .sh-search input{
  width: 240px;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  color: rgba(255,255,255,.92) !important;
}
body.sh-body .sh-search input::placeholder{ color: rgba(255,255,255,.60) !important; }

/* Desktop rail sizing */
@media (min-width: 992px){
  body.sh-body .sh-layout{ align-items: flex-start; }
  body.sh-body .sh-sidebar{
    flex: 0 0 var(--sh-rail-w) !important;
    max-width: var(--sh-rail-w) !important;
    position: sticky;
    top: calc(var(--sh-topbar-h) + 14px);
    max-height: calc(100vh - (var(--sh-topbar-h) + 28px));
    overflow: auto;
  }
  body.sh-body .sh-content{
    flex: 1 1 auto;
    max-width: calc(100% - var(--sh-rail-w)) !important;
  }
}

/* Rail nav card */
body.sh-body .sh-rail-nav{
  background: var(--sh-rail-bg) !important;
  border: 1px solid var(--sh-rail-border) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: var(--sh-shadow-soft) !important;
  padding: 12px !important;
}

body.sh-body .sh-rail__section-title{
  font-size: 11px;
  letter-spacing: .9px;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(255,255,255,.52);
  margin: 10px 10px 8px;
}

body.sh-body .sh-rail-nav ul.navbar-nav{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}

/* Link base: dark pill + icon chip (VeryCloud vibe) */
body.sh-body .sh-rail-nav ul.navbar-nav > li > a{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  width: 100%;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid var(--sh-rail-item-br) !important;
  background: var(--sh-rail-item) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.96) !important;
  overflow: hidden !important;
}

/* Icon chip */
body.sh-body .sh-rail-nav ul.navbar-nav > li > a i{
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--sh-rail-icon-bg);
  border: 1px solid var(--sh-rail-icon-br);
  color: rgba(255,255,255,.92);
}

/* Hover glow overlay */
body.sh-body .sh-rail-nav ul.navbar-nav > li > a::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--sh-hover-grad) !important;
  opacity: 0 !important;
  transition: opacity .15s ease !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.sh-body .sh-rail-nav ul.navbar-nav > li > a > *{ position: relative !important; z-index: 1 !important; }
body.sh-body .sh-rail-nav ul.navbar-nav > li > a:hover::before{ opacity: 1 !important; }
body.sh-body .sh-rail-nav ul.navbar-nav > li > a:hover{
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

/* Active state (WHMCS sets .active on li) */
body.sh-body .sh-rail-nav ul.navbar-nav > li.active > a,
body.sh-body .sh-rail-nav ul.navbar-nav > li > a.active{
  background: var(--sh-rail-active-grad) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
body.sh-body .sh-rail-nav ul.navbar-nav > li.active > a i,
body.sh-body .sh-rail-nav ul.navbar-nav > li > a.active i{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.22);
}

/* Rail dropdowns: render as inline list */
body.sh-body .sh-rail-nav .dropdown-menu{
  position: static !important;
  float: none !important;
  transform: none !important;
  margin: 6px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.sh-body .sh-rail-nav .dropdown-menu li.dropdown-item > a.dropdown-item{
  border-radius: 12px !important;
  border: 1px solid var(--sh-rail-item-br) !important;
  padding: 10px 12px !important;
  margin: 6px 0 0 10px;
  background: var(--sh-rail-item) !important;
  color: rgba(255,255,255,.92) !important;
}
body.sh-body .sh-rail-nav .dropdown-menu li.dropdown-item > a.dropdown-item:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

/* Mobile: rail offcanvas */
@media (max-width: 991px){
  body.sh-body .sh-sidebar{
    position: fixed !important;
    left: 12px;
    right: 12px;
    top: 82px;
    bottom: 12px;
    z-index: 9500;
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  body.sh-body.sh-rail-open .sh-sidebar{ opacity: 1; transform: none; pointer-events: auto; }
  body.sh-body.sh-rail-open::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9000;
  }
}

/* =========================================================
   14) TOP NAV MODE (disable rail offcanvas on mobile)
   If you keep navigation on top, we keep sidebar as normal stacking.
   ========================================================= */
@media (max-width: 991px){
  body.sh-body.sh-nav-top .sh-sidebar{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body.sh-body.sh-nav-top::before{
    content: none !important;
    display: none !important;
  }
  body.sh-body.sh-nav-top,
  body.sh-body.sh-nav-top #main-body,
  body.sh-body.sh-nav-top .sh-main,
  body.sh-body.sh-nav-top .primary-content{
    overflow-x: hidden !important;
  }
}

/* =========================================================
   VIEWTICKET - Sidebar CTA buttons (stacked, full width)
   - Removes cramped two-column buttons inside Ticket Information card
   ========================================================= */

/* Ticket Information is the first card in the left sidebar on viewticket */
body.sh-body .view-ticket .sh-sidebar .sidebar > .card.card-sidebar:first-child .card-footer,
body.sh-body .view-ticket .sh-sidebar .sidebar > .mb-3.card.card-sidebar:first-child .card-footer,
body.sh-body .view-ticket .sh-sidebar .sidebar > .card.card-sidebar:first-of-type .card-footer,
body.sh-body .view-ticket .sh-sidebar .sidebar > .mb-3.card.card-sidebar:first-of-type .card-footer{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
}

body.sh-body .view-ticket .sh-sidebar .sidebar > .card.card-sidebar:first-child .card-footer .btn,
body.sh-body .view-ticket .sh-sidebar .sidebar > .mb-3.card.card-sidebar:first-child .card-footer .btn,
body.sh-body .view-ticket .sh-sidebar .sidebar > .card.card-sidebar:first-of-type .card-footer .btn,
body.sh-body .view-ticket .sh-sidebar .sidebar > .mb-3.card.card-sidebar:first-of-type .card-footer .btn{
  width: 100% !important;
  min-height: 48px;
  padding: 12px 14px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
  float: none !important;
  justify-content: center !important;
}

/* If the buttons are wrapped in columns, force them to full width */
body.sh-body .view-ticket .sh-sidebar .sidebar > .card.card-sidebar:first-child .card-footer [class*="col-"],
body.sh-body .view-ticket .sh-sidebar .sidebar > .mb-3.card.card-sidebar:first-child .card-footer [class*="col-"],
body.sh-body .view-ticket .sh-sidebar .sidebar > .card.card-sidebar:first-of-type .card-footer [class*="col-"],
body.sh-body .view-ticket .sh-sidebar .sidebar > .mb-3.card.card-sidebar:first-of-type .card-footer [class*="col-"]{
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Disabled state nicer */
body.sh-body .view-ticket .sh-sidebar .sidebar .card-footer .btn:disabled,
body.sh-body .view-ticket .sh-sidebar .sidebar .card-footer .btn.disabled{
  opacity: .75 !important;
  cursor: not-allowed !important;
}
/* =========================================================
   VIEWTICKET - Ticket Information: stack Reply/Close buttons
   (V6 safe patch)
   ========================================================= */

/* Footer actions (Répondre / Fermer) => en colonne + full width */
body.sh-body .view-ticket .ticket-information .card-footer,
body.sh-body .view-ticket .sidebar .ticket-information .card-footer,
body.sh-body .view-ticket .sh-sidebar .ticket-information .card-footer,
body.sh-body .view-ticket .sh-sidebar .sidebar > .card.card-sidebar:first-child .card-footer{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Désactive les floats éventuels */
body.sh-body .view-ticket .ticket-information .card-footer::after{
  content: none !important;
}
body.sh-body .view-ticket .ticket-information .card-footer .pull-left,
body.sh-body .view-ticket .ticket-information .card-footer .pull-right{
  float: none !important;
}

/* Boutons full width */
body.sh-body .view-ticket .ticket-information .card-footer .btn{
  width: 100% !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px;
  padding: 12px 14px !important;
  border-radius: 999px !important;
  font-weight: 950 !important;
}

/* Si WHMCS les met en colonnes (col-6 / row) */
body.sh-body .view-ticket .ticket-information .card-footer .row{
  flex-direction: column !important;
}
body.sh-body .view-ticket .ticket-information .card-footer .row > [class*="col-"]{
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* =========================================================
   15) PATCHES UI - zones qui restent "blanches" par défaut
   - Modals (langue / paiement / system)
   - Input groups (icônes à gauche, reveal password)
   - Card footer, text-muted, list-group active, badges
   - Checkbox/radio, progress
   ========================================================= */

/* Global muted */
body.sh-body .text-muted{ color: var(--sh-muted) !important; }

/* Card footer sometimes stays light */
body.sh-body .card-footer{
  background: rgba(10,14,28,.55) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.72) !important;
}

/* Input groups (login icons, prepend/append) */
body.sh-body .input-group-text{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.86) !important;
  border-radius: 14px !important;
}
body.sh-body .input-group-merge .input-group-prepend .input-group-text{
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
body.sh-body .input-group-merge .form-control{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
body.sh-body .input-group-append .btn,
body.sh-body .input-group-prepend .btn{
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 14px !important;
}
body.sh-body .btn-reveal-pw{
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

/* List groups active state */
body.sh-body .list-group-item.active,
body.sh-body .list-group-item-action.active{
  background: rgba(106,167,255,.18) !important;
  border-color: rgba(106,167,255,.22) !important;
  color: rgba(255,255,255,.96) !important;
}
body.sh-body .list-group-item-action:hover{
  background: var(--sh-hover-grad) !important;
  border-color: var(--sh-hover-br) !important;
  box-shadow: var(--sh-hover-glow) !important;
}

/* Small custom badge (dashboard panels) */
body.sh-body .badge.sh-badge{
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 950 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}

/* Panel header button */
body.sh-body .sh-panel-btn{
  border-radius: 999px !important;
  padding: 8px 12px !important;
}

/* Ghost variant */
body.sh-body .sh-btn--ghost{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.94) !important;
}

/* Modals (Bootstrap 4) */
body.sh-body .modal-content{
  background: rgba(10,14,28,.98) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.55) !important;
  backdrop-filter: blur(12px);
}
body.sh-body .modal-header{
  background: rgba(10,14,28,.78) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
body.sh-body .modal-footer{
  background: rgba(10,14,28,.78) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
body.sh-body .modal-title{ color: rgba(255,255,255,.96) !important; font-weight: 950 !important; }
body.sh-body .modal-body{ color: rgba(255,255,255,.92) !important; }
body.sh-body .modal .close{
  color: rgba(255,255,255,.88) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
body.sh-body .modal-backdrop.show{ opacity: .66; }

/* Checkbox / radio (login rememberme etc.) */
body.sh-body .form-check-input,
body.sh-body .custom-control-input{
  accent-color: rgba(106,167,255,.92);
}
body.sh-body .form-check-input{
  background-color: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
}
body.sh-body .form-check-input:checked{
  background-color: rgba(106,167,255,.90);
  border-color: rgba(106,167,255,.55);
}

/* Bootstrap custom controls (custom-checkbox/radio) */
body.sh-body .custom-control-label::before{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}
body.sh-body .custom-control-input:checked ~ .custom-control-label::before{
  background: rgba(106,167,255,.85) !important;
  border-color: rgba(106,167,255,.55) !important;
}
body.sh-body .custom-control-input:focus ~ .custom-control-label::before{
  box-shadow: 0 0 0 .2rem rgba(106,167,255,.18) !important;
}
body.sh-body .custom-control-label::after{
  filter: brightness(2.2);
}

/* Progress (password strength) */
body.sh-body .progress{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Little separators */
body.sh-body hr{ border-top: 1px solid rgba(255,255,255,.10) !important; }
body.sh-body .dropdown-divider{ border-top: 1px solid rgba(255,255,255,.10) !important; }