/* ============================================================
   Ambup — Camada de compatibilidade Bootstrap/Ynex → design "Painel Ambup"

   Por que existe: as páginas .razor do sistema usam o vocabulário do
   template Ynex (.card, .btn, .table, .badge, .form-control, .modal-*).
   Esta camada reveste esse vocabulário com os tokens e as formas do design,
   de modo que todas as telas ganhem a linguagem visual nova — inclusive as
   que ainda não foram reescritas para as classes nativas .amb-*.

   Escopo: TUDO abaixo é prefixado por .amb-ui, que só existe dentro do
   AmbupLayout. No modo legado (?ui=legado) o MainLayout é usado e nenhuma
   regra daqui se aplica — o visual antigo volta intacto.

   Especificidade: .amb-ui .card = (0,2,0), empata com .card.custom-card e
   vence .card; como este arquivo é carregado depois de assets/css/styles.css,
   o empate resolve a nosso favor. As regras [data-theme-mode=dark] do Ynex
   (que venceriam por (0,2,1)) ficam neutralizadas porque _Layout.cshtml fixa
   data-theme-mode="light" no modo novo.

   NÃO reveste: grid (.row/.col-*), utilitários de espaçamento (.mb-3, .me-2),
   flex (.d-flex, .justify-content-*). Esses são primitivos estruturais — mexer
   neles quebraria as páginas em vez de revesti-las.
   ============================================================ */

/* ============================================================
   Paleta semântica do Ynex, re-apontada para os tokens do design

   O Ynex escreve as cores como `rgb(var(--success-rgb))` e marca a regra com
   !important (ex.: .btn-success na linha ~14293 de assets/css/styles.css).
   Sobrescrever `background` na camada de compat perdia para esse !important —
   o botão continuava com o verde #26bf94 do template, que dá 2,34:1 de
   contraste com texto branco (reprova AA).

   Redefinir a VARIÁVEL dentro do .amb-ui resolve sem guerra de !important:
   a própria regra do Ynex passa a produzir a cor do design. Vale de uma vez
   para .btn-*, .bg-*, .text-* e badges.
   ============================================================ */
.amb-ui {
    --primary-rgb:   37,  99, 235;   /* --mc-blue-light #2563eb */
    --secondary-rgb:  8, 145, 178;   /* --mc-teal       #0891b2 */
    /* #047857 (o mesmo tom do hover) em vez de --mc-green #059669: preenchimento
       sólido verde com texto branco dá 3,77:1 no token puro, abaixo de AA para
       texto normal. Nas classes .amb-* o verde do design segue intacto — lá ele
       aparece como texto escuro sobre --mc-green-50, onde o contraste sobra. */
    --success-rgb:    4, 120,  87;
    --danger-rgb:   220,  38,  38;   /* --mc-red        #dc2626 */
    --warning-rgb:  234,  88,  12;   /* --mc-orange     #ea580c */
    --info-rgb:       8, 145, 178;   /* --mc-teal       #0891b2 */
}

/* ============================================================
   Tipografia base dentro do shell
   ============================================================ */
.amb-ui { font-size: 14px; }

.amb-ui .text-muted   { color: var(--mc-text-muted) !important; }
.amb-ui .text-primary { color: var(--mc-blue) !important; }
.amb-ui .text-success { color: var(--mc-green) !important; }
.amb-ui .text-danger  { color: var(--mc-red) !important; }
.amb-ui .text-warning { color: var(--mc-orange) !important; }
.amb-ui .text-info    { color: var(--mc-teal) !important; }
.amb-ui .text-dark    { color: var(--mc-ink) !important; }
.amb-ui .fw-semibold  { font-weight: 600 !important; }
.amb-ui .fw-bold      { font-weight: 700 !important; }
.amb-ui .small,
.amb-ui small         { font-size: 12.5px; }

