@font-face {
    font-family: "Noto Sans";
    src: url('/static/all/font/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans";
    src: url('/static/all/font/Noto_Sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url("/static/all/font/Roboto/Roboto-Regular.eot");
    src: url("/static/all/font/Roboto/Roboto-Regular.eot?#iefix") format('embedded-opentype'),
        url("/static/all/font/Roboto/Roboto-Regular.woff2") format('woff2'),
        url("/static/all/font/Roboto/Roboto-Regular.woff") format('woff'),
        url("/static/all/font/Roboto/Roboto-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url('/static/all/font/Roboto/Roboto-Italic.eot');
    src: url('/static/all/font/Roboto/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
        url('/static/all/font/Roboto/Roboto-Italic.woff2') format('woff2'),
        url('/static/all/font/Roboto/Roboto-Italic.woff') format('woff'),
        url('/static/all/font/Roboto/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Roboto";
    src: url('/static/all/font/Roboto/Roboto-Bold.eot');
    src: url('/static/all/font/Roboto/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('/static/all/font/Roboto/Roboto-Bold.woff2') format('woff2'),
        url('/static/all/font/Roboto/Roboto-Bold.woff') format('woff'),
        url('/static/all/font/Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Clash Display";
    src: url('/static/all/font/ClashDisplay/ClashDisplay-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Clash Display";
    src: url('/static/all/font/ClashDisplay/ClashDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Clash Display";
    src: url('/static/all/font/ClashDisplay/ClashDisplay-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/*
========================================
THEME NEO - SGP
========================================
Section index:
1) Tokens e base global
2) Layout (header, menu e content)
3) Componentes (forms, tables, dialogs, buttons, badges)
4) Integracoes (DataTables, Select2, Toastr)
5) Feedback e acessibilidade
6) Responsividade
========================================
*/

/* 1) tokens */
:root {
    /* header */
    --header-height: 54px;
    --header-menu-height: 36px;

    /* colors */
    --color-primary: #0f1115;
    --color-secondary: #171a22;
    --color-tertiary: #2a2f39;
    --color-bg: #ffffff;
    --color-bg-secondary: #f5f5f5;
    --color-bg-tertiary: #fafafa;
    --color-text-primary: #171717;
    --color-text-secondary: #737373;
    --color-text-primary-dark: #ffffff;
    --color-text-secondary-dark: #d6d6d6;
    --color-text-option-disabled: gray;
    --color-border-primary: #cccccc;
    --color-border-secondary: #ebebeb;
    --color-border-focus: #b8b8b8;
    --color-hover-primary: #f5f5f5;
    --color-accent: #e8590c;
    --color-accent-hover: #c94d0a;
    --color-success: #1e8100;
    --color-warning: #b17200;
    --color-error: #d62524;
    --color-info: #0f6fa7;
    --color-link-info: #0095cd;
    --color-link-info-hover: #003399;
    --color-brand-black: #262626;
    --color-brand-black-hover: #000000;
    --color-brand-gray: #737373;
    --color-brand-gray-hover: #525252;
    --color-brand-white-bg: #fafafa;
    --color-brand-white-bg-hover: #f5f5f5;
    --color-brand-white-border: #e5e5e5;
    --color-brand-danger-hover: #991700;
    --color-brand-info-hover: #08486c;
    --color-brand-success-hover: #1c6f30;
    --color-brand-warning-hover: #b48a08;
    --color-booksmark-bg: #262626;
    --color-booksmark-text-soft: #dbe8f3;
    --color-panel-success-border: #b9e0c5;
    --color-panel-success-text: #256c38;
    --color-panel-success-bg: #e9f8ee;
    --color-panel-info-border: #b7d7ea;
    --color-panel-info-text: #1f5c7a;
    --color-panel-info-bg: #e8f5fd;
    --color-panel-warning-border: #efd9a6;
    --color-panel-warning-text: #7b5c13;
    --color-panel-warning-bg: #fff8e6;
    --color-panel-danger-border: #efc1c1;
    --color-panel-danger-text: #8a2c2c;
    --color-panel-danger-bg: #fff1f1;
    --color-white-alpha-16: rgba(255, 255, 255, 0.16);
    --color-white-alpha-11: rgba(255, 255, 255, 0.11);
    --color-white-alpha-08: rgba(255, 255, 255, 0.08);
    --color-white-alpha-07: rgba(255, 255, 255, 0.07);
    --color-input-focus-border: #5a636d;
    --color-input-placeholder-hover: #8c8c8c;
    --color-text-light: #f6f6f6;
    --color-text-light-strong: #f3f3f3;
    --color-text-light-muted: #cccccc;
    --color-arrow-hover: #aaaaaa;
    --color-black: #000000;
    --color-text-ink: #111;
    --color-text-contrast-soft: #d6dce5;
    --color-tag-border: #808080;
    --color-badge-border: #00000025;
    --color-badge-success: #28a745;
    --color-badge-warning: #bfaa0f;
    --color-badge-neutral: #606060;
    --color-badge-accent: #ff630d;
    --color-tab-badge-border: rgba(17, 24, 39, 0.15);
    /* Padrão soft pill aplicado em todos os badges (alinhado ao dark): bg na cor
       semântica suave (escala -100 do Tailwind) + text na mesma família escurecido
       (escala -800). Evita as cores saturadas vibrantes anteriores que destoavam
       da paleta neo (preto + cinzas + laranja TSMX) e ganha coerência semântica. */
    --color-tab-badge-danger-bg: #fee2e2;
    --color-tab-badge-danger-text: #991b1b;
    --color-tab-badge-warning-bg: #fef3c7;
    --color-tab-badge-warning-text: #92400e;
    /* info como neutro cinza (não azul) — segue o dark e a paleta TSMX. */
    --color-tab-badge-info-bg: #f1f5f9;
    --color-tab-badge-info-text: #334155;
    --color-tab-badge-note-bg: #ffedd5;
    --color-tab-badge-note-text: #9a3412;
    --color-status-danger-soft: #d3526d;
    --color-status-suspended: #ee5911;
    --color-circle-border: #ffffff6b;
    --color-status-block-border: #dcdcdc;
    --color-border-hover-strong: #cfd3d7;
    --color-accordion-header-bg: #f3f3f3;
    --color-accordion-header-bg-hover: #ebebeb;
    --color-accordion-header-bg-active: #e8e8e8;
    --color-text-muted: #525252;
    --color-button-blue-bg: #1d4ed8;
    --color-button-blue-bg-hover: #1e40af;
    --color-button-red-bg: #b91c1c;
    --color-button-red-bg-hover: #991b1b;
    --color-button-green-bg: #15803d;
    --color-button-green-bg-hover: #166534;
    --color-button-yellow-bg: #eab308;
    --color-button-yellow-bg-hover: #ca8a04;
    --color-button-yellow-text: #1a1a1a;
    --color-button-pink-bg: #be185d;
    --color-button-pink-bg-hover: #9d174d;
    --color-button-rosy-bg: #86198f;
    --color-button-rosy-bg-hover: #701a75;
    --color-button-cyan-bg: #0e7490;
    --color-button-cyan-bg-hover: #155e75;
    --color-select2-choice-border: #ced4da;
    --color-feedback-error-border: #f0c2c2;
    --color-feedback-error-bg: #fff3f3;
    --color-feedback-error-text: #8e2f2f;
    --color-required-mark: #999;
    --color-toast-success: #2c9b46;
    --color-toast-info: #207cb8;
    --color-toast-warning: #c28b16;
    --color-toast-error: #cf3e3d;
    --color-toast-border: rgba(0, 0, 0, 0.08);
    --color-selection-bg: rgba(232, 89, 12, 0.35);
    --color-dialog-warning: #ffc107;
    --color-search-autocomplete-bg: #fafafa;
    --color-search-autocomplete-row-hover: #f0f0f0;
    --color-search-autocomplete-row-active: #e5e5e5;
    --color-search-autocomplete-border: #d4d4d4;
    --color-search-autocomplete-text-primary: #262626;
    --color-search-autocomplete-text-secondary: #525252;
    --search-text-service-active: #1f7a4d;
    --search-text-service-suspended: #e6611d;
    --search-text-service-warning: #2f5bc8;

    /* Cores de texto vibrantes — pra valores numéricos coloridos no detalhe
       do título (Juros, Multa, Desconto, etc.). Reaproveita success/error/
       warning onde possível; estes 2 cobrem o que falta (azul vibrante e
       rosa) que `--color-info` (gray no dark) e `--color-button-pink-bg`
       (escuro no dark) não atendem. Tailwind 700 light, 400 dark. */
    --color-text-info: #1d4ed8;
    --color-text-pink: #c026d3;

    /* Azul-ciano (cyan) vivo usado para destacar contratos com cobrança
       unificada — puxado pro azul pra saltar em relação às demais linhas.
       Cyan-600 no claro; o tema dark sobrescreve para um ciano mais claro. */
    --color-contrato-unificado: #0891b2;

    /* spacing */
    --margin-default: 1em;
    --margin-half: .25em;
    --margin-15x: 1.5em;
    --margin-2x: 2em;

    /* fonts */
    --text-size-default: 13px;
    --text-size-small: 12px;
    --text-size-large: 14px;
    /* escala completa: xs (eyebrows/labels), sm (small), md (body), lg (emphasis), xl (h3), 2xl (h2), 3xl (h1) */
    --text-size-xs: 11px;
    --text-size-sm: 12px;
    --text-size-md: 13px;
    --text-size-lg: 14px;
    --text-size-xl: 16px;
    --text-size-2xl: 18px;
    --text-size-3xl: 22px;
    --text-spacing: .1em;
    --text-transform: uppercase;
    --font-family-base: "Noto Sans", "Roboto", "Segoe UI", sans-serif;
    --font-family-heading: "Noto Sans", "Roboto", "Segoe UI", sans-serif;
    --font-family-header: "Noto Sans", "Roboto", "Segoe UI", sans-serif;

    /* radius */
    --radius-default: .5em;
    --radius-sm: .4em;
    --radius-lg: .75em;

    /* hover */

    /* border */

    --border-default: .1em solid var(--color-border-primary);

    /* shadow */
    --box-shadow-default: 0 4px 24px 0 rgba(17, 24, 39, 0.12);
    /* elevação sutil (shadow-sm): caixas estáticas, tabs, barras de ação — só um lift, não card-soup */
    --box-shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04);
    /* elevação média (shadow-md): containers de tabela, conteúdo principal — faz "flutuar" sobre o fundo */
    --box-shadow-medium: 0 1px 3px rgba(17, 24, 39, 0.08), 0 4px 12px rgba(17, 24, 39, 0.05);
    --box-shadow-focus: 0 0 0 3px rgba(201, 77, 10, 0.60);
    --box-shadow-header: 0 4px 16px rgba(0, 0, 0, 0.22);
    --box-shadow-popover: 0 10px 24px rgba(0, 0, 0, 0.2);
    --box-shadow-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    --box-shadow-tag-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
    --box-shadow-text-strong: 0 1px 1px rgba(0, 0, 0, .3);
    --box-shadow-text-soft: 0 1px 1px rgba(0, 0, 0, .2);
    --color-dialog-overlay: rgba(14, 18, 25, 0.5);

    /* onu-detail */
    --onu-detail-color: #95ECA7;
}

/* 1) base global */
* {
    box-sizing: border-box;
}

html,
body,
input,
select,
textarea,
button {
    font-family: var(--font-family-base) !important;
}

input,
select
select:placeholder-shown,
select::placeholder {
    font-size: var(--text-size-default) !important;
}

select {
    height: auto;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-bg-secondary);
    font-size: var(--text-size-default);
    color: var(--color-text-primary);
}

div.dataTables_scrollHeadInner table thead tr[style*="height: 0"],
div.dataTables_scrollHeadInner table thead tr[style*="height: 0px"] {
    height: 0 !important;
}

div.dataTables_scrollHeadInner table thead tr[style*="height: 0"] th,
div.dataTables_scrollHeadInner table thead tr[style*="height: 0"] td,
div.dataTables_scrollHeadInner table thead tr[style*="height: 0px"] th,
div.dataTables_scrollHeadInner table thead tr[style*="height: 0px"] td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    border: 0 none !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Alvo alternativo mais específico caso a tabela tenha a classe usada nas views */
.tablelist.display.dataTable thead tr[style*="height: 0"] th,
.tablelist.display.dataTable thead tr[style*="height: 0"] td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: 0 none !important;
    height: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    background: transparent !important;
    color: transparent !important;
}

a {
    color: inherit;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border-secondary);
    margin: 8px 0;
}

h1 {
    font-size: var(--text-size-2xl);
    letter-spacing: -.01em;
}

h2 {
    font-size: var(--text-size-xl);
    letter-spacing: -.005em;
}

h3 {
    font-size: var(--text-size-lg);
}

h1,
h2,
h3 {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 10px;
    line-height: 1.25;
}

/* h1 com padding maior — declarado após a regra agrupada para sobrescrever */
h1 {
    padding-top: 12px;
    padding-bottom: 12px;
}

h1,
h2 {
    font-family: var(--font-family-heading) !important;
    font-weight: 700;
}

/* 2) layout - content */
#content-wrap {
    top: -200px;
    padding: 0 !important;
    margin: 0 !important;
}

#content-main {
    text-align: left;
    padding: 3px 20px;
}

.app-admcore #content #content-main,
.app-admin #content #content-main,
.app-atendimento #content #content-main,
.app-auth #content #content-main,
.app-beneficios #content #content-main,
.app-cauth #content #content-main,
.app-central #content #content-main,
.app-cobranca #content #content-main,
.app-crm #content #content-main,
.app-estoque #content #content-main,
.app-estoque2 #content #content-main,
.app-financeiro #content #content-main,
.app-fiscal #content #content-main,
.app-netcore #content #content-main,
.app-oauth #content #content-main,
.app-precadastro #content #content-main,
.app-webshell #content #content-main,
.webshell-script #content #content-main {
    padding: 0 !important;
}

#main {
    padding: 0 !important;
}

#footer {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#footer img {
    display: block;
    margin: 0 auto;
}

#footer p {
    text-align: center;
    width: 100%;
}

/* embedded django admin (iframe): evita cabecalho duplicado/escuro */
body.neo-iframe-admin #header,
body.neo-iframe-admin #headertop,
body.neo-iframe-admin #header-wrap,
body[class*="webshell-"] #header,
body[class*="webshell-"] #headertop,
body[class*="webshell-"] #header-wrap,
body.change-form #header,
body.change-form #headertop,
body.change-form #header-wrap,
body.change-list #header,
body.change-list #headertop,
body.change-list #header-wrap,
body.delete-confirmation #header,
body.delete-confirmation #headertop,
body.delete-confirmation #header-wrap,
body.history #header,
body.history #headertop,
body.history #header-wrap,
body.app-index #header,
body.app-index #headertop,
body.app-index #header-wrap,
body.dashboard #wrap #header,
body.dashboard #wrap #headertop,
body.dashboard #wrap #header-wrap,
body div#container div#header {
    display: none !important;
}

body.neo-iframe-admin #container,
body.neo-iframe-admin #content,
body.neo-iframe-admin #content-main,
body[class*="webshell-"] #container,
body[class*="webshell-"] #content,
body[class*="webshell-"] #content-main,
body.change-form #container,
body.change-form #content,
body.change-form #content-main,
body.change-list #container,
body.change-list #content,
body.change-list #content-main,
body.delete-confirmation #container,
body.delete-confirmation #content,
body.delete-confirmation #content-main,
body.history #container,
body.history #content,
body.history #content-main,
body.app-index #container,
body.app-index #content,
body.app-index #content-main,
body.dashboard #wrap #container,
body.dashboard #wrap #content,
body.dashboard #wrap #content-main {
    margin-top: 0 !important;
    top: 0 !important;
}

/* 2) layout - header */
#header-wrap {
    z-index: 602;
    position: relative;
    width: 100%;
}

#header {
    min-width: 0;
    width: 100%;
    height: var(--header-height);
    background: var(--color-primary);
    color: var(--color-text-primary-dark) !important;
    padding: 0;
    border-bottom: 0;
    box-shadow: var(--box-shadow-header);
    font-size: 14px;
}

#header-left {
    float: left;
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding-left: 24px;
    gap: 16px;
}

#header-left > a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    line-height: 1;
}

#header-left img {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    height: 27px !important;
    object-fit: contain;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: block;
    vertical-align: middle;
}

.sgp-sidebar .sidebar-admin-tools .admin-tool-btn.is-logout {
    width: auto;
    min-width: 36px;
    padding: 0 12px;
    gap: 6px;
}
.sgp-sidebar .sidebar-admin-tools .admin-tool-btn.is-logout .admin-tool-label {
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
}

#header-right {
    float: right;
    color: var(--color-text-secondary-dark);
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-size: 13px;
}

#header-right ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

#header-right ul li {
    margin: 0 6px;
    height: 30px;
    line-height: 1;
    display: flex;
    align-items: center;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary-dark) !important;
    font-weight: 500;
}

/* Alinha o primeiro/último item da direita com as bordas dos demais elementos */
#header-right ul li:first-child {
    margin-left: 0;
}

#header-right ul li:last-child {
    margin-right: 0;
}

#header-right ul li span {
    color: var(--color-text-primary-dark) !important;
    font-weight: 700;
}

#header-right ul li > span {
    margin-left: 4px;
}

#header-right ul li.separador {
    width: 1px;
    height: 20px;
    margin: 0 10px;
    padding: 0;
    display: block;
    align-self: center;
    background: var(--color-white-alpha-16);
}

#header-right a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

#header-right a:link,
#header-right a:visited,
#header-right a:active {
    color: var(--color-text-secondary-dark);
    text-decoration: none;
    font-weight: 600;
}

#header-right a:hover,
#header-right a:hover i,
#header-right a:hover .fa,
#header-right a:hover .fas,
#header-right a:hover .far,
#header-right a:hover .fal,
#header-right a:hover .fab {
    color: var(--color-accent) !important;
    text-decoration: none;
}

#header-right a i,
#header-right a .fa,
#header-right a .fas,
#header-right a .far,
#header-right a .fal,
#header-right a .fab {
    font-size: 13px !important;
    line-height: 1;
}

#header-right a:focus-visible {
    outline: none;
    border-radius: 4px;
    box-shadow: var(--box-shadow-focus);
}

/* 2) layout - searchbox */
#clientebusca_top {
    float: left;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

#id_clientebusca,
#id_clientebuscatipo {
    padding: 6px 14px;
    background: var(--color-white-alpha-08);
    color: var(--color-text-primary-dark);
    border: 1px solid var(--color-white-alpha-16);
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    height: 34px;
    margin-left: 0;
    box-shadow: none;
}

#id_clientebusca::placeholder {
    color: var(--color-text-secondary-dark);
}

#id_clientebusca:focus,
#id_clientebusca:hover {
    background: var(--color-white-alpha-11) !important;
    color: var(--color-text-primary-dark) !important;
    border-color: var(--color-white-alpha-16) !important;
    box-shadow: none !important;
}

#id_clientebusca:focus::placeholder,
#id_clientebusca:hover::placeholder {
    color: var(--color-text-light-muted);
}

#id_clientebuscatipo {
    text-overflow: ellipsis;
}

#id_clientebuscatipo:focus {
    background-color: var(--color-white-alpha-11) !important;
    color: var(--color-text-primary-dark) !important;
    border-color: var(--color-white-alpha-16) !important;
    box-shadow: none !important;
}

/* 2) layout - headertop */
#headertop {
    min-width: 0;
    width: 100%;
    height: var(--header-menu-height);
    background: var(--color-secondary);
    color: var(--color-text-primary-dark) !important;
    padding: 0;
    border-top: 1px solid var(--color-white-alpha-08);
    /* Linha laranja abaixo do menu via box-shadow (não consome altura do elemento) */
    box-shadow: 0 4px 0 0 var(--color-accent);
}

#headertop-left {
    float: left;
    height: var(--header-menu-height);
    display: flex;
    align-items: center;
    padding-left: 2px;
}

#headertop-right {
    float: right;
    height: var(--header-menu-height);
    display: flex;
    align-items: center;
    padding: 0 24px 0 0;
}

#headertop-right ul {
    list-style-type: none;
    display: flex;
    margin: 0 !important;
    margin-top: -2px !important;
    padding: 0;
    gap: 0;
}

#headertop-right ul li {
    float: none;
    display: flex;
    align-items: center;
    height: var(--header-menu-height);
    margin-left: 13.5px;
}

#headertop-right a:link,
#headertop-right a:visited,
#headertop-right a:active {
    display: inline-flex;
    align-items: center;
    height: var(--header-menu-height);
    line-height: 1;
    text-decoration: none;
    color: var(--color-text-secondary-dark);
    font-size: 13px;
    font-weight: 600;
}

#headertop-right a:hover,
#headertop-right a:hover i,
#headertop-right a:hover .fa,
#headertop-right a:hover .fas,
#headertop-right a:hover .far,
#headertop-right a:hover .fal,
#headertop-right a:hover .fab {
    color: var(--color-accent) !important;
}

#header,
#header-right,
#header-right ul li,
#header-right a,
#headertop,
#headertop-left,
#headertop-right,
#headertop-right ul li,
#headertop-right a,
#clientebusca_top,
#id_clientebusca,
#id_clientebuscatipo,
ul.sf-menu a,
ul.sf-menu ul li a {
    font-family: var(--font-family-header) !important;
}

/* portadores: botao add separado das tabs */
.portadorpopup-add {
    float: right !important;
    display: flex !important;
    margin: 10px 0 10px 0 !important;
    clear: both;
    justify-content: flex-end !important;
}

a[title="Migração Forma de Cobrança"] {
    border: 1px solid var(--color-border-primary) !important;
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    padding: 2px 4px !important;
    border-radius: var(--radius-default) !important;
    box-shadow: var(--box-shadow-soft) !important;
    transition: all .3s ease-in-out !important;
}

a[title="Migração Forma de Cobrança"]:hover {
    background: var(--color-hover-primary) !important;
    color: var(--color-text-primary) !important;
    text-decoration: none;
}

form.formx p input[type="submit"] {
    border: 1px solid var(--color-accent) !important;
    background: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
    padding: 5px 10px !important;
    border-radius: var(--radius-default) !important;
    cursor: pointer;
    box-shadow: var(--box-shadow-soft) !important;
    transition: all .3s ease-in-out !important;
}

form.formx p input[type="submit"]:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    color: var(--color-text-primary-dark) !important;
    text-decoration: none;
}

/* 2) layout - superfish menu */
ul.sf-menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    align-items: center;
    display: flex;
    gap: 0;
    position: relative;
}

ul.sf-menu a:link,
ul.sf-menu a:visited,
ul.sf-menu a:active {
    color: var(--color-text-secondary-dark);
    padding: 11px 22px 10px 22px;
    text-decoration: none;
    border-radius: 0;
    font-weight: 600;
    font-size: var(--text-size-md);
    transition: all .15s ease-in-out;
    position: relative;
}

/* Alinha o primeiro item do menu com o logo (padding-left: 20px do #header-left) */
ul.sf-menu>li:first-child>a {
    padding-left: 20px;
}

ul.sf-menu a:hover {
    color: var(--color-text-primary-dark);
}

ul.sf-menu>li.sfHover>a,
ul.sf-menu>li>a:focus-visible {
    color: var(--color-text-primary);
}

ul.sf-menu>li:hover>a,
ul.sf-menu>li.sfHover>a,
.sf-menu-main>li:hover>a,
.sf-menu-main>.sfHover>a {
    color: var(--color-accent) !important;
}

ul.sf-menu>li.selected>a,
ul.sf-menu>li.current>a,
ul.sf-menu>li.active>a,
ul.sf-menu>li.sfHover>a {
    color: var(--color-accent) !important;
}

/* sublinhado individual removido — agora a linha laranja é permanente no #headertop */

.sf-menu,
.sf-menu * {
    margin-top: -2px;
    padding: 0;
    list-style: none;
}

.sf-menu li {
    position: relative;
}

.sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    /* alinha o TEXTO dos itens do dropdown com o texto do item pai
       (sf-menu a tem padding-left: 22px; itens internos têm padding-left: 10px;
       então 22 - 10 = 12px de offset deixa os textos alinhados) */
    left: 12px;
    z-index: 99;
}

.sf-menu>li {
    float: left;
    height: auto;
    display: flex;
    align-items: center;
}

.sf-menu li:hover>ul,
.sf-menu li.sfHover>ul {
    display: block;
}

.sf-menu a {
    display: block;
    position: relative;
}

/* 2) layout - superfish submenu */
.sf-menu ul {
    box-shadow: var(--box-shadow-default);
    margin-top: -1px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    background: var(--color-bg);
    padding: .4em 0;
}

