:root {
  --qf-bg-base: #080c14;
  --qf-bg-surface: #0d1421;
  --qf-bg-card: #111827;
  --qf-bg-card-2: #151f2f;
  --qf-border: rgba(99, 179, 237, 0.14);
  --qf-border-soft: rgba(99, 179, 237, 0.08);
  --qf-blue: #38bdf8;
  --qf-cyan: #06b6d4;
  --qf-green: #10b981;
  --qf-amber: #f59e0b;
  --qf-red: #ef4444;
  --qf-purple: #818cf8;
  --qf-text: #f0f6ff;
  --qf-text-2: #91a6c6;
  --qf-muted: #526681;
  --qf-radius: 10px;
  --qf-radius-lg: 14px;
}

html,
body {
  background: var(--qf-bg-base) !important;
}

body {
  color: var(--qf-text);
}

a {
  color: var(--qf-blue);
}

a:hover {
  color: #7dd3fc;
}

/* Shell Metronic */
.page,
.wrapper,
.content,
.content.d-flex,
.content.flex-column-fluid,
#kt_content,
.subheader,
.container,
.container-fluid {
  background: transparent !important;
}

.page {
  background: var(--qf-bg-base) !important;
}

.wrapper {
  background: var(--qf-bg-base) !important;
}

.subheader .container,
.subheader .container-fluid {
  background: transparent !important;
}

.subheader-title,
.subheader h1,
.subheader h2,
.card-label,
.card-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--qf-text) !important;
}

.text-dark,
.text-dark-50,
.text-muted,
.text-secondary {
  color: var(--qf-text-2) !important;
}

.text-primary {
  color: var(--qf-blue) !important;
}

/* Sidebar */
.aside,
.aside-left,
#kt_aside {
  background: var(--qf-bg-surface) !important;
  border-right: 1px solid var(--qf-border) !important;
  box-shadow: none !important;
}

.brand {
  min-height: 76px;
  background: var(--qf-bg-surface) !important;
  border-bottom: 1px solid var(--qf-border) !important;
}

.brand-logo img,
.header-mobile img {
  filter: brightness(1.08) contrast(1.04);
}

.brand-product-name {
  color: var(--qf-muted) !important;
}

.aside-menu,
.aside-menu-wrapper,
.menu-nav {
  background: transparent !important;
}

.aside-menu .menu-nav {
  padding: 10px 0 18px;
}

.apposti-menu-section {
  color: var(--qf-muted) !important;
}

.apposti-menu-divider {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.22), transparent) !important;
}

.menu-nav .menu-item > .menu-link:hover,
.menu-nav .menu-item.menu-item-active > .menu-link,
.menu-nav .menu-item.menu-item-here > .menu-link,
.menu-nav .menu-item.menu-item-open > .menu-link {
  background: rgba(56, 189, 248, 0.1) !important;
  color: var(--qf-blue) !important;
  border-left: 2px solid var(--qf-blue) !important;
}

.menu-nav .menu-text,
.menu-nav .menu-link .menu-text {
  color: var(--qf-text-2) !important;
}

.menu-nav .menu-link:hover .menu-text,
.menu-nav .menu-item-active > .menu-link .menu-text,
.menu-nav .menu-item-here > .menu-link .menu-text,
.menu-nav .menu-item-open > .menu-link .menu-text {
  color: var(--qf-text) !important;
}

.menu-nav .menu-icon,
.menu-nav .svg-icon,
.menu-nav .svg-icon i,
.menu-nav .menu-icon svg {
  color: var(--qf-text-2) !important;
  fill: currentColor !important;
}

.menu-nav .menu-link:hover .menu-icon,
.menu-nav .menu-link:hover .svg-icon,
.menu-nav .menu-link:hover .svg-icon i,
.menu-nav .menu-item-active .menu-icon,
.menu-nav .menu-item-active .svg-icon,
.menu-nav .menu-item-here .menu-icon,
.menu-nav .menu-item-here .svg-icon {
  color: var(--qf-blue) !important;
}

.menu-nav .menu-submenu .menu-subnav {
  background: rgba(8, 12, 20, 0.42) !important;
  padding: 5px 0 7px;
  margin: 4px 9px 6px;
  border-radius: 10px;
  border: 1px solid var(--qf-border-soft);
}

.menu-nav .menu-submenu .menu-subnav .menu-link {
  margin: 1px 6px !important;
}

.header-mobile {
  background: var(--qf-bg-surface) !important;
  border-bottom: 1px solid var(--qf-border);
}

.burger-icon span,
.burger-icon span::before,
.burger-icon span::after {
  background-color: var(--qf-blue) !important;
}

/* Cards */
.card,
.card-custom,
.apposti-card,
.modal-content,
.dropdown-menu,
.popover {
  background: var(--qf-bg-card) !important;
  border: 1px solid var(--qf-border) !important;
  border-radius: var(--qf-radius-lg) !important;
  box-shadow: none !important;
  color: var(--qf-text) !important;
}

.card-header,
.modal-header,
.modal-footer {
  background: transparent !important;
  border-color: var(--qf-border) !important;
}

.card-body,
.apposti-card-body,
.modal-body {
  color: var(--qf-text);
}

.card:hover,
.card-custom:hover {
  border-color: rgba(56, 189, 248, 0.28) !important;
}

.card.bg-danger,
.card.bg-warning,
.card.bg-info,
.card.bg-primary,
.card.bg-success,
.card.bg-dark,
.card.bg-light-warning,
.card.bg-light-dark {
  background: var(--qf-bg-card) !important;
  color: var(--qf-text) !important;
  position: relative;
  overflow: hidden;
}

.card.bg-danger::before,
.card.bg-warning::before,
.card.bg-info::before,
.card.bg-primary::before,
.card.bg-success::before,
.card.bg-dark::before,
.card.bg-light-warning::before,
.card.bg-light-dark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--qf-blue);
}

.card.bg-danger::before { background: var(--qf-red); }
.card.bg-warning::before,
.card.bg-light-warning::before { background: var(--qf-amber); }
.card.bg-info::before,
.card.bg-primary::before { background: var(--qf-blue); }
.card.bg-success::before { background: var(--qf-green); }
.card.bg-dark::before,
.card.bg-light-dark::before { background: var(--qf-purple); }

.card.bg-danger .card-text,
.text-danger {
  color: #fca5a5 !important;
}

.card.bg-warning .card-text,
.card.bg-light-warning .card-text,
.text-warning {
  color: #fbbf24 !important;
}

.card.bg-info .card-text,
.card.bg-primary .card-text,
.text-info {
  color: var(--qf-blue) !important;
}

.card.bg-success .card-text,
.text-success {
  color: #6ee7b7 !important;
}

.card p,
.card span,
.card .card-title {
  color: inherit;
}

/* Tables */
.table-responsive,
.apposti-table-wrap {
  border-radius: var(--qf-radius-lg);
}

.table,
.apposti-table {
  color: var(--qf-text) !important;
  background: transparent !important;
}

.table thead th,
.apposti-table thead th {
  background: rgba(13, 20, 33, 0.96) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-muted) !important;
}

.table td,
.table th,
.apposti-table td,
.apposti-table th {
  border-color: rgba(99, 179, 237, 0.07) !important;
}

.table tbody tr,
.apposti-table tbody tr {
  background: transparent !important;
}

.table-hover tbody tr:hover,
.table tbody tr:hover,
.apposti-table tbody tr:hover {
  background: rgba(56, 189, 248, 0.045) !important;
}

.table tbody td,
.apposti-table tbody td {
  color: var(--qf-text-2) !important;
}

.table-bordered {
  border-color: var(--qf-border) !important;
}

/* Forms */
label,
.form-label,
.col-form-label {
  color: var(--qf-text-2) !important;
}

