/* =============================================================================
   PontoÁgil — Camada de polimento visual (UI)
   -----------------------------------------------------------------------------
   Objetivo: deixar o sistema mais profissional e CONSISTENTE (botões, modais,
   cards, tabelas, formulários) MANTENDO a identidade azul/navy atual.

   Regras de segurança:
   - Este arquivo é carregado POR ÚLTIMO, então refina o que já existe.
   - Só estilo. Não altera HTML, JS nem comportamento.
   - NÃO mexe na sidebar (.sidebar*) nem em posicionamento/larguras de layout.
   - Usa variáveis com prefixo --pa-* para não colidir com as existentes.
   ============================================================================= */

:root {
    --pa-primary:        #0052cc;
    --pa-primary-hover:  #0040a3;
    --pa-primary-soft:   #eaf1ff;
    --pa-primary-ring:   rgba(0, 82, 204, .22);

    --pa-text:           #1f2933;
    --pa-muted:          #667085;
    --pa-border:         #e4e7ec;
    --pa-border-strong:  #d0d5dd;
    --pa-surface:        #ffffff;
    --pa-surface-soft:   #f8fafc;

    --pa-radius:         12px;
    --pa-radius-sm:      8px;
    --pa-radius-pill:    999px;

    --pa-shadow-sm:      0 1px 2px rgba(16, 24, 40, .05);
    --pa-shadow-md:      0 4px 14px rgba(16, 24, 40, .08);
    --pa-shadow-lg:      0 24px 60px rgba(2, 8, 23, .22);

    --pa-transition:     all .15s ease;
}

/* -----------------------------------------------------------------------------
   Tipografia / base
   -------------------------------------------------------------------------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--pa-text);
}

/* =============================================================================
   BOTÕES — padroniza tamanho, alinhamento, cantos e foco
   (resolve "botões com tamanhos diferentes em telas")
   ============================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--pa-radius-sm);
    transition: var(--pa-transition);
}

/* Altura consistente para botões "normais" e pequenos */
.btn:not(.btn-sm):not(.btn-icon-sm):not(.btn-link):not(.btn-close) {
    min-height: 40px;
    padding-inline: 1rem;
}
.btn-sm:not(.btn-icon-sm) {
    min-height: 32px;
    padding-inline: .7rem;
    border-radius: var(--pa-radius-sm);
    font-size: .82rem;
}

/* Botões só de ícone: quadrados e UNIFORMES (a grade de apuração usa muito isso) */
.btn-icon-sm {
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pa-radius-sm);
    line-height: 1;
}
.btn-icon-sm > i {
    font-size: .9rem;
    line-height: 1;
}

/* Botões em linha (barras de ação) com espaçamento e alinhamento iguais */
.d-flex.gap-1 > .btn,
.d-flex.gap-2 > .btn,
.btn-group .btn {
    flex: 0 0 auto;
}

/* Cor primária alinhada à identidade */
.btn-primary {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--pa-primary-hover);
    border-color: var(--pa-primary-hover);
}
.btn-outline-primary {
    color: var(--pa-primary);
    border-color: var(--pa-primary);
}
.btn-outline-primary:hover {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
}

/* Foco acessível e discreto (sem o halo grosso padrão) */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .2rem var(--pa-primary-ring);
}

/* =============================================================================
   FORMULÁRIOS — inputs, selects, labels e foco consistentes
   ============================================================================= */
.form-control,
.form-select {
    border-radius: var(--pa-radius-sm);
    border-color: var(--pa-border-strong);
    transition: var(--pa-transition);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 .2rem var(--pa-primary-ring);
}
.form-control::placeholder {
    color: #98a2b3;
}
.form-label {
    font-weight: 500;
    font-size: .85rem;
    color: #344054;
    margin-bottom: .35rem;
}
.input-group-text {
    background-color: var(--pa-surface-soft);
    border-color: var(--pa-border-strong);
    color: var(--pa-muted);
}
.form-check-input:checked {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
}
.form-check-input:focus {
    border-color: var(--pa-primary);
    box-shadow: 0 0 0 .2rem var(--pa-primary-ring);
}

/* =============================================================================
   CARDS — cantos, borda e sombra suaves e iguais em todo o sistema
   ============================================================================= */
.card {
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius);
    box-shadow: var(--pa-shadow-sm);
}
.card-header {
    background-color: var(--pa-surface);
    border-bottom: 1px solid var(--pa-border);
    font-weight: 600;
    color: var(--pa-text);
    padding: .9rem 1.1rem;
}
.card-body {
    padding: 1.1rem;
}

/* =============================================================================
   TABELAS — cabeçalho limpo, espaçamento e hover consistentes
   ============================================================================= */
.table {
    --bs-table-border-color: #eef0f3;
    color: var(--pa-text);
}
.table > thead th {
    background-color: var(--pa-surface-soft);
    color: #475467;
    font-weight: 600;
    font-size: .8rem;
    border-bottom: 1px solid var(--pa-border);
    white-space: nowrap;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
    background-color: #f6f9ff;
}

