/* =====================================================================
   Salonize - visual leve e claro (acompanha a landing page)
   Carregado depois do tema "white". Só sobrescreve aparência; não muda
   estrutura nem comportamento das telas.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --sz-rose: #e0527f;
  --sz-rose-dark: #c93f6c;
  --sz-rose-soft: #fdeaf1;
  --sz-lilac: #7c5cff;
  --sz-lilac-soft: #f1ecff;
  --sz-mint: #2fb98c;
  --sz-mint-soft: #e6f7f1;
  --sz-sand: #f5a524;
  --sz-sand-soft: #fff4e5;
  --sz-sky-soft: #e8f1ff;
  --sz-ink: #23212e;
  --sz-muted: #6f6b7d;
  --sz-line: #efeaf3;
  --sz-bg: #faf8fc;
  --sz-card: #ffffff;
  --sz-shadow: 0 8px 24px rgba(120, 90, 160, .08);
  --sz-shadow-hover: 0 16px 34px rgba(120, 90, 160, .14);

  /* variáveis do tema "white" original */
  --bodycolor-w: var(--sz-bg);
  --widget-box-w: var(--sz-card);
  --title-w: var(--sz-muted);
  --subtitle-w: var(--sz-ink);
  --cinza0: var(--sz-muted);
}

/* ---------- Base ---------- */
body,
button,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body {
  background: var(--sz-bg);
  color: var(--sz-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  color: var(--sz-ink);
  letter-spacing: -0.01em;
}

a { color: var(--sz-rose-dark); }
a:hover { color: var(--sz-rose); }

#content { background: var(--sz-bg); }
.navebarn { background: var(--sz-bg); }
#header { background: var(--sz-bg); }
#header h1 { background: transparent; color: var(--sz-ink); }

/* ---------- Menu lateral ---------- */
#sidebar {
  background: #fff;
  border-right: 1px solid var(--sz-line);
  box-shadow: 4px 0 24px rgba(120, 90, 160, .04);
}

#sidebar > ul > li > a,
#sidebar li a {
  color: var(--sz-muted);
  border-radius: 12px;
}

#sidebar li .iconX,
#sidebar li .title {
  color: var(--sz-muted);
  font-weight: 600;
}

#sidebar li a:hover {
  background: var(--sz-rose-soft);
}

#sidebar li a:hover .iconX,
#sidebar li a:hover .title {
  color: var(--sz-rose-dark);
}

#sidebar li.active,
#sidebar > ul > li.active a {
  background: var(--sz-rose-soft);
  border-radius: 12px;
  color: var(--sz-rose-dark);
}

#sidebar li.active .iconX,
#sidebar li.active .title {
  color: var(--sz-rose-dark);
}

#sidebar .search-box {
  background: var(--sz-bg);
  border: 1px solid var(--sz-line);
  border-radius: 12px;
}

#sidebar .mode {
  background: #fff;
  border: 1px solid var(--sz-line);
  color: var(--sz-muted);
}

#sidebar li .title-tooltip {
  background: var(--sz-ink);
  color: #fff;
  border-radius: 8px;
}

/* ---------- Barra superior ---------- */
#user-nav > ul > li > a,
.navbar-inverse .brand,
.navbar-inverse .nav > li > a {
  color: var(--sz-muted);
}

#user-nav > ul > li > a:hover,
#user-nav > ul > li.open > a {
  color: var(--sz-rose-dark);
  opacity: 1;
}

#userr .userT0 { color: var(--sz-muted); font-size: .8em; }
#userr .userT { color: var(--sz-ink); font-weight: 700; }

.profile .profile-img img,
.profile-img img {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--sz-rose-soft);
}

#breadcrumb a {
  color: var(--sz-muted);
  border: 1px solid var(--sz-line);
  background: #fff;
  border-radius: 999px;
}

#breadcrumb a:hover {
  color: #fff;
  background: var(--sz-rose);
  border-color: var(--sz-rose);
}

.dropdown-menu {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(35, 33, 46, .14);
  padding: 8px;
}

.dropdown-menu > li > a {
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--sz-ink);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--sz-rose-soft);
  color: var(--sz-rose-dark);
}

/* ---------- Cards de atalho (dashboard) ---------- */
.cardBox {
  grid-gap: 16px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .cardBox { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .cardBox { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cardBox .card { padding: 14px 10px; gap: 6px; }
  .cardBox .card .numbers {
    font-size: .72em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    word-break: normal;
  }
  .cardBox .card .grid-blak { flex: 1 1 auto; min-width: 0; }
  .cardBox .card > a:last-child { flex: 0 0 auto; margin-left: 4px; }
  .cardBox .card [class*="lord-icon0"] { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; }
  .cardBox .card [class*="iconBx"] { font-size: 1.3em; }
}

.cardBox .card {
  padding: 16px 14px;
  opacity: 1;
  border-radius: 20px;
  box-shadow: var(--sz-shadow);
  border: 1px solid rgba(255, 255, 255, .6);
  transition: transform .25s ease, box-shadow .25s ease;
}

.cardBox .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sz-shadow-hover);
}

