*, *::before, *::after {
    box-sizing: border-box;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/inter-latin-variable.woff2") format("woff2");
}

body {
    margin: 0;
    font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    font-size: 0.92rem;
    color: var(--text-main, #19263c);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

    .nfe-rejection-details {
        margin: 0.75rem 0 1rem;
        border: 1px solid #f1b8b8;
        border-radius: 10px;
        padding: 0.8rem 1rem;
        background: #fffafa;
        color: #522;
    }

    .nfe-rejection-details summary {
        cursor: pointer;
        font-weight: 700;
    }

    .nfe-rejection-details pre {
        max-height: 22rem;
        overflow: auto;
        margin: 0.75rem 0 0;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        font: 0.78rem/1.45 ui-monospace, Consolas, monospace;
    }

    .darker-border-checkbox.form-check-input {
        border-color: #929292;
    }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Modern registration surfaces ===== */
:root {
    --app-bg: #f4f7fb;
    --surface: #ffffff;
    --surface-muted: #f8fafd;
    --border-subtle: #e6ecf4;
    --border-strong: #d2dce9;
    --text-main: #17263d;
    --text-muted: #718097;
    --accent: #3474dc;
    --accent-soft: #edf3ff;
    --success: #147d64;
    --success-soft: #e9f7f1;
    --danger: #c9433b;
    --danger-soft: #fff1ef;
    --warning: #96640a;
    --warning-soft: #fff7e6;
    --shadow-panel: 0 14px 36px rgba(21, 37, 61, 0.075);
    --shadow-card: 0 8px 24px rgba(21, 37, 61, 0.055);
}

body {
    background: var(--app-bg);
    color: var(--text-main);
}

.main-content {
    color: var(--text-main);
}

.main-content .page-surface > h2,
.main-content .page-header h2 {
    margin: 0 0 1rem;
    color: var(--text-main) !important;
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1.18;
}

.main-content .page-surface > h2 {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0 0 0 1rem;
    border-bottom: 0;
}

.main-content .page-surface > h2::before {
    position: absolute;
    top: 0.12rem;
    bottom: 0.12rem;
    left: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #45aee3, #3474dc);
    content: "";
}

.main-content .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.main-content .page-header h2 {
    margin: 0;
}

.main-content .form-section,
.main-content .cadastro-modal,
.main-content .preview-box,
.main-content .empty-state {
    background: var(--surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-panel);
}

.main-content .form-section,
.main-content .cadastro-modal {
    padding: 1.3rem !important;
    margin-bottom: 1.1rem !important;
}

.main-content .form-section h3 {
    margin: 0 0 1.05rem !important;
    padding: 0 0 0.7rem !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    font-size: 1rem !important;
    font-weight: 740 !important;
    letter-spacing: -0.02em;
}

.main-content .form-section h4,
.main-content .tax-section-title {
    color: var(--text-main) !important;
    font-size: 0.86rem !important;
    font-weight: 720 !important;
}

.main-content .form-row {
    gap: 0.85rem !important;
    margin-bottom: 0.85rem !important;
}

.main-content .field {
    min-width: 160px;
}

.main-content .field.w2 {
    min-width: 260px;
}

.main-content .field.w3,
.main-content .field.w4 {
    min-width: 320px;
}

.main-content .field label,
.main-content .opcao-col-label {
    color: var(--text-muted) !important;
    font-size: 0.77rem !important;
    font-weight: 680 !important;
    letter-spacing: 0.005em;
}

.main-content .field input,
.main-content .field select,
.main-content .field textarea,
.main-content .cadastro-modal input,
.main-content .cadastro-modal select,
.main-content .cadastro-modal textarea,
.main-content .search-bar input,
.main-content .list-tools input,
.main-content input[type="text"],
.main-content input[type="email"],
.main-content input[type="number"],
.main-content input[type="date"],
.main-content input[type="password"],
.main-content select,
.main-content textarea {
    min-height: 44px;
    border: 1px solid var(--border-strong) !important;
    border-radius: 11px !important;
    background: #fcfdff !important;
    color: var(--text-main) !important;
    font-size: 0.88rem !important;
    line-height: 1.35;
    padding: 0.58rem 0.78rem !important;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.main-content input[type="checkbox"] {
    accent-color: var(--accent);
}

.main-content .field input:focus,
.main-content .field select:focus,
.main-content .field textarea:focus,
.main-content .cadastro-modal input:focus,
.main-content .cadastro-modal select:focus,
.main-content .search-bar input:focus,
.main-content .list-tools input:focus,
.main-content input:focus,
.main-content select:focus,
.main-content textarea:focus {
    outline: none !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(52, 116, 220, 0.13) !important;
}

.main-content textarea {
    resize: vertical;
}

.main-content .lookup-row,
.main-content .cep-lookup-row,
.main-content .list-tools,
.main-content .toolbar,
.main-content .filter-chips {
    display: flex;
    align-items: center;
    gap: 0.55rem !important;
}

.main-content .lookup-row input,
.main-content .cep-lookup-row input,
.main-content .search-bar input,
.main-content .list-tools input {
    min-width: 0;
    flex: 1;
}

.main-content .toolbar {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 1rem !important;
}

.main-content .search-bar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: var(--surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(21, 37, 61, 0.045);
}

.main-content .search-bar .search-icon {
    position: absolute !important;
    left: 0.75rem !important;
    top: 50% !important;
    z-index: 1;
    color: var(--text-muted) !important;
    transform: translateY(-50%) !important;
}

.main-content .search-bar input {
    padding-left: 2rem !important;
}

.main-content .btn,
.main-content .btn-sm,
.main-content .btn-lookup,
.main-content .btn-cadastrar,
.main-content .chip,
.main-content .tab,
.main-content .btn-back,
.main-content .cadastro-modal button {
    border-radius: 9px !important;
    font-weight: 700 !important;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.main-content .btn,
.main-content .btn-cadastrar,
.main-content .btn-lookup,
.main-content .cadastro-modal button {
    min-height: 40px;
    padding: 0.52rem 0.95rem !important;
    border: 1px solid transparent !important;
}

.main-content .btn:hover,
.main-content .btn-sm:hover,
.main-content .btn-cadastrar:hover,
.main-content .btn-lookup:hover,
.main-content .chip:hover,
.main-content .btn-back:hover,
.main-content .cadastro-modal button:hover {
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.10);
}

.main-content .btn:active,
.main-content .btn-sm:active,
.main-content .btn-cadastrar:active,
.main-content .btn-lookup:active,
.main-content .chip:active,
.main-content .btn-back:active {
    transform: translateY(1px);
}

.main-content .btn-primary,
.main-content .btn-cadastrar,
.main-content .btn-lookup,
.main-content .chip.active,
.main-content .tab.active {
    background: linear-gradient(135deg, #3f83ed, #2d66cf) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 5px 13px rgba(52, 116, 220, 0.18);
}

.main-content .btn-success {
    background: linear-gradient(135deg, #198b6e, #116e59) !important;
    border-color: var(--success) !important;
    color: #fff !important;
}

.main-content .btn-danger,
.main-content .btn-sm.btn-danger {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

.main-content .btn-secondary,
.main-content .btn-back,
.main-content .chip,
.main-content .cadastro-modal button:not(:first-of-type) {
    background: #fff !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-main) !important;
}

.main-content .btn-edit,
.main-content .btn-sm.btn-edit {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
    border: 1px solid #f2d58b !important;
}

.main-content .btn-sm {
    min-height: 30px;
    padding: 0.36rem 0.58rem !important;
    margin-right: 0.25rem !important;
    border: 1px solid transparent !important;
}

.main-content .btn:disabled,
.main-content .btn-lookup:disabled {
    opacity: 0.68;
    cursor: not-allowed;
    box-shadow: none !important;
}

.main-content .alert {
    border-radius: 11px !important;
    border: 1px solid transparent !important;
    padding: 0.75rem 0.95rem !important;
    margin-bottom: 1rem !important;
    font-size: 0.88rem;
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.04);
}

.main-content .alert-ok {
    background: var(--success-soft) !important;
    color: #0f5d39 !important;
    border-color: #b8e2c9 !important;
}

.main-content .alert-err {
    background: var(--danger-soft) !important;
    color: #9b241a !important;
    border-color: #ffc3bc !important;
}

.main-content .alert-warn {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
    border-color: #f2d58b !important;
}

.app-notification-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(15, 26, 45, 0.56);
    backdrop-filter: blur(8px);
    animation: app-notification-fade-in 180ms ease-out both;
}

.app-notification-modal {
    --notification-accent: #3474dc;
    --notification-tint: #edf3ff;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(460px, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2rem 2rem 1.65rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 26px;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    box-shadow: 0 30px 90px rgba(9, 21, 41, 0.28);
    text-align: center;
    animation: app-notification-pop-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.app-notification-modal::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--notification-accent), transparent);
    content: "";
}

.app-notification-modal::after {
    position: absolute;
    top: -135px;
    right: -100px;
    z-index: -1;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--notification-tint), transparent 70%);
    content: "";
    pointer-events: none;
}

