/* ============================================================================
   iSET · CLIENTE (fork do six) — chrome específico do tema six.
   Complementa o iset-brand-core.css (primitivos). Aqui: header, menu Klein,
   sidebar, home, área de fatura, login, footer. Só cor/tipografia/raio/sombra.
   ============================================================================ */

/* ---------- Barra superior (#header) ---------- */
#header{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:var(--sh-sm);
}
#header .top-nav > li > a{ color:var(--text-mid); font-weight:500; }
#header .top-nav > li > a:hover{ color:var(--accent); }
#header .top-nav > li.primary-action > a.btn{
  background:var(--grad-klein-cta); color:var(--on-accent); border:none;
  border-radius:var(--r-sm); box-shadow:var(--sh-klein);
}
#header .logo img{ max-height:42px; width:auto; }
.iset-theme-toggle i{ font-size:1.05rem; }

/* ---------- Menu principal (Klein) ---------- */
#main-menu{ background:transparent; }
#main-menu .navbar-main,
#main-menu nav#nav.navbar-default{
  background:var(--surface-brand);
  border:none;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-klein);
  margin-bottom:var(--sp-6);
}
.navbar-main .navbar-nav > li > a{
  color:var(--surface-brand-fg);
  font-family:var(--font-sans);
  font-weight:500;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus{
  color:#fff; background:rgba(255,255,255,.10);
}
.navbar-main .navbar-nav > li.active > a,
.navbar-main .navbar-nav > li.open > a{
  color:#fff; background:rgba(255,255,255,.16);
}
.navbar-main .navbar-nav > li.active > a:hover{ background:rgba(255,255,255,.20); }
.navbar-main .navbar-toggle .icon-bar{ background:var(--surface-brand-fg); }
.navbar-main .caret{ border-top-color:var(--surface-brand-label); }
/* dropdown do menu volta a ser claro (brand-core cuida do .dropdown-menu) */
.navbar-main .navbar-nav .open .dropdown-menu > li > a{ color:var(--text-hi); }

/* ---------- Sidebar da área do cliente ---------- */
.sidebar .panel,.primary-sidebar .panel,.secondary-sidebar .panel{
  border-radius:var(--r-lg);
}
.sidebar .panel .panel-heading,
.primary-sidebar .list-group-item.panel-title,
.sidebar .list-group-item.heading{
  font-family:var(--font-display);
  color:var(--heading-brand);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:var(--t-xs);
}
.list-group-item{ background:var(--surface); border-color:var(--line); color:var(--text-hi); }
.list-group-item.active,.list-group-item.active:hover{
  background:var(--accent-tint-08); border-color:var(--accent-tint-12); color:var(--accent);
  font-weight:600;
}
.list-group-item:hover{ background:var(--accent-tint-04); }

/* ---------- Home / dashboard ---------- */
#home-banner{
  background:var(--surface-brand);
  color:var(--surface-brand-fg);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-klein);
}
#home-banner h1,#home-banner h2,#home-banner .h1{ color:#fff; }
.btn-order-config,.panel .number{ color:var(--accent); }
.client-home-panels .panel-heading,.panel .panel-title{ font-family:var(--font-display); }

/* ---------- Área de fatura (viewinvoice) ---------- */
.invoice-container,.invoice{ background:var(--surface); }
.invoice h1,.invoice-title,.invoice h2{ font-family:var(--font-display); color:var(--heading); }
.paymentbtn,#paymentbtn,.btn-invoice-pay{
  background:var(--grad-klein-cta)!important; color:#fff!important; border:none!important;
  box-shadow:var(--sh-klein);
}
/* estado "EM ABERTO"/status já vêm em vermelho; mantemos semântica */

/* ---------- Login ---------- */
body.login-page,.login-page #main-body{ background:var(--bg); }
.login-box,.card.login,.logincontainer .panel{
  border-radius:var(--r-xl); box-shadow:var(--sh-lift);
}

/* ---------- Rodapé ---------- */
#footer{
  background:var(--surface-onyx);
  color:var(--surface-onyx-label);
  border-top:3px solid var(--accent);
}
#footer a{ color:#fff; }
#footer a:hover{ color:var(--klein-200); }
.copyright,#footer .container{ color:var(--surface-onyx-label); }

/* ---------- Ajustes gerais de página ---------- */
.card,.panel{ margin-bottom:var(--sp-5); }
#main-body{ background:var(--bg); }

/* ============================================================================
   MODO ESCURO (onix) — cobre o que o six deixa claro por cima dos tokens.
   Usa .theme-dark + !important pra vencer as cores hardcoded do six/custom.css.
   ============================================================================ */
html.theme-dark #main-body,
html.theme-dark .home-shortcuts,
html.theme-dark body{ background:var(--bg)!important; }
html.theme-dark #header{ background:var(--surface)!important; border-bottom-color:var(--line)!important; }
html.theme-dark #footer{ background:var(--surface-onyx)!important; }

/* Texto geral -> claro */
html.theme-dark,
html.theme-dark p, html.theme-dark li, html.theme-dark td, html.theme-dark th,
html.theme-dark dt, html.theme-dark dd, html.theme-dark span, html.theme-dark strong,
html.theme-dark address, html.theme-dark label, html.theme-dark .control-label,
html.theme-dark .lead, html.theme-dark b{ color:var(--text-hi); }
html.theme-dark h1, html.theme-dark h2, html.theme-dark h3,
html.theme-dark h4, html.theme-dark h5{ color:var(--heading)!important; }
html.theme-dark .text-muted, html.theme-dark .small-text,
html.theme-dark small{ color:var(--text-mid)!important; }
html.theme-dark hr{ border-color:var(--line)!important; }

/* Titulo com linha (login "Login — Esta pagina e restrita") */
html.theme-dark .header-lined h1{ color:var(--heading)!important; border-bottom-color:var(--line)!important; }
html.theme-dark .header-lined .breadcrumb li a{ color:var(--text-low)!important; }

/* Inputs / selects / textarea */
html.theme-dark .form-control,
html.theme-dark input[type=text], html.theme-dark input[type=email],
html.theme-dark input[type=password], html.theme-dark input[type=number],
html.theme-dark input[type=search], html.theme-dark input[type=tel],
html.theme-dark select, html.theme-dark textarea{
  background:var(--surface-2)!important; border-color:var(--input)!important; color:var(--text-hi)!important;
}
html.theme-dark .form-control::placeholder{ color:var(--text-low)!important; }
html.theme-dark .input-group-addon{ background:var(--elevated)!important; border-color:var(--input)!important; color:var(--text-mid)!important; }

/* Cards / paineis / listas */
html.theme-dark .panel, html.theme-dark .card, html.theme-dark .well,
html.theme-dark .list-group-item, html.theme-dark .modal-content{
  background:var(--surface)!important; border-color:var(--line)!important; color:var(--text-hi)!important;
}
html.theme-dark .panel-heading, html.theme-dark .card-header{ background:var(--surface-2)!important; border-color:var(--line)!important; }
html.theme-dark .panel-footer{ background:var(--surface-2)!important; }
html.theme-dark .list-group-item:hover{ background:var(--accent-tint-08)!important; }

/* Tabelas */
html.theme-dark .table{ color:var(--text-hi)!important; }
html.theme-dark .table>tbody>tr>td, html.theme-dark .table>thead>tr>th,
html.theme-dark .table>tbody>tr>th{ border-color:var(--line)!important; }
html.theme-dark .table-striped>tbody>tr:nth-of-type(odd){ background:var(--surface-2)!important; }
html.theme-dark .table-hover>tbody>tr:hover{ background:var(--accent-tint-08)!important; }

/* Links e botao default */
html.theme-dark a{ color:var(--klein-400); }
html.theme-dark a:hover{ color:var(--klein-200); }
html.theme-dark #header .top-nav>li>a{ color:var(--text-mid); }
html.theme-dark #header .top-nav>li>a:hover{ color:var(--accent); }
html.theme-dark .btn-default{ background:var(--surface-2)!important; border-color:var(--line-strong)!important; color:var(--text-hi)!important; }
html.theme-dark .btn-default:hover{ border-color:var(--accent)!important; color:var(--accent)!important; }

/* Sidebar do cliente (paineis) */
html.theme-dark .sidebar .panel .panel-heading,
html.theme-dark .sidebar .list-group-item.heading{ color:var(--klein-400)!important; }

/* Tiles de estatistica da home (17 Servicos, etc) */
html.theme-dark .tile{ background:var(--surface)!important; border-color:var(--line)!important; }
html.theme-dark .tile:hover{ background:var(--surface-2)!important; }
html.theme-dark .tile .title, html.theme-dark .tile small,
html.theme-dark .tile .name{ color:var(--text-mid)!important; }

/* Dropdown do menu no hover (estava branco no dark) */
html.theme-dark .dropdown-menu>li>a:hover,
html.theme-dark .dropdown-menu>li>a:focus,
html.theme-dark .navbar-nav .open .dropdown-menu>li>a:hover,
html.theme-dark .navbar-main .dropdown-menu>li>a:hover{ background:var(--accent-tint-12)!important; color:#fff!important; }

/* jQuery DataTables (Servicos / Faturas / Tickets) — corpo branco no dark */
html.theme-dark table.dataTable,
html.theme-dark table.dataTable tbody,
html.theme-dark table.dataTable tbody tr,
html.theme-dark table.dataTable tbody td,
html.theme-dark table.dataTable tbody th{
  background:var(--surface)!important; color:var(--text-hi)!important; border-color:var(--line)!important;
}
html.theme-dark table.dataTable tbody tr.odd,
html.theme-dark table.dataTable.stripe tbody tr.odd,
html.theme-dark table.dataTable.display tbody tr.odd,
html.theme-dark table.dataTable tbody tr.odd>td,
html.theme-dark table.dataTable tbody tr.odd>th{ background:var(--surface-2)!important; }
html.theme-dark table.dataTable tbody tr:hover,
html.theme-dark table.dataTable tbody tr:hover>td{ background:var(--accent-tint-08)!important; }
html.theme-dark table.dataTable thead th,
html.theme-dark table.dataTable thead td{ background:var(--elevated)!important; color:var(--text-mid)!important; border-color:var(--line-strong)!important; }
html.theme-dark table.dataTable a{ color:var(--klein-400)!important; }
html.theme-dark .dataTables_wrapper,
html.theme-dark .dataTables_wrapper .dataTables_info,
html.theme-dark .dataTables_wrapper .dataTables_length,
html.theme-dark .dataTables_wrapper label{ color:var(--text-mid)!important; }
html.theme-dark .dataTables_filter input,
html.theme-dark .dataTables_length select{ background:var(--surface-2)!important; border-color:var(--input)!important; color:var(--text-hi)!important; }
html.theme-dark .dataTables_paginate .paginate_button{ color:var(--text-mid)!important; }
html.theme-dark .dataTables_paginate .paginate_button.current{ background:var(--accent)!important; color:#fff!important; border-color:var(--accent)!important; }
/* barra de topo da tabela (Mostrando X de Y) */
html.theme-dark .dataTables_wrapper .top,
html.theme-dark .table-container .top{ background:var(--surface-2)!important; }