dentro)
não devem ser estilizados como card. Apenas os wrappers folha (com
/![]()
/) viram cards clicáveis.
===================================================================== */
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) {
padding: 0 !important;
border: 0 !important;
background: transparent !important;
height: auto !important;
min-height: 0 !important;
box-shadow: none !important;
display: block !important;
overflow: visible !important;
cursor: default !important;
}
.main-panel .card .card-body .wrapper:has(> [class*="col-"]):hover {
transform: none !important;
box-shadow: none !important;
background: transparent !important;
border-color: transparent !important;
}
/* O h4 dentro desse wrapper recebe o tratamento de title (com a barrinha lateral) */
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) > h4 {
display:flex !important;
align-items:center !important;
gap:.6rem !important;
font-weight:700 !important;
font-size:1.05rem !important;
color:#1f2937 !important;
margin:0 0 1rem !important;
padding-bottom:.6rem !important;
border-bottom:2px solid #f1f5f9 !important;
text-transform:uppercase !important;
letter-spacing:.4px;
}
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) > h4::before {
content:"";
display:inline-block;
width:6px;
height:22px;
border-radius:3px;
background:linear-gradient(180deg,#3182ce,#2b6cb0);
flex-shrink:0;
}
/* Quando o card-body é d-flex flex-column (típico do quadro col-md-4 da direita),
garantimos que os items internos formem um grid auto-fill — alinhados como nos
cards maiores. */
.main-panel .card .card-body.d-flex.flex-column > .wrapper:has(> [class*="col-"]) {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
.main-panel .card .card-body.d-flex.flex-column > .wrapper:has(> [class*="col-"]) > [class*="col-"] {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
padding: 6px 0 !important;
}
/* E os items (col-lg-3 etc) dentro desse container ficam em grid auto-fill,
permitindo que tenham largura uniforme apesar do parent estreito (col-md-4). */
.main-panel .card .card-body.d-flex.flex-column > .wrapper:has(> [class*="col-"] > .d-flex > .wrapper) {
display: grid !important;
grid-template-columns: 1fr !important; /* 1 coluna pq o parent já é estreito (col-md-4) */
gap: 10px;
}
.main-panel .card .card-body.d-flex.flex-column > .wrapper:has(> [class*="col-"]) > h4 {
grid-column: 1 / -1 !important; /* título ocupa toda a largura */
}
.main-panel .card .card-body.d-flex.flex-column > .wrapper:has(> [class*="col-"]) > [class*="col-"] {
margin: 0 !important;
}
/* CARDs folhas DENTRO de container-wrappers — devolve o estilo de cartão.
Sem isso, a regra `.wrapper .wrapper { border:0; background:transparent; ... }`
(linha ~184 deste arquivo) "zera" a aparência dos botões internos. */
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) .wrapper:has(> a, > img, > p, > h1, > h2, > h3, > h4, > h5, > h6) {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
background: #fff !important;
padding: 14px 8px 12px !important;
margin: 0 !important;
height: 150px !important;
min-height: 150px !important;
width: 100% !important;
box-sizing: border-box !important;
cursor: pointer !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
flex: 0 0 auto !important;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) .wrapper:has(> a, > img, > p, > h1, > h2, > h3, > h4, > h5, > h6):hover {
transform: translateY(-3px) !important;
box-shadow: 0 10px 24px rgba(49,130,206,.18) !important;
border-color: #bee3f8 !important;
background: #f7fbff !important;
}
/* E os spacers vazios (.wrapper.my-auto/.ml-auto) seguem ocultos mesmo dentro do container */
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) .wrapper.my-auto,
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) .wrapper.ml-auto,
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) .wrapper.mr-auto,
.main-panel .card .card-body .wrapper:has(> [class*="col-"]) .wrapper:empty {
display: none !important;
}