/* ============================================================
   ONCHOR — ux-fixes.css
   Correções de UX/UI: centralização, grid, espaçamento, hierarquia
   Carregado após main.css — sobrescreve com especificidade mínima
   ============================================================ */

/* ── RESET GLOBAL ────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

/* Container raiz — ocupa 100% da viewport sem gargalo lateral */
#app {
    max-width: 100%;
    width: 100%;
}

/* ── DESIGN TOKENS COMPLEMENTARES ───────────────────────────── */
:root {
    --bg-elevated:   #1e1e1e;
    --bg-hover:      #252525;
    --border-subtle: #181818;

    --text-primary:   #ffffff;
    --text-secondary: #a8a8a8;
    --text-muted:     #6b6b6b;

    --accent-primary: #ff6b35;
    --accent-success: #22c55e;
    --accent-danger:  #ef4444;
    --accent-warning: #f59e0b;
    --accent-info:    #3b82f6;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);

    --font-base: 'Inter', -apple-system, system-ui, sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;
    --font-touch-target: 44px;
}

/* ── TIPOGRAFIA GLOBAL (escala consistente) ──────────────────── */
.page-title,
h1.fw-bold { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }

h2, .h2 { font-size: 1.25rem; font-weight: 700; }
h3, .h3 { font-size: 1.125rem; font-weight: 700; }
h4, .h4 { font-size: 1rem;     font-weight: 700; }

.text-label-sm {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

/* ── CARDS UNIFORMES ────────────────────────────────────────── */
.card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}
.card-body { padding: var(--space-6) !important; }

@media (max-width: 576px) {
    .card-body { padding: var(--space-4) !important; }
}

/* ── BOTÕES: touch target mínimo (HIG Apple 44px) ───────────── */
.btn {
    min-height: var(--font-touch-target) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-2) !important;
    font-weight: 600 !important;
}
.btn-sm {
    min-height: 36px !important;
    font-size: 0.8125rem !important;
}
.btn-xs {
    min-height: 30px !important;
    font-size: 0.75rem !important;
}

/* ── GRID PADDING UNIFORME ──────────────────────────────────── */
#page-content-wrapper { padding: var(--space-6) var(--space-4) var(--space-8); }

@media (min-width: 769px) {
    #page-content-wrapper { padding: var(--space-8) var(--space-6) var(--space-8); }
}


/* ══════════════════════════════════════════════════════════════
   1. MODAL "SUGESTÕES PARA LEAD" (schedules.js)
   ══════════════════════════════════════════════════════════════ */

/* Bottom sheet em mobile */
@media (max-width: 576px) {
    #suggestionsModal .modal-dialog,
    [id*="suggest"] .modal-dialog,
    .modal-suggestions .modal-dialog {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100% !important;
    }
    #suggestionsModal .modal-content,
    [id*="suggest"] .modal-content,
    .modal-suggestions .modal-content {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
}
@media (min-width: 577px) {
    #suggestionsModal .modal-dialog,
    [id*="suggest"] .modal-dialog {
        max-width: 520px !important;
    }
}

/* LEGADO REMOVIDO — substituído pela seção SUGGESTION-ITEM abaixo */

/* Badge de nível alinhado */
.nivel-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* Botão "Adicionar Selecionados" fixo no rodapé do modal */
.modal-footer-sticky {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-subtle);
    padding: var(--space-4) !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
}


/* ══════════════════════════════════════════════════════════════
   2. MINHAS ESCALAS — CARD DE ESCALA
   ══════════════════════════════════════════════════════════════ */

/* Card base */
.schedule-card,
#my-schedules-list .card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
    margin-bottom: var(--space-4) !important;
}

/* Faixa de status (top bar) */
.card-status-bar {
    height: 4px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* Grid de ações do card (3 botões iguais) */
.schedule-card-actions,
.card-actions-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: var(--space-2) !important;
    margin-top: var(--space-4) !important;
}

