/*
 * CaixaOn — M11 Design System v1
 * Referência de UX: sistemas empresariais modernos / SAP Fiori-Horizon.
 * Identidade, implementação e componentes próprios do CaixaOn.
 */

:root {
    --cx-bg: #f5f7fb;
    --cx-surface: #ffffff;
    --cx-surface-soft: #f8fafc;
    --cx-border: #dfe5ee;
    --cx-border-strong: #cbd5e1;

    --cx-text: #152238;
    --cx-text-soft: #53627a;
    --cx-text-muted: #708096;

    --cx-primary: #0a6ed1;
    --cx-primary-strong: #075caf;
    --cx-primary-soft: #eaf3fc;

    --cx-success-bg: #ecfdf3;
    --cx-success: #087a43;
    --cx-warning-bg: #fff7e6;
    --cx-warning: #9a6700;
    --cx-danger-bg: #fff0f0;
    --cx-danger: #bb1e10;

    --cx-radius-sm: 7px;
    --cx-radius: 10px;
    --cx-radius-lg: 14px;

    --cx-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 4px 14px rgba(15, 23, 42, .035);

    --cx-topbar-height: 60px;
    --cx-sidebar-width: 250px;
    --cx-sidebar-collapsed: 74px;

    --cx-transition: 160ms ease;
}

/* ============================================================
   SHELL
   ============================================================ */

.caixaon-authenticated {
    background: var(--cx-bg);
    color: var(--cx-text);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 50;

    min-height: var(--cx-topbar-height);

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 0 20px;

    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid var(--cx-border);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .035);
}

.shell-menu-button {
    width: 38px;
    height: 38px;

    display: inline-grid;
    place-items: center;

    border: 0;
    border-radius: 8px;

    color: var(--cx-text-soft);
    background: transparent;
    cursor: pointer;
}

.shell-menu-button:hover {
    color: var(--cx-primary);
    background: var(--cx-primary-soft);
}

.shell-menu-lines,
.shell-menu-lines::before,
.shell-menu-lines::after {
    content: "";
    display: block;

    width: 18px;
    height: 2px;

    border-radius: 999px;
    background: currentColor;
}

.shell-menu-lines {
    position: relative;
}

.shell-menu-lines::before {
    position: absolute;
    top: -6px;
}

.shell-menu-lines::after {
    position: absolute;
    top: 6px;
}

.app-brand {
    display: inline-flex;
    align-items: baseline;

    min-width: 152px;

    color: var(--cx-text);
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    letter-spacing: -.03em;
}

.app-brand strong {
    color: var(--cx-primary);
    font-weight: 800;
}

.topbar-spacer {
    flex: 1;
}

.topbar-context {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;
}

.company-chip {
    min-width: 200px;
    max-width: 310px;

    display: flex;
    flex-direction: column;
    gap: 1px;

    padding: 7px 12px;

    border: 1px solid var(--cx-border);
    border-radius: 9px;

    color: var(--cx-text);
    background: var(--cx-surface);
    text-decoration: none;
}

.company-chip:hover {
    border-color: #aac8ea;
    background: #fbfdff;
}