.form-control,
.custom-select,
.input-group-text,
.bootstrap-select > .dropdown-toggle,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
  background-color: var(--qf-bg-surface) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-text) !important;
  border-radius: var(--qf-radius) !important;
}

.form-control:focus,
.custom-select:focus,
.bootstrap-select > .dropdown-toggle:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: var(--qf-blue) !important;
  box-shadow: 0 0 0 0.18rem rgba(56, 189, 248, 0.12) !important;
}

.form-control::placeholder {
  color: var(--qf-muted) !important;
}

.form-control[readonly],
.form-control:disabled,
.custom-select:disabled {
  background-color: rgba(17, 24, 39, 0.72) !important;
  color: var(--qf-muted) !important;
}

.dropdown-menu {
  padding: 6px;
}

.dropdown-item {
  color: var(--qf-text-2) !important;
  border-radius: 7px;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
  background: rgba(56, 189, 248, 0.1) !important;
  color: var(--qf-blue) !important;
}

/* Buttons */
.btn {
  border-radius: var(--qf-radius) !important;
}

.btn-primary,
.btn.btn-primary {
  background: linear-gradient(135deg, var(--qf-blue), var(--qf-cyan)) !important;
  border-color: transparent !important;
  color: #001a2e !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  opacity: 0.92;
}

.btn-secondary,
.btn-light,
.btn-white,
.btn.btn-secondary,
.btn.btn-light,
.btn.btn-white,
.btn-clean {
  background: var(--qf-bg-card-2) !important;
  border: 1px solid var(--qf-border) !important;
  color: var(--qf-text) !important;
}

.btn-secondary:hover,
.btn-light:hover,
.btn-white:hover,
.btn-clean:hover {
  border-color: var(--qf-blue) !important;
  color: var(--qf-blue) !important;
}

.btn-success {
  background: rgba(16, 185, 129, 0.16) !important;
  border-color: rgba(16, 185, 129, 0.32) !important;
  color: #6ee7b7 !important;
}

.btn-danger {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: rgba(239, 68, 68, 0.32) !important;
  color: #fca5a5 !important;
}

.btn-warning,
.btn-light-warning {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.32) !important;
  color: #fbbf24 !important;
}

.btn-info {
  background: rgba(56, 189, 248, 0.16) !important;
  border-color: rgba(56, 189, 248, 0.32) !important;
  color: var(--qf-blue) !important;
}

.btn-dark {
  background: rgba(129, 140, 248, 0.16) !important;
  border-color: rgba(129, 140, 248, 0.32) !important;
  color: #c4b5fd !important;
}

.btn-icon {
  width: 34px;
  height: 34px;
}

/* Badges, labels and alerts */
.label-light-success,
.badge-success {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #6ee7b7 !important;
}

.label-light-danger,
.badge-danger {
  background: rgba(239, 68, 68, 0.14) !important;
  color: #fca5a5 !important;
}

.label-light-warning,
.badge-warning {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
}

.label-light-info,
.badge-info,
.label-light-primary,
.badge-primary {
  background: rgba(56, 189, 248, 0.14) !important;
  color: var(--qf-blue) !important;
}

.badge-light {
  background: var(--qf-bg-card-2) !important;
  color: var(--qf-text-2) !important;
}

.badge-secondary {
  background: var(--qf-bg-card-2) !important;
  color: var(--qf-text) !important;
  border: 1px solid var(--qf-border) !important;
}

.bg-light {
  background: var(--qf-bg-card-2) !important;
}

.alert {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
  border-radius: var(--qf-radius) !important;
}

.alert-success {
  background: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.08) !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
  color: #fca5a5 !important;
}

.alert-light {
  background: var(--qf-bg-card-2) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-text-2) !important;
}

.alert-secondary {
  background: var(--qf-bg-card-2) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-text) !important;
}

/* Listas (histórico de atendimento, etc.) */
.list-group-item {
  background: var(--qf-bg-card) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-text) !important;
}

.list-group-item .text-muted {
  color: var(--qf-text-2) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--qf-bg-card-2) !important;
  border-color: var(--qf-border) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  color: var(--qf-text) !important;
}

.select2-dropdown {
  background: var(--qf-bg-card) !important;
  border-color: var(--qf-border) !important;
}

.select2-container--default .select2-results__option {
  color: var(--qf-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--qf-blue) !important;
}

.select2-search--dropdown .select2-search__field {
  background: var(--qf-bg-card-2) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-text) !important;
}

/* Tooltips */
.tooltip-inner {
  background: var(--qf-bg-card) !important;
  color: var(--qf-text) !important;
}

/* Pagination */
.pagination .page-link {
  background: var(--qf-bg-card) !important;
  border-color: var(--qf-border) !important;
  color: var(--qf-text-2) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
  background: rgba(56, 189, 248, 0.14) !important;
  color: var(--qf-blue) !important;
  border-color: var(--qf-blue) !important;
}

/* Offcanvas (Meu perfil / Quick Panel) */
.offcanvas,
#kt_quick_user,
#kt_quick_panel {
  background: var(--qf-bg-card) !important;
  color: var(--qf-text) !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

.offcanvas .text-dark,
.offcanvas .text-dark-75,
.offcanvas .font-weight-bold,
.offcanvas .navi-text,
.offcanvas h1,
.offcanvas h2,
.offcanvas h3,
.offcanvas h4,
.offcanvas h5,
.offcanvas h6 {
  color: var(--qf-text) !important;
}

.offcanvas .text-muted {
  color: var(--qf-text-2) !important;
}

.offcanvas .separator {
  border-color: var(--qf-border) !important;
}

.offcanvas .symbol-label {
  background-color: var(--qf-bg-card-2) !important;
}

.offcanvas .navi-link:hover {
  background: rgba(56, 189, 248, 0.06) !important;
  border-radius: var(--qf-radius);
}

.offcanvas .nav-tabs .nav-link {
  color: var(--qf-text-2) !important;
}

.offcanvas .nav-tabs .nav-link.active {
  color: var(--qf-blue) !important;
  background: transparent !important;
}

/* Modals */
.modal-backdrop.show {
  opacity: 0.78 !important;
}

.modal-content {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42) !important;
}

.close,
.modal .close {
  color: var(--qf-text-2) !important;
  opacity: 1 !important;
}

/* Login */
html[data-theme="dark"] .login.login-2,
html[data-theme="dark"] .login.login-2.bg-white,
html[data-theme="dark"] #kt_login {
  background: var(--qf-bg-base) !important;
}

html[data-theme="dark"] .login-aside {
  background:
    radial-gradient(circle at 20% 12%, rgba(56, 189, 248, 0.12), transparent 35%),
    var(--qf-bg-card) !important;
  border-right: 1px solid var(--qf-border);
}

html[data-theme="dark"] .login-container {
  background: rgba(17, 24, 39, 0.86);
  border: 1px solid var(--qf-border);
  border-radius: 20px;
  padding: 34px 30px;
  width: 420px;
  max-width: 92vw !important;
}

html[data-theme="dark"] .login-title h3 {
  color: var(--qf-text) !important;
}

html[data-theme="dark"] .login-title span,
html[data-theme="dark"] .login-container .text-muted {
  color: var(--qf-text-2) !important;
}

html[data-theme="dark"] .login-logo img {
  filter: brightness(1.08) contrast(1.04);
}

html[data-theme="dark"] .login .content {
  background:
    radial-gradient(circle at 70% 20%, rgba(56, 189, 248, 0.1), transparent 32%),
    linear-gradient(135deg, #0d1421, #080c14) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.34);
}

@media (max-width: 991.98px) {
  .aside {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55) !important;
  }

  .content {
    padding-left: 0;
    padding-right: 0;
  }
}