/* Título de página do Ynex → cabeçalho do design */
.amb-ui .page-title-box {
    padding: 0;
    margin-bottom: 18px;
    border: 0;
    background: none;
}
.amb-ui .page-title-box h4,
.amb-ui .page-title-box h5,
.amb-ui .page-title-box .page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.7px;
    color: var(--mc-ink);
}
.amb-ui .page-title-box .breadcrumb {
    margin: 5px 0 0;
    padding: 0;
    background: none;
    font-size: 13.5px;
    color: var(--mc-text-muted);
}
.amb-ui .section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mc-ink);
    letter-spacing: -.2px;
}

/* ============================================================
   Cards
   ============================================================ */
.amb-ui .card,
.amb-ui .card.custom-card {
    background: var(--mc-white);
    border: 1px solid var(--mc-border);
    border-radius: 16px;
    box-shadow: var(--mc-shadow-sm);
    overflow: hidden;
}
.amb-ui .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-bottom: 1px solid var(--mc-border-soft);
    background: var(--mc-white);
    border-radius: 0;
}
.amb-ui .card-header .card-title,
.amb-ui .card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mc-ink);
    text-transform: none;
    letter-spacing: -.1px;
}
.amb-ui .card-body   { padding: 18px; }
.amb-ui .card-footer {
    padding: 13px 18px;
    border-top: 1px solid var(--mc-border-soft);
    background: var(--mc-gray-50);
}
.amb-ui .card.card-bg-light,
.amb-ui .bg-light { background: var(--mc-gray-50) !important; }

/* ============================================================
   Botões
   ============================================================ */
.amb-ui .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    transition: transform .25s, background .2s, border-color .2s, color .2s, box-shadow .2s;
}
.amb-ui .btn-sm {
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: 10px;
    gap: 6px;
}
.amb-ui .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; }

.amb-ui .btn-primary {
    background: var(--mc-grad-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--mc-shadow-blue);
}
.amb-ui .btn-primary:hover,
.amb-ui .btn-primary:focus {
    background: var(--mc-grad-primary);
    color: #fff;
    transform: translateY(-2px);
}
.amb-ui .btn-secondary,
.amb-ui .btn-light,
.amb-ui .btn-outline-secondary,
.amb-ui .btn-outline-primary {
    background: var(--mc-white);
    border-color: var(--mc-border);
    color: var(--mc-text);
    box-shadow: none;
}
.amb-ui .btn-secondary:hover,
.amb-ui .btn-light:hover,
.amb-ui .btn-outline-secondary:hover,
.amb-ui .btn-outline-primary:hover {
    background: var(--mc-white);
    border-color: var(--mc-blue);
    color: var(--mc-blue);
}
/* .btn-success / -danger / -warning / -info NÃO são pintados aqui: o Ynex os
   define com !important sobre rgb(var(--*-rgb)), e essas variáveis já foram
   re-apontadas para os tokens do design no topo deste arquivo. Regras de
   background aqui seriam código morto. */

.amb-ui .btn-outline-danger  { background: var(--mc-white); border-color: var(--mc-red);   color: var(--mc-red); }
.amb-ui .btn-outline-success { background: var(--mc-white); border-color: var(--mc-green); color: var(--mc-green); }
.amb-ui .btn-outline-danger:hover  { background: var(--mc-red);   color: #fff; }
.amb-ui .btn-outline-success:hover { background: var(--mc-green); color: #fff; }

.amb-ui .btn-link {
    background: none;
    border: 0;
    color: var(--mc-blue);
    box-shadow: none;
    height: auto;
    padding: 0;
    font-size: 13px;
}
.amb-ui .btn:disabled,
.amb-ui .btn.disabled {
    background: var(--mc-gray-100);
    border-color: var(--mc-gray-100);
    color: var(--mc-gray-400);
    box-shadow: none;
    transform: none;
    opacity: 1;
}
/* Botão só com ícone (padrão do design: quadrado 32px) */
.amb-ui .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 9px;
    background: var(--mc-white);
    border-color: var(--mc-border);
    color: var(--mc-gray-600);
    box-shadow: none;
}
.amb-ui .btn-icon:hover { border-color: var(--mc-blue); color: var(--mc-blue); transform: none; }

/* ============================================================
   Tabelas
   ============================================================ */
.amb-ui .table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    color: var(--mc-text);
}
.amb-ui .table > thead > tr,
.amb-ui .table thead tr { background: var(--mc-gray-50); }
.amb-ui .table > thead > tr > th,
.amb-ui .table thead th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--mc-text-muted);
    padding: 12px;
    border: 0;
    white-space: nowrap;
    background: var(--mc-gray-50);
}
.amb-ui .table > thead > tr > th:first-child { padding-left: 18px; }
.amb-ui .table > thead > tr > th:last-child  { padding-right: 18px; }

