/* sollas-picker.css — Picker modal reutilizável (ClientePicker, ProdutoPicker, ServicoPicker) */

/* ── Backdrop ────────────────────────────────────────────── */
.pk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 24px;
    animation: pk-fade .18s ease;
}
@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal card ──────────────────────────────────────────── */
.pk-modal {
    background: var(--sollas-surface);
    border-radius: 16px;
    width: 100%;
    max-width: 1040px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 4px 16px rgba(0,0,0,.12),
        0 32px 80px rgba(0,0,0,.28);
    border: 1px solid var(--sollas-border);
    animation: pk-slide .22s cubic-bezier(0.34,1.56,0.64,1);
    overflow: hidden;
}
@keyframes pk-slide {
    from { transform: scale(.93) translateY(14px); opacity: 0; }
    to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

/* ── Header ──────────────────────────────────────────────── */
.pk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--sollas-border);
    background: linear-gradient(180deg, rgba(29,158,117,.04) 0%, transparent 100%);
    flex-shrink: 0;
    position: relative;
}
.pk-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sollas-primary), rgba(29,158,117,.4), transparent);
    border-radius: 16px 16px 0 0;
}
.pk-header-left { display: flex; align-items: center; gap: 12px; }
.pk-header-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pk-icon-person  { background: rgba(59,130,246,.12);  color: #3B82F6; }
.pk-icon-produto { background: rgba(59,130,246,.12);  color: #3B82F6; }
.pk-icon-servico { background: rgba(16,185,129,.12);  color: #10B981; }
.pk-icon-usuario { background: rgba(139,92,246,.12);  color: #8B5CF6; }
.pk-title    { font-size: 1rem;  font-weight: 700; color: var(--sollas-text-main); margin: 0; line-height: 1.3; }
.pk-subtitle { font-size: 0.74rem; color: var(--sollas-text-muted); margin: 2px 0 0; }
.pk-close {
    width: 32px; height: 32px;
    border: 1.5px solid var(--sollas-border);
    border-radius: 8px;
    background: transparent;
    color: var(--sollas-text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.pk-close:hover { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #EF4444; }

/* ── Estado vazio / wrapper da tabela ─────────────────────── */
.pk-table-wrap { flex: 1; overflow-y: auto; overflow-x: auto; }
.pk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 3rem 2rem;
    color: var(--sollas-text-muted);
    font-size: 0.875rem;
}
.pk-row-added { background: rgba(16,185,129,.03); }

/* ── Cell helpers ────────────────────────────────────────── */
.pk-nome-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pk-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pk-item-icon {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pk-icon-blue  { background: rgba(59,130,246,.12); color: #3B82F6; }
.pk-icon-green { background: rgba(16,185,129,.12); color: #10B981; }
.pk-nome {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sollas-text-main);
    display: block;
}
.pk-nome-sub {
    font-size: 0.74rem;
    color: var(--sollas-text-muted);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.pk-muted  { font-size: 0.85rem; color: var(--sollas-text-muted); white-space: nowrap; }
.pk-valor  { font-size: 0.9rem; font-weight: 700; color: var(--sollas-primary); white-space: nowrap; }
/* Indicador "já adicionado" — mesmo footprint quadrado do
   .pk-add-sq (nunca estoura a coluna de ações, ao contrário de
   um badge de texto em largura fixa). */
.pk-added-sq {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1.5px solid rgba(16,185,129,.35);
    background: rgba(16,185,129,.14);
    color: #10B981;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    cursor: default;
}

/* ── Trigger field (single-select) ──────────────────────── */
.pk-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    min-height: 42px;
    border: 1.5px solid var(--sollas-border);
    border-radius: 8px;
    cursor: pointer;
    background: var(--sollas-surface);
    transition: border-color .15s, box-shadow .15s;
    gap: 8px;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}
.pk-trigger:hover { border-color: var(--sollas-primary); box-shadow: 0 0 0 3px rgba(29,158,117,.07); }
.pk-trigger-error { border-color: #EF4444 !important; }
.pk-trigger-value { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pk-trigger-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pk-trigger-nome {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sollas-text-main);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pk-trigger-sub {
    font-size: 0.74rem;
    color: var(--sollas-text-muted);
    display: block;
}
.pk-trigger-placeholder {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--sollas-text-muted);
    font-size: 0.875rem;
    flex: 1;
}
.pk-trigger-chevron { color: var(--sollas-text-muted); flex-shrink: 0; }
.pk-trigger-clear {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--sollas-border);
    background: rgba(0,0,0,.04);
    color: var(--sollas-text-muted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.pk-trigger-clear:hover { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); color: #EF4444; }

/* ── Add button (multi-select context) ───────────────────── */
.pk-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1.5px dashed var(--sollas-border);
    border-radius: 8px;
    background: transparent;
    color: var(--sollas-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--sollas-font);
    transition: all .15s;
    width: 100%;
}
.pk-add-btn:hover {
    background: var(--sollas-primary-light);
    border-color: rgba(29,158,117,.4);
    border-style: solid;
}

/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] .pk-modal { background: #0D1B2E; border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .pk-header { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .pk-row-added { background: rgba(16,185,129,.05); }
[data-theme="dark"] .pk-trigger { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .pk-trigger:hover { border-color: var(--sollas-primary); }
[data-theme="dark"] .pk-trigger-clear { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .pk-close { border-color: rgba(255,255,255,.1); }

/* ══ Coluna ID (padrão profissional dos pickers) ═══════════════ */
.pk-id {
    font-size: .76rem;
    font-weight: 700;
    color: var(--sollas-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pk-gear {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-bg);
    color: var(--sollas-text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.pk-gear:hover {
    background: var(--sollas-primary-light);
    border-color: rgba(29,158,117,.4);
    color: var(--sollas-primary);
}

.pk-add-sq {
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1.5px solid rgba(29,158,117,.4);
    background: var(--sollas-primary-light);
    color: var(--sollas-primary);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.pk-add-sq:hover {
    background: var(--sollas-primary);
    border-color: var(--sollas-primary);
    color: #fff;
}
.pk-add-sq:active { transform: scale(.94); }

[data-theme="dark"] .pk-gear   { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .pk-add-sq { background: rgba(29,158,117,.12); }
[data-theme="dark"] .pk-add-sq:hover { background: var(--sollas-primary); color: #fff; }

/* ══ Picker no padrão da listagem principal (sistema --lp-grid) ══
   O corpo do picker usa as mesmas camadas globais das telas:
   .lp-col-header + .lp-filter-bar + .lp-card-row. Basta o template. */
.pk-list-cliente {
    --lp-grid:
        96px                 /* id      */
        minmax(170px, 1.5fr) /* cliente */
        minmax(120px, .9fr)  /* cpf     */
        minmax(140px, 1fr)   /* tel     */
        minmax(160px, 1.2fr) /* e-mail  */
        52px;                /* ação    */
}

/* Linha clicável dentro do picker */
.pk-row-click { cursor: pointer; }

/* ══ Layout referência DataTables no picker ═══════════════════ */

/* Toolbar de busca global (topo, à direita) */
.pk-toolbar {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px 0;
}
.pk-toolbar-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sollas-text-main);
    white-space: nowrap;
}
.pk-toolbar-search ::deep .pk-global-search,
.pk-toolbar-search .pk-global-search { width: 220px; }

/* Camadas compactas com separadores verticais (visual de tabela) */
.pk-list-cliente .lp-col-header,
.pk-list-cliente .lp-filter-bar,
.pk-list-cliente .lp-card-row { column-gap: 0; }

.pk-list-cliente .lp-col-header { padding: 0 16px; align-items: stretch; }
.pk-list-cliente .lp-filter-bar { padding: .5rem 16px; }
.pk-list-cliente .lp-card-row   { padding: .55rem 16px; }
.pk-list-cliente .lp-card-row:hover { padding-left: 16px; }

.pk-grid-lines > *:not(:last-child) { border-right: 1px solid var(--sollas-border); }

.pk-list-cliente .lp-filter-bar .lp-ff { margin: 0 5px; }

/* Cabeçalho ordenável (mantém o estilo padrão dos títulos) */
.pk-sortable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    margin: 0;
    padding: .55rem 13px;
    cursor: pointer;
    font-family: var(--sollas-font);
    text-align: left;
    transition: color .15s;
}
.pk-sortable:hover { color: var(--sollas-primary); }

.pk-sort-ic { display: inline-flex; flex-direction: column; gap: 1px; flex-shrink: 0; margin-left: auto; }
.pk-sort-up, .pk-sort-dn {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: .3;
    transition: opacity .15s;
}
.pk-sort-up { border-bottom: 4px solid currentColor; }
.pk-sort-dn { border-top: 4px solid currentColor; }
.pk-sort-asc  .pk-sort-up { opacity: 1; color: var(--sollas-primary); }
.pk-sort-desc .pk-sort-dn { opacity: 1; color: var(--sollas-primary); }
.pk-sort-asc, .pk-sort-desc { color: var(--sollas-primary); }

/* Lupa decorativa na coluna de ação da barra de filtros */
.pk-lupa {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: var(--sollas-text-muted);
}

/* Info + paginação */
.pk-pagebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--sollas-border);
}

.pk-pageinfo { font-size: .76rem; color: var(--sollas-text-muted); }

.pk-pages { display: flex; align-items: center; gap: 4px; }

.pk-page-nav {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-main);
    font-size: .74rem;
    font-weight: 600;
    font-family: var(--sollas-font);
    cursor: pointer;
    transition: all .15s;
}
.pk-page-nav:hover:not(:disabled) {
    background: var(--sollas-primary-light);
    border-color: var(--sollas-primary);
    color: var(--sollas-primary);
}
.pk-page-nav:disabled { opacity: .4; cursor: not-allowed; }

.pk-page-ellipsis { color: var(--sollas-text-muted); font-size: .78rem; padding: 0 2px; }

/* Rodapé com Cancelar */
.pk-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--sollas-border);
    background: rgba(0,0,0,.02);
}

.pk-cancel-btn {
    height: 36px;
    padding: 0 18px;
    border-radius: 9px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-main);
    font-size: .8rem;
    font-weight: 600;
    font-family: var(--sollas-font);
    cursor: pointer;
    transition: all .15s;
}
.pk-cancel-btn:hover { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); color: #EF4444; }

/* Dark mode */
[data-theme="dark"] .pk-pagebar   { border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .pk-footer    { background: rgba(255,255,255,.015); border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .pk-page-nav,
[data-theme="dark"] .pk-cancel-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .pk-grid-lines > *:not(:last-child) { border-right-color: rgba(255,255,255,.06); }

/* ══════════════════════════════════════════════════════════════
   Pickers premium (Cliente/Produto/Serviço) — aditivo, cada
   classe abaixo só entra em vigor quando explicitamente aplicada,
   sem afetar o `.pk-modal`/`.pk-footer` base usado por qualquer
   picker que ainda não tenha migrado para este formato.
   ══════════════════════════════════════════════════════════════ */

/* Modal mais largo — usado por Cliente, Produto e Serviço */
.pk-modal-wide { max-width: 1180px; }

/* Header: grupo de botões à direita (Colunas + Fechar) */
.pk-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Cards informativos (KPIs compactos) ─────────────────── */
.pk-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 22px 4px;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .pk-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .pk-kpi-row { grid-template-columns: 1fr; }
}

/* Telas muito estreitas: menos respiro em volta do modal para
   sobrar mais largura útil para o conteúdo. */
@media (max-width: 480px) {
    .pk-backdrop { padding: 10px; }
}

.pk-kpi {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--sollas-border);
    background: var(--sollas-bg);
    min-width: 0;
}

.pk-kpi-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pk-kpi-icon.azul  { background: rgba(59,130,246,.12);  color: #3B82F6; }
.pk-kpi-icon.verde { background: rgba(16,185,129,.12);  color: #10B981; }
.pk-kpi-icon.roxo  { background: rgba(139,92,246,.12);  color: #8B5CF6; }
.pk-kpi-icon.ambar { background: rgba(245,158,11,.12);  color: #F59E0B; }

.pk-kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pk-kpi-label {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sollas-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pk-kpi-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--sollas-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Coluna e filtro de Status ───────────────────────────── */
.pk-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
}
.pk-status-badge.ativo     { background: rgba(16,185,129,.12);  color: #10B981; border-color: rgba(16,185,129,.3); }
.pk-status-badge.inativo   { background: rgba(148,163,184,.14); color: #64748B; border-color: rgba(148,163,184,.3); }
.pk-status-badge.bloqueado { background: rgba(239,68,68,.12);   color: #EF4444; border-color: rgba(239,68,68,.3); }

.pk-ff-status { display: flex; align-items: center; }

/* Ícone estático (não-interativo) no header da coluna Ações */
.pk-col-icon-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sollas-text-muted);
    opacity: .7;
}

/* Grid de 7 colunas — específico do Selecionar Cliente */
.pk-list-cliente {
    --lp-grid:
        90px                  /* id      */
        minmax(190px, 1.6fr)  /* nome    */
        minmax(130px, 1fr)    /* cpf     */
        minmax(150px, 1.1fr)  /* tel     */
        minmax(180px, 1.3fr)  /* e-mail  */
        118px                 /* status  */
        56px;                 /* ações   */
}

/* Grid de 5 colunas — Selecionar Produto */
.pk-list-produto {
    --lp-grid:
        90px                  /* id       */
        minmax(240px, 2fr)    /* produto  */
        minmax(110px, .7fr)   /* unidade  */
        minmax(140px, 1fr)    /* valor    */
        56px;                 /* ações    */
}

/* Grid de 4 colunas — Selecionar Serviço */
.pk-list-servico {
    --lp-grid:
        90px                  /* id       */
        minmax(280px, 2.4fr)  /* serviço  */
        minmax(150px, 1fr)    /* valor    */
        56px;                 /* ações    */
}

/* Largura mínima das linhas — em telas estreitas o conteúdo
   nunca é espremido/cortado: o wrapper (.pk-table-wrap, que já
   tem overflow-x:auto) passa a rolar horizontalmente em vez de
   comprimir as colunas abaixo do legível. */
.pk-list-cliente .lp-col-header,
.pk-list-cliente .lp-filter-bar,
.pk-list-cliente .lp-card-row { min-width: 980px; }

.pk-list-produto .lp-col-header,
.pk-list-produto .lp-filter-bar,
.pk-list-produto .lp-card-row { min-width: 680px; }

.pk-list-servico .lp-col-header,
.pk-list-servico .lp-filter-bar,
.pk-list-servico .lp-card-row { min-width: 610px; }

/* ── Tamanho de página ───────────────────────────────────── */
.pk-pagesize-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--sollas-text-muted);
    white-space: nowrap;
}

.pk-pagesize {
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1.5px solid var(--sollas-border);
    background: var(--sollas-surface);
    color: var(--sollas-text-main);
    font-size: .74rem;
    font-weight: 600;
    font-family: var(--sollas-font);
    cursor: pointer;
    transition: border-color .15s;
}
.pk-pagesize:hover { border-color: var(--sollas-primary); }
.pk-pagesize:focus { outline: none; border-color: var(--sollas-primary); box-shadow: 0 0 0 3px rgba(29,158,117,.08); }

/* ── Rodapé: Cancelar à esquerda, Novo Cliente à direita ─── */
.pk-footer.pk-footer-spread { justify-content: space-between; }

/* ── Dark mode (aditivo) ──────────────────────────────────── */
[data-theme="dark"] .pk-kpi { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .pk-pagesize { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }