/* ==========================================================================
   ERP WEB PRO — Componentes
   --------------------------------------------------------------------------
   Reestiliza os componentes herdados (AdminLTE 2 / Bootstrap 3) usados pelas
   telas existentes — .box, .table, .btn, .form-control, .nav-tabs, .modal —
   e define as classes dos novos componentes Blade (prefixo `ui-` / `erp-`).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cards  (herdado: .box | novo: .ui-card)
   -------------------------------------------------------------------------- */
.box,
.ui-card {
    position: relative;
    margin-bottom: 20px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-sm);
    transition: box-shadow var(--erp-transition);
}

.box:hover,
.ui-card:hover {
    box-shadow: var(--erp-shadow);
}

/* Anula as bordas coloridas (border-top 3px) do AdminLTE. */
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
    border-top: 1px solid var(--erp-border);
}

.box-header,
.ui-card__header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    color: var(--erp-text);
    border-bottom: 1px solid transparent;
    border-radius: var(--erp-radius) var(--erp-radius) 0 0;
}

.box-header.with-border,
.ui-card__header--bordered {
    border-bottom-color: var(--erp-divider);
}

.box-header > .box-title,
.ui-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    color: var(--erp-text);
    font-size: var(--erp-fs-base);
    font-weight: var(--erp-fw-semibold);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.box-header > .box-title > a {
    color: inherit;
}

.box-header > .box-title > i,
.box-header > .box-title > .fa,
.box-header > .box-title > .fas {
    color: var(--erp-text-muted);
}

.box-header > .box-title > small,
.ui-card__subtitle {
    display: block;
    width: 100%;
    margin-top: 2px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-regular);
}

.box-header > .box-tools,
.ui-card__tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.box-header > .box-tools.pull-right {
    float: none !important;
}

.box-body,
.ui-card__body {
    padding: 20px 22px;
    border-radius: 0 0 var(--erp-radius) var(--erp-radius);
}

.box-body.no-padding,
.box-body > .table-responsive,
.ui-card__body--flush {
    padding: 0;
}

.box-body > .table {
    margin-bottom: 0;
}

.box-body > .table-responsive {
    margin: -20px -22px;
    width: auto;
    border-radius: 0 0 var(--erp-radius) var(--erp-radius);
    overflow: hidden;
}

.box-footer,
.ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    background: var(--erp-surface-muted);
    border-top: 1px solid var(--erp-divider);
    border-radius: 0 0 var(--erp-radius) var(--erp-radius);
}

/* Variante "sólida" (cabeçalho colorido) */
.box-solid > .box-header,
.box.box-solid > .box-header {
    color: #fff;
    background: var(--erp-primary);
}

.box-solid > .box-header > .box-title,
.box.box-solid > .box-header > .box-title {
    color: #fff;
}

.box-solid.box-success > .box-header { background: var(--erp-success); }
.box-solid.box-warning > .box-header { background: var(--erp-warning); }
.box-solid.box-danger > .box-header { background: var(--erp-danger); }
.box-solid.box-info > .box-header { background: var(--erp-info); }

/* Colapsável (AdminLTE usa .collapsed com :before) */
.box-header > .box-tools > [data-widget="collapse"] {
    display: none;
}

/* --------------------------------------------------------------------------
   2. Cartões de indicadores
   -------------------------------------------------------------------------- */
/* Info box (AdminLTE) */
.info-box {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 84px;
    width: 100%;
    padding: 18px 20px;
    margin-bottom: 20px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-sm);
    transition: box-shadow var(--erp-transition), transform var(--erp-transition);
}

.info-box:hover {
    box-shadow: var(--erp-shadow);
    transform: translateY(-1px);
}

.info-box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--erp-radius-sm);
    font-size: 1.25rem;
    color: var(--erp-primary) !important;
    background: var(--erp-primary-soft) !important;
    box-shadow: none;
}

.info-box-icon > i {
    line-height: 1;
}

.info-box-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}

.info-box-text {
    display: block;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    font-weight: var(--erp-fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info-box-number {
    display: block;
    margin-top: 4px;
    color: var(--erp-text);
    font-size: 1.375rem;
    font-weight: var(--erp-fw-semibold);
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: normal;
}

/* Ajusta a cor do ícone por variante informada na classe do próprio ícone */
.info-box-icon.bg-aqua,
.info-box-icon.bg-aqua-active { background: var(--erp-primary-soft) !important; color: var(--erp-primary) !important; }
.info-box-icon.bg-green,
.info-box-icon.bg-green-active { background: var(--erp-success-soft) !important; color: var(--erp-success) !important; }
.info-box-icon.bg-yellow,
.info-box-icon.bg-orange,
.info-box-icon.bg-yellow-active { background: var(--erp-warning-soft) !important; color: var(--erp-warning) !important; }
.info-box-icon.bg-red,
.info-box-icon.bg-red-active { background: var(--erp-danger-soft) !important; color: var(--erp-danger) !important; }
.info-box-icon.bg-purple,
.info-box-icon.bg-navy,
.info-box-icon.bg-teal { background: var(--erp-info-soft) !important; color: var(--erp-info) !important; }

/* Small box (AdminLTE) */
.small-box {
    position: relative;
    display: block;
    margin-bottom: 20px;
    padding: 20px;
    color: var(--erp-text);
    background: var(--erp-surface) !important;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-sm);
}

.small-box h3,
.small-box p {
    color: var(--erp-text);
}

.small-box h3 {
    font-size: 1.75rem;
    font-weight: var(--erp-fw-semibold);
    margin: 0 0 6px;
}

.small-box p {
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-muted);
    margin: 0;
}