.sf-menu ul ul {
    top: 0;
    left: 100%;
    margin-left: 0;
}

.sf-menu ul li a:link,
.sf-menu ul li a:visited,
.sf-menu ul li a:active {
    color: var(--color-text-primary);
    padding: 8px 32px 8px 10px;
    width: auto;
    min-width: 190px;
    white-space: nowrap;
    line-height: 16px;
    text-decoration: none;
    z-index: 605 !important;
    border-radius: 0;
}

.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
    background: var(--color-hover-primary);
}

.sf-menu ul li:hover>a,
.sf-menu ul li.sfHover>a {
    color: var(--color-accent) !important;
}

.sf-arrows .sf-with-ul:after,
.sf-menu-main .sf-with-ul:after {
    content: '';
    position: absolute;
    top: 45%;
    right: 0.2em;
    margin-top: 0;
    height: 0;
    width: 0;
    border: .4em solid transparent;
    border-top-color: var(--color-text-secondary-dark);
}

.sf-arrows>li>.sf-with-ul:focus:after,
.sf-arrows>li:hover>.sf-with-ul:after,
.sf-arrows>.sfHover>.sf-with-ul:after,
.sf-menu-main>li:hover>.sf-with-ul:after,
.sf-menu-main>.sfHover>.sf-with-ul:after,
.sf-menu>li:hover>.sf-with-ul:after,
.sf-menu>li.sfHover>.sf-with-ul:after {
    border-top-color: var(--color-accent);
}

.sf-menu ul li:hover>.sf-with-ul:after,
.sf-menu ul li.sfHover>.sf-with-ul:after {
    border-color: transparent;
    border-left-color: var(--color-accent);
}

.sf-menu ul .sf-with-ul:after {
    right: 1em;
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: var(--color-black);
}

.sgp-sidebar .sf-menu>li>a:hover,
.sgp-sidebar .sf-menu>li.sfHover>a,
.sgp-sidebar .sf-menu li.open>a,
.sgp-sidebar .sf-menu li.active>a,
.sgp-sidebar .sf-menu ul li>a:hover,
.sgp-sidebar .sf-menu ul li.sfHover>a,
.sgp-sidebar .sf-menu .sf-menu-main li>a:hover,
.sgp-sidebar .sf-menu .sf-menu-main li.sfHover>a {
    color: var(--color-accent) !important;
}

.sgp-sidebar,
.sgp-sidebar .sf-menu,
.sgp-sidebar .sf-menu a,
.sgp-sidebar .sidebar-user-info .user-details,
.sgp-sidebar .sidebar-search .form-control,
.sgp-sidebar .sidebar-admin-tools .admin-tool-btn,
.sgp-sidebar .sidebar-nav .submenu .nav-link {
    font-family: var(--font-family-header, "Noto Sans", "Roboto", "Segoe UI", sans-serif) !important;
}

.sgp-sidebar .sidebar-search .form-control,
#id_clientebusca_mobile,
#id_clientebuscatipo_mobile {
    height: 38px !important;
    padding: 6px 12px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    background: var(--color-white-alpha-08) !important;
    color: var(--color-text-primary-dark) !important;
    border: 1px solid var(--color-white-alpha-16) !important;
    box-shadow: none !important;
}

#id_clientebusca_mobile {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

#id_clientebuscatipo_mobile {
    flex: 0 0 110px !important;
    width: 110px !important;
}

.sgp-sidebar .sidebar-search .form-control::placeholder,
#id_clientebusca_mobile::placeholder {
    color: var(--color-text-secondary-dark) !important;
    opacity: 1;
}

.sgp-sidebar .sidebar-search .form-control:hover,
.sgp-sidebar .sidebar-search .form-control:focus,
#id_clientebusca_mobile:hover,
#id_clientebusca_mobile:focus,
#id_clientebuscatipo_mobile:hover,
#id_clientebuscatipo_mobile:focus {
    background: var(--color-white-alpha-11) !important;
    color: var(--color-text-primary-dark) !important;
    border-color: var(--color-accent) !important;
    box-shadow: none !important;
    outline: none !important;
}

.sgp-sidebar .sidebar-search select.form-control option,
#id_clientebuscatipo_mobile option {
    background: var(--color-primary);
    color: var(--color-text-primary-dark);
}

.clientebusca_content {
    width: max-content !important;
    min-width: 360px !important;
    max-width: min(640px, calc(100vw - 36px)) !important;
    max-height: 460px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-primary) transparent;
    background: var(--color-search-autocomplete-bg) !important;
    border: 1px solid var(--color-search-autocomplete-border) !important;
    box-shadow: 0 16px 40px rgba(17, 24, 39, 0.22), 0 2px 8px rgba(17, 24, 39, 0.08) !important;
    border-radius: 12px !important;
    padding: 4px 0 4px 4px !important;
    z-index: 605 !important;
    position: absolute !important;
}

.clientebusca_content::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.clientebusca_content::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.clientebusca_content::-webkit-scrollbar-thumb {
    background: var(--color-border-primary);
    border-radius: 6px;
}

.clientebusca_content::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-focus);
}

.clientebusca_content .ui-menu-item {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px;
}

.clientebusca_content .ui-menu-item + .ui-menu-item {
    margin-top: 0 !important;
    border-top: 1px solid var(--color-border-secondary) !important;
}

.clientebusca_content .ui-menu-item > div,
.clientebusca_content .ui-menu-item-wrapper {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 8px 6px 8px 10px;
    line-height: 1.3;
    color: var(--color-search-autocomplete-text-primary) !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    transition: none;
}

.clientebusca_content .cl-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.clientebusca_content .cl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.3;
    overflow: hidden;
    flex-wrap: nowrap;
}

.clientebusca_content .cl-row-name .cl-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-search-autocomplete-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.clientebusca_content .cl-row-name .cl-id-pill {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    background: var(--color-accent);
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

.clientebusca_content .cl-row-meta {
    color: var(--color-search-autocomplete-text-secondary);
    font-size: 12px;
    gap: 12px;
}

.clientebusca_content .cl-doc,
.clientebusca_content .cl-login {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clientebusca_content .cl-doc {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.clientebusca_content .cl-login {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.clientebusca_content .cl-doc i,
.clientebusca_content .cl-login i,
.clientebusca_content .cl-row-address i {
    font-size: 10px;
    opacity: 0.75;
    flex-shrink: 0;
}

.clientebusca_content .cl-login.cl-status-ativo,
.clientebusca_content .cl-login.cl-status-ativo i {
    color: var(--search-text-service-active, #1e8100);
}

.clientebusca_content .cl-login.cl-status-ativo-red,
.clientebusca_content .cl-login.cl-status-ativo-red i {
    color: var(--search-text-service-warning, #b17200);
}

.clientebusca_content .cl-login.cl-status-suspenso,
.clientebusca_content .cl-login.cl-status-suspenso i {
    color: var(--search-text-service-suspended, #d62524);
}

.clientebusca_content .cl-row-address {
    color: var(--color-search-autocomplete-text-secondary);
    font-size: 11px;
    gap: 5px;
}

.clientebusca_content .cl-addr-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.clientebusca_content .ui-menu-item > div:hover,
.clientebusca_content .ui-menu-item-wrapper:hover {
    background: var(--color-search-autocomplete-row-hover) !important;
    border-radius: 6px;
}

.clientebusca_content .ui-menu-item.ui-state-active,
.clientebusca_content .ui-menu-item.ui-state-focus {
    border: 0 !important;
    border-left: 3px solid var(--color-accent) !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.clientebusca_content .ui-menu-item > div.ui-state-active,
.clientebusca_content .ui-menu-item > div.ui-state-focus,
.clientebusca_content .ui-menu-item-wrapper.ui-state-active,
.clientebusca_content .ui-menu-item-wrapper.ui-state-focus {
    background: var(--color-search-autocomplete-row-active) !important;
    color: var(--color-search-autocomplete-text-primary) !important;
    border: 0 !important;
    border-left: 3px solid var(--color-accent) !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 8px 6px 8px 10px !important;
    font-weight: normal !important;
    margin: 0 !important;
    border-radius: 6px;
}

.clientebusca_content .ui-menu-item > div.ui-state-active strong,
.clientebusca_content .ui-menu-item > div.ui-state-focus strong,
.clientebusca_content .ui-menu-item-wrapper.ui-state-active strong,
.clientebusca_content .ui-menu-item-wrapper.ui-state-focus strong {
    font-weight: 700 !important;
    font-size: 13px !important;
}

.clientebusca_content .ui-menu-item > div.ui-state-active span,
.clientebusca_content .ui-menu-item > div.ui-state-focus span,
.clientebusca_content .ui-menu-item-wrapper.ui-state-active span,
.clientebusca_content .ui-menu-item-wrapper.ui-state-focus span {
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.clientebusca_content [style*="color: orange"],
.clientebusca_content [style*="color:orange"],
.clientebusca_content [style*="color: green"],
.clientebusca_content [style*="color:green"],
.clientebusca_content [style*="color: red"],
.clientebusca_content [style*="color:red"] {
    color: var(--color-accent) !important;
    background: rgba(232, 89, 12, 0.14);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700 !important;
    font-style: normal !important;
}

.clientebusca_content span[style*="--search-text-service-active"] {
    color: var(--search-text-service-active) !important;
    font-weight: 700;
}

.clientebusca_content span[style*="--search-text-service-suspended"] {
    color: var(--search-text-service-suspended) !important;
    font-weight: 700;
}

.clientebusca_content span[style*="--search-text-service-warning"] {
    color: var(--search-text-service-warning) !important;
    font-weight: 700;
}

.clientebusca_content .ui-menu-item:last-child {
    border-bottom: none;
}


#cadastro,
#tituloscliente,
#carnescliente,
#ocorrencias,
#contratos,
#internet,
#telefonia,
#tabsextrato,
#documentos,
#aditivos,
#anotacoes,
#variaveis,
#clubesbeneficio,
#assinaturaseletronicas,
#historico,
div#ui-id-2,
div#ui-id-4,
#ui-id-6,
#ui-id-7,
#ui-id-9,
#ui-id-10,
#ui-id-12,
#ui-id-14,
#ui-id-16,
#ui-id-19,
#os,
#ocorrencia,
#anexos,
#itensestoque,
#ocorrencia_checklist,
#ocorrencia_assinaturaseletronicas {
    margin-top: 15px !important;
}

a#ui-id-7.ui-tabs-anchor,
a#ui-id-6.ui-tabs-anchor,
a#ui-id-9.ui-tabs-anchor {
    margin-top: 0 !important;
}

.ui-state-highlight.ui-corner-all {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    font-size: var(--text-size-small);
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--box-shadow-soft) !important;
    margin-top: 30px !important;
}

/* form */
input:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.select2-search__field):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    padding: 5px 10px;
    margin-top: 0;
    min-height: 32px;
    color: var(--color-text-primary);
    background: var(--color-bg-tertiary);
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* No Windows, o popup do <select> (lista de options) herda cor de texto/fundo
   do contexto e em headers escuros aparece com fundo branco + texto branco,
   ilegivel. Forcar fundo branco + texto escuro nos options garante leitura
   em selects em formularios claros. */
select option {
    background-color: #ffffff;
    color: #171717;
}

/* Em <select multiple>, a regra acima sobrescreve o destaque nativo do browser
   nas options selecionadas, deixando a selecao quase invisivel. Forcamos
   contraste com a cor de acento para a selecao ficar evidente. */
select[multiple] option:checked,
select[size]:not([size="1"]) option:checked {
    background: var(--color-accent) linear-gradient(0deg, var(--color-accent) 0%, var(--color-accent) 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Selects em contexto escuro (header) precisam que o popup acompanhe
   o tema escuro pra manter contraste e bater com a aparencia do select fechado */
#id_clientebuscatipo option,
#id_clientebuscatipo_mobile option {
    background-color: #1a1c22;
    color: #ffffff;
}

input::placeholder,
textarea::placeholder {
    color: #a3a3a3;
}

/* Checkboxes e Radios — design custom Neo */
input[type="checkbox"],
input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    border: 1.5px solid var(--color-border-primary) !important;
    background-color: var(--color-bg) !important;
    background-image: none !important;
    accent-color: var(--color-accent);
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    position: relative;
}

input[type="checkbox"] {
    border-radius: 4px !important;
}

input[type="radio"] {
    border-radius: 50% !important;
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
    border-color: var(--color-accent) !important;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.20) !important;
}

/* Checked: laranja sólido + checkmark branco */
input[type="checkbox"]:checked {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3 3 7-7'/></svg>") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
}

input[type="checkbox"]:indeterminate {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path stroke='white' stroke-width='2.5' stroke-linecap='round' d='M4 8h8'/></svg>") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
}

input[type="radio"]:checked {
    border-color: var(--color-accent) !important;
    background: radial-gradient(circle, var(--color-accent) 0 38%, var(--color-bg) 45% 100%) !important;
    box-shadow: none !important;
}

input[type="checkbox"]:checked:focus,
input[type="checkbox"]:checked:focus-visible,
input[type="radio"]:checked:focus,
input[type="radio"]:checked:focus-visible {
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.30) !important;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

input[type="color"] {
    width: 56px !important;
    height: 32px !important;
    padding: 4px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-border-primary) !important;
    background: var(--color-bg) !important;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04) !important;
    vertical-align: middle !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0 !important;
}

input[type="color"]::-webkit-color-swatch {
    border-radius: 6px !important;
    border: 0 !important;
}

input[type="color"]:focus {
    outline: none !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.15) !important;
}

input:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.select2-search__field):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
    border-color: #a3a3a3;
    background: var(--color-bg);
}

input:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.select2-search__field):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent) !important;
    background: var(--color-bg) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.15) !important;
}

input:read-only:not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select:disabled,
textarea:disabled {
    background-color: var(--color-border-secondary) !important;
    color: #525252 !important;
    border-color: var(--color-border-primary) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}


/* remove icones antiquados */
div#titlepageicon img {
    display: none !important;
}

.customericon {
    display: none !important;
}

.provider_icon {
    display: none !important;
}

.lionicon:not(a) {
    display: none !important;
}

.boletoicon {
    display: none !important;
}

.costicon {
    display: none !important;
}

.paymenticon:not(a) {
    display: none !important;
}

.payment-card64 {
    display: none !important;
}

.ipicon {
    display: none !important;
}

.registericon {
    display: none !important;
}

.occurrenceicon {
    display: none !important;
}

.connectedicon {
    display: none !important;
}

.reports48 {
    display: none !important;
}

.anatelicon {
    display: none !important;
}

.personal-information48 {
    display: none !important;
}

.mapicon {
    display: none !important;
}

.bankicon {
    display: none !important;
}

.naticon {
    display: none !important;
}

.switchicon {
    display: none !important;
}

.planicon {
    display: none !important;
}

.user-mapping48 {
    display: none !important;
}

.logsicon {
    display: none !important;
}

.custom-reports48 {
    display: none !important;
}

.taxicon {
    display: none !important;
}

.payicon {
    display: none !important;
}

.contact-icon {
    display: none !important;
}

.radiusicon {
    display: none !important;
}

.signalicon {
    display: none !important;
}

.accesspointicon {
    display: none !important;
}

.sourceicon {
    display: none !important;
}

.analysis48 {
    display: none !important;
}

.smsicon:not(a) {
    display: none !important;
}

/* Ícones usados como botões de ação (links <a>) - garante que renderizem com tamanho correto no Neo */
a.lionicon,
a.paymenticon,
a.smsicon {
    display: inline-block !important;
    vertical-align: middle;
}

.ssh48 {
    display: none !important;
}

.options48 {
    display: none !important;
}

.accessicon {
    display: none !important;
}

.moneyicon {
    display: none !important;
}

.addressfinancialicon {
    display: none !important;
}

.addressicon {
    display: none !important;
}

.infoicon {
    display: none !important;
}

.help,
.helptext,
.autocomplete_label {
    color: var(--color-input-placeholder-hover);
    font-size: 11px;
}

#titulo_detail > div:nth-child(7) {
    margin: 0 5px !important;
}

/* dialog especifico: detalhes do titulo
   Sem `!important` em width pra permitir resize manual do dialog (jQuery UI
   aplica width via inline style ao redimensionar — !important bloqueava).
   `min-width` garante que o dialog não fique pequeno demais; max-width
   limita ao viewport. */
.ui-dialog[aria-describedby="titulo_detail"] {
    width: 700px;
    min-width: 320px;
    max-width: calc(100vw - 24px) !important;
}

.ui-dialog[aria-describedby="titulo_detail"] .ui-dialog-content,
#titulo_detail.ui-dialog-content {
    height: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

#titulo_detail table,
#titulo_detail tbody,
#titulo_detail tr,
#titulo_detail th,
#titulo_detail td {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.help {
    line-height: 140%;
    word-break: break-all;
    word-wrap: break-word;
}

.fielderror {
    color: var(--color-error);
}

.fielderror p {
    padding: 5px;
}

span.error-message {
    font-weight: 700;
    color: var(--color-error);
}

.formerror,
.formerror ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.formerror_title {
    float: left;
    margin-right: 5px;
    clear: both;
}

.formerror_sub {
    float: left;
}

.add_content_sub p label,
.add_content_sub_no_border p label,
.ui-dialog-content p label {
    width: 150px;
}

/* Endereco/acoes inline no desktop (CEP, LL, FindMe) */
.add_content_sub p.neo-inline-action-row,
.add_content_sub_no_border p.neo-inline-action-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.add_content_sub p.neo-inline-action-row>label,
.add_content_sub_no_border p.neo-inline-action-row>label,
.add_content_sub p.neo-inline-action-row>span.required,
.add_content_sub_no_border p.neo-inline-action-row>span.required {
    flex: 0 0 150px;
    width: 150px !important;
    max-width: 150px;
    margin: 0 !important;
}

.add_content_sub p.neo-inline-action-row>span.required>label,
.add_content_sub_no_border p.neo-inline-action-row>span.required>label {
    width: 100% !important;
    margin: 0 !important;
}

.add_content_sub p.neo-inline-action-row>input[type="text"],
.add_content_sub_no_border p.neo-inline-action-row>input[type="text"],
.add_content_sub p.neo-inline-action-row>select,
.add_content_sub_no_border p.neo-inline-action-row>select {
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
}

.add_content_sub p.neo-inline-action-row>.select2-container,
.add_content_sub_no_border p.neo-inline-action-row>.select2-container,
.add_content_sub p.neo-inline-action-row>.select2-container--classic,
.add_content_sub_no_border p.neo-inline-action-row>.select2-container--classic,
.add_content_sub p.neo-inline-action-row>.select2-container--default,
.add_content_sub_no_border p.neo-inline-action-row>.select2-container--default {
    flex: 1 1 auto;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0;
}

.add_content_sub p.neo-inline-action-row>a.cep_field_search_button,
.add_content_sub p.neo-inline-action-row>a.ll_map_field_search_button,
.add_content_sub p.neo-inline-action-row>a.findme_field_search_button,
.add_content_sub_no_border p.neo-inline-action-row>a.cep_field_search_button,
.add_content_sub_no_border p.neo-inline-action-row>a.ll_map_field_search_button,
.add_content_sub_no_border p.neo-inline-action-row>a.findme_field_search_button {
    flex: 0 0 auto;
    margin: 0 !important;
    position: static !important;
    top: auto !important;
}

/* blocos legados usados em listagens antigas: evita sobreposicao de conteudo com floats */
#box {
    margin: 0;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-default) !important;
    box-shadow: var(--box-shadow-soft) !important;
    color: var(--color-text-secondary);
    background: var(--color-bg) !important;
    font-size: var(--text-size-default) !important;
    padding: 8px;
}

#box::after {
    content: "";
    display: table;
    clear: both;
}

#box+#box {
    margin-top: 6px;
}

div#cadservico {
    margin-top: 15px;
}

/* compat - forms/box tabs legacy */
form.formx,
form.formxm {
    margin: 0;
    padding: 0;
    border: 0;
}

form.formx fieldset,
form.formxm fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

form.formx fieldset p,
form.formxm fieldset p,
.add_content_sub p,
.add_content_sub li,
.add_content_sub_no_border p {
    list-style: none;
    margin: 0 !important;
    padding: 4px 8px;
}

form.formx label,
form.formxm label {
    display: inline-flex;
    color: var(--color-text-primary);
}

form.formx label.error,
form.formxm label.error {
    padding-left: 10px;
    width: auto;
    color: var(--color-error);
    font-weight: 700;
    font-size: var(--text-size-small);
}

.add_title_sub {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
    border-bottom: 0;
    border-radius: var(--radius-default) var(--radius-default) 0 0;
    padding: 8px 12px;
    min-height: 34px;
    display: flex;
    align-items: center;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: var(--box-shadow-soft);
}

.add_title_sub_notificacao {
    background: var(--color-border-primary);
    color: var(--color-text-primary);
    font-size: var(--text-size-md);
}

.add_content_sub,
.add_content_sub_no_border {
    color: var(--color-text-primary);
    margin-bottom: 15px;
    border-radius: var(--radius-default);
    background: var(--color-bg);
    padding: 6px 12px;
    box-shadow: var(--box-shadow-soft);
}

.add_content_sub {
    border: 1px solid var(--color-border-primary);
    border-radius: 0 0 var(--radius-default) var(--radius-default);
    background: var(--color-bg);
    padding: 6px 12px;
}

.add_content_buttons {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    background: var(--color-bg-tertiary);
    margin-bottom: 15px;
    padding: 6px 12px;
    min-height: 30px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow-soft);
}

.add_content_buttons>* {
    flex: 0 0 auto;
    margin: 0;
    min-width: auto;
    max-width: none;
}

.add_content_buttons::after {
    content: none;
}

.add_content_buttons a.excelicon,
.add_content_buttons a.kmlicon,
.add_content_buttons a.printer-blue48,
.add_content_buttons a.email-icon48,
.add_content_buttons a.phone-icon48 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.add_content_buttons a[style*="float: right"] {
    float: none !important;
    margin-left: 0 !important;
}

.add_content_buttons_no_border {
    padding: 8px;
}

/* Helpers para barras de filtro/ações dentro de .add_content_buttons.
   Use .filter-group para agrupar label+select e .bar-actions para botões à direita. */
.add_content_buttons .filter-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.add_content_buttons .filter-group > label {
    margin: 0;
    white-space: nowrap;
}

.add_content_buttons .bar-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.add_content_buttons .bar-actions > .button {
    float: none !important;
    margin: 0 !important;
}

/* Variante: .add_content_buttons.is-filter-form — usada quando o conteúdo é um
   <form> gerado por form_style.html (campos em <p>) seguido de um <h3> sumário. */
.add_content_buttons.is-filter-form > form.formx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.add_content_buttons.is-filter-form > form.formx p,
.add_content_buttons.is-filter-form > form.formx label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.add_content_buttons.is-filter-form > form.formx span.select2-container {
    width: 200px !important;
}

.add_content_buttons.is-filter-form > h3 {
    margin: 0 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

div.button {
    box-shadow: none !important;
    border: none !important;
}

.ui-widget-content .add_content_sub {
    margin: 0 0 15px 0;
}

.add_content_sub .selector-filter label,
.add_content_sub_no_border .selector-filter label {
    display: none !important;
}

.add_content_sub ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.add_content_sub li a:link,
.add_content_sub li a:active,
.add_content_sub li a:visited {
    color: var(--color-text-primary);
    text-decoration: none;
    margin: -1px !important;
}

.add_content_sub li a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):hover,
.add_content_sub a.selected:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button),
.add_content_sub li.selected>a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button) {
    color: var(--color-accent);
    text-decoration: none;
}

.add_content_sub li span {
    color: var(--color-text-secondary);
}

/* compatibilidade com layout legado de relatorios (tema default) */
div.search-report-left {
    width: 49.5%;
    float: left;
}

div.search-report-right {
    width: 49.5%;
    float: right;
}

@media (max-width: 900px) {

    div.search-report-left,
    div.search-report-right {
        width: 100%;
        float: none;
        padding-top: 15px;
    }
}

.basictab {
    padding: 3px 0;
    margin: 0;
    list-style: none;
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
}

.basictab li {
    display: inline;
    margin: 0;
}

.basictab li a {
    text-decoration: none;
    display: inline-block;
    padding: 5px 10px;
    margin-right: 4px;
    border: 1px solid var(--color-border-primary);
    border-bottom: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-weight: 700;
}

.basictab li a:visited,
.basictab li a:active {
    color: var(--color-text-primary);
}

.basictab li a:hover {
    background: var(--color-hover-primary);
    color: var(--color-accent);
}

.basictab li.selected a,
.basictab li.current a,
.basictab li.active a {
    position: relative;
    top: 1px;
    background: var(--color-bg);
    color: var(--color-text-primary);
}

