/* TURBOHOST preview-only client/auth repairs — 20261024-r1.
   Scoped to the new template; leave WHMCS and corporate source CSS untouched. */
body.th-layout-client,
body.th-layout-client.primary-bg-color,
body.th-layout-auth,
body.th-layout-auth.primary-bg-color {
  background: radial-gradient(ellipse at 12% 0%, #001641 0%, transparent 60%), #00050e;
  background-attachment: fixed;
  color: #edf3ff;
}
body.th-layout-client #main-body,
body.th-layout-client #main-body > .container,
body.th-layout-client #main-body > .container > .row,
body.th-layout-auth #main-body,
body.th-layout-auth #main-body > .container,
body.th-layout-client .primary-bg-color,
body.th-layout-auth .primary-bg-color {
  background-color: transparent;
}
body.th-layout-client .master-breadcrumb,
body.th-layout-auth .master-breadcrumb {
  background: #0d1e3c;
  color: #dce9ff;
  border-color: #21365b;
}
body.th-layout-client .master-breadcrumb a { color: #a9ccff; }

/* The old Twenty-One table skin painted white cells onto navy panels. */
body.th-layout-client #main-body table.table,
body.th-layout-client #main-body table.dataTable,
body.th-layout-client #main-body table.table-list {
  background-color: #0b1933;
  color: #dce9ff;
}
body.th-layout-client #main-body table.table thead th,
body.th-layout-client #main-body table.dataTable thead th,
body.th-layout-client #main-body table.table-list thead th {
  background: #102449;
  color: #edf3ff;
  border-color: #29436b;
}
body.th-layout-client #main-body table.table tbody tr > td,
body.th-layout-client #main-body table.table tbody tr > th,
body.th-layout-client #main-body table.dataTable tbody tr > td,
body.th-layout-client #main-body table.table-list tbody tr > td {
  background-color: #0d1e3c;
  color: #dce9ff;
  border-color: #29436b;
}
body.th-layout-client #main-body table.table tbody tr:nth-child(even) > td,
body.th-layout-client #main-body table.dataTable tbody tr:nth-child(even) > td,
body.th-layout-client #main-body table.table-list tbody tr:nth-child(even) > td {
  background-color: #11264b;
}
body.th-layout-client #main-body table.table tbody tr:hover > td,
body.th-layout-client #main-body table.dataTable tbody tr:hover > td,
body.th-layout-client #main-body table.table-list tbody tr:hover > td {
  background-color: #174078;
}
body.th-layout-client #main-body table.table a,
body.th-layout-client #main-body table.dataTable a,
body.th-layout-client #main-body table.table-list a { color: #a9ccff; }
body.th-layout-client #main-body .dataTables_wrapper .dataTables_info,
body.th-layout-client #main-body .dataTables_wrapper .dataTables_length,
body.th-layout-client #main-body .dataTables_wrapper .dataTables_filter { color: #dce9ff; }

/* Transparent login canvas; keep native credentials and OAuth form logic. */
body.th-layout-auth #main-body .login-form .form-control,
body.th-layout-auth #main-body .login-form input[type="email"],
body.th-layout-auth #main-body .login-form input[type="password"] {
  background: #041125;
  color: #edf3ff;
  border-color: #34517b;
}
body.th-layout-auth #main-body .login-form .input-group-text {
  color: #c5d5ee;
  background: #102449;
  border-color: #34517b;
}
body.th-layout-auth #main-body .login-form .form-control::placeholder { color: #9bb4d8; }
@media (max-width: 700px) {
  body.th-layout-client #main-body table { width: 100%; }
}