.small-box .icon {
    position: absolute;
    top: 16px;
    right: 18px;
    color: var(--erp-text-faint);
    font-size: 2.5rem;
    opacity: 0.5;
}

/* Novo: .ui-stat */
.ui-stat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-sm);
    transition: box-shadow var(--erp-transition), transform var(--erp-transition);
}

.ui-stat:hover {
    box-shadow: var(--erp-shadow);
    transform: translateY(-1px);
}

.ui-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--erp-radius-sm);
    font-size: 1.05rem;
    background: var(--erp-primary-soft);
    color: var(--erp-primary);
}

.ui-stat__icon--success { background: var(--erp-success-soft); color: var(--erp-success); }
.ui-stat__icon--warning { background: var(--erp-warning-soft); color: var(--erp-warning); }
.ui-stat__icon--danger  { background: var(--erp-danger-soft);  color: var(--erp-danger); }
.ui-stat__icon--info    { background: var(--erp-info-soft);    color: var(--erp-info); }
.ui-stat__icon--neutral { background: var(--erp-neutral-soft); color: var(--erp-neutral); }

.ui-stat__content {
    min-width: 0;
    flex: 1 1 auto;
}

.ui-stat__label {
    display: block;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
    font-weight: var(--erp-fw-semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.35;
}

.ui-stat__value {
    display: block;
    margin-top: 2px;
    color: var(--erp-text);
    font-size: 1.5rem;
    font-weight: var(--erp-fw-semibold);
    letter-spacing: -0.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ui-stat__hint {
    display: block;
    margin-top: 4px;
    color: var(--erp-text-faint);
    font-size: var(--erp-fs-xs);
}

/* --------------------------------------------------------------------------
   3. Tabelas
   -------------------------------------------------------------------------- */
.table {
    width: 100%;
    margin-bottom: 0;
    color: var(--erp-text-soft);
    font-size: var(--erp-fs-sm);
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
    padding: 12px 16px;
    color: var(--erp-text-muted);
    font-size: 0.6875rem;
    font-weight: var(--erp-fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
    background: var(--erp-surface-muted);
    border-bottom: 1px solid var(--erp-border);
    border-top: 0;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: 12px 16px;
    vertical-align: middle;
    border-top: 1px solid var(--erp-divider);
    line-height: 1.5;
}

.table > thead > tr:first-child > th:first-child {
    border-top-left-radius: var(--erp-radius-sm);
}

.table > thead > tr:first-child > th:last-child {
    border-top-right-radius: var(--erp-radius-sm);
}

.table > tbody > tr:first-child > td {
    border-top: 0;
}

.table > tbody > tr:hover > td {
    background: var(--erp-surface-hover);
}

.table > tbody > tr.selected > td,
table.dataTable tbody > tr.selected > td {
    background: var(--erp-primary-soft) !important;
    color: var(--erp-primary-active);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: transparent;
}

.table-striped > tbody > tr:nth-of-type(odd):hover > td {
    background: var(--erp-surface-hover);
}

/* Bordas: usa divisores suaves em vez do cinza forte do Bootstrap */
.table-bordered {
    border: 0;
}

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th {
    border: 1px solid var(--erp-divider);
    border-top-color: var(--erp-divider);
}

.table-bordered > thead > tr > th {
    border-bottom-color: var(--erp-border);
}

/* Tabelas "compactas" (PDV e listas densas) continuam densas */
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th {
    padding: 7px 10px;
}

.table-slim > tbody > tr > td,
.table-slim > tbody > tr > th,
.table-slim > tfoot > tr > td,
.table-slim > tfoot > tr > th,
.table-slim > thead > tr > td,
.table-slim > thead > tr > th {
    padding: 6px 8px;
}

/* Rodapé de totais das listas */
.table > tfoot > tr > td {
    background: var(--erp-surface-muted);
    border-top: 1px solid var(--erp-border);
    font-weight: var(--erp-fw-semibold);
}

/* Container responsivo */
.table-responsive {
    width: 100%;
    margin-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border: 0;
    border-radius: var(--erp-radius-sm);
}

/* DataTables */
div.dataTables_wrapper {
    color: var(--erp-text-soft);
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_info {
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-sm);
    padding: 0 0 8px;
}

div.dataTables_wrapper div.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: var(--erp-fw-regular);
    margin-bottom: 0;
}

div.dataTables_wrapper div.dataTables_length select {
    width: auto;
    height: var(--erp-control-h-sm);
    min-width: 70px;
    padding: 0 28px 0 10px;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-xs);
    background-color: var(--erp-surface);
    font-size: var(--erp-fs-sm);
    color: var(--erp-text);
}

div.dataTables_wrapper div.dataTables_filter {
    padding: 0 0 8px;
}

div.dataTables_wrapper div.dataTables_filter label {
    font-weight: var(--erp-fw-regular);
    color: transparent;
    font-size: 0;
    margin: 0;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 240px;
    max-width: 100%;
    height: var(--erp-control-h-sm);
    margin-left: 0;
    padding: 0 12px;
    color: var(--erp-text);
    background: var(--erp-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat left 11px center;
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-xs);
    font-size: var(--erp-fs-sm);
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition);
    padding-left: 32px;
}