.cardBox .card:nth-child(1) { background: var(--sz-sky-soft); }
.cardBox .card:nth-child(2) { background: var(--sz-sand-soft); }
.cardBox .card:nth-child(3) { background: var(--sz-mint-soft); }
.cardBox .card:nth-child(4) { background: var(--sz-rose-soft); }
.cardBox .card:nth-child(5) { background: var(--sz-lilac-soft); }
.cardBox .card:nth-child(6) { background: #fff8d9; }

.cardBox .card .numbers {
  color: var(--sz-ink);
  font-weight: 700;
}

.cardBox .card .cardName { color: var(--sz-muted); font-weight: 600; }

.cardBox .card .iconBx,
.cardBox .card [class*="iconBx"] { color: var(--sz-ink); }

.lord-icon01, .lord-icon02, .lord-icon03, .lord-icon04, .lord-icon05, .lord-icon06, .lord-icon07 {
  background: rgba(255, 255, 255, .75) !important;
  border-radius: 14px;
}

.cardBox .card a { text-decoration: none; }

/* ---------- Painéis / widgets ---------- */
.new122,
.widget-box0,
.widget-box1,
.widget-box2,
.widget-box-new,
.widget-box-statist,
.widget-box {
  background: var(--sz-card);
  border: 1px solid var(--sz-line);
  border-radius: 20px;
  box-shadow: var(--sz-shadow);
}

.new122 { padding: 14px 16px; }

.widget-title,
.widget-title h5 {
  background: transparent;
  border: 0;
  color: var(--sz-ink);
  font-weight: 700;
}

.widget-title .icon { color: var(--sz-rose); }

.widget-content { background: transparent; border-color: var(--sz-line); }

.form-actions {
  background: transparent;
  border-top: 1px solid var(--sz-line);
}

.well {
  background: var(--sz-bg);
  border: 1px solid var(--sz-line);
  border-radius: 16px;
}

/* ---------- Botões ---------- */
.btn,
.button {
  border-radius: 12px;
  font-weight: 600;
  text-shadow: none;
  box-shadow: none;
  transition: transform .15s ease, filter .15s ease, background-color .2s ease;
}

.btn:hover,
.button:hover { transform: translateY(-1px); filter: brightness(1.04); }

/* botões de ação do topo da página ficam lado a lado, em vez de empilhados */
a.button,
button.button {
  display: inline-flex;
  vertical-align: top;
  height: 36px;
  margin: 0 8px 12px 0;
  align-items: stretch;
  text-decoration: none;
}

/* algumas telas usam classes do Bootstrap 4 (row/col-md-*), que o sistema não carrega:
   equivalente mínimo para os botões de topo ficarem em linha */
.row.justify-content-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px 8px;
  margin-left: 0;
}

.row.justify-content-center > [class*="col-"] {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.d-block { display: block; }
.text-center { text-align: center; }

/* tabelas largas rolam dentro do cartão, sem cortar o conteúdo */
.widget-content { overflow-x: auto; }

.btn { border: 0; background-image: none; }

.btn-primary { background: var(--sz-rose) !important; color: #fff; }
.btn-primary:hover { background: var(--sz-rose-dark) !important; color: #fff; }
.btn-success { background: var(--sz-mint) !important; color: #fff; }
.btn-warning { background: var(--sz-sand) !important; color: #fff; }
.btn-danger { background: #ef5b73 !important; color: #fff; }
.btn-info { background: var(--sz-lilac) !important; color: #fff; }
.btn-inverse { background: var(--sz-ink) !important; color: #fff; }
.btn-default,
.btn:not([class*="btn-"]) { background: #fff; border: 1px solid var(--sz-line); color: var(--sz-ink); }

.button__icon { background: rgba(255, 255, 255, .18); }
.button__text,
.button__text2 { font-weight: 600; }

/* ícones de ação nas tabelas (editar / excluir / visualizar) */
.btn-nwe, .btn-nwe2, .btn-nwe3, .btn-nwe4, .btn-nwe5, .btn-nwe6 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0 2px;
  border-radius: 10px;
  background: var(--sz-bg);
  color: var(--sz-muted);
  text-shadow: none !important;
  font-size: 1.15em !important;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}

.btn-nwe:hover { background: var(--sz-sky-soft); color: #2f6fed; transform: translateY(-1px); }
.btn-nwe2:hover, .btn-nwe5:hover { background: var(--sz-sand-soft); color: #d98200; transform: translateY(-1px); }
.btn-nwe3:hover { background: var(--sz-mint-soft); color: #14966f; transform: translateY(-1px); }
.btn-nwe4:hover { background: #ffe9ed; color: #e0364f; transform: translateY(-1px); }
.btn-nwe6:hover { background: var(--sz-lilac-soft); color: var(--sz-lilac); transform: translateY(-1px); }

/* ---------- Formulários ---------- */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.row-fluid input[class*="span"],
select,
.row-fluid select[class*="span"],
textarea,
.uneditable-input {
  background: #fff;
  border: 1px solid #e3dcec;
  border-radius: 12px;
  color: var(--sz-ink);
  min-height: 38px;
  padding: 8px 12px;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

textarea,
.row-fluid textarea[class*="span"] {
  min-height: 0;
  background: #fff !important;
  border: 1px solid #e3dcec;
  border-radius: 12px;
  color: var(--sz-ink);
}

#breadcrumb a.current {
  border-color: var(--sz-rose);
  color: var(--sz-rose-dark);
  background: var(--sz-rose-soft);
}

#breadcrumb a.current:hover { background: var(--sz-rose); color: #fff; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sz-rose) !important;
  box-shadow: 0 0 0 3px rgba(224, 82, 127, .15) !important;
  outline: 0;
}

label { color: var(--sz-ink); font-weight: 600; }

.help-inline, .help-block { color: var(--sz-muted); }

/* ---------- Tabelas ---------- */
.table { color: var(--sz-ink); }

.table th {
  background: #faf6fc;
  color: var(--sz-muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  border-bottom: 1px solid var(--sz-line);
}

.table td,
.table th { border-top: 1px solid var(--sz-line); vertical-align: middle; }

.table-bordered {
  border: 1px solid var(--sz-line);
  border-radius: 16px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.table-bordered th,
.table-bordered td { border-left: 0; }

.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th { background: #fdfcfe; }

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th,
.table tbody tr:hover > td { background: var(--sz-rose-soft); }

/* O grid fixo do Bootstrap 2 (span12 = 940px) estoura em telas menores:
   o bloco de largura total passa a ocupar o espaço disponível. */
.span12 { width: 100%; max-width: 100%; box-sizing: border-box; }
.row-fluid .span12 { width: 100%; }

/* colunas fixas (span2..span10) dentro de um span12 passam a ser proporcionais,
   mantendo o mesmo desenho do grid original (940px) em qualquer largura */
.span12 > .span2 { width: 14.894%; }
.span12 > .span3 { width: 23.404%; }
.span12 > .span4 { width: 31.915%; }
.span12 > .span5 { width: 40.426%; }
.span12 > .span6 { width: 48.936%; }
.span12 > .span7 { width: 57.447%; }
.span12 > .span8 { width: 65.957%; }
.span12 > .span9 { width: 74.468%; }
.span12 > .span10 { width: 82.979%; }
.span12 > [class*="span"] { margin-left: 2.128%; }
.span12 > [class*="span"]:first-child { margin-left: 0; }

/* formulários de filtro (GET) com várias colunas pequenas: quebram de linha
   em vez de ficarem cortados (não vale para formulários com blocos span12) */
.new122 form[method="get"]:not(:has(> .span12)),
.widget-content form[method="get"]:not(:has(> .span12)),
.widget-box form[method="get"]:not(:has(> .span12)) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 14px;
  margin: 0;
}

.new122 form[method="get"]:not(:has(> .span12)) > [class*="span"],
.widget-content form[method="get"]:not(:has(> .span12)) > [class*="span"],
.widget-box form[method="get"]:not(:has(> .span12)) > [class*="span"] {
  float: none;
  width: auto;
  flex: 1 1 150px;
  max-width: 260px;
  margin-left: 0;
}

form[method="get"] > [class*="span"] input,
form[method="get"] > [class*="span"] select { width: 100%; box-sizing: border-box; }

/* itens especiais dentro dos filtros: botão/lupa ocupam só o necessário,
   campo de busca cresce e dois campos de data dividem a coluna */
form[method="get"]:not(:has(> .span12)) > .span1,
form[method="get"]:not(:has(> .span12)) > [class*="span"]:has(> a.button) {
  flex: 0 0 auto;
  max-width: none;
}

form[method="get"]:not(:has(> .span12)) > .span5 {
  flex: 2 1 260px;
  max-width: 460px;
}

form[method="get"] > [class*="span"] > input.span6 {
  display: inline-block;
  width: calc(50% - 4px);
}

/* botões dentro de filtros alinhados com os campos */
form[method="get"] .button,
form[method="get"] .btn { margin-bottom: 0; }

/* nomes de cliente/profissional nas listas: o template cortava em 90px/30px */
.cli1 { max-width: 150px !important; }
.ph1 { max-width: 100px !important; }

/* telas antigas sem cartão (ex.: busca de preços) */
.container.mt-4 {
  max-width: 760px;
  margin: 24px 0 !important;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--sz-line);
  border-radius: 20px;
  box-shadow: var(--sz-shadow);
}

.container.mt-4 h1 { font-size: 1.4rem; font-weight: 800; margin-bottom: 18px; }
.container.mt-4 .form-control { width: 100%; max-width: 420px; box-sizing: border-box; }
.container.mt-4 .form-group { margin-bottom: 14px; }

@media (max-width: 480px) {
  .cli1 { max-width: 110px !important; }
  .ph1 { max-width: 80px !important; }
}

/* coluna de ações: ícones sempre lado a lado */
.table td:has(a[class*="btn-nwe"]) { white-space: nowrap; }

/* barra do DataTables em flex: "resultados por página" à esquerda, busca à direita,
   tabela embaixo e info/paginação na última linha (sem posições absolutas) */
.dataTables_wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.dataTables_wrapper .dataTables_length {
  width: auto;
  margin: 0 0 10px;
}

.dataTables_wrapper .dataTables_filter {
  position: static;
  margin: 0 0 10px;
  font-size: inherit;
}

.dataTables_wrapper > table.dataTable {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.dataTables_wrapper .dataTables_info { flex: 1 1 auto; }
.dataTables_wrapper .dataTables_paginate { flex: 0 0 auto; margin-top: 8px; }

/* busca e "resultados por página" do DataTables */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin: 0 0 8px;
}

.dataTables_wrapper .dataTables_filter input {
  box-sizing: border-box;
  width: 220px;
  max-width: 100%;
  height: 38px;
  margin: 0 0 0 6px;
}

.dataTables_wrapper .dataTables_length select {
  box-sizing: border-box;
  width: auto;
  height: 38px;
  margin: 0;
}
.dataTables_wrapper .dataTables_info { color: var(--sz-muted); padding-top: 10px; }

/* títulos longos não podem sobrepor o conteúdo */
.widget-title {
  height: auto !important;
  min-height: 35px;
  line-height: 1.35;
  padding-bottom: 6px;
}

.widget-title h5 { line-height: 1.35; }

@media (max-width: 768px) {
  /* tabelas largas rolam dentro do cartão em vez de cortar */
  .table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .btn-nwe, .btn-nwe2, .btn-nwe3, .btn-nwe4, .btn-nwe5, .btn-nwe6 {
    width: 30px;
    height: 30px;
    margin: 0 1px;
  }

  .dataTables_wrapper .dataTables_filter input { width: 100%; }
  .dataTables_wrapper .dataTables_filter label { width: 100%; }

  /* campos de data/hora ocupam a largura toda, como os demais */
  input[type="time"],
  input[type="date"],
  input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ---------- Abas, paginação, etiquetas ---------- */
.nav-tabs > li > a {
  border-radius: 12px 12px 0 0;
  color: var(--sz-muted);
  font-weight: 600;
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
  color: var(--sz-rose-dark);
  border-color: var(--sz-line);
  border-bottom-color: transparent;
}

.pagination ul > li > a,
.pagination ul > li > span {
  border: 1px solid var(--sz-line);
  color: var(--sz-muted);
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  background: var(--sz-rose);
  border-color: var(--sz-rose);
  color: #fff;
}

.label,
.badge {
  border-radius: 999px;
  font-weight: 600;
  text-shadow: none;
  padding: 3px 10px;
  /* clareia levemente a cor do status (que vem inline do cadastro) */
  background-image: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .16));
}

.alert { border-radius: 14px; border: 0; }

/* ---------- Modais ---------- */
.modal {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(35, 33, 46, .28);
  overflow: hidden;
}

.modal-header { border-bottom: 1px solid var(--sz-line); background: #fff; }
.modal-footer { border-top: 1px solid var(--sz-line); background: #fff; box-shadow: none; }

/* ---------- Calendário (agenda) ---------- */
.fc .fc-button,
.fc-direction-ltr .fc-button-group > .fc-button {
  background: #fff !important;
  border: 1px solid var(--sz-line) !important;
  color: var(--sz-ink) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: capitalize;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:hover {
  background: var(--sz-rose-soft) !important;
  color: var(--sz-rose-dark) !important;
}

.fc .fc-toolbar-title { font-weight: 800; letter-spacing: -0.02em; }
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid { border-color: var(--sz-line); }
.fc .fc-timegrid-slot { height: 2.6em; }
.fc .fc-event { border-radius: 8px; border: 0; padding: 1px 4px; }
.fc .fc-day-today { background: rgba(224, 82, 127, .05) !important; }
.fc .fc-col-header-cell.fc-day-today { background: var(--sz-rose-soft) !important; }
.fc .fc-col-header-cell-cushion { color: var(--sz-ink); font-weight: 700; text-decoration: none; }
.fc .fc-non-business { background: rgba(35, 33, 46, .03) !important; }

/* ---------- Rodapé ---------- */
#footer {
  background: var(--sz-bg);
  border-top: 1px solid var(--sz-line);
  color: var(--sz-muted);
}

/* ---------- Detalhes ---------- */
::selection { background: var(--sz-rose-soft); }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #e3dcec; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #d3c8e0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}


/* =====================================================================
   FORMULÁRIOS (.form-horizontal): rótulo em cima, duas colunas,
   campos com largura total. Prefixo #content para vencer os <style>
   embutidos em cada tela.
   ===================================================================== */
#content .form-horizontal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px;
  align-items: start;
  padding: 6px 4px 0;
}

/* tudo que não é campo (alertas, ações, blocos) ocupa a linha inteira */
#content .form-horizontal > * { grid-column: 1 / -1; }
#content .form-horizontal > .control-group { grid-column: auto; }

/* campos longos ocupam a linha inteira */
#content .form-horizontal > .control-group:has(textarea),
#content .form-horizontal > .control-group:has(.trumbowyg-box),
#content .form-horizontal > .control-group:has(.editor),
#content .form-horizontal > .control-group.full { grid-column: 1 / -1; }

#content .form-horizontal .control-group {
  border: 0;
  margin: 0 0 8px;
  padding: 0;
}

#content .form-horizontal .control-label {
  float: none;
  display: block;
  width: auto;
  margin: 0;
  padding: 0 0 5px;
  text-align: left;
  font-size: .82rem;
  font-weight: 700;
  color: var(--sz-muted);
}

#content .form-horizontal .controls {
  margin: 0;
  padding: 0;
}

#content .form-horizontal .controls > input:only-child,
#content .form-horizontal .controls > select:only-child,
#content .form-horizontal .controls > textarea:only-child,
#content .form-horizontal .controls > .input-append,
#content .form-horizontal .controls > .input-prepend {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
}

#content .form-horizontal .controls > select:only-child { height: 42px; }

#content .form-horizontal .help-inline,
#content .form-horizontal .help-block {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
}

#content .widget-content.nopadding { padding: 8px 22px 6px !important; margin-right: 0; }
#content .widget-title h5 { padding-bottom: 10px !important; }

/* barra de ações no fim do formulário */
#content .form-horizontal .form-actions,
#content .form-actions {
  margin: 10px 0 0;
  padding: 16px 0 6px !important;
  background: transparent !important;
  border-top: 1px solid var(--sz-line);
}

#content .form-actions .span6.offset3,
#content .form-actions > .span12 > div { justify-content: center; flex-wrap: wrap; gap: 6px; }

/* caixas de marcar (Entrada/Saída/Catálogo...) viram "pílulas" com bolinha */
#content label.btn.btn-default {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 8px 0 0 !important;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--sz-line);
  color: var(--sz-ink);
  cursor: pointer;
}

#content label.btn.btn-default:hover { background: var(--sz-rose-soft); }

#content .badgebox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#content .badgebox + .badge,
#content .badgebox:checked + .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  text-indent: 0;
  border-radius: 50%;
  background: #e9e4f0;
  background-image: none;
  color: transparent;
  font-size: .8rem;
  transition: background .2s ease, color .2s ease;
}

#content .badgebox:checked + .badge { background: var(--sz-mint); color: #fff; }
#content .badgebox:focus + .badge { box-shadow: 0 0 0 3px rgba(224, 82, 127, .2); }

@media (max-width: 768px) {
  #content .form-horizontal { grid-template-columns: minmax(0, 1fr); }
  #content .widget-content.nopadding { padding: 6px 12px 4px !important; }
}

/* campos com botão/ícone ao lado (CPF + Buscar, Senha + olho) crescem para preencher a linha */
#content .form-horizontal .controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

#content .form-horizontal .controls > input:not([type="checkbox"]):not([type="radio"]):not([style*="width"]),
#content .form-horizontal .controls > select:not([style*="width"]),
#content .form-horizontal .controls > textarea {
  flex: 1 1 140px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

#content .form-horizontal .controls > .help-inline,
#content .form-horizontal .controls > .help-block,
#content .form-horizontal .controls > span.error { flex: 0 0 100%; }

#content .form-horizontal .controls > img { flex: 0 0 auto; }
#content .form-horizontal .controls > button,
#content .form-horizontal .controls > a.btn { flex: 0 0 auto; margin: 0; }

/* botões de ação do fim do formulário realmente centralizados */
#content .form-actions > .span12 {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}

#content .form-actions .span6.offset3 {
  width: auto;
  margin-left: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* =====================================================================
   FORMULÁRIOS EM COLUNAS (span*): padding das colunas não pode estourar
   a largura, e os "títulos" de campo viram rótulos comuns.
   ===================================================================== */
#content [class*="span"] { box-sizing: border-box; }

#content label > h4,
#content label > h5 {
  display: inline;
  margin: 0;
  font-size: .85rem;
  font-weight: 700;
  color: var(--sz-muted);
  letter-spacing: 0;
}

#content .span12 > [class*="span"] > label { display: block; margin-bottom: 5px; }

#content .span12 > [class*="span"] > input,
#content .span12 > [class*="span"] > select,
#content .span12 > [class*="span"] > textarea {
  width: 100%;
  max-width: 100%;
  margin-bottom: 10px;
}

/* aba "Detalhes ..." no topo do formulário */
#content .nav-tabs { margin: 0 0 10px; border-bottom: 1px solid var(--sz-line); }

/* todos os campos contam padding/borda dentro da largura */
#content input,
#content select,
#content textarea { box-sizing: border-box; }

/* caixas de marcar e opções no tom do sistema */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--sz-rose); }

