@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Page shell ──
   Fundo da aplicação: sem ele os cards brancos flutuam num vazio branco
   e toda tela parece um modal. Os styles legados propagam via
   `* { background-color: inherit }`, então basta declarar no body. */
body { background-color: #f4f8f6; }

/* ── Navbar global (_NavBar.cshtml) ── */
.admin-navbar {
    background: #1c2825;
    font-family: 'Manrope', sans-serif;
    /* linha de acento interna: não altera a altura (admin-page depende de 100vh - 59px) */
    box-shadow: inset 0 -3px 0 #1B825F, 0 2px 14px rgba(16, 24, 40, 0.18);
    /* ── Escala de empilhamento (z-index) da tela, do fundo para a frente ──
       conteúdo/cards (auto) < painel de comentários (100, .message-card)
       < barra de filtros sticky (200, #gb-toolbar) < aviso "novas transações" (300, .gb-novas-badge)
       < navbar do topo (400) < dropdowns/typeahead/modais (1050+).
       Mantém o menu sempre na frente do conteúdo e o painel sempre atrás do chrome global. */
    position: relative;
    z-index: 400;
}
.admin-navbar .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem; font-weight: 600;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.admin-navbar .navbar-nav .nav-link:hover,
.admin-navbar .navbar-nav .nav-link:focus,
.admin-navbar .navbar-nav .show > .nav-link {
    color: #fff;
    background: rgba(46, 196, 154, 0.14);
}
.admin-navbar .dropdown-menu {
    background: #fff;
    border: 1px solid #e2e9e6; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
    padding: 6px; margin-top: 6px;
}
.admin-navbar .dropdown-item {
    background: transparent;
    border-radius: 8px; padding: 7px 12px;
    font-size: 0.86rem; font-weight: 600; color: #1f2725;
    transition: background 0.15s, color 0.15s;
}
.admin-navbar .dropdown-item:hover,
.admin-navbar .dropdown-item:focus {
    background: #e9f4f0; color: #1B825F;
}

/* ── Layout: sidebar + content ── */
.admin-page {
    font-family: 'Manrope', sans-serif;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 0;
    height: calc(100vh - 59px);
    overflow: hidden;
}

/* ── Sidebar ── */
.admin-sidebar {
    position: sticky;
    top: 0;
    height: calc(100vh - 56px);
    overflow-y: auto;
    background: #f4f8f6;
    border-right: 1px solid #dde8e3;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.admin-sidebar::-webkit-scrollbar { width: 5px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: #c2d5cd; border-radius: 10px; }

/* ── Hero ── */
.admin-hero {
    background: linear-gradient(125deg, #1B825F 0%, #22A676 55%, #2EC49A 100%);
    border-radius: 14px;
    padding: 16px 18px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(27, 130, 95, 0.3);
}
.admin-hero h4 { margin-bottom: 4px; font-weight: 800; font-size: 1.1rem; }
.admin-subtitle { opacity: 0.9; font-size: 0.82rem; line-height: 1.4; }

/* ── Sidebar metrics ── */
.admin-sidebar-metrics { display: flex; flex-direction: column; gap: 8px; }
.admin-metric {
    background: #fff; border: 1px solid #e4ede9; border-radius: 12px;
    padding: 10px 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    display: flex; justify-content: space-between; align-items: center;
}
.admin-metric-label { color: #5e6d69; font-size: 0.78rem; }
.admin-metric-value { color: #1B825F; font-weight: 800; font-size: 1rem; }

/* ── Sidebar filter ── */
.admin-filter { display: flex; flex-direction: column; gap: 10px; }
.admin-filter .form-group { margin-bottom: 0; }
.admin-filter-field { display: flex; flex-direction: column; }
.admin-filter-label {
    font-size: 0.7rem; font-weight: 700; color: #47605b;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.admin-filter-input-wrap { position: relative; }
.admin-filter-input-wrap.input-group { flex-wrap: nowrap; }
.admin-filter-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #1B825F; font-size: 0.82rem; pointer-events: none; z-index: 4;
}
.admin-filter-input {
    width: 100% !important; padding-left: 34px !important; height: 40px;
    border-radius: 10px !important; border: 1.5px solid #cdddd7 !important;
    background: #fff !important; font-size: 0.84rem; font-family: 'Manrope', sans-serif;
    font-weight: 500; color: #1e2624;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative; z-index: 1; cursor: pointer;
}
.admin-filter-input:focus {
    border-color: #1B825F !important;
    box-shadow: 0 0 0 3px rgba(27,130,95,0.14) !important;
    outline: none; z-index: 3;
}
.admin-filter-input::placeholder { color: #96a8a2; font-weight: 400; font-size: 0.82rem; }

/* atalhos rapidos de periodo (Hoje, Ontem, Essa semana, Esse mes) */
.admin-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-filter-chip {
    border: 1.5px solid #cdddd7; border-radius: 999px; background: #fff;
    color: #47605b; font-family: 'Manrope', sans-serif; font-size: 0.76rem;
    font-weight: 600; padding: 4px 12px; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.admin-filter-chip:hover { background: #f0f5f3; border-color: #1B825F; color: #1B825F; }
.admin-filter-chip.active {
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%);
    border-color: transparent; color: #fff;
    box-shadow: 0 2px 8px rgba(27,130,95,0.25);
}

.admin-filter-actions { display: flex; gap: 8px; margin-top: 4px; }
.admin-filter-btn-apply {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 1; height: 40px; padding: 0 16px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.84rem;
    font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(27,130,95,0.3); white-space: nowrap;
}
.admin-filter-btn-apply:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(27,130,95,0.4); }
.admin-filter-btn-apply:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(27,130,95,0.25); }

.admin-filter-btn-clear {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 14px; border: 1.5px solid #cdddd7; border-radius: 10px;
    background: #fff; color: #47605b; font-family: 'Manrope', sans-serif;
    font-size: 0.84rem; font-weight: 600; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none; white-space: nowrap;
}
.admin-filter-btn-clear:hover { background: #f0f5f3; border-color: #1B825F; color: #1B825F; text-decoration: none; }

/* ── Grupos da sidebar: Período (consulta ao banco) vs Filtros instantâneos (front) ── */
.admin-filter-group { display: flex; flex-direction: column; gap: 10px; }
.admin-filter-group--front { border-top: 1px dashed #cdddd7; padding-top: 14px; margin-top: 4px; }
.admin-filter-group-title {
    font-size: 0.8rem; font-weight: 800; color: #1c2825;
    display: flex; align-items: center; gap: 8px;
}
.admin-filter-group-tag {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: #1B825F; background: #e9f4f0; border: 1px solid #d5e9e2;
    border-radius: 999px; padding: 2px 8px;
}
.admin-filter-hint { margin: 0; font-size: 0.72rem; line-height: 1.4; color: #6b7d77; }

/* ── Chips de triagem rápida (front) ── */
.gb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gb-chip {
    border: 1.5px solid #cdddd7; border-radius: 999px; background: #fff;
    color: #47605b; font-family: 'Manrope', sans-serif; font-size: 0.74rem;
    font-weight: 600; padding: 4px 11px; cursor: pointer; white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.gb-chip:hover { background: #f0f5f3; border-color: #1B825F; color: #1B825F; }
.gb-chip.active {
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%);
    border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(27,130,95,0.25);
}

/* ── Filtro instantâneo: oculta cards sem removê-los do DOM (Ctrl+F preservado) ── */
.gb-hidden { display: none !important; }

/* ── Aviso de novas transações (polling) ── */
.gb-novas-badge {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    z-index: 300; /* abaixo da navbar (400), acima da barra de filtros (200) — ver escala em .admin-navbar */
    display: inline-flex; align-items: center; gap: 4px;
    border: none; border-radius: 999px; padding: 9px 18px;
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%); color: #fff;
    font-family: 'Manrope', sans-serif; font-size: 0.84rem; font-weight: 600;
    cursor: pointer; box-shadow: 0 6px 20px rgba(27,130,95,0.4);
    animation: gb-badge-in 0.25s ease-out;
}
.gb-novas-badge:hover { box-shadow: 0 8px 26px rgba(27,130,95,0.5); }
.gb-novas-badge[disabled] { opacity: 0.7; cursor: default; }
@keyframes gb-badge-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Destaque temporário dos cards recém-chegados via "Atualizar" ── */
.gb-card-novo { animation: gb-card-novo-flash 2.4s ease-out; }
@keyframes gb-card-novo-flash {
    0%   { box-shadow: 0 0 0 2px #2EC49A, 0 3px 12px rgba(16,38,30,0.08); }
    100% { box-shadow: 0 3px 12px rgba(16,38,30,0.08); }
}

/* ── Content area ── */
/* min-width: 0 impede o "grid blowout": sem isso, uma tabela larga estoura a
   coluna 1fr além da viewport e o overflow:hidden do .admin-page corta as
   colunas da direita em vez de deixar o .admin-table-scroll rolar. */
.admin-content { overflow-y: auto; padding: 20px 24px; background: #f9fcfb; min-width: 0; }
.admin-content::-webkit-scrollbar { width: 8px; }
.admin-content::-webkit-scrollbar-track { background: #eef3f1; border-radius: 10px; }
.admin-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1B825F 0%, #2EC49A 100%);
    border-radius: 10px; border: 2px solid #eef3f1;
}
.admin-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #166E50 0%, #22A676 100%);
}

/* ── Cards ── */
.admin-card {
    margin-bottom: 14px; border-radius: 14px; border: 1px solid #e2e9e6;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04); background: #fff;
    overflow: hidden; transition: box-shadow 0.2s;
}
.admin-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.admin-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; padding: 14px 16px; border-bottom: 1px solid #edf2f0; background: #f9fcfb;
}
.admin-card-title { margin: 0; font-size: 1rem; font-weight: 800; color: #1c2825; }
.admin-card-id { color: #57716a; font-size: 0.78rem; margin-top: 2px; }
.admin-card-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.admin-chip {
    background: #e9f4f0; color: #21524a; border: 1px solid #d5e9e2;
    border-radius: 999px; padding: 3px 10px; font-size: 0.76rem;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Primary action button ── */
.admin-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 18px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
    font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(27,130,95,0.3); white-space: nowrap;
}
.admin-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(27,130,95,0.4); }
.admin-btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(27,130,95,0.25); }

/* ── Danger action button ── */
.admin-btn-danger {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; padding: 0 18px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.82rem;
    font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(192,57,43,0.3); white-space: nowrap;
}
.admin-btn-danger:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(192,57,43,0.4); }
.admin-btn-danger:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(192,57,43,0.25); }

/* ── Icon button (eye, history, etc.) ── */
.admin-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border: 1.5px solid #cdddd7; border-radius: 10px;
    background: #fff; color: #1B825F; font-size: 0.9rem; cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-btn-icon:hover { background: #e9f4f0; border-color: #1B825F; }

/* ── Card body ── */
.admin-card-body { padding: 14px 16px 16px 16px; }
.admin-card-times {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px; margin-bottom: 12px;
}
.admin-time-block { border: 1px solid #edf1ef; border-radius: 12px; padding: 10px; background: #fff; }
.admin-time-label {
    font-size: 0.73rem; color: #6b7d77; text-transform: uppercase;
    letter-spacing: 0.03em; font-weight: 700;
}
.admin-time-value { margin-top: 3px; font-weight: 700; color: #1f2725; }
.admin-card-values { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.admin-value-block { background: #f8fbfa; border: 1px solid #e6efec; border-radius: 12px; padding: 10px; }
.admin-value-label { font-size: 0.73rem; color: #667a74; font-weight: 700; margin-bottom: 3px; }
.admin-value-value { font-size: 0.95rem; font-weight: 800; color: #1b2523; }

/* ── Empty state ── */
.admin-empty {
    border-radius: 14px; padding: 40px 22px; border: 1px dashed #bfd5cd;
    background: #fff; color: #4f6963; text-align: center;
}

/* ── History modal ── */
.admin-history-modal .modal-content {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);
    overflow: hidden;
}
.admin-history-modal .modal-header {
    align-items: flex-start;
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem 1.5rem 1rem;
}
.admin-history-header-subtitle { color: #6c757d; font-size: 0.95rem; }

.admin-history-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 1.25rem;
}
.admin-history-summary-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 0.9rem 1rem;
}
.admin-history-summary-label {
    color: #6c757d;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}
.admin-history-summary-value {
    color: #1f2937;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.admin-history-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.admin-history-timeline::before {
    content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px;
    width: 2px; background: #dbe5dd;
}
.admin-history-item { position: relative; padding-left: 2.25rem; }
.admin-history-item + .admin-history-item { margin-top: 1rem; }
.admin-history-dot {
    position: absolute; left: 4px; top: 16px; width: 14px; height: 14px;
    border-radius: 50%; border: 3px solid #fff;
    box-shadow: 0 0 0 3px #fff; z-index: 1;
}
.admin-history-approved { background: #28a745; }
.admin-history-rejected { background: #dc3545; }
.admin-history-card {
    background: #fff; border: 1px solid #e9ecef;
    border-radius: 12px; padding: 1rem 1.1rem;
}
.admin-history-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 0.45rem;
}
.admin-history-title { color: #1f2937; font-size: 1rem; font-weight: 700; margin: 0; }
.admin-history-status {
    border-radius: 999px; font-size: 0.75rem; font-weight: 700;
    padding: 0.35rem 0.65rem; text-transform: uppercase;
}
.admin-history-status-approved { background: #e7f6eb; color: #1f7a35; }
.admin-history-status-rejected { background: #fdecec; color: #b42318; }
.admin-history-meta { color: #495057; margin-bottom: 0.35rem; }
.admin-history-date { color: #6c757d; font-size: 0.92rem; }

/* ── Loader spinner ── */
.admin-spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
    border-radius: 50%; animation: admin-spin 0.6s linear infinite;
    vertical-align: middle; margin-right: 6px;
}
.admin-filter-btn-apply.is-loading, .admin-btn-primary.is-loading { pointer-events: none; opacity: 0.85; }
@keyframes admin-spin { to { transform: rotate(360deg); } }

/* ── Confirm Modal ── */
.admin-confirm-modal {
    border: none; border-radius: 18px; padding: 32px 28px 24px;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.admin-confirm-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 1.3rem; color: #fff;
    box-shadow: 0 6px 18px rgba(27,130,95,0.3);
}
.admin-confirm-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.15rem; color: #1b2523; margin-bottom: 8px; }
.admin-confirm-text { font-family: 'Manrope', sans-serif; font-size: 0.9rem; color: #63746f; line-height: 1.5; margin-bottom: 24px; }
.admin-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.admin-confirm-btn-cancel {
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.88rem;
    padding: 10px 22px; border-radius: 10px; border: 1.5px solid #d0dbd6;
    background: #fff; color: #4a5c56; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.admin-confirm-btn-cancel:hover { background: #f0f5f3; border-color: #1B825F; color: #1B825F; }
.admin-confirm-btn-ok {
    font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 0.88rem;
    padding: 10px 24px; border-radius: 10px; border: none;
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%);
    color: #fff; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(27,130,95,0.3);
}
.admin-confirm-btn-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(27,130,95,0.4); }
.admin-confirm-btn-ok:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(27,130,95,0.25); }

/* ── Sidebar filter: select/multiselect ── */
.admin-filter-select {
    width: 100% !important; height: 40px;
    border-radius: 10px !important; border: 1.5px solid #cdddd7 !important;
    background: #fff !important; font-size: 0.84rem; font-family: 'Manrope', sans-serif;
    font-weight: 500; color: #1e2624;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.admin-filter-select:focus {
    border-color: #1B825F !important;
    box-shadow: 0 0 0 3px rgba(27,130,95,0.14) !important;
    outline: none;
}

/* ── Status badges ── */
.admin-badge {
    display: inline-flex; align-items: center; gap: 4px;
    border-radius: 999px; padding: 3px 10px; font-size: 0.76rem; font-weight: 700;
}
.admin-badge-success { background: #e7f6eb; color: #1f7a35; }
.admin-badge-danger { background: #fdecec; color: #b42318; }
.admin-badge-warning { background: #fef3cd; color: #856404; }
.admin-badge-info { background: #d1ecf1; color: #0c5460; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .admin-page { grid-template-columns: 260px 1fr; }
    .admin-card-times { grid-template-columns: 1fr; }
    .admin-card-values { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
    .admin-page { grid-template-columns: 1fr; height: auto; }
    .admin-sidebar { position: relative; height: auto; border-right: none; border-bottom: 1px solid #dde8e3; }
    .admin-content { height: auto; overflow-y: visible; }
    .admin-card-values { grid-template-columns: 1fr; }
    .admin-card-header { flex-direction: column; }
    .admin-btn-primary { width: 100%; }
}


/* ══════════════════════════════════════════════════
   Operation Cards  (TentativaPagamento)
   ══════════════════════════════════════════════════ */

/* ── Card status accent via left border ── */
.admin-card--danger  { border-left: 4px solid #e74c3c; }
.admin-card--warning { border-left: 4px solid #f0ad4e; }

/* ── Card container (outer div vem de _linhas.cshtml) ── */
#linhas-tentativas .operation-card {
    background: #fff; border: 1px solid #cfdcd5; border-radius: 14px;
    box-shadow: 0 3px 12px rgba(16, 38, 30, 0.08);
    margin-bottom: 18px;
    /* linhas internas tintadas (warning/fraudster) não podem vazar
       dos cantos arredondados quando são a última linha do card */
    overflow: hidden;
    transition: box-shadow 0.2s;
}
#linhas-tentativas .operation-card:hover { box-shadow: 0 8px 24px rgba(16, 38, 30, 0.14); }

/* card cujo painel de comentários está aberto: anel verde deixa claro a quem o
   painel (que flutua sobre o canto do card) pertence. O painel recebe o mesmo
   contorno verde p/ "casar" com o card — vínculo visual explícito. */
#linhas-tentativas .operation-card.msg-card-ativo {
    position: relative;   /* âncora do scrim ::after */
    border-color: #1B825F;
    box-shadow: 0 0 0 2px rgba(27, 130, 95, 0.35), 0 10px 26px rgba(16, 38, 30, 0.16);
}
/* scrim leve sobre o CONTEÚDO do card enquanto o popover está aberto: o card recua um
   pouco e fica claro que o painel de comentários está flutuando por cima dele */
#linhas-tentativas .operation-card.msg-card-ativo::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(18, 38, 30, 0.10);
    border-radius: inherit;
    z-index: 1;           /* acima do conteúdo do card, abaixo do popover (fixed, z-index 500) */
    pointer-events: none; /* não bloqueia os botões do card */
}
/* o popover ganha contorno verde p/ "casar" com o anel do card dono */
#linhas-tentativas .operation-card.msg-card-ativo .message-card {
    border-color: #1B825F;
}

/* ── Header (EC + devedor à esquerda, resumo/ações à direita) ── */
.admin-op-header {
    position: relative; /* âncora do painel de mensagens (.message-card) */
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 10px 14px 8px;
    border-bottom: 1px solid #edf2f0;
    border-radius: 13px 13px 0 0;
}
/* acento de status na borda do CARD inteiro (a caixa é a operação;
   tintar só o header a quebrava em dois blocos) */
.admin-op-header--warning { background: #fffdf4; }
.admin-op-header--danger  { background: #fefaf9; }
#linhas-tentativas .operation-card:has(.admin-op-header--warning) { border-left: 4px solid #f0ad4e; }
#linhas-tentativas .operation-card:has(.admin-op-header--danger)  { border-left: 4px solid #e74c3c; }
/* card sem transações/boletos: o header é o último filho e fecha o card */
.admin-op-header:last-child { border-bottom: none; border-radius: 13px; }

/* balão de comentários inline na linha do título — não pode flutuar
   sobre a data/hora (info importante nos prints enviados ao EC) */
.admin-op-avatar-toggle {
    position: relative; width: 28px; height: 28px; flex-shrink: 0;
}
.admin-op-avatar-toggle .card-avatar {
    top: 0; right: 0; left: 0; width: 28px; height: 28px;
    border-width: 1.5px; box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.admin-op-avatar-toggle i.card-avatar { font-size: 13px; }

.admin-op-main { flex: 1; min-width: 0; }
.admin-op-titlebar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-op-ec { font-weight: 800; font-size: 0.95rem; color: #1c2825; }
.admin-op-devedor { margin-top: 4px; font-size: 0.84rem; color: #47605b; line-height: 1.4; }
.admin-op-devedor strong { color: #1f2725; font-weight: 700; }

/* corpo: sub-linhas de transações e boletos — fundo mais escuro que o header
   para o olho separar onde termina um card e começa o próximo */
/* corpo FLAT: linhas contínuas com divisórias finas, sem caixinhas —
   caixinha dentro do card parecia "uma operação por bloquinho";
   a unidade visual da operação é o card inteiro */
.admin-op-body {
    padding: 0;
    background: transparent;
    border-radius: 0 0 13px 13px;
}
.admin-op-body > div + div { border-top: 1px solid #e9f0eb; }

/* nota de análise de risco / estorno na coluna direita */
.admin-op-risk-note { font-size: 0.78rem; color: #5e6d69; margin-top: 4px; line-height: 1.45; }

/* ── Header right column (date/values) ── */
.admin-op-summary { text-align: right; min-width: 170px; max-width: 560px; flex-shrink: 0; }
.admin-op-date { font-size: 0.84rem; color: #3c4b47; font-weight: 700; }
.admin-op-valor { font-size: 1.15rem; font-weight: 800; color: #1B825F; line-height: 1.25; }
.admin-op-parcelas { font-size: 0.8rem; color: #6b7d77; line-height: 1.35; }
.admin-op-debitos { font-size: 0.8rem; color: #8b5c0a; font-weight: 600; line-height: 1.35; }

/* ── Actions row inside header ── */
.admin-op-actions {
    display: flex; gap: 6px; margin-top: 6px;
    justify-content: flex-end; align-items: center; flex-wrap: wrap;
}

/* ── Manual-upload badge ── */
.admin-badge-manual {
    display: inline-flex; align-items: center; gap: 4px;
    background: #e7f6eb; color: #1f7a35; border-radius: 999px;
    padding: 3px 10px; font-size: 0.74rem; font-weight: 700;
}

/* ── Sub-rows (transactions, boletos) ── */
.admin-sub-row {
    background: transparent; border: none; border-radius: 0;
    padding: 8px 18px; margin-bottom: 0;
}
.admin-sub-row--warning { background: #fff8e1; border-color: #ffe082; }
.admin-sub-row--fraudster-cartao { background: #fce4ec; border-color: #ef9a9a; }
.admin-sub-row--fraudster-portador { background: #fff3e0; border-color: #ffcc80; }
.admin-sub-row--fraudster-titular { background: #e8eaf6; border-color: #9fa8da; }
.admin-sub-row-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; flex-wrap: wrap;
}
.admin-sub-row-label {
    font-size: 0.73rem; color: #6b7d77; text-transform: uppercase;
    letter-spacing: 0.03em; font-weight: 700; margin-bottom: 2px;
}
.admin-sub-row-value { font-size: 0.86rem; color: #1f2725; }
.admin-sub-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ── Meta row (ClearSale, Credify) ── */
.admin-meta-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: transparent; border: none; border-radius: 0;
    padding: 4px 18px 4px 26px; margin-bottom: 0; font-size: 0.82rem;
}
.admin-meta-item { display: flex; align-items: center; gap: 4px; }
.admin-meta-label { color: #6b7d77; font-weight: 600; }
.admin-meta-value { color: #1f2725; font-weight: 700; }

/* ── Boleto sub-row extras ── */
.admin-boleto-barcode {
    font-family: 'Courier New', monospace; font-size: 0.78rem;
    color: #47605b; letter-spacing: 0.02em; word-break: break-all;
}
.admin-boleto-grid {
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
    margin-top: 2px;
}
.admin-boleto-field-label { font-size: 0.73rem; color: #6b7d77; font-weight: 700; text-transform: uppercase; }
.admin-boleto-field-value { font-size: 0.86rem; color: #1f2725; font-weight: 700; }
.admin-boleto-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.admin-payment-error {
    display: inline-flex; align-items: flex-start; gap: 4px;
    max-width: 320px; padding: 6px 10px;
    font-size: 0.75rem; line-height: 1.35; color: #b23b30;
    background: #fdecea; border: 1px solid #f5c6c0; border-radius: 8px;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.admin-payment-error .fa { margin-top: 1px; flex-shrink: 0; }

/* ── Messages panel ── */
.admin-msg-panel {
    background: #f9fcfb; border: 1px solid #e4ede9; border-radius: 12px;
    padding: 14px; margin-bottom: 10px;
}
.admin-msg-item {
    display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
    border-bottom: 1px solid #edf2f0;
}
.admin-msg-item:last-child { border-bottom: none; }
.admin-msg-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.admin-msg-body { flex: 1; min-width: 0; }
.admin-msg-meta { font-size: 0.76rem; color: #6b7d77; }
.admin-msg-text { font-size: 0.86rem; color: #1f2725; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
/* lápide do comentário apagado: continua no histórico, mas esmaecido e em itálico */
.admin-msg-deleted { font-style: italic; color: #9aa8a3; font-weight: 500; }
/* botão de apagar (só aparece p/ o autor): discreto, fica vermelho no hover */
.admin-msg-delete {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: #b7c6c1; padding: 2px 6px; border-radius: 6px; line-height: 1;
}
.admin-msg-delete:hover { color: #b23b30; background: #fdecea; }
.admin-msg-input-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.admin-msg-input {
    flex: 1; height: 36px; border-radius: 8px; border: 1.5px solid #cdddd7;
    padding: 0 12px; font-family: 'Manrope', sans-serif; font-size: 0.84rem;
}
.admin-msg-input:focus { border-color: #1B825F; outline: none; box-shadow: 0 0 0 3px rgba(27,130,95,0.14); }
.admin-msg-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

/* ── Risk analysis section ── */
.admin-risk-section {
    background: #f9fcfb; border: 1px solid #e6efec; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px;
}
.admin-risk-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
}
.admin-risk-description { font-size: 0.86rem; color: #47605b; margin-top: 4px; }

/* ── PIN validation section ── */
.admin-pin-section { margin-top: 6px; }
/* tudo do PIN (status, tentativas, expiração, botão) numa linha só, quebrando
   quando faltar espaço — evita a pilha de linhas que esticava o header do card */
.admin-pin-inline {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 4px 6px; flex-wrap: wrap; font-size: 0.84rem;
}
.admin-pin-sep { color: #b7c6c1; }
.admin-pin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.84rem; }
.admin-pin-label { color: #6b7d77; font-weight: 600; }
.admin-pin-value { color: #1f2725; font-weight: 700; }
.admin-pin-highlight {
    background: #fff8e1; padding: 1px 6px; border-radius: 4px;
    font-weight: 700; color: #8b5c0a;
}

/* ── Credit card status icon ── */
.admin-cc-status { width: 26px; height: 20px; vertical-align: middle; border-radius: 3px; }

/* ── Print p/ WhatsApp (clone do card fora da tela, ver CopiarPrintCard) ──
   só o header vai no print (EC, devedor, data e valores); o corpo do card
   (portador, ClearSale, Credify, boleto) é informação interna e fica de fora */
.wa-print .admin-op-body,
.wa-print button,
.wa-print .admin-op-actions,
.wa-print .admin-pin-section,
.wa-print .admin-op-risk-note,
.wa-print .admin-sub-row-actions,
.wa-print .admin-boleto-actions,
.wa-print .admin-op-avatar-toggle,
.wa-print .message-card,
.wa-print .debt-collection-settlement { display: none !important; }
/* formato "quadradinho": colunas viram pilha e fontes crescem, para o
   thumbnail do WhatsApp já mostrar a informação sem abrir a imagem */
.wa-print .admin-op-header {
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 20px 22px; border-bottom: none; border-radius: 13px;
}
.wa-print .admin-op-summary { text-align: left; min-width: 0; max-width: none; }
.wa-print .admin-op-ec { font-size: 1.1rem; }
.wa-print .admin-op-devedor { font-size: 1rem; }
.wa-print .admin-op-date { font-size: 1rem; margin-top: 6px; }
.wa-print .admin-op-valor { font-size: 1.8rem; }
.wa-print .admin-op-parcelas,
.wa-print .admin-op-debitos { font-size: 1rem; }
.wa-print .operation-card {
    margin-bottom: 0; box-shadow: none;
    border: 1px solid #cfdcd5; border-radius: 14px;
    /* o clone fica fora da viewport; sem isso o content-visibility:auto
       (otimização da listagem) pularia o conteúdo e o print sairia em branco */
    content-visibility: visible;
}

/* ── Debt-collection inline elements ── */
.admin-debt-warning-on { color: #e67e22; font-weight: 700; font-size: 0.82rem; }
.admin-debt-warning-red { color: #e74c3c; }
.admin-debt-warning-off { display: none; }
.admin-debt-warning-gray { opacity: 0.5; }
.admin-debt-settle-label { font-size: 0.82rem; color: #47605b; font-weight: 600; }
.admin-debt-settle-disabled { color: #a0b0ab; }
.admin-debt-btn-status {
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    font-family: 'Manrope', sans-serif;
}
.admin-debt-btn-status:disabled { cursor: not-allowed; opacity: 0.5; }

/* ── Dropzone inside operation cards (sobrepõe o estilo legado do style-v6) ── */
#linhas-tentativas .dropzones {
    border: 2px dashed #cdddd7; border-radius: 10px; background: #fff;
    min-height: 36px; min-width: 140px; padding: 3px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
#linhas-tentativas .dropzones:hover { border-color: #1B825F; background: #f3faf7; }
#linhas-tentativas .dropzones .dz-message {
    font-family: 'Manrope', sans-serif; font-size: 0.78rem;
    color: #6b7d77; font-weight: 600; margin: 0;
}

/* ── Dropzone inside admin cards ── */
.admin-card .dropzones {
    border: 2px dashed #cdddd7; border-radius: 8px; background: #f9fcfb;
    min-height: 50px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-color 0.2s;
}
.admin-card .dropzones:hover { border-color: #1B825F; }
.admin-card .dropzones .dz-message {
    font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    color: #6b7d77; font-weight: 600;
}

/* ── Button variants ── */
.admin-btn-warning {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(243,156,18,0.3); white-space: nowrap;
}
.admin-btn-warning:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(243,156,18,0.4); }

.admin-btn-success {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(39,174,96,0.3); white-space: nowrap;
}
.admin-btn-success:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(39,174,96,0.4); }

.admin-btn-info {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(41,128,185,0.3); white-space: nowrap;
}
.admin-btn-info:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(41,128,185,0.4); }

.admin-btn-itau {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #003E6B 0%, #EC7000 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(0,62,107,0.3); white-space: nowrap;
}
.admin-btn-itau:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,62,107,0.4); }

/* ── Outline button variants ── */
.admin-btn-outline-danger {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: 1.5px solid #e74c3c; border-radius: 8px;
    background: #fff; color: #e74c3c; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.admin-btn-outline-danger:hover { background: #fdecec; }

.admin-btn-outline-success {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: 1.5px solid #27ae60; border-radius: 8px;
    background: #fff; color: #27ae60; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.admin-btn-outline-success:hover { background: #e7f6eb; }

.admin-btn-outline-warning {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: 1.5px solid #f39c12; border-radius: 8px;
    background: #fff; color: #e67e22; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.admin-btn-outline-warning:hover { background: #fef3cd; }

.admin-btn-outline-info {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: 1.5px solid #3498db; border-radius: 8px;
    background: #fff; color: #2980b9; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.admin-btn-outline-info:hover { background: #d1ecf1; }

/* Small modifier */
.admin-btn-sm { height: 30px; font-size: 0.76rem; padding: 0 10px; }

/* ── Ghost (neutro) ── */
.admin-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: 1.5px solid #cdddd7; border-radius: 8px;
    background: #fff; color: #47605b; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.admin-btn-ghost:hover { background: #f0f5f3; border-color: #1B825F; color: #1B825F; }

/* ── Icon button pequeno (olho, histórico em linha) ── */
.admin-btn-icon--sm { width: 30px; height: 30px; border-radius: 8px; font-size: 0.78rem; }

/* ── Link-ícone (download, lixeira) ── */
.admin-link-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    color: #1B825F; background: #e9f4f0; font-size: 0.78rem;
    transition: background 0.15s, color 0.15s; text-decoration: none;
}
.admin-link-icon:hover { background: #1B825F; color: #fff; text-decoration: none; }
.admin-link-icon--danger { color: #c0392b; background: #fdecec; }
.admin-link-icon--danger:hover { background: #e74c3c; color: #fff; }

/* ── Operation card body sections ── */
.admin-card-body-section {
    padding-top: 8px;
}
.admin-card-body-section:first-child { padding-top: 0; }

/* ── Reactivated PIN button ── */
.admin-btn-reactivated {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 14px; border: none; border-radius: 8px;
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.8rem;
    font-weight: 700; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 10px rgba(142,68,173,0.3); white-space: nowrap;
}
.admin-btn-reactivated:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(142,68,173,0.4); }

/* ── Attention origin label ── */
.admin-origin-attention { color: #e74c3c; font-weight: 700; }

/* ── Estorno section ── */
.admin-estorno-section {
    background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px;
    padding: 12px 14px; margin-bottom: 8px;
}
.admin-estorno-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Responsive operation cards ── */
@media (max-width: 767.98px) {
    .admin-card-header { flex-direction: column; }
    .admin-op-summary { text-align: left; min-width: auto; margin-top: 10px; }
    .admin-op-actions { justify-content: flex-start; }
    .admin-sub-row-header { flex-direction: column; }
    .admin-boleto-grid { flex-direction: column; gap: 6px; }
    .admin-meta-row { flex-direction: column; gap: 6px; }
}


/* ══════════════════════════════════════════════════
   Standalone form card  (telas de consulta/cadastro
   simples, centradas — ex.: Busca/Multas)
   ══════════════════════════════════════════════════ */

.admin-form-page {
    font-family: 'Manrope', sans-serif;
    display: flex; justify-content: center;
    padding: 24px 16px 40px;
    background: transparent;
}
.admin-form-card {
    width: 100%; max-width: 460px;
    background: #fff; border: 1px solid #e2e9e6; border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    overflow: hidden;
}
.admin-form-hero {
    background: linear-gradient(125deg, #1B825F 0%, #22A676 55%, #2EC49A 100%);
    padding: 20px 22px; color: #fff;
}
.admin-form-hero h4 { margin: 0 0 4px; font-weight: 800; font-size: 1.15rem; color: #fff; }
.admin-form-hero .admin-subtitle { color: #fff; }
.admin-form-body { padding: 22px; background: #fff; }
.admin-form-group { margin-bottom: 16px; }
.admin-form-label {
    display: block; font-size: 0.7rem; font-weight: 700; color: #47605b;
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.admin-form-input-wrap { position: relative; }
.admin-form-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #1B825F; font-size: 0.82rem; pointer-events: none; z-index: 4;
}
.admin-form-input {
    width: 100% !important; padding-left: 34px !important; height: 44px;
    border-radius: 10px !important; border: 1.5px solid #cdddd7 !important;
    background: #fff !important; font-size: 0.92rem; font-family: 'Manrope', sans-serif;
    font-weight: 600; color: #1e2624;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-form-input:focus {
    border-color: #1B825F !important;
    box-shadow: 0 0 0 3px rgba(27,130,95,0.14) !important;
    outline: none;
}
.admin-form-input::placeholder { color: #96a8a2; font-weight: 400; font-size: 0.84rem; }
.admin-form-input.input-validation-error { border-color: #e74c3c !important; }
.admin-form-hint { font-size: 0.74rem; color: #8aa099; margin-top: 4px; }
.admin-form-error {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: #b42318; margin-top: 4px;
}
.admin-form-error.field-validation-valid { display: none; }
.admin-form-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 46px; padding: 0 18px; border: none; border-radius: 10px;
    background: linear-gradient(135deg, #1B825F 0%, #2EC49A 100%);
    color: #fff; font-family: 'Manrope', sans-serif; font-size: 0.92rem;
    font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(27,130,95,0.3); white-space: nowrap;
    margin-top: 4px;
}
.admin-form-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(27,130,95,0.4); color: #fff; }
.admin-form-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(27,130,95,0.25); }
.admin-form-btn.is-loading { pointer-events: none; opacity: 0.85; }

/* ── Form card: variante larga e fluxos em etapas (ex.: Cobranca/Index) ── */
.admin-form-card--wide { max-width: 880px; }
.admin-form-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 0 16px; background: transparent;
}
.admin-form-section { background: transparent; }
.admin-form-section + .admin-form-section {
    margin-top: 22px; padding-top: 18px; border-top: 1px solid #edf2f0;
}
.admin-form-section-title {
    font-size: 1rem; font-weight: 800; color: #1c2825;
    margin: 0 0 12px; background: transparent;
}
.admin-form-inline {
    display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
    background: transparent;
}
.admin-form-inline .admin-form-field { flex: 0 1 240px; min-width: 180px; }
.admin-form-footer {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-top: 16px; flex-wrap: wrap; background: transparent;
}

/* ── Spinner sobre fundos claros (botões outline) ── */
.admin-spinner--dark { border-color: rgba(27,130,95,0.25); border-top-color: #1B825F; }
[class^="admin-btn"].is-loading, [class*=" admin-btn"].is-loading { pointer-events: none; opacity: 0.85; }

@media (max-width: 575.98px) {
    .admin-form-page { padding: 12px 8px 24px; }
    .admin-form-body { padding: 18px 16px; }
    .admin-form-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════
   Tabelas de dados  (telas de histórico/consolidados
   — ex.: Pagamento/HistoricoManager)
   IMPORTANTE: o casco legado tem * { background-color: inherit },
   então toda célula/cabeçalho declara o próprio fundo.
   ══════════════════════════════════════════════════ */

/* ── Cabeçalho de seção do conteúdo ── */
.admin-section-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 0 12px; background: transparent;
}
.admin-section-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem; font-weight: 800; color: #1c2825;
    margin: 0; background: transparent;
}
.admin-section-title .mdi, .admin-section-title .fa { color: #1B825F; font-size: 1.05rem; }
.admin-section-subtitle {
    font-size: 0.84rem; color: #5e6d69;
    margin: 0 0 16px; background: transparent;
}
.admin-section + .admin-section { margin-top: 28px; }

/* ── Cartão que envolve a tabela ── */
.admin-table-wrap {
    background: #fff;
    border: 1px solid #e2e9e6;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
    overflow: hidden;            /* arredonda os cantos do thead/última linha */
    margin-bottom: 14px;
}

/* Contêiner de rolagem horizontal: tabelas largas (admin tem 11+ colunas) rolam
   em vez de serem cortadas pelo overflow:hidden do wrap em telas estreitas. */
.admin-table-scroll { overflow-x: auto; background: #fff; }

/* ── Tabela base ── */
.admin-table {
    width: 100%; margin: 0;
    border-collapse: collapse;
    background: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 0.84rem; color: #1f2725;
}
.admin-table th, .admin-table td {
    background: transparent;     /* obrigatório: vence o inherit global */
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #eef3f1;
    vertical-align: middle;
    text-align: left;
}
.admin-table tbody tr:last-child > td { border-bottom: none; }
.admin-table thead th {
    background: #f9fcfb;
    color: #47605b;
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 11px 14px;
    border-bottom: 1px solid #e2e9e6;
    white-space: nowrap;
}

/* ── Linha de dados (hover + afim de indicar que expande) ── */
.admin-table tbody tr.admin-table-row { background: #fff; transition: background 0.12s; }
.admin-table tbody tr.admin-table-row.is-clickable { cursor: pointer; }
.admin-table tbody tr.admin-table-row:hover > td { background: #f4f8f6; }
.admin-table tbody tr.admin-table-row.is-open > td { background: #eef6f2; }

/* ── Célula numérica / monetária ── */
.admin-table .admin-table-num,
.admin-table th.admin-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.admin-table td.admin-table-num { font-weight: 700; color: #1b2523; }

/* ── Botão chevron que expande o mês ── */
.admin-table-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: 1.5px solid #cdddd7; border-radius: 8px;
    background: #fff; color: #1B825F;
    font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0;
    transition: background 0.15s, border-color 0.15s;
}
.admin-table-toggle:hover { background: #e9f4f0; border-color: #1B825F; }
.admin-table-toggle .mdi { transition: transform 0.15s; }
.admin-table-toggle.is-open .mdi { transform: rotate(90deg); }   /* chevron-right → down */

/* ── Linha expansível com o detalhe do mês ── */
.admin-table tbody tr.admin-table-subrow > td {
    background: #f4f8f6;          /* explícito + indica aninhamento */
    padding: 0;
    border-bottom: 1px solid #e2e9e6;
}
.admin-table-subrow-inner { padding: 10px 14px 14px; background: transparent; overflow-x: auto; }

/* ── Tabela aninhada (transações do mês) ── */
.admin-table--nested {
    background: #fff;
    border: 1px solid #e6efec;
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.8rem;
}
.admin-table--nested thead th {
    background: #f8fbfa;
    font-size: 0.66rem;
    padding: 8px 12px;
}
.admin-table--nested td { padding: 8px 12px; border-bottom: 1px solid #f0f5f3; }
.admin-table--nested tbody tr:last-child > td { border-bottom: none; }
.admin-table--nested tbody tr:hover > td { background: #f9fcfb; }

/* ── Linha de mês sem transações (inerte) ── */
.admin-table tbody tr.admin-table-empty-row,
.admin-table tbody tr.admin-table-empty-row:hover > td { background: #fbfdfc; cursor: default; }
.admin-table-empty-row td { color: #8aa099; font-style: italic; font-size: 0.8rem; }

/* ── Toolbar de seleção de período (Resultados agregados) ── */
.admin-agregados-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px;
    background: #f9fcfb;
    border-bottom: 1px solid #eef3f1;
}
.admin-agregados-toolbar .admin-filter-label { margin: 0; }
.admin-agregados-toolbar .admin-filter-select { width: auto !important; min-width: 160px; max-width: 240px; }

/* ── Rodapé de ação da tabela (Carregar mês anterior) ── */
.admin-table-footer {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 14px;
    background: #f9fcfb;
    border-top: 1px solid #eef3f1;
}

/* ── Estado de carregamento dentro de uma linha que expande ── */
.admin-table-loading {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px; background: transparent;
    color: #5e6d69; font-size: 0.82rem; font-weight: 600;
}
.admin-table-loading.admin-table-error { color: #b42318; }

/* ── Toggle do colapso "Resultados agregados" (Bootstrap atualiza aria-expanded) ── */
.admin-collapse-toggle .mdi { transition: transform 0.15s; }
.admin-collapse-toggle[aria-expanded="true"] .mdi { transform: rotate(180deg); }

/* ── Typeahead (busca de instituição na sidebar admin) ──
   o plugin embrulha o input num .twitter-typeahead e injeta um .tt-menu;
   nenhuma é classe admin-*, então precisam de fundo/largura explícitos. */
.admin-filter .twitter-typeahead { width: 100%; display: block !important; }
.admin-filter .tt-menu {
    width: 100%;
    background: #fff;
    border: 1px solid #e2e9e6; border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16,24,40,0.16);
    margin-top: 4px; padding: 4px; overflow: hidden;
}
.admin-filter .tt-suggestion {
    padding: 7px 12px; border-radius: 8px;
    font-size: 0.82rem; color: #1f2725; cursor: pointer; background: #fff;
}
.admin-filter .tt-suggestion:hover,
.admin-filter .tt-suggestion.tt-cursor { background: #e9f4f0; color: #1B825F; }
.admin-filter .tt-hint { color: #96a8a2; }

/* ===========================================================================
   Linha do tempo da transação (modal "Vida da transação") + visualizador JSON
   =========================================================================== */
.admin-history-modal .modal-header { flex-direction: row; justify-content: space-between; }
.admin-timeline-subtitle { font-size: 0.84rem; color: #51635c; margin-top: 2px; }
.admin-timeline-subtitle--muted { color: #8aa09a; font-size: 0.78rem; }
.admin-timeline-body { max-height: 70vh; overflow-y: auto; background: #fff; }

.admin-timeline-avisos { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.admin-timeline-aviso {
    background: #fef3cd; color: #856404; border: 1px solid #fae9a8;
    border-radius: 8px; padding: 7px 10px; font-size: 0.78rem;
}

.admin-timeline { list-style: none; margin: 0; padding: 4px 0 0; }
.admin-timeline-item { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.admin-timeline-icon {
    position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.82rem; z-index: 1;
    background: #eef2f0; color: #51635c;
}
.admin-timeline-item:not(:last-child) .admin-timeline-icon::after {
    content: ''; position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
    width: 2px; height: calc(100% - 22px); background: #e3ece9;
}
.admin-timeline-icon--success { background: #e7f6eb; color: #1f7a35; }
.admin-timeline-icon--info    { background: #e9f4f0; color: #1B825F; }
.admin-timeline-icon--danger  { background: #fdecec; color: #b42318; }
.admin-timeline-icon--neutral { background: #eef2f0; color: #51635c; }

.admin-timeline-content { flex: 1; min-width: 0; padding-top: 2px; }
.admin-timeline-time { font-size: 0.72rem; color: #8aa09a; font-weight: 600; }
.admin-timeline-title { font-size: 0.92rem; font-weight: 700; color: #1f2725; line-height: 1.3; }
.admin-timeline-actor { font-size: 0.76rem; color: #51635c; margin-top: 1px; }
.admin-timeline-desc { font-size: 0.82rem; color: #3a4744; margin-top: 3px; word-break: break-word; }
.admin-timeline-content .admin-card-chips { margin-top: 6px; }

/* visualizador de JSON dos logs de integração */
.admin-timeline-jsons { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.admin-json-chip {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    background: #eef2f0; color: #21524a; border: 1px solid #d5e9e2;
    border-radius: 999px; padding: 3px 12px; font-size: 0.74rem; font-weight: 600; cursor: pointer;
}
.admin-json-chip:hover { background: #e0efe9; border-color: #1B825F; }
.admin-json-caret { font-size: 0.62rem; transition: transform 0.15s ease; }
.admin-json-chip.is-open .admin-json-caret { transform: rotate(180deg); }
.admin-json-panel { margin-top: 6px; }
.admin-json-block { margin-bottom: 8px; }
.admin-json-block-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: #6b7d77; padding: 0 2px 3px;
}
.admin-json-block-head--error { color: #b42318; }
.admin-json-copy {
    background: transparent; border: none; color: #1B825F; font-size: 0.7rem; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-weight: 600;
}
.admin-json-copy:hover { text-decoration: underline; }
.admin-json-pre {
    margin: 0; background: #0f172a; color: #e2e8f0; border-radius: 8px;
    padding: 10px 12px; font-size: 0.72rem; line-height: 1.45; max-height: 320px; overflow: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; white-space: pre;
}
.admin-json-pre--error { background: #2a1414; color: #ffd5d0; white-space: pre-wrap; }