.schedule-card-actions .btn,
.card-actions-grid .btn {
    height: 52px !important;
    min-height: 52px !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 0 var(--space-2) !important;
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.schedule-card-actions .btn i,
.card-actions-grid .btn i {
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
}


/* ══════════════════════════════════════════════════════════════
   3. LOGIN — RECUPERAR SENHA (bug placeholder duplicado)
   ══════════════════════════════════════════════════════════════ */

/* Garante que form-floating não mostre placeholder E label ao mesmo tempo */
.form-floating > .form-control:not(:focus):not(:placeholder-shown) ~ label,
.form-floating > .form-control:focus ~ label {
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
    opacity: 1 !important;
}
/* Placeholder do form-floating: invisível quando label está na posição padrão */
.form-floating > .form-control:not(:focus):placeholder-shown {
    padding-top: 0.625rem !important;
}

/* Input com ícone na tela de login */
.input-icon-wrap {
    position: relative;
}
.input-icon-wrap .input-icon-prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    z-index: 5;
}
.input-icon-wrap input {
    padding-left: 40px !important;
}


/* ══════════════════════════════════════════════════════════════
   4. DASHBOARD "VISÃO GERAL"
   ══════════════════════════════════════════════════════════════ */

/* Seletor de período: card único com De/Até em linha */
.period-selector-card {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-3) var(--space-4) !important;
    max-width: 340px !important;
}
.period-selector-card .period-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    white-space: nowrap;
}
.period-selector-card input[type="date"] {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    min-width: 90px !important;
    cursor: pointer;
}
.period-separator {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Cards de métricas KPI: grid 2 colunas */
.metrics-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--space-3) !important;
    margin-bottom: var(--space-4) !important;
}

@media (min-width: 769px) {
    .metrics-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

.metric-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
    position: relative !important;
    overflow: hidden !important;
}
.metric-card-label {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--text-muted) !important;
    margin-bottom: var(--space-2) !important;
    display: block !important;
}
.metric-card-value {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    line-height: 1 !important;
}
.metric-card-icon {
    position: absolute !important;
    top: var(--space-4) !important;
    right: var(--space-4) !important;
    font-size: 1.25rem !important;
    opacity: 0.25 !important;
}

/* Seletor de datas do dashboard (existing HTML) */
.d-flex.flex-wrap.flex-sm-nowrap.align-items-center.justify-content-center.bg-white.border.rounded.shadow-sm.px-2.py-2.gap-2 {
    background: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}


/* ══════════════════════════════════════════════════════════════
   5. FORÇA DE TRABALHO (ATIVOS) — BADGES AGRUPADOS
   ══════════════════════════════════════════════════════════════ */

.workforce-section {
    margin-bottom: var(--space-4) !important;
}
.workforce-section-title {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--text-muted) !important;
    margin-bottom: var(--space-2) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}
.workforce-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
}

.workforce-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-subtle) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    white-space: nowrap !important;
}
.workforce-badge .badge-count {
    color: var(--accent-primary) !important;
    font-weight: 800 !important;
}


/* ══════════════════════════════════════════════════════════════
   6. GESTÃO DE ESCALAS — HEADER
   ══════════════════════════════════════════════════════════════ */

/* Badge info de média (linha 1) */
.schedule-mgmt-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

/* Grid de botões de ação (linha 2) */
.schedule-mgmt-actions {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: var(--space-2) !important;
    margin-bottom: var(--space-4) !important;
}

@media (max-width: 576px) {
    .schedule-mgmt-actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* Form "Nova Escala Manual" — remover contorno laranja agressivo */
#nova-escala-form,
.nova-escala-section,
[id*="manual-form"] {
    background: #1a1a1a !important;
    border: 1px solid #181818 !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
    outline: none !important;
}

#nova-escala-form h6,
#nova-escala-form .form-title,
.nova-escala-section h6 {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

/* Remove box-shadow laranja de seções (não inputs) */
.card:focus-within:not(:has(input:focus)):not(:has(select:focus)):not(:has(textarea:focus)) {
    box-shadow: var(--shadow-md) !important;
}


/* ══════════════════════════════════════════════════════════════
   7. ESCALAS DO MÊS (all-schedules.js)
   ══════════════════════════════════════════════════════════════ */

/* Padding no topo para evitar corte */
#all-schedules-container,
[id*="schedules-month"],
.all-schedules-page {
    padding-top: var(--space-6) !important;
}

/* Inputs de datas: iguais em largura */
.date-filter-group {
    display: grid !important;
    grid-template-columns: auto 1fr auto 1fr !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-2) var(--space-3) !important;
}

/* Botões filtrar / limpar */
.filter-btn-group {
    display: flex !important;
    gap: var(--space-2) !important;
    align-items: center !important;
}
.filter-btn-group .btn-filter-primary {
    flex: 1 !important;
}
.filter-btn-group .btn-filter-clear {
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* Avatares nos cards de escala: máximo 3 + "+N" */
.schedule-avatars {
    display: flex !important;
    align-items: center !important;
    padding-right: var(--space-4) !important;
}
.schedule-avatars img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid var(--bg-card) !important;
    margin-left: -6px !important;
    object-fit: cover !important;
}
.schedule-avatars img:first-child { margin-left: 0 !important; }
.schedule-avatars .avatar-overflow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--bg-card);
    margin-left: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-secondary);
}


