/*
==============================================
DEKANTO MATRIX - DESIGN SYSTEM v2.2
"Bruto, complexo, estiloso."

Consolidado em: 2023-10-27
==============================================
1.  CORE & SETUP (Variáveis, Body, Fontes)
2.  COMPONENTES GLOBAIS (Cards, Navbar)
3.  MÓDULO: FORMULÁRIOS (Inputs, Selects, Dropdowns)
4.  MÓDULO: TABELAS (Estilo de Tabela de Gestão)
5.  MÓDULO: MODAIS (Padrão, Detalhes, Confirmação)
6.  UTILITÁRIOS (Botões, Badges, Paginação)
7.  COMPONENTE: BUSCA MULTI-SELEÇÃO (Chips + Dropdown)
==============================================
*/

/* 1. CORE & SETUP
---------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Roboto+Mono:wght@500&display=swap');

:root {
    /* Bootstrap palette overrides */
    --bs-primary: #B5A886;
    --bs-secondary: #222222;
    --bs-danger: #931621;

    /* Matrix (design system) – Light theme */
    --matrix-bg: #F7F6F2;
    --matrix-surface: #FFFFFF;
    --matrix-surface-transparent: rgba(255,255,255,0.85);
    --matrix-border: rgba(0,0,0,0.08);
    --matrix-glow: rgba(181,168,134,0.5);
    --matrix-text-primary: #222222;
    --matrix-text-secondary: #5a5a5a;
    --matrix-primary: #B5A886;
    --matrix-primary-light: #C8BEA2;
    --matrix-danger: #931621;
    --matrix-success: #2e7d32;
    /* New tertiary brand color (updated) */
    --matrix-tertiary: #931621;
    --matrix-tertiary-light: #B3535C; /* lighter for hovers */
    /* Optional mapped tokens */
    --bs-info: var(--matrix-tertiary);

    --font-sans: 'Inter', sans-serif;
    --font-mono: 'Roboto Mono', monospace;

    /* Chart + timeline accent variables (updated to tertiary) */
    --chart-accent: var(--matrix-tertiary);
    --chart-accent-weak: rgba(147,22,33,.35);
    --timeline-accent: var(--matrix-tertiary);
}

body {
    background-color: var(--matrix-bg);
    color: var(--matrix-text-primary);
    background-image:
        linear-gradient(rgba(181, 168, 134, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(181, 168, 134, 0.07) 1px, transparent 1px);
}

/* Force light look even if some pages still set data-bs-theme="dark" */
html[data-bs-theme="dark"], html { color-scheme: light; }
[data-bs-theme="dark"] body { background-color: var(--matrix-bg); color: var(--matrix-text-primary); }

/* Soften/neutralize Bootstrap dark utilities used no legado */
.bg-dark { background-color: #ffffff !important; color: var(--matrix-text-primary) !important; }
.text-light { color: var(--matrix-text-primary) !important; }
.table-dark { --bs-table-bg: #ffffff; --bs-table-color: var(--matrix-text-primary); }
.table-dark-subtle { background-color: #f1f1f1 !important; color: var(--matrix-text-secondary) !important; }
.modal-content.bg-dark { background-color: #ffffff !important; color: var(--matrix-text-primary) !important; }
/* Extra subtle overrides to remove remnants of dark/purple */
.text-bg-primary-subtle, .bg-primary-subtle { background-color: rgba(181,168,134,.18) !important; color: var(--matrix-text-primary) !important; }
.text-bg-dark, .bg-black { background-color: #ffffff !important; color: var(--matrix-text-primary) !important; }

/* Navbar in light mode */
.navbar { background: var(--matrix-surface-transparent) !important; border-bottom: 1px solid var(--matrix-border); }
.navbar-dark .navbar-brand, .navbar-dark .navbar-nav .nav-link { color: #222 !important; }
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link:hover { color: #000 !important; }

/* Cards to light surfaces */
.card-matrix {
    background: var(--matrix-surface-transparent);
    border: 1px solid var(--matrix-border);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.card-matrix:before { background: radial-gradient(circle at 50% 50%, rgba(181,168,134,0.12), transparent 70%); }
.card-header-matrix { background: linear-gradient(90deg, rgba(181,168,134,0.12), transparent); color: #3c3c3c; }

/* Forms: light backgrounds */
.input-group-text, .form-control, .form-select { background-color: #ffffff; border: 1px solid var(--matrix-border); color: var(--matrix-text-primary); }
.form-control:focus, .form-select:focus { background-color: #fff; border-color: var(--matrix-primary); box-shadow: 0 0 0 3px rgba(181,168,134,0.25); }
.dropdown-menu { background-color: #ffffff; border: 1px solid var(--matrix-border); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
.dropdown-item { color: var(--matrix-text-secondary); }
.dropdown-item:hover, .dropdown-item:focus { color: var(--matrix-text-primary); background-color: rgba(181,168,134,0.12); }
/* Ajuste: manter inputs/selects desabilitados no mesmo esquema claro */
.form-control:disabled, .form-control[disabled], .form-select:disabled, .form-select[disabled], textarea:disabled {
  background-color: #f5f5f5 !important;
  color: var(--matrix-text-secondary) !important;
  opacity: 1; /* evitar escurecer muito */
  border-color: var(--matrix-border) !important;
}
/* Safari/Firefox remove text contrast quando disabled - reforçar */
.form-select:disabled option { color: var(--matrix-text-secondary); }

/* Tables: light scheme */
.table {
    --bs-table-color: var(--matrix-text-secondary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--matrix-border);
    --bs-table-striped-bg: rgba(181,168,134,0.07);
    --bs-table-hover-bg: rgba(181,168,134,0.12);
}
.table thead { color: #3f3a29; border-bottom: 2px solid var(--matrix-border); }
.table tbody tr:hover { color: #3f3a29; }

/* Buttons */
.btn-matrix-primary { background-color: var(--matrix-primary); border: 1px solid var(--matrix-primary); color: #222; font-weight: 600; }
.btn-matrix-primary:hover, .btn.btn-primary:hover { background: var(--matrix-primary-light); border-color: var(--matrix-primary-light); box-shadow: 0 6px 18px rgba(181,168,134,.25); }
.btn-matrix-primary:focus, .btn.btn-primary:focus { box-shadow: 0 0 0 3px rgba(181,168,134,.35); }

/* Ensure Bootstrap .btn-primary matches matrix primary and readable text */
.btn.btn-primary { background-color: var(--matrix-primary); border-color: var(--matrix-primary); color: #222; font-weight: 600; }

/* Improve focus visibility across buttons */
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(181,168,134,.35); outline: none; }

/* Secondary (filled) for strong contrast */
.btn-matrix-secondary { background-color: var(--bs-secondary); border: 1px solid var(--bs-secondary); color: #fff; font-weight: 600; }
.btn-matrix-secondary:hover, .btn-matrix-secondary:focus { background-color: #333; border-color: #333; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.2); }

/* Secondary outline (used in headers: Importar/Exportar) */
.btn-matrix-secondary-outline { background: #fff; color: var(--matrix-text-primary); border: 1.5px solid var(--matrix-text-primary); font-weight: 600; }
.btn-matrix-secondary-outline:hover, .btn-matrix-secondary-outline:focus { background: rgba(181,168,134,.10); border-color: var(--matrix-primary); color: var(--matrix-text-primary); box-shadow: 0 0 0 3px rgba(181,168,134,.25); }
/* Improve clickability/visibility for Export outline buttons */
.btn-matrix-secondary-outline { border-width: 2px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* Ensure Export/Import outline buttons are reliably clickable */
.btn-matrix-secondary-outline { cursor: pointer; pointer-events: auto; }
/* Icons inside buttons should not intercept clicks */
.btn .bi, .btn [class^="bi-"] { pointer-events: none; }
.btn-matrix-secondary-outline:focus-visible { box-shadow: 0 0 0 4px rgba(181,168,134,.35); outline: none; }
.btn-matrix-secondary-outline:active { background: rgba(181,168,134,.18); border-color: var(--matrix-primary); transform: translateY(0.5px); }
/* In page headers ensure buttons sit above any decorative layers */
.page-header-gestao, .page-header-gestao .header-actions { position: relative; z-index: 3; }
.page-header-gestao .header-actions .btn { position: relative; z-index: 2; }

/* Danger outline (used by Kanban destructive actions) */
.btn-matrix-danger-outline { background: #fff; color: var(--matrix-danger); border: 2px solid var(--matrix-danger); font-weight: 600; }
.btn-matrix-danger-outline:hover, .btn-matrix-danger-outline:focus { background: rgba(147,22,33,.10); border-color: var(--matrix-danger); color: var(--matrix-danger); box-shadow: 0 0 0 3px rgba(147,22,33,.20); }
.btn-matrix-danger-outline:focus-visible { box-shadow: 0 0 0 4px rgba(147,22,33,.25); outline: none; }
.btn-matrix-danger-outline:active { transform: translateY(0.5px); }

/* Compact label style used across dense modals (Kanban, etc.) */
.small-head { font-size: .85rem; color: var(--matrix-text-secondary); font-weight: 600; letter-spacing: .2px; }
/* Improve default outlines for light theme */
.btn.btn-outline-secondary { color: var(--bs-secondary); border-color: var(--bs-secondary); background: #fff; }
.btn.btn-outline-secondary:hover, .btn.btn-outline-secondary:focus { background: rgba(181,168,134,.10); border-color: var(--matrix-primary); color: var(--matrix-text-primary); }

/* Outline primary with proper contrast on light UI */
.btn.btn-outline-primary { color: var(--matrix-text-primary); background: #fff; border-color: var(--matrix-primary); }
.btn.btn-outline-primary:hover, .btn.btn-outline-primary:focus { background: rgba(181,168,134,.10); border-color: var(--matrix-primary); color: var(--matrix-text-primary); box-shadow: 0 0 0 3px rgba(181,168,134,.20); }

/* Override outline-light (used in table action buttons) to be readable on light UI */
.btn.btn-outline-light { color: var(--matrix-text-secondary); border-color: var(--matrix-border); background: #fff; }
.btn.btn-outline-light:hover, .btn.btn-outline-light:focus { color: var(--matrix-text-primary); border-color: var(--matrix-primary); background: rgba(181,168,134,.10); box-shadow: 0 0 0 3px rgba(181,168,134,.20); }
.btn-ghost-link{--ghost-primary:var(--matrix-primary,#b5a886);--ghost-tertiary:var(--matrix-tertiary,#931621);--ghost-border:rgba(147,22,33,.58);--ghost-border-hover:rgba(147,22,33,.82);--ghost-bg:linear-gradient(120deg,rgba(181,168,134,.32),rgba(147,22,33,.24));--ghost-bg-hover:linear-gradient(120deg,rgba(181,168,134,.42),rgba(147,22,33,.32));--ghost-text:#050101;--ghost-chip-bg:rgba(255,255,255,.32);--ghost-icon:var(--matrix-tertiary,#931621);border:1px solid var(--ghost-border);background:var(--ghost-bg);color:var(--ghost-text);display:inline-flex;align-items:center;gap:.45rem;border-radius:40px;padding:.38rem 1rem;font-weight:600;letter-spacing:.15px;transition:background var(--transition,.25s),border-color var(--transition,.25s),box-shadow var(--transition,.25s),color var(--transition,.25s);text-transform:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 1px 1px rgba(255,255,255,.35)}
.btn-ghost-link .btn-icon{width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--ghost-chip-bg);color:var(--ghost-icon);font-size:1rem;transition:transform var(--transition,.25s),background var(--transition,.25s),color var(--transition,.25s)}
.btn-ghost-link .chevron-icon{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ghost-icon);transition:transform var(--transition,.25s),color var(--transition,.25s)}
.btn-ghost-link:hover,.btn-ghost-link:focus{border-color:var(--ghost-border-hover);background:var(--ghost-bg-hover);color:var(--ghost-text);box-shadow:0 10px 26px rgba(0,0,0,.18);text-decoration:none}
.btn-ghost-link:hover .chevron-icon,.btn-ghost-link:focus .chevron-icon{transform:translateX(3px)}
.btn-ghost-link:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(147,22,33,.32);box-shadow:0 0 0 4px color-mix(in srgb,var(--ghost-tertiary,#931621) 45%, transparent)}
@supports (background: color-mix(in srgb, red, blue)) {
    .btn-ghost-link{
        --ghost-border:color-mix(in srgb,var(--ghost-tertiary) 60%, transparent);
        --ghost-bg:linear-gradient(125deg,color-mix(in srgb,var(--ghost-primary) 55%, transparent),color-mix(in srgb,var(--ghost-tertiary) 42%, transparent));
        --ghost-bg-hover:linear-gradient(125deg,color-mix(in srgb,var(--ghost-primary) 70%, transparent),color-mix(in srgb,var(--ghost-tertiary) 58%, transparent));
        --ghost-chip-bg:color-mix(in srgb,var(--ghost-primary) 40%, rgba(255,255,255,.25));
    --ghost-text:color-mix(in srgb,var(--ghost-tertiary) 20%, #030000);
    }
}
html[data-bs-theme='light'] .btn-ghost-link{--ghost-text:#030000;--ghost-chip-bg:rgba(255,255,255,.38)}
html[data-bs-theme='dark'] .btn-ghost-link{--ghost-text:#ecc0c0;--ghost-bg:linear-gradient(140deg,rgba(181,168,134,.18),rgba(147,22,33,.22));--ghost-bg-hover:linear-gradient(140deg,rgba(181,168,134,.28),rgba(147,22,33,.32));--ghost-border:rgba(255,255,255,.35);--ghost-border-hover:rgba(255,255,255,.55);--ghost-chip-bg:rgba(0,0,0,.45);--ghost-icon:#ecc0c0}

/* Client portal CTA pill (solid, high contrast) */
.btn-client-action{--client-bg-start:var(--matrix-primary,#b5a886);--client-bg-end:var(--matrix-tertiary,#931621);--client-bg:linear-gradient(120deg,var(--client-bg-start),var(--client-bg-end));--client-bg-hover:linear-gradient(120deg,var(--client-bg-start),var(--client-bg-end));--client-text:#fffdf7;--client-icon-bg:rgba(255,255,255,.22);--client-icon-color:#fffdf7;display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.5rem 1.2rem;font-weight:600;letter-spacing:.2px;border:none;background:var(--client-bg);color:var(--client-text);box-shadow:none;text-decoration:none;transition:background var(--transition,.25s),transform var(--transition,.25s);text-transform:none;line-height:1.2}
.btn-client-action.btn-sm{padding:.38rem .95rem;font-size:.92rem}
.btn-client-action .btn-icon{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--client-icon-bg);color:var(--client-icon-color);font-size:1rem;transition:background var(--transition,.25s),transform var(--transition,.25s)}
.btn-client-action .chevron-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;color:var(--client-icon-color);transition:transform var(--transition,.25s)}
.btn-client-action:hover,.btn-client-action:focus{background:var(--client-bg-hover);color:var(--client-text);transform:translateY(-1px)}
.btn-client-action:hover .btn-icon,.btn-client-action:focus .btn-icon{background:rgba(255,255,255,.3);transform:scale(1.05)}
.btn-client-action:hover .chevron-icon,.btn-client-action:focus .chevron-icon{transform:translateX(4px)}
.btn-client-action:active{transform:translateY(0)}
.btn-client-action:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.4),0 0 0 5px rgba(147,22,33,.45)}
.btn-client-action:disabled,.btn-client-action.disabled{opacity:.65;box-shadow:none;cursor:not-allowed}
html[data-bs-theme='dark'] .btn-client-action{--client-bg:linear-gradient(120deg,#c3b38f,#c9636c);--client-bg-hover:linear-gradient(120deg,#d3c4a1,#d9777f);--client-text:#fffdf7;--client-icon-bg:rgba(0,0,0,.25)}
@supports (background: color-mix(in srgb, red, blue)){
    .btn-client-action{--client-bg-hover:linear-gradient(120deg,color-mix(in srgb,var(--client-bg-start) 90%, transparent),color-mix(in srgb,var(--client-bg-end) 85%, transparent))}
}
@media (prefers-reduced-motion: reduce){.btn-client-action{transition:none}}

/* Danger keeps strong contrast */
.btn.btn-danger, .btn-matrix-danger { background-color: var(--matrix-danger); border-color: var(--matrix-danger); color: #fff; font-weight: 600; }
.btn.btn-danger:hover, .btn-matrix-danger:hover, .btn.btn-danger:focus, .btn-matrix-danger:focus { filter: brightness(.95); box-shadow: 0 6px 18px rgba(147,22,33,.25); }

/* Link-style buttons adopt brand colors with accessible hover */
.btn.btn-link { color: var(--matrix-tertiary); text-decoration-color: rgba(147,22,33,.40); }
.btn.btn-link:hover, .btn.btn-link:focus { color: var(--matrix-tertiary-light); text-decoration-color: rgba(147,22,33,.65); }

/* Small icon action buttons */
.btn.btn-sm.btn-action-details,
.btn.btn-sm.btn-action-edit,
.btn.btn-sm.btn-action-delete,
.btn.btn-sm.btn-action-link,
.btn.btn-sm.btn-action-convites,
.btn.btn-sm.btn-action-approve,
.btn.btn-sm.btn-action-reject,
.btn.btn-sm.btn-action-access,
.btn.btn-sm.btn-cancelar-convite { background: #fff; color: var(--matrix-text-secondary); border: 1px solid var(--matrix-border); }
.btn.btn-sm.btn-action-details:hover,
.btn.btn-sm.btn-action-edit:hover,
.btn.btn-sm.btn-action-delete:hover,
.btn.btn-sm.btn-action-link:hover,
.btn.btn-sm.btn-action-convites:hover,
.btn.btn-sm.btn-action-approve:hover,
.btn.btn-sm.btn-action-reject:hover,
.btn.btn-sm.btn-action-access:hover,
.btn.btn-sm.btn-cancelar-convite:hover { color: var(--matrix-text-primary); border-color: var(--matrix-primary); background: rgba(181,168,134,.10); }

/* Disabled state */
.btn:disabled, .btn.disabled { opacity: .65; box-shadow: none; }

/* Links now reflect tertiary brand */
a { color: var(--matrix-tertiary); }
a:hover { color: var(--matrix-primary); }

/* Utilities */
.page-title { color: var(--matrix-text-primary); }
.font-monospace { color: var(--matrix-tertiary); }

/* 1.1 Global typography scale (compact) */
html { font-size: 14px; }
body { font-size: 1rem; }

/* Reduce Bootstrap display and font-size utilities (reverted to previous compact values) */
.display-1{font-size:3.5rem !important}
.display-2{font-size:3rem !important}
.display-3{font-size:2.5rem !important}
.display-4{font-size:2.1rem !important}
.display-5{font-size:1.6rem !important}
.display-6{font-size:1.25rem !important}

.fs-1{font-size:2.1rem !important}
.fs-2{font-size:1.7rem !important}
.fs-3{font-size:1.45rem !important}
.fs-4{font-size:1.15rem !important}
.fs-5{font-size:1rem !important}
.fs-6{font-size:.9rem !important}

/* Tables slightly smaller (reverted) */
.table { font-size: .95rem; }

/* Navbar brand text slightly reduced (keep) */
.navbar-brand { font-size: 1rem; }

/* KPI numbers fine-tune (keep) */
.kpi-card .kpi-value { font-weight: 700; }

/* Buttons (Bootstrap overrides) - revert text sizes a bit up */
.btn { font-size: .92rem; }
.btn-sm { font-size: .82rem; }
.btn-lg { font-size: .98rem; }

/* Undo over-compact headings from last pass by restoring neutral sizing */
h1, h2, h3, h4, h5, h6 { font-size: revert; }

/* Status-pill readability restored */
.status-pill small{ font-size: .65rem; }
.status-pill strong{ font-size: 1rem; }
/* Status-pill (light theme) */
.status-pill {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem .7rem;
    border: 1px solid var(--matrix-border);
    border-radius: .6rem;
    background: var(--matrix-surface);
    color: var(--matrix-text-primary);
}
.status-pill .progress { height: 4px; background: rgba(0,0,0,.08); }
.status-pill .progress-bar { background-color: var(--matrix-tertiary) !important; }

/* Variants */
.status-pill--primary { background: rgba(181,168,134,.18); border-color: rgba(181,168,134,.35); color: #3f3a29; }
.status-pill--success { background: rgba(46,125,50,.10); border-color: rgba(46,125,50,.30); color: var(--matrix-success); }
.status-pill--info { background: rgba(147,22,33,.10); border-color: rgba(147,22,33,.30); color: var(--matrix-tertiary); }
.status-pill--warning { background: rgba(245,166,35,.14); border-color: rgba(245,166,35,.30); color: #7a4a00; }
.status-pill--danger { background: rgba(147,22,33,.12); border-color: rgba(147,22,33,.35); color: var(--matrix-danger); }

/* 2. COMPONENTES GLOBAIS
---------------------------------------------- */
.card-matrix {
    background: var(--matrix-surface-transparent);
    border: 1px solid var(--matrix-border);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.card-matrix:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(181, 168, 134, 0.1), transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.card-matrix:hover {
    border-color: var(--matrix-glow);
    box-shadow: 0 5px 30px rgba(181, 168, 134, 0.2);
    transform: translateY(-5px);
}

.card-matrix:hover:before {
    opacity: 1;
}

.card-header-matrix {
    background: linear-gradient(90deg, rgba(181, 168, 134, 0.1), transparent);
    border-bottom: 1px solid var(--matrix-border);
    color: #3c3c3c;
    font-weight: 600;
    padding: 0.85rem 1rem;
    font-size: .95rem;
}

.navbar {
    background: var(--matrix-surface-transparent) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--matrix-border);
}
.navbar-brand span { font-weight: bold; color: var(--matrix-text-primary); }

/* Timeline bullet (uses tertiary brand instead of purple) */
.timeline-bullet {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    background: linear-gradient(145deg, var(--matrix-tertiary) 0%, var(--matrix-tertiary-light) 100%);
    box-shadow: 0 0 0 4px rgba(147,22,33,.15);
    color: #fff;
}


/* 3. MÓDULO: FORMULÁRIOS
---------------------------------------------- */

.form-label {
    font-weight: 600;
    color: var(--matrix-text-secondary);
    margin-bottom: 0.5rem;
}

/* Light inputs aligned to brand */
.input-group-text {
    background-color: #ffffff;
    border: 1px solid var(--matrix-border);
    color: var(--matrix-text-secondary);
    border-right: none;
    border-radius: 8px 0 0 8px;
}

.input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.form-control, .form-select {
    background-color: #ffffff;
    border: 1px solid var(--matrix-border);
    color: var(--matrix-text-primary);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    transition: all 0.2s ease-in-out;
    height: 42px;
}

.form-control:focus, .form-select:focus {
    background-color: #ffffff;
    border-color: var(--matrix-primary);
    box-shadow: 0 0 0 3px rgba(181,168,134,0.25);
    color: var(--matrix-text-primary);
    outline: none;
}

.form-control::placeholder {
    color: var(--matrix-text-secondary);
    opacity: 0.6;
}

.form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0c0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
}

.form-control:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0 30px var(--matrix-surface) inset !important;
    -webkit-text-fill-color: var(--matrix-text-primary) !important;
}

.dropdown-menu {
    background-color: var(--matrix-surface);
    border: 1px solid var(--matrix-border);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    margin-top: 0.5rem !important;
}

.dropdown-item {
    color: var(--matrix-text-secondary);
    padding: 0.6rem 1rem;
    transition: all 0.2s ease-in-out;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: var(--matrix-text-primary);
    background-color: rgba(181,168,134,0.12);
    padding-left: 1.5rem;
}

.dropdown-divider {
    border-top: 1px solid var(--matrix-border);
}

.navbar .dropdown-menu {
    background-color: var(--matrix-surface-transparent);
}

#custom-status-dropdown .form-select {
    text-align: left;
    width: 100%;
}

#custom-status-dropdown .dropdown-menu {
    width: 100%;
}

#custom-status-dropdown .dropdown-item {
    display: flex;
    align-items: center;
}

/* Filtros e busca — largura personalizada (Dekanto) */
#statusFilter.form-select { width: 260px !important; }
@media (max-width: 576px) {
  #statusFilter.form-select { width: 220px !important; }
}

#searchInput.form-control { width: clamp(420px, 38vw, 680px) !important; }
@media (max-width: 576px) {
  #searchInput.form-control { width: 100% !important; }
}

/* 4. MÓDULO: TABELAS
---------------------------------------------- */

.table {
    --bs-table-color: var(--matrix-text-secondary);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--matrix-border);
    --bs-table-striped-bg: rgba(181,168,134,0.07);
    --bs-table-hover-bg: rgba(181,168,134,0.12);
}
.table thead {
    color: #3f3a29;
    border-bottom: 2px solid var(--matrix-border);
}
.table tbody tr td {
    color: var(--matrix-text-primary);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    vertical-align: middle;
}
.table tbody tr:hover {
    color: #3f3a29;
}

/* 5. MÓDULO: MODAIS
---------------------------------------------- */

.modal-content { background: var(--matrix-surface) !important; border: 1px solid var(--matrix-border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.modal-header { background: linear-gradient(90deg, rgba(181,168,134,.10), transparent); border-bottom: 1px solid var(--matrix-border); padding: .9rem 1.1rem; color: var(--matrix-text-primary); }
.modal-title { font-weight: 700; font-size: 1rem; }
.modal-body { padding: 1rem 1.1rem; color: var(--matrix-text-primary); }
.modal-footer { padding: .75rem 1.1rem; border-top: 1px solid var(--matrix-border); background: var(--matrix-surface-transparent); gap: .5rem; }
.modal .btn-close { filter: none; opacity: .6; transition: opacity .2s ease; }
.modal .btn-close:hover { opacity: 1; }
/* Cabeçalhos por variante (usando mesmas regras e degradê sutil) */
.modal-header-primary { 
    background: linear-gradient(90deg, rgba(181,168,134,.16), transparent); 
    color: #3f3a29; 
}

/* Export Options - Botões de formato de exportação para todos os modais */
.export-options .form-check-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    color: #333;
    text-align: center;
    font-size: 0.9rem;
}

.export-options .form-check-label:hover {
    background: #f8f9fa;
    border-color: #B5A886;
    color: #333;
    transform: translateY(-1px);
}

.export-options .form-check-input:checked + .form-check-label {
    background: #B5A886 !important;
    border-color: #B5A886 !important;
    color: #000 !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(181, 168, 134, 0.3) !important;
    transform: translateY(-2px) !important;
}

.export-options .form-check-input:checked + .form-check-label i {
    color: #000 !important;
}

.export-options .form-check {
    margin-bottom: 0;
}

/* === CARDS DE ANEXO === */
.anexo-card {
    background: var(--matrix-surface);
    border: 1px solid var(--matrix-border);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.anexo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    border-color: var(--matrix-primary);
}

.anexo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.anexo-card-type {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--matrix-text-primary);
}

.anexo-card-type i {
    font-size: 1.25rem;
    color: var(--matrix-primary);
}

.anexo-card-actions {
    display: flex;
    gap: 0.5rem;
}

.anexo-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--matrix-border);
    background: var(--matrix-surface);
    color: var(--matrix-text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.anexo-card-btn:hover {
    background: var(--matrix-primary);
    border-color: var(--matrix-primary);
    color: white;
    transform: translateY(-1px);
}

.anexo-card-preview {
    margin-bottom: 0.75rem;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.anexo-card-preview img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}

.anexo-card-icon {
    font-size: 3rem;
    color: var(--matrix-text-secondary);
    opacity: 0.6;
}

.anexo-card-info {
    text-align: center;
}

.anexo-card-filename {
    font-weight: 600;
    color: var(--matrix-text-primary);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
    word-break: break-all;
}

.anexo-card-meta {
    font-size: 0.75rem;
    color: var(--matrix-text-secondary);
    margin: 0;
}

.anexo-card-size {
    background: var(--matrix-primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.25rem;
}

/* Estado quando não há anexo */
.anexo-card.no-attachment {
    background: #f8f9fa;
    border-style: dashed;
    text-align: center;
    padding: 2rem 1rem;
}

.anexo-card.no-attachment .anexo-card-icon {
    font-size: 2.5rem;
    color: #adb5bd;
}

.anexo-card.no-attachment .anexo-card-filename {
    color: #6c757d;
    font-style: italic;
}

/* 7. COMPONENTE: BUSCA MULTI-SELEÇÃO (Chips + Dropdown)
---------------------------------------------------- */
.multi-lookup { position: relative; }
.multi-lookup .chips-container, #chips-fornecedores { 
    display: flex; 
    flex-wrap: wrap; 
    gap: .5rem; 
    margin: 0 0 .35rem; 
    padding: .25rem 0 0; 
}

.chip, .multi-chip { 
    display: inline-flex; 
    align-items: center; 
    gap: .4rem; 
    background: #fff; 
    border: 1px solid var(--matrix-border); 
    border-radius: 999px; 
    padding: .35rem .7rem .35rem .75rem; 
    font-size: .72rem; 
    letter-spacing: .3px; 
    font-weight: 600; 
    color: var(--matrix-text-secondary); 
    line-height: 1; 
    position: relative; 
    transition: all .18s ease; 
}
.chip:hover { border-color: var(--matrix-primary); color: var(--matrix-text-primary); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.chip .remove, .chip button.remove { 
    appearance: none; 
    border: 0; 
    background: rgba(0,0,0,.06); 
    width: 18px; 
    height: 18px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    cursor: pointer; 
    padding: 0; 
    color: #444; 
    transition: all .18s ease; 
}
.chip .remove:hover { background: var(--matrix-danger); color: #fff; }

/* Input principal da busca */
#busca-fornecedor, .multi-lookup input[type="text"].lookup-input { 
    font-size: .85rem; 
    padding-left: .9rem; 
    background: #fff; 
}
#busca-fornecedor:focus, .multi-lookup input[type="text"].lookup-input:focus { 
    border-color: var(--matrix-primary); 
    box-shadow: 0 0 0 3px rgba(181,168,134,.25); 
}

/* Dropdown de sugestões */
#dropdown-fornecedores, .lookup-dropdown { 
    position: absolute; 
    left: 0; 
    top: calc(100% + 4px); 
    width: 100%; 
    background: var(--matrix-surface); 
    border: 1px solid var(--matrix-border); 
    border-radius: 10px; 
    z-index: 1056; 
    box-shadow: 0 10px 28px rgba(0,0,0,.12); 
    max-height: 260px; 
    overflow: auto; 
    display: none; 
    animation: fadeInLookup .18s ease; 
}

#dropdown-fornecedores.show, .lookup-dropdown.show { display: block; }

#dropdown-fornecedores .list-group-item, .lookup-dropdown .list-group-item { 
    border: 0; 
    border-bottom: 1px solid var(--matrix-border); 
    padding: .55rem .85rem; 
    font-size: .78rem; 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    cursor: pointer; 
    background: transparent; 
    transition: all .18s ease; 
}
#dropdown-fornecedores .list-group-item:last-child, .lookup-dropdown .list-group-item:last-child { border-bottom: 0; }
#dropdown-fornecedores .list-group-item:hover, .lookup-dropdown .list-group-item:hover { 
    background: rgba(181,168,134,.12); 
    color: var(--matrix-text-primary); 
    padding-left: 1.1rem; 
}
#dropdown-fornecedores .list-group-item small, .lookup-dropdown .list-group-item small { 
    font-size: .63rem; 
    letter-spacing: .5px; 
    text-transform: uppercase; 
    opacity: .65; 
    font-weight: 600; 
}

/* Ajuste: tornar texto dos itens dos dropdowns mais escuro para melhor leitura */
#dropdown-requisicoes .list-group-item, 
#dropdown-fornecedores .list-group-item, 
.lookup-dropdown .list-group-item { 
    color: var(--matrix-text-primary); 
}
#dropdown-requisicoes .list-group-item small, 
#dropdown-fornecedores .list-group-item small, 
.lookup-dropdown .list-group-item small { 
    color: var(--matrix-text-secondary); 
    opacity: .75; 
}

/* Estado vazio / nenhum resultado */
.lookup-empty { 
    padding: .85rem .9rem; 
    font-size: .7rem; 
    color: var(--matrix-text-secondary); 
    text-align: center; 
}

/* Spinner inline dentro do dropdown */
.lookup-loading { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: .5rem; 
    font-size: .7rem; 
    padding: .85rem; 
    color: var(--matrix-text-secondary); 
}
.lookup-loading .spinner-border { width: 16px; height: 16px; border-width: 2px; }

/* Acessibilidade: foco navegando via teclado */
.lookup-active, #dropdown-fornecedores .list-group-item:focus { 
    outline: none; 
    background: rgba(181,168,134,.18) !important; 
    color: var(--matrix-text-primary); 
}

/* Chips compactos para mobile */
@media (max-width: 576px) {
  .chip { font-size: .62rem; padding: .30rem .55rem .30rem .6rem; }
  #busca-fornecedor { height: 40px; }
}

@keyframes fadeInLookup { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Autocomplete (Produtos) - align with Matrix UI */
.autocomplete-wrapper { position: relative; }
.autocomplete-menu { background: var(--matrix-surface); border:1px solid var(--matrix-border); border-radius:10px; margin-top:.4rem; box-shadow:0 8px 30px rgba(0,0,0,.35); padding:.35rem 0; max-height:300px; overflow-y:auto; scrollbar-width:thin; }
.autocomplete-menu::-webkit-scrollbar{width:8px}
.autocomplete-menu::-webkit-scrollbar-track{background:transparent}
.autocomplete-menu::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:10px}
.autocomplete-item { padding:.55rem .85rem; font-size:.85rem; display:flex; justify-content:space-between; align-items:center; gap:.8rem; color:var(--matrix-text-secondary); transition:background .15s,color .15s; border-radius:6px; margin:0 .35rem; }
.autocomplete-item:hover, .autocomplete-item.active { background:rgba(181,168,134,.15); color:var(--matrix-text-primary); }
.autocomplete-item small { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; font-weight:600; color:var(--matrix-text-secondary); }
.autocomplete-empty, .autocomplete-loading { padding:.55rem .85rem; font-size:.7rem; color:var(--matrix-text-secondary); }
.autocomplete-loading .spinner { width:14px; height:14px; border:2px solid rgba(0,0,0,.25); border-top-color:transparent; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Dark (forced light palette still) */
[data-bs-theme=dark] .autocomplete-menu { background: var(--matrix-surface); border-color: var(--matrix-border); }
[data-bs-theme=dark] .autocomplete-item:hover, [data-bs-theme=dark] .autocomplete-item.active { background: rgba(181,168,134,.18); }

/* Tighten input spacing with autocomplete */
.autocomplete-wrapper > input.form-control { padding-right:2.2rem; }