/* ── Forçar tema escuro (impede dark mode do OS/Bootstrap light) ──────────── */
html {
  color-scheme: dark only;
}

/* ── Design System — Digital College (Dark Theme) ───────────────────────── */
:root {
  /* Tokens do Design System */
  --color-primary:        #F25D00;
  --color-primary-dark:   #D94E00;
  --color-primary-light:  #FF7A2B;
  --color-navy:           #1A1A2E;
  --color-navy-dark:      #2C2C4A;
  --color-bg:             #1A1A2E;
  --color-bg-alt:         #2C2C4A;
  --color-text:           #FFFFFF;
  --color-text-muted:     rgba(255, 255, 255, 0.6);
  --color-border:         rgba(255, 255, 255, 0.1);
  --radius-btn:           4px;
  --radius-card:          12px;
  --radius-pill:          100px;
  --font-sans:            'Poppins', sans-serif;
  --shadow-card:          0 2px 8px rgba(0, 0, 0, 0.3);

  /* Sobrescrever variáveis do Bootstrap 5 para tema escuro */
  --bs-body-bg:           #1A1A2E;
  --bs-body-color:        #FFFFFF;
  --bs-secondary-bg:      #2C2C4A;
  --bs-tertiary-bg:       #252545;
  --bs-card-bg:           #2C2C4A;
  --bs-border-color:      rgba(255, 255, 255, 0.1);
  --bs-primary:           #F25D00;
  --bs-primary-rgb:       242, 93, 0;
  --bs-link-color:        #F25D00;
  --bs-link-hover-color:  #FF7A2B;
  --bs-emphasis-color:    #FFFFFF;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html, body {
  background-color: #1A1A2E !important;
  color: #FFFFFF !important;
  font-family: 'Poppins', sans-serif !important;
}

/* Reset de backgrounds Bootstrap */
.container, .container-fluid,
.row, [class^="col"], [class*=" col"] {
  background-color: transparent;
}

/* Cards Bootstrap */
.card {
  background-color: #2C2C4A !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* ── dcc.Dropdown (react-select v1) ────────────────────────────────────── */
.Select-value-label,
.Select-placeholder,
.Select-input input,
.VirtualizedSelectOption,
.VirtualizedSelectFocusedOption {
    color: #FFFFFF !important;
}

.Select-menu-outer .Select-option {
    color: #FFFFFF !important;
    background-color: #2C2C4A !important;
}

.Select-menu-outer .Select-option.is-focused {
    background-color: rgba(242, 93, 0, 0.15) !important;
    color: var(--color-primary) !important;
}

.Select-menu-outer .Select-option.is-selected {
    background-color: var(--color-primary) !important;
    color: #FFFFFF !important;
}

.Select-control {
    background-color: #2C2C4A !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    color: #FFFFFF !important;
}

.Select-multi-value-wrapper {
    color: #FFFFFF !important;
}

.Select-menu-outer {
    background-color: #2C2C4A !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ── Bootstrap Botões ───────────────────────────────────────────────────── */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(242, 93, 0, 0.25) !important;
}

.btn-success {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    box-shadow: 0 0 0 0.2rem rgba(242, 93, 0, 0.25) !important;
}

.btn-secondary {
    border-radius: var(--radius-btn) !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
}

/* ── Formulários ────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    color: #FFFFFF !important;
    background-color: #2C2C4A !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(242, 93, 0, 0.15) !important;
    background-color: #2C2C4A !important;
    color: #FFFFFF !important;
}

.form-label,
label {
    color: #FFFFFF !important;
    font-family: var(--font-sans) !important;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-content {
    background-color: #2C2C4A !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.modal-header {
    background-color: #1A1A2E !important;
    border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.modal-title {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    font-family: var(--font-sans) !important;
}

.modal-header .btn-close {
    filter: invert(1) !important;
}

.modal-body {
    background-color: #2C2C4A !important;
    color: #FFFFFF !important;
}

.modal-footer {
    background-color: #2C2C4A !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
}

/* ── Alert ──────────────────────────────────────────────────────────────── */
.alert {
    border-radius: 8px !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast {
    background-color: #2C2C4A !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    font-family: var(--font-sans) !important;
    color: #FFFFFF !important;
}

.toast-header {
    background-color: #1A1A2E !important;
    color: #FFFFFF !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Texto accent ───────────────────────────────────────────────────────── */
.text-accent {
    color: var(--color-primary) !important;
}

/* ── DataTable filtro ───────────────────────────────────────────────────── */
.dash-filter input {
    background-color: #1A1A2E !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-family: var(--font-sans) !important;
    font-size: 13px !important;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress-bar {
    background-color: var(--color-primary) !important;
}

.progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ── Switch / Checklist ─────────────────────────────────────────────────── */
.form-check-input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.form-check-label {
    color: #FFFFFF !important;
}

/* ── Headings dentro dos cards ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: #FFFFFF !important;
}

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

::-webkit-scrollbar-track {
    background: #1A1A2E;
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}