/* item 17 (v2-loop): @import removido daqui — bloqueava a descoberta do
   Google Fonts até este CSS terminar de baixar (waterfall serial). A
   mesma URL (já com display=swap e pesos 400/500/600/700 apenas) agora
   carrega via <link> em header.php/header_webpage.php, logo depois dos
   <link rel="preconnect"> — descoberta paralela desde o <head>. */
/* =====================================================================
   FLUX OPERATOR THEME  —  camada de tema (skin) para o painel SBC/Softswitch
   ---------------------------------------------------------------------
   LINGUAGEM VISUAL: console de operadora / NOC de alta confiabilidade.
     - Estrutura definida por LINHAS (bordas), não por sombras flutuantes.
     - Cantos retos (raio 3px). Nada de "bolha" arredondada.
     - Paleta sóbria aço/navy. Sem pastéis decorativos.
     - DADOS técnicos (IP, duração, custo, métricas) em fonte monoespaçada.
     - Densidade: telas mostram mais informação, menos "ar".

   O QUE É:
     Um ÚNICO arquivo CSS que repagina o painel SEM alterar PHP, JS ou o
     markup das views. Só sobrescreve aparência do Bootstrap 4 e dos CSS
     antigos (style.css, global-style.css, etc).

   COMO INSTALAR (1 linha) — no application/views/header.php, como ÚLTIMO CSS:
     <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/flux-modern-theme.css" type="text/css"/>

   COMO REVERTER: remova/comente essa única linha.

   COMO CUSTOMIZAR A MARCA: edite somente o bloco ":root" abaixo, ou
     carregue um override por cliente (flux-brand-CLIENTE.css) depois deste.
   ===================================================================== */