/* botões de ação centralizados também fora do .form-actions */
#content .span12 > .span6.offset3:has(> .button, > button, > a.button, > input.button) {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  float: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* seções recolhíveis (Permissões etc.): título mais discreto */
#content .accordion-heading h5 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  padding-top: 2px !important;
}

#content .accordion-group.widget-box { margin: 8px 0; }

/* o template força float/largura nas colunas com !important: reforço só para a barra de botões */
#content .span12 > .span6.offset3:has(> .button, > button, > a.button, > input.button) {
  float: none !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* celular: colunas fixas viram 2 por linha (pequenas) ou 1 por linha (largas) */
@media (max-width: 600px) {
  #content .span12 > .span2,
  #content .span12 > .span3,
  #content .span12 > .span4 { width: 48.5%; }

  #content .span12 > .span5,
  #content .span12 > .span6,
  #content .span12 > .span7,
  #content .span12 > .span8,
  #content .span12 > .span9,
  #content .span12 > .span10 { width: 100%; margin-left: 0; }

  #content .span12 > .span2:nth-child(odd),
  #content .span12 > .span3:nth-child(odd),
  #content .span12 > .span4:nth-child(odd) { margin-left: 0; }
}


/* =====================================================================
   UX: hierarquia de botões, barra de filtros, estados vazios, modais, foco
   ===================================================================== */