div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: var(--erp-primary);
    box-shadow: var(--erp-ring);
    outline: none;
}

div.dataTables_wrapper div.dataTables_filter input::placeholder {
    color: var(--erp-text-faint);
}

div.dataTables_wrapper div.dataTables_paginate {
    padding-top: 14px;
}

/* Botões de exportação (DataTables Buttons) */
.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 8px;
}

.dt-buttons .btn {
    height: var(--erp-control-h-sm);
    padding: 0 12px;
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-xs);
    box-shadow: none;
}

.dt-buttons .btn:hover,
.dt-buttons .btn:focus {
    color: var(--erp-text);
    background: var(--erp-surface-muted);
    border-color: var(--erp-border-strong);
}

.dt-buttons .btn > span > i,
.dt-buttons .btn > i {
    color: var(--erp-text-faint);
}

div.dataTables_wrapper div.dataTables_info {
    padding-top: 14px;
}

/* Scroll horizontal do DataTables */
.dataTables_scrollBody {
    border-bottom: 1px solid var(--erp-border);
}

.dataTables_scrollHead table,
.dataTables_scrollBody table {
    margin-bottom: 0;
}

.dataTables_scrollHeadInner {
    width: 100% !important;
}

/* --------------------------------------------------------------------------
   4. Paginação
   -------------------------------------------------------------------------- */
.pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.pagination > li {
    display: inline-flex;
}

.pagination > li > a,
.pagination > li > span {
    min-width: 34px;
    height: var(--erp-control-h-sm);
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-xs);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
    transition: background var(--erp-transition), color var(--erp-transition), border-color var(--erp-transition);
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus {
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
    border-color: var(--erp-primary-soft-2);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    color: #fff;
    background: var(--erp-primary);
    border-color: var(--erp-primary);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    color: var(--erp-text-faint);
    background: var(--erp-surface);
    border-color: var(--erp-border);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-radius: var(--erp-radius-xs);
}

/* "Anterior / Próximo" por extenso no template antigo */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    padding: 0 12px;
}