/* tabs jQuery UI - estilo NEO (segmented/shadcn-like) */

/* Previne FOUC (Flash of Unstyled Content): esconde a área das tabs até o
   jQuery UI inicializar e adicionar a classe .ui-tabs em base001.js. Sem isso,
   o navegador exibe brevemente o <ul><li> sem estilo, com badges piscando. */
.tabsui:not(.ui-tabs) {
    visibility: hidden;
}

.tabsui.ui-tabs {
    border: 0 !important;
    background: transparent !important;
    padding: 0;
}

.tabsui.ui-tabs .ui-tabs-nav,
.tabsui > ul {
    padding: 3px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 14px !important;
    background: var(--color-bg-tertiary) !important;
    box-shadow: var(--box-shadow-soft);
    text-align: left !important;
    transition: none !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 15px 0 !important;
}

/* Espaçamento vertical consistente entre o card de info do cliente e a barra de
   tabs. Especificidade #box.box-header é necessária para vencer a regra #box
   (margin: 0) definida acima. */
#box.box-header {
    margin-bottom: 15px;
}

.ui-tabs {
    border: 0 !important;
    background: transparent !important;
    padding: 0;
}

.ui-tabs .ui-tabs-nav {
    padding: 3px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 14px !important;
    background: var(--color-bg-tertiary) !important;
    box-shadow: var(--box-shadow-soft);
    text-align: left !important;
    transition: none !important;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 15px 0 !important;
}

/* Garante margin-bottom no contêiner .tabsui também (para sub-tabs sem JS init,
   onde o <ul> é o último filho e a colapsagem de margens pode "vazar" o espaço
   para fora do parent). */
.tabsui {
    margin-bottom: 15px;
}

.ui-tabs .ui-tabs-nav li {
    float: none !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: nowrap;
    transition: none !important;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 30px;
    padding: 5px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--text-size-md);
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .16s ease-in-out, color .16s ease-in-out;
}

.ui-tabs .ui-tabs-nav li:not(.ui-tabs-active) .ui-tabs-anchor:hover {
    background: var(--color-hover-primary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-active .ui-tabs-anchor {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

.tabsui.ui-tabs .ui-tabs-nav li {
    float: none !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: nowrap;
    transition: none !important;
}

/* Estilo base do anchor da tab.
   Cobre 2 casos: tabbar com jQuery UI init (.ui-tabs-anchor) E tabbar sem JS init
   (apenas HTML estático com class="tabsui", como em cliente_financeiro.html) — assim
   ambas têm exatamente as mesmas dimensões e aparência. */
.tabsui.ui-tabs .ui-tabs-nav .ui-tabs-anchor,
.tabsui > ul > li > a {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 30px !important;
    height: auto !important;
    padding: 5px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--text-size-md) !important;
    font-weight: 600;
    line-height: 1.1 !important;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .16s ease-in-out, color .16s ease-in-out;
}

/* Quando o texto da tab vem dentro de <span> (caso comum no cliente_base.html
   para badges semânticos), garante que o span não estenda font-size/line-height.
   :not(.neo-tab-badge) preserva o padding/altura do badge — caso contrário ele
   ficaria sem o "pílula" característico. */
.tabsui.ui-tabs .ui-tabs-nav .ui-tabs-anchor > span:not(.neo-tab-badge),
.tabsui > ul > li > a > span:not(.neo-tab-badge) {
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
}

.tabsui.ui-tabs .ui-tabs-nav li:not(.ui-tabs-active) .ui-tabs-anchor:hover {
    background: var(--color-hover-primary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

.tabsui.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0 !important;
}

.tabsui.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.tabsui.ui-tabs .ui-tabs-nav li.ui-state-active .ui-tabs-anchor {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    /* borda laranja na tab ativa: identifica seleção sem precisar mudar cor de texto */
    border-color: var(--color-accent) !important;
    /* sombra cinza de elevação + halo laranja sutil que reforça a borda */
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 2px 8px rgba(232, 89, 12, 0.18);
}

.tabsui.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor {
    opacity: .5;
    cursor: not-allowed;
}

.tabsui.ui-tabs .ui-tabs-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Quando o painel da tab também usa .add_content_sub_no_border (forms estilo Neo),
   restaura o bg/padding do conteúdo (sobrepõe a regra genérica acima) */
.tabsui.ui-tabs .ui-tabs-panel.add_content_sub_no_border,
.tabsui.ui-tabs .ui-tabs-panel.add_content_sub {
    background: var(--color-bg) !important;
    padding: 8px 14px !important;
    border-radius: var(--radius-default);
    border: 1px solid var(--color-border-primary) !important;
}

.tabsui.ui-tabs .ui-tabs-panel .neo-tab-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    margin: 10px auto;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--color-border-primary);
    background: rgba(255, 255, 255, 0.72);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}

.tabsui.ui-tabs .ui-tabs-panel .neo-tab-loading .neo-tab-loading-icon {
    color: var(--color-accent);
    animation: neo-spin 900ms linear infinite;
}

.tabsui .neo-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Calibrado para caber dentro da área de conteúdo do anchor (anchor min-height 30 -
       padding vertical 10 = 20px). Antes era 22px, o que esticava o anchor de tabs com
       badge para 32px e desalinhava a tabbar com sub-tabbars sem badge. */
    min-height: 20px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-tab-badge-border);
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
}

.tabsui .neo-tab-badge.neo-tab-badge-danger {
    background: var(--color-tab-badge-danger-bg);
    color: var(--color-tab-badge-danger-text) !important;
}

.tabsui .neo-tab-badge.neo-tab-badge-warning {
    background: var(--color-tab-badge-warning-bg);
    color: var(--color-tab-badge-warning-text) !important;
}

.tabsui .neo-tab-badge.neo-tab-badge-info {
    background: var(--color-tab-badge-info-bg);
    color: var(--color-tab-badge-info-text) !important;
}

.tabsui .neo-tab-badge.neo-tab-badge-note {
    background: var(--color-tab-badge-note-bg);
    color: var(--color-tab-badge-note-text) !important;
}

/* accordion jQuery UI - estilo NEO (moderno, shadcn-like) */
.ui-accordion {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 12px !important;
    background: var(--color-bg) !important;
    overflow: hidden;
    /* sombra de elevação sutil — accordion inteiro flutua como uma unidade,
       headers internos não precisam de sombra própria */
    box-shadow: var(--box-shadow-soft);
}

.ui-accordion .ui-accordion-header {
    margin: 0 !important;
    padding: 9px 40px 9px 14px !important;
    min-height: 36px;
    display: flex;
    align-items: center;
    border: 0 !important;
    border-top: 1px solid var(--color-border-primary) !important;
    border-radius: 0 !important;
    background: var(--color-accordion-header-bg) !important;
    background-image: none !important;
    color: var(--color-text-primary) !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.3;
    text-shadow: none !important;
    box-shadow: none !important;
    position: relative;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ui-accordion .ui-accordion-header:first-of-type {
    border-top: 0 !important;
}

.ui-accordion .ui-accordion-header:hover {
    background: var(--color-accordion-header-bg-hover) !important;
    color: var(--color-text-primary) !important;
}

.ui-accordion .ui-accordion-header.ui-state-active,
.ui-accordion .ui-accordion-header.ui-accordion-header-active {
    background: var(--color-accordion-header-bg-active) !important;
    color: var(--color-text-primary) !important;
    border-top-color: var(--color-border-primary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    font-weight: 700;
}

/* Chevron à direita (substitui o ícone padrão do jQuery UI) */
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    position: absolute !important;
    right: 16px !important;
    left: auto !important;
    top: 50% !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .2s ease, color .2s ease;
    color: var(--color-text-secondary);
}

.ui-accordion .ui-accordion-header .ui-accordion-header-icon::before {
    content: '›';
    font: 700 20px/1 var(--font-family-base);
    color: inherit;
}

.ui-accordion .ui-accordion-header:hover .ui-accordion-header-icon {
    color: var(--color-text-primary);
}

.ui-accordion .ui-accordion-header.ui-accordion-header-active .ui-accordion-header-icon {
    transform: translateY(-50%) rotate(90deg);
    color: var(--color-accent);
}

.ui-accordion .ui-accordion-header .ui-icon {
    opacity: 1;
}

.ui-accordion .ui-accordion-header a {
    color: inherit !important;
    text-decoration: none !important;
}

.ui-accordion .ui-accordion-content {
    border: 0 !important;
    border-top: 1px solid var(--color-border-secondary) !important;
    border-radius: 0 !important;
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    padding: 8px 12px !important;
}

@keyframes neo-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   FullCalendar 6 - estilo NEO (light)
   ======================================== */
.fc {
    color: var(--color-text-primary);
    --fc-border-color: var(--color-border-primary);
    --fc-today-bg-color: rgba(232, 89, 12, 0.06);
    --fc-neutral-bg-color: var(--color-bg-tertiary);
    --fc-page-bg-color: var(--color-bg);
    --fc-event-text-color: var(--color-text-primary-dark);
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 14px !important;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-primary);
    border-radius: 12px;
    gap: 8px;
}

.fc .fc-toolbar-title {
    color: var(--color-text-primary);
    font-size: 16px !important;
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Buttons (estilo pill como nas tabs) */
.fc .fc-button,
.fc button.fc-button,
.fc .fc-button-primary {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    min-height: 32px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

.fc .fc-button:hover,
.fc button.fc-button:hover,
.fc .fc-button-primary:hover {
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-hover-strong) !important;
    color: var(--color-text-primary) !important;
}

.fc .fc-button:focus,
.fc .fc-button-primary:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.18) !important;
}

.fc .fc-button:disabled,
.fc .fc-button-primary:disabled {
    opacity: .5 !important;
    cursor: not-allowed;
}

/* Active / pressed (laranja Neo) */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary[aria-pressed="true"] {
    background: var(--color-accent) !important;
    background-image: none !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
    box-shadow: none !important;
}

.fc .fc-button-primary:not(:disabled).fc-button-active:hover,
.fc .fc-button-primary[aria-pressed="true"]:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

/* Botão "today" usa accent suave para destacar */
.fc .fc-today-button:not(:disabled) {
    background: var(--color-bg-tertiary) !important;
}

/* Button group (junta os botões do toolbar) */
.fc .fc-button-group > .fc-button {
    border-radius: 0 !important;
}

.fc .fc-button-group > .fc-button:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.fc .fc-button-group > .fc-button:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.fc .fc-button-group > .fc-button:not(:last-child) {
    border-right-width: 0 !important;
}

/* Grid e células */
.fc .fc-scrollgrid {
    border-color: var(--color-border-primary) !important;
    border-radius: 10px;
    overflow: hidden;
}

.fc .fc-scrollgrid-section > * {
    border-color: var(--color-border-primary) !important;
}

.fc .fc-col-header-cell {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 8px 4px !important;
    border-color: var(--color-border-primary) !important;
}

.fc .fc-col-header-cell-cushion {
    color: var(--color-text-secondary) !important;
    text-decoration: none !important;
    padding: 4px 6px !important;
}

.fc .fc-daygrid-day-number,
.fc .fc-list-day-text {
    color: var(--color-text-primary);
    font-weight: 600;
    text-decoration: none !important;
    padding: 4px 6px;
}

.fc .fc-daygrid-day.fc-day-today,
.fc .fc-timegrid-col.fc-day-today {
    background: var(--fc-today-bg-color) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: var(--color-accent);
    font-weight: 800;
}

/* FullCalendar v3 — célula do dia atual usa .fc-today (default amarelo claro)
   Sobrescreve com tom laranja translúcido + número em destaque.
   IMPORTANTE: aplicar o bg APENAS na camada .fc-bg — o FC v3 também marca
   .fc-day-top com .fc-today, e bg em ambos faz a opacidade somar onde se
   sobrepõem (resultando em 2 tons visíveis). */
.fc .fc-bg .fc-today,
.fc .fc-day-grid .fc-row .fc-bg td.fc-today {
    background: rgba(232, 89, 12, 0.10) !important;
}

.fc .fc-day-top.fc-today,
.fc .fc-content-skeleton .fc-today {
    background: transparent !important;
}

.fc .fc-today .fc-day-number,
.fc td.fc-today .fc-day-number {
    color: var(--color-accent) !important;
    font-weight: 800 !important;
    background: transparent !important;
}

/* Eventos */
.fc .fc-event,
.fc .fc-daygrid-event,
.fc .fc-timegrid-event {
    border-radius: 6px !important;
    border: 0 !important;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fc .fc-event:hover {
    filter: brightness(0.92);
}

/* FullCalendar v4+: confina eventos dentro da célula */
.fc .fc-daygrid-day-frame {
    position: relative;
    overflow: hidden;
}

.fc .fc-daygrid-day-events {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-primary) transparent;
}

/* FullCalendar v3: as células da semana usam .fc-row com .fc-content-skeleton
   sobreposto (position: absolute). No carregamento inicial as alturas são
   calculadas antes do layout estabilizar e os eventos transbordam pra linha
   seguinte. Forçando overflow: hidden contém o vazamento visual. */
.fc-row.fc-week,
.fc-row.fc-widget-content {
    overflow: hidden !important;
}

.fc-row .fc-content-skeleton {
    overflow: hidden;
}

.fc-row .fc-content-skeleton table {
    width: 100% !important;
}

.fc-day-grid-event,
.fc-h-event {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* link "+more" do FC v3 */
.fc-more,
.fc-more-cell a {
    color: var(--color-accent) !important;
    font-weight: 700;
    text-decoration: none !important;
    padding: 1px 4px;
}

.fc-more:hover,
.fc-more-cell a:hover {
    background: var(--color-hover-primary);
    border-radius: 4px;
}

.fc .fc-daygrid-day-events::-webkit-scrollbar {
    width: 4px;
}

.fc .fc-daygrid-day-events::-webkit-scrollbar-thumb {
    background: var(--color-border-primary);
    border-radius: 2px;
}

.fc .fc-daygrid-day-events::-webkit-scrollbar-track {
    background: transparent;
}

/* "+N more" link gerado pelo FullCalendar quando há eventos demais */
.fc .fc-daygrid-more-link {
    color: var(--color-accent) !important;
    font-weight: 700;
    text-decoration: none !important;
    padding: 1px 4px;
    margin-top: 1px;
    display: inline-block;
}

.fc .fc-daygrid-more-link:hover {
    background: var(--color-hover-primary);
    border-radius: 4px;
}

/* Popover do "+N more": estilo neo */
.fc .fc-popover {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 10px !important;
    background: var(--color-bg) !important;
    box-shadow: var(--box-shadow-default) !important;
    overflow: hidden;
}

.fc .fc-popover-header {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    padding: 8px 10px !important;
    font-weight: 700;
}

.fc .fc-popover-body {
    padding: 6px !important;
}

/* List view */
.fc .fc-list {
    border-color: var(--color-border-primary) !important;
    border-radius: 10px;
    overflow: hidden;
}

.fc .fc-list-day-cushion {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

.fc .fc-list-event:hover td {
    background: var(--color-hover-primary) !important;
}

/* Resource view (timeline) */
.fc .fc-resource-area .fc-datagrid-cell-cushion {
    color: var(--color-text-primary);
    font-weight: 600;
}

.fc .fc-resource-timeline-divider {
    background: var(--color-border-primary) !important;
}

/* Now indicator (linha de "agora") */
.fc .fc-timegrid-now-indicator-line,
.fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--color-accent) !important;
}

@media (max-width: 720px) {
    .fc .fc-toolbar,
    .fc-header-toolbar,
    .fc-toolbar {
        flex-wrap: wrap !important;
        gap: .35rem !important;
    }

    .fc .fc-toolbar .fc-left,
    .fc .fc-toolbar .fc-center,
    .fc .fc-toolbar .fc-right,
    .fc .fc-toolbar-chunk {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: .35rem !important;
        margin: .15rem 0 !important;
    }

    .fc .fc-button-group {
        flex-wrap: wrap !important;
        gap: .3rem !important;
    }

    .fc .fc-button,
    .fc button.fc-button {
        white-space: nowrap !important;
        margin-bottom: .3rem !important;
    }

    .fc .fc-scroller-harness,
    .fc .fc-scroller {
        overflow: visible !important;
    }

    #calendar {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    .add_content_buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
    }

    .add_content_buttons > * {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* cobre variações de inline style com/sem espaço após ':' */
    .add_content_buttons a[style*="float: right"],
    .add_content_buttons a[style*="float:right"] {
        float: none !important;
        margin-left: 0 !important;
    }

    .add_content_buttons .button,
    .add_content_buttons a.button {
        display: inline-flex !important;
        justify-content: center !important;
    }
}

/* ================================================
   AJAX INDICATOR (Global Loading)
   ================================================ */

#ajax-indicator {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;

    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: fit-content !important;
    min-width: 140px;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;

    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(8px);
}

#ajax-indicator[style*="display: block"],
#ajax-indicator[style*="display:block"] {
    display: flex !important;
}

#ajax-indicator .ajax-indicator-icon {
    font-size: 16px !important;
    color: var(--color-accent) !important;
    animation: neo-spin 1s linear infinite !important;
}

#ajax-indicator span {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

@media (max-width: 900px) {
    .tabsui.ui-tabs .ui-tabs-nav {
        border-radius: 12px !important;
        gap: 4px;
        padding: 5px !important;
    }

    .tabsui.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        min-height: 30px;
        padding: 5px 10px !important;
        font-size: 12px;
    }
}

/* tabs do painel admin (tabbed_admin) - estilo NEO */
body.change-form #tabs.ui-tabs {
    border: 0 !important;
    background: transparent !important;
    padding: 0;
    min-width: 0 !important;
}

body.change-form #tabs.ui-tabs>.ui-tabs-nav {
    margin: 0 0 12px 0 !important;
    padding: 5px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 14px !important;
    background: var(--color-bg-tertiary) !important;
    box-shadow: var(--box-shadow-soft);
    text-align: left !important;
}

body.change-form #tabs.ui-tabs>.ui-tabs-nav>li {
    float: none !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: nowrap;
    padding: 0 !important;
}

body.change-form #tabs.ui-tabs>.ui-tabs-nav>li>a.ui-tabs-anchor {
    float: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    text-decoration: none;
}

body.change-form #tabs.ui-tabs>.ui-tabs-nav>li:not(.ui-tabs-active)>a.ui-tabs-anchor:hover {
    background: var(--color-hover-primary) !important;
    color: var(--color-text-primary) !important;
}

body.change-form #tabs.ui-tabs>.ui-tabs-nav>li.ui-tabs-active>a.ui-tabs-anchor,
body.change-form #tabs.ui-tabs>.ui-tabs-nav>li.ui-state-active>a.ui-tabs-anchor {
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08);
}

body.change-form #tabs.ui-tabs>.ui-tabs-nav>li.ui-state-disabled>a.ui-tabs-anchor {
    opacity: .5;
    cursor: not-allowed;
}

body.change-form #tabs.ui-tabs>.ui-tabs-nav>li>a.errortab {
    background: #fee2e2 !important;
    color: #9f1239 !important;
    border-color: #fecaca !important;
}

body.change-form #tabs.ui-tabs>.ui-tabs-panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: var(--radius-default);
}

@media (max-width: 900px) {
    body.change-form #tabs.ui-tabs>.ui-tabs-nav {
        border-radius: 12px !important;
        gap: 4px;
        padding: 5px !important;
    }

    body.change-form #tabs.ui-tabs>.ui-tabs-nav>li>a.ui-tabs-anchor {
        min-height: 30px;
        padding: 5px 10px !important;
        font-size: 12px;
    }
}

.module {
    border-radius: var(--radius-default);
    box-shadow: var(--box-shadow-soft);
    border: 1px solid var(--color-border-primary) !important;
}

.module h2,
.module caption,
.inline-group h2 {
    border-top-left-radius: var(--radius-default);
    border-top-right-radius: var(--radius-default);
    border-bottom: 1px solid var(--color-border-primary) !important;
    background: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
}

.module caption a,
.module h2 a,
.inline-group h2 a,
.module caption a:link,
.module caption a:visited {
    color: var(--color-text-primary-dark) !important;
}

/* compat - django admin forms/changelist */
.hidden,
.hiddenfields,
.empty-form {
    display: none !important;
}

div.field-ide_tpamb,
div.field-ide_serie {
    font-weight: 700;
}

div.field-fat_xmun {
    overflow: visible !important;
    float: left;
}

.form-row {
    overflow: hidden;
    padding: 10px !important;
    font-size: var(--text-size-default);
    border-bottom: 1px solid var(--color-border-secondary);
}

.form-row img,
.form-row input {
    vertical-align: middle;
}

.form-row label input[type="checkbox"] {
    margin-top: 0;
    vertical-align: 0;
}

.checkbox-row p.help,
.checkbox-row div.help {
    margin-left: 0;
    padding-left: 0;
}

form .form-row p {
    padding-left: 0;
}

.required label,
label.required {
    font-weight: 700;
    color: var(--color-text-primary);
}

form ul.radiolist li,
form .aligned ul li {
    list-style: none;
}

form ul.radiolist label,
.aligned ul label {
    float: none;
    display: inline;
    width: auto;
}

form ul.radiolist input[type="radio"] {
    margin: -2px 4px 0 0;
    padding: 0;
}

form ul.inline {
    margin-left: 0;
    padding: 0;
}

form ul.inline li {
    float: left;
    padding-right: 7px;
}

.aligned label {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 0 0;
    float: left;
    width: 160px;
    word-wrap: break-word;
    line-height: 1;
}

.aligned label:not(.vCheckboxLabel):after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 26px;
}

.aligned label+p,
.aligned label+div.help,
.aligned label+div.readonly {
    padding: 6px 0;
    margin: 0 0 0 170px;
}

form .aligned ul {
    margin-left: 160px;
    padding-left: 10px;
}

form .aligned ul.radiolist {
    display: inline-block;
    margin: 0;
    padding: 0;
}

form .aligned p.help,
form .aligned div.help {
    clear: left;
    margin-top: 0;
    margin-left: 160px;
    padding-left: 10px;
}

form .aligned input+p.help,
form .aligned textarea+p.help,
form .aligned select+p.help,
form .aligned input+div.help,
form .aligned textarea+div.help,
form .aligned select+div.help {
    margin-left: 160px;
    padding-left: 10px;
}

.aligned .vCheckboxLabel {
    float: none;
    width: auto;
    display: inline-block;
    vertical-align: -3px;
    padding: 0 0 5px 5px;
}

.colMS .aligned .vLargeTextField,
.colMS .aligned .vXMLLargeTextField {
    width: 350px;
}

.colM .aligned .vLargeTextField,
.colM .aligned .vXMLLargeTextField {
    width: 610px;
}

.colM fieldset.wide .vLargeTextField,
.colM fieldset.wide .vXMLLargeTextField {
    width: 450px;
}

fieldset .field-box,
fieldset .fieldBox {
    float: left;
    margin-right: 20px;
}

.wide label {
    width: 200px;
}

form .wide p,
form .wide input+p.help,
form .wide input+div.help {
    margin-left: 200px;
}

form .wide p.help,
form .wide div.help {
    padding-left: 38px;
}

fieldset.collapsed * {
    display: none;
}

fieldset.collapsed h2,
fieldset.collapsed {
    display: block;
}

fieldset.collapsed {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    overflow: hidden;
}

fieldset.collapsed h2 {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

fieldset .collapse-toggle {
    color: var(--color-text-primary-dark);
}

fieldset.collapsed .collapse-toggle {
    background: transparent;
    display: inline;
    color: var(--color-link-info);
}

.submit-row {
    padding: 12px 14px;
    margin: 0 0 20px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    text-align: right;
    overflow: hidden;
}

body.popup .submit-row {
    overflow: auto;
}

.submit-row input {
    background: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
    border-color: var(--color-accent) !important;
    font-weight: 700 !important;
    height: 35px !important;
    line-height: normal !important;
    margin: 0 0 0 5px !important;
    box-shadow: var(--box-shadow-soft) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.submit-row input:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

.submit-row input.default {
    background: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
    border-color: var(--color-accent) !important;
    font-weight: 700 !important;
    margin: 0 0 0 8px !important;
    text-transform: uppercase;
}

.submit-row input.default:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

.submit-row p.deletelink-box {
    float: left;
    margin: 0;
    display: inline-flex;
}

.submit-row a.deletelink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: 4px;
    padding: 0 15px;
    min-height: 35px;
    line-height: 1;
    color: var(--color-text-primary-dark);
    font-weight: 700 !important;
    transition: background-color .15s ease, border-color .15s ease;
}

#planodetalhe_form>div>div.submit-row>p>a:hover {
    color: var(--color-text-primary-dark) !important;
    opacity: 0.9;
}

.submit-row a.deletelink:focus,
.submit-row a.deletelink:hover,
.submit-row a.deletelink:active {
    background: var(--color-brand-danger-hover);
    border-color: var(--color-brand-danger-hover);
    color: var(--color-text-primary-dark) !important;
}

.vSelectMultipleField {
    vertical-align: top;
}

.vCheckboxField {
    border: none;
}

.vDateField,
.vTimeField {
    margin-right: 2px;
    margin-bottom: 4px;
    min-width: 4.7em;
}

.vDateField {
    min-width: 6.85em;
}

.vURLField {
    width: 30em;
}

.vLargeTextField,
.vXMLLargeTextField {
    width: 48em;
}

.flatpages-flatpage #id_content {
    height: 40.2em;
}

.vTextField {
    width: 20em;
}

.vIntegerField,
.vForeignKeyRawIdAdminField {
    width: 5em;
}

.vBigIntegerField {
    width: 10em;
}

.module table .vPositiveSmallIntegerField {
    width: 2.2em;
}

.inline-group {
    padding: 0;
    margin: 0 0 30px;
}

.inline-related {
    position: relative;
}

.inline-related h3 {
    margin: 0;
    color: var(--color-text-secondary);
    padding: 5px;
    font-size: var(--text-size-default);
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
}

.inline-related h3 span.delete {
    float: right;
}

.inline-related h3 span.delete label {
    margin-left: 2px;
    font-size: 11px;
}

.inline-group div.add-row,
.inline-group .tabular tr.add-row td {
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-default);
}

.last-related fieldset,
.inline-group .tabular fieldset.module {
    border: none;
}

.inline-group .tabular tr.has_original td {
    padding-top: 2em;
}

.inline-group .tabular tr td.original {
    padding: 2px 0 0 0;
    width: 0;
}

.inline-group .tabular th.original {
    width: 0;
    padding: 0;
}

.inline-group .tabular td.original p {
    position: absolute;
    left: 0;
    height: 1.4em;
    padding: 2px 9px;
    overflow: hidden;
    font-size: var(--text-size-xs);
    font-weight: 700;
    color: var(--color-text-secondary);
}

.inline-group ul.tools {
    padding: 0;
    margin: 0;
    list-style: none;
}

.inline-group ul.tools li {
    display: inline;
    padding: 0 5px;
}

.inline-group ul.tools a.add,
.inline-group div.add-row a,
.inline-group .tabular tr.add-row td a {
    background: url('/static/admin/img/icon-addlink.svg') 0 1px no-repeat;
    padding-left: 16px;
    font-size: var(--text-size-small);
}

fieldset.monospace textarea {
    font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
}

.add-another,
.related-lookup {
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 14px;
}

.add-another {
    width: 16px;
    height: 16px;
    background-image: url('/static/admin/img/icon-addlink.svg');
}

.related-lookup {
    width: 16px;
    height: 16px;
    background-image: url('/static/admin/img/search.svg');
}

.related-widget-wrapper ul {
    display: inline-block;
    margin-left: 0;
    padding-left: 0;
}

.clearable-file-input input {
    margin-top: 0;
}

#changelist {
    position: relative;
    width: 100%;
}

#changelist table {
    width: 100%;
}

#changelist table thead th.action-checkbox-column {
    width: 1.5em;
    text-align: center;
}

#changelist table tbody td.action-checkbox {
    text-align: center;
}

#changelist-form .results {
    overflow-x: auto;
}

.change-list .filtered {
    min-height: 400px;
}

.change-list .filtered .results,
.change-list .filtered .paginator,
.filtered #toolbar,
.filtered div.xfull {
    margin-right: 180px;
    width: auto;
}

#changelist #toolbar {
    padding: 8px 10px;
    margin-bottom: 15px;
    border-top: 1px solid var(--color-border-secondary);
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

#changelist #toolbar form #searchbar {
    height: 19px;
    border: 1px solid var(--color-border-primary);
    padding: 2px 5px;
    margin: 0;
    vertical-align: top;
    font-size: var(--text-size-default);
}

#changelist #toolbar form #searchbar:focus {
    border-color: var(--color-border-focus);
}

#changelist #changelist-search img {
    vertical-align: middle;
    margin-right: 4px;
}

#changelist-filter {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 600;
    width: 180px;
    background: var(--color-bg-tertiary);
    margin: 0;
}

#changelist-filter ul {
    margin: 5px 0;
    padding: 0 15px 15px;
    border-bottom: 1px solid var(--color-border-secondary);
}

#changelist-filter li {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

#changelist-filter a {
    display: block;
    color: var(--color-text-secondary);
    text-overflow: ellipsis;
    overflow-x: hidden;
}

#changelist-filter li.selected {
    border-left: 5px solid var(--color-border-primary);
    padding-left: 10px;
    margin-left: -15px;
}

#changelist-filter li.selected a,
#changelist-filter a:focus,
#changelist-filter a:hover {
    color: var(--color-link-info-hover);
}

.change-list ul.toplinks {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    width: 100%;
}

.change-list ul.toplinks li {
    padding: 3px 6px;
    font-weight: 700;
    list-style-type: none;
    display: inline-block;
}

.change-list ul.toplinks .date-back a {
    color: var(--color-text-secondary);
}

.change-list ul.toplinks .date-back a:focus,
.change-list ul.toplinks .date-back a:hover {
    color: var(--color-link-info-hover);
}

.paginator {
    font-size: var(--text-size-default);
    padding: 10px 0;
    line-height: 22px;
    margin: 0;
    border-top: 1px solid var(--color-border-primary);
}

.paginator a:link,
.paginator a:visited {
    padding: 2px 6px;
    background: var(--color-link-info);
    text-decoration: none;
    color: var(--color-text-primary-dark);
}

.paginator a:focus,
.paginator a:hover {
    background: var(--color-link-info-hover);
}

.paginator .this-page {
    padding: 2px 6px;
    font-weight: 700;
    font-size: var(--text-size-default);
    vertical-align: top;
}

.paginator .end {
    margin-right: 6px;
}

.paginator a.showall {
    padding: 0;
    border: none;
    background: none;
    color: var(--color-link-info);
}

.paginator a.showall:focus,
.paginator a.showall:hover {
    background: none;
    color: var(--color-link-info-hover);
}

#changelist .actions {
    padding: 10px;
    background: var(--color-bg);
    line-height: 24px;
    color: var(--color-text-secondary);
}

#changelist .actions.selected {
    background: #fff8d4;
    border-top: 1px solid #fff1b5;
    border-bottom: 1px solid #f0e5b8;
}

#changelist .actions span.all,
#changelist .actions span.action-counter,
#changelist .actions span.clear,
#changelist .actions span.question {
    font-size: var(--text-size-default);
    margin: 0 .5em;
}

#changelist .actions label {
    display: inline-block;
    vertical-align: middle;
    font-size: var(--text-size-default);
}

#changelist .actions .button {
    font-size: var(--text-size-default);
    border: 1px solid var(--color-border-primary);
    border-radius: 4px;
    background: var(--color-bg);
    cursor: pointer;
    height: 24px;
    line-height: 1;
    padding: 4px 8px;
    margin: 0;
    color: var(--color-text-primary);
}

#changelist .actions .button:focus,
#changelist .actions .button:hover {
    border-color: var(--color-border-focus);
    background: var(--color-hover-primary);
}

/* changelist django admin - polimento NEO */
body.change-list #content-main {
    padding: 8px 14px;
}

/* object-tools do django admin (change-form e change-list) */
#content-main>ul.object-tools,
body.change-list #content-main>.object-tools {
    list-style: none;
    margin: 0 0 12px !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    float: none !important;
    position: static !important;
    clear: both;
    z-index: 3;
}

#content-main>ul.object-tools>li,
body.change-list #content-main>.object-tools li {
    margin: 0;
    padding: 0;
    float: none !important;
    height: auto !important;
}

#content-main>ul.object-tools>li>a,
#content-main>ul.object-tools>li>a:link,
#content-main>ul.object-tools>li>a:visited,
body.change-list #content-main>.object-tools a,
body.change-list #content-main>.object-tools a:link,
body.change-list #content-main>.object-tools a:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px !important;
    border-radius: 999px;
    border: 1px solid var(--color-border-primary) !important;
    background: linear-gradient(180deg, var(--color-bg), var(--color-bg-tertiary)) !important;
    color: var(--color-text-primary) !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: var(--text-size-xs);
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--box-shadow-soft) !important;
    float: none !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

#content-main>ul.object-tools>li>a:hover,
#content-main>ul.object-tools>li>a:focus,
body.change-list #content-main>.object-tools a:hover,
body.change-list #content-main>.object-tools a:focus {
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-focus) !important;
    color: var(--color-text-primary) !important;
    transform: translateY(-1px);
}

#content-main>ul.object-tools>li>a:active,
body.change-list #content-main>.object-tools a:active {
    transform: translateY(0);
}

body.change-list #changelist {
    border: 1px solid var(--color-border-primary);
    border-radius: 12px;
    background: var(--color-bg);
    box-shadow: var(--box-shadow-soft);
    padding: 10px;
}

body.change-list #changelist.filtered {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 184px;
    gap: 10px;
    align-items: start;
}

body.change-list #changelist.filtered>#toolbar,
body.change-list #changelist.filtered>form#changelist-form,
body.change-list #changelist.filtered>.actions,
body.change-list #changelist.filtered>.paginator,
body.change-list #changelist.filtered>.xfull {
    grid-column: 1;
}

body.change-list #changelist.filtered>#changelist-filter {
    grid-column: 2;
    grid-row: 1 / span 12;
    position: static;
    width: auto;
    margin: 0;
    margin-bottom: 10px;
    align-self: stretch;
    min-height: 100%;
}

body.change-list #changelist.filtered .results,
body.change-list #changelist.filtered .paginator,
body.change-list #changelist.filtered #toolbar,
body.change-list #changelist.filtered div.xfull,
body.change-list #changelist.filtered .actions {
    margin-right: 0 !important;
}

body.change-list #changelist #toolbar {
    border: 1px solid var(--color-border-primary);
    border-radius: 10px;
    margin-bottom: 10px;
}

body.change-list #changelist #toolbar form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.change-list #changelist #toolbar form #searchbar {
    min-height: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 8px;
}

body.change-list #changelist #toolbar form input[type="submit"] {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-weight: 600;
    cursor: pointer;
}

body.change-list #changelist #toolbar form input[type="submit"]:hover {
    background: var(--color-hover-primary);
    border-color: var(--color-border-focus);
}

body.change-list #changelist .results {
    border: 1px solid var(--color-border-secondary);
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-bg);
}

body.change-list #changelist table#result_list thead th {
    background: var(--color-bg-tertiary);
    border-bottom: 1px solid var(--color-border-primary);
    padding: 8px 10px;
}

body.change-list #changelist table#result_list tbody td,
body.change-list #changelist table#result_list tbody th {
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-secondary);
    /* Permite quebra de strings longas (JSON, IDs com 50+ chars sem espaços, URLs)
       para que o conteúdo nunca estoure a largura visível da página. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Conteúdo formatado (JSON, código, mensagens) dentro de células do changelist:
   preserva indentação/newlines mas força quebra quando a linha excede a largura
   da célula. Resolve casos como webhooknotification onde o JSON tem strings de
   100+ chars sem espaço (ex: chaves base64, barcodes, external_ids). */
body.change-list #changelist table#result_list tbody td pre,
body.change-list #changelist table#result_list tbody td code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin: 0;
    max-width: 100%;
}

body.change-list #changelist table#result_list tbody tr:last-child td,
body.change-list #changelist table#result_list tbody tr:last-child th {
    border-bottom: 0;
}

body.change-list #changelist table#result_list tbody tr:hover td,
body.change-list #changelist table#result_list tbody tr:hover th {
    background: var(--color-bg-tertiary);
}

body.change-list #changelist table tbody tr.selected {
    background: #fff5d8;
}

body.change-list #changelist .actions {
    border: 1px solid var(--color-border-secondary);
    border-radius: 10px;
    margin-top: 10px;
    background: var(--color-bg-tertiary);
}

body.change-list #changelist .actions select {
    min-height: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg);
    color: var(--color-text-primary);
    padding: 0 8px;
}

body.change-list #changelist .paginator {
    border-top: 0;
    margin-top: 10px;
    padding-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--color-text-secondary);
}

body.change-list #changelist .paginator a:link,
body.change-list #changelist .paginator a:visited,
body.change-list #changelist .paginator .this-page {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1.5px solid var(--color-border-primary);
    background: transparent;
    color: var(--color-brand-gray);
    margin-bottom: 15px;
    padding: 8px 10px;
    line-height: 1;
    text-decoration: none;
    padding: 0;
}

body.change-list #changelist .paginator a:focus,
body.change-list #changelist .paginator a:hover {
    background: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
}

body.change-list #changelist .paginator .this-page {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text-primary-dark);
}

body.change-list #changelist .paginator a.end,
body.change-list #changelist .paginator a.showall {
    width: auto;
    min-width: 30px;
    padding: 0 10px;
}

body.change-list #changelist .paginator a.showall,
body.change-list #changelist .paginator a.showall:link,
body.change-list #changelist .paginator a.showall:visited {
    background: transparent;
    border: 1.5px solid var(--color-border-primary);
    color: var(--color-text-secondary);
}

body.change-list #changelist .paginator a.showall:focus,
body.change-list #changelist .paginator a.showall:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

body.change-list #changelist-filter {
    border: 1px solid var(--color-border-primary);
    border-radius: 10px;
    background: var(--color-bg);
}

body.change-list #changelist-filter h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-text-primary-dark);
    margin: 0 0 8px;
    padding: 6px 12px;
}

body.change-list #changelist-filter h3 {
    font-size: 12px;
    color: var(--color-text-primary);
    margin: 0 0 6px;
    padding: 0 12px;
    font-weight: 700;
}

@media (max-width: 1024px) {

    body.change-list .filtered .results,
    body.change-list .filtered .paginator,
    body.change-list .filtered #toolbar,
    body.change-list .filtered div.xfull {
        margin-right: 0;
    }

    body.change-list #changelist.filtered {
        display: block;
    }

    body.change-list #changelist-filter {
        position: static;
        width: auto;
        margin-top: 10px;
    }

    ul.sf-menu>li {
        min-width: 108px;
        width: 100%;
    }

}

/* table */
.tablex,
.tablex2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-default);
    overflow: hidden;
}

.tablex {
    font-size: var(--text-size-md);
}

.tablex2 {
    font-size: var(--text-size-sm);
}

.tablex th,
.tablex2 th {
    font-size: var(--text-size-small);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border-primary);
    text-align: left;
}

.tablex td,
.tablex2 td {
    border-bottom: 1px solid var(--color-border-secondary);
    padding: 8px 10px;
    color: var(--color-text-primary);
}

.tablex td a,
.tablex td a:visited,
.tablex2 td a,
.tablex2 td a:visited,
.tablex th a,
.tablex2 th a {
    text-decoration: none;
    color: inherit;
}

.tablex tr:hover,
.tablex2 tr:hover {
    background-color: var(--color-hover-primary);
}

.tablewrap td {
    word-break: break-all;
    word-wrap: break-word;
}

.display td>span.sort {
    display: none !important;
}

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
    background-color: transparent !important;
}

/* dialogs */
.ui-dialog {
    position: absolute;
    padding: 0;
    overflow: hidden;
    text-align: left;
    z-index: 603 !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    box-shadow: var(--box-shadow-default);
}

.ui-widget-overlay {
    z-index: 602 !important;
    background: var(--color-dialog-overlay);
}

.dialog_yellow .ui-dialog-titlebar {
    background: var(--color-dialog-warning) !important;
}

.ui-dialog-titlebar .ui-button-text {
    display: none !important;
}

/* booksmark - overlay de favoritos: combina com o header escuro */
#booksmark-backdrop {
    background: var(--color-dialog-overlay) !important;
    opacity: 1 !important;
}

#booksmark-wrap {
    background: var(--color-primary) !important;
    border-left: 1px solid var(--color-white-alpha-08);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}

#booksmark-content p,
#booksmark-content ul {
    color: var(--color-text-primary-dark) !important;
}

#booksmark-content h3 {
    color: var(--color-text-secondary-dark) !important;
    font-size: var(--text-size-lg) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#booksmark-content li {
    border-bottom: 1px solid var(--color-white-alpha-08);
    color: var(--color-text-primary-dark);
}

#booksmark-content li:hover {
    color: var(--color-accent) !important;
}

#booksmark-content .group i,
#booksmark-content .item i {
    color: var(--color-text-secondary-dark) !important;
}

#booksmark-content li:hover .group i,
#booksmark-content li:hover .item i {
    color: var(--color-accent) !important;
}

/* tags, badges e status */
.tag {
    border: 1px solid var(--color-tag-border);
    border-radius: .2em;
    padding: .3em 1em;
    text-shadow: var(--box-shadow-text-strong);
    font-weight: 700;
    font-size: 10px;
    box-shadow: var(--box-shadow-tag-inset);
    text-transform: uppercase;
    cursor: default;
}

.tag a {
    text-decoration: none !important;
    font-size: 11px !important;
}

.badge {
    border: 1px solid var(--color-badge-border);
    height: auto !important;
    padding: 1px 3px;
    border-radius: 3px;
    text-decoration: none !important;
}

.badge_1,
.badge_1 a {
    background-color: var(--color-badge-success);
    color: var(--color-text-primary-dark);
}

.badge_2,
.badge_2 a {
    background-color: var(--color-badge-warning);
    color: var(--color-text-primary-dark);
}

.badge_3,
.badge_3 a {
    background-color: var(--color-badge-neutral);
    color: var(--color-text-primary-dark);
}

.badge_4,
.badge_4 a {
    background-color: var(--color-badge-accent);
    color: var(--color-text-primary-dark);
}

.badge_7,
.badge_7 a {
    background-color: var(--color-status-danger-soft);
    color: var(--color-text-primary-dark);
}

.texto-status-ativo,
.texto-status-ativo a:not(.button, .buttonsm, .buttonxs, .buttonxss) {
    color: var(--color-badge-success) !important;
}

.texto-status-ativored,
.texto-status-ativored a:not(.button, .buttonsm, .buttonxs, .buttonxss) {
    color: var(--color-status-danger-soft) !important;
}

.texto-status-inativo,
.texto-status-inativo a:not(.button, .buttonsm, .buttonxs, .buttonxss) {
    color: var(--color-badge-warning) !important;
}

.texto-status-suspenso,
.texto-status-suspenso a:not(.button, .buttonsm, .buttonxs, .buttonxss) {
    color: var(--color-status-suspended) !important;
}

.texto-status-cancelado,
.texto-status-cancelado a:not(.button, .buttonsm, .buttonxs, .buttonxss) {
    color: var(--color-badge-neutral) !important;
}

/* Contrato com cobrança unificada a outro contrato: texto/linhas em verde
   azulado (teal). Usa --color-contrato-unificado, que o tema neo-dark
   sobrescreve para um teal mais claro legível em fundo escuro.

   Mira o td diretamente (e não só a tr) porque as células do datatable têm
   color próprio definido em "div.dataTables_wrapper ... tbody td", e herança
   da tr não vence uma declaração direta na célula. O !important supera essa
   regra. Texto simples e <strong>/<span> sem cor própria herdam a cor do td;
   badges e botões mantêm suas cores por terem declaração de color própria. */
.contrato-unificado td,
.contrato-unificado a:not(.button, .buttonsm, .buttonxs, .buttonxss) {
    color: var(--color-contrato-unificado) !important;
}

.circle {
    min-width: 24px;
    height: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-align: center;
    border: 0;
    font-size: 9px !important;
    font-weight: 700;
    background-color: var(--color-badge-success);
    color: var(--color-text-primary-dark);
    text-shadow: none;
    float: right;
    position: relative;
    right: -5px;
    top: -4px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0 7px;
}

#headertop-right>ul>li>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#headertop-right .circle {
    background-color: var(--color-badge-success);
    color: var(--color-text-primary-dark);
    float: none;
    position: static;
    right: auto;
    top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    #headertop-right .circle,
    #header-right .circle {
        width: 1.75em;
        min-width: 1.75em;
        height: 1.75em;
        line-height: 1.75em;
        padding: 0;
        border-radius: 50%;
        box-sizing: border-box;
        overflow: hidden;
        flex: 0 0 1.75em;
    }
}

div.div_print_icons {
    margin-bottom: 15px !important;
}

/* helpers */
.clear {
    clear: both;
}

.invisible {
    visibility: hidden;
}

.separator {
    height: 5px;
    border: 0;
    margin: 0;
    padding: 0;
}

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.link-no-decoration a {
    text-decoration: none;
}

.link-no-decoration a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):hover {
    text-decoration: underline;
}

.strong,
.tbold,
.ablack {
    font-weight: 700;
    color: var(--color-text-primary);
}

.blue_bold {
    font-weight: 700;
    color: var(--color-info);
}

.red_bold {
    font-weight: 700;
    color: var(--color-error);
}

.ss_bold1 {
    font-weight: 700;
    color: var(--color-info);
}

.ss_bold2 {
    font-weight: 700;
    color: var(--color-warning);
}

.ss_bold3 {
    font-weight: 700;
    color: var(--color-text-secondary);
}

.ss_bold4 {
    font-weight: 700;
    color: var(--color-status-danger-soft);
}

.invert {
    color: var(--color-error);
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

#status_block {
    margin: 0 auto .5em auto;
    padding: 15px 10px 15px 55px;
    background: var(--color-hover-primary);
    border: 1px solid var(--color-status-block-border);
    width: 450px;
    font-size: var(--text-size-lg);
    font-weight: 700;
}

.toast {
    opacity: 1 !important;
}

/* notification/user online/feeds - compat legacy */
ul.notification_list,
ul.useronline_list,
ul.ocfeed_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.notification_list li,
ul.useronline_list li {
    border-bottom: 1px solid var(--color-border-primary);
    text-align: left;
}

ul.notification_list li:last-child,
ul.useronline_list li:last-child {
    border-bottom: 0;
}

ul.notification_list li.read {
    color: var(--color-text-secondary);
}

ul.notification_list li.unread {
    font-weight: 700;
    background-color: #eaffea;
}

ul.notification_list li.read:hover,
ul.notification_list li.unread:hover,
ul.useronline_list li.offline:hover,
ul.useronline_list li.online:hover {
    background-color: var(--color-hover-primary);
}

ul.notification_list li .row,
ul.useronline_list li .row,
ul.ocfeed_list li .row {
    display: flex;
    align-items: center;
}

ul.notification_list li .row {
    padding: 10px 5px 0 5px;
}

ul.useronline_list li .row,
ul.ocfeed_list li .row {
    padding: 5px;
}

ul.notification_list li .column1,
ul.useronline_list li .column1,
ul.ocfeed_list li .column1 {
    flex: 0;
}

ul.notification_list li .column2,
ul.ocfeed_list li .column2 {
    padding-left: 5px;
    flex: 100%;
}

ul.useronline_list li .column2 {
    padding-left: 5px;
    flex: 88%;
}

ul.useronline_list li .column2 p {
    margin: 0;
    line-height: 1.4;
}

ul.notification_list li .footer {
    clear: both;
    text-align: right;
    padding: 5px 7px 5px 0;
}

ul.useronline_list li.offline {
    color: #aaa;
}

ul.useronline_list li.online {
    font-weight: 700;
}

ul.useronline_list li.online .column1 {
    color: #31c550;
}

ul.useronline_list li.online .answerer {
    color: var(--color-error);
}

ul.useronline_list li.online .superuser {
    color: var(--color-info);
}

ul.useronline_list li .column2 i {
    font-size: var(--text-size-sm) !important;
}

.notification_unread_counter {
    color: #ff6246;
}

ul.ocfeed_list {
    background: #fff0c9;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    padding: 10px;
}

ul.ocfeed_list li {
    text-align: left;
}

ul.ocfeed_list li.expand {
    display: none;
}

/* datatables (legacy + jquery ui) */
.tablelist {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border-secondary);
    border-radius: 12px;
    overflow: hidden;
    /* sombra de elevação alinhada às tabelas DataTable */
    box-shadow: var(--box-shadow-medium);
}

.tablelist thead th {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-border-primary);
}

.tablelist tbody td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border-secondary);
    color: var(--color-text-primary);
    line-height: 1.3;
}

.tablelist tbody tr:last-child td {
    border-bottom: 0;
}

.tablelist tbody tr:hover {
    background-color: var(--color-bg-tertiary);
}