/* --- Botões: principal (rosa), secundário (neutro), perigo (vermelho) --- */
#content .button.btn-success,
.modal .button.btn-success,
.modal .btn-success {
  background: var(--sz-rose) !important;
  color: #fff;
  box-shadow: 0 6px 16px rgba(224, 82, 127, .22);
}

#content .button.btn-success:hover { background: var(--sz-rose-dark) !important; }

/* "Voltar"/"Cancelar" não competem com a ação principal */
#content .button:has(.bx-undo),
#content a.button.btn-warning:has(.bx-undo) {
  background: #fff !important;
  border: 1px solid var(--sz-line);
  color: var(--sz-ink);
  box-shadow: none;
}

#content .button:has(.bx-undo) .button__text,
#content .button:has(.bx-undo) .button__text2,
#content .button:has(.bx-undo) .button__icon { color: var(--sz-ink); }

#content .button:has(.bx-undo) .button__icon { background: var(--sz-bg); }
#content .button:has(.bx-undo):hover { background: var(--sz-rose-soft) !important; }

/* Buscar/Filtrar: cor própria para não confundir com "adicionar" */
#content .button.btn-warning:has(.bx-search-alt, .bx-search, .bx-filter-alt, .bx-filter, .fa-search),
#content button.btn-warning:has(.bx-search-alt, .bx-search, .bx-filter-alt, .bx-filter) {
  background: var(--sz-lilac) !important;
  box-shadow: 0 6px 16px rgba(124, 92, 255, .22);
}

/* lupa sozinha ganha rótulo */
#content form[method="get"] button.button:not(:has(.button__text, .button__text2)):has(.bx-search-alt, .bx-search)::after {
  content: "Buscar";
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 4px;
  color: #fff;
  font-weight: 600;
}

#content form[method="get"] button.button[style*="min-width"] { min-width: 0 !important; }

/* --- Barra de filtros --- */
#content .new122 form[method="get"]:not(:has(> .span12)),
#content .widget-box form[method="get"]:not(:has(> .span12)) {
  background: #fbf9fd;
  border: 1px solid var(--sz-line);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 10px 0 16px;
}

#content form[method="get"] label {
  display: block;
  margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--sz-muted);
}