/* --------------------------------------------------------------------------
   5. Botões
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--erp-control-h);
    padding: 0 16px;
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    font-family: var(--erp-font-sans);
    font-size: var(--erp-fs-base);
    font-weight: var(--erp-fw-medium);
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    box-shadow: var(--erp-shadow-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--erp-transition), border-color var(--erp-transition),
        color var(--erp-transition), box-shadow var(--erp-transition);
}

.btn:focus,
.btn:active:focus,
.btn.active:focus {
    outline: none;
    box-shadow: var(--erp-ring);
}

.btn:hover,
.btn:focus {
    color: var(--erp-text);
    background: var(--erp-surface-muted);
    border-color: var(--erp-border-strong);
}

.btn:active,
.btn.active {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.btn.btn-default {
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border-color: var(--erp-border-strong);
}

.btn.btn-default:hover,
.btn.btn-default:focus {
    color: var(--erp-text);
    background: var(--erp-surface-muted);
}

.btn-primary,
.btn-info {
    color: #fff;
    background: var(--erp-primary);
    border-color: var(--erp-primary);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
    color: #fff;
    background: var(--erp-primary-hover);
    border-color: var(--erp-primary-hover);
}

.btn-success {
    color: #fff;
    background: var(--erp-success);
    border-color: var(--erp-success);
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.25);
}

.btn-success:hover,
.btn-success:focus {
    color: #fff;
    background: var(--erp-success-hover);
    border-color: var(--erp-success-hover);
}

.btn-warning {
    color: #fff;
    background: var(--erp-warning);
    border-color: var(--erp-warning);
}

.btn-warning:hover,
.btn-warning:focus {
    color: #fff;
    background: var(--erp-warning-hover);
    border-color: var(--erp-warning-hover);
}

.btn-danger {
    color: #fff;
    background: var(--erp-danger);
    border-color: var(--erp-danger);
}

.btn-danger:hover,
.btn-danger:focus {
    color: #fff;
    background: var(--erp-danger-hover);
    border-color: var(--erp-danger-hover);
}

/* Variantes "bg-*" do AdminLTE (usadas em muitos botões) */
.btn.bg-green,
.btn.bg-olive { color: #fff; background: var(--erp-success); border-color: var(--erp-success); }
.btn.bg-red,
.btn.bg-maroon { color: #fff; background: var(--erp-danger); border-color: var(--erp-danger); }
.btn.bg-yellow,
.btn.bg-orange { color: #fff; background: var(--erp-warning); border-color: var(--erp-warning); }
.btn.bg-aqua,
.btn.bg-light-blue,
.btn.bg-blue { color: #fff; background: var(--erp-primary); border-color: var(--erp-primary); }
.btn.bg-gray { color: #fff; background: var(--erp-neutral); border-color: var(--erp-neutral); }

.btn.bg-green:hover,
.btn.bg-red:hover,
.btn.bg-yellow:hover,
.btn.bg-aqua:hover,
.btn.bg-gray:hover,
.btn.bg-blue:hover { filter: brightness(0.93); color: #fff; }

/* Tamanhos */
.btn-lg,
.btn-group-lg > .btn {
    height: 48px;
    padding: 0 22px;
    font-size: var(--erp-fs-md);
    border-radius: var(--erp-radius-sm);
}

.btn-sm,
.btn-group-sm > .btn {
    height: var(--erp-control-h-sm);
    padding: 0 12px;
    font-size: var(--erp-fs-sm);
}

.btn-xs,
.btn-group-xs > .btn {
    height: var(--erp-control-h-xs);
    padding: 0 9px;
    font-size: var(--erp-fs-xs);
    border-radius: var(--erp-radius-xs);
}

.btn-flat {
    border-radius: var(--erp-radius-sm) !important;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-block + .btn-block {
    margin-top: 8px;
}

.btn-link {
    color: var(--erp-primary);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--erp-primary-hover);
    background: var(--erp-primary-soft);
    border-color: transparent;
}

/* Grupos de botões */
.btn-group > .btn {
    border-radius: 0;
    margin-left: -1px;
}

.btn-group > .btn:first-child {
    border-radius: var(--erp-radius-sm) 0 0 var(--erp-radius-sm);
    margin-left: 0;
}

.btn-group > .btn:last-child {
    border-radius: 0 var(--erp-radius-sm) var(--erp-radius-sm) 0;
}

.btn-group > .btn:only-child {
    border-radius: var(--erp-radius-sm);
}

.btn-group-sm > .btn { border-radius: 0; }
.btn-group-sm > .btn:first-child { border-radius: var(--erp-radius-xs) 0 0 var(--erp-radius-xs); }
.btn-group-sm > .btn:last-child { border-radius: 0 var(--erp-radius-xs) var(--erp-radius-xs) 0; }

/* Botões de ação dentro de tabelas */
.table .btn {
    height: var(--erp-control-h-xs);
    padding: 0 9px;
    font-size: var(--erp-fs-xs);
    gap: 5px;
    border-radius: var(--erp-radius-xs);
}

.table .btn > i {
    font-size: 0.8rem;
}

/* Botões grandes quadrados (login demo) */
.btn-app {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
    height: auto;
    padding: 14px 16px;
    font-size: var(--erp-fs-sm);
    border-radius: var(--erp-radius-sm);
    white-space: normal;
    line-height: 1.3;
}

.btn-app > i {
    font-size: 1.35rem;
}

/* --------------------------------------------------------------------------
   6. Formulários
   -------------------------------------------------------------------------- */
label,
.control-label {
    margin-bottom: 6px;
    color: var(--erp-text-soft);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
    line-height: 1.4;
}

.form-group {
    margin-bottom: 18px;
}

.form-control {
    display: block;
    width: 100%;
    height: var(--erp-control-h);
    padding: 0 12px;
    color: var(--erp-text);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    font-family: var(--erp-font-sans);
    font-size: var(--erp-fs-base);
    line-height: var(--erp-control-h);
    box-shadow: var(--erp-shadow-xs);
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition), background var(--erp-transition);
}

.form-control:hover {
    border-color: #c3cad8;
}

.form-control:focus {
    color: var(--erp-text);
    background: var(--erp-surface);
    border-color: var(--erp-primary);
    box-shadow: var(--erp-ring);
    outline: none;
}

.form-control::placeholder {
    color: var(--erp-text-faint);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    color: var(--erp-text-muted);
    background: var(--erp-surface-muted);
    border-color: var(--erp-border);
    box-shadow: none;
    cursor: not-allowed;
}

textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 10px 12px;
    line-height: 1.55;
    resize: vertical;
}

select.form-control {
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.form-control[multiple],
select.form-control[size] {
    height: auto;
    padding: 8px 12px;
    background-image: none;
}

.form-control.input-sm,
.input-group-sm > .form-control {
    height: var(--erp-control-h-sm);
    padding: 0 10px;
    font-size: var(--erp-fs-sm);
    line-height: var(--erp-control-h-sm);
    border-radius: var(--erp-radius-xs);
}

.form-control.input-lg {
    height: 48px;
    padding: 0 16px;
    font-size: var(--erp-fs-md);
    border-radius: var(--erp-radius-sm);
}

/* Input group */
.input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: var(--erp-control-h);
    padding: 0 12px;
    color: var(--erp-text-muted);
    background: var(--erp-surface-muted);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
}

.input-group .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-addon:first-child {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-addon:last-child {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .btn {
    height: var(--erp-control-h);
    border-radius: 0 var(--erp-radius-sm) var(--erp-radius-sm) 0;
}

/* Checkbox / radio nativos (quando não há iCheck) */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--erp-primary);
    cursor: pointer;
}

.checkbox,
.radio {
    margin-top: 4px;
    margin-bottom: 8px;
}

.checkbox label,
.radio label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    color: var(--erp-text-soft);
    font-weight: var(--erp-fw-regular);
    cursor: pointer;
}

.checkbox label > input,
.radio label > input {
    margin: 0;
}

.checkbox-inline,
.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    margin-right: 16px;
    font-weight: var(--erp-fw-regular);
}

/* iCheck (plugin legado) — mantém o skin funcionando e alinha melhor */
.icheckbox_square-blue,
.iradio_square-blue {
    margin-right: 8px;
    vertical-align: middle;
}

/* Estados de validação */
.has-error .form-control,
.has-error .select2-selection--single {
    border-color: var(--erp-danger) !important;
}

.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.16);
}