.amb-ui .table > tbody > tr,
.amb-ui .table tbody tr { border-top: 1px solid var(--mc-border-soft); }
.amb-ui .table > tbody > tr:hover,
.amb-ui .table tbody tr:hover { background: var(--mc-gray-50); }

.amb-ui .table > tbody > tr > td,
.amb-ui .table tbody td {
    padding: var(--amb-pad-cel);
    vertical-align: middle;
    font-size: 12.5px;
    color: var(--mc-text);
    border: 0;
}
.amb-ui .table > tbody > tr > td:first-child { padding-left: 18px; }
.amb-ui .table > tbody > tr > td:last-child  { padding-right: 18px; }

/* O Ynex/Bootstrap pinta as linhas com variáveis próprias; anulamos para o design */
.amb-ui .table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
    color: inherit;
}
.amb-ui .table-responsive { overflow-x: auto; }

/* ============================================================
   Badges → chips do design
   ============================================================ */
.amb-ui .badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}
.amb-ui .badge.bg-primary,
.amb-ui .badge.bg-primary-transparent { background: var(--mc-blue-50)   !important; color: var(--mc-blue)      !important; }
.amb-ui .badge.bg-success,
.amb-ui .badge.bg-success-transparent { background: var(--mc-green-50)  !important; color: var(--mc-green)     !important; }
.amb-ui .badge.bg-danger,
.amb-ui .badge.bg-danger-transparent  { background: var(--mc-red-50)    !important; color: var(--mc-red)       !important; }
.amb-ui .badge.bg-warning,
.amb-ui .badge.bg-warning-transparent { background: var(--mc-orange-50) !important; color: #9a3412             !important; }
.amb-ui .badge.bg-info,
.amb-ui .badge.bg-info-transparent    { background: var(--mc-teal-50)   !important; color: var(--mc-teal)      !important; }
.amb-ui .badge.bg-secondary,
.amb-ui .badge.bg-light,
.amb-ui .badge.bg-secondary-transparent { background: var(--mc-gray-100) !important; color: var(--mc-gray-500) !important; }
.amb-ui .badge.bg-dark                { background: var(--mc-ink)       !important; color: #fff                !important; }
.amb-ui .badge.bg-purple              { background: var(--mc-purple-50) !important; color: var(--mc-purple)    !important; }

/* ============================================================
   Formulários
   ============================================================ */
.amb-ui .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--mc-text);
    margin-bottom: 6px;
}
.amb-ui .form-control,
.amb-ui .form-select {
    height: 42px;
    padding: 0 13px;
    border: 1px solid var(--mc-border);
    border-radius: 11px;
    font-size: 13.5px;
    color: var(--mc-text);
    background-color: var(--mc-white);
    box-shadow: none;
}
.amb-ui .form-select { padding: 0 11px; }
.amb-ui textarea.form-control {
    height: auto;
    min-height: 82px;
    padding: 11px 13px;
    resize: vertical;
}
.amb-ui .form-control:focus,
.amb-ui .form-select:focus {
    border-color: var(--mc-blue);
    box-shadow: none;
    background-color: var(--mc-white);
    color: var(--mc-text);
}
.amb-ui .form-control::placeholder { color: var(--mc-text-faint); }
.amb-ui .form-control:disabled,
.amb-ui .form-control[readonly] { background-color: var(--mc-gray-50); color: var(--mc-text-muted); }
.amb-ui .form-control-sm,
.amb-ui .form-select-sm { height: 34px; font-size: 13px; border-radius: 10px; }