/* ============================ 1. TOKENS =============================== */
:root {
  /* Marca / ação */
  --flux-primary:        #1f5fa8;   /* azul corporativo, dessaturado */
  --flux-primary-600:    #1a5290;   /* hover */
  --flux-primary-700:    #143f70;   /* pressionado */
  --flux-primary-soft:   #eaf1f8;   /* fundos/linhas selecionadas */

  /* Navy estrutural (cabeçalhos, faixas, texto forte) */
  --flux-navy:           #16273d;
  --flux-navy-2:         #1d2f49;
  --flux-navy-line:      #24344b;

  /* Estados operacionais (sólidos, sóbrios) */
  --flux-success:        #1f8a54;
  --flux-success-soft:   #e7f3ec;
  --flux-danger:         #c0392b;
  --flux-danger-soft:    #fae9e7;
  --flux-warning:        #c08a00;
  --flux-warning-soft:   #fbf2da;
  --flux-info:           #1f5fa8;
  --flux-info-soft:      #eaf1f8;
  --flux-neutral:        #6a7686;
  --flux-neutral-soft:   #eef1f5;

  /* Superfícies / estrutura */
  --flux-bg:             #e9edf2;   /* fundo da aplicação (cinza-aço) */
  --flux-surface:        #ffffff;   /* painéis */
  --flux-surface-2:      #f3f5f8;   /* cabeçalhos de tabela / faixas */
  --flux-surface-3:      #eaeef3;
  --flux-border:         #d3dae3;   /* bordas (definidas, visíveis) */
  --flux-border-strong:  #b7c1cd;

  /* Texto */
  --flux-text:           #1b2735;
  --flux-text-muted:     #5c6878;
  --flux-text-faint:     #8893a2;
  --flux-text-invert:    #ffffff;

  /* Forma / profundidade (mínima) */
  --flux-radius:         3px;
  --flux-radius-sm:      3px;
  --flux-shadow-sm:      0 1px 0 rgba(20,33,51,.04);
  --flux-shadow:         0 1px 2px rgba(20,33,51,.06);
  --flux-shadow-pop:     0 6px 18px rgba(20,33,51,.16);

  /* Tipografia: UI em grotesca neutra; DADOS em monoespaçada */
  --flux-font: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --flux-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", "Consolas",
               "Liberation Mono", "Menlo", monospace;
  --flux-transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

/* ========================= 2. BASE / TIPOGRAFIA ======================= */
body {
  background: var(--flux-bg) !important;
  color: var(--flux-text);
  font-family: var(--flux-font) !important;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  color: var(--flux-text);
  font-family: var(--flux-font);
  font-weight: 600;
  letter-spacing: 0;
}
h2, .h2 { font-size: 1.25rem; }

a { color: var(--flux-primary); transition: var(--flux-transition); }
a:hover { color: var(--flux-primary-700); }

/* DADOS técnicos em monoespaçada (números, IPs, durações, métricas).
   Aplicado a células de tabela e a campos que parecem técnicos.        */
.table td,
.flexigrid td,
input.form-control,
.kpi-value, .mono {
  font-variant-numeric: tabular-nums;
}
.table td.num, .table td.mono, td.mono, .mono,
.kpi-value {
  font-family: var(--flux-mono);
  font-feature-settings: "tnum" 1;
}

/* Faixa de título superior do master.php */
.border_box,
.slice.color-one .w-section.inverse {
  background: transparent !important;
  border: 0 !important;
}
.border_box h2, .dashboard-left h2 {
  color: var(--flux-text) !important;
  font-weight: 600;
  font-size: 1.2rem;
}

/* ============================= 3. NAVBAR ============================== */
/* Barra superior com gravidade: superfície clara, faixa de topo navy,
   base com linha forte. Logos white-label continuam sobre fundo claro.  */
.navbar.mainmenu {
  background: var(--flux-surface) !important;
  border-top: 3px solid var(--flux-navy);
  border-bottom: 1px solid var(--flux-border-strong);
  box-shadow: var(--flux-shadow);
  border-radius: 0;
  padding: 0 1rem;
  min-height: 56px;
}
.navbar.mainmenu .navbar-brand { padding: .5rem .75rem .5rem 0; margin-right: .5rem; }
.navbar.mainmenu .navbar-brand img#logo { max-height: 36px; width: auto; }

.navbar.mainmenu .nav-item { position: relative; }
.navbar.mainmenu .nav-link {
  color: var(--flux-text) !important;
  font-weight: 600;
  font-size: 12.5px;
  border-radius: 0;
  padding: 1.05rem .9rem !important;
  border-bottom: 3px solid transparent;
  transition: var(--flux-transition);
}
.navbar.mainmenu .nav-item:hover > .nav-link,
.navbar.mainmenu .nav-link:focus,
.navbar.mainmenu .nav-item.show > .nav-link {
  color: var(--flux-primary-700) !important;
  background: var(--flux-surface-2);
  border-bottom-color: var(--flux-primary);
}

/* Dropdowns: retos, borda firme, sombra discreta */
.navbar .dropdown-menu {
  border: 1px solid var(--flux-border-strong);
  border-radius: 0 0 var(--flux-radius) var(--flux-radius);
  box-shadow: var(--flux-shadow-pop);
  padding: .25rem;
  margin-top: 0;
}
.dropdown-item {
  border-radius: var(--flux-radius);
  padding: .45rem .6rem;
  color: var(--flux-text);
  font-weight: 500;
  font-size: 12.5px;
}
.dropdown-item:hover, .dropdown-item:focus,
body .navbar-nav .dropdown-menu > li > a:hover,
body .navbar-nav .dropdown-menu > li > a:focus {
  background: var(--flux-primary-soft) !important;
  color: var(--flux-primary-700) !important;
}
.dropdown-divider { border-color: var(--flux-border); }

/* ============================= 4. SIDEBAR ============================ */
.sidebar {
  background: var(--flux-surface);
  border: 1px solid var(--flux-border);
  border-radius: var(--flux-radius);
  box-shadow: var(--flux-shadow-sm);
  padding: 0;
  overflow: hidden;
}
.sidebar .sidemenu { list-style: none; padding: 0; margin: 0; }
.sidebar .sidemenu li { margin: 0; border-bottom: 1px solid var(--flux-border); }
.sidebar .sidemenu li:last-child { border-bottom: 0; }
.sidebar .sidemenu li a {
  display: block;
  padding: .6rem .9rem;
  color: var(--flux-text);
  font-weight: 500;
  font-size: 12.5px;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: var(--flux-transition);
}
.sidebar .sidemenu li a:hover { background: var(--flux-surface-2); color: var(--flux-primary-700); }
.sidebar .sidemenu li.active > a,
.sidebar .sidemenu li a.active {
  background: var(--flux-primary-soft);
  color: var(--flux-primary-700) !important;
  border-left-color: var(--flux-primary);
  font-weight: 600;
}

/* ============================== 5. PAINÉIS (cards) =================== */
.card {
  background: var(--flux-surface);
  border: 1px solid var(--flux-border) !important;
  border-radius: var(--flux-radius) !important;
  box-shadow: var(--flux-shadow-sm);
}
/* sem "lift" no hover — estabilidade transmite confiança */

.card-header {
  background: var(--flux-surface-2) !important;
  border-bottom: 1px solid var(--flux-border) !important;
  border-radius: var(--flux-radius) var(--flux-radius) 0 0 !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--flux-text-muted);
  padding: .65rem .9rem;
}
.card-body { padding: .9rem; }
.card-footer {
  background: var(--flux-surface-2) !important;
  border-top: 1px solid var(--flux-border) !important;
  padding: .55rem .9rem;
}