.has-success .form-control {
    border-color: var(--erp-success) !important;
}

.help-block {
    margin: 6px 0 0;
    color: var(--erp-danger);
    font-size: var(--erp-fs-xs);
}

.form-control-feedback {
    color: var(--erp-text-faint);
    line-height: var(--erp-control-h);
    height: var(--erp-control-h);
}

/* Select2 v4 */
.select2-container--default .select2-selection--single {
    height: var(--erp-control-h) !important;
    padding: 0 34px 0 12px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    box-shadow: var(--erp-shadow-xs);
    transition: border-color var(--erp-transition), box-shadow var(--erp-transition);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--erp-text);
    font-size: var(--erp-fs-base);
    line-height: calc(var(--erp-control-h) - 2px);
    padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 8px;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--erp-primary);
    box-shadow: var(--erp-ring);
    outline: none;
}

.select2-container--default .select2-selection--multiple {
    min-height: var(--erp-control-h);
    padding: 4px 8px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-sm);
    box-shadow: var(--erp-shadow-xs);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 3px 8px;
    margin: 2px 4px 2px 0;
    color: #fff;
    background: var(--erp-primary);
    border: 0;
    border-radius: var(--erp-radius-xs);
    font-size: var(--erp-fs-xs);
    font-weight: var(--erp-fw-medium);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px;
    color: #fff;
    font-weight: var(--erp-fw-bold);
}

.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--erp-primary);
    box-shadow: var(--erp-ring);
}

.select2-dropdown {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    box-shadow: var(--erp-shadow-lg);
    overflow: hidden;
}

.select2-results__option {
    padding: 8px 12px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-soft);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: var(--erp-text);
    background: var(--erp-primary-soft);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    color: var(--erp-primary);
    font-weight: var(--erp-fw-semibold);
}

.select2-search--dropdown .select2-search__field {
    height: var(--erp-control-h-sm);
    padding: 0 10px;
    border: 1px solid var(--erp-border-strong);
    border-radius: var(--erp-radius-xs);
}

/* --------------------------------------------------------------------------
   7. Etiquetas / badges / pills
   -------------------------------------------------------------------------- */
.label,
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--erp-radius-pill);
    font-size: 0.6875rem;
    font-weight: var(--erp-fw-semibold);
    letter-spacing: 0.02em;
    line-height: 1.5;
    text-transform: none;
    white-space: nowrap;
}

.label-default,
.badge-default { color: var(--erp-text-soft); background: var(--erp-neutral-soft); }

.label-primary,
.badge-primary { color: var(--erp-primary-active); background: var(--erp-primary-soft); }

.label-success,
.badge-success { color: var(--erp-success-hover); background: var(--erp-success-soft); }

.label-warning,
.badge-warning { color: var(--erp-warning-hover); background: var(--erp-warning-soft); }

.label-danger,
.badge-danger { color: var(--erp-danger-hover); background: var(--erp-danger-soft); }

.label-info,
.badge-info { color: var(--erp-info-hover); background: var(--erp-info-soft); }

/* Cores "bg-*" aplicadas em .label / .badge */
.label.bg-green, .badge.bg-green { color: var(--erp-success-hover); background: var(--erp-success-soft) !important; }
.label.bg-red, .badge.bg-red { color: var(--erp-danger-hover); background: var(--erp-danger-soft) !important; }
.label.bg-yellow, .badge.bg-yellow { color: var(--erp-warning-hover); background: var(--erp-warning-soft) !important; }
.label.bg-aqua, .badge.bg-aqua,
.label.bg-blue, .badge.bg-blue { color: var(--erp-primary-active); background: var(--erp-primary-soft) !important; }
.label.bg-gray, .badge.bg-gray { color: var(--erp-text-soft); background: var(--erp-neutral-soft) !important; }