/* ══════════════════════════════════════════════════════════════
   8. RELATÓRIOS BI (desktop)
   ══════════════════════════════════════════════════════════════ */

/* Padding no topo do título */
#reports-page,
.reports-container,
[id*="bi-report"] {
    padding-top: var(--space-6) !important;
}

/* KPIs: 5 colunas iguais */
.kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: var(--space-4) !important;
    margin-bottom: var(--space-4) !important;
}

@media (max-width: 992px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 576px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

.kpi-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    padding: var(--space-4) !important;
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Cards segunda linha BI: alturas iguais */
.bi-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: var(--space-4) !important;
    align-items: stretch !important;
}
.bi-cards-grid > * {
    min-height: 280px !important;
}

@media (max-width: 992px) {
    .bi-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 576px) {
    .bi-cards-grid { grid-template-columns: 1fr !important; }
}

/* Nomes truncados nos cards BI */
.bi-member-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 160px !important;
}

/* ══════════════════════════════════════════════════════════════
   SKELETON LOADING (my-schedules)
   ══════════════════════════════════════════════════════════════ */
.skeleton-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
}
.skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite;
    border-radius: 6px;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-badge  { height: 20px; width: 80px; border-radius: 20px; margin-bottom: 12px; }
.skeleton-title  { height: 20px; width: 70%; margin-bottom: 8px; }
.skeleton-text   { height: 14px; width: 50%; margin-bottom: 20px; }
.skeleton-buttons { display: flex; gap: 8px; }
.skeleton-btn    { height: 40px; flex: 1; border-radius: 8px; }


/* ══════════════════════════════════════════════════════════════
   UTILS GERAIS
   ══════════════════════════════════════════════════════════════ */

/* Texto truncado com ellipsis */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Divider vertical */
.vr-dark {
    display: inline-block;
    width: 1px;
    height: 1em;
    background: var(--border-subtle);
    opacity: 1;
    vertical-align: middle;
}

/* Centralizador de conteúdo de página */
.page-content-max {
    max-width: 960px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 1440px) {
    .page-content-max { max-width: 1200px; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE UX — CORREÇÕES GERAIS (max-width: 576px)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. ACADEMY: botão "ACESSAR TREINAMENTO" não quebra linha ── */
.course-hero .btn {
    white-space: nowrap !important;
}

/* ── 2. MINHAS ESCALAS: botões da escala no mobile ─────────── */
@media (max-width: 576px) {
    /* Cards ficam full-width numa coluna */
    #my-schedules-list .col-md-6 {
        width: 100% !important;
    }

    /* Texto dos botões de ação: tamanho menor para não quebrar */
    #my-schedules-list .btn-sm {
        font-size: 0.72rem !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Linha do botão de avaliação abaixo da linha dos outros */
    #my-schedules-list .d-grid .d-grid,
    #my-schedules-list .d-grid > div:last-child {
        width: 100% !important;
    }
}

/* ── 3. EQUIPE NA ESCALA (detalhe): nomes longos truncados ──── */
.schedule-detail-team .list-group-item,
#my-schedules-list .list-group-item {
    min-width: 0;
}

.schedule-detail-team .list-group-item .member-info,
#detail-team-list .list-group-item > div:first-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.schedule-detail-member-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 160px !important;
    display: block !important;
}

@media (max-width: 576px) {
    .schedule-detail-member-name {
        max-width: 120px !important;
    }
}

/* ── 4. DISPONIBILIDADE: bloco de bloqueios sem overflow ─────── */
#blocks-list .card-body {
    min-width: 0;
}

#blocks-list .card-body > .d-flex {
    min-width: 0;
    overflow: hidden;
}

#blocks-list .block-reason-text {
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

#blocks-list .block-reason-text .fw-bold {
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