/* =============================================================================
   MODAIS — visual mais limpo e profissional (resolve "modais ruins")
   ============================================================================= */
.modal-content {
    border: none;
    border-radius: 14px;
    box-shadow: var(--pa-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background-color: var(--pa-surface-soft);
    border-bottom: 1px solid var(--pa-border);
    padding: 1rem 1.25rem;
}
.modal-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--pa-text);
}
.modal-body {
    padding: 1.25rem;
}
.modal-footer {
    border-top: 1px solid var(--pa-border);
    padding: .85rem 1.25rem;
    gap: .5rem;
}
.modal-footer > .btn {
    margin: 0;
}
.modal-backdrop.show {
    opacity: .5;
}
.btn-close:focus {
    box-shadow: none;
}

/* =============================================================================
   BADGES, ALERTAS, DROPDOWNS, PAGINAÇÃO — acabamento consistente
   ============================================================================= */
.badge {
    font-weight: 600;
    padding: .38em .62em;
    border-radius: 6px;
    letter-spacing: .01em;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--pa-radius-sm);
}

.dropdown-menu {
    border: 1px solid var(--pa-border);
    border-radius: var(--pa-radius-sm);
    box-shadow: var(--pa-shadow-md);
    padding: .35rem;
}
.dropdown-item {
    border-radius: 6px;
    padding: .45rem .65rem;
    font-size: .9rem;
}
.dropdown-item:active {
    background-color: var(--pa-primary);
}

.page-link {
    color: var(--pa-primary);
    border-radius: 6px;
    margin: 0 2px;
    border-color: var(--pa-border);
}
.page-item.active .page-link {
    background-color: var(--pa-primary);
    border-color: var(--pa-primary);
}

/* Scrollbar discreta para áreas roláveis (modais/tabelas) */
.modal-body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.modal-body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd2dc;
    border-radius: 8px;
}

/* =============================================================================
   PADRÃO ÚNICO DE CONTROLES  (carregado por último, com prioridade)
   -----------------------------------------------------------------------------
   Objetivo: TODOS os botões, inputs e selects com a MESMA altura e o MESMO
   tamanho de texto, vencendo as regras antigas espalhadas. As exceções
   legítimas (textarea, botões de ícone, sidebar e tela de login) estão tratadas
   logo abaixo.
   ============================================================================= */
:root {
    --pa-h-control:     36px;   /* altura padrão de botão/input/select        */
    --pa-h-control-sm:  30px;   /* variação pequena (.btn-sm / .form-*-sm)    */
    --pa-h-control-lg:  44px;   /* variação grande                            */
    --pa-fs-control:    0.875rem;/* texto padrão dos controles (~14px)        */
    --pa-fs-sm:         0.8rem; /* texto pequeno padrão                       */
}

/* Altura/medidas padrão — botões, inputs e selects iguais */
.btn,
.form-control,
.form-select {
    height: var(--pa-h-control) !important;
    min-height: var(--pa-h-control) !important;
    font-size: var(--pa-fs-control) !important;
    line-height: 1.2 !important;
    border-radius: var(--pa-radius-sm) !important;
}

/* Variação pequena padronizada */
.btn-sm,
.btn-group-sm > .btn,
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .btn,
.input-group-sm > .input-group-text {
    height: var(--pa-h-control-sm) !important;
    min-height: var(--pa-h-control-sm) !important;
    font-size: var(--pa-fs-sm) !important;
}

/* Variação grande padronizada */
.btn-lg,
.form-control-lg,
.form-select-lg {
    height: var(--pa-h-control-lg) !important;
    min-height: var(--pa-h-control-lg) !important;
    font-size: 1rem !important;
}

/* input-group alinhado na mesma altura */
.input-group:not(.input-group-sm):not(.input-group-lg) > .form-control,
.input-group:not(.input-group-sm):not(.input-group-lg) > .form-select,
.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-text,
.input-group:not(.input-group-sm):not(.input-group-lg) > .btn {
    height: var(--pa-h-control) !important;
    min-height: var(--pa-h-control) !important;
}

/* ---- EXCEÇÕES LEGÍTIMAS ---- */

/* Textarea: altura livre (nunca uma linha fixa) */
textarea.form-control {
    height: auto !important;
    min-height: 80px !important;
}