/* Widgets legados */
.widget {
  background: var(--flux-surface);
  border: 1px solid var(--flux-border);
  border-radius: var(--flux-radius);
  box-shadow: var(--flux-shadow-sm);
  overflow: hidden;
}
.widget-header {
  background: var(--flux-surface-2) !important;
  border-bottom: 1px solid var(--flux-border);
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--flux-text-muted);
  padding: .65rem .9rem;
}
.widget-content { padding: .9rem; }

/* Painel de indicadores (KPI) — faixa única dividida por linhas.
   Use markup: .kpi-strip > .kpi-cell (label + .kpi-value).             */
.kpi-strip {
  display: flex; background: var(--flux-surface);
  border: 1px solid var(--flux-border); border-radius: var(--flux-radius);
  box-shadow: var(--flux-shadow-sm); overflow: hidden;
}
.kpi-strip .kpi-cell {
  flex: 1; padding: .7rem .95rem; border-left: 1px solid var(--flux-border);
}
.kpi-strip .kpi-cell:first-child { border-left: 0; }
.kpi-cell .kpi-label {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--flux-text-faint); font-weight: 700;
}
.kpi-cell .kpi-value {
  display: block; font-size: 1.5rem; line-height: 1.15; margin-top: .15rem;
  color: var(--flux-text); font-weight: 600;
}
.kpi-cell .kpi-sub { font-size: 11px; color: var(--flux-text-muted); }

/* ============================= 6. BOTÕES ============================= */
.btn {
  border-radius: var(--flux-radius);
  font-weight: 600;
  font-size: 12.5px;
  padding: .4rem .85rem;
  border: 1px solid transparent;
  box-shadow: none;
  transition: var(--flux-transition);
}
.btn:focus { box-shadow: 0 0 0 2px var(--flux-primary-soft); outline: none; }

.btn-primary,
.btn-line-blue, .btn-xing, .btn-update, .btn-royelblue {
  background: var(--flux-primary) !important;
  border-color: var(--flux-primary-700) !important;
  color: var(--flux-text-invert) !important;
}
.btn-primary:hover, .btn-line-blue:hover, .btn-xing:hover,
.btn-update:hover, .btn-royelblue:hover {
  background: var(--flux-primary-600) !important;
  border-color: var(--flux-primary-700) !important;
}

