/*
 * TMAADS — Responsive + Theme System
 * Complementa o style.css do tema Striking Dash
 * Nao altera a area de exibicao TV (monitor/)
 */

/* ═══════════════════════════════════════════
   CSS VARIABLES — LIGHT THEME (default)
   ═══════════════════════════════════════════ */
:root {
  --tma-bg:             #f4f5f7;
  --tma-card-bg:        #ffffff;
  --tma-card-border:    #e3e6ef;
  --tma-text:           #272b41;
  --tma-text-muted:     #9299b8;
  --tma-text-light:     #c5cae0;
  --tma-sidebar-bg:     #ffffff;
  --tma-header-bg:      #ffffff;
  --tma-input-bg:       #ffffff;
  --tma-input-border:   #e3e6ef;
  --tma-table-stripe:   #f8f9fa;
  --tma-table-border:   #e9ecef;
  --tma-shadow:         0 5px 20px rgba(146,153,184,.1);
  --tma-shadow-lg:      0 10px 40px rgba(146,153,184,.2);
  --tma-accent:         #5f63f2;
  --tma-accent-2:       #7b7ff5;
  --tma-scrollbar:      #dee2ef;
  --tma-code-bg:        #f8f8f8;
  --tma-modal-bg:       #ffffff;
}

/* ═══════════════════════════════════════════
   CSS VARIABLES — DARK THEME
   ═══════════════════════════════════════════ */
[data-theme="dark"] {
  --tma-bg:             #1b1e2b;
  --tma-card-bg:        #272b41;
  --tma-card-border:    #333754;
  --tma-text:           #e4e8ef;
  --tma-text-muted:     #9299b8;
  --tma-text-light:     #4d5679;
  --tma-sidebar-bg:     #1f2235;
  --tma-header-bg:      #1f2235;
  --tma-input-bg:       #313654;
  --tma-input-border:   #3f4568;
  --tma-table-stripe:   #2e3349;
  --tma-table-border:   #333754;
  --tma-shadow:         0 5px 20px rgba(0,0,0,.3);
  --tma-shadow-lg:      0 10px 40px rgba(0,0,0,.5);
  --tma-accent:         #5f63f2;
  --tma-accent-2:       #7b7ff5;
  --tma-scrollbar:      #333754;
  --tma-code-bg:        #1a1d2e;
  --tma-modal-bg:       #272b41;
}

/* ═══════════════════════════════════════════
   APPLY DARK THEME
   ═══════════════════════════════════════════ */

/* Body */
[data-theme="dark"] body {
  background: var(--tma-bg) !important;
  color: var(--tma-text) !important;
}

/* Header / Navbar */
[data-theme="dark"] .header-top,
[data-theme="dark"] .navbar {
  background: var(--tma-header-bg) !important;
  border-bottom: 1px solid var(--tma-card-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.2) !important;
}
[data-theme="dark"] .navbar .navbar-brand img.dark { filter: brightness(1.8); }

/* Sidebar */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .sidebar-wrapper .sidebar {
  background: var(--tma-sidebar-bg) !important;
  border-right: 1px solid var(--tma-card-border) !important;
}
[data-theme="dark"] .sidebar__menu-group ul.sidebar_nav > li > a {
  color: var(--tma-text-muted) !important;
}
[data-theme="dark"] .sidebar__menu-group ul.sidebar_nav > li > a:hover {
  background: rgba(95,99,242,.12) !important;
  color: var(--tma-text) !important;
}
[data-theme="dark"] .sidebar__menu-group ul.sidebar_nav li.menu-title span {
  color: var(--tma-text-light) !important;
}

/* Cards */
[data-theme="dark"] .card-default,
[data-theme="dark"] .card {
  background: var(--tma-card-bg) !important;
  border-color: var(--tma-card-border) !important;
  box-shadow: var(--tma-shadow) !important;
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background: transparent !important;
  border-color: var(--tma-card-border) !important;
}

