:root {
  color-scheme: dark;
  --color-primary-base: 45 212 161;
  --color-primary-gradient: 148 96 238;
  --color-primary-button-text: 5 5 9;
  --color-primary-button-alternative-text: 5 5 9;
  --color-secondary-base: 148 96 238;
  --color-secondary-gradient: 196 175 255;
  --color-secondary-button-text: 255 255 255;
  --color-tertiary-base: 196 175 255;
  --color-tertiary-gradient: 148 96 238;
  --color-tertiary-button-text: 5 5 9;
  --color-success-base: 45 212 161;
  --color-success-gradient: 14 159 120;
  --color-success-button-text: 5 5 9;
  --color-info-base: 196 175 255;
  --color-info-gradient: 148 96 238;
  --color-info-button-text: 5 5 9;
  --color-warning-base: 247 186 81;
  --color-warning-gradient: 198 133 29;
  --color-warning-button-text: 5 5 9;
  --color-danger-base: 248 113 113;
  --color-danger-gradient: 220 38 38;
  --color-danger-button-text: 255 255 255;
  --color-form-base: 45 212 161;

  --oak-bg: #050509;
  --oak-surface: #0c0c14;
  --oak-surface-2: #12111c;
  --oak-surface-3: #191626;
  --oak-border: #2c2939;
  --oak-text: #e8f0f4;
  --oak-muted: #aaa8bb;
  --oak-green: #2dd4a1;
  --oak-lavender: #c4afff;
  --oak-purple: #9460ee;
}

html,
body,
#app,
.section-content {
  background-color: var(--oak-bg) !important;
  color: var(--oak-text) !important;
}

body {
  background-image:
    radial-gradient(ellipse 58% 32% at 88% 2%, rgba(83, 40, 124, .35), transparent 72%),
    radial-gradient(ellipse 45% 28% at 0 48%, rgba(6, 55, 44, .22), transparent 75%) !important;
  background-attachment: fixed !important;
}

