.codex-auth { border:1px solid #dbe5ef; border-radius:12px; padding:18px; background:#f8fafd; }
.codex-auth legend { float:none; width:auto; margin:0 0 14px; padding:0; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:#7a889b; }
/* Os dois modos viram cartões selecionáveis em vez de rádios em linha: cabem título e explicação de cada
   modo, e o rótulo para de quebrar em duas linhas quando o texto cresce ("Token de assinatura"). */
.auth-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.auth-option { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; margin:0; padding:12px 14px; border:1px solid #dde6ef; border-radius:10px; background:#fff; cursor:pointer; transition:.15s ease; }
.auth-option:hover { border-color:#a9cee7; }
.auth-option:has(input:checked) { border-color:var(--blue); background:#f4faff; box-shadow:0 0 0 3px rgba(22,139,209,.09); }
.auth-option:has(input:focus-visible) { outline:2px solid var(--blue); outline-offset:2px; }
.auth-option input { margin:2px 0 0; }
.auth-option > span { display:flex; flex-direction:column; gap:3px; min-width:0; }
.auth-option strong { font-size:.74rem; color:var(--ink); }
.auth-option small { font-size:.6rem; font-weight:500; line-height:1.45; color:#8190a2; }
.auth-option code { font-size:.58rem; color:#41546b; background:#eef2f7; border-radius:4px; padding:1px 4px; }
.auth-note { margin:0; padding:12px 14px; border:1px solid #d8e8f6; border-radius:10px; background:#f2f8fd; color:#3f6c92; font-size:.65rem; line-height:1.55; }
@media(max-width:575px) { .auth-options { grid-template-columns:1fr; } }.device-code { padding:16px; border:1px dashed #91b9d5; border-radius:10px; background:#f0f8fd; font:800 1.25rem ui-monospace,monospace; letter-spacing:.12em; text-align:center; }
.configuration-page .page-header { align-items: center; }
.success-banner { display:flex; align-items:center; gap:13px; padding:15px 18px; margin-bottom:18px; background:#e8f8f2; border:1px solid #c9ecdf; border-radius:12px; color:#147a5c; }
.success-banner > span { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#18a97c; color:#fff; font-weight:800; }
.success-banner strong { font-size:.76rem; }.success-banner p { font-size:.68rem; margin:2px 0 0; }
.setup-steps { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:20px; overflow:hidden; }
.setup-steps a { display:flex; align-items:center; gap:11px; padding:17px 19px; color:var(--ink); border-right:1px solid var(--line); }
.setup-steps a:last-child { border:0; }.setup-steps b { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#eaf5fd; color:var(--blue); font-size:.7rem; }
.setup-steps span { display:flex; flex-direction:column; font-size:.71rem; font-weight:750; }.setup-steps small { color:#8492a4; font-size:.56rem; font-weight:500; margin-top:2px; }
.setup-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start; }.setup-forms { display:flex; flex-direction:column; gap:12px; }
.setup-card { background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; }.setup-card[open] { box-shadow:0 10px 30px rgba(14,38,68,.06); border-color:#c9dce9; }
.setup-card summary { display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:20px 22px; cursor:pointer; list-style:none; }.setup-card summary::-webkit-details-marker { display:none; }
.setup-index { font:700 .65rem ui-monospace,monospace; color:var(--blue); background:#eaf5fd; border-radius:9px; width:37px; height:37px; display:grid; place-items:center; }
.setup-card summary small { font-size:.52rem; letter-spacing:.13em; color:#8795a6; font-weight:800; }.setup-card summary h2 { font-size:1rem; margin:2px 0; }.setup-card summary p { font-size:.64rem; color:#8492a4; margin:0; }
.chevron { color:#7d8da0; }.setup-card[open] .chevron { transform:rotate(180deg); }.setup-body { border-top:1px solid #e7edf3; padding:25px 25px 0; }/* Flex em vez de grid de 2 colunas fixas. Com grid, um número ímpar de campos deixa uma célula
   vazia — e a contagem varia em tempo de execução, porque vários campos são condicionais no Razor
   (o Tenant só aparece para SystemAdministrator, por exemplo). O flex-wrap distribui a sobra na
   última linha, então um campo sozinho estica e ocupa a largura toda: nunca sobra buraco,
   independente de quantos campos o Razor renderizar.
   Base de 45% garante no máximo 2 por linha (3x45% > 100%), preservando o ritmo de duas colunas. */
.form-grid { display:flex; flex-wrap:wrap; gap:17px; }.form-grid > * { flex:1 1 45%; min-width:200px; }.form-grid > .field-wide { flex-basis:100%; }.field { display:flex; flex-direction:column; gap:6px; font-size:.68rem; font-weight:700; color:#41546b; }.field-wide { grid-column:1/-1; }
.field input,.field select,.field textarea { width:100%; border:1px solid #cfdae5; border-radius:9px; background:#fbfcfe; padding:11px 12px; font:500 .75rem Inter,"Segoe UI",sans-serif; color:var(--ink); outline:0; }
.field textarea { resize:vertical; line-height:1.55; }.field input:focus,.field select:focus,.field textarea:focus { border-color:#168bd1; box-shadow:0 0 0 3px rgba(22,139,209,.09); background:#fff; }
.field > small { font-size:.56rem; color:#8a98a9; font-weight:500; }.field-validation-error,.validation-summary { color:#c83949; font-size:.6rem; font-weight:600; }.validation-summary ul { margin:0 0 15px; padding:10px 25px; background:#feedef; border-radius:8px; }
.check-field { display:flex; gap:9px; align-items:center; align-self:end; padding:9px 0; }.check-field > span { display:flex; flex-direction:column; }.check-field strong { font-size:.68rem; }.check-field small { font-size:.56rem; color:#8996a7; }
.check-group { display:flex; flex-direction:column; gap:2px; border:1px solid #e2e9f1; border-radius:10px; padding:4px 14px; background:#fbfcfe; }.check-group > legend { float:left; width:100%; margin:0 0 2px; padding:0; font-size:.68rem; font-weight:700; color:#41546b; }.check-group .check-field { align-self:auto; padding:7px 0; }.check-group .check-field + .check-field { border-top:1px solid #eef2f7; }
.form-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:23px -25px 0; padding:15px 25px; background:#f8fafc; border-top:1px solid #e7edf3; }.form-footer > span { font-size:.58rem; color:#8492a4; }
.production-warning { display:flex; gap:12px; background:#fff8e8; border:1px solid #f2dfae; border-radius:10px; padding:13px 15px; margin-bottom:18px; color:#765a19; }.production-warning > span { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#f2c85d; font-weight:900; }.production-warning strong { font-size:.67rem; }.production-warning p { font-size:.59rem; margin:2px 0 0; }
.setup-summary { position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; }.summary-body { display:grid; grid-template-columns:1fr 1fr; padding:15px; }.summary-body > div { display:flex; flex-direction:column; padding:13px; border:1px solid #edf1f5; margin:-.5px; }.summary-body span { font-size:.57rem; color:#8492a4; }.summary-body strong { font-size:1.35rem; margin-top:4px; }
.summary-list { padding:5px 20px 22px; }.summary-list h3 { font-size:.6rem; letter-spacing:.1em; color:#8492a4; text-transform:uppercase; margin:20px 0 10px; }.summary-list > p { font-size:.62rem; color:#98a4b2; }.summary-list > div { display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid #edf1f5; }.summary-list > div > span:last-child { display:flex; flex-direction:column; min-width:0; }.summary-list strong { font-size:.67rem; }.summary-list small { font-size:.55rem; color:#8795a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wizard-modal .modal-dialog { max-width:1180px; }.wizard-body { background:#f3f7fb; padding:22px; max-height:calc(100vh - 150px); overflow:auto; }
@media(max-width:991px) { .setup-layout { grid-template-columns:1fr; }.setup-summary { position:static; }.setup-steps { grid-template-columns:1fr 1fr; } }
@media(max-width:767px) { .setup-steps { grid-template-columns:1fr; }.setup-steps a { border-right:0; border-bottom:1px solid var(--line); }.form-grid > * { flex-basis:100%; }.form-footer { align-items:stretch; flex-direction:column; }.form-footer .button { width:100%; }.setup-card summary p { display:none; } }
.app-dropdown { border:1px solid #dce5ef; border-radius:11px; box-shadow:0 16px 38px rgba(0,0,0,.18); padding:7px; }.app-dropdown .dropdown-item { border-radius:7px; font-size:.75rem; padding:8px 11px; }/* top:40% em vez de 50%: o toast fica acima do centro óptico, sem cobrir o miolo do conteúdo.
   O transform NÃO entra nessa conta — o par -42%/-50% é o delta do deslize de entrada. */
.operation-toast { position:fixed; z-index:2200; left:50%; top:40%; transform:translate(-50%,-42%) scale(.96); width:min(440px,calc(100vw - 32px)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; padding:18px; background:#fff; border:1px solid #cfe9df; border-radius:15px; box-shadow:0 28px 80px rgba(4,20,38,.28); opacity:0; pointer-events:none; transition:.24s ease; }.operation-toast.is-visible { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }.operation-toast.error { border-color:#f1c9cf; }.toast-symbol { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#fff; background:#16a879; font-weight:900; }.operation-toast.error .toast-symbol { background:#dc4858; }.operation-toast strong { font-size:.76rem; }.operation-toast p { margin:3px 0 0; color:#627287; font-size:.68rem; }.operation-toast button { border:0; background:transparent; color:#8290a0; font-size:1.25rem; }.record-page { padding:48px 0 76px; }.record-toolbar { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }.record-toolbar h1 { margin:8px 0 4px; font-size:2.15rem; letter-spacing:-.04em; }.record-toolbar p { margin:0; color:#6c7b8e; font-size:.78rem; }.list-panel { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }.list-controls { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:16px 19px; border-bottom:1px solid var(--line); }.search-box { position:relative; width:min(370px,100%); }.search-box input { width:100%; border:1px solid #d2dde7; border-radius:9px; padding:10px 12px 10px 35px; font-size:.72rem; }.search-box span { position:absolute; left:12px; top:8px; color:#8796a7; }.record-table { width:100%; border-collapse:collapse; }.record-table th { padding:12px 18px; background:#f7f9fc; color:#7a899b; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; }.record-table td { padding:14px 18px; border-top:1px solid #edf1f5; font-size:.7rem; vertical-align:middle; }.record-table tr:hover td { background:#fbfdff; }.record-name { display:flex; flex-direction:column; }.record-name strong { font-size:.76rem; }.record-name small { color:#8593a4; }.record-actions { display:flex; justify-content:flex-end; gap:5px; }
/* Primeiro campo do registro vira o link para o detalhe: a linha ganha um alvo óbvio e a coluna de ações fica
   só com o que de fato altera o registro. */
.record-link { display:inline-flex; color:inherit; border-radius:6px; }
.record-link:hover .record-name strong { color:var(--blue); text-decoration:underline; }
.record-link:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
/* Menu de ações da linha. O painel é position:fixed e posicionado por JS porque .list-panel usa overflow:hidden
   (para arredondar as bordas), o que recortaria um dropdown absolute nas últimas linhas da tabela. */
.record-menu-cell { width:1%; white-space:nowrap; text-align:right; }
.row-menu-toggle { display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid #dbe4ec; border-radius:8px; background:#fff; color:#52677d; font-size:.8rem; line-height:1; cursor:pointer; }
.row-menu-toggle:hover,.row-menu-toggle[aria-expanded="true"] { color:var(--blue); border-color:#a9cee7; background:#f7fbfe; }
.row-menu-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.row-menu-panel { position:fixed; z-index:1050; display:flex; flex-direction:column; min-width:168px; padding:6px; border:1px solid #dfe6ee; border-radius:12px; background:#fff; box-shadow:0 18px 45px rgba(22,42,68,.16); }
.row-menu-panel[hidden] { display:none; }
.row-menu-panel a,.row-menu-panel button { display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:#435268; font-size:.68rem; font-weight:600; text-align:left; cursor:pointer; }
.row-menu-panel a:hover,.row-menu-panel button:hover { background:#f2f6fa; color:var(--ink); }
.row-menu-panel .row-menu-danger { color:#c83949; }
.row-menu-panel .row-menu-danger:hover { background:#fff0f2; color:#a92c3c; }
.row-menu-panel form { margin:0; }.record-action { display:grid; place-items:center; min-width:31px; height:31px; padding:0 9px; border:1px solid #dbe4ec; border-radius:8px; color:#52677d; background:#fff; font-size:.63rem; font-weight:700; }.record-action:hover { color:var(--blue); border-color:#a9cee7; }.state-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:12px; background:#e7f7f1; color:#14805f; font-size:.58rem; font-weight:800; }.state-badge.inactive { color:#7d8998; background:#edf0f3; }.empty-list { padding:55px 20px; text-align:center; color:#718196; }.empty-list h3 { font-size:1rem; }.empty-list p { font-size:.7rem; }.modal-content.premium-modal { border:0; border-radius:18px; box-shadow:0 32px 90px rgba(3,18,35,.32); overflow:hidden; }
/* O Bootstrap só libera a largura de .modal-lg (800px) a partir de 992px de viewport; abaixo disso o dialog
   despenca para 500px de uma vez. Isso fazia um modal grande encolher pela metade em janela média, sem estado
   intermediário. Aqui a largura projetada de cada modal é preservada e passa a valer em qualquer viewport,
   cedendo só quando a tela é menor que ela - aí sobra uma margem de 1.5rem em vez de barra horizontal.
   O wizard (.wizard-modal / .modal-xl) fica de fora: ele tem largura própria de 1180px e fullscreen abaixo de lg. */
.modal-dialog:not(.modal-lg):not(.modal-xl):has(> .premium-modal) { max-width:min(500px,calc(100vw - 3rem)); }
.modal-dialog.modal-lg:not(.modal-xl):has(> .premium-modal) { max-width:min(800px,calc(100vw - 3rem)); }.premium-modal .modal-header { padding:22px 24px; border-bottom:1px solid var(--line); }.premium-modal .modal-title { font-size:1.05rem; }.premium-modal .modal-body { padding:24px; }.premium-modal .modal-footer { padding:15px 24px; background:#f7f9fc; border-top:1px solid var(--line); }.record-detail-grid { display:grid; grid-template-columns:1.5fr .8fr; gap:18px; }.detail-card { background:#fff; border:1px solid var(--line); border-radius:15px; overflow:hidden; }.detail-card header { padding:20px 22px; border-bottom:1px solid var(--line); }.detail-card h2 { margin:0; font-size:1rem; }.detail-fields { display:grid; grid-template-columns:1fr 1fr; }.detail-field { padding:17px 22px; border-bottom:1px solid #edf1f5; }.detail-field.wide { grid-column:1/-1; }.detail-field small { display:block; color:#8190a2; font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }.detail-field strong,.detail-field p { font-size:.72rem; margin:0; white-space:pre-wrap; }.danger-zone { margin-top:18px; padding:17px 20px; border:1px solid #f0ced3; background:#fff9fa; border-radius:12px; display:flex; align-items:center; justify-content:space-between; }.danger-zone strong { color:#b83d4b; font-size:.72rem; }.danger-zone p { margin:2px 0 0; color:#8c6a70; font-size:.61rem; }.button-danger { background:#fff; border-color:#e5aeb6; color:#c13e4d; }
@media(max-width:767px){.record-toolbar,.list-controls,.danger-zone{align-items:stretch;flex-direction:column}.record-table thead{display:none}.record-table,.record-table tbody,.record-table tr,.record-table td{display:block}.record-table tr{padding:12px;border-top:1px solid var(--line)}.record-table td{border:0;padding:5px}.record-actions{justify-content:flex-start}.record-detail-grid,.detail-fields{grid-template-columns:1fr}.detail-field.wide{grid-column:auto}}
.lookup-control { position:relative; }.lookup-input { width:100%; border:1px solid #cfdae5; border-radius:9px; background:#fbfcfe; padding:11px 36px 11px 12px; font-size:.75rem; color:var(--ink); }.lookup-input:focus { outline:0; border-color:#168bd1; box-shadow:0 0 0 3px rgba(22,139,209,.09); }.lookup-control:after { content:"⌕"; position:absolute; right:12px; top:9px; color:#8091a4; pointer-events:none; }.lookup-native { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none; }.lookup-results { display:none; position:absolute; z-index:2300; left:0; right:0; top:calc(100% + 5px); max-height:230px; overflow:auto; padding:6px; border:1px solid #d5e0e9; border-radius:10px; background:#fff; box-shadow:0 15px 40px rgba(4,25,48,.18); }.lookup-results.open { display:block; }.lookup-results button { width:100%; border:0; background:#fff; padding:9px 10px; border-radius:7px; text-align:left; color:#31475d; font-size:.7rem; }.lookup-results button:hover,.lookup-results button:focus { background:#eaf5fd; color:#0877d1; }