/* Headings & Text */
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] h5, [data-theme="dark"] h6 {
  color: var(--tma-text) !important;
}
[data-theme="dark"] p { color: var(--tma-text); }
[data-theme="dark"] .text-muted { color: var(--tma-text-muted) !important; }
[data-theme="dark"] label { color: var(--tma-text-muted) !important; }
[data-theme="dark"] .breadcrumb-main h4 { color: var(--tma-text) !important; }

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--tma-input-bg) !important;
  border-color: var(--tma-input-border) !important;
  color: var(--tma-text) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--tma-accent) !important;
  box-shadow: 0 0 0 3px rgba(95,99,242,.2) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--tma-text-light) !important; }

/* Tables */
[data-theme="dark"] .table {
  color: var(--tma-text) !important;
  border-color: var(--tma-table-border) !important;
}
[data-theme="dark"] .table th {
  background: var(--tma-table-stripe) !important;
  border-color: var(--tma-table-border) !important;
  color: var(--tma-text-muted) !important;
}
[data-theme="dark"] .table td {
  border-color: var(--tma-table-border) !important;
  color: var(--tma-text) !important;
}
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background: var(--tma-table-stripe) !important;
}
[data-theme="dark"] .table-hover tbody tr:hover {
  background: rgba(95,99,242,.08) !important;
}

/* Dropdowns */
[data-theme="dark"] .dropdown-wrapper,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-custom .dropdown-wrapper {
  background: var(--tma-modal-bg) !important;
  border: 1px solid var(--tma-card-border) !important;
  box-shadow: var(--tma-shadow-lg) !important;
}
[data-theme="dark"] .dropdown-wrapper a,
[data-theme="dark"] .dropdown-menu a,
[data-theme="dark"] .nav-author__options ul li a,
[data-theme="dark"] .nav-author__signout { color: var(--tma-text) !important; }
[data-theme="dark"] .nav-author__info h6 { color: var(--tma-text) !important; }
[data-theme="dark"] .nav-author__info span { color: var(--tma-text-muted) !important; }

/* Modals */
[data-theme="dark"] .modal-content {
  background: var(--tma-modal-bg) !important;
  border-color: var(--tma-card-border) !important;
  color: var(--tma-text) !important;
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--tma-card-border) !important; }
[data-theme="dark"] .modal-title { color: var(--tma-text) !important; }
[data-theme="dark"] .close { color: var(--tma-text) !important; }

/* Badges */
[data-theme="dark"] .badge-light { background: rgba(255,255,255,.1) !important; color: var(--tma-text) !important; }

/* Breadcrumb background */
[data-theme="dark"] .breadcrumb-main { background: transparent !important; }

/* Alert / notification */
[data-theme="dark"] .alert {
  background: rgba(95,99,242,.12) !important;
  border-color: rgba(95,99,242,.25) !important;
  color: var(--tma-text) !important;
}

/* Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--tma-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--tma-scrollbar); border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--tma-accent); }

/* Select box options */
[data-theme="dark"] option { background: var(--tma-input-bg); color: var(--tma-text); }

/* Nav tabs */
[data-theme="dark"] .nav-tabs { border-color: var(--tma-card-border) !important; }
[data-theme="dark"] .nav-tabs .nav-link { color: var(--tma-text-muted) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active {
  background: var(--tma-card-bg) !important;
  border-color: var(--tma-card-border) !important;
  color: var(--tma-accent) !important;
}

/* Toggle switch */
[data-theme="dark"] .custom-control-label::before {
  background: var(--tma-input-bg) !important;
  border-color: var(--tma-input-border) !important;
}

/* ═══════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════ */
#tma-theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 8px;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#tma-theme-btn:hover { background: rgba(95,99,242,.1); }
#tma-theme-btn svg { display: block; }
.tma-icon-moon { display: none; }
.tma-icon-sun  { display: block; }
[data-theme="dark"] .tma-icon-moon { display: block; }
[data-theme="dark"] .tma-icon-sun  { display: none; }

/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 991px
   ═══════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Contents area — espaco para o FAB */
  .contents {
    padding-top: 72px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 40px !important;
  }

  /* Breadcrumb: empilhar verticalmente */
  .breadcrumb-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 0 10px !important;
    margin-bottom: 4px !important;
    border-bottom: none !important;
  }
  .breadcrumb-main h4 {
    margin-bottom: 0 !important;
    font-size: 18px !important;
  }
  .breadcrumb-action {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .breadcrumb-action .btn,
  .breadcrumb-action a.btn {
    flex: 1 1 auto !important;
    min-width: 140px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* ── TABELAS: scroll horizontal em todas as paginas ── */
  /* Bootstrap table-responsive ja tem overflow-x:auto, mas garantir aqui */
  .table-responsive,
  .tma-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px;
    /* Indicador visual de scroll */
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
  }
  [data-theme="dark"] .table-responsive,
  [data-theme="dark"] .tma-table-wrap {
    background-color: var(--tma-card-bg, #272b41);
  }

  /* Tabela: tamanho de fonte menor no mobile */
  .contents .table {
    font-size: 12px !important;
  }
  .contents .table th,
  .contents .table td {
    padding: 8px 8px !important;
  }
  /* ID e Ordem: compactos */
  .contents .table th:first-child,
  .contents .table td:first-child {
    min-width: 48px;
    width: 48px;
  }

  /* Badges nas tabelas: menores no mobile */
  .contents .table .badge,
  .contents .badge {
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  /* Botoes de acao nas tabelas (editar/excluir) */
  .contents .table .btn,
  .contents .table a.btn,
  .userDatatable__actions a,
  .userDatatable__actions button {
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-height: 0 !important;
    margin: 1px !important;
  }

  /* Cards: margem */
  .card-default { margin-bottom: 14px !important; }
  .card-default .card-header { padding: 12px 14px !important; }
  .card-default .card-body   { padding: 12px 10px !important; overflow-x: auto; }

  /* Forms: previne zoom no iOS ao focar input (min 16px) */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea { font-size: 16px !important; }

  /* Botoes geral: touch-friendly */
  .btn { min-height: 40px; }

  /* Formularios de nova entrada: stack vertical */
  .form-group { margin-bottom: 16px !important; }
  .form-group label { font-size: 13px !important; margin-bottom: 5px !important; }

  /* Container sem padding lateral extra no mobile */
  .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}

/* ═══════════════════════════════════════════
   RESPONSIVE — max-width: 575px (telefones)
   ═══════════════════════════════════════════ */
@media (max-width: 575px) {
  .contents {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .breadcrumb-main h4 { font-size: 16px !important; }
  .breadcrumb-action .btn { flex: 1 1 48% !important; }

  /* Dashboard stat cards: 2 por linha */
  .col-6.col-md-3 .card-body { padding: 14px 8px !important; }

  /* Tabela ainda mais compacta */
  .contents .table {
    font-size: 11px !important;
  }
  .contents .table th,
  .contents .table td {
    padding: 6px 8px !important;
  }
}


/* ═══════════════════════════════════════════
   PRODUCTS PAGE — TOOLBAR
   ═══════════════════════════════════════════ */

/* Breadcrumb: titulo a esquerda, botoes a direita */
.prod-breadcrumb {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  flex-flow: row wrap !important;
  gap: 12px !important;
  padding: 12px 0 !important;
}
.prod-breadcrumb .breadcrumb-action {
  display: flex !important;
  margin: 0 !important;
  flex-wrap: wrap;
}

/* Container geral dos botoes */
.prod-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Separador vertical entre view toggle e action buttons */
.prod-sep {
  width: 1px;
  height: 28px;
  background: var(--tma-card-border, #e3e6ef);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Linha de botoes de acao */
.tma-action-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Botoes dentro da toolbar: compactos e uniformes */
.tma-action-row .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  line-height: 1.4;
  min-height: 34px;
  transition: all .2s ease;
}
.tma-action-row .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.tma-action-row .btn i {
  font-size: 13px;
}

/* Mobile: toolbar empilha */
@media (max-width: 991px) {
  .prod-breadcrumb {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .prod-toolbar {
    width: 100%;
    justify-content: flex-start;
  }
  .prod-sep {
    display: none;
  }
  .tma-action-row {
    width: 100%;
  }
  .tma-action-row .btn {
    flex: 1 1 auto;
    min-width: 120px;
    font-size: 12px;
    padding: 8px 12px;
    min-height: 40px;
  }
}

/* Telefones pequenos: botoes 2 por linha */
@media (max-width: 575px) {
  .tma-action-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .tma-action-row .btn {
    min-width: 0;
    font-size: 11px;
    padding: 8px 8px;
  }
}

/* ═══════════════════════════════════════════
   TABLE FILTERS ROW
   ═══════════════════════════════════════════ */

/* Linha de filtros */
tr.filters th {
  padding: 6px 4px !important;
  vertical-align: middle !important;
}

/* Todos os inputs e selects de filtro */
.column-filter {
  height: 34px !important;
  min-height: 34px !important;
  font-size: 12px !important;
  padding: 4px 8px !important;
  border: 1px solid #e3e6ef !important;
  border-radius: 5px !important;
  background-color: #fff !important;
  color: #5a5f7d !important;
  width: 100% !important;
  line-height: 1.4 !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.column-filter:focus {
  border-color: #5f63f2 !important;
  box-shadow: 0 0 0 2px rgba(95,99,242,.12) !important;
  outline: none !important;
}

/* Selects — espaco para a seta dropdown */
select.column-filter {
  padding-right: 24px !important;
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  cursor: pointer;
  min-width: 90px;
}

/* Placeholder dos inputs */
.column-filter::placeholder {
  color: #adb4d2 !important;
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════
   INFO FATURA PANEL (Como funciona a fatura)
   ═══════════════════════════════════════════ */

/* Panel container */
.info-fatura-panel {
  border: 1px solid var(--tma-card-border, #e3e6ef);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* Toggle button */
.info-fatura-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.info-fatura-toggle:hover {
  background: rgba(95,99,242,.03);
}
.info-fatura-toggle:focus {
  outline: none;
}
.info-fatura-toggle-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Icone ? */
.info-fatura-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5f63f2, #7c5cfc);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.info-fatura-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1f36;
  text-align: left;
}
.info-fatura-subtitle {
  font-size: 12px;
  color: #9299b8;
  text-align: left;
}

/* Chevron */
.info-fatura-chevron {
  font-size: 12px;
  color: #9299b8;
  transition: transform .3s ease;
}
.info-fatura-panel.open .info-fatura-chevron {
  transform: rotate(180deg);
}

/* Body — collapsed por default */
.info-fatura-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .3s ease;
  padding: 0 20px;
}
.info-fatura-panel.open .info-fatura-body {
  max-height: 600px;
  padding: 0 20px 20px;
}

/* Regras numeradas */
.info-regras {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  border-top: 1px solid #f1f2f6;
  padding-top: 16px;
}
.info-regra {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.info-regra-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5f63f2, #7c5cfc);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-regra-text {
  font-size: 13px;
  color: #5a5f7d;
  line-height: 1.5;
}
.info-regra-text strong {
  color: #1a1f36;
}

/* Titulo exemplos */
.info-exemplos-titulo {
  font-size: 13px;
  font-weight: 700;
  color: #e67e22;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.info-exemplos-titulo i {
  color: #f5b041;
}

/* Grid de exemplos */
.info-exemplos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.info-exemplo {
  background: #f8f9fb;
  border-radius: 10px;
  padding: 14px;
  border: 1px solid #f1f2f6;
}
.info-exemplo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.info-exemplo-icon {
  font-size: 18px;
}
.info-exemplo-label {
  font-size: 13px;
  font-weight: 700;
  color: #1a1f36;
}
.info-exemplo-desc {
  font-size: 12px;
  color: #9299b8;
  margin-bottom: 8px;
}
.info-exemplo-result {
  font-size: 12px;
  font-weight: 600;
  color: #27ae60;
  display: flex;
  align-items: center;
  gap: 5px;
}
.info-exemplo-result i {
  color: #27ae60;
}

/* ═══════════════════════════════════════════
   DESTAQUES CARDS
   ═══════════════════════════════════════════ */

.destaque-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--tma-card-border, #e3e6ef);
  transition: transform .2s ease, box-shadow .2s ease;
}
.destaque-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

/* Thumbnail container — altura fixa */
.destaque-thumb {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f4f5f7;
}
.destaque-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.destaque-card:hover .destaque-thumb img {
  transform: scale(1.05);
}

/* Placeholder quando nao tem imagem */
.destaque-thumb .placeholder-icon {
  font-size: 48px;
  color: #c4c8d8;
}

/* Badge de contagem de imagens */
.destaque-thumb .img-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

/* Acoes do card */
.destaque-card .card-actions {
  display: flex;
  gap: 6px;
}
.destaque-card .card-actions .btn {
  padding: 4px 10px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════
   PRODUCTS ACTION BUTTONS GRID
   ═══════════════════════════════════════════ */

/* Desktop: botoes em linha */
.tma-action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.tma-action-btn {
  flex: 1 1 auto;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap;
}

/* Mobile: 2 colunas */
@media (max-width: 991px) {
  .tma-action-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
  }
  .tma-action-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}

/* Telefone pequeno: 1 coluna */
@media (max-width: 400px) {
  .tma-action-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════
   PRODUTO CARDS GRID
   ═══════════════════════════════════════════ */

/* Botoes de alternancia view */
.tma-view-btns {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tma-view-btns button {
  background: transparent;
  border: 1px solid var(--tma-card-border, #e3e6ef);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--tma-text-muted, #9299b8);
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}
.tma-view-btns button.tma-active,
.tma-view-btns button:hover {
  background: var(--tma-accent, #5f63f2);
  border-color: var(--tma-accent, #5f63f2);
  color: #fff;
}

/* Cards container */
#tma-cards-view {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
  padding: 4px 0 8px;
}
#tma-cards-view.tma-active { display: grid; }

/* Individual product card */
.tma-pcard {
  background: var(--tma-card-bg, #fff);
  border: 1px solid var(--tma-card-border, #e3e6ef);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s, transform .15s;
}
.tma-pcard:hover {
  box-shadow: var(--tma-shadow-lg, 0 10px 40px rgba(146,153,184,.2));
  transform: translateY(-2px);
}
.tma-pcard__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--tma-table-stripe, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--tma-text-light, #c5cae0);
}
.tma-pcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tma-pcard__body { padding: 10px; }
.tma-pcard__code {
  font-size: 10px;
  color: var(--tma-text-muted, #9299b8);
  margin-bottom: 3px;
  letter-spacing: .4px;
}
.tma-pcard__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--tma-text, #272b41);
  margin-bottom: 4px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 32px;
}
.tma-pcard__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--tma-accent, #5f63f2);
}
.tma-pcard__footer {
  padding: 8px 10px;
  border-top: 1px solid var(--tma-card-border, #e3e6ef);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tma-pcard__footer .btn { min-height: 0; padding: 4px 10px; font-size: 11px; }

/* Dark mode card */
[data-theme="dark"] .tma-pcard {
  background: var(--tma-card-bg);
  border-color: var(--tma-card-border);
}
[data-theme="dark"] .tma-pcard__name { color: var(--tma-text); }
[data-theme="dark"] .tma-pcard__footer { border-color: var(--tma-card-border); }

/* ═══════════════════════════════════════════
   THEME EARLY APPLY — prevent flash
   ═══════════════════════════════════════════ */
body { transition: background .25s ease, color .2s ease; }
.card-default, .card { transition: background .25s ease, border-color .2s ease; }
.sidebar, .header-top { transition: background .25s ease; }

/* ═══════════════════════════════════════════
   DESKTOP SIDEBAR TOGGLE BUTTON
   ═══════════════════════════════════════════ */

/* O botao hamburger desktop fica na navbar-left */
.tma-desk-toggle {
  display: none; /* oculto por padrao; aparece so no desktop abaixo */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 8px;
  color: inherit;
  align-items: center;
  justify-content: center;
  transition: background .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.tma-desk-toggle:hover { background: rgba(95,99,242,.1); }

/* Apenas desktop */
@media (min-width: 992px) {
  .tma-desk-toggle { display: flex; }

  /* Transicoes suaves do sidebar e do conteudo */
  .sidebar-wrapper {
    transition: width .28s ease, min-width .28s ease, transform .28s ease !important;
    overflow: hidden;
  }
  .contents {
    transition: padding-left .28s ease, margin-left .28s ease !important;
  }

  /* Estado: sidebar oculto */
  body.tma-sb-hidden .sidebar-wrapper {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0;
  }
  body.tma-sb-hidden .sidebar-wrapper .sidebar {
    transform: translateX(-100%) !important;
    box-shadow: none !important;
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .2s ease !important;
  }
  body.tma-sb-hidden .contents,
  body.tma-sb-hidden .contents.expanded {
    padding-left: 30px !important;
    margin-left: 0 !important;
  }

  /* Estado: sidebar visivel — garantir transicao ao reabrir */
  body:not(.tma-sb-hidden) .sidebar-wrapper .sidebar {
    transform: translateX(0) !important;
    opacity: 1;
    pointer-events: auto;
    transition: transform .28s ease, opacity .2s ease !important;
  }
}



/* FIX: jQuery UI select override ? garante visibilidade dos selects */
select.form-control,
select.form-control-sm,
select.form-control-lg,
.filter-bar select {
  color: var(--tma-text, #272b41) !important;
  background-color: var(--tma-input-bg, #ffffff) !important;
  background-image: none !important;
  border: 1.5px solid var(--tma-card-border, #e3e6ef) !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  opacity: 1 !important;
}
select.form-control option,
select.form-control-sm option,
.filter-bar select option {
  color: var(--tma-text, #272b41) !important;
  background-color: var(--tma-input-bg, #ffffff) !important;
}
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-control-sm,
[data-theme="dark"] .filter-bar select {
  color: var(--tma-text, #e4e8ef) !important;
  background-color: var(--tma-input-bg, #313654) !important;
}
[data-theme="dark"] select.form-control option,
[data-theme="dark"] .filter-bar select option {
  color: var(--tma-text, #e4e8ef) !important;
  background-color: var(--tma-input-bg, #313654) !important;
}


/* RESET jQuery UI widgets ? evita conflito visual com selects/inputs do tema */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: inherit !important;
}
/* Garante que o jQuery UI n?o afeta selects normais do admin */
.ui-selectmenu-button { display: none !important; }


/* ???????????????????????????????????????????
   FIX GLOBAL: Visibilidade de selects em todo o admin
   Garante texto leg?vel independente de jQuery UI ou OS dark mode
   ??????????????????????????????????????????? */
select,
select.form-control,
select.form-control-sm,
select.form-control-lg,
.filter-bar select {
  color: #272b41 !important;
  background-color: #ffffff !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}
select option {
  color: #272b41 !important;
  background-color: #ffffff !important;
}
[data-theme="dark"] select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.form-control-sm,
[data-theme="dark"] .filter-bar select {
  color: #e4e8ef !important;
  background-color: #313654 !important;
  border-color: #3f4568 !important;
}
[data-theme="dark"] select option {
  color: #e4e8ef !important;
  background-color: #313654 !important;
}

/* Reset jQuery UI widgets para n?o conflitar com selects */
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family: inherit !important; }