.amb-ui .form-check-input {
    width: 17px; height: 17px;
    border: 1px solid var(--mc-gray-300);
    border-radius: 5px;
    box-shadow: none;
}
.amb-ui .form-check-input:checked {
    background-color: var(--mc-blue);
    border-color: var(--mc-blue);
}
.amb-ui .form-check-input:focus { border-color: var(--mc-blue); box-shadow: none; }
.amb-ui .form-switch .form-check-input { width: 42px; height: 24px; border-radius: 50px; }
.amb-ui .input-group-text {
    border: 1px solid var(--mc-border);
    border-radius: 11px;
    background: var(--mc-gray-50);
    color: var(--mc-text-muted);
    font-size: 13px;
}

/* ============================================================
   Modais
   ============================================================ */
.amb-ui .modal-content,
html[data-ui="novo"] .modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: var(--mc-shadow-lg);
    overflow: hidden;
}
.amb-ui .modal-header,
html[data-ui="novo"] .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--mc-border-soft);
    background: var(--mc-white);
}
.amb-ui .modal-title,
html[data-ui="novo"] .modal-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--mc-ink);
    margin: 0;
}
.amb-ui .modal-body,
html[data-ui="novo"] .modal-body { padding: 22px 24px; }
.amb-ui .modal-footer,
html[data-ui="novo"] .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--mc-border-soft);
    background: var(--mc-gray-50);
    gap: 9px;
}
html[data-ui="novo"] .modal-backdrop { background-color: rgba(11, 31, 58, .5); }
html[data-ui="novo"] .modal-backdrop.show { opacity: 1; }

/* ============================================================
   Alertas
   ============================================================ */