.company-label {
    color: var(--cx-text-muted);
    font-size: 10px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.company-name {
    overflow: hidden;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu {
    position: relative;
}

.account-menu > summary {
    list-style: none;
}

.account-menu > summary::-webkit-details-marker {
    display: none;
}

.account-trigger {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 4px 7px;

    border-radius: 9px;

    cursor: pointer;
    user-select: none;
}

.account-trigger:hover {
    background: var(--cx-surface-soft);
}

.account-avatar {
    width: 34px;
    height: 34px;

    display: inline-grid;
    place-items: center;

    border-radius: 50%;

    color: var(--cx-primary-strong);
    background: var(--cx-primary-soft);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}

.account-name {
    max-width: 150px;
    overflow: hidden;

    color: var(--cx-text-soft);
    font-size: 12px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;

    width: 220px;

    padding: 8px;

    border: 1px solid var(--cx-border);
    border-radius: 10px;

    background: var(--cx-surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}

.account-panel a,
.account-panel button {
    width: 100%;

    display: flex;
    align-items: center;

    padding: 9px 10px;

    border: 0;
    border-radius: 7px;

    color: var(--cx-text);
    background: transparent;

    font: inherit;
    font-size: 13px;
    text-align: left;
    text-decoration: none;

    cursor: pointer;
}

.account-panel a:hover,
.account-panel button:hover {
    color: var(--cx-primary-strong);
    background: var(--cx-primary-soft);
}

.account-panel form {
    margin: 0;
}

.app-shell {
    display: flex;

    min-height: calc(100vh - var(--cx-topbar-height));
}

.app-sidebar {
    position: sticky;
    top: var(--cx-topbar-height);

    width: var(--cx-sidebar-width);
    height: calc(100vh - var(--cx-topbar-height));

    flex: 0 0 var(--cx-sidebar-width);

    display: flex;
    flex-direction: column;

    border-right: 1px solid var(--cx-border);

    background: var(--cx-surface);

    transition:
        width var(--cx-transition),
        flex-basis var(--cx-transition);
}

.sidebar-scroll {
    flex: 1;

    overflow-y: auto;

    padding: 14px 10px;
}

.side-section + .side-section {
    margin-top: 20px;
}

.side-section-label {
    display: block;

    padding: 0 10px 7px;

    color: #8a98ab;

    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.side-link,
.side-sublink {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 39px;

    padding: 8px 10px;

    border-radius: 8px;

    color: #34445c;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;

    transition:
        background var(--cx-transition),
        color var(--cx-transition);
}

.side-link:hover,
.side-sublink:hover {
    color: var(--cx-primary-strong);
    background: #f3f7fc;
}

.side-link.active,
.side-sublink.active {
    color: var(--cx-primary-strong);
    background: var(--cx-primary-soft);
}

.side-link.active::before {
    content: "";

    position: absolute;
    left: -10px;
    top: 8px;
    bottom: 8px;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background: var(--cx-primary);
}

.side-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    display: grid;
    place-items: center;

    border: 1px solid #b8c5d6;
    border-radius: 6px;

    color: #56708f;

    font-size: 9px;
    font-weight: 800;
}

.side-link.active .side-icon {
    border-color: #8ab8ea;
    color: var(--cx-primary-strong);
    background: #f7fbff;
}

.side-text {
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-subnav {
    margin: 2px 0 5px 30px;

    border-left: 1px solid #dbe3ed;

    padding-left: 7px;
}

.side-sublink {
    min-height: 32px;

    padding-top: 6px;
    padding-bottom: 6px;

    font-size: 12px;
}

.sidebar-collapse {
    min-height: 48px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 16px;

    border: 0;
    border-top: 1px solid var(--cx-border);

    color: var(--cx-text-soft);
    background: var(--cx-surface);

    font: inherit;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;
}

.sidebar-collapse:hover {
    color: var(--cx-primary);
    background: var(--cx-surface-soft);
}

.collapse-symbol {
    width: 20px;

    font-size: 18px;
    line-height: 1;
    text-align: center;
}

.sidebar-overlay {
    display: none;
}

.app-main {
    min-width: 0;
    flex: 1;
}

.page-container {
    width: 100%;
    max-width: 1540px;

    margin: 0 auto;
    padding: 26px 32px 42px;
}

/* ============================================================
   SIDEBAR COLLAPSED
   ============================================================ */

.sidebar-collapsed .app-sidebar {
    width: var(--cx-sidebar-collapsed);
    flex-basis: var(--cx-sidebar-collapsed);
}

.sidebar-collapsed .side-text,
.sidebar-collapsed .side-section-label,
.sidebar-collapsed .side-subnav,
.sidebar-collapsed .sidebar-collapse span:not(.collapse-symbol) {
    display: none;
}

.sidebar-collapsed .side-link {
    justify-content: center;
}

.sidebar-collapsed .side-link.active::before {
    left: -10px;
}

.sidebar-collapsed .sidebar-collapse {
    justify-content: center;
}

.sidebar-collapsed .collapse-symbol {
    transform: rotate(180deg);
}

/* ============================================================
   GLOBAL APP SURFACES
   ============================================================ */

.app-main .card {
    border-color: var(--cx-border);
    border-radius: var(--cx-radius-lg);

    box-shadow: var(--cx-shadow);
}

.app-main .page-head {
    margin-bottom: 22px;
}

.app-main h1 {
    color: var(--cx-text);

    font-size: clamp(26px, 2vw, 34px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.app-main h2 {
    color: var(--cx-text);

    font-weight: 700;
}

.app-main .muted {
    color: var(--cx-text-soft);
}

.app-main input,
.app-main textarea,
.app-main select {
    min-height: 40px;

    border-color: var(--cx-border-strong);
    border-radius: var(--cx-radius-sm);

    color: var(--cx-text);
}

.app-main input:focus,
.app-main textarea:focus,
.app-main select:focus {
    outline: 2px solid rgba(10, 110, 209, .17);
    border-color: var(--cx-primary);
}

.app-main .btn {
    min-height: 38px;

    gap: 7px;

    border-color: var(--cx-border-strong);
    border-radius: var(--cx-radius-sm);

    color: #31435d;
    background: var(--cx-surface);

    font-size: 13px;
    font-weight: 700;
}

.app-main .btn:hover {
    border-color: #9dbce0;

    color: var(--cx-primary-strong);
    background: #f8fbff;
}

.app-main .btn.primary {
    border-color: var(--cx-primary);

    color: #fff;
    background: var(--cx-primary);
}

.app-main .btn.primary:hover {
    border-color: var(--cx-primary-strong);
    color: #fff;
    background: var(--cx-primary-strong);
}

.app-main .badge.neutral {
    color: #43536a;
    background: #eef2f7;
}

.app-main .badge.warn {
    color: var(--cx-warning);
    background: var(--cx-warning-bg);
}

/* ============================================================
   M11 PAGE FRAME
   ============================================================ */

.m11-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 14px;

    color: var(--cx-text-muted);

    font-size: 12px;
}

.m11-breadcrumbs a {
    color: #58708f;
    text-decoration: none;
}

.m11-breadcrumbs a:hover {
    color: var(--cx-primary);
}

.m11-breadcrumb-current {
    color: var(--cx-text);
    font-weight: 700;
}

.m11-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 22px;
}

.m11-page-head-copy {
    min-width: 0;
}

.m11-page-head h1 {
    margin-bottom: 6px;
}

.m11-page-head p {
    max-width: 840px;

    margin: 0;

    color: var(--cx-text-soft);

    font-size: 15px;
    line-height: 1.5;
}

.m11-page-actions {
    display: flex;
    gap: 8px;
}

/* ============================================================
   FILTERS
   ============================================================ */

.m11-filter-card {
    padding: 0;
    overflow: hidden;
}

.m11-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 15px 18px;

    border-bottom: 1px solid #edf1f6;
}

.m11-card-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 0;

    color: var(--cx-text);

    font-size: 14px;
    font-weight: 750;
}

.m11-filter-symbol {
    width: 20px;
    height: 20px;

    display: inline-grid;
    place-items: center;

    border: 1px solid #9cc2e9;
    border-radius: 6px;

    color: var(--cx-primary);

    font-size: 11px;
    font-weight: 800;
}

.m11-filter-body {
    padding: 18px;
}

.m11-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.35fr)
        repeat(2, minmax(180px, .9fr));

    gap: 14px 16px;
}