/* 2026-10-24: compact icon rail, based on approved March screenshot. */
body.th-layout-client { --th-sidebar-width: 108px; }
body.th-layout-client #th-shell-nav {
  width: 108px;
  padding: 20px 7px 14px;
  background: linear-gradient(180deg, #001641, #000b24);
  border-right: 1px solid #193458;
}
body.th-layout-client #th-shell-nav .th-shell-brand {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 2px 2px 16px;
}
body.th-layout-client #th-shell-nav .th-shell-brand img {
  width: 94px;
  max-width: 100%;
  max-height: 50px;
}
body.th-layout-client #th-client-links.th-client-rail {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}
body.th-layout-client #th-client-links.th-client-rail .th-eyebrow {
  font-size: 9px;
  letter-spacing: .12em;
  text-align: center;
  margin: 6px 0 8px;
}
body.th-layout-client #th-client-links.th-client-rail > a.th-rail-link,
body.th-layout-client #th-client-links.th-client-rail > details.th-rail-more > summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 75px;
  width: 100%;
  margin: 0;
  padding: 9px 3px;
  color: #bed5f6;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  line-height: 1.22;
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
}
body.th-layout-client #th-client-links.th-client-rail > .th-rail-link i,
body.th-layout-client #th-client-links.th-client-rail > .th-rail-more > summary i {
  display: block;
  font-size: 24px;
  color: #7eaff5;
}
body.th-layout-client #th-client-links.th-client-rail > a:hover,
body.th-layout-client #th-client-links.th-client-rail > a:focus-visible,
body.th-layout-client #th-client-links.th-client-rail > details > summary:hover,
body.th-layout-client #th-client-links.th-client-rail > details[open] > summary {
  background: #0d2957;
  color: #fff;
}
body.th-layout-client #th-client-links.th-client-rail > a:hover i,
body.th-layout-client #th-client-links.th-client-rail > details > summary:hover i {
  color: #53bcff;
}
body.th-layout-client #th-client-links.th-client-rail > .th-rail-more {
  position: relative;
  padding: 0;
  margin: 0;
}
body.th-layout-client #th-client-links.th-client-rail > .th-rail-more > summary {
  list-style: none;
}
body.th-layout-client #th-client-links.th-client-rail > .th-rail-more > summary::-webkit-details-marker {
  display: none;
}
body.th-layout-client #th-client-links .th-rail-more-panel {
  position: fixed;
  z-index: 200;
  top: auto;
  left: 108px;
  width: min(270px, calc(100vw - 125px));
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px;
  background: #091c3a;
  border: 1px solid #2b4772;
  border-radius: 12px;
  box-shadow: 0 20px 35px #0008;
}
body.th-layout-client #th-client-links .th-rail-more-panel > a {
  display: block;
  padding: 10px;
  border-radius: 8px;
  color: #e0edff;
  font-size: 13px;
  text-decoration: none;
}
body.th-layout-client #th-client-links .th-rail-more-panel > a:hover {
  background: #173e75;
}
body.th-layout-client #th-client-links .th-rail-more-panel .navbar-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body.th-layout-client #th-shell-nav .th-native-account {
  font-size: 10px;
  overflow-wrap: anywhere;
  margin-top: 14px;
}
/* Service detail only: original action/sidebar beside content instead of below. */
@media (min-width: 1001px) {
  body.th-layout-client:has(#main-body .product-details)
    #main-body > .container > .row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
  body.th-layout-client:has(#main-body .product-details)
    #main-body > .container > .row > .col-lg-4 {
      order: 1;
      flex: 0 0 215px;
      width: 215px;
      max-width: 215px;
      padding: 0;
    }
  body.th-layout-client:has(#main-body .product-details)
    #main-body > .container > .row > .primary-content {
      order: 2;
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      max-width: none;
      padding: 0;
    }
  body.th-layout-client:has(#main-body .product-details)
    #main-body > .container > .row > .col-lg-4 > .sidebar,
  body.th-layout-client:has(#main-body .product-details)
    #main-body > .container > .row > .col-lg-4 > .sidebar.d-lg-block {
      display: flex;
      flex-direction: column;
      gap: 12px;
      columns: auto;
    }
}
@media (max-width: 700px) {
  body.th-layout-client { --th-sidebar-width: 0px; }
  body.th-layout-client #th-shell-nav { width: 100%; padding: 12px 16px; }
  body.th-layout-client #th-shell-nav .th-shell-brand { width: auto; padding: 0; }
  body.th-layout-client #th-client-links.th-client-rail { display: none; width: 100%; margin-top: 12px; }
  body.th-layout-client #th-client-links.th-client-rail.th-mobile-open { display: flex; }
  body.th-layout-client #th-client-links.th-client-rail > a.th-rail-link,
  body.th-layout-client #th-client-links.th-client-rail > details.th-rail-more > summary {
    flex-direction: row;
    min-height: 48px;
    justify-content: flex-start;
    padding: 9px 14px;
    text-align: left;
  }
  body.th-layout-client #th-client-links.th-client-rail > a.th-rail-link i,
  body.th-layout-client #th-client-links.th-client-rail > details > summary i { font-size: 18px; width: 22px; }
  body.th-layout-client #th-client-links .th-rail-more-panel { position: static; width: 100%; max-height: 40vh; }
}