/* --- Paginação de tabelas ---
Mostrando 1–25 de 320
…
*/ .table-pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-color); } .pagination-info { font-size: var(--fs-sm); color: var(--text-secondary); } .pagination-buttons { display: flex; align-items: center; gap: var(--sp-1); } .pagination-btn { min-width: 2.25rem; height: 2.25rem; padding: 0 0.75rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition); } .pagination-btn:hover:not(:disabled) { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; } .pagination-btn.active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · AUTOCOMPLETE — busca com dropdown (materiais, endereços) ╚══════════════════════════════════════════════════════════════ */ /* Markup:
MAT-0001
Descrição do material
12 un
Nada encontrado
Estados: input.has-value mostra o clear; dropdown.show abre. Variação (materiais): .item-title / .item-subtitle no lugar de code/description. */ .autocomplete-wrapper { position: relative; width: 100%; } .autocomplete-input { width: 100%; padding-right: 2.5rem; } .autocomplete-input.has-value { background-color: var(--primary-light); border-color: var(--primary); } .autocomplete-clear { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 0.25rem; display: none; transition: color var(--transition); z-index: 2; } .autocomplete-input.has-value ~ .autocomplete-clear, .has-value ~ .autocomplete-clear { display: block; } .autocomplete-clear:hover { color: var(--danger); } .autocomplete-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); max-height: 300px; overflow-y: auto; z-index: var(--z-dropdown); display: none; box-shadow: var(--shadow-md); } .autocomplete-dropdown.show { display: block; } .autocomplete-dropdown .loading { display: flex; align-items: center; justify-content: center; padding: var(--sp-5); color: var(--text-secondary); gap: var(--sp-2); } .autocomplete-dropdown .loading i { animation: spin 1s linear infinite; } .autocomplete-item { padding: 0.75rem 1rem; cursor: pointer; transition: background var(--transition); border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.25rem; } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover, .autocomplete-item.active { background: var(--surface-hover); } .autocomplete-item .item-code { font-weight: 600; color: var(--primary); font-size: var(--fs-sm); } .autocomplete-item .item-description, .autocomplete-item .item-desc { font-size: 0.8125rem; color: var(--text-secondary); } .autocomplete-item .item-title { font-weight: 600; font-size: var(--fs-sm); color: var(--text-primary); } .autocomplete-item .item-subtitle { font-size: var(--fs-xs); color: var(--text-secondary); } .autocomplete-item .item-info { font-size: var(--fs-xs); color: var(--text-secondary); display: flex; gap: var(--sp-3); margin-top: 0.25rem; } .autocomplete-item .item-info span { display: flex; align-items: center; gap: 0.25rem; } .autocomplete-item .item-info i { color: var(--text-muted); } .autocomplete-loading, .autocomplete-empty, .autocomplete-no-results { padding: var(--sp-4); text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · ARMAZENAGEM — telas de entrada (unidades, seriais, lote) ╚══════════════════════════════════════════════════════════════ */ /* Layout: .entry-container = área principal + sidebar de recentes. Área de leitura: .reading-section > .section-label + .reading-inputs-modern Células semânticas de tabela: .material-cell/.description-cell/.centro-cell/ .address-cell/.quantity-cell (vazias mostram "--"). Ações de linha: .row-actions > .btn-row-action [.danger]. */ .entry-container { display: grid; grid-template-columns: 1fr 400px; gap: 2rem; align-items: start; } .entry-main { display: grid; gap: 2rem; align-items: start; } .header-hint { font-size: var(--fs-sm); color: var(--text-secondary); } /* --- Área de leitura --- */ .reading-section { margin-top: var(--sp-3); } .section-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); } .reading-inputs-modern { display: grid; grid-template-columns: 2.5fr 1.5fr 1.5fr; gap: var(--sp-3); align-items: end; padding: var(--sp-4); background: var(--background); border-radius: var(--radius-lg); border: 2px dashed var(--border-color); } .reading-input-group { display: flex; flex-direction: column; gap: var(--sp-2); } .reading-input-group label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: 0.25rem; } .reading-input { padding: 0.75rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: var(--fs-md); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); } .reading-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .reading-scan-btn { padding: 0.75rem 2rem; background: var(--primary); color: var(--primary-contrast); border: none; border-radius: var(--radius); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.75rem; cursor: pointer; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .reading-scan-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .process-section { margin: var(--sp-5) 0; } /* --- Células semânticas --- */ .th-checkbox, .th-check, .th-actions { width: 50px; text-align: center; } .quantity-cell { font-weight: 700; color: var(--primary-active); font-size: 1.125rem; } .material-cell { font-weight: 600; color: var(--primary); font-size: var(--fs-sm); } .description-cell { color: var(--text-secondary); font-size: var(--fs-sm); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .centro-cell { font-weight: 500; font-size: var(--fs-sm); color: #8b5cf6; } .address-cell { color: var(--success); font-weight: 500; font-size: var(--fs-sm); } .material-cell:empty::after, .description-cell:empty::after, .centro-cell:empty::after, .address-cell:empty::after { content: "--"; opacity: 0.5; color: var(--text-muted); font-style: italic; } .material-cell:not(:empty) { background-color: var(--primary-light); } .centro-cell:not(:empty) { background-color: #f3e8ff; } .address-cell:not(:empty) { background-color: var(--success-light); } [data-theme="dark"] .centro-cell:not(:empty) { background-color: rgba(139, 92, 246, 0.1); } .missing-data { color: var(--danger) !important; position: relative; animation: pulse 2s infinite; } .missing-data::after { content: '!'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--danger); font-weight: bold; font-size: 1.2rem; } /* --- Ações de linha --- */ .row-actions { display: flex; gap: 0.25rem; justify-content: center; } .btn-row-action { width: 28px; height: 28px; border: 1px solid var(--border-color); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition), border-color var(--transition), color var(--transition); font-size: var(--fs-sm); } .btn-row-action:hover { background: var(--background); border-color: var(--primary); color: var(--primary); } .btn-row-action.danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); } /* --- Sidebar de entradas recentes --- */ .recent-entries-modern { display: flex; flex-direction: column; gap: var(--sp-3); } .recent-entry-modern { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface-alt); border-radius: var(--radius-lg); transition: background var(--transition); } .recent-entry-modern:hover { background: var(--surface-hover); } .entry-icon { width: 40px; height: 40px; background: var(--primary-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--primary); } .entry-details { flex: 1; } .entry-title { font-weight: 600; color: var(--text-primary); font-size: var(--fs-sm); } .entry-subtitle { font-size: var(--fs-xs); color: var(--text-secondary); } .entry-meta { display: flex; gap: var(--sp-3); margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--text-muted); } .entry-meta span { display: flex; align-items: center; gap: 0.25rem; } .entry-count { text-align: center; } .count-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--primary); } .count-label { font-size: var(--fs-xs); color: var(--text-secondary); } /* --- Estados vazios compactos --- */ .empty-table-state { text-align: center; padding: var(--sp-6); color: var(--text-muted); } .empty-table-state i { font-size: 3rem; margin-bottom: var(--sp-3); opacity: 0.5; } .empty-state-small { text-align: center; padding: var(--sp-5); color: var(--text-muted); } .empty-state-small i { font-size: 2rem; margin-bottom: var(--sp-2); } /* --- Progress mini (inline em tabelas/cards: acurácia, progresso, % genérico) ---
72%
Cor dinâmica: style="background:..." no fill e style="color:..." no value. */ .progress-mini { display: flex; align-items: center; gap: var(--sp-2); } .progress-mini-track { flex: 1; height: 6px; background: var(--surface-hover); border-radius: var(--radius-full); overflow: hidden; } .progress-mini-fill { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-full); transition: width 0.3s ease; } .progress-mini-value { font-size: var(--fs-xs); font-weight: 700; min-width: 2.5rem; text-align: right; color: var(--text-secondary); } /* ╔══════════════════════════════════════════════════════════════╗ ║ TRACKSTOCK WMS — trackstock.css v1.0.0 ║ ║ Arquivo único, organizado em seções modulares. ║ ║ Gerado em 2026-07-05 — NÃO editar seções fora de ordem. ║ ╚══════════════════════════════════════════════════════════════╝ ÍNDICE 1. CORE · 01 TOKENS — reset, :root, dark theme, base 2. CORE · 02 GRID — container, row, col-1..12 3. CORE · 03 UTILITÁRIOS — spacing, flex, texto, bordas, sizing 4. CORE · 04 BOTÕES 5. CORE · 05 BADGES & STATUS 6. CORE · 06 CARDS & STATS 7. CORE · 07 TABELAS 8. CORE · 08 FORMULÁRIOS 9. CORE · 09 MODAIS 10. CORE · 10 FEEDBACK — alertas, spinner, animações 11. MODULE · LAYOUT — sidebar, header, main-wrapper 12. MODULE · NOTIFICAÇÕES + INPUT HISTORY 13. MODULE · SEARCHABLE SELECT 14. MODULE · FORMS EXTENSIONS — upload, avatar, drag&drop 15. MODULE · MODAL EXTENSIONS — wizard, timeline, galeria, scanner 16. MODULE · UI KIT — page header, KPIs, panels, rail 17. MODULE · AUTOCOMPLETE — busca com dropdown 18. MODULE · ARMAZENAGEM — telas de entrada (unidades/seriais/lote) 19. MODULE · UTILITIES TW — vocabulário Tailwind (telas novas) 20. MODULE · AURORA — overrides de tema (por último dos modules) 21. LEGACY · THEME — remover conforme telas migram para o core REGRAS - Código novo usa SOMENTE classes das seções CORE (1–10). - Variáveis: use --primary, --sp-*, --fs-*, --z-* (aliases legados existem só para compatibilidade — não usar em código novo). - A seção LEGACY encolhe a cada migração de tela; ao zerar, apague-a. ============================================================ */ /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 01 TOKENS — reset, :root, dark theme, base ╚══════════════════════════════════════════════════════════════ */ /* ========== 1. TOKENS ========== */ :root { /* --- Cor primária (ÚNICA fonte de verdade) --- */ --primary: #2563eb; --primary-hover: #1d4ed8; --primary-active: #1e40af; --primary-light: #eff6ff; --primary-contrast: #ffffff; --primary-glow: rgba(37, 99, 235, 0.45); /* --- Semânticas --- */ --success: #10b981; --success-hover: #059669; --success-light: #ecfdf5; --warning: #f59e0b; --warning-hover: #d97706; --warning-light: #fffbeb; --danger: #ef4444; --danger-hover: #dc2626; --danger-light: #fef2f2; --info: #0ea5e9; --info-hover: #0284c7; --info-light: #f0f9ff; --secondary: #64748b; --secondary-hover: #475569; --secondary-light: #f1f5f9; /* --- Superfícies e texto --- */ --background: #f1f5f9; --surface: #ffffff; --surface-hover: #f9fafb; --surface-alt: #f3f4f6; --border-color: #e5e7eb; --border-hover: #d1d5db; --text-primary: #111827; --text-secondary: #6b7280; --text-muted: #9ca3af; --text-inverse: #ffffff; /* --- Tipografia --- */ --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.875rem; /* 14px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ --fs-3xl: 2rem; /* 32px */ /* --- Espaçamento (escala única: 0-5) --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 3rem; /* --- Raio --- */ --radius-sm: 0.375rem; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* --- Sombras --- */ --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05); --shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); /* --- z-index (escala fixa — NUNCA usar número solto) --- */ --z-below: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-sidebar: 400; --z-header: 500; --z-modal-backdrop: 900; --z-modal: 1000; --z-modal-stacked: 1100; --z-notification: 1200; --z-tooltip: 1300; /* --- Transições --- */ --transition-fast: 0.15s ease; --transition: 0.2s ease; --transition-slow: 0.3s ease; /* --- Layout --- */ --sidebar-width: 250px; --sidebar-collapsed-width: 100px; --header-height: 64px; --gutter-x: 1.5rem; --gutter-y: 0; --modal-overlay: rgba(15, 18, 24, 0.6); /* --- Aliases legados (NÃO usar em código novo) --- */ --primary-color: var(--primary); --primary-dark: var(--primary-active); --secondary-color: var(--secondary); --success-color: var(--success); --warning-color: var(--warning); --danger-color: var(--danger); --info-color: var(--info); --hover-bg: var(--surface-hover); --dropdown-bg: var(--surface); --bg-primary: var(--surface); --bg-secondary: var(--surface-hover); --bg-tertiary: var(--surface-alt); --bg-hover: var(--surface-hover); --radius-md: var(--radius); --text-tertiary: var(--text-muted); --bg-overlay: var(--modal-overlay); --icon-color: #ffffff; --main-before: var(--text-muted); --main-before-line: var(--primary); --background-gradiente1: #1e2b41; --background-gradiente2: #1e293b; --z-modal-base: var(--z-modal); --au-hover: var(--surface-hover); } /* ========== 1.1 DARK THEME ========== */ [data-theme="dark"] { --primary: #3b82f6; --primary-hover: #60a5fa; --primary-active: #2563eb; --primary-light: rgba(59, 130, 246, 0.12); --primary-glow: rgba(59, 130, 246, 0.5); --success-light: rgba(16, 185, 129, 0.12); --warning-light: rgba(245, 158, 11, 0.12); --danger-light: rgba(239, 68, 68, 0.12); --info-light: rgba(14, 165, 233, 0.12); --secondary-light: rgba(100, 116, 139, 0.15); --background: #1b1f27; --surface: #242833; --surface-hover: #2a2f3a; --surface-alt: #20242e; --border-color: rgba(51, 65, 85, 0.6); --border-hover: #475569; --text-primary: #e7eaf0; --text-secondary: #94a3b8; --text-muted: #7c8696; --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.3); --shadow: 0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px 0 rgba(0,0,0,.3); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -1px rgba(0,0,0,.3); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -2px rgba(0,0,0,.3); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.4), 0 10px 10px -5px rgba(0,0,0,.3); --modal-overlay: rgba(0, 0, 0, 0.7); } /* ========== 2. RESET & BASE ========== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; color: var(--text-primary); background-color: var(--background); -webkit-font-smoothing: antialiased; } img, svg { vertical-align: middle; max-width: 100%; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.25; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-md); } h6 { font-size: var(--fs-base); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Para resoluções baixas, reduz o zoom geral */ @media screen and (min-width: 1520px) { html { zoom: 0.90; } } @media screen and (max-width: 1520px) { html { zoom: 0.90; /* 90% do tamanho original */ } .app-main { zoom: 0.95; } } @media screen and (max-width: 1024px) { html { zoom: 0.80; /* 80% do tamanho original */ } } @media screen and (max-width: 768px) { html { zoom: normal; } } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 02 GRID — container, row, col-1..12 ╚══════════════════════════════════════════════════════════════ */ /* ========== 3. GRID (12 colunas, flex — estilo Bootstrap 5) ========== */ .container, .container-fluid { width: 100%; padding-right: calc(var(--gutter-x) * .5); padding-left: calc(var(--gutter-x) * .5); margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } .row { display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--gutter-y)); margin-right: calc(-.5 * var(--gutter-x)); margin-left: calc(-.5 * var(--gutter-x)); } .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--gutter-x) * .5); padding-left: calc(var(--gutter-x) * .5); margin-top: var(--gutter-y); } /* Gutters ajustáveis: .g-0 a .g-5 (eixos: .gx-*, .gy-*) */ .g-0, .gx-0 { --gutter-x: 0; } .g-0, .gy-0 { --gutter-y: 0; } .g-1, .gx-1 { --gutter-x: 0.25rem; } .g-1, .gy-1 { --gutter-y: 0.25rem; } .g-2, .gx-2 { --gutter-x: 0.5rem; } .g-2, .gy-2 { --gutter-y: 0.5rem; } .g-3, .gx-3 { --gutter-x: 1rem; } .g-3, .gy-3 { --gutter-y: 1rem; } .g-4, .gx-4 { --gutter-x: 1.5rem; } .g-4, .gy-4 { --gutter-y: 1.5rem; } .g-5, .gx-5 { --gutter-x: 3rem; } .g-5, .gy-5 { --gutter-y: 3rem; } /* Colunas base (mobile-first) */ .col { flex: 1 0 0%; } .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.333333%; } .col-2 { flex: 0 0 auto; width: 16.666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.333333%; } .col-5 { flex: 0 0 auto; width: 41.666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.333333%; } .col-8 { flex: 0 0 auto; width: 66.666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.333333%; } .col-11 { flex: 0 0 auto; width: 91.666667%; } .col-12 { flex: 0 0 auto; width: 100%; } @media (min-width: 576px) { .col-sm { flex: 1 0 0%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 768px) { .col-md { flex: 1 0 0%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.333333%; } .col-md-2 { flex: 0 0 auto; width: 16.666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.333333%; } .col-md-5 { flex: 0 0 auto; width: 41.666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.333333%; } .col-md-8 { flex: 0 0 auto; width: 66.666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.333333%; } .col-md-11 { flex: 0 0 auto; width: 91.666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1200px) { .col-xl { flex: 1 0 0%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 03 UTILITÁRIOS — spacing, flex, texto, bordas, sizing ╚══════════════════════════════════════════════════════════════ */ /* ========== 4. UTILITÁRIOS DE ESPAÇAMENTO (escala 0-5) ========== */ .m-0 { margin: 0; } .m-1 { margin: var(--sp-1); } .m-2 { margin: var(--sp-2); } .m-3 { margin: var(--sp-3); } .m-4 { margin: var(--sp-4); } .m-5 { margin: var(--sp-5); } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .ms-0 { margin-left: 0; } .ms-1 { margin-left: var(--sp-1); } .ms-2 { margin-left: var(--sp-2); } .ms-3 { margin-left: var(--sp-3); } .ms-4 { margin-left: var(--sp-4); } .ms-5 { margin-left: var(--sp-5); } .me-0 { margin-right: 0; } .me-1 { margin-right: var(--sp-1); } .me-2 { margin-right: var(--sp-2); } .me-3 { margin-right: var(--sp-3); } .me-4 { margin-right: var(--sp-4); } .me-5 { margin-right: var(--sp-5); } .mx-0 { margin-left: 0; margin-right: 0; } .mx-1 { margin-left: var(--sp-1); margin-right: var(--sp-1); } .mx-2 { margin-left: var(--sp-2); margin-right: var(--sp-2); } .mx-3 { margin-left: var(--sp-3); margin-right: var(--sp-3); } .mx-4 { margin-left: var(--sp-4); margin-right: var(--sp-4); } .mx-5 { margin-left: var(--sp-5); margin-right: var(--sp-5); } .my-0 { margin-top: 0; margin-bottom: 0; } .my-1 { margin-top: var(--sp-1); margin-bottom: var(--sp-1); } .my-2 { margin-top: var(--sp-2); margin-bottom: var(--sp-2); } .my-3 { margin-top: var(--sp-3); margin-bottom: var(--sp-3); } .my-4 { margin-top: var(--sp-4); margin-bottom: var(--sp-4); } .my-5 { margin-top: var(--sp-5); margin-bottom: var(--sp-5); } .p-0 { padding: 0; } .p-1 { padding: var(--sp-1); } .p-2 { padding: var(--sp-2); } .p-3 { padding: var(--sp-3); } .p-4 { padding: var(--sp-4); } .p-5 { padding: var(--sp-5); } .pt-0 { padding-top: 0; } .pt-1 { padding-top: var(--sp-1); } .pt-2 { padding-top: var(--sp-2); } .pt-3 { padding-top: var(--sp-3); } .pt-4 { padding-top: var(--sp-4); } .pt-5 { padding-top: var(--sp-5); } .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: var(--sp-1); } .pb-2 { padding-bottom: var(--sp-2); } .pb-3 { padding-bottom: var(--sp-3); } .pb-4 { padding-bottom: var(--sp-4); } .pb-5 { padding-bottom: var(--sp-5); } .ps-0 { padding-left: 0; } .ps-1 { padding-left: var(--sp-1); } .ps-2 { padding-left: var(--sp-2); } .ps-3 { padding-left: var(--sp-3); } .ps-4 { padding-left: var(--sp-4); } .ps-5 { padding-left: var(--sp-5); } .pe-0 { padding-right: 0; } .pe-1 { padding-right: var(--sp-1); } .pe-2 { padding-right: var(--sp-2); } .pe-3 { padding-right: var(--sp-3); } .pe-4 { padding-right: var(--sp-4); } .pe-5 { padding-right: var(--sp-5); } .px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: var(--sp-1); padding-right: var(--sp-1); } .px-2 { padding-left: var(--sp-2); padding-right: var(--sp-2); } .px-3 { padding-left: var(--sp-3); padding-right: var(--sp-3); } .px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); } .px-5 { padding-left: var(--sp-5); padding-right: var(--sp-5); } .py-0 { padding-top: 0; padding-bottom: 0; } .py-1 { padding-top: var(--sp-1); padding-bottom: var(--sp-1); } .py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); } .py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); } .py-4 { padding-top: var(--sp-4); padding-bottom: var(--sp-4); } .py-5 { padding-top: var(--sp-5); padding-bottom: var(--sp-5); } .m-auto { margin: auto; } .mt-auto { margin-top: auto; } .mb-auto { margin-bottom: auto; } .ms-auto { margin-left: auto; } .me-auto { margin-right: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; } /* Gap (flex/grid) */ .gap-0 { gap: 0; } .gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); } .row-gap-0 { row-gap: 0; } .column-gap-0 { column-gap: 0; } .row-gap-1 { row-gap: var(--sp-1); } .column-gap-1 { column-gap: var(--sp-1); } .row-gap-2 { row-gap: var(--sp-2); } .column-gap-2 { column-gap: var(--sp-2); } .row-gap-3 { row-gap: var(--sp-3); } .column-gap-3 { column-gap: var(--sp-3); } .row-gap-4 { row-gap: var(--sp-4); } .column-gap-4 { column-gap: var(--sp-4); } .row-gap-5 { row-gap: var(--sp-5); } .column-gap-5 { column-gap: var(--sp-5); } /* ========== 5. DISPLAY & FLEX ========== */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-grid { display: grid; } .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-fill { flex: 1 1 auto; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } .justify-content-start { justify-content: flex-start; } .justify-content-end { justify-content: flex-end; } .justify-content-center { justify-content: center; } .justify-content-between { justify-content: space-between; } .justify-content-around { justify-content: space-around; } .justify-content-evenly { justify-content: space-evenly; } .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; } .align-items-center { align-items: center; } .align-items-baseline { align-items: baseline; } .align-items-stretch { align-items: stretch; } .align-self-start { align-self: flex-start; } .align-self-center { align-self: center; } .align-self-end { align-self: flex-end; } /* Grid simples por colunas fixas */ .grid-cols-1 { display: grid; grid-template-columns: 1fr; } .grid-cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-cols-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* Display responsivo */ @media (min-width: 576px) { .d-sm-none { display: none; } .d-sm-block { display: block; } .d-sm-inline { display: inline; } .d-sm-inline-block { display: inline-block; } .d-sm-flex { display: flex; } .d-sm-inline-flex { display: inline-flex; } .d-sm-grid { display: grid; } } @media (min-width: 768px) { .d-md-none { display: none; } .d-md-block { display: block; } .d-md-inline { display: inline; } .d-md-inline-block { display: inline-block; } .d-md-flex { display: flex; } .d-md-inline-flex { display: inline-flex; } .d-md-grid { display: grid; } } @media (min-width: 992px) { .d-lg-none { display: none; } .d-lg-block { display: block; } .d-lg-inline { display: inline; } .d-lg-inline-block { display: inline-block; } .d-lg-flex { display: flex; } .d-lg-inline-flex { display: inline-flex; } .d-lg-grid { display: grid; } } @media (min-width: 1200px) { .d-xl-none { display: none; } .d-xl-block { display: block; } .d-xl-inline { display: inline; } .d-xl-inline-block { display: inline-block; } .d-xl-flex { display: flex; } .d-xl-inline-flex { display: inline-flex; } .d-xl-grid { display: grid; } } /* ========== 6. TEXTO ========== */ .text-start { text-align: left; } .text-center { text-align: center; } .text-end { text-align: right; } .fw-normal { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } .fs-xs { font-size: var(--fs-xs); } .fs-sm { font-size: var(--fs-sm); } .fs-base { font-size: var(--fs-base); } .fs-md { font-size: var(--fs-md); } .fs-lg { font-size: var(--fs-lg); } .fs-xl { font-size: var(--fs-xl); } .fs-2xl { font-size: var(--fs-2xl); } .fs-3xl { font-size: var(--fs-3xl); } .text-primary { color: var(--primary); } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-info { color: var(--info); } .text-white { color: #ffffff; } .text-body { color: var(--text-primary); } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-capitalize { text-transform: capitalize; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-break { word-wrap: break-word; word-break: break-word; } .text-nowrap { white-space: nowrap; } .font-mono { font-family: var(--font-mono); } /* ========== 7. BACKGROUNDS, BORDERS, SOMBRAS ========== */ .bg-primary { background-color: var(--primary); } .bg-primary-light { background-color: var(--primary-light); } .bg-success { background-color: var(--success); } .bg-success-light { background-color: var(--success-light); } .bg-warning { background-color: var(--warning); } .bg-warning-light { background-color: var(--warning-light); } .bg-danger { background-color: var(--danger); } .bg-danger-light { background-color: var(--danger-light); } .bg-surface { background-color: var(--surface); } .bg-body { background-color: var(--background); } .bg-transparent { background-color: transparent; } .border { border: 1px solid var(--border-color); } .border-0 { border: 0; } .border-top { border-top: 1px solid var(--border-color); } .border-bottom { border-bottom: 1px solid var(--border-color); } .border-start { border-left: 1px solid var(--border-color); } .border-end { border-right: 1px solid var(--border-color); } .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } .rounded-0 { border-radius: 0; } .shadow-none { box-shadow: none; } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } /* ========== 8. SIZING, POSITION, OVERFLOW ========== */ .w-25 { width: 25%; } .w-50 { width: 50%; } .w-75 { width: 75%; } .w-100 { width: 100%; } .w-auto { width: auto; } .h-100 { height: 100%; } .h-auto { height: auto; } .mw-100 { max-width: 100%; } .mh-100 { max-height: 100%; } .min-w-0 { min-width: 0; } .position-relative { position: relative; } .position-absolute { position: absolute; } .position-fixed { position: fixed; } .position-sticky { position: sticky; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .cursor-pointer { cursor: pointer; } .user-select-none { user-select: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 04 BOTÕES ╚══════════════════════════════════════════════════════════════ */ /* ========== 9. BOTÕES (família única .btn) ========== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-base); font-weight: 500; line-height: 1.5; padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius); white-space: nowrap; user-select: none; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } .btn:disabled, .btn.disabled { opacity: 0.6; pointer-events: none; } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Variantes sólidas */ .btn-primary { background: var(--primary); color: var(--primary-contrast); } .btn-primary:hover { background: var(--primary-hover); color: var(--primary-contrast); } .btn-secondary { background: var(--secondary); color: #ffffff; } .btn-secondary:hover { background: var(--secondary-hover); color: #ffffff; } .btn-success { background: var(--success); color: #ffffff; } .btn-success:hover { background: var(--success-hover); color: #ffffff; } .btn-warning { background: var(--warning); color: #ffffff; } .btn-warning:hover { background: var(--warning-hover); color: #ffffff; } .btn-danger { background: var(--danger); color: #ffffff; } .btn-danger:hover { background: var(--danger-hover); color: #ffffff; } .btn-info { background: var(--info); color: #ffffff; } .btn-info:hover { background: var(--info-hover); color: #ffffff; } /* Variantes outline */ .btn-outline-primary { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); color: var(--primary-contrast); } .btn-outline-secondary { background: transparent; color: var(--text-secondary); border-color: var(--border-hover); } .btn-outline-secondary:hover { background: var(--surface-hover); color: var(--text-primary); } .btn-outline-danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn-outline-danger:hover { background: var(--danger); color: #ffffff; } /* Variantes suaves (light) */ .btn-light-primary { background: var(--primary-light); color: var(--primary); } .btn-light-primary:hover { background: var(--primary); color: var(--primary-contrast); } .btn-light-danger { background: var(--danger-light); color: var(--danger); } .btn-light-danger:hover { background: var(--danger); color: #ffffff; } /* Ghost / link */ .btn-ghost { background: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--surface-hover); color: var(--text-primary); } /* Tamanhos */ .btn-sm { padding: 0.375rem 0.75rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); } .btn-lg { padding: 0.75rem 1.5rem; font-size: var(--fs-md); border-radius: var(--radius-lg); } .btn-block { display: flex; width: 100%; } /* Botão só-ícone (quadrado) */ .btn-icon { padding: 0; width: 2.5rem; height: 2.5rem; flex-shrink: 0; } .btn-icon.btn-sm { width: 2rem; height: 2rem; } .btn-icon.btn-lg { width: 3rem; height: 3rem; } /* Botão escuro (ações de destaque neutro, ex.: Exportar) */ .btn-dark { background: var(--text-primary); color: var(--surface); } .btn-dark:hover { background: var(--secondary-hover); color: #ffffff; } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 05 BADGES & STATUS ╚══════════════════════════════════════════════════════════════ */ /* ========== 10. BADGES (família ÚNICA — substitui .status, .tag, .status-badge) ========== */ .badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .badge-primary { background: var(--primary-light); color: var(--primary); } .badge-secondary { background: var(--secondary-light); color: var(--secondary); } .badge-success { background: var(--success-light); color: var(--success-hover); } .badge-warning { background: var(--warning-light); color: var(--warning-hover); } .badge-danger { background: var(--danger-light); color: var(--danger-hover); } .badge-info { background: var(--info-light); color: var(--info-hover); } /* Badge sólido (contadores, notificações) */ .badge-solid-primary { background: var(--primary); color: var(--primary-contrast); } .badge-solid-danger { background: var(--danger); color: #ffffff; } /* Ponto de status */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--text-muted); flex-shrink: 0; } .status-dot.success { background: var(--success); } .status-dot.warning { background: var(--warning); } .status-dot.danger { background: var(--danger); } .status-dot.info { background: var(--info); } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 06 CARDS & STATS ╚══════════════════════════════════════════════════════════════ */ /* ========== 11. CARDS ========== */ .card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-color); } .card-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); } .card-body { padding: var(--sp-4); flex: 1 1 auto; } .card-footer { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-color); } /* Card de estatística (KPI) */ .stat-card:not(.stat-card-chart):not(.stat-card-tinted) { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .stat-card:not(.stat-card-chart):not(.stat-card-tinted) .stat-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: var(--primary-light); color: var(--primary); font-size: var(--fs-xl); flex-shrink: 0; } .stat-card:not(.stat-card-chart):not(.stat-card-tinted) .stat-value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; color: var(--text-primary); } .stat-card:not(.stat-card-chart):not(.stat-card-tinted) .stat-label { font-size: var(--fs-sm); color: var(--text-secondary); } /* Grid de stats padrão */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); } /* --- Stat card MODELO 2: fundo pastel + ícone redondo (KPI simples) --- */ .stat-card-tinted { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--tint-bg, var(--surface)); border: 1px solid var(--tint-border, var(--border-color)); border-radius: var(--radius-xl); overflow: hidden; } .stat-icon-round { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--tint-solid, var(--primary)); color: #ffffff; font-size: var(--fs-base); flex-shrink: 0; } .stat-card-tinted .stat-value, .stat-card-chart .stat-value { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .stat-card-tinted .stat-label, .stat-card-chart .stat-label { font-size: var(--fs-sm); color: var(--text-secondary); } /* --- Stat card MODELO 3: pastel + badge de tendência + sparkline --- */ .stat-card-chart { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4) 0; background: var(--tint-bg, var(--surface)); border: 1px solid var(--tint-border, var(--border-color)); border-radius: var(--radius-xl); overflow: hidden; } .stat-card-chart .stat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); } .stat-icon-sq { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--surface); color: var(--tint-solid, var(--primary)); font-size: var(--fs-md); box-shadow: var(--shadow-sm); flex-shrink: 0; } /* Sparkline: SVG inline com stroke="currentColor" herda a cor do tint */ .stat-spark { display: block; width: calc(100% + 2 * var(--sp-4)); margin: var(--sp-2) calc(-1 * var(--sp-4)) 0; height: 40px; color: var(--tint-solid, var(--primary)); } /* --- Tints: aplicar junto de .stat-card-tinted ou .stat-card-chart --- */ .tint-primary { --tint-bg: #e8edfd; --tint-border: #d8e0fb; --tint-solid: #4f6ef7; } .tint-success { --tint-bg: #e2f5ec; --tint-border: #cfeee0; --tint-solid: #12a06b; } .tint-warning { --tint-bg: #fdf3dd; --tint-border: #f8ead0; --tint-solid: #d98c0f; } .tint-danger { --tint-bg: #fdeaea; --tint-border: #f9dcdc; --tint-solid: #e04444; } .tint-violet { --tint-bg: #ecebfb; --tint-border: #e0defa; --tint-solid: #6d5ce8; } [data-theme="dark"] .tint-primary { --tint-bg: rgba(79, 110, 247, 0.14); --tint-border: rgba(79, 110, 247, 0.25); --tint-solid: #7c93ff; } [data-theme="dark"] .tint-success { --tint-bg: rgba(18, 160, 107, 0.14); --tint-border: rgba(18, 160, 107, 0.25); --tint-solid: #35c78f; } [data-theme="dark"] .tint-warning { --tint-bg: rgba(217, 140, 15, 0.14); --tint-border: rgba(217, 140, 15, 0.25); --tint-solid: #f0a83a; } [data-theme="dark"] .tint-danger { --tint-bg: rgba(224, 68, 68, 0.14); --tint-border: rgba(224, 68, 68, 0.25); --tint-solid: #f06d6d; } [data-theme="dark"] .tint-violet { --tint-bg: rgba(109, 92, 232, 0.14); --tint-border: rgba(109, 92, 232, 0.25); --tint-solid: #9184f2; } [data-theme="dark"] .stat-icon-sq { background: var(--surface-hover); } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 07 TABELAS ╚══════════════════════════════════════════════════════════════ */ /* ========== 12. TABELAS ========== */ .table-wrapper { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); color: var(--text-primary); } .table th { padding: 0.75rem 1rem; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; color: var(--text-secondary); background: var(--surface-alt); border-bottom: 1px solid var(--border-color); white-space: nowrap; } .table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table-hover tbody tr:hover td { background: var(--surface-hover); } .table-striped tbody tr:nth-child(odd) td { background: var(--surface-alt); } .table-sm th, .table-sm td { padding: 0.5rem 0.75rem; } .table-actions { display: flex; align-items: center; gap: var(--sp-1); justify-content: flex-end; } /* --- Variações de listagem --- */ /* Coluna de foto: thumbnail com placeholder de ícone */ .table-thumb { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--surface-alt); border: 1px solid var(--border-color); color: var(--text-muted); font-size: var(--fs-md); overflow: hidden; flex-shrink: 0; } .table-thumb img { width: 100%; height: 100%; object-fit: cover; } .table-thumb-sm { width: 36px; height: 36px; font-size: var(--fs-sm); } /* Listagem simples: sem bordas entre linhas (usar sem .table-wrapper) */ .table-borderless th, .table-borderless td { border: 0; } .table-borderless th { background: transparent; } /* Célula de código/identificador */ .table .cell-code { font-family: var(--font-mono); font-weight: 600; color: var(--primary); white-space: nowrap; } /* Célula secundária (2 linhas: valor + meta) */ .table .cell-meta { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 08 FORMULÁRIOS ╚══════════════════════════════════════════════════════════════ */ /* ========== 13. FORMULÁRIOS ========== */ .form-group { margin-bottom: var(--sp-3); } .form-label { display: block; margin-bottom: 0.375rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); } .form-label .required { color: var(--danger); } .form-control, .form-select { display: block; width: 100%; padding: 0.625rem 0.875rem; font-size: var(--fs-base); line-height: 1.5; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .form-control::placeholder { color: var(--text-muted); } .form-control:focus, .form-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .form-control:disabled, .form-select:disabled { background: var(--surface-alt); color: var(--text-muted); cursor: not-allowed; } .form-control.is-invalid { border-color: var(--danger); } .form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-light); } .form-control.is-valid { border-color: var(--success); } .form-select { 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='%236b7280' stroke-width='2' stroke-linecap='round' d='m4 6 4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 14px; padding-right: 2.25rem; } textarea.form-control { min-height: 5rem; resize: vertical; } .form-text { margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--text-secondary); } .invalid-feedback { display: none; margin-top: 0.25rem; font-size: var(--fs-xs); color: var(--danger); } .is-invalid ~ .invalid-feedback { display: block; } .form-control-sm { padding: 0.375rem 0.625rem; font-size: var(--fs-sm); } .form-control-lg { padding: 0.75rem 1rem; font-size: var(--fs-md); } /* Input group (input + botão/ícone acoplado) */ .input-group { display: flex; align-items: stretch; width: 100%; } .input-group > .form-control { flex: 1 1 auto; min-width: 0; } .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group-text { display: flex; align-items: center; padding: 0.625rem 0.875rem; font-size: var(--fs-base); color: var(--text-secondary); background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius); } /* Checkbox / radio / switch */ .form-check { display: flex; align-items: center; gap: var(--sp-2); min-height: 1.5rem; } .form-check-input { width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; } .form-check-label { font-size: var(--fs-base); color: var(--text-primary); cursor: pointer; } .form-switch .form-check-input { width: 2.25rem; height: 1.25rem; appearance: none; background: var(--border-hover); border-radius: var(--radius-full); position: relative; transition: background var(--transition); } .form-switch .form-check-input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: transform var(--transition); } .form-switch .form-check-input:checked { background: var(--primary); } .form-switch .form-check-input:checked::before { transform: translateX(1rem); } /* --- Checkbox redondo (seleção de linhas em listagens) --- */ .check-round { appearance: none; -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border: 2px solid var(--border-hover); border-radius: var(--radius-full); background: var(--surface); cursor: pointer; display: inline-grid; place-content: center; flex-shrink: 0; transition: border-color var(--transition), background var(--transition); } .check-round:hover { border-color: var(--primary); } .check-round:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .check-round:checked { background: var(--primary); border-color: var(--primary); } .check-round:checked::before { content: ''; width: 5px; height: 9px; margin-top: -2px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .check-round:indeterminate { background: var(--primary); border-color: var(--primary); } .check-round:indeterminate::before { content: ''; width: 8px; height: 2px; border-radius: 2px; background: #ffffff; } /* linha selecionada */ .table tbody tr.selected td { background: var(--primary-light); } /* --- Stepper de quantidade (− valor +) --- */ .qty-stepper { display: inline-flex; align-items: stretch; background: var(--surface); border: 1px solid var(--primary); border-radius: var(--radius); overflow: hidden; } .qty-stepper button { display: flex; align-items: center; justify-content: center; width: 2rem; border: 0; background: transparent; color: var(--text-secondary); font-size: var(--fs-base); font-weight: 600; cursor: pointer; transition: background var(--transition), color var(--transition); } .qty-stepper button:hover { background: var(--primary-light); color: var(--primary); } .qty-stepper button:disabled { opacity: 0.35; pointer-events: none; } .qty-stepper input { width: 3rem; padding: 0.375rem 0; text-align: center; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); -moz-appearance: textfield; appearance: textfield; } .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* neutro (borda padrão) e tamanho compacto */ .qty-stepper.neutral { border-color: var(--border-color); } .qty-stepper-sm button { width: 1.6rem; font-size: var(--fs-sm); } .qty-stepper-sm input { width: 2.4rem; padding: 0.2rem 0; font-size: var(--fs-sm); } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 09 MODAIS ╚══════════════════════════════════════════════════════════════ */ /* ========== 14. MODAIS (sistema único — mecanismo .modal.show) ========== */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--sp-3); background: var(--modal-overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--transition-slow), visibility var(--transition-slow); } .modal.show { opacity: 1; visibility: visible; } .modal.stacked { z-index: var(--z-modal-stacked); } .modal-content { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: calc(100vh - 2 * var(--sp-4)); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); transform: translateY(12px) scale(0.98); transition: transform var(--transition-slow); } .modal.show .modal-content { transform: translateY(0) scale(1); } /* Tamanhos */ .modal-sm .modal-content { max-width: 400px; } .modal-md .modal-content { max-width: 560px; } .modal-lg .modal-content { max-width: 800px; } .modal-xl .modal-content { max-width: 1140px; } .modal-full .modal-content { max-width: calc(100vw - 2 * var(--sp-4)); height: calc(100vh - 2 * var(--sp-4)); } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .modal-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); } .modal-subtitle { font-size: var(--fs-sm); color: var(--text-secondary); } .modal-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; border-radius: var(--radius); background: transparent; color: var(--text-secondary); font-size: var(--fs-md); flex-shrink: 0; transition: background var(--transition), color var(--transition); } .modal-close:hover { background: var(--surface-hover); color: var(--text-primary); } .modal-body { padding: var(--sp-4); overflow-y: auto; flex: 1 1 auto; } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-color); flex-shrink: 0; } .modal-footer-left { margin-right: auto; } /* Loading overlay dentro do modal */ .modal-loading-overlay { position: absolute; inset: 0; z-index: var(--z-base); display: flex; align-items: center; justify-content: center; background: var(--modal-overlay); border-radius: var(--radius-lg); } /* --- Header com ícone e meta (título + subtítulo ao lado do ícone) --- */ .modal-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--text-primary); color: var(--surface); font-size: var(--fs-md); flex-shrink: 0; } .modal-header-info { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .modal-header-info .modal-subtitle { text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--fs-xs); } /* --- Tabs dentro do modal (estilo sublinhado, logo abaixo do header) --- */ .modal-tabs { display: flex; gap: var(--sp-4); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-color); flex-shrink: 0; overflow-x: auto; } .modal-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding:1rem; font-family: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--text-secondary); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; transition: color var(--transition), border-color var(--transition); } .modal-tab:hover { color: var(--text-primary); } .modal-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .modal-tab .seg-tab-count { font-size: var(--fs-xs); } .modal-tab.active .seg-tab-count { background: var(--primary-light); color: var(--primary); } /* Painel de conteúdo das tabs (mostrar só o ativo via JS) */ .modal-tab-pane { display: none; } .modal-tab-pane.active { display: block; } /* --- Faixa de estatísticas do modal (sob o header ou no body) --- */ .modal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--surface-alt); border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .modal-stat { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); min-width: 0; } .modal-stat-icon { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: var(--surface-alt); color: var(--text-secondary); font-size: var(--fs-base); flex-shrink: 0; } .modal-stat-label { font-size: var(--fs-xs); color: var(--text-secondary); white-space: nowrap; } .modal-stat-value { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1.2; } /* --- Barra de resumo compacta no body --- */ .modal-summary { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-3); background: var(--surface-alt); border: 1px solid var(--border-color); border-radius: var(--radius); font-size: var(--fs-sm); } .modal-summary-item { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-secondary); } .modal-summary-item i { color: var(--primary); } .modal-summary-item strong { color: var(--text-primary); } /* --- Busca do modal (footer ou body): ícone + input + contador + limpar --- */ .modal-search { display: flex; align-items: center; gap: var(--sp-2); min-width: 240px; padding: 0 var(--sp-2) 0 var(--sp-3); background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .modal-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .modal-search i, .modal-search svg { color: var(--text-muted); flex-shrink: 0; } .modal-search input { flex: 1; min-width: 0; padding: 0.55rem 0; font-family: inherit; font-size: var(--fs-sm); color: var(--text-primary); background: transparent; border: 0; outline: 0; } .modal-search-count { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; color: var(--text-muted); } .modal-search-count.has-results { color: var(--success); } .modal-search-count.no-results { color: var(--danger); } .modal-search-clear { display: flex; align-items: center; justify-content: center; padding: 0.25rem 0.4rem; background: transparent; border: 0; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; } .modal-search-clear:hover { color: var(--danger); background: var(--danger-light); } /* --- Linha de ações no fim do modal-body --- */ .modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-color); } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 10 FEEDBACK — alertas, spinner, animações ╚══════════════════════════════════════════════════════════════ */ /* ========== 15. FEEDBACK: alertas, spinner, skeleton ========== */ .alert { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3); font-size: var(--fs-base); border: 1px solid transparent; border-radius: var(--radius); } .alert-primary { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } .alert-success { background: var(--success-light); color: var(--success-hover); border-color: var(--success); } .alert-warning { background: var(--warning-light); color: var(--warning-hover); border-color: var(--warning); } .alert-danger { background: var(--danger-light); color: var(--danger-hover); border-color: var(--danger); } .spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid var(--border-color); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; } .spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 3px; } .skeleton { background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface-hover) 50%, var(--surface-alt) 75%); background-size: 200% 100%; border-radius: var(--radius-sm); animation: skeleton 1.2s ease-in-out infinite; } /* ========== 16. ANIMAÇÕES (definição ÚNICA de cada keyframe) ========== */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .animate-fade-in { animation: fadeIn var(--transition-slow) both; } .animate-slide-up { animation: slideUp var(--transition-slow) both; } .animate-pulse { animation: pulse 1.5s ease-in-out infinite; } /* ========== 17. RESPONSIVO GLOBAL ========== */ @media (max-width: 767.98px) { .modal { padding: var(--sp-2); } .modal-content { max-height: calc(100vh - 2 * var(--sp-2)); } .modal-lg .modal-content, .modal-xl .modal-content { max-width: 100%; } .stats-grid { grid-template-columns: 1fr 1fr; } .table th, .table td { padding: 0.5rem 0.75rem; } } @media (max-width: 575.98px) { .stats-grid { grid-template-columns: 1fr; } .modal-footer { flex-wrap: wrap; } .modal-footer .btn { flex: 1 1 auto; } } /* --- Estados vazios / carregando / erro (tabelas, abas, listas) --- */ .empty-state, .loading-state, .error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-3); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); } .empty-state i, .loading-state i, .error-state i { font-size: 2rem; opacity: 0.55; } .empty-state p, .loading-state p, .error-state p { margin: 0; } .error-state { color: var(--danger); } .loading-state i { color: var(--primary); opacity: 1; } /* ╔══════════════════════════════════════════════════════════════ ║ CORE · 11 TABS — segmentadas sm/md/lg ╚══════════════════════════════════════════════════════════════ */ /* ========== TABS SEGMENTADAS (sm / md / lg) ========== */ /* Estrutura:
Tamanhos: .seg-tabs-sm | (padrão md) | .seg-tabs-lg Largura total com abas iguais: adicionar .seg-tabs-fill */ .seg-tabs { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem; max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .seg-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); background: transparent; border: 0; border-radius: calc(var(--radius-lg) - 0.2rem); white-space: nowrap; cursor: pointer; transition: background var(--transition), color var(--transition), box-shadow var(--transition); } .seg-tab:hover { color: var(--text-primary); background: var(--surface-hover); } .seg-tab.active { color: #ffffff; font-weight: 700; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); box-shadow: 0 4px 10px -3px var(--primary-glow); } .seg-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Contador dentro da aba */ .seg-tab-count { padding: 0.1rem 0.5rem; font-size: 0.85em; font-weight: 700; border-radius: var(--radius-full); background: var(--surface-alt); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .seg-tab.active .seg-tab-count { background: rgba(255, 255, 255, 0.25); color: #ffffff; } /* --- Tamanho SM: pílula compacta (filtros de tipo) --- */ .seg-tabs-sm { padding: 0.2rem; border-radius: var(--radius-full); } .seg-tabs-sm .seg-tab { padding: 0.35rem 0.85rem; font-size: var(--fs-xs); border-radius: var(--radius-full); } /* --- Tamanho LG: abas grandes com ícone e contador --- */ .seg-tabs-lg { padding: 0.375rem; border-radius: var(--radius-xl); } .seg-tabs-lg .seg-tab { padding: 0.875rem 1.5rem; font-size: var(--fs-base); border-radius: var(--radius-lg); gap: 0.625rem; } /* --- Largura total: abas dividem o espaço igualmente --- */ .seg-tabs-fill { display: flex; width: 100%; } .seg-tabs-fill .seg-tab { flex: 1 1 0; } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · LAYOUT — sidebar, header, main-wrapper ╚══════════════════════════════════════════════════════════════ */ /* ======================================== SIDEBAR ======================================== */ .sidebar { width: var(--sidebar-width); background: var(--surface); /* height: 100vh; */ position: fixed; left: 0; top: 0; bottom: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1001; display: flex; flex-direction: column; } .sidebar.collapsed { width: var(--sidebar-collapsed-width); } .sidebar-inner { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 1rem; /* Firefox */ scrollbar-width: none; /* IE e Edge antigo */ -ms-overflow-style: none; } /* Custom Scrollbar */ .sidebar-inner::-webkit-scrollbar { /* width: 6px; */ display: none; } .sidebar-inner::-webkit-scrollbar-track { background: transparent; } .sidebar-inner::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; transition: background 0.2s; } .sidebar-inner::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } /* Sidebar Header */ /* .sidebar-header { padding: 1.3rem; background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%); border-bottom: 1px solid var(--border-color); position: relative; transition: all 0.3s ease; flex-shrink: 0; box-shadow: var(--shadow-sm); } */ .sidebar-header { padding: 1.2rem; /* background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0.02) 100%); */ border-bottom: 1px solid var(--border-color); position: relative; transition: all 0.3s ease; flex-shrink: 0; /* box-shadow: var(--shadow-sm); */ } .sidebar-header::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); opacity: 0.5; } .logo-wrapper { display: flex; align-items: center; gap: 1rem; transition: all 0.3s ease; min-height: 48px; } /* .logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 0.75rem; background: linear-gradient(135deg, var(--primary-light), rgba(255, 255, 255, 0.05)); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; padding: 5px; } */ [data-theme="dark"] .logo-img { filter: invert(1) hue-rotate(15deg) brightness(20) contrast(1.2); } .sidebar:not(.collapsed) .logo-img:hover { transform: scale(1.05) rotate(5deg); /* box-shadow: 0 6px 12px rgba(37, 99, 235, 0.2); */ } .logo-text { display: flex; flex-direction: column; transition: all 0.3s ease; overflow: hidden; } .logo-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .logo-subtitle { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .logo-svg { width:50%; height: auto; } /* ============ ANIMATION 11: ASSEMBLING ============ */ .logo-wrapper .logo-svg path { opacity: 0; transform: scale(0) rotate(180deg); transform-origin: center; animation: assemble 7s ease-in-out infinite; } .logo-wrapper .logo-svg path:nth-child(1) { animation-delay: 0s; } .logo-wrapper .logo-svg path:nth-child(2) { animation-delay: 0.3s; } .logo-wrapper .logo-svg path:nth-child(3) { animation-delay: 0.6s; } .logo-wrapper .logo-svg path:nth-child(4) { animation-delay: 0.9s; } .logo-wrapper .logo-svg path:nth-child(5) { animation-delay: 1.2s; } @keyframes assemble { 0%, 100% { opacity: 0; transform: scale(0) rotate(180deg); } 20% { opacity: 1; transform: scale(1.2) rotate(90deg); } 40%, 80% { opacity: 1; transform: scale(1) rotate(0deg); } } .sidebar.collapsed .logo-text { opacity: 0; visibility: hidden; width: 0; } .sidebar.collapsed .logo-wrapper { justify-content: center; font-size: 30px; } .sidebar.collapsed .sidebar-header { padding: 1.2rem 1rem; } .sidebar.collapsed .logo-svg { width: 100%; } /* Sidebar Toggle Button */ .sidebar-toggle { position: absolute; right: -12px; top: 28px; width: 24px; height: 24px; background: var(--surface); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; z-index: 10; box-shadow: var(--shadow-md); } .sidebar-toggle:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; transform: scale(1.1); } .sidebar-toggle i { font-size: 0.625rem; transition: transform 0.3s ease; } .sidebar.collapsed .sidebar-toggle i { transform: rotate(180deg); } /* ======================================== MENU ======================================== */ .sidebar-menu { padding: 1rem 0; flex: 1; overflow-y: auto; } .menu-section { margin-bottom: 0.5rem; } .menu-section-title { padding: 0.75rem 1.5rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; position: relative; } .menu-section-title::before { content: ''; width: 3px; height: 12px; background: var(--primary-color); border-radius: 2px; opacity: 0.5; } .sidebar.collapsed .menu-section-title { padding: 0.75rem 0; justify-content: center; font-size: 0; } .sidebar.collapsed .menu-section-title::before { width: 6px; height: 6px; border-radius: 50%; } .sidebar.collapsed .menu-section-title span { display: none; } .menu-item { position: relative; /* margin: 0 0.75rem; */ border-radius: 0.5rem; margin-bottom: 0.25rem; } .sidebar.collapsed .menu-item { /* margin: 0 0.5rem; */ position: static;display: flex; } .menu-link { display: flex; align-items: center; padding: 0.875rem 1rem; color: var(--text-secondary); text-decoration: none; transition: all 0.2s ease; cursor: pointer; border: none; background: linear-gradient(135deg, var(--primary-light), rgba(37, 99, 235, 0.05)); width: 100%; text-align: left; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; position: relative; overflow: hidden; } [data-theme="dark"] .menu-link { background: linear-gradient(135deg, #0f172a, #0f172a); } .menu-link::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: linear-gradient(90deg, var(--primary-light), transparent); transition: width 0.3s ease; z-index: -1; } .menu-link:hover { color: var(--primary-color); background: var(--primary-light); transform: translateX(4px); } .sidebar.collapsed .menu-link:hover { transform: none; } .menu-link:hover::before { width: 100%; } .menu-link.active { background: linear-gradient(135deg, var(--primary-light), rgba(37, 99, 235, 0.05)); color: var(--primary-color); font-weight: 600; box-shadow: inset 3px 0 0 var(--primary-color); } .menu-link.active::after { content: ''; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--primary-color); border-radius: 50%; animation: pulse 2s infinite; } /* @keyframes pulse — duplicado removido, definição única no CORE·10 */ .sidebar.collapsed .menu-link { padding: 0.7rem 0.875rem; justify-content: center; flex-direction: column; font-size: 9px; /* margin-bottom: 5px; */ row-gap: 5px; } .sidebar.collapsed .menu-link.active::after { display: none; } .menu-icon { width: 24px; margin-right: 0.875rem; font-size: 1.325rem; display: flex; align-items: center; justify-content: center; color: var(--text-primary); transition: all 0.2s ease; } .sidebar.collapsed .menu-icon { margin-right: 0; font-size: 1.25rem; } .menu-link:hover .menu-icon, .menu-link.active .menu-icon { color: var(--au-primary); transform: scale(1.1); } .menu-text { flex: 1; transition: all 0.3s ease; } .menu-arrow { transition: transform 0.2s; font-size: 0.75rem; color: var(--text-muted); } .sidebar.collapsed .menu-arrow { display: none; } .menu-item.open .menu-arrow { transform: rotate(90deg); color: var(--primary-color); } .menu-badge { padding: 0.125rem 0.5rem; background: linear-gradient(135deg, var(--danger-color), #dc2626); color: white; border-radius: 999px; font-size: 0.625rem; font-weight: 700; margin-left: auto; margin-right: 0.25rem; box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3); animation: badgePulse 2s infinite; } @keyframes badgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .sidebar.collapsed .menu-badge { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; min-width: 16px; height: 16px; padding: 0; display: flex; align-items: center; justify-content: center; } /* ======================================== SUBMENU ======================================== */ .submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: var(--background); margin: 0.25rem 0; border-radius: 0.5rem; } .menu-item.open .submenu { max-height: 500px; } .sidebar.collapsed .submenu { display: none; } .submenu-link { display: flex; align-items: center; padding: 0.625rem 1rem 0.625rem 2.5rem; color: var(--text-muted); text-decoration: none; transition: all 0.2s ease; font-size: 0.8525rem; position: relative; font-weight: 600; } .submenu-link::before { content: ''; position: absolute; left: 23.5px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: var(--main-before); border-radius: 50%; transition: all 0.2s ease; z-index: 1; } .submenu-link:hover { color: var(--primary-color); padding-left: 2.75rem; background: var(--primary-light); } .submenu-link:hover::before { background: var(--primary-color); opacity: 1; } .submenu-link.active { color: var(--primary-color); background: var(--primary-light); font-weight: 500; } .submenu-link::after { border-left: 1px solid var(--main-before); bottom: 0; content: ""; left: 27px; position: absolute; top: 0; } /* ======================================== SUBMENU FLUTUANTE (SIDEBAR COLAPSADA) ======================================== */ .sidebar.collapsed .menu-item .submenu-float { position: fixed; left: var(--sidebar-collapsed-width); top: auto; background: var(--surface); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: var(--shadow-xl); min-width: 200px; max-height: 500px; overflow-y: auto; z-index: 1000; display: none; margin-left: 0.5rem; } .sidebar.collapsed .menu-item.show-submenu .submenu-float { display: block; animation: slideInLeft 0.2s ease; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .sidebar.collapsed .submenu-float .submenu-link { padding: 0.75rem 1rem; white-space: nowrap; } .sidebar.collapsed .submenu-float .submenu-link::before, .sidebar.collapsed .submenu-float .submenu-link::after { display: none; } .sidebar.collapsed .menu-item.show-submenu .menu-link { background: var(--primary-light); color: var(--primary-color); } /* Seta SVG do submenu flutuante */ .sidebar.collapsed .submenu-float .arrow-svg { position: absolute; right: calc(100% - 1px); top: 18px; width: 10px; height: 20px; z-index: 2; } .sidebar.collapsed .submenu-float .arrow-svg svg { width: 100%; height: 100%; filter: drop-shadow(0 0 1px rgba(0,0,0,0.1)); } /* Overlay para fechar submenu */ .submenu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: none; } .submenu-overlay.active { display: block; } /* Tooltip para sidebar colapsada */ .sidebar.collapsed .menu-link::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); background: var(--surface); color: var(--text-primary); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.8125rem; white-space: nowrap; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); z-index: 1000; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; } .sidebar.collapsed .menu-link:hover::after { opacity: 1; visibility: visible; } /* ======================================== SIDEBAR FOOTER ======================================== */ .sidebar-footer { margin-top: auto; padding: 1rem; border-top: 1px solid var(--border-color); background: var(--background); flex-shrink: 0; } .user-profile { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; } .user-profile:hover { background: var(--surface); } .user-details { flex: 1; transition: all 0.3s ease; } .user-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); line-height: 1.2; } .user-role { font-size: 0.75rem; color: var(--text-muted); } .sidebar.collapsed .user-details { display: none; } .sidebar.collapsed .user-profile { justify-content: center; padding: 0.5rem; } /* ======================================== MAIN WRAPPER E HEADER ======================================== */ .main-wrapper { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; transition: margin-left 0.3s ease; } .sidebar.collapsed ~ .main-wrapper { margin-left: var(--sidebar-collapsed-width); } .app-header { background: var(--surface); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; } .header-content { padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; } .header-left { display: flex; align-items: center; gap: 1rem; } .menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid var(--border-color); background: var(--surface); border-radius: 0.5rem; cursor: pointer; align-items: center; justify-content: center; transition: all 0.2s; } .menu-toggle:hover { background: var(--background); border-color: var(--primary-color); color: var(--primary-color); } .search-box { position: relative; width: 400px; } .search-icon-header { position: absolute; right: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; } .search-input { width: 100%; padding: 0.625rem 1rem 0.625rem 2.5rem; border: 1px solid var(--border-color); border-radius: 0.5rem; background: var(--background); font-size: 0.875rem; transition: all 0.2s; } .search-input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); background: var(--surface); } /* .search-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); } */ .header-right { display: flex; align-items: center; gap: 0.75rem; } .header-btn { width: 40px; height: 40px; border: 1px solid var(--border-color); background: var(--surface); border-radius: 0.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; position: relative; color: var(--text-primary); } .header-btn:hover { background: var(--background); border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-2px); box-shadow: var(--shadow-md); } .notification-badge { position: absolute; top: -5px; right: -5px; background: var(--danger-color); color: white; border-radius: 999px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.625rem; font-weight: 600; padding: 0 4px; } /* .user-menu { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; } .user-menu:hover { background: var(--background); border-color: var(--primary-color); } */ /* Wrapper do menu com dropdown */ .user-menu-wrapper { position: relative; } /* Menu do usuário */ .user-menu { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; background: var(--shadow-sm); user-select: none; } .user-menu:hover { background: var(--background); border-color: var(--primary-color); } .user-menu.active { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } /* Avatar do usuário */ .user-avatar { width: 36px; height: 36px;/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */ border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; } .user-avatar img{ max-width: 100%; } /* Informações do usuário */ .user-info { display: flex; flex-direction: column; gap: 2px; } .user-name { font-size: 14px; font-weight: 600; color: var(--text-primary); } .user-role { font-size: 12px; color: var(--text-secondary); } /* Ícone de seta */ .chevron-icon { margin-left: 0.5rem; transition: transform 0.2s; color: var(--text-secondary); } .user-menu.active .chevron-icon { transform: rotate(180deg); } /* Dropdown Menu */ .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--dropdown-bg); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s; z-index: 1000; } .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Header do dropdown */ .dropdown-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); } .dropdown-email { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* Links do dropdown */ .dropdown-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; color: var(--text-primary); text-decoration: none; font-size: 14px; transition: background 0.15s; } .dropdown-link:hover { background: var(--hover-bg); } .dropdown-link svg { width: 16px; height: 16px; color: var(--text-secondary); } /* Separador */ .dropdown-divider { height: 1px; background: var(--border-color); margin: 0.25rem 0; } /* Link de logout */ .dropdown-link.logout { color: #dc2626; } .dropdown-link.logout svg { color: #dc2626; } /* Badge para notificações */ .badge { background: var(--primary-color); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; /* margin-left: auto; */ } /* ======================================== MAIN CONTENT ======================================== */ .app-main { flex: 1; padding: 2rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; } .page-header { margin-bottom: 2rem;display: flex; justify-content: space-between; align-items: center; } .page-header h2 { font-size: 1.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-secondary); } .breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s; } .breadcrumb a:hover { color: var(--primary-color); } /* ======================================== RESPONSIVE ======================================== */ @media (max-width: 1400px) { .stat-card { padding: 0.5rem 1rem; } } @media (max-width: 1200px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } .column-header { font-size: 0.5rem; padding: 0.125rem 0; } .heatmap-cell { min-height: 25px; } } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); } .sidebar-toggle { display: none; } .main-wrapper { margin-left: 0 !important; } .menu-toggle { display: flex; } .search-box { display: none; } .user-info { display: none; } .sidebar-overlay { display: none; opacity: 0; /*pointer-events: none;*/ } .sidebar.open ~ .sidebar-overlay { opacity: 1; pointer-events: auto; } .js-menu-header { display: flex; } .stats-grid { grid-template-columns: 1fr; } .actions-grid { grid-template-columns: repeat(2, 1fr); } .dashboard-grid { grid-template-columns: 1fr; } .warehouse-filters { flex-direction: column; gap: 1rem; } .filter-section { width: 100%; } .warehouse-heatmap { padding: 0.5rem; } .row-label { width: 45px; min-width: 45px; font-size: 0.625rem; padding-right: 0.25rem; } .column-headers { padding-left: 45px; } .row-cells { width: calc(100% - 45px); } .corridor-road { margin-left: 45px; width: calc(100% - 45px); } .heatmap-cell, .empty-space { height: 20px; } .side-label { font-size: 0.75rem; left: -60px; } } @media (min-width: 768px) { .js-menu-header { display: none; } } @media (max-width: 480px) { .column-header { font-size: 0; padding: 0.125rem 0; min-height: 15px; } .heatmap-cell, .empty-space { height: 15px; border-radius: 0.125rem; } .row-label { font-size: 0.5rem; } } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · NOTIFICAÇÕES + INPUT HISTORY ╚══════════════════════════════════════════════════════════════ */ /* ========================================================================== NOTIFICAÇÕES ========================================================================== */ .notification-container { position: fixed; top: 20px; right: 20px; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Container visível */ .notification-container.show { opacity: 1; visibility: visible; z-index: 99999; } .alert { padding: 1rem 1.5rem; border-radius: 0.5rem; min-width: 300px; max-width: 500px; display: none; box-shadow: var(--shadow-lg); animation: slideInRight 0.3s ease-out; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; } .alert:hover { transform: translateX(-5px); } .alert.show { display: flex; } .alert:not(.show) { opacity: 0; transform: translateX(100%); pointer-events: none; } .alert i { font-size: 1.25rem; flex-shrink: 0; } .alert-success { background-color: #d1fae5; border: 1px solid #a7f3d0; color: #065f46; } .alert-warning { background-color: #fed7aa; border: 1px solid #fdba74; color: #92400e; } .alert-danger { background-color: #fee2e2; border: 1px solid #fecaca; color: #991b1b; } .alert-info { background-color: #dbeafe; border: 1px solid #93c5fd; color: #1e40af; } .alert-success i { color: #10b981; } .alert-warning i { color: #f59e0b; } .alert-danger i { color: #ef4444; } .alert-info i { color: #3b82f6; } [data-theme="dark"] .alert-warning { background-color: #78350f; border: 1px solid #f59e0b; color: #fed7aa; } [data-theme="dark"] .alert-success { background-color: #064e3b; border: 1px solid #10b981; color: #d1fae5; } [data-theme="dark"] .alert-danger { background-color: #7f1d1d; border: 1px solid #ef4444; color: #fee2e2; } [data-theme="dark"] .alert-info { background-color: #1e3a5f; border: 1px solid #3b82f6; color: #dbeafe; } /* ============================================ INPUT HISTORY - HISTÓRICO DE BUSCAS ============================================ */ .input-history-wrapper { position: relative; width: 100%; } .input-history-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; display: none; max-height: 300px; overflow: hidden; } .input-history-dropdown.show { display: block; animation: dropdownFadeIn 0.15s ease-out; } @keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .input-history-header { display: flex; justify-content: space-between; align-items: center; padding: 0.625rem 0.875rem; background: var(--background, #f9fafb); border-bottom: 1px solid var(--border-color, #e5e7eb); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary, #6b7280); text-transform: uppercase; letter-spacing: 0.025em; } .input-history-header i { margin-right: 0.375rem; color: var(--primary-color, #3b82f6); } .input-history-clear { background: none; border: none; color: var(--text-secondary, #6b7280); cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .input-history-clear:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); } .input-history-items { max-height: 250px; overflow-y: auto; } .input-history-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.875rem; cursor: pointer; transition: all 0.15s; border-bottom: 1px solid var(--border-color, #f3f4f6); } .input-history-item:last-child { border-bottom: none; } .input-history-item:hover, .input-history-item.active { background: var(--primary-light, #eff6ff); } .input-history-item i { color: var(--text-secondary, #9ca3af); font-size: 0.75rem; flex-shrink: 0; } .input-history-item span { flex: 1; font-size: 0.875rem; color: var(--text-primary, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .input-history-item mark { background: #fef08a; color: inherit; padding: 0 0.125rem; border-radius: 0.125rem; } /* Dark Mode */ [data-theme="dark"] .input-history-dropdown { background: #1e293b; border-color: #334155; } [data-theme="dark"] .input-history-header { background: #0f172a; border-color: #334155; } [data-theme="dark"] .input-history-item { border-color: #334155; } [data-theme="dark"] .input-history-item:hover, [data-theme="dark"] .input-history-item.active { background: #334155; } [data-theme="dark"] .input-history-item span { color: #f1f5f9; } [data-theme="dark"] .input-history-item mark { background: #854d0e; color: #fef08a; } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · SEARCHABLE SELECT ╚══════════════════════════════════════════════════════════════ */ /* =========================================== SearchableSelect - Componente de Select com Busca @package TrackStock WMS @version 1.0.0 =========================================== */ /* Container */ .ss-component { position: relative; width: 100%; } .ss-wrap.ss-disabled { opacity: 0.5; pointer-events: none; } /* ============================================ TRIGGER (botão que mostra valor selecionado) ============================================ */ .ss-trigger { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 1rem; border: 2px solid var(--border-color); border-radius: 0.5rem; background: var(--surface); cursor: pointer; transition: all 0.2s ease; gap: 0.75rem; outline: none; } .ss-trigger:hover { border-color: var(--primary-color); } .ss-trigger:focus-visible { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .ss-trigger.ss-open { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .ss-trigger-icon { color: var(--text-muted, #94a3b8); font-size: 0.875rem; flex-shrink: 0; } .ss-trigger-text { flex: 1; font-size: 0.875rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-trigger-text.ss-placeholder { color: var(--text-muted, #94a3b8); } .ss-trigger-badge { background: var(--primary-color, #3b82f6); color: white; font-size: 0.6875rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 1rem; flex-shrink: 0; } .ss-trigger-arrow { color: var(--text-muted, #94a3b8); font-size: 0.75rem; transition: transform 0.2s ease; flex-shrink: 0; } .ss-open .ss-trigger-arrow { transform: rotate(180deg); } /* ============================================ DROPDOWN ============================================ */ .ss-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 1000; background: var(--surface); border: 2px solid var(--primary-color, #3b82f6); border-top: none; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); display: none; overflow: hidden; } .ss-dropdown.ss-show { display: block; animation: ssSlideDown 0.15s ease-out; } @keyframes ssSlideDown { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ BUSCA ============================================ */ .ss-search-wrap { padding: 0.75rem; border-bottom: 1px solid var(--border-color); background: var(--background); } .ss-search-input-wrap { position: relative; display: flex; align-items: center; } .ss-search-icon { position: absolute; left: 0.75rem; color: var(--text-muted, #94a3b8); font-size: 0.8125rem; pointer-events: none; } .ss-search-input { width: 100%; padding: 0.625rem 2rem 0.625rem 2.25rem; border: 2px solid var(--border-color); border-radius: 0.375rem; font-size: 0.8125rem; background: var(--surface); color: var(--text-primary); outline: none; transition: border-color 0.2s; font-family: inherit; } .ss-search-input:focus { border-color: var(--primary-color, #3b82f6); } .ss-search-input::placeholder { color: var(--text-muted, #94a3b8); } .ss-search-clear { position: absolute; right: 0.5rem; background: none; border: none; color: var(--text-muted, #94a3b8); cursor: pointer; padding: 0.25rem; font-size: 0.75rem; display: none; line-height: 1; } .ss-search-clear.ss-visible { display: flex; } .ss-search-clear:hover { color: var(--danger-color, #ef4444); } /* ============================================ RESULTADOS ============================================ */ .ss-results { overflow-y: auto; padding: 0.375rem; } .ss-results::-webkit-scrollbar { width: 6px; } .ss-results::-webkit-scrollbar-track { background: transparent; } .ss-results::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } .ss-results::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #94a3b8); } /* ============================================ ITEM ============================================ */ .ss-item { display: flex; align-items: center; padding: 0.625rem 0.75rem; border-radius: 0.375rem; cursor: pointer; transition: all 0.15s ease; gap: 0.75rem; } .ss-item:hover, .ss-item.ss-focused { background: var(--primary-light, #eff6ff); } /* Single: ativo */ .ss-item.ss-active { background: var(--primary-color, #3b82f6); color: white; } .ss-item.ss-active .ss-item-sub, .ss-item.ss-active .ss-item-icon { color: rgba(255, 255, 255, 0.8); } .ss-item.ss-active .ss-item-badge { background: rgba(255, 255, 255, 0.2); color: white; } .ss-item.ss-active .ss-item-icon { background: rgba(255, 255, 255, 0.2); color: white; } .ss-item-icon { width: 32px; height: 32px; border-radius: 0.375rem; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; flex-shrink: 0; background: var(--primary-light, #eff6ff); color: var(--primary-color, #3b82f6); } .ss-item-content { flex: 1; min-width: 0; } .ss-item-main { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ss-item-sub { font-size: 0.6875rem; color: var(--text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0.125rem; } .ss-item-badge { font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 1rem; background: var(--background); color: var(--text-secondary, #64748b); flex-shrink: 0; } .ss-item-star { color: var(--warning-color, #f59e0b); font-size: 0.6875rem; flex-shrink: 0; } /* ============================================ MULTI: Checkbox ============================================ */ .ss-item-check { width: 18px; height: 18px; border: 2px solid var(--border-color); border-radius: 0.25rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; font-size: 0.625rem; color: transparent; } .ss-item.ss-checked .ss-item-check { background: var(--primary-color, #3b82f6); border-color: var(--primary-color, #3b82f6); color: white; } /* ============================================ MULTI: Tags ============================================ */ .ss-multi-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1; padding: 0.25rem 0; min-height: 28px; align-items: center; } .ss-multi-placeholder { color: var(--text-muted, #94a3b8); font-size: 0.8125rem; } .ss-tag { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--primary-light, #eff6ff); color: var(--primary-color, #3b82f6); font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 0.375rem; white-space: nowrap; animation: ssTagIn 0.2s ease; } @keyframes ssTagIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .ss-tag-remove { background: none; border: none; color: var(--primary-color, #3b82f6); cursor: pointer; padding: 0; font-size: 0.625rem; opacity: 0.6; transition: opacity 0.15s; display: flex; line-height: 1; } .ss-tag-remove:hover { opacity: 1; } /* ============================================ VAZIO ============================================ */ .ss-empty { padding: 1.5rem; text-align: center; color: var(--text-muted, #94a3b8); font-size: 0.8125rem; } .ss-empty i { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; opacity: 0.5; } /* ============================================ FOOTER ============================================ */ .ss-footer { padding: 0.5rem 0.75rem; border-top: 1px solid var(--border-color); font-size: 0.6875rem; color: var(--text-muted, #94a3b8); display: flex; justify-content: space-between; align-items: center; background: var(--background); } .ss-footer kbd { background: var(--surface); border: 1px solid var(--border-color); border-radius: 0.25rem; padding: 0.0625rem 0.375rem; font-size: 0.625rem; font-family: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } /* ============================================ DARK MODE ADJUSTMENTS ============================================ */ [data-theme="dark"] .ss-dropdown { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .ss-item:hover, [data-theme="dark"] .ss-item.ss-focused { background: rgba(59, 130, 246, 0.15); } [data-theme="dark"] .ss-tag { background: rgba(59, 130, 246, 0.2); } [data-theme="dark"] .ss-item-icon { background: rgba(59, 130, 246, 0.2); } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · FORMS EXTENSIONS — upload, avatar, drag&drop ╚══════════════════════════════════════════════════════════════ */ /* ================================================================== SEÇÃO 3 · FORMULÁRIOS (wms-forms.css) ================================================================== */ /** * WMS Forms CSS - Formulários, Inputs, Uploads * CSS adicional para componentes de formulário * @version 1.0.0 */ /* ================================ SECTION TITLES ================================ */ .section-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.05em; padding: 1rem 0 0.75rem; margin-top: 1.5rem; margin-bottom: 1rem; border-bottom: 2px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem; } .section-title:first-child { margin-top: 0; } .section-title i { color: var(--primary-color); font-size: 1rem; } /* ================================ FORM GROUPS E LABELS ================================ */ .form-group { margin-bottom: 1.5rem; } .form-control-label { display: inline-block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; } .form-control-label i { color: var(--primary-color); font-size: 0.875rem; } .form-control-label.required::after { content: '*'; color: var(--danger-color); margin-left: 0.25rem; } /* ================================ INPUTS ================================ */ .form-control { display: block; width: 100%; padding: 0.625rem 0.875rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--text-primary); background-color: var(--surface); background-clip: padding-box; border: 1px solid var(--border-color); border-radius: var(--radius); transition: all 0.2s ease; } .form-control:hover { border-color: var(--border-hover); } .form-control:focus { color: var(--text-primary); background-color: var(--surface); border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .form-control::placeholder { color: var(--text-secondary); opacity: 0.7; } .form-control:disabled, .form-control[readonly] { background-color: var(--background); opacity: 0.7; cursor: not-allowed; } /* Input com ícone */ .input-icon { position: relative; } .input-icon i { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); } .input-icon .form-control { padding-left: 2.5rem; } /* ================================ INPUT GROUPS ================================ */ .input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; } .input-group .form-control { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group .btn-outline-secondary { color: var(--text-secondary); background-color: var(--surface); border: 1px solid var(--border-color); border-left: none; } .input-group .btn-outline-secondary:hover { color: var(--primary-color); background-color: var(--background); border-color: var(--primary-color); } /* ================================ SELECTS ================================ */ .form-select, select.form-control { display: block; width: 100%; padding: 0.625rem 2.5rem 0.625rem 0.875rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--text-primary); background-color: var(--surface); 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='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 16px 12px; border: 1px solid var(--border-color); border-radius: var(--radius); transition: all 0.2s ease; appearance: none; cursor: pointer; } .form-select:hover, select.form-control:hover { border-color: var(--border-hover); } .form-select:focus, select.form-control:focus { border-color: var(--primary-color); outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .form-select:disabled, select.form-control:disabled { background-color: var(--background); opacity: 0.7; cursor: not-allowed; } /* Dark mode select arrow */ [data-theme="dark"] .form-select, [data-theme="dark"] select.form-control { 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='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } /* ================================ TEXTAREA ================================ */ textarea.form-control { min-height: 100px; resize: vertical; } /* ================================ FILE UPLOAD ================================ */ .upload-area { position: relative; width: 100%; border: 2px dashed var(--border-color); border-radius: var(--radius); padding: 2rem 1rem; text-align: center; transition: all 0.3s ease; background-color: var(--background); cursor: pointer; } .upload-area:hover { border-color: var(--primary-color); background-color: var(--primary-light); } .upload-label { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; margin: 0; } .upload-label i { font-size: 2rem; color: var(--primary-color); } .upload-label span { font-weight: 500; color: var(--text-primary); } .upload-label small { font-size: 0.75rem; color: var(--text-secondary); } .upload-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Upload com arquivo selecionado */ .upload-area.has-file { border-color: var(--success-color); background-color: rgba(16, 185, 129, 0.05); } .upload-area.has-file .upload-label i { color: var(--success-color); } /* ================================ IMAGE PREVIEWS ================================ */ .user-photo-preview { width: 170px; height: 170px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; border: 3px solid var(--border-color); box-shadow: var(--shadow-md); transition: all 0.3s ease; } .user-photo-preview:hover { transform: scale(1.05); box-shadow: var(--shadow-lg); border-color: var(--primary-color); } .user-photo-preview img { width: 100%; height: 100%; object-fit: cover; } .cover-photo-preview { width: 100%; height: 200px; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border-color); background-color: var(--background); } .cover-photo-preview img { width: 100%; height: 100%; object-fit: cover; } /* ================================ AVATAR GRID ================================ */ .avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 1rem; padding: 1rem 0; } .avatar-item { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 3px solid var(--border-color); cursor: pointer; transition: all 0.3s ease; display: block; background-color: var(--background); } .avatar-item:hover { transform: scale(1.1); border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); z-index: 10; } .avatar-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(37, 99, 235, 0.9); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .avatar-item:hover .avatar-overlay { opacity: 1; } .avatar-overlay i { color: white; font-size: 1.5rem; } /* Avatar selecionado */ .avatar-item.selected { border-color: var(--success-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } .avatar-item.selected .avatar-overlay { background: rgba(16, 185, 129, 0.9); opacity: 1; } /* ================================ FORM VALIDATION ================================ */ .form-control.is-valid { border-color: var(--success-color); padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310b981' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .form-control.is-valid:focus { border-color: var(--success-color); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); } .form-control.is-invalid { border-color: var(--danger-color); padding-right: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ef4444' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ef4444' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } .form-control.is-invalid:focus { border-color: var(--danger-color); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); } .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875rem; color: var(--success-color); } .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875rem; color: var(--danger-color); } .form-control.is-valid ~ .valid-feedback, .form-control.is-invalid ~ .invalid-feedback { display: block; } /* ================================ CHECKBOX E RADIO ================================ */ .form-check { display: block; min-height: 1.5rem; padding-left: 1.75rem; margin-bottom: 0.5rem; } .form-check-input { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; margin-left: -1.75rem; vertical-align: top; background-color: var(--surface); background-repeat: no-repeat; background-position: center; background-size: contain; border: 1px solid var(--border-color); appearance: none; cursor: pointer; transition: all 0.2s ease; } .form-check-input:checked { background-color: var(--primary-color); border-color: var(--primary-color); } .form-check-input[type="checkbox"] { border-radius: var(--radius-sm); } .form-check-input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); } .form-check-input[type="radio"] { border-radius: 50%; } .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e"); } .form-check-label { cursor: pointer; color: var(--text-primary); font-size: 0.875rem; } /* Switch */ .form-switch .form-check-input { width: 2.5rem; height: 1.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/%3e%3c/svg%3e"); background-position: left center; border-radius: 2rem; transition: background-position 0.15s ease-in-out; } .form-switch .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } /* ================================ RANGE SLIDER ================================ */ .form-range { width: 100%; height: 1.5rem; padding: 0; background-color: transparent; appearance: none; } .form-range::-webkit-slider-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: var(--border-color); border-color: transparent; border-radius: 1rem; } .form-range::-webkit-slider-thumb { width: 1rem; height: 1rem; margin-top: -0.25rem; background-color: var(--primary-color); border: 0; border-radius: 1rem; cursor: pointer; appearance: none; } .form-range::-moz-range-track { width: 100%; height: 0.5rem; color: transparent; cursor: pointer; background-color: var(--border-color); border-color: transparent; border-radius: 1rem; } .form-range::-moz-range-thumb { width: 1rem; height: 1rem; background-color: var(--primary-color); border: 0; border-radius: 1rem; cursor: pointer; } /* ================================ HELPERS ================================ */ .form-text { margin-top: 0.25rem; font-size: 0.875rem; color: var(--text-secondary); } .form-text i { margin-right: 0.25rem; } /* ================================ RESPONSIVE ================================ */ @media (max-width: 768px) { .avatar-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 0.75rem; } .avatar-item { width: 60px; height: 60px; border-width: 2px; } .user-photo-preview { width: 120px; height: 120px; } .cover-photo-preview { height: 150px; } } /** * FormManager CSS * Estilos para overlay, loading e barra de progresso * @version 2.0.0 */ /* ================================ OVERLAY DE LOADING ================================ */ .ovl-fade { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 99999; display: none; opacity: 0; transition: opacity 0.3s ease; } .ovl-fade.show { display: flex; opacity: 1; } /* Loading Spinner Central */ .ovl-fade::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border: 4px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } /* @keyframes spin — duplicado removido, definição única no CORE·10 */ /* ================================ BARRA DE PROGRESSO DE UPLOAD ================================ */ .form_load { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100000; background: var(--surface); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); min-width: 300px; display: none; } .form_load.show { display: block; } .progress-container { margin-top: 1rem; } .progress-label { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .progress-label i { color: var(--primary-color); animation: pulse 1.5s ease-in-out infinite; } /* @keyframes pulse — duplicado removido, definição única no CORE·10 */ .progress-bar-container { width: 100%; height: 30px; background: var(--background); border-radius: var(--radius-full); overflow: hidden; position: relative; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .js-upload_progress { height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; transition: width 0.3s ease; position: relative; overflow: hidden; min-width: 50px; } .js-upload_progress::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); animation: shimmer 2s infinite; } @keyframes shimmer { to { left: 100%; } } /* Mensagem de upload */ .upload-message { margin-top: 1rem; text-align: center; font-size: 0.8125rem; color: var(--text-secondary); } /* ================================ ESTADOS DO FORMULÁRIO ================================ */ /* Formulário em loading */ form.loading { pointer-events: none; opacity: 0.6; position: relative; } form.loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 0.8s linear infinite; } /* Botão de submit em loading */ button[type="submit"].loading { pointer-events: none; position: relative; color: transparent; } button[type="submit"].loading::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; } /* ================================ NOTIFICAÇÕES DE FORMULÁRIO ================================ */ .form-notification { padding: 1rem; border-radius: var(--radius); margin-bottom: 1rem; display: none; animation: slideDown 0.3s ease; } .form-notification.show { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .form-notification.success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: var(--success-color); } .form-notification.error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--danger-color); } .form-notification.warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--warning-color); } /* ================================ VALIDAÇÃO DE FORMULÁRIO ================================ */ .form-control.error { border-color: var(--danger-color); background: rgba(239, 68, 68, 0.05); } .form-control.success { border-color: var(--success-color); background: rgba(16, 185, 129, 0.05); } .error-message { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--danger-color); animation: shake 0.3s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ================================ FILE UPLOAD PREVIEW ================================ */ .file-preview { margin-top: 1rem; padding: 1rem; background: var(--background); border-radius: var(--radius); border: 1px solid var(--border-color); } .file-preview-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: var(--surface); border-radius: var(--radius-sm); margin-bottom: 0.5rem; } .file-preview-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary-color); border-radius: var(--radius-sm); font-size: 1.25rem; } .file-preview-info { flex: 1; } .file-preview-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); } .file-preview-size { font-size: 0.75rem; color: var(--text-secondary); } .file-preview-remove { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius-sm); color: var(--danger-color); cursor: pointer; transition: all 0.2s; } .file-preview-remove:hover { background: var(--danger-color); color: white; border-color: var(--danger-color); } /* ================================ DRAG & DROP FILE UPLOAD ================================ */ .drop-zone { border: 2px dashed var(--border-color); border-radius: var(--radius); padding: 3rem 2rem; text-align: center; transition: all 0.3s ease; cursor: pointer; } .drop-zone:hover { border-color: var(--primary-color); background: var(--primary-light); } .drop-zone.dragover { border-color: var(--primary-color); background: var(--primary-light); transform: scale(1.02); } .drop-zone-icon { font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem; } .drop-zone-text { font-size: 1rem; font-weight: 500; color: var(--text-primary); margin-bottom: 0.5rem; } .drop-zone-hint { font-size: 0.875rem; color: var(--text-secondary); } /* ================================ RESPONSIVE ================================ */ @media (max-width: 768px) { .form_load { min-width: 280px; padding: 1.5rem; } .progress-bar-container { height: 24px; } .js-upload_progress { font-size: 0.6875rem; } } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · MODAL EXTENSIONS — wizard, timeline, galeria, scanner ╚══════════════════════════════════════════════════════════════ */ /* ================================================================== SEÇÃO 4 · MODAIS — base + Aurora (modal-system.css) ================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /** * MODAL SYSTEM - CSS PADRONIZADO * Sistema completo de modais para WMS * Integrado com theme.css e wms-grid.css * @version 1.0.0 */ /* ================================ MODAL BASE - Já existe no theme.css Mantém a estrutura, adiciona melhorias ================================ */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--modal-overlay); z-index: var(--z-modal-backdrop); align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 1rem; transition: opacity 0.3s ease, z-index 0s 0.3s; } .modal.show { display: flex; animation: modalFadeIn 0.3s ease; z-index: var(--z-modal-base); transition: opacity 0.3s ease, z-index 0s; } /* ================================ MODAL CONTENT - Tamanhos ================================ */ .modal-content { background: var(--surface); border-radius: var(--radius-lg); width: 90%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: modalSlideUp 0.3s ease; box-shadow: var(--shadow-xl); position: relative; z-index: var(--z-modal); transition: transform 0.3s ease; } .modal.show .modal-content { transform: scale(1); } /* ============================================ MODAL LOADING OVERLAY ============================================ */ .modal-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.95); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(4px); animation: fadeIn 0.3s ease; } [data-theme="dark"] .modal-loading-overlay { background: rgba(17, 24, 39, 0.95); } .modal-loading-content { text-align: center; padding: 2rem; } /* ============================================ LOADING SPINNER ============================================ */ .loading-spinner { position: relative; width: 80px; height: 80px; margin: 0 auto 1.5rem; } .spinner-ring { position: absolute; width: 100%; height: 100%; border: 4px solid transparent; border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .spinner-ring:nth-child(1) { animation-delay: -0.45s; border-top-color: var(--primary-color); } .spinner-ring:nth-child(2) { animation-delay: -0.3s; border-top-color: var(--primary-hover); width: 85%; height: 85%; top: 7.5%; left: 7.5%; } .spinner-ring:nth-child(3) { animation-delay: -0.15s; border-top-color: rgba(77, 148, 255, 0.5); width: 70%; height: 70%; top: 15%; left: 15%; } /* @keyframes spin — duplicado removido, definição única no CORE·10 */ /* ============================================ LOADING TEXT ============================================ */ .loading-text { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; } .loading-text span { display: inline-block; animation: pulse 1.5s ease-in-out infinite; } /* @keyframes pulse — duplicado removido, definição única no CORE·10 */ /* ============================================ LOADING PROGRESS BAR (OPCIONAL) ============================================ */ .loading-progress { width: 200px; height: 4px; background: var(--border-color); border-radius: 2px; margin: 0 auto; overflow: hidden; } .loading-progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--primary-hover), var(--primary-color) ); background-size: 200% 100%; animation: progressSlide 1.5s ease-in-out infinite; width: 100%; } @keyframes progressSlide { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================ FADE IN ANIMATION ============================================ */ /* @keyframes fadeIn — duplicado removido, definição única no CORE·10 */ /* ============================================ ANIMAÇÕES DE ENTRADA ============================================ */ @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* ============================================ LOADING STATE - DISABLE INTERACTIONS ============================================ */ .modal-loading-overlay ~ * { pointer-events: none; user-select: none; } /* Tamanhos dos modais */ .modal-content.modal-sm { max-width: 400px; } .modal-content.modal-md { max-width: 600px; } .modal-content.modal-lg { max-width: 900px; } .modal-content.modal-xl { max-width: 1200px; } .modal-content.modal-xxl { max-width: 75%; } .modal-content.modal-full { max-width: 95vw; max-height: 95vh; } /* ================================ MODAL HEADER ================================ */ .modal-header { background: var(--background); padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-shrink: 0; } /* Seção do título */ .modal-title-section { flex: 1; min-width: 0; } .modal-header h3, .modal-header .modal-title { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 0.75rem; } .modal-header h3 i, .modal-header .modal-title i { color: var(--primary-color); font-size: 1.125rem; } /* Subtítulo e badges */ .modal-subtitle { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-secondary); } .summary-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .summary-badges .badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; padding: 0.375rem 0.75rem; } /* Botão de fechar */ .modal-close { width: 36px; height: 36px; min-width: 36px; border: none; background: var(--surface); font-size: 1.25rem; cursor: pointer; color: var(--text-secondary); border-radius: var(--radius); transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .modal-close:hover { background: var(--danger-color); color: white; transform: rotate(90deg); } /* ================================ SISTEMA DE ABAS (Tabs) ================================ */ .modal-tabs:has(.tab-button) { display: flex; background: var(--surface); border-bottom: 2px solid var(--border-color); overflow-x: auto; flex-shrink: 0; } .modal-tabs::-webkit-scrollbar { height: 2px; } .tab-button { flex: 1; min-width: 120px; padding: 1rem 1.5rem; border: none; background: transparent; color: var(--text-secondary); font-weight: 500; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; position: relative; border-bottom: 2px solid transparent; margin-bottom: -2px; } .tab-button i { font-size: 1rem; } .tab-button:hover { background: var(--hover-bg); color: var(--text-primary); } .tab-button.active { color: var(--primary-color); border-bottom-color: var(--primary-color); background: var(--primary-light); } .tab-badge { background: var(--secondary-color); color: white; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; min-width: 20px; text-align: center; } .tab-button.active .tab-badge { background: var(--primary-color); } /* ================================ MODAL BODY ================================ */ .modal-body { padding: 1.5rem; overflow-y: auto; overflow-x: hidden; flex: 1; background: var(--surface); } /* Conteúdo das abas */ .tab-content { display: none; animation: tabFadeIn 0.3s ease; min-height: 50vh; } .tab-content.active { display: flex; flex-direction: column; justify-content: space-between; } /* Estados vazios */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; color: var(--text-secondary); } .empty-state i { font-size: 3rem; color: var(--text-tertiary); margin-bottom: 1rem; opacity: 0.5; } .empty-state p { font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-primary); } .empty-state small { font-size: 0.875rem; color: var(--text-secondary); } /* ================================ MODAL FOOTER ================================ */ .modal-footer { background: var(--background); padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; } .modal-footer.space-between { justify-content: space-between; } .modal-footer-left { display: flex; gap: 0.75rem; align-items: center; } .modal-footer-right { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; } /* ================================ TABELAS NO MODAL ================================ */ .modal-table { width: 100%; border-collapse: separate; border-spacing: 0; } .modal-table thead th { background: var(--background); padding: 0.75rem 1rem; text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border-color); position: sticky; top: 0; z-index: 10; } .modal-table tbody td { /* padding: 0.875rem 1rem; */ padding: 0.375rem 1rem; border-bottom: 1px solid var(--border-color); font-size: 0.875rem; color: var(--text-primary); } .modal-table tbody tr:nth-child(odd) { background-color: #7f7f7f17; } .modal-table tbody tr:nth-child(even) { background-color: transparent; } .modal-table tbody tr:hover { background: var(--background); cursor: pointer; } .modal-table tbody tr:last-child td { border-bottom: none; } /* Elementos especiais na tabela */ .material-info { display: flex; flex-direction: column; gap: 0.25rem; } .material-info strong { color: var(--text-primary); font-size: 0.875rem; } .material-info small { color: var(--text-secondary); font-size: 0.75rem; } .quantity-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; background: var(--primary-light); color: var(--primary-color); border-radius: var(--radius); font-weight: 600; font-size: 0.875rem; } /* ================================ LOADING STATE NO MODAL ================================ */ .modal-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; min-height: 300px; } .modal-loading .spinner { width: 48px; height: 48px; border: 3px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 0.8s linear infinite; } .modal-loading p { margin-top: 1rem; color: var(--text-secondary); font-size: 0.875rem; } /* ================================ SEÇÕES INFORMATIVAS ================================ */ .info-section { background: linear-gradient(to bottom, var(--background), var(--surface)); padding: 1.5rem; border-bottom: 1px solid var(--border-color); } .info-section:last-child { border-bottom: none; } .section-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .section-title i { color: var(--primary-color); font-size: 1rem; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .info-item { display: flex; flex-direction: column; padding: 0.75rem; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border-color); transition: all 0.2s ease; } .info-item:hover { border-color: var(--primary-color); box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1); } .info-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem; } .info-value { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); } /* ================================ ANIMAÇÕES ================================ */ @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ================================ RESPONSIVE ================================ */ @media (max-width: 768px) { .modal-content { width: 95%; max-height: 95vh; } .modal-content.modal-sm, .modal-content.modal-md, .modal-content.modal-lg, .modal-content.modal-xl, .modal-content.modal-full { max-width: 95%; } .modal-header { padding: 1rem; } .modal-header h3, .modal-header .modal-title { font-size: 1rem; } .modal-body { padding: 1rem; } .modal-footer { padding: 0.75rem 1rem; flex-direction: column; align-items: stretch; } .modal-footer-left, .modal-footer-right { width: 100%; margin-left: 0; } .modal-footer .btn { width: 100%; justify-content: center; } .modal-tabs { overflow-x: auto; } .tab-button { min-width: 100px; padding: 0.875rem 1rem; font-size: 0.8125rem; } .tab-button span:not(.tab-badge) { display: none; } .info-grid { grid-template-columns: 1fr; } .modal-table { font-size: 0.8125rem; } .modal-table thead th, .modal-table tbody td { padding: 0.5rem 0.75rem; } } @media (max-width: 480px) { .modal { padding: 0.5rem; } .summary-badges { flex-direction: column; } .tab-button i { font-size: 1.25rem; } } /* ================================ MODAIS EMPILHADOS (NESTED MODALS) ================================ */ .modal.stacked { z-index: calc(var(--z-modal-backdrop) + 100); } .modal.stacked .modal-content { z-index: calc(var(--z-modal) + 100); } /* Overlay mais escuro para modais empilhados */ .modal.stacked { background: rgba(0, 0, 0, 0.7); } /* ================================ WIZARD / STEPS ================================ */ .wizard-steps { display: flex; justify-content: space-between; padding: 1.5rem; background: var(--background); border-bottom: 1px solid var(--border-color); position: relative; } .wizard-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; cursor: pointer; } .wizard-step::before { content: ''; position: absolute; top: 20px; left: 50%; width: 100%; height: 2px; background: var(--border-color); z-index: 0; } .wizard-step:first-child::before { display: none; } .wizard-step-number { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; position: relative; z-index: 1; transition: all 0.3s ease; } .wizard-step.active .wizard-step-number { background: var(--primary-color); border-color: var(--primary-color); color: white; transform: scale(1.1); } .wizard-step.completed .wizard-step-number { background: var(--success-color); border-color: var(--success-color); color: white; } .wizard-step.completed .wizard-step-number::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; } .wizard-step-label { font-size: 0.75rem; color: var(--text-secondary); text-align: center; font-weight: 500; } .wizard-step.active .wizard-step-label { color: var(--primary-color); font-weight: 600; } .wizard-content { padding: 1.5rem; } .wizard-page { display: none; animation: wizardFadeIn 0.3s ease; } .wizard-page.active { display: block; } @keyframes wizardFadeIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* ================================ UPLOAD DE ARQUIVOS ================================ */ .upload-area { border: 2px dashed var(--border-color); border-radius: var(--radius); padding: 2rem; text-align: center; background: var(--background); transition: all 0.3s ease; cursor: pointer; } .upload-area:hover, .upload-area.dragover { border-color: var(--primary-color); background: var(--primary-light); } .upload-area i { font-size: 3rem; color: var(--text-tertiary); margin-bottom: 1rem; } .upload-area p { color: var(--text-secondary); margin-bottom: 0.5rem; } .upload-area small { color: var(--text-tertiary); font-size: 0.75rem; } .file-list { margin-top: 1rem; } .file-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 0.5rem; } .file-icon { width: 40px; height: 40px; background: var(--primary-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-size: 1.25rem; } .file-info { flex: 1; } .file-name { font-weight: 500; color: var(--text-primary); font-size: 0.875rem; } .file-size { font-size: 0.75rem; color: var(--text-secondary); } .file-remove { width: 32px; height: 32px; border: none; background: var(--danger-color); color: white; border-radius: var(--radius); cursor: pointer; transition: all 0.2s ease; } .file-remove:hover { background: #dc2626; transform: scale(1.1); } /* ================================ PREVIEW DE IMAGEM ================================ */ .image-preview-container { display: flex; gap: 1rem; flex-wrap: wrap; } .image-preview { position: relative; width: 120px; height: 120px; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--border-color); } .image-preview img { width: 100%; height: 100%; object-fit: cover; } .image-preview-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; gap: 0.5rem; opacity: 0; transition: opacity 0.2s ease; } .image-preview:hover .image-preview-overlay { opacity: 1; } .image-preview-btn { width: 36px; height: 36px; border: none; background: white; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .image-preview-btn:hover { transform: scale(1.1); } .image-preview-btn.delete { background: var(--danger-color); color: white; } /* ================================ SERIALS SUMMARY ================================ */ .serials-summary { display: flex; gap: 2rem; padding: 1rem 1.5rem; background: var(--background); border-radius: var(--radius); margin-bottom: 1.5rem; } .summary-stat { display: flex; align-items: center; gap: 0.75rem; } .summary-stat i { font-size: 1.5rem; color: var(--primary-color); } .summary-stat span { font-size: 0.875rem; color: var(--text-secondary); } .summary-stat strong { color: var(--text-primary); font-weight: 600; } /* ================================ SERIALS LIST ================================ */ .serials-list { margin-bottom: 1.5rem; } .modal-table.compact thead th, .modal-table.compact tbody td { padding: 0.5rem 0.75rem; font-size: 0.8125rem; } /* ================================ MODAL ACTIONS ================================ */ .modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding-top: 1rem; border-top: 1px solid var(--border-color); } /* ================================ AVATAR UPLOAD ================================ */ .avatar-upload { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; background: var(--background); border-radius: var(--radius); margin-bottom: 1.5rem; } .avatar-preview { position: relative; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 3px solid var(--border-color); } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; } .avatar-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; font-weight: 600; } .avatar-info { flex: 1; } .avatar-info h4 { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; } .avatar-info p { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 1rem; } /* ================================ FILTROS AVANÇADOS ================================ */ .filter-group { margin-bottom: 1.5rem; } .filter-group-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .filter-options { display: flex; flex-direction: column; gap: 0.5rem; } .filter-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem; border-radius: var(--radius); transition: background 0.2s ease; } .filter-checkbox:hover { background: var(--hover-bg); } .filter-checkbox input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .filter-checkbox label { cursor: pointer; font-size: 0.875rem; color: var(--text-primary); user-select: none; } /* ================================ RANGE SLIDER ================================ */ .range-slider { padding: 1rem 0; } .range-slider input[type="range"] { width: 100%; height: 6px; border-radius: 3px; background: var(--border-color); outline: none; -webkit-appearance: none; } .range-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; } .range-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; border: none; } .range-values { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem; } /* ================================ TAGS/CHIPS ================================ */ .tags-container { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius); min-height: 44px; } .tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--primary-light); color: var(--primary-color); border-radius: 999px; font-size: 0.75rem; font-weight: 500; } .tag-remove { width: 16px; height: 16px; border: none; background: none; color: var(--primary-color); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; } .tag-remove:hover { background: var(--primary-color); color: white; } /* ================================ COLOR PICKER ================================ */ .color-picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.5rem; } .color-option { width: 40px; height: 40px; border-radius: var(--radius); border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; position: relative; } .color-option:hover { transform: scale(1.1); } .color-option.selected { border-color: var(--text-primary); } .color-option.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } /* ================================ TEMA ESCURO - Ajustes ================================ */ [data-theme="dark"] .modal-table thead th { background: var(--background-gradiente1); } [data-theme="dark"] .info-section { background: linear-gradient(to bottom, var(--background-gradiente1), var(--surface)); } [data-theme="dark"] .quantity-badge { background: rgba(59, 130, 246, 0.2); } [data-theme="dark"] .upload-area { background: var(--background-gradiente1); } [data-theme="dark"] .serials-summary { background: var(--background-gradiente1); } /* ================================ TIMELINE ================================ */ .timeline { position: relative; padding: 1rem 0; } .timeline::before { content: ''; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px; background: var(--border-color); } .timeline-item { position: relative; padding-left: 70px; padding-bottom: 2rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-marker { position: absolute; left: 20px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-color); border: 3px solid var(--surface); box-shadow: 0 0 0 3px var(--border-color); z-index: 1; } .timeline-marker.success { background: var(--success-color); } .timeline-marker.warning { background: var(--warning-color); } .timeline-marker.danger { background: var(--danger-color); } .timeline-content { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1rem; } .timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .timeline-title { font-weight: 600; color: var(--text-primary); } .timeline-date { font-size: 0.75rem; color: var(--text-secondary); } .timeline-description { font-size: 0.875rem; color: var(--text-secondary); } .timeline-user { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--text-tertiary); } /* ================================ GALERIA/LIGHTBOX ================================ */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } .gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; cursor: pointer; border: 2px solid var(--border-color); transition: all 0.3s ease; } .gallery-item:hover { border-color: var(--primary-color); transform: scale(1.05); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; } .lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.95); z-index: 10000; display: none; align-items: center; justify-content: center; } .lightbox.show { display: flex; } .lightbox-content { max-width: 90vw; max-height: 90vh; position: relative; } .lightbox-image { max-width: 100%; max-height: 90vh; object-fit: contain; } .lightbox-close { position: absolute; top: -40px; right: 0; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgb(255 255 255); border: none; color: #2055df; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); } .lightbox-nav.prev { left: -70px; } .lightbox-nav.next { right: -70px; } /* ================================ SELEÇÃO MÚLTIPLA ================================ */ .selection-header { display: flex; gap: 1rem; margin-bottom: 1.5rem; align-items: center; } .selection-search { flex: 1; } .selection-counter { background: var(--primary-color); color: white; padding: 0.5rem 1rem; border-radius: var(--radius); font-weight: 600; white-space: nowrap; } .selection-list { max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius); } .selection-item { display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.2s ease; } .selection-item:last-child { border-bottom: none; } .selection-item:hover { background: var(--hover-bg); } .selection-item input[type="checkbox"] { margin-right: 1rem; width: 18px; height: 18px; } .selection-item-content { flex: 1; } .selection-item-title { font-weight: 500; color: var(--text-primary); } .selection-item-description { font-size: 0.75rem; color: var(--text-secondary); } /* ================================ MOVIMENTAÇÃO ================================ */ .movement-flow { display: flex; align-items: center; gap: 1.5rem; margin: 2rem 0; } .movement-location { flex: 1; background: var(--background); border: 2px solid var(--border-color); border-radius: var(--radius); padding: 1.5rem; text-align: center; } .movement-location.origin { border-color: var(--warning-color); } .movement-location.destination { border-color: var(--success-color); } .movement-location-label { font-size: 0.75rem; text-transform: uppercase; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; } .movement-location-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); font-family: 'Courier New', monospace; } .movement-arrow { font-size: 2rem; color: var(--primary-color); } .movement-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; } /* ================================ QR CODE/SCANNER ================================ */ .qr-container { text-align: center; padding: 2rem; } .qr-code { display: inline-block; padding: 1rem; background: white; border-radius: var(--radius); box-shadow: var(--shadow-md); } .qr-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; } .scanner-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto; aspect-ratio: 1; background: #000; border-radius: var(--radius); overflow: hidden; } .scanner-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 250px; height: 250px; border: 2px solid var(--success-color); border-radius: var(--radius); } .scanner-corners { position: absolute; width: 100%; height: 100%; } .scanner-corner { position: absolute; width: 20px; height: 20px; border: 3px solid var(--success-color); } .scanner-corner.top-left { top: -2px; left: -2px; border-right: none; border-bottom: none; } .scanner-corner.top-right { top: -2px; right: -2px; border-left: none; border-bottom: none; } .scanner-corner.bottom-left { bottom: -2px; left: -2px; border-right: none; border-top: none; } .scanner-corner.bottom-right { bottom: -2px; right: -2px; border-left: none; border-top: none; } /* ================================ COMPARAÇÃO ================================ */ .comparison-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .comparison-item { background: var(--background); border: 2px solid var(--border-color); border-radius: var(--radius); padding: 1.5rem; } .comparison-item.winner { border-color: var(--success-color); background: rgba(16, 185, 129, 0.05); } .comparison-header { text-align: center; padding-bottom: 1rem; border-bottom: 2px solid var(--border-color); margin-bottom: 1rem; } .comparison-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); } .comparison-row { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border-color); } .comparison-row:last-child { border-bottom: none; } .comparison-label { font-weight: 500; color: var(--text-secondary); } .comparison-value { font-weight: 600; color: var(--text-primary); } /* ================================ INVENTÁRIO ================================ */ .inventory-scanner { background: var(--background); border: 2px dashed var(--border-color); border-radius: var(--radius); padding: 2rem; text-align: center; margin-bottom: 1.5rem; } .inventory-scanner.active { border-color: var(--success-color); background: rgba(16, 185, 129, 0.05); } .inventory-input { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .inventory-list { max-height: 400px; overflow-y: auto; } .inventory-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); margin-bottom: 0.5rem; } .inventory-item-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--success-color); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; } .inventory-item-info { flex: 1; } .inventory-item-code { font-weight: 600; font-family: 'Courier New', monospace; } .inventory-item-qty { font-size: 0.875rem; color: var(--text-secondary); } .inventory-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.5rem; background: var(--background); border-radius: var(--radius); margin-top: 1.5rem; } .inventory-summary-item { text-align: center; } .inventory-summary-value { font-size: 2rem; font-weight: 700; color: var(--primary-color); } .inventory-summary-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; } /* ================================ MAPA DO ARMAZÉM ================================ */ .warehouse-map { background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1rem; overflow: auto; } .warehouse-grid { display: grid; gap: 0.5rem; min-width: 600px; } .warehouse-row { display: flex; gap: 0.5rem; } .warehouse-cell { width: 60px; height: 60px; border: 2px solid var(--border-color); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; background: var(--surface); } .warehouse-cell:hover { transform: scale(1.1); z-index: 10; box-shadow: var(--shadow-lg); } .warehouse-cell.empty { background: var(--background); border-style: dashed; opacity: 0.3; } .warehouse-cell.occupied { background: var(--success-color); color: white; border-color: var(--success-color); } .warehouse-cell.selected { background: var(--primary-color); color: white; border-color: var(--primary-color); } .warehouse-cell.warning { background: var(--warning-color); color: white; border-color: var(--warning-color); } .warehouse-legend { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; } .warehouse-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .warehouse-legend-color { width: 20px; height: 20px; border-radius: var(--radius-sm); border: 2px solid var(--border-color); } /* ================================ COMENTÁRIOS ================================ */ .comments-container { max-height: 500px; overflow-y: auto; } .comment-item { display: flex; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--border-color); } .comment-item:last-child { border-bottom: none; } .comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; } .comment-content { flex: 1; } .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .comment-author { font-weight: 600; color: var(--text-primary); } .comment-date { font-size: 0.75rem; color: var(--text-secondary); } .comment-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.5; } .comment-actions { display: flex; gap: 1rem; margin-top: 0.5rem; } .comment-action { background: none; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; gap: 0.25rem; transition: color 0.2s ease; } .comment-action:hover { color: var(--primary-color); } .comment-input-container { display: flex; gap: 1rem; padding: 1rem; border-top: 1px solid var(--border-color); background: var(--background); } .comment-input { flex: 1; } /* ================================ LOGS/AUDITORIA ================================ */ .log-filters { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .log-item { display: flex; gap: 1rem; padding: 1rem; border: 1px solid var(--border-color); border-left: 4px solid var(--border-color); border-radius: var(--radius); margin-bottom: 0.5rem; font-size: 0.875rem; } .log-item.info { border-left-color: var(--primary-color); } .log-item.success { border-left-color: var(--success-color); } .log-item.warning { border-left-color: var(--warning-color); } .log-item.error { border-left-color: var(--danger-color); } .log-timestamp { font-family: 'Courier New', monospace; color: var(--text-secondary); min-width: 150px; } .log-user { font-weight: 600; color: var(--text-primary); min-width: 120px; } .log-action { flex: 1; color: var(--text-secondary); } .log-badge { font-size: 0.625rem; padding: 0.25rem 0.5rem; border-radius: 999px; text-transform: uppercase; font-weight: 600; } /* ================================ MATRIZ DE PERMISSÕES ================================ */ .permissions-matrix { overflow-x: auto; } .permissions-table { width: 100%; border-collapse: collapse; } .permissions-table th, .permissions-table td { padding: 0.75rem; text-align: center; border: 1px solid var(--border-color); } .permissions-table th { background: var(--background); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; color: var(--text-secondary); } .permissions-table td:first-child { text-align: left; font-weight: 500; background: var(--background); } .permission-checkbox { width: 20px; height: 20px; cursor: pointer; } .permissions-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; } /* ================================ IMPORTAÇÃO DE DADOS ================================ */ .import-steps { display: flex; justify-content: space-between; margin-bottom: 2rem; } .import-step { flex: 1; text-align: center; position: relative; } .import-step::before { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 2px; background: var(--border-color); z-index: 0; } .import-step:first-child::before { display: none; } .import-step-number { width: 30px; height: 30px; border-radius: 50%; background: var(--border-color); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-weight: 600; font-size: 0.875rem; position: relative; z-index: 1; } .import-step.active .import-step-number { background: var(--primary-color); color: white; } .import-step.completed .import-step-number { background: var(--success-color); color: white; } .import-step-label { font-size: 0.75rem; color: var(--text-secondary); } .mapping-container { display: grid; gap: 1rem; } .mapping-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding: 1rem; background: var(--background); border-radius: var(--radius); } .mapping-arrow { color: var(--primary-color); font-size: 1.25rem; } /* ================================ EXPORTAÇÃO CUSTOMIZADA ================================ */ .export-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .export-option { background: var(--background); border: 2px solid var(--border-color); border-radius: var(--radius); padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.3s ease; } .export-option:hover { border-color: var(--primary-color); transform: translateY(-4px); box-shadow: var(--shadow-md); } .export-option.selected { border-color: var(--primary-color); background: var(--primary-light); } .export-option-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .export-option-icon.excel { color: #217346; } .export-option-icon.pdf { color: #DC3545; } .export-option-icon.csv { color: #0d6efd; } .export-option-icon.json { color: #fd7e14; } .export-option-label { font-weight: 600; color: var(--text-primary); } .export-columns { max-height: 300px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius); padding: 1rem; } /* ================================ TEMA ESCURO - Ajustes Adicionais ================================ */ [data-theme="dark"] .warehouse-cell { background: var(--background-gradiente1); } [data-theme="dark"] .lightbox { background: rgba(0, 0, 0, 0.98); } [data-theme="dark"] .qr-code { background: white; } /* ===================================================================== =============== AURORA MODAIS (override — por último) ============ Reestiliza as classes existentes p/ o design novo, SEM renomear, tudo escopado em .modal-content p/ não vazar pro resto do app. ===================================================================== */ :root { --m-ink: #11151C; --m-blue: #3B5BDB; --m-blue-d: #2F49B8; --m-tint: #EEF1FE; --m-tint-b: #E4EAFE; --m-green: #157C53; --m-green-bg: #E4F6EC; --m-grey: #9AA3B2; --m-line: #F2F4F7; --m-hline: #EEF0F4; --m-mono: 'JetBrains Mono', monospace; } /* Backdrop */ .modal { background: rgba(15, 18, 24, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* Caixa do modal */ .modal .modal-content { /* width: min(1060px, 95vw); */ max-height: 90vh; display: flex; flex-direction: column; background: #fff; border: 1px solid #E7EAEF; border-radius: 22px; box-shadow: 0 50px 110px -34px rgba(8, 11, 18, .62); overflow: hidden; font-family: 'Hanken Grotesk', -apple-system, sans-serif; } /* Header */ .modal-content .modal-header { flex: 0 0 auto; padding: 20px 24px; border-bottom: 1px solid var(--m-hline); display: flex; align-items: center; gap: 13px; background: #fff; } .modal-content .modal-title-section { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .modal-content .modal-title-section h2, .modal-content .modal-title-section h3, .modal-content .modal-title-section .modal-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--m-ink); margin: 0; border: none; padding: 0; } .modal-content .modal-subtitle { font-size: 12px; color: var(--m-grey); font-weight: 500; margin: 0; } .modal-content .modal-close { margin-left: auto; width: 34px; height: 34px; border: none; background: none; border-radius: 10px; color: #98A1B0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; } .modal-content .modal-close:hover { background: #F4F6F9; color: var(--m-ink); } /* Tabs */ .modal-content .modal-tabs { flex: 0 0 auto; display: flex; padding: 0 14px; gap: 2px; border-bottom: 1px solid var(--m-hline); background: #fff; } .modal-content .tab-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 22px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 600; color: #7C8696; transition: .15s; } .modal-content .tab-button:hover { color: #5B6473; } .modal-content .tab-button.active { color: var(--m-blue); font-weight: 800; } .modal-content .tab-button.active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--m-blue); } .modal-content .tab-badge { min-width: 20px; text-align: center; font-family: var(--m-mono); font-size: 11px; font-weight: 700; color: #98A1B0; background: #F0F2F5; border-radius: 999px; padding: 2px 7px; } .modal-content .tab-button.active .tab-badge { color: var(--m-blue); background: var(--m-tint-b); } .modal-content .tab-content { display: none; } .modal-content .tab-content.active { display: block; } /* Body */ .modal-content .modal-body { flex: 1; min-height: 200px; /* overflow: hidden; */ background: #FBFBFC; padding: 20px 24px; } /* Tabelas */ .modal-content .modal-table { width: 100%; border-collapse: collapse; } .modal-content .modal-table thead tr { background: #fff; } .modal-content .modal-table th { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--m-grey); border-bottom: 1px solid var(--m-hline); text-align: left; padding: 13px 16px; position: sticky; top: 0; background: #fff; z-index: 1; } .modal-content .modal-table td { padding: 15px 16px; border-bottom: 1px solid var(--m-line); font-size: 13px; vertical-align: middle; color: var(--m-ink); } .modal-content .modal-table tbody tr { background: #fff; transition: .13s; } .modal-content .modal-table tbody tr:hover { background: var(--m-tint); } /* Badges / pills / status */ .modal-content .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 12px; white-space: nowrap; } .modal-content .badge-primary { color: #fff; background: var(--m-blue); box-shadow: 0 6px 14px -5px rgba(59, 91, 219, .6); } .modal-content .badge-success { color: var(--m-green); background: var(--m-green-bg); border: 1px solid #C9EBD7; } .modal-content .badge-info { color: #5B73E8; background: var(--m-tint); border: 1px solid #DCE3FB; } .modal-content .status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--m-green); background: var(--m-green-bg); border: 1px solid #C9EBD7; border-radius: 999px; padding: 5px 11px; } /* Summary / stats */ .modal-content .serials-summary { display: flex; gap: 14px; flex-wrap: wrap; padding: 18px 24px; background: #FBFBFC; border-bottom: 1px solid var(--m-hline); } .modal-content .summary-stat { flex: 1; min-width: 150px; background: #fff; border: 1px solid #ECEEF2; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .modal-content .summary-stat .value, .modal-content .summary-stat strong { font-family: var(--m-mono); font-size: 22px; font-weight: 700; color: var(--m-ink); line-height: 1.1; } .modal-content .summary-stat .label, .modal-content .summary-stat small { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--m-grey); } .modal-content .material-info { font-size: 13px; color: var(--m-ink);font-weight: 600;} .modal-content .material-info .sap, .modal-content .material-info .mono { font-family: var(--m-mono); font-weight: 600; color: var(--m-blue); } /* Botões / footer */ .modal-content .modal-footer { flex: 0 0 auto; padding: 16px 22px; border-top: 1px solid var(--m-hline); background: #fff; display: flex; align-items: center; gap: 14px; } .modal-content .modal-footer-left { display: flex; align-items: center; gap: 12px; } .modal-content .modal-footer-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .modal-content .modal-actions { display: flex; align-items: center; gap: 10px; } .modal-content .btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 13px; font-weight: 700; border: none; border-radius: 11px; padding: 11px 18px; cursor: pointer; transition: .15s; } .modal-content .btn-primary { color: #fff; background: var(--m-blue); box-shadow: 0 8px 18px -8px rgba(59, 91, 219, .7); } .modal-content .btn-primary:hover { background: var(--m-blue-d); } .modal-content .btn-secondary, .modal-content .btn-light { color: #6B7484; background: #fff; border: 1px solid #E3E7ED; font-weight: 600; } .modal-content .btn-secondary:hover, .modal-content .btn-light:hover { background: #F4F6F9; } .modal-content .btn-icon { padding: 10px; width: 38px; height: 38px; justify-content: center; } .modal-content .btn-sm { padding: 8px 13px; font-size: 12px; } /* Empty state */ .modal-content .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; color: var(--m-grey); } .modal-content .empty-state i, .modal-content .empty-state svg { font-size: 30px; opacity: .5; } /* Loading */ .modal-content .modal-loading-overlay { background: rgba(255, 255, 255, .7); backdrop-filter: blur(3px); } /* ---------- DARK ---------- */ [data-theme="dark"] .modal .modal-content { background: #15181F; border-color: #2A2F3A; color: #E7EAF0; } [data-theme="dark"] .modal-content .modal-header, [data-theme="dark"] .modal-content .modal-tabs, [data-theme="dark"] .modal-content .modal-footer { background: #15181F; border-color: #242833; } [data-theme="dark"] .modal-content .modal-title-section h2, [data-theme="dark"] .modal-content .modal-title-section h3, [data-theme="dark"] .modal-content .modal-title-section .modal-title { color: #E7EAF0; } [data-theme="dark"] .modal-content .modal-close:hover { background: #1B1F27; color: #E7EAF0; } [data-theme="dark"] .modal-content .modal-body { background: #0E1014; } [data-theme="dark"] .modal-content .modal-table th { background: #15181F; color: #9AA3B2; border-color: #242833; } [data-theme="dark"] .modal-content .modal-table td { color: #E7EAF0; border-color: #20242E; } [data-theme="dark"] .modal-content .modal-table tbody tr { background: #15181F; } [data-theme="dark"] .modal-content .modal-table tbody tr:hover { background: #1B2030; } [data-theme="dark"] .modal-content .serials-summary { background: #0E1014; border-color: #242833; } [data-theme="dark"] .modal-content .summary-stat { background: #15181F; border-color: #2A2F3A; } [data-theme="dark"] .modal-content .summary-stat .value, [data-theme="dark"] .modal-content .summary-stat strong { color: #E7EAF0; } [data-theme="dark"] .modal-content .btn-secondary, [data-theme="dark"] .modal-content .btn-light { background: #1B1F27; border-color: #2A2F3A; color: #9AA3B2; } [data-theme="dark"] .modal-content .btn-secondary:hover, [data-theme="dark"] .modal-content .btn-light:hover { background: #222734; } /* ================== /AURORA MODAIS ================== */ /* ---------- Header Aurora: tile de ícone + código mono + badges à direita ---------- */ .modal-content .modal-ico { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--m-ink); color: #fff; display: flex; align-items: center; justify-content: center; } .modal-content .modal-title-section { flex: 1; } .modal-content .modal-title-section h3 .mono, .modal-content .modal-title-section .mono { font-family: var(--m-mono); } .modal-content .summary-badges { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .modal-content .summary-badges .badge { text-transform: uppercase; letter-spacing: .02em; } .modal-content .badge svg { flex: 0 0 auto; } .modal-content .modal-close svg { display: block; } .modal-content .tab-button svg { flex: 0 0 auto; } .modal-content .btn svg { flex: 0 0 auto; } .modal-content .btn-dark { color: #fff; background: var(--m-ink); } .modal-content .btn-dark:hover { background: #000; } .modal-content .modal-search-box svg { flex: 0 0 auto; color: var(--m-grey); } [data-theme="dark"] .modal-content .modal-ico { background: #242833; color: #E7EAF0; } [data-theme="dark"] .modal-content .btn-dark { background: #E7EAF0; color: #15181F; } [data-theme="dark"] .modal-content .btn-dark:hover { background: #fff; } /* ===================================================================== =========== AURORA MODAIS — REVISÃO (abas, SAP, disponível) ======= ===================================================================== */ /* Abas: à esquerda (sem flex:1), sem fundo no ativo, barra visível */ .modal-content .modal-tabs { overflow: visible; } .modal-content .tab-button { flex: 0 0 auto; min-width: 0; margin-bottom: 0; border-bottom: none; } .modal-content .tab-button:hover { background: transparent; } .modal-content .tab-button.active { background: transparent; border-bottom-color: transparent; } /* CÓD:SAP em azul + mono (o template usa ) */ .modal-content .modal-table td code { font-family: var(--m-mono); font-size: 13px; font-weight: 600; color: var(--m-blue); background: none; padding: 0; border: none; } /* DISPONÍVEL: pílula verde (estava azul) */ .modal-content .quantity-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 4px 10px; font-family: var(--m-mono); font-size: 13px; font-weight: 700; color: var(--m-green); background: var(--m-green-bg); border-radius: 8px; } /* Material: nome em destaque + descrição esmaecida */ .modal-content .material-info strong { display: block; font-weight: 600; color: var(--m-ink); font-size: 13px; } .modal-content .material-info small { color: var(--m-grey); font-size: 11.5px; } /* Cadastro "Por: x" esmaecido */ .modal-content .modal-table td small { color: #11151c; font-size: 13px;} .modal-content .modal-table td small.text-secondary { color: var(--m-grey); } /* Ação: botão azul quadrado (print) */ .modal-content .btn-quick-print-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 9px; cursor: pointer; color: #fff; background: var(--m-blue); box-shadow: 0 5px 12px -5px rgba(59, 91, 219, .7); transition: .14s; } .modal-content .btn-quick-print-icon:hover { background: var(--m-blue-d); } [data-theme="dark"] .modal-content .modal-table td code { color: #8FA6FF; } [data-theme="dark"] .modal-content .quantity-badge { color: #6FE0B8; background: rgba(21,124,83,.18); } [data-theme="dark"] .modal-content .material-info strong { color: #E7EAF0; } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · UI KIT — page header, KPIs, panels, rail ╚══════════════════════════════════════════════════════════════ */ /* ================================================================== SEÇÃO 5 · UI KIT — page header, KPIs, panel, seg-tabs, rail ================================================================== */ /* ================================================================== CAMADA 5 · UI KIT — page header, KPIs, panels, seg-tabs, rail ================================================================== */ /* ============================================================ PAGE HEADER — topo padrão de toda tela

Título

Descrição da tela
dom · 05 jul · 01:14 TrackStock / Módulo
============================================================ */ .ha-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap: 20px; } .ha-htext { display:flex; flex-direction:column; gap: 3px; } .ha-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--au-ink); } .ha-sub { font-size: 13.5px; color: var(--au-muted); } .ha-meta { display:flex; align-items:center; gap: 10px; } .ha-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--au-muted-2); } .ha-crumb { font-size: 12px; font-weight: 600; color: #6B7484; background: var(--au-surface); border: 1px solid #E6E9EF; border-radius: 8px; padding: 6px 11px; } .ha-crumb i { color: #C2C8D2; margin: 0 3px; font-style: normal; } [data-theme="dark"] .ha-crumb { background: #1B1F27; border-color: var(--au-line-2); color: var(--au-label); } /* ============================================================ KPI CARDS — grid de indicadores
+1.240

18.305

Seriais em Estoque
Fundos: azul #EEF4FE · verde #E9F8F1 · âmbar #FDF5E5 · roxo #F1EFFE · rosa #FDEFEE ============================================================ */ .ha-kpis { display:grid; grid-template-columns: repeat(5, 1fr); gap: 15px; } .kpi { display:flex; flex-direction:column; border:0; box-shadow:none; border-radius: 18px; padding: 18px; gap: 12px; transition: transform .18s ease, box-shadow .18s ease; } .kpi:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(17,21,28,.4); } .kpi-top { display:flex; align-items:center; justify-content:space-between; } .kpi-chip { display:flex; align-items:center; justify-content:center; width: 34px; height: 34px; border-radius: 10px; background: var(--au-surface); } .kpi-chip i { font-size: 15px; } .kpi-body { display:flex; flex-direction:column; gap: 3px; } .stat-value { font-family: 'JetBrains Mono', monospace; font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1; color: var(--au-ink); margin: 0; } .kpi-label { font-size: 12.5px; font-weight: 600; color: #6B6B73; } .kpi-spark { margin-top: 2px; height: 34px; } .stat-label { color: var(--text-secondary); font-size:0.875rem; } /* Pílulas de variação */ .kpi-delta, .stat-change { display:inline-flex; align-items:center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; } .kpi-delta.pos, .stat-change.positive { color: #157C53; background: #E7F7EF; } .kpi-delta.neu, .stat-change.warning { color: #92651B; background: #FBF1DD; } .kpi-delta.neg, .stat-change.negative { color: #B42318; background: #FCEBE9; } .stat-change i { font-size: 10px; } [data-theme="dark"] .kpi { background: #1B1F27 !important; } [data-theme="dark"] .kpi-chip { background: var(--au-surface); } [data-theme="dark"] .kpi-label { color: var(--au-muted); } [data-theme="dark"] .kpi-delta.pos, [data-theme="dark"] .stat-change.positive { background: rgba(31,157,107,.18); color: #5FD3A3; } [data-theme="dark"] .kpi-delta.neu, [data-theme="dark"] .stat-change.warning { background: rgba(222,138,30,.18); color: #E6B765; } [data-theme="dark"] .kpi-delta.neg, [data-theme="dark"] .stat-change.negative { background: rgba(239,91,67,.18); color: #F09384; } /* ============================================================ LAYOUT DE TELA — conteúdo principal + rail lateral
…conteúdo…
============================================================ */ .ha-grid { display:grid; align-items:flex-start; grid-template-columns: minmax(0,1fr) 330px; gap: 18px; } .ha-main { min-width:0; } .ha-rail { display:flex; flex-direction:column; gap: 14px; } /* ============================================================ PANEL — card branco genérico (container padrão de conteúdo)

Título

subtítulo
…ações à direita…
…
============================================================ */ /* --- Chart box (container de gráficos Chart.js em dashboards) --- */ .chart-box { position: relative; height: 300px; } .chart-box--wide { height: 340px; } .panel { background: var(--au-surface); border: 1px solid #ECEEF2; border-radius: 18px; overflow:hidden; } .panel-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 16px; padding: 18px 22px; border-bottom: 1px solid #F0F2F5; } .panel-head-left { display:flex; align-items:center; gap: 11px; } .panel-ico { display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; width: 34px; height: 34px; border-radius: 10px; background: var(--au-ink); } .panel-titles { display:flex; flex-direction:column; line-height: 1.2; } .panel-titles h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--au-ink); border: none; padding: 0; } .panel-sub { font-size: 12px; color: var(--au-muted-2); } .panel-body { padding: 18px 22px; } [data-theme="dark"] .panel { background: var(--au-surface); border-color: var(--au-line-2); } [data-theme="dark"] .panel-head { border-bottom-color: var(--au-line); } [data-theme="dark"] .panel-ico { background: #242833; color: #E7EAF0; } /* SEG TABS base (.seg-tabs / .seg-tab / tamanhos) agora vive no CORE · 11. Aqui fica apenas a variante mono, específica do UI Kit. */ /* Variante mono (tabs de código, ex.: ruas FF FG FH) */ .seg-tab-mono { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; color: var(--au-muted); background: var(--au-hover); border: 1px solid var(--au-line-2); border-radius: 9px; padding: 8px 14px; cursor: pointer; transition: .15s; } .seg-tab-mono:hover { color: var(--au-ink); border-color: #D7DCE5; } .seg-tab-mono.active { color: #fff; background: var(--au-ink); border-color: var(--au-ink); } [data-theme="dark"] .seg-tab-mono { background: #1B1F27; border-color: var(--au-line-2); color: var(--au-muted); } [data-theme="dark"] .seg-tab-mono.active { background: #fff; border-color: #fff; color: #11151C; } /* ============================================================ LIVE CARD — card escuro de stats em tempo real (rail) ============================================================ */ .live-card { display:flex; flex-direction:column; color:#fff; background: #13161D; border-radius: 16px; padding: 18px; gap: 14px; } .live-head { display:flex; justify-content:space-between; align-items:center; } .live-head .t { font-size: 13px; font-weight: 700; } .live-online { display:flex; align-items:center; gap: 6px; font-size: 11px; color: #8FA2FF; font-weight: 700; } .live-online .d { position:relative; width: 7px; height: 7px; } .live-online .d::before, .live-online .d::after { content: ''; position:absolute; inset:0; border-radius:9999px; background: #6E86FF; } .live-online .d::after { animation: haRing 1.8s ease-out infinite; } .live-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .live-stat { display:flex; flex-direction:column; gap: 2px; } .live-num { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; } .live-num small { color: #5B6473; font-size: 15px; } .live-cap { font-size: 11px; color: #8A93A3; } /* ============================================================ ACTIVITY FEED — timeline de atividade recente (rail) ============================================================ */ .act-card { display:flex; flex-direction:column; background: var(--au-surface); border: 1px solid #ECEEF2; border-radius: 16px; padding: 16px 18px; } .act-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; } .act-item { display:flex; gap: 11px; } .act-railc { display:flex; flex-direction:column; align-items:center; flex-shrink:0; } .act-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; } .act-bar { width: 2px; flex:1; background: #EDEFF3; } .act-body { display:flex; flex-direction:column; padding-bottom: 14px; gap: 2px; } .act-item:last-child .act-body { padding-bottom: 0; } .act-main { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--au-ink); } .act-sub { font-size: 11px; color: var(--au-muted-2); } [data-theme="dark"] .act-card { background: var(--au-surface); border-color: var(--au-line-2); } [data-theme="dark"] .act-bar { background: #2A2F3A; } /* ============================================================ QUEUE CARD — card de status positivo (tudo ok / fila zerada) ============================================================ */ .queue-card { display:flex; flex-direction:column; align-items:center; text-align:center; background: var(--au-surface); border: 1px dashed #CCEFDD; border-radius: 16px; padding: 20px; gap: 7px; } .queue-ico { display:flex; align-items:center; justify-content:center; width: 36px; height: 36px; border-radius: 10px; background: #ECFAF3; color: #157C53; font-size: 17px; } .queue-title { font-size: 13px; font-weight: 700; } .queue-sub { font-size: 11.5px; color: var(--au-muted-2); line-height: 1.4; } [data-theme="dark"] .queue-card { background: var(--au-surface); border-color: rgba(31,157,107,.4); } [data-theme="dark"] .queue-ico { background: rgba(31,157,107,.16); color: #5FD3A3; } /* ============================================================ HELPERS ============================================================ */ .mono { font-family: 'JetBrains Mono', monospace; } /* Responsivo padrão do kit */ @media (max-width: 1200px) { .ha-grid { grid-template-columns: 1fr; } } @media (max-width: 980px) { .ha-kpis { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .ha-kpis { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .live-online .d::after { animation: none; } } @keyframes haRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · UTILITIES TW — vocabulário Tailwind (telas novas) ╚══════════════════════════════════════════════════════════════ */ /* ================================================================== SEÇÃO 7 · UTILITÁRIOS — usados pelas telas novas (CSS puro) Nomes no vocabulário Tailwind. Colchetes escapados: .gap-\[22px\] ================================================================== */ .hidden { display: none !important; } .flex { display: flex; } .grid { display: grid; } .inline-flex { display: inline-flex; } .flex-col { flex-direction: column; } .flex-1 { flex: 1; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-\[7px\] { gap: 7px; } .gap-\[22px\] { gap: 22px; } .px-\[22px\] { padding-left: 22px; padding-right: 22px; } .py-\[14px\] { padding-top: 14px; padding-bottom: 14px; } .\!mb-0 { margin-bottom: 0 !important; } .ml-auto { margin-left: auto; } .border-b { border-bottom: 1px solid var(--border-color); } .border-default { border-color: var(--border-color); } .cursor-pointer { cursor: pointer; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; } .text-body { color: var(--text-primary); } .text-caption { color: var(--text-secondary); } .text-faint { color: var(--text-tertiary); } .bg-surface { background: var(--surface); } .bg-app { background: var(--background); } .rounded-card { border-radius: var(--radius-lg); } .rounded-field { border-radius: var(--radius); } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } } /* ╔══════════════════════════════════════════════════════════════ ║ MODULE · AURORA — overrides de tema (por último dos modules) ╚══════════════════════════════════════════════════════════════ */ /* ===================================================================== ============ AURORA SHELL (override — carregar por último) ======== Veste a sidebar/header/conteúdo no tema "Aurora" sem renomear classes. Mantém intactos o modelo do core.js (collapse/accordion/flutuante), o aside fixo com overflow e o body rolando (tela cheia). ===================================================================== */ :root { --au-primary: #3B5BDB; --au-primary-2: #5B73E8; --au-violet: #7C5BE8; --au-tint: #EEF1FE; --au-ink: #11151C; --au-muted: #7C8696; --au-muted-2: #9AA3B2; --au-label: #5B6473; --au-line: #EEF0F4; --au-line-2: #EAEDF2; --au-surface: #fff; --au-content: #FBFBFC; } /* Fonte global Aurora */ body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--au-content); } /* ---------- SIDEBAR ---------- */ .sidebar { background: var(--au-surface); border-right: 1px solid var(--au-line); box-shadow: none; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 14px; border-bottom: 1px solid var(--au-line); } .sidebar-header .logo-wrapper { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; } .sidebar-header .logo-wrapper i { font-size: 35px;color: #7c8696; } .brand-mark-rail { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(150deg, var(--au-primary), var(--au-primary-2)); display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; color: #fff; font-size: 17px; box-shadow: 0 6px 16px -4px rgba(59, 91, 219, .5); } .sidebar-header .logo-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; } .sidebar-header .logo-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--au-ink); } .sidebar-header .logo-title .logo-title-stock { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #7c8696; } .sidebar-header .logo-subtitle { font-size: 11px; color: var(--au-muted-2); font-family: 'JetBrains Mono', monospace; } .sidebar-toggle { width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--au-line-2); background: #fff; border-radius: 9px; color: var(--au-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .sidebar-toggle:hover { background: #F4F6F9; color: var(--au-label); } .sidebar-toggle i { font-size: 12px; transition: transform .25s; } .sidebar.collapsed .sidebar-toggle i { transform: rotate(180deg); } .sidebar-menu { padding: 10px 10px 16px; } .menu-section { display: flex; flex-direction: column; gap: 2px; } /* Item / link */ .sidebar .menu-item { position: relative; } .sidebar .menu-link { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 12px; border: none; background: none; border-radius: 11px; cursor: pointer; color: var(--au-label); font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s;background: var(--au-tint); } .sidebar .menu-link:hover { background: #F4F6F9; color: var(--au-ink); } /* indicador antigo desligado + barra Aurora */ .sidebar .menu-link.active::after { content: none; } .sidebar .menu-link::before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 3px; height: 0; border-radius: 3px; background: var(--au-primary); transition: height .16s; } .sidebar .menu-link.active, .sidebar .menu-item.open > .menu-link { background: var(--au-tint); color: var(--au-primary); font-weight: 700; } .sidebar .menu-link.active::before, .sidebar .menu-item.open > .menu-link::before { height: 22px; } .sidebar .menu-icon { display: flex; align-items: center; justify-content: center; width: 22px; flex: 0 0 auto; } .sidebar .menu-icon i { font-size: 16px; line-height: 1; } .sidebar .menu-icon svg { width: 19px; height: 19px; display: block; } .sidebar .menu-text { flex: 1; min-width: 0; text-align: left; } .sidebar .menu-arrow { margin-left: auto; display: flex; color: var(--au-muted-2); transition: transform .2s; } .sidebar .menu-arrow i { font-size: 11px; } .sidebar .menu-item.open > .menu-link .menu-arrow { transform: rotate(90deg); } /* Submenu accordion */ .sidebar .submenu { overflow: hidden; max-height: 0; transition: max-height .26s ease; margin: 2px 5px 2px 5px; border-left: 1px solid var(--au-line); padding-left: 8px; } .sidebar .menu-item.open > .submenu { max-height: 1400px; margin-top: 8px;} .sidebar .submenu-link { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--au-muted); text-decoration: none; transition: background .14s, color .14s; } .sidebar .submenu-link::before, .sidebar .submenu-link::after { content: none; } .sidebar .submenu-link i { width: 16px; font-size: 12px; opacity: .85; text-align: center; } .sidebar .submenu-link:hover, .sidebar .submenu-link.active { background: var(--au-tint); color: var(--au-primary); } .sidebar .submenu-header { display: block; padding: 10px 11px 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--au-muted-2); border: none; } /* ---------- COLAPSADA (rail de ícones + rótulo) ---------- */ .sidebar.collapsed .logo-text { display: none; } .sidebar.collapsed .sidebar-header { justify-content: center; } .sidebar.collapsed .menu-link { flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; } .sidebar.collapsed .menu-text { display: block; flex: none; font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.1; } .sidebar.collapsed .menu-arrow { display: none; } .sidebar.collapsed .menu-icon { width: auto; } .sidebar.collapsed .menu-icon i { font-size: 18px; } .sidebar.collapsed .menu-icon svg { width: 20px; height: 20px; } .sidebar.collapsed .menu-link::before { left: 4px; } /* Submenu flutuante (estado colapsado) — painel Aurora */ .sidebar.collapsed .menu-item .submenu-float { background: var(--au-surface); border: 1px solid var(--au-line-2); border-radius: 14px; box-shadow: 0 18px 40px -14px rgba(17, 21, 28, .28); padding: 8px; min-width: 210px; } .sidebar.collapsed .submenu-float .submenu-link { color: var(--au-label); } .sidebar.collapsed .submenu-float .submenu-link:hover { background: var(--au-tint); color: var(--au-primary); } .sidebar.collapsed .submenu-float .arrow-pointer { display: none; } /* tooltip do colapsado desativado — o rótulo agora aparece sob o ícone */ /* ---------- MOBILE: sem hamburger, aside permanece visível como rail ---------- */ @media (max-width: 768px) { .sidebar { transform: none !important; width: var(--sidebar-collapsed-width); } .main-wrapper { margin-left: var(--sidebar-collapsed-width) !important; } .sidebar .logo-text { display: none; } .sidebar-header { justify-content: center; } .sidebar .menu-link { flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; } .sidebar .menu-text { display: block; flex: none; font-size: 9.5px; font-weight: 600; text-align: center; line-height: 1.1; } .sidebar .menu-arrow { display: none; } .sidebar .menu-icon { width: auto; } .sidebar .menu-icon i { font-size: 18px; } .sidebar .menu-icon svg { width: 20px; height: 20px; } /* submenu vira flyout ao tocar (usa o .open do toggleSubmenu) */ .sidebar .menu-item.open > .submenu { position: absolute; left: 100%; top: 0; z-index: 60; min-width: 200px; max-height: min(70vh, 480px); overflow-y: auto; margin: 0; padding: 8px; border: 1px solid var(--au-line-2); border-left: none; border-radius: 0 12px 12px 0; background: var(--au-surface); box-shadow: 0 18px 40px -14px rgba(17, 21, 28, .28); } } /* ---------- TOPBAR ---------- */ .app-header { height: 66px; background: var(--au-surface); border-bottom: 1px solid var(--au-line); box-shadow: none; padding: 0 26px; display: flex; align-items: center; } .app-header .header-content { width: 100%; display: flex; align-items: center; gap: 16px; } .app-header .header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .app-header .header-right { display: flex; align-items: center; gap: 8px; } .app-header .menu-toggle { display: none; width: 38px; height: 38px; border: 1px solid var(--au-line-2); background: none; border-radius: 10px; color: var(--au-muted); cursor: pointer; align-items: center; justify-content: center; } .app-header .search-box { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 10px; background: #F4F6F9; border: 1px solid var(--au-line-2); border-radius: 11px; padding: 9px 14px; transition: border-color .16s, background .16s; } .app-header .search-box:focus-within { border-color: var(--au-primary); background: #fff; } .app-header .search-icon-header { color: var(--au-muted-2); font-size: 14px; } .app-header .search-input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--au-ink); } .app-header .search-input::placeholder { color: var(--au-muted-2); } .search-kbd { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #AEB6C2; background: #fff; border: 1px solid #E6E9EF; border-radius: 6px; padding: 2px 6px; } .op-status { display: flex; align-items: center; gap: 7px; background: #ECFAF3; border: 1px solid #CCEFDD; border-radius: 999px; padding: 6px 12px; margin-right: 4px; } .op-status .op-dot { position: relative; width: 7px; height: 7px; } .op-status .op-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #1F9D6B; animation: au-pulse 1.8s ease infinite; } .op-status .op-label { font-size: 12px; font-weight: 700; color: #157C53; } @keyframes au-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .app-header .header-btn { width: 38px; height: 38px; border: 1px solid var(--au-line-2); background: none; border-radius: 10px; color: var(--au-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .16s; position: relative; } .app-header .header-btn:hover { background: #F4F6F9; } .app-header .header-btn i { font-size: 16px; } .app-header .user-menu-wrapper { position: relative; } .app-header .user-menu { display: flex; align-items: center; gap: 10px; padding: 5px 11px 5px 6px; border-radius: 11px; border: 1px solid var(--au-line-2); cursor: pointer; transition: background .16s; } .app-header .user-menu:hover, .app-header .user-menu.active { background: #F4F6F9; } .app-header .user-avatar { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex: 0 0 auto; background: linear-gradient(140deg, var(--au-primary), var(--au-violet)); } .app-header .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .app-header .user-info { display: flex; flex-direction: column; line-height: 1.15; } .app-header .user-name { font-size: 13px; font-weight: 700; color: var(--au-ink); } .app-header .user-role { font-size: 11px; color: var(--au-muted-2); } .app-header .chevron-icon { color: var(--au-muted-2); transition: transform .18s; } .app-header .user-menu.active .chevron-icon { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 248px; background: var(--au-surface); border: 1px solid var(--au-line-2); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(17, 21, 28, .3); padding: 8px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s, transform .16s; z-index: 80; } .dropdown-menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown-header { padding: 8px 11px 12px; border-bottom: 1px solid var(--au-line); margin-bottom: 6px; } .dropdown-header .user-name { font-size: 13.5px; font-weight: 700; } .dropdown-email { font-size: 12px; color: var(--au-muted-2); margin-top: 2px; } .dropdown-link { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--au-label); text-decoration: none; transition: background .14s, color .14s; } .dropdown-link svg { width: 17px; height: 17px; flex: 0 0 auto; } .dropdown-link:hover { background: var(--au-tint); color: var(--au-primary); } .dropdown-link .badge { margin-left: auto; background: #EDEFF3; color: var(--au-muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; } .dropdown-link.logout { color: #B42318; } .dropdown-link.logout:hover { background: #FEECEB; color: #B42318; } .dropdown-divider { height: 1px; background: var(--au-line); margin: 6px 4px; } /* ---------- CONTEÚDO ---------- */ .app-main { background: var(--au-content); padding: 26px 28px 32px; } @media (prefers-reduced-motion: reduce) { .op-status .op-dot::after { animation: none; } } /* ================== /AURORA SHELL ================== */ /* ===================================================================== ============ AURORA SHELL — DARK MODE ============================= Ativado por (persistido via toggleThemeAjax). Redefine os tokens --au-* para o tema escuro; o resto adapta sozinho. ===================================================================== */ [data-theme="dark"] { --au-primary: #6E86FF; --au-primary-2: #5B73E8; --au-violet: #8A6BF0; --au-tint: rgb(26 32 42); --au-ink: #E7EAF0; --au-muted: #9AA3B2; --au-muted-2: #6B7280; --au-label: #AEB6C2; --au-line: #242833; --au-line-2: #2A2F3A; --au-surface: #15181F; --au-content: #0E1014; } /* Fundo da página (data-theme fica no ) */ html[data-theme="dark"] body, body[data-theme="dark"] { background: var(--au-content); color: var(--au-ink); } /* ---- Sidebar ---- */ [data-theme="dark"] .sidebar .menu-link:hover { background: #1B1F27; color: var(--au-ink); } [data-theme="dark"] .sidebar-toggle { background: #1B1F27; border-color: var(--au-line-2); color: var(--au-muted); } [data-theme="dark"] .sidebar-toggle:hover { background: #222734; } [data-theme="dark"] .sidebar .submenu-link:hover, [data-theme="dark"] .sidebar .menu-link.active, [data-theme="dark"] .sidebar .menu-item.open > .menu-link { background: var(--au-tint); color: var(--au-primary); } [data-theme="dark"] .sidebar.collapsed .submenu-float { background: var(--au-surface); border-color: var(--au-line-2); } /* ---- Topbar ---- */ [data-theme="dark"] .app-header .search-box { background: #1B1F27; border-color: var(--au-line-2); } [data-theme="dark"] .app-header .search-box:focus-within { background: #20242E; border-color: var(--au-primary); } [data-theme="dark"] .search-kbd { background: #20242E; border-color: var(--au-line-2); color: var(--au-muted); } [data-theme="dark"] .app-header .header-btn { border-color: var(--au-line-2); color: var(--au-muted); } [data-theme="dark"] .app-header .header-btn:hover { background: #1B1F27; } [data-theme="dark"] .app-header .menu-toggle { border-color: var(--au-line-2); color: var(--au-muted); } [data-theme="dark"] .app-header .user-menu { border-color: var(--au-line-2); } [data-theme="dark"] .app-header .user-menu:hover, [data-theme="dark"] .app-header .user-menu.active { background: #1B1F27; } [data-theme="dark"] .dropdown-link .badge { background: #20242E; color: var(--au-muted); } /* ---- Home: page-header ---- */ [data-theme="dark"] .home-aurora .ha-crumb { background: #1B1F27; border-color: var(--au-line-2); color: var(--au-label); } /* ---- Home: KPIs (tint inline precisa de !important) ---- */ [data-theme="dark"] .home-aurora .kpi { background: #1B1F27 !important; } [data-theme="dark"] .home-aurora .kpi-chip { background: #15181F; } [data-theme="dark"] .home-aurora .kpi-label { color: var(--au-muted); } [data-theme="dark"] .home-aurora .kpi-delta.pos, [data-theme="dark"] .home-aurora .stat-change.positive { background: rgba(31,157,107,.18); color: #5FD3A3; } [data-theme="dark"] .home-aurora .kpi-delta.neu, [data-theme="dark"] .home-aurora .stat-change.warning { background: rgba(222,138,30,.18); color: #E6B765; } [data-theme="dark"] .home-aurora .kpi-delta.neg, [data-theme="dark"] .home-aurora .stat-change.negative { background: rgba(239,91,67,.18); color: #F09384; } /* ---- Home: cards do right rail ---- */ [data-theme="dark"] .home-aurora .act-card { background: var(--au-surface); border-color: var(--au-line-2); } [data-theme="dark"] .home-aurora .act-bar { background: #2A2F3A; } [data-theme="dark"] .home-aurora .queue-card { background: var(--au-surface); border-color: rgba(31,157,107,.4); } [data-theme="dark"] .home-aurora .queue-ico { background: rgba(31,157,107,.16); color: #5FD3A3; } /* .live-card já é escuro por design — mantém */ /* ================== /AURORA SHELL — DARK MODE ================== */ /* ╔══════════════════════════════════════════════════════════════ ║ LEGACY · THEME — remover conforme telas migram para o core ╚══════════════════════════════════════════════════════════════ */ /* Status Badge específico */ .status-badge { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25px; color: white; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; text-align: center; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-secondary); } .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg-overlay); display: flex; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(5px); } .loading-spinner { width: 50px; height: 50px; border: 3px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; } .stats-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .stat-content { flex: 1; position: relative; z-index: 1; } .stat-change { margin-top: 0.5rem; font-size: 0.75rem; display: flex; align-items: center; gap: 0.25rem; } .stat-change.positive { color: var(--success-color); } .stat-change.negative { color: var(--danger-color); } /* ======================================== CONTENT CARD ======================================== */ .content-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-md); overflow: hidden; margin-bottom: 2rem; transition: all 0.3s ease; } .content-card:hover { box-shadow: var(--shadow-lg); } /* .card-header { background: linear-gradient(135deg, var(--background-gradiente1) 0%, var(--background-gradiente2) 100%); color: white; padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; } .card-header h3 { font-size: 1.25rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 0.75rem; color:var(--text-primary); } */ .card-actions { display: flex; gap: 0.5rem; } /* ======================================== ACTION BUTTONS ======================================== */ .actions-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; } .action-button { background: var(--surface); border: 2px solid var(--border-color); border-radius: var(--radius); padding: 1.5rem; text-align: center; text-decoration: none; color: var(--text-secondary); transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; cursor: pointer; position: relative; overflow: hidden; } .action-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)); transform: translateX(-100%); transition: transform 0.3s; } .action-button:hover { border-color: var(--primary-color); box-shadow: var(--shadow-lg); transform: translateY(-4px); background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), transparent); } .action-button:hover::before { transform: translateX(0); } .action-icon { font-size: 2rem; color: var(--icon-color); } .action-text { font-weight: 500; font-size: 0.875rem; } .data-table { width: 100%; border-collapse: collapse; background: var(--surface); } .data-table th { background: var(--background); padding: 0.75rem 1rem; text-align: left; font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--border-color); } .data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); font-size: 0.875rem; } .data-table tbody tr { transition: all 0.2s; } .data-table tbody tr:hover { background: var(--background); } .btn-light { color: var(--text-primary); background-color: var(--background); border-color: var(--border-color); } /* Dashboard Grid */ .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } /* Activities List */ .activities-list { display: flex; flex-direction: column; gap: 0.75rem; } .activity-item { display: flex; gap: 1rem; padding: 1rem; border-radius: 0.5rem; transition: all 0.2s; background: var(--background); } .activity-item:hover { background: #f3f4f6; } .activity-icon { font-size: 1.25rem; color: var(--primary-color); } .activity-content { flex: 1; } .activity-description { font-size: 0.875rem; margin-bottom: 0.25rem; color: var(--text-primary); } .activity-meta { display: flex; gap: 1rem; font-size: 0.8125rem; color: var(--text-secondary); } /* Loading */ .loading-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Mobile Overlay */ .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0; transition: opacity 0.3s ease; } .sidebar-overlay.show { display: block; opacity: 1; } .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 2rem; min-height: 300px; } .loading-container .spinner-border { width: 3rem; height: 3rem; border-width: 0.3rem; border-color: #e5e7eb; border-top-color: #3b82f6; } .loading-container p { margin-top: 1rem; color: #6b7280; font-size: 0.875rem; } .info-section { background: linear-gradient(to bottom, #f9fafb, #ffffff); padding: 1.5rem; border-bottom: 1px solid #e5e7eb; } .section-title { font-size: 1rem; font-weight: 600; color: #374151; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .section-title i { color: #3b82f6; font-size: 1.125rem; } .info-grid { display: grid; grid-template-columns: auto auto auto auto; gap: 1rem; } /* .info-item { display: flex; align-items: center; padding: 0.75rem; background: white; border-radius: 0.5rem; border: 1px solid #e5e7eb; transition: all 0.2s; } */ .info-item:hover { border-color: #3b82f6; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1); } .info-label { font-weight: 600; color: #6b7280; margin-right: 0.75rem; min-width: 100px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.025em; } .info-value { color: #111827; font-weight: 500; flex: 1; } .ocupacao-display { display: flex; align-items: center; gap: 0.75rem; width: 100%; } .ocupacao-display .progress { flex: 1; height: 10px; background: #e5e7eb; border-radius: 5px; overflow: hidden; } .ocupacao-display .progress-bar { height: 100%; background: linear-gradient(90deg, #10b981, #059669); transition: width 0.3s ease; } /* ======================================== ANIMATIONS ======================================== */ /* @keyframes fadeIn — duplicado removido, definição única no CORE·10 */ /* @keyframes slideUp — duplicado removido, definição única no CORE·10 */