.m11-filter-grid .date-field {
    max-width: 100%;
}

.m11-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;
}

/* ============================================================
   TABLES
   ============================================================ */

.m11-table-card {
    padding: 0;
    overflow: hidden;
}

.m11-table-toolbar {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 12px 18px;

    border-bottom: 1px solid #edf1f6;
}

.m11-result-count {
    color: var(--cx-text);

    font-size: 14px;
    font-weight: 700;
}

.m11-table-card .table-scroll {
    overflow-x: auto;
}

.m11-table-card table {
    margin: 0;
}

.m11-table-card th {
    padding: 11px 14px;

    border-bottom: 1px solid #e6ebf2;

    color: #52627a;
    background: #f8fafc;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
}

.m11-table-card td {
    padding: 11px 14px;

    color: #26364f;
}

.m11-table-card tbody tr {
    transition: background var(--cx-transition);
}

.m11-table-card tbody tr:hover {
    background: #fafcff;
}

.m11-primary-value {
    color: var(--cx-primary-strong);
    font-weight: 750;
}

.m11-secondary-value {
    display: block;

    margin-top: 2px;

    color: var(--cx-text-muted);

    font-size: 11px;
    line-height: 1.3;
}

.m11-table-card .money {
    font-variant-numeric: tabular-nums;
}