/* --------------------------------------------------------------------------
   8. Alertas e callouts
   -------------------------------------------------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-left: 4px solid var(--erp-neutral);
    border-radius: var(--erp-radius-sm);
    font-size: var(--erp-fs-base);
}

.alert > strong,
.alert > h4 {
    color: inherit;
}

.alert-success { background: var(--erp-success-soft); border-color: #d1fae5; border-left-color: var(--erp-success); color: #065f46; }
.alert-info    { background: var(--erp-info-soft);    border-color: #e0f2fe; border-left-color: var(--erp-info);    color: #075985; }
.alert-warning { background: var(--erp-warning-soft); border-color: #fef3c7; border-left-color: var(--erp-warning); color: #92400e; }
.alert-danger  { background: var(--erp-danger-soft);  border-color: #fee2e2; border-left-color: var(--erp-danger);  color: #991b1b; }

.alert > .close {
    margin-left: auto;
    color: inherit;
    opacity: 0.6;
}

.callout {
    padding: 16px 18px;
    margin-bottom: 18px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-left: 4px solid var(--erp-primary);
    border-radius: var(--erp-radius-sm);
}

.callout.callout-success { border-left-color: var(--erp-success); }
.callout.callout-warning { border-left-color: var(--erp-warning); }
.callout.callout-danger  { border-left-color: var(--erp-danger); }
.callout.callout-info    { border-left-color: var(--erp-info); }

/* --------------------------------------------------------------------------
   9. Abas e pills
   -------------------------------------------------------------------------- */
.nav-tabs,
.nav-pills {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
}

.nav-tabs > li,
.nav-pills > li {
    float: none;
    margin: 0;
}

.nav-tabs > li > a,
.nav-pills > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    margin: 0;
    color: var(--erp-text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--erp-radius-sm);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
    transition: background var(--erp-transition), color var(--erp-transition);
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    color: var(--erp-text);
    background: var(--erp-surface-muted);
    border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
    border: 0;
    font-weight: var(--erp-fw-semibold);
}

.nav-tabs + .tab-content,
.nav-pills + .tab-content {
    padding-top: 4px;
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

/* Abas "estilo AdminLTE" dentro de cards */
.nav-tabs-custom {
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-sm);
    margin-bottom: 20px;
}

.nav-tabs-custom > .nav-tabs {
    padding: 0 14px;
    margin: 0;
    background: var(--erp-surface-muted);
    border-bottom: 1px solid var(--erp-divider);
    border-radius: var(--erp-radius) var(--erp-radius) 0 0;
}

.nav-tabs-custom > .nav-tabs > li > a {
    border-radius: var(--erp-radius-sm);
    margin: 8px 2px;
}

.nav-tabs-custom > .tab-content {
    padding: 20px 22px;
}

/* --------------------------------------------------------------------------
   10. Modais
   -------------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-lg);
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--erp-divider);
}

.modal-header .close {
    order: 2;
    margin-left: auto;
    padding: 4px;
    color: var(--erp-text-muted);
    font-size: 1.5rem;
    font-weight: var(--erp-fw-regular);
    opacity: 0.7;
    text-shadow: none;
    transition: color var(--erp-transition), opacity var(--erp-transition);
}

.modal-header .close:hover {
    color: var(--erp-text);
    opacity: 1;
}

.modal-title {
    margin: 0;
    font-size: var(--erp-fs-lg);
    font-weight: var(--erp-fw-semibold);
    letter-spacing: -0.01em;
    color: var(--erp-text);
}

.modal-body {
    padding: 22px 24px;
    font-size: var(--erp-fs-base);
    color: var(--erp-text-soft);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: var(--erp-surface-muted);
    border-top: 1px solid var(--erp-divider);
}

.modal-footer .btn + .btn {
    margin-left: 0;
}

.modal-backdrop.in {
    opacity: 0.45;
    background: #0f172a;
}

/* Loading global do tema */
.modal-loading.loading-class {
    display: none;
}

/* --------------------------------------------------------------------------
   11. Popover / tooltip
   -------------------------------------------------------------------------- */
.popover {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-lg);
    padding: 0;
}

.popover-title {
    padding: 10px 14px;
    background: var(--erp-surface-muted);
    border-bottom: 1px solid var(--erp-divider);
    border-radius: var(--erp-radius) var(--erp-radius) 0 0;
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-semibold);
    color: var(--erp-text);
}

.popover-content {
    padding: 14px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-soft);
}

.tooltip-inner {
    padding: 6px 10px;
    background: #0f172a;
    border-radius: var(--erp-radius-xs);
    font-size: var(--erp-fs-xs);
    font-weight: var(--erp-fw-medium);
    box-shadow: var(--erp-shadow);
}

.tooltip.top .tooltip-arrow { border-top-color: #0f172a; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #0f172a; }
.tooltip.left .tooltip-arrow { border-left-color: #0f172a; }
.tooltip.right .tooltip-arrow { border-right-color: #0f172a; }

/* --------------------------------------------------------------------------
   12. Bem-vindo / vazio
   -------------------------------------------------------------------------- */
.ui-empty,
.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 24px;
    text-align: center;
    color: var(--erp-text-muted);
}

.ui-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--erp-radius-pill);
    background: var(--erp-surface-muted);
    color: var(--erp-text-faint);
    font-size: 1.4rem;
}

