/* Shared VYX customer portal presentation for NextBilling and NextRouter.
   Enable only when /assets/customer/ is present: <html data-vyx-customer>.
   Load last. Both products have identical style.css, target-admin.css and
   custom.css in the recovered assets. No layout/breakpoint/JS replacement.
   Icon fonts, rating/payment images, color pickers and chart data are intact. */

html[data-vyx-customer] {
  --vyxc-black: #090a0b;
  --vyxc-surface: #121517;
  --vyxc-raised: #1b2023;
  --vyxc-line: #343b3e;
  --vyxc-gold: #c5a86b;
  --vyxc-silver: #c5cdd1;
  --vyxc-muted: #929ea4;
}
html[data-vyx-customer] body {
  background-color: var(--vyxc-black) !important;
  background-image:
    linear-gradient(118deg, transparent 39%, rgba(197,168,107,.025) 39.1%, transparent 66%),
    linear-gradient(62deg, transparent 34%, rgba(197,168,107,.018) 34.1%, transparent 73%),
    radial-gradient(ellipse at 80% 0, rgba(197,168,107,.035), transparent 68%) !important;
  color: var(--vyxc-silver) !important;
}

/* Original blue mainbar and white content cap, including its pseudo-element. */
html[data-vyx-customer] body :is(.navbar, .navbar .navbar-collapse, .mainbar, .mainbar .mainbar-collapse) {
  background-color: #101315 !important;
  background-image: none !important;
  border-color: #343b3e !important;
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body :is(.navbar .navbar-nav, .mainbar .mainbar-nav) > li > a,
html[data-vyx-customer] body :is(.navbar-text, .navbar-link, .navbar-toggle, .mainbar-toggle) {
  color: var(--vyxc-silver) !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body :is(.navbar .navbar-nav, .mainbar .mainbar-nav) > li > a:is(:hover, :focus),
html[data-vyx-customer] body :is(.navbar .navbar-nav, .mainbar .mainbar-nav) > :is(.active, .open) > a {
  background-color: #2b2821 !important;
  background-image: none !important;
  border-color: #756344 !important;
  color: #d8c59e !important;
}
html[data-vyx-customer] body .mainbar .mainbar-nav > .active > a::after {
  border-top-color: #2b2821 !important;
}
html[data-vyx-customer] body .navbar-nav .dropdown-menu::before {
  border-bottom-color: #1b2023 !important;
}
html[data-vyx-customer] body #system-page.content,
html[data-vyx-customer] body #system-page.content::before {
  background-color: #0e1113 !important;
  background-image: none !important;
  border-color: var(--vyxc-line) !important;
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body :is(.content-header, .heading, .breadcrumb) {
  border-color: var(--vyxc-line) !important;
  background-color: transparent !important;
  color: var(--vyxc-muted) !important;
}
html[data-vyx-customer] body :is(.content-header-title, .heading, .breadcrumb a) {
  color: var(--vyxc-gold) !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body :is(.content-header-subtitle, .breadcrumb > .active) {
  color: var(--vyxc-muted) !important;
}

/* Portlet styles are shared verbatim by both products. */
html[data-vyx-customer] body :is(.portlet, .panel, .well, .row-stat) {
  background-color: var(--vyxc-surface) !important;
  border-color: var(--vyxc-line) !important;
  color: var(--vyxc-silver) !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.14) !important;
}
html[data-vyx-customer] body :is(
  .portlet .portlet-content, .portlet-search, .portlet-search .portlet-content,
  .panel-body, .commentbox.well, .commentbox-user.well, .commentbox-file.well
) {
  background-color: var(--vyxc-surface) !important;
  background-image: none !important;
  border-color: var(--vyxc-line) !important;
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body :is(
  .portlet .portlet-header, .portlet.portlet-plain .portlet-header,
  .portlet .portlet-toolbar, .portlet .portlet-footer,
  .panel-heading, .panel-footer, .modal-header, .modal-footer
) {
  background-color: var(--vyxc-raised) !important;
  background-image: none !important;
  border-color: var(--vyxc-line) !important;
  color: var(--vyxc-gold) !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body .portlet .portlet-header :is(h1,h2,h3,h4,h5,h6),
html[data-vyx-customer] body :is(.panel-title, .modal-title) {
  color: var(--vyxc-gold) !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body .row-stat::before,
html[data-vyx-customer] body .row-stat::after {
  background-color: #181c1f !important;
  border-color: var(--vyxc-line) !important;
}
html[data-vyx-customer] body :is(.row-stat-value, .row-stat-value.stat-value, .progress-stat-value, .stat-ticket) {
  color: #d0c09e !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body :is(.row-stat-label, .progress-stat-label, .tickets .muted, .table-tickets .muted) {
  color: var(--vyxc-muted) !important;
}

/* Preserve data, sorting controls, semantic status labels and action icons. */
html[data-vyx-customer] body .table {
  background-color: var(--vyxc-surface) !important;
  border-color: var(--vyxc-line) !important;
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body .table > thead > tr > :is(th,td),
html[data-vyx-customer] body .table > tfoot > tr > :is(th,td) {
  background-color: #1b2023 !important;
  background-image: none !important;
  border-color: #394145 !important;
  color: var(--vyxc-gold) !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body .table > tbody > tr > :is(th,td) {
  border-color: #2c3337 !important;
}
html[data-vyx-customer] body .table-striped > tbody > tr:nth-child(odd):not(.success):not(.danger):not(.warning):not(.info) > :is(th,td) {
  background-color: #171b1e !important;
}
html[data-vyx-customer] body .table-hover > tbody > tr:hover:not(.success):not(.danger):not(.warning):not(.info) > :is(th,td) {
  background-color: #242a2e !important;
}
html[data-vyx-customer] body .table > tbody > tr.active > :is(th,td) {
  background-color: #2c2922 !important;
  color: #ddd0b3 !important;
}

/* Native Bootstrap fields only. Swatches, color picker inputs and their
   backgrounds are intentionally outside these selectors. */
html[data-vyx-customer] body .form-control:not([type="color"]):not(.colorpicker-element):not(.colorpicker input):not(.simplecolorpicker input):not(.sp-container input) {
  background-color: #0d1012 !important;
  color: var(--vyxc-silver) !important;
  border-color: #424b50 !important;
  box-shadow: none !important;
}
html[data-vyx-customer] body .form-control:not([type="color"]):not(.colorpicker-element):not(.colorpicker input):not(.simplecolorpicker input):not(.sp-container input):focus {
  border-color: #9b8458 !important;
  box-shadow: 0 0 0 1px rgba(197,168,107,.12) !important;
}
html[data-vyx-customer] body .form-control:is(:disabled,[readonly]):not([type="color"]):not(.colorpicker-element):not(.colorpicker input):not(.simplecolorpicker input):not(.sp-container input) {
  background-color: #1c2124 !important;
  color: #919da3 !important;
}
html[data-vyx-customer] body :is(.input-group-addon, .help-block, .control-label) {
  color: var(--vyxc-silver) !important;
  border-color: var(--vyxc-line) !important;
}
html[data-vyx-customer] body .input-group-addon {
  background-color: #22282c !important;
}

/* Stock product buttons only; rating faces, payment images, color pickers,
   phone controls and icon-only buttons retain their original artwork. */
html[data-vyx-customer] body :is(.btn-default,.btn-secondary,.btn-tertiary):not(.btn-pay):not(.btn-avaliacao):not(.btn-pessimo):not(.btn-ruim):not(.btn-regular):not(.btn-bom):not(.btn-excelente):not(.btnNextPhone):not(.btn-icon):not(.colorpicker-element):not([style*="url("]):not(.disabled):not(:disabled) {
  background-color: #252d31 !important;
  background-image: none !important;
  border-color: #4b565c !important;
  color: #d0d6d9 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-vyx-customer] body .btn-primary:not(.btn-pay):not(.btn-avaliacao):not(.btnNextPhone):not(.btn-icon):not([style*="url("]):not(.disabled):not(:disabled) {
  background-color: #b49b69 !important;
  border-color: #c5ac7b !important;
  color: #111315 !important;
}
html[data-vyx-customer] body :is(.btn-default,.btn-secondary,.btn-tertiary,.btn-primary):not(.btn-pay):not(.btn-avaliacao):not(.btn-pessimo):not(.btn-ruim):not(.btn-regular):not(.btn-bom):not(.btn-excelente):not(.btnNextPhone):not(.btn-icon):not(.colorpicker-element):not([style*="url("]):not(.disabled):not(:disabled):is(:hover,:focus-visible,.active,:active) {
  background-color: #39372e !important;
  border-color: #a38c60 !important;
  color: #e0cfaa !important;
}
html[data-vyx-customer] body :is(.btn-default,.btn-secondary,.btn-tertiary,.btn-primary):not(.btn-pay):not(.btn-avaliacao):not(.btnNextPhone):not(.btn-icon):not([style*="url("]):is(.disabled,:disabled) {
  background-color: #202629 !important;
  border-color: #3c454a !important;
  color: #818e95 !important;
}

html[data-vyx-customer] body :is(.badge-primary,.badge-secondary,.badge-tertiary,.label-primary,.label-default) {
  background-color: #373124 !important;
  color: #d6c29b !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body :is(.nav-tabs,.nav-pills) > li > a {
  background-color: #1b2023 !important;
  border-color: var(--vyxc-line) !important;
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body :is(.nav-tabs,.nav-pills) > li > a:is(:hover,:focus),
html[data-vyx-customer] body :is(.nav-tabs,.nav-pills) > li.active > a {
  background-color: #2b2821 !important;
  border-color: #756344 !important;
  color: #d8c59e !important;
}
html[data-vyx-customer] body .dropdown-menu:not(.colorpicker):not(.simplecolorpicker),
html[data-vyx-customer] body .modal-content {
  background-color: #1b2023 !important;
  border-color: #3a4348 !important;
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body .dropdown-menu:not(.colorpicker):not(.simplecolorpicker) > li > a {
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body .dropdown-menu:not(.colorpicker):not(.simplecolorpicker) > li > a:is(:hover,:focus),
html[data-vyx-customer] body .dropdown-menu:not(.colorpicker):not(.simplecolorpicker) > li.active > a {
  background-color: #302c23 !important;
  color: #dcc69e !important;
}
html[data-vyx-customer] body .pagination > li > :is(a,span) {
  background-color: #1b2023 !important;
  border-color: #3a4348 !important;
  color: var(--vyxc-silver) !important;
}
html[data-vyx-customer] body .pagination > li.active > :is(a,span),
html[data-vyx-customer] body .pagination > li > a:hover {
  background-color: #353023 !important;
  border-color: #8a754e !important;
  color: #dcc69e !important;
}
html[data-vyx-customer] body .footer {
  background-color: transparent !important;
  color: var(--vyxc-muted) !important;
}
html[data-vyx-customer] body .footer hr {
  border-color: #30373b !important;
}

/* Native Bootstrap validation states remain semantically distinct. */
html[data-vyx-customer] body .has-error .form-control:not(.colorpicker-element) {
  border-color: #a65f5a !important;
}
html[data-vyx-customer] body .has-warning .form-control:not(.colorpicker-element) {
  border-color: #b39458 !important;
}
html[data-vyx-customer] body .has-success .form-control:not(.colorpicker-element) {
  border-color: #70917f !important;
}

/* Live portal v11: shared customer DOM confirmed in both products. */
html[data-vyx-customer] body,
html[data-vyx-customer] body :is(
  h1,h2,h3,h4,h5,h6,p,label,legend,input,select,textarea,
  .navbar-brand,.navbar-text,.navbar-profile-label,
  .row-stat-value,.row-stat-value.stat-value,.row-stat-label,
  .progress-stat-value,.progress-stat-label,.stat-value,.stat-ticket,
  .portlet-header,.portlet-footer,.content-header-title,.content-header-subtitle,.footer
):not(.fa):not(.glyphicon):not([class*="icon-"]):not([class*="icon_"]) {
  font-family: "Segoe UI", Arial, sans-serif !important;
}
html[data-vyx-customer] body :is(h1,h2,h3,h4,h5,h6,.row-stat-value,.stat-value,.portlet-header) {
  font-weight: 600 !important;
}
html[data-vyx-customer] body :is(button,.btn):not(.fa):not(.glyphicon):not([class*="icon-"]):not([class*="icon_"]) {
  font-family: "Segoe UI", Arial, sans-serif !important;
}
html[data-vyx-customer] body .mainbar {
  border-bottom-width: 1px !important;
  border-bottom-color: #17191a !important;
}
html[data-vyx-customer] body :is(.row-stat,.portlet,.modal-content) {
  border-radius: 12px !important;
}
html[data-vyx-customer] body .footer,
html[data-vyx-customer] body .footer::before,
html[data-vyx-customer] body .footer::after {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #929ea4 !important;
}
html[data-vyx-customer] body .footer hr {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Replace only the animated background artwork, keeping loader display,
   width/height/min-height and all original request handlers unchanged. */
html[data-vyx-customer] body :is(.loader,.module-loader) {
  background-image: none !important;
  color: #98a2a7 !important;
  text-align: center;
}
html[data-vyx-customer] body .loader::after,
html[data-vyx-customer] body .module-loader::after {
  content: "Atualizando dados";
  color: #98a2a7;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-shadow: none;
}

/* Morris appends its data SVG as a direct child. Never select arbitrary SVGs
   or descendants containing action icons. Native Bootstrap flow is retained. */
html[data-vyx-customer] body .morris-chart > svg,
html[data-vyx-customer] body .chart > svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Chart details must remain legible over the dark customer dashboard. */
html[data-vyx-customer] body .morris-hover.morris-default-style {
  background: #1b2023 !important;
  border: 1px solid #756344 !important;
  border-radius: 10px !important;
  color: #edf0f1 !important;
  opacity: 1 !important;
  padding: 12px 15px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  text-shadow: none !important;
  pointer-events: none;
}
html[data-vyx-customer] body .morris-hover .morris-hover-row-label {
  color: #d8bf8b !important;
  font-weight: 600 !important;
  margin-bottom: 7px;
}
html[data-vyx-customer] body .morris-hover .morris-hover-point {
  color: #edf0f1 !important;
  line-height: 1.6;
}

/* Preserve status labels/classes/text and action icons; only replace their
   saturated surfaces with muted gold/silver variants. Rating/payment art
   and all color-picker controls remain excluded. */
html[data-vyx-customer] body :is(
  .badge,.label-success,.label-danger,.label-warning,.label-info,
  .badge-success,.badge-danger,.badge-warning,.badge-info,
  .alert-success,.alert-danger,.alert-warning,.alert-info
) {
  background-color: #252a2c !important;
  border-color: #5b5b52 !important;
  color: #c7cdce !important;
  text-shadow: none !important;
}
html[data-vyx-customer] body :is(
  .label-danger,.label-warning,.badge-danger,.badge-warning,.alert-danger,.alert-warning
) {
  background-color: #2d2921 !important;
  border-color: #7c6a48 !important;
  color: #d3bc8f !important;
}
html[data-vyx-customer] body :is(.btn-success,.btn-info,.btn-warning,.btn-danger):not(.btn-pay):not(.btn-avaliacao):not(.btnNextPhone):not(.btn-icon):not(.colorpicker-element):not([style*="url("]) {
  background-color: #2a2f31 !important;
  background-image: none !important;
  border-color: #616053 !important;
  color: #cfd2cc !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html[data-vyx-customer] body :is(.btn-success,.btn-info,.btn-warning,.btn-danger):not(.btn-pay):not(.btn-avaliacao):not(.btnNextPhone):not(.btn-icon):not(.colorpicker-element):not([style*="url("]):not(.disabled):not(:disabled):is(:hover,:focus,.active,:active) {
  background-color: #393329 !important;
  border-color: #a08a5e !important;
  color: #dcc69c !important;
}
html[data-vyx-customer] body .table > tbody > tr:is(.success,.info) > :is(th,td) {
  background-color: #202628 !important;
  color: #c7cdce !important;
  border-color: #414b50 !important;
}
html[data-vyx-customer] body .table > tbody > tr:is(.danger,.warning) > :is(th,td) {
  background-color: #2b271f !important;
  color: #d5c29f !important;
  border-color: #665a43 !important;
}
html[data-vyx-customer] body :is(.green,.blue,.darkblue,.navy,.text-success,.text-info) {
  color: #afbdbf !important;
}
html[data-vyx-customer] body :is(.red,.orange,.text-danger,.text-warning) {
  color: #c6ad7b !important;
}
html[data-vyx-customer] body :is(.has-success,.has-error,.has-warning) .form-control:not(.colorpicker-element):not(.colorpicker input):not(.simplecolorpicker input):not(.sp-container input) {
  border-color: #99855d !important;
}
html[data-vyx-customer] body .datepicker :is(td.active,td span.active,td.today) {
  background-color: #393122 !important;
  background-image: none !important;
  color: #ddc798 !important;
}
html[data-vyx-customer] body #back-to-top {
  background-color: rgba(90,79,53,.65) !important;
  color: #d3c09c !important;
}
html[data-vyx-customer] body #back-to-top:hover {
  background-color: #75613c !important;
}

/* Even summary cards; the old layered-card ornament has no interactive role. */
html[data-vyx-customer] body .row-stat::before,
html[data-vyx-customer] body .row-stat::after {
  display: none !important;
}
html[data-vyx-customer] body .row-stat-value {
  font-size: 22px !important;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 992px) {
  html[data-vyx-customer] body .row-stat-value {
    font-size: clamp(18px, 1.65vw, 22px) !important;
  }
}