/* ============================================================
   OneX Data Center — Custom Theme
   Orange: #FF6B00 | Dark: #1A1A2E | Light Orange: #FF8C42
   ============================================================ */


:root {
  --onex-orange: #FF6B00;
  --onex-orange-light: #FF8C42;
  --onex-orange-dark: #CC5500;
  --onex-orange-glow: rgba(255, 107, 0, 0.15);
  --onex-dark: #0F0F1A;
  --onex-dark-2: #1A1A2E;
  --onex-dark-3: #242438;
  --onex-dark-4: #2E2E48;
  --onex-text: #E8E8F0;
  --onex-text-muted: #9999BB;
  --onex-border: rgba(255, 107, 0, 0.2);
  --onex-success: #00D4AA;
  --onex-danger: #FF4560;
  --onex-warning: #FFB800;
  --onex-info: #00B4FF;
}

/* ── GLOBAL ─────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
  background: var(--onex-dark) !important;
  color: var(--onex-text) !important;
  font-size: 14px !important;
}

/* ── NAVBAR ──────────────────────────────────────────────── */
.navbar-inverse {
  background: linear-gradient(135deg, var(--onex-dark-2) 0%, var(--onex-dark-3) 100%) !important;
  border-bottom: 2px solid var(--onex-orange) !important;
  box-shadow: 0 2px 20px rgba(255, 107, 0, 0.3) !important;
}

.navbar-inverse .navbar-brand {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
  padding: 10px 20px !important;
}

.navbar-inverse .navbar-brand:hover {
  color: var(--onex-orange-light) !important;
}

.navbar-inverse .navbar-nav > li > a {
  color: var(--onex-text-muted) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.2s ease !important;
  border-bottom: 2px solid transparent !important;
  padding-bottom: 12px !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: var(--onex-orange-light) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--onex-orange) !important;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  background: var(--onex-orange-glow) !important;
  color: var(--onex-orange-light) !important;
  border-bottom: 2px solid var(--onex-orange) !important;
}

.navbar-inverse .navbar-toggle { border-color: var(--onex-orange) !important; }
.navbar-inverse .navbar-toggle .icon-bar { background-color: var(--onex-orange) !important; }

/* ── PANELS / CARDS ──────────────────────────────────────── */
.panel {
  background: var(--onex-dark-2) !important;
  border: 1px solid var(--onex-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
  margin-bottom: 20px !important;
}

.panel-heading, .panel-primary > .panel-heading {
  background: linear-gradient(135deg, var(--onex-orange-dark), var(--onex-orange)) !important;
  border-color: var(--onex-orange) !important;
  border-radius: 8px 8px 0 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
}

.panel-default > .panel-heading {
  background: var(--onex-dark-3) !important;
  border-color: var(--onex-border) !important;
  color: var(--onex-text) !important;
}

.panel-body {
  background: var(--onex-dark-2) !important;
  color: var(--onex-text) !important;
}

.panel-title { color: #fff !important; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn-primary, .btn-info {
  background: linear-gradient(135deg, var(--onex-orange-dark), var(--onex-orange)) !important;
  border-color: var(--onex-orange-dark) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.3) !important;
}