.app-notification-success {
    --notification-accent: #148568;
    --notification-tint: #e6f7f1;
}

.app-notification-warning {
    --notification-accent: #b7791f;
    --notification-tint: #fff5dc;
}

.app-notification-error {
    --notification-accent: #c9433b;
    --notification-tint: #fff0ed;
}

.app-notification-info {
    --notification-accent: #3474dc;
    --notification-tint: #edf3ff;
}

.app-notification-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid #e8edf5;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: #64748b;
    font-size: 1.35rem;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.app-notification-close:hover {
    transform: rotate(90deg);
    background: #f2f5fa;
    color: var(--text-main);
}

.app-notification-icon {
    display: grid;
    width: 4.25rem;
    height: 4.25rem;
    place-items: center;
    margin: 0.4rem 0 1rem;
    border: 1px solid color-mix(in srgb, var(--notification-accent) 20%, white);
    border-radius: 1.4rem;
    background: var(--notification-tint);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--notification-accent) 12%, transparent);
    color: var(--notification-accent);
    font-size: 2.1rem;
    font-weight: 800;
}

.app-notification-kicker {
    margin-bottom: 0.45rem;
    color: var(--notification-accent);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-notification-modal h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.45rem;
    font-weight: 780;
    letter-spacing: -0.035em;
}