.ui-empty__title {
    margin: 0;
    color: var(--erp-text);
    font-size: var(--erp-fs-base);
    font-weight: var(--erp-fw-semibold);
}

.ui-empty__text {
    margin: 0;
    max-width: 380px;
    font-size: var(--erp-fs-sm);
    color: var(--erp-text-muted);
}

/* --------------------------------------------------------------------------
   13. Painéis colapsáveis / acordeão de filtros
   -------------------------------------------------------------------------- */
.panel {
    margin-bottom: 18px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-sm);
    box-shadow: none;
}

.panel-heading {
    padding: 12px 16px;
    background: var(--erp-surface-muted);
    border-bottom: 1px solid var(--erp-divider);
    border-radius: var(--erp-radius-sm) var(--erp-radius-sm) 0 0;
    font-weight: var(--erp-fw-semibold);
}

.panel-body {
    padding: 16px;
}

/* --------------------------------------------------------------------------
   14. Progresso
   -------------------------------------------------------------------------- */
.progress {
    height: 8px;
    margin-bottom: 14px;
    background: var(--erp-bg-sunken);
    border-radius: var(--erp-radius-pill);
    box-shadow: none;
    overflow: hidden;
}

.progress-bar {
    background: var(--erp-primary);
    box-shadow: none;
}

.progress-bar-success { background: var(--erp-success); }
.progress-bar-warning { background: var(--erp-warning); }
.progress-bar-danger  { background: var(--erp-danger); }

/* --------------------------------------------------------------------------
   15. Datepicker / daterangepicker
   -------------------------------------------------------------------------- */
.datepicker,
.daterangepicker {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-lg);
    font-family: var(--erp-font-sans);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background: var(--erp-primary);
}

.daterangepicker .ranges li.active {
    background: var(--erp-primary);
}

/* --------------------------------------------------------------------------
   16. Componentes Blade novos (ui-*)
   -------------------------------------------------------------------------- */
/* Cabeçalho de página com ações */
.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px var(--erp-content-pad) 4px;
}

.ui-page-header__main {
    min-width: 0;
}

.ui-page-header__title {
    margin: 0;
    color: var(--erp-text);
    font-size: 1.6rem;
    font-weight: var(--erp-fw-semibold);
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.ui-page-header__subtitle {
    margin: 4px 0 0;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-base);
}

.ui-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ui-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    font-size: var(--erp-fs-xs);
    color: var(--erp-text-muted);
}

.ui-breadcrumb li + li::before {
    content: "/";
    padding-right: 6px;
    color: var(--erp-text-faint);
}

.ui-breadcrumb a {
    color: var(--erp-text-muted);
}

.ui-breadcrumb a:hover {
    color: var(--erp-primary);
}

.ui-breadcrumb .is-active {
    color: var(--erp-text-soft);
    font-weight: var(--erp-fw-medium);
}

/* Barra de ferramentas de listagem */
.ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--erp-divider);
}

.ui-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Grade de estatísticas */
.ui-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

/* Cabeçalho de seção dentro de cards/formulários */
.ui-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--erp-divider);
    color: var(--erp-text);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ui-section-title i {
    color: var(--erp-text-faint);
}

/* Grupo de campos com rótulo flutuante simples */
.ui-field {
    margin-bottom: 18px;
}

.ui-field__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    color: var(--erp-text-soft);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
}

.ui-field__label .required {
    color: var(--erp-danger);
}

.ui-field__help {
    margin-top: 6px;
    color: var(--erp-text-muted);
    font-size: var(--erp-fs-xs);
}

.ui-field__error {
    margin-top: 6px;
    color: var(--erp-danger);
    font-size: var(--erp-fs-xs);
    font-weight: var(--erp-fw-medium);
}

/* Chips / filtros ativos */
.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    color: var(--erp-text-soft);
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-pill);
    font-size: var(--erp-fs-xs);
    font-weight: var(--erp-fw-medium);
}

.ui-chip--active {
    color: var(--erp-primary);
    background: var(--erp-primary-soft);
    border-color: var(--erp-primary-soft-2);
}

/* Divisor de card com título */
.ui-card > .ui-toolbar + .ui-card__body {
    padding-top: 18px;
}

/* --------------------------------------------------------------------------
   17. Painel de filtros (components.filters)
   -------------------------------------------------------------------------- */
.filters-box .box-header {
    padding: 14px 22px;
}

.filters-box .box-title {
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--erp-text-muted);
}

.filters-box .box-title > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.filters-box .box-title > a:hover {
    color: var(--erp-primary);
}

.filters-box__chevron {
    color: var(--erp-text-faint);
    font-size: 0.7rem;
    transition: transform var(--erp-transition);
}

.filters-box:has(#collapseFilter.in) .filters-box__chevron {
    transform: rotate(180deg);
}

.filters-box .box-body {
    padding: 12px 22px 4px;
}

.filters-box .form-group {
    margin-bottom: 14px;
}

.filters-box .row > [class*="col-"] {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   18. Abas verticais das telas de configuração (.pos-tab-menu)
   -------------------------------------------------------------------------- */
.pos-tab-menu .list-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--erp-surface);
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius);
    box-shadow: var(--erp-shadow-sm);
}