.amb-ui .alert {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 13.5px;
    border: 1px solid transparent;
    margin-bottom: 18px;
}
.amb-ui .alert-primary { background: var(--mc-blue-50);   border-color: var(--mc-blue-100); color: var(--mc-blue); }
.amb-ui .alert-success { background: var(--mc-green-50);  border-color: #a7f3d0;            color: #065f46; }
.amb-ui .alert-danger  { background: var(--mc-red-50);    border-color: #fecaca;            color: #991b1b; }
.amb-ui .alert-warning { background: var(--mc-orange-50); border-color: #fed7aa;            color: #9a3412; }
.amb-ui .alert-info    { background: var(--mc-teal-50);   border-color: #a5f3fc;            color: #155e75; }

/* ============================================================
   Abas
   ============================================================ */
.amb-ui .nav-tabs {
    border-bottom: 1px solid var(--mc-border);
    gap: 2px;
}
.amb-ui .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--mc-text-muted);
    background: none;
}
.amb-ui .nav-tabs .nav-link:hover { color: var(--mc-text); border-bottom-color: var(--mc-border); }
.amb-ui .nav-tabs .nav-link.active {
    color: var(--mc-blue);
    font-weight: 600;
    background: none;
    border-bottom-color: var(--mc-blue);
}
.amb-ui .nav-pills .nav-link {
    border-radius: 8px;
    font-size: 13px;
    color: var(--mc-text-muted);
    padding: 8px 14px;
}
.amb-ui .nav-pills .nav-link.active {
    background: var(--mc-blue-50);
    color: var(--mc-blue);
    font-weight: 600;
}

/* ============================================================
   Diversos
   ============================================================ */
.amb-ui .spinner-border { color: var(--mc-blue); }
.amb-ui .progress       { height: 7px; border-radius: 50px; background: var(--mc-gray-100); }
.amb-ui .progress-bar   { background: var(--mc-grad-primary); border-radius: 50px; }

.amb-ui .avatar {
    border-radius: 50%;
    background: var(--mc-blue-100);
    color: var(--mc-blue);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.amb-ui .avatar-sm { width: 34px; height: 34px; font-size: 12.5px; }
.amb-ui .avatar-md { width: 42px; height: 42px; font-size: 14px; }

.amb-ui .dropdown-menu {
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    box-shadow: var(--mc-shadow);
    padding: 6px;
    font-size: 13.5px;
}
.amb-ui .dropdown-item {
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--mc-text);
}
.amb-ui .dropdown-item:hover { background: var(--mc-gray-50); color: var(--mc-blue); }

.amb-ui .list-group-item {
    border-color: var(--mc-border-soft);
    padding: 12px 14px;
    font-size: 13.5px;
    color: var(--mc-text);
}
.amb-ui .pagination .page-link {
    border: 1px solid var(--mc-border);
    border-radius: 9px;
    margin: 0 3px;
    color: var(--mc-gray-500);
    font-size: 13px;
}
.amb-ui .pagination .page-item.active .page-link {
    background: var(--mc-blue);
    border-color: var(--mc-blue);
    color: #fff;
}
.amb-ui hr { border-color: var(--mc-border-soft); opacity: 1; }
.amb-ui .rounded    { border-radius: 12px !important; }
.amb-ui .rounded-3   { border-radius: 14px !important; }
.amb-ui .border      { border-color: var(--mc-border) !important; }

/* O FAB verde do MainLayout não faz parte do design novo */
.amb-ui .fab-nova-solicitacao { display: none; }

/* ============================================================
   Kanban de demandas (Pages/SuperAdmin/Kanban.razor)
   A página tem <style> próprio inline no componente, que vence por ordem
   de origem; por isso as regras abaixo levam o prefixo .amb-ui — (0,2,0)
   contra (0,1,0) — e ganham por especificidade, independente da ordem.
   Forma alvo: .amb-kanban do design "Painel Ambup" (sc-if telaKanban).
   ============================================================ */
.amb-ui .kanban-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    align-items: flex-start;
}
.amb-ui .kanban-column {
    flex: 0 0 288px;
    width: 288px;
    min-width: 288px;
    background: var(--mc-gray-100);
    border: 0;
    border-radius: 14px;
    padding: 12px;
    box-shadow: none;
}
.amb-ui .kanban-column.drag-over {
    background: var(--mc-blue-50);
    outline: 2px dashed var(--mc-blue-200);
    outline-offset: -4px;
}
.amb-ui .kanban-column-header {
    background: none !important;
    border: 0;
    border-radius: 0;
    padding: 0 2px;
    margin-bottom: 10px;
}
.amb-ui .kanban-column-header h6 {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mc-gray-700) !important;
    display: flex;
    align-items: center;
    gap: 7px;
}
.amb-ui .kanban-column-header .badge {
    margin-left: auto !important;
    background: var(--mc-white) !important;
    color: var(--mc-gray-500) !important;
    font-variant-numeric: tabular-nums;
}
.amb-ui .kanban-column-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
    padding: 0;
}
.amb-ui .kanban-card {
    background: var(--mc-white);
    border: 1px solid var(--mc-border);
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--mc-shadow-sm);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.amb-ui .kanban-card:hover  { transform: translateY(-2px); box-shadow: var(--mc-shadow); }
.amb-ui .kanban-card:active { transform: translateY(0); }
.amb-ui .kanban-card.atrasada { border-color: var(--mc-red); }
.amb-ui .kanban-card-title {
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--mc-ink);
    letter-spacing: 0;
}
.amb-ui .kanban-card-desc {
    font-size: 12px;
    line-height: 1.5;
    color: var(--mc-text-muted) !important;
}
/* Badges pequenos dentro do card (id, plataforma, prioridade) */
.amb-ui .kanban-card .badge {
    padding: 2px 7px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .3px;
}
.amb-ui .participante-avatar,
.amb-ui .participante-avatar-placeholder {
    border: 2px solid var(--mc-white);
    box-shadow: var(--mc-shadow-sm);
}


/* ============================================================
   Telas MERGE (Organizações, Regras e termos)
   Elas reaproveitam páginas existentes como componentes. Cada página traz o
   próprio cabeçalho Ynex; aqui o título é o .amb-page-head da tela pai, então
   o cabeçalho da filha é escondido para não duplicar.
   ============================================================ */
.amb-ui .amb-merge-conteudo .page-title-box { display: none; }
.amb-ui .amb-merge-conteudo > .container-fluid,
.amb-ui .amb-merge-conteudo .container-fluid { padding-left: 0; padding-right: 0; }