/* report tables - datatables classes customizadas do sistema */
div.dataTables_wrapper table.display,
div.dataTables_wrapper table.dataTable,
div.dataTables_wrapper table[class*="tablelist"],
div.dataTables_wrapper table[class*="list"],
div.dataTables_wrapper table.nfs,
div.dataTables_wrapper table.agendamentos,
div.dataTables_wrapper table.detalhestatus {
    box-sizing: border-box;
    width: max-content !important;
    min-width: 100% !important;
    max-width: 100%;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-default);
    background: var(--color-bg);
    /* sombra de elevação média: tabela "flutua" sobre o fundo cinza --color-bg-secondary */
    box-shadow: var(--box-shadow-medium);
    overflow: hidden;
}

div.dataTables_wrapper table.display thead th,
div.dataTables_wrapper table.dataTable thead th,
div.dataTables_wrapper table.display thead td,
div.dataTables_wrapper table.dataTable thead td,
div.dataTables_wrapper table.display thead th.ui-state-default,
div.dataTables_wrapper table.dataTable thead th.ui-state-default,
div.dataTables_wrapper table.display thead th.sorting,
div.dataTables_wrapper table.display thead th.sorting_asc,
div.dataTables_wrapper table.display thead th.sorting_desc,
div.dataTables_wrapper table.display thead th.sorting_disabled {
    background: var(--color-bg) !important;
    color: var(--color-text-secondary) !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid var(--color-border-primary) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 8px !important;
    line-height: 1.2 !important;
    text-align: left;
}

div.dataTables_wrapper table.display thead th:last-child,
div.dataTables_wrapper table.dataTable thead th:last-child {
    border-right: 0 !important;
}

div.dataTables_wrapper table.display tbody td,
div.dataTables_wrapper table.dataTable tbody td,
div.dataTables_wrapper table.display tbody th,
div.dataTables_wrapper table.dataTable tbody th {
    padding: 4px 8px !important;
    line-height: 1.3 !important;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    font-size: var(--text-size-default) !important;
    white-space: nowrap;
}

div.dataTables_wrapper table.display tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):not(.edit):not(.remove):not(.fas),
div.dataTables_wrapper table.dataTable tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):not(.edit):not(.remove):not(.fas),
div.dataTables_wrapper table[class*="tablelist"] tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):not(.edit):not(.remove):not(.fas),
div.dataTables_wrapper table[class*="list"] tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):not(.edit):not(.remove):not(.fas) {
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: currentColor;
}

div.dataTables_wrapper table.display tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):hover,
div.dataTables_wrapper table.dataTable tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):hover,
div.dataTables_wrapper table[class*="tablelist"] tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):hover,
div.dataTables_wrapper table[class*="list"] tbody td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):hover {
    text-decoration-color: var(--color-accent);
    color: var(--color-accent) !important;
}

div.dataTables_wrapper table.display tbody tr:last-child td,
div.dataTables_wrapper table.dataTable tbody tr:last-child td,
div.dataTables_wrapper table.display tbody tr:last-child th,
div.dataTables_wrapper table.dataTable tbody tr:last-child th {
    border-bottom: 0 !important;
}

div.dataTables_wrapper table.display tbody tr.even,
div.dataTables_wrapper table.dataTable tbody tr.even,
div.dataTables_wrapper table.display tbody tr.even td,
div.dataTables_wrapper table.dataTable tbody tr.even td {
    background-color: var(--color-bg-secondary) !important;
}

div.dataTables_wrapper table.display tbody tr.odd,
div.dataTables_wrapper table.dataTable tbody tr.odd,
div.dataTables_wrapper table.display tbody tr.odd td,
div.dataTables_wrapper table.dataTable tbody tr.odd td {
    background-color: var(--color-bg) !important;
}

div.dataTables_wrapper table.display tbody tr:hover td,
div.dataTables_wrapper table.dataTable tbody tr:hover td,
div.dataTables_wrapper table.display tbody tr:hover th,
div.dataTables_wrapper table.dataTable tbody tr:hover th {
    background-color: var(--color-hover-primary, #ebebeb) !important;
}

/* compactar controles dentro das celulas (select/input/button) para nao
   esticar a altura da linha */
div.dataTables_wrapper table.display tbody td input:not([type="checkbox"]):not([type="radio"]),
div.dataTables_wrapper table.dataTable tbody td input:not([type="checkbox"]):not([type="radio"]),
div.dataTables_wrapper table.display tbody td select,
div.dataTables_wrapper table.dataTable tbody td select,
div.dataTables_wrapper table.display tbody td textarea,
div.dataTables_wrapper table.dataTable tbody td textarea,
div.dataTables_wrapper table.display tbody td button:not(.button):not(.buttonsm),
div.dataTables_wrapper table.dataTable tbody td button:not(.button):not(.buttonsm) {
    min-height: 0 !important;
    height: 22px !important;
    padding: 1px 6px !important;
    line-height: 1.2 !important;
    font-size: 12px !important;
}

/* Grades de status (compatibilidade com tema default) */
table.display tbody tr.odd.gradeA,
table.dataTable.display tbody tr.odd.gradeA,
tr.gradeA {
    background-color: #e8f7ea !important;
}

table.display tbody tr.even.gradeA,
table.dataTable.display tbody tr.even.gradeA {
    background-color: #def3e1 !important;
}

table.display tbody tr.odd.gradeD,
table.dataTable.display tbody tr.odd.gradeD,
tr.gradeD {
    background-color: #e9eef6 !important;
}

table.display tbody tr.even.gradeD,
table.dataTable.display tbody tr.even.gradeD {
    background-color: #dfe7f2 !important;
}

table.display tbody tr.odd.gradeX,
table.dataTable.display tbody tr.odd.gradeX,
tr.gradeX {
    background-color: #fdecec !important;
}

table.display tbody tr.even.gradeX,
table.dataTable.display tbody tr.even.gradeX {
    background-color: #fbe2e2 !important;
}

table.display tbody tr.odd.gradeY,
table.dataTable.display tbody tr.odd.gradeY,
tr.gradeY {
    background-color: #fff3e2 !important;
}

table.display tbody tr.even.gradeY,
table.dataTable.display tbody tr.even.gradeY {
    background-color: #ffe9cf !important;
}

table.display tbody tr.odd.gradeB,
table.dataTable.display tbody tr.odd.gradeB,
tr.gradeB {
    background-color: #f9f3d9 !important;
}

table.display tbody tr.even.gradeB,
table.dataTable.display tbody tr.even.gradeB {
    background-color: #f3eabf !important;
}

table.display tbody tr.odd.gradeC,
table.dataTable.display tbody tr.odd.gradeC,
tr.gradeC {
    background-color: #e6f3ff !important;
}

table.display tbody tr.even.gradeC,
table.dataTable.display tbody tr.even.gradeC {
    background-color: #d8ebff !important;
}

table.display tbody tr.odd.gradeU,
table.dataTable.display tbody tr.odd.gradeU,
tr.gradeU {
    background-color: #f5efdc !important;
}

table.display tbody tr.even.gradeU,
table.dataTable.display tbody tr.even.gradeU {
    background-color: #efe5ca !important;
}

table.display tbody tr.odd.gradeZ,
table.dataTable.display tbody tr.odd.gradeZ,
tr.gradeZ {
    background-color: #f0e9f8 !important;
}

table.display tbody tr.even.gradeZ,
table.dataTable.display tbody tr.even.gradeZ {
    background-color: #e7dcf5 !important;
}

table.display tbody tr[class*="grade"] > td,
table.display tbody tr[class*="grade"] > th,
table.dataTable.display tbody tr[class*="grade"] > td,
table.dataTable.display tbody tr[class*="grade"] > th,
div.dataTables_wrapper table.display tbody tr[class*="grade"] > td,
div.dataTables_wrapper table.display tbody tr[class*="grade"] > th,
div.dataTables_wrapper table.dataTable tbody tr[class*="grade"] > td,
div.dataTables_wrapper table.dataTable tbody tr[class*="grade"] > th {
    /* usa background-color (não shorthand) para herdar a cor da linha
       sem zerar o background-image (ex.: logos de portador em .bank###) */
    background-color: inherit !important;
}

div.dataTables_wrapper table.display thead th .DataTables_sort_wrapper,
div.dataTables_wrapper table.dataTable thead th .DataTables_sort_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-height: 16px;
    white-space: nowrap;
    padding-right: 0 !important;
}

div.dataTables_wrapper table.display thead th .DataTables_sort_icon,
div.dataTables_wrapper table.dataTable thead th .DataTables_sort_icon {
    float: none !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    margin: 0 0 0 6px !important;
    flex: 0 0 16px;
    opacity: .35;
    transition: opacity .15s ease;
}

div.dataTables_wrapper table.display thead th:hover .DataTables_sort_icon,
div.dataTables_wrapper table.dataTable thead th:hover .DataTables_sort_icon {
    opacity: .7;
}

div.dataTables_wrapper table.display thead th.sorting_asc .DataTables_sort_icon,
div.dataTables_wrapper table.dataTable thead th.sorting_asc .DataTables_sort_icon,
div.dataTables_wrapper table.display thead th.sorting_desc .DataTables_sort_icon,
div.dataTables_wrapper table.dataTable thead th.sorting_desc .DataTables_sort_icon {
    opacity: 1;
}

div.dataTables_wrapper table.display thead th .DataTables_sort_icon.css_right,
div.dataTables_wrapper table.dataTable thead th .DataTables_sort_icon.css_right {
    float: none !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
    margin-left: 6px !important;
}

div.dataTables_wrapper {
    width: 100%;
    margin-top: 10px;
    color: var(--color-text-primary);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

div.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper .dataTables_filter,
div.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper .dataTables_paginate {
    margin: 0;
    padding: 0;
    font-size: var(--text-size-small);
}

div.dataTables_wrapper .dataTables_filter {
    text-align: right;
}

div.dataTables_wrapper .dataTables_filter label,
div.dataTables_wrapper .dataTables_length label {
    color: var(--color-text-secondary);
}

div.dataTables_wrapper .dataTables_filter input,
div.dataTables_wrapper .dataTables_length select {
    margin-left: .4em;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text-primary);
    box-shadow: var(--box-shadow-input-inset);
    font-size: var(--text-size-default);
}

div.dataTables_wrapper .dataTables_filter input:focus,
div.dataTables_wrapper .dataTables_length select:focus {
    outline: none;
    border-color: var(--color-border-focus);
}

div.dataTables_wrapper .dataTables_info {
    color: var(--color-text-secondary);
}

div.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 5px;
    border: 1px solid var(--color-border-primary) !important;
    background: transparent !important;
    color: var(--color-brand-gray) !important;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    transition: all .15s ease-in-out;
}

div.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

div.dataTables_wrapper .dataTables_paginate>span {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
div.dataTables_wrapper .dataTables_paginate .paginate_button.next,
div.dataTables_wrapper .dataTables_paginate .paginate_button.first,
div.dataTables_wrapper .dataTables_paginate .paginate_button.last,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.previous,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.next,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.first,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.last {
    width: auto;
    min-width: 26px;
    padding: 0 8px;
    margin: 0;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button:hover {
    background: transparent !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button {
    color: var(--color-text-primary) !important;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.ui-state-disabled:not(.first):not(.previous):not(.next):not(.last) {
    background: transparent !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
    font-weight: 700;
}

div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper .dataTables_paginate .paginate_button.paginate_button_disabled,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.ui-state-disabled.first,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.ui-state-disabled.previous,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.ui-state-disabled.next,
div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button.ui-state-disabled.last {
    opacity: .55;
    cursor: not-allowed;
    background: transparent !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-brand-gray) !important;
}

div.dataTables_wrapper .dataTables_paginate .ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    color: var(--color-brand-gray);
}

@media (min-width: 1024px) {
    div.dataTables_wrapper table.display,
    div.dataTables_wrapper table.dataTable,
    div.dataTables_wrapper table[class*="tablelist"],
    div.dataTables_wrapper table[class*="list"],
    div.dataTables_wrapper table.nfs,
    div.dataTables_wrapper table.agendamentos,
    div.dataTables_wrapper table.detalhestatus {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    div.dataTables_wrapper table.display tbody td,
    div.dataTables_wrapper table.dataTable tbody td,
    div.dataTables_wrapper table.display tbody th,
    div.dataTables_wrapper table.dataTable tbody th,
    div.dataTables_wrapper table[class*="tablelist"] tbody td,
    div.dataTables_wrapper table[class*="list"] tbody td,
    div.dataTables_wrapper table.nfs tbody td,
    div.dataTables_wrapper table.agendamentos tbody td,
    div.dataTables_wrapper table.detalhestatus tbody td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

table.contrato.display.link-no-decoration.dataTable.no-footer tr td a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):hover {
    text-decoration: underline !important;
    cursor: pointer;
}

/* legacy datatables with jquery-ui toolbar */
.fg-toolbar.ui-toolbar.ui-widget-header {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-default) !important;
    color: var(--color-text-primary) !important;
    padding: 8px 10px;
}

/* espacamento entre header/footer do datatables e a tabela */
.fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-tl,
.fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-tr {
    margin-bottom: 5px;
}

.fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl,
.fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-br {
    margin-top: 5px;
}

/* esconde o toolbar do datatables quando nao tem nenhum controle visivel
   (sem busca, sem length, sem info, sem paginacao, sem botoes) */
.fg-toolbar.ui-toolbar.ui-widget-header:not(:has(.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate, .dt-buttons)) {
    display: none;
}

/* quando o datatable nao tem nenhum controle (busca/length/info/paginacao/botoes),
   o wrapper passa a ser o card visual: assume borda, radius e sombra; e a tabela
   perde o seu proprio enquadramento para evitar borda dupla e desalinhamento com
   a barra de rolagem horizontal do wrapper */
div.dataTables_wrapper:not(:has(.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate, .dt-buttons)) {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    background: var(--color-bg);
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

div.dataTables_wrapper:not(:has(.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate, .dt-buttons)) > table.display,
div.dataTables_wrapper:not(:has(.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate, .dt-buttons)) > table.dataTable,
div.dataTables_wrapper:not(:has(.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate, .dt-buttons)) > table[class*="tablelist"],
div.dataTables_wrapper:not(:has(.dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate, .dt-buttons)) > table[class*="list"] {
    border: 0 !important;
    box-shadow: none !important;
}

.fg-toolbar.ui-toolbar.ui-widget-header a {
    color: inherit !important;
}

.dataTables_wrapper .ui-state-default,
.dataTables_wrapper .ui-widget-header .ui-state-default,
.dataTables_wrapper .ui-button {
    border: 1px solid var(--color-border-primary) !important;
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    box-shadow: none;
}

.dataTables_wrapper .ui-state-default:hover,
.dataTables_wrapper .ui-button:hover {
    background: var(--color-hover-primary) !important;
}

.dataTables_wrapper .ui-state-disabled,
.dataTables_wrapper .ui-button.ui-state-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* jq-dropdown options: visual moderno e botoes consistentes */
a.button[data-jq-dropdown],
a.buttonsm[data-jq-dropdown],
a.buttonxs[data-jq-dropdown],
a.buttonxss[data-jq-dropdown] {
    width: auto !important;
    min-width: 74px;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

/* botao Status ao lado de Opcoes: mesmo padrao visual */
a.button.green[href*="/status/add"] {
    width: auto !important;
    min-width: 74px;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    line-height: 1;
    vertical-align: middle;
}

a.button[data-jq-dropdown],
a.buttonsm[data-jq-dropdown] {
    min-height: 34px;
}

a.buttonxs[data-jq-dropdown],
a.buttonxss[data-jq-dropdown] {
    min-height: 30px;
}

a.white[data-jq-dropdown] {
    background: var(--color-bg) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary) !important;
}

a.white[data-jq-dropdown]:hover {
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-focus) !important;
}

.jq-dropdown {
    z-index: 9000;
}

.jq-dropdown .jq-dropdown-menu,
.jq-dropdown .jq-dropdown-panel {
    min-width: 220px;
    max-width: 420px;
    padding: 3px;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 12px !important;
    background: var(--color-bg) !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.18) !important;
}

.jq-dropdown .jq-dropdown-menu li {
    line-height: 1.25;
}

.jq-dropdown .jq-dropdown-menu li>a,
.jq-dropdown .jq-dropdown-menu label {
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0;
    font-size: var(--text-size-default);
    color: var(--color-text-primary);
    line-height: 1.1;
}

.jq-dropdown .jq-dropdown-menu li>a:hover,
.jq-dropdown .jq-dropdown-menu label:hover {
    background: var(--color-hover-primary) !important;
    color: var(--color-text-primary);
}

.jq-dropdown .jq-dropdown-menu .jq-dropdown-divider {
    border-top: 1px solid var(--color-border-primary);
    margin: 4px 0;
}

.jq-dropdown.jq-dropdown-tip:before {
    border-bottom-color: var(--color-border-primary);
}

.jq-dropdown.jq-dropdown-tip:after {
    border-bottom-color: var(--color-bg);
}

/* select2 - identidade NEO (classic/default) */
.select2-container {
    font-size: var(--text-size-default);
}

.select2-container--classic .select2-selection--single,
.select2-container--default .select2-selection--single {
    min-height: 32px;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 8px !important;
    background: var(--color-bg-tertiary) !important;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.select2-container--classic .select2-selection--single:hover,
.select2-container--default .select2-selection--single:hover,
.select2-container--classic .select2-selection--multiple:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: #a3a3a3 !important;
    background: var(--color-bg) !important;
}

.select2-container--classic .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text-primary) !important;
    line-height: 30px !important;
    padding-left: 10px !important;
    padding-right: 32px !important;
    font-size: var(--text-size-md);
}

/* seta: sem fundo cinza separado, integrada ao input */
.select2-container--classic .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
    width: 28px !important;
    right: 1px !important;
    top: 1px !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 7px 7px 0 !important;
    background: transparent !important;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b,
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text-secondary) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-top: -2px !important;
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-text-secondary) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--classic.select2-container--open .select2-selection--multiple,
.select2-container--classic.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-accent) !important;
    background: var(--color-bg) !important;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.15) !important;
}

.select2-container--classic .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    min-height: 32px;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 8px !important;
    background: var(--color-bg-tertiary) !important;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04) !important;
    padding: 2px 5px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid var(--color-select2-choice-border);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-radius: 999px;
    padding: 0 7px;
    margin-top: 3px;
}

.select2-dropdown {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 10px !important;
    background: var(--color-bg) !important;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.16) !important;
    overflow: hidden;
    margin-top: 4px;
}

.select2-container--classic .select2-results>.select2-results__options,
.select2-container--default .select2-results>.select2-results__options {
    max-height: 280px;
    padding: 4px;
}

.select2-container--classic .select2-results__option,
.select2-container--default .select2-results__option {
    padding: 7px 9px;
    margin: 0;
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text-primary);
}

.select2-container--classic .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--color-hover-primary) !important;
    color: var(--color-text-primary) !important;
}

.select2-container--classic .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(232, 89, 12, 0.10) !important;
    color: var(--color-text-primary) !important;
    font-weight: 600;
}

.select2-search--dropdown {
    padding: 5px;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 8px;
    padding: 5px 10px;
    min-height: 30px;
    background: var(--color-bg-tertiary) !important;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-accent) !important;
    background: var(--color-bg) !important;
    box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.15) !important;
}

.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border-secondary) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
}

/* ckeditor 4 - identidade NEO */
.cke {
    border-radius: var(--radius-default) !important;
    overflow: hidden;
}

.cke_inner {
    background: transparent !important;
}

.cke_chrome {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-default) !important;
    background: var(--color-bg) !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}

.cke_top {
    border-bottom: 1px solid var(--color-border-primary) !important;
    background: var(--color-bg-tertiary) !important;
    box-shadow: none !important;
    padding: 6px 8px 4px !important;
}

.cke_toolbox {
    background: transparent !important;
}

.cke_toolgroup,
.cke_combo_button {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 8px !important;
    background: var(--color-bg) !important;
    box-shadow: none !important;
    margin: 0 4px 4px 0 !important;
}

.cke_combo_text,
.cke_combo_open,
.cke_button_label {
    color: var(--color-text-primary) !important;
    text-shadow: none !important;
    font-family: var(--font-family-base) !important;
}

#content-main .cke a {
    text-decoration: none !important;
}

.cke_button {
    border-radius: 6px !important;
    background-image: none !important;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.cke_button:hover,
.cke_button.cke_button_on:hover,
.cke_combo_button:hover {
    background: var(--color-hover-primary) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.cke_button_on,
.cke_button_on:hover,
.cke_combo_on,
.cke_combo_on:hover {
    background: rgba(232, 89, 12, 0.10) !important;
    background-image: none !important;
    color: var(--color-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(232, 89, 12, 0.25) !important;
}

#content-main .cke .cke_button:focus,
#content-main .cke .cke_button:active,
#content-main .cke .cke_combo_button:focus,
#content-main .cke .cke_combo_button:active {
    background: var(--color-hover-primary) !important;
    background-image: none !important;
    box-shadow: 0 0 0 2px rgba(232, 89, 12, 0.20) !important;
    outline: none !important;
}

#content-main .cke .cke_button_on,
#content-main .cke .cke_button_on:hover,
#content-main .cke .cke_combo_on,
#content-main .cke .cke_combo_on:hover,
#content-main .cke .cke_button.cke_button_on,
#content-main .cke .cke_button.cke_button_on:hover {
    background: rgba(232, 89, 12, 0.10) !important;
    background-image: none !important;
    color: var(--color-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(232, 89, 12, 0.25) !important;
}

.cke_button_icon {
    opacity: 1 !important;
    filter: none !important;
}

.cke_toolbar_separator {
    border-right-color: var(--color-border-secondary) !important;
}

.cke_contents {
    border-top: 0 !important;
    border-bottom: 1px solid var(--color-border-secondary) !important;
    background: var(--color-bg) !important;
}

.cke_wysiwyg_frame,
.cke_wysiwyg_div {
    background: var(--color-bg) !important;
}

.cke_bottom {
    border-top: 1px solid var(--color-border-secondary) !important;
    border-radius: 0 0 var(--radius-default) var(--radius-default) !important;
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}

.cke_path,
.cke_path a,
.cke_path_item,
.cke_path_empty {
    color: var(--color-text-secondary) !important;
    text-shadow: none !important;
}

.cke_path_item:hover,
.cke_path a:hover {
    color: var(--color-text-primary) !important;
}

.cke_focus,
.cke_focus.cke_chrome {
    border-color: var(--color-border-focus) !important;
}

.cke_button_disabled,
.cke_combo_disabled {
    opacity: .65 !important;
}

.cke_button_disabled .cke_button_icon,
.cke_combo_disabled .cke_button_icon {
    opacity: .45 !important;
}

/* legacy custom pagination */
#dtpaginacao {
    padding: 2px 0;
    margin: 8px 0 8px 0;
    float: right;
}

#dtpaginacao ul {
    list-style-type: none;
    float: right;
    margin: 0;
    padding: 0;
}

#dtpaginacao li {
    display: inline;
}

#dtpaginacao li a {
    color: var(--color-text-primary);
    padding: 4px 7px;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    text-decoration: none;
    background: var(--color-bg);
}

#dtpaginacao li a:hover {
    background: var(--color-hover-primary);
}

#dtpaginacao li.page-current {
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    padding: 5px 8px;
    background-color: var(--color-bg);
    font-weight: 700;
}

/* form feedback + alerts */
.ui-widget .ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid var(--color-feedback-error-border) !important;
    background: var(--color-feedback-error-bg) !important;
    color: var(--color-feedback-error-text) !important;
    border-radius: var(--radius-default);
    padding: 10px 12px;
}

.ui-widget .ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
    color: inherit;
    text-decoration: underline;
}

.formfield_error label::after {
    color: var(--color-error);
    content: " *";
}

.required label::after {
    content: " *";
    color: var(--color-required-mark);
}

.display_errors {
    margin: 0;
    padding: 0;
    list-style: none;
}

.display_errors li {
    margin: 4px 0;
}

ul.messagelist li.success,
ul.messagelist2 li.success {
    background: linear-gradient(180deg, var(--color-panel-success-bg) 0%, var(--color-success) 100%) !important;
    color: var(--color-panel-success-text) !important;
    border: 1px solid var(--color-panel-success-border) !important;
    border-left: 4px solid var(--color-success) !important;
    background-image: url('/static/all/img/messages/dialog-success.png') !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 20px !important;
    border-radius: 8px !important;
    padding: 12px 20px 12px 48px !important;
    box-shadow: var(--box-shadow-soft) !important;
}

ul.messagelist li.success p,
ul.messagelist2 li.success p {
    color: var(--color-panel-success-text) !important;
    margin: 0 !important;
    background: transparent !important;
}

.errornote,
p.errornote,
#changelist .results p.errornote {
    display: block;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border: 1px solid var(--color-panel-danger-border);
    border-left: 4px solid var(--color-error);
    border-radius: var(--radius-default);
    background: linear-gradient(180deg, #fff 0%, var(--color-panel-danger-bg) 100%);
    color: var(--color-panel-danger-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: var(--box-shadow-soft);
}

.errornote a,
p.errornote a,
#changelist .results p.errornote a {
    color: inherit;
    text-decoration: underline;
}

/* netcore - mapa da OLT (slot/pon) */
#oltmap-container {
    display: grid;
    grid-template-columns: minmax(320px, 470px) minmax(420px, 1fr);
    gap: 14px;
    align-items: start;
    min-height: calc(100vh - 180px);
}

#oltmap-div-left,
#oltmap-div-right {
    min-width: 0;
    padding: 0;
}

#oltmap-slot-pon-map,
#onumap-container-div {
    background: var(--color-bg);
    border: 1px solid var(--color-border-primary);
    border-radius: 12px;
    box-shadow: var(--box-shadow-soft);
    padding: 10px;
    position: static;
    display: block;
}

.oltmap-olt-slot {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: 10px;
    padding: 10px;
    margin: 0 0 10px 0;
}

.oltmap-slot-title {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.oltmap-pon-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 4px;
}

#oltmap-slot-pon-map a[data-pon-id] {
    text-decoration: none;
}

.oltmap-pon {
    width: auto;
    min-height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, #5abf60 0%, #43a449 100%);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow-soft);
    transition: transform .12s ease, filter .12s ease;
}

#oltmap-slot-pon-map .oltmap-pon[style*="background-color: blue"],
#oltmap-slot-pon-map .oltmap-pon[style*="background-color:blue"],
#oltmap-slot-pon-map .oltmap-pon[style*="background-color: rgb(0, 0, 255)"],
#oltmap-slot-pon-map .oltmap-pon[style*="background-color:rgb(0,0,255)"] {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25), var(--box-shadow-soft);
}

#oltmap-slot-pon-map .oltmap-pon[style*="background-color: red"],
#oltmap-slot-pon-map .oltmap-pon[style*="background-color:red"],
#oltmap-slot-pon-map .oltmap-pon[style*="background-color: rgb(255, 0, 0)"],
#oltmap-slot-pon-map .oltmap-pon[style*="background-color:rgb(255,0,0)"] {
    background: #dc2626 !important;
    border-color: #b91c1c !important;
}

#oltmap-slot-pon-map a[data-pon-id]:hover .oltmap-pon {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

#slot_pon {
    width: 100%;
}

#oltmap-header {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#oltmap-header p {
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-weight: 600;
}

#onumap-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 4px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-secondary);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}

.onumap {
    width: auto;
    min-height: 30px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: linear-gradient(180deg, #5abf60 0%, #43a449 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow-soft);
}

@media (max-width: 1180px) {
    #oltmap-container {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* dialog polish */
.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-titlebar.ui-widget-header {
    background: #dcdcdc !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    color: var(--color-text-primary) !important;
    font-weight: 700;
    letter-spacing: -.005em;
    display: flex !important;
    align-items: center !important;
    height: 42px;
    min-height: 42px;
    position: relative;
    box-sizing: border-box;
}

.ui-dialog .ui-dialog-title {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 36px 0 0 !important;
    line-height: 1;
    font-size: var(--text-size-md);
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    height: 100%;
}

.ui-dialog .ui-dialog-content {
    padding: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg);
    line-height: 1.45;
}

.ui-dialog .ui-dialog-buttonpane {
    border-top: 1px solid var(--color-border-secondary);
    background: var(--color-bg-tertiary);
    margin: 0;
    padding: 10px 12px;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
    display: flex;
    gap: .4em;
}

.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog .ui-dialog-buttonpane .ui-button {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    padding: 0 !important;
    min-width: 32px;
    min-height: 30px;
    box-shadow: var(--box-shadow-soft) !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
    padding: 5px 12px;
}

.ui-dialog .ui-dialog-buttonpane button:first-child,
.ui-dialog .ui-dialog-buttonpane .ui-button:first-child {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
}

.ui-dialog .ui-dialog-buttonpane button:first-child:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:first-child:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog .ui-dialog-buttonpane .ui-button:hover {
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-focus) !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    border: 1px solid var(--color-border-primary) !important;
    border-radius: var(--radius-default) !important;
    background: var(--color-bg) !important;
    color: var(--color-text-secondary) !important;
    width: 28px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow-soft) !important;
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    color: var(--color-text-primary) !important;
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-focus) !important;
    box-shadow: var(--box-shadow-default) !important;
}

.ui-dialog .ui-dialog-titlebar-close.ui-state-hover,
.ui-dialog .ui-dialog-titlebar-close.ui-state-focus,
.ui-dialog .ui-dialog-titlebar-close.ui-state-active,
.ui-dialog .ui-dialog-titlebar-close.ui-button.ui-state-hover,
.ui-dialog .ui-dialog-titlebar-close.ui-button.ui-state-focus,
.ui-dialog .ui-dialog-titlebar-close.ui-button.ui-state-active {
    color: var(--color-text-primary) !important;
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-focus) !important;
    background-image: none !important;
    box-shadow: var(--box-shadow-default) !important;
    transform: translateY(-50%) !important;
    border-radius: var(--radius-default) !important;
    outline: none !important;
}

.ui-dialog.ui-widget {
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    box-shadow: 0 14px 42px rgba(17, 24, 39, 0.22);
    overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
    /* posiciona o ícone absoluto no centro do botão para que o text node "Close" e o .ui-button-icon-space que o jQuery UI 1.12 injeta como irmãos não desloquem o "x" no hover */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 14px !important;
    height: 14px !important;
    background: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    overflow: visible !important;
    color: currentColor !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon::before,
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before {
    content: "\00d7";
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
}

/* table refresh - visual shadcn-like */
.tablex,
.tablex2,
.tablelist,
table.subtable,
.ui-dialog-content table:not(.ui-datepicker-calendar):not(.tablex):not(.tablex2):not(.tablelist) {
    border: 1px solid var(--color-border-secondary);
    border-radius: 10px;
    background: var(--color-bg);
    box-shadow: var(--box-shadow-soft);
}

.tablex th,
.tablex2 th,
.tablelist thead th,
table.subtable th,
.ui-dialog-content table:not(.ui-datepicker-calendar):not(.tablex):not(.tablex2):not(.tablelist) th {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-weight: 700;
    font-size: var(--text-size-xs);
    letter-spacing: .01em;
    border-bottom: 1px solid var(--color-border-primary);
    padding: 5px 10px;
    line-height: 1.2;
}

.tablex td,
.tablex2 td,
.tablelist tbody td,
table.subtable td,
.ui-dialog-content table:not(.ui-datepicker-calendar):not(.tablex):not(.tablex2):not(.tablelist) td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-border-secondary);
    background-color: var(--color-bg);
    line-height: 1.15;
}

/* Padding mais compacto para subtable (ex.: Detalhes do Título) */
table.subtable th,
table.subtable td {
    padding: 3px 8px;
}

table.subtable tr:nth-child(odd) td,
.dataTable tbody tr:nth-child(odd) td,
#titulo_detail #box table tbody tr:nth-child(odd) td {
    background-color: var(--color-bg) !important;
}

table.subtable tr:nth-child(even) td,
.dataTable tbody tr:nth-child(even) td,
#titulo_detail #box table tbody tr:nth-child(even) td {
    /* meio termo entre `--color-bg-tertiary` (#fafafa, pouco visível) e
       `--color-bg-secondary` (#f5f5f5, escuro demais segundo feedback anterior) */
    background-color: #f7f7f7 !important;
}

/* Detalhes do título — texto em cinza-médio (mais escuro que cinza-claro original, mas não preto).
   `:not([style*="color"])` no td preserva cores inline (Valor do Título, Juros, Multa,
   Valor Corrigido, etc.) que usam vars do neo (--color-success/error/warning/...) para destaque. */
#titulo_detail,
#titulo_detail #box,
#titulo_detail #box table {
    color: var(--color-text-muted) !important;
}

#titulo_detail #box table td:not([style*="color"]) {
    color: var(--color-text-muted) !important;
}

/* Detalhes do título — layout mais compacto verticalmente */
#titulo_detail #box {
    padding: 4px;
}

#titulo_detail #box > table.tablewrap {
    border-spacing: 0;
    border-collapse: collapse;
}

#titulo_detail #box > table.tablewrap > tbody > tr > td {
    padding: 1px 6px !important;
    line-height: 1.2 !important;
    vertical-align: middle;
    height: auto !important;
}

/* Override também na regra global `.ui-dialog-content table td` (6085)
   que aplica `padding: 5px 10px` em qualquer table no dialog, incluindo a
   tablewrap do detalhe do título. */
#titulo_detail.ui-dialog-content table:not(.subtable) td,
#titulo_detail .ui-dialog-content table:not(.subtable) td {
    padding: 1px 6px !important;
    line-height: 1.2 !important;
}

/* Pagamentos Parciais: subtable herda word-break:break-all da .tablewrap td;
   restaurar quebra natural; nowrap só nos cabeçalhos para travar largura mínima
   das colunas sem expandir demais a tabela (evita empurrar #box para baixo do
   float-right dos botões laterais) */
#titulo_detail #box .subtable th,
#titulo_detail #box .subtable td {
    word-break: normal;
    word-wrap: normal;
}

#titulo_detail #box .subtable th {
    white-space: nowrap;
}

.tablex tbody tr:last-child td,
.tablex2 tbody tr:last-child td,
.tablelist tbody tr:last-child td,
table.subtable tbody tr:last-child td,
.ui-dialog-content table:not(.ui-datepicker-calendar):not(.tablex):not(.tablex2):not(.tablelist) tbody tr:last-child td {
    border-bottom: 0;
}

.tablex tbody tr:hover td,
.tablex2 tbody tr:hover td,
.tablelist tbody tr:hover td,
table.subtable tbody tr:hover td,
.ui-dialog-content table:not(.ui-datepicker-calendar):not(.tablex):not(.tablex2):not(.tablelist) tbody tr:hover td {
    background-color: var(--color-bg-tertiary);
}

table.subtable td:first-child,
.ui-dialog-content table:not(.ui-datepicker-calendar):not(.tablex):not(.tablex2):not(.tablelist) td:first-child {
    color: var(--color-text-secondary);
    font-weight: 600;
}

table.subtable td pre,
.ui-dialog-content table:not(.ui-datepicker-calendar):not(.tablex):not(.tablex2):not(.tablelist) td pre {
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border-secondary);
    background-color: var(--color-bg-tertiary);
}

div.search-report-left .tablex,
div.search-report-right .tablex,
div.search-report-left .tablex2,
div.search-report-right .tablex2 {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

div.search-report-left .tablex th,
div.search-report-right .tablex th,
div.search-report-left .tablex2 th,
div.search-report-right .tablex2 th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: normal;
    color: #000;
    background: #dcdcdc;
    padding: 3px;
    border-bottom: 1px solid var(--color-border-primary);
}

div.search-report-left .tablex td,
div.search-report-right .tablex td,
div.search-report-left .tablex2 td,
div.search-report-right .tablex2 td {
    padding: 3px;
    line-height: normal;
    color: #000;
    background: transparent;
    border-bottom: 1px solid var(--color-border-primary);
}

div.search-report-left .tablex td a,
div.search-report-right .tablex td a,
div.search-report-left .tablex th a,
div.search-report-right .tablex th a,
div.search-report-left .tablex2 td a,
div.search-report-right .tablex2 td a,
div.search-report-left .tablex2 th a,
div.search-report-right .tablex2 th a {
    color: #000;
}

div.search-report-left .tablex tr:hover,
div.search-report-right .tablex tr:hover,
div.search-report-left .tablex2 tr:hover,
div.search-report-right .tablex2 tr:hover,
div.search-report-left .tablex tr:hover td,
div.search-report-right .tablex tr:hover td,
div.search-report-left .tablex2 tr:hover td,
div.search-report-right .tablex2 tr:hover td {
    background: #dcdcdc;
    color: #000;
}

a.show_more_button.buttonxss,
.tablex a.show_more_button.buttonxss,
.tablex2 a.show_more_button.buttonxss,
.tablelist a.show_more_button.buttonxss,
a.titulo_detail_show_more_button.buttonxss,
.tablex a.titulo_detail_show_more_button.buttonxss,
.tablex2 a.titulo_detail_show_more_button.buttonxss,
.tablelist a.titulo_detail_show_more_button.buttonxss {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    line-height: 24px !important;
    border-radius: 999px;
    margin: 0 0 0 2px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    font-size: 14px !important;
    font-weight: 700 !important;
}

/* toastr */
#toast-container {
    margin-top: 6px;
}

#toast-container>div {
    opacity: 1;
    border-radius: var(--radius-default);
    border: 1px solid var(--color-toast-border);
    box-shadow: var(--box-shadow-default);
    font-size: var(--text-size-small);
}

#toast-container>.toast-success {
    background-color: var(--color-toast-success);
}

#toast-container>.toast-info {
    background-color: var(--color-toast-info);
}

#toast-container>.toast-warning {
    background-color: var(--color-toast-warning);
}

#toast-container>.toast-error {
    background-color: var(--color-toast-error);
}

#toast-container>.toast {
    padding: 12px 12px 12px 46px;
}

#toast-container .toast-message {
    line-height: 1.4;
}

#toast-container .toast-close-button {
    opacity: .85;
}

#toast-container .toast-close-button:hover {
    opacity: 1;
}

/* accessibility + microinteractions */
::selection {
    background: var(--color-selection-bg);
    text-shadow: none;
}
::-moz-selection {
    background: var(--color-selection-bg);
    text-shadow: none;
}

a,
button,
input,
select,
textarea,
.button,
.buttonsm,
.buttonxs,
.buttonxss,
.buttonfa,
.ui-button,
.paginate_button,
.select2-selection,
.sf-menu a {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.button,
.buttonsm,
.buttonxs,
.buttonxss,
.buttonfa,
.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: normal !important;
    vertical-align: middle;
    /* Elevação suave nos botões — usa a mesma variável que caixas/tabs/widgets,
       então o ajuste light/dark já está calibrado. Transition de box-shadow
       já existe na regra de transition acima, então hover/active animam suave. */
    box-shadow: var(--box-shadow-soft);
}

/* .ui-button precisa de !important pra vencer o display: inline-block do jquery-ui-001.css (carregado depois) */
.ui-button {
    display: inline-flex !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible,
.buttonsm:focus-visible,
.buttonxs:focus-visible,
.buttonxss:focus-visible,
.buttonfa:focus-visible,
.ui-button:focus-visible,
.paginate_button:focus-visible,
.select2-selection:focus-visible,
.sf-menu a:focus-visible {
    outline: none;
}

/* fallback for navegadores sem focus-visible */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

/* Hover sutil: leve elevação (1px) + sombra um nível acima.
   Combina com o :active logo abaixo (que zera o translateY e escurece) para dar
   feedback tátil em três etapas: repouso → hover → press. A transition de
   transform/box-shadow já está declarada no bloco de transition geral (150ms
   ease-in-out), então não precisa redeclarar aqui.
   Não mexe em border-color globalmente: cada classe colorida (.blue, .orange,
   .red, etc em admin_neo_components.css) controla a própria borda no hover —
   forçar uma cor neutra aqui sobrescreveria a borda colorida com cinza. */
.button:hover,
.buttonsm:hover,
.buttonxs:hover,
.buttonxss:hover,
.buttonfa:hover,
.ui-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-medium);
}

.button:active,
.buttonsm:active,
.buttonxs:active,
.buttonxss:active,
.buttonfa:active,
.ui-dialog .ui-dialog-buttonpane button:active,
.ui-dialog .ui-dialog-buttonpane .ui-button:active,
div.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    transform: translateY(0);
    filter: brightness(0.93);
}

/* links em conteudo: melhora descobribilidade sem afetar menus */
#content-main a:not(.button):not(.buttonsm):not(.buttonxs):not(.buttonxss):not(.buttonfa):not(.ui-button):not(.paginate_button) {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* alvos interativos pequenos */
.ui-dialog-titlebar-close,
#header-right a,
#headertop-right a {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

/* melhoria de contraste em textos secundarios sobre fundo escuro */
#header-right ul li,
#headertop-right a,
ul.sf-menu a:hover {
    color: var(--color-text-contrast-soft);
}

/* densidade visual das tabelas sem perda de leitura */
.tablex td,
.tablex2 td,
.tablelist tbody td {
    line-height: 1.15;
}

#id_execute {
    border-radius: var(--radius-default) !important;
    border: 1px solid var(--color-border-primary) !important;
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    padding: 6px 12px !important;
    min-height: 36px;
    box-shadow: var(--box-shadow-soft) !important;
    cursor: pointer;
}

#id_execute:hover {
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-focus) !important;
}

/* jsoneditor */
div.jsoneditor-menu {
    border-radius: var(--radius-default) var(--radius-default) 0 0 !important;
    background-color: var(--color-accent) !important;
    border-bottom: 1px solid var(--color-accent) !important;
}

div.jsoneditor {
    border: 1px solid var(--color-accent) !important;
    border-radius: var(--radius-default) !important;
    box-shadow: var(--box-shadow-default) !important;
}

div.jsoneditor-statusbar {
    border-radius: 0 0 var(--radius-default) var(--radius-default) !important;
}

fieldset.module.aligned div.form-row.field-image_tag div div.readonly img {
    border: 1px solid var(--color-border-primary);
    padding: 10px;
    border-radius: var(--radius-lg);
    box-shadow: var(--box-shadow-default);
}

#gateway_detail > div:nth-child(3) {
    margin-left: 14px !important;
}

#gateway_detail.ui-dialog-content,
#add_gateway.ui-dialog-content {
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

#gateway_detail.ui-dialog-content #box.subtable,
#add_gateway.ui-dialog-content #box.subtable {
    max-height: calc(100vh - 240px) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#gateway_detail.ui-dialog-content #observacao,
#add_gateway.ui-dialog-content #observacao {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Dashboard: Recent Actions */
body.dashboard #content-related .actionlist {
    padding: 0;
    display: flex;
    flex-direction: column;
}

body.dashboard #content-related .actionlist li {
    float: none !important;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0 0 10px 16px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    background-position: 0 4px;
    box-sizing: border-box;
}

body.dashboard #content-related .actionlist li.deletelink {
    float: none !important;
}

body.dashboard #content-related .actionlist li a {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

body.dashboard #content-related .actionlist li .mini.quiet {
    display: block;
}

div#content div#content-main {
    padding: 3px 24px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .button:hover,
    .buttonsm:hover,
    .buttonxs:hover,
    .buttonxss:hover,
    .buttonfa:hover {
        transform: none;
    }
}

@media (max-width: 1180px) {

    #header,
    #headertop {
        min-width: 0;
    }

    div#content div#content-main {
        padding: 3px 16px;
    }

    .app-admcore #content #content-main,
    .app-admin #content #content-main,
    .app-atendimento #content #content-main,
    .app-auth #content #content-main,
    .app-beneficios #content #content-main,
    .app-cauth #content #content-main,
    .app-central #content #content-main,
    .app-cobranca #content #content-main,
    .app-crm #content #content-main,
    .app-estoque #content #content-main,
    .app-estoque2 #content #content-main,
    .app-financeiro #content #content-main,
    .app-fiscal #content #content-main,
    .app-netcore #content #content-main,
    .app-oauth #content #content-main,
    .app-precadastro #content #content-main,
    .app-webshell #content #content-main,
    .webshell-script #content #content-main {
        padding: 0 !important;
    }
}

@media (max-width: 1054px) {
    body.dashboard #content.colMS {
        display: flex;
        flex-direction: column;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    body.dashboard #content-related {
        display: block !important;
        float: none !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        order: 1;
        position: relative;
        z-index: 1;
    }

    body.dashboard #content-main {
        float: none !important;
        width: 100% !important;
        order: 2;
        min-width: 0;
    }
}

@media (max-width: 1023px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        overflow-x: clip !important;
        overscroll-behavior-x: none;
        touch-action: pan-y;
    }

    select {
        width: 100% !important;
    }

    .aligned p.file-upload {
        margin-left: 0;
    }

    input#id_contrato_social {
        width: 100% !important;
    }

    #box.box-header strong {
        display: block;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #box.box-header .texto-status-ativo,
    #box.box-header .texto-status-ativored,
    #box.box-header .texto-status-inativo,
    #box.box-header .texto-status-suspenso,
    #box.box-header .texto-status-cancelado {
        white-space: normal;
    }

    #tabs_ocorrencia [style*="float"],
    #tabs_ordemservico [style*="float"] {
        float: none !important;
    }

    #tabs_ocorrencia .comentario-campo-label,
    #tabs_ordemservico .comentario-campo-label {
        float: none !important;
        display: block;
        width: 100%;
    }

    .add_content_sub p.neo-inline-action-row>input[type="text"],
    .add_content_sub_no_border p.neo-inline-action-row>input[type="text"],
    .add_content_sub p.neo-inline-action-row>select,
    .add_content_sub_no_border p.neo-inline-action-row>select {
        flex: 1 1 auto;
    }

    div#anotacoes a#linkadd,
    div#documentos a#linkadd {
        margin-top: 18px;
    }

    div#variaveis a#linkadd {
        margin-top: 8px;
    }

    #changelist-search>div {
        display: flex;
        gap: 8px;
    }

    #changelist-search>div>label {
        margin-top: 5px;
    }

    #wrap,
    #container,
    #header-wrap,
    #content-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }

    #content,
    #content-main,
    #main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: visible;
    }

    .ui-dialog.ui-widget,
    .ui-dialog.ui-widget.ui-resizable,
    .ui-dialog.ui-widget.ui-dialog-buttons {
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        left: 8px !important;
        right: 8px !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .ui-dialog .ui-dialog-content {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }



    #header,
    #headertop {
        padding-left: 12px;
        padding-right: 12px;
        min-width: 0;
    }

    #header {
        height: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #header-left,
    #header-right,
    #clientebusca_top,
    #headertop-left,
    #headertop-right {
        float: none;
        height: auto;
    }

    #header-left,
    #header-right,
    #headertop-left,
    #headertop-right {
        width: 100%;
    }

    #header-left {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px;
    }

    #header-left img {
        margin-left: 0;
        width: 72px;
    }

    #header-right ul,
    #headertop-right ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: hidden;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #header-right ul::-webkit-scrollbar,
    #headertop-right ul::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #header-right {
        padding: 0;
    }

    #header-right ul li {
        flex: 0 0 auto;
        margin: 0;
        max-width: none;
        min-height: 28px;
        height: auto;
        white-space: nowrap;
        border-radius: 8px;
        background: var(--color-white-alpha-08);
        padding: 5px 8px;
    }

    #header-right ul li.separador {
        display: none;
    }

    #headertop-right {
        padding: 2px 0 0 0;
    }

    #headertop-right ul li {
        flex: 0 0 auto;
        margin-left: 0;
    }

    #clientebusca_top {
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    #id_clientebusca,
    #id_clientebuscatipo {
        width: 100%;
        max-width: none;
        margin-left: 0;
        height: 36px;
    }

    #headertop {
        height: auto;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    #headertop-left {
        overflow-x: hidden;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #headertop-left::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }

    #headertop-left>ul.sf-menu {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
        min-width: 0;
        margin-top: 0;
    }

    #headertop-left>ul.sf-menu>li {
        flex: 1 1 160px;
        min-width: 0;
        width: auto;
    }

    #headertop-left>ul.sf-menu>li>a:link,
    #headertop-left>ul.sf-menu>li>a:visited,
    #headertop-left>ul.sf-menu>li>a:active {
        display: flex;
        align-items: center;
        justify-content: start;
        width: 100%;
        min-height: 38px;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        text-align: center;
        background: var(--color-white-alpha-08);
    }

    #headertop-left .sf-menu>li.sfHover>a,
    #headertop-left .sf-menu>li>a:hover,
    #headertop-left .sf-menu>li>a:focus-visible {
        background: var(--color-white-alpha-16);
        color: var(--color-accent);
    }

    #headertop-left .sf-menu>li:nth-child(even)>ul {
        right: 0;
        left: auto;
    }

    #headertop-left .sf-menu ul {
        max-width: min(330px, calc(100vw - 20px));
    }

    #headertop-left .sf-menu ul li a:link,
    #headertop-left .sf-menu ul li a:visited,
    #headertop-left .sf-menu ul li a:active {
        min-width: min(260px, calc(100vw - 30px));
    }

    #headertop-left .sf-menu ul li a:link,
    #headertop-left .sf-menu ul li a:visited,
    #headertop-left .sf-menu ul li a:active {
        min-width: 0;
        white-space: normal;
    }

    #headertop-left>ul.sf-menu>li {
        height: auto;
    }

    #content-wrap {
        top: 0;
    }

    .add_content_sub p label,
    .add_content_sub_no_border p label,
    .ui-dialog-content p label {
        width: auto !important;
        max-width: 100% !important;
        display: block;
        margin-bottom: 4px;
    }

    #widgets_p {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    #widgets_p span {
        width: 100% !important;
        display: block;
        margin-bottom: 8px;
    }

    .help {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    #widgets_p table {
        margin-left: 0 !important;
        margin-top: 10px;
    }

    .add_content_sub p,
    .add_content_sub_no_border p,
    .ui-dialog-content p,
    form.formx fieldset,
    form.formx .add_title_sub,
    form.formx .add_content_sub,
    .add_content_buttons {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Fieldset do inline Django em mobile: remove min-size nativo (~420px) */
    fieldset.module,
    .inline-group fieldset.module,
    .inline-group .inline-related,
    .inline-group {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-inline-size: 0 !important;
        box-sizing: border-box;
    }

    #id_compraitens_set-0-referencia,
    #compraitens_set-0>fieldset>div.form-row.field-referencia>div>div.hwt-container>div {
        width: 100% !important;
    }

    body.app-netcore.model-onutemplate.change-form .form-row.field-description {
        overflow: visible !important;
    }

    body.app-netcore.model-onutemplate.change-form .form-row.field-description>div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.app-netcore.model-onutemplate.change-form .form-row.field-description>div>label {
        flex: 1 1 100%;
        width: 100% !important;
        margin: 0 !important;
    }

    body.app-netcore.model-onutemplate.change-form #id_description {
        flex: 1 1 calc(100% - 36px);
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }

    body.app-netcore.model-onutemplate.change-form #description_search_btn {
        flex: 0 0 20px;
        display: inline-block;
        width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        padding: 0 !important;
        background-size: 16px 16px !important;
        background-position: center center !important;
        vertical-align: middle;
        margin: 0 !important;
    }

    body.app-admcore.model-gatewayai.change-form .form-row.field-modelo,
    body.app-admcore.model-gatewayai.change-form .form-row.field-assistente {
        overflow: visible !important;
    }

    body.app-admcore.model-gatewayai.change-form .form-row.field-modelo > div,
    body.app-admcore.model-gatewayai.change-form .form-row.field-assistente > div {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.app-admcore.model-gatewayai.change-form .form-row.field-modelo > div > label,
    body.app-admcore.model-gatewayai.change-form .form-row.field-assistente > div > label {
        flex: 1 1 100%;
        width: 100% !important;
        margin: 0 !important;
    }

    body.app-admcore.model-gatewayai.change-form #id_modelo,
    body.app-admcore.model-gatewayai.change-form #id_assistente {
        flex: 1 1 calc(100% - 36px);
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }

    body.app-admcore.model-gatewayai.change-form #modelo_search_btn,
    body.app-admcore.model-gatewayai.change-form #assistente_search_btn {
        flex: 0 0 20px;
        display: inline-block;
        width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        padding: 0 !important;
        background-size: 16px 16px !important;
        background-position: center center !important;
        vertical-align: middle;
        margin: 0 !important;
    }

    body.app-cobranca.model-smsaviso.change-form .form-row.field-mensagem > div {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
    }

    body.app-cobranca.model-smsaviso.change-form .form-row.field-mensagem table.table-responsive {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 1rem 0 !important;
    }

    body.app-cobranca.model-smsaviso.change-form .form-row.field-mensagem table.table-responsive > thead,
    body.app-cobranca.model-smsaviso.change-form .form-row.field-mensagem table.table-responsive > tbody,
    body.app-cobranca.model-smsaviso.change-form .form-row.field-mensagem table.table-responsive > caption {
        display: table;
        width: 100%;
        min-width: 760px;
        table-layout: auto;
    }

    body.app-cobranca.model-smsaviso.change-form .form-row.field-mensagem table.table-responsive th,
    body.app-cobranca.model-smsaviso.change-form .form-row.field-mensagem table.table-responsive td {
        white-space: nowrap;
    }

    .add_content_sub p.cpf-consulta-neo-row,
    .add_content_sub_no_border p.cpf-consulta-neo-row,
    .add_content_sub p.neo-inline-action-row,
    .add_content_sub_no_border p.neo-inline-action-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden;
    }

    .add_content_sub p.cpf-consulta-neo-row>label,
    .add_content_sub_no_border p.cpf-consulta-neo-row>label,
    .add_content_sub p.neo-inline-action-row>label,
    .add_content_sub_no_border p.neo-inline-action-row>label {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .add_content_sub p.cpf-consulta-neo-row>span.required,
    .add_content_sub_no_border p.cpf-consulta-neo-row>span.required,
    .add_content_sub p.neo-inline-action-row>span.required,
    .add_content_sub_no_border p.neo-inline-action-row>span.required {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 4px !important;
        display: block;
    }

    .add_content_sub p.cpf-consulta-neo-row>input[type="text"],
    .add_content_sub_no_border p.cpf-consulta-neo-row>input[type="text"],
    .add_content_sub p.neo-inline-action-row>input[type="text"],
    .add_content_sub_no_border p.neo-inline-action-row>input[type="text"],
    .add_content_sub p.neo-inline-action-row>select,
    .add_content_sub_no_border p.neo-inline-action-row>select {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
        margin: 0 !important;
    }

    .add_content_sub p.cpf-consulta-neo-row>a.consultar_cpf,
    .add_content_sub p.cpf-consulta-neo-row>a.consultar_documento,
    .add_content_sub_no_border p.cpf-consulta-neo-row>a.consultar_cpf,
    .add_content_sub_no_border p.cpf-consulta-neo-row>a.consultar_documento {
        flex: 0 0 30px;
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    .add_content_sub p.cpf-consulta-neo-row>a.consultar_cpf,
    .add_content_sub p.cpf-consulta-neo-row>a.consultar_documento,
    .add_content_sub_no_border p.cpf-consulta-neo-row>a.consultar_cpf,
    .add_content_sub_no_border p.cpf-consulta-neo-row>a.consultar_documento,
    .add_content_sub p.neo-inline-action-row>a.cep_field_search_button,
    .add_content_sub p.neo-inline-action-row>a.ll_map_field_search_button,
    .add_content_sub p.neo-inline-action-row>a.findme_field_search_button,
    .add_content_sub_no_border p.neo-inline-action-row>a.cep_field_search_button,
    .add_content_sub_no_border p.neo-inline-action-row>a.ll_map_field_search_button,
    .add_content_sub_no_border p.neo-inline-action-row>a.findme_field_search_button {
        margin: 0 !important;
        position: static !important;
        top: auto !important;
    }

    .add_content_sub .select2-container,
    .add_content_sub_no_border .select2-container,
    .ui-dialog-content .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .add_title_sub {
        white-space: normal;
        line-height: 1.35;
    }

    .add_content_buttons {
        display: flex;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
        height: auto !important;
        padding: 8px 10px;
        box-sizing: border-box;
    }

    .add_content_buttons>* {
        flex: 0 0 auto;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .add_content_buttons a[style*="float: right"],
    .add_content_buttons a[style*="float:right"] {
        float: none !important;
        margin-left: 0 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .add_content_buttons input[type="submit"],
    .add_content_buttons .button,
    .add_content_buttons a.button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        box-sizing: border-box;
    }

    body.change-form #content>h1 {
        margin-top: 0;
        padding-top: 40px;
        line-height: 1.25;
    }

    body.change-form #content-main>.object-tools {
        list-style: none;
        margin: -80px 0 10px;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
        float: right !important;
        position: relative;
        z-index: 3;
        max-width: 100%;
    }

    body.change-form #content-main>.object-tools li {
        margin: 0;
        padding: 0;
        float: none !important;
        height: auto !important;
    }

    body.change-form #content-main>.object-tools a,
    body.change-form #content-main>.object-tools a:link,
    body.change-form #content-main>.object-tools a:visited {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 10px;
        max-width: 100%;
        white-space: nowrap;
    }

    body.change-form #content-main>form,
    body.change-form #content-main>.module,
    body.change-form #content-main>#tabs,
    body.change-form #content-main>.tabsui {
        clear: both;
    }

    body.change-list #content-main>.object-tools {
        justify-content: flex-start;
    }

    body.change-list #changelist {
        padding: 8px;
    }

    body.change-list #changelist #toolbar form #searchbar {
        width: 100%;
        min-width: 0;
        flex: 1 1 220px;
    }

    body.change-list #changelist .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-start;
        padding: 8px;
    }

    body.change-list #changelist .actions select {
        width: 100%;
        min-width: 0;
        flex: 1 1 220px;
    }

    body.change-list #changelist .actions>* {
        min-width: 0;
    }

    body.change-list #changelist .actions label {
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        line-height: 1.2;
    }

    body.change-list #changelist .actions .button {
        width: 100%;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.change-list #changelist .actions .action-counter {
        display: block;
        width: 100%;
        margin: 0;
        font-size: 12px;
    }

    body.change-list #changelist .results {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.change-list #changelist table#result_list {
        min-width: 760px;
    }

    .aligned label,
    .wide label {
        float: none;
        width: auto;
        display: block;
        padding-right: 0;
    }

    .aligned label+p,
    .aligned label+div.help,
    .aligned label+div.readonly,
    form .aligned p.help,
    form .aligned div.help,
    form .aligned input+p.help,
    form .aligned textarea+p.help,
    form .aligned select+p.help,
    form .aligned input+div.help,
    form .aligned textarea+div.help,
    form .aligned select+div.help,
    form .wide p,
    form .wide input+p.help,
    form .wide input+div.help {
        margin-left: 0;
        padding-left: 0 !important;
    }

    fieldset .field-box,
    fieldset .fieldBox {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .colMS .aligned .vLargeTextField,
    .colMS .aligned .vXMLLargeTextField,
    .colM .aligned .vLargeTextField,
    .colM .aligned .vXMLLargeTextField,
    .colM fieldset.wide .vLargeTextField,
    .colM fieldset.wide .vXMLLargeTextField,
    .vURLField,
    .vLargeTextField,
    .vXMLLargeTextField,
    .vTextField {
        width: 100% !important;
        max-width: 100%;
    }

    .submit-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        text-align: left;
    }

    .submit-row input,
    .submit-row input.default {
        margin-left: 0 !important;
    }

    .submit-row p.deletelink-box {
        float: none;
        width: 100%;
    }

    .tablex,
    .tablex2,
    .tablelist {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .subtable {
        display: table;
        width: 100% !important;
        table-layout: auto;
    }

    .ocorrencia_checklist_comentar {
        float: right !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    div.dataTables_wrapper {
        display: block;
        width: 100% !important;
        max-width: calc(100vw - 24px) !important;
        min-width: 0;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    div.dataTables_wrapper > table,
    div.dataTables_wrapper table.tablelist,
    div.dataTables_wrapper table.display,
    div.dataTables_wrapper table.dataTable {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    .add_content_sub div.dataTables_wrapper,
    .add_content_sub_no_border div.dataTables_wrapper,
    .tabsui div.dataTables_wrapper,
    .ui-tabs-panel div.dataTables_wrapper,
    #tabs div.dataTables_wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }

    form.formx,
    form.formx > fieldset,
    #cobrancalist {
        max-width: 100% !important;
        overflow-x: visible;
        box-sizing: border-box;
    }

    form.formx > fieldset > .add_content_sub {
        max-width: 100%;
        overflow-x: visible;
        box-sizing: border-box;
    }

    /* Inlines tabulares (Django): permitir scroll horizontal sem compactar colunas */
    .inline-group .tabular,
    .inline-group .tabular .inline-related,
    .inline-group .tabular fieldset.module {
        display: block;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .inline-group .tabular fieldset.module>table,
    .inline-group .tabular table {
        width: max-content !important;
        min-width: 100% !important;
        table-layout: auto !important;
    }

    .inline-group .tabular th,
    .inline-group .tabular td {
        white-space: nowrap;
    }

    /* Forms em tabs (ex.: cliente/search): impedir overflow horizontal */
    .tabsui,
    .tabsui .ui-tabs-panel,
    .tabsui .add_content_sub,
    .tabsui .add_content_sub_no_border,
    .tabsui fieldset {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    .tabsui .ui-tabs-panel input[type="text"],
    .tabsui .ui-tabs-panel input[type="email"],
    .tabsui .ui-tabs-panel input[type="number"],
    .tabsui .ui-tabs-panel input[type="search"],
    .tabsui .ui-tabs-panel input[type="tel"],
    .tabsui .ui-tabs-panel input[type="url"],
    .tabsui .ui-tabs-panel select,
    .tabsui .ui-tabs-panel textarea {
        /* width: 100% !important; */
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    .tabsui .ui-tabs-panel .select2-container,
    .tabsui .ui-tabs-panel .select2-container--classic,
    .tabsui .ui-tabs-panel .select2-container--default {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    .tabsui .ui-tabs-panel .select2-selection--single,
    .tabsui .ui-tabs-panel .select2-selection--multiple {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    .tabsui .ui-tabs-panel .select2-selection__rendered {
        max-width: calc(100% - 28px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .add_content_sub,
    .add_content_sub_no_border,
    .add_content_sub fieldset,
    .add_content_sub_no_border fieldset {
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    .add_content_sub input[type="text"],
    .add_content_sub input[type="email"],
    .add_content_sub input[type="number"],
    .add_content_sub input[type="search"],
    .add_content_sub input[type="tel"],
    .add_content_sub input[type="url"],
    .add_content_sub select,
    .add_content_sub textarea,
    .add_content_sub_no_border input[type="text"],
    .add_content_sub_no_border input[type="email"],
    .add_content_sub_no_border input[type="number"],
    .add_content_sub_no_border input[type="search"],
    .add_content_sub_no_border input[type="tel"],
    .add_content_sub_no_border input[type="url"],
    .add_content_sub_no_border select,
    .add_content_sub_no_border textarea {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }

    .add_content_sub .select2-container,
    .add_content_sub .select2-container--classic,
    .add_content_sub .select2-container--default,
    .add_content_sub_no_border .select2-container,
    .add_content_sub_no_border .select2-container--classic,
    .add_content_sub_no_border .select2-container--default {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }

    p[style*="margin-left"],
    p[style*="margin-left: 150px"],
    p[style*="margin-left:150px"] {
        margin-left: 0 !important;
    }

    /* Qualquer div/textarea/container com width inline fixa
       (ex: style="width:600px") precisa respeitar o viewport */
    .add_content_sub div[style*="width"],
    .add_content_sub textarea[style*="width"],
    .add_content_sub_no_border div[style*="width"],
    .add_content_sub_no_border textarea[style*="width"],
    #form div[style*="width:600"],
    #form div[style*="width: 600"],
    #form textarea[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Django selector widget (ManyToMany) em mobile */
    .selector {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        overflow: hidden;
    }

    .selector .selector-available,
    .selector .selector-chosen {
        float: none !important;
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
    }

    .selector select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 140px;
        height: clamp(140px, 28vh, 220px);
    }

    .selector ul.selector-chooser {
        float: none !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin: 4px auto !important;
        padding: 2px 6px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: auto;
        background: var(--color-bg-tertiary) !important;
        border: 1px solid var(--color-border-primary) !important;
        border-radius: 10px !important;
    }

    .selector ul.selector-chooser li {
        float: none !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .selector ul.selector-chooser a.selector-add,
    .selector ul.selector-chooser a.selector-remove,
    .add_content_sub .selector-add,
    .add_content_sub .selector-remove {
        margin-left: 0 !important;
    }

    .selector ul.selector-chooser .selector-add,
    .add_content_sub .selector-add {
        background: url('/static/admin/img/selector-icons.svg') 0 -32px no-repeat;
    }

    .selector ul.selector-chooser .active.selector-add,
    .add_content_sub .active.selector-add:focus,
    .add_content_sub .active.selector-add:hover {
        background-position: 0 -48px;
    }

    .selector ul.selector-chooser .selector-remove,
    .add_content_sub .selector-remove {
        background: url('/static/admin/img/selector-icons.svg') 0 0 no-repeat;
    }

    .selector ul.selector-chooser .active.selector-remove,
    .add_content_sub .active.selector-remove:focus,
    .add_content_sub .active.selector-remove:hover {
        background-position: 0 -16px;
    }

    .selector .selector-filter,
    .selector .selector-available input,
    .selector .selector-chosen input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .selector .selector-available input,
    .selector .selector-chosen input {
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    .selector .selector-filter label,
    .inline-group .aligned .selector .selector-filter label {
        display: block !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 0 6px !important;
    }

    /* Usuário > grupos/permissões: garantir largura total do widget em mobile */
    body.change-form .form-row.field-groups,
    body.change-form .form-row.field-user_permissions,
    body.change-form .form-row.field-groups > div,
    body.change-form .form-row.field-user_permissions > div,
    body.change-form .form-row.field-groups .related-widget-wrapper,
    body.change-form .form-row.field-user_permissions .related-widget-wrapper,
    body.change-form .form-row.field-groups .selector,
    body.change-form .form-row.field-user_permissions .selector {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.change-form .form-row.field-groups .related-widget-wrapper-link,
    body.change-form .form-row.field-user_permissions .related-widget-wrapper-link {
        display: inline-flex;
        margin-bottom: 6px;
    }

    .stacked ul.selector-chooser {
        width: 100% !important;
        margin: 4px 0 !important;
    }

    /* Override mobile para forms legados de Atendimento/Financeiro */
    #id_conteudo,
    #id_servicoprestado,
    #id_observacao,
    #id_anotacao,
    #id_anotacao_publica,
    #id_tipoos,
    #id_telefone,
    #id_contato,
    #id_contato_numero,
    #id_observacoes,
    #id_tipo,
    #id_clientecontrato,
    #id_protocolo_sms,
    .notificacao_usuarios,
    #id_motivoos,
    #id_pops,
    #id_nas,
    #id_grupos,
    #id_cobranca,
    #id_justificativa,
    #id_demonstrativo,
    #id_centrodecusto,
    #id_formapagamento,
    #id_pontorecebimento,
    #id_motivodesconto,
    #id_modo_pagamento,
    #id_ponto_recebimento,
    #id_motivocancela,
    #id_nome,
    #id_nome_social,
    #id_nomepai,
    #id_nomemae,
    #id_datanasc,
    #id_nomefantasia,
    #id_razaosocial,
    #id_respempresa,
    #id_ordenar,
    #id_portadores,
    #id_pcontas,
    #id_responsavelempresa,
    #id_email,
    #id_contato2,
    #id_logradouro,
    #id_bairro,
    #id_cidade,
    #id_cep,
    #id_uf,
    #id_numero,
    #id_complemento,
    #id_pontoreferencia,
    #id_map_ll,
    #id_informacoes,
    #id_status,
    #id_salvar,
    #id_endereco-uf,
    #id_endereco-logradouro,
    #id_endereco-bairro,
    #id_endereco-cidade,
    #id_endereco-numero,
    #id_endereco-cep,
    #id_endereco-map_ll,
    #id_enderecobairro,
    #id_enderecocidade,
    #id_cliente-observacao,
    #id_endereco-complemento,
    #id_endereco-pontoreferencia,
    #id_contatoemail-contato,
    #id_contatotelefone-contato,
    #id_contatotelefone-observacao,
    #id_contatoemail-tipo,
    #id_contatotelefone-tipo,
    #id_form_pagar-qrcode,
    #id_form_pagar-linha_digitavel,
    #id_qrcode,
    #id_linha_digitavel,
    #id_descricao_boleto,
    #id_codigo_banco,
    #id_cedente,
    #id_sacador_avalista,
    #id_cedente_endereco,
    #id_empresa,
    #id_desconto_venc_mensagem,
    #id_localpag,
    #id_descricao,
    #id_instrucoes1,
    #id_instrucoes2,
    #id_instrucoes3,
    #id_instrucoes4,
    #id_instrucoes5,
    #id_cobranca_tipo,
    #id_portador,
    #changelist-filter {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* CRM dashboard: evita quebra lateral em telas pequenas */
    .crm-dashboard-neo .charts {
        flex-direction: column;
    }

    .crm-dashboard-neo .search-report-left,
    .crm-dashboard-neo .search-report-right {
        float: none;
        width: 100%;
        min-width: 0;
    }

    .crm-dashboard-neo .add_content_sub {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .crm-dashboard-neo .detalhestatus th,
    .crm-dashboard-neo .detalhestatus td {
        white-space: nowrap;
    }

    #status_block {
        width: auto;
        max-width: 100%;
        padding: 12px 12px 12px 42px;
    }

    .ui-dialog {
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        left: 8px !important;
    }

    .ui-dialog .ui-dialog-content {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }

    #ui-id-6>div.ui-state-highlight.ui-corner-all,
    #ui-id-9>div.ui-state-highlight.ui-corner-all,
    #ui-id-16>div.ui-state-highlight.ui-corner-all,
    #ui-id-19>div.ui-state-highlight.ui-corner-all {
        margin-top: 35px !important;
    }

    #ocorrencias>div:nth-child(3) {
        margin-bottom: 15px;
    }

    .select2-container,
    .select2-container[style],
    .select2-container--classic,
    .select2-container--default {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body>.select2-container.select2-container--open,
    body>.select2-container.select2-container--open[style] {
        width: calc(100vw - 45px) !important;
        max-width: calc(100vw - 45px) !important;
        min-width: 0 !important;
        left: 15px !important;
        box-sizing: border-box !important;
    }

    /* 3) Dropdown do Select2 aberto */
    body>.select2-container.select2-container--open .select2-dropdown,
    body>.select2-container.select2-container--open .select2-dropdown[style] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 4) Resultados e campo de busca dentro do dropdown */
    body>.select2-container.select2-container--open .select2-results,
    body>.select2-container.select2-container--open .select2-results__options,
    body>.select2-container.select2-container--open .select2-search,
    body>.select2-container.select2-container--open .select2-search__field {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 5) Internos do container: selection e rendered text */
    .select2-container .selection,
    .select2-container .select2-selection--single,
    .select2-container .select2-selection--multiple {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .select2-container .select2-selection__rendered {
        max-width: calc(100% - 28px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #consultar-span{
        font-size: 14px !important;
    }

    #dtpaginacao {
        float: none !important;
        width: 100% !important;
        margin: 8px 0 12px 0 !important;
        padding: 4px 0 !important;
        text-align: left !important;
    }

    #dtpaginacao ul {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: .5rem !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #dtpaginacao li {
        display: inline-block !important;
        margin: 0 !important;
    }

    #dtpaginacao li a {
        vertical-align: middle !important;
    }

    #main > span{
        margin-bottom: 5px;
    }

    #main > div:nth-child(13),
    #main > div:nth-child(15) {
        width: 100% !important;
    }

    #ocorrencia,
    #ordemservicoeditar {
        display: flex !important;
        flex-direction: column !important;
    }

    #ocorrencia #form,
    #ocorrencia #comentarios
    #ordemservicoeditar #os-form,
    #ordemservicoeditar #os-form .formx,
    #ordemservicoeditar #comentario-and-assinaturas,
    #os-form {
        width: 100% !important;
    }



}


#detalhes > a.button.gray,
#detalhes > a:nth-child(16),
#detalhes > a:nth-child(22) {
    width: 100% !important;
}

/* Setup 2FA: card do QRCode no estilo NEO */
.setup2fa-qrcode-card {
    margin: 25px auto;
    width: 100%;
    max-width: calc(100% - 15px);
    padding: 12px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-default);
    box-shadow: var(--box-shadow-soft);
}

.setup2fa-qrcode-img {
    width: 100%;
    max-width: 230px;
    height: auto;
    display: inline-block;
}

.radius-nas-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.radius-nas-actions-top {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: 8px;
}

.radius-nas-actions > .button,
.radius-nas-actions > a.button,
.radius-nas-actions > a#reloadradiusdo {
    flex: 0 0 auto;
}

.radius-nas-actions .button,
 .radius-nas-actions a.button,
 .radius-nas-actions a#linkadd,
 .radius-nas-actions a#reloadradiusdo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.radius-nas-actions-top a#linkadd {
    float: none !important;
    margin: 0 !important;
}

/* --- NFCom/NFSe KPI cards (NEO) --- */
#cardsView.nfcom-kpi-grid {
    gap: 13px;
    margin-top: 13px;
    margin-bottom: 65px;
}

#cardsView .nfcom-kpi-card {
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--box-shadow-soft);
    padding: 14px 16px !important;
}

#cardsView .nfcom-kpi-card .nfcom-kpi-value,
#cardsView .nfcom-kpi-card .nfcom-kpi-title,
#cardsView .nfcom-kpi-card .nfcom-kpi-meta {
    line-height: 1.3 !important;
    margin: 0 !important;
}

#cardsView .nfcom-kpi-card .nfcom-kpi-title {
    margin-bottom: 4px !important;
}