.btn-primary:hover, .btn-info:hover {
  background: linear-gradient(135deg, var(--onex-orange), var(--onex-orange-light)) !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-default {
  background: var(--onex-dark-3) !important;
  border-color: var(--onex-border) !important;
  color: var(--onex-text) !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-default:hover {
  background: var(--onex-dark-4) !important;
  border-color: var(--onex-orange) !important;
  color: var(--onex-orange-light) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #CC2233, #FF4560) !important;
  border-color: #CC2233 !important;
  border-radius: 6px !important;
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(135deg, #009977, #00D4AA) !important;
  border-color: #009977 !important;
  border-radius: 6px !important;
  color: #fff !important;
}

/* ── TABLES ──────────────────────────────────────────────── */
.table { color: var(--onex-text) !important; border-color: var(--onex-border) !important; }

.table > thead > tr > th {
  background: var(--onex-dark-3) !important;
  color: var(--onex-orange-light) !important;
  border-color: var(--onex-border) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
}

.table > tbody > tr > td {
  border-color: var(--onex-border) !important;
  background: transparent !important;
  vertical-align: middle !important;
  padding: 10px 14px !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--onex-dark-3) !important; }

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover { background: var(--onex-orange-glow) !important; }

.table-bordered { border-color: var(--onex-border) !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: var(--onex-border) !important; }

/* ── FORMS ───────────────────────────────────────────────── */
.form-control {
  background: var(--onex-dark-3) !important;
  border: 1px solid var(--onex-border) !important;
  color: var(--onex-text) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus {
  border-color: var(--onex-orange) !important;
  box-shadow: 0 0 0 3px var(--onex-orange-glow) !important;
  outline: none !important;
  background: var(--onex-dark-4) !important;
}

.form-control option { background: var(--onex-dark-3) !important; color: var(--onex-text) !important; }
label { color: var(--onex-text-muted) !important; font-weight: 500 !important; font-size: 13px !important; }

/* ── LINKS ───────────────────────────────────────────────── */
a { color: var(--onex-orange-light) !important; transition: color 0.2s ease !important; }
a:hover { color: var(--onex-orange) !important; text-decoration: none !important; }

/* ── WELL ────────────────────────────────────────────────── */
.well {
  background: var(--onex-dark-2) !important;
  border: 1px solid var(--onex-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--onex-text) !important;
}
.well-sm { padding: 10px 14px !important; }

/* ── PROGRESS BARS ───────────────────────────────────────── */
.progress {
  background: var(--onex-dark-3) !important;
  border-radius: 20px !important;
  border: none !important;
  height: 8px !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--onex-orange-dark), var(--onex-orange), var(--onex-orange-light)) !important;
  border-radius: 20px !important;
  box-shadow: 0 0 8px rgba(255, 107, 0, 0.5) !important;
  transition: width 0.4s ease !important;
}

.progress-bar-success { background: linear-gradient(90deg, #009977, #00D4AA) !important; }
.progress-bar-danger { background: linear-gradient(90deg, #CC2233, #FF4560) !important; }
.progress-bar-info { background: linear-gradient(90deg, #0088CC, #00B4FF) !important; }

/* ── TABS ────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--onex-border) !important; }

.nav-tabs > li > a {
  color: var(--onex-text-muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  transition: all 0.2s ease !important;
}

.nav-tabs > li > a:hover {
  background: var(--onex-orange-glow) !important;
  color: var(--onex-orange-light) !important;
  border-bottom: 2px solid var(--onex-orange) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background: var(--onex-dark-3) !important;
  color: var(--onex-orange) !important;
  border: none !important;
  border-bottom: 2px solid var(--onex-orange) !important;
}

.tab-content {
  background: var(--onex-dark-2) !important;
  border: 1px solid var(--onex-border) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 20px !important;
}

/* ── ALERTS ──────────────────────────────────────────────── */
.alert { border-radius: 8px !important; border: none !important; font-weight: 500 !important; }
.alert-success { background: rgba(0,212,170,0.15) !important; color: #00D4AA !important; border-left: 4px solid #00D4AA !important; }
.alert-danger, .alert-error { background: rgba(255,69,96,0.15) !important; color: #FF4560 !important; border-left: 4px solid #FF4560 !important; }
.alert-warning { background: rgba(255,184,0,0.15) !important; color: #FFB800 !important; border-left: 4px solid #FFB800 !important; }
.alert-info { background: rgba(0,180,255,0.15) !important; color: #00B4FF !important; border-left: 4px solid #00B4FF !important; }

/* ── BADGES / LABELS ─────────────────────────────────────── */
.label-primary, .badge { background-color: var(--onex-orange) !important; color: #fff !important; }
.label-success { background-color: #00D4AA !important; }
.label-danger { background-color: #FF4560 !important; }
.label-warning { background-color: #FFB800 !important; color: #000 !important; }
.label-info { background-color: #00B4FF !important; }
.label-default { background-color: var(--onex-dark-4) !important; }

/* ── DROPDOWNS ───────────────────────────────────────────── */
.dropdown-menu {
  background: var(--onex-dark-3) !important;
  border: 1px solid var(--onex-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
  padding: 6px 0 !important;
}
.dropdown-menu > li > a { color: var(--onex-text) !important; padding: 8px 16px !important; font-size: 13px !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
  background: var(--onex-orange-glow) !important;
  color: var(--onex-orange-light) !important;
}

/* ── MODALS ──────────────────────────────────────────────── */
.modal-content {
  background: var(--onex-dark-2) !important;
  border: 1px solid var(--onex-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 64px rgba(0,0,0,0.8) !important;
  color: var(--onex-text) !important;
}
.modal-header {
  background: linear-gradient(135deg, var(--onex-dark-3), var(--onex-dark-4)) !important;
  border-bottom: 2px solid var(--onex-orange) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 16px 20px !important;
}
.modal-title { color: var(--onex-orange-light) !important; font-weight: 700 !important; }
.modal-footer {
  background: var(--onex-dark-3) !important;
  border-top: 1px solid var(--onex-border) !important;
  border-radius: 0 0 12px 12px !important;
}
.close { color: var(--onex-text-muted) !important; opacity: 1 !important; text-shadow: none !important; }
.close:hover { color: var(--onex-orange) !important; }

/* ── DATATABLES ──────────────────────────────────────────── */

/* Paginação Bootstrap (ul.pagination) — estrutura usada pelo UrBackup */
.pagination > li > a,
.pagination > li > span {
  background: var(--onex-dark-3) !important;
  color: var(--onex-text-muted) !important;
  border-color: var(--onex-border) !important;
  transition: all 0.15s ease !important;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover {
  background: var(--onex-orange-glow) !important;
  color: var(--onex-orange-light) !important;
  border-color: var(--onex-orange) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span:hover {
  background: var(--onex-orange) !important;
  border-color: var(--onex-orange) !important;
  color: #fff !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover {
  background: var(--onex-dark-2) !important;
  color: var(--onex-dark-4) !important;
  border-color: var(--onex-border) !important;
}

/* Fallback: paginate_button (DataTables sem Bootstrap) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--onex-dark-3) !important;
  color: var(--onex-text-muted) !important;
  border: 1px solid var(--onex-border) !important;
  border-radius: 4px !important;
  margin: 0 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--onex-orange-glow) !important;
  color: var(--onex-orange-light) !important;
  border-color: var(--onex-orange) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--onex-orange) !important;
  color: #fff !important;
  border-color: var(--onex-orange) !important;
}

/* Filtro e info */
.dataTables_filter input {
  background: var(--onex-dark-3) !important;
  border: 1px solid var(--onex-border) !important;
  color: var(--onex-text) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
}
.dataTables_info,
.dataTables_filter label,
.dataTables_length label { color: var(--onex-text-muted) !important; }
.dataTables_length select {
  background: var(--onex-dark-3) !important;
  border: 1px solid var(--onex-border) !important;
  color: var(--onex-text) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
}

/* ── BOOTSTRAP SELECT ────────────────────────────────────── */
.bootstrap-select .btn {
  background: var(--onex-dark-3) !important;
  border: 1px solid var(--onex-border) !important;
  color: var(--onex-text) !important;
}

/* ── SCROLLBARS ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--onex-dark-2); }
::-webkit-scrollbar-thumb { background: var(--onex-dark-4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--onex-orange); }

/* ── MISC ────────────────────────────────────────────────── */
.text-muted { color: var(--onex-text-muted) !important; }
.text-primary { color: var(--onex-orange) !important; }
.text-success { color: var(--onex-success) !important; }
.text-danger { color: var(--onex-danger) !important; }
.text-info { color: var(--onex-info) !important; }
.text-warning { color: var(--onex-warning) !important; }
hr { border-color: var(--onex-border) !important; }
.pos_bar { color: var(--onex-text-muted) !important; font-size: 12px !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--onex-orange); }

/* ── FIX 1: DataTables select — "1 row selected" separado do info ─── */
/* O select extension injeta .select-info direto no .dataTables_info,
   sem separador. Forçamos quebra de linha para não concatenar ao texto. */
.dataTables_info .select-info {
  display: block !important;
  font-size: 11px !important;
  color: var(--onex-text-muted) !important;
  margin-top: 2px !important;
}
.dataTables_info .select-item:empty {
  display: none !important;
}

/* ── FIX 2: Progress bar na célula de data (status_percent_done) ─────
   O template renderiza um <div class="progress"> como bloco filho da
   mesma <td> da data. Compactamos para não parecer elemento quebrado. */
#status_table td .progress,
.dataTables_wrapper td .progress {
  margin: 4px 0 0 0 !important;
  height: 14px !important;
  border-radius: 3px !important;
  background: var(--onex-dark-4) !important;
  min-width: 80px !important;
}
#status_table td .progress-bar,
.dataTables_wrapper td .progress-bar {
  font-size: 10px !important;
  line-height: 14px !important;
  min-width: 2em !important;
}

/* ── FIX 3: Ícone quebrado "||||" após botão Último ──────────────────
   Glyphicons usados como className nos botões DataTables Buttons
   (copy, csv, excel, pdf, print) renderizam o ::before icon ao lado
   do texto sem espaço, produzindo lixo visual. Escondemos o ::before
   nesses botões e substituímos por text-indent, mantendo só o label. */
.dt-buttons .btn.glyphicon::before {
  display: none !important;
}
/* O separador entre grupos de botões Bootstrap (|) vem de elementos
   .dt-button-split-drop que, sem CSS correto, viram caracteres brutos. */
.dt-button-split-drop,
.dt-button-split-drop-inner {
  display: none !important;
}
/* Garante que os botões de ação fiquem estilizados corretamente */
.dt-buttons .btn {
  background: var(--onex-dark-3) !important;
  border: 1px solid var(--onex-border) !important;
  color: var(--onex-text-muted) !important;
  margin-right: 2px !important;
}
.dt-buttons .btn:hover {
  background: var(--onex-dark-4) !important;
  color: var(--onex-orange-light) !important;
  border-color: var(--onex-orange) !important;
}

/* ── GLOWING PULSE ANIMATION ─────────────────────────────── */
@keyframes orangePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255,107,0,0); }
}