.btn-success { background: var(--flux-success) !important; border-color: #176b41 !important; color:#fff !important; }
.btn-success:hover { background: #1b7a4a !important; }
.btn-danger  { background: var(--flux-danger) !important;  border-color: #9f2e22 !important; color:#fff !important; }
.btn-danger:hover { background: #a93225 !important; }
.btn-info    { background: var(--flux-info) !important;    border-color: var(--flux-primary-700) !important; color:#fff !important; }
.btn-warning { background: var(--flux-warning) !important; border-color: #97690a !important; color:#fff !important; }

.btn-secondary {
  background: var(--flux-surface) !important;
  border-color: var(--flux-border-strong) !important;
  color: var(--flux-text) !important;
}
.btn-secondary:hover { background: var(--flux-surface-2) !important; }
.btn-light {
  background: var(--flux-surface-2) !important;
  border-color: var(--flux-border) !important;
  color: var(--flux-text) !important;
}
.btn-link { color: var(--flux-primary); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--flux-primary-700); text-decoration: underline; }

.btn-outline, .btn-line {
  background: transparent !important;
  border: 1px solid var(--flux-primary) !important;
  color: var(--flux-primary) !important;
}
.btn-outline:hover, .btn-line:hover { background: var(--flux-primary) !important; color: #fff !important; }

.btn-sm { padding: .25rem .6rem; font-size: 11.5px; }
.btn-lg { padding: .55rem 1.1rem; font-size: 14px; }

/* ============================= 7. FORMS ============================= */
.form-control, .custom-select,
.bootstrap-select > .dropdown-toggle.btn {
  border: 1px solid var(--flux-border-strong) !important;
  border-radius: var(--flux-radius) !important;
  color: var(--flux-text);
  background-color: var(--flux-surface);
  box-shadow: none !important;
  transition: var(--flux-transition);
  font-size: 13px;
  height: calc(1.5em + .55rem + 2px);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--flux-primary) !important;
  box-shadow: 0 0 0 2px var(--flux-primary-soft) !important;
}
.form-control::placeholder { color: var(--flux-text-faint); }

.form-group { margin-bottom: .75rem; }
.form-group label, .col-form-label, label {
  color: var(--flux-text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .25rem;
}
.input-group-text {
  background: var(--flux-surface-2);
  border: 1px solid var(--flux-border-strong);
  border-radius: var(--flux-radius);
  color: var(--flux-text-muted);
  font-size: 12.5px;
}

/* ============================= 8. TABELAS =========================== */
/* O componente mais importante de um softswitch. Denso e legível.      */
.table {
  background: var(--flux-surface);
  color: var(--flux-text);
  border-color: var(--flux-border);
  font-size: 12.5px;
  margin-bottom: 0;
}
.table thead th {
  background: var(--flux-surface-2);
  color: var(--flux-text-muted);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .05em;
  font-weight: 700;
  border-bottom: 2px solid var(--flux-border-strong) !important;
  border-top: 0 !important;
  padding: .5rem .7rem;
  white-space: nowrap;
}
/* Bootstrap dá ao cabeçalho .thead-light um cinza próprio (#e9ecef) com
   especificidade maior (.table .thead-light th = 0-2-1) que vence o
   .table thead th acima (0-1-2): o bg/cor do header vazava p/ o cinza do BS
   em qualquer tabela .table que usa <thead class="thead-light"> (ex.: visão
   geral em user/user). Realinhamos ao token operator com um seletor de
   especificidade maior (.table thead.thead-light th = 0-2-2), mantendo a
   tipografia (uppercase/10.5px) que já vinha da regra acima. */
.table thead.thead-light th,
.table .thead-light th {
  background: var(--flux-surface-2);
  color: var(--flux-text-muted);
}
.table td {
  padding: .45rem .7rem;
  border-top: 1px solid var(--flux-border) !important;
  vertical-align: middle;
}
.table tbody tr:first-child td { border-top: 0 !important; }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--flux-border) !important; }
.table-hover tbody tr:hover { background: var(--flux-primary-soft); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--flux-surface-2); }
.table .num, .table td.text-right { text-align: right; }

/* Grid legado (flexigrid) — apenas cor/borda, sem mexer no JS */
.flexigrid div.hDiv, .flexigrid div.hDiv td {
  background: var(--flux-surface-2); border-color: var(--flux-border-strong);
  color: var(--flux-text-muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em;
}
.flexigrid div.bDiv { border-color: var(--flux-border); }
.flexigrid div.bDiv td { font-size: 12.5px; }

/* ====================== 9. BADGES / STATUS ========================= */
/* Status operacional: rótulo curto com "dot" sólido à esquerda.        */
.badge {
  border-radius: var(--flux-radius);
  font-weight: 700;
  padding: .25em .5em;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border: 1px solid transparent;
  vertical-align: middle;
}
.badge::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 5px; vertical-align: middle;
  background: currentColor; opacity: .9;
}
.badge-success, .badge-ativo  { background: var(--flux-success-soft); color: #176b41; border-color:#bfe0cd; }
.badge-danger,  .badge-inativo{ background: var(--flux-danger-soft);  color: #9f2e22; border-color:#f0c7c2; }
.badge-warning { background: var(--flux-warning-soft); color: #8a6300; border-color:#ecd9a3; }
.badge-info    { background: var(--flux-info-soft);    color: var(--flux-primary-700); border-color:#cfe0f0; }
.badge-primary { background: var(--flux-primary-soft); color: var(--flux-primary-700); border-color:#cfe0f0; }
.badge-secondary, .badge-light { background: var(--flux-neutral-soft); color: var(--flux-neutral); border-color: var(--flux-border); }

/* =========================== 10. NAV / TABS ======================== */
.nav-tabs { border-bottom: 1px solid var(--flux-border-strong); }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  color: var(--flux-text-muted); font-weight: 600; font-size: 12.5px;
  border-radius: 0; padding: .55rem .9rem;
  text-transform: uppercase; letter-spacing: .03em;
}
.nav-tabs .nav-link:hover { color: var(--flux-primary-700); border-bottom-color: var(--flux-border-strong); }
.nav-tabs .nav-link.active {
  color: var(--flux-primary-700); background: transparent;
  border-bottom-color: var(--flux-primary); font-weight: 700;
}

/* ========================= 11. PAGINAÇÃO =========================== */
.pagination { gap: 0; }
.page-link {
  border: 1px solid var(--flux-border-strong);
  border-radius: 0 !important;
  color: var(--flux-text);
  margin-left: -1px;
  font-size: 12.5px;
  padding: .35rem .6rem;
}
.pagination .page-item:first-child .page-link { border-radius: var(--flux-radius) 0 0 var(--flux-radius) !important; }
.pagination .page-item:last-child .page-link { border-radius: 0 var(--flux-radius) var(--flux-radius) 0 !important; }
.page-link:hover { background: var(--flux-surface-2); color: var(--flux-primary-700); }
.page-item.active .page-link { background: var(--flux-primary); border-color: var(--flux-primary-700); color: #fff; }

/* ===================== 12. ALERTS / TOASTS ======================== */
.alert {
  border: 1px solid transparent; border-radius: var(--flux-radius);
  border-left-width: 4px; font-size: 12.5px; padding: .6rem .85rem;
}
.alert-success { background: var(--flux-success-soft); color: #145737; border-color:#bfe0cd; border-left-color: var(--flux-success); }
.alert-danger  { background: var(--flux-danger-soft);  color: #8a271c; border-color:#f0c7c2; border-left-color: var(--flux-danger); }
.alert-warning { background: var(--flux-warning-soft); color: #7a5800; border-color:#ecd9a3; border-left-color: var(--flux-warning); }
.alert-info    { background: var(--flux-info-soft);    color: var(--flux-primary-700); border-color:#cfe0f0; border-left-color: var(--flux-primary); }
/* .alert-primary: usado como faixa de cabeçalho de seção em formulários (ex.: permissions_add)
   sem a classe base .alert, então define borda/larguras aqui. Tame operator: superfície
   neutra + acento fino primário à esquerda + texto primário (sem bloco azul-vivo). */
.alert-primary { background: var(--flux-surface-2); color: var(--flux-primary-700); border:1px solid var(--flux-border); border-left:4px solid var(--flux-primary); }

.toast { border-radius: var(--flux-radius); box-shadow: var(--flux-shadow-pop); }
/* Toasts de notificação: global-style.css preenche .toast-success1/.toast-danger1 com
   verde/vermelho vivos (#E3FCDD / #fcc6c2) via !important. Tame operator (igual aos .alert-*):
   superfície soft neutra + acento fino colorido à esquerda + texto sóbrio. Precisa de
   !important para vencer o background !important do global-style.css. Validado ao vivo. */
.toast-success1 { background: var(--flux-success-soft) !important; color:#145737 !important; border:1px solid #bfe0cd !important; border-left:4px solid var(--flux-success) !important; }
.toast-danger1  { background: var(--flux-danger-soft)  !important; color:#8a271c !important; border:1px solid #f0c7c2 !important; border-left:4px solid var(--flux-danger)  !important; }

/* ===================== 13. MODAIS ================================== */
.modal-content { border: 1px solid var(--flux-border-strong); border-radius: var(--flux-radius); box-shadow: var(--flux-shadow-pop); }
.modal-header {
  border-bottom: 1px solid var(--flux-border);
  background: var(--flux-surface-2);
  border-radius: var(--flux-radius) var(--flux-radius) 0 0;
}
.modal-header .modal-title { font-size: 14px; font-weight: 600; }
.modal-footer { border-top: 1px solid var(--flux-border); background: var(--flux-surface-2); }

/* ===================== 14. SCROLLBAR ============================== */
* { scrollbar-width: thin; scrollbar-color: var(--flux-border-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: var(--flux-border-strong); border: 3px solid var(--flux-bg); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: #a4b0bf; }

/* ===================== 15. UTILITÁRIOS DE COR ==================== */
.text-primary { color: var(--flux-primary) !important; }
.bg-primary   { background-color: var(--flux-primary) !important; }
.text-success { color: var(--flux-success) !important; }
.text-danger  { color: var(--flux-danger) !important; }
.bg-light     { background-color: var(--flux-surface) !important; }

/* ===================== 16. RESPONSIVO LEVE ====================== */
@media (max-width: 991.98px) {
  .navbar.mainmenu .nav-link { padding: .7rem .75rem !important; border-bottom: 0; }
  .kpi-strip { flex-wrap: wrap; }
  .kpi-strip .kpi-cell { flex: 1 1 50%; border-top: 1px solid var(--flux-border); }
  .sidebar { margin-bottom: 1rem; }
}

/* Fim do tema. */