.m11-actions-cell {
    width: 1%;
    white-space: nowrap;
}

.m11-table-footer {
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 10px 18px;

    border-top: 1px solid #edf1f6;
}

.m11-range {
    color: var(--cx-text-muted);

    font-size: 12px;
}

.m11-table-footer .pagination {
    margin: 0;
}

.m11-table-footer .pagination svg {
    width: 16px;
    height: 16px;
}

/* Laravel default pagination safety */
.pagination nav {
    max-width: 100%;
}

.pagination a,
.pagination span {
    font-size: 12px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
    .page-container {
        padding-right: 22px;
        padding-left: 22px;
    }

    .m11-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .app-sidebar {
        position: fixed;
        z-index: 60;

        top: var(--cx-topbar-height);
        left: 0;

        transform: translateX(-100%);

        box-shadow: 14px 0 30px rgba(15, 23, 42, .12);

        transition: transform var(--cx-transition);
    }

    .sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-collapsed .app-sidebar {
        width: var(--cx-sidebar-width);
        flex-basis: var(--cx-sidebar-width);
    }

    .sidebar-collapsed .side-text,
    .sidebar-collapsed .side-section-label,
    .sidebar-collapsed .side-subnav,
    .sidebar-collapsed .sidebar-collapse span:not(.collapse-symbol) {
        display: initial;
    }

    .sidebar-collapsed .side-link {
        justify-content: flex-start;
    }

    .sidebar-overlay {
        position: fixed;
        z-index: 55;

        inset: var(--cx-topbar-height) 0 0 0;

        display: block;

        background: rgba(15, 23, 42, .28);

        opacity: 0;
        pointer-events: none;

        transition: opacity var(--cx-transition);
    }

    .sidebar-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .company-chip {
        min-width: 160px;
        max-width: 220px;
    }

    .account-name {
        display: none;
    }
}

@media (max-width: 720px) {
    .app-topbar {
        padding-right: 12px;
        padding-left: 12px;
    }

    .app-brand {
        min-width: auto;
        font-size: 21px;
    }

    .company-chip {
        max-width: 150px;
        min-width: 0;
    }

    .company-label {
        display: none;
    }

    .page-container {
        padding: 18px 14px 32px;
    }

    .m11-page-head {
        flex-direction: column;
    }

    .m11-filter-grid {
        grid-template-columns: 1fr;
    }

    .m11-filter-actions {
        flex-wrap: wrap;
    }

    .m11-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .company-chip {
        display: none;
    }

    .m11-card-header,
    .m11-filter-body,
    .m11-table-toolbar,
    .m11-table-footer {
        padding-right: 14px;
        padding-left: 14px;
    }
}


/* ============================================================
   CAIXAON_M11_WAVE2_CADASTROS_PRODUTOS_V1
   Cadastros + Produtos
   ============================================================ */

.m11-wave2 {
    min-width: 0;
}

.m11-wave2 .page-head.m11-page-head {
    align-items: flex-start;
    margin-bottom: 22px;
}

.m11-wave2 .page-head.m11-page-head > div:first-child {
    min-width: 0;
}

.m11-wave2 .page-head.m11-page-head h1 {
    margin-bottom: 6px;
}

.m11-wave2 .page-head.m11-page-head p {
    max-width: 820px;

    margin-top: 0;
    margin-bottom: 0;

    color: var(--cx-text-soft);

    font-size: 15px;
    line-height: 1.5;
}

.m11-wave2 .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Filtros
   ------------------------------------------------------------ */

.m11-wave2 .filters {
    margin-bottom: 20px;
    padding: 18px;

    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-lg);

    background: var(--cx-surface);
    box-shadow: var(--cx-shadow);
}

.m11-wave2 .filters label {
    color: #2d3c53;

    font-size: 13px;
    font-weight: 700;
}

.m11-wave2 .filter-grid {
    gap: 14px 16px;
}

.m11-wave2 .filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 16px;
}

/* Produtos usa o próprio form como grid */
.m11-wave2 .product-filters {
    padding: 18px;
    gap: 14px 16px;

    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-lg);

    background: var(--cx-surface);
    box-shadow: var(--cx-shadow);
}

/* ------------------------------------------------------------
   Listagens
   ------------------------------------------------------------ */

