/**
 * Account / Mis Datos — shell visual for WHMCS 9 account tabs + forms.
 * Scoped to pages that use .hx-account-tabs (clientareadetailslinks).
 */

body:not(.minimal) .hx-account-tabs.nav-material-horizontal {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px !important;
  margin: 4px 0 22px !important;
  padding: 4px 0 14px !important;
  border-bottom: 1px solid var(--shell-topbar-border, #e4e9ef);
  list-style: none;
  clear: both;
}

body:not(.minimal) .hx-account-tabs > li {
  margin: 0 !important;
  float: none !important;
  display: inline-flex !important;
}

body:not(.minimal) .hx-account-tabs > li > a {
  display: inline-flex !important;
  align-items: center;
  padding: 10px 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #68788c !important;
  background: transparent !important;
  text-decoration: none !important;
  line-height: 1.3;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

body:not(.minimal) .hx-account-tabs > li > a:hover,
body:not(.minimal) .hx-account-tabs > li > a:focus {
  color: var(--shell-ink, #0a2038) !important;
  background: #f1f5f9 !important;
}

body:not(.minimal) .hx-account-tabs > li.active > a,
body:not(.minimal) .hx-account-tabs > li.active > a:hover,
body:not(.minimal) .hx-account-tabs > li.active > a:focus {
  color: #fff !important;
  background: linear-gradient(135deg, #213a54 0%, #0a2038 100%) !important;
  box-shadow: 0 2px 8px rgba(10, 32, 56, 0.18);
}

/* Kill Hexa underline bar under material tabs */
body:not(.minimal) .hx-account-tabs.nav-material > li > a:after,
body:not(.minimal) .hx-account-tabs.nav-material-horizontal > li > a:after,
body:not(.minimal) .hx-account-tabs.nav-material > li.active > a:after {
  display: none !important;
  content: none !important;
}

/* Page chrome when account tabs are present */
body:not(.minimal) .hexa-content.main-content:has(.hx-account-tabs),
body:not(.minimal) .main-content:has(.hx-account-tabs) {
  /* soft card feel around account content */
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .page-header,
body:not(.minimal) .main-content:has(.hx-account-tabs) .page-header {
  margin-bottom: 8px;
}

/* Wells / section cards */
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .well,
body:not(.minimal) .main-content:has(.hx-account-tabs) .well,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .well-register,
body:not(.minimal) .main-content:has(.hx-account-tabs) .panel {
  background: #fff !important;
  border: 1px solid var(--shell-topbar-border, #e4e9ef) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(17, 26, 36, 0.06) !important;
  padding: 20px 22px !important;
  margin-bottom: 18px !important;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .well h4,
body:not(.minimal) .main-content:has(.hx-account-tabs) .well h4,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .panel-heading,
body:not(.minimal) .main-content:has(.hx-account-tabs) .panel-heading,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .well h2,
body:not(.minimal) .main-content:has(.hx-account-tabs) .well h2,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .panel h2,
body:not(.minimal) .main-content:has(.hx-account-tabs) .panel h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--shell-ink, #0a2038);
  letter-spacing: 0;
  text-transform: none;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .well hr {
  border-color: #eef2f6;
  margin: 12px 0 18px;
}

/* Forms */
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .form-mydetails .control-label,
body:not(.minimal) .main-content:has(.hx-account-tabs) .form-horizontal .control-label,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .form-horizontal .control-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  color: #5d6c80 !important;
  padding-top: 12px;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .form-control,
body:not(.minimal) .main-content:has(.hx-account-tabs) .form-control {
  height: 44px;
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
  box-shadow: none !important;
  font-size: 14px;
  color: var(--shell-ink, #0a2038);
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .form-control:focus,
body:not(.minimal) .main-content:has(.hx-account-tabs) .form-control:focus {
  border-color: #213a54 !important;
  box-shadow: 0 0 0 3px rgba(33, 58, 84, 0.12) !important;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) textarea.form-control,
body:not(.minimal) .main-content:has(.hx-account-tabs) textarea.form-control {
  height: auto;
  min-height: 88px;
}

/* Buttons */
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .btn-primary,
body:not(.minimal) .main-content:has(.hx-account-tabs) .btn-primary {
  background: linear-gradient(135deg, #213a54 0%, #0a2038 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(10, 32, 56, 0.18);
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .btn-primary:hover,
body:not(.minimal) .main-content:has(.hx-account-tabs) .btn-primary:hover {
  background: linear-gradient(135deg, #0a2038 0%, #061528 100%) !important;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .btn-default,
body:not(.minimal) .main-content:has(.hx-account-tabs) .btn-default,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .btn-link,
body:not(.minimal) .main-content:has(.hx-account-tabs) .btn-secondary {
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
  background: #fff !important;
  color: #213a54 !important;
  font-weight: 500;
  padding: 10px 16px !important;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .btn-danger,
body:not(.minimal) .main-content:has(.hx-account-tabs) .btn-danger {
  border-radius: 8px !important;
  font-weight: 600;
  padding: 10px 16px !important;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .btn-success,
body:not(.minimal) .main-content:has(.hx-account-tabs) .btn-success {
  border-radius: 8px !important;
  font-weight: 600;
  padding: 10px 16px !important;
}

/* User management table */
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table,
body:not(.minimal) .main-content:has(.hx-account-tabs) .table {
  background: #fff;
  border: 1px solid var(--shell-topbar-border, #e4e9ef);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(17, 26, 36, 0.05);
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table > thead > tr > th,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table > tr > th,
body:not(.minimal) .main-content:has(.hx-account-tabs) .table > tr > th {
  background: #f8fafc;
  border-bottom: 1px solid #eef2f6 !important;
  font-size: 12px;
  font-weight: 600;
  color: #5d6c80;
  text-transform: none;
  padding: 14px 16px !important;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table > tbody > tr > td,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table > tr > td,
body:not(.minimal) .main-content:has(.hx-account-tabs) .table > tr > td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  border-top-color: #eef2f6 !important;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table .btn,
body:not(.minimal) .main-content:has(.hx-account-tabs) .table .btn {
  border-radius: 8px !important;
  margin-left: 6px;
  margin-bottom: 4px;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .label,
body:not(.minimal) .main-content:has(.hx-account-tabs) .label {
  border-radius: 6px;
  font-weight: 600;
  padding: 4px 8px;
}

/* Alerts */
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .alert,
body:not(.minimal) .main-content:has(.hx-account-tabs) .alert {
  border-radius: 10px !important;
  border: 0 !important;
}

/* Collapsible invite panel — hide nested breadcrumb noise if present */
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .panel-heading .breadcrumb,
body:not(.minimal) .main-content:has(.hx-account-tabs) .panel-heading .breadcrumb {
  display: none !important;
}

/* PIN security inject block */
body:not(.minimal) .xnpin-security-section {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Security settings — stacked cards */
body:not(.minimal) .hx-account-security {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}

body:not(.minimal) .hx-security-card {
  background: #fff;
  border: 1px solid var(--shell-topbar-border, #e4e9ef);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(17, 26, 36, 0.06);
  overflow: hidden;
}

body:not(.minimal) .hx-security-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid #eef2f6;
  background: #fafbfc;
}

body:not(.minimal) .hx-security-card__head i {
  color: #8493a6;
  font-size: 16px;
}

body:not(.minimal) .hx-security-card__head h3,
body:not(.minimal) .hx-security-card__head .section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--shell-ink, #0a2038);
}

body:not(.minimal) .hx-security-card__body {
  padding: 22px 24px 24px;
}

body:not(.minimal) .hx-security-card__body > p:first-child {
  margin-top: 0;
}

body:not(.minimal) .hx-security-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

body:not(.minimal) .hx-security-card .xnpin-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

html.dark body:not(.minimal) .hx-security-card {
  background: #1c212b !important;
  border-color: #2a3140 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html.dark body:not(.minimal) .hx-security-card__head {
  background: #161b24;
  border-bottom-color: #2a3140;
}

html.dark body:not(.minimal) .hx-security-card__head h3,
html.dark body:not(.minimal) .hx-security-card__head .section-title {
  color: #e8edf4;
}

/* Dark */
html.dark body:not(.minimal) .hx-account-tabs {
  border-bottom-color: var(--shell-topbar-border, #2a3140);
}

html.dark body:not(.minimal) .hx-account-tabs > li > a {
  color: #9aa8b8 !important;
}

html.dark body:not(.minimal) .hx-account-tabs > li > a:hover {
  color: #e8edf4 !important;
  background: #252b36 !important;
}

/* Keep active pill navy (never Hexa/flashbang white) */
html.dark body:not(.minimal) .hx-account-tabs > li.active > a,
html.dark body:not(.minimal) .hx-account-tabs > li.active > a:hover,
html.dark body:not(.minimal) .hx-account-tabs > li.active > a:focus {
  color: #fff !important;
  background: linear-gradient(135deg, #3d5a7a 0%, #213a54 100%) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

html.dark body:not(.minimal) .hexa-content:has(.hx-account-tabs) .well,
html.dark body:not(.minimal) .main-content:has(.hx-account-tabs) .well,
html.dark body:not(.minimal) .hexa-content:has(.hx-account-tabs) .panel,
html.dark body:not(.minimal) .main-content:has(.hx-account-tabs) .table,
html.dark body:not(.minimal) .hx-security-card {
  background: #1c212b !important;
  border-color: #2a3140 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  color: #c5ced8;
}

html.dark body:not(.minimal) .hexa-content:has(.hx-account-tabs) .form-control,
html.dark body:not(.minimal) .main-content:has(.hx-account-tabs) .form-control {
  background: #12161e !important;
  border-color: #3a4454 !important;
  color: #e8edf4 !important;
}

html.dark body:not(.minimal) .hexa-content:has(.hx-account-tabs) .btn-default,
html.dark body:not(.minimal) .main-content:has(.hx-account-tabs) .btn-default {
  background: #252b36 !important;
  border-color: #3a4454 !important;
  color: #e8edf4 !important;
}

html.dark body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table > thead > tr > th,
html.dark body:not(.minimal) .hexa-content:has(.hx-account-tabs) .table > tr > th {
  background: #161b24 !important;
  color: #9aa8b8;
}

/* Addon pages (Facturación / Notificaciones / Visualización) */
body:not(.minimal) .hx-account-addon-panel {
  margin-top: 4px;
}

body:not(.minimal) .hx-account-addon-lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #5d6c80;
}

body:not(.minimal) .hx-account-addon-panel .hx-account-card,
body:not(.minimal) .hx-account-addon-panel .modern-register-container,
body:not(.minimal) .hx-account-addon-panel .xnnotify-client-section,
body:not(.minimal) .hx-account-addon-panel .xnhooks-client-section {
  background: #fff;
  border: 1px solid var(--shell-topbar-border, #e4e9ef);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(17, 26, 36, 0.06);
}

body:not(.minimal) .hx-account-addon-panel .modern-register-header {
  display: none !important;
}

body:not(.minimal) .hx-account-addon-panel .modern-register-section {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 28px 32px 32px !important;
}

body:not(.minimal) .hx-account-addon-panel .xnnotify-client-section,
body:not(.minimal) .hx-account-addon-panel .xnhooks-client-section {
  padding: 24px 28px 28px !important;
}

body:not(.minimal) .hx-account-addon-panel .section-header {
  border-bottom: 1px solid #eef2f6 !important;
}

body:not(.minimal) .hx-account-addon-panel .section-header i {
  color: #8493a6 !important;
}

/* Align pageheader + tabs — match Mis servicios (26px title + icon) */
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .hexa-page-header,
body:not(.minimal) .main-content:has(.hx-account-tabs) .hexa-page-header {
  margin-bottom: 4px;
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .hexa-page-header h2,
body:not(.minimal) .main-content:has(.hx-account-tabs) .hexa-page-header h2,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .hexa-page-header .hx-page-header__title,
body:not(.minimal) .main-content:has(.hx-account-tabs) .hexa-page-header .hx-page-header__title {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--shell-ink, #0a2038);
}

body:not(.minimal) .hexa-content:has(.hx-account-tabs) .hexa-page-header .hx-page-header__icon,
body:not(.minimal) .main-content:has(.hx-account-tabs) .hexa-page-header .hx-page-header__icon,
body:not(.minimal) .hexa-content:has(.hx-account-tabs) .hexa-page-header h2 > .icon,
body:not(.minimal) .main-content:has(.hx-account-tabs) .hexa-page-header h2 > .icon {
  width: 1.05em !important;
  height: 1.05em !important;
  font-size: 1em !important;
}

html.dark body:not(.minimal) .hx-account-addon-panel .hx-account-card,
html.dark body:not(.minimal) .hx-account-addon-panel .modern-register-container,
html.dark body:not(.minimal) .hx-account-addon-panel .xnnotify-client-section,
html.dark body:not(.minimal) .hx-account-addon-panel .xnhooks-client-section {
  background: #1c212b !important;
  border-color: #2a3140 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

html.dark body:not(.minimal) .hx-account-addon-lead {
  color: #9aa8b8;
}

@media (max-width: 767px) {
  body:not(.minimal) .hx-account-tabs.nav-material-horizontal {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px !important;
    gap: 8px !important;
  }

  body:not(.minimal) .hx-account-tabs > li > a {
    white-space: nowrap;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
  }
}