.pos-tab-menu .list-group > a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    color: var(--erp-text-soft);
    background: transparent;
    border: 0;
    border-radius: var(--erp-radius-sm);
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
    line-height: 1.35;
    transition: background var(--erp-transition), color var(--erp-transition);
}

.pos-tab-menu .list-group > a:hover,
.pos-tab-menu .list-group > a:focus {
    color: var(--erp-text);
    background: var(--erp-surface-muted);
}

.pos-tab-menu .list-group > a.active,
.pos-tab-menu .list-group > a.active:hover {
    color: var(--erp-primary) !important;
    background: var(--erp-primary-soft) !important;
    font-weight: var(--erp-fw-semibold);
}

.pos-tab-menu .list-group > a.active:after {
    display: none !important;
    border: 0 !important;
}

/* Rótulos de KPI com altura previsível para alinhar os valores */
.home-kpis .ui-stat__label {
    min-height: 2.4em;
}

@media (max-width: 575px) {
    .home-kpis {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .home-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Correção de especificidade: a view do painel declara .home-kpis depois
   desta folha, então usamos um seletor mais específico para o responsivo. */
@media (max-width: 575px) {
    .content .home-kpis {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .content .home-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   19. Input groups — restaura o layout de tabela do Bootstrap 3
   --------------------------------------------------------------------------
   O ícone (addon) e o campo precisam ficar na mesma linha. Usar display:flex
   no addon quebra esse comportamento e empilha os elementos. */
.input-group {
    display: table;
    width: 100%;
    border-collapse: separate;
}

.input-group > .form-control,
.input-group > .input-group-addon,
.input-group > .input-group-btn {
    display: table-cell;
    vertical-align: middle;
}

.input-group > .form-control {
    float: none;
    width: 100%;
    border-radius: var(--erp-radius-sm);
}

.input-group > .input-group-addon {
    width: 1%;
    height: auto;
    padding: 0 12px;
    white-space: nowrap;
    text-align: center;
    border-radius: var(--erp-radius-sm);
}

.input-group > .input-group-addon:first-child {
    border-right: 0;
    border-radius: var(--erp-radius-sm) 0 0 var(--erp-radius-sm);
}

.input-group > .input-group-addon:last-child {
    border-left: 0;
    border-radius: 0 var(--erp-radius-sm) var(--erp-radius-sm) 0;
}

.input-group > .form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-btn {
    display: table-cell;
    width: 1%;
    vertical-align: middle;
    white-space: nowrap;
}

.input-group-btn > .btn {
    height: var(--erp-control-h);
    border-radius: 0 var(--erp-radius-sm) var(--erp-radius-sm) 0;
}

.input-group-btn:first-child > .btn {
    border-radius: var(--erp-radius-sm) 0 0 var(--erp-radius-sm);
}

/* O plugin jQuery Steps aplica fundo próprio no conteúdo do passo */
.erp-auth .wizard > .content > .body {
    background: transparent !important;
    border: 0 !important;
}

/* --------------------------------------------------------------------------
   20. Notificações (toastr) — cores da marca e legibilidade
   -------------------------------------------------------------------------- */
#toast-container > div {
    padding: 14px 16px 14px 50px;
    border-radius: var(--erp-radius-sm);
    box-shadow: var(--erp-shadow-lg);
    opacity: 1;
    font-size: var(--erp-fs-sm);
    font-weight: var(--erp-fw-medium);
}

#toast-container > .toast-success { background-color: var(--erp-success); }
#toast-container > .toast-error   { background-color: var(--erp-danger); }
#toast-container > .toast-warning { background-color: var(--erp-warning); }
#toast-container > .toast-info    { background-color: var(--erp-info); }

#toast-container > div:hover {
    box-shadow: var(--erp-shadow-lg);
    opacity: 1;
}

/* --------------------------------------------------------------------------
   21. Correções de contraste
   -------------------------------------------------------------------------- */

/* Aba ativa das configurações: o app.css pinta o fundo de azul com !important
   e o texto herdava azul — mesmo seletor do app.css para vencer por ordem. */
div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active:hover,
div.pos-tab-menu div.list-group > a.active:focus {
    color: var(--erp-primary) !important;
    background: var(--erp-primary-soft) !important;
    background-color: var(--erp-primary-soft) !important;
    border-color: var(--erp-primary-soft-2) !important;
}

div.pos-tab-menu div.list-group > a.active:after {
    display: none !important;
    border: 0 !important;
}

/* Etiquetas com fundo colorido claro precisam de texto escuro */
.label.bg-light-green,
.badge.bg-light-green {
    color: var(--erp-success-hover) !important;
    background: var(--erp-success-soft) !important;
}

/* Paginação desabilitada continua legível */
.pagination > .disabled > a,
.pagination > .disabled > span,
.pagination > .disabled > a:hover {
    color: var(--erp-text-muted);
    background: var(--erp-surface-muted);
}

/* Placeholder do Select2 com contraste adequado */
.select2-container--default .select2-selection__placeholder {
    color: var(--erp-text-muted);
}