.app-notification-modal p {
    max-width: 39rem;
    margin: 0.8rem 0 1.4rem;
    color: #526176;
    font-size: 0.96rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.app-notification-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
}

.app-notification-primary,
.app-notification-dismiss {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 0.85rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.app-notification-primary {
    background: linear-gradient(135deg, var(--notification-accent), color-mix(in srgb, var(--notification-accent) 76%, #17263d));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--notification-accent) 22%, transparent);
    color: #fff;
}

.app-notification-dismiss {
    border-color: #dce4ef;
    background: #fff;
    color: #3e4c61;
}

.app-notification-primary:hover,
.app-notification-dismiss:hover {
    transform: translateY(-1px);
}

.app-notification-primary:hover {
    box-shadow: 0 11px 22px color-mix(in srgb, var(--notification-accent) 28%, transparent);
}

.app-notification-dismiss:hover {
    background: #f7f9fc;
}

@keyframes app-notification-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes app-notification-pop-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
    .app-notification-modal {
        padding: 1.75rem 1.25rem 1.25rem;
        border-radius: 22px;
    }

    .app-notification-modal h2 {
        font-size: 1.25rem;
    }

    .app-notification-actions {
        flex-direction: column;
    }

    .app-notification-primary,
    .app-notification-dismiss {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-notification-backdrop,
    .app-notification-modal {
        animation: none;
    }
}

.main-content .tabela,
.main-content .tabela-financeiro {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    background: var(--surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow-panel);
    font-size: 0.84rem !important;
}

.main-content .tabela th,
.main-content .tabela-financeiro th {
    background: #f5f8fc !important;
    color: #596a81 !important;
    font-size: 0.7rem !important;
    font-weight: 760 !important;
    text-transform: uppercase;
    padding: 0.7rem 0.65rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.main-content .tabela td,
.main-content .tabela-financeiro td {
    background: #fff !important;
    color: var(--text-main);
    padding: 0.68rem 0.72rem !important;
    border: 0 !important;
    border-bottom: 1px solid #edf1f6 !important;
    vertical-align: middle;
}

.main-content .tabela th:last-child,
.main-content .tabela-financeiro th:last-child {
    min-width: 170px;
}

.main-content .tabela td:last-child,
.main-content .tabela-financeiro td:last-child,
.main-content .tabela td:has(.btn-sm),
.main-content .tabela-financeiro td:has(.btn-sm) {
    white-space: nowrap;
}

.main-content .tabela td:has(.btn-sm),
.main-content .tabela-financeiro td:has(.btn-sm) {
    min-width: 170px;
}

.main-content .tabela .btn-sm,
.main-content .tabela-financeiro .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.22rem 0 0 !important;
    vertical-align: middle;
}

.main-content .tabela tbody tr:last-child td,
.main-content .tabela-financeiro tbody tr:last-child td {
    border-bottom: 0 !important;
}

.main-content .tabela tr:hover td,
.main-content .tabela-financeiro tr:hover td {
    background: #f8fbff !important;
}

.main-content .badge-tipo,
.main-content .status,
.main-content .badge,
.main-content .badge-inativo,
.main-content .tag,
.main-content .tab-badge {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.main-content .badge-pj,
.main-content .badge-ok,
.main-content .status-ok,
.main-content .tag-nbs {
    background: var(--success-soft) !important;
    color: #0f5d39 !important;
}

.main-content .badge-pf,
.main-content .tag-trib,
.main-content .tab-badge {
    background: var(--accent-soft) !important;
    color: #174ea6 !important;
}

.main-content .status-off,
.main-content .badge-warn,
.main-content .badge-inativo {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
}

.main-content .tipo-pessoa-toggle {
    border: 1px solid var(--border-strong) !important;
    border-radius: 8px !important;
    background: #fff;
}

.main-content .tp-btn {
    min-height: 36px;
    background: transparent !important;
    color: var(--text-muted) !important;
}

.main-content .tp-btn.tp-active {
    background: var(--accent) !important;
    color: #fff !important;
}

.main-content .tabs {
    gap: 0.35rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin-bottom: 1rem !important;
}

.main-content .tab {
    background: #fff !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-subtle) !important;
    padding: 0.55rem 0.8rem !important;
    margin-bottom: 0 !important;
}

.main-content .tab.active {
    color: #fff !important;
}

.main-content .produtos-grid,
.main-content .servicos-grid {
    gap: 0.85rem !important;
}

.main-content .produto-card,
.main-content .servico-card,
.main-content .variacao-card,
.main-content .foto-card {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(21, 37, 61, 0.045);
}

.main-content .produto-card:hover,
.main-content .servico-card:hover,
.main-content .foto-card:hover {
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.10) !important;
    transform: translateY(-1px) !important;
}

.main-content .produto-code,
.main-content .sc-code {
    color: var(--text-muted) !important;
}

.main-content .produto-name,
.main-content .sc-name {
    color: var(--text-main) !important;
}

.main-content .produto-price {
    color: var(--success) !important;
}

.main-content .empty-state,
.main-content .empty-fotos,
.main-content .empty-variacoes {
    color: var(--text-muted) !important;
}

.main-content .modal {
    border: 1px solid var(--border-subtle) !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 60px rgba(16, 31, 52, 0.24) !important;
}

@media (max-width: 900px) {
    .page-surface {
        padding: 1rem;
    }

    .main-content .page-header,
    .main-content .toolbar,
    .main-content .list-header,
    .main-content .list-tools {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .main-content .page-header > div,
    .main-content .list-tools,
    .main-content .toolbar,
    .main-content .search-bar,
    .main-content .list-tools input {
        width: 100% !important;
        max-width: none !important;
    }

    .main-content .field,
    .main-content .field.w2,
    .main-content .field.w3,
    .main-content .field.w4 {
        min-width: 100% !important;
    }

    .main-content .lookup-row {
        align-items: stretch;
        flex-direction: column;
    }

    .main-content .tabela,
    .main-content .tabela-financeiro {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ===== ERP auth pages ===== */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    background:
        radial-gradient(ellipse at 8% 12%, rgba(53, 106, 240, 0.13), transparent 32%),
        radial-gradient(ellipse at 92% 88%, rgba(23, 133, 96, 0.08), transparent 30%),
        #f3f6fb;
}

.auth-panel {
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: minmax(340px, 0.84fr) minmax(0, 1.16fr);
    align-items: stretch;
}

.auth-brand,
.auth-card {
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-panel);
}

.auth-brand {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    min-height: 500px;
    padding: clamp(2rem, 4vw, 3.25rem);
    overflow: hidden;
    border-color: #1d3453;
    border-radius: 24px 0 0 24px;
    background:
        radial-gradient(ellipse at 15% 5%, rgba(78, 132, 229, 0.28), transparent 42%),
        linear-gradient(145deg, #10213a 0%, #142b48 58%, #123e4d 100%);
    color: #fff;
}

.auth-brand::before {
    position: absolute;
    top: -150px;
    right: -155px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(208, 226, 255, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(208, 226, 255, .035), 0 0 0 65px rgba(208, 226, 255, .025);
    content: "";
}

.auth-brand::after {
    position: absolute;
    right: 12%;
    bottom: -135px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(57, 193, 172, .13);
    content: "";
    filter: blur(8px);
}

.auth-brand > * {
    position: relative;
    z-index: 1;
}

.auth-brand-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.auth-brand-eyebrow {
    margin-bottom: 0.65rem;
    color: #9eb4d1;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.auth-brand-copy h2 {
    max-width: 390px;
    margin: 1.2rem 0 0.75rem;
    color: #f7f9fd;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.12;
}

.auth-brand .auth-brand-description {
    max-width: 370px;
    margin: 0;
    color: #b6c6d9;
    font-size: 0.92rem;
    line-height: 1.65;
}

.auth-brand-features {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-top: 0.35rem;
}

.auth-brand-features > span {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #d4dfed;
    font-size: 0.78rem;
    font-weight: 600;
}

.auth-feature-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(119, 219, 197, .25);
    border-radius: 7px;
    background: rgba(71, 194, 169, .14);
    color: #8de4d1;
    font-size: 0.72rem;
    flex: 0 0 20px;
}

.auth-logo {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 15px;
    background: linear-gradient(145deg, #5b91ff, #356af0);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 850;
    letter-spacing: -0.04em;
    box-shadow: 0 12px 24px rgba(4, 17, 36, .24);
}

.auth-brand strong {
    display: block;
    color: #f7f9fd;
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.auth-card {
    padding: clamp(2rem, 4vw, 3rem);
    border-color: #e8edf4;
    border-radius: 0 24px 24px 0;
    background: #fff;
    box-shadow: 0 24px 70px rgba(27, 45, 75, .12);
}

.login-card {
    width: min(100%, 560px);
    max-width: none;
    justify-self: center;
}

.signup-card {
    width: 100%;
}

.auth-card-header {
    margin-bottom: 1.6rem;
}

.auth-eyebrow {
    color: var(--accent);
    font-size: 0.72rem;
    display: inline-block;
    margin-bottom: 0.3rem;
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.auth-card h1 {
    margin: 0.2rem 0 0;
    color: var(--text-main);
    font-size: clamp(1.65rem, 3vw, 2rem);
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.auth-card p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auth-form label,
.auth-form .field {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.auth-form input,
.auth-form select,
.auth-form textarea {
    min-height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: 11px;
    color: var(--text-main);
    font-size: 0.92rem;
    padding: 0.65rem 0.8rem;
    text-transform: none;
    transition: border-color .15s, box-shadow .15s;
}

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(53, 106, 240, 0.13);
}

.auth-submit {
    width: 100%;
    min-height: 48px;
}

.auth-form .btn-primary,
.auth-form .auth-submit {
    border: 1px solid #356af0;
    border-radius: 11px;
    background: linear-gradient(135deg, #4279f5, #2f61e4);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(53, 106, 240, .17);
}

.auth-form .btn-primary:hover,
.auth-form .auth-submit:hover {
    background: #2b58d1;
    border-color: #2b58d1;
    box-shadow: 0 10px 22px rgba(53, 106, 240, .24);
}

.auth-form .btn-primary:disabled,
.auth-form .auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    box-shadow: none;
}

.auth-footer-link,
.auth-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.86rem;
}

.auth-footer-link a,
.auth-actions-row a {
    color: var(--accent);
    font-weight: 800;
    text-decoration: none;
}

.auth-footer-link a:hover,
.auth-actions-row a:hover {
    text-decoration: underline;
}

.signup-form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

.signup-form .field {
    flex: 1;
    min-width: 170px;
}

.signup-form .lookup-field {
    flex: 1.15;
    min-width: 380px;
}

.signup-form .field.w2 {
    flex: 2;
    min-width: 280px;
}

.signup-form .field-small {
    max-width: 110px;
}

.auth-form .lookup-row {
    display: flex;
    gap: 0.5rem;
}

.auth-form .lookup-row input {
    flex: 1;
    min-width: 0;
}

.auth-form .btn-lookup {
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    padding: 0 0.8rem;
}

@media (max-width: 860px) {
    .auth-shell {
        align-items: flex-start;
        padding: 1.25rem;
    }

    .auth-panel {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: auto;
    }

    .auth-brand {
        min-height: auto;
        gap: 1rem;
        padding: 1.75rem;
        border-radius: 22px 22px 0 0;
    }

    .auth-brand-copy h2 {
        margin-top: 0.8rem;
        font-size: 1.65rem;
    }

    .auth-brand-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem 1rem;
    }

    .login-card {
        max-width: none;
        justify-self: stretch;
        border-radius: 0 0 22px 22px;
    }
}

@media (max-width: 620px) {
    .auth-shell {
        padding: 0.8rem;
    }

    .auth-card {
        padding: 1.35rem;
    }

    .auth-brand {
        gap: 0.85rem;
        padding: 1.35rem;
    }

    .auth-brand-features {
        grid-template-columns: 1fr;
    }

    .auth-brand .auth-brand-description {
        font-size: 0.84rem;
    }

    .signup-form .field,
    .signup-form .field.w2,
    .signup-form .lookup-field,
    .signup-form .field-small {
        max-width: none;
        min-width: 100%;
    }

    .auth-form .lookup-row,
    .auth-actions-row,
    .auth-footer-link {
        align-items: stretch;
        flex-direction: column;
    }
}

.auth-actions-row .auth-submit {
    width: auto;
    min-width: 210px;
}

/* Premium refinements for list, notes and finance pages */
.main-content table:not(.tabela):not(.tabela-financeiro):not(.fin-table) {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.main-content table:not(.tabela):not(.tabela-financeiro):not(.fin-table) thead th {
    padding: 0.78rem 0.8rem;
    border-bottom: 1px solid var(--border-subtle);
    background: #f5f8fc;
    color: #596a81;
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.main-content table:not(.tabela):not(.tabela-financeiro):not(.fin-table) tbody td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid #edf1f6;
    color: var(--text-main);
    vertical-align: middle;
}

.main-content table:not(.tabela):not(.tabela-financeiro):not(.fin-table) tbody tr:last-child td {
    border-bottom: 0;
}

.main-content table:not(.tabela):not(.tabela-financeiro):not(.fin-table) tbody tr:hover td {
    background: #f8fbff;
}

.main-content .filtros-bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #fbfcff);
    box-shadow: var(--shadow-card);
}

.main-content .filtro-btn {
    padding: 0.45rem 0.75rem;
    border: 1px solid #e5ebf3;
    border-radius: 9px;
    background: #f8fafd;
    color: #5c6b80;
    font-size: 0.76rem;
    font-weight: 650;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.main-content .filtro-btn:hover {
    transform: translateY(-1px);
    border-color: #cbd9ed;
    background: #f1f6fd;
    color: #2f5f9e;
}

.main-content .filtro-btn.filtro-ativo {
    border-color: #3474dc;
    background: linear-gradient(135deg, #3f83ed, #2d66cf);
    color: #fff;
    box-shadow: 0 5px 13px rgba(52, 116, 220, 0.18);
}

.main-content .filtro-ativo .filtro-count {
    background: rgba(255, 255, 255, 0.2);
}

.main-content .busca-input {
    min-height: 42px;
    border-radius: 10px !important;
}

.main-content .notas-lista {
    gap: 0.7rem;
}

.main-content .nota-card {
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(21, 37, 61, 0.04);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.main-content .nota-card:hover {
    transform: translateY(-1px);
    border-color: #d3deec;
    box-shadow: 0 12px 26px rgba(21, 37, 61, 0.075);
}

.main-content .nota-card.nota-expanded {
    border-color: #a9c5ed;
    box-shadow: 0 12px 28px rgba(52, 116, 220, 0.1);
}

.main-content .nota-header {
    min-height: 68px;
    padding: 0.9rem 1.1rem;
    transition: background 0.15s;
}

.main-content .nota-header:hover {
    background: #f8fbff;
}

.main-content .nota-chave {
    color: #5d6e84;
}

.main-content .nota-tipo-tag {
    padding: 0.22rem 0.58rem;
    border: 1px solid #e7edf5;
    border-radius: 999px;
    background: #f5f8fc;
    color: #62728a;
    font-weight: 700;
}

.main-content .nota-detalhes {
    padding: 1.1rem;
    border-top: 1px solid var(--border-subtle);
    background: #f7f9fc;
}

.main-content .nota-detalhes-grid {
    gap: 0.65rem;
}

.main-content .detalhe-item {
    min-width: 0;
    padding: 0.7rem 0.75rem;
    border: 1px solid #e8edf4;
    border-radius: 10px;
    background: #fff;
}

.main-content .detalhe-label {
    margin-bottom: 0.3rem;
    color: #8290a3;
    font-weight: 700;
}

.main-content .detalhe-valor {
    color: #26374e;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.main-content .consulta-result,
.main-content .acao-result,
.main-content .acao-form {
    border-radius: 10px;
}

.main-content .acao-form {
    border-color: var(--border-subtle);
    box-shadow: 0 4px 14px rgba(21, 37, 61, 0.04);
}

.main-content .btn-acao {
    min-height: 36px;
    padding: 0.45rem 0.78rem;
    border-radius: 8px;
    font-weight: 650;
}

.main-content .btn-info {
    background: #3474dc;
}

.main-content .btn-outline {
    border: 1px solid var(--border-strong);
    color: #53647b;
}

.main-content .fin-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0 0.75rem;
}

.main-content .fin-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.main-content .fin-header-title h2 {
    color: var(--text-main);
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    font-weight: 760;
    letter-spacing: -0.04em;
}

.main-content .fin-header-sub {
    margin-top: 0.3rem;
    color: var(--text-muted);
}

.main-content .fin-header-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border: 1px solid rgba(52, 116, 220, 0.12);
    border-radius: 14px;
    background: linear-gradient(145deg, #edf4ff, #e8f7f7);
    font-size: 1.35rem;
}

.main-content .fin-summary {
    gap: 0.85rem;
}

.main-content .fin-card {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #fbfcff);
    box-shadow: var(--shadow-card);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.main-content .fin-card::before {
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--fin-accent, #3474dc);
    content: "";
}

.main-content .fin-card:hover {
    transform: translateY(-2px);
    border-color: #d3deec;
    box-shadow: 0 13px 28px rgba(21, 37, 61, 0.085);
}

.main-content .fin-card.fin-card-total { --fin-accent: #3474dc; }
.main-content .fin-card.fin-card-venc { --fin-accent: #c9433b; }
.main-content .fin-card.fin-card-ok { --fin-accent: #147d64; }
.main-content .fin-card.fin-card-rec { --fin-accent: #7862c8; }

.main-content .fin-card-label {
    color: #7a899d;
    font-size: 0.7rem;
    font-weight: 720;
    letter-spacing: 0.06em;
}

.main-content .fin-card-value {
    color: var(--text-main);
    font-size: clamp(1.3rem, 1.8vw, 1.65rem);
    font-weight: 760;
    letter-spacing: -0.04em;
}

.main-content .fin-filtros {
    border-color: var(--border-subtle);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #fbfcff);
    box-shadow: var(--shadow-card);
}

.main-content .fin-section {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-panel);
}

.main-content .fin-section-title {
    color: #35465e;
    font-size: 0.9rem;
    font-weight: 740;
    letter-spacing: -0.01em;
}

.main-content .fin-table-wrapper {
    border-color: var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(21, 37, 61, 0.035);
}

.main-content .fin-table thead tr {
    background: #f5f8fc;
}

.main-content .fin-table th {
    color: #65758b;
    font-size: 0.7rem;
    letter-spacing: 0.055em;
}

.main-content .fin-table td {
    color: #27384f;
}

.main-content .fin-table tbody tr:hover td {
    background: #f8fbff;
}

.main-content .fin-btn-primary {
    border: 1px solid #3474dc;
    border-radius: 9px;
    background: linear-gradient(135deg, #3f83ed, #2d66cf);
    box-shadow: 0 5px 13px rgba(52, 116, 220, 0.18);
}

.main-content .fin-btn-primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #3474dc, #2859b9);
    box-shadow: 0 8px 18px rgba(52, 116, 220, 0.24);
}

.main-content .fin-btn-ghost {
    border-color: var(--border-strong);
    border-radius: 9px;
    background: #fff;
}

.main-content .fin-modal-overlay {
    background: rgba(10, 24, 44, 0.48);
    backdrop-filter: blur(4px);
}

.main-content .fin-modal {
    border: 1px solid rgba(230, 236, 244, 0.9);
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(16, 31, 52, 0.24);
}

.main-content .fin-modal-header,
.main-content .fin-modal-footer {
    border-color: var(--border-subtle);
}

@media (max-width: 900px) {
    .main-content .fin-page {
        padding: 0;
    }

    .main-content .fin-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .main-content .fin-filter-search {
        grid-column: 1 / -1;
    }

    .main-content .nota-detalhes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .main-content .filtros-bar {
        align-items: stretch;
    }

    .main-content .busca-input {
        width: 100%;
        max-width: none;
    }

    .main-content .nota-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .main-content .nota-info-right {
        width: 100%;
        justify-content: space-between;
    }

    .main-content .nota-detalhes-grid,
    .main-content .fin-filtros {
        grid-template-columns: minmax(0, 1fr);
    }
}