/* "Limpar filtros" (criado por salonize-ux.js) */
.sz-clear {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  height: 36px;
  padding: 0 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--sz-line);
  color: var(--sz-muted);
  font-weight: 600;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.sz-clear:hover { background: #ffe9ed; color: #e0364f; text-decoration: none; border-color: #ffe9ed; }

/* --- Estados vazios ("Nenhum ... encontrado") --- */
.table td[colspan]:only-child {
  text-align: center;
  padding: 34px 12px;
  color: var(--sz-muted);
  font-size: .95rem;
  background: #fff !important;
}

/* --- Modais --- */
.modal-header h5,
.modal-header h4,
.modal-header h3 { font-weight: 800; color: var(--sz-ink); margin: 6px 0; }

.modal-body { color: var(--sz-ink); }

.modal-footer .btn,
.modal-footer .button { min-width: 120px; justify-content: center; }

.modal-backdrop.in { opacity: .35; }

/* --- Foco visível (teclado) --- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--sz-rose);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Linhas clicáveis/hover mais suaves e cabeçalho discreto --- */
.table tbody tr { transition: background .15s ease; }

/* --- Celular: botões principais ocupam a largura toda --- */
@media (max-width: 600px) {
  #content .new122 > a.button.btn-success,
  #content .new122 > a.button.btn-success:only-of-type { width: 100%; max-width: none !important; justify-content: center; }

  .sz-clear { width: 100%; justify-content: center; }
}

/* modais de confirmação: "Cancelar" neutro, "Excluir" em vermelho claro */
.modal-footer .btn-warning,
.modal-footer .button.btn-warning {
  background: #fff !important;
  border: 1px solid var(--sz-line);
  color: var(--sz-ink);
  box-shadow: none;
}

.modal-footer .btn-warning .button__text,
.modal-footer .btn-warning .button__text2,
.modal-footer .btn-warning .button__icon { color: var(--sz-ink); }

.modal-footer .btn-warning .button__icon { background: var(--sz-bg); }
.modal-footer .btn-warning:hover { background: var(--sz-rose-soft) !important; }
.modal-footer .btn-danger { background: #ef5b73 !important; }

/* filtros no celular: campos em largura total, ações lado a lado */
@media (max-width: 600px) {
  #content .new122 form[method="get"]:not(:has(> .span12)) { padding: 12px; gap: 8px 10px; }

  #content form[method="get"]:not(:has(> .span12)) > div,
  #content form[method="get"]:not(:has(> .span12)) > [class*="span"] {
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
    margin-left: 0;
    display: block;
  }

  #content form[method="get"] input:not([type="checkbox"]):not([type="radio"]),
  #content form[method="get"] select { width: 100%; box-sizing: border-box; }

  /* data inicial/final lado a lado */
  #content form[method="get"] input.span6.datepicker { display: inline-block; width: calc(50% - 4px); }

  #content form[method="get"] button.button,
  .sz-clear { flex: 1 1 calc(50% - 6px); justify-content: center; width: auto; }
}


/* =====================================================================
   POSICIONAMENTO: título à esquerda, ações à direita, na mesma linha
   ===================================================================== */
.widget-title.sz-has-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.widget-title.sz-has-actions > h5 { margin-right: auto; }

.sz-title-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.sz-title-actions .button,
.sz-title-actions a.button,
.sz-title-actions button.button {
  margin: 0;
  max-width: none !important;
  width: auto;
  height: 38px;
}

@media (max-width: 600px) {
  .sz-title-actions { width: 100%; margin-left: 0; }
  .sz-title-actions .button { flex: 1 1 auto; justify-content: center; }
}

/* respiro do cabeçalho com ações (as telas usam margem negativa no título) */
#content .widget-title.sz-has-actions {
  margin: 0 !important;
  padding: 16px 10px 10px !important;
}

#content .widget-title.sz-has-actions > h5 {
  margin: 0 auto 0 0 !important;
  padding: 0 0 0 6px !important;
}


/* =====================================================================
   ORDENAÇÃO por clique no título da coluna
   ===================================================================== */
th.sz-sortable { white-space: nowrap; }

a.sz-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.sz-sort:hover { color: var(--sz-rose-dark); text-decoration: none; }
a.sz-sort.ativo { color: var(--sz-rose-dark); }

.sz-arrow {
  font-size: .7em;
  opacity: .35;
  transition: opacity .15s ease;
}

a.sz-sort:hover .sz-arrow,
a.sz-sort.ativo .sz-arrow { opacity: 1; }

/* DataTables (ordenação do lado do navegador) */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { cursor: pointer; }

/* filtros: campos sem margem inferior e botões com a mesma altura, para alinhar pela base */
#content form[method="get"] input:not([type="hidden"]),
#content form[method="get"] select { margin-bottom: 0 !important; height: 38px; }

#content form[method="get"] button.button,
#content form[method="get"] a.button { height: 38px; margin-bottom: 0 !important; }

#content form[method="get"] > div { display: block; }


/* filtro rápido das tabelas de lista */
.sz-quickfilter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 10px;
}