.m11-wave2 .table-wrap,
.m11-wave2 .table-card {
    overflow: hidden;

    border-color: var(--cx-border);
    border-radius: var(--cx-radius-lg);

    box-shadow: var(--cx-shadow);
}

.m11-wave2 .table-summary {
    padding: 14px 16px;

    border-bottom: 1px solid #edf1f6;

    color: var(--cx-text-soft);
    background: var(--cx-surface);

    font-size: 13px;
    font-weight: 600;
}

.m11-wave2 .table-wrap table,
.m11-wave2 .table-card table {
    margin: 0;
}

.m11-wave2 .table-wrap th,
.m11-wave2 .table-card th {
    padding: 11px 14px;

    color: #52627a;
    background: #f8fafc;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
}

.m11-wave2 .table-wrap td,
.m11-wave2 .table-card td {
    padding: 11px 14px;

    color: #26364f;
}

.m11-wave2 .table-wrap tbody tr:hover,
.m11-wave2 .table-card tbody tr:hover {
    background: #fafcff;
}

.m11-wave2 .table-wrap td:first-child strong,
.m11-wave2 .table-card td:first-child strong {
    color: var(--cx-text);
}

.m11-wave2 .pager,
.m11-wave2 > .pagination {
    margin-top: 16px;
}

/* ------------------------------------------------------------
   Formulários
   ------------------------------------------------------------ */

.m11-wave2 .form-stack,
.m11-wave2 .stack-form {
    gap: 20px;
}

.m11-wave2 .form-stack.card,
.m11-wave2 .stack-form > .card {
    border-color: var(--cx-border);
    box-shadow: var(--cx-shadow);
}

.m11-wave2 .subcard {
    border-color: var(--cx-border);
    border-radius: var(--cx-radius);

    background: var(--cx-surface-soft);
}

.m11-wave2 .source-note,
.m11-wave2 .traceability-card {
    border-color: #d9e4f0;

    color: var(--cx-text-soft);
    background: #f7fafd;
}

.m11-wave2 .traceability-card input:disabled {
    color: #50617a;
    background: #f1f5f9;

    opacity: 1;
}

.m11-wave2 .form-actions {
    display: flex;
    justify-content: flex-end;

    padding-top: 2px;
}

/* ------------------------------------------------------------
   Páginas de detalhe
   ------------------------------------------------------------ */

.m11-wave2 .detail-grid > .card,
.m11-wave2 .grid-2 > .card,
.m11-wave2 > section.card {
    border-color: var(--cx-border);
    box-shadow: var(--cx-shadow);
}

.m11-wave2 .section-head {
    justify-content: space-between;
}

.m11-wave2 .kv dt,
.m11-wave2 .detail-grid dt {
    color: var(--cx-text-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
}

.m11-wave2 .kv dd,
.m11-wave2 .detail-grid dd {
    color: var(--cx-text);

    font-weight: 650;
}

.m11-wave2 .record-row {
    border-bottom-color: #edf1f6;
}

.m11-wave2 .inline-create {
    border-top-color: #edf1f6;
}

.m11-wave2 .inline-create summary {
    color: var(--cx-primary);
}

/* ------------------------------------------------------------
   Estados / badges
   ------------------------------------------------------------ */

.m11-wave2 .badge.neutral,
.m11-wave2 .pill {
    color: #43536a;
    background: #eef2f7;
}

.m11-wave2 .badge.ok,
.m11-wave2 .pill.ok {
    color: var(--cx-success);
    background: var(--cx-success-bg);
}

/* ------------------------------------------------------------
   Responsividade
   ------------------------------------------------------------ */

@media (max-width: 900px) {
    .m11-wave2 .page-head.m11-page-head {
        flex-direction: column;
    }
}

/* /CAIXAON_M11_WAVE2_CADASTROS_PRODUTOS_V1 */


/* ============================================================
   CAIXAON_M11_GLOBAL_PAGINATION_V1
   Paginação nativa CaixaOn
   ============================================================ */

.cx-pagination {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 0;
}

.cx-pagination-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 4px;

    margin: 0;
    padding: 0;
}

.cx-page-link {
    min-width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border: 1px solid var(--cx-border-strong);
    border-radius: 7px;

    color: #34445c;
    background: var(--cx-surface);

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    white-space: nowrap;

    transition:
        border-color var(--cx-transition),
        color var(--cx-transition),
        background var(--cx-transition);
}