/* ── 5. DISPONIBILIDADE: inputs de data lado a lado no mobile ── */
@media (max-width: 576px) {
    #block-form .row.g-2 .col-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 6. SETTINGS: botões de topo melhor espaçados ───────────── */
@media (max-width: 576px) {
    .settings-top-actions {
        flex-direction: column !important;
        gap: var(--space-2) !important;
    }
    .settings-top-actions .btn {
        width: 100% !important;
    }
}

/* ── 7. RELATÓRIOS: mini-cards de BI — texto correto ─────────── */
.bi-rank-item {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.bi-rank-item .bi-rank-text {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}
.bi-rank-item .bi-rank-text .fw-bold,
.bi-rank-item .bi-rank-text small {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* ── 8. GERAL: prevenir overflow horizontal em toda a página ─── */
@media (max-width: 576px) {
    #page-content-wrapper {
        overflow-x: hidden !important;
    }

    /* Badges e tags que quebram layout */
    .badge {
        white-space: nowrap !important;
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        vertical-align: middle !important;
    }

    /* Botões w-100 no mobile nunca transbordam */
    .btn.w-100 {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ── 9. ESCALAS DO MÊS (all-schedules): cards menores no mobile */
@media (max-width: 576px) {
    #all-schedules-container .col-md-6,
    #all-schedules-container .col-lg-4 {
        width: 100% !important;
    }
}

/* ── 10. HERO COURSE: responsivo no mobile ──────────────────── */
@media (max-width: 576px) {
    .course-hero {
        padding: var(--space-6) var(--space-4) !important;
    }
    .course-hero h1 {
        font-size: 1.5rem !important;
    }
    .course-hero .lead {
        font-size: 0.9rem !important;
    }
    .course-hero .btn {
        font-size: 0.85rem !important;
        padding: 10px 20px !important;
    }
}

/* ── 11. SETTINGS: abas em grid 2×N no mobile ───────────────── */
@media (max-width: 576px) {
    #settingsTabs {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-2) !important;
    }
    #settingsTabs .nav-item {
        flex: none !important;
    }
    #settingsTabs .nav-link {
        font-size: 0.68rem !important;
        padding: 8px 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    #settingsTabs .nav-link .bi {
        display: none !important;
    }
}