#cardsView .nfcom-kpi-card .nfcom-kpi-meta + .nfcom-kpi-meta {
    margin-top: 4px !important;
}

#cardsView .nfcom-kpi-card .nfcom-kpi-icon-wrap {
    top: 12px !important;
    right: 12px !important;
    padding: 8px !important;
}

@media (max-width: 640px) {
    body {
        font-size: 12px;
    }

    .setup2fa-qrcode-card {
        margin: 12px auto;
        padding: 10px;
        max-width: 100%;
    }


    .radius-nas-actions-top {
        justify-content: flex-end;
        width: 100%;
    }

    .radius-nas-actions-top a#linkadd {
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }

    .radius-nas-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    .radius-nas-actions > .button,
    .radius-nas-actions > a.button,
    .radius-nas-actions > a#reloadradiusdo {
        flex: 0 0 auto;
    }

    .radius-nas-actions .button,
    .radius-nas-actions a.button,
    .radius-nas-actions a#linkadd,
    .radius-nas-actions a#reloadradiusdo {
        min-height: 36px;
        float: none !important;
        margin: 0 !important;
        box-sizing: border-box;
        text-align: center;
    }

    .radius-nas-actions-top {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .radius-nas-actions-top a#linkadd {
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
    }
    #header-left {
        grid-template-columns: 1fr;
    }

    #header-right ul,
    #headertop-right ul {
        gap: 4px;
    }

    #header-right ul li {
        padding: 4px 7px;
    }

    #headertop-left>ul.sf-menu {
        gap: 4px;
    }

    #headertop-left>ul.sf-menu>li {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        width: auto;
    }

    #headertop-left>ul.sf-menu>li>a:link,
    #headertop-left>ul.sf-menu>li>a:visited,
    #headertop-left>ul.sf-menu>li>a:active {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
        box-sizing: border-box;
    }

    body.change-list #content-main>.object-tools {
        gap: 6px;
    }

    body.change-list #content-main>.object-tools li {
        flex: 1 1 calc(50% - 3px);
        min-width: 0;
    }

    body.change-list #content-main>.object-tools a,
    body.change-list #content-main>.object-tools a:link,
    body.change-list #content-main>.object-tools a:visited {
        width: 100%;
        justify-content: center;
    }

    body.change-list #changelist {
        padding: 6px;
    }

    body.change-list #changelist .actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        align-items: stretch;
        padding: 8px;
    }

    body.change-list #changelist .actions label {
        margin: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body.change-list #changelist .actions select,
    body.change-list #changelist .actions .button,
    body.change-list #changelist .actions .action-counter {
        width: 100% !important;
        margin: 0;
    }

    body.change-list #changelist .actions .button {
        min-height: 34px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .radius-nas-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .radius-nas-actions-top {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .radius-nas-actions .button,
    .radius-nas-actions a.button,
    .radius-nas-actions a#linkadd,
    .radius-nas-actions a#reloadradiusdo {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 36px;
        float: none !important;
        margin: 0 !important;
        box-sizing: border-box;
        text-align: center;
    }

    .radius-nas-actions-top a#linkadd {
        width: auto !important;
        max-width: 100% !important;
        min-height: 36px;
        float: none !important;
        margin: 0 !important;
    }

    #header-left img {
        width: 64px;
    }

    #header-right ul li {
        max-width: 100%;
    }

    #clientebusca_top {
        grid-template-columns: 1fr;
    }

    #content-main {
        padding: 6px;
    }

    div.dataTables_wrapper .dataTables_filter,
    div.dataTables_wrapper .dataTables_paginate {
        text-align: left;
    }

    div.dataTables_wrapper .dataTables_paginate .paginate_button,
    div.dataTables_wrapper .dataTables_paginate .fg-button.ui-button {
        margin-top: 4px;
        padding: 0 8px;
    }

    .jq-dropdown .jq-dropdown-menu,
    .jq-dropdown .jq-dropdown-panel {
        width: min(360px, calc(100vw - 20px));
        min-width: 0;
        max-width: calc(100vw - 20px);
    }
}

@media (max-width: 640px) {
    #consultar_div {
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 95px !important;
        width: calc(75% - 20px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }
    #consultar-span, #filter_online_span, #consultar-button {
        display: block !important;
        width: 75% !important;
        text-align: center !important;
        white-space: normal !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    #consultar-span {
        margin-right: 0 !important;
        padding: 8px !important;
    }
    #consultar-button {
        margin: 0 !important;
        padding: 8px !important;
    }

    #id_onuargs,
    #id_refresh_params,
    #id_conexao_params,
    #id_wifi_params,
    #id_wifi_virtual_params,
    #id_lan_connected_params,
    #id_wlan_connected_params,
    #id_config,
    #id_parametros,
    #id_params_json,
    #id_djson,
    #id_result_ {
        width: 100% !important;
    }

    #tabs > div.container{
        flex-direction: column;
    }

    #formsearch{
        display: block;
    }

    .submit-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px;
        box-sizing: border-box;
    }

    .submit-row input,
    .submit-row input.default,
    .submit-row p.deletelink-box,
    .submit-row a.deletelink {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    .submit-row p.deletelink-box {
        display: block !important;
    }

    #id_old_password,
    #id_new_password1,
    #id_new_password2,
    #password-requirements > *,
    #id_password1,
    #id_password2 {
        width: 100% !important;
    }

}

.box-header {
    gap: 0 !important;
}

#box.box-header div:first-child {
    width: max-content;
    color: var(--color-text-secondary);
    font-size: var(--text-size-default) !important;
    padding: 8px;
}

#box > div:nth-child(3) {
    padding: 8px;
}

#carnescliente>a.button.blue[style*="float: right"] {
    margin-bottom: 10px;
    margin-top: 10px;
}

#carnescliente #accordion_carne {
    clear: both;
}

.tooltipster-default {
    border-radius: 6px !important;
    border: none !important;
    background: #1c1c26 !important;
    color: #f0f0f0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(232, 113, 26, 0.3) !important;
}

.tooltipster-default .tooltipster-content {
    font-family: var(--font-family-base) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 7px 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

/* aviso de atualizacao do sistema */
#sgpoutofdate {
    cursor: pointer;
    padding: 6.5px;
    padding-right: 25px;
    color: #000;
    background-color: #ffc107;
    position: fixed;
    bottom: 0px;
    right: 0;
    z-index: 9999;
    text-align: left;
    border-radius: 5px 0 0 0;
}

#sgpoutofdate strong {
    display: inline;
    font-size: inherit;
    font-weight: 700;
    margin-bottom: 0;
}

#sgpoutofdatebtn {
    background-color: #ffa407;
    position: fixed;
    bottom: 0px;
    right: 0;
    z-index: 9999;
    width: 15px;
    display: block;
    padding: 14px 2.5px;
    cursor: pointer;
}

#sgpoutofdate:hover {
    background-color: #b48a08;
}

/* Botao de historico (sistema) em dialogs */
#formdialog > a {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border-primary);
    color: var(--color-text);
    border-radius: 6px;
    box-shadow: var(--box-shadow-soft);
    transition: all 0.2s ease-in-out;
}

#formdialog > a:hover {
    background: var(--color-bg-hover) !important;
    transform: translateY(-1px);
}

#main > div:nth-child(11) > div.add_content_sub > ul > li:nth-child(5) > span.help.span-help-media-uso{
    margin-left: 0 !important;
}

#gateway_detail #box{
    border: 0 !important;
    box-shadow: none !important;
}

#box > table {
    width: stretch !important;
}

.comentario{
    padding: 10px !important;
    border-radius: var(--radius-default) !important;
    background-color: var(--color-bg) !important;
    box-shadow: var(--box-shadow-soft);
}

.comentario > .nome {
    border: none !important;
}

#os_comentario {
    background: var(--color-bg-secondary) !important;
    border-radius: var(--radius-default) !important;

}

#ordemservicoeditar {
    margin-top: 20px;
}

#os-form > form > fieldset > div.add_content_sub > div.add_content_sub > table > tbody > tr > td:nth-child(3) {
    width: 50px !important;
}

.checklist_container {
    margin: 0 5px;
}

.span-help-media-uso {
    margin-left: 0;
}


@media (max-width: 1920px) {

    #comentarios,
    #os-assinaturas {
        margin-left: 10px !important;
    }

}

/* ========================================
   jQuery UI Datepicker - estilo NEO
   ======================================== */
.ui-datepicker {
    background: var(--color-bg) !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 12px !important;
    box-shadow: var(--box-shadow-popover) !important;
    padding: 8px !important;
    width: auto !important;
    color: var(--color-text-primary) !important;
    font-family: var(--font-family-base) !important;
    font-size: 13px !important;
}

.ui-datepicker .ui-datepicker-header {
    background: transparent !important;
    border: 0 !important;
    padding: 4px 0 8px 0 !important;
    position: relative;
    color: var(--color-text-primary) !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 4px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.ui-datepicker .ui-datepicker-prev {
    left: 4px !important;
}

.ui-datepicker .ui-datepicker-next {
    right: 4px !important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-primary) !important;
    top: 4px !important;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    background-image: none !important;
    text-indent: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    /* esconde o texto original "Prev"/"Next" para mostrar só o símbolo do ::before */
    font-size: 0 !important;
}

.ui-datepicker .ui-datepicker-prev span::before,
.ui-datepicker .ui-datepicker-next span::before {
    font: 700 16px/1 var(--font-family-base);
    color: inherit;
}

.ui-datepicker .ui-datepicker-prev span::before {
    content: "‹";
}

.ui-datepicker .ui-datepicker-next span::before {
    content: "›";
}

.ui-datepicker .ui-datepicker-prev:hover span,
.ui-datepicker .ui-datepicker-next:hover span {
    color: var(--color-text-primary);
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 36px !important;
    line-height: 28px;
    text-align: center;
    font-weight: 700;
    color: var(--color-text-primary);
}

.ui-datepicker .ui-datepicker-title select {
    margin: 0 2px !important;
    padding: 2px 6px !important;
    min-height: 26px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

.ui-datepicker .ui-datepicker-calendar {
    border-collapse: separate;
    border-spacing: 2px;
    margin: 0 !important;
}

.ui-datepicker .ui-datepicker-calendar th {
    padding: 6px 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    border: 0 !important;
}

.ui-datepicker .ui-datepicker-calendar td {
    padding: 1px !important;
    background: transparent !important;
    border: 0 !important;
}

.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    margin: 0 auto;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--color-text-primary) !important;
    font-weight: 500;
    text-align: center;
    text-decoration: none !important;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.ui-datepicker .ui-datepicker-calendar td a:hover {
    background: var(--color-hover-primary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-primary) !important;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today span {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-accent) !important;
    font-weight: 700;
    border-color: var(--color-accent) !important;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a,
.ui-datepicker .ui-datepicker-calendar td .ui-state-active,
.ui-datepicker .ui-datepicker-calendar td .ui-state-highlight.ui-state-active {
    background: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
    border-color: var(--color-accent) !important;
    font-weight: 700;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a {
    color: var(--color-text-secondary) !important;
    opacity: .55;
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end a {
    color: var(--color-text-secondary) !important;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background: transparent !important;
    border-top: 1px solid var(--color-border-secondary) !important;
    margin-top: 6px !important;
    padding: 8px 0 2px 0 !important;
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    margin: 0 !important;
    padding: 6px 12px !important;
    border: 1px solid var(--color-border-primary) !important;
    border-radius: 8px !important;
    background: var(--color-bg) !important;
    color: var(--color-text-primary) !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: var(--color-hover-primary) !important;
    border-color: var(--color-border-hover-strong) !important;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-priority-primary {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-primary-dark) !important;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-priority-primary:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

/* multi-month layout */
.ui-datepicker.ui-datepicker-multi {
    width: auto !important;
}

.ui-datepicker-multi .ui-datepicker-group {
    padding: 0 4px;
}

/* cliente_contratos_acessorest — card de detalhe do acesso REST do contrato */
.acessorest-card {
    position: relative;
    padding: 8px 10px;
    border: 1px dashed var(--color-border-primary);
    border-radius: 6px;
    margin-bottom: -8.5px;
}

.acessorest-card .acessorest-copy {
    position: absolute;
    top: 8px;
    right: 8px;
}

.acessorest-card .acessorest-info {
    line-height: 1.5;
}

.acessorest-card .acessorest-info > div {
    padding: 0;
    margin: 0;
}

.acessorest-card .acessorest-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.acessorest-card .acessorest-actions .buttonxs {
    margin: 0 !important;
}

/* ========================================
   CHANGELOG
   ======================================== */
.changelog-neo {
    --cl-bg: var(--color-bg, #ffffff);
    --cl-bg-soft: var(--color-bg-secondary, #f5f5f5);
    --cl-bg-card: var(--color-bg-tertiary, #fafafa);
    --cl-text: var(--color-text-primary, #171717);
    --cl-text-muted: var(--color-text-secondary, #737373);
    --cl-border: var(--color-border-primary, #cccccc);
    --cl-border-soft: var(--color-border-secondary, #ebebeb);
    --cl-accent: var(--color-accent, #e8590c);
    --cl-radius: var(--radius-default, .5em);
    --cl-radius-sm: var(--radius-sm, .4em);
    --cl-shadow: var(--box-shadow-default, 0 4px 24px 0 rgba(17, 24, 39, 0.12));
    --cl-font: var(--font-family-base, "Noto Sans", "Roboto", "Segoe UI", sans-serif);

    --cl-badge-n: #2563eb;
    --cl-badge-a: #0d9488;
    --cl-badge-c: #d97706;
    --cl-badge-d: #dc2626;

    font-family: var(--cl-font);
    color: var(--cl-text);
    background: var(--cl-bg);
    padding: 16px 18px 18px 18px;
}

.changelog-neo * {
    box-sizing: border-box;
}

.changelog-neo .changelog-content > ul,
.changelog-neo ul.changelog-items,
.changelog-neo ul.changelog-items ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.changelog-neo .changelog-content > ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.changelog-neo .changelog-version {
    background: var(--cl-bg-card);
    border: 1px solid var(--cl-border-soft);
    border-radius: var(--cl-radius);
    padding: 14px 16px 12px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow .2s ease, border-color .2s ease;
}

.changelog-neo .changelog-version:hover {
    border-color: var(--cl-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.changelog-neo .version-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--cl-border-soft);
}

.changelog-neo .version-info h4 {
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--cl-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.changelog-neo .version-info .version-tag,
.changelog-neo .version-info .version-tag i {
    color: #ffffff !important;
}

.changelog-neo .version-info .version-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--cl-accent);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.changelog-neo .version-info .release-date {
    color: var(--cl-text-muted);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.changelog-neo .version-info .release-date i {
    color: var(--cl-accent);
    font-size: 14px;
}

.changelog-neo .info-gerais {
    width: 100%;
    border: 1px solid var(--cl-border-soft);
    border-radius: var(--cl-radius-sm);
    background: #ffffff;
    margin: 8px 0 14px 0;
}

.changelog-neo .changelog-category {
    padding: 0 !important;
    margin: 12px 0 0 0 !important;
}

.changelog-neo .changelog-category:first-child {
    margin-top: 0 !important;
}

.changelog-neo .changelog-category h5 {
    margin: 0 0 6px 0;
    padding: 0 0 4px 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--cl-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px dashed var(--cl-border-soft);
}

.changelog-neo .changelog-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cl-text);
    border-bottom: 1px solid transparent;
}

.changelog-neo .changelog-item + .changelog-item {
    border-top: 1px solid var(--cl-border-soft);
}

.changelog-neo .changelog-item > div {
    flex: 1 1 auto;
    min-width: 0;
}

.changelog-neo .changelog-item span,
.changelog-neo .changelog-item p,
.changelog-neo .changelog-item div {
    color: inherit;
}

.changelog-neo .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 64px;
    padding: 3px 9px;
    margin-top: 1px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    color: #ffffff !important;
    background: var(--cl-text-muted);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
}

.changelog-neo .badge-n { background: var(--cl-badge-n) !important; }
.changelog-neo .badge-a { background: var(--cl-badge-a) !important; }
.changelog-neo .badge-c { background: var(--cl-badge-c) !important; }
.changelog-neo .badge-d { background: var(--cl-badge-d) !important; }

.changelog-neo .cl-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    cursor: help;
    vertical-align: middle;
    position: static !important;
    opacity: 1 !important;
}

.changelog-neo .cl-tip i {
    color: var(--cl-accent);
    font-size: 14px;
    line-height: 1;
}

.changelog-neo .pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    margin-top: 16px;
    background: var(--cl-bg-soft);
    border: 1px solid var(--cl-border-soft);
    border-radius: var(--cl-radius);
    font-size: 12px;
    color: var(--cl-text-muted);
}

.changelog-neo .pagination-info {
    padding: 0;
}

.changelog-neo .pagination-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.changelog-neo .pagination-buttons a,
.changelog-neo .pagination-buttons span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 5px 10px;
    border-radius: var(--cl-radius-sm);
    background: var(--cl-bg);
    color: var(--cl-text) !important;
    border: 1px solid var(--cl-border-soft);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.changelog-neo .pagination-buttons a:hover {
    background: var(--cl-accent);
    color: #ffffff !important;
    border-color: var(--cl-accent);
}

.changelog-neo .pagination-buttons .current-page {
    background: var(--cl-accent);
    color: #ffffff !important;
    border-color: var(--cl-accent);
}

.changelog-neo .pagination-buttons .disabled {
    background: transparent;
    color: var(--cl-text-muted) !important;
    border-color: var(--cl-border-soft);
    opacity: .55;
    cursor: not-allowed;
}

.changelog-neo .changelog-pagination.loading {
    opacity: 0.55;
    cursor: progress;
}

.changelog-neo .cl-empty {
    padding: 24px;
    text-align: center;
    color: var(--cl-text-muted);
    background: var(--cl-bg-soft);
    border: 1px dashed var(--cl-border);
    border-radius: var(--cl-radius);
}

@media (max-width: 640px) {
    .changelog-neo {
        padding: 10px;
    }
    .changelog-neo .pagination-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .changelog-neo .pagination-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Ícones de ação grandes (coluna lateral em detalhes do título e similares)
   Estilo neo: pill neutro (cinza) por padrão, accent laranja TSMX só nas CTAs
   principais. Hover pinta o stroke em laranja pra dar feedback sem poluir.
   ========================================================================== */
/* Layout: ícones e tabela são filhos do mesmo `#box`, compartilhando o mesmo
   contexto de border + padding. Assim o `align-items: flex-start` alinha
   naturalmente o topo do primeiro ícone com a primeira linha da tabela.
   `padding-right` extra dá respiro entre o ícone e a borda direita da box.
   Segundo seletor (210 specificity) precisa vencer `#titulo_detail #box`
   (200) que define `padding: 4px` no contexto onde o template é renderizado. */
#box.box-with-actions,
#titulo_detail #box.box-with-actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 8px;
    padding-right: 12px;
}

/* min-width: 0 + overflow-x permite a tabela encolher quando o dialog é
   redimensionado menor que a largura natural (cells com width fixo, etc.). */
.box-with-actions > .box-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

/* Quebra de palavras longas (linha digitável, código de barras, idtransacao do
   gateway, etc.) — sem isso a tabela não shrink em larguras pequenas. */
.box-with-actions > .box-main td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Sticky pra manter os ícones visíveis ao rolar dialogs com tabela longa
   (ex.: títulos com Pagamentos Parciais, NFs, vários títulos no gateway).
   `align-self: flex-start` é necessário pro sticky funcionar dentro de flex. */
.titulo-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    align-items: center;
    flex: 0 0 auto;
    align-self: flex-start;
    position: sticky;
    top: 8px;
}

/* Cores são parametrizadas via custom properties (--badge-bg, --badge-fg,
   --badge-bg-hover). Cada modifier `.titulo-action--*` redefine essas vars
   com pares -100/-800 (padrão soft pill do neo). Sem modifier, fallback é
   neutro cinza com hover orange (TSMX accent).
   Os 3 seletores (`.titulo-action`, `:link`, `:visited`) sobem a especificidade
   pra 20 — necessário pra vencer `a:link, a:visited { color: ... !important }`
   global do tema dark (neo_dark:2213, specificity 11). */
.titulo-action,
.titulo-action:link,
.titulo-action:visited {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--badge-bg, var(--color-bg-secondary, #f5f5f5));
    color: var(--badge-fg, var(--color-text-muted, #525252)) !important;
    border: 1px solid var(--color-border-secondary, #ebebeb);
    box-shadow: var(--box-shadow-soft, 0 1px 2px rgba(17, 24, 39, 0.06), 0 1px 1px rgba(17, 24, 39, 0.04));
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0;
}

.titulo-action:hover,
.titulo-action:focus {
    background: var(--badge-bg-hover, var(--color-bg, #ffffff));
    border-color: var(--color-border-primary, #cccccc);
    /* !important porque o tema dark tem `a:hover { color: ... !important }` global.
       Mantém --badge-fg (cor do ícone) no hover; só fallback (sem variant) usa accent. */
    color: var(--badge-fg, var(--color-accent, #e8590c)) !important;
    box-shadow: var(--box-shadow-medium, 0 1px 3px rgba(17, 24, 39, 0.08), 0 4px 12px rgba(17, 24, 39, 0.05));
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* ---------------------------------------------------------------------------
   Variantes coloridas — soft pill (Tailwind -100 bg + -800 fg, -200 hover)
   alinhado com o padrão dos badges do neo (info/danger/warning/note).
   --------------------------------------------------------------------------- */

/* Recebimento — verde (positivo, entrada de dinheiro) */
.titulo-action--receive {
    --badge-bg: #dcfce7;
    --badge-fg: #166534;
    --badge-bg-hover: #bbf7d0;
}

/* Imprimir título — azul (institucional) */
.titulo-action--print {
    --badge-bg: #dbeafe;
    --badge-fg: #1e40af;
    --badge-bg-hover: #bfdbfe;
}

/* PIX (imprimir e compartilhar) — ciano (associação visual com PIX) */
.titulo-action--print-pix,
.titulo-action--share-pix {
    --badge-bg: #cffafe;
    --badge-fg: #155e75;
    --badge-bg-hover: #a5f3fc;
}

/* Imprimir NF — âmbar (fiscal/oficial). Hardcoded -100/-800/-200 (não usar
   `--color-tab-badge-warning-*`: em dark esse token vira rgba semi-transparente
   escuro e cria mismatch com o hover hardcoded das outras variantes). */
.titulo-action--print-nf {
    --badge-bg: #fef3c7;
    --badge-fg: #92400e;
    --badge-bg-hover: #fde68a;
}

/* E-mail — laranja TSMX. Hardcoded por consistência (ver nota acima). */
.titulo-action--email {
    --badge-bg: #ffedd5;
    --badge-fg: #9a3412;
    --badge-bg-hover: #fed7aa;
}

/* SMS — roxo (canal de comunicação alternativo) */
.titulo-action--sms {
    --badge-bg: #ede9fe;
    --badge-fg: #5b21b6;
    --badge-bg-hover: #ddd6fe;
}

/* Compartilhar boleto — esmeralda (verde diferente do receive pra distinguir) */
.titulo-action--share {
    --badge-bg: #d1fae5;
    --badge-fg: #065f46;
    --badge-bg-hover: #a7f3d0;
}

/* Compartilhar cobrança — rosa (variante de share) */
.titulo-action--share-cob {
    --badge-bg: #fce7f3;
    --badge-fg: #9f1239;
    --badge-bg-hover: #fbcfe8;
}

/* Gerar NF — vermelho (ação fiscal importante). Hardcoded por consistência. */
.titulo-action--gerar-nf {
    --badge-bg: #fee2e2;
    --badge-fg: #991b1b;
    --badge-bg-hover: #fecaca;
}

.titulo-action:active {
    box-shadow: var(--box-shadow-soft, 0 1px 2px rgba(17, 24, 39, 0.06));
    transform: translateY(0);
}

.titulo-action svg {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    display: block;
}

.highcharts-credits {
    display: none !important;
}

#onu_detail{
    color: var(--onu-detail-color);
}

#sgp_read_only_database {
    letter-spacing: 2.5px;
    font-size: 12px;
    text-transform: uppercase;
    padding: 2.5px;
    background-color: #991700;
    color: white;
    font-weight: bold;
    font-family: monospace;
}

option:disabled {
    color: var(--color-text-option-disabled);
}

.info-doc {
    margin-top: 10px;
    font-size: var(--text-size-md);
    border: var(--border-default);
    box-shadow: var(--box-shadow-soft);
    border-radius: var(--radius-default);
    padding: 10px;
    background-color: #fff1e6;
    color: var(--color-text);
    max-width: 100%;
}

.calendarbox {
    z-index: 2;
}

#id_parcelas {
    width: 60px !important;
}