.sz-quickfilter input[type="search"] {
  flex: 0 1 320px;
  height: 38px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #e3dcec;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.sz-quickfilter .sz-count { color: var(--sz-muted); font-size: .85rem; white-space: nowrap; }

@media (max-width: 600px) {
  .sz-quickfilter { flex-wrap: wrap; }
  .sz-quickfilter input[type="search"] { flex: 1 1 100%; }
}

/* selects de filtro não podem ficar espremidos (algumas telas forçam 70px) */
#content form[method="get"] select { min-width: 130px; }

/* campos de busca por texto dos filtros: largura suficiente para o texto de ajuda */
#content form[method="get"] input[type="text"].span15,
#content form[method="get"] input[name="busca"] { min-width: 220px; }

@media (max-width: 600px) {
  #content form[method="get"] input[type="text"].span15,
  #content form[method="get"] input[name="busca"],
  #content form[method="get"] select { min-width: 0; }
}


/* =====================================================================
   LEGIBILIDADE: escala tipográfica, contraste e contornos
   (o template original usa ~12px e bordas quase invisíveis)
   ===================================================================== */
:root {
  --sz-line: #e6dff0;          /* contorno de cartões e divisões */
  --sz-border-input: #cfc6dd;  /* contorno de campos */
  --sz-muted: #625e73;         /* texto secundário, contraste >= 5.5:1 sobre branco */
}

body,
#content,
#content p,
#content li,
.table td {
  font-size: 13.5px;
  line-height: 1.5;
}

.table th { font-size: 12px; }
label { font-size: 13px; }

input[type="text"], input[type="password"], input[type="date"], input[type="time"],
input[type="number"], input[type="email"], input[type="search"], input[type="tel"],
input[type="url"], input[type="datetime-local"], select, textarea,
.row-fluid input[class*="span"], .row-fluid select[class*="span"] {
  font-size: 14px;
  border-color: var(--sz-border-input);
}

select { color: var(--sz-ink); }

::placeholder { color: #7a768d; opacity: 1; }

.button__text2, .button__text { font-size: 13.5px; }
.badge, .label { font-size: 12px; }
#breadcrumb a { font-size: 12.5px; }
.pagination a, .pagination span { font-size: 13px; }

.widget-box, .new122, .widget-box0, .widget-box1, .widget-box2, .widget-box-new, .widget-box-statist {
  border-color: var(--sz-line);
}

.table td, .table th { border-top-color: var(--sz-line); }
.table-bordered { border-color: var(--sz-line); }
.dropdown-menu { border: 1px solid var(--sz-line); }
.modal { border: 1px solid var(--sz-line); }

/* foco sempre visível nos campos */
input:focus, select:focus, textarea:focus { border-color: var(--sz-rose) !important; }


/* =====================================================================
   CELULAR (<= 768px): tabelas em cartões, ordenação por seletor, toque confortável
   ===================================================================== */
.sz-sortbox { display: none; }

@media (max-width: 768px) {
  /* a tabela deixa de rolar para o lado: cada linha é um cartão */
  table.sz-cards,
  table.sz-cards tbody { display: block; width: 100%; max-width: 100%; overflow: visible; border: 0; background: transparent; }
  table.sz-cards thead { display: none; }

  table.sz-cards tr {
    display: block;
    margin: 0 0 12px;
    padding: 6px 14px;
    background: #fff;
    border: 1px solid var(--sz-line);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(120, 90, 160, .07);
  }

  table.sz-cards td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px dashed var(--sz-line);
    text-align: right;
    white-space: normal !important;
    word-break: break-word;
    background: transparent !important;
  }

  table.sz-cards td:last-child { border-bottom: 0; }

  table.sz-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 38%;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--sz-muted);
    padding-top: 2px;
  }

  /* ações: linha própria, botões distribuídos */
  table.sz-cards td.sz-acoes {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--sz-line);
    border-bottom: 0;
  }

  /* linhas de aviso (colspan): mensagem centralizada */
  table.sz-cards td[colspan] { display: block; text-align: center; color: var(--sz-muted); padding: 22px 8px; }

  /* "ordenar por" no lugar do cabeçalho */
  .sz-sortbox { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
  .sz-sortbox label { margin: 0; white-space: nowrap; }
  .sz-sortbox select { flex: 1 1 auto; min-width: 0; height: 42px; margin: 0; }

  /* filtro rápido e DataTables em largura total */
  .sz-quickfilter input[type="search"] { flex: 1 1 100%; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { width: 100%; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin: 0; }

  /* tamanho de texto confortável */
  body, #content, #content p, #content li, .table td { font-size: 14.5px; }
  label { font-size: 13.5px; }
  #userr .userT0 { font-size: 12px; }
  #userr .userT { font-size: 13px; }

  /* áreas de toque (mínimo ~40px) */
  #breadcrumb a { padding: 8px 12px; font-size: 13px; }
  #user-nav > ul > li > a { padding: 8px 10px; }
  .btn-nwe, .btn-nwe2, .btn-nwe3, .btn-nwe4, .btn-nwe5, .btn-nwe6 { width: 40px; height: 40px; font-size: 1.25em !important; }
  .pagination ul > li > a, .pagination ul > li > span { padding: 10px 14px; }
  .fc .fc-button { min-height: 38px; min-width: 38px; }
  .button, .btn { min-height: 40px; }

  /* atalhos do dashboard: sem a tecla de atalho (F1...), que não existe no celular */
  .cardBox .card .cardName { display: none; }
  .cardBox .card .numbers { font-size: .95em; }

  /* nome do usuário no topo sem corte */
  #userr .userT { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; text-align: right; }
}

@media (max-width: 480px) {
  #userr .userT0 { display: none; }
}


/* correções do celular: topo em uma linha só e mais espaço para o valor nos cartões */
@media (max-width: 768px) {
  #user-nav > ul { display: flex; flex-wrap: nowrap; align-items: center; }
  #user-nav > ul > li { float: none; }
  #user-nav > ul > li > a { padding: 6px 6px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; }

  table.sz-cards td[data-label]::before { flex: 0 0 34%; max-width: 34%; }
  table.sz-cards td { overflow-wrap: anywhere; word-break: normal; }
}


/* cartões do celular: rótulo e valor dividem a linha sem quebrar palavras no meio */
@media (max-width: 768px) {
  table.sz-cards td[data-label]::before {
    flex: 0 1 auto;
    max-width: 44%;
    min-width: 64px;
    letter-spacing: .02em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  table.sz-cards td .sz-val {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  /* atalhos do dashboard: ícone em cima, nome embaixo (sem sobreposição) */
  .cardBox .card {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .cardBox .card > a:last-child { order: -1; margin: 0; }
  .cardBox .card .grid-blak { width: 100%; }
  .cardBox .card .numbers { font-size: 1em; font-weight: 700; white-space: normal; overflow: visible; }
}


/* nos cartões do celular, o corte de texto do template (cli1/ph1: max-width + reticências) não se aplica */
@media (max-width: 768px) {
  table.sz-cards td,
  table.sz-cards td.cli1,
  table.sz-cards td.ph1,
  table.sz-cards td.ph3,
  table.sz-cards th {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  table.sz-cards td.ph3 { display: flex !important; }
}


/* tabelas só de layout: células empilhadas no celular (nada fica fora da tela) */
@media (max-width: 768px) {
  table.sz-stack,
  table.sz-stack tbody,
  table.sz-stack tr,
  table.sz-stack td {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: visible;
  }

  table.sz-stack td {
    text-align: left !important;
    padding: 6px 4px;
    border-left: 0;
    border-right: 0;
    overflow-wrap: anywhere;
  }

  table.sz-stack tr { margin-bottom: 4px; }
  table.sz-stack img { max-width: 100%; height: auto; }
}


/* botões de ação com texto no celular (o template os reduzia a 32px, só com ícone) */
@media (max-width: 768px) {
  #content .button {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible;
    height: auto;
    min-height: 40px;
  }

  #content .button .button__text,
  #content .button .button__text2 {
    display: inline-flex !important;
    align-items: center;
    padding: 6px 14px 6px 10px;
    white-space: normal;
    line-height: 1.25;
    text-align: left;
  }

  #content .button .button__icon {
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 40px;
    justify-content: center;
  }
}


@media (max-width: 768px) {
  #content .button .button__text,
  #content .button .button__text2 { align-self: center; height: auto; }
}


/* nomes dos atalhos do dashboard nunca cortados com reticências */
.cardBox .card .numbers,
.cardBox .card .cardName,
.cardBox .card .N-tittle {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
}

.cardBox .card .grid-blak { min-width: 0; flex: 1 1 auto; }


/* larguras intermediárias (notebook pequeno/tablet): células compactas e sem quebra em selos e valores */
@media (min-width: 769px) and (max-width: 1300px) {
  .table td, .table th { padding: 8px 6px; }
}

.table td .badge,
.table td .label { white-space: nowrap; }

/* valores em reais e datas não quebram no meio */
.table td { font-variant-numeric: tabular-nums; }


/* =====================================================================
   ATALHOS DO DASHBOARD: cores vivas da marca, texto branco e ícone em destaque
   ===================================================================== */
.cardBox .card {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  color: #fff;
  background: linear-gradient(135deg, var(--c1), var(--c2)) !important;
  box-shadow: 0 10px 24px var(--sh);
  isolation: isolate;
}

/* brilho decorativo no canto */
.cardBox .card::before,
.cardBox .card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  z-index: -1;
  pointer-events: none;
}

.cardBox .card::before { width: 120px; height: 120px; right: -34px; top: -44px; }
.cardBox .card::after { width: 70px; height: 70px; right: 38px; bottom: -34px; background: rgba(255, 255, 255, .09); }

.cardBox .card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px var(--sh); }

.cardBox .card:nth-child(1) { --c1: #3b82f6; --c2: #6aa6ff; --sh: rgba(59, 130, 246, .32); }   /* Clientes   */
.cardBox .card:nth-child(2) { --c1: #f08a24; --c2: #ffb457; --sh: rgba(240, 138, 36, .32); }   /* Produtos   */
.cardBox .card:nth-child(3) { --c1: #0fa38f; --c2: #3ccdb8; --sh: rgba(15, 163, 143, .30); }   /* Serviços   */
.cardBox .card:nth-child(4) { --c1: #e0527f; --c2: #f27aa0; --sh: rgba(224, 82, 127, .34); }   /* Atendimentos (cor da marca) */
.cardBox .card:nth-child(5) { --c1: #7c5cff; --c2: #a58bff; --sh: rgba(124, 92, 255, .32); }   /* Vendas     */
.cardBox .card:nth-child(6) { --c1: #16a34a; --c2: #46c978; --sh: rgba(22, 163, 74, .30); }    /* Lançamentos */

.cardBox .card .numbers,
.cardBox .card .numbers a,
.cardBox .card a { color: #fff !important; text-decoration: none; }

.cardBox .card .numbers {
  font-weight: 800;
  font-size: 1.25em;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.cardBox .card .cardName {
  color: rgba(255, 255, 255, .88) !important;
  font-weight: 600;
  font-size: .85em;
}

/* ícone: bolha branca translúcida com o desenho em branco */
.cardBox .card [class*="lord-icon0"] {
  background: rgba(255, 255, 255, .24) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  border-radius: 16px;
  width: 52px;
  height: 52px;
  backdrop-filter: blur(2px);
}

.cardBox .card [class*="iconBx"] { color: #fff !important; font-size: 1.9em; }

@media (max-width: 768px) {
  .cardBox .card [class*="lord-icon0"] { width: 42px; height: 42px; }
  .cardBox .card [class*="iconBx"] { font-size: 1.6em; }
  .cardBox .card .numbers { font-size: 1.05em; }
  .cardBox .card::before { width: 90px; height: 90px; right: -26px; top: -34px; }
}


/* ícones dos atalhos: brancos e firmes (o template aplicava opacidade 0.8) */
.cardBox .card [class*="lord-icon0"],
.cardBox .card [class*="lord-icon0"]:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, .30) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}

.cardBox .card [class*="iconBx"] {
  opacity: 1 !important;
  color: #fff !important;
  font-size: 2.1em;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18));
}

.cardBox .card .numbers { font-size: 1.35em; }