@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --neon: #4D4DFF;
  --neon-hover: #3a3aff;
  --bg-primary: #0A0118;
  --bg-card: #171023;
  --bg-sidebar: #0D0120;
  --border-card: #2D1F4E;
  --border-sidebar: #1E1035;
}

* { font-family: 'Outfit', sans-serif; }
html, body, input, select, textarea, button {
  font-family: 'Outfit', sans-serif !important;
}

/* Scrollbar minimalista */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2D1F4E; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #4D4DFF40; }

/* =====================================================================
   Componentes de listagem responsivos (tabelas, filtros, menu de ações)
   Usados em clients, contacts, contracts, templates, provider
   ===================================================================== */

/* ---- Barra de filtros: empilha no mobile, inline (var --cols) no >=640px ---- */
.filter-bar { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }
@media (min-width: 640px) {
    .filter-bar { grid-template-columns: var(--cols, 1fr auto); }
}

/* ---- Container de tabela (vira "sem moldura" no mobile, pois cada linha é card) ---- */
.table-card { background: #171023; border: 1px solid #2D1F4E; border-radius: 14px; overflow: visible; }
body.theme-light .table-card { background: #ffffff; border-color: #e2e8f0; }
@media (max-width: 767px) {
    .table-card { background: transparent; border: none; border-radius: 0; }
}

/* ---- Tabela responsiva: cada <tr> vira um cartão no mobile ---- */
@media (max-width: 767px) {
    table.rtable { display: block; width: 100%; min-width: 0 !important; }
    table.rtable thead { display: none; }
    table.rtable tbody { display: block; width: 100%; }
    table.rtable tr {
        display: block;
        background: #171023 !important;
        border: 1px solid #2D1F4E !important;
        border-radius: 12px;
        padding: 4px 14px;
        margin-bottom: 12px;
    }
    table.rtable td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding: 10px 0 !important;
        border: none !important;
        text-align: right;
    }
    table.rtable td + td { border-top: 1px solid #241a3d !important; }
    table.rtable td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #7a7aa8;
        text-align: left;
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* célula-título (nome): linha inteira, em destaque, sem rótulo */
    table.rtable td.rcell-title {
        justify-content: flex-start;
        font-size: 15px;
        font-weight: 600;
        color: #fff !important;
    }
    table.rtable td.rcell-title::before { display: none; }
    /* célula de ações: gatilho alinhado à direita, sem rótulo */
    table.rtable td.rcell-actions { justify-content: flex-end; padding-top: 12px !important; }
    table.rtable td.rcell-actions::before { display: none; }
    /* valor que pode ser longo (badges, listas) não fica espremido */
    table.rtable td > .rcell-value { text-align: right; min-width: 0; }

    body.theme-light table.rtable tr { background: #ffffff !important; border-color: #e2e8f0 !important; }
    body.theme-light table.rtable td + td { border-top-color: #eef0f4 !important; }
    body.theme-light table.rtable td.rcell-title { color: #0f172a !important; }
    body.theme-light table.rtable td::before { color: #64748b; }
}

/* ---- Menu de ações ••• (gatilho + dropdown com ícones) ---- */
.act-wrap { position: relative; display: inline-block; text-align: left; }
.act-trigger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: transparent; border: 1px solid #2D1F4E; border-radius: 9px;
    color: #a0a0c0; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.act-trigger:hover { background: #1E1035; color: #fff; border-color: #4D4DFF; }
.act-menu {
    position: absolute; right: 0; top: 42px; z-index: 60;
    min-width: 188px; padding: 6px;
    background: #171023; border: 1px solid #2D1F4E; border-radius: 12px;
    box-shadow: 0 18px 38px -12px rgba(0,0,0,.65);
}
.act-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 9px 11px; border-radius: 8px;
    font-size: 13px; color: #d8d8ec; text-decoration: none;
    background: transparent; border: none; cursor: pointer;
    transition: background .15s, color .15s;
}
.act-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.act-item:hover { background: #1E1035; color: #fff; }
.act-item.is-danger { color: #f87171; }
.act-item.is-danger:hover { background: rgba(239,68,68,.14); color: #fca5a5; }
.act-divider { height: 1px; background: #2D1F4E; margin: 5px 4px; }

body.theme-light .act-trigger { border-color: #e2e8f0; color: #475569; }
body.theme-light .act-trigger:hover { background: #eef2ff; color: #1e293b; border-color: #a5b4fc; }
body.theme-light .act-menu { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 18px 38px -14px rgba(15,23,42,.2); }
body.theme-light .act-item { color: #334155; }
body.theme-light .act-item:hover { background: #eef2ff; color: #0f172a; }
body.theme-light .act-item.is-danger { color: #dc2626; }
body.theme-light .act-item.is-danger:hover { background: #fee2e2; color: #b91c1c; }
body.theme-light .act-divider { background: #e5e7eb; }

/* ---- Grids de formulário que empilham no mobile (mantém colunas inline no desktop) ---- */
@media (max-width: 639px) {
    .fgrid-stack { grid-template-columns: 1fr !important; }
}

/* ===== Kanban: abas de status no mobile (uma coluna por vez) ===== */
.kanban-mobile-tabs { display: none; }
.kanban-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    font-size: 12px; font-weight: 600;
    background: #171023; border: 1px solid #2D1F4E; color: #a0a0c0;
    transition: background .15s, color .15s, border-color .15s;
}
.kanban-tab .kanban-tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #2D1F4E; color: #c4b5fd; font-size: 10px; font-weight: 700;
}
.kanban-tab.is-active { background: #4D4DFF; border-color: #4D4DFF; color: #fff; }
.kanban-tab.is-active .kanban-tab-count { background: rgba(255,255,255,.25); color: #fff; }
body.theme-light .kanban-tab { background: #fff; border-color: #e2e8f0; color: #475569; }
body.theme-light .kanban-tab .kanban-tab-count { background: #eef2ff; color: #4f46e5; }
body.theme-light .kanban-tab.is-active { background: #4D4DFF; border-color: #4D4DFF; color: #fff; }
body.theme-light .kanban-tab.is-active .kanban-tab-count { background: rgba(255,255,255,.25); color: #fff; }

@media (max-width: 767px) {
    .kanban-mobile-tabs {
        display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .kanban-mobile-tabs::-webkit-scrollbar { display: none; }
    .kanban-board-scroll { overflow-x: visible !important; padding-bottom: 0 !important; }
    .kanban-wide-board { display: block !important; min-width: 0 !important; }
    .kanban-wide-col { display: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; }
    .kanban-wide-col.kcol-active { display: flex !important; }
    .kanban-archive-col { width: 100% !important; min-width: 0 !important; }
    .kanban-col-body { max-height: none !important; }
}

/* ---- Card de conteúdo reutilizável (lista de cards: projetos, prestadores, etc.) ---- */
.metric-card {
    position: relative; display: block; text-decoration: none;
    background: linear-gradient(158deg, #1a1230 0%, #130d20 100%);
    border: 1px solid #2A1F45; border-radius: 16px; padding: 18px 20px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    overflow: visible;
}
/* Card com menu de ações aberto fica acima dos cards vizinhos (evita o dropdown "por trás"). */
.metric-card.card-menu-open { z-index: 40; }
.metric-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}
.metric-card:hover {
    transform: translateY(-3px); border-color: rgba(77,77,255,.5);
    box-shadow: 0 16px 34px -16px rgba(77,77,255,.55);
}
body.theme-light .metric-card { background: #ffffff; border-color: #e2e8f0; }
body.theme-light .metric-card::before { background: linear-gradient(90deg, transparent, rgba(15,23,42,.06), transparent); }
body.theme-light .metric-card:hover { border-color: #a5b4fc; box-shadow: 0 14px 30px -16px rgba(79,70,229,.4); }

/* ---- Chip/badge de vínculo (ex.: clientes por contato) ---- */
.chip {
    display: inline-block;
    background: #0e0820; border: 1px solid #2D1F4E; border-radius: 6px;
    padding: 2px 8px; font-size: 11px; color: #a0a0c0;
}
body.theme-light .chip { background: #eef2ff; border-color: #dbe2f0; color: #475569; }

/* ---- Botões reutilizáveis (corretos em tema claro e escuro) ---- */
.btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #2D1F4E; color: #a0a0c0; background: transparent;
    border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.btn-ghost:hover { background: #1E1035; color: #fff; border-color: #4D4DFF; }
body.theme-light .btn-ghost { border-color: #e2e8f0; color: #475569; }
body.theme-light .btn-ghost:hover { background: #eef2ff; color: #1e293b; border-color: #a5b4fc; }

.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: #4D4DFF; color: #fff; border: none;
    border-radius: 8px; padding: 9px 18px; font-size: 14px; font-weight: 500;
    text-decoration: none; cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: #3a3aff; }

/* ---- Avatar/inicial (gradiente neon — bom nos dois temas) ---- */
.client-avatar {
    width: 80px; height: 80px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #4D4DFF, #7c3aed);
    color: #fff; font-size: 30px; font-weight: 700;
    box-shadow: 0 8px 22px -10px rgba(77,77,255,.7);
}

/* ---- Rede de segurança: botões Tailwind com hover escuro ficam claros no tema claro ---- */
body.theme-light a.hover\:bg-zinc-800:hover,
body.theme-light button.hover\:bg-zinc-800:hover {
    background: #eef2ff !important;
    color: #0f172a !important;
}

/* ---- Inputs de data/mês: ícone de calendário visível nos dois temas ---- */
input[type="date"],
input[type="month"],
input[type="time"] {
    color-scheme: dark;
}
body.theme-light input[type="date"],
body.theme-light input[type="month"],
body.theme-light input[type="time"] {
    color-scheme: light;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.4);
    opacity: .85;
    cursor: pointer;
}
body.theme-light input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-light input[type="month"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: .65;
}