a.cx-page-link:hover {
    border-color: #9dbce0;

    color: var(--cx-primary-strong);
    background: var(--cx-primary-soft);
}

.cx-page-link.active {
    border-color: var(--cx-primary);

    color: #fff;
    background: var(--cx-primary);

    cursor: default;
}

.cx-page-link.disabled {
    color: #98a4b5;
    background: #f8fafc;

    cursor: default;
}

.cx-page-ellipsis {
    min-width: 28px;

    padding-right: 5px;
    padding-left: 5px;

    border-color: transparent;

    color: var(--cx-text-muted);
    background: transparent;
}

.cx-page-nav {
    min-width: auto;

    padding-right: 12px;
    padding-left: 12px;
}

.cx-pagination svg {
    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px;
}

.pagination > .cx-pagination {
    width: 100%;
}

@media (max-width: 720px) {
    .cx-pagination,
    .cx-pagination-list {
        justify-content: center;
    }

    .cx-page-link {
        min-width: 32px;
        height: 32px;

        padding-right: 8px;
        padding-left: 8px;
    }

    .cx-page-nav {
        padding-right: 10px;
        padding-left: 10px;
    }
}

/* /CAIXAON_M11_GLOBAL_PAGINATION_V1 */


/* ============================================================
   CAIXAON_M11_WAVE3_FINANCEIRO_COMPRAS_ESTOQUE_V1
   Financeiro + Compras + Estoque
   ============================================================ */

.m11-wave3 {
    min-width: 0;
}

.m11-wave3 .page-head.m11-page-head {
    align-items: flex-start;

    margin-bottom: 22px;
}

.m11-wave3 .page-head.m11-page-head > div:first-child {
    min-width: 0;
}

.m11-wave3 .page-head.m11-page-head h1 {
    margin-bottom: 6px;
}

.m11-wave3 .page-head.m11-page-head p {
    max-width: 860px;

    margin-top: 0;
    margin-bottom: 0;

    color: var(--cx-text-soft);

    font-size: 15px;
    line-height: 1.5;
}

/* Cards */

.m11-wave3 .card {
    border-color: var(--cx-border);
    border-radius: var(--cx-radius-lg);

    box-shadow: var(--cx-shadow);
}

.m11-wave3 .card + .card,
.m11-wave3 .detail-grid + .card,
.m11-wave3 .grid-2 + .card {
    margin-top: 18px;
}

/* Filtros */

.m11-wave3 > .filters {
    margin-bottom: 20px;
    padding: 18px;

    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius-lg);

    background: var(--cx-surface);
    box-shadow: var(--cx-shadow);
}

.m11-wave3 .filters label,
.m11-wave3 .filter-grid label {
    color: #2d3c53;

    font-size: 13px;
    font-weight: 700;
}

.m11-wave3 .filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Tabelas */

.m11-wave3 .table-scroll,
.m11-wave3 .table-card {
    min-width: 0;
}

.m11-wave3 .table-summary {
    padding: 14px 16px;

    border-bottom: 1px solid #edf1f6;

    color: var(--cx-text-soft);

    font-size: 13px;
    font-weight: 600;
}

.m11-wave3 .data-table {
    margin: 0;
}

.m11-wave3 .data-table th {
    color: #52627a;

    background: #f8fafc;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
}

.m11-wave3 .data-table td {
    color: #26364f;
}

.m11-wave3 .data-table tbody tr:hover {
    background: #fafcff;
}

/* Métricas e detalhes */

.m11-wave3 .finance-grid,
.m11-wave3 .metric-grid {
    gap: 14px;
}

.m11-wave3 .metric {
    min-width: 0;
}