header,
nav,
.p-menubar,
.p-toolbar,
.layout-topbar,
.layout-sidebar,
.sidebar,
.navbar,
.navbar-default,
.navbar-collapse {
  background: rgba(8, 8, 14, .96) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

.p-menubar-root-list,
.p-menubar-start,
.p-menubar-end,
[role="menubar"],
[role="menubar"] > * {
  background: rgba(8, 8, 14, .97) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

.bg-white,
.bg-gray-10,
.bg-gray-15,
.surface-card,
.surface-ground,
.surface-section,
.p-card,
.p-panel,
.p-dialog,
.p-menu,
.p-tieredmenu,
.p-contextmenu,
.p-overlaypanel,
.p-popover,
.p-sidebar,
.p-drawer,
.p-accordion-header-link,
.p-accordion-content,
.p-tabview-nav,
.p-tabview-panels,
.panel,
.panel-default,
.card,
.well,
.box,
.thumbnail,
.breadcrumb {
  background: var(--oak-surface) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.p-card,
.p-panel,
.panel,
.card {
  box-shadow: 0 14px 42px rgba(0, 0, 0, .28) !important;
}

h1, h2, h3, h4, h5, h6,
label,
.text-gray-90,
.text-gray-80,
.text-gray-70,
.p-component,
.p-component-content,
.p-menuitem-text,
.p-dialog-title,
.p-panel-title,
.p-card-title,
.p-card-subtitle,
.p-tabview-title {
  color: var(--oak-text) !important;
}

p,
small,
.text-gray-60,
.text-gray-50,
.text-muted,
.help-block,
.p-message-detail,
.p-card-content {
  color: var(--oak-muted) !important;
}

a {
  color: var(--oak-lavender);
}

a:hover,
a:focus {
  color: var(--oak-green);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.form-control,
.p-inputtext,
.p-dropdown,
.p-select,
.p-multiselect,
.p-autocomplete-input,
.p-password-input,
.p-editor-container,
.p-datepicker,
.p-datepicker-header {
  background: var(--oak-surface-2) !important;
  border-color: #39354a !important;
  color: var(--oak-text) !important;
}

input::placeholder,
textarea::placeholder,
.p-placeholder {
  color: #858397 !important;
  opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.p-inputtext:focus {
  border-color: var(--oak-green) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 161, .14) !important;
  outline: none !important;
}

.p-button,
.btn-primary,
.button-primary,
button[type="submit"] {
  border-color: transparent !important;
}

.p-button:not(.p-button-text):not(.p-button-secondary),
.btn-primary,
.button-primary,
button[type="submit"] {
  background: linear-gradient(115deg, var(--oak-green), #5ce2ba) !important;
  color: #050509 !important;
}

.p-button-secondary,
.btn-default,
.btn-secondary {
  background: var(--oak-surface-3) !important;
  border-color: #464057 !important;
  color: var(--oak-lavender) !important;
}

.p-button:hover,
.btn:hover,
button:hover {
  filter: brightness(1.08);
}

.p-datatable,
.p-datatable-wrapper,
.p-datatable-header,
.p-datatable-footer,
.p-datatable-thead > tr > th,
.p-datatable-tbody > tr,
.p-datatable-tbody > tr > td,
.p-paginator,
.table,
.table > thead > tr > th,
.table > tbody > tr > td,
.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--oak-surface) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

.p-datatable-tbody > tr:hover,
.table-hover > tbody > tr:hover {
  background: var(--oak-surface-3) !important;
}

.p-dropdown-panel,
.p-select-overlay,
.p-multiselect-panel,
.p-autocomplete-panel,
.p-menu-overlay,
.dropdown-menu {
  background: var(--oak-surface-2) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

.p-dropdown-item,
.p-select-option,
.p-multiselect-item,
.p-autocomplete-item,
.dropdown-menu > li > a {
  color: var(--oak-text) !important;
}

.p-dropdown-item:hover,
.p-select-option:hover,
.p-multiselect-item:hover,
.p-autocomplete-item:hover,
.dropdown-menu > li > a:hover {
  background: rgba(148, 96, 238, .18) !important;
  color: var(--oak-lavender) !important;
}

.border,
.border-gray-20,
.border-gray-25,
.border-gray-30,
hr {
  border-color: var(--oak-border) !important;
}

.p-progressbar,
.progress {
  background: #211d2e !important;
}

.p-progressbar-value,
.progress-bar {
  background: linear-gradient(90deg, var(--oak-green), var(--oak-purple)) !important;
}

.p-tag,
.badge,
.label {
  border-color: rgba(196, 175, 255, .24) !important;
}

.p-tooltip-text,
.tooltip-inner {
  background: var(--oak-surface-3) !important;
  color: var(--oak-text) !important;
}

#chamilo-cookie-banner {
  background: rgba(18, 17, 28, .96) !important;
  border-color: rgba(247, 186, 81, .28) !important;
}

body.page-home #app {
  min-height: calc(100vh - 1px);
}

body.page-home #app > div {
  background: transparent !important;
}

body.page-home form,
body.page-home [class*="login"] {
  color: var(--oak-text);
}

/* Componentes carregados por rota podem vir depois do CSS principal. */
body #app > div > div:first-child,
body #app .bg-white,
body #app [class~="bg-white"],
body #app [class~="bg-gray-10"] {
  background: rgba(8, 8, 14, .97) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

/* O cabeçalho público varia de classe entre as rotas; o logo é seu ponto estável. */
#app div:has(img[src*="/logo/header"]) {
  background: rgba(8, 8, 14, .97) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

.role-cards > *,
.role-card,
[class*="role-card"] {
  background: var(--oak-surface-2) !important;
  border-color: #39354a !important;
  color: var(--oak-text) !important;
}

.role-cards > *:hover,
.role-card:hover,
[class*="role-card"]:hover {
  background: rgba(148, 96, 238, .16) !important;
  border-color: var(--oak-purple) !important;
}

.p-float-label label,
.p-floatlabel label,
.form-floating label {
  background: var(--oak-surface-2) !important;
  color: var(--oak-muted) !important;
}

.p-message,
.alert,
.alert-info,
.p-message-info {
  background: var(--oak-surface-3) !important;
  border-color: rgba(196, 175, 255, .3) !important;
  color: var(--oak-lavender) !important;
}

.p-message-success,
.alert-success {
  background: rgba(45, 212, 161, .1) !important;
  border-color: rgba(45, 212, 161, .3) !important;
  color: #8ff0d1 !important;
}

.p-message-warn,
.p-message-warning,
.alert-warning {
  background: rgba(247, 186, 81, .1) !important;
  border-color: rgba(247, 186, 81, .3) !important;
  color: #ffd88d !important;
}

.p-message-error,
.alert-danger {
  background: rgba(248, 113, 113, .1) !important;
  border-color: rgba(248, 113, 113, .3) !important;
  color: #ffb4b4 !important;
}

/* Mantém editores de conteúdo utilizáveis quando eles usam iframe branco. */
.tox .tox-edit-area__iframe,
.ck-editor__editable,
.ql-editor {
  background: var(--oak-surface-2) !important;
  color: var(--oak-text) !important;
}

*:focus-visible {
  outline-color: var(--oak-lavender) !important;
}

/* Área autenticada: navegação lateral e os cartões das configurações.
   Essas regras usam as classes reais do layout Chamilo 3, carregadas por rota. */
body #app .app-sidebar,
body #app .app-sidebar__container,
body #app .app-sidebar__panel,
body #app .app-sidebar__top,
body #app .app-sidebar__bottom,
body #app .p-panelmenu,
body #app .p-panelmenu-panel,
body #app .p-panelmenu-content,
body #app .p-panelmenu-content-container,
body #app .p-panelmenu-content-wrapper {
  background: #10101a !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

body #app .app-sidebar a,
body #app .app-sidebar button,
body #app .app-sidebar .p-panelmenu-header-action,
body #app .app-sidebar .p-panelmenu-item-link,
body #app .app-sidebar .p-panelmenu-header-label,
body #app .app-sidebar .p-panelmenu-item-label {
  color: var(--oak-lavender) !important;
}

body #app .app-sidebar .p-panelmenu-header-content,
body #app .app-sidebar .p-panelmenu-item-content,
body #app .app-sidebar .p-panelmenu-header-action:hover,
body #app .app-sidebar .p-panelmenu-item-link:hover {
  background: #191725 !important;
  color: #f5f2ff !important;
}

body #app .app-sidebar .p-panelmenu-header-active > .p-panelmenu-header-content,
body #app .app-sidebar .p-panelmenu-item-link.router-link-active,
body #app .app-sidebar .router-link-active {
  background: rgba(45, 212, 161, .12) !important;
  box-shadow: inset 3px 0 0 var(--oak-green) !important;
  color: var(--oak-green) !important;
}

body #app .bg-block-admin-settings,
body #app .admin-settings,
body #app .course-settings,
body #app .p-fieldset,
body #app fieldset,
body #app .p-accordion,
body #app .p-accordion-header,
body #app .p-accordion-content,
body #app .p-toggleable-content {
  background: var(--oak-surface-2) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}

body #app .admin-settings__list,
body #app .admin-settings__item,
body #app .admin-settings__item--active,
body #app .bg-block-admin-settings > *,
body #app .course-settings > * {
  background: var(--oak-surface-2) !important;
  border-color: var(--oak-border) !important;
  color: var(--oak-text) !important;
}