/* Botões só de ícone: QUADRADOS, alinhados à altura dos controles ao redor */
.btn-icon-sm,
.btn-nav-icon,
.btn-table-icon,
.btn-action-icon {
    width: var(--pa-h-control-sm) !important;
    height: var(--pa-h-control-sm) !important;
    min-height: var(--pa-h-control-sm) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-icon {
    width: var(--pa-h-control) !important;
    height: var(--pa-h-control) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Links em formato de botão não recebem altura fixa */
.btn-link {
    height: auto !important;
    min-height: 0 !important;
}

/* A sidebar tem design próprio — não é tocada pelo padrão de controles */
.sidebar .btn,
.sidebar-flyout .btn,
.sidebar-item {
    height: auto !important;
    min-height: 0 !important;
}

/* Tela de login mantém seu visual próprio (inputs altos por design) */
.lp-input { height: 50px !important; }
.empresa-search-group .form-control { height: 48px !important; }

/* =============================================================================
   TEXTO — escala tipográfica padrão (acaba com font-size solto/10px)
   ============================================================================= */
.small,
small,
.text-sm {
    font-size: var(--pa-fs-sm) !important;
}
.pa-text-xs { font-size: 0.72rem !important; }
.pa-text-10 { font-size: 0.72rem !important; word-break: break-all; }

/* =============================================================================
   UTILITÁRIOS  (substituem os style="width:..." inline das telas)
   ============================================================================= */
.pa-w-30   { width: 30px  !important; }
.pa-w-32   { width: 32px  !important; }
.pa-w-40   { width: 40px  !important; }
.pa-w-48   { width: 48px  !important; }
.pa-w-60   { width: 60px  !important; }
.pa-w-80   { width: 80px  !important; }
.pa-w-90   { width: 90px  !important; }
.pa-w-100  { width: 100px !important; }
.pa-w-110  { width: 110px !important; }
.pa-w-120  { width: 120px !important; }
.pa-w-130  { width: 130px !important; }
.pa-w-140  { width: 140px !important; }
.pa-w-150  { width: 150px !important; }
.pa-w-220  { width: 220px !important; }
.pa-w-auto { width: auto  !important; }

.pa-minw-150 { min-width: 150px !important; }
.pa-minw-260 { min-width: 260px !important; }
.pa-minw-320 { min-width: 320px !important; }

/* Avatar/imagem quadrada (foto de funcionário em listas) */
.pa-avatar-48 {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
}

/* Menu/dropdown flutuante de busca (resultados sob o campo) */
.pa-floating-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1056;
    max-height: 260px;
    overflow-y: auto;
}

/* Lista rolável (resultados sob o campo, sem posicionamento absoluto) */
.pa-scroll-260 {
    max-height: 260px;
    overflow-y: auto;
}

/* iframe de visualização (NFSe, etc.) */
.pa-iframe-view {
    width: 100%;
    height: 75vh;
    border: 0;
}

/* Larguras/medidas adicionais usadas em telas específicas */
.pa-w-70    { width: 70px  !important; }
.pa-w-170   { width: 170px !important; }
.pa-minh-120 { min-height: 120px !important; }
.pa-mw-420  { max-width: 420px !important; }

/* Caixa de gráfico (dashboards) */
.pa-chart-box {
    position: relative;
    height: 240px;
}

/* Containers de mapa (localização / cerca) */
.pa-map-420 { width: 100%; height: 420px; }
.pa-map-520 { width: 100%; height: 520px; }

/* Imagem dentro de modal (foto da batida) */
.pa-img-modal {
    max-height: 70vh;
    object-fit: contain;
}

/* Vídeo da câmera (captura de foto) */
.pa-camera-video {
    width: 100%;
    max-height: 360px;
    background: #000;
    border-radius: 8px;
}

/* Pré-visualização da foto do funcionário (preenche o placeholder) */
.pa-foto-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rótulo destacado (laranja) usado no modal de jornada */
.pa-badge-laranja {
    background: #f08a00;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}

.pa-mw-520 { max-width: 520px !important; }

/* =============================================================================
   PÁGINA AFD  (estilo movido de dentro do blade afd/index)
   ============================================================================= */
.afd-page,
.afd-page * { color: #212529; }
.afd-page .text-muted { color: #6c757d !important; }
.afd-page .text-primary { color: #0d6efd !important; }
.afd-page .btn-primary,
.afd-page .btn-primary * { color: #fff !important; }
.afd-page .btn-outline-primary { color: #0d6efd !important; }
.afd-page .btn-outline-secondary { color: #6c757d !important; }

.afd-title    { font-size: 1.4rem; font-weight: 600; color: #212529; margin: 0; }
.afd-subtitle { color: #6c757d; font-size: .875rem; margin: 4px 0 0 0; }
.afd-strong   { font-weight: 600; color: #212529; }
.afd-field-label {
    display: block;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    color: #6c757d;
    margin-bottom: .5rem;
}
.afd-section-label {
    font-size: .8rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}
.afd-info-card { background: #f8f9fb; }
.afd-info-body { font-size: .875rem; color: #6c757d; }

/* =============================================================================
   MULTI-SELECT COM BUSCA E CHECKBOXES  (.pa-multi)
   Usado na seleção de colaboradores do dispositivo.
   ============================================================================= */
.pa-multi {
    position: relative;
}
.pa-multi-toggle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.pa-multi-menu {
    width: 100%;
    min-width: 100%;
    max-height: 340px;
    overflow: hidden;
}
.pa-multi-list {
    max-height: 240px;
    overflow-y: auto;
}
.pa-multi-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    margin: 0;
    padding: .4rem .5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: .875rem;
}
.pa-multi-item:hover {
    background: #eef4ff;
}
.pa-multi-item input {
    flex: 0 0 auto;
}