.m11-wave3 .metric > span,
.m11-wave3 .kv dt,
.m11-wave3 .detail-grid dt {
    color: var(--cx-text-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.m11-wave3 .metric > strong,
.m11-wave3 .kv dd,
.m11-wave3 .detail-grid dd {
    color: var(--cx-text);
}

.m11-wave3 .finance-links {
    gap: 10px;
}

.m11-wave3 .finance-links > div {
    padding: 10px 12px;

    border: 1px solid #edf1f6;
    border-radius: var(--cx-radius);

    background: var(--cx-surface-soft);
}

/* Notas e informações */

.m11-wave3 .hint,
.m11-wave3 .p06-note {
    color: var(--cx-text-soft);

    line-height: 1.55;
}

.m11-wave3 .notes {
    color: var(--cx-text);
}

/* Formulário de estoque */

.m11-wave3 .stack-form {
    gap: 18px;
}

.m11-wave3 .form-grid {
    gap: 14px;
}

/* Paginação global já homologada */

.m11-wave3 > .pagination {
    margin-top: 16px;
}

/* Responsividade */

@media (max-width: 900px) {
    .m11-wave3 .page-head.m11-page-head {
        flex-direction: column;
    }

    .m11-wave3 .detail-grid,
    .m11-wave3 .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* /CAIXAON_M11_WAVE3_FINANCEIRO_COMPRAS_ESTOQUE_V1 */


/* ============================================================
   CAIXAON_M11_WAVE4_FISCAL_CAIXA_V1
   Fiscal / Notas + Caixa
   ============================================================ */

.m11-wave4 {
    min-width: 0;
}

.m11-wave4 .page-head.m11-page-head {
    align-items: flex-start;

    margin-bottom: 22px;
}

.m11-wave4 .page-head.m11-page-head > div:first-child {
    min-width: 0;
}

.m11-wave4 .page-head.m11-page-head h1 {
    margin-bottom: 6px;
}

.m11-wave4 .page-head.m11-page-head p {
    max-width: 920px;

    margin-top: 0;
    margin-bottom: 0;

    color: var(--cx-text-soft);

    font-size: 15px;
    line-height: 1.5;
}

/* Ações do cabeçalho fiscal */

.m11-wave4 .fiscal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 8px;
}

/* Cards */

.m11-wave4 .card {
    border-color: var(--cx-border);
    border-radius: var(--cx-radius-lg);

    box-shadow: var(--cx-shadow);
}

.m11-wave4 .card + .card {
    margin-top: 18px;
}

/* Filtros */

.m11-wave4 .filters {
    gap: 14px;
}

.m11-wave4 .filters label {
    color: #2d3c53;

    font-size: 13px;
    font-weight: 700;
}

.m11-wave4 .filter-actions {
    display: flex;
    align-items: center;

    gap: 8px;
}

/* Tabelas */

.m11-wave4 .table-summary {
    padding: 14px 16px;

    border-bottom: 1px solid #edf1f6;

    color: var(--cx-text-soft);

    font-size: 13px;
    font-weight: 600;
}

.m11-wave4 .table-scroll {
    min-width: 0;
}

.m11-wave4 .data-table {
    margin: 0;
}

.m11-wave4 .data-table th {
    color: #52627a;

    background: #f8fafc;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .045em;
}

.m11-wave4 .data-table td {
    color: #26364f;
}

.m11-wave4 .data-table tbody tr:hover {
    background: #fafcff;
}

/* Métricas */

.m11-wave4 .fiscal-grid,
.m11-wave4 .caixa-grid,
.m11-wave4 .caixa-category-grid {
    gap: 14px;
}

.m11-wave4 .metric {
    min-width: 0;
}

.m11-wave4 .metric > span,
.m11-wave4 .kv dt {
    color: var(--cx-text-muted);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
}

.m11-wave4 .metric > strong,
.m11-wave4 .kv dd {
    color: var(--cx-text);
}

/* Seções técnicas */

.m11-wave4 .fiscal-payload {
    max-height: 420px;
    overflow: auto;

    padding: 14px;

    border: 1px solid var(--cx-border);
    border-radius: var(--cx-radius);

    background: #f8fafc;

    font-size: 12px;
    line-height: 1.5;
}

.m11-wave4 .caixa-section-head {
    gap: 16px;
}

.m11-wave4 .caixa-note {
    line-height: 1.55;
}

/* Paginação */

.m11-wave4 > .pagination,
.m11-wave4 .card > .pagination {
    margin-top: 16px;
}

/* Responsividade */

@media (max-width: 900px) {
    .m11-wave4 .page-head.m11-page-head {
        flex-direction: column;
    }

    .m11-wave4 .fiscal-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .m11-wave4 .fiscal-grid,
    .m11-wave4 .caixa-grid,
    .m11-wave4 .caixa-category-grid {
        grid-template-columns: 1fr;
    }
}

/* /CAIXAON_M11_WAVE4_FISCAL_CAIXA_V1 */