/* ── 12. AGENDA / CALENDÁRIO: overflow em telas pequenas ────── */
@media (max-width: 576px) {
    .fc-toolbar-title {
        font-size: 1rem !important;
    }
    .fc .fc-button {
        padding: 4px 8px !important;
        font-size: 0.75rem !important;
    }
    .fc-event-title {
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ── 13. MEMBROS: card avatar + nome não transborda ─────────── */
@media (max-width: 576px) {
    .member-card .card-body {
        padding: var(--space-3) !important;
    }
    .member-card .member-name {
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   CORREÇÃO CRÍTICA — MODAIS BOOTSTRAP (centralização global)
   ══════════════════════════════════════════════════════════════ */

/* Centraliza TODOS os modal-dialog que não sejam fullscreen */
.modal-dialog:not(.modal-fullscreen) {
    margin-left:  auto !important;
    margin-right: auto !important;
    max-width: 520px !important;
}

/* Aparência escura unificada para modal-content */
.modal-content {
    background: #141414 !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* Backdrop escuro com blur */
.modal-backdrop {
    background-color: #000 !important;
}
.modal-backdrop.show {
    opacity: 0.8 !important;
}
/* backdrop-filter via pseudo — não afeta z-index da backdrop real */
.modal-backdrop.show::after {
    content: '';
    position: fixed;
    inset: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Mobile: bottom sheet global para modais comuns */
@media (max-width: 576px) {
    .modal.show .modal-dialog:not(.modal-fullscreen):not(.modal-dialog-top) {
        transform:  none !important;
        margin:     0 !important;
        position:   fixed !important;
        bottom:     0 !important;
        left:       0 !important;
        right:      0 !important;
        width:      100vw !important;
        max-width:  100vw !important;
        max-height: 90dvh;
        display:    flex !important;
        flex-direction: column;
        align-items: stretch;
    }

    .modal.show .modal-dialog:not(.modal-fullscreen):not(.modal-dialog-top) .modal-content {
        border-radius:  var(--radius-xl) var(--radius-xl) 0 0 !important;
        border-left:    none !important;
        border-right:   none !important;
        border-bottom:  none !important;
        width:          100% !important;
        max-width:      100% !important;
        max-height:     90dvh;
        overflow:       hidden;
        display:        flex;
        flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* modal-body ocupa o espaço restante e rola */
    .modal.show .modal-dialog:not(.modal-fullscreen) .modal-body {
        flex:       1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* search-wrap fica fora do scroll — já é sticky, mas garante flex-shrink:0 */
    .modal.show .modal-dialog:not(.modal-fullscreen) .suggestion-search-wrap {
        flex-shrink: 0;
    }
}

/* Modal grande (lg/xl): respeita max-width próprio */
.modal-dialog.modal-lg {
    max-width: 800px !important;
}
.modal-dialog.modal-xl {
    max-width: min(1100px, 96vw) !important;
}

/* Header e footer da modal */
.modal-header {
    border-bottom-color: var(--border-subtle) !important;
    padding: var(--space-4) var(--space-6);
}
.modal-footer {
    border-top-color: var(--border-subtle) !important;
    padding: var(--space-4) var(--space-6);
}
/* Sem !important: permite que p-0 e p-4 inline do template sobrescrevam */
.modal-body {
    padding: var(--space-4) var(--space-6);
}


/* ══════════════════════════════════════════════════════════════
   SUGGESTION SEARCH WRAPPER — sticky acima da lista
   ══════════════════════════════════════════════════════════════ */

.suggestion-search-wrap {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 2;
}

.suggestion-search-wrap input {
    background: var(--bg-card) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}

.suggestion-search-wrap input::placeholder { color: var(--text-muted) !important; }
.suggestion-search-wrap input:focus {
    box-shadow: 0 0 0 2px rgba(255,107,53,0.25) !important;
    border-color: var(--accent-primary) !important;
    outline: none;
}


/* ══════════════════════════════════════════════════════════════
   SUGGESTION-ITEM — LAYOUT HORIZONTAL DEFINITIVO
   [checkbox] [avatar] [info: nome+status] [badge nível]
   flex-direction: row !important vence main.css (column sem !important)
   ══════════════════════════════════════════════════════════════ */

.modal .suggestion-item,
.modal-body .suggestion-item,
label.suggestion-item,
.suggestion-item {
    display:          flex !important;
    flex-direction:   row !important;
    align-items:      center !important;
    justify-content:  flex-start !important;
    flex-wrap:        nowrap !important;
    gap:              10px !important;
    padding:          10px 16px !important;
    width:            100% !important;
    box-sizing:       border-box !important;
    border-radius:    0 !important;
    border-left:      none !important;
    border-right:     none !important;
    text-align:       left !important;
    min-height:       62px !important;
}

/* Checkbox / radio — col 1 */
.modal .suggestion-item > input[type="checkbox"],
.modal .suggestion-item > input[type="radio"],
.suggestion-item > input[type="checkbox"],
.suggestion-item > input[type="radio"] {
    flex:         0 0 18px !important;
    width:        18px !important;
    height:       18px !important;
    margin:       0 !important;
    padding:      0 !important;
    accent-color: var(--accent-primary) !important;
    cursor:       pointer !important;
}

/* Ícone indisponível — col 1 alternativa */
.suggestion-item > i.bi-dash-circle {
    flex:       0 0 18px !important;
    font-size:  1rem !important;
    text-align: center !important;
    margin:     0 !important;
}

/* Avatar img — col 2 */
.modal .suggestion-item > img,
.suggestion-item > img {
    flex:          0 0 40px !important;
    width:         40px !important;
    height:        40px !important;
    border-radius: 50% !important;
    object-fit:    cover !important;
    margin:        0 !important;
    display:       block !important;
}

/* Avatar fallback div-inicial — col 2 */
.modal .suggestion-item > div.rounded-circle,
.suggestion-item > div.rounded-circle {
    flex:          0 0 40px !important;
    width:         40px !important;
    height:        40px !important;
    border-radius: 50% !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
    flex-direction: row !important;
    margin:        0 !important;
}

/* Info block (nome + status) — col 3, cresce */
.modal .suggestion-item .suggestion-info,
.suggestion-item .suggestion-info {
    flex:           1 1 auto !important;
    min-width:      0 !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            2px !important;
    margin:         0 !important;
    padding:        0 !important;
}

/* Nome — trunca */
.suggestion-item .suggestion-name {
    display:       block !important;
    width:         100% !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    font-weight:   700 !important;
    font-size:     0.9rem !important;
    line-height:   1.3 !important;
    margin:        0 !important;
}

/* Status disponível / motivo */
.suggestion-item .suggestion-status {
    display:       block !important;
    width:         100% !important;
    font-size:     0.72rem !important;
    line-height:   1.2 !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
    margin:        0 !important;
}

/* Badge de nível — col 4, fixo à direita */
.modal .suggestion-item > .badge,
.suggestion-item > .badge {
    flex:        0 0 auto !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    font-size:   0.68rem !important;
    font-weight: 700 !important;
    padding:     4px 10px !important;
}

/* Campo de busca dentro do modal */
.modal-search-wrap {
    position:   relative;
    margin-bottom: var(--space-3);
}
.modal-search-wrap .modal-search-icon {
    position:   absolute;
    left:       12px;
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--text-muted);
    pointer-events: none;
}
.modal-search-wrap input {
    padding-left: 38px !important;
    background:   var(--bg-elevated) !important;
    border-color: var(--border-subtle) !important;
    color:        var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}
.modal-search-wrap input::placeholder { color: var(--text-muted) !important; }
.modal-search-wrap input:focus {
    box-shadow:   0 0 0 2px rgba(255,107,53,0.25) !important;
    border-color: var(--accent-primary) !important;
}


/* ══════════════════════════════════════════════════════════════
   NIVEL-BADGE — cores por nível (1-5)
   ══════════════════════════════════════════════════════════════ */

.nivel-badge[data-nivel="5"],
.nivel-badge.nivel-5 {
    background: rgba(34,197,94,0.15)  !important;
    color:      #22c55e               !important;
    border:     1px solid rgba(34,197,94,0.3) !important;
}
.nivel-badge[data-nivel="4"],
.nivel-badge.nivel-4 {
    background: rgba(249,115,22,0.15) !important;
    color:      #f97316               !important;
    border:     1px solid rgba(249,115,22,0.3) !important;
}
.nivel-badge[data-nivel="3"],
.nivel-badge.nivel-3 {
    background: rgba(234,179,8,0.15)  !important;
    color:      #eab308               !important;
    border:     1px solid rgba(234,179,8,0.3) !important;
}
.nivel-badge[data-nivel="2"],
.nivel-badge.nivel-2,
.nivel-badge[data-nivel="1"],
.nivel-badge.nivel-1 {
    background: rgba(107,114,128,0.15) !important;
    color:      #9ca3af                !important;
    border:     1px solid rgba(107,114,128,0.3) !important;
}


/* ══════════════════════════════════════════════════════════════
   AFINAMENTO DE CARDS NO MOBILE
   Reduz borda, padding e margin de cards em telas pequenas
   para evitar aparência "espremida" / "achatada"
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {

    /* Container principal: padding mínimo no mobile */
    #page-content {
        padding: 10px 12px !important;
    }

    /* Row gutters menores para não espremer as colunas */
    .row {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 0.5rem !important;
    }

    /* CARDS GENÉRICOS — borda fina, padding compacto */
    .card,
    .info-card,
    .form-card,
    .config-card,
    .section-card,
    .block,
    .bloco,
    [class*="-card"]:not(.schedule-card):not(.member-card) {
        border-width: 1px !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin-bottom: 8px !important;
        box-shadow: none !important;
    }

    /* Card header interno: padding reduzido */
    .card-header,
    .card-title {
        padding: 8px 12px !important;
        font-size: 0.9375rem !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .card-footer {
        padding: 8px 12px !important;
    }

    /* TABS DE NAVEGAÇÃO (Dados Gerais / Identidade / etc.) */
    .nav-tabs,
    .nav-pills,
    .tabs-container {
        gap: 4px !important;
        padding: 4px !important;
        border-radius: 10px !important;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link,
    .tabs-container button {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        border-radius: 8px !important;
        min-height: 32px !important;
    }

    /* INPUTS DENTRO DE CARDS — respiram sem estourar */
    .card input[type="text"],
    .card input[type="email"],
    .card input[type="tel"],
    .card input[type="number"],
    .card input[type="password"],
    .card input[type="date"],
    .card input[type="time"],
    .card textarea,
    .card select,
    .form-control {
        padding: 10px 12px !important;
        font-size: 0.9375rem !important;
        border-radius: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* LABELS SOBRE INPUTS */
    .card label,
    .form-label {
        font-size: 0.75rem !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.3px !important;
    }

    /* GRUPOS DE INPUT */
    .form-group,
    .mb-3,
    .mb-4 {
        margin-bottom: 12px !important;
    }

    /* BOTÕES DENTRO DE CARDS — mais compactos */
    .card .btn,
    .card button:not(.btn-close) {
        padding: 8px 14px !important;
        font-size: 0.875rem !important;
        min-height: 40px !important;
        border-radius: 8px !important;
    }

    /* LISTAS DENTRO DE CARDS */
    .card ul,
    .card ol,
    .card .list-group {
        padding-left: 12px !important;
    }

    .card .list-group-item {
        padding: 8px 12px !important;
        font-size: 0.875rem !important;
    }

    /* SEÇÕES / SUBCARDS ANINHADOS */
    .card .card,
    .card .sub-card,
    .card .info-block {
        padding: 8px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
    }

    /* HEADERS DE SEÇÃO DENTRO DE CARDS */
    .card h1, .card h2, .card h3, .card h4, .card h5 {
        font-size: 1rem !important;
        margin-bottom: 8px !important;
        margin-top: 0 !important;
    }

    /* MICRO-TEXTOS (hints / help text) */
    .card small,
    .card .text-muted,
    .card .hint,
    .card .help-text {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-top: 4px !important;
    }

    /* PAGE HEADER */
    .page-header,
    .page-title {
        padding: 12px 8px !important;
        margin-bottom: 8px !important;
    }

    .page-header h1,
    .page-title h1 {
        font-size: 1.25rem !important;
        margin: 0 !important;
    }

    .page-header .subtitle,
    .page-title p {
        font-size: 0.8125rem !important;
        margin-top: 2px !important;
    }

    /* BADGES E CHIPS */
    .badge,
    .chip,
    .tag {
        padding: 2px 8px !important;
        font-size: 0.6875rem !important;
        border-radius: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   BILLING — Sistema Comercial
   ══════════════════════════════════════════════════════════════ */

/* ── Cabeçalho ─────────────────────────────────────────────── */
.billing-icon-wrap {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(255,107,43,0.15); color: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
}
.billing-section-title {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 2px; color: var(--text-muted);
    margin-bottom: var(--space-4); margin-top: var(--space-6);
}

/* ── Card de Status ─────────────────────────────────────────── */
.billing-status-card {
    background: #111111; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: var(--space-6);
}
.billing-status-top {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
}
.billing-plan-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.billing-org-status {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 16px; border-radius: 20px; border: 1px solid;
    font-size: 0.8rem; font-weight: 700;
}
.billing-status-row {
    display: flex; flex-wrap: wrap; gap: var(--space-6);
}
.billing-status-item {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 0.82rem;
}
.billing-pending-badge {
    margin-top: var(--space-3);
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
    border-radius: 10px; padding: 8px 14px;
    font-size: 0.8rem; font-weight: 600; color: #f59e0b;
    display: inline-block;
}

/* ── Grade de Planos ────────────────────────────────────────── */
.billing-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
@media (max-width: 768px) {
    .billing-plans-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .billing-plans-grid { grid-template-columns: repeat(3, 1fr); }
}

.billing-plan-card {
    background: #111111; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: var(--space-6);
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.billing-plan-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.billing-plan-card-active {
    box-shadow: 0 0 0 2px var(--accent-primary), 0 8px 32px rgba(255,107,43,0.15);
}
.billing-plan-card-recommended {
    background: #141414;
}
.billing-rec-badge {
    position: absolute; top: 0; right: 0;
    background: var(--accent-primary); color: #fff;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 1.5px;
    padding: 4px 12px; border-radius: 0 var(--radius-lg) 0 var(--radius-lg);
}
.billing-price {
    display: flex; align-items: baseline; gap: 2px;
    margin: var(--space-4) 0; font-weight: 800;
}
.billing-price-currency { font-size: 1.1rem; }
.billing-price-value    { font-size: 2.5rem; line-height: 1; }
.billing-price-period   { font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }

.billing-features-list {
    list-style: none; padding: 0; margin: 0 0 var(--space-6);
    flex-grow: 1;
}
.billing-features-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.82rem; padding: 5px 0;
    color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03);
}
.billing-features-list li:last-child { border-bottom: none; }
.billing-feature-off { opacity: 0.45; }

.billing-plan-btn {
    width: 100%; min-height: 44px; border: none; border-radius: var(--radius-md);
    color: #fff; font-weight: 700; font-size: 0.875rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: filter 0.2s, transform 0.15s;
}
.billing-plan-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.billing-plan-btn-current {
    background: #1a1a1a !important; color: var(--text-muted) !important;
    border: 1px solid var(--border-subtle); cursor: default;
}

/* ── Alertas ────────────────────────────────────────────────── */
.billing-alert {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
    border: 1px solid;
}
.billing-alert-danger {
    background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.3);
    color: #f87171;
}
.billing-alert-warning {
    background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3);
    color: #fbbf24;
}

/* ── Modal de Método de Pagamento ───────────────────────────── */
.billing-method-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
.billing-method-btn {
    background: #1a1a1a; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--space-6) var(--space-4);
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-2); cursor: pointer; transition: border-color 0.2s, background 0.2s;
    font-size: 0.875rem;
}
.billing-method-btn:hover { background: #222; border-color: #333; }
.billing-method-btn-selected { border-color: var(--accent-primary); background: rgba(255,107,43,0.08); }
.billing-method-icon {
    width: 56px; height: 56px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-2);
}
.billing-method-tag {
    font-size: 0.65rem; font-weight: 700; padding: 2px 10px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── Modal PIX ──────────────────────────────────────────────── */
.billing-pix-amount {
    display: flex; align-items: center; justify-content: space-between;
    background: #1a1a1a; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.billing-pix-copy-wrap {
    margin-bottom: var(--space-4);
}
.billing-pix-copy-row {
    display: flex; gap: var(--space-2); margin-top: var(--space-2);
}
.billing-pix-input {
    flex: 1; background: #1a1a1a; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); padding: 8px 12px;
    color: var(--text-secondary); font-size: 0.72rem; font-family: monospace;
    outline: none;
}
.billing-pix-copy-btn {
    background: var(--accent-primary); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 8px 16px;
    font-weight: 700; font-size: 0.8rem; cursor: pointer;
    white-space: nowrap; transition: filter 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.billing-pix-copy-btn:hover { filter: brightness(1.1); }
.billing-pix-key-info {
    background: #1a1a1a; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.billing-pix-instruction {
    background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    font-size: 0.82rem; color: var(--text-secondary);
    display: flex; align-items: flex-start; gap: 10px;
}

/* ── Modal Cartão ───────────────────────────────────────────── */
.billing-card-plan-summary {
    text-align: left; margin-bottom: var(--space-2);
}

/* ── Badges de Status ───────────────────────────────────────── */
.billing-badge {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
}
.billing-badge-success  { background: rgba(34,197,94,0.15);  color: #22c55e;  border: 1px solid rgba(34,197,94,0.3);  }
.billing-badge-warning  { background: rgba(245,158,11,0.15); color: #f59e0b;  border: 1px solid rgba(245,158,11,0.3); }
.billing-badge-danger   { background: rgba(239,68,68,0.15);  color: #ef4444;  border: 1px solid rgba(239,68,68,0.3);  }
.billing-badge-secondary{ background: #1a1a1a;               color: var(--text-muted); border: 1px solid var(--border-subtle); }

/* ── Histórico ──────────────────────────────────────────────── */
.billing-history-table {
    background: #111111; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); overflow: hidden;
}
.billing-history-table table { margin: 0; }
.billing-history-table thead th {
    background: #151515; font-size: 0.65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-muted); padding: 12px 16px;
    border-color: var(--border-subtle) !important;
}
.billing-history-table tbody td {
    padding: 12px 16px;
    border-color: var(--border-subtle) !important;
}
.billing-empty-history {
    background: #111111; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg); padding: var(--space-8);
    text-align: center;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .billing-method-grid { grid-template-columns: 1fr; }
    .billing-status-top  { flex-direction: column; align-items: flex-start; }
    .billing-pix-copy-row { flex-direction: column; }
}

/* Para telas MUITO pequenas (≤375px) — iPhone SE etc. */
@media (max-width: 375px) {
    .card,
    .info-card,
    .form-card,
    .config-card {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    .card-body {
        padding: 10px !important;
    }

    #page-content {
